/* ==========================================================================
   MulVidyaAi widget styles — launcher button + chat overlay.

   Standalone on purpose (mirrors assets/mulvidya-ai-chat.js, which attaches
   itself to any page with a ".brand" header with no other markup required):
   every design-token var() below carries its own fallback value, so this
   file styles the widget correctly on pages that load style.css (whose
   :root tokens it will happily use instead) AND on standalone pages (the
   Grammar/Vocab/Writing/Exam series) that define their own unrelated
   :root tokens and never linked style.css. Include this file on every page
   that includes assets/mulvidya-ai-chat.js.
   ========================================================================== */

/* ==========================================================================
   MulVidyaAi — floating assistant launcher + chat overlay
   (assets/mulvidya-ai-chat.js injects the markup; this file styles it)
   ========================================================================== */

/* Same convention style.css already uses for its own components (see the
   comment above its own `[hidden]{ display:none !important; }` rule): any
   author rule that sets `display` unconditionally on a `hidden`-toggled
   element wins the cascade over the browser's built-in `[hidden]` rule,
   silently breaking that element's show/hide entirely. style.css's guard
   only reaches the 4 pages that load style.css — the Grammar/Exam/Vocab/
   Writing series pages don't, so this restates the same guard here so
   every page that includes this widget (all 8) is protected the same way,
   regardless of whether it happens to load style.css too. */
[hidden]{ display: none !important; }

