/* Ask 1bot — the chat (prefix .ak-) */
.ak-scroll { position: absolute; inset: 0; }
.ak-col { max-width: 800px; margin: 0 auto; padding: 84px 40px 200px; container-type: inline-size; }
.ak-ex { display: flex; flex-direction: column; gap: 22px; }
.ak-ex + .ak-ex { margin-top: 44px; }

/* ---------- user turn ---------- */
.ak-user { display: flex; justify-content: flex-end; }
.ak-bubble { max-width: min(80%, 560px); padding: 10px 15px 11px; border-radius: 18px 18px 6px 18px; background: var(--e-2); border: 1px solid var(--line-1);
  box-shadow: inset 0 1px 0 var(--rim); font: 450 14.5px/1.55 var(--f-ui); color: var(--t-1); letter-spacing: -0.003em; }

/* ---------- 1bot turn: head (orb + trace) ---------- */
.ak-bot { position: relative; }
.ak-head { display: flex; align-items: flex-start; gap: 10px; min-height: 24px; }
.ak-head > .orb { margin-top: 3px; }
.ak-bot.done .ak-head > .orb, .ak-bot.static .ak-head > .orb { animation: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 10px rgba(99,102,241,.25); }
.ak-bot.done .ak-head > .orb::before, .ak-bot.static .ak-head > .orb::before { animation: none; }
.ak-trace { flex: 1; min-width: 0; }
.ak-tl { display: inline-flex; align-items: center; gap: 8px; height: 24px; max-width: 100%; padding: 0 8px; margin-left: -6px; border-radius: 7px; font-size: 12.5px; color: var(--t-3);
  transition: background var(--d-1), color var(--d-1); }
.ak-tl:hover { background: rgba(255,255,255,.04); color: var(--t-2); }
.ak-tl-sum { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; animation: fade var(--d-3) var(--ease-out) both; }
.ak-tl-sum svg { color: var(--green); }
.ak-trace.stopped .ak-tl-sum svg { color: var(--t-4); }
.ak-tl-live, .ak-tl-time { display: none; }
.ak-tl-time { font-size: 11px; color: var(--t-4); }
.ak-tl-chev { display: inline-grid; color: var(--t-4); transition: transform var(--d-2) var(--ease-out); }
.ak-trace.open .ak-tl-chev { transform: rotate(90deg); }
.ak-trace.live .ak-tl { pointer-events: none; }
.ak-trace.live .ak-tl-sum, .ak-trace.live .ak-tl-chev { display: none; }
.ak-trace.live .ak-tl-live { display: inline; font-weight: 500; }
.ak-trace.live .ak-tl-time { display: inline; }

.ak-tsw { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--d-4) var(--ease-out), opacity var(--d-3) var(--ease-out); }
.ak-trace.open .ak-tsw, .ak-trace.live .ak-tsw { grid-template-rows: 1fr; opacity: 1; }
.ak-tsi { overflow: hidden; min-height: 0; }
.ak-tsteps { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 8px 0 4px; }
.ak-tsteps::before { content: ""; position: absolute; left: 10px; top: 20px; bottom: 30px; width: 1px; background: var(--line-2); }
.ak-ts { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
.ak-ts-ic { position: relative; display: grid; place-items: center; width: 21px; height: 21px; flex: none; border-radius: 6px; color: var(--t-3); background: var(--e-2); border: 1px solid var(--line-1); }
.ak-spin { display: none; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.1); border-top-color: var(--accent-2); animation: spin .8s linear infinite; }
.ak-ts.cur .ak-ts-ic { color: transparent; border-color: var(--accent-line); background: var(--accent-bg); }
.ak-ts.cur .ak-ts-ic svg { opacity: 0; }
.ak-ts.cur .ak-spin { display: block; }
.ak-ts-b { flex: 1; min-width: 0; padding-top: 2px; }
.ak-ts-t { font-size: 12.5px; color: var(--t-2); line-height: 1.4; }
.ak-ts-d { margin-top: 6px; }
.ak-ts-time { font-size: 10.5px; color: var(--t-4); padding-top: 4px; }
.ak-trace.live .ak-ts { display: none; }
.ak-trace.live .ak-ts.on { display: flex; animation: ak-in 340ms var(--ease-out) both; }
.ak-trace.live .ak-ts.cur .ak-ts-time { visibility: hidden; }
.ak-trace.live .ak-ts.cur .ak-ts-t { color: var(--t-1); }
.ak-trace.live .ak-tnote { display: none; }
.ak-tnote { display: flex; align-items: center; gap: 7px; margin: 6px 0 2px 31px; font-size: 11.5px; color: var(--t-4); }
.ak-tnote svg { color: var(--green); flex: none; }
.ak-fcs { display: flex; flex-wrap: wrap; gap: 5px; }
.ak-fc, .ak-qc { display: inline-flex; align-items: center; gap: 5px; height: 21px; max-width: 230px; padding: 0 7px; border-radius: 6px; font-size: 11px; color: var(--t-3);
  background: rgba(255,255,255,.03); border: 1px solid var(--line-1); }
.ak-fc svg { color: var(--t-4); flex: none; }
.ak-fc-lk { display: inline-grid; color: var(--green); }
.ak-qc { color: var(--t-2); font-size: 10.5px; letter-spacing: 0; }
.ak-trace.live .ak-fc { animation: ak-in 300ms var(--ease-out) both; }
.ak-trace.live .ak-fc:nth-child(2) { animation-delay: 90ms; } .ak-trace.live .ak-fc:nth-child(3) { animation-delay: 180ms; }
.ak-trace.live .ak-fc:nth-child(4) { animation-delay: 270ms; } .ak-trace.live .ak-fc:nth-child(5) { animation-delay: 360ms; } .ak-trace.live .ak-fc:nth-child(6) { animation-delay: 450ms; }

