/* Клиент мессенджера «Связь». Палитра и компоновка — в духе Telegram (по мотивам mini app tg-max). */
:root{
  --bg:#ffffff; --bg2:#f4f4f5; --text:#0f1419; --muted:#707579; --accent:#3390ec; --accent-2:#2b7fd4;
  --accent-text:#ffffff; --panel:#f1f3f6; --sep:rgba(0,0,0,.08); --danger:#e53935; --ok:#4fae4e;
  --bubble-in:#ffffff; --bubble-out:#e3fee0; --bubble-out-text:#0f1419; --out-meta:#4fae4e;
  --chat-bg:#c8d9a7; --chat-pattern:rgba(255,255,255,.18); --shadow:0 1px 2px rgba(16,35,47,.15);
  --warn:#f2b43d;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#17212b; --bg2:#0e1621; --text:#f5f5f5; --muted:#7f91a4; --accent:#5288c1; --accent-2:#6ba1d8;
    --panel:#242f3d; --sep:rgba(255,255,255,.07);
    --bubble-in:#182533; --bubble-out:#2b5278; --bubble-out-text:#ffffff; --out-meta:#7db2e6;
    --chat-bg:#0e1621; --chat-pattern:rgba(255,255,255,.02); --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg2); color:var(--text);
  overflow:hidden; font-size:15px; }
