/* Exa — learning assistant widget, guest welcome and /assistant page. Uses app.css tokens (light + dark). */
/* Same Exa mark as the welcome tour (.wl-exa): rounded square, magenta gradient, white Montserrat-900 "»". */
.exa-avatar { --s: 34px; width: var(--s); height: var(--s); flex: none; border-radius: 30%; display: inline-grid; place-items: center; background: var(--grad); color: #fff;
  font: 900 calc(var(--s) * .62)/1 var(--font-display); letter-spacing: -.14em; text-indent: -.08em; box-shadow: 0 6px 16px -8px rgba(226, 0, 122, .8); }
.exa-avatar-lg { --s: 52px; }

/* ───── launcher ───── */
.exa-launcher { position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .55rem; padding: 6px 16px 6px 6px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bg-elev); color: var(--ink); font: 700 .92rem/1 var(--font); box-shadow: var(--shadow-l); border: 1px solid var(--line);
  transition: transform .18s ease, box-shadow .18s ease; }
.exa-launcher:hover { transform: translateY(-2px); }
.exa-launcher .exa-avatar { --s: 40px; }
@media (max-width: 899px) {
  body:has(.tabbar) .exa-launcher { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .exa-launcher { padding: 5px; }
  .exa-launcher-t { display: none; }
}

/* ───── panel ───── */
.exa-panel { position: fixed; z-index: 70; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 32px)); height: min(640px, calc(100dvh - 32px - var(--topbar-h)));
  display: flex; flex-direction: column; background: var(--bg-elev); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-l); overflow: hidden; opacity: 0; transform: translateY(14px) scale(.98); transform-origin: bottom right;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1); }
.exa-panel.exa-in { opacity: 1; transform: none; }
.exa-panel[hidden] { display: none; }
@media (max-width: 599px) {
  .exa-panel { inset: 0; width: 100%; height: 100dvh; border-radius: 0; border: 0; transform: translateY(24px); padding-bottom: env(safe-area-inset-bottom); }
  html.exa-is-open, html.exa-is-open body { overflow: hidden; }
}
.exa-head { display: flex; align-items: center; gap: .7rem; padding: .8rem .8rem .8rem 1rem; color: #fff; background: var(--grad-deep); }
.exa-head h2 { margin: 0; font: 800 1.05rem/1.1 var(--font-display); color: #fff; }
.exa-head p { margin: 0; opacity: .75; }
.exa-head .exa-icon-btn { color: #fff; }
.exa-head .exa-icon-btn:hover { background: rgba(255, 255, 255, .12); }
.exa-icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; flex: none; }
.exa-icon-btn:hover { background: var(--bg-hover); text-decoration: none; }

.exa-log { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; scroll-behavior: smooth; overscroll-behavior: contain; }
.exa-log:focus { outline: none; }
.exa-msg { display: flex; flex-direction: column; max-width: 88%; }
.exa-user { align-self: flex-end; align-items: flex-end; }
.exa-assistant { align-self: flex-start; }
.exa-bubble { padding: .65rem .9rem; border-radius: 18px; font-size: .94rem; line-height: 1.55; overflow-wrap: anywhere; }
.exa-user .exa-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 6px; }
.exa-user .exa-bubble a { color: #fff; text-decoration: underline; }
.exa-assistant .exa-bubble { background: var(--bg-sunken); border-bottom-left-radius: 6px; }
.exa-error .exa-bubble { background: var(--warn-soft); }
.exa-bubble p { margin: 0 0 .55em; }
.exa-bubble p:last-child, .exa-bubble ul:last-child, .exa-bubble ol:last-child { margin-bottom: 0; }
.exa-bubble ul, .exa-bubble ol { margin: .2em 0 .6em; padding-left: 1.25em; }
.exa-bubble li + li { margin-top: .2em; }
.exa-bubble code { font: .86em var(--font-mono); background: color-mix(in srgb, var(--ink) 8%, transparent); padding: .1em .35em; border-radius: 5px; }
.exa-bubble pre { margin: .4em 0 .7em; padding: .7rem .8rem; background: #140716; color: #f4f1f6; border-radius: 10px; overflow-x: auto; font-size: .84rem; }
.exa-bubble pre code { background: none; padding: 0; color: inherit; }
.exa-bubble .exa-h { font-weight: 700; margin-top: .3em; }
.exa-cite { font-size: .68em; font-weight: 700; color: var(--brand); margin-left: 1px; }
.exa-note { font-size: .8rem; color: var(--ink-3); margin-top: .3em; }
.exa-sources { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.exa-src { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font: 600 .74rem/1.3 var(--font); }
a.exa-src:hover { text-decoration: none; filter: brightness(.97); }
.exa-fb { display: flex; gap: .2rem; margin-top: .25rem; opacity: .65; transition: opacity .15s; }
.exa-msg:hover .exa-fb, .exa-fb:focus-within { opacity: 1; }
.exa-fb button { border: 0; background: none; cursor: pointer; font-size: .95rem; padding: .2rem .35rem; border-radius: 8px; filter: grayscale(1); }
.exa-fb button[aria-pressed="true"] { filter: none; background: var(--brand-soft); }
.exa-fb button:hover { filter: none; }

.exa-typing { display: inline-flex; gap: 4px; padding: .2rem 0; }
.exa-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: exa-dot 1.1s infinite ease-in-out; }
.exa-typing i:nth-child(2) { animation-delay: .15s; }
.exa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes exa-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.exa-caret { display: inline-block; width: .5em; height: 1em; vertical-align: -.15em; background: var(--brand); border-radius: 2px; margin-left: 2px; animation: exa-blink 1s steps(2) infinite; }
@keyframes exa-blink { 50% { opacity: 0; } }

.exa-hello { text-align: center; padding: 1.25rem .5rem .5rem; display: grid; justify-items: center; gap: .35rem; color: var(--ink-2); }
.exa-hello h2, .exa-hello-t { margin: .35rem 0 0; font: 800 1.2rem/1.2 var(--font-display); color: var(--ink); }
.exa-hello p { margin: 0; max-width: 34ch; }
.exa-hello-sm { padding-top: .25rem; }
.exa-hello-sm .exa-avatar-lg { --s: 34px; }

.exa-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .6rem; }
.exa-chips[hidden] { display: none; }
.exa-chip { border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--ink); border-radius: 999px; padding: .45rem .8rem; font: 600 .82rem/1.2 var(--font); cursor: pointer; text-align: left; }
.exa-chip:hover { border-color: var(--brand); color: var(--brand); }

.exa-compose { display: flex; align-items: flex-end; gap: .5rem; padding: .6rem .75rem; border-top: 1px solid var(--line); background: var(--bg-elev); }
.exa-compose textarea, .exa-compose input { min-height: 44px; max-height: 160px; resize: none; border-radius: 22px; padding: .6rem 1rem; line-height: 1.4; font-size: 1rem; }
.exa-compose .btn-icon { --bh: 44px; flex: none; }
.exa-compose .exa-stop { background: var(--ink); box-shadow: none; }
.exa-foot { margin: 0; padding: 0 1rem .6rem; color: var(--ink-3); text-align: center; background: var(--bg-elev); }

/* ───── greeting / nudge bubble ───── */
.exa-nudge { position: fixed; z-index: 61; right: max(16px, env(safe-area-inset-right)); bottom: calc(76px + env(safe-area-inset-bottom));
  width: min(340px, calc(100vw - 32px)); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-l);
  padding: .9rem 1rem .85rem; font-size: .9rem; animation: exa-up .25s cubic-bezier(.2, .8, .2, 1); }