/* ---------- 1bot turn: body ---------- */
.ak-body { margin-top: 12px; font: 420 14.5px/1.68 var(--f-ui); color: var(--t-2); letter-spacing: -0.002em; }
.ak-body > * { margin: 0; }
.ak-body p, .ak-body li { text-wrap: pretty; }
.ak-body .ak-lead { text-wrap: balance; }
.ak-body > * + * { margin-top: 12px; }
.ak-body > [data-b] { margin-top: 16px; }
.ak-body > [data-b] + :not([data-b]) { margin-top: 16px; }
.ak-body b { color: var(--t-1); font-weight: 600; }
.ak-body code { font: 500 12.5px/1.4 var(--f-mono); padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.05); border: 1px solid var(--line-1); color: var(--t-1); }
/* live draft caret: the answer streams in word by word before it finalizes with its citations */
.ak-cur { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; border-radius: 1px; vertical-align: -0.15em; background: var(--accent-2); animation: ak-blink 1s steps(2, jump-none) infinite; }
@keyframes ak-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.ak-lead { font-size: 15.5px; line-height: 1.58; font-weight: 600; color: var(--t-1); letter-spacing: -0.008em; }
:lang(zh) .ak-body > :not([data-b]) { max-width: 600px; }
:lang(zh) .ak-lead { max-width: 620px; }
.ak-h { margin-top: 26px !important; margin-bottom: -2px; font: 500 var(--fs-11)/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--t-3); }
.ak-body > ol, .ak-body > ul { padding-left: 0; list-style: none; counter-reset: ak; }
.ak-body > ol > li, .ak-body > ul > li { position: relative; padding-left: 26px; counter-increment: ak; }
.ak-body > ol > li + li, .ak-body > ul > li + li { margin-top: 8px; }
.ak-body > ol > li::before { content: counter(ak); position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center;
  font: 600 10px/1 var(--f-mono); color: var(--t-3); background: rgba(255,255,255,.05); border: 1px solid var(--line-1); }
.ak-body > ul > li::before { content: ""; position: absolute; left: 7px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--t-4); }

/* ---------- loading / error / system line ---------- */
.ak-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 60vh; color: var(--t-4); font-size: 13px; }
.ak-loaderr { max-width: 560px; margin: 18vh auto 0; display: flex; flex-direction: column; gap: 12px; }
.ak-sys { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 6px auto; max-width: 600px; text-align: center;
  font-size: 12px; line-height: 1.5; color: var(--t-4); }
.ak-sys > span { opacity: .85; }

/* ---------- attachments (files + images on a message) ---------- */
.ak-atts { display: flex; flex-wrap: wrap; gap: 8px; }
.ak-att { display: inline-flex; align-items: center; gap: 8px; max-width: 320px; height: 34px; padding: 0 11px; border-radius: 9px; font-size: 12.5px; color: var(--t-1);
  background: rgba(255,255,255,.035); border: 1px solid var(--line-1); transition: background var(--d-1), border-color var(--d-1); }
.ak-att:hover { background: rgba(255,255,255,.07); border-color: var(--line-2); }
.ak-att svg { color: var(--t-3); flex: none; }
.ak-att .meta { color: var(--t-4); flex: none; }
.ak-att-img { display: inline-flex; padding: 0; border: 1px solid var(--line-1); border-radius: 11px; overflow: hidden; background: var(--e-2); max-width: 320px; max-height: 220px; transition: border-color var(--d-1); }
.ak-att-img:hover { border-color: var(--line-3); }
.ak-att-img img { display: block; max-width: 320px; max-height: 220px; width: auto; height: auto; object-fit: cover; }

/* ---------- the photo gallery (a local find-photo answer, src/room/photo-find.ts: no model, no [mN] markers —
   every tile IS a cite). 160 px square thumbnails (.thumb/.lock reused from base.css for the private scrim);
   gallery.also is the same numbered chip as the Sources row (ak-sc, below), lock icon included. */
.ak-gallery { display: grid; grid-template-columns: repeat(auto-fill, 160px); gap: 8px; margin: 2px 0 4px; }
.ak-gal-item { display: block; width: 160px; height: 160px; padding: 0; cursor: pointer; transition: border-color var(--d-1), opacity var(--d-1); }
.ak-gal-item:hover { border-color: var(--line-3); }
.ak-gal-item.hl { border-color: var(--accent-2); box-shadow: 0 0 0 2px rgba(139,131,255,.25); }
.ak-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-gal-item.gone { opacity: .35; pointer-events: none; }
.ak-gal-gone-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--t-4); }
.ak-gal-also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; }
.ak-gal-also-lab { margin-right: 2px; }

/* ---------- the documents list (a local documents answer, src/room/docs-local.ts: no model, no [mN] markers —
   every chip IS a cite): the Sources row's numbered chips (ak-sc) under the line, in order; "还有 N 份" on a line of
   its own when more were counted than shown. */
.ak-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; }
.ak-list-more { flex-basis: 100%; }

/* a photo tile the answer picked by a guessed attribute (gallery.decide) gets a compact bottom bar: "不是这个"
   dims the tile and offers undo, "是" (shown only on the tiles the answer is least sure of) notes it and
   closes the bar. The wrap wholly replaces a plain tile's grid slot, so a tile with no decide is unaffected. */
.ak-gal-wrap { position: relative; width: 160px; height: 160px; }
.ak-gal-wrap .ak-gal-item { width: 100%; height: 100%; }
.ak-gal-wrap.ak-gal-corrected .ak-gal-item { opacity: .4; }
.ak-gal-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 0 0 calc(var(--r-ctl) - 1px) calc(var(--r-ctl) - 1px);
  background: linear-gradient(to top, rgba(10,11,14,.85), rgba(10,11,14,.55) 65%, transparent); }
.ak-gal-act { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 500; color: var(--t-1); white-space: nowrap;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); transition: background var(--d-1), border-color var(--d-1); }
.ak-gal-act:hover { background: rgba(255,255,255,.26); }
.ak-gal-act svg { flex: none; }
.ak-gal-act.yes:hover { background: color-mix(in srgb, var(--green) 35%, transparent); border-color: color-mix(in srgb, var(--green) 55%, transparent); }
.ak-gal-act.undo { height: auto; padding: 0; background: transparent; border: 0; color: var(--t-1); text-decoration: underline; text-underline-offset: 2px; }
.ak-gal-act.undo:hover { color: var(--t-1); background: transparent; }
.ak-gal-note { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--t-1); }
.ak-gal-note svg { color: var(--green); flex: none; }
.ak-gal-sep { color: rgba(255,255,255,.45); font-size: 10.5px; }

