:root {
  color-scheme: dark;
  --ink: #f6f5ef;
  --muted: #8f9aa6;
  --quiet: #5e6a76;
  --bg: #080d12;
  --panel: rgba(14, 21, 29, .82);
  --panel-solid: #0e151d;
  --line: rgba(255,255,255,.085);
  --accent: #9ff2c4;
  --accent-strong: #68dea0;
  --blue: #8eb8ff;
  --danger: #ff9b9b;
  --radius: 1.25rem;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-block-size: 100%; background: var(--bg); }
body { min-block-size: 100dvh; margin: 0; color: var(--ink); background: radial-gradient(circle at 72% 8%, #132922 0, transparent 30rem), var(--bg); overflow: clip; }
button, input { font: inherit; }
button { color: inherit; }
svg { inline-size: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:where(a, button, input):focus-visible { outline: .18rem solid var(--accent); outline-offset: .2rem; }
.visually-hidden:where(:not(:focus-within, :active)) { position: absolute !important; clip-path: inset(50%) !important; overflow: hidden !important; inline-size: 1px !important; block-size: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; white-space: nowrap !important; }
.skip-link { position: fixed; inset: .75rem auto auto .75rem; z-index: 100; padding: .65rem 1rem; color: #08110c; background: var(--accent); border-radius: .6rem; text-decoration: none; transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.ambient { position: fixed; border-radius: 50%; filter: blur(5rem); pointer-events: none; opacity: .12; }
.ambient-one { inline-size: 28rem; block-size: 28rem; background: #42d392; inset: -15rem auto auto 48%; }
.ambient-two { inline-size: 22rem; block-size: 22rem; background: #548fe8; inset: auto -12rem -12rem auto; }

.topbar { block-size: 4.8rem; display: flex; align-items: center; gap: 1rem; padding-inline: clamp(1rem, 3vw, 2.5rem); border-block-end: 1px solid var(--line); background: rgba(8,13,18,.78); backdrop-filter: blur(1rem); }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; font-family: Inter, ui-sans-serif, system-ui, sans-serif; line-height: 1; letter-spacing: -.035em; }
.brand strong { display: block; font-size: 1rem; }
.brand small { display: block; margin-block-start: .25rem; color: var(--muted); font-size: .55rem; letter-spacing: .28em; }
.brand-mark, .dialog-mark { display: grid; grid-template-columns: repeat(3, .28rem); place-content: center; gap: .18rem; inline-size: 2.2rem; block-size: 2.2rem; border: 1px solid rgba(159,242,196,.32); border-radius: .7rem; background: rgba(159,242,196,.08); transform: rotate(-5deg); }
.brand-mark span, .dialog-mark span { inline-size: .28rem; border-radius: 1rem; background: var(--accent); }
.brand-mark span:nth-child(1), .dialog-mark span:nth-child(1) { block-size: .55rem; }
.brand-mark span:nth-child(2), .dialog-mark span:nth-child(2) { block-size: 1rem; }
.brand-mark span:nth-child(3), .dialog-mark span:nth-child(3) { block-size: .72rem; }
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 1rem; }
.connection { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .78rem; }
.connection span { inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: var(--accent-strong); box-shadow: 0 0 .8rem var(--accent-strong); }
.icon-button { display: grid; place-items: center; inline-size: 2.45rem; block-size: 2.45rem; padding: 0; border: 1px solid var(--line); border-radius: .75rem; background: rgba(255,255,255,.035); cursor: pointer; }
.icon-button:hover { border-color: rgba(159,242,196,.35); background: rgba(159,242,196,.07); }

.workspace { display: grid; grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); block-size: calc(100dvh - 4.8rem); }
.sidebar { display: flex; flex-direction: column; min-inline-size: 0; padding: clamp(1.25rem, 2.5vw, 2rem); border-inline-end: 1px solid var(--line); background: rgba(10,16,22,.7); backdrop-filter: blur(1rem); }
.sidebar-heading { display: flex; align-items: end; gap: 1rem; margin-block-end: 1.35rem; }
.sidebar-heading h1 { margin: .22rem 0 0; font: 600 clamp(1.4rem, 2vw, 1.8rem)/1.1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.04em; }
.eyebrow { margin: 0; color: var(--accent); font-size: .67rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.count { margin-inline-start: auto; padding: .22rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.035); font-size: .72rem; }
.search-form { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; padding: .15rem .75rem; border: 1px solid var(--line); border-radius: .85rem; background: rgba(255,255,255,.035); transition: border-color .18s, background .18s; }
.search-form:focus-within { border-color: rgba(159,242,196,.45); background: rgba(159,242,196,.045); }
.search-form svg { color: var(--quiet); inline-size: 1rem; }
.search-form input { min-inline-size: 0; padding-block: .68rem; border: 0; outline: 0; color: var(--ink); background: transparent; }
.search-form input::placeholder { color: #64717e; }
kbd { padding: .1rem .36rem; border: 1px solid var(--line); border-block-end-color: rgba(255,255,255,.2); border-radius: .28rem; color: var(--quiet); font: .68rem/1.35 inherit; }
.filter-row { display: flex; align-items: center; gap: .7rem; margin-block-start: .8rem; }
.filter-toggle { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.035); font-size: .72rem; cursor: pointer; }
.filter-toggle:hover { border-color: rgba(159,242,196,.3); }
.filter-toggle[aria-pressed="true"] { border-color: rgba(159,242,196,.28); color: #ccfbe0; background: rgba(159,242,196,.09); }
.filter-check { display: grid; place-items: center; inline-size: 1rem; block-size: 1rem; border: 1px solid currentColor; border-radius: 50%; font-size: .58rem; }
.filter-toggle[aria-pressed="false"] .filter-check { color: transparent; }
.filter-row > span { color: var(--quiet); font-size: .68rem; }
.list-status { min-block-size: 1.2rem; margin: .85rem .25rem .35rem; color: var(--quiet); font-size: .72rem; }
.conversation-nav { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.conversation-nav ul { display: grid; gap: .35rem; margin: 0; padding: 0 .2rem 1rem 0; list-style: none; }
.conversation-button { inline-size: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .75rem; align-items: center; padding: .8rem; border: 1px solid transparent; border-radius: .9rem; color: inherit; text-align: start; background: transparent; cursor: pointer; }
.conversation-button:hover { background: rgba(255,255,255,.035); }
.conversation-button[aria-current="true"] { border-color: rgba(159,242,196,.18); background: linear-gradient(100deg, rgba(159,242,196,.11), rgba(159,242,196,.035)); }
.avatar { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: .72rem; color: #c8ffe0; background: linear-gradient(145deg, #1e4538, #14251f); font: 700 .78rem Inter, ui-sans-serif, system-ui, sans-serif; }
.avatar.large { inline-size: 3rem; block-size: 3rem; border-radius: .9rem; font-size: 1rem; }
.conversation-copy { min-inline-size: 0; }
.conversation-copy strong { display: block; overflow: hidden; color: #e9ece8; font-size: .86rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.conversation-copy span { display: block; overflow: hidden; margin-block-start: .26rem; color: var(--quiet); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.message-badge { align-self: start; min-inline-size: 1.4rem; padding: .12rem .36rem; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.055); font-size: .62rem; text-align: center; }

.conversation { min-inline-size: 0; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.empty-state { min-block-size: 100%; display: grid; place-content: center; justify-items: center; padding: 2rem; text-align: center; }
.empty-state h2 { margin: .55rem 0 .4rem; font: 600 clamp(1.7rem, 4vw, 2.5rem)/1.1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.05em; }
.empty-state > p:last-child { max-inline-size: 34ch; margin: 0; color: var(--muted); line-height: 1.55; }
.empty-orbit { display: grid; place-items: center; inline-size: 5.5rem; block-size: 5.5rem; margin-block-end: 1.5rem; border: 1px solid rgba(159,242,196,.16); border-radius: 50%; box-shadow: inset 0 0 2rem rgba(159,242,196,.05); }
.empty-orbit::before, .empty-orbit::after, .empty-orbit span { content: ""; position: absolute; border-radius: 50%; background: var(--accent); }
.empty-orbit::before { inline-size: .65rem; block-size: .65rem; transform: translate(-1rem, .6rem); box-shadow: 0 0 1rem rgba(159,242,196,.7); }
.empty-orbit::after { inline-size: .35rem; block-size: .35rem; transform: translate(1.2rem, -1rem); opacity: .55; }
.empty-orbit span { inline-size: .25rem; block-size: .25rem; transform: translate(1.3rem, 1.35rem); opacity: .32; }
.conversation-header { position: sticky; inset-block-start: 0; z-index: 2; padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.25rem, 5vw, 5rem) 1.5rem; border-block-end: 1px solid var(--line); background: linear-gradient(to bottom, rgba(8,13,18,.98) 70%, rgba(8,13,18,.88)); backdrop-filter: blur(1rem); }
.back-button { display: none; align-items: center; gap: .35rem; margin-block-end: 1.25rem; padding: .35rem 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.back-button svg { inline-size: 1rem; }
.title-row { display: flex; align-items: center; gap: 1rem; }
.title-row h2 { margin: .3rem 0 0; font: 600 clamp(1.45rem, 3vw, 2.25rem)/1.12 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.045em; }
.summary-strip { display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; margin-block-start: 1.2rem; color: var(--muted); font-size: .75rem; }
.summary-strip span { display: inline-flex; align-items: center; gap: .4rem; }
.summary-strip span::before { content: ""; inline-size: .3rem; block-size: .3rem; border-radius: 50%; background: var(--accent); opacity: .65; }
.message-list { display: grid; gap: 1.15rem; max-inline-size: 58rem; margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 4rem) 6rem; list-style: none; }
.message { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .8rem; align-items: start; }
.message-card { max-inline-size: min(46rem, 92%); padding: .9rem 1.05rem; border: 1px solid var(--line); border-radius: .3rem 1.05rem 1.05rem 1.05rem; background: rgba(20,28,37,.74); box-shadow: 0 .7rem 2rem rgba(0,0,0,.12); }
.message:nth-child(even) .avatar { background: linear-gradient(145deg, #263b59, #192536); color: #d5e5ff; }
.message-head { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: baseline; margin-block-end: .38rem; }
.message-head strong { color: #dfe5df; font-size: .76rem; }
.message-head time { color: var(--quiet); font-size: .65rem; }
.message-head span { color: var(--quiet); font-size: .65rem; }
.message-body { margin: 0; color: #c7cfd2; font-size: .88rem; line-height: 1.63; white-space: pre-wrap; overflow-wrap: anywhere; }
.snapshot .message-card { border-color: rgba(159,242,196,.15); background: linear-gradient(135deg, rgba(159,242,196,.07), rgba(20,28,37,.78)); }
.no-messages { padding: 3rem; color: var(--muted); text-align: center; }

.toast { position: fixed; z-index: 20; inset: auto 1rem 1rem auto; max-inline-size: min(26rem, calc(100% - 2rem)); margin: 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .75rem; background: #15202a; box-shadow: 0 1rem 3rem rgba(0,0,0,.35); }
.login-dialog { inline-size: min(27rem, calc(100% - 2rem)); padding: 0; border: 1px solid rgba(159,242,196,.2); border-radius: 1.4rem; color: var(--ink); background: #101820; box-shadow: 0 2rem 7rem rgba(0,0,0,.7); }
.login-dialog::backdrop { background: rgba(4,8,11,.82); backdrop-filter: blur(.8rem); }
.login-dialog form { display: grid; gap: .85rem; padding: clamp(1.5rem, 5vw, 2.5rem); }
.dialog-mark { inline-size: 3rem; block-size: 3rem; margin-block-end: .5rem; }
.login-dialog h2 { margin: .1rem 0 0; font: 600 2rem/1.1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.05em; }
.login-dialog p:not(.eyebrow, .form-error) { margin: 0 0 .7rem; color: var(--muted); line-height: 1.5; }
.login-dialog label { color: #d6ddd9; font-size: .78rem; font-weight: 600; }
.login-dialog input { inline-size: 100%; padding: .8rem .9rem; border: 1px solid rgba(255,255,255,.15); border-radius: .75rem; color: var(--ink); background: #0b1117; }
.form-error { margin: 0; color: var(--danger); font-size: .78rem; }
.primary-button { display: flex; justify-content: center; gap: .6rem; margin-block-start: .35rem; padding: .82rem 1rem; border: 0; border-radius: .75rem; color: #07100b; background: var(--accent); font-weight: 700; cursor: pointer; }
.primary-button:hover { background: #b6f8d3; }
.primary-button:disabled { cursor: wait; opacity: .6; }

@media (max-width: 48rem) {
  body { overflow: auto; }
  .connection { display: none; }
  .workspace { display: block; block-size: calc(100dvh - 4.8rem); }
  .sidebar, .conversation { block-size: 100%; }
  .sidebar { border-inline-end: 0; }
  .conversation { display: none; }
  body.show-conversation .sidebar { display: none; }
  body.show-conversation .conversation { display: block; }
  .back-button { display: inline-flex; }
  .conversation-header { position: static; }
  .message-card { max-inline-size: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .conversation-button, .icon-button, .primary-button { transition: background-color .18s, border-color .18s, transform .18s; }
  .conversation-button:active, .primary-button:active { transform: scale(.985); }
}