:root {
  --ground: #F5F6F5; --surface: #FFFFFF; --sunken: #ECEEED; --hover: #E3E6E5; --selected: #DCE0DF;
  --line: #DADEDD; --line-strong: #8C9592; --ink: #15191C; --ink-muted: #525B60; --on-ink: #F5F6F5;
  --accent: #2457C5; --on-accent: #FFFFFF; --accent-ink: #1F4FB8; --accent-soft: #E6EEFC; --focus: #1F4FB8;
  --ok: #1F7A4D; --danger: #B42318; --danger-soft: #FDECEA; --dot: #D3D8D6; --scrim: rgba(21,25,28,.40);
  --shadow-composer: 0 1px 2px rgba(21,25,28,.06), 0 8px 24px rgba(21,25,28,.06);
  --shadow-window: 0 24px 64px rgba(21,25,28,.28);
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --display: "IBM Plex Sans Condensed", "IBM Plex Sans", "Arial Narrow", system-ui, -apple-system, "PingFang TC", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ok-soft: #E5F3EB; --warn: #8F5A00; --warn-mark: #C98500; --warn-soft: #FBF0DB; --neutral-mark: #9AA3A0; --s1: #2457C5; --s2: #D9682E; --grid: #E7EAE9;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #121517; --surface: #1A1E21; --sunken: #0E1012; --hover: #23282C; --selected: #2A3035;
    --line: #2A3034; --line-strong: #5E676D; --ink: #E8ECEB; --ink-muted: #A3ACB0; --on-ink: #121517;
    --accent: #6B97F2; --on-accent: #0B1220; --accent-ink: #8DB2FF; --accent-soft: #18263F; --focus: #8DB2FF;
    --ok: #5CC28E; --danger: #F97066; --danger-soft: #3B1A17; --dot: #2C3236; --scrim: rgba(0,0,0,.60);
    --shadow-composer: 0 1px 2px rgba(0,0,0,.5); --shadow-window: 0 24px 64px rgba(0,0,0,.7);
    --ok-soft: #14291F; --warn: #E5A23C; --warn-mark: #D99A2B; --warn-soft: #33260F; --neutral-mark: #6B757A; --s1: #5B8AEB; --s2: #D96F38; --grid: #252A2E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #121517; --surface: #1A1E21; --sunken: #0E1012; --hover: #23282C; --selected: #2A3035;
  --line: #2A3034; --line-strong: #5E676D; --ink: #E8ECEB; --ink-muted: #A3ACB0; --on-ink: #121517;
  --accent: #6B97F2; --on-accent: #0B1220; --accent-ink: #8DB2FF; --accent-soft: #18263F; --focus: #8DB2FF;
  --ok: #5CC28E; --danger: #F97066; --danger-soft: #3B1A17; --dot: #2C3236; --scrim: rgba(0,0,0,.60);
  --shadow-composer: 0 1px 2px rgba(0,0,0,.5); --shadow-window: 0 24px 64px rgba(0,0,0,.7);
  --ok-soft: #14291F; --warn: #E5A23C; --warn-mark: #D99A2B; --warn-soft: #33260F; --neutral-mark: #6B757A; --s1: #5B8AEB; --s2: #D96F38; --grid: #252A2E;
    color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 14px/20px var(--sans); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--accent-ink); }