/* ---------- markdown tables in answer prose ---------- */
.ak-tbl-wrap { overflow-x: auto; border: 1px solid var(--line-1); border-radius: 10px; background: var(--e-1); }
.ak-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ak-table th { padding: 9px 12px; text-align: left; font: 500 10.5px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--t-3);
  background: rgba(255,255,255,.03); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.ak-table td { padding: 8px 12px; border-top: 1px solid var(--line-1); color: var(--t-2); line-height: 1.45; vertical-align: top; }
.ak-table td:first-child, .ak-table th:first-child { color: var(--t-1); }
.ak-table tbody tr:hover { background: rgba(255,255,255,.02); }
.ak-table .num { text-align: right; font-feature-settings: "tnum" 1; white-space: nowrap; }
.ak-table b { color: var(--t-1); }

/* ---------- 1bot-timeline: chart card ---------- */
.ak-tl-card { padding: 12px 14px 10px; }
.ak-tl-head { display: flex; align-items: center; gap: 8px; font: 600 13px/1.3 var(--f-ui); color: var(--t-1); }
.ak-tl-head svg { color: var(--accent-2); flex: none; }
.ak-tl-head .meta { font-weight: 400; color: var(--t-4); }
.ak-tl-chart { width: 100%; margin: 10px 0 4px; }
.ak-tl-chart canvas { display: block; }
.ak-tl-note { padding: 10px 0 4px; }
.ak-tl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 10px; font-size: 11px; color: var(--t-3); }
.ak-tl-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ak-tl-legend i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ak-tl-table td, .ak-tl-table th { white-space: nowrap; }
.ak-tl-table tbody tr { cursor: pointer; transition: background var(--d-1); }
.ak-tl-table tbody tr.on { background: var(--accent-bg); }
.ak-tl-table tbody tr.on td { color: var(--t-1); }
.ak-tl-nm { font-weight: 560; }
.ak-tl-cd { margin-left: 6px; font: 500 10.5px/1 var(--f-mono); color: var(--t-4); }

/* citations + guesses */
.ak-cite { position: relative; top: -0.5em; display: inline; padding: 1px 4px; margin: 0 1px 0 3px; border-radius: 4px; -webkit-box-decoration-break: clone;
  font: 600 9.5px/1 var(--f-mono); color: var(--accent-2); background: var(--accent-bg); vertical-align: baseline; cursor: default; white-space: nowrap;
  transition: background var(--d-1), color var(--d-1), box-shadow var(--d-2); }
