/* Chat assistant. Uses the guide's own tokens, so it themes and flips for RTL
   with the rest of it. Delete this file with chat.js to remove the feature. */

.chat {
  position: fixed;
  inset-block-end: 1.25rem; inset-inline-end: 1.25rem;
  z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
}
html[dir="rtl"] .chat { align-items: flex-start; }

/* ── launcher ─────────────────────────────────────────────────────────── */
.chat-fab {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.875rem; padding: .65rem 1.1rem;   /* ≥44px touch target */
  border: 0; border-radius: 999px;
  background: var(--brand); color: #fff;
  font: 600 .875rem/1 var(--sans);
  box-shadow: 0 6px 20px -4px color-mix(in srgb, var(--brand) 55%, transparent),
              0 2px 6px rgb(16 18 40 / .18);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t);
}
html[dir="rtl"] .chat-fab { font-family: var(--sans-ar); }
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab:active { transform: translateY(0) scale(.97); }   /* press feedback */
.chat-fab > svg { width: 1.15rem; height: 1.15rem; flex: none; }
.chat-fab[aria-expanded="true"] { display: none; }

/* ── panel ────────────────────────────────────────────────────────────── */
.chat-panel {
  display: flex; flex-direction: column;
  width: min(25rem, calc(100vw - 2.5rem));
  max-height: min(34rem, calc(100dvh - 7rem));
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: 0 24px 60px -12px rgb(16 18 40 / .3), 0 4px 12px rgb(16 18 40 / .12);
  overflow: hidden;
}
.chat-panel[hidden] { display: none; }   /* must out-rank display:flex */
:root[data-theme="dark"] .chat-panel { box-shadow: 0 24px 60px -12px rgb(0 0 0 / .7); }

.chat-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem .9rem;
  border-block-end: 1px solid var(--border);
  background: var(--bg-alt);
}
.chat-head .chat-avatar { flex: none; }
.chat-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.chat-head strong { font-size: .9rem; }
.chat-head em {
  font-style: normal; font-size: .7rem; color: var(--ink-faint);
}
.chat-beta {
  flex: none;
  padding: .1rem .4rem;
  border: 1px solid var(--warn); border-radius: 999px;
  color: var(--warn);
  font: 700 .62rem/1.5 var(--sans);
  letter-spacing: .06em; text-transform: uppercase;
}
html[dir="rtl"] .chat-beta { letter-spacing: 0; text-transform: none; font-family: var(--sans-ar); font-size: .68rem; }

/* ── log ──────────────────────────────────────────────────────────────── */
.chat-log {
  flex: 1; min-height: 9rem;
  padding: .9rem;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: .7rem;
  font-size: .875rem;
}

/* Opening state: the disclaimer, then something to click. */
.chat-intro {
  padding: .75rem .85rem;
  border: 1px solid var(--border); border-inline-start: 3px solid var(--warn);
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  color: var(--ink-soft); font-size: .8125rem; line-height: 1.6;
}
.chat-intro strong { display: block; margin-block-end: .15rem; color: var(--ink); }

.chat-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chat-chips > span {
  width: 100%; margin-block-end: .1rem;
  color: var(--ink-faint); font-size: .75rem;
}
.chat-chip {
  padding: .35rem .7rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--brand);
  font: 500 .8125rem/1.4 inherit;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.chat-chip:hover { border-color: var(--brand); background: var(--brand-soft); }
.chat-chip:active { transform: scale(.97); }

/* ── messages ─────────────────────────────────────────────────────────── */
.chat-msg { display: flex; gap: .5rem; max-width: 100%; }
.chat-msg.me { flex-direction: row-reverse; }
html[dir="rtl"] .chat-msg.me { flex-direction: row; }

.chat-avatar {
  display: grid; place-items: center;
  width: 1.65rem; height: 1.65rem; flex: none;
  border-radius: 50%;
  background: var(--brand); color: #fff;
}
.chat-avatar > svg { width: .95rem; height: .95rem; }

.chat-body { min-width: 0; }
.chat-msg > .chat-body > p { margin: 0; line-height: 1.65; }
.chat-msg.me .chat-body {
  padding: .5rem .75rem;
  border-radius: var(--r-md);
  background: var(--brand-soft); color: var(--brand-ink);
}
.chat-msg.bot .chat-body {
  padding: .6rem .8rem;
  border: 1px solid var(--border-soft); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
}

/* Typing indicator */
.chat-dots { display: inline-flex; gap: .22rem; padding-block: .35rem; }
.chat-dots > i {
  width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--ink-faint);
  animation: chat-bounce 1.1s infinite ease-in-out;
}
.chat-dots > i:nth-child(2) { animation-delay: .15s; }
.chat-dots > i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .chat-dots > i { animation: none; opacity: .5; }
}

/* Citation chip — a number the model wrote, resolved to a real section. */
.chat-cite {
  display: inline-grid; place-items: center;
  width: 1.15rem; height: 1.15rem;
  margin-inline: .15rem;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font: 700 .68rem/1 var(--sans);
  letter-spacing: 0; text-decoration: none;
  vertical-align: text-bottom;
}
.chat-cite:hover { text-decoration: none; filter: brightness(1.15); }

.chat-src {
  margin-block-start: .6rem; padding-block-start: .5rem;
  border-block-start: 1px solid var(--border-soft);
  font-size: .8rem;
}
.chat-src > span { color: var(--ink-faint); }
.chat-src ul { margin: .25rem 0 0; padding: 0; list-style: none; }
.chat-src li + li { margin-block-start: .2rem; }
.chat-src a { display: flex; gap: .35rem; align-items: baseline; }
.chat-src a::before {
  content: "›"; flex: none; color: var(--ink-faint);
}

/* ── composer ─────────────────────────────────────────────────────────── */
.chat-form {
  display: flex; gap: .4rem;
  padding: .65rem;
  border-block-start: 1px solid var(--border);
  background: var(--bg-alt);
}
.chat-form input {
  flex: 1; min-width: 0;
  min-height: 2.375rem; padding: .5rem .7rem;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: .875rem;
}
html[dir="rtl"] .chat-form input { font-family: var(--sans-ar); }
.chat-form input::placeholder { color: var(--ink-faint); }
.chat-form input:focus { outline: none; border-color: var(--brand); }
.chat-send {
  display: grid; place-items: center;
  width: 2.375rem; min-height: 2.375rem; flex: none;
  border: 0; border-radius: var(--r-sm);
  background: var(--brand); color: #fff; cursor: pointer;
  transition: filter var(--t), transform var(--t);
}
.chat-send:hover { filter: brightness(1.1); }
.chat-send:active { transform: scale(.95); }
.chat-send > svg { width: 1.05rem; height: 1.05rem; }
html[dir="rtl"] .chat-send > svg { transform: scaleX(-1); }

.chat-note {
  margin: 0; padding: .5rem .9rem .7rem;
  border-block-start: 1px solid var(--border-soft);
  color: var(--ink-faint); font-size: .7rem; line-height: 1.5;
}

@media (max-width: 560px) {
  .chat { inset-inline: .75rem; inset-block-end: .75rem; align-items: stretch; }
  .chat-panel { width: 100%; max-height: min(82dvh, 36rem); }
  .chat-fab { align-self: flex-end; }
  html[dir="rtl"] .chat-fab { align-self: flex-start; }
}

@media print { .chat { display: none; } }