[hidden]{ display:none !important; }
button{ font:inherit; color:inherit; }
input,textarea,select{ font:inherit; color:var(--text); }
a{ color:var(--accent); }
.muted{ color:var(--muted); }
svg.i{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── верхние баннеры ── */
#testbar{ background:var(--warn); color:#3a2a00; font-size:12.5px; padding:6px 12px; text-align:center; line-height:1.35; }
#connbar{ background:color-mix(in srgb, var(--danger) 18%, var(--bg)); font-size:12.5px; padding:5px 12px; text-align:center; }
#app{ height:100%; display:flex; flex-direction:column; }
#root{ flex:1; min-height:0; display:flex; }

/* ── авторизация ── */
#auth{ flex:1; display:flex; align-items:center; justify-content:center; background:var(--bg); overflow:auto; }
.auth-card{ width:100%; max-width:380px; padding:32px 24px; text-align:center; }
.logo{ width:120px; height:120px; border-radius:50%; margin:0 auto 22px; background:linear-gradient(135deg,#40b3e0,#2b7fd4);
  display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 8px 24px rgba(43,127,212,.35); }
.logo svg{ width:62px; height:62px; stroke-width:1.8; }
.brand-logo{ display:block; width:min(250px,70vw); margin:0 auto 18px; border-radius:24px; background:#fff; padding:6px; }
.avatar.emblem{ background:#fff; overflow:hidden; box-shadow:inset 0 0 0 1px var(--sep); }
.avatar.emblem img{ width:100%; height:100%; display:block; }
.auth-card h1{ font-size:24px; margin:0 0 8px; font-weight:600; }
.auth-card p{ color:var(--muted); margin:0 0 22px; line-height:1.5; font-size:14.5px; }
.field{ position:relative; margin:0 0 14px; text-align:left; }
.field input{ width:100%; height:54px; border:1px solid var(--sep); border-radius:12px; background:var(--bg); padding:16px 14px 6px;
  outline:none; font-size:16px; transition:border-color .15s; }
.field input:focus{ border-color:var(--accent); border-width:2px; padding-left:13px; }
.field .pfx{ position:absolute; left:15px; top:23px; font-size:16px; pointer-events:none; }
.field label{ position:absolute; left:14px; top:6px; font-size:11.5px; color:var(--muted); pointer-events:none; }
.check{ display:flex; gap:10px; align-items:flex-start; text-align:left; font-size:13.5px; line-height:1.45; margin:0 0 12px; cursor:pointer; }
.check input{ width:18px; height:18px; margin-top:1px; accent-color:var(--accent); flex:0 0 auto; }
.btn{ display:block; width:100%; height:50px; border:0; border-radius:12px; background:var(--accent); color:var(--accent-text);
  font-size:15px; font-weight:600; letter-spacing:.3px; cursor:pointer; text-transform:uppercase; transition:opacity .15s, background .15s; }
.btn:disabled{ opacity:.45; cursor:default; }
.btn:not(:disabled):active{ background:var(--accent-2); }
.btn.secondary{ background:transparent; color:var(--accent); text-transform:none; font-weight:500; height:42px; }
.btn.danger{ background:var(--danger); }
.err{ color:var(--danger); font-size:13.5px; min-height:18px; margin:4px 0 10px; }
.code-input{ letter-spacing:12px; text-align:center; font-size:26px !important; padding:6px 14px !important; }
.sms{ position:fixed; left:50%; top:12px; transform:translate(-50%,-140%); width:min(92vw,380px); background:var(--bg); color:var(--text);
  border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.25); padding:12px 14px; z-index:300; transition:transform .35s cubic-bezier(.2,.9,.3,1.2);
  display:flex; gap:12px; align-items:center; text-align:left; cursor:pointer; }
.sms.show{ transform:translate(-50%,0); }
.sms .sms-ic{ width:38px; height:38px; border-radius:10px; background:#4fae4e; color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.sms b{ font-size:13px; } .sms div{ font-size:14px; line-height:1.35; }
.sms small{ color:var(--muted); font-size:11.5px; }

/* ── основной экран ── */
#main{ flex:1; min-width:0; display:flex; position:relative; }
.pane-list{ width:100%; display:flex; flex-direction:column; background:var(--bg); min-width:0; position:relative; }
.pane-chat{ display:none; flex:1; flex-direction:column; min-width:0; position:relative; }
body.in-chat .pane-list{ display:none; }
body.in-chat .pane-chat{ display:flex; }
@media (min-width: 860px){
  .pane-list{ width:380px; flex:0 0 380px; border-right:1px solid var(--sep); display:flex !important; }
  .pane-chat{ display:flex !important; }
}
.topbar{ flex:0 0 auto; height:56px; display:flex; align-items:center; gap:6px; padding:0 8px; background:var(--bg); border-bottom:1px solid var(--sep); }
.topbar .title{ flex:1; min-width:0; font-size:19px; font-weight:600; padding-left:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.iconbtn{ flex:0 0 auto; width:42px; height:42px; border:0; background:transparent; color:var(--muted); border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.iconbtn:hover{ background:var(--panel); }
.iconbtn.accent{ color:var(--accent); }
.searchbox{ flex:1; display:flex; align-items:center; gap:8px; background:var(--panel); border-radius:21px; padding:0 14px; height:40px; }
.searchbox input{ flex:1; border:0; outline:0; background:transparent; font-size:15px; min-width:0; }
.searchbox svg{ width:18px; height:18px; color:var(--muted); }
.scroll{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }

.row{ display:flex; align-items:center; gap:12px; padding:8px 12px; cursor:pointer; border-radius:10px; margin:0 6px; user-select:none; }
.row:hover{ background:var(--panel); }
.row.active{ background:var(--accent); color:#fff; }
.row.active .preview,.row.active .time,.row.active .sub{ color:rgba(255,255,255,.85); }
.avatar{ flex:0 0 auto; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:600; font-size:19px; position:relative; }
.avatar.sm{ width:40px; height:40px; font-size:15px; }
.avatar.xs{ width:34px; height:34px; font-size:13px; }
.avatar.lg{ width:96px; height:96px; font-size:36px; }
.avatar .dot{ position:absolute; right:1px; bottom:1px; width:14px; height:14px; border-radius:50%; background:#4fae4e; border:2.5px solid var(--bg); }
.avatar svg{ width:56%; height:56%; }
.c0{ background:linear-gradient(#ff885e,#ff516a); } .c1{ background:linear-gradient(#ffcd6a,#ffa85c); }
.c2{ background:linear-gradient(#82b1ff,#665fff); } .c3{ background:linear-gradient(#a0de7e,#54cb68); }
.c4{ background:linear-gradient(#53edd6,#28c9b7); } .c5{ background:linear-gradient(#72d5fd,#2a9ef1); }
.c6{ background:linear-gradient(#e0a2f3,#d669ed); } .c7{ background:linear-gradient(#ffa2bf,#ff6a91); }
.row .mid{ flex:1; min-width:0; }
.row .line{ display:flex; align-items:center; gap:6px; }
.row .name{ flex:1; min-width:0; font-size:16px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:5px; }
.row .name svg{ width:15px; height:15px; flex:0 0 auto; }
.row .time{ font-size:12.5px; color:var(--muted); flex:0 0 auto; }
.row .preview{ flex:1; min-width:0; font-size:14.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; }
.row .preview b{ color:var(--text); font-weight:500; }
.row.active .preview b{ color:#fff; }
.row .sub{ font-size:13.5px; color:var(--muted); margin-top:2px; }
.badge{ min-width:22px; height:22px; padding:0 7px; border-radius:11px; background:var(--accent); color:#fff; font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; margin-top:3px; }
.badge.muted-b{ background:#a0acb6; }
.empty{ padding:60px 28px; text-align:center; color:var(--muted); line-height:1.55; font-size:14.5px; }
.empty .big{ font-size:46px; margin-bottom:10px; }
.fab{ position:absolute; right:18px; bottom:18px; width:56px; height:56px; border-radius:50%; border:0; background:var(--accent); color:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; }
.fab svg{ width:26px; height:26px; }

/* ── чат ── */
.chat-bg{ position:absolute; inset:0; background-color:var(--chat-bg);
  background-image:radial-gradient(var(--chat-pattern) 1.5px, transparent 1.6px), radial-gradient(var(--chat-pattern) 1.5px, transparent 1.6px);
  background-size:28px 28px; background-position:0 0, 14px 14px; z-index:0; }
.pane-chat > *:not(.chat-bg){ position:relative; z-index:1; }
.chat-head{ cursor:pointer; display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.chat-head .cname{ font-size:16px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-head .csub{ font-size:13px; color:var(--muted); }
.chat-head .csub.online{ color:var(--accent); }
#msgs-scroll{ display:flex; flex-direction:column; }
#msgs{ margin-top:auto; padding:10px 12px 6px; display:flex; flex-direction:column; gap:2px; max-width:760px; width:100%; align-self:center; }
.placeholder{ flex:1; display:flex; align-items:center; justify-content:center; }
.placeholder span{ background:rgba(0,0,0,.25); color:#fff; padding:5px 14px; border-radius:14px; font-size:14px; }
.day{ align-self:center; margin:10px 0 6px; padding:4px 11px; border-radius:14px; background:rgba(0,0,0,.22); color:#fff; font-size:13px; font-weight:500; }
.msg{ display:flex; gap:7px; align-items:flex-end; max-width:min(82%, 520px); }
.msg.out{ align-self:flex-end; flex-direction:row-reverse; }
.msg.cont .avatar{ visibility:hidden; }
.bubble{ position:relative; padding:6px 10px 7px; border-radius:15px; background:var(--bubble-in); box-shadow:var(--shadow); font-size:15px; line-height:1.36;
  word-wrap:break-word; overflow-wrap:anywhere; min-width:64px; }
.msg.out .bubble{ background:var(--bubble-out); color:var(--bubble-out-text); }
.msg:not(.cont).in .bubble{ border-bottom-left-radius:5px; }
.msg:not(.cont).out .bubble{ border-bottom-right-radius:5px; }
.msg + .msg:not(.cont){ margin-top:6px; }
.bubble .sender{ font-size:13.5px; font-weight:600; margin-bottom:2px; }
.bubble .text{ white-space:pre-wrap; }
.bubble .meta{ float:right; margin:7px 0 -4px 10px; font-size:11.5px; color:var(--muted); display:inline-flex; align-items:center; gap:3px; user-select:none; }
.msg.out .meta{ color:var(--out-meta); }
.meta svg{ width:16px; height:16px; stroke-width:2.2; }
.meta .clock svg{ width:12px; height:12px; }
.meta.failed{ color:var(--danger) !important; }
.bubble.removed{ font-style:italic; color:var(--muted); }
.bubble.service{ background:var(--bubble-in); }
.adlabel{ font-size:12px; color:var(--muted); margin-top:6px; padding-top:5px; border-top:1px solid var(--sep); line-height:1.35; }
.adlabel b{ color:var(--accent); font-weight:600; }
.file{ display:flex; align-items:center; gap:10px; padding:2px 0 4px; cursor:pointer; min-width:200px; }
.file .fic{ width:46px; height:46px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.msg.out .file .fic{ background:var(--out-meta); }
.file .fn{ font-size:14.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.file .fs{ font-size:13px; color:var(--muted); }
.photo{ display:block; max-width:100%; max-height:340px; border-radius:11px; margin:-2px -6px 4px; min-width:160px; min-height:60px; background:var(--panel); cursor:zoom-in; object-fit:cover; }
.bubble.flash{ animation:flash 1.2s ease; }
@keyframes flash{ 30%{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); } }

.composer{ flex:0 0 auto; display:flex; align-items:flex-end; gap:8px; padding:8px 10px 10px; max-width:780px; width:100%; align-self:center; }
.composer .box{ flex:1; display:flex; align-items:flex-end; background:var(--bg); border-radius:22px; box-shadow:var(--shadow); padding:0 4px; min-height:46px; }
.composer textarea{ flex:1; border:0; outline:0; resize:none; background:transparent; font-size:16px; line-height:1.35; padding:12px 6px; max-height:160px; min-height:46px; }
.sendbtn{ width:46px; height:46px; border-radius:50%; border:0; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; box-shadow:var(--shadow); }
.sendbtn svg{ width:22px; height:22px; margin-left:2px; }
.readonly-bar{ flex:0 0 auto; text-align:center; padding:12px; background:var(--bg); color:var(--accent); font-weight:600; cursor:pointer; border-top:1px solid var(--sep); }
.readonly-bar.dis{ color:var(--muted); cursor:default; font-weight:400; }

/* ── слои (настройки и пр.) ── */
.layer{ position:absolute; inset:0; background:var(--bg2); z-index:40; display:flex; flex-direction:column; animation:slide .18s ease-out; }
@keyframes slide{ from{ transform:translateX(24px); opacity:0; } to{ transform:none; opacity:1; } }
.layer .body{ flex:1; min-height:0; overflow-y:auto; padding-bottom:24px; }
.group{ background:var(--bg); margin:0 0 10px; box-shadow:0 1px 0 var(--sep); }
.group-title{ padding:14px 16px 6px; font-size:14px; font-weight:600; color:var(--accent); }
.item{ display:flex; align-items:center; gap:18px; padding:13px 18px; cursor:pointer; min-height:52px; }
.item:hover{ background:var(--panel); }
.item svg{ color:var(--muted); flex:0 0 auto; }
.item .t{ flex:1; min-width:0; }
.item .t div:first-child{ font-size:15.5px; }
.item .t .s{ font-size:13px; color:var(--muted); margin-top:2px; line-height:1.4; }
.item.danger, .item.danger svg{ color:var(--danger); }
.note{ padding:8px 18px 14px; font-size:13px; color:var(--muted); line-height:1.5; }
.profile-head{ display:flex; flex-direction:column; align-items:center; padding:24px 16px 18px; background:var(--bg); gap:8px; margin-bottom:10px; text-align:center; }
.profile-head .pn{ font-size:21px; font-weight:600; }
.profile-head .ps{ color:var(--muted); font-size:14px; }
.form{ padding:16px; background:var(--bg); margin-bottom:10px; }
.form .btn{ margin-top:6px; }
.form textarea{ width:100%; border:1px solid var(--sep); border-radius:12px; padding:12px; background:var(--bg); outline:none; min-height:110px; resize:vertical; font-size:15px; }
.form textarea:focus,.form select:focus{ border-color:var(--accent); }
.form select{ width:100%; height:48px; border:1px solid var(--sep); border-radius:12px; padding:0 12px; background:var(--bg); outline:none; margin-bottom:12px; font-size:15px; }
.doc{ padding:6px 18px 20px; background:var(--bg); line-height:1.55; font-size:14.5px; }
.doc h3{ font-size:16px; margin:18px 0 6px; }
.doc table{ border-collapse:collapse; width:100%; font-size:13.5px; } .doc td{ border:1px solid var(--sep); padding:6px 8px; vertical-align:top; }
.ticket-msg{ margin:8px 14px; padding:10px 12px; border-radius:12px; background:var(--bg); box-shadow:var(--shadow); font-size:14.5px; line-height:1.45; white-space:pre-wrap; }
.ticket-msg.staff{ background:var(--bubble-out); color:var(--bubble-out-text); margin-left:40px; }
.ticket-msg small{ display:block; color:var(--muted); font-size:12px; margin-bottom:3px; }
.pill{ display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; background:var(--panel); color:var(--muted); }
.pill.green{ background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok); }
.pill.blue{ background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); }

/* ── меню и модальные окна ── */
.backdrop{ position:fixed; inset:0; z-index:150; }
.backdrop.dim{ background:rgba(0,0,0,.4); }
.menu{ position:fixed; z-index:151; min-width:210px; background:var(--bg); border-radius:12px; box-shadow:0 6px 28px rgba(0,0,0,.25); padding:6px 0;
  animation:pop .12s ease-out; transform-origin:top left; }
@keyframes pop{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
.menu .mi{ display:flex; align-items:center; gap:16px; padding:10px 18px; cursor:pointer; font-size:15px; }
.menu .mi:hover{ background:var(--panel); }
.menu .mi svg{ width:20px; height:20px; color:var(--muted); }
.menu .mi.danger,.menu .mi.danger svg{ color:var(--danger); }
.menu .mh{ padding:6px 18px 8px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--sep); margin-bottom:4px; font-family:ui-monospace,Consolas,monospace; }
.modal{ position:fixed; z-index:151; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw,400px); max-height:86vh; overflow:auto;
  background:var(--bg); border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.3); padding:20px; animation:pop .14s ease-out; }
.modal h3{ margin:0 0 12px; font-size:18px; }
.modal .actions{ display:flex; justify-content:flex-end; gap:6px; margin-top:16px; }
.modal .actions button{ border:0; background:transparent; color:var(--accent); font-weight:600; padding:9px 14px; border-radius:8px; cursor:pointer; text-transform:uppercase; font-size:14px; }
.modal .actions button:hover{ background:var(--panel); }
.modal .actions button.danger{ color:var(--danger); }
.radio{ display:flex; align-items:center; gap:12px; padding:9px 2px; cursor:pointer; font-size:15px; }
.radio input{ width:18px; height:18px; accent-color:var(--accent); }
.modal textarea, .modal input[type=text]{ width:100%; border:1px solid var(--sep); border-radius:10px; padding:10px; background:var(--bg); outline:none; font-size:15px; }
.modal textarea{ min-height:70px; resize:vertical; margin-top:8px; }
.toast{ position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:rgba(30,30,30,.92); color:#fff; padding:10px 16px; border-radius:12px;
  font-size:14px; z-index:400; max-width:86vw; text-align:center; line-height:1.4; white-space:pre-line; opacity:0; transition:opacity .2s; pointer-events:none; }
.toast.show{ opacity:1; }
.viewer{ position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:300; display:flex; align-items:center; justify-content:center; cursor:zoom-out; }
.viewer img{ max-width:96vw; max-height:92vh; }
.spinner{ width:26px; height:26px; border:3px solid var(--panel); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin:30px auto; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.switch{ flex:0 0 auto; position:relative; display:inline-block; width:46px; height:27px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .sl{ position:absolute; inset:0; border-radius:27px; cursor:pointer; background:color-mix(in srgb, var(--text) 22%, transparent); transition:background .18s; }
.switch .sl::before{ content:""; position:absolute; width:23px; height:23px; left:2px; top:2px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s; }
.switch input:checked + .sl{ background:var(--accent); }
.switch input:checked + .sl::before{ transform:translateX(19px); }