/*
 * The Aasandha AI chat widget.
 *
 * Scoped under `.aai-` so it can be dropped onto the real aasandha.mv without
 * colliding with anything, and written against its own custom properties so a
 * host page can retheme it without touching this file.
 *
 * Two things drive most of the decisions here:
 *
 *   Corner, not overlay. On a desktop the panel is a fixed card in the corner
 *   with the page still visible and usable behind it. It is part of the site,
 *   so it is sized and shadowed like a part of the site.
 *
 *   Phone is a different product. Below 640px the same panel grows to nearly
 *   the whole screen, because a 400px card inside a 390px viewport is neither
 *   a widget nor an app. It stops short of a takeover: a strip of the page
 *   stays visible above it and to its left, so the reader can still see they
 *   are on aasandha.mv. `env(safe-area-inset-*)` keeps it clear of the notch
 *   and the iOS home indicator.
 */

/* Faruma, served rather than assumed.
 *
 * The Thaana stack below names fonts that only exist if the reader's machine
 * happens to have them installed — true of many desktops in Maldives, true of
 * no phone at all, which is why Thaana fell back to a generic sans on mobile.
 * `local()` first so anyone who already has the face skips the download; the
 * woff2 is there for everyone else. */
@font-face {
  font-family: "MV Faruma";
  src: local("MV Faruma"), local("Faruma"), local("A_Faruma"),
       url("fonts/MVFaruma.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  /* Thaana letters and nothing else.
   *
   * Punctuation is deliberately absent. The Arabic comma U+060C is bidi class
   * CS — a neutral, whose side is decided by the text around it rather than by
   * itself — so it is the one character in a Dhivehi sentence most sensitive to
   * where a run begins and ends. Claiming it here drew it from a different face
   * than the text on either side and put it on the wrong side of the word.
   * Letters are strong RTL and have no such problem, so the range stops at the
   * Thaana block and punctuation keeps whatever face already set it. */
  unicode-range: U+0780-07BF;
}

.aai {
  --aai-brand: #8b1913;
  --aai-brand-bright: #c62424;
  --aai-brand-deep: #6d130e;
  --aai-tint: #fdf3f2;
  --aai-ink: #212529;
  --aai-ink-soft: #626b78;
  --aai-line: #e6e9ee;
  --aai-surface: #f6f7f9;
  --aai-panel: #ffffff;
  --aai-radius: 20px;
  --aai-shadow: 0 6px 18px rgba(33, 37, 41, .1), 0 26px 60px rgba(33, 37, 41, .19);
  --aai-thaana: "MV Faruma", "A_Faruma", "Faruma", sans-serif;
  --aai-latin: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Bottom-right, always — the widget's corner does not flip with the page's
     reading direction the way its text does. A right-to-left site still puts
     its help launcher on the right. */
  position: fixed;
  inset-block-end: max(22px, env(safe-area-inset-bottom));
  inset-inline: auto;
  right: max(22px, env(safe-area-inset-right));
  z-index: 2147483000;
  font: 15px/1.65 var(--aai-latin);
  color: var(--aai-ink);
}

.aai *, .aai *::before, .aai *::after { box-sizing: border-box; }
.aai [hidden] { display: none !important; }

/* ── Typography containment ────────────────────────────────────────────────
 *
 * An embeddable widget lands on pages whose stylesheets were never written
 * with it in mind, and the demo page is a fair example: it sets
 * `body[lang="dv"] b { font-family: … }` to give the site's headings their
 * bold Thaana cut. That selector is specific enough — one attribute and two
 * elements — to beat `.aai-title b`, so the widget's own header started
 * rendering in the website's typeface instead of Faruma.
 *
 * The fix belongs here rather than in the host stylesheet. A widget that only
 * looks right on pages that agree to leave it alone is not embeddable, so
 * every element whose face matters re-declares it behind a `.aai` prefix. The
 * extra class outranks any `body`-anchored element rule a host is likely to
 * have, and costs nothing.
 */
.aai .aai-title b,
.aai .aai-launcher .aai-label b,
.aai .aai-starters button { font-family: var(--aai-thaana); }

/* Emphasis inside an answer follows the bubble it is in, whichever script
   that bubble turned out to be. */
.aai .aai-bubble b,
.aai .aai-bubble strong { font-family: inherit; font-weight: 600; }

/* And the parts that are deliberately not Thaana stay deliberately not
   Thaana, whatever the host page has to say about it. */
.aai .aai-status,
.aai .aai-foot,
.aai .aai-launcher .aai-label small,
.aai .aai-composer textarea,
.aai .aai-actions button { font-family: var(--aai-latin); }
.aai .aai-composer textarea[dir="rtl"] { font-family: var(--aai-thaana); }

/* ── Launcher ──────────────────────────────────────────────────────────── */
.aai-launcher {
  display: flex; align-items: center; gap: 11px;
  border: none;
  border-radius: 999px;
  padding: 11px 20px 11px 12px;
  background: linear-gradient(135deg, var(--aai-brand-bright), var(--aai-brand));
  color: #fff;
  font: 600 15px/1.4 var(--aai-latin);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(139, 25, 19, .3), 0 16px 40px rgba(139, 25, 19, .22);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .22s ease, filter .22s ease;
}
.aai-launcher:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 22px rgba(139, 25, 19, .34), 0 22px 54px rgba(139, 25, 19, .26);
}
.aai-launcher:active { transform: translateY(-1px) scale(.99); }
.aai-launcher:focus-visible { outline: 3px solid rgba(198, 36, 36, .45); outline-offset: 3px; }