.mva-ai-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.mva-ai-btn-ring{
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  background: conic-gradient(from 0deg, var(--accent, #F2A93B), var(--accent-3, #5FCFC3), var(--accent-2, #9C8CF0), var(--accent, #F2A93B));
  opacity: .55;
  filter: blur(7px);
  animation: mva-ring-spin 5s linear infinite;
}
@keyframes mva-ring-spin{ to{ transform: rotate(360deg); } }
.mva-ai-btn-core{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent, #F2A93B), var(--accent-2, #9C8CF0));
  color: var(--accent-ink, #12131E);
  font-family: var(--font-display, 'Space Grotesk','Noto Sans Bengali','Noto Sans Devanagari','Segoe UI',sans-serif);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .01em;
  box-shadow: var(--shadow-md, 0 10px 26px rgba(0,0,0,.45));
  transition: transform .18s ease, box-shadow .18s ease;
  animation: mva-btn-pulse 2.6s ease-in-out infinite;
}
.mva-ai-btn:hover .mva-ai-btn-core{
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-lg, 0 24px 50px rgba(0,0,0,.55));
}
.mva-ai-btn:active .mva-ai-btn-core{ transform: translateY(0) scale(.98); }
@keyframes mva-btn-pulse{
  0%, 100%{ box-shadow: var(--shadow-md, 0 10px 26px rgba(0,0,0,.45)), 0 0 0 0 color-mix(in srgb, var(--accent, #F2A93B) 45%, transparent); }
  50%{ box-shadow: var(--shadow-md, 0 10px 26px rgba(0,0,0,.45)), 0 0 0 6px color-mix(in srgb, var(--accent, #F2A93B) 0%, transparent); }
}
.mva-ai-btn-icon{
  width: 17px;
  height: 17px;
  fill: var(--accent-ink, #12131E);
  flex-shrink: 0;
  animation: mva-sparkle-twinkle 2.4s ease-in-out infinite;
}
@keyframes mva-sparkle-twinkle{
  0%, 100%{ opacity: 1; transform: scale(1) rotate(0deg); }
  50%{ opacity: .75; transform: scale(.88) rotate(-8deg); }
}
.mva-ai-btn-text{ white-space: nowrap; }

@media (prefers-reduced-motion: reduce){
  .mva-ai-btn-ring, .mva-ai-btn-core, .mva-ai-btn-icon{ animation: none; }
}

@media (max-width: 760px){
  .mva-ai-btn-core{ padding: 8px 12px; }
}
@media (max-width: 480px){
  .mva-ai-btn{ margin-left: 6px; }
  .mva-ai-btn-core{ padding: 8px 9px; gap: 0; }
  .mva-ai-btn-text{ display: none; }
}

/* ---------------------------------------------------------------- overlay */

body.mva-chat-open{ overflow: hidden; }

/* Visibility is driven by the .mva-open class the JS toggles, NOT by the
   [hidden] attribute alone. [hidden]'s implicit `display:none` is a
   user-agent-origin rule, and ANY normal author-origin declaration for
   `display` — even this one class selector — always wins over it in the
   cascade regardless of specificity or source order. Relying on `hidden`
   here while also setting `display:flex` meant the panel could never
   actually be hidden once this stylesheet loaded: opening worked (JS
   still flips `hidden`, so screen readers/focus behave correctly) but
   closing silently failed, and the panel could appear pre-populated with
   nothing in it before openChat() ever ran. See mulvidya-ai-chat.js
   openChat()/closeChat().  */
.mva-chat-overlay{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: color-mix(in srgb, #08080f 62%, transparent);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.mva-chat-overlay.mva-open{
  display: flex;
  animation: mva-fade-in .18s ease;
}
@keyframes mva-fade-in{ from{ opacity: 0; } to{ opacity: 1; } }

.mva-chat-panel{
  width: 100%;
  max-width: 760px;
  height: min(84vh, 820px);
  background: var(--surface, #191A2A);
  border: 1px solid var(--border, #2C2E45);
  border-radius: var(--radius-lg, 24px);
  box-shadow: var(--shadow-lg, 0 24px 50px rgba(0,0,0,.55));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mva-panel-in .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes mva-panel-in{
  from{ opacity: 0; transform: translateY(14px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

.mva-chat-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #2C2E45);
  flex-shrink: 0;
}
.mva-chat-title{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.mva-chat-orb{
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent, #F2A93B), var(--accent-2, #9C8CF0));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.35));
}
.mva-chat-orb svg{ width: 17px; height: 17px; fill: var(--accent-ink, #12131E); }
.mva-chat-title-text{ display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mva-chat-title-text strong{ font-family: var(--font-display, 'Space Grotesk','Noto Sans Bengali','Noto Sans Devanagari','Segoe UI',sans-serif); font-size: 1.02rem; color: var(--ink, #EDEDF5); }
.mva-chat-title-text small{ color: var(--ink-faint, #6E7089); font-size: .76rem; }

.mva-chat-header-actions{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mva-chat-newbtn{
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border, #2C2E45);
  background: var(--surface-2, #202134);
  color: var(--ink-soft, #A6A7BE);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.mva-chat-newbtn:hover{ color: var(--accent, #F2A93B); border-color: var(--accent, #F2A93B); }
.mva-chat-close{
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border, #2C2E45);
  background: var(--surface-2, #202134);
  cursor: pointer;
  color: var(--ink-soft, #A6A7BE);
}
.mva-chat-close svg{ width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }
.mva-chat-close:hover{ color: var(--ink, #EDEDF5); border-color: var(--accent, #F2A93B); }

.mva-chat-messages{
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg, #12131E);
}

.mva-welcome{
  text-align: center;
  max-width: 460px;
  margin: auto;
  padding: 8px 12px 0;
}
.mva-welcome-orb{
  width: 52px; height: 52px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent, #F2A93B), var(--accent-2, #9C8CF0));
  box-shadow: var(--shadow-md, 0 10px 26px rgba(0,0,0,.45));
}
.mva-welcome-orb svg{ width: 26px; height: 26px; fill: var(--accent-ink, #12131E); }
.mva-welcome h3{ font-family: var(--font-display, 'Space Grotesk','Noto Sans Bengali','Noto Sans Devanagari','Segoe UI',sans-serif); font-size: 1.15rem; margin: 0 0 6px; color: var(--ink, #EDEDF5); }
.mva-welcome p{ color: var(--ink-soft, #A6A7BE); font-size: .88rem; margin: 0 0 16px; line-height: 1.5; }
.mva-chips{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mva-chip{
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--border, #2C2E45);
  background: var(--surface, #191A2A);
  color: var(--ink-soft, #A6A7BE);
  font-size: .78rem;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.mva-chip:hover{ border-color: var(--accent, #F2A93B); color: var(--accent, #F2A93B); transform: translateY(-1px); }

.mva-msg{ display: flex; gap: 10px; align-items: flex-start; max-width: 100%; }
.mva-msg-avatar{
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: .66rem; font-weight: 700;
}
.mva-msg-avatar-ai{ background: linear-gradient(135deg, var(--accent, #F2A93B), var(--accent-2, #9C8CF0)); }
.mva-msg-avatar-ai svg{ width: 14px; height: 14px; fill: var(--accent-ink, #12131E); }
.mva-msg-avatar-user{ background: var(--surface-2, #202134); color: var(--ink-soft, #A6A7BE); border: 1px solid var(--border, #2C2E45); }

.mva-msg-bubble{
  background: var(--surface, #191A2A);
  border: 1px solid var(--border, #2C2E45);
  border-radius: var(--radius-md, 16px);
  padding: 11px 14px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink, #EDEDF5);
  max-width: min(78%, 560px);
  overflow-wrap: break-word;
}
.mva-msg-bubble p{ margin: 0 0 .6em; }
.mva-msg-bubble p:last-child{ margin-bottom: 0; }
.mva-msg-bubble ul, .mva-msg-bubble ol{ margin: .3em 0 .7em; padding-left: 1.3em; }
.mva-msg-bubble li{ margin-bottom: .25em; }
.mva-msg-bubble h4, .mva-msg-bubble h5, .mva-msg-bubble h6{ font-family: var(--font-display, 'Space Grotesk','Noto Sans Bengali','Noto Sans Devanagari','Segoe UI',sans-serif); margin: .5em 0 .35em; color: var(--ink, #EDEDF5); }
.mva-msg-bubble code{
  background: var(--surface-2, #202134);
  border-radius: 5px;
  padding: .1em .35em;
  font-size: .88em;
  font-family: 'SFMono-Regular', Consolas, monospace;
}
.mva-code-block{
  background: color-mix(in srgb, var(--ink, #EDEDF5) 92%, var(--surface, #191A2A));
  color: #F2F2FA;
  border-radius: var(--radius-sm, 10px);
  padding: 12px 14px;
  overflow-x: auto;
  margin: .4em 0;
  font-size: .82rem;
  line-height: 1.5;
}
.mva-code-block code{ background: none; padding: 0; color: inherit; }

.mva-msg-user{ flex-direction: row-reverse; margin-left: auto; }
.mva-msg-user .mva-msg-bubble{
  background: linear-gradient(135deg, var(--accent, #F2A93B), var(--accent-2, #9C8CF0));
  color: var(--accent-ink, #12131E);
  border: none;
}
.mva-msg-user .mva-msg-bubble code{ background: rgba(0,0,0,.18); color: inherit; }

.mva-msg-error .mva-msg-bubble{ border-color: color-mix(in srgb, #d6473f 45%, var(--border, #2C2E45)); color: #d6473f; }
.mva-retry-btn{
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}

.mva-typing{ display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.mva-typing span{
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--ink-faint, #6E7089);
  animation: mva-typing-bounce 1.1s ease-in-out infinite;
}
.mva-typing span:nth-child(2){ animation-delay: .15s; }
.mva-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes mva-typing-bounce{
  0%, 60%, 100%{ transform: translateY(0); opacity: .5; }
  30%{ transform: translateY(-4px); opacity: 1; }
}

.mva-chat-inputbar{
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--border, #2C2E45);
  background: var(--surface, #191A2A);
  flex-shrink: 0;
}
.mva-chat-input{
  flex: 1;
  resize: none;
  max-height: 160px;
  padding: 11px 14px;
  border-radius: var(--radius-md, 16px);
  border: 1px solid var(--border, #2C2E45);
  background: var(--bg, #12131E);
  color: var(--ink, #EDEDF5);
  font-family: var(--font-body, 'Inter','Noto Sans Bengali','Noto Sans Devanagari','Segoe UI',sans-serif);
  font-size: .92rem;
  line-height: 1.4;
}
.mva-chat-input:focus{ outline: 2px solid color-mix(in srgb, var(--accent, #F2A93B) 55%, transparent); outline-offset: 1px; }
.mva-chat-send{
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, var(--accent, #F2A93B), var(--accent-2, #9C8CF0));
  color: var(--accent-ink, #12131E);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.35));
  transition: transform .15s ease, opacity .15s ease;
}
.mva-chat-send svg{ width: 17px; height: 17px; fill: currentColor; }
.mva-chat-send:hover:not(:disabled){ transform: translateY(-1px) scale(1.04); }
.mva-chat-send:disabled{ opacity: .5; cursor: default; }

@media (max-width: 640px){
  .mva-chat-overlay{ padding: 0; }
  .mva-chat-panel{ max-width: none; height: 100dvh; border-radius: 0; }
  .mva-msg-bubble{ max-width: 86%; }
}