/* ==========================================================================
   AI চ্যাটবট — widget styles. Reads only --s-* / token variables so it
   matches the rest of the platform automatically.
   ========================================================================== */
#ai-tutor-root{
  font-family:var(--bn);
  /* Clears the fixed bottom .actionbar (var(--bar-h), shown during a run step)
     with a comfortable gap above it, on every view — not just where the bar
     happens to be visible. */
  --ai-fab-h:46px;
  --ai-fab-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + 20px);
}
.ai-tutor-icon-img{ display:block; object-fit:contain; }

/* ---- FAB ----------------------------------------------------------------
   Marigold accent (--s-acc), the same gradient the platform's own primary
   CTA (.btn-a — "মডিউল শুরু করুন") uses. Everything else in the chrome is
   petrol blue, so this is the one warm, attention-getting color in the
   system — using it here (sparingly, on one floating control) is what makes
   the button pop without inventing an off-brand color. */
#ai-tutor-fab{
  position:fixed; right:var(--s5); bottom:var(--ai-fab-bottom); z-index:101;
  display:flex; align-items:center; gap:7px;
  height:var(--ai-fab-h); padding:0 var(--s45) 0 var(--s3);
  border:none; border-radius:var(--r-full);
  background:linear-gradient(180deg,#D8A26A,var(--s-acc)); color:var(--s-onacc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -6px rgba(127,67,16,.55), 0 0 0 5px var(--s-acc-soft);
  cursor:pointer;
  transition:transform var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease), background var(--m-fast) var(--ease), bottom var(--m-base) var(--ease);
  animation:ai-fab-pulse 2.6s ease-in-out infinite;
}
#ai-tutor-fab:hover{
  background:linear-gradient(180deg,#D0985F,var(--s-acc-h));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -6px rgba(127,67,16,.6), 0 0 0 6px var(--s-acc-soft);
  transform:translateY(-2px);
}
#ai-tutor-fab:focus-visible{ outline:3px solid var(--s-ring); outline-offset:3px; }
#ai-tutor-fab .ai-tutor-icon-img{ width:24px; height:24px; flex:0 0 auto; }
#ai-tutor-fab .ai-tutor-fab-label{
  font-size:var(--fs-ui); font-weight:600; color:var(--s-onacc); white-space:nowrap;
}
#ai-tutor-fab.is-open{
  background:linear-gradient(180deg,#D0985F,var(--s-acc-h)); animation:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 18px -6px rgba(127,67,16,.5);
}
@media (max-width:520px){
  #ai-tutor-fab{ right:var(--s4); padding:0; width:var(--ai-fab-h); justify-content:center; }
  #ai-tutor-fab .ai-tutor-fab-label{ display:none; }
}
@keyframes ai-fab-pulse{
  0%, 100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -6px rgba(127,67,16,.55), 0 0 0 5px var(--s-acc-soft); }
  50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -6px rgba(127,67,16,.55), 0 0 0 9px var(--s-acc-soft); }
}
@media (prefers-reduced-motion: reduce){
  #ai-tutor-fab{ animation:none; }
}

/* ---- Panel ---------------------------------------------------------------- */
#ai-chat-panel{
  position:fixed; right:var(--s5); bottom:calc(var(--ai-fab-bottom) + var(--ai-fab-h) + var(--s3)); z-index:102;
  width:388px; max-width:calc(100vw - 2 * var(--s4));
  height:min(640px, calc(100vh - var(--header-h) - var(--ai-fab-bottom) - var(--ai-fab-h) - 40px));
  min-height:450px;
  display:flex; flex-direction:column;
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--r-xl);
  box-shadow:var(--s-sh3); overflow:hidden;
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
  transition:opacity var(--m-base) var(--ease), transform var(--m-base) var(--ease);
}
#ai-chat-panel.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
@media (max-width:520px){
  #ai-chat-panel{
    right:var(--s2); left:var(--s2);
    bottom:calc(var(--ai-fab-bottom) + var(--ai-fab-h) + var(--s2));
    width:auto; height:min(68vh, 600px); min-height:450px;
  }
}