.exa-nudge[hidden] { display: none; }
.exa-nudge p { margin: 0 0 .5rem; }
.exa-nudge-t { display: flex; align-items: center; gap: .5rem; }
.exa-nudge-t .exa-avatar { --s: 26px; }
.exa-nudge-a { display: flex; flex-wrap: wrap; gap: .4rem; }
.exa-nudge-x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; }
@media (max-width: 899px) { body:has(.tabbar) .exa-nudge { bottom: calc(132px + env(safe-area-inset-bottom)); } }
@keyframes exa-up { from { opacity: 0; transform: translateY(10px); } }

/* ───── guest (sign-in pages) ───── */
.exa-guest { position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); display: grid; justify-items: end; gap: .6rem; max-width: calc(100vw - 32px); }
.exa-guest-chip { display: inline-flex; align-items: center; gap: .5rem; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink);
  font: 600 .85rem/1 var(--font); cursor: pointer; box-shadow: var(--shadow); }
.exa-guest-chip .exa-avatar { --s: 30px; }
.exa-guest-peek { display: none; max-width: min(300px, calc(100vw - 32px)); background: var(--bg-elev); color: var(--ink); border: 1px solid var(--line); border-radius: 16px 16px 6px 16px;
  box-shadow: var(--shadow-l); padding: .7rem .9rem; font-size: .88rem; line-height: 1.45; animation: exa-up .25s cubic-bezier(.2, .8, .2, 1); }