/* The mark sits on white, because the Aasandha logo is a full-colour mark and
   must not be recoloured or knocked out to fit a button. */
.aai-launcher .aai-mark {
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.aai-launcher .aai-mark img { width: 20px; height: 26px; object-fit: contain; }

.aai-launcher .aai-label { white-space: nowrap; }
.aai-launcher .aai-label b { display: block; font-family: var(--aai-thaana); font-size: 16px; line-height: 1.5; font-weight: 600; }
.aai-launcher .aai-label small { display: block; font-size: 11px; opacity: .85; letter-spacing: .05em; }

/* One quiet ring on load, so the launcher is noticed once and never again. */
.aai-launcher::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 999px;
  border: 2px solid var(--aai-brand-bright);
  opacity: 0;
  animation: aai-ring 2.6s ease-out 1.1s 2;
  pointer-events: none;
}
@keyframes aai-ring {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.28); }
}
.aai-launcher { position: relative; }

.aai[data-open="true"] .aai-launcher { display: none; }

/* ── Panel ─────────────────────────────────────────────────────────────── */
.aai-panel {
  width: min(408px, calc(100vw - 40px));
  height: min(640px, calc(100dvh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--aai-panel);
  border: 1px solid var(--aai-line);
  border-radius: var(--aai-radius);
  box-shadow: var(--aai-shadow);
  overflow: hidden;
  transform-origin: bottom right;
  animation: aai-open .28s cubic-bezier(.2, .9, .25, 1) both;
}
@keyframes aai-open {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.aai-panel.aai-closing { animation: aai-close .18s ease-in both; }
@keyframes aai-close {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(10px) scale(.97); }
}

/* ── Header ────────────────────────────────────────────────────────────── */
.aai-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--aai-brand) 0%, var(--aai-brand-deep) 100%);
  color: #fff;
  flex: none;
}
.aai-head .aai-mark {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px; background: #fff;
  display: grid; place-items: center;
}
.aai-head .aai-mark img { width: 22px; height: 29px; object-fit: contain; }

.aai-title { min-width: 0; flex: 1; }
.aai-title b { display: block; font-family: var(--aai-thaana); font-size: 17px; font-weight: 600; line-height: 1.5; }
.aai-status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: .86; letter-spacing: .03em; }
.aai-status i {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
  animation: aai-live 2.4s ease-out infinite;
}
@keyframes aai-live {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); }
  70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.aai-head-btn {
  width: 34px; height: 34px; flex: none;
  border: none; border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background .16s ease;
}
.aai-head-btn:hover { background: rgba(255, 255, 255, .27); }
.aai-head-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.aai-head-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Messages ──────────────────────────────────────────────────────────── */
.aai-log {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px 6px;
  background: var(--aai-surface);
  display: flex; flex-direction: column; gap: 13px;
  scrollbar-width: thin;
}