.wm { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app { display: flex; height: 100%; }
#side { flex: 0 0 264px; background: var(--sunken); display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; overflow: hidden; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 12px 8px; }
.icon-btn { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; text-decoration: none; width: 100%; }
.row:hover { background: var(--hover); }
#new { min-height: 40px; font-weight: 500; }
.plus { width: 24px; height: 24px; border-radius: 999px; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; }
#side a { display: flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
#side a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#side a:hover { background: var(--hover); }
#side a.on { background: var(--selected); }
.group { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .02em; color: var(--ink-muted); padding: 16px 10px 4px; }
#list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#searchResults { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#side > .row, #side > input, .side-top, #side > .group, #guestCard { flex-shrink: 0; }
#guestCard { margin: 8px 2px 4px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
#guestCard .meter { height: 4px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
#guestCard .meter span { display: block; height: 4px; background: var(--accent); border-radius: 999px; }
.link-btn { border: 0; background: transparent; padding: 0; color: var(--accent-ink); text-decoration: underline; font-size: inherit; justify-self: start; }
.quiet-link { color: var(--ink-muted); }
#account { position: relative; flex-shrink: 0; border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 2px; }
.avatar { width: 30px; height: 30px; border-radius: 999px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.avatar.user { background: var(--ink); color: var(--on-ink); }

#main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); }
#main.empty { background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 24px 24px; }
#top { display: flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 60px; }
#title { flex: 1 1 auto; min-width: 0; font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#menuBtn { display: none; }

#scroll { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 8px 24px 16px; }
#main.empty #scroll { flex: 1 1 auto; justify-content: flex-end; padding-bottom: 28px; }
#main.empty #dock { flex: 1 1 auto; }
#main:not(.empty) #hero { display: none; }
#hero { display: grid; justify-items: center; gap: 14px; text-align: center; }
#hero h1 { margin: 0; font: 500 28px/34px var(--display); letter-spacing: -.01em; }
#hero p { margin: 0; max-width: 520px; font-size: 15px; line-height: 22px; color: var(--ink-muted); text-wrap: balance; }
#log { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 28px; }
#main.empty #log { display: none; }
.msg { font-size: 15px; line-height: 26px; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; max-width: 80%; background: var(--sunken); border-radius: 18px; padding: 10px 16px; white-space: pre-wrap; }
.msg.assistant > :first-child { margin-top: 0; }
.msg.assistant > :last-child { margin-bottom: 0; }
.msg.assistant p, .msg.assistant ul, .msg.assistant ol { margin: 0 0 12px; white-space: pre-wrap; }
.msg.assistant ul, .msg.assistant ol { padding-left: 22px; white-space: normal; }
.msg.assistant h3 { font-size: 17px; line-height: 24px; margin: 18px 0 8px; }
.msg.assistant h4 { font-size: 15px; line-height: 24px; margin: 14px 0 6px; }
.msg.assistant code { font: 13px/20px var(--mono); background: var(--sunken); padding: 1px 5px; border-radius: 4px; }
.msg.assistant pre { margin: 0 0 12px; padding: 12px 14px; background: var(--sunken); border-radius: 10px; overflow-x: auto; }
.msg.assistant pre code { background: none; padding: 0; white-space: pre; }
.msg.assistant.live::after { content: ""; display: inline-block; width: 9px; height: 18px; margin-left: 3px; vertical-align: -3px; background: var(--accent); border-radius: 1px; }
.msg.err { color: var(--danger); background: var(--danger-soft); border-radius: 10px; padding: 10px 14px; font-size: 14px; line-height: 20px; }
.turn { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.compact-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-muted); font-size: 12px; line-height: 20px; }
.compact-divider::before, .compact-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.worklog summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--ink-muted); font-size: 13px; font-weight: 500; }
.worklog summary::-webkit-details-marker { display: none; }
.worklog summary::before { content: "\203A"; font-size: 18px; line-height: 1; display: inline-block; width: 10px; transition: transform .15s; }
.worklog[open] summary::before { transform: rotate(90deg); }
.worklog ol { list-style: none; margin: 4px 0 0 9px; padding: 0; border-left: 2px solid var(--line); }
.step { display: flex; align-items: center; gap: 12px; min-height: 34px; margin-left: -8px; font-size: 13px; }
.step .node { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--line-strong); background: var(--surface); }
.step.ok > .node { border-color: var(--ok); }
.step.live > .node { border-color: var(--accent); background: var(--accent); }
.step.refused > .node { border-color: var(--danger); }
.tag { display: inline-flex; justify-content: center; align-items: center; min-width: 56px; height: 20px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line-strong); font: 500 11px/16px var(--mono); letter-spacing: .06em; color: var(--ink-muted); }
.step.live > .tag { border-color: var(--accent-ink); color: var(--accent-ink); }
.step.refused > .tag { border-color: var(--danger); color: var(--danger); }
.step .what { flex: 0 0 auto; }
.step code { font: 12px/16px var(--mono); color: var(--ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step .why { color: var(--danger); font-size: 12px; }
.step:has(> .agent-result) { flex-wrap: wrap; }
.agent-result { flex-basis: 100%; margin-left: 26px; min-width: 0; }
.worklog .agent-result > summary::before { transform: none; }
.worklog .agent-result[open] > summary::before { transform: rotate(90deg); }
.agent-output { font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.agent-output pre { overflow-x: auto; white-space: pre; }
.agent-output code { white-space: pre-wrap; overflow: visible; }
.agent-output ol { border: 0; margin: 0; padding-left: 22px; list-style: decimal; }

.thinking > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--ink-muted); font-size: 13px; font-weight: 500; }
.thinking > summary::-webkit-details-marker { display: none; }
.thinking > summary::before { content: "\203A"; font-size: 18px; line-height: 1; display: inline-block; width: 10px; transition: transform .15s; }
.thinking[open] > summary::before { transform: rotate(90deg); }
.thinking.live > summary { color: var(--accent-ink); }
.thinking-text { margin: 4px 0 0 9px; padding: 2px 0 2px 16px; border-left: 2px solid var(--line); color: var(--ink-muted); font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.todos { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; }
.todos-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; color: var(--ink-muted); font-size: 13px; font-weight: 500; }
.todos-count { font: 500 12px/16px var(--mono); }
.todos ol { list-style: none; margin: 6px 0 0; padding: 0; }
.todo { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.todo::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; box-sizing: border-box; border-radius: 999px; border: 2px solid var(--line-strong); }
.todo[data-status="in_progress"] { font-weight: 500; }
.todo[data-status="in_progress"]::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 3px, transparent 3.5px); }
.todo[data-status="completed"] { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.todo[data-status="completed"]::before { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Ccircle cx='8' cy='8' r='8' fill='white'/%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-4.9' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='16' height='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E"); border: 0; background: var(--ok); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.step:has(> .substeps) { flex-wrap: wrap; }
.worklog .substeps { flex-basis: 100%; margin: 0 0 6px 26px; }
.substeps .step { min-height: 28px; }

#dock { padding: 8px 24px 14px; display: flex; flex-direction: column; align-items: center; }
#main.empty #dock { padding-top: 0; }
#send { width: 100%; max-width: 720px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-composer); display: flex; flex-direction: column; }
#prompt { border: 0; outline: none; resize: none; background: transparent; padding: 14px 16px 2px; font-size: 15px; line-height: 24px; min-height: 52px; max-height: 240px; }
#prompt::placeholder { color: var(--ink-muted); }
.bar { display: flex; align-items: center; gap: 4px; padding: 8px; }
.bar .fill { flex: 1 1 auto; }
#status { display: inline-flex; align-items: center; gap: 12px; min-width: 0; height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; }
#status:hover, #status[aria-expanded="true"] { background: var(--hover); }
#model { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.meter { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.ring { --p: 0; --c: var(--accent); flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0); -webkit-mask: radial-gradient(circle, transparent 3.5px, #000 4px); mask: radial-gradient(circle, transparent 3.5px, #000 4px); }
.meter.warn .ring { --c: var(--warn-mark); }
.meter.bad .ring { --c: var(--danger); }
#statusCard { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; width: min(320px, 100%); box-sizing: border-box; display: grid; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-window); font-size: 13px; line-height: 18px; }
#statusCard[hidden] { display: none; }
#statusCard > div { display: grid; gap: 6px; }
#statusCard .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#statusCard .kv > * { white-space: nowrap; }
#statusCard strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--ink); }
#statusCard small { font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.track { height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.track > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.track.warn > span { background: var(--warn-mark); }
.track.bad > span { background: var(--danger); }
.round { width: 40px; height: 40px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
#sendBtn, #queueBtn { background: var(--accent); color: var(--on-accent); }
#sendBtn:disabled, #queueBtn:disabled { opacity: .45; cursor: default; }
#stopBtn { background: var(--ink); color: var(--on-ink); }
#tray { width: calc(100% - 32px); max-width: 688px; padding: 8px 12px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: var(--sunken); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
#tray .fill { flex: 1 1 auto; }
#chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; margin-top: 24px; }
#main:not(.empty) #chips { display: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; }
.chip:hover { background: var(--hover); }
#foot { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 24px 14px; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.streli { display: inline-flex; align-items: center; gap: 8px; }
#toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow-window); }

#auth { width: min(420px, calc(100% - 32px)); padding: 28px 28px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-window); }
#auth[open] { display: grid; gap: 16px; }
#auth::backdrop { background: var(--scrim); }
#authClose { position: absolute; right: 12px; top: 12px; }
.auth-head { display: grid; justify-items: center; gap: 8px; text-align: center; padding-top: 4px; }
.auth-head h2 { margin: 0; font: 500 22px/28px var(--display); }
.auth-head p { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); max-width: 320px; }
#authReason { padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; line-height: 18px; }
#authReason:empty { display: none; }
#auth form { display: grid; gap: 12px; }
.or { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-muted); }
.or::before, .or::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--line); }
#authErr { font-size: 13px; line-height: 18px; color: var(--ink-muted); min-height: 18px; }
#authErr.bad { color: var(--danger); }
.auth-foot { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-muted); }

