:root{
  --bg:#F4F4F2; --panel:#FAFAF8; --main:#FFFFFF; --text:#18181B; --muted:#6B6B70; --faint:#71717A;
  --line:#E6E6E2; --line2:#EFEFEC; --bubble:#F4F4F2; --sel:#ECECE8; --chip:#F4F4F2;
  --warn-bg:#FFF8EA; --warn-line:#F3D9A6; --warn-text:#78350F; --warn-strong:#B45309;
  --ok:#166534; --bad:#B91C1C; --tag-bg:#E8EEFC; --tag-text:#1E3A8A; --primary:#18181B; --primary-text:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);
  --fs:15px; --pad:12px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0F0F11; --panel:#151517; --main:#1B1B1E; --text:#EDEDEF; --muted:#A1A1AA; --faint:#A1A1AA;
  --line:#2A2A2E; --line2:#26262A; --bubble:#26262A; --sel:#2A2A2F; --chip:#2A2A2F;
  --warn-bg:#2B2213; --warn-line:#5C4519; --warn-text:#F5D9A8; --warn-strong:#F59E0B;
  --ok:#4ADE80; --bad:#F87171; --tag-bg:#1E2A4A; --tag-text:#BFD1FF; --primary:#EDEDEF; --primary-text:#151517;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}
:root[data-density="compact"]{--pad:8px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;font-size:var(--fs)}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid #2563EB;outline-offset:2px}

/* вход */
.login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.login form{width:100%;max-width:360px;background:var(--main);border:1px solid var(--line);border-radius:20px;padding:28px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.login h1{margin:0 0 4px;font-size:24px;letter-spacing:-.02em}
.login p{margin:0;color:var(--muted);font-size:14px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.input{height:46px;border-radius:12px;border:1px solid var(--line);background:var(--main);padding:0 14px;font-size:16px;color:var(--text)}
.btn{height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:var(--main);font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn.primary{background:var(--primary);color:var(--primary-text);border-color:transparent;font-weight:600}
.btn.danger{color:var(--bad)}
.btn.sm{height:36px;padding:0 12px;border-radius:10px;font-size:13px}
.err{color:var(--bad);font-size:13px;min-height:18px}

/* каркас */
.app{height:100dvh;display:flex;overflow:hidden}
.side{width:320px;flex-shrink:0;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line)}
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--main)}
.info{width:320px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--line);padding:22px;overflow:auto;
  display:flex;flex-direction:column;gap:18px}
.app.noinfo .info{display:none}

.side-head{display:flex;align-items:center;justify-content:space-between;padding:20px 18px 12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.01em}
.logo{width:30px;height:30px;border-radius:9px;background:var(--primary);display:flex;align-items:center;justify-content:center}
.logo svg{stroke:var(--primary-text)}
.iconbtn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--main);display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.iconbtn svg{stroke:var(--muted)}
.waiting{margin:2px 14px 12px;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:14px;
  border:1px solid var(--warn-line);background:var(--warn-bg);text-align:left;width:calc(100% - 28px)}
.waiting b{display:block;font-size:13px;color:var(--warn-text)}
.waiting span.s{font-size:12px;color:var(--warn-text);opacity:.85}
.count{min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--warn-strong);color:#fff;font-size:12px;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.bots{flex:1;overflow:auto;padding:0 10px;display:flex;flex-direction:column;gap:2px}
.bot{display:flex;gap:12px;align-items:center;padding:var(--pad) 10px;border-radius:12px;text-decoration:none;color:inherit;border:none;
  background:none;width:100%;text-align:left}
.bot:hover{background:var(--sel)}
.bot[aria-current="true"]{background:var(--sel)}
.bot .meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.bot .row{display:flex;justify-content:space-between;gap:8px}
.bot .name{font-weight:600}
.bot .time{font-size:12px;color:var(--faint)}
.bot .last{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;color:#fff;font-size:11px;font-weight:700;display:inline-flex;
  align-items:center;justify-content:center;flex-shrink:0}
.av{border-radius:50%;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  overflow:hidden;background-size:cover;background-position:center}
.side-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-top:1px solid var(--line);gap:8px}
.side-foot .who{display:flex;flex-direction:column;font-size:14px;font-weight:600}
.side-foot .who small{font-size:12px;color:var(--muted);font-weight:400}

.head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;border-bottom:1px solid var(--line2);min-height:68px}
.head .t{display:flex;align-items:center;gap:12px;min-width:0}
.head .t .nm{font-weight:700;font-size:16px}
.head .t .sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back{display:none}

.msgs{flex:1;overflow:auto;padding:20px 32px 12px;display:flex;flex-direction:column;gap:10px}
.msgs>*{flex-shrink:0}
.day{align-self:center;font-size:12px;color:var(--faint);padding:4px 12px;border-radius:999px;background:var(--bubble);margin:8px 0}
.more{align-self:center}
.b{max-width:min(620px,85%);padding:10px 14px;border-radius:18px;line-height:1.48;white-space:pre-wrap;word-wrap:break-word;
  position:relative}