.aai-msg { max-width: 90%; display: flex; flex-direction: column; gap: 6px; }
.aai-msg.aai-user { align-self: flex-end; align-items: flex-end; }
.aai-msg.aai-bot { align-self: flex-start; }

.aai-bubble {
  border-radius: 15px;
  padding: 11px 14px;
  background: var(--aai-panel);
  border: 1px solid var(--aai-line);
  box-shadow: 0 1px 2px rgba(33, 37, 41, .04);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15px;
  animation: aai-pop .2s ease-out both;
}
@keyframes aai-pop {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.aai-user .aai-bubble {
  background: var(--aai-brand);
  border-color: var(--aai-brand);
  color: #fff;
  border-end-end-radius: 5px;
}
.aai-bot .aai-bubble { border-end-start-radius: 5px; }

/* Thaana gets its own face and a line height that leaves room for fili. */
.aai-bubble[dir="rtl"] {
  font-family: var(--aai-thaana);
  font-size: 16.5px;
  line-height: 2.0;
  text-align: right;
}

/* A Latin run inside a Thaana answer — a hospital name, "MyAasandha". */
.aai-bubble[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; font-family: inherit; }
/* A value rather than a name: a phone number, an amount, a reference. Kept on
   one line, and in the Latin face — the Thaana faces draw a full stop as a
   raised dot, which turns 1400@aasandha.mv into 1400@aasandha·mv. */
.aai-bubble[dir="rtl"] .ltr.technical {
  white-space: nowrap;
  font-family: var(--aai-latin);
  font-size: 14px;
}

.aai-link { color: var(--aai-brand-bright); text-decoration: underline; overflow-wrap: anywhere; }
.aai-user .aai-link { color: #fff; }
.aai-bubble[dir="rtl"] .aai-link {
  direction: ltr; unicode-bidi: isolate;
  font-family: var(--aai-latin);
  font-size: 14px;
}

/* ── Feedback ──────────────────────────────────────────────────────────── */
/* Quiet until the answer is hovered or a control is focused, so a long
   conversation is not a column of thumbs. */
.aai-actions { display: flex; gap: 5px; opacity: 0; transition: opacity .18s ease; }
.aai-msg:hover .aai-actions,
.aai-actions:focus-within,
.aai-actions.aai-done { opacity: 1; }
.aai-actions button {
  border: 1px solid var(--aai-line);
  background: var(--aai-panel);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12.5px; line-height: 1.8;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.aai-actions button:hover { border-color: var(--aai-brand-bright); }
.aai-actions button.aai-chosen { background: var(--aai-tint); border-color: var(--aai-brand-bright); }

/* ── Starters ──────────────────────────────────────────────────────────── */
.aai-starters { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 16px 0; background: var(--aai-surface); }
.aai-starters button {
  border: 1px solid var(--aai-line);
  background: var(--aai-panel);
  border-radius: 999px;
  padding: 6px 13px;
  font: inherit; font-size: 13.5px;
  color: var(--aai-ink-soft);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.aai-starters button[dir="rtl"] { font-family: var(--aai-thaana); font-size: 15px; }
.aai-starters button:hover {
  border-color: var(--aai-brand-bright); color: var(--aai-brand); transform: translateY(-1px);
}

/* ── Typing ────────────────────────────────────────────────────────────── */
.aai-typing { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.aai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--aai-brand-bright); opacity: .3; animation: aai-blink 1.3s infinite; }
.aai-typing i:nth-child(2) { animation-delay: .18s; }
.aai-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes aai-blink { 0%, 65%, 100% { opacity: .25; transform: translateY(0); } 32% { opacity: 1; transform: translateY(-2px); } }

/* The caret shown while an answer is being revealed. */
.aai-caret {
  display: inline-block;
  width: 2px; height: 1em;
  vertical-align: -2px;
  background: var(--aai-brand-bright);
  animation: aai-caret 1s steps(2) infinite;
}
@keyframes aai-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* ── Error notice ──────────────────────────────────────────────────────── */
.aai-error {
  border-color: #f0c9c7;
  background: var(--aai-tint);
  color: #7a1712;
}

/* ── Composer ──────────────────────────────────────────────────────────── */
.aai-composer {
  flex: none;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--aai-panel);
  border-top: 1px solid var(--aai-line);
}
.aai-composer textarea {
  flex: 1;
  min-height: 44px; max-height: 128px;
  resize: none;
  border: 1px solid var(--aai-line);
  border-radius: 14px;
  padding: 11px 14px;
  font: inherit;
  /* 16px on iOS, so focusing the field does not zoom the page. */
  font-size: 16px;
  line-height: 1.5;
  background: var(--aai-surface);
  color: var(--aai-ink);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.aai-composer textarea::placeholder {
  color: var(--aai-ink-soft);
  opacity: .8;
  /* The box is `dir="ltr"` until something Thaana is typed into it, so the
     `[dir="rtl"]` rule below cannot reach the placeholder — which is in Thaana
     from the start. Naming the faces here rather than using --aai-thaana: that
     variable ends in a generic `sans-serif` that would answer for the Latin
     half of "… / Ask a question…" too. Ending on the Latin stack instead keeps
     each script in its own face. */
  font-family: "MV Faruma", "A_Faruma", "Faruma", var(--aai-latin);
}
.aai-composer textarea:focus {
  outline: none;
  border-color: var(--aai-brand-bright);
  background: var(--aai-panel);
  box-shadow: 0 0 0 3px rgba(198, 36, 36, .12);
}
/* A Thaana message is written right-to-left as it is typed. */
.aai-composer textarea[dir="rtl"] { font-family: var(--aai-thaana); font-size: 17px; line-height: 1.9; }

.aai-send {
  width: 44px; height: 44px; flex: none;
  border: none; border-radius: 14px;
  background: var(--aai-brand-bright);
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .16s ease, transform .16s ease, opacity .16s ease;
}
.aai-send:hover:not(:disabled) { background: var(--aai-brand); transform: translateY(-1px); }
.aai-send:disabled { opacity: .45; cursor: default; }
.aai-send:focus-visible { outline: 3px solid rgba(198, 36, 36, .4); outline-offset: 2px; }
.aai-send svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The paper plane points along the reading direction. */
.aai[dir="rtl"] .aai-send svg { transform: scaleX(-1); }

.aai-foot {
  flex: none;
  padding: 0 14px 9px;
  background: var(--aai-panel);
  color: var(--aai-ink-soft);
  font-size: 11px;
  text-align: center;
  letter-spacing: .02em;
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .aai {
    inset-block-end: max(16px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
  }
  .aai[data-open="true"] {
    /* Not a takeover. A strip of the page stays visible above and to the left,
       so the panel still reads as something sitting on the site rather than a
       new screen the reader has been moved to. Bottom and right stay flush:
       that corner is where the launcher was, and the panel grows out of it. */
    inset-block-start: max(28px, calc(env(safe-area-inset-top) + 12px));
    inset-inline-start: 14px;
    inset-block-end: 0;
    right: 0;
  }
  .aai-panel {
    /* The container above already carries the insets, so the panel simply
       fills it. dvh is gone with it: no viewport unit left to fight the
       mobile URL bar. */
    width: 100%;
    height: 100%;
    border: 1px solid var(--aai-line);
    border-radius: var(--aai-radius) var(--aai-radius) 0 0;
    animation: aai-sheet .26s cubic-bezier(.2, .9, .25, 1) both;
  }
  @keyframes aai-sheet {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }
  .aai-panel.aai-closing { animation: aai-sheet-out .17s ease-in both; }
  @keyframes aai-sheet-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(16px); }
  }
  /* The panel now starts below the safe area, so the header no longer has to
     pad past a notch itself — it keeps the same 14px as everywhere else. */
  .aai-msg { max-width: 94%; }
}

/* A phone in landscape has almost no height; the panel takes what there is. */
@media (max-height: 460px) and (min-width: 641px) {
  .aai-panel { height: calc(100dvh - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .aai *, .aai *::before, .aai *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}