/* mini-potato — professional minimalist theme. Single source of tokens. */
:root{
  --bg:#0b0d10; --panel:#12151a; --panel2:#171b22; --line:#232833;
  --text:#e6e9ef; --muted:#8b93a3; --gold:#ffb020; --cyan:#3ad1c8; --pink:#ff5c8a;
  --ok:#39d98a; --err:#ff5c5c; --radius:10px;
  --accent:#3ad1c8; --fg:#e6e9ef;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --shadow:0 8px 30px rgba(0,0,0,.45);
  --gold-grad:linear-gradient(180deg,#ffc24d 0%,#ffb020 100%);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px}
#shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}
#app{display:flex;flex:1;min-height:0}

/* sidebar */
#sidebar{width:270px;min-width:270px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:14px;gap:8px;overflow:hidden}
.brand{font-weight:700;font-size:18px;margin-bottom:6px}
.brand span{color:var(--gold)}
.side-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-top:10px}
#session-list{overflow-y:auto;max-height:26vh;display:flex;flex-direction:column;gap:4px}
#live-view{flex:1;overflow-y:auto;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--radius);padding:8px;font-family:var(--mono);font-size:12px;line-height:1.5;min-height:140px}
.lv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.lv-head .lv-title{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.side-foot{display:flex;flex-direction:column;gap:6px;margin-top:8px}

.sess{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;border:1px solid transparent;display:flex;flex-direction:column;gap:2px}
.sess:hover{background:var(--panel2)}
.sess.active{border-color:var(--gold);background:var(--panel2)}
.sess .sess-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sess small{color:var(--muted);display:block;font-size:11px}

/* main */
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#chat{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:16px}
.msg{max-width:820px;width:100%;margin:0 auto;display:flex;gap:12px}
.msg .who{font-size:12px;color:var(--muted);width:44px;flex-shrink:0;text-align:right;padding-top:2px}
.msg .body{flex:1;white-space:pre-wrap;line-height:1.6}
.msg.user .body{color:var(--text)}
.msg.assistant .body{color:var(--text)}
.msg .body code{font-family:var(--mono);background:var(--panel2);padding:1px 5px;border-radius:5px}
.msg .body pre.md-pre{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px;overflow:auto;font-family:var(--mono);font-size:13px;line-height:1.5}
.msg .body pre.md-pre code{background:none;padding:0}
.msg .body h2,.msg .body h3,.msg .body h4,.msg .body h5{margin:10px 0 6px;line-height:1.3}
.msg .body h2{font-size:18px;color:var(--gold)}
.msg .body h3{font-size:16px;color:var(--text)}
.msg .body h4{font-size:14px;color:var(--muted)}
.msg .body h5{font-size:13px;color:var(--muted);font-weight:600}
.msg .body ul{margin:6px 0;padding-left:20px}
.msg .body li{margin:2px 0}
.msg .body blockquote{margin:6px 0;padding:4px 10px;border-left:3px solid var(--gold);color:var(--muted)}
.msg .body hr{border:none;border-top:1px solid var(--line);margin:10px 0}
.msg .body p{margin:0 0 8px}
.msg .body p:last-child{margin-bottom:0}
.tool-chip{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--cyan);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;margin:2px 4px 2px 0;background:var(--panel2)}

/* composer */
#composer{display:flex;gap:10px;padding:16px 24px;border-top:1px solid var(--line);
  max-width:1000px;width:100%;margin:0 auto}
.composer-bar{display:flex;flex:1;align-items:flex-end;gap:10px;min-width:0}
#input{flex:1;min-width:0;background:var(--panel2);color:var(--text);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;font-family:var(--font);font-size:15px;resize:none;
  line-height:20px;min-height:56px;max-height:200px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#input::-webkit-scrollbar{width:6px;height:6px}
#input::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
#input::-webkit-scrollbar-track{background:transparent}
#input:focus{outline:none;border-color:var(--gold)}

/* buttons */
.btn-gold{background:var(--gold);color:#141414;border:none;border-radius:var(--radius);
  padding:0 20px;min-height:44px;font-weight:600;cursor:pointer}
