/* Modern GPT-like card + animated typing */
#agri-gpt-pro { max-width: 1040px; margin: 24px auto; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:#e8efff; }
.gpt-card { background:#0b0f19; border:1px solid #152238; border-radius:18px; padding:18px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.gpt-head { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.gpt-orb { width:46px; height:46px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #22d3ee, #7c3aed); position:relative; overflow:hidden; }
.gpt-orb::after{ content:""; position:absolute; inset:0; background: conic-gradient(from 0deg, transparent 0 70%, rgba(255,255,255,.2) 70% 100%); animation: spin 5.5s linear infinite; }
@keyframes spin{ to { transform: rotate(360deg);} }
.typing { display:inline-flex; gap:6px; margin-left:auto; }
.typing span { width:6px; height:6px; border-radius:50%; background:#a5b4fc; opacity:.55; animation: bounce 1s infinite; }
.typing span:nth-child(2){ animation-delay:.15s; } .typing span:nth-child(3){ animation-delay:.3s; }
@keyframes bounce { 0%,80%,100%{ transform: translateY(0);} 40%{ transform: translateY(-5px);} }

.gpt-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; }
@media (max-width: 920px){ .gpt-grid{ grid-template-columns: 1fr; } }

.chat{ background:#0e1626; border:1px solid #1b2a45; border-radius:14px; padding:12px; max-height:360px; overflow:auto; }
.bubble{ background:#0b1324; border:1px solid #183055; border-radius:12px; padding:10px 12px; margin:8px 0; font-size:14px; }
.bubble.user{ background:#09162d; border-color:#16345e; }

.form{ background:#0e1626; border:1px solid #1b2a45; border-radius:14px; padding:12px; }
.row{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
.row input{ width:100%; background:#0b1324; border:1px solid #1e2f52; border-radius:10px; color:#e8efff; padding:10px 12px; }
.lbl{ font-size:12px; opacity:.9; display:block; margin:0 0 6px 0; }
.actions{ display:flex; gap:10px; margin-top:10px; }
.btn{ background:#4f46e5; border:none; color:#fff; padding:10px 14px; border-radius:12px; cursor:pointer; }
.btn.secondary{ background:#1f2937; }
.table{ width:100%; border-collapse: collapse; margin-top:10px; }
.table th, .table td{ border-bottom:1px solid #1b2a45; padding:8px; text-align:left; font-size:14px; }
.small{ font-size:12px; opacity:.8; margin-top:6px; }
.toggle{ display:flex; align-items:center; gap:8px; margin-top:6px; font-size:12px; opacity:.9; }
.switch{ width:36px; height:20px; border-radius:999px; background:#1f2937; position:relative; cursor:pointer; }
.switch::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#e8efff; transition: all .2s; }
.switch.on{ background:#22c55e; } .switch.on::after{ left:18px; }