/* One shadcn/ui vocabulary for the remote web app and Android WebView.
   Existing neutral surfaces and a restrained green action accent; no platform palette. */
@font-face { font-family:"CoS Icons"; src:url("icons.woff2") format("woff2"); font-display:block; }
@font-face { font-family:"Topology Sans"; src:url("fonts/TopologySans-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Topology Sans"; src:url("fonts/TopologySans-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Topology Sans"; src:url("fonts/TopologySans-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Topology Sans"; src:url("fonts/TopologySans-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
:root {
  color-scheme:dark;
  --page:#202020; --surface:#181818; --surface-high:#303030; --surface-top:#393939;
  --ink:#f3f1ed; --soft:#bdbab4; --outline:#777570; --edge:#42413e;
  --primary:#dce9df; --on-primary:#20382b; --secondary:#303030; --on-secondary:#f3f1ed;
  --red:#ffb4ab; --attention:#e1c689; --r-sm:10px; --r-md:16px; --r-lg:24px;
  --label:.875rem; --caption:.75rem; --ease-out:cubic-bezier(.22,1,.36,1);
  --motion-press:120ms; --motion-open:220ms; --motion-close:150ms;
  --font:"Topology Sans",system-ui,"Noto Sans KR",sans-serif;
  font:400 16px/1.65 var(--font);
  background:var(--page); color:var(--ink); -webkit-font-smoothing:antialiased;
}
:root[data-theme=light] {
  color-scheme:light;
  --page:#faf9f6; --surface:#f0efeb; --surface-high:#e9e7e1; --surface-top:#dfddd6;
  --ink:#292824; --soft:#625f57; --outline:#88847a; --edge:#d9d6ce;
  --primary:#315844; --on-primary:#fff; --secondary:#e9e7e1; --on-secondary:#292824; --red:#b3261e; --attention:#786023;
}
* { box-sizing:border-box; }
button,a,summary,[role=button],[role=option],[data-vaul-drawer] { -webkit-tap-highlight-color:transparent; }
button:focus:not(:focus-visible),a:focus:not(:focus-visible),summary:focus:not(:focus-visible),[role=dialog]:focus:not(:focus-visible) { outline:none; }
html,body { height:100%; overflow:hidden; overscroll-behavior:none; }
body { margin:0; }
:where(.connect-screen,.sidebar,.chat-header,.composer-area,.ui-content,.sidebar-drawer,.row-popover,[data-sonner-toaster]) { -webkit-user-select:none;user-select:none; }
:where(input,textarea,[contenteditable=true],[data-selectable=true],.event) { -webkit-user-select:text;user-select:text; }
:where(button,summary,.role,.delivery-status) { -webkit-user-select:none;user-select:none; }
::selection { background:var(--primary); color:var(--on-primary); }
[hidden] { display:none!important; }
button,input,textarea,select { font:inherit; }
button,input,select { min-height:44px; }
button { border:0; border-radius:var(--r-sm); padding:8px 12px; background:transparent; color:var(--ink); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; font-size:var(--label); font-weight:500; }
button:disabled { opacity:.45; cursor:default; }
button.primary { background:var(--primary); color:var(--on-primary); }
button.tonal { background:var(--secondary); color:var(--on-secondary); }
.danger { color:var(--red); }
input,textarea,select { min-width:0; max-width:100%; font-size:1rem; color:var(--ink); background:var(--page); border:1px solid var(--outline); border-radius:var(--r-sm); padding:12px 14px; }
input,textarea { width:100%; }
input::placeholder,textarea::placeholder { color:var(--soft); opacity:1; }
select { width:100%; }
textarea { resize:none; }
label { font-size:var(--label); }
:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
p { margin:0 0 12px; }
h1,h2,h3 { line-height:1.3; font-weight:600; margin:0; letter-spacing:-.02em; }
h2 { font-size:1.375rem; }
a { color:var(--primary); text-underline-offset:3px; overflow-wrap:anywhere; }
.small { font-size:var(--caption); }
.muted { color:var(--soft); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; inset-block-start:8px; inset-inline-start:8px; padding:12px; background:var(--surface-top); transform:translateY(-200%); }
.skip-link:focus { transform:none; }
.i,[data-icon]::before { display:inline-block; font-family:"CoS Icons"; font-size:18px; font-weight:400; line-height:1; speak:never; }
.icon-button { position:relative; width:44px; height:44px; flex-shrink:0; display:inline-grid; place-items:center; padding:0; font-size:0; color:var(--soft); }
.icon-button::before { font-size:18px; }
.i { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.i[data-icon]::before { font-size:inherit; }
[data-icon=menu]::before { content:"\e2f0"; }
[data-icon=server]::before { content:"\e2a0"; }
[data-icon=new]::before,[data-icon=edit]::before { content:"\e3b4"; }
[data-icon=search]::before { content:"\e30c"; }
[data-icon=down]::before { content:"\e136"; }
[data-icon=plus]::before { content:"\e3d4"; }
[data-icon=minus]::before { content:"\e32a"; }
[data-icon=theme]::before { content:"\e472"; }
[data-icon=close]::before { content:"\e4f6"; }
[data-icon=settings]::before { content:"\e272"; }
[data-icon=workers]::before { content:"\e68e"; }
[data-icon=refresh]::before { content:"\e094"; }
[data-icon=send]::before { content:"\e08e"; }
[data-icon=stop]::before { content:"\e46c"; }
[data-icon=pin]::before { content:"\e65c"; }
[data-icon=file]::before { content:"\e230"; }
[data-icon=copy]::before { content:"\e1ca"; }
[data-icon=folder]::before { content:"\e25a"; }
[data-icon=checks]::before { content:"\e53a"; }
[data-icon=clock]::before { content:"\e19a"; }
[data-icon=warning]::before { content:"\e4e2"; }
[data-icon=connected]::before { content:"\e4ea"; }
[data-icon=offline]::before { content:"\e4f2"; }
[data-icon=info]::before { content:"\e2ce"; }
[data-icon=more]::before { content:"\e1fe"; }
[data-icon=trash]::before { content:"\e4a6"; }
.workspace,.connect-screen { position:fixed; inset-inline:0; inset-block-start:var(--app-top,0px); height:var(--app-height,100dvh); }
.connect-screen { display:grid; place-items:center; overflow-y:auto; padding:32px max(24px,env(safe-area-inset-left)); }
.connect-form { display:grid; gap:12px; width:100%; max-width:340px; }
.connect-form input { background:transparent; }
.status-text { margin:8px 4px 0; font-size:var(--label); overflow-wrap:anywhere; }
.status-text:empty { display:none; }
.status-text[data-error=true] { color:var(--red); }
.workspace { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); overflow:hidden; }
#sidebarHost { display:none; min-width:0; min-height:0; }
.sidebar { height:100%; min-height:0; display:flex; flex-direction:column; gap:12px; padding:18px 12px max(12px,env(safe-area-inset-bottom)); background:var(--surface); }
.sidebar-heading { display:flex; align-items:center; gap:10px; padding:0 4px 4px; }
.sidebar-link { display:flex; align-items:center; gap:10px; text-align:start; }
.app-mark { width:28px; height:28px; border-radius:9px; }
.app-name { flex:1; font-size:1.0625rem; font-weight:600; letter-spacing:-.035em; }
.new-chat { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:96px; padding:8px 12px; border-radius:var(--r-md); white-space:nowrap; }
.server-cluster { display:flex; min-width:0; flex:1; align-items:center; gap:0; }
.server-cluster>.icon-button { width:32px; min-width:32px; }
.server-switcher { display:flex; align-items:center; gap:6px; min-width:0; flex:1; text-align:start; padding-inline:4px; }
#serverName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.server-switcher .i:last-child { font-size:14px; }
.search-field { display:flex; align-items:center; gap:8px; border-radius:var(--r-sm); background:transparent; padding-inline:10px; }
.search-field:focus-within { background:var(--surface-high); }
.search-field input { background:none; border:0; padding-inline:0; outline-offset:-4px; font-size:var(--label); }
.search-field .i { font-size:18px; color:var(--soft); }
.project-toolbar { display:flex; align-items:center; justify-content:space-between; min-width:0; padding-inline-start:10px; }
.project-toolbar h2 { font-size:var(--caption); color:var(--soft); font-weight:500; letter-spacing:0; }
.project-row { display:flex; align-items:center; min-width:0; gap:0; }
.project-toggle { display:flex; align-items:center; gap:8px; flex:1; min-width:0; text-align:start; padding-inline:10px 2px; }
.project-toggle .i { color:var(--soft); }
.project-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-caret { font-size:12px; transform:rotate(-90deg); }
.project-toggle[aria-expanded=true] .project-caret { transform:none; }
.project-action { width:32px; min-width:32px; }
.project-chats { margin-inline:18px 0; padding-inline-start:4px; border-inline-start:1px solid var(--edge); }
.project-more { font-size:var(--caption); color:var(--soft); text-align:start; padding-inline:10px; width:100%; }
#projectList { margin-bottom:20px; }
.session-scroll { min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.session-section { margin-block:0 14px; }
.session-section>summary { font-size:var(--caption); color:var(--soft); padding:8px 12px; min-height:40px; cursor:pointer; }
.session-row { display:flex; align-items:center; gap:8px; width:100%; padding:8px 12px; text-align:start; font-weight:400; border-radius:var(--r-sm); }
.session-row { gap:0; padding:0; }
.session-open { display:flex; gap:6px; align-items:center; flex:1; min-width:0; text-align:start; font-weight:400; }
.session-menu { margin-inline-end:4px; }
.session-row strong { font-size:var(--label); font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.session-row small { font-size:.6875rem; color:var(--soft); white-space:nowrap; }
.session-row[aria-current=page] { background:var(--secondary); color:var(--on-secondary); }
.sidebar-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:8px; }
.connection-icon { color:var(--soft); }
.connection-icon[data-icon=connected] { color:var(--primary); }
.text-button { color:var(--primary); padding-inline:12px; }
.chat { display:flex; flex-direction:column; min-width:0; min-height:0;touch-action:pan-y pinch-zoom; }
.chat-header { display:flex; align-items:center; gap:0; flex-shrink:0; padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left)); }
.chat-heading { flex:1; min-width:0; padding-inline:4px; }
.chat-heading h1 { font-size:.9375rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-heading p { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-heading p:empty { display:none; }
#pinChat[aria-pressed=true] { color:var(--primary); background:var(--secondary); }
.timeline { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:16px max(20px,env(safe-area-inset-right)) 24px max(20px,env(safe-area-inset-left)); scroll-padding-block:24px; overscroll-behavior:contain; scrollbar-gutter:stable; overflow-anchor:none; }
#events,#pendingMessages,.welcome { max-width:720px; margin-inline:auto; }
.welcome { display:flex; min-height:100%; align-items:center; justify-content:center; padding-block:48px; }
.welcome h2 { font-size:clamp(1.625rem,4cqi,2.25rem); font-weight:500; letter-spacing:-.045em; text-wrap:balance; }
.event { margin-block:0 28px; overflow-wrap:anywhere; min-width:0; }
.event.user { width:fit-content; max-width:88%; margin-inline-start:auto; padding:10px 16px; border-radius:var(--r-md); background:var(--surface-high); white-space:pre-wrap; }
.event.user p { margin:0; }
.event .role { font-size:var(--caption); color:var(--soft); margin-bottom:8px; font-weight:500; }
.event.assistant>:last-child { margin-bottom:0; }
.event.notice-event { font-size:var(--label); color:var(--soft); margin-block:12px; }
.event.error { color:var(--red); }
.event details { font-size:var(--label); color:var(--soft); }
summary { cursor:pointer; min-height:40px; align-content:center; }
.event details[open] { padding:12px 16px; border-radius:var(--r-sm); background:var(--surface); }
.event details p { margin-block:12px 0; }
.event pre { overflow-x:auto; max-width:100%; padding:16px; border-radius:var(--r-sm); background:var(--surface); font:.8125rem/1.65 ui-monospace,monospace; white-space:pre; }
.event details pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.event code { font:.875em/1.6 ui-monospace,monospace; background:var(--surface-high); padding:2px 4px; border-radius:4px; }
.event pre code { padding:0; background:none; }
.event h2 { font-size:1.375rem; margin-block:28px 12px; }
.event h3 { font-size:1.125rem; margin-block:24px 12px; }
.event blockquote { margin:12px 0; padding:12px 16px; background:var(--surface); border-radius:var(--r-sm); }
.event ul,.event ol { padding-inline-start:24px; }
.table-scroll { overflow-x:auto; max-width:100%; }
.event table { border-collapse:collapse; font-size:var(--label); }
.event td,.event th { text-align:start; padding:8px 12px; border-bottom:1px solid var(--edge); }
.truncated { font-size:var(--caption); color:var(--soft); margin-top:8px; }
.event-actions { display:flex; gap:4px; margin-top:8px; }
.event-actions .icon-button { width:40px; height:40px; min-height:40px; }
.event-actions .icon-button::before { font-size:18px; }
.composer-area { flex-shrink:0; max-height:calc(var(--app-height,100dvh) * .55); overflow-y:auto; overscroll-behavior:contain; width:100%; max-width:800px; margin-inline:auto; padding:0 max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
#composer { padding:6px; border:1px solid var(--edge); border-radius:var(--r-lg); background:var(--surface-high); box-shadow:0 3px 12px #0000000d; }
#composer:focus-within { border-color:var(--outline); }
#prompt { display:block; min-height:48px; max-height:180px; field-sizing:content; border:0; background:transparent; padding:10px 12px; line-height:1.5; border-radius:var(--r-sm); }
.composer-toolbar { display:flex; align-items:center; gap:4px; }
.model-controls { display:flex; flex:1; min-width:0; align-items:center; }
.model-picker { display:flex; align-items:center; gap:6px; min-width:0; max-width:100%; padding-inline:12px; text-align:start; color:var(--soft); }
.model-picker>span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.model-picker .i { font-size:14px; }
.stop-button { background:var(--ink); color:var(--page); }
.send-button { color:var(--on-primary); }
.send-button.command-send { width:auto;min-width:40px;max-width:60%;font-size:var(--label);padding-inline:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.send-button.command-send::before { display:none; }
.selected-skills { display:flex;flex-wrap:wrap;gap:6px;padding:6px 8px 0; }
.selected-skill { display:inline-flex;align-items:center;min-width:0;max-width:100%;padding-inline:10px 0;gap:4px;border:1px solid var(--edge);border-radius:var(--r-sm);font-size:var(--label);color:var(--ink); }
.selected-skill>span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.selected-skill>.icon-button { width:44px;height:44px;min-height:44px;color:var(--soft); }
.selected-skill>.icon-button::before { font-size:14px; }
#attach[data-busy=true]::after,#send[data-busy=true]::after { content:''; position:absolute; inset:10px; border:2px solid currentColor; border-inline-end-color:transparent; border-radius:50%; }
#attach[data-busy=true]::before,#send[data-busy=true]::before { opacity:0; }
.notice { margin:0 16px 8px; padding:10px 16px; border-radius:var(--r-sm); background:var(--surface); font-size:var(--label); overflow-wrap:anywhere; }
.notice p { margin:0; }
.composer-area .notice { margin-inline:0; }
.input-queue { display:grid; gap:6px; margin-bottom:8px; }
.input-queue:empty { display:none; }
.queue-row { display:flex; align-items:center; gap:2px; padding:5px 6px 5px 14px; font-size:var(--label); background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-md); box-shadow:0 4px 16px #00000012; }
.queue-row p { flex:1; margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.delivery-status { display:inline-flex; align-items:center; gap:5px; font-size:var(--caption); font-weight:400; color:var(--soft); padding:2px 6px; min-height:32px; }
.delivery-status::before { font-size:14px; }
.delivery-status[data-tone=error] { color:var(--red); }
.delivery-status[data-tone=attention],.uncertain-actions { color:var(--attention); }
.uncertain-actions { display:flex; justify-content:flex-end; align-items:center; }
.unavailable-image { min-width:48px; min-height:48px; color:var(--soft); }
.message-receipt { display:flex; justify-content:flex-end; margin-top:4px; }
.message-receipt .icon-button { width:40px; height:40px; min-height:40px; }
.jump-wrap { display:flex; justify-content:center; position:relative; height:0; }
.jump-wrap>button { position:absolute; inset-block-end:12px; width:40px; height:40px; min-height:40px; background:var(--surface-top); border-radius:50%; box-shadow:0 2px 8px #0002; }
.attachment-strip { display:flex; overflow-x:auto; gap:8px; max-width:100%; padding:4px; }
.attachment-strip:empty { display:none; }
.attachment-chip { display:flex; align-items:center; gap:8px; border:1px solid var(--edge); border-radius:var(--r-sm); padding:4px 4px 4px 8px; max-width:240px; flex-shrink:0; font-size:var(--caption); }
.attachment-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachment-chip img { width:48px; height:48px; object-fit:cover; border-radius:8px; }
.attachment-preview { min-width:48px; padding:0; border-radius:8px; }
.attachment-preview img { display:block; }
.attachment-chip .icon-button { width:40px; min-height:40px; height:40px; }
.media-grid { display:flex; flex-wrap:wrap; gap:8px; margin-block:12px; }
.media-grid button { padding:0; border-radius:var(--r-sm); overflow:hidden; }
.media-grid img { display:block; max-width:min(100%,320px); max-height:300px; object-fit:contain; outline:1px solid #ffffff19; outline-offset:-1px; }
[data-theme=light] .media-grid img { outline-color:#00000019; }
.file-caption { font-size:var(--caption); color:var(--soft); white-space:normal; }
.sidebar-drawer { position:fixed; inset:var(--app-top,0px) auto auto 0; height:var(--app-height,100dvh); width:min(340px,90%); outline-offset:-3px; background:var(--surface); border-radius:0 24px 24px 0; overflow:hidden; touch-action:pan-y; }
#mobileSidebarHost { height:100%; min-height:0; }
.nav-overlay { touch-action:pan-y pinch-zoom; }
.app-toast[data-sonner-toast] { font:500 var(--label)/1.5 var(--font); color:var(--ink); background:var(--surface-high); border:1px solid var(--edge); border-radius:var(--r-md); box-shadow:0 6px 24px #0002; }
.app-toast [data-close-button] { color:var(--soft); background:var(--surface-high); border-color:var(--edge); }
.app-toast[data-type=error] [data-icon] { color:var(--red); }
[data-sonner-toaster] { z-index:auto; }
.ui-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; flex-shrink:0; }
.ui-outline { border:1px solid var(--edge); background:var(--page); }
.ui-field { display:block; margin-bottom:8px; color:var(--soft); }
.ui-overlay { position:fixed; inset:var(--app-top,0px) 0 auto; height:var(--app-height,100dvh); background:#0008; }
.ui-content[data-state=closed],.ui-overlay[data-state=closed],.sidebar-drawer[data-state=closed] { pointer-events:none; }
.ui-content { position:fixed; inset-block-start:calc(var(--app-top,0px) + var(--app-height,100dvh) / 2); inset-inline-start:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; width:min(440px,calc(100% - 32px)); max-height:calc(var(--app-height,100dvh) - 32px); padding:20px; border:1px solid var(--edge); border-radius:var(--r-lg); background:var(--surface); color:var(--ink); box-shadow:0 12px 36px #0004; }
.ui-content[data-vaul-drawer] { touch-action:pan-y pinch-zoom; }
/* Vaul's bottom overscroll fill is for a sheet touching the screen edge, never
   a centered tablet dialog. Keep its form/focus owner without painting a 200% tail. */
.ui-content[data-vaul-drawer][data-app-sheet=false]::after { content:none; }
.dialog-head { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-shrink:0; margin-bottom:12px; }
.dialog-head h2 { font-size:1.125rem; letter-spacing:-.025em; }
.ui-description { white-space:pre-wrap; overflow-wrap:anywhere; margin-bottom:16px; }
.ui-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; touch-action:pan-y pinch-zoom; }
.ui-footer { display:flex; justify-content:flex-end; gap:8px; padding-top:16px; }
.model-choices,.choice-items { display:grid; gap:4px; }
.choice-line { display:flex; gap:4px; min-width:0; }
.choice-row { display:flex; width:100%; min-width:0; align-items:center; justify-content:space-between; gap:10px; text-align:start; padding:10px; overflow-wrap:anywhere; }
.choice-line .choice-row { flex:1; }
.choice-text { flex:1; min-width:0; }
.choice-text>span,.choice-text>small { display:block; }
.choice-text small { color:var(--soft); font-weight:400; margin-top:2px; white-space:pre-wrap; }
.choice-row[aria-pressed=true] { background:var(--secondary); color:var(--on-secondary); }
.reasoning-control { margin-top:20px; padding-top:16px; border-top:1px solid var(--edge); }
.reasoning-control h3 { font-size:var(--label); color:var(--soft); }
.reasoning-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.reasoning-heading output { font-weight:600; }
.ui-slider { position:relative; display:flex; width:100%; min-height:48px; align-items:center; touch-action:none; user-select:none; }
.ui-slider[data-disabled] { opacity:.45; }
.ui-slider-track { position:relative; flex:1; height:4px; border-radius:2px; background:var(--surface-top); overflow:hidden; }
.ui-slider-range { position:absolute; height:100%; background:var(--primary); }
.ui-slider-thumb { display:block; width:20px; height:20px; border:2px solid var(--primary); border-radius:50%; background:var(--page); }
.reasoning-ticks { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.reasoning-ticks button { flex:1; min-width:56px; padding:6px 8px; color:var(--soft); font-size:var(--caption); }
.reasoning-ticks button[aria-pressed=true] { background:var(--surface-high); color:var(--ink); }
.ui-sheet .dialog-head { touch-action:none;user-select:none; }
.row-popover { width:max-content;max-width:calc(100vw - 24px);padding:4px;border:1px solid var(--edge);border-radius:var(--r-md);background:var(--surface-high);box-shadow:0 6px 24px #0003; }
.row-popover-item { display:flex;width:100%;justify-content:flex-start;gap:8px;text-align:start; }
.schedule-fields { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.schedule-help { font-size:var(--caption);color:var(--soft);margin-bottom:8px; }
.schedule-help p { margin:0 0 8px; }
.project-colors { border:0;padding:0;margin:16px 0;display:flex;flex-wrap:wrap;gap:4px; }
.project-colors legend { color:var(--soft);font-size:var(--label);margin-bottom:8px; }
.project-colors button { position:relative; }
.project-colors [aria-pressed=true] { outline:2px solid var(--primary);outline-offset:-3px; }
.project-colors .i { position:absolute;color:var(--ink);background:var(--surface);border-radius:50%;font-size:12px; }
.color-swatch { display:block;width:18px;height:18px;border-radius:50%;background:currentColor; }
[data-color=blue] { color:#80acdf; } [data-color=green] { color:#78b494; } [data-color=amber] { color:#c7a354; }
[data-color=purple] { color:#b297ce; } [data-color=rose] { color:#d894ab; } [data-color=teal] { color:#66b3b0; }
[data-color=none] { color:var(--soft); }.color-swatch[data-color=none] { background:none;border:1px solid var(--soft); }
#scheduleForm .ui-field { color:var(--soft);font-size:var(--label); }
#scheduleForm input,#scheduleForm textarea,#scheduleForm select { display:block;margin-top:4px; }
.slash-menu { max-height:220px;overflow-y:auto;overscroll-behavior:contain;padding:4px;margin-bottom:8px;border:1px solid var(--edge);border-radius:var(--r-md);background:var(--surface);font-size:var(--label); }
.slash-menu button { display:block;width:100%;text-align:start; }
.slash-menu strong,.slash-menu small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.slash-menu strong { font-weight:500; }
.slash-menu small { color:var(--soft);font-size:var(--caption); }
.slash-menu button[aria-selected=true] { background:var(--surface-high); }
.ui-content.ui-sheet { inset:auto 0 calc(100% - var(--app-top,0px) - var(--app-height,100dvh)); width:100%; max-height:calc(var(--app-height,100dvh) - max(16px,env(safe-area-inset-top))); transform:none; border-radius:28px 28px 0 0; padding:20px max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
.ui-content[data-app-sheet=false][data-vaul-drawer] { transform:translate(-50%,-50%); }
.ui-content.ui-media { width:min(1000px,calc(100% - 24px)); }
.ui-media .ui-body { display:flex; flex-direction:column; }
.image-stage { height:clamp(160px,calc(var(--app-height,100dvh) * .55),640px); min-height:80px; flex-shrink:1; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; user-select:none; border-radius:var(--r-sm); background:var(--surface); }
.image-stage img { display:block; max-width:100%; max-height:100%; object-fit:contain; pointer-events:none; }
.image-stage[data-zoomed=true] { cursor:grab; }
.image-stage[data-zoomed=true]:active { cursor:grabbing; }
.image-tools { display:flex; flex-shrink:0; align-items:center; justify-content:center; gap:8px; margin-top:8px; }
.zoom-reset { min-width:80px; font-variant-numeric:tabular-nums; }
.image-help { flex-shrink:0; text-align:center; font-size:var(--caption); margin:4px 0 0; }
@supports(corner-shape:squircle) { button,input,textarea,select,.app-mark,.event.user,#composer,.ui-content,.queue-row,.app-toast { corner-shape:squircle; } }
@media(min-width:56rem) { .workspace { grid-template-columns:276px minmax(0,1fr); } #sidebarHost { display:block; } #openSidebar { display:none; } .chat-header { padding:12px 24px; } .timeline { padding-inline:32px; } .composer-area { padding-inline:32px; } }
@media(max-height:30rem) { .chat-header { padding-block:0; } #chatMeta { display:none; } #prompt { min-height:44px; max-height:96px; } .composer-area { max-height:calc(var(--app-height,100dvh) * .65); padding-block:4px; } .welcome h2 { font-size:1.375rem; } }
@media(hover:hover) and (pointer:fine) { button:hover:not(:disabled) { background:var(--surface-top); } button.primary:hover:not(:disabled) { background:var(--primary); filter:brightness(.95); } .icon-button { width:34px; height:34px; min-height:34px; } .sidebar button,.search-field input { min-height:36px; } .project-action { width:30px; } .project-action { opacity:0; } .project-row:hover .project-action,.project-row:focus-within .project-action { opacity:1; } }
button:active:not(:disabled) { background:var(--surface-top); }
button.primary:active:not(:disabled) { background:var(--primary); filter:brightness(.88); }
@media(prefers-reduced-motion:no-preference) {
  button { transition:background-color var(--motion-press) ease,opacity var(--motion-press) ease; }
  .icon-button { transition:background-color var(--motion-press) ease,transform var(--motion-press) var(--ease-out); }
  .icon-button:active:not(:disabled) { transform:scale(.98); }
  .ui-overlay[data-state=open] { animation:fade-in var(--motion-open) ease; }
  .ui-overlay[data-state=closed] { animation:fade-out var(--motion-close) ease; }
  .ui-content:not([data-vaul-drawer])[data-state=open],.ui-content[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=bottom][data-app-sheet=false][data-state=open] { animation:dialog-in var(--motion-open) var(--ease-out); }
  .ui-content:not([data-vaul-drawer])[data-state=closed],.ui-content[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=bottom][data-app-sheet=false][data-state=closed] { animation:dialog-out var(--motion-close) ease; }
  #attach[data-busy=true]::after,#send[data-busy=true]::after { animation:upload-spin 900ms linear infinite; }
  @keyframes fade-in { from { opacity:0; } to { opacity:1; } }
  @keyframes fade-out { to { opacity:0; } }
  @keyframes dialog-in { from { opacity:0; translate:0 6px; } to { opacity:1; translate:0 0; } }
  @keyframes dialog-out { to { opacity:0; translate:0 4px; } }
  @keyframes upload-spin { to { transform:rotate(360deg); } }
}
@media(prefers-reduced-motion:reduce) { [data-vaul-drawer],[data-vaul-overlay],[data-sonner-toast] { animation:none!important; transition:none!important; } }
@media(forced-colors:active) { button,input,select,textarea { border:1px solid ButtonText; } .ui-slider-range,.ui-slider-thumb { background:Highlight; } }