.b.me{align-self:flex-end;color:#fff;border-bottom-right-radius:6px}
.b.them{align-self:flex-start;background:var(--bubble);border-bottom-left-radius:6px}
.b .tm{display:block;font-size:11px;opacity:.6;margin-top:4px;text-align:right}
.b .quote{display:block;font-size:12px;opacity:.8;border-left:2px solid currentColor;padding-left:8px;margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b a{color:inherit;text-decoration:underline}
.b .reply{position:absolute;right:-44px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .15s}
.b.them:hover .reply,.b.them:focus-within .reply{opacity:1}
.files{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.file{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--main);border:1px solid var(--line2);
  text-decoration:none;font-size:13px;white-space:normal}
.ext{font-size:10px;font-weight:700;padding:3px 5px;border-radius:4px;background:#FEE2E2;color:#991B1B}
.thinking{align-self:flex-start;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;padding:4px 2px}
.dots{display:inline-flex;gap:3px}.dots i{width:5px;height:5px;border-radius:50%;background:var(--faint);animation:bl 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,80%,100%{opacity:.25}40%{opacity:1}}

.card{align-self:flex-start;width:min(640px,100%);border:1px solid var(--line);border-radius:18px;background:var(--main);
  box-shadow:var(--shadow);overflow:hidden}
.card .top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line2)}
.card .num{font-size:12px;color:var(--faint)}
.tag{font-size:12px;font-weight:600;color:var(--tag-text);background:var(--tag-bg);padding:4px 10px;border-radius:999px}
.st{font-size:12px;font-weight:600}
.st.pending{color:var(--warn-strong)}.st.ok{color:var(--ok)}.st.no{color:var(--faint)}.st.bad{color:var(--bad)}
.kv{display:grid;grid-template-columns:84px minmax(0,1fr);row-gap:6px;column-gap:12px;padding:12px 16px;font-size:14px}
.kv .k{color:var(--muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12px;padding:3px 8px;border-radius:6px;background:var(--chip)}
.body{margin:0 16px;padding:12px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line2);font-size:14px;
  line-height:1.55;white-space:pre-wrap;word-wrap:break-word;max-height:360px;overflow:auto}
.card .acts{display:flex;gap:8px;padding:14px 16px;flex-wrap:wrap}
.card .note{font-size:12px;color:var(--muted);padding:10px 16px 0}

.composer{padding:10px 24px 18px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
.editing{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--warn-text);background:var(--warn-bg);
  border:1px solid var(--warn-line);border-radius:12px;padding:8px 8px 8px 12px;margin-bottom:8px}
.box{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line);border-radius:18px;padding:6px 6px 6px 14px;background:var(--main)}
.box textarea{flex:1;border:none;outline:none;resize:none;background:transparent;font-size:16px;line-height:1.45;max-height:200px;
  padding:9px 0;color:var(--text)}
.send{width:42px;height:42px;border-radius:13px;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.send:disabled{opacity:.4}

.info h3{margin:0;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.info .big{font-size:17px;font-weight:700;line-height:1.3}
.info .grid{display:grid;grid-template-columns:96px minmax(0,1fr);row-gap:8px;column-gap:10px;font-size:13px}
.info .grid .k{color:var(--muted)}
.info .pend{display:flex;flex-direction:column;gap:6px}
.info .pend button{text-align:left;padding:10px 12px;border-radius:10px;background:var(--main);border:1px solid var(--line2);font-size:13px}
.empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;padding:24px;text-align:center}

/* настройки */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
.sheet{width:100%;max-width:520px;max-height:90dvh;overflow:auto;background:var(--main);border-radius:20px;padding:22px;
  display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow)}
.sheet h2{margin:0;font-size:20px}
.sheet h4{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:600}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{border:none;background:var(--main);padding:10px 14px;min-height:42px}
.seg button[aria-pressed="true"]{background:var(--primary);color:var(--primary-text)}
.botset{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line2)}
.botset .n{flex:1;font-weight:600}
.botset input[type=color]{width:40px;height:36px;border:1px solid var(--line);border-radius:8px;background:none;padding:2px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--primary);color:var(--primary-text);padding:10px 16px;
  border-radius:12px;font-size:14px;z-index:20;box-shadow:var(--shadow)}

@media (max-width:1100px){.info{display:none}}
@media (max-width:760px){
  .side{width:100%;border-right:none}
  .app.chat .side{display:none}
  .app:not(.chat) .main{display:none}
  .back{display:flex}
  .head{padding:10px 12px}
  .msgs{padding:14px 12px}
  .composer{padding:8px 10px 12px}
  .b{max-width:88%}
  .b .reply{display:none}
  .card .acts .btn{flex:1;height:48px}
  .bot{padding:12px 10px}
}