.ak-cite + .ak-cite { margin-left: 1px; }
.ak-cite:hover, .ak-cite.hl { background: var(--accent); color: #0B0A1A; box-shadow: 0 0 0 3px rgba(139,131,255,.18); }
.ak-cite.ping { animation: ak-ping 1.1s var(--ease-out); }
@keyframes ak-ping { 0%, 40% { box-shadow: 0 0 0 0 rgba(139,131,255,.7); background: var(--accent); color: #0B0A1A; } 100% { box-shadow: 0 0 0 10px rgba(139,131,255,0); } }
.ak-guess { color: inherit; text-decoration: underline dashed; text-decoration-color: color-mix(in oklab, var(--t-3) 80%, transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ak-lead .ak-guess { font-weight: 500; }

/* foot: sources row + actions + follow-ups */
.ak-foot { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.ak-srcrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ak-sr-lab { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font-size: 12px; color: var(--t-3); }
.ak-sr-lab svg { color: var(--green); }
.ak-sc { display: inline-flex; align-items: center; gap: 6px; height: 26px; max-width: 220px; padding: 0 9px 0 4px; border-radius: 8px; font-size: 12px; color: var(--t-2);
  background: rgba(255,255,255,.035); border: 1px solid var(--line-1); transition: background var(--d-1), border-color var(--d-1), color var(--d-1); }
.ak-sc svg { color: var(--t-4); flex: none; }
.ak-sc .n { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; font-size: 10px; font-weight: 600; color: var(--accent-2); background: var(--accent-bg); }
.ak-sc:hover, .ak-sc.hl { background: rgba(255,255,255,.07); border-color: var(--line-2); color: var(--t-1); }
.ak-sc.hl .n { background: var(--accent); color: #0B0A1A; }
.ak-sc-lk { display: inline-grid; } .ak-sc-lk svg { color: var(--green); }
.ak-acts { display: flex; align-items: center; gap: 2px; margin-left: -6px; opacity: 0; transition: opacity var(--d-2) var(--ease-out); }
.ak-bot:hover .ak-acts, .ak-ex.last .ak-acts { opacity: 1; }
.ak-acts .btn { color: var(--t-4); }
.ak-acts .btn:hover { color: var(--t-1); }
.ak-at { margin-left: 6px; font-size: 11px; color: var(--t-5); }
.ak-stopped { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--t-3); }
.ak-stopped > svg { color: var(--t-4); }
.ak-bot.cut-all .ak-body, .ak-bot.cut-all .ak-srcrow, .ak-bot.cut-all .ak-fu { display: none; }
.ak-bot.cut-all .ak-tsw { display: none; }
.ak-cut { display: none !important; }

.ak-fu { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line-1); display: flex; flex-direction: column; }
.ak-fu .eyebrow { margin-bottom: 4px; }
.ak-fu-i { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; margin: 0 -10px; border-radius: 9px; font-size: 13.5px; color: var(--t-2); text-align: left;
  transition: background var(--d-1), color var(--d-1); }
.ak-fu-i { position: relative; }
.ak-fu-i + .ak-fu-i::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 1px; background: var(--line-1); transition: opacity var(--d-1); }
.ak-fu-i span { flex: 1; min-width: 0; }
.ak-fu-i svg { color: var(--t-4); flex: none; }
.ak-fu-i svg:last-child { opacity: 0; transition: opacity var(--d-1); }
.ak-fu-i:hover { background: rgba(255,255,255,.04); color: var(--t-1); }
.ak-fu-i:hover::before, .ak-fu-i:hover + .ak-fu-i::before { opacity: 0; }
.ak-fu-i:hover svg:last-child { opacity: 1; }
.ak-fu-i:active { transform: scale(.995); }

/* ---------- streaming ---------- */
.ak-bot.thinking .ak-body, .ak-bot.thinking .ak-foot, .ak-bot.thinking .ak-fu { display: none; }
.ak-bot.streaming .ak-w { animation: ak-w 440ms var(--ease-out) both; animation-delay: var(--d); }
.ak-bot.streaming .ak-body > ol > li, .ak-bot.streaming .ak-body > ul > li { animation: ak-li 320ms var(--ease-out) both; animation-delay: var(--d); }
.ak-bot.streaming .ak-atom { animation: ak-pop 340ms var(--ease-spring) both; animation-delay: var(--d); }
.ak-bot.streaming .ak-body > [data-b], .ak-bot.streaming .ak-foot, .ak-bot.streaming .ak-fu { animation: rise 600ms var(--ease-out) both; animation-delay: var(--d); }
.ak-bot.streaming [data-b] [data-bi] { animation: ak-in 460ms var(--ease-out) both; animation-delay: calc(var(--d) + 140ms + var(--j, 0) * 80ms); }
.ak-bot.streaming .ak-bar { animation: ak-grow 640ms var(--ease-out) both; animation-delay: calc(var(--d) + 260ms + var(--j, 0) * 90ms); }
.ak-bot.static .ak-bar { animation: ak-grow 640ms var(--ease-out) both; animation-delay: calc(420ms + var(--j, 0) * 90ms); }
@keyframes ak-w { from { opacity: 0; filter: blur(3px); } }
@keyframes ak-li { from { opacity: 0; } }
@keyframes ak-pop { from { opacity: 0; transform: scale(.5); } }
@keyframes ak-in { from { opacity: 0; transform: translateY(5px); } }
@keyframes ak-grow { from { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ak-bot.static .ak-bar, .ak-bot.streaming .ak-bar { animation: none; }
}

/* ---------- block: passport fact card + validity timeline ---------- */
.ak-fact { padding: 14px 16px 12px; }
.ak-fact-top { display: flex; gap: 14px; align-items: center; }
.ak-pp { width: 48px; height: 64px; flex: none; border-radius: 7px; }
.ak-pp img { object-position: 50% 80%; }
.ak-lk { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: var(--t-1); }
.ak-pp.lock::after, .ak-is-th.lock::after { backdrop-filter: blur(3.5px) saturate(.6); -webkit-backdrop-filter: blur(3.5px) saturate(.6); background: rgba(10,11,14,.5); }
.ak-pp .ak-lk svg, .ak-is-th .ak-lk svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.ak-fact-id { flex: 1; min-width: 0; }
.ak-fact-ey { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ak-fact-name { margin-top: 4px; font: 600 15px/1.25 var(--f-display); letter-spacing: -0.01em; color: var(--t-1); }
.ak-fact-name .mono { margin-left: 6px; font-size: 10.5px; color: var(--t-4); font-weight: 500; }
.ak-kv { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 4px 26px; margin-top: 7px; }
.ak-kv > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ak-kv span { font-size: 11px; color: var(--t-4); white-space: nowrap; }
.ak-kv b { font: 560 13px/1.35 var(--f-ui); font-feature-settings: "tnum" 1; color: var(--t-1); white-space: nowrap; }
.ak-kv b.mono { font: 500 12.5px/1.35 var(--f-mono); letter-spacing: 0; }
.ak-kv .red b { color: var(--red-tx); }

.ak-plot { position: relative; height: 130px; margin: 14px 2px 0; padding-top: 12px; border-top: 1px solid var(--line-1); box-sizing: content-box; }
.ak-plot > * { --top: 12px; }
.ak-flag { position: absolute; left: var(--x); top: 12px; bottom: 16px; width: 1px; z-index: 2; pointer-events: none; }
.ak-flag::before { content: ""; position: absolute; top: 16px; bottom: 0; left: 0; width: 1px; }
.ak-flag span { position: absolute; top: 0; left: 5px; font: 500 11px/1 var(--f-ui); font-feature-settings: "tnum" 1; white-space: nowrap; }
.ak-flag.now::before { background: linear-gradient(180deg, var(--accent-2), rgba(139,131,255,.15)); box-shadow: 0 0 10px rgba(139,131,255,.7); }
.ak-flag.now span { color: var(--accent-2); left: -1px; transform: translateX(-50%); }
.ak-flag.trip::before { background: repeating-linear-gradient(180deg, var(--t-2) 0 3px, transparent 3px 6px); opacity: .8; }
.ak-flag.trip span { color: var(--t-1); }
.ak-flag.exp::before { background: linear-gradient(180deg, var(--red), rgba(255,97,102,.25)); }
.ak-flag.exp span { color: var(--red-tx); }
.ak-row { position: absolute; left: 0; right: 0; height: 22px; top: calc(12px + 22px + var(--r) * 30px); }
.ak-bar { position: absolute; top: 0; bottom: 0; left: var(--x0); width: calc(var(--x1) - var(--x0)); display: flex; align-items: center; padding: 0 9px; border-radius: 6px;
  font: 500 11px/1 var(--f-ui); white-space: nowrap; overflow: hidden; transform-origin: left center; }
.ak-bar span { overflow: hidden; text-overflow: ellipsis; }
.ak-bar.valid { padding-left: calc(var(--xt) + 10px); color: var(--t-2); border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.07) 10%, rgba(255,255,255,.10)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset -2px 0 0 var(--red); }
.ak-bar.need-ok { border-radius: 6px 0 0 6px; background: rgba(139,131,255,.07); border: 1px dashed var(--accent-line); border-right: 0; }
.ak-bar.need-short { border-radius: 0 6px 6px 0; color: var(--red-tx); border: 1px dashed var(--red-line); border-left: 0;
  background: repeating-linear-gradient(135deg, rgba(255,97,102,.17) 0 5px, rgba(255,97,102,.05) 5px 10px); }
.ak-bar.renew { justify-content: center; padding: 0 4px; color: var(--amber-tx); background: var(--amber-bg); border: 1px solid var(--amber-line); }
.ak-bar.newpp { margin-left: 3px; color: var(--green-tx); border: 1px dashed var(--green-line); border-right: 0; border-radius: 6px 0 0 6px;
  background: linear-gradient(90deg, rgba(61,214,140,.12), rgba(61,214,140,.01)); }
.ak-bar.newpp .ak-guess { text-decoration-color: rgba(107,227,169,.5); }
.ak-rl { position: absolute; right: calc(100% - var(--x) + 9px); top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--t-3); white-space: nowrap; }
.ak-axis { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; border-top: 1px solid var(--line-1); }
.ak-axis span { position: absolute; left: var(--x); top: 0; height: 16px; padding: 3px 0 0 4px; border-left: 1px solid var(--line-2); font: 500 10.5px/1 var(--f-ui); font-feature-settings: "tnum" 1; color: var(--t-4); white-space: nowrap; }

/* ---------- block: checklist ---------- */
.ak-todo { padding: 2px 0; }
.ak-todo-i { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px 11px 14px; }
.ak-todo-i + .ak-todo-i { border-top: 1px solid var(--line-1); }
.ak-chk { display: grid; place-items: center; width: 18px; height: 18px; flex: none; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--t-4); color: transparent;
  transition: background var(--d-2), border-color var(--d-2), color var(--d-2), transform var(--d-1) var(--ease-out); }
.ak-chk:hover { border-color: var(--t-2); }
.ak-chk:active { transform: scale(.88); }
.ak-todo-i.done .ak-chk { background: var(--green); border-color: var(--green); color: #0B0C10; animation: ak-pop 300ms var(--ease-spring); }
.ak-todo-b { flex: 1; min-width: 0; }
.ak-todo-t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--t-1); }
.ak-todo-i.done .ak-todo-t > span { color: var(--t-3); text-decoration: line-through; text-decoration-color: var(--t-4); }
.ak-todo-s { margin-top: 2px; font-size: 12.5px; line-height: 1.55; color: var(--t-3); }
.ak-blk { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 500; color: var(--red-tx);
  background: var(--red-bg); border: 1px solid var(--red-line); transition: background var(--d-1); }
.ak-blk:hover { background: rgba(255,97,102,.2); }
.ak-add { flex: none; margin-top: -2px; color: var(--t-3); }
.ak-add.on { color: var(--green-tx); }
.ak-add.on:hover { background: transparent; color: var(--green-tx); }

/* ---------- block: tables ---------- */
.ak-tbl { overflow: hidden; }
.ak-tbl-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px 9px; border-bottom: 1px solid var(--line-1); }
.ak-tbl-cap .meta { display: inline-flex; align-items: center; }
.ak-tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ak-tbl th { padding: 9px 14px 7px; text-align: left; font: 500 10.5px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--t-4); white-space: nowrap; }
.ak-tbl td { padding: 9px 14px; border-top: 1px solid var(--line-1); color: var(--t-2); line-height: 1.4; vertical-align: middle; }
.ak-tbl td:first-child { color: var(--t-1); }
.ak-tbl tbody tr { transition: background var(--d-1); }
.ak-tbl tbody tr:hover { background: rgba(255,255,255,.02); }
.ak-tbl .r { text-align: right; }
.ak-tbl .mono { font-size: 12.5px; color: var(--t-1); white-space: nowrap; }
.ak-inv { font-size: 12px !important; }
.ak-cl { display: block; color: var(--t-1); }
.ak-sub { display: block; font-size: 11.5px; color: var(--t-4); }
.ak-best { color: var(--green-tx) !important; }
.ak-dl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.ak-dl i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--t-4); }
.ak-dl.good { color: var(--green-tx); } .ak-dl.good i { background: var(--green); }
.ak-dl.bad { color: var(--red-tx); } .ak-dl.bad i { background: var(--red); }
.ak-dl.warn { color: var(--amber-tx); } .ak-dl.warn i { background: var(--amber); }

