:root{
  --bg:#F6F3EE; --surface:#FFFFFF; --ink:#26221D; --muted:#7A7268; --line:#E4DED5;
  --accent:#5E6B3A; --accent-ink:#FFFFFF; --mine:#5E6B3A; --mine-ink:#FFFFFF;
  --agent:#FFFFFF; --chip:#ECE7DF; --danger:#A33A2B; --rec:#C2412D;
  --r:20px; --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#1B1916; --surface:#26231F; --ink:#F1ECE4; --muted:#A39A8E; --line:#3A352F;
    --accent:#A3B370; --accent-ink:#1B1916; --mine:#56633A; --mine-ink:#F6F3EE; --agent:#2A2722; --chip:#302C27; --danger:#E0796A; }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; height:100%; background:var(--bg); color:var(--ink); font:17px/1.4 var(--font); overscroll-behavior:none}
body{position:fixed; inset:0; overflow:hidden}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
[hidden]{display:none !important}
svg{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.top svg circle{fill:currentColor; stroke:none}

.screen{position:absolute; left:0; right:0; top:0; height:var(--vh,100dvh); display:flex; flex-direction:column}

/* Вход */
#pair{align-items:center; justify-content:center; padding:24px}
.pair-box{width:100%; max-width:360px; text-align:center}
.pair-icon{width:84px; height:84px; border-radius:20px}
.pair-box h1{font-size:26px; margin:16px 0 6px}
.pair-box p{color:var(--muted); margin:0 0 20px}
#pairCode{width:100%; font:600 34px/1 var(--font); letter-spacing:12px; text-align:center; padding:16px; border-radius:16px;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink); outline:none}
#pairCode:focus{border-color:var(--accent)}
.primary{background:var(--accent); color:var(--accent-ink); border-radius:16px; padding:15px 22px; font-weight:600; width:100%; margin-top:14px}
.primary:active{opacity:.85}
.err{color:var(--danger); min-height:1.4em; margin-top:12px !important}

/* Шапка */
.top{display:flex; align-items:center; justify-content:space-between; padding:calc(env(safe-area-inset-top) + 8px) 12px 8px 18px;
  border-bottom:1px solid var(--line); background:var(--bg)}
.who{display:flex; gap:10px; align-items:center}
.title{font-weight:700; font-size:19px}
.sub{font-size:13px; color:var(--muted)}
.dot{width:10px; height:10px; border-radius:50%; background:#7DA453}
.dot.off{background:#C9A13B}
.icon-btn{width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:var(--ink)}
.icon-btn:active{background:var(--chip)}

.install{display:flex; gap:8px; align-items:center; justify-content:space-between; margin:8px 12px 0; padding:10px 12px;
  background:var(--chip); border-radius:14px; font-size:14px}
.install .share{vertical-align:-3px}
.link{font-size:24px; line-height:1; padding:0 6px; color:var(--muted)}

/* Лента */
#feed{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 12px 8px; display:flex; flex-direction:column; gap:8px}
.empty{margin:auto; text-align:center; color:var(--muted); max-width:300px; font-size:16px}
.empty b{color:var(--ink)}
.msg{max-width:86%; padding:10px 14px; border-radius:var(--r); white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere}
.msg.agent{align-self:flex-start; background:var(--agent); border:1px solid var(--line); border-bottom-left-radius:6px}
.msg.user{align-self:flex-end; background:var(--mine); color:var(--mine-ink); border-bottom-right-radius:6px}
.msg a{color:inherit; text-decoration:underline}
.msg .time{display:block; font-size:11px; opacity:.55; margin-top:4px; text-align:right}
.msg.status{align-self:flex-start; background:transparent; border:0; color:var(--muted); font-size:15px; padding:4px 6px; display:flex; gap:8px; align-items:center}
.spin{width:16px; height:16px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--accent); animation:sp 0.9s linear infinite; flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.msg img.media,.msg video.media{display:block; max-width:100%; max-height:60vh; border-radius:14px; margin:-4px -8px 6px; width:calc(100% + 16px); object-fit:cover; background:var(--chip)}
.msg .file{display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:12px; background:rgba(127,127,127,.12); text-decoration:none; margin-bottom:4px}
.msg .file svg{flex:none}
.msg .file small{display:block; opacity:.7}
.voice-tag{display:flex; gap:6px; align-items:center; font-size:13px; opacity:.8; margin-bottom:2px}
.btns{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.btns .row{display:flex; gap:6px}
.btns button{flex:1; background:var(--chip); border-radius:12px; padding:11px 8px; font-weight:600; font-size:15px; color:var(--ink)}
.btns button:active{background:var(--line)}

/* Быстрые кнопки */
.chips{display:flex; gap:8px; overflow-x:auto; padding:6px 12px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none; background:var(--chip); border-radius:999px; padding:8px 14px; font-size:15px}
.chips button:active{background:var(--line)}

/* Поле ввода */
.composer{display:flex; align-items:flex-end; gap:6px; padding:6px 10px calc(env(safe-area-inset-bottom) + 8px); background:var(--bg)}
.kb .composer{padding-bottom:8px}
#text{flex:1; resize:none; max-height:140px; min-height:44px; padding:11px 14px; border-radius:22px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font:17px/1.3 var(--font); outline:none}
#text:focus{border-color:var(--accent)}
.mic,.send{flex:none; width:56px; height:56px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(94,107,58,.35); touch-action:none; user-select:none; -webkit-user-select:none}
.send{width:44px; height:44px; box-shadow:none}
.mic:active{transform:scale(.94)}
.attach{color:var(--muted)}

/* Запись */
.rec{position:absolute; left:0; right:0; bottom:0; background:var(--surface); border-top:1px solid var(--line);
  border-radius:24px 24px 0 0; padding:18px 18px calc(env(safe-area-inset-bottom) + 16px); box-shadow:0 -10px 30px rgba(0,0,0,.12)}
.rec-top{display:flex; align-items:center; gap:10px; font-variant-numeric:tabular-nums; font-size:20px; font-weight:600}
.rec-dot{width:12px; height:12px; border-radius:50%; background:var(--rec); animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
#recWave{flex:1; height:40px; width:100%}
.rec-hint{color:var(--muted); margin:10px 0 14px; font-size:15px}
.rec-actions{display:flex; gap:10px}
.rec-actions .primary{margin:0; flex:2}
.ghost{flex:1; border-radius:16px; padding:15px; background:var(--chip); font-weight:600}

/* Меню */
.sheet-bg{position:fixed; inset:0; background:rgba(0,0,0,.35)}
.sheet{position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-radius:24px 24px 0 0; padding:8px 12px calc(env(safe-area-inset-bottom) + 12px);
  display:flex; flex-direction:column; max-height:85vh; overflow-y:auto}
.grab{width:40px; height:5px; border-radius:3px; background:var(--line); margin:4px auto 8px}
.sheet button{text-align:left; padding:14px 10px; border-radius:12px; font-size:17px}
.sheet button:active{background:var(--chip)}
.sheet .ghost{text-align:center; margin-top:6px}
.sheet .danger{color:var(--danger)}
.sheet hr{border:0; border-top:1px solid var(--line); width:100%; margin:6px 0}

.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom) + 96px); background:var(--ink); color:var(--bg);
  padding:10px 16px; border-radius:14px; font-size:15px; max-width:90%; text-align:center; z-index:9}

/* Кнопки «посмотреть» */
.quick{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:6px 10px 4px}
.quick button{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:9px 4px; font-size:14px; line-height:1.15; box-shadow:0 1px 2px rgba(0,0,0,.05)}
.quick button b{font-weight:600}
.quick button:active{background:var(--chip)}
/* Документы и файлы к смете */
.quick2{display:flex; gap:6px; padding:2px 10px 4px}
.quick2 button{flex:1; border-radius:12px; padding:10px 6px; font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px}
.docs-btn{background:transparent; border:1.5px dashed var(--accent) !important; color:var(--accent)}
.task-btn{background:var(--accent); color:var(--accent-ink)}
.up-ic{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; background:var(--chip); color:var(--accent); font-size:15px; flex:none}
.docs-btn .up-ic{width:20px; height:20px; background:transparent}
.sheet-h{font-weight:700; font-size:19px; padding:4px 10px 2px}
.sheet-tip{color:var(--muted); font-size:14px; margin:2px 10px 8px}
.sheet .up-row,.side-docs button{display:flex !important; flex-direction:row !important; align-items:center !important; gap:10px}
.up-t{display:flex; flex-direction:column; text-align:left}
.up-t small{font-size:12px; color:var(--muted); font-weight:400}
.up-t small.none{color:#B07A2A}
.up-t small:empty{display:none}


/* ---------- Компьютер (широкий экран) ---------- */
.side{display:none}
.drop{position:fixed; inset:0; z-index:20; background:rgba(94,107,58,.18); display:grid; place-items:center; pointer-events:none}
.drop div{background:var(--surface); border:2px dashed var(--accent); border-radius:20px; padding:28px 40px; font-size:20px; font-weight:600}
@media (min-width: 1000px){
  html,body{font-size:16px}
  .screen{height:100vh !important; transform:none !important}
  #main{display:grid; grid-template-columns:300px 1fr; grid-template-rows:auto auto 1fr auto}
  #main > *:not(.side){grid-column:2}
  .side{display:flex; flex-direction:column; grid-column:1; grid-row:1 / -1; background:var(--surface); border-right:1px solid var(--line);
    padding:16px 14px; overflow-y:auto; gap:14px}
  .side-brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; padding:0 6px}
  .side-brand img{width:34px; height:34px; border-radius:9px}
  .side-group{display:flex; flex-direction:column; gap:2px}
  .side-h{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:0 10px 6px}
  .side button{display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:7px 10px; border-radius:10px; font-size:15px}
  .side button:hover{background:var(--chip)}
  .side button small{font-size:12px; color:var(--muted); margin-top:1px; max-width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .side button small.none{color:#B07A2A}
  .side button small:empty{display:none}
  .side .side-main{background:var(--accent); color:var(--accent-ink); padding:12px 12px}
  .side .side-main:hover{background:var(--accent); opacity:.92}
  .side .side-main small{color:var(--accent-ink); opacity:.8}
  .side-tip{font-size:13px; color:var(--muted); margin:6px 10px 0}
  .side-bottom{margin-top:auto}
  .side-info{display:grid; grid-template-columns:1fr 1fr; gap:6px}
  .side-info button{border:1px solid var(--line); background:var(--bg); align-items:center !important; text-align:center !important; padding:9px 6px !important; font-weight:600}
  .side-docs{border:1.5px dashed var(--line); border-radius:12px; padding:10px 4px 6px}
  .side-docs .top-tip{margin:0 10px 6px}
  .side .ask-link{color:var(--accent); font-size:14px}
  #chips,#docChips,#install{display:none !important}
  .top{padding:10px 24px}
  .top .who .title{font-size:17px}
  #feed{padding:24px max(24px, calc((100% - 860px) / 2)) 12px}
  .msg{max-width:78%; font-size:16px}
  .composer{padding:10px max(24px, calc((100% - 860px) / 2)) 18px}
  #text{font-size:16px}
  .rec{left:300px}
  .sheet{left:auto; right:24px; top:64px; bottom:auto; width:340px; border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.18)}
  .grab{display:none}
  .toast{left:calc(50% + 150px); bottom:100px}
  .icon-btn:hover,.btns button:hover{background:var(--chip)}
}
.dlbtn{display:inline-block; margin:8px 0 2px; padding:8px 16px; border-radius:18px; background:var(--accent); color:var(--accent-ink) !important; text-decoration:none; font-size:15px}