/*
  BAJ Farm — AI Assistant styles (additive, BAJ green/gold identity)
  Designed & Developed by: Babatunde Adedeji Adelaja · 2026 · v1.0.0
  Launcher sits bottom-LEFT so it never collides with the Quick Record (+) FAB
  on the bottom-right. Fully self-contained; no impact on existing UI.
*/
#bajAiLaunch{
  position:fixed; left:16px; bottom:16px; z-index:940;
  width:56px; height:56px; border-radius:50%; border:1px solid rgba(224,169,74,.5); cursor:pointer;
  background:radial-gradient(120% 120% at 30% 20%, #0b4d3a, #063d2a);
  color:#f0b64a; font-size:24px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.6), 0 0 0 3px rgba(224,169,74,.12);
  transition:transform .18s ease, box-shadow .2s ease;
}
#bajAiLaunch:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(0,0,0,.7), 0 0 22px -6px rgba(224,169,74,.5); }
#bajAiLaunch:active{ transform:scale(.94); }

#bajAiPanel{
  position:fixed; z-index:1001; right:20px; bottom:20px; width:390px; max-width:calc(100vw - 32px);
  height:min(620px, 78vh); display:flex; flex-direction:column; overflow:hidden;
  background:#0a2e20; border:1px solid rgba(224,169,74,.30); border-radius:18px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(224,169,74,.06);
  transform:translateY(24px) scale(.98); opacity:0; pointer-events:none;
  transition:transform .26s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
#bajAiPanel.on{ transform:none; opacity:1; pointer-events:auto; }