/* ---------- block: approval card ---------- */
.ak-appr { overflow: hidden; transition: border-color var(--d-3), box-shadow var(--d-3); }
.ak-appr.pending { border-color: var(--line-2); box-shadow: inset 0 1px 0 var(--rim), 0 0 0 1px rgba(245,179,63,.06), 0 18px 40px -24px rgba(0,0,0,.9); }
.ak-appr.sent { border-color: var(--green-line); }
.ak-appr:not(.sent) .s, .ak-appr.sent .p { display: none !important; }
.ak-ap-h { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
.ak-ap-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; color: var(--t-2); background: var(--e-3); border: 1px solid var(--line-2); transition: background var(--d-3), color var(--d-3), border-color var(--d-3); }
.ak-ap-ic > span { display: grid; }
.ak-appr.sent .ak-ap-ic { color: var(--green); background: var(--green-bg); border-color: var(--green-line); }
.ak-appr.sent .ak-ap-ic .s { animation: ak-pop 420ms var(--ease-spring) both; }
.ak-ap-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ak-ap-tt b { font-size: 13.5px; font-weight: 600; color: var(--t-1); }
.ak-ap-mid { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--d-4) var(--ease-out), opacity var(--d-3) var(--ease-out); }
.ak-appr.sent .ak-ap-mid { grid-template-rows: 0fr; opacity: 0; }
.ak-ap-in { overflow: hidden; min-height: 0; }
.ak-ap-f { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; row-gap: 7px; padding: 11px 14px; border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1);
  background: rgba(0,0,0,.14); font-size: 13px; }