.btn-gold:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;min-height:40px;cursor:pointer;font-size:13px;text-align:left}
.btn-ghost:hover{border-color:var(--gold)}
.side-row{display:flex;gap:8px;margin-bottom:2px}
.side-row .btn-ghost{flex:1;min-width:0;text-align:center;padding:8px 6px}

/* live view rows */
.lv{padding:2px 0;border-bottom:1px dotted var(--line)}
.lv .k{color:var(--gold)}
.lv .sub{color:var(--cyan)}
.lv .done{color:var(--ok)}
.lv .err{color:var(--err)}
/* collapsible tool rows */
.lv.row{cursor:pointer;user-select:none}
.lv.row .sum{display:block;font-family:var(--mono);font-size:12px}
.lv.row .det{display:none;margin-top:4px;white-space:pre-wrap;font-family:var(--mono);
  font-size:11px;color:var(--muted);background:var(--bg);border:1px solid var(--line);
  border-radius:6px;padding:6px;max-height:160px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.lv.row .det::-webkit-scrollbar{width:6px;height:6px}
.lv.row .det::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.lv.row .det::-webkit-scrollbar-track{background:transparent}
.lv.row.open .det{display:block}
.lv.row.open .sum{color:var(--gold)}
.lv .tool-args{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--fg);
  background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px 10px;
  max-height:200px;overflow:auto;white-space:pre-wrap;word-break:break-word;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.lv .tool-args .muted{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
/* Active Watch toggle toolbar */
.lv-toolbar{display:flex;align-items:center;padding:6px 10px;border-bottom:1px solid var(--line)}
.lv-aw{background:var(--panel2);color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer}
.lv-aw.on{background:var(--gold);color:#1a1207;border-color:var(--gold)}
/* download chip (project zip link in chat) */
.doc-body{font-size:14px;line-height:1.55;color:var(--text);margin:10px 0}
.doc-body b{color:var(--gold)}
.cron{display:flex;flex-direction:column;gap:2px;position:relative}
.cron .ct{font-size:13px;color:var(--text)}
.cron.paused{opacity:.55}
.cron .cacts{position:absolute;right:6px;top:4px;display:flex;gap:4px}
.cron .cacts button{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:6px;width:22px;height:22px;cursor:pointer;font-size:11px;line-height:1}
.cron .cacts button:hover{border-color:var(--gold);color:var(--gold)}
.dl-chip{display:inline-block;margin:4px 0;padding:7px 12px;border:1px solid var(--gold);
  border-radius:8px;color:var(--gold);text-decoration:none;font-size:13px;font-family:var(--font-body)}
.dl-chip:hover{background:rgba(255,209,102,.12)}

/* top bar context indicator */
#topbar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel2)}
.chip{font-size:12px;color:var(--muted);font-family:var(--font-mono);padding:4px 10px;border:1px solid var(--line);border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* loading spinner on Send */
.spinner{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.4);border-top-color:#1a140d;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-left:6px}
.spinner[hidden]{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
/* projects modal (grouped sessions -> their files) */
.proj-group{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.proj-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.proj-head b{font-size:13px;color:var(--text)}
.proj-head .muted{font-size:11px}
.proj-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;margin-top:6px;background:var(--bg)}
.proj-row.active{border-color:var(--accent)}
.proj-name{font-size:12px;color:var(--fg)}
.proj-acts{display:flex;gap:8px;flex-wrap:wrap}
.proj-acts .btn-ghost{flex:1;min-width:0;font-size:12px;padding:6px 10px;text-align:center}
.proj.active{border-color:var(--gold);background:var(--panel2)}
.proj small{color:var(--muted);display:block}

/* hamburger / overlay / drawer-close: hidden by default (desktop), shown on mobile */
#menu-btn{display:none;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:8px;cursor:pointer;font-size:18px}
#menu-overlay{display:none}
#sidebar-close{display:none;margin-left:auto;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;width:32px;height:32px;align-items:center;justify-content:center;cursor:pointer;font-size:16px}

/* responsive / mobile */
@media(max-width:760px){
  #app{flex-direction:column}
  #sidebar{position:fixed;z-index:30;height:100%;width:84%;max-width:320px;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.6)}
  #sidebar.open{transform:none}
  #menu-btn{display:flex}
  #menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:25;display:none}
  #menu-overlay.show{display:block}
  #sidebar-close{display:flex}
  #main{height:auto;min-height:0}
  #chat{padding:14px;gap:12px}
  .msg{max-width:100%}
  #composer{padding:10px 12px}
  .modal-card{width:94vw;padding:16px;overflow-x:hidden}
  .marks .tick{font-size:8px}
  /* preview panel becomes a right-edge sheet on mobile (hidden by default) */
  #preview{position:fixed;top:0;right:0;height:100%;width:88%;max-width:420px;z-index:40;border-left:1px solid var(--line);transform:translateX(100%);transition:transform .2s ease}
  #preview.hidden{display:none}
  #preview:not(.hidden){display:flex} /* shown when content arrives */
  #preview.open{transform:translateX(0)} /* full view when opened */
  #preview:not(.open):not(.hidden){transform:translateX(calc(100% - 26px))} /* peek: edge + knob visible */
  #preview-knob{display:block} /* always visible on mobile, straddles the edge */
}
@media(min-width:761px){
  #menu-btn{display:none!important}
  #menu-overlay{display:none!important}
  #sidebar-close{display:none!important}
}

.sa{font-size:11px;padding:3px 7px;border-radius:6px;border:1px solid var(--line)}
.sa.queued{color:var(--muted)}
.sa.running{color:var(--gold);border-color:var(--gold)}
.sa.done{color:var(--ok);border-color:var(--ok)}
.sa.error{color:var(--err);border-color:var(--err)}

/* in-chat live status line — appears on send, fades on receive */
.chat-status{font-size:12px;color:var(--accent);padding:4px 6px;margin:2px 0 8px;
  border-left:2px solid var(--accent);background:rgba(63,174,111,.06);border-radius:4px;
  opacity:0;transform:translateY(2px);transition:opacity .25s ease,transform .25s ease}
.chat-status.show{opacity:1;transform:translateY(0);animation:pulse 1.4s ease-in-out infinite}
.chat-status.hide{opacity:0;transform:translateY(2px)}
@keyframes pulse{0%,100%{opacity:.7}50%{opacity:1}}

/* live preview panel (right side) — model-controlled via set_preview tool */
#preview{width:42%;max-width:560px;min-width:280px;border-left:1px solid var(--line);background:var(--panel2);overflow:auto;padding:0;display:flex;flex-direction:column}
#preview.hidden{display:none}
#preview .preview-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel2);z-index:2}
#preview .preview-title{font-size:13px;color:var(--muted)}
#preview .preview-body{font-size:14px;line-height:1.5;padding:12px}
#preview .preview-iframe,#preview-body-host .preview-iframe{width:100%;height:100%;border:0;background:#fff;flex:1;min-height:200px}
#preview-body-host{flex:1;display:flex;min-height:0}
/* mobile knob: sits on the left edge, always visible, moves inside when open */
#preview-knob{position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:28px;height:48px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:8px 0 0 8px;cursor:pointer;z-index:5;font-size:14px;display:none}
/* full-screen preview overlay */
#preview-full .preview-full-card{width:92vw;max-width:1100px;height:86vh;max-height:86vh;padding:0;display:flex;flex-direction:column}
.preview-toolbar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.preview-toolbar .preview-title{font-weight:600}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg-btn{background:var(--panel2);color:var(--muted);border:0;padding:6px 12px;cursor:pointer;font-size:13px}
.seg-btn.active{background:var(--gold);color:#1a1207}
#pv-notice{font-size:12px}
.preview-frame-wrap{flex:1;min-height:0;background:#fff}
.preview-frame-wrap .preview-iframe{width:100%;height:100%;border:0}
.preview-frame-wrap.mobile{display:flex;justify-content:center;background:#222}
.preview-frame-wrap.mobile .preview-iframe{width:390px;max-width:100%;box-shadow:0 0 0 8px #000}
.preview-frame-wrap.desktop .preview-iframe{width:1280px;max-width:100%}

/* modal — scrollable, never escapes viewport; works on desktop + mobile */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal[hidden]{display:none}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;width:440px;max-width:94vw;max-height:88vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.modal-card h3{margin:0 0 6px;position:sticky;top:0;background:var(--panel)}
.modal-card .modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:700;color:var(--text);position:sticky;top:0;background:var(--panel);padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.modal-card .modal-head .btn-ghost{padding:2px 10px;min-height:30px}
.modal-card label{font-size:12px;color:var(--muted);margin-top:6px}
.modal-card .set-head{color:var(--text);font-size:13px;font-weight:600;margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.modal-card .set-head:first-of-type{margin-top:6px;border-top:none;padding-top:0}
.modal-card .set-head .muted{font-weight:400}
.modal-card .set-val{float:right;color:var(--gold);font-weight:600;font-size:13px}
.modal-card .sep{border-top:1px solid var(--line);margin:10px 0}
.modal-card input[type=range]{width:100%}
.modal-card .val-input{width:72px;text-align:right;background:var(--bg);color:var(--gold);border:1px solid var(--line);border-radius:6px;font-size:13px;font-weight:600;padding:2px 6px}
.modal-card .slider-wrap{display:flex;align-items:center;gap:8px;margin-top:8px}
.modal-card .slider-wrap input[type=range]{flex:1}
.modal-card .size-toggle{background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--muted);cursor:pointer;font-size:11px;padding:3px 8px;line-height:1;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.modal-card .size-toggle:hover{border-color:var(--gold);color:var(--text)}
.modal-card .size-toggle.active{color:var(--gold);border-color:var(--gold);background:rgba(245,180,70,.08)}
.modal-card .size-toggle::before{content:"⇕"}
.modal-card .profile-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.modal-card .prof{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text);cursor:pointer;font-size:12px;padding:5px 10px}
.modal-card .prof:hover{border-color:var(--gold)}
.modal-card .prof.active{background:var(--gold);color:#08120a;border-color:var(--gold);font-weight:600}
.modal-card .marks{position:relative;height:30px;margin-top:6px;font-size:9px;color:var(--muted)}
.modal-card .marks .mk{position:absolute;transform:translateX(-50%);white-space:nowrap;top:0}
.modal-card .marks .mk::before{content:"";position:absolute;top:12px;left:50%;width:1px;height:5px;background:var(--line)}
.modal-card .marks .mk.rec{color:var(--gold)}
.modal-card .marks .mk.max{color:var(--err)}
.modal-card .marks .pill{position:absolute;transform:translateX(-50%);top:-2px;background:var(--gold);color:#08120a;font-weight:700;border-radius:6px;padding:1px 5px;font-size:9px;white-space:nowrap}
.modal-card .marks .ticks{position:absolute;left:0;right:0;top:16px;height:10px}
.modal-card .marks .tick{position:absolute;transform:translateX(-50%);color:var(--muted);font-size:9px;white-space:nowrap}
.modal-card .marks .tick::before{content:"";position:absolute;top:-4px;left:50%;width:1px;height:4px;background:var(--line)}
.modal-card .marks .tick.rec{color:var(--gold);font-weight:700}
.modal-card .marks .tick.rec::before{background:var(--gold);height:6px;top:-6px}
.modal-card input,.modal-card select{background:var(--panel2);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:10px;font-size:15px}
.modal-card .row{display:flex;align-items:center;gap:10px;margin-top:8px}
/* keep the last action row (close/buttons) visible while scrolling */
.modal-card > button:last-child{position:sticky;bottom:0;background:var(--panel);margin-top:6px}
.muted{color:var(--muted);font-size:12px}

/* ---- settings redesign: balanced section cards (replaces flat wall) ---- */
.set-card{border:1px solid var(--line);border-radius:12px;padding:14px 14px 6px;display:flex;flex-direction:column;gap:8px;background:var(--panel2)}
.set-card-title{font-size:14px;font-weight:700;color:var(--text);padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.set-card-title .muted{font-weight:400}
.set-sub{color:var(--muted);font-size:12px;font-weight:600;margin-top:6px}
.dir-area{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:13px;font-family:var(--mono);resize:vertical;line-height:1.5}
.dir-area:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,176,32,.18)}
/* ---- settings: clean two-column layout + slider rows ---- */
.settings-card{width:760px;max-width:96vw;padding:0;overflow:hidden}
.settings-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.settings-head h3{margin:0}
.settings-body{display:flex;max-height:84vh;min-height:420px}
.settings-nav{width:168px;flex:0 0 168px;border-right:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;background:var(--panel2)}
.settings-nav .sn-link{color:var(--muted);font-size:12px;padding:7px 10px;border-radius:8px;text-decoration:none;cursor:pointer;transition:background .12s ease,color .12s ease}
.settings-nav .sn-link:hover{background:rgba(255,176,32,.08);color:var(--text)}
.settings-nav .sn-link.active{background:var(--gold);color:#08120a;font-weight:600}
.settings-scroll{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.set-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text);font-weight:600;margin-top:4px}
.set-row .set-val{font-weight:600}

/* ---- logs viewer ---- */
.logs-list{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow-y:auto;margin-top:4px}
.log-item{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;background:var(--panel2);font-family:var(--mono);line-height:1.4}
.log-item .log-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.log-item .log-kind{font-weight:700;letter-spacing:.3px;text-transform:uppercase;font-size:10px}
.log-item .log-time{color:var(--muted);font-size:10px;margin-left:auto}
.log-item .log-detail{color:var(--text);white-space:pre-wrap;word-break:break-word}
.log-item.ok{border-left:3px solid var(--accent)}
.log-item.fail{border-left:3px solid var(--err);background:rgba(255,90,90,.06)}
.log-item.prompt{border-left:3px solid var(--gold)}
.log-item.tool{border-left:3px solid var(--cyan)}
.log-item.ok .log-kind{color:var(--accent)}
.log-item.fail .log-kind{color:var(--err)}
.log-item.prompt .log-kind{color:var(--gold)}
.log-item.tool .log-kind{color:var(--cyan)}

/* export badge: small live indicator of files in the current project */
.exp-badge{font-size:10px;line-height:1;color:var(--muted);border:1px solid var(--line);
  border-radius:10px;padding:3px 7px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.exp-badge.stale{color:var(--accent);border-color:var(--accent)}
.export-badge{margin-left:4px}

.perf-live{font-size:13px;color:var(--accent);margin:6px 0 10px}
.perf-windows{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.perf-windows .pw{background:var(--bg);border:1px solid var(--line);color:var(--fg);
  border-radius:6px;padding:4px 10px;cursor:pointer;font-size:12px;transition:background .15s ease,border-color .15s ease,color .15s ease}
.perf-windows .pw.active{background:var(--accent);color:#0c120c;border-color:var(--accent)}
.perf-legend{display:flex;gap:14px;margin-bottom:8px;font-size:12px}
.perf-legend .lg-cpu{color:#3fae6f}
.perf-legend .lg-req{color:#e0b34d}
.perf-legend .lg-ctx{color:#5aa9e0}

/* ---- premium polish (layout unchanged) ---- */
body{background:
  radial-gradient(1200px 700px at 78% -10%, rgba(58,209,200,.05), transparent 60%),
  radial-gradient(900px 600px at 0% 110%, rgba(255,176,32,.04), transparent 55%),
  var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.btn-gold,.btn-ghost,.lv-aw,.pw,.seg-btn,#send,.proj,.sess,.cron .cacts button{
  transition:background .16s ease,border-color .16s ease,color .16s ease,filter .16s ease,box-shadow .16s ease,transform .12s ease}
.btn-gold:active,.btn-ghost:active{transform:translateY(1px)}

.btn-gold{background:var(--gold-grad);color:#141414;border:none;border-radius:var(--radius);
  padding:0 20px;min-height:44px;font-weight:600;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 18px rgba(255,176,32,.18)}
.btn-gold:hover{filter:brightness(1.06);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 22px rgba(255,176,32,.28)}

#input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,176,32,.18)}

.modal{background:rgba(4,6,9,.62);backdrop-filter:blur(2px)}
.modal-card{box-shadow:var(--shadow);animation:cardIn .18s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

#chat,#live-view,#sidebar,#session-list,#project-list,.modal-card,.preview-frame-wrap{
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#chat::-webkit-scrollbar,#live-view::-webkit-scrollbar,#sidebar::-webkit-scrollbar,.modal-card::-webkit-scrollbar{width:8px;height:8px}
#chat::-webkit-scrollbar-thumb,#live-view::-webkit-scrollbar-thumb,#sidebar::-webkit-scrollbar-thumb,.modal-card::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
#chat::-webkit-scrollbar-thumb:hover,#live-view::-webkit-scrollbar-thumb:hover{background:#33415a}

.msg.user{margin-top:2px}
.msg.user .body{border-left:2px solid rgba(58,209,200,.35);padding-left:12px}

.chip{font-size:12px;color:var(--muted);font-family:var(--mono);padding:5px 11px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.lv-aw{background:var(--panel2);color:var(--muted);border:1px solid var(--line);
  border-radius:8px;padding:5px 11px;font-size:12px;cursor:pointer;transition:all .15s ease}
.lv-aw:hover{border-color:var(--cyan);color:var(--cyan)}
.lv-aw.on{background:var(--gold);color:#1a1207;border-color:var(--gold);box-shadow:0 2px 10px rgba(255,176,32,.25)}

#perf-summary{line-height:1.5}
#send:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,176,32,.3)}

/* thin global footer — pins to bottom of viewport on desktop + mobile */
#footer{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;
  padding:5px 12px;font-size:11px;line-height:1.4;text-align:center;
  color:var(--muted);background:var(--panel);border-top:1px solid var(--line);
  flex-shrink:0}
#footer .sep{opacity:.45}
#footer .lk{color:var(--cyan);text-decoration:none;cursor:pointer;
  border-bottom:1px dotted rgba(58,209,200,.45)}
#footer .lk:hover{color:var(--gold);border-color:var(--gold)}
@media(max-width:760px){
  #footer{font-size:10px;padding:4px 10px;gap:5px}
}
/* ---- settings: mobile optimization ----
   On phones the fixed 168px vertical nav wastes half the width. Collapse it into a
   horizontal scroll strip pinned at the top; the settings scroll area goes full-width below. */
@media(max-width:760px){
  .settings-card{max-width:96vw;width:96vw}
  .settings-body{flex-direction:column;max-height:88vh;min-height:0}
  .settings-nav{flex:0 0 auto;width:100%;flex-direction:row;overflow-x:auto;overflow-y:hidden;
    border-right:none;border-bottom:1px solid var(--line);padding:8px 10px;gap:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .settings-nav::-webkit-scrollbar{display:none}
  .settings-nav .sn-link{flex:0 0 auto;white-space:nowrap;padding:8px 12px;font-size:13px}
  .settings-scroll{padding:14px 14px 18px;gap:12px}
  /* let rows breathe: stack label/value when cramped instead of forcing a tight justify */
  .set-row{flex-direction:column;align-items:flex-start;gap:4px}
  .set-row .set-val{float:none}
  /* make selects/inputs tappable full-width on mobile */
  .modal-card select,.modal-card input[type=text],.modal-card input[type=password]{width:100%;font-size:16px;padding:12px}
  .modal-card textarea.dir-area{font-size:14px;padding:12px}
  .profile-row .prof{padding:8px 12px;font-size:13px}
}
@media(max-width:760px) and (orientation:landscape){
  .settings-body{max-height:92vh}
  .settings-scroll{padding:10px 14px 14px}
}