.ai-chat-header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:var(--s3) var(--s4); background:var(--s-brand-a); color:var(--s-onbrand);
  flex:0 0 auto;
}
.ai-chat-title-wrap{ display:flex; align-items:center; gap:var(--s2); min-width:0; }
.ai-chat-header .ai-chat-avatar{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--r-full);
  background:rgba(255,255,255,.16); flex:0 0 auto; overflow:hidden;
}
.ai-chat-header .ai-chat-avatar .ai-tutor-icon-img{ width:26px; height:26px; }
.ai-chat-header h2{ font-size:var(--fs-ui); font-weight:600; margin:0; line-height:1.3; color:var(--s-on-dark); }
.ai-chat-subtitle{ font-size:var(--fs-caption); margin:0; color:rgba(255,255,255,.78); line-height:1.3; }
.ai-chat-header-actions{ display:flex; align-items:center; gap:var(--s1); flex:0 0 auto; }
.ai-chat-header-actions button{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border:none; border-radius:var(--r-full);
  background:transparent; color:var(--s-onbrand); cursor:pointer;
  transition:background var(--m-fast) var(--ease);
}
.ai-chat-header-actions button:hover{ background:rgba(255,255,255,.16); }
.ai-chat-header-actions button:focus-visible{ outline:2px solid #fff; outline-offset:1px; }
.ai-chat-header-actions i{ width:16px; height:16px; }

#ai-chat-messages{
  flex:1 1 auto; overflow-y:auto; padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s3);
  background:var(--s-canvas);
}
.ai-chat-msg{ display:flex; gap:var(--s2); align-items:flex-start; max-width:92%; }
.ai-chat-msg.is-user{ align-self:flex-end; flex-direction:row-reverse; max-width:88%; }
.ai-chat-msg .ai-chat-avatar{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:28px; height:28px; border-radius:var(--r-full); overflow:hidden;
  background:var(--s-brand-pale); color:var(--s-brand-h); margin-top:2px;
}
.ai-chat-msg .ai-chat-avatar .ai-tutor-icon-img{ width:22px; height:22px; }
.ai-chat-bubble{
  font-size:var(--fs-ui); line-height:1.6; padding:var(--s2) var(--s3);
  border-radius:var(--r-lg); word-break:break-word;
  color:var(--s-tx); background:var(--s-elev); border:1px solid var(--s-line);
}
.ai-chat-msg.is-user .ai-chat-bubble{
  background:var(--s-brand-a); color:var(--s-onbrand); border-color:var(--s-brand-a);
  border-bottom-right-radius:var(--r-xs);
}
.ai-chat-msg.is-bot .ai-chat-bubble{ border-bottom-left-radius:var(--r-xs); }
.ai-chat-bubble strong{ color:var(--s-brand-h); }
.ai-chat-msg.is-user .ai-chat-bubble strong{ color:var(--s-on-dark); }

.ai-chat-dot{
  display:inline-block; width:6px; height:6px; margin:0 2px; border-radius:var(--r-full);
  background:var(--s-mute); animation:ai-chat-blink 1.1s infinite ease-in-out;
}
.ai-chat-dot:nth-child(2){ animation-delay:.15s; }
.ai-chat-dot:nth-child(3){ animation-delay:.3s; }
@keyframes ai-chat-blink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }

.ai-chat-suggestions{
  display:flex; flex-wrap:wrap; gap:var(--s2); padding:0 var(--s4) var(--s2);
  flex:0 0 auto; background:var(--s-canvas);
}
.ai-chat-suggest-btn{
  font-family:var(--bn); font-size:var(--fs-caption); line-height:1.3; text-align:right;
  padding:var(--s1) var(--s3); border-radius:var(--r-full);
  border:1px solid var(--s-brand-tint); background:var(--s-brand-pale); color:var(--s-brand-h);
  cursor:pointer; transition:background var(--m-fast) var(--ease);
}
.ai-chat-suggest-btn:hover{ background:var(--s-brand-tint); }

.ai-chat-form{
  display:flex; align-items:flex-end; gap:var(--s2);
  padding:var(--s3) var(--s4); border-top:1px solid var(--s-line);
  background:var(--s-surface); flex:0 0 auto;
}
.ai-chat-form textarea{
  flex:1 1 auto; resize:none; max-height:120px; min-height:38px;
  font-family:var(--bn); font-size:var(--fs-ui); line-height:1.5; color:var(--s-tx);
  padding:var(--s2) var(--s3); border-radius:var(--r-lg); border:1px solid var(--s-line-mid);
  background:var(--s-canvas);
}
.ai-chat-form textarea:focus-visible{ outline:2px solid var(--s-brand); outline-offset:1px; }
#ai-chat-send-btn{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:none; border-radius:var(--r-full);
  background:var(--s-brand-a); color:var(--s-on-dark); cursor:pointer;
  transition:background var(--m-fast) var(--ease), opacity var(--m-fast) var(--ease);
}
#ai-chat-send-btn:hover{ background:var(--s-brand-h); }
#ai-chat-send-btn:disabled{ opacity:.5; cursor:default; }
#ai-chat-send-btn i{ width:17px; height:17px; }

.ai-chat-quota{
  margin:0; padding:0 var(--s4) var(--s2); font-size:var(--fs-caption); color:var(--s-mute);
  text-align:center; flex:0 0 auto; background:var(--s-surface);
}
.ai-chat-quota.is-warn{ color:var(--s-warn-tx); }
.ai-chat-quota.is-blocked{ color:var(--s-bad-tx); }

body.grain #ai-tutor-root .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  #ai-tutor-fab, #ai-chat-panel{ transition:none; }
  .ai-chat-dot{ animation:none; opacity:.7; }
}