:root{
  --brand:#F97316; --brand-deep:#EA580C; --brand-ink:#7C2D12;
  --brand-soft:#FFF3E8; --brand-line:#FFD9B8;
  --bg:#FAF7F2; --panel:#FFFFFF; --ink:#1C1917; --muted:#79716B;
  --line:#EAE4DC; --ok:#0E7A4A; --bad:#C2331F;
  --radius:16px; --shadow:0 10px 30px rgba(124,45,18,.08);
  --side-w:236px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.7 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  display:flex;overflow:hidden}

/* ───── 会话侧栏 ───── */
aside{
  width:var(--side-w);flex:0 0 var(--side-w);height:100vh;height:100dvh;display:flex;flex-direction:column;
  background:#FFF9F3;border-right:1px solid var(--line);
  transition:margin-left .25s ease;
}
aside.hide{margin-left:calc(-1 * var(--side-w))}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(28,25,23,.4);z-index:39}
.side-top{padding:14px 12px 8px}
.new-chat{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:var(--brand);color:#fff;border:none;border-radius:12px;
  padding:11px;font:700 14px/1 inherit;cursor:pointer}
.new-chat:hover{background:var(--brand-deep)}
.announcement-entry{width:100%;margin-top:9px;padding:9px 10px;display:flex;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}
.announcement-entry:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.announcement-icon{position:relative;width:27px;height:27px;flex:0 0 27px;display:flex;align-items:center;justify-content:center;
  border-radius:9px;background:#F3ECE7;color:#9A5F43}
.announcement-icon::before{content:"";width:14px;height:12px;background:currentColor;
  clip-path:polygon(0 30%,68% 4%,68% 96%,0 70%);border-radius:2px}
.announcement-icon::after{content:"";position:absolute;left:8px;bottom:5px;width:3px;height:6px;border-radius:0 0 2px 2px;
  background:currentColor;transform:rotate(-16deg);transform-origin:top}
.announcement-copy{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.announcement-copy strong{font-size:12.5px}
.announcement-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:10.5px}
.announcement-badge{flex:0 0 auto;border-radius:999px;padding:2px 6px;background:var(--brand);color:#fff;
  font-size:9px;font-weight:800;line-height:1.4}
.works-entry{width:100%;margin-top:7px;padding:9px 10px;display:flex;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.7);color:var(--ink);text-align:left;cursor:pointer}
.works-entry:hover,.works-entry.has-works:hover{border-color:#D6C7BC;background:#fff}
.works-entry-icon{width:27px;height:27px;flex:0 0 27px;display:grid;place-items:center;border-radius:9px;
  background:#F1E9E3;color:#7D6253;font-size:16px;font-weight:900}
.works-entry-copy{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.works-entry-copy strong{font-size:12.5px}
.works-entry-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:10.5px}
.works-entry-count{display:grid;min-width:23px;height:20px;place-items:center;border-radius:999px;padding:0 6px;background:#ECE8E4;
  color:#746C66;font-size:9.5px;font-weight:800}
.works-entry.has-works .works-entry-count{background:#A66F59;color:#fff}
.conv-list{flex:1;overflow-y:auto;padding:6px 8px 16px}
.conv{
  display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;
  cursor:pointer;color:var(--ink);font-size:13.5px;margin-bottom:2px;
  white-space:nowrap;overflow:hidden}
.conv:hover{background:var(--brand-soft)}
.conv.active{background:var(--brand-soft);font-weight:700;color:var(--brand-ink)}
.conv .t{flex:1;overflow:hidden;text-overflow:ellipsis}
.conv-actions{display:flex;align-items:center;gap:3px;visibility:hidden}
.conv:hover .conv-actions,.conv:focus-within .conv-actions,.conv.active .conv-actions{visibility:visible}
.conv .del,.conv .remark{border:none;background:none;color:var(--muted);cursor:pointer;font-size:15px;
  padding:1px 3px;border-radius:6px}
.conv .remark{font-size:13px}
.conv .remark:hover{color:var(--brand-deep);background:#fff}
.conv.editing{gap:5px;padding:6px 7px;cursor:default}
.remark-input{min-width:0;flex:1;height:28px;border:1px solid #fdba74;border-radius:7px;
  background:#fff;padding:0 7px;color:var(--ink);font:inherit;outline:none}
.remark-input:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(249,115,22,.12)}
.conv .remark-save{border:0;border-radius:7px;background:var(--brand);color:#fff;
  padding:5px 8px;font-size:11px;font-weight:700;cursor:pointer}
.conv .remark-save:hover{background:var(--brand-deep)}
.conv.editing .conv-actions{visibility:visible;gap:2px}
.conv .del:hover{color:var(--bad)}
.conv .del.confirm{visibility:visible;color:#fff;background:var(--bad);font-size:11px;
  padding:2px 8px;font-weight:700}
.conv .del-cancel{border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--muted);
  padding:3px 7px;font-size:11px;font-weight:700;cursor:pointer}
.conv .del-cancel:hover{border-color:var(--brand-line);color:var(--brand-deep);background:var(--brand-soft)}
.side-foot{padding:10px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);
  display:flex;flex-direction:column;gap:8px}
.side-foot .greet{opacity:.8}
.foot-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.side-foot .icon-btn{width:96px;height:36px;justify-content:flex-start;background:transparent;border:1px solid transparent;
  border-radius:12px;padding:7px 10px}
.side-foot .icon-btn:hover{color:var(--brand-deep);border-color:transparent;background:transparent}

/* ───── 主区 ───── */
.app{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;height:100dvh}
header{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 16px;background:transparent;border-bottom:none;z-index:5;
  padding-top:calc(10px + env(safe-area-inset-top,0px))}
#sideBtn{border:1px solid var(--line);background:#fff;border-radius:10px;width:36px;height:36px;
  cursor:pointer;font-size:16px;color:var(--brand-deep);flex:0 0 auto}
#sideBtn:hover{background:var(--brand-soft)}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;flex:0 0 auto}
.slice{width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--brand) 0 25%, #FDBA74 25% 50%, var(--brand) 50% 75%, #FDBA74 75% 100%);
  border:3px solid var(--brand-deep);position:relative}
.slice::after{content:"";position:absolute;inset:34%;background:#fff;border-radius:50%}
header .spacer{flex:1;min-width:6px}
.header-tools{position:fixed;z-index:18;top:12px;right:14px;display:flex;flex-direction:column;align-items:stretch;gap:7px}
.header-tools .announcement-entry,.header-tools .works-entry{
  width:116px;height:38px;margin:0;padding:0 10px;justify-content:flex-start;gap:8px;border-color:#E2D9D2;
  border-radius:11px;background:rgba(255,255,255,.9);box-shadow:0 5px 16px rgba(61,43,32,.06);backdrop-filter:blur(10px)
}
.header-tools .announcement-entry:hover,.header-tools .works-entry:hover,.header-tools .works-entry.has-works:hover{
  border-color:#CDB9AC;background:#fff
}
.header-tools .announcement-icon,.header-tools .works-entry-icon{
  width:22px;height:22px;flex-basis:22px;border-radius:7px;font-size:13px
}
.header-tools .announcement-copy{display:none}
.header-entry-label{min-width:0;flex:0 0 auto;color:#564A43;font-size:11.5px;font-weight:750;line-height:1;white-space:nowrap}
.header-tools .announcement-badge{margin-left:auto;padding:1px 5px;font-size:8px}
.header-tools .works-entry-count{margin-left:auto;min-width:18px;height:18px;padding:0 5px;font-size:8.5px}
.icon-btn{border:1px solid var(--line);background:#fff;border-radius:10px;
  padding:8px 12px;cursor:pointer;font:600 13px/1 inherit;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.icon-btn:hover{border-color:var(--brand);color:var(--brand-deep)}
.conn-dot{width:8px;height:8px;border-radius:50%;background:#CBB;flex:0 0 auto}
.conn-dot.ok{background:var(--ok)} .conn-dot.bad{background:var(--bad)}

main{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.chat{max-width:800px;margin:0 auto;padding:24px 16px 16px;display:flex;flex-direction:column;gap:18px}

.welcome{text-align:center;padding:44px 12px 16px}
.welcome .slice-big{width:70px;height:70px;border-radius:50%;margin:0 auto 16px;
  background:conic-gradient(var(--brand) 0 25%, #FDBA74 25% 50%, var(--brand) 50% 75%, #FDBA74 75% 100%);
  border:6px solid var(--brand-deep);position:relative;box-shadow:var(--shadow)}
.welcome .slice-big::after{content:"";position:absolute;inset:34%;background:#fff;border-radius:50%}
.welcome h1{margin:0 0 6px;font-size:23px}
.welcome-greeting{color:var(--brand-deep)}
.welcome p{margin:0 auto 20px;color:var(--muted);max-width:44ch}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{border:1px solid var(--brand-line);background:var(--brand-soft);color:var(--brand-ink);
  padding:9px 16px;border-radius:999px;cursor:pointer;font-size:13px}
.chip:hover{background:#FFE8D2}

.msg{display:flex;gap:12px;align-items:flex-start;max-width:100%}
.msg.user{flex-direction:row-reverse}
.avatar{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:13px}
.msg.user .avatar{position:relative;width:36px;height:36px;border:1px solid #D8D0CA;
  background:linear-gradient(145deg,#F8F5F2,#EAE4DF);color:#554A43;font-size:13px;font-weight:800;
  letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 5px 14px rgba(55,46,40,.09)}
.msg.user .avatar::after{display:none}
.avatar.orange{position:relative;border:3px solid var(--brand-deep);
  background:conic-gradient(var(--brand) var(--p,100%), #FFE8D2 0)}
.avatar.orange.is-complete{background:var(--brand)}
.avatar.orange::after{content:"";position:absolute;inset:30%;background:#fff;border-radius:50%}
.bubble{max-width:80%;border-radius:var(--radius);padding:10px 13px;box-shadow:0 8px 24px rgba(91,55,25,.08);min-width:0}
.msg.user .bubble{background:#FFF4E9;color:var(--ink);border:1px solid #FFD8B8;border-bottom-right-radius:7px;word-break:break-word}
.user-text{white-space:pre-wrap;line-height:1.55}
.msg.ai .bubble{background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg-model{margin-top:6px;padding-top:4px;border-top:1px solid #F0D8C4;
  color:#9A755A;font:600 10.5px/1.3 ui-monospace,Consolas,monospace;text-align:right}
.meta{font-size:12px;color:var(--muted);margin-top:8px}
.err{color:var(--bad);font-weight:600}
.pending-title{color:var(--brand-deep);font-weight:800}
.pending-note{color:var(--brand-ink);font-weight:650}
.hint{font-size:13px;color:var(--muted);margin-top:6px}
.ref-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ref-thumbs img{width:54px;height:54px;object-fit:cover;border-radius:8px;border:1px solid #E8D4C3}

/* markdown 输出 */
.md{line-height:1.75;font-size:14.5px;word-break:break-word}
.md p{margin:6px 0}
.md h1,.md h2,.md h3{margin:12px 0 6px;font-size:16px;color:var(--brand-ink)}
.md ul,.md ol{margin:6px 0;padding-left:22px}
.md li{margin:3px 0}
.md code{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:4px;
  padding:0 5px;font-family:ui-monospace,Consolas,monospace;font-size:13px}
.md .codewrap{position:relative;margin:8px 0}
.md pre{background:#241C16;color:#F5E9DC;border-radius:10px;padding:14px 14px;
  overflow-x:auto;font:12.5px/1.6 ui-monospace,Consolas,monospace;margin:0}
.md pre code{background:none;border:none;padding:0;color:inherit}
.code-copy{position:absolute;top:6px;right:6px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1);color:#FFE8D2;border-radius:7px;padding:3px 10px;
  font:600 11px/1.5 inherit;cursor:pointer}
.cursor-blink::after{content:"▍";color:var(--brand);animation:blink 1s step-start infinite}
@keyframes blink{50%{opacity:0}}

.progress-line{display:flex;align-items:center;gap:10px;margin-top:10px}
.track{flex:1;height:8px;border-radius:99px;background:#F3EDE5;overflow:hidden}
.track > div{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--brand),#FDBA74);
  transition:width .5s ease;background-size:200% 100%;animation:flow 1.8s linear infinite}
@keyframes flow{from{background-position:200% 0}to{background-position:0 0}}
.pct{font-size:13px;font-weight:700;color:var(--brand-deep);min-width:42px;text-align:right}

.media{margin-top:12px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#111}
.media video,.media img{display:block;width:100%;max-height:420px;object-fit:contain}
.media-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;
  padding:7px 14px;font:600 13px/1 inherit;cursor:pointer;text-decoration:none;display:inline-block}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn:hover{filter:brightness(.97)}
.expired{padding:20px;text-align:center;color:var(--muted);background:#F6F1EA;font-size:13px}

/* ───── 输入区 ───── */
.composer-wrap{flex:0 0 auto;background:linear-gradient(180deg,transparent,var(--bg) 30%);
  padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.composer{max-width:800px;margin:0 auto;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow);padding:12px 14px}
.params-shell{position:relative}
.params-shell:not(.collapsed) .params{padding-right:112px}
.toggle-params{position:absolute;right:0;top:0;z-index:8;border:1px solid var(--brand-line);border-radius:999px;
  width:106px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;
  background:#FFF8F0;color:var(--brand-deep);font:700 11px/1.25 inherit;white-space:nowrap;cursor:pointer}
.toggle-params:hover{background:#FFE8D2}
.params-shell.collapsed{min-height:36px;margin-bottom:5px}
.params-shell.collapsed .toggle-params{top:0}
.model-tabs{display:flex;align-items:center;width:max-content;max-width:calc(100% - 112px);gap:3px;
  margin:0 0 10px;padding:3px;border:1px solid var(--brand-line);border-radius:11px;background:#FFF8F0}
.model-tabs button{min-width:58px;border:0;border-radius:8px;padding:6px 13px;background:transparent;
  color:var(--muted);font:700 12px/1.2 inherit;cursor:pointer}
.model-tabs button:hover{color:var(--brand-deep);background:#fff}
.model-tabs button.active{color:#fff;background:var(--brand);box-shadow:0 2px 7px rgba(234,88,12,.2)}
.params{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.params select,.params input[type=number]{
  border:1px solid var(--line);border-radius:10px;padding:7px 10px;font:13px/1.3 inherit;
  background:#FFFDFA;color:var(--ink);outline:none;max-width:100%}
.params select:focus,.params input:focus{border-color:var(--brand)}
.params label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.batch-count-control input{width:58px;text-align:center;font-weight:750}
.model-control,.size-control{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.param-label{flex:0 0 auto}
.model-picker,.size-picker{position:relative;min-width:248px;color:var(--ink)}
.size-picker{min-width:280px;max-width:100%}
.compact-control{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.compact-picker{position:relative;min-width:86px;color:var(--ink)}
.model-picker-btn,.size-picker-btn{width:100%;min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:12px;padding:7px 11px;background:#FFFDFA;color:var(--ink);
  font:650 13px/1.3 inherit;text-align:left;cursor:pointer;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.size-picker-btn>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-picker-btn:hover,.size-picker-btn:hover{background:#FFF9F3;border-color:var(--brand-line)}
.compact-picker-btn{width:100%;min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:9px;
  border:1px solid var(--line);border-radius:12px;padding:7px 10px;background:#FFFDFA;color:var(--ink);
  font:650 13px/1.3 inherit;text-align:left;cursor:pointer;outline:none}
.compact-picker-btn:hover{background:#FFF9F3;border-color:var(--brand-line)}
.compact-picker.open .compact-picker-btn,.compact-picker-btn:focus-visible{border-color:var(--brand);box-shadow:0 0 0 3px rgba(249,115,22,.12)}
.model-picker.open .model-picker-btn,.model-picker-btn:focus-visible,
.size-picker.open .size-picker-btn,.size-picker-btn:focus-visible{border-color:var(--brand);box-shadow:0 0 0 3px rgba(249,115,22,.12)}
.picker-chevron{color:var(--muted);font-size:16px;line-height:1;transition:transform .18s ease}
.model-picker.open .picker-chevron,.size-picker.open .picker-chevron{transform:rotate(180deg)}
.compact-picker.open .picker-chevron{transform:rotate(180deg)}
.model-menu,.size-menu{position:absolute;z-index:60;left:0;bottom:calc(100% + 9px);width:300px;max-width:calc(100vw - 38px);
  max-height:min(280px,42vh);overflow-y:auto;padding:8px;background:#FFFDFA;
  border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 55px rgba(69,39,18,.2);
  scrollbar-width:thin}
.picker-close{position:absolute;right:9px;top:8px;z-index:2;width:26px;height:26px;border:0;
  border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);font:700 17px/1 inherit;cursor:pointer}
.picker-close:hover{background:#FFE1C5}
.model-menu{width:420px;max-height:min(430px,62vh)}
.model-menu-head{display:flex;align-items:center;min-height:30px;padding:3px 38px 7px 6px;color:var(--ink);font-size:12px}
.model-group-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:4px;margin:2px 0 8px;padding:3px;
  border:1px solid var(--brand-line);border-radius:11px;background:#FFF8F0;position:sticky;top:-8px;z-index:1}
.model-group-tabs button{border:0;border-radius:8px;padding:7px;background:transparent;color:var(--muted);font:800 12px/1.2 inherit;cursor:pointer}
.model-group-tabs button:hover{background:#fff;color:var(--brand-deep)}
.model-group-tabs button.active{background:var(--brand);color:#fff;box-shadow:0 2px 7px rgba(234,88,12,.18)}
.model-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.model-option-grid .model-option{min-width:0;padding:10px 11px;gap:6px;border:1px solid transparent;background:#fff}
.model-option-grid .model-option:hover,.model-option-grid .model-option:focus-visible{border-color:var(--brand-line);background:var(--brand-soft)}
.model-option-grid .model-option.selected{border-color:#FDBA74;background:#FFE8D2}
.model-option-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.model-option-main strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:12.5px}
.model-option-main small{margin-top:3px;color:var(--muted);font-size:10px}
.model-option[hidden]{display:none}
.size-menu{width:380px;max-height:min(430px,62vh)}
.size-menu-head{display:flex;align-items:center;min-height:30px;padding:3px 38px 7px 6px;color:var(--ink);font-size:12px}
.size-tier-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:2px 0 8px;padding:3px;
  border:1px solid var(--brand-line);border-radius:11px;background:#FFF8F0;position:sticky;top:-8px;z-index:1}
.size-tier-tabs button{border:0;border-radius:8px;padding:6px;background:transparent;color:var(--muted);font:800 12px/1.2 inherit;cursor:pointer}
.size-tier-tabs button.active{background:var(--brand);color:#fff;box-shadow:0 2px 7px rgba(234,88,12,.18)}
.size-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.size-option-grid .size-option{min-width:0;padding:9px;gap:6px;border:1px solid transparent;background:#fff}
.size-option-grid .size-option:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.size-option-grid .size-option.selected{border-color:#FDBA74;background:#FFE8D2}
.size-option-main{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.25}
.size-option-main strong{font-size:13px;color:var(--ink)}
.size-option-main small{margin-top:2px;color:var(--muted);font-size:10px;white-space:nowrap}
.size-option[hidden]{display:none}
.compact-menu{position:absolute;z-index:65;left:0;bottom:calc(100% + 9px);width:170px;max-width:calc(100vw - 38px);
  max-height:280px;overflow-y:auto;padding:8px;background:#FFFDFA;border:1px solid var(--line);
  border-radius:16px;box-shadow:0 20px 55px rgba(69,39,18,.2)}
.compact-menu-title{padding:5px 36px 8px 8px;color:var(--muted);font-size:11px;font-weight:800}
.compact-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;
  border-radius:10px;padding:8px 10px;background:transparent;color:var(--ink);font:650 13px/1.3 inherit;cursor:pointer}
.compact-option:hover{background:var(--brand-soft)}
.compact-option.selected{background:#FFE8D2;color:var(--brand-ink)}
.compact-option.selected .option-check{opacity:1}
.model-group+.model-group{margin-top:7px;padding-top:7px;border-top:1px solid #F0E8DF}
.model-group-title{display:flex;align-items:center;gap:7px;padding:5px 8px 6px;color:var(--muted);
  font-size:11px;font-weight:800;letter-spacing:.04em}
.model-option,.size-option{width:100%;display:flex;align-items:center;gap:9px;border:0;border-radius:12px;
  padding:9px 10px;background:transparent;color:var(--ink);font:600 13px/1.35 inherit;text-align:left;cursor:pointer;outline:none}
.model-option:hover,.model-option:focus-visible,.size-option:hover,.size-option:focus-visible{background:var(--brand-soft)}
.model-option.selected,.size-option.selected{background:#FFE8D2;color:var(--brand-ink)}
.size-option>span:first-child{flex:1}
.option-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.option-tag{flex:0 0 auto;border:1px solid var(--brand-line);border-radius:999px;padding:2px 7px;
  color:var(--brand-deep);background:#fff;font-size:10px;font-weight:800}
.option-check{width:16px;flex:0 0 16px;color:var(--brand-deep);font-weight:900;opacity:0}
.model-option.selected .option-check,.size-option.selected .option-check{opacity:1}
.model-guide{display:flex;align-items:center;gap:8px;min-height:32px;margin:-2px 0 10px;
  padding:7px 10px;border-radius:11px;background:#FFF8F0;border:1px solid #FFE3C8;
  color:var(--muted);font-size:12px;line-height:1.45}
.model-guide .model-tier{flex:0 0 auto;color:var(--brand-deep);font-weight:800;background:#fff;
  border:1px solid var(--brand-line);border-radius:999px;padding:2px 8px}
.input-row{display:flex;gap:10px;align-items:flex-end}
textarea#prompt{flex:1;border:none;outline:none;resize:none;font:15px/1.6 inherit;color:var(--ink);
  max-height:150px;min-height:26px;background:transparent;padding:4px 2px}
.round-btn{width:44px;height:44px;border-radius:14px;cursor:pointer;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,border-color .16s ease}
.round-btn:hover{transform:translateY(-1px)}
.round-btn:active{transform:scale(.95)}
.round-btn:focus-visible{outline:3px solid rgba(249,115,22,.2);outline-offset:2px}
#attachBtn{background:transparent;color:var(--brand-deep);border:none;box-shadow:none}
#attachBtn:hover{box-shadow:none;color:var(--brand)}
#sendBtn{background:linear-gradient(135deg,#FB923C,#EA580C);color:#fff;border:1px solid #EA580C;
  box-shadow:0 6px 16px rgba(234,88,12,.28)}
#sendBtn:hover{filter:brightness(1.04);box-shadow:0 8px 20px rgba(234,88,12,.34)}
#sendBtn.stop{background:linear-gradient(135deg,#F87171,#DC2626);border-color:#DC2626}
.round-btn svg{width:24px;height:24px;display:block}
#attachBtn svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
#sendBtn svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#sendBtn.stop svg{width:15px;height:15px;fill:currentColor;stroke:none}
.attach-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.attach-strip .th{position:relative}
.attach-strip img{width:50px;height:50px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.attach-strip .x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;
  background:var(--bad);color:#fff;border:none;font-size:12px;cursor:pointer;line-height:1}
.foot-note{max-width:800px;margin:8px auto 0;text-align:center;font-size:12px;color:var(--muted)}

dialog{border:none;border-radius:18px;padding:0;max-width:460px;width:92vw;max-height:90vh;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.2)}
dialog::backdrop{background:rgba(28,25,23,.45)}
#settingsDlg{position:fixed;z-index:100;inset:0;margin:auto;width:min(880px,calc(100vw - 32px));
  max-width:none;max-height:min(88vh,760px);overflow:hidden;border:1px solid var(--line);border-radius:22px;
  background:#fff;box-shadow:0 28px 80px rgba(69,39,18,.22)}
#settingsDlg::backdrop{background:rgba(55,43,34,.25);backdrop-filter:blur(5px)}
#settingsDlg .dlg-body{position:relative;z-index:1;display:flex;flex-direction:column;height:min(82vh,700px);max-height:min(88vh,760px);
  padding:22px;background:#fff;border-radius:22px;overflow:hidden}
#settingsDlg .settings-panel,.announcement-dialog .announcement-feed{scrollbar-width:thin;scrollbar-color:#898C90 rgba(75,78,83,.06);
  scrollbar-gutter:stable;scroll-behavior:smooth}
#settingsDlg .settings-panel::-webkit-scrollbar,.announcement-dialog .announcement-feed::-webkit-scrollbar{width:8px}
#settingsDlg .settings-panel::-webkit-scrollbar-track,.announcement-dialog .announcement-feed::-webkit-scrollbar-track{
  margin:12px 0;background:rgba(75,78,83,.045);border-radius:999px}
#settingsDlg .settings-panel::-webkit-scrollbar-thumb,.announcement-dialog .announcement-feed::-webkit-scrollbar-thumb{
  min-height:52px;border:2px solid transparent;border-radius:999px;background:linear-gradient(180deg,#B5B7BA,#85888C);
  background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
#settingsDlg .settings-panel::-webkit-scrollbar-thumb:hover,.announcement-dialog .announcement-feed::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#999CA0,#6F7276);background-clip:padding-box;box-shadow:0 0 8px rgba(45,48,52,.18)}
.side-foot .settings-open{border-color:var(--brand-line)!important;background:#fff!important;color:var(--brand-deep)}
.dlg-body{padding:22px;max-height:90vh;overflow-y:auto}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.dlg-body h3{margin:0;font-size:17px}
.dlg-close{width:30px;height:30px;border:0;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);
  font:500 20px/1 inherit;cursor:pointer}
.dlg-close:hover{background:#FFE3C8}
.dlg-body p{margin:0 0 16px;font-size:13px;color:var(--muted)}
.settings-subtitle{flex:0 0 auto;margin:2px 0 14px!important;font-size:12px!important}
.settings-workspace{display:grid;grid-template-columns:158px minmax(0,1fr);flex:1;min-height:0;overflow:hidden;
  border:1px solid #E6DCD4;border-radius:16px;background:#fff}
.settings-nav{display:flex;flex-direction:column;gap:6px;padding:10px;border-right:1px solid #E6DCD4;background:#F8F3EF}
.settings-nav-item{position:relative;width:100%;border:1px solid transparent;border-radius:11px;background:transparent;color:#695B52;
  padding:10px 11px;text-align:left;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
.settings-nav-item span,.settings-nav-item small{display:block}
.settings-nav-item span{font-size:12.5px;font-weight:750}
.settings-nav-item small{margin-top:3px;color:#9A897E;font-size:10px;font-weight:500}
.settings-nav-item:hover{border-color:#E3D5CB;background:#FFFDFC;color:#493D35}
.settings-nav-item.active{border-color:#DDCFC5;background:#FFFDFC;color:#342B26;box-shadow:0 5px 16px rgba(100,67,48,.07)}
.settings-nav-item.active::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:#A66F59}
.settings-nav-item:focus-visible{outline:2px solid #B88A75;outline-offset:2px}
.settings-panels{min-width:0;min-height:0;overflow:hidden;background:#fff}
.settings-panel{display:none;height:100%;min-height:0;padding:18px 20px;overflow-y:auto}
.settings-panel.active{display:block}
.settings-section-head{margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #ECEAE7}
.settings-section-head h4{margin:0 0 5px;font-size:15px}
.settings-section-head p{margin:0!important;font-size:12px!important;line-height:1.6}
.settings-panel .field{margin-bottom:0}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.field-head label{margin:0}
.field input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:16px/1.4 inherit;outline:none}
.field input:focus{border-color:var(--brand)}
.model-key-card{margin:0;padding:14px;border:1px solid var(--line);border-radius:14px;background:#FCFBFA}
.model-key-head{margin-bottom:10px}
.model-key-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:2px}
.model-key-title-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.model-key-head h4{margin:0 0 2px;font-size:14px}
.model-key-title h4{margin:0}
.model-key-head p{margin:0;font-size:11.5px;line-height:1.55}
.key-test-btn,.model-key-title .clear-keys{flex:0 0 auto;border:1px solid #D8DADD;border-radius:8px;background:#fff;color:#5D6065;
  padding:5px 9px;font:600 11px/1.2 inherit;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
.key-test-btn:hover{border-color:#AEB1B5;background:#F4F5F6;color:#303236}
.key-test-btn:disabled{opacity:.55;cursor:wait}
.model-key-title-actions .key-test-btn{border-color:#DDCFC5;background:#F8F1EC;color:#765746}
.model-key-title-actions .key-test-btn:hover{border-color:#C7AA99;background:#F3E7DF;color:#5E4032}
.key-test-btn.is-success{border-color:#9CCAAF;background:#F0FAF4;color:#247744}
.key-test-btn.is-error{border-color:#E0AAA1;background:#FFF3F1;color:#B24738}
.model-key-title .clear-keys{border-color:#E7C4BE;background:#FFFDFC;color:#B84D3E}
.model-key-title .clear-keys:hover{border-color:#D8978D;background:#FFF5F3}
.model-key-title .clear-keys:disabled{opacity:.5;cursor:wait}
.model-key-list{display:flex;flex-direction:column;gap:7px}
.model-key-group{border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}
.model-key-group summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;
  color:var(--ink);font-size:12px;font-weight:750;cursor:pointer;list-style:none}
.model-key-group summary::-webkit-details-marker{display:none}
.model-key-group summary::after{content:"⌄";color:var(--muted);font-size:14px;transition:transform .16s ease}
.model-key-group[open] summary::after{transform:rotate(180deg)}
.model-key-group summary small{margin-left:auto;color:var(--muted);font-size:10px;font-weight:600}
.model-key-rows{padding:4px 9px 9px;border-top:1px solid var(--line)}
.model-key-row{display:grid;grid-template-columns:minmax(132px,1fr) minmax(240px,1.45fr);align-items:center;gap:10px;padding:6px 2px}
.model-key-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:11.5px;font-weight:650}
.model-key-control{display:flex;align-items:center;gap:7px;min-width:0}
.model-key-row input{min-width:0;width:100%;height:32px;border:1px solid var(--line);border-radius:9px;padding:6px 9px;
  background:#FFFDFA;color:var(--ink);font:13px/1.2 inherit;outline:none}
.model-key-row input:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(249,115,22,.1)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.dlg-actions{display:flex;flex:0 0 auto;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
.settings-about-wrap{position:relative;margin-right:auto}
.settings-about-btn{border-color:#DDCFC5;background:#F8F1EC;color:#765746}
.settings-about-btn:hover{border-color:#C7AA99;background:#F3E7DF;color:#5E4032}
.about-bubble{position:absolute;z-index:40;left:0;bottom:calc(100% + 13px);width:280px;padding:16px;border:1px solid #E2D5CC;
  border-radius:16px;background:#FFFDFC;text-align:center;box-shadow:0 18px 50px rgba(77,52,39,.18);animation:aboutBubbleIn .18s ease-out}
.about-bubble[hidden]{display:none}
.about-bubble::after{content:"";position:absolute;left:24px;bottom:-7px;width:13px;height:13px;border-right:1px solid #E2D5CC;
  border-bottom:1px solid #E2D5CC;background:#FFFDFC;transform:rotate(45deg)}
.about-bubble-close{position:absolute;right:8px;top:8px;width:26px;height:26px;border:0;border-radius:50%;background:#F7EEE8;
  color:#916A56;font:500 17px/1 inherit;cursor:pointer}
.about-bubble-close:hover{background:#F0DFD4}
.about-qr-shell{width:220px;height:300px;margin:5px auto 12px;padding:6px;border:1px solid #E5DAD2;border-radius:13px;background:#fff}
.about-qr-shell img{display:block;width:100%;height:100%;border-radius:7px;object-fit:contain}
.about-qr-shell img[hidden]{display:none!important}
.about-qr-placeholder{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px dashed #D5BCAE;
  border-radius:8px;background:#FAF4F0;color:#795B4B}
.about-qr-placeholder[hidden]{display:none!important}
.about-qr-placeholder span{font-size:12px;font-weight:750}
.about-qr-placeholder small{color:#A08474;font-size:9.5px}
.about-bubble>strong{display:block;color:#342B26;font-size:14px}
.about-bubble>p{margin:5px 0 0!important;color:#8A776C;font-size:11px!important}
@keyframes aboutBubbleIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.announcement-dialog{width:min(820px,92vw);max-width:820px;background:#fff}
.announcement-dialog .dlg-body{display:flex;flex-direction:column;height:min(78vh,700px);max-height:min(84vh,740px);padding:20px;overflow:hidden}
.announcement-dialog .dlg-head{align-items:flex-start;margin-bottom:14px}
.announcement-dialog .announcement-updated{margin:1px 0 0;font-size:11px}
.announcement-workspace{display:grid;grid-template-columns:150px minmax(0,1fr);flex:1;min-height:0;overflow:hidden;
  border:1px solid #E6DCD4;border-radius:16px;background:#fff}
.announcement-categories{display:flex;flex-direction:column;gap:6px;padding:10px;border-right:1px solid #E6DCD4;background:#F8F3EF}
.announcement-category{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:1px solid transparent;
  border-radius:10px;padding:9px 10px;background:transparent;color:#695B52;font:650 11.5px/1.2 inherit;cursor:pointer;text-align:left}
.announcement-category small{min-width:22px;border-radius:999px;padding:2px 6px;background:#EEE4DD;color:#8A7162;font-size:9.5px;text-align:center}
.announcement-category:hover{border-color:#E3D5CB;background:#FFFDFC;color:#493D35}
.announcement-category.active{border-color:#DDCFC5;background:#FFFDFC;color:#342B26;box-shadow:0 5px 16px rgba(100,67,48,.07)}
.announcement-category.active small{background:#A66F59;color:#fff}
.announcement-category:focus-visible{outline:2px solid #B88A75;outline-offset:2px}
.announcement-list{display:flex;flex-direction:column;gap:10px}
.announcement-feed{min-width:0;min-height:0;padding:18px 24px;overflow-y:auto;background:#fff}
.announcement-day{overflow:visible;border:1px solid #E9DED6;border-radius:12px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.announcement-day.open{border-color:#DFCFC4;box-shadow:0 8px 24px rgba(100,67,48,.06)}
.announcement-day-head{display:flex;align-items:center;gap:10px;width:100%;height:auto;min-height:58px;padding:15px 14px;border:0;border-radius:12px;background:transparent;
  color:inherit;font:inherit;line-height:1.2;text-align:left;cursor:pointer;user-select:none}
.announcement-day-head:hover{background:#FCF8F5}
.announcement-day-head:focus-visible{outline:2px solid #B88A75;outline-offset:-3px}
.announcement-day-head time{display:block;flex:0 0 auto;color:#6D5143;font-size:13px;font-weight:800;line-height:20px;white-space:nowrap}
.announcement-day-count{margin-left:auto;border:1px solid #E1D2C8;border-radius:999px;padding:2px 8px;background:#F8F1EC;color:#876B5C;font-size:10px;font-weight:700;line-height:16px;white-space:nowrap}
.announcement-day-chevron{display:grid;flex:0 0 22px;width:22px;height:22px;place-items:center;border-radius:7px;background:#F4ECE7;color:#8B6A59;font-size:15px;font-weight:800;line-height:1;transition:transform .2s ease,background .2s ease}
.announcement-day.open .announcement-day-chevron{transform:rotate(180deg);background:#EDE0D8}
.announcement-day-items{position:relative;margin:0 12px;padding:15px 0 7px;border-top:1px solid #E9DED6;animation:announcement-reveal .2s ease}
.announcement-day-items[hidden]{display:none!important}
@keyframes announcement-reveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.announcement-item{position:relative;padding:0 0 26px 30px;background:#fff}
.announcement-item:last-child{padding-bottom:5px}
.announcement-item::after{content:"";position:absolute;left:6px;top:13px;bottom:-3px;width:2px;border-radius:999px;background:#E0D1C7}
.announcement-item:last-child::after{display:none}
.announcement-node{position:absolute;z-index:1;left:1px;top:3px;width:12px;height:12px;border:3px solid #fff;border-radius:50%;background:#A66F59;
  box-shadow:0 0 0 1px #CBAA9A,0 3px 8px rgba(100,67,48,.14)}
.announcement-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.announcement-item h4{margin:0;color:var(--ink);font-size:14px}
.announcement-item-head>span{flex:0 0 auto;border:1px solid #E3D6CD;border-radius:999px;padding:2px 7px;background:#F9F3EF;
  color:#886D5E;font-size:9.5px;font-weight:700}
.announcement-item p{margin:6px 0 0!important;color:var(--muted);font-size:12.5px;line-height:1.65}
.announcement-item ul{margin:6px 0 0;padding-left:19px;color:var(--muted);font-size:12.5px;line-height:1.7}
.announcement-item li+li{margin-top:3px}

.toast{position:fixed;left:50%;bottom:26px;z-index:100;display:flex;align-items:center;gap:10px;transform:translate(-50%,14px) scale(.98);
  max-width:min(440px,calc(100vw - 32px));min-height:48px;padding:9px 15px 9px 10px;border:1px solid rgba(221,207,197,.92);
  border-radius:15px;background:rgba(255,253,251,.94);color:#493D35;box-shadow:0 16px 42px rgba(76,52,39,.16),inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(14px);font-size:13px;font-weight:600;line-height:1.45;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1)}
.toast::before{content:"i";display:grid;flex:0 0 28px;width:28px;height:28px;place-items:center;border-radius:50%;
  background:#EFE4DC;color:#8B6755;font:800 13px/1 inherit}
.toast[data-tone="success"]{border-color:#BFDBC9;color:#315C40}
.toast[data-tone="success"]::before{content:"✓";background:#E7F5EC;color:#2E7A49}
.toast[data-tone="warning"]{border-color:#E3D0A9;color:#735C2E}
.toast[data-tone="warning"]::before{content:"!";background:#FBF3DD;color:#987322}
.toast[data-tone="error"]{border-color:#E5BDB6;color:#813F34}
.toast[data-tone="error"]::before{content:"!";background:#FBEAE7;color:#B34D3D}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.settings-toast{position:absolute;z-index:30;top:18px;bottom:auto;max-width:calc(100% - 96px);
  box-shadow:0 14px 38px rgba(76,52,39,.18),inset 0 1px 0 rgba(255,255,255,.82)}

.media img,.media video{cursor:zoom-in}
.media img:focus-visible,.media video:focus-visible{outline:3px solid rgba(249,115,22,.45);outline-offset:-3px}
.media-video{position:relative}
.media-video::after{content:"▶";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding-left:3px;
  background:rgba(255,255,255,.9);color:var(--brand-deep);box-shadow:0 8px 24px rgba(0,0,0,.2);pointer-events:none}
.media-video:hover::after{background:#fff;transform:translate(-50%,-50%) scale(1.05)}
.media-preview-dialog{width:min(1100px,94vw);max-width:none;height:min(820px,92vh);max-height:none;
  margin:auto;padding:0;border:0;border-radius:20px;background:transparent;overflow:visible;box-shadow:none}
.media-preview-dialog::backdrop{background:rgba(55,43,34,.24);backdrop-filter:blur(8px)}
.media-preview-shell{height:100%;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.16);
  border-radius:20px;background:#FFFDFB;border-color:#E8DED5;box-shadow:0 28px 80px rgba(69,39,18,.2)}
.media-preview-head{height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px 0 20px;color:var(--ink);border-bottom:1px solid #EDE5DE;background:#fff}
.media-preview-head>strong{flex:1;min-width:0;font-size:14px}
.media-preview-tools{display:flex;align-items:center;gap:4px;margin:0 12px;padding:3px;border:1px solid var(--line);
  border-radius:11px;background:#FFF9F3}
.media-preview-tools[hidden]{display:none}
.media-preview-tools button{height:28px;min-width:30px;border:0;border-radius:8px;background:transparent;color:var(--ink);
  font:700 16px/1 inherit;cursor:pointer}
.media-preview-tools button:hover{background:#fff;color:var(--brand-deep)}
.media-preview-tools button:disabled{opacity:.35;cursor:not-allowed}
.media-preview-tools .zoom-value{min-width:54px;color:var(--brand-deep);font-size:11px}
.media-preview-close{width:34px;height:34px;border:1px solid var(--brand-line);border-radius:50%;
  background:var(--brand-soft);color:var(--brand-deep);font:400 23px/1 inherit;cursor:pointer}
.media-preview-close:hover{background:#FFE3C8}
.media-preview-content{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;
  background:linear-gradient(135deg,#F8F4F0,#F1ECE7)}
.media-preview-content img,.media-preview-content video{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;
  box-shadow:0 10px 32px rgba(69,39,18,.12)}
.media-preview-content.is-image{touch-action:none;user-select:none}
.media-preview-content .zoomable-preview-image{transform-origin:center center;will-change:transform;cursor:zoom-in;
  transition:transform .14s ease}
.media-preview-content.is-zoomed .zoomable-preview-image{cursor:grab}
.media-preview-content.is-dragging .zoomable-preview-image{cursor:grabbing;transition:none}
.media-preview-content video{width:100%;height:100%;background:#EEE8E2}

/* ───── 作品库 ───── */
.works-dialog{width:min(980px,94vw);max-width:none;height:min(760px,88vh);max-height:none;padding:0;border:0;border-radius:22px;
  background:#fff;box-shadow:0 26px 80px rgba(50,38,30,.2)}
.works-dialog::backdrop{background:rgba(55,43,34,.24);backdrop-filter:blur(7px)}
.works-shell{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden}
.works-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 22px 14px;border-bottom:1px solid #ECE7E2}
.works-head h3{margin:0;font-size:18px}
.works-head p{margin:2px 0 0;color:var(--muted);font-size:12px}
.works-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px;border-bottom:1px solid #EEEAE6;background:#FCFAF8}
.works-tabs{display:flex;align-items:center;gap:5px;padding:3px;border:1px solid #E2D9D2;border-radius:11px;background:#F3EEEA}
.works-tabs button{border:0;border-radius:8px;padding:7px 13px;background:transparent;color:#756B64;font:700 12px/1.2 inherit;cursor:pointer}
.works-tabs button span{margin-left:3px;color:#A0958D;font-size:10px}
.works-tabs button:hover{background:#fff;color:#4B413B}
.works-tabs button.active{background:#fff;color:#4A3328;box-shadow:0 2px 8px rgba(75,54,41,.08)}
.works-tabs button.active span{color:#A66F59}
.works-select-all{display:flex;align-items:center;gap:7px;color:#635A54;font-size:12px;cursor:pointer;user-select:none}
.works-select-all input{width:16px;height:16px;accent-color:#168A5B}
.works-select-all:has(input:disabled){opacity:.45;cursor:not-allowed}
.works-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:14px;
  padding:18px 22px 28px;overflow-y:auto;background:#F8F5F2;scrollbar-width:thin;scrollbar-color:#8B8E92 rgba(75,78,83,.06)}
.works-grid::-webkit-scrollbar{width:8px}.works-grid::-webkit-scrollbar-track{background:rgba(75,78,83,.05)}
.works-grid::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:99px;background:#8B8E92;background-clip:padding-box}
.work-card{position:relative;min-width:0;display:flex;flex-direction:column;overflow:visible;border:1px solid #E2DAD4;border-radius:14px;background:#fff;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,transform .18s ease}
.work-card:hover{border-color:#CDB9AC;box-shadow:0 10px 24px rgba(73,49,35,.08);transform:translateY(-1px)}
.work-card.selected{border-color:#0F7A4A;background:#F7FFFA;box-shadow:0 0 0 3px rgba(15,122,74,.28),0 12px 28px rgba(18,100,62,.16)}
.work-card.unavailable{opacity:.72}
.work-card-media{position:relative;width:100%;height:170px;flex:0 0 170px;margin:0;border:0;border-radius:13px 13px 0 0;overflow:hidden;background:#EEE9E5}
.work-card-media img,.work-card-media video{width:100%;height:100%;max-height:none;object-fit:cover}
.work-card-media video{background:#EAE5E1}
.work-check{position:absolute;z-index:3;top:9px;left:9px;display:grid;width:25px;height:25px;place-items:center;cursor:pointer}
.work-check input{position:absolute;opacity:0;pointer-events:none}
.work-check span{width:22px;height:22px;border:1px solid rgba(75,61,53,.28);border-radius:7px;background:rgba(255,255,255,.9);
  box-shadow:0 3px 10px rgba(45,32,25,.12);backdrop-filter:blur(5px)}
.work-check input:checked+span{border-color:#0F7A4A;background:#168A5B;box-shadow:0 0 0 3px rgba(22,138,91,.24),0 3px 10px rgba(24,93,66,.18)}
.work-check input:checked+span::after{content:"✓";display:grid;height:100%;place-items:center;color:#fff;font:900 13px/1 inherit}
.work-check input:disabled+span{background:rgba(235,232,229,.9);cursor:not-allowed}
.works-video-mark{position:absolute;left:50%;top:50%;display:grid;width:42px;height:42px;place-items:center;transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(255,255,255,.84);color:#705444;font-size:13px;box-shadow:0 8px 22px rgba(32,25,21,.18);pointer-events:none}
.work-card-info{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:58px;padding:10px 11px 9px}
.work-card-info>div{min-width:0}.work-card-info strong,.work-card-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.work-card-info strong{font-size:12.5px}.work-card-info small{margin-top:2px;color:#8A817B;font:600 9.5px/1.4 ui-monospace,Consolas,monospace}
.work-card-info>span{flex:0 0 auto;color:#887A71;font-size:9.5px;white-space:nowrap}
.work-card-actions{display:flex;flex:0 0 46px;align-items:center;justify-content:flex-end;gap:6px;min-height:46px;padding:8px 10px 10px;border-top:1px solid #F0EAE5;border-radius:0 0 13px 13px;background:#fff;overflow:visible}
.work-card-btn{height:27px;padding:0 9px;border:1px solid #DDD4CD;border-radius:8px;background:#fff;color:#665B54;
  font:700 10.5px/1 inherit;cursor:pointer}
.work-card-btn:hover{border-color:#C7B6AA;background:#F9F5F2;color:#4D4038}
.work-card-btn.danger{border-color:#E3BBB4;background:#FFF9F7;color:#A34739}
.work-card-btn.danger:hover{border-color:#D59A90;background:#FFF2EF;color:#8F3428}
.work-card-btn.danger.is-confirming{border-color:#A94335;background:#A94335;color:#fff}
.work-card-btn:disabled{opacity:.42;cursor:not-allowed}
.works-expired{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#796F68}
.works-expired span{font-weight:750}.works-expired small{margin-top:3px;color:#A09790}
.works-empty{grid-column:1/-1;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#7F746D}
.works-empty>span{display:grid;width:54px;height:54px;place-items:center;border-radius:17px;background:#EEE7E2;color:#8C7162;font-size:25px}
.works-empty strong{margin-top:13px;color:#4F453F}.works-empty p{margin:3px 0 0;font-size:12px}
.works-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px 14px;padding:13px 22px;border-top:1px solid #E9E3DE;background:#fff}
.works-footer>span{margin-right:auto;color:#776D66;font-size:12px}
.works-footer .btn.danger{border-color:#E3BBB4;background:#FFF9F7;color:#A34739}
.works-footer .btn.danger:hover{border-color:#D59A90;background:#FFF2EF;color:#8F3428}
.works-footer .btn.danger.is-confirming{border-color:#A94335;background:#A94335;color:#fff}
.works-footer .btn.danger.is-confirming:hover{background:#91372B}
.works-footer .btn:disabled{opacity:.45;cursor:not-allowed}
.works-toast{position:absolute;z-index:20;left:50%;bottom:72px;max-width:calc(100% - 44px)}

@media (max-width:760px){
  aside{position:fixed;left:0;top:0;z-index:40;box-shadow:8px 0 30px rgba(0,0,0,.15)}
  aside.hide{margin-left:calc(-1 * var(--side-w) - 40px);box-shadow:none}
  #sideBtn{position:fixed;left:10px;z-index:45;
    top:calc(8px + env(safe-area-inset-top,0px))}
  .side-top{padding-top:54px}
  .sidebar-backdrop.show{display:block}
  .bubble{max-width:88%}
  header{padding:8px 10px 8px 54px;padding-top:calc(8px + env(safe-area-inset-top,0px));gap:6px}
  .header-tools{top:calc(8px + env(safe-area-inset-top,0px));right:9px;flex-direction:row;gap:6px}
  .header-tools .announcement-entry,.header-tools .works-entry{width:38px;height:36px;padding:0;justify-content:center}
  .header-tools .header-entry-label,.header-tools .announcement-badge,.header-tools .works-entry-count{display:none}
  .logo{font-size:15px;gap:6px}
  .logo .slice{width:24px;height:24px}
  .icon-btn{padding:8px 10px;font-size:12.5px}
  .icon-btn span.lbl{display:none}
  .params{gap:6px}
  .params-shell:not(.collapsed) .params{padding-right:0;padding-top:34px}
  .toggle-params{right:0}
  .params label{font-size:11.5px;flex:1 1 auto;min-width:0}
  .model-control{flex:1 1 100%;font-size:11.5px}
  .size-control{flex:1 1 100%;font-size:11.5px}
  .model-picker,.size-picker{flex:1;min-width:0}
  .model-menu,.size-menu{width:100%;max-width:none;max-height:48vh;border-radius:16px}
  .params select,.params input[type=number]{font-size:16px;padding:6px 8px;flex:1;min-width:0}
  .model-guide{align-items:flex-start;flex-wrap:wrap;gap:5px 7px;padding:7px 9px}
  .composer{padding:10px 12px;border-radius:16px}
  textarea#prompt{font-size:16px}
  .round-btn{width:40px;height:40px}
  .chat{padding:16px 12px 12px}
  dialog{width:94vw}
  #settingsDlg{width:calc(100vw - 20px);max-height:92dvh}
  #settingsDlg .dlg-body{height:88dvh;max-height:92dvh;padding:15px}
  .settings-subtitle{margin-bottom:10px!important}
  .settings-workspace{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .settings-nav{flex-direction:row;gap:5px;padding:7px;overflow-x:auto;border-right:0;border-bottom:1px solid #E6DCD4}
  .settings-nav-item{flex:1 0 auto;width:auto;min-width:92px;padding:8px 10px;text-align:center}
  .settings-nav-item small{display:none}
  .settings-nav-item.active::before{left:12px;right:12px;top:auto;bottom:-1px;width:auto;height:3px;border-radius:3px 3px 0 0}
  .settings-panel{padding:14px 10px}
  .about-bubble{position:fixed;left:50%;bottom:78px;width:min(280px,calc(100vw - 28px));transform:translateX(-50%);animation:aboutBubbleMobileIn .18s ease-out}
  .about-bubble::after{left:50%;transform:translateX(-50%) rotate(45deg)}
  @keyframes aboutBubbleMobileIn{from{opacity:0;transform:translate(-50%,6px) scale(.98)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
  .announcement-dialog{width:calc(100vw - 20px);max-width:none}
  .announcement-dialog .dlg-body{height:88dvh;max-height:92dvh;padding:15px}
  .announcement-workspace{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .announcement-categories{flex-direction:row;gap:5px;padding:7px;overflow-x:auto;border-right:0;border-bottom:1px solid #E6DCD4}
  .announcement-category{flex:0 0 auto;width:auto;padding:8px 10px;white-space:nowrap}
  .announcement-feed{padding:15px 13px}
  .announcement-item{padding-left:27px}
  .model-key-row{grid-template-columns:1fr;gap:4px}
  .media-preview-dialog{width:100vw;height:100dvh;max-height:none;border-radius:0}
  .media-preview-shell{border:0;border-radius:0}
  .media-preview-content{padding:8px}
  .media-preview-head{padding-left:12px;padding-right:9px}
  .media-preview-tools{margin:0 7px}
  .settings-toast{top:12px;max-width:calc(100% - 60px)}
  .works-dialog{width:100vw;height:100dvh;max-height:none;border-radius:0}
  .works-head{padding:16px 15px 12px}
  .works-toolbar{align-items:flex-start;flex-direction:column;padding:10px 14px;gap:9px}
  .works-tabs{width:100%}.works-tabs button{flex:1;padding-left:8px;padding-right:8px}
  .works-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:12px 12px 24px}
  .work-card-media{height:145px;flex-basis:145px}
  .work-card-info{display:block}.work-card-info>span{display:block;margin-top:5px}
  .works-footer{padding:11px 14px}
}
@media (max-width:400px){
  .params label{font-size:11px}
  .model-control,.size-control{font-size:11px}
  .welcome h1{font-size:19px}
  .chips{gap:8px}
  .chip{padding:8px 12px;font-size:12px}
  .model-option-grid{grid-template-columns:1fr}
  .works-grid{grid-template-columns:1fr}
  .work-card-media{height:210px;flex-basis:210px}
}
@media (prefers-reduced-motion: reduce){
  .track > div{animation:none} main{scroll-behavior:auto} .cursor-blink::after{animation:none}
  .toast{transition:none}.picker-chevron{transition:none}
}

/* ───── v20 中性色工作台（已停用，保留便于后续切换）
body{
  background:
    radial-gradient(circle at 72% -10%,rgba(217,106,50,.07),transparent 30%),
    linear-gradient(180deg,#F7F7F8 0%,#F2F3F5 100%);
  letter-spacing:.005em
}
aside{
  background:rgba(247,247,248,.94);border-right:1px solid #E0E1E3;
  box-shadow:inset -1px 0 rgba(255,255,255,.6);backdrop-filter:blur(16px)
}
.side-top{padding:16px 14px 10px}
.new-chat{
  background:#25272B;color:#fff;border:1px solid #25272B;border-radius:13px;
  box-shadow:0 7px 18px rgba(31,33,37,.14);font-weight:650;letter-spacing:.01em
}
.new-chat:hover{background:#101114;border-color:#101114;transform:translateY(-1px)}
.conv{position:relative;margin-bottom:4px;padding:10px 11px;border:1px solid transparent;border-radius:12px;color:#4C4F54}
.conv:hover{background:#ECEDEF;color:#202124}
.conv.active{background:#fff;border-color:#E1E2E4;color:#202124;box-shadow:0 5px 16px rgba(24,26,29,.06)}
.conv.active::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.side-foot{border-color:#E0E1E3;color:#777A7F}
.side-foot .greet{font-size:11px;letter-spacing:.04em;text-transform:uppercase}
header{padding:14px 20px 8px}
#sideBtn{background:rgba(255,255,255,.82);border-color:#DFE1E4;color:#4D5055;border-radius:12px;box-shadow:0 3px 12px rgba(25,27,31,.05)}
#sideBtn:hover{background:#fff;color:#202124;border-color:#CDD0D4}
.logo{gap:10px;color:#25272B}
.logo .slice{width:30px;height:30px;border:0;background:conic-gradient(#2A2C30 0 72%,var(--brand) 72% 100%);box-shadow:0 5px 12px rgba(31,33,37,.13)}
.logo .slice::after{inset:36%;background:#fff}
.logo-copy{display:flex;flex-direction:column;line-height:1.1}
.logo-copy strong{font-size:16px;letter-spacing:.01em}
.logo-copy small{margin-top:4px;color:#8A8D92;font-size:9px;font-weight:600;letter-spacing:.12em}
.header-badge{display:flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #E0E2E5;border-radius:999px;background:rgba(255,255,255,.72);color:#72757A;font-size:11px;font-weight:650}
.header-badge span{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(23,118,83,.1)}
.chat{max-width:900px;padding:32px 24px 24px;gap:22px}
.welcome{padding:32px 18px 22px}
.welcome-kicker{display:inline-flex;align-items:center;gap:7px;margin-bottom:18px;padding:6px 11px;border:1px solid #DFE1E4;border-radius:999px;background:rgba(255,255,255,.7);color:#74777C;font-size:11px;font-weight:700;letter-spacing:.08em}
.welcome-kicker span{width:6px;height:6px;border-radius:50%;background:var(--brand)}
.welcome .slice-big{width:62px;height:62px;margin-bottom:22px;border:0;background:conic-gradient(#292B2F 0 72%,var(--brand) 72% 100%);box-shadow:0 16px 32px rgba(30,32,36,.16)}
.welcome .slice-big::after{inset:37%;background:#fff}
.welcome h1{margin-bottom:10px;color:#222428;font-size:34px;line-height:1.25;letter-spacing:-.035em}
.welcome-greeting{color:#222428}
.welcome p{max-width:52ch;margin-bottom:26px;color:#777A80;font-size:14px}
.chips{gap:9px}
.chip{background:rgba(255,255,255,.8);border-color:#DFE1E4;color:#4D5055;padding:9px 14px;box-shadow:0 3px 10px rgba(29,31,35,.035);transition:transform .16s ease,border-color .16s ease,background .16s ease}
.chip:hover{background:#fff;border-color:#C9CCD0;color:#202124;transform:translateY(-1px)}
.msg{gap:11px}
.avatar{width:32px;height:32px;font-size:12px}
.avatar.orange{border:2px solid #303236;background:conic-gradient(var(--brand) var(--p,100%),#E3E4E6 0)}
.avatar.orange.is-complete{background:var(--brand)}
.bubble{border-radius:18px;box-shadow:0 7px 22px rgba(27,29,33,.055)}
.msg.user .bubble{background:#292B2F;color:#F8F8F8;border-color:#292B2F;border-bottom-right-radius:6px}
.msg.ai .bubble{background:rgba(255,255,255,.92);border-color:#E1E3E6;border-bottom-left-radius:6px}
.msg-model{color:#AEB0B4;border-top-color:rgba(255,255,255,.14)}
.md h1,.md h2,.md h3{color:#25272B}
.md code{background:#F1F2F3;border-color:#E0E2E4;color:#383B40}
.md pre{background:#202225;color:#F2F2F2}
.btn{border-color:#DDE0E3;border-radius:11px;color:#45484D;box-shadow:0 2px 7px rgba(27,29,33,.03)}
.btn.primary{background:#292B2F;border-color:#292B2F;color:#fff}
.btn:hover{filter:none;background:#F5F5F6}
.btn.primary:hover{background:#151619}
.composer-wrap{background:linear-gradient(180deg,transparent,rgba(243,244,246,.92) 24%,#F3F4F6 58%);padding:10px 20px calc(18px + env(safe-area-inset-bottom,0px))}
.composer{max-width:900px;padding:14px 16px;background:rgba(255,255,255,.94);border-color:#DCDDDF;border-radius:24px;box-shadow:0 18px 50px rgba(28,30,34,.12),0 2px 8px rgba(28,30,34,.04);backdrop-filter:blur(18px)}
.toggle-params{background:#F3F4F5;border-color:#E0E2E4;color:#62656A;font-weight:650}
.toggle-params:hover{background:#E9EAEC;color:#303237}
.model-tabs{background:#F1F2F3;border-color:#E1E2E4}
.model-tabs button{color:#777A7F}
.model-tabs button:hover{background:#fff;color:#292B2F}
.model-tabs button.active{background:#2B2D31;color:#fff;box-shadow:0 3px 9px rgba(31,33,37,.16)}
.params select,.params input[type=number],.model-picker-btn,.size-picker-btn,.compact-picker-btn{background:#FAFAFA;border-color:#E1E3E5;color:#383B40}
.model-picker-btn:hover,.size-picker-btn:hover,.compact-picker-btn:hover{background:#fff;border-color:#CBCDD1}
.model-menu,.size-menu,.compact-menu{background:#fff;border-color:#DCDEE1;box-shadow:0 22px 55px rgba(25,27,31,.15)}
.model-option:hover,.model-option:focus-visible,.size-option:hover,.size-option:focus-visible,.compact-option:hover{background:#F2F3F4}
.model-option.selected,.size-option.selected,.compact-option.selected{background:#ECEDEF;color:#202124}
.option-tag{border-color:#D8DADD;color:#62656A;background:#fff}
.picker-close{background:#EFF0F1;color:#55585D}
.picker-close:hover{background:#E3E4E6}
.model-guide{background:#F5F5F5;border-color:#E4E5E6;color:#6C6F74}
.model-guide .model-tier{background:#2B2D31;border-color:#2B2D31;color:#fff}
.input-row{gap:11px;align-items:center;padding-top:11px;border-top:1px solid #ECEDEF}
textarea#prompt{color:#27292D;padding:6px 3px}
textarea#prompt::placeholder{color:#A0A3A8}
#attachBtn{color:#707379}
#attachBtn:hover{color:#202124}
#sendBtn{border-radius:14px;background:linear-gradient(135deg,#E17B49,#C85B28);border-color:#C85B28;box-shadow:0 7px 17px rgba(184,81,37,.22)}
#sendBtn:hover{box-shadow:0 9px 21px rgba(184,81,37,.28)}
#sendBtn.stop{background:linear-gradient(135deg,#D66762,#B93C37);border-color:#B93C37}
.attach-strip .th{padding:3px;border:1px solid #E0E2E4;border-radius:13px;background:#F6F6F7}
.attach-strip img{border:0;border-radius:9px}
.foot-note{color:#8B8E93;font-size:11px}
#settingsDlg{border-color:#DCDDDF;background:#fff;box-shadow:0 22px 65px rgba(25,27,31,.18)}
.toast{background:#25272B;border:1px solid rgba(255,255,255,.08)}

@media (max-width:760px){
  header{padding:10px 12px 8px 56px}
  .header-badge{display:none}
  .logo-copy small{display:none}
  .chat{padding:20px 12px 14px}
  .welcome{padding:22px 8px 14px}
  .welcome h1{font-size:27px}
  .welcome .slice-big{width:54px;height:54px}
  .composer-wrap{padding:7px 8px calc(10px + env(safe-area-inset-bottom,0px))}
  .composer{padding:11px 12px;border-radius:20px}
  .foot-note{padding:0 12px;font-size:10px;line-height:1.45}
}
@media (max-width:400px){
  .welcome h1{font-size:24px}
  .welcome-kicker{margin-bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  .new-chat,.conv,.chip,.round-btn{transition:none!important}
  .new-chat:hover,.chip:hover,.round-btn:hover{transform:none}
}
*/