/* Шрифты подключаются с Google Fonts; при желании их можно положить рядом и подключить локально. */
:root{
  --paper:#eceee8; --panel:#f6f7f3; --ink:#1d2421; --muted:#667068; --line:#d9ddd3; --soft:#e3e6dd;
  --accent:#1d2421; --danger:#b3261e;
  --c-claude:#a8731a; --c-gemini:#2d63d8; --c-openai:#0e7c66; --c-other:#6b7280;
  --ui:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --read:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#14181a; --panel:#1b2023; --ink:#e7ebe6; --muted:#98a39c; --line:#2d3539; --soft:#242b2e; --accent:#e7ebe6;
    --c-claude:#d9a441; --c-gemini:#7aa2ff; --c-openai:#3cc4a3; --c-other:#9aa3ad; --danger:#ff8a80}
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--ui)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--c-gemini);outline-offset:2px}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 12px}
.btn:hover{background:var(--soft)}
.btn.primary{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.btn.primary:hover{opacity:.9}
.btn.danger{color:var(--danger)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon{border:0;background:transparent;border-radius:6px;padding:4px 7px;color:var(--muted)}
.icon:hover{background:var(--soft);color:var(--ink)}
input,select,textarea{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 10px;max-width:100%}
.muted{color:var(--muted)} .small{font-size:12.5px}

/* каркас */
#app{display:grid;grid-template-columns:292px minmax(0,1fr) 0;height:100vh;transition:grid-template-columns .2s}
#app.files-open{grid-template-columns:292px minmax(0,1fr) 300px}
#sidebar{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.brand{padding:18px 18px 10px;font:600 22px/1 var(--read);letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.dots{display:inline-flex;gap:3px}.dots i{width:7px;height:7px;border-radius:50%;display:block}
.dots i:nth-child(1){background:var(--c-claude)}.dots i:nth-child(2){background:var(--c-gemini)}.dots i:nth-child(3){background:var(--c-openai)}
#newChat{margin:6px 14px 10px}
#chatList{flex:1;overflow:auto;padding:0 8px 8px}
.chat{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;cursor:pointer;border-left:3px solid transparent}
.chat:hover{background:var(--soft)}
.chat.active{background:var(--soft);border-left-color:var(--tone,var(--c-other))}
.chat .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat .when{font-size:11.5px;color:var(--muted)}
.chat .acts{display:none}.chat:hover .acts,.chat.active .acts{display:flex}
#sideFoot{border-top:1px solid var(--line);padding:12px 14px;font-size:13px}
#sideFoot .row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

#main{display:flex;flex-direction:column;min-width:0;min-height:0}
#head{display:flex;gap:10px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}
#title{font:600 18px/1.2 var(--read);margin:0;flex:1;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker{display:flex;align-items:center;gap:7px}
.pdot{width:10px;height:10px;border-radius:50%;background:var(--tone,var(--c-other));flex:none}
#modelSel{min-width:230px;font-weight:500}
#modelNote{padding:6px 20px;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line);min-height:30px}
#modelNote .warn{color:var(--danger)}
#messages{flex:1;overflow:auto;padding:22px 20px 10px}
.wrap{max-width:780px;margin:0 auto}
.empty{max-width:560px;margin:8vh auto 0}
.empty h2{font:600 28px/1.2 var(--read);margin:0 0 10px}
.empty p{color:var(--muted);margin:0 0 8px}

.msg{margin:0 0 20px}
.msg.user{display:flex;justify-content:flex-end}
.msg.user .bubble{background:var(--soft);border-radius:14px 14px 4px 14px;padding:9px 14px;max-width:85%;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.assistant{border-left:3px solid var(--tone,var(--c-other));padding-left:16px}
.who{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:4px;flex-wrap:wrap}
.who b{color:var(--tone,var(--ink));font-weight:600}
.body{font-family:var(--read);font-size:16.5px;line-height:1.62;overflow-wrap:anywhere}
.body p{margin:0 0 .8em}.body ul,.body ol{margin:0 0 .8em;padding-left:1.4em}
.body h3,.body h4,.body h5{font-family:var(--ui);margin:1em 0 .4em}
.body code{font-family:var(--mono);font-size:.86em;background:var(--soft);padding:1px 5px;border-radius:5px}
.codewrap{position:relative;margin:0 0 .9em}
.codewrap pre{margin:0;background:#101614;color:#e6efe9;border-radius:10px;padding:12px 14px;overflow:auto;font:13.5px/1.5 var(--mono)}
.codewrap pre code{background:none;padding:0;font-size:inherit;color:inherit}
.copy{position:absolute;top:6px;right:6px;font-size:12px;padding:2px 8px;border-radius:6px;border:1px solid #3b4a44;background:#18211e;color:#cfe0d8}
details.act{margin:8px 0 0;font-size:13px;color:var(--muted)}
details.act summary{cursor:pointer}details.act ul{margin:4px 0 0;padding-left:18px}
.live{color:var(--muted);font-size:13.5px}.live:after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tone);margin-left:6px;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.live:after{animation:none}#app{transition:none}}
.err{color:var(--danger);border-left:3px solid var(--danger);padding-left:12px;margin:0 0 20px}

#composer{padding:10px 20px 16px;border-top:1px solid var(--line);background:var(--paper)}
#composer .box{display:flex;gap:10px;align-items:flex-end}
#prompt{flex:1;min-height:56px;max-height:220px;resize:vertical;border-radius:12px;padding:10px 12px;line-height:1.45}
#hint{font-size:12px;color:var(--muted);margin-top:6px;text-align:left}

#files{background:var(--panel);border-left:1px solid var(--line);overflow:hidden;min-width:0;display:flex;flex-direction:column}
#app:not(.files-open) #files{display:none}
#files .inner{padding:14px;overflow:auto;flex:1}
#files h3{font:600 15px var(--ui);margin:0 0 8px}
.frow{display:flex;gap:6px;margin-bottom:8px}.frow select,.frow input{flex:1;min-width:0}
.file{display:block;width:100%;text-align:left;border:0;background:transparent;padding:4px 6px;border-radius:6px;font:13px var(--mono);overflow-wrap:anywhere}
.file:hover{background:var(--soft)}

dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);padding:0;max-width:min(920px,94vw);width:100%}
dialog::backdrop{background:rgba(10,14,12,.5)}
.dlg{padding:20px 22px}.dlg h2{font:600 22px var(--read);margin:0 0 12px}
.dlg .bar{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--muted);font-size:12.5px}
.tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.tabs button{border:0;background:none;padding:8px 12px;border-bottom:2px solid transparent;color:var(--muted)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin:10px 0}
.grid label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted)}
.tag{display:inline-block;font-size:11.5px;padding:1px 7px;border-radius:999px;background:var(--soft);color:var(--muted)}
.tag.bad{background:#fde7e5;color:#8a1c14}
#fileView{white-space:pre-wrap;font:13px/1.5 var(--mono);max-height:65vh;overflow:auto;background:var(--paper);padding:12px;border-radius:8px}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:8px;font-size:13.5px;display:none;z-index:9}

#menuBtn{display:none}
@media (max-width:900px){
  #app,#app.files-open{grid-template-columns:minmax(0,1fr)}
  #sidebar{position:fixed;inset:0 auto 0 0;width:292px;z-index:5;transform:translateX(-100%);transition:transform .2s}
  #app.nav-open #sidebar{transform:none}
  #app.files-open #files{display:flex;position:fixed;inset:0 0 0 auto;width:min(320px,90vw);z-index:5}
  #menuBtn{display:inline-block}
  #modelSel{min-width:0;width:100%}
  .picker{flex:1 1 100%}
}