/* 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(204, 0, 204, .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-fill); 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: #1c1a1c; 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-ink); }
.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)); }

/* ───── design pass v2: premium chat ───── */
.exa-launcher { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.exa-launcher:hover { box-shadow: var(--shadow-l), 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.exa-launcher .exa-avatar { position: relative; }
.exa-launcher .exa-avatar::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 0 2px rgba(255, 71, 255, .55); opacity: 0; animation: exaHalo 2.6s var(--ease) 1.2s 2; }
@keyframes exaHalo { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
.exa-panel { box-shadow: 0 30px 80px -24px rgba(28, 10, 31, .45), 0 0 0 1px color-mix(in srgb, var(--line) 60%, transparent); }
.exa-head { position: relative; isolation: isolate; background: var(--night); padding: .85rem .8rem .85rem 1rem; }
.exa-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 160% at 0% 0%, rgba(255, 71, 255, .45), transparent 55%), radial-gradient(90% 160% at 100% 100%, rgba(255, 71, 255, .32), transparent 60%); }
.exa-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); }
.exa-head .exa-avatar { box-shadow: 0 6px 18px -6px rgba(255, 71, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.exa-head h2 { display: flex; align-items: center; gap: .45rem; }
.exa-head h2::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4fd4a0; box-shadow: 0 0 0 3px rgba(79, 212, 160, .22); }
.exa-head p { font-size: .76rem; line-height: 1.3; }
.exa-log { padding: 1rem 1rem 1.25rem; background: radial-gradient(80% 50% at 100% 0%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 70%); }
.exa-msg { animation: exaIn var(--dur-3) var(--ease) both; }
@keyframes exaIn { from { opacity: 0; transform: translateY(6px); } }
.exa-assistant .exa-bubble { background: color-mix(in srgb, var(--ink) 5%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.exa-user .exa-bubble { background: linear-gradient(135deg, #cc00cc, #cc00cc); box-shadow: 0 6px 16px -10px rgba(204, 0, 204, .8); }
.exa-bubble { font-size: .935rem; }
.exa-chip { transition: border-color var(--dur-2), color var(--dur-2), background-color var(--dur-2), transform var(--dur-1); }
.exa-chip:hover { background: var(--brand-softer); }
.exa-chip:active { transform: scale(.97); }
.exa-compose { padding: .65rem .75rem .5rem; }
.exa-compose textarea, .exa-compose input { background: var(--bg-sunken); border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.exa-compose textarea:focus, .exa-compose input:focus { background: var(--bg-elev); box-shadow: var(--ring); border-color: var(--brand); }
.exa-compose .btn-icon { transition: transform var(--dur-2) var(--ease-spring), opacity var(--dur-2); }
.exa-compose .btn-icon:hover { transform: rotate(-12deg) scale(1.05); }
.exa-hello .exa-avatar-lg { --s: 60px; box-shadow: 0 16px 34px -14px rgba(204, 0, 204, .9), inset 0 1px 0 rgba(255, 255, 255, .3); animation: exaFloat 4s var(--ease-in-out) infinite alternate; }
@keyframes exaFloat { to { transform: translateY(-4px); } }
.exa-src { border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); }
.exa-day { font-size: .68rem; }

.exa-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.exa-actions .btn { --bh: 34px; }

/* ───────── premium pass v3: Exa's entrance + a breathing glow while she has something to say ───────── */
.exa-launcher { animation: exaEnter .7s var(--ease-spring) .5s backwards; }
.exa-launcher .exa-avatar { animation: exaAvatar .8s var(--ease-spring) .65s backwards; }
@keyframes exaEnter { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes exaAvatar { from { transform: scale(.5) rotate(-12deg); } }
body:has(.exa-nudge:not([hidden])) .exa-launcher { animation: exaBreathe 2.8s var(--ease-in-out) .2s 4; }
@keyframes exaBreathe { 0%, 100% { box-shadow: var(--shadow-l), 0 0 0 0 rgba(204, 0, 204, 0); } 50% { box-shadow: var(--shadow-l), 0 0 0 7px rgba(204, 0, 204, .16), 0 0 26px 4px rgba(255, 71, 255, .28); } }
.exa-nudge:not([hidden]) { animation: exaNudgeIn .45s var(--ease-spring) backwards; }
@keyframes exaNudgeIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }