:root { --bg:#101419; --panel:#191d21; --surface:#20252a; --surface2:#26292d; --sidebar:#0e1216; --text:#ece3d6; --muted:#a9a49d; --dim:#7d817f; --line:#3a3935; --line-accent:rgba(194,158,108,.32); --gold:#c3a578; --gold-hi:#ecd0a4; --gold-ink:#20180f; --warm:rgba(160,100,53,.16); --good:#7abf9d; --bad:#cf9586; --shadow:0 22px 56px rgba(0,0,0,.22) }
[data-theme="ivory"] { --bg:#f5f0e8; --panel:#fffbf5; --surface:#f2eade; --surface2:#e9dfd2; --sidebar:#ede4d8; --text:#3d372f; --muted:#766d61; --dim:#918676; --line:#d9cbb8; --line-accent:rgba(149,110,67,.28); --gold:#9b764a; --gold-hi:#80603b; --gold-ink:#fffaf0; --warm:rgba(198,161,113,.16); --good:#397f5f; --bad:#ad594c; --shadow:0 16px 45px rgba(84,70,52,.12) }
* { box-sizing:border-box }
html,body { margin:0; min-height:100%; font:14px/1.5 'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--text) }
body { background:radial-gradient(ellipse 1200px 700px at 70% -280px,var(--warm),transparent 72%), var(--bg); }
button, input,textarea,select { font:inherit }
button { cursor:pointer; color:inherit }
button:disabled { opacity:.42; cursor:not-allowed }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible { outline:2px solid var(--gold); outline-offset:3px }
button:hover:not(:disabled) { filter:brightness(1.065) }
a { color:inherit }
h1,h2,h3,p { margin:0 }
.serif { font-family:Georgia,'Times New Roman',serif; font-weight:400 }
.app-shell { display:flex; min-height:100vh }
.sidebar { width:262px; flex-shrink:0; display:flex; flex-direction:column; position:sticky; height:100vh; top:0; background: radial-gradient(ellipse at -100px 94%,rgba(184,139,82,.11), transparent 70%),var(--sidebar); border-right:1px solid var(--line-accent); }
.brand { padding:36px 26px 25px; border-bottom:1px solid var(--line-accent); min-height:133px }
.brand-name { font:normal 44px/1 Georgia,'Times New Roman',serif; color:var(--gold-hi); letter-spacing:.19em; white-space:nowrap }
.brand-name span { font:normal 11px 'Segoe UI',sans-serif; margin-left:-7px; vertical-align:top; opacity:.65 }
.brand-desc { font-size:9px; letter-spacing:.21em; margin-top:12px; color:var(--muted); white-space:nowrap }
.primary-nav { padding:19px 12px; display:flex; flex-direction:column; gap:5px }
.nav-btn { width:100%; background:none; border:1px solid transparent; border-radius:9px; display:flex; gap:14px; align-items:center; text-align:left; padding:11px 15px; color:var(--muted); transition:background .15s; }
.nav-btn svg { width:19px; height:19px; flex:none; stroke:var(--gold) }
.nav-btn:hover,.nav-btn.active { background:linear-gradient(95deg,var(--warm),transparent); color:var(--text) }
.nav-btn.active { border-color:var(--line-accent); box-shadow:inset 2px 0 0 var(--gold) }
.nav-label { flex:1 }
.nav-group { margin-top:10px; padding:15px 16px 6px; color:var(--dim); font-size:10px; letter-spacing:.18em }
.subnav { margin:2px 0 8px 32px; display:grid; gap:3px }
.subnav .nav-btn { padding:9px 10px; font-size:12px }
.subnav .nav-btn svg { width:16px;height:16px }
.sidebar-bottom { margin-top:auto; padding:22px 25px }
.sidebar-motto { border-left:2px solid var(--gold); padding-left:12px; color:var(--gold); font-size:12px;letter-spacing:.12em; line-height:1.9 }
.sidebar-foot { font-size:9px; color:var(--dim); border-top:1px solid var(--line); margin-top:24px; padding-top:16px; letter-spacing:.09em }
.sidebar-foot span { float:right }
.main { min-width:0; flex:1; padding:0 30px 28px; max-width:1900px }
.topbar { min-height:81px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px }
.top-left,.top-actions { display:flex; align-items:center; gap:16px; min-width:0 }
.crumb { color:var(--text); font-size:13px; white-space:nowrap }
.crumb span { color:var(--gold); margin:0 8px }
.demo-chip { border:1px solid var(--line-accent); border-radius:99px; padding:4px 10px; color:var(--gold); font-size:10px;letter-spacing:.035em;white-space:nowrap }
.search-box { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:0 10px; height:37px;display:flex; align-items:center; gap:8px; min-width:150px; width:210px }
.search-lens { font-size:23px;color:var(--gold) }
.search-box input { background:none; border:0;outline:none; color:var(--text); min-width:0; width:100%; font-size:12px }
.icon-button { border:1px solid var(--line); border-radius:9px; background:var(--panel); width:37px;height:37px; flex:none;color:var(--gold);font-size:20px;display:grid;place-items:center }
.avatar { height:37px;width:37px; flex:none; border:1px solid var(--gold);border-radius:50%; display:grid;place-items:center;font-family:Georgia,serif;color:var(--gold) }
.menu-toggle { display:none }
.page { padding-top:29px; }
.page-header {display:flex;justify-content:space-between; align-items:flex-end; gap:18px;margin-bottom:26px}
.eyebrow {font-size:10px;letter-spacing:.22em;color:var(--gold);margin-bottom:8px;text-transform:uppercase}
.page-title {font:normal clamp(34px,3.8vw,58px)/1.13 Georgia,'Times New Roman',serif; color:var(--gold-hi);letter-spacing:.006em}
.page-subtitle {color:var(--muted);margin-top:8px;max-width:640px;font-size:13px}
.header-tools {display:flex;gap:10px;flex-wrap:wrap}
.btn { background:var(--panel); border:1px solid var(--line-accent); padding:10px 15px; border-radius:9px; color:var(--text);font-size:12px;display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:39px;white-space:nowrap }
.btn.primary { background:linear-gradient(120deg,var(--gold),var(--gold-hi)); color:var(--gold-ink);border-color:transparent;font-weight:600 }
.btn.plain { background:none; border:1px solid var(--line) }
.btn.sm {padding:7px 11px;min-height:32px}
.panel { border:1px solid var(--line-accent);border-radius:12px;background:linear-gradient(135deg,var(--warm),transparent 40%),var(--panel); box-shadow:var(--shadow);padding:22px;min-width:0 }
.panel-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px }
.panel-title { font:normal 21px Georgia,serif;color:var(--gold-hi) }
.panel-desc {font-size:12px;color:var(--muted)}
.muted {color:var(--muted)}
.hint {font-size:11px;color:var(--dim)}
.two-col {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.85fr);gap:16px}
.grid {display:grid;gap:16px}
.grid.cols2 {grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols3 {grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols4 {grid-template-columns:repeat(4,minmax(0,1fr))}
.metric {min-height:148px; display:flex; flex-direction:column;justify-content:space-between}
.metric-label {font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.metric-number {font:normal 38px Georgia,serif; color:var(--gold-hi)}
.stat-caption {font-size:11px;color:var(--dim)}
.lined-list { display:flex; flex-direction:column; gap:0 }
.list-row {padding:14px 1px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.list-row:last-child{border-bottom:0}
.list-row strong {font-weight:550}
.list-row .meta {font-size:11px;color:var(--muted);margin-top:3px}
.inline-link {background:none;border:none;color:var(--gold);padding:3px 0;font-size:12px}
.status {display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}
.status::before {content:'';width:7px;height:7px;border-radius:50%;background:var(--dim)}
.status.good::before{background:var(--good)}
.status.warn::before{background:var(--gold)}
.status.bad::before{background:var(--bad)}
.status.demo::before{background:var(--dim)}
.tiny-label {font-size:10px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.empty {border:1px dashed var(--line);border-radius:10px;padding:28px;text-align:center;color:var(--muted);line-height:1.8}
.notice {padding:13px 17px;border:1px solid var(--line-accent);background:var(--warm);border-radius:10px;margin-bottom:17px;font-size:12px;color:var(--muted)}
.notice strong {color:var(--gold-hi)}
.tags {display:flex;flex-wrap:wrap;gap:7px}
.tag {display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:99px;border:1px solid var(--line);font-size:10px;color:var(--muted)}
.card {border:1px solid var(--line);padding:17px;border-radius:11px;background:var(--surface);cursor:pointer;transition:border-color .15s,transform .15s;text-align:left;width:100%; min-height:139px}
.card:hover {border-color:var(--gold);transform:translateY(-1px)}
.card h3 {font-size:15px;font-weight:550;margin:9px 0 8px;color:var(--text)}
.card .small {color:var(--muted);font-size:12px}
.card-foot {display:flex;align-items:center;justify-content:space-between;margin-top:14px;color:var(--gold);font-size:11px}
.chat-layout {display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px;min-height:min(730px,calc(100vh - 215px))}
.chat-pane {display:flex;flex-direction:column;min-height:580px}
.chat-head {border-bottom:1px solid var(--line);padding-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.chat-messages {flex:1;min-height:240px;max-height:calc(100vh - 380px);overflow:auto;padding:20px 4px;display:flex;flex-direction:column;gap:16px}
.message {max-width:85%;display:flex;flex-direction:column;gap:5px;align-self:flex-start}
.message.user {align-self:flex-end;align-items:flex-end}
.bubble {padding:14px 17px;border-radius:13px;border:1px solid var(--line);background:var(--surface);font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.message.user .bubble {background:var(--warm);border-color:var(--line-accent)}
.message-author {font-size:10px;color:var(--gold)}
.composer {display:flex;gap:12px;align-items:flex-end;padding-top:14px;border-top:1px solid var(--line)}
.composer textarea {background:var(--surface);border:1px solid var(--line);border-radius:9px;resize:vertical;min-height:50px;max-height:160px;color:var(--text);padding:13px 14px;flex:1;line-height:1.5;outline:none}
.composer button {min-height:49px}
.chat-aside {display:flex;flex-direction:column;gap:16px}
.chat-aside .panel {box-shadow:none}
.chat-aside .big {color:var(--gold-hi);font:normal 24px Georgia,serif}
.prompt-chips {display:grid;gap:8px}
.prompt-chips .btn {white-space:normal;text-align:left;justify-content:start}
.field {display:grid;gap:6px;color:var(--muted);font-size:12px;margin-bottom:14px}
.field input,.field textarea,.field select {background:var(--surface);border:1px solid var(--line);padding:10px 12px;border-radius:8px;color:var(--text);min-width:0;width:100%;outline:none}
.field textarea {min-height:95px;resize:vertical}
.detail-head {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.row {display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.kv {display:grid;grid-template-columns:180px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.kv:last-child {border:0}
.kv span:first-child {color:var(--muted);font-size:12px}
.progress {background:var(--surface2);height:7px;border-radius:99px;overflow:hidden}
.progress i {display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi));border-radius:inherit}
.project-item {padding:17px;background:var(--surface);border:1px solid var(--line);border-radius:9px}
@media (max-width:1220px) { .chat-layout{grid-template-columns:minmax(0,1fr)}.chat-aside{display:none}.grid.cols4{grid-template-columns:repeat(2,1fr)} .demo-chip{display:none} }
@media (max-width:950px){ .sidebar{position:fixed;z-index:22;left:0;top:0;bottom:0;transform:translateX(-102%);transition:transform .22s}.sidebar.open{transform:translateX(0)} .mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:21}.mobile-overlay:not([hidden]){display:block}.menu-toggle{display:grid}.main{padding:0 18px 24px}.two-col{grid-template-columns:1fr}.grid.cols3{grid-template-columns:repeat(2,minmax(0,1fr))}.chat-layout{min-height:unset}.chat-pane{min-height:560px} }
@media (max-width:590px){.topbar{min-height:67px}.top-actions{gap:7px}.search-box{width:38px;min-width:38px;padding:0;justify-content:center}.search-box input{display:none}.top-left{gap:9px}.crumb{font-size:11px}.avatar{display:none}.page{padding-top:20px}.page-header{align-items:flex-start;flex-direction:column;gap:13px}.page-title{font-size:38px}.grid.cols3,.grid.cols4,.grid.cols2{grid-template-columns:1fr}.panel{padding:17px}.chat-pane{min-height:calc(100dvh - 185px)}.chat-messages{max-height:calc(100dvh - 360px)}.message{max-width:96%}.kv{grid-template-columns:1fr;gap:2px}.search-box{display:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Completion layer: UX shell 0.2 */
:root{color-scheme:dark}
[data-theme="ivory"]{color-scheme:light}
[hidden]{display:none!important}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.nav-btn{font-weight:450;min-height:42px}
.nav-btn.active{background:linear-gradient(102deg,rgba(173,129,79,.21),rgba(173,129,79,.045) 80%)}
.nav-btn svg{color:var(--gold)}
.brand-name{letter-spacing:.16em}
.sidebar{background: radial-gradient(ellipse 200px 600px at -85px 95%,rgba(168,118,64,.11),transparent),repeating-linear-gradient(137deg,transparent 0px,transparent 63px,rgba(201,158,100,.018) 64px,transparent 65px),var(--sidebar)}
.sidebar:after{content:'';pointer-events:none;position:absolute;right:0;top:0;width:1px;height:100%;background:linear-gradient(180deg,transparent,var(--gold),transparent);opacity:.28}
.page{max-width:1500px;margin:auto;padding-bottom:30px}
.panel{box-shadow:0 8px 30px rgba(0,0,0,.06);background:linear-gradient(135deg,var(--warm),transparent 29%),var(--panel)}
.panel-title{font-size:23px;line-height:1.2}
.panel-heading{align-items:center}
.panel-action{margin-top:12px}
.topbar{gap:20px}
.demo-chip{background:var(--warm)}
.metric.clickable{cursor:pointer;transition:transform .18s,border-color .18s}
.metric.clickable:hover,.metric.clickable:focus-visible{border-color:var(--gold);transform:translateY(-2px)}
.metric-number{font-size:43px}
.panel h3{font-size:14px}
.main-panels{margin-top:16px;align-items:start}
.grow{flex:1;min-width:0}
.list-row{min-width:0;line-height:1.4}
.card-top{display:flex;align-items:center;justify-content:space-between;color:var(--gold)}
.card .small{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:35px}
.card-foot{display:flex;justify-content:space-between;gap:8px}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:175px;justify-content:center}
.empty strong{font:normal 23px Georgia,serif;color:var(--text)}
.empty p{max-width:440px}
.empty svg{color:var(--gold)}
.empty-action{margin-top:7px}
.notice{line-height:1.65}
.mini-notice{margin-top:16px;margin-bottom:2px}
.panel .muted{line-height:1.65}
.panel .small-label{color:var(--gold);font-size:12px;margin:6px 0 12px}
.panel.node-card{min-height:220px}
.node-icon{color:var(--gold);margin-bottom:18px}
.node-status{margin-top:20px}
.node-card .muted{min-height:60px}
.space-top{margin-top:18px}
.filter-field{min-width:230px;margin:0}
.action-row{margin-top:18px}
.entry-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;font-size:14px}
.chat-messages>.empty{margin:auto;border:0}
.chat-pane{min-height:630px}
.chat-layout{min-height:640px}
.message-author{margin:0 5px}
.bubble{font-size:14px}
.persona-mark{width:74px;height:74px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-accent);font:normal 45px Georgia,serif;color:var(--gold-hi);margin-bottom:15px;background:linear-gradient(135deg,var(--warm),var(--surface))}
.chat-aside .notice{margin-top:14px}
.prompt-chips{margin-top:14px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.form-grid>.field{min-width:0}
.dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.73);z-index:40;display:flex;justify-content:center;align-items:center;padding:18px;backdrop-filter:blur(3px)}
.dialog{background:var(--panel);border:1px solid var(--line-accent);border-radius:13px;width:min(600px,100%);max-height:min(94dvh,850px);display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,.3)}
.dialog-header{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.dialog-header .panel-title{font-size:27px}
.dialog form{display:flex;flex-direction:column;overflow:hidden}
.dialog-body{padding:20px;overflow-y:auto;min-height:50px;}
.dialog-footer{border-top:1px solid var(--line);padding:14px 20px;display:flex;justify-content:end;gap:10px}
.toast{position:fixed;right:22px;bottom:24px;z-index:50;background:var(--surface2);border:1px solid var(--gold);border-radius:9px;box-shadow:var(--shadow);padding:13px 19px;max-width:min(490px,92vw);color:var(--text);line-height:1.5}
.toast.error{border-color:var(--bad)}
.theme-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.theme-option{padding:12px;border-radius:9px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;text-align:left;gap:7px}
.theme-option.selected{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.theme-option small{color:var(--muted)}
.swatch{display:block;width:100%;height:68px;border-radius:6px}
.noir-swatch{background:linear-gradient(115deg,#0f1318 40%,#23282a 40% 70%,#c1a174 71% 76%,#e7ded1 77%)}
.ivory-swatch{background:linear-gradient(115deg,#f5f0e7 40%,#fffaf4 40% 70%,#a88656 71% 76%,#3e362d 77%)}
.subtle-divider{height:1px;background:var(--line);margin:22px 0}
.stack-btns{display:flex;flex-direction:column;gap:9px;margin-top:18px;align-items:start}
.stack-btns .btn{width:100%;justify-content:flex-start}
.danger{color:var(--bad);border-color:var(--bad)}
@media(max-width:1220px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.chat-messages{max-height:55vh}}
@media(max-width:950px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.main-panels{grid-template-columns:1fr}}
@media(max-width:590px){.main{padding:0 14px 18px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}.metric{min-height:128px;padding:14px}.metric-number{font-size:37px}.metric-label{font-size:10px}.page-title{font-size:37px}.page-header{margin-bottom:20px}.panel{padding:15px}.panel-title{font-size:22px}.chat-pane{min-height:calc(100dvh - 192px)}.chat-messages{max-height:calc(100dvh - 340px)}.form-grid,.theme-options{grid-template-columns:1fr}.filter-field{min-width:0;width:100%}.dialog-backdrop{padding:8px}.dialog-body{padding:14px}.sidebar{width:min(290px,86vw)}.topbar{gap:5px}.crumb{overflow:hidden;text-overflow:ellipsis}.top-actions .icon-button{width:34px;height:34px}.row.action-row{flex-direction:column;align-items:stretch}.chat-head{align-items:start;flex-direction:column}.composer{gap:7px}.composer textarea{min-height:49px}.composer button span{display:none}.composer button{min-width:48px;padding:10px}}


/* ZEON 0.4 — cohesive NOIR/IVORY layout. Typography designed for 1648x928 PC. */
:root { --bg:#0e1217; --panel:#171b20; --surface:#20252a; --surface2:#282a2c; --sidebar:#0c1014; --text:#eee6d9; --muted:#c1b7ab; --dim:#99958e; --line:#383c40; --line-accent:rgba(194,158,108,.23); --gold:#c5a678; --gold-hi:#edd2a7; --warm:rgba(168,125,74,.065); }
[data-theme="ivory"]{--bg:#f5f0e8;--panel:#fffbf5;--surface:#f2eade;--surface2:#eadfce;--sidebar:#ece2d5;--text:#3c332a;--muted:#695f52;--dim:#817464;--line:#d9cdbd;--line-accent:rgba(149,110,67,.3);--gold:#917044;--gold-hi:#795936;--warm:rgba(198,161,113,.085)}
html,body {font-size:16px;line-height:1.55}
.app-shell{min-height:100dvh}
.sidebar{width:245px}
.brand{padding:28px 24px 21px;min-height:130px}
.brand-name{font-size:43px}
.brand-desc{font-size:10px;letter-spacing:.1em}
.primary-nav{gap:5px;padding:15px 10px}
.nav-btn{font-size:16px;min-height:46px;padding:10px 12px;gap:13px}
.subnav .nav-btn{font-size:14px;min-height:39px}
.nav-group{font-size:12px}
.sidebar-foot{font-size:10px}
.main{padding:0 29px 28px;max-width:none}
.topbar{min-height:68px}
.crumb{font-size:14px}
.demo-chip{font-size:11px}
.search-box input{font-size:14px}
.page{max-width:1700px;margin:auto;padding-top:28px;padding-bottom:24px}
.page-header{margin-bottom:23px;align-items:end}
.eyebrow{font-size:11px}
.page-title{font-size:clamp(36px,3vw,49px);line-height:1.12}
.page-subtitle{font-size:15px;max-width:730px}
.btn{font-size:14px;min-height:43px}
.btn.sm{font-size:13px;min-height:36px}
.panel{padding:19px;border-radius:11px;box-shadow:0 10px 34px rgba(0,0,0,.05);background:var(--panel)}
.panel-title{font-size:21px}
.hint,.status,.tag,.stat-caption,.metric-label,.list-row .meta{font-size:13px}
.panel-desc,.field,.kv span:first-child,.card .small,.card-foot,.inline-link{font-size:14px}
.bubble{font-size:16px;line-height:1.67}
.message-author{font-size:13px}
.chat-layout{grid-template-columns:minmax(0,1fr) 285px;gap:18px;align-items:stretch;min-height:calc(100dvh - 210px)}
.chat-pane{min-height:calc(100dvh - 210px);display:flex;flex-direction:column;padding:18px}
.chat-head{gap:14px;padding-bottom:14px;min-height:40px}
.chat-state{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chat-model-select{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.chat-model-select select{appearance:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:8px 12px;font-size:13px;max-width:165px}
.refresh-model{display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--gold-hi);border-radius:8px;height:35px;width:36px;font-size:20px}
.chat-messages{flex:1;min-height:340px;max-height:calc(100dvh - 385px);padding:14px 3px 18px}
.chat-footnote{font-size:12px;color:var(--dim);margin-top:7px;line-height:1.5}
.chat-messages .zeon-welcome{margin:auto;text-align:center;max-width:670px;padding:18px 18px 22px}
.welcome-star{display:block;font-size:27px;color:var(--gold-hi);margin-bottom:6px}
.welcome-kicker{font-size:11px;color:var(--gold);letter-spacing:.22em;margin-bottom:6px}
.zeon-welcome h2{font:normal clamp(29px,2.8vw,42px)/1.17 Georgia,serif;color:var(--gold-hi);margin:6px 0 15px}
.zeon-welcome p{color:var(--muted);font-size:16px;max-width:530px;margin:auto;line-height:1.65}
.starter-prompts{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.starter-prompts button{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line-accent);border-radius:9px;padding:10px 13px;color:var(--text);font-size:13px;min-height:43px}
.starter-prompts svg{color:var(--gold)}
.composer{padding-top:13px}
.composer textarea{font-size:16px;min-height:54px;resize:none}
.composer button{min-height:54px}
.chat-aside{display:flex;flex-direction:column;gap:15px}
.persona-photo-card{border:1px solid var(--line-accent);border-radius:12px;overflow:hidden;background:var(--panel)}
.persona-photo{height:270px;overflow:hidden;position:relative}
.persona-photo:after{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--panel) 100%)}
.persona-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;filter:saturate(.75)}
.persona-card-copy{padding:18px}
.persona-card-copy>span{font-size:10px;letter-spacing:.13em;color:var(--gold)}
.persona-card-copy h2{font:normal 25px/1.25 Georgia,serif;color:var(--gold-hi);margin:8px 0 11px}
.persona-card-copy p{font-size:13px;line-height:1.6;color:var(--muted)}
.prompt-chips .btn{font-size:13px;min-height:38px}
.assistant-working{border:1px solid var(--line-accent);border-radius:10px;padding:13px 16px;font-size:14px;color:var(--muted);max-width:480px;align-self:flex-start;display:flex;align-items:center;gap:9px}
.working-dot{width:8px;height:8px;background:var(--gold);border-radius:50%;animation:thinkingPulse 1s ease-in-out infinite alternate}
@keyframes thinkingPulse{from{opacity:.3}to{opacity:1}}
.empty strong{font-size:24px}
@media(max-width:1290px){.chat-layout{grid-template-columns:minmax(0,1fr) 230px}.persona-photo{height:210px}.persona-card-copy h2{font-size:21px}}
@media(max-width:1100px){.chat-layout{grid-template-columns:1fr}.chat-aside{display:none}.main{padding:0 20px 22px}}
@media(max-width:950px){.sidebar{width:min(270px,85vw)}.nav-btn{font-size:16px}.topbar{min-height:68px}.chat-pane{min-height:calc(100dvh - 215px)}.chat-messages{max-height:none}.chat-layout{min-height:0}}
@media(max-width:590px){.main{padding:0 13px 20px}.page{padding-top:18px}.page-title{font-size:36px}.page-header{gap:12px;align-items:start}.chat-head{align-items:start;flex-direction:column}.chat-pane{padding:15px;min-height:calc(100dvh - 205px)}.chat-messages{min-height:180px;max-height:none}.starter-prompts{flex-direction:column}.starter-prompts button{justify-content:center}.zeon-welcome h2{font-size:32px}.chat-model-select select{max-width:260px}.topbar{min-height:64px}.demo-chip{display:none}.status{font-size:12px}.composer{gap:8px}.composer button span{display:none}.composer button{min-width:52px;padding:9px}.page-subtitle{font-size:14px}}

/* Quick/deep reasoning mode */
.mode-toggle{width:auto;min-width:82px;padding:0 11px;font-size:12px;font-weight:600;white-space:nowrap}
.mode-toggle:disabled{opacity:.5;cursor:not-allowed}