/* sidekick cat · a quiet glass workbench. Cat silhouette, soft corners, crisp ink. */
:root {
  --bg:#f7f8fa; --side:#f0f2f5; --surface:#fff; --surface-2:#f3f5f8;
  --text:#242731; --text-2:#464d59; --sub:#596270; --bad:#b8212b; --ok:#13723d; --line:#dfe3e9; --line-2:#c9ced8;
  --accent:#4874d8; --accent-text:#355fb8; --accent-soft:#eaf0fc;
  --bubble:#e9eef8; --hover:#e9ecf2; --active:#e2e8f3;
  --safe-top:max(env(safe-area-inset-top,0px),var(--native-safe-top,0px)); --safe-bottom:max(env(safe-area-inset-bottom,0px),var(--native-safe-bottom,0px));
  --panel-alpha:.6; --panel-transparency:40;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI","Microsoft YaHei",sans-serif;
  --reading-alpha:calc(.92 + var(--panel-alpha) * .08);
  --chrome-alpha:calc(.88 + var(--panel-alpha) * .12);
  --workbench-surface:color-mix(in srgb,var(--surface) calc(var(--chrome-alpha) * 100%),transparent);
  --reading-surface:color-mix(in srgb,var(--surface) calc(var(--reading-alpha) * 100%),transparent);
  --shadow:0 1px 2px #16203905,0 4px 14px #16203905;
}
html[data-theme="dark"] {
  --bg:#17191e; --side:#1b1e24; --surface:#23262d; --surface-2:#292d35;
  --text:#f0f1f4; --text-2:#d2d5dc; --sub:#a9afbc; --line:#3b404c; --line-2:#555d6c;
  --accent:#9bb7ff; --accent-text:#b4c8ff; --accent-soft:#2c3750;
  --on-accent:#17223b; --bubble:#323c50; --hover:#303540; --active:#363e4e;
  --shadow:0 1px 2px #0002,0 4px 16px #0001;
}
html[data-font="standard"] { --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI","Microsoft YaHei",sans-serif; }
html,body { overflow:hidden; overscroll-behavior:none; }
body { font-size:16px; line-height:1.6; }
button,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--accent-text); outline-offset:3px; }
button:disabled { cursor:default; }
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app { height:var(--app-height,100dvh); isolation:isolate; }
.icon-btn { width:44px; height:44px; border-radius:50%; color:var(--text-2); }
.btn,.btn.sm { min-height:44px; font-size:14px; line-height:1.5; }
.btn.primary { background:var(--text); border-color:var(--text); color:var(--surface); }
.btn.primary:hover { filter:none; opacity:.9; }
.sidebar { width:256px; padding:16px 12px; }
.brand { gap:8px; }
.brand small { font-size:12px; }
.brand .logo { width:36px; height:36px; }
.side-item { min-height:44px; padding:10px 12px; font-size:14px; border-radius:12px; }
.side-label { margin:24px 12px 8px; font-size:14px; }
.side-item .del { width:36px; height:36px; margin:-8px -8px -8px 0; }
.side-empty,.balance-mini,.usage-mini { font-size:14px; }
.balance-mini { min-height:44px; }
.side-scroll { min-height:0; scrollbar-width:thin; }
.new-chat { border-radius:16px; box-shadow:none; padding:10px 14px; }
.side-bottom { padding-bottom:var(--safe-bottom); }
.topbar { flex:none; height:68px; min-height:68px; border-bottom:0; padding:8px 20px; gap:8px; position:relative; z-index:3; }
.title-stack { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; line-height:1.35; }
.workbench-brand { color:var(--sub); font-size:12px; letter-spacing:.03em; }
.conv-title { font-size:16px; font-weight:600; }
.mode { height:44px; min-width:74px; padding:8px 28px 8px 12px; border:0; border-radius:22px; font-size:14px; background:var(--workbench-surface); }
.thread { min-height:0; overscroll-behavior-y:contain; padding:8px 24px 28px; -webkit-overflow-scrolling:touch; scroll-padding:24px; }
.messages { max-width:740px; }
.empty { position:relative; max-width:520px; margin:clamp(24px,10vh,104px) auto 24px; padding:32px 24px 24px; border:1px solid color-mix(in srgb,var(--line) 70%,transparent); border-radius:28px; box-shadow:none; overflow:hidden; }
html[data-panel][data-style] .empty { background:var(--reading-surface); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
.empty::before,.empty::after,#bannerFX { display:none!important; }
.empty .logo.xl { width:60px; height:60px; filter:drop-shadow(0 4px 8px #18203916); --cat-sw:1.5; --cat-edge:#bbc2cf; }
.empty .dc-cat.float { animation:none; }
.welcome-eyebrow { display:block; margin-top:20px; font-size:14px; color:var(--sub); }
.empty h2 { font-size:26px; line-height:1.4; letter-spacing:-.02em; margin:8px 0 12px; }
.empty>p { margin:0; font-size:16px; line-height:1.7; }
.chips { display:grid; grid-template-columns:1fr; gap:8px; margin-top:24px; text-align:left; }
.chip { min-height:48px; justify-content:flex-start; border-radius:14px; background:color-mix(in srgb,var(--surface-2) 90%,transparent); box-shadow:none; padding:12px 16px; font-size:14px; }
.chip .i { color:var(--text-2); width:18px; height:18px; }
.chip::after { content:'›'; margin-left:auto; color:var(--sub); font-size:20px; line-height:20px; }
.msg { margin:24px 0; }
html[data-panel][data-style] .msg.assistant { border:1px solid color-mix(in srgb,var(--line) 65%,transparent); background:var(--reading-surface); border-radius:20px; padding:20px; box-shadow:none; }
.msg.user .bubble { background:var(--bubble); border-radius:20px 20px 6px 20px; max-width:86%; padding:12px 16px; }
.msg.assistant .meta { font-size:12px; margin-bottom:12px; }
.md { font-size:16px; line-height:1.8; overflow-wrap:anywhere; }
.md pre { max-width:100%; }
.card,.acceptance-section,.sc-artifact { border-radius:16px; }
.card-head { gap:8px; }
.card p,.card li,.delivery-note,.checks,.sources,.sources li b { font-size:14px; }
.msg-actions button,.sources summary,details.think summary { min-height:44px; }
/* Background slider: the broad canvas can disappear, reading/control plates keep a contrast floor. */
html[data-panel][data-style] .main { background:color-mix(in srgb,var(--bg) calc(var(--panel-alpha) * 100%),transparent); background-image:none; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
html[data-panel][data-style] .sidebar { background:var(--workbench-surface); background-image:none; backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); }
html[data-panel][data-style] .topbar { background:var(--workbench-surface); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
html[data-panel][data-style] .panel,html[data-panel][data-style] .modal-card,html[data-panel][data-style] .login-card { background:var(--reading-surface); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); }
.composer-wrap { flex:none; z-index:4; padding:8px 24px calc(16px + var(--safe-bottom)); }
.composer { max-width:740px; min-height:60px; padding:6px; gap:4px; align-items:center; border-radius:30px; border:1px solid color-mix(in srgb,var(--line-2) 80%,transparent); box-shadow:0 4px 24px #16203912,inset 0 1px 0 #ffffff4d; }
html[data-panel][data-style] .composer { background:var(--workbench-surface); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
.composer textarea { flex:1; min-width:0; min-height:44px; max-height:112px; border:0; padding:8px 4px; background:transparent; resize:none; font:16px/24px var(--font); color:var(--text); border-radius:0; }
.composer textarea::placeholder { color:var(--sub); }
.composer .add-file { width:44px; height:44px; align-self:center; margin:0; color:var(--text-2); }
.composer .input-mode { width:44px; height:44px; }
.mode-keyboard { display:none; }
.composer[data-input-mode="voice"] .mode-mic { display:none; }
.composer[data-input-mode="voice"] .mode-keyboard { display:block; }
.composer [hidden] { display:none!important; }
.composer[data-input-mode="voice"] #send { display:none; }
.voice-hold { flex:1; min-width:0; min-height:44px; display:flex; gap:10px; align-items:center; justify-content:center; border:0; border-radius:22px; background:var(--surface-2); color:var(--text); font-size:16px; font-weight:500; padding:8px 12px; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:none; }
.voice-wave { height:20px; display:inline-flex; align-items:center; gap:3px; }
.voice-wave i { display:block; width:3px; height:6px; background:currentColor; border-radius:4px; }
.voice-wave i:nth-child(2),.voice-wave i:nth-child(4) { height:12px; }
.voice-wave i:nth-child(3) { height:18px; }
.recording .voice-hold { background:var(--text); color:var(--surface); }
.recording .voice-wave i { animation:cat-voice-wave .7s ease-in-out infinite alternate; }
.recording .voice-wave i:nth-child(2n) { animation-delay:-.3s; }
.cancel-recording .voice-hold { background:var(--bad-soft); color:var(--bad); }
.transcribing .voice-hold { color:var(--sub); }
.send { width:44px; height:44px; border-radius:50%; background:var(--text); color:var(--surface); flex:none; padding:0; margin:0; display:grid; place-items:center; }
.send:disabled { opacity:.35; }
.mic-hint { bottom:calc(100% + 4px); max-width:calc(100% - 32px); padding:12px 16px; border-radius:18px; background:var(--surface); color:var(--text); border:1px solid var(--line); box-shadow:var(--shadow); font-size:14px; line-height:1.5; }
.mic-dot { background:var(--bad); }
.cancel-recording~.mic-hint { color:var(--bad); }
.quote-preview,.pending-files { max-width:740px; margin:0 auto 8px; }
@keyframes cat-voice-wave { to { transform:scaleY(.45); } }
.panel { min-height:0; z-index:45; }
.panel-head { flex:none; min-height:64px; padding:10px 16px; gap:12px; }
.panel-body { min-height:0; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; padding:20px 20px calc(24px + var(--safe-bottom)); overflow-x:hidden; overflow-wrap:anywhere; }
.detail-nav { display:grid; grid-template-columns:88px minmax(0,1fr) 88px; align-items:center; }
.detail-nav>b { text-align:center; font-size:16px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.back-btn { display:inline-flex; align-items:center; justify-content:flex-start; min-width:80px; min-height:44px; margin-left:-8px; padding:8px 4px; border:0; border-radius:12px; color:var(--accent-text); background:transparent; font-size:16px; gap:2px; }
.back-btn:hover { background:var(--hover); }
.nav-spacer { width:80px; }
.ptask-head { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.ptask-head h2,.ptask-head h3 { flex:1; min-width:160px; font-size:22px; line-height:1.5; margin:0; }
.ptask-head .badge { margin-top:4px; max-width:100%; font-size:14px; line-height:1.5; }
.pmeta { font-size:14px; }
.modal { padding:24px; background:#11182755; }
.modal-card { width:min(560px,100%); max-height:calc(var(--app-height,100dvh) - 48px); border-radius:24px; overflow:hidden; border:1px solid var(--line); }
.modal-body { padding:8px 20px 24px; min-height:0; overscroll-behavior-y:contain; }
.modal .panel-head { padding-left:20px; padding-right:12px; }
.setting-row { gap:12px; min-width:0; padding:14px 0; font-size:14px; flex-wrap:wrap; }
.setting-row>span { min-width:0; }
.setting-row small { font-size:14px; line-height:1.5; margin-top:4px; }
.setting-row .seg { display:inline-flex; flex-wrap:wrap; max-width:100%; }
.seg button { min-height:44px; padding:8px 12px; font-size:14px; }
.theme-picker { gap:8px; margin:16px 0; }
.theme-choice { border-radius:14px; min-width:0; }
.theme-choice b { font-size:14px; }
.theme-choice small { display:none; }
.transparency-setting { padding:20px 16px 16px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); margin:20px 0 8px; }
.transparency-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; font-size:16px; font-weight:600; }
.transparency-heading output { color:var(--accent-text); font-variant-numeric:tabular-nums; }
#panelTransparency { display:block; width:100%; height:44px; margin:8px 0 0; padding:0; border:0; accent-color:var(--accent-text); cursor:pointer; background:transparent; }
.range-labels { display:flex; justify-content:space-between; font-size:14px; color:var(--sub); }
.transparency-setting p { font-size:14px; color:var(--sub); line-height:1.6; margin:12px 0 0; }
.settings-heading { margin:28px 0 4px; font-size:18px; }
.switch { flex:none; }
.modal-body>p,.modal-body>details,#callLedger,.bc-sub,.improve-meta,.pet-motion-note { font-size:14px!important; }
.modal-body details>summary { min-height:44px; padding:8px 0; }
.credits { font-size:12px!important; }
.toast { bottom:calc(96px + var(--safe-bottom)); max-width:calc(100vw - 32px); font-size:14px; line-height:1.5; padding:12px 16px; white-space:normal; text-align:center; }
.login { min-height:var(--app-height,100dvh); padding:calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bottom)); }
.login-card { box-shadow:var(--shadow); border-radius:28px; }
@media (max-width:860px) {
  .topbar { height:calc(64px + var(--safe-top)); min-height:calc(64px + var(--safe-top)); padding:calc(8px + var(--safe-top)) 12px 8px; gap:4px; }
  #themeBtn { display:none; }
  .topbar .title-stack { padding-left:4px; }
  .workbench-brand { font-size:11px; }
  .mode { min-width:68px; padding-left:10px; }
  .thread { padding:8px 16px 20px; }
  .empty { margin:clamp(20px,7vh,64px) auto 20px; padding:28px 20px 20px; border-radius:24px; }
  .empty h2 { font-size:23px; }
  .empty .logo.xl { width:56px; height:56px; }
  .empty>p { font-size:16px; }
  .chips { margin-top:24px; }
  .composer-wrap { padding:8px 12px calc(12px + var(--safe-bottom)); }
  .composer { min-height:58px; padding:6px; gap:2px; }
  .composer .input-mode,.composer .add-file { width:44px; }
  .voice-hold { padding:8px; }
  html[data-panel][data-style] .msg.assistant { padding:16px; border-radius:18px; }
  .msg.user .bubble { max-width:90%; }
  .sidebar { width:min(88vw,336px); max-width:none; padding:calc(12px + var(--safe-top)) 12px 12px; }
  .side-top { padding-bottom:16px; }
  .side-item .del { opacity:.7; width:44px; height:44px; }
  .panel { inset:0; height:var(--app-height,100dvh); width:100%; max-width:100%; }
  .panel.open { width:100%; }
  .panel>.panel-head { min-height:calc(64px + var(--safe-top)); padding:calc(8px + var(--safe-top)) 16px 8px; background:var(--surface); border-bottom:1px solid var(--line); }
  .panel-body { padding:20px 16px calc(24px + var(--safe-bottom)); min-width:0; }
  .modal { align-items:flex-end; padding:calc(12px + var(--safe-top)) 0 0; }
  .modal-card { max-height:calc(var(--app-height,100dvh) - var(--safe-top) - 12px); border-radius:24px 24px 0 0; border-bottom:0; }
  .modal-body { padding-bottom:calc(24px + var(--safe-bottom)); }
  .sc-viewer { width:100%; height:calc(var(--app-height,100dvh) - var(--safe-top) - 8px); max-height:none; top:auto; bottom:0; border-radius:20px 20px 0 0; margin:0; }
  .sc-viewer-head { min-height:64px; padding:10px 16px; }
  .sc-viewer-head>strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .keyboard-open .composer-wrap { padding-bottom:8px; }
  .keyboard-open .empty { margin-top:12px; padding:16px; }
  .keyboard-open .empty .logo,.keyboard-open .welcome-eyebrow { display:none; }
}
@media(max-width:360px) {
  .topbar { padding-left:8px; padding-right:8px; }
  .conv-title { font-size:14px; }
  .empty { padding:24px 16px 16px; }
  .empty h2 { font-size:21px; }
  .composer textarea { padding-left:2px; }
  .voice-hold { gap:6px; font-size:15px; }
  .voice-wave { gap:2px; }
  .modal-body { padding-left:16px; padding-right:16px; }
  .theme-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .setting-row>.seg { width:100%; }
}
@media(max-height:600px) {
  .empty { margin-top:12px; padding-top:20px; }
  .empty .logo { width:40px!important; height:40px!important; }
  .welcome-eyebrow { margin-top:12px; }
  .empty h2 { margin-top:6px; }
}
@media(prefers-reduced-motion:reduce) {
  .voice-wave i,.dc-cat.live .dc-eye,.dc-cat.live .dc-cur { animation:none!important; }
  *,*::before,*::after { scroll-behavior:auto!important; }
}
/* Neutralize legacy illustrated welcome-banner geometry in every wallpaper theme. */
html[data-style] .empty { max-width:520px; margin:clamp(24px,10vh,104px) auto 24px; padding:32px 24px 24px; border-radius:28px; }
html[data-style] .empty .logo { position:relative; margin:0 auto; z-index:1; }
html[data-style] .empty .muted { font-size:16px; }
.message-actions button { min-height:44px; font-size:14px; }
@media(max-width:860px) { html[data-style] .empty { margin:clamp(20px,7vh,64px) auto 20px; padding:28px 20px 20px; border-radius:24px; } }
@media(max-width:360px) { html[data-style] .empty { padding:24px 16px 16px; } }
@media(max-height:600px) { html[data-style] .empty { margin-top:12px; padding-top:20px; } }
@media(max-width:860px) { html.keyboard-open[data-style] .empty { margin-top:12px; padding:16px; } }

/* Keep secondary message actions readable even over a fully transparent canvas. */
.msg.user .message-actions { background:var(--reading-surface); border:1px solid var(--line); border-radius:22px; padding:0 4px; }
.message-actions button { color:var(--text-2); }
.badge { font-size:14px; line-height:1.5; }

.side-bottom { min-width:0; }
.balance-mini { width:calc(100% - 20px); max-width:calc(100% - 20px); }
.mic-hint.processing .mic-dot { background:var(--accent-text); animation:none; }