.baj-ai-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
  background:linear-gradient(180deg,#0f3d2c,#0a2e20); border-bottom:1px solid rgba(224,169,74,.22); }
.baj-ai-title{ font-family:'Cormorant Garamond',Georgia,serif; font-size:19px; color:#f3efe3; font-weight:700; display:flex; align-items:center; gap:8px; }
.baj-ai-title em{ font-style:italic; color:#f0b64a; font-weight:600; }
.baj-ai-x{ background:rgba(255,255,255,.08); border:none; color:#cfe0d5; width:34px; height:34px; border-radius:50%; font-size:15px; cursor:pointer; }
.baj-ai-x:hover{ background:rgba(255,255,255,.16); }

.baj-ai-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:
  radial-gradient(120% 60% at 50% 0%, rgba(224,169,74,.05), transparent 60%), #082419; }
.baj-ai-msg{ display:flex; }
.baj-ai-msg.user{ justify-content:flex-end; }
.baj-ai-bub{ max-width:84%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.5; white-space:normal; }
.baj-ai-msg.assistant .baj-ai-bub{ background:#12352780; border:1px solid rgba(224,169,74,.16); color:#e7f2ea; border-top-left-radius:4px; }
.baj-ai-msg.user .baj-ai-bub{ background:linear-gradient(135deg,#e0a94a,#c1872f); color:#08251a; font-weight:600; border-top-right-radius:4px; }
.baj-ai-msg.typing .baj-ai-bub{ color:#9fc4b0; letter-spacing:2px; }

.baj-ai-chips{ display:flex; gap:8px; overflow-x:auto; padding:8px 12px; border-top:1px solid rgba(224,169,74,.12); background:#0a2e20; -webkit-overflow-scrolling:touch; }
.baj-ai-chip{ flex:0 0 auto; background:rgba(224,169,74,.12); border:1px solid rgba(224,169,74,.32); color:#f3e4c4;
  border-radius:999px; padding:8px 13px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; min-height:36px; }
.baj-ai-chip:active{ background:rgba(224,169,74,.22); }

.baj-ai-input{ display:flex; gap:8px; padding:12px; border-top:1px solid rgba(224,169,74,.16); background:#0a2e20; }
.baj-ai-input input{ flex:1; background:#0f3d2c; border:1px solid rgba(224,169,74,.28); color:#f3efe3; border-radius:12px; padding:12px 14px; font-size:15px; }
.baj-ai-input input::placeholder{ color:#7fae98; }
.baj-ai-input button{ background:var(--baj-gold,#e0a94a); color:#063d2a; border:none; border-radius:12px; width:48px; font-size:16px; font-weight:800; cursor:pointer; }

/* Mobile: full-screen sheet; launcher clears the bottom nav + safe area */
@media (max-width:768px){
  #bajAiLaunch{ left:14px; bottom:calc(72px + env(safe-area-inset-bottom,0px)); width:52px; height:52px; font-size:22px; }
  #bajAiPanel{ right:0; left:0; bottom:0; width:100vw; max-width:100vw; height:88vh; border-radius:18px 18px 0 0;
    transform:translateY(100%); }
  #bajAiPanel.on{ transform:none; }
  .baj-ai-input input{ font-size:16px; } /* prevent iOS zoom */
}

/* ===================== Phase 3 — AI settings + streaming ===================== */
.baj-ai-gear{ background:rgba(255,255,255,.08); border:none; color:#cfe0d5; width:34px; height:34px; border-radius:50%; font-size:15px; cursor:pointer; margin-right:6px; }
.baj-ai-gear:hover{ background:rgba(255,255,255,.16); color:#f0b64a; }
#bajAiSettings{ position:fixed; inset:0; z-index:1010; background:rgba(6,20,14,.6); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
#bajAiSettings.on{ opacity:1; }
#bajAiSettings .ais-card{ width:420px; max-width:calc(100vw - 24px); max-height:88vh; overflow:auto; background:#0a2e20; border:1px solid rgba(224,169,74,.3); border-radius:16px; box-shadow:0 40px 100px -30px rgba(0,0,0,.8); transform:translateY(14px); transition:transform .22s; }
#bajAiSettings.on .ais-card{ transform:none; }
.ais-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(224,169,74,.2); background:linear-gradient(180deg,#0f3d2c,#0a2e20); }
.ais-head b{ color:#f3efe3; font-size:15px; }
.ais-x{ background:rgba(255,255,255,.08); border:none; color:#cfe0d5; width:32px; height:32px; border-radius:50%; cursor:pointer; }
.ais-body{ padding:14px 16px; }
.ais-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; color:#dbe8df; font-size:13px; }
.ais-row span{ flex:0 0 42%; }
.ais-row em{ color:#f0b64a; font-style:normal; font-weight:700; }
.ais-row select, .ais-row input[type=text], .ais-row input:not([type]), .ais-row input[type=number]{ flex:1; background:#0f3d2c; border:1px solid rgba(224,169,74,.28); color:#f3efe3; border-radius:10px; padding:9px 11px; font-size:14px; }
.ais-row.ais-toggle{ font-weight:700; color:#f3efe3; }
.ais-row input[type=range]{ flex:1; }
.ais-note{ font-size:11.5px; color:#9fc4b0; line-height:1.5; margin:0 0 12px; }
.ais-note.ais-sec{ color:#c9dccf; background:rgba(224,169,74,.08); border:1px solid rgba(224,169,74,.2); border-radius:10px; padding:9px 11px; }
.ais-note code{ color:#f0b64a; }
.ais-usage{ font-size:11.5px; color:#8fae9d; border-top:1px dashed rgba(224,169,74,.2); padding-top:10px; }
.ais-status{ font-size:12.5px; margin-top:8px; min-height:16px; color:#cfe0d5; }
.ais-status.ok{ color:#7fe3ab; } .ais-status.err{ color:#ff9b9b; }
.ais-foot{ display:flex; gap:8px; justify-content:flex-end; padding:12px 16px; border-top:1px solid rgba(224,169,74,.2); }
.ais-btn{ min-height:42px; border-radius:10px; padding:0 16px; font-weight:800; font-size:13.5px; border:none; cursor:pointer; }
.ais-btn.ghost{ background:#fff; color:#0b4d3a; border:1px solid #0b4d3a; }
.ais-btn.gold{ background:var(--baj-gold,#e0a94a); color:#063d2a; }
@media (max-width:768px){ #bajAiSettings .ais-card{ width:100vw; max-width:100vw; height:100%; max-height:100vh; border-radius:0; } }