.ak-ap-f .k { color: var(--t-4); font-size: 12px; }
.ak-ap-f .v { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--t-2); }
.ak-ap-f .v b { font-weight: 500; color: var(--t-1); white-space: nowrap; }
.ak-ap-f .v .mono { font-size: 11.5px; color: var(--t-4); }
.ak-ap-b { position: relative; max-height: 132px; overflow: hidden; padding: 12px 14px 4px; font: 420 13.5px/1.6 var(--f-ui); color: var(--t-2); outline: 0;
  -webkit-mask: linear-gradient(180deg, #000 62%, transparent); mask: linear-gradient(180deg, #000 62%, transparent); transition: max-height var(--d-4) var(--ease-out), background var(--d-2); }
.ak-ap-b p { margin: 0 0 8px; }
.ak-appr.editing .ak-ap-b { max-height: 420px; -webkit-mask: none; mask: none; user-select: text; -webkit-user-select: text; cursor: text; background: rgba(139,131,255,.045);
  box-shadow: inset 0 0 0 1px var(--accent-line); }
.ak-ap-foot { display: flex; align-items: center; gap: 6px; padding: 10px 12px 10px 14px; border-top: 1px solid var(--line-1); }
.ak-appr.sent .ak-ap-foot { border-top: 0; padding-top: 0; }
.ak-ap-note { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; min-width: 0; }
.ak-ap-note span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-ap-note svg { flex: none; color: var(--green); }
.ak-ap-note.s svg { color: var(--t-3); }
.btn.primary .kbd { margin-left: 2px; background: rgba(10,11,14,.08); color: rgba(10,11,14,.55); border-color: rgba(10,11,14,.14); box-shadow: none; }
.ak-ap-gone { display: none; align-items: center; gap: 8px; padding: 10px 12px 10px 14px; font-size: 12.5px; color: var(--t-3); }
.ak-ap-gone span { margin-right: auto; }
.ak-appr.gone { background: transparent; border-style: dashed; box-shadow: none; }
.ak-appr.gone > :not(.ak-ap-gone) { display: none !important; }
.ak-appr.gone .ak-ap-gone { display: flex; }

/* ---------- block: option cards + key dates + action rows + metric ---------- */
.ak-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ak-opt { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px 14px; }
.ak-opt.rec { border-color: var(--accent-line); background: linear-gradient(180deg, rgba(139,131,255,.08), rgba(139,131,255,0) 55%), var(--e-1);
  box-shadow: inset 0 1px 0 var(--rim), 0 0 0 3px rgba(139,131,255,.06), 0 14px 40px -20px rgba(99,102,241,.45); }
.ak-opt-k { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 20px; }
.ak-opt-t { margin-top: 2px; font: 600 14px/1.3 var(--f-display); letter-spacing: -0.01em; color: var(--t-1); }
.ak-opt-p { display: flex; align-items: baseline; gap: 4px; }
.ak-opt-p .num { font-size: 21px; font-weight: 600; color: var(--t-1); }
.ak-opt-p span:last-child { font-size: 12px; color: var(--t-3); }
.ak-opt-s { font-size: 12px; color: var(--t-3); line-height: 1.45; }
.ak-pc { list-style: none; margin: 6px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line-1); display: flex; flex-direction: column; gap: 5px; }
.ak-pc li { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--t-2); }
.ak-pc li svg { flex: none; margin-top: 2px; }
.ak-pc .pro svg { color: var(--green); }
.ak-pc .con svg { color: var(--amber); }
.ak-pc .ak-cite { top: -0.3em; }

.ak-dates { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 6px 12px; }
.ak-dates::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 19px; height: 1px; background: linear-gradient(90deg, var(--amber-line), var(--line-2) 40%, var(--line-2)); }
.ak-dt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 0 4px; }
.ak-dt i { width: 11px; height: 11px; margin-bottom: 6px; border-radius: 50%; background: var(--e-1); border: 2px solid var(--t-4); }
.ak-dt.amber i { border-color: var(--amber); }
.ak-dt.hard i { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-bg), 0 0 14px rgba(245,179,63,.5); }
.ak-dt .mono { font-size: 11px; color: var(--t-3); }
.ak-dt b { font-size: 12.5px; font-weight: 500; color: var(--t-1); line-height: 1.35; }
.ak-dt-r { font-size: 11px; color: var(--t-4); }
.ak-dt.amber .ak-dt-r { color: var(--amber-tx); }

.ak-al { padding: 2px 0; }
.ak-ar { display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; }
.ak-ar + .ak-ar { border-top: 1px solid var(--line-1); }
.ak-ar-dot { width: 7px; height: 7px; flex: none; align-self: flex-start; margin-top: 7px; border-radius: 50%; background: var(--t-4); }
.ak-ar-dot.red { background: var(--red); box-shadow: 0 0 8px rgba(255,97,102,.6); }
.ak-ar-dot.green { background: var(--green); }
.ak-ar-b { flex: 1; min-width: 0; }
.ak-ar-t { font-size: 13.5px; font-weight: 600; color: var(--t-1); }
.ak-ar-s { margin-top: 2px; font-size: 12.5px; line-height: 1.55; color: var(--t-3); }
.ak-ar-a { flex: none; }

.ak-metric { padding: 13px 16px 12px; }
.ak-mt-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ak-mt-n { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.ak-mt-n .num { font-size: 28px; font-weight: 600; color: var(--t-1); letter-spacing: -0.03em; }
.ak-mt-bar { position: relative; height: 8px; margin: 12px 0 6px; border-radius: 6px; background: rgba(255,255,255,.06); }
.ak-mt-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); border-radius: 6px; background: linear-gradient(90deg, rgba(245,179,63,.35), var(--amber)); transform-origin: left; animation: ak-grow 700ms var(--ease-out) both 300ms; }
.ak-mt-bar b { position: absolute; left: var(--t); top: -5px; bottom: -5px; width: 2px; border-radius: 2px; background: var(--t-1); }
.ak-mt-bar b span { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--t-2); font-weight: 500; }
.ak-mt-ax { display: flex; justify-content: space-between; font-size: 10px; color: var(--t-4); }
.ak-inl { display: flex; flex-wrap: wrap; gap: 6px; }
.ak-inl .btn { gap: 7px; }
.ak-inl .btn svg:last-child { color: var(--t-3); }