@media (max-width: 760px) {
  #side { position: fixed; inset: 0 auto 0 0; width: 284px; z-index: 20; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-window); padding-top: max(14px, env(safe-area-inset-top)); }
  #app.drawer #side { transform: none; }
  #menuBtn { display: inline-flex; }
  #main { border-left: 0; }
  #scroll { padding: 8px 16px 12px; }
  #dock { padding: 8px 12px max(12px, env(safe-area-inset-bottom)); }
  #top .btn { padding: 0 12px; }
  #foot { display: none; }
  #preview { position: fixed; inset: 0; z-index: 30; border-left: 0; padding-top: env(safe-area-inset-top); }
}
@media (max-width: 520px) {
  .bar { flex-wrap: wrap; row-gap: 0; }
  #status { order: -1; flex: 1 0 100%; height: 32px; margin-bottom: 4px; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.streli-logo { display: inline-block; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 5px; background: #FFFFFF url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBSgFKAAD/2wBDAAYEBAUEBAYFBQUGBgYHCQ4JCQgICRINDQoOFRIWFhUSFBQXGiEcFxgfGRQUHScdHyIjJSUlFhwpLCgkKyEkJST/2wBDAQYGBgkICREJCREkGBQYJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCT/wAARCABAAEADASIAAhEBAxEB/8QAGgAAAwEBAQEAAAAAAAAAAAAAAAUGBwQDCP/EADIQAAEDAwMCBAQFBQEAAAAAAAECAwQABREGEiETMQdBUWEiQnGhFDKBkcEVI0NTgrH/xAAaAQACAwEBAAAAAAAAAAAAAAACAwAEBQEG/8QAKxEAAQMDAgQFBQEAAAAAAAAAAQACAwQRMSFhBRITcVGBwfDxBiIyQZGh/9oADAMBAAIRAxEAPwD6poopbA1Fbbjc51rYkD8bBUEvMqG1QBAIUB5p5HIroBOFy6ZUZHagnAzUdE1eidebnJaO6HAjEND/AGKKhlX6kAD2+tVKmsjp7dQ59BcnyCsQ075Q4tGg+ArEEEkZGR3FFZlI1dKtVuk7HCbhOc6nUP8AjQBjcPuB9M03turWrYuxaZZQubdpTaHHhu4jtkblLWfXGcDufPGaqcN4o2udyxt/Vztrp/mqdVUTqeMSPOTYb+KtqKKK1VSRWQ+M+m5tvnR9ZWhbzLrQS3JcZJCmyOEOZ9PlP6Vr1K517sBS9DnXK24UCh1l59HIPBBSTTIpem7mS5GhzbFZjpbxoTcYblq1IUxnnW1NIuCBhGSMArSPy/UcewrzsShCZurUj4Upbb6gB7hKxwD55OMfXNKNV+GduTIXJ0tfLVJZUciE9LQFo9kqJwoexwfc0zsn9Vvy5cW7W9u2yER9oeQztYLSSkp/LkZSE44PII9Kx/qPhzKiMVNOdWg3GxFvnZaXBa3pl1PNh1texv73XF10SZLs2dn8O3/deCB8oOAhI9ScISPUiqbQxi2SVOv99Kl3y5KKlttJ3CK2TkN57Z4GcdsAeVczjNvipaYt4W6GzvL7gwpbmCNwT5YBIHmMnzJNdMGw3KeQGIjm0/OsbU/ua8bS8WlpGGCgbzyOP3GxPYC2dzjw01WzWxsqXh8p5WNwMeZ9Aq5euraBhtmU4o8ABAGfvT6K449HQ4810VqGS2Tkp9ifWkth0kxa1JkSFB+SOxx8KPp6n3p/XseFiuc3qVpAJw0DHff32wqnog8sP9RS67actF8RtuVujSfRS0fEPoocj96Y0VqEXyqhAOhWcXXwStEnKrbNkQ1H5HAHUffB+9Ss3wr1RYQuVAfZdS0CvfGeLSwBz2OP/TW40t1NLTB09c5KjjpxXVfrtOKU6FmUl0DM4Sfw0vD1+0tHlyylySha2lu7QCvaeCceeCKZWbV9k1BKVFtk0SXENdc7UKCdm9SM7iMd0q478VOeDLe3RnPZUl3+B/FGh9N6RtOpbomxokidBbTGe6yHMAFSlEpWoYWOAnjOOnj1yUX4hMjJLASruiiimI0UUUVFEVGeLlxEHRshkH45biGAB3xncfsk1Z0vvGnrXf0NIukJqUlokoC84STwTxQvBLSAheCWkBZ7YNWt6F0vAjuW924trblSVyIjzRQnpoLyxhSgc7Pbv+9cNj13pW0T5twgWa6GUmK8/JeNz/EpdSlS1KDZLqkOfElXKeEkqHB3CtIf0fYJEcRnbVFUylLqAjbgbXEdNY/6R8J9q5pPh/pmU/JectTYVKStD4QtaEvJVncFJSoBQJUTyO5J7mo0WFlGiwATCDe2Z12uVsQ06hy39LetWNq+oncMc54880xpbZ9O2yw9Y2+N0lP7S6tS1LUvaMJypRJOBwOaZUSJf//Z") center / cover no-repeat; }
.step.stopped > .node { border-style: dashed; border-color: var(--line-strong); }
.step.stopped > .why { color: var(--ink-muted); }
#settings { width: min(900px, calc(100% - 32px)); height: min(660px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-window); overflow: hidden; }
#settings[open] { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr); }
#settings::backdrop { background: var(--scrim); }
.set-head { grid-column: 1 / -1; display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid var(--line); }
.set-head h2 { margin: 0; font: 500 20px/26px var(--display); }
#settingsClose { position: absolute; right: 12px; top: 12px; }
.set-nav { display: grid; align-content: start; gap: 2px; padding: 16px 12px; background: var(--sunken); border-right: 1px solid var(--line); overflow: auto; }
.set-nav .row { min-height: 40px; }
.set-nav .row.on { background: var(--selected); font-weight: 500; }
.set-pane { min-width: 0; padding: 24px 28px; overflow: auto; display: grid; align-content: start; gap: 20px; }
.set-pane[hidden] { display: none; }
.set-pane h3 { margin: 0; font: 500 18px/24px var(--display); }
.capability { display: grid; gap: 14px; min-width: 0; padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.capability:last-child { border-bottom: 0; padding-bottom: 0; }
.capability h3 { font-size: 16px; }
.preference-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
#who { min-height: 48px; min-width: 0; }
#whoEmail { flex: 1; font-size: 13px; }
.account-menu { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 25; padding: 6px; max-height: calc(100dvh - 96px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-window); }
.menu-email { padding: 8px 10px; color: var(--ink-muted); font-size: 12px; }
#accountMenu .row { min-height: 40px; }
.account-menu .guest-sign-in { color: var(--accent-ink); font-weight: 600; }
.account-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--line); }
#menuLanguage > :last-child { margin-left: auto; }
#languageMenu { position: fixed; z-index: 26; width: min(200px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-window); }
#languageMenu [aria-checked="true"] { background: var(--selected); }
#languageMenu [aria-checked="true"]::after { content: "✓"; margin-left: auto; }
#languageBack { display: none; }
#accountMenu.language-drill > :not(#languageMenu) { display: none; }
#accountMenu.language-drill #languageMenu { position: static; width: 100%; max-height: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
#accountMenu.language-drill #languageBack { display: flex; margin-bottom: 6px; }
@media (min-width: 761px) { #app.collapsed #side { display: none; } #app.collapsed #menuBtn { display: inline-flex; } }
.muted { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.key-form { display: flex; gap: 8px; }
.new-key { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: var(--accent-soft); }
.new-key[hidden] { display: none; }
.new-key p { margin: 0; font-size: 13px; line-height: 18px; }
.key-row { display: flex; gap: 8px; align-items: center; }
.key-row code, #connect { flex: 1 1 auto; min-width: 0; margin: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font: 12px/18px var(--mono); overflow-wrap: anywhere; white-space: pre-wrap; }
.key-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.key-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.key-list li > div { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
#accountPane dl { margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; font-size: 14px; }
#accountPane dt { color: var(--ink-muted); }
#accountPane dd { margin: 0; }
@media (max-width: 760px) {
  #settings[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 64px auto minmax(0, 1fr); }
  .set-head { padding: 0 16px; }
  .set-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 4px; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .set-nav .row { min-height: 44px; font-size: 13px; }
  .set-pane { padding: 20px 16px; }
  #accountMenu .row, .segmented button, #signIn, #closeSide, #settingsClose { min-height: 44px; }
  #accountPane dl { grid-template-columns: 72px minmax(0, 1fr); }
  #accountPane dd { overflow-wrap: anywhere; }
}

.memory-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.memory-list li { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.memory-list code { font: 500 12px/16px var(--mono); color: var(--ink-muted); }
.memory-list textarea { min-height: 120px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 13px/20px var(--mono); resize: vertical; }
.memory-list .win-actions { padding-top: 0; }
#memoryClear { justify-self: start; }
.memory-empty { display: grid; gap: 8px; justify-items: start; padding: 18px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.memory-empty[hidden] { display: none; }
.memory-empty p { margin: 0; font-size: 13px; line-height: 19px; }

.table { margin: 0 0 12px; max-width: 100%; overflow-x: auto; }
.table table, #previewBody table { border-collapse: collapse; font-size: 14px; line-height: 20px; }
.table th, .table td, #previewBody th, #previewBody td { border: 1px solid var(--line); padding: 4px 10px; text-align: left; white-space: pre-wrap; }
.table th, .table td { white-space: nowrap; }
.msg.assistant blockquote { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--line); color: var(--ink-muted); }
.msg.assistant hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.math.display { display: block; margin: 0 0 12px; overflow-x: auto; text-align: center; }
.cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cite { font: inherit; font-size: 13px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: inherit; cursor: pointer; }
#preview { flex: 0 0 min(44%, 640px); display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--line); background: var(--surface); }
#preview[hidden] { display: none; }
.preview-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.preview-head strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#previewBody { flex: 1 1 auto; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
#previewBody > p { max-width: 100%; overflow-wrap: anywhere; }
#previewBody img { max-width: 100%; height: auto; align-self: center; }
#previewBody img[hidden] { display: none; }
#previewBody .document-text { max-width: 100%; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.65; }
.preview-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.preview-head .btn { white-space: nowrap; flex-shrink: 0; }
#previewBody .table { max-width: 100%; overflow-x: auto; }
#useSheet { max-width: 100%; }
#previewBody iframe { width: 100%; flex: 1 1 auto; min-height: 70vh; border: 0; }
#sheetChip { font-size: 13px; padding: 2px 4px 6px; }
.sheet-field { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; }
.sheet-field select { min-width: 160px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 400; }

#attached { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 4px 6px; }
#attached[hidden] { display: none; }
.file-chip { display: inline-flex; align-items: center; max-width: min(300px, 100%); min-width: 0; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13px; }
.file-chip button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.file-chip button:hover { background: var(--hover); }
.file-chip .attachment-open { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 0 8px 0 0; border-radius: 6px; text-align: left; }
.file-chip img { flex: 0 0 48px; width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.file-chip img[hidden] { display: none; }
.attachment-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-type { flex-shrink: 0; display: grid; place-items: center; min-width: 44px; height: 44px; font-size: 11px; font-weight: 600; color: var(--ink-muted); background: var(--sunken); border-radius: 6px; }
.file-chip .attachment-remove { flex-shrink: 0; width: 32px; height: 44px; padding: 0; border-radius: 6px; font-size: 20px; color: var(--ink-muted); }
.message-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; max-width: 100%; }
.file-chip.uploading { gap: 8px; min-height: 58px; padding-left: 10px; }
.uploading progress { width: 56px; flex-shrink: 0; accent-color: var(--accent); }
.upload-status { white-space: nowrap; color: var(--ink-muted); font-size: 12px; }
#send.drop-target { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 600px) { .file-chip .attachment-remove { width: 44px; } }

.btn { display: inline-flex; white-space: nowrap; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 500; text-decoration: none; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#whoEmail, #menuEmail, #setEmail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field { display: grid; gap: 6px; }
.field label, .control-label { font-size: 13px; font-weight: 500; }
.field input { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 15px; }

.segmented { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); }
.segmented button { white-space: nowrap; flex: 0 0 auto; min-height: 34px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-muted); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px var(--line); }
.segmented button:hover { color: var(--ink); }

.btn.danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.linkish { white-space: nowrap; border: 0; background: transparent; padding: 0; color: var(--accent-ink); font-size: 12px; font-weight: 500; }
.linkish:hover { text-decoration: underline; }
.chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.chip b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--selected); }
.chip[aria-pressed="true"] b { color: var(--ink); }
#send { position: relative; }
#replySelection { position: fixed; z-index: 10; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-window); font: 500 13px/20px var(--sans); cursor: pointer; }
#replySelection:hover { background: var(--hover); }
#replySelection:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#replyQuotes { display: grid; gap: 6px; margin: 12px 12px 0; max-height: 216px; overflow: auto; }
#replyQuotes[hidden] { display: none; }
.quote-card { display: flex; align-items: flex-start; gap: 8px; min-width: 0; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunken); color: var(--ink-muted); text-align: left; white-space: normal; }
#replyQuotes .quote-card { margin: 0; }
.quote-text { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; font: 13px/20px var(--sans); }
.quote-card .icon-btn { flex: 0 0 28px; width: 28px; height: 28px; margin: -4px -4px -4px 0; }
@media (pointer: coarse), (hover: none) { #replySelection { min-height: 44px; } .quote-card .icon-btn { flex-basis: 44px; width: 44px; height: 44px; } }
#commandMenu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 5; margin: 0; padding: 6px; list-style: none; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-window); }
#commandMenu li { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
#commandMenu li:hover, #commandMenu li[aria-selected="true"] { background: var(--hover); }
#commandMenu li[aria-selected="true"] code { color: var(--accent-ink); }
#commandMenu code { max-width: 260px; overflow: hidden; text-overflow: ellipsis; font: 500 13px/18px var(--mono); color: var(--ink); white-space: nowrap; }
#commandMenu mark { background: none; color: var(--accent-ink); font-weight: 700; }
#commandMenu .hint { color: var(--ink-muted); font-weight: 400; }
#commandMenu .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#promptQueue { width: 100%; max-width: 720px; display: grid; gap: 6px; margin-bottom: 6px; }
.queued-prompt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); color: var(--ink); font-size: 13px; line-height: 18px; }
.queued-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre-wrap; }
.queued-prompt textarea { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.queue-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.queue-actions .link-btn { padding: 0 3px; font-size: 12px; }

.msg.user { position: relative; }
.acts { display: flex; align-items: center; gap: 2px; white-space: normal; opacity: 0; transition: opacity .15s; }
.msg:hover .acts, .acts:focus-within { opacity: 1; }
@media (hover: none) { .acts { opacity: 1; } }
.msg.user .acts { position: absolute; right: 2px; top: calc(100% + 2px); }
.msg.assistant .acts { margin: 6px 0 0 -4px; }
.acts time { padding: 0 6px; color: var(--ink-muted); font: 12px/16px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.act { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--ink-muted); cursor: pointer; }
.act::before, .account-menu [data-icon]::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.account-menu [data-icon]::before { flex: 0 0 18px; width: 18px; height: 18px; }
.account-menu [data-icon="settings"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 3-1 3-3 1-2 3 2 2-1 3 2 3 3-1 2 3h3l1-3 3-1 2-3-2-2 1-3-2-3-3 1-2-3z'/%3E%3Ccircle cx='11.5' cy='11.5' r='3'/%3E%3C/svg%3E"); }
.account-menu [data-icon="language"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='9'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E"); }
.account-menu [data-icon="help"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 4.5 1.5L12 12v1M12 16h.01'/%3E%3C/svg%3E"); }
.account-menu [data-icon="admin"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.5 8 9 8 9s8-4.5 8-9V6zM9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.account-menu [data-icon="sign-out"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4M10 12h11m-5-5 5 5-5 5'/%3E%3C/svg%3E"); }
.act:hover { background: var(--hover); color: var(--ink); }
@media (pointer: coarse) { .act { flex: 0 0 44px; width: 44px; height: 44px; } .acts { flex-wrap: wrap; } .msg.user .acts { flex-wrap: nowrap; } .msg.user { margin-bottom: 32px; } }
.act:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.act[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-soft); }
.act[aria-disabled="true"] { opacity: .45; cursor: not-allowed; background: none; color: var(--ink-muted); }
.act[data-icon="copy"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E"); }
.act[data-icon="rewind"], .act[data-icon="regenerate"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); }
.act[data-icon="speak"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E"); }
.pick-list { margin: 0; padding: 0; list-style: none; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.pick-list li { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 0; border-bottom: 1px solid var(--line); }
.pick-list li:last-child { border-bottom: 0; }
.pick-list button { flex: 1; min-width: 0; padding: 10px 12px; border: 0; background: none; color: var(--ink); font: 14px/20px var(--sans); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.pick-list li:hover { background: var(--hover); }
.pick-list time { color: var(--ink-muted); font-size: 12px; white-space: nowrap; }

dialog.win { width: min(520px, calc(100% - 32px)); padding: 26px 28px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-window); }
dialog.win[open] { display: grid; gap: 14px; }
dialog.win::backdrop { background: var(--scrim); }
dialog.win h2 { margin: 0; padding-right: 40px; font: 500 20px/26px var(--display); }
dialog.win form { display: grid; gap: 14px; }
.win-close { position: absolute; right: 12px; top: 12px; }
.win-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.field small { font-size: 12px; line-height: 16px; }
.field textarea { min-height: 160px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 14px/21px var(--mono); resize: vertical; }
.field input, .field textarea { color: var(--ink); }
#skillName { font-family: var(--mono); }

.file-diff { margin: 0; padding: 0; list-style: none; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.file-diff:empty { display: none; }
.file-diff li { padding: 8px 12px; border-bottom: 1px solid var(--line); font: 13px/18px var(--mono); overflow-wrap: anywhere; }
.file-diff li:last-child { border-bottom: 0; }
.file-diff li:not([data-file]) { font-family: var(--sans); color: var(--ink-muted); }

#skillList code { font: 500 13px/18px var(--mono); }
#skillList li.muted { border-bottom: 0; }

#search { width: 100%; min-height: 36px; margin: 2px 0 6px; padding: 0 12px 0 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C9592' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 11px center no-repeat; color: var(--ink); font: 14px/20px var(--sans); }
#search::placeholder { color: var(--ink-muted); }
#searchResults { display: grid; gap: 2px; }
#searchResults[hidden] { display: none; }
#searchResults a { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
#searchResults a:hover { background: var(--hover); }
#searchResults a span { font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#searchResults small { font-size: 12px; line-height: 16px; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#searchResults .muted { padding: 8px 10px; }

#trashList, #fileList { margin: 2px 0 6px; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
#trashList li, #fileList li { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 34px; padding: 8px 6px; border-radius: 8px; font-size: 13px; }
#trashList li:hover, #fileList li:hover { background: var(--hover); }
#fileList li > a { flex: 1 1 0; display: flex; align-items: center; gap: 6px; }
#fileList li > a > .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#trashList li > span, #fileList li > a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; }
#fileList li > a:hover { text-decoration: underline; }
#trashList li.muted { color: var(--ink-muted); }
#emptyTrash { justify-self: start; }
#emptyTrash:hover { text-decoration: underline; }
.chip-btn { flex: 0 0 auto; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-muted); font-size: 11px; line-height: 16px; white-space: nowrap; }
.chip-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.badge { flex: 0 0 auto; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; line-height: 16px; }

#top .icon-btn { width: 36px; height: 36px; }

dialog.win textarea.plain { min-height: 120px; font-family: var(--sans); }
.win-actions .quiet-left { margin-right: auto; }

.act[data-icon="up"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v9H4v-9zM7 11l4-8a2 2 0 0 1 2 2v4h5.5a2 2 0 0 1 2 2.3l-1.2 7A2 2 0 0 1 17.3 20H7'/%3E%3C/svg%3E"); }
.act[data-icon="down"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 13V4H4v9zM7 13l4 8a2 2 0 0 0 2-2v-4h5.5a2 2 0 0 0 2-2.3l-1.2-7A2 2 0 0 0 17.3 4H7'/%3E%3C/svg%3E"); }
.code-links { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); text-align: center; }
.code-links .link-btn { font-size: 13px; }
#auth .note { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.field-err { color: var(--danger); font-size: 12px; line-height: 16px; }
[aria-invalid="true"] { border-color: var(--danger); }
#newPassword[aria-invalid] + #passwordRule { display: none; }
.act[data-icon="check"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); color: var(--accent-ink); }
.codeblock { position: relative; }
.codeblock .act { position: absolute; top: 6px; right: 6px; background: var(--sunken); opacity: 0; transition: opacity .15s; }
.codeblock:hover .act, .codeblock .act:focus-visible { opacity: 1; }
@media (hover: none) { .codeblock .act { opacity: 1; } }
dialog:focus { outline: none; }
.danger-zone { display: grid; gap: 10px; justify-items: start; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.danger-zone h4 { margin: 0; font-size: 14px; }
.danger-zone p { margin: 0; font-size: 13px; line-height: 19px; }
.danger-zone form { display: grid; gap: 10px; width: 100%; }
#fileList li { flex-wrap: wrap; }
.more-btn { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--ink-muted); cursor: pointer; }
.more-btn::before { content: "\22EF"; font-size: 16px; line-height: 28px; }
.more-btn:hover, .more-btn[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.file-menu { flex-basis: 100%; display: grid; gap: 2px; padding: 2px 0 4px; }
.file-menu[hidden] { display: none; }
.file-menu button { min-height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.file-menu button:hover { background: var(--hover); }
.file-menu .danger-text, [data-armed] { color: var(--danger); }
[data-armed].btn, .file-menu [data-armed] { background: var(--danger-soft); border-color: var(--danger); }
@media (pointer: coarse), (hover: none), (max-width: 600px) {
  .more-btn { width: 44px; height: 44px; }
  .more-btn::before { line-height: 44px; }
  .file-menu button, #emptyTrash, #trashList .chip-btn { min-height: 44px; }
  #menuBtn, #previewClose { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  #previewDownload, #useSheet, #sheetPick { min-height: 44px; }
}
.stop-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-muted); font-size: 13px; }
.stop-note span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--ink-muted); vertical-align: 0; }
.act[data-icon="stopSpeak"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='2' fill='black'/%3E%3C/svg%3E"); color: var(--accent-ink); }
.msg.assistant:has([data-icon="stopSpeak"]) .acts { opacity: 1; }
.client-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.client-tabs button { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-muted); font: inherit; font-size: 13px; cursor: pointer; }
.client-tabs button[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
#connectWhere { margin: 0; font-size: 13px; line-height: 19px; }
@media (max-width: 600px) {
  .key-form { flex-direction: column; align-items: stretch; }
  .key-form .btn { min-height: 44px; }
  .client-tabs button { min-height: 44px; }
}
#previewBody iframe[hidden] { display: none; }
#previewBody .loading::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; vertical-align: -2px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #previewBody .loading::after { animation: none; } }

.control, .key-form input, .preference-row select { min-height: 40px; min-width: 0; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background-color: var(--surface); color: var(--ink); font: 400 14px/20px var(--sans); }
.key-form input { flex: 1 1 auto; }
select.control, .preference-row select { appearance: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238C9592' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-position: right 10px center; background-repeat: no-repeat; background-size: 16px; }
.preference-row select { min-width: 140px; }
@media (pointer: coarse), (hover: none), (max-width: 600px) { .btn, .control, .key-form input, .preference-row select, .chip, .segmented button { min-height: 44px; } }