/* ============ tokens ============ */
:root{
  --ff-ui:'Roboto','Segoe UI',system-ui,-apple-system,sans-serif;
  --ff-brand:'Manrope','Roboto',system-ui,sans-serif;

  --bg:#ffffff;
  --bg-secondary:#f4f4f5;
  --bg-hover:#f4f4f5;
  --bg-active:#3390ec;
  --surface-raised:#ffffff;
  --text:#101112;
  --text-secondary:#707579;
  --text-tertiary:#a2acb4;
  --primary:#3390ec;
  --primary-soft:#e8f2fd;
  --borders:#e6e8ea;
  --green:#4fae4e;
  --danger:#e15252;

  --chat-ground:#7d9c72;
  --chat-ground-2:#a8bf8f;
  --pattern:#ffffff;
  --pattern-op:.20;

  --bubble-in:#ffffff;
  --bubble-in-text:#101112;
  --bubble-out:#effedf;
  --bubble-out-text:#101112;
  --bubble-meta-out:#4fae4e;
  --quote-out:#4aa049;
  --bubble-shadow:0 1px 2px rgba(16,17,18,.14);
  --service-bg:rgba(24,42,20,.42);

  --r-bubble:15px;
  --r-panel:12px;
  --sidebar-w:26.5rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#212121; --bg-secondary:#2c2c2c; --bg-hover:#2c2c2c; --bg-active:#8774e1;
    --surface-raised:#2c2c2c;
    --text:#ffffff; --text-secondary:#a4a4a4; --text-tertiary:#7c7c7c;
    --primary:#8774e1; --primary-soft:#2e2842; --borders:#333333;
    --green:#7cd67c; --danger:#f2726f;
    --chat-ground:#111112; --chat-ground-2:#191a1d;
    --pattern:#8f8fa8; --pattern-op:.16;
    --bubble-in:#212121; --bubble-in-text:#ffffff;
    --bubble-out:#8774e1; --bubble-out-text:#ffffff;
    --bubble-meta-out:rgba(255,255,255,.66);
    --quote-out:#ffffff;
    --bubble-shadow:0 1px 2px rgba(0,0,0,.35);
    --service-bg:rgba(0,0,0,.42);
  }
}
:root[data-theme="dark"]{
  --bg:#212121; --bg-secondary:#2c2c2c; --bg-hover:#2c2c2c; --bg-active:#8774e1;
  --surface-raised:#2c2c2c;
  --text:#ffffff; --text-secondary:#a4a4a4; --text-tertiary:#7c7c7c;
  --primary:#8774e1; --primary-soft:#2e2842; --borders:#333333;
  --green:#7cd67c; --danger:#f2726f;
  --chat-ground:#111112; --chat-ground-2:#191a1d;
  --pattern:#8f8fa8; --pattern-op:.16;
  --bubble-in:#212121; --bubble-in-text:#ffffff;
  --bubble-out:#8774e1; --bubble-out-text:#ffffff;
  --bubble-meta-out:rgba(255,255,255,.66);
  --quote-out:#ffffff;
  --bubble-shadow:0 1px 2px rgba(0,0,0,.35);
  --service-bg:rgba(0,0,0,.42);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
.tick{width:1rem;height:.75rem;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
body{margin:0;font-family:var(--ff-ui);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:rgba(128,134,139,.4);border-radius:3px}
::-webkit-scrollbar-track{background:transparent}

/* ============ shell ============ */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100dvh;overflow:hidden}

/* ============ sidebar ============ */
.sidebar{display:flex;flex-direction:column;min-width:0;background:var(--bg);
  border-right:1px solid var(--borders);position:relative;z-index:2}
.side-top{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem .5rem 1rem}
.brand{display:flex;align-items:center;gap:.5rem;font-family:var(--ff-brand);font-weight:800;
  font-size:1.0625rem;letter-spacing:-.01em;padding-right:.25rem}
.brand .dot{width:1.625rem;height:1.625rem;border-radius:50%;display:grid;place-items:center;
  background:var(--primary);color:#fff;font-size:.9rem}
.icon-btn{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
  color:var(--text-secondary);flex:none;transition:background .12s,color .12s}
.icon-btn:hover{background:var(--bg-hover);color:var(--text)}
.icon-btn svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.search-row{padding:0 .75rem .375rem;display:flex;gap:.5rem;align-items:center}
.search{flex:1;display:flex;align-items:center;gap:.5rem;background:var(--bg-secondary);
  border-radius:1.375rem;padding:0 .875rem;height:2.625rem;min-width:0}
.search svg{width:1.25rem;height:1.25rem;fill:none;stroke:var(--text-tertiary);stroke-width:2;
  stroke-linecap:round;flex:none}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:.9375rem}
.search input::placeholder{color:var(--text-tertiary)}
.search .clear{display:none;color:var(--text-tertiary)}
.search.filled .clear{display:block}

.folders{display:flex;gap:.25rem;padding:0 .625rem;border-bottom:1px solid var(--borders);
  overflow-x:auto;scrollbar-width:none}
.folders::-webkit-scrollbar{display:none}
.folder{position:relative;padding:.625rem .5rem .6875rem;font-size:.875rem;font-weight:500;
  color:var(--text-secondary);white-space:nowrap;display:flex;align-items:center;gap:.375rem}
.folder[aria-selected="true"]{color:var(--primary)}
.folder[aria-selected="true"]::after{content:"";position:absolute;left:.375rem;right:.375rem;bottom:0;
  height:3px;border-radius:3px 3px 0 0;background:var(--primary)}
.folder .cnt{background:var(--text-tertiary);color:var(--bg);border-radius:.625rem;
  padding:0 .375rem;font-size:.75rem;font-weight:500;min-width:1.25rem;text-align:center}
.folder[aria-selected="true"] .cnt{background:var(--primary);color:#fff}

.chatlist{flex:1;overflow-y:auto;overflow-x:hidden;padding:.25rem .5rem .75rem}
.list-label{padding:.75rem .625rem .25rem;font-size:.75rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-tertiary)}
.chat-item{display:grid;grid-template-columns:3.375rem 1fr;gap:.625rem;padding:.5rem .625rem;
  border-radius:.625rem;cursor:pointer;width:100%;text-align:left;align-items:center}
.chat-item:hover{background:var(--bg-hover)}
.chat-item[aria-current="true"]{background:var(--bg-active)}
.chat-item[aria-current="true"] *{color:#fff !important}
.chat-item[aria-current="true"] .badge{background:#fff;color:var(--bg-active)}
.chat-item[aria-current="true"] .badge.muted{background:rgba(255,255,255,.5)}
.ci-body{min-width:0;display:grid;gap:.125rem}
.ci-row{display:flex;align-items:center;gap:.375rem;min-width:0}
.ci-name{font-weight:500;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.ci-time{font-size:.75rem;color:var(--text-secondary);flex:none;font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:.1875rem}
.ci-time .tick{width:.9375rem;height:.6875rem}
.ci-text{font-size:.9375rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:1;min-width:0}
.ci-text .who{color:var(--text);}
.ci-text .typing{color:var(--primary)}
.badge{background:var(--text-tertiary);color:var(--bg);font-size:.75rem;font-weight:500;
  min-width:1.5rem;height:1.5rem;border-radius:.75rem;display:grid;place-items:center;
  padding:0 .375rem;flex:none}
.badge:not(.muted){background:var(--primary);color:#fff}
.mini{width:1rem;height:1rem;flex:none;fill:none;stroke:var(--text-tertiary);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* avatars */
.av{width:3.375rem;height:3.375rem;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:500;font-size:1.25rem;position:relative;flex:none;user-select:none}
.av.sm{width:2.125rem;height:2.125rem;font-size:.8125rem}
.av.xs{width:1.5rem;height:1.5rem;font-size:.625rem}
.av.md{width:2.5rem;height:2.5rem;font-size:.9375rem}
.av .on{position:absolute;right:0;bottom:0;width:.875rem;height:.875rem;border-radius:50%;
  background:#31c447;border:2.5px solid var(--bg)}
.chat-item[aria-current="true"] .av .on{border-color:var(--bg-active)}

/* ============ chat pane ============ */
.pane{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--chat-ground)}
.pattern{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.5rem;
  text-align:center;padding:1rem}
.empty p{margin:0;background:var(--service-bg);color:#fff;padding:.4375rem 1rem;border-radius:1rem;
  font-size:.875rem}

.ch-head{position:relative;z-index:3;display:flex;align-items:center;gap:.75rem;
  padding:.5rem 1rem;height:3.5rem;background:var(--bg);border-bottom:1px solid var(--borders);flex:none}
.ch-head .who{min-width:0;flex:1;display:grid;gap:.0625rem;cursor:default}
.ch-title{font-weight:500;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-status{font-size:.8125rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-status.online,.ch-status.act{color:var(--primary)}
.back{display:none}

/* in-chat search bar */
.findbar{display:none;align-items:center;gap:.5rem;padding:.375rem .75rem;background:var(--bg);
  border-bottom:1px solid var(--borders);position:relative;z-index:3;flex:none}
.findbar.on{display:flex}
.findbar .search{height:2.25rem}
.find-count{font-size:.8125rem;color:var(--text-secondary);font-variant-numeric:tabular-nums;flex:none}

/* messages */
.msgs{position:relative;z-index:1;flex:1;overflow-y:auto;overflow-x:hidden;
  padding:1rem max(1rem,calc((100% - 47rem)/2)) .5rem;display:flex;flex-direction:column;gap:.125rem}
.day{align-self:center;background:var(--service-bg);color:#fff;font-size:.8125rem;font-weight:500;
  padding:.25rem .75rem;border-radius:1rem;margin:.75rem 0 .375rem;backdrop-filter:blur(6px)}
.service{align-self:center;background:var(--service-bg);color:#fff;font-size:.8125rem;
  padding:.25rem .75rem;border-radius:1rem;margin:.375rem 0;text-align:center;max-width:80%}
.unread-line{display:flex;align-items:center;gap:.75rem;color:#fff;font-size:.8125rem;
  background:var(--service-bg);padding:.25rem 1rem;border-radius:1rem;align-self:center;margin:.5rem 0}

.row{display:flex;align-items:flex-end;gap:.5rem;max-width:100%;position:relative;padding:.0625rem 0}
.row.out{flex-direction:row-reverse}
.row .slot{width:2.125rem;flex:none}
.row.sel{background:rgba(51,144,236,.16);border-radius:.5rem}
.msg{position:relative;max-width:min(30rem,72%);border-radius:var(--r-bubble);
  background:var(--bubble-in);color:var(--bubble-in-text);box-shadow:var(--bubble-shadow);
  padding:.375rem .625rem .375rem .625rem;font-size:.9375rem;line-height:1.3125rem;
  word-wrap:break-word;overflow-wrap:anywhere}
.row.out .msg{background:var(--bubble-out);color:var(--bubble-out-text)}
.row.grp-mid .msg,.row.grp-first .msg{border-bottom-left-radius:.375rem}
.row.out.grp-mid .msg,.row.out.grp-first .msg{border-bottom-left-radius:var(--r-bubble);border-bottom-right-radius:.375rem}
.row.grp-mid .msg,.row.grp-last .msg{border-top-left-radius:.375rem}
.row.out.grp-mid .msg,.row.out.grp-last .msg{border-top-left-radius:var(--r-bubble);border-top-right-radius:.375rem}
@supports (clip-path:path("M0 0")){
  .row.tail .msg::after{content:"";position:absolute;bottom:0;width:.5625rem;height:1.25rem;
    background:var(--bubble-in);left:-.5rem;clip-path:path("M9 20V0c0 8.5-3.2 16.4-9 20h9z")}
  .row.out.tail .msg::after{background:var(--bubble-out);left:auto;right:-.5rem;
    clip-path:path("M0 20V0c0 8.5 3.2 16.4 9 20H0z")}
}
.sender{font-size:.9375rem;font-weight:500;margin-bottom:.0625rem;display:block}
.txt{white-space:pre-wrap}
.txt mark{background:#ffd54a;color:#101112;border-radius:3px;padding:0 1px}
.meta{float:right;display:inline-flex;align-items:center;gap:.1875rem;margin:.375rem 0 -.125rem .5rem;
  font-size:.6875rem;color:var(--text-tertiary);line-height:1;font-variant-numeric:tabular-nums;
  position:relative;top:.375rem}
.row.out .meta{color:var(--bubble-meta-out)}
.meta .tick{width:1rem;height:.75rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.meta .edited{font-style:italic}

.reply-q{display:grid;gap:.0625rem;border-left:3px solid currentColor;padding:.125rem .5rem;
  margin:.125rem 0 .25rem;border-radius:3px;background:rgba(127,127,127,.08);cursor:pointer;
  max-width:100%;overflow:hidden}
.reply-q b{font-size:.8125rem;font-weight:500}
.reply-q span{font-size:.8125rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.out .reply-q span{color:inherit;opacity:.75}
.fwd{font-size:.8125rem;color:var(--primary);margin-bottom:.125rem}
.fwd b{font-weight:500;color:var(--text)}

.photo{margin:-.375rem -.625rem .25rem;border-radius:var(--r-bubble) var(--r-bubble) .25rem .25rem;
  overflow:hidden;display:block;width:19rem;max-width:100%;aspect-ratio:4/3;background:#c9d6c0}
.photo svg{display:block;width:100%;height:100%}
.file{display:flex;align-items:center;gap:.625rem;padding:.25rem 0 .375rem}
.file .ic{width:2.75rem;height:2.75rem;border-radius:50%;background:var(--primary);display:grid;
  place-items:center;flex:none}
.file .ic svg{width:1.375rem;height:1.375rem;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.file .fn{font-weight:500;font-size:.9375rem}
.file .fs{font-size:.8125rem;color:var(--text-secondary)}
.row.out .file .fs{color:inherit;opacity:.7}

.voice{display:flex;align-items:center;gap:.625rem;padding:.25rem 0 .375rem;min-width:14rem}
.voice .play{width:2.75rem;height:2.75rem;border-radius:50%;background:var(--primary);display:grid;
  place-items:center;flex:none}
.voice .play svg{width:1.25rem;height:1.25rem;fill:#fff}
.wave{display:flex;align-items:center;gap:2px;height:1.75rem;flex:1}
.wave i{display:block;width:2px;border-radius:1px;background:var(--text-tertiary);opacity:.55}
.wave i.on{background:var(--primary);opacity:1}
.row.out .wave i.on{background:currentColor}
.voice .dur{font-size:.8125rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}

.reacts{display:flex;flex-wrap:wrap;gap:.25rem;margin:.25rem 0 .125rem}
.react{display:inline-flex;align-items:center;gap:.25rem;background:rgba(51,144,236,.14);
  border-radius:1rem;padding:.125rem .4375rem;font-size:.8125rem;line-height:1.25rem;
  color:var(--primary);font-weight:500}
.react.me{background:var(--primary);color:#fff}
.row.out .react{background:rgba(79,174,78,.18);color:var(--green)}
.row.out .react.me{background:var(--green);color:#fff}

/* hover actions */
.hover-acts{position:absolute;bottom:.125rem;display:flex;gap:.25rem;opacity:0;pointer-events:none;
  transition:opacity .12s}
.row:not(.out) .hover-acts{left:calc(100% + .375rem)}
.row.out .hover-acts{right:calc(100% + .375rem)}
.row:hover .hover-acts,.hover-acts:focus-within{opacity:1;pointer-events:auto}
.hover-acts button{width:1.875rem;height:1.875rem;border-radius:50%;background:var(--bg);
  box-shadow:var(--bubble-shadow);display:grid;place-items:center;font-size:1rem;color:var(--text-secondary)}
.hover-acts button svg{width:1.0625rem;height:1.0625rem;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.hover-acts button:hover{background:var(--bg-secondary)}

/* scroll down */
.jump{position:absolute;right:1.25rem;bottom:5.75rem;z-index:4;width:3rem;height:3rem;border-radius:50%;
  background:var(--bg);box-shadow:0 2px 8px rgba(0,0,0,.22);display:grid;place-items:center;
  color:var(--text-secondary);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;transform:translateY(.5rem)}
.jump.on{opacity:1;pointer-events:auto;transform:none}
.jump svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.jump .badge{position:absolute;top:-.25rem;right:-.25rem}

/* ============ composer ============ */
.composer{position:relative;z-index:3;flex:none;background:var(--bg);border-top:1px solid var(--borders);
  padding:.5rem max(.75rem,calc((100% - 47rem)/2)) .625rem}
.reply-bar{display:none;align-items:center;gap:.625rem;padding:.375rem .25rem .5rem}
.reply-bar.on{display:flex}
.reply-bar .ic{color:var(--primary)}
.reply-bar .ic svg{width:1.375rem;height:1.375rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reply-bar .q{flex:1;min-width:0;border-left:3px solid var(--primary);padding-left:.5rem;display:grid}
.reply-bar .q b{font-size:.8125rem;color:var(--primary);font-weight:500}
.reply-bar .q span{font-size:.8125rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-row{display:flex;align-items:flex-end;gap:.5rem}
.c-field{flex:1;min-width:0;display:flex;align-items:flex-end;gap:.25rem;background:var(--bg-secondary);
  border-radius:1.375rem;padding:.1875rem .25rem .1875rem .25rem}
.c-field textarea{flex:1;min-width:0;border:0;background:none;outline:none;resize:none;
  font-size:.9375rem;line-height:1.375rem;padding:.625rem .25rem;max-height:9rem;overflow-y:auto}
.c-field textarea::placeholder{color:var(--text-tertiary)}
.send{width:3rem;height:3rem;border-radius:50%;background:var(--primary);color:#fff;display:grid;
  place-items:center;flex:none;transition:transform .12s}
.send:hover{transform:scale(1.06)}
.send svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ============ popovers ============ */
.pop{position:fixed;z-index:50;background:var(--surface-raised);border-radius:.625rem;
  box-shadow:0 4px 20px rgba(0,0,0,.22);padding:.25rem;min-width:11rem;display:none}
.pop.on{display:block}
.pop button{display:flex;align-items:center;gap:.75rem;width:100%;padding:.5rem .625rem;
  border-radius:.4375rem;font-size:.9375rem;text-align:left}
.pop button:hover{background:var(--bg-hover)}
.pop button.danger{color:var(--danger)}
.pop button svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.pop hr{border:0;border-top:1px solid var(--borders);margin:.25rem .5rem}

.quickreacts{position:fixed;z-index:51;background:var(--surface-raised);border-radius:1.5rem;
  box-shadow:0 4px 20px rgba(0,0,0,.22);padding:.3125rem .5rem;display:none;gap:.25rem}
.quickreacts.on{display:flex}
.quickreacts button{font-size:1.375rem;line-height:1;padding:.1875rem;border-radius:50%;transition:transform .12s}
.quickreacts button:hover{transform:scale(1.25)}

.emoji-pop{position:fixed;z-index:50;width:20.5rem;height:19rem;background:var(--surface-raised);
  border-radius:.875rem;box-shadow:0 4px 20px rgba(0,0,0,.22);display:none;flex-direction:column;overflow:hidden}
.emoji-pop.on{display:flex}
.emoji-tabs{display:flex;gap:.25rem;padding:.5rem .625rem .25rem;border-bottom:1px solid var(--borders)}
.emoji-tabs button{padding:.3125rem .5rem;border-radius:.5rem;font-size:.8125rem;color:var(--text-secondary)}
.emoji-tabs button[aria-selected="true"]{background:var(--primary-soft);color:var(--primary);font-weight:500}
.emoji-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:.125rem;padding:.5rem}
.emoji-grid button{font-size:1.5rem;line-height:1;aspect-ratio:1;border-radius:.5rem}
.emoji-grid button:hover{background:var(--bg-hover)}

/* select mode bar */
.selbar{display:none;align-items:center;gap:.75rem;padding:.5rem 1rem;height:3.5rem;background:var(--bg);
  border-bottom:1px solid var(--borders);position:relative;z-index:4;flex:none}
.selbar.on{display:flex}
.selbar .n{font-weight:500;flex:1}
.selbar .act{display:flex;align-items:center;gap:.375rem;padding:.4375rem .75rem;border-radius:.5rem;
  font-size:.9375rem;color:var(--primary)}
.selbar .act.danger{color:var(--danger)}
.selbar .act:hover{background:var(--bg-hover)}

/* modal */
.modal{position:fixed;inset:0;z-index:70;background:rgba(10,12,14,.45);display:grid;place-items:center;padding:1rem}
.modal-card{width:min(26rem,100%);max-height:calc(100dvh - 2rem);background:var(--surface-raised);
  border-radius:.875rem;box-shadow:0 12px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden}
.modal-card h2{margin:0;font-family:var(--ff-brand);font-size:1.125rem;font-weight:800}
.modal-head{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem}
.modal-body{padding:0 1rem 1rem;overflow-y:auto;display:grid;gap:.75rem}
.ng-name{display:flex;align-items:center;gap:.75rem}
.ng-name input{flex:1;min-width:0;background:var(--bg-secondary);border:1px solid var(--borders);
  border-radius:.625rem;padding:.6875rem .75rem;outline:none;font-size:.9375rem}
.ng-name input:focus{border-color:var(--primary)}
.ng-hint{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}
.ng-list{display:grid;gap:.125rem}
.ng-row{display:flex;align-items:center;gap:.75rem;padding:.4375rem .5rem;border-radius:.625rem;
  cursor:pointer;width:100%;text-align:left;font-size:.9375rem}
.ng-row:hover{background:var(--bg-hover)}
.ng-row .box{margin-left:auto;width:1.25rem;height:1.25rem;border-radius:50%;border:2px solid var(--text-tertiary);
  display:grid;place-items:center;flex:none}
.ng-row[aria-checked="true"] .box{background:var(--primary);border-color:var(--primary)}
.ng-row .box svg{width:.75rem;height:.75rem;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;
  stroke-linejoin:round;opacity:0}
.ng-row[aria-checked="true"] .box svg{opacity:1}
.modal-foot{display:flex;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--borders)}
.btn{padding:.5625rem 1rem;border-radius:.625rem;font-size:.9375rem;font-weight:500;color:var(--primary)}
.btn:hover{background:var(--bg-hover)}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{filter:brightness(1.06)}
.btn[disabled]{opacity:.45;pointer-events:none}

.toast{position:fixed;left:50%;bottom:2rem;transform:translate(-50%,1rem);background:#1c1c1e;color:#fff;
  padding:.625rem 1.125rem;border-radius:.625rem;font-size:.875rem;z-index:80;opacity:0;
  transition:opacity .2s,transform .2s;pointer-events:none;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.toast.on{opacity:1;transform:translate(-50%,0)}

.typing-dots{display:inline-flex;gap:2px;vertical-align:middle;margin-left:.25rem}
.typing-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:blink 1.2s infinite}
.typing-dots i:nth-child(2){animation-delay:.2s}
.typing-dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.pop-in{animation:popin .16s ease-out}
@keyframes popin{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s !important;transition-duration:.001s !important}}

/* ============ responsive ============ */
@media (max-width:60rem){
  .app{grid-template-columns:1fr}
  .sidebar{grid-column:1;grid-row:1}
  .pane{grid-column:1;grid-row:1;transform:translateX(100%);transition:transform .22s ease}
  .app.chat-open .pane{transform:none}
  .app.chat-open .sidebar{visibility:hidden}
  .back{display:grid}
  .msgs{padding-left:.625rem;padding-right:.625rem}
  .composer{padding-left:.625rem;padding-right:.625rem}
  .msg{max-width:85%}
  .hover-acts{display:none}
}

/* ============ локальные шрифты ============ */
/* Google Fonts не используем: из РФ домен доступен нестабильно, а PWA обязан
   подниматься офлайн. Файлы лежат в /fonts, CSP держим на font-src 'self'. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/manrope-600-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/manrope-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/manrope-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/manrope-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/manrope-800-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/manrope-800-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/manrope-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/manrope-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/roboto-400-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/roboto-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/roboto-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/roboto-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/roboto-500-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/roboto-500-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/roboto-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/roboto-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/roboto-700-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/roboto-700-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/roboto-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/roboto-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============ состояние связи ============ */
.offline{position:fixed;left:50%;top:0;transform:translateX(-50%);z-index:75;
  background:var(--danger);color:#fff;font-size:.8125rem;padding:.3125rem 1rem;
  border-radius:0 0 .625rem .625rem;box-shadow:0 2px 10px rgba(0,0,0,.25)}