:root{
  --bg:#ffffff;--sidebar:#f7f7f8;--text:#202123;--muted:#6b6c70;--soft:#ececf1;
  --hover:#ececf1;--active:#e7e7eb;--line:#e5e5e8;--dark:#202123;--green:#19c37d;
  --shadow:0 6px 24px rgba(0,0,0,.08)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg)}
button,textarea{font:inherit}
button{cursor:pointer}
.app-shell{min-height:100vh;display:grid;grid-template-columns:268px 1fr}
.sidebar{height:100vh;position:sticky;top:0;background:var(--sidebar);border-right:1px solid var(--line);padding:14px 12px;display:flex;flex-direction:column;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:7px 8px 16px}
.brand-mark,.logo-orb{display:grid;place-items:center;background:var(--dark);color:#fff;font-weight:700}
.brand-mark{width:34px;height:34px;border-radius:10px;font-size:15px}
.brand-copy strong,.brand-copy span{display:block}
.brand-copy strong{font-size:14px}
.brand-copy span{font-size:11px;color:var(--muted);margin-top:3px}
.new-chat{width:100%;height:42px;background:#fff;border:1px solid var(--line);border-radius:10px;text-align:left;padding:0 12px;margin-bottom:12px;color:var(--text)}
.new-chat:hover{background:#fafafa}
.nav{display:grid;gap:2px}
.nav-group{display:grid}
.nav-item,.bottom-item{width:100%;border:0;background:transparent;color:#343541;border-radius:9px;display:grid;align-items:center;text-align:left}
.nav-item{grid-template-columns:26px 1fr 18px;height:40px;padding:0 9px}
.nav-item span{font-size:15px;color:#62636a}
.nav-item b{font-size:13px;font-weight:500}
.nav-item i{font-style:normal;font-size:12px;color:#8a8b91}
.nav-item:hover,.nav-item.active,.bottom-item:hover{background:var(--hover)}
.subnav{display:none;padding:2px 0 5px 35px}
.subnav.open{display:grid}
.subnav button{height:31px;padding:0 9px;border:0;background:transparent;border-radius:7px;text-align:left;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subnav button:hover{background:var(--hover);color:var(--text)}
.sidebar-bottom{margin-top:auto;padding-top:18px}
.bottom-item{grid-template-columns:27px 1fr;height:38px;padding:0 9px;font-size:13px}
.user-card{display:flex;align-items:center;gap:9px;margin-top:8px;padding:10px 8px;border-top:1px solid var(--line)}
.user-avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#d9d9df;font-size:12px}
.user-card strong,.user-card span{display:block}
.user-card strong{font-size:12px}.user-card span{font-size:10px;color:var(--muted);margin-top:2px}

.workspace{min-width:0;min-height:100vh;display:flex;flex-direction:column}
.workspace-top{height:58px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:rgba(255,255,255,.94);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}
.workspace-name{font-size:14px;font-weight:600}
.workspace-status{font-size:10px;color:var(--muted);margin-top:3px}.workspace-status span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:4px}
.context-btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 10px;color:var(--muted);font-size:11px}

.conversation{min-height:calc(100vh - 58px);display:flex;flex-direction:column;position:relative}
.empty-state{margin:auto auto 0;max-width:680px;width:calc(100% - 40px);text-align:center;padding:12vh 20px 30px}
.logo-orb{width:43px;height:43px;border-radius:13px;margin:0 auto 20px}
.empty-state h1{font-size:29px;letter-spacing:-.02em;margin:0 0 12px;font-weight:600}
.empty-state p{margin:0 auto;color:var(--muted);font-size:13px;line-height:1.8;max-width:620px}
.chat-log{width:100%;max-width:820px;margin:28px auto 0;padding:0 20px 190px}
.chat-log:empty{display:none}
.message{display:flex;gap:12px;margin-bottom:28px}
.message.user{justify-content:flex-end}
.message .avatar{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--dark);color:#fff}
.message.user .avatar{display:none}
.message .bubble{max-width:78%;font-size:14px;line-height:1.75;white-space:pre-wrap}
.message.user .bubble{background:#f4f4f4;border-radius:18px;padding:9px 14px}
.message.ai .bubble{padding-top:2px}
.answer-grid{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.answer-row{display:grid;grid-template-columns:96px 1fr;border-top:1px solid var(--line);font-size:12px}
.answer-row:first-child{border-top:0}.answer-row b,.answer-row span{padding:9px 10px}.answer-row b{background:#fafafa;font-weight:500}.answer-row span{color:var(--muted)}

.composer-wrap{position:fixed;left:268px;right:0;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 20%,#fff 100%);padding:26px 20px 14px;z-index:8}
.composer{max-width:760px;margin:0 auto;background:#fff;border:1px solid #d8d8dc;border-radius:18px;padding:12px 12px 9px;box-shadow:var(--shadow)}
.composer textarea{border:0;outline:0;resize:none;width:100%;max-height:180px;min-height:28px;padding:2px 4px;color:var(--text);font-size:14px;line-height:1.6;background:transparent}
.composer textarea::placeholder{color:#9b9ca1}
.composer-bar{display:flex;align-items:center;margin-top:7px}
.composer-tools{display:flex;gap:5px}.composer-tools button{width:31px;height:31px;border:1px solid var(--line);background:#fff;border-radius:50%;color:#55565d}
.composer-tools button:hover{background:var(--hover)}
.composer-mode{margin-left:8px;font-size:10px;color:#8a8b91;border:1px solid var(--line);border-radius:999px;padding:5px 8px}
.send{margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;background:var(--dark);color:#fff;font-size:18px;line-height:1}
.composer-note{max-width:760px;margin:7px auto 0;text-align:center;font-size:10px;color:#9a9ba1}

@media(max-width:820px){
  .app-shell{grid-template-columns:72px 1fr}
  .sidebar{padding:12px 8px}.brand{justify-content:center;padding:5px 0 14px}.brand-copy,.nav-item b,.nav-item i,.new-chat{display:none}
  .nav-item{grid-template-columns:1fr;height:42px;text-align:center}.nav-item span{font-size:17px}.subnav{display:none!important}
  .bottom-item{grid-template-columns:1fr;text-align:center;font-size:0}.bottom-item span{font-size:16px}
  .user-card{justify-content:center}.user-card>div:last-child{display:none}
  .composer-wrap{left:72px}
}
@media(max-width:560px){
  .app-shell{display:block}.sidebar{display:none}.composer-wrap{left:0}
  .workspace-top{padding:0 14px}.empty-state{padding-top:16vh}
  .empty-state h1{font-size:25px}.context-btn{display:none}.chat-log{padding-left:14px;padding-right:14px}
}

/* Appearance controls remain available on mobile. */
:root{color-scheme:light;--surface:#fff;--bubble:#f4f4f4;--avatar:#d9d9df;--header:rgba(255,255,255,.94);--fade:rgba(255,255,255,0);--contrast:#fff;--secondary:#fafafa}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#212121;--sidebar:#171717;--surface:#2b2b2b;--text:#ececec;--muted:#b4b4b4;
  --soft:#333;--hover:#333;--active:#3b3b3b;--line:#454545;--dark:#ececec;
  --shadow:0 6px 24px rgba(0,0,0,.25);--bubble:#303030;--avatar:#444;
  --header:rgba(33,33,33,.94);--fade:rgba(33,33,33,0);--contrast:#171717;--secondary:#292929
}
.header-actions{display:flex;align-items:center;gap:12px}
.theme-control{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);white-space:nowrap}
.theme-control select{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px;min-height:32px;cursor:pointer}
.theme-control select:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.brand-mark,.logo-orb,.message .avatar,.send{color:var(--contrast)}
.new-chat,.context-btn,.composer,.composer-tools button{background:var(--surface)}
.new-chat:hover,.answer-row b{background:var(--secondary)}
.nav-item,.bottom-item,.composer-tools button{color:var(--text)}
.nav-item span,.nav-item i,.composer-mode,.composer-note{color:var(--muted)}
.user-avatar{background:var(--avatar)}
.workspace-top{background:var(--header)}
.message.user .bubble{background:var(--bubble)}
.composer-wrap{background:linear-gradient(180deg,var(--fade),var(--bg) 20%,var(--bg) 100%)}
.composer{border-color:var(--line)}
.composer textarea::placeholder{color:var(--muted)}
@media(max-width:560px){.header-actions{gap:6px}.theme-control{gap:4px}}

#aiStatus{font-weight:400}button:disabled{opacity:.45;cursor:not-allowed}.retry-button{margin-top:10px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;cursor:pointer}dialog{max-width:min(460px,85vw);padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--bg,#fff);color:var(--text,#222)}dialog::backdrop{background:#0006}dialog p{line-height:1.7}#closeContext{padding:8px 16px;border-radius:8px;cursor:pointer}

.model-mode-control select{font:inherit;font-size:12px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:6px;max-width:175px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:480px){.composer-mode{display:none}.model-mode-control select{max-width:160px}}