.exa-guest.exa-peek .exa-guest-peek { display: block; }
.exa-guest-card { display: none; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 100px)); overflow-y: auto; background: var(--bg-elev); color: var(--ink);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-l); animation: exa-up .25s cubic-bezier(.2, .8, .2, 1); }
.exa-guest.exa-open .exa-guest-card { display: block; }
.exa-guest-h { display: flex; gap: .7rem; align-items: flex-start; padding: 1rem 1rem .5rem; }
.exa-guest-h p { margin: 0; color: var(--ink-2); }
.exa-guest-hi { font: 800 1.05rem/1.25 var(--font-display); color: var(--ink) !important; margin-bottom: .2rem !important; }
.exa-guest-log { padding: 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.exa-guest-log:empty { display: none; }
.exa-guest-log .exa-msg { max-width: 100%; }
.exa-guest .exa-chips { padding: .7rem 1rem; }
.exa-compose-sm { border-top: 1px solid var(--line); }
.exa-compose-sm input { min-height: 40px; }
.exa-compose-sm .btn-icon { --bh: 40px; }
@media (max-width: 599px) {
  .exa-guest-card { width: calc(100vw - 24px); max-height: 62dvh; }
  .exa-guest { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ───── /assistant page ───── */
.exa-full .exa-launcher { display: none; }
.exa-page { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .exa-page { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } }
.exa-side { display: flex; flex-direction: column; overflow: hidden; }
.exa-side-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem; }
.exa-side-h h2 { margin: 0; font-size: 1rem; }
.exa-memory { padding: 0 1rem 1rem; color: var(--ink-2); max-height: 46vh; overflow-y: auto; }
.exa-memory p { margin: 0 0 .5rem; }
.exa-memory ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.exa-memory .exa-h { font-weight: 700; color: var(--ink); margin: .4rem 0 .2rem; }
.exa-side-f { display: grid; gap: .8rem; padding: 1rem; border-top: 1px solid var(--line); background: var(--bg-sunken); }
.exa-side-f p { margin: 0; display: flex; gap: .4rem; align-items: flex-start; }
.exa-side-f svg { flex: none; margin-top: 2px; }
@media (max-width: 899px) { .exa-page .exa-side { order: 2; } .exa-memory { max-height: none; } }
.exa-main { display: flex; flex-direction: column; min-height: min(78dvh, 820px); overflow: hidden; }
.exa-main-h { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.exa-main-h h1 { margin: 0; font-size: 1.1rem; line-height: 1.2; }
.exa-main-h p { margin: 0; }
.exa-main .exa-log { min-height: 320px; max-height: 64dvh; }
@media (max-width: 899px) { .exa-main .exa-log { max-height: none; } }
.exa-main .exa-msg { max-width: min(88%, 720px); }

.exa-risk .exa-bd { font-weight: 500; opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .exa-panel, .exa-launcher, .exa-nudge, .exa-guest-card { transition: none; animation: none; }
  .exa-typing i, .exa-caret { animation: none; opacity: .7; }
  .exa-log { scroll-behavior: auto; }
}
@media print { .exa-launcher, .exa-panel, .exa-nudge, .exa-guest { display: none !important; } }
.exa-risk .badge { white-space: normal; text-align: left; }

/* one ongoing conversation: day dividers + "load earlier" */
.exa-day { display: flex; align-items: center; gap: .75rem; color: var(--ink-3); font: 600 .74rem/1 var(--font); text-transform: uppercase; letter-spacing: .05em; margin: .4rem 0; }
.exa-day::before, .exa-day::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.exa-more { display: flex; justify-content: center; }

/* ───── admin copilot ───── */
.exa-copilot { width: min(520px, calc(100vw - 32px)); }
.exa-tag { display: inline-block; vertical-align: middle; font: 700 .64rem/1 var(--font); letter-spacing: .06em; text-transform: uppercase; padding: .25rem .45rem; border-radius: 6px; background: rgba(255, 255, 255, .18); color: inherit; margin-left: .3rem; }
.exa-card .exa-tag { background: var(--brand-soft); color: var(--brand-ink); }
.exa-card .exa-tag-warn { background: var(--warn-soft); color: var(--warn); }
.exa-card { align-self: stretch; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); padding: .7rem .8rem; display: grid; gap: .45rem; font-size: .86rem; }
.exa-card-h { font-weight: 700; }
.exa-card p { margin: 0; }
.exa-card label { display: grid; gap: .2rem; font-weight: 600; }
.exa-card input[type=text] { min-height: 38px; padding: .4rem .6rem; font-size: .9rem; }
.exa-tw { overflow-x: auto; max-height: 260px; overflow-y: auto; }
.exa-card table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.exa-card th { text-align: left; font: 600 .7rem/1.2 var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); padding: .35rem .4rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-elev); }
.exa-card td { padding: .35rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.exa-statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .4rem; }
.exa-statgrid div { background: var(--bg-sunken); border-radius: 10px; padding: .45rem .6rem; display: grid; }
.exa-statgrid span { font-size: .72rem; color: var(--ink-3); }
.exa-statgrid b { font: 800 1.15rem/1.2 var(--font-display); }
.exa-draft { width: 100%; min-height: 90px; font: .84rem/1.45 var(--font-mono); padding: .5rem .6rem; border-radius: 10px; }
.exa-card-draft .exa-draft { font-family: var(--font); }
.admin .exa-launcher { bottom: calc(16px + env(safe-area-inset-bottom)); }