/* ---------- dock + composer ---------- */
.ak-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 40px 40px 18px; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,14,18,0), rgba(13,14,18,.9) 46%, var(--bg-2)); }
.ak-dock-in { position: relative; max-width: 720px; margin: 0 auto; pointer-events: auto; isolation: isolate; }
/* the AI glow sits behind the glass (the shared ring's own glow would paint inside the composer) */
.ak-comp.ai-ring::after { display: none; }
.ak-dock-in::before, .ak-e-comp::before { content: ""; position: absolute; inset: 8px 14px 4px; z-index: -1; border-radius: 20px; pointer-events: none; opacity: 0;
  background: var(--ai-sweep); filter: blur(22px); transition: opacity var(--d-4) var(--ease-out); animation: ai-rot 2.4s linear infinite; }
.ak-dock-in:has(.ak-comp.live)::before, .ak-e-comp:has(.ak-comp.live)::before { opacity: .42; }
.ak-comp { background: rgba(20,21,27,.9); }
.ak-comp textarea { font-size: 14.5px; }
.ak-comp .ak-stopb { display: none; background: var(--e-4); color: var(--t-1); box-shadow: inset 0 0 0 1px var(--line-3); }
.ak-comp.gen .ak-send { display: none; }
.ak-comp.gen .ak-stopb { display: grid; animation: ak-pop 260ms var(--ease-spring) both; }
.ak-comp.listen textarea::placeholder { color: var(--accent-2); }
.ak-hint { display: inline-flex; align-items: center; margin-right: 6px; color: var(--t-4); }
.ak-hint > span { display: inline-flex; align-items: center; gap: 5px; }
.ak-hint .h-stop, .ak-comp.gen .ak-hint .h-send { display: none; }
.ak-comp.gen .ak-hint .h-stop { display: inline-flex; }
/* mic: recording (red, pulsing) and unavailable (dimmed) states */
.ak-comp [data-ak="mic"].rec { color: var(--red); background: color-mix(in srgb, var(--red) 15%, transparent); animation: ak-mic-pulse 1.2s ease-in-out infinite; }
@keyframes ak-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,97,102,.35); } 50% { box-shadow: 0 0 0 4px rgba(255,97,102,0); } }
.ak-comp [data-ak="mic"].ak-mic-off { opacity: .4; }
.ak-scope { cursor: default; transition: background var(--d-1), border-color var(--d-1); }
.ak-scope:hover { background: rgba(255,255,255,.08); border-color: var(--line-2); }
.ak-scope svg:last-child { color: var(--t-4); }
.ak-jump { position: absolute; left: 50%; top: -46px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--t-2);
  transform: translate(-50%, 6px) scale(.9); opacity: 0; pointer-events: none; transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-out); }
.ak-jump.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ak-jump:hover { color: var(--t-1); }
.ak-menu { position: absolute; bottom: calc(100% + 8px); z-index: 12; width: 236px; padding: 5px; border-radius: 13px; background: var(--glass-bg-strong); animation: pop var(--d-3) var(--ease-out) both; transform-origin: bottom left; }
.ak-mh { padding: 8px 9px 4px; }
.ak-mi { display: flex; align-items: center; gap: 9px; width: 100%; height: 32px; padding: 0 9px; border-radius: 8px; font-size: 13px; color: var(--t-2); transition: background var(--d-1), color var(--d-1); }
.ak-mi-l { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-mi .mono { font-size: 10.5px; color: var(--t-4); }
.ak-mi:hover { background: rgba(255,255,255,.06); color: var(--t-1); }
.ak-mi.on { color: var(--t-1); }
.ak-mi > svg:last-child { color: var(--accent-2); }

/* ---------- citation preview (glass) ---------- */
.ak-pv { position: fixed; z-index: 45; left: 0; top: 0; width: 328px; padding: 7px; border-radius: 15px; pointer-events: none; opacity: 0;
  background: var(--glass-bg-strong); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--line-2); box-shadow: var(--glass-edge), 0 30px 80px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.35);
  transform: translateY(4px) scale(.97); transform-origin: var(--ox, 50%) 100%; transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-out); }
.ak-pv.dn { transform-origin: var(--ox, 50%) 0; transform: translateY(-4px) scale(.97); }
.ak-pv.on { opacity: 1; transform: none; pointer-events: auto; }
.ak-pv-img { height: 150px; border-radius: 9px; }
.ak-pv-img img { object-position: top center; }
.ak-pv-img .ak-lk-l { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--t-1); }
.ak-pv-img .ak-lk-l svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: rgba(10,11,14,.6); border: 1px solid var(--line-2); }
.ak-pv-q { margin: 7px 0 0; padding: 9px 11px 10px; border-radius: 9px; background: rgba(0,0,0,.28); border: 1px solid var(--line-1); font-size: 12px; line-height: 1.6; color: var(--t-3); }
.ak-pv-q:first-child { margin-top: 0; }
.ak-pv-q .cx { color: var(--t-4); }
.ak-pv-q mark { color: var(--t-1); background: rgba(139,131,255,.22); border-radius: 3px; padding: 1px 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  box-shadow: inset 0 -1px 0 rgba(179,173,255,.5); }
.ak-pv-file { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 10.5px; color: var(--t-4); letter-spacing: 0; }
.ak-pv-file svg { flex: none; }
.ak-pv-b { padding: 9px 5px 2px; display: flex; flex-direction: column; gap: 4px; }
.ak-pv-t { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; font-weight: 560; line-height: 1.35; color: var(--t-1); }
.ak-pv-n { display: grid; place-items: center; flex: none; width: 17px; height: 17px; margin-top: 1px; border-radius: 5px; font-size: 10px; font-weight: 600; color: #0B0A1A; background: var(--accent); }
.ak-pv-m { display: flex; align-items: center; gap: 6px; min-width: 0; padding-left: 24px; font-size: 11.5px; color: var(--t-3); }
.ak-pv-m .chip { margin-left: auto; flex: none; }
.ak-pv-a { display: flex; gap: 6px; padding: 9px 5px 3px 29px; }

/* ---------- inspector: sources ---------- */
.ak-ih-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--accent-2); background: var(--accent-bg); }
.ak-ih-ok { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.ak-ih-ok svg { color: var(--green); }
.ak-ih-sub { margin: 0 4px 10px; font-size: 12px; line-height: 1.55; color: var(--t-4); }
.ak-is-list { display: flex; flex-direction: column; }
.ak-is { position: relative; display: flex; gap: 10px; padding: 12px 8px 13px 6px; border-radius: 12px; transition: background var(--d-1); }
.ak-is + .ak-is::before { content: ""; position: absolute; top: 0; left: 34px; right: 8px; height: 1px; background: var(--line-1); }
.ak-is:hover { background: rgba(255,255,255,.03); }
.ak-is:hover::before, .ak-is:hover + .ak-is::before { opacity: 0; }
.ak-is.flash { animation: ak-flash 1.4s var(--ease-out); }
@keyframes ak-flash { 0%, 30% { background: rgba(139,131,255,.13); box-shadow: inset 0 0 0 1px var(--accent-line); } 100% { background: transparent; box-shadow: inset 0 0 0 1px transparent; } }
.ak-is-n { display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 5px; font-size: 10px; font-weight: 600; color: var(--accent-2); background: var(--accent-bg); }
.ak-is-main { flex: 1; min-width: 0; }
.ak-is-top { display: flex; gap: 10px; align-items: flex-start; }
.ak-is-th { width: 52px; height: 52px; flex: none; border-radius: 9px; }
.ak-is-th img { object-position: top center; }
.ak-is-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--t-3); background: var(--e-2); border: 1px solid var(--line-1); }
.ak-is-tile .mono { font-size: 8.5px; letter-spacing: .04em; color: var(--t-4); }
.ak-is-tt { flex: 1; min-width: 0; }
.ak-is-t { font-size: 13px; font-weight: 560; line-height: 1.38; color: var(--t-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ak-is-m { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 5px; font-size: 11.5px; color: var(--t-3); }
.ak-is-why { display: flex; gap: 7px; margin-top: 9px; font-size: 12px; line-height: 1.5; color: var(--t-2); }
.ak-is-why svg { flex: none; margin-top: 3px; color: var(--accent-2); }
.ak-is-pv { display: flex; align-items: center; gap: 6px; margin-top: 7px; padding: 5px 8px; border-radius: 7px; font-size: 11.5px; line-height: 1.4; color: var(--green-tx);
  background: var(--green-bg); border: 1px solid var(--green-line); }
.ak-is-pv svg { flex: none; }
.ak-is-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ak-ifoot { flex: none; display: flex; gap: 10px; align-items: flex-start; padding: 12px 18px 14px; border-top: 1px solid var(--line-1); background: rgba(0,0,0,.12); }
.ak-ifoot > svg { flex: none; margin-top: 1px; color: var(--green); }
.ak-ifoot b { display: block; font-size: 12px; font-weight: 500; color: var(--t-2); }
.ak-ifoot span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--t-4); }

/* ---------- empty state (New chat) ---------- */
.ak-empty { min-height: 100%; max-width: 800px; margin: 0 auto; padding: 96px 40px 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ak-e-orb { display: flex; justify-content: center; }
.ak-e-title { margin: 20px 0 8px; font: 600 30px/1.15 var(--f-display); letter-spacing: -0.03em; text-align: center; color: var(--t-1); }
.ak-e-sub { max-width: 520px; margin: 0 0 26px; font-size: 14px; line-height: 1.6; text-align: center; color: var(--t-3); }
.ak-e-comp { position: relative; width: 100%; max-width: 720px; isolation: isolate; }
.ak-e-comp .composer { background: rgba(20,21,27,.86); }
.ak-e-comp textarea { font-size: 15px; padding-top: 16px; }
.ak-e-grid { width: 100%; max-width: 720px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ak-e-card { display: flex; align-items: center; gap: 11px; padding: 12px 14px; text-align: left; font-size: 13px; color: var(--t-2); }
.ak-e-q { flex: 1; min-width: 0; }
.ak-e-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px; color: var(--accent-2); background: var(--accent-bg); border: 1px solid var(--accent-line); }
.ak-e-card > svg { color: var(--t-4); flex: none; transition: color var(--d-1), transform var(--d-2) var(--ease-out); }
.ak-e-card:hover { color: var(--t-1); }
.ak-e-card:hover > svg { color: var(--t-1); transform: translate(1px, -1px); }

/* toast path (toasts live outside the page) */
.ak-tpath { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--t-3); }

/* ---------- narrow column ---------- */
@container (max-width: 640px) {
  .ak-opts { grid-template-columns: 1fr; gap: 8px; }
  .ak-opt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 18px; row-gap: 4px; align-content: start; }
  .ak-opt > :not(.ak-pc) { grid-column: 1; }
  .ak-opt .ak-pc { grid-column: 2; grid-row: 1 / span 4; margin: 0; padding: 0 0 0 16px; border-top: 0; border-left: 1px solid var(--line-1); align-self: stretch; justify-content: center; }
  .ak-kv { grid-template-columns: repeat(2, auto); }
  .ak-tbl th, .ak-tbl td { padding-left: 10px; padding-right: 10px; }
  .ak-add span { display: none; }
  .ak-add { width: 26px; padding: 0; }
}
@container (max-width: 480px) {
  .ak-gallery { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ak-gal-item, .ak-gal-wrap { width: auto; height: auto; aspect-ratio: 1 / 1; }
}
@media (max-width: 1360px) { .ak-col { padding-left: 32px; padding-right: 32px; } .ak-dock { padding-left: 32px; padding-right: 32px; } }

/* lift toasts above the floating composer while this screen is open */
.app:has(.page:not(.out) .ak-dock) ~ .toasts { bottom: 150px; }