/* LotController — Chat.
   One stylesheet for every chat surface (list, conversation, composer, pickers,
   Group Info, sheets, viewer). Built on the ZYKO tokens in style.css — no new
   palette. Mobile-first; ≥1024px is a workspace beside the desktop sidebar:
   list | conversation, with Group Info over the conversation (pushing it
   aside only at ≥1440). */

.chat-view [hidden], .chat-sheet [hidden], .chat-viewer [hidden], .member-contact-sheet [hidden] { display:none !important; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── Views ─────────────────────────────────────────────────────────────── */
.chat-view {
  position:fixed; inset:0 var(--shell-right) 0 var(--shell-left); z-index:9999; background:var(--bg);
  display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform .28s var(--ease); visibility:hidden;
}
.chat-view.active { transform:none; visibility:visible; }
@media (prefers-reduced-motion: reduce) { .chat-view { transition:none; } }
#chatRoomView.active { z-index:10000; }
#chatGroupInfoPanel.active { z-index:10001; }
#chatPickerView.active { z-index:10002; }
#chatDesktopEmpty { display:none; }

.chat-head, .chat-room-head, .chat-panel-head {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top));
  background:#fff; border-bottom:1px solid var(--border);
  position:relative; left:auto; right:auto; min-height:auto; border-radius:0; box-shadow:none;
}
.chat-head { justify-content:space-between; }
.chat-head .h-logo { flex:1; }
.chat-panel-head h2, .chat-picker-title { flex:1; margin:0; font-size:1rem; font-weight:800; color:var(--ink); }
.chat-picker-count { font-size:.72rem; font-weight:700; color:var(--primary); background:var(--primary-lite); padding:4px 10px; border-radius:20px; }

.chat-icon-btn { width:40px; height:40px; border-radius:50%; border:none; background:none; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; font-size:1.05rem; }
.chat-icon-btn:hover { background:var(--bg2); color:var(--ink); }
.chat-icon-btn:focus-visible, .chat-view button:focus-visible, .chat-sheet button:focus-visible, .chat-viewer button:focus-visible,
.chat-view a:focus-visible, .chat-bubble:focus-visible, .chat-feed:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.chat-pill-btn { border:none; background:var(--primary-lite); color:var(--primary); border-radius:20px; padding:8px 14px; font:inherit; font-size:.76rem; font-weight:800; cursor:pointer; min-height:36px; }

.chat-primary, .chat-secondary, .chat-danger {
  font:inherit; font-weight:700; font-size:.86rem; border-radius:var(--r); padding:12px 16px; cursor:pointer; min-height:44px;
}
.chat-primary { background:var(--primary); color:#fff; border:none; }
.chat-primary:disabled { opacity:.45; cursor:default; }
.chat-secondary { background:var(--bg2); color:var(--ink); border:1px solid var(--border); }
.chat-danger { background:var(--red-bg); color:#b91c1c; border:1px solid #fecaca; }
.chat-primary.small, .chat-secondary.small { padding:8px 12px; min-height:36px; font-size:.78rem; }
.block { width:100%; display:block; }
.chat-link-btn { background:none; border:none; color:var(--primary); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; padding:4px 6px; }

.chat-search-bar { display:flex; align-items:center; gap:8px; margin:10px 12px; padding:0 12px; background:var(--bg2); border-radius:22px; color:var(--muted); min-height:42px; }
.chat-search-bar input { flex:1; border:none; background:transparent; outline:none; font:inherit; font-size:16px; color:var(--ink); min-height:40px; }

.chat-spinner { width:14px; height:14px; border-radius:50%; border:2px solid var(--border2); border-top-color:var(--primary); display:inline-block; animation:spin .8s linear infinite; margin-right:8px; vertical-align:-2px; }
.chat-spinner.light { border-color:rgba(255,255,255,.35); border-top-color:#fff; }

/* ── Avatars ───────────────────────────────────────────────────────────── */
.chat-av, .chat-gav { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.78rem; overflow:hidden; background:var(--primary-lite); position:relative; }
.chat-av img, .chat-gav img { width:100%; height:100%; object-fit:cover; }
.chat-gav { width:48px; height:48px; font-size:1rem; }
.chat-gav.sm { width:34px; height:34px; font-size:.78rem; }
.chat-av.sm { width:28px; height:28px; font-size:.64rem; }
.chat-gav.xl, .chat-av.xl { width:76px; height:76px; font-size:1.5rem; }

/* ── Group list ────────────────────────────────────────────────────────── */
.chat-groups-list { flex:1; overflow-y:auto; background:#fff; overscroll-behavior:contain; }
.chat-list-row { display:flex; align-items:center; gap:12px; width:100%; padding:10px 14px; border:none; border-bottom:1px solid var(--border); background:#fff; text-align:left; font:inherit; cursor:pointer; min-height:68px; }
.chat-list-row:hover { background:var(--bg); }
.chat-list-row.active { background:var(--primary-lite); }
.chat-list-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.chat-list-top, .chat-list-bottom { display:flex; align-items:center; gap:8px; min-width:0; }
.chat-list-name { flex:1; min-width:0; font-weight:800; color:var(--ink); font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-list-time { font-size:.68rem; color:var(--muted); flex-shrink:0; }
.chat-list-row.unread .chat-list-time { color:var(--primary); font-weight:700; }
.chat-list-preview { flex:1; min-width:0; font-size:.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-list-row.unread .chat-list-preview { color:var(--ink2); font-weight:600; }
.chat-unread { min-width:22px; height:22px; padding:0 7px; border-radius:11px; background:var(--primary); color:#fff; font-size:.66rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-unread.muted { background:var(--muted2); }
.chat-muted-ico { display:inline-flex; color:var(--muted2); position:relative; }
.is-muted { position:relative; }
.is-muted::after { content:''; position:absolute; left:50%; top:50%; width:2px; height:72%; background:currentColor; transform:translate(-50%,-50%) rotate(-45deg); border-radius:1px; box-shadow:0 0 0 1.5px #fff; }
#chatMuteBtn.is-muted { color:var(--red); }
.chat-list-h { margin:0; padding:12px 16px 6px; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--bg); }
.chat-empty { padding:48px 28px; text-align:center; color:var(--muted); font-size:.86rem; line-height:1.5; }
.chat-empty.small { padding:24px 16px; }
.chat-empty-title { font-weight:800; color:var(--ink); font-size:1rem; margin-bottom:6px; }
.chat-empty .chat-primary { margin-top:16px; }
.chat-muted-note { padding:16px; color:var(--muted); font-size:.82rem; margin:0; }
.chat-results mark { background:#fde68a; color:inherit; border-radius:2px; padding:0 1px; }
.chat-result { display:flex; gap:12px; width:100%; padding:10px 14px; border:none; border-bottom:1px solid var(--border); background:#fff; text-align:left; font:inherit; cursor:pointer; }
.chat-result:hover { background:var(--bg); }
.chat-result-main { flex:1; min-width:0; }
.chat-result-top { display:flex; justify-content:space-between; gap:8px; }
.chat-result-where { font-weight:800; font-size:.84rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-result-when { font-size:.68rem; color:var(--muted); flex-shrink:0; }
.chat-result-text { display:block; font-size:.8rem; color:var(--ink2); margin-top:2px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* ── Conversation ──────────────────────────────────────────────────────── */
.chat-room-id { flex:1; min-width:0; display:flex; align-items:center; gap:10px; background:none; border:none; padding:4px; font:inherit; text-align:left; cursor:pointer; border-radius:10px; }
.chat-room-titles { min-width:0; display:flex; flex-direction:column; }
#chatRoomTitle { font-weight:800; font-size:.98rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#chatRoomSub { font-size:.7rem; color:var(--muted); min-height:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-room-actions { display:flex; align-items:center; gap:2px; }
.chat-room-search { background:#fff; border-bottom:1px solid var(--border); max-height:55vh; display:flex; flex-direction:column; flex-shrink:0; }
.chat-room-search .chat-search-bar { padding-right:4px; }
.chat-room-search .chat-results { overflow-y:auto; }

.chat-feed-wrap { flex:1; position:relative; min-height:0; }
.chat-feed { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; padding:8px 12px 12px; background:var(--bg2); overscroll-behavior:contain; outline:none; }
.chat-loading, .chat-load-error { padding:40px 20px; text-align:center; color:var(--muted); font-size:.84rem; }
.chat-start { text-align:center; color:var(--muted); font-size:.74rem; padding:14px 0 6px; }
.chat-start.empty { padding:48px 16px; font-size:.84rem; display:flex; flex-direction:column; gap:4px; }
.chat-start.empty strong { color:var(--ink); font-size:.95rem; }
.chat-sentinel { text-align:center; color:var(--muted); font-size:.74rem; padding:14px 0; }
.chat-day { pointer-events:none; }
.chat-day-sep { display:flex; justify-content:center; padding:8px 0 6px; }
.chat-day-sep span { background:rgba(255,255,255,.94); color:var(--muted); font-size:.68rem; font-weight:700; padding:4px 12px; border-radius:8px; box-shadow:var(--shadow-xs); }
.chat-unread-sep { display:flex; align-items:center; gap:10px; margin:10px 0; color:var(--primary); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.chat-unread-sep::before, .chat-unread-sep::after { content:''; flex:1; height:1px; background:var(--blue-mid); }

.chat-row { display:flex; align-items:flex-end; gap:8px; margin-top:8px; position:relative; }
.chat-row.grp-mid, .chat-row.grp-end { margin-top:2px; }
.chat-row.me { flex-direction:row-reverse; }
.chat-row-av, .chat-av-gap { width:30px; height:30px; font-size:.66rem; flex-shrink:0; }
.chat-col { display:flex; flex-direction:column; max-width:min(78%, 560px); min-width:0; }
.chat-row.me .chat-col { align-items:flex-end; }
.chat-bubble { position:relative; width:fit-content; max-width:100%; padding:7px 10px 6px 11px; border-radius:16px; font-size:.9rem; line-height:1.38; box-shadow:0 1px 1px rgba(11,27,61,.06); background:#fff; color:var(--ink); border:1px solid var(--border); overflow-wrap:anywhere; }
.chat-row.me .chat-bubble { background:var(--primary); color:#fff; border-color:transparent; }
.chat-row.other.grp-start .chat-bubble, .chat-row.other.grp-mid .chat-bubble { border-bottom-left-radius:6px; }
.chat-row.other.grp-mid .chat-bubble, .chat-row.other.grp-end .chat-bubble { border-top-left-radius:6px; }
.chat-row.me.grp-start .chat-bubble, .chat-row.me.grp-mid .chat-bubble { border-bottom-right-radius:6px; }
.chat-row.me.grp-mid .chat-bubble, .chat-row.me.grp-end .chat-bubble { border-top-right-radius:6px; }
.chat-row.local .chat-bubble { opacity:.82; }
.chat-row.flash .chat-bubble { animation:chatFlash 1.6s ease; }
@keyframes chatFlash { 0%, 30% { box-shadow:0 0 0 3px rgba(250,204,21,.9); } 100% { box-shadow:0 1px 1px rgba(11,27,61,.06); } }
.chat-name { font-size:.74rem; font-weight:800; margin-bottom:2px; }
.chat-text { white-space:pre-wrap; }
.chat-text.deleted { opacity:.6; }
.chat-text.meta-only { text-align:right; }
.chat-meta { float:right; margin:6px 0 -4px 10px; font-size:.64rem; color:var(--muted); display:inline-flex; gap:5px; align-items:center; white-space:nowrap; user-select:none; }
.chat-row.me .chat-meta { color:rgba(255,255,255,.78); }
.chat-edited { font-style:italic; }
.chat-state.failed { color:#fff; background:var(--red); border-radius:50%; width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; }
.chat-link { color:inherit; text-decoration:underline; }
.chat-mention { font-weight:800; color:var(--primary); background:var(--primary-lite); border-radius:4px; padding:0 2px; }
.chat-row.me .chat-mention { color:#fff; background:rgba(255,255,255,.2); }
.chat-quote { display:block; width:100%; text-align:left; font:inherit; cursor:pointer; border:none; border-left:3px solid var(--primary); background:var(--primary-lite); border-radius:8px; padding:5px 9px; margin:2px 0 6px; color:var(--ink2); }
.chat-row.me .chat-quote { background:rgba(255,255,255,.15); border-left-color:#fff; color:rgba(255,255,255,.92); }
.chat-quote.muted { cursor:default; }
.chat-quote-who { display:block; font-size:.7rem; font-weight:800; }
.chat-row.me .chat-quote-who { color:#fff !important; }
.chat-quote-text { display:block; font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.chat-reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; }
.chat-react-chip { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--border); background:#fff; border-radius:14px; padding:2px 8px; font:inherit; font-size:.8rem; cursor:pointer; min-height:28px; }
.chat-react-chip span { font-size:.7rem; font-weight:700; color:var(--muted); }
.chat-react-chip.mine { border-color:var(--primary); background:var(--primary-lite); }
.chat-failed { display:flex; align-items:center; gap:8px; margin-top:4px; font-size:.74rem; color:var(--red); }
.chat-failed button { border:none; background:none; font:inherit; font-weight:800; color:var(--primary); cursor:pointer; min-height:32px; }

/* Hover toolbar (desktop pointers) — touch uses the message sheet instead. */
.chat-tools { display:none; align-self:center; gap:2px; background:#fff; border:1px solid var(--border); border-radius:18px; padding:2px; box-shadow:var(--shadow-xs); }
.chat-tools button { width:30px; height:30px; border:none; border-radius:50%; background:none; cursor:pointer; color:var(--muted); font-size:.95rem; display:inline-flex; align-items:center; justify-content:center; }
.chat-tools button:hover { background:var(--bg2); color:var(--ink); }
@media (hover:hover) and (pointer:fine) {
  .chat-row:hover .chat-tools, .chat-row:focus-within .chat-tools { display:inline-flex; }
}

/* Media inside bubbles — the size is reserved before the image loads. */
.chat-media { display:grid; gap:3px; margin:-3px -6px 6px -7px; border-radius:12px; overflow:hidden; width:min(280px, 68vw); }
.chat-media.n2 { grid-template-columns:1fr 1fr; }
.chat-media.n3, .chat-media.n4 { grid-template-columns:1fr 1fr; }
.chat-media.n3 .chat-tile:first-child { grid-column:1 / -1; }
.chat-tile { position:relative; display:block; width:100%; padding:0; border:none; background:var(--bg3); cursor:pointer; overflow:hidden; max-height:340px; }
.chat-media:not(.n1) .chat-tile { aspect-ratio:1 / 1 !important; }
.chat-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.chat-play { position:absolute; inset:0; margin:auto; width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.chat-play.small { width:28px; height:28px; font-size:.7rem; }
.chat-dur { font-size:.66rem; font-variant-numeric:tabular-nums; }
.chat-tile .chat-dur { position:absolute; right:6px; bottom:6px; color:#fff; background:rgba(0,0,0,.5); padding:1px 6px; border-radius:8px; }
.chat-more { position:absolute; inset:0; background:rgba(0,0,0,.45); color:#fff; font-weight:800; font-size:1.3rem; display:flex; align-items:center; justify-content:center; }
.chat-up { position:absolute; left:8px; right:8px; bottom:8px; height:4px; border-radius:2px; background:rgba(255,255,255,.4); overflow:hidden; }
.chat-up span { display:block; height:100%; background:#fff; transition:width .2s; }
.chat-voice .chat-up, .chat-file .chat-up { position:static; flex:1; background:var(--border); }
.chat-voice .chat-up span, .chat-file .chat-up span { background:var(--primary); }
.att-failed { opacity:.3; }
.chat-voice { display:flex; align-items:center; gap:8px; min-width:0; width:min(260px, 62vw); margin:2px 0 4px; }
.chat-voice-play { width:36px; height:36px; border-radius:50%; border:none; background:var(--primary); color:#fff; cursor:pointer; flex-shrink:0; font-size:.8rem; }
.chat-row.me .chat-voice-play { background:#fff; color:var(--primary); }
.chat-wave { flex:1; min-width:0; display:flex; align-items:center; gap:2px; height:28px; overflow:hidden; }
.chat-wave i { flex:1; background:currentColor; opacity:.4; border-radius:1px; min-width:2px; max-width:4px; }
.chat-wave i.on { opacity:1; }
.chat-voice .chat-dur { font-size:.7rem; font-variant-numeric:tabular-nums; opacity:.85; flex-shrink:0; }
.chat-voice-rate { border:1px solid currentColor; background:none; color:inherit; font:inherit; font-size:.66rem; font-weight:800; border-radius:10px; padding:2px 6px; cursor:pointer; opacity:.8; white-space:nowrap; flex-shrink:0; min-width:32px; min-height:26px; }
.chat-file { display:flex; align-items:center; gap:10px; padding:8px 10px; margin:2px 0 6px; background:rgba(11,27,61,.05); border-radius:10px; text-decoration:none; color:inherit; min-width:200px; }
.chat-row.me .chat-file { background:rgba(255,255,255,.15); }
.chat-file-ext { width:38px; height:38px; border-radius:8px; background:var(--primary); color:#fff; font-size:.62rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-file-meta { min-width:0; display:flex; flex-direction:column; }
.chat-file-name { font-weight:700; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.chat-file-size { font-size:.68rem; opacity:.7; }

.chat-jump { position:absolute; right:14px; bottom:14px; width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:#fff; color:var(--primary); font-size:1.2rem; box-shadow:var(--shadow-sm); cursor:pointer; z-index:3; }
.chat-unsent-pill { position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:3; max-width:calc(100% - 32px); min-height:44px; padding:0 16px; border-radius:22px; border:1px solid var(--border); background:#fff; color:var(--red); font:inherit; font-size:.74rem; font-weight:800; box-shadow:var(--shadow-sm); cursor:pointer; white-space:nowrap; }
.chat-unsent-pill[hidden] { display:none; }
.chat-feed-wrap.has-unsent .chat-feed { padding-top:60px; }
.chat-unsent-show { color:var(--primary); }
.chat-list-unsent { flex-shrink:0; }
.chat-jump-count { position:absolute; top:-6px; right:-4px; min-width:20px; height:20px; border-radius:10px; background:var(--primary); color:#fff; font-size:.64rem; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.chat-typing { padding:4px 16px; font-size:.72rem; color:var(--muted); font-style:italic; background:var(--bg2); flex-shrink:0; }

/* ── Composer ──────────────────────────────────────────────────────────── */
.chat-composer { flex-shrink:0; background:#fff; border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom); position:relative; }
.chat-compose-row { display:flex; align-items:flex-end; gap:6px; padding:8px 10px; }
#chatInput { flex:1; resize:none; border:1px solid var(--border); background:var(--bg2); border-radius:20px; padding:10px 14px; font:inherit; font-size:16px; line-height:1.35; color:var(--ink); max-height:168px; min-height:42px; outline:none; overflow-y:auto; }
#chatInput:focus { border-color:var(--blue-mid); background:#fff; }
.chat-send { width:42px; height:42px; border-radius:50%; border:none; background:var(--primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.chat-send svg { width:20px; height:20px; }
.chat-send:disabled { opacity:.35; cursor:default; }
.chat-attach-btn { align-self:flex-end; }
.chat-char-count { font-size:.66rem; color:var(--muted); align-self:center; }
.chat-char-count.over { color:var(--red); font-weight:800; }
.chat-ctx-bar { display:flex; align-items:center; gap:8px; padding:8px 10px 0 14px; }
.chat-ctx-body { flex:1; min-width:0; border-left:3px solid var(--primary); padding-left:10px; display:flex; flex-direction:column; }
.chat-ctx-title { font-size:.72rem; font-weight:800; color:var(--primary); }
.chat-ctx-text { font-size:.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-tray { display:flex; gap:8px; padding:8px 12px 0; overflow-x:auto; align-items:center; }
.chat-tray-item { position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; background:var(--bg2); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.chat-tray-item img { width:100%; height:100%; object-fit:cover; }
.chat-tray-item button { position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; border:none; background:rgba(0,0,0,.6); color:#fff; font-size:.7rem; cursor:pointer; }
.chat-tray-ext { font-size:.7rem; font-weight:800; color:var(--primary); }
.chat-tray-count { font-size:.68rem; color:var(--muted); flex-shrink:0; }
.chat-picker { position:absolute; left:10px; right:10px; bottom:100%; max-height:260px; overflow-y:auto; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-md); margin-bottom:6px; z-index:5; padding:4px; }
.chat-opt { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:none; background:none; border-radius:10px; font:inherit; text-align:left; cursor:pointer; min-height:44px; }
.chat-opt.active, .chat-opt:hover { background:var(--primary-lite); }
.chat-opt-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.chat-opt-name { font-weight:700; font-size:.86rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-opt-sub { font-size:.7rem; color:var(--muted); }
.chat-opt-status { font-size:.68rem; color:var(--ink2); display:inline-flex; align-items:center; gap:4px; flex-shrink:0; }
.chat-opt-status i, .chat-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.chat-suggest { padding:8px 12px 0; }
#chatRoomView.drop .chat-feed-wrap::after { content:'Drop to attach'; position:absolute; inset:10px; border:2px dashed var(--primary); border-radius:16px; background:rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--primary); }

/* ── Panels (picker, Group Info) ───────────────────────────────────────── */
.chat-panel-body { flex:1; overflow-y:auto; background:var(--bg); overscroll-behavior:contain; }
.chat-panel-foot { flex-shrink:0; padding:12px 14px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--border); }
.chat-field { padding:12px 14px 0; display:flex; flex-direction:column; gap:6px; }
.chat-field label { font-size:.74rem; font-weight:800; color:var(--ink2); }
.chat-field input { font:inherit; font-size:16px; padding:11px 12px; border:1px solid var(--border2); border-radius:var(--r); background:#fff; color:var(--ink); }
.chat-chips { display:flex; gap:6px; padding:0 12px 10px; overflow-x:auto; scrollbar-width:none; }
.chat-chip { flex-shrink:0; border:1.5px solid var(--border); background:#fff; color:var(--muted); border-radius:18px; padding:6px 12px; font:inherit; font-size:.74rem; font-weight:700; cursor:pointer; min-height:34px; }
.chat-chip.on { border-color:var(--primary); color:var(--primary); background:var(--primary-lite); }
.chat-pick-row, .chat-member-row, .chat-add-row { display:flex; align-items:center; gap:12px; width:100%; padding:10px 14px; border:none; border-bottom:1px solid var(--border); background:#fff; font:inherit; text-align:left; cursor:pointer; min-height:60px; }
.chat-pick-row:hover, .chat-member-row:hover { background:var(--bg); }
.chat-pick-row.on { background:var(--primary-lite); }
.chat-pick-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.chat-pick-name { font-weight:700; font-size:.88rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-pick-sub { font-size:.72rem; color:var(--muted); display:inline-flex; align-items:center; gap:4px; }
.chat-check { width:24px; height:24px; border-radius:50%; border:2px solid var(--border2); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.8rem; flex-shrink:0; }
.chat-pick-row.on .chat-check { background:var(--primary); border-color:var(--primary); }
.chat-add-row { color:var(--primary); font-weight:800; min-height:52px; }
.chat-badge-admin { font-size:.6rem; font-weight:800; color:var(--primary); background:var(--primary-lite); border-radius:6px; padding:1px 6px; margin-left:4px; vertical-align:1px; }

.chat-info-head { text-align:center; padding:20px 16px 14px; background:#fff; }
.chat-info-av { position:relative; width:76px; margin:0 auto 10px; }
.chat-info-photo { position:absolute; right:-4px; bottom:-4px; width:32px; height:32px; border-radius:50%; border:2px solid #fff; background:var(--primary); color:#fff; cursor:pointer; font-size:.8rem; }
.chat-info-busy { position:absolute; inset:0; border-radius:50%; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; }
.chat-info-busy .chat-spinner { margin:0; }
.chat-info-name { margin:0; font-size:1.1rem; font-weight:800; color:var(--ink); }
.chat-info-meta { margin:4px 0 0; font-size:.76rem; color:var(--muted); }
.chat-rename { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.chat-rename input { font:inherit; font-size:16px; padding:8px 10px; border:1px solid var(--border2); border-radius:var(--r); min-width:0; flex:1; max-width:260px; }
.chat-info-section { background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-top:8px; }
.chat-toggle-row { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; }
.chat-toggle-row > span { flex:1; display:flex; flex-direction:column; }
.chat-toggle-title { font-weight:700; font-size:.88rem; color:var(--ink); }
.chat-toggle-sub { font-size:.72rem; color:var(--muted); }
.chat-toggle-row input { width:22px; height:22px; accent-color:var(--primary); }
.chat-tabs { display:flex; background:#fff; margin-top:8px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:1; }
.chat-tab { flex:1; padding:12px 6px; border:none; background:none; font:inherit; font-size:.82rem; font-weight:700; color:var(--muted); border-bottom:2.5px solid transparent; cursor:pointer; min-height:44px; }
.chat-tab.on { color:var(--primary); border-bottom-color:var(--primary); }
.chat-media-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; background:#fff; }
.chat-grid-tile { position:relative; aspect-ratio:1 / 1; border:none; padding:0; background:var(--bg3); cursor:pointer; overflow:hidden; }
.chat-grid-tile img { width:100%; height:100%; object-fit:cover; }
.chat-info-actions { display:flex; flex-direction:column; gap:8px; padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }

/* ── Contact sheet (Call / Text) ───────────────────────────────────────── */
.member-contact-sheet { position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,0); display:flex; align-items:flex-end; justify-content:center; transition:background .25s; pointer-events:none; }
.member-contact-sheet.open { background:rgba(0,0,0,.45); pointer-events:auto; }
.member-contact-inner { background:#fff; border-radius:22px 22px 0 0; padding:24px 20px calc(20px + env(safe-area-inset-bottom)); width:100%; max-width:480px; transform:translateY(100%); transition:transform .28s var(--ease); display:flex; flex-direction:column; gap:14px; }
.member-contact-sheet.open .member-contact-inner { transform:none; }
.chat-contact-head { text-align:center; }
.chat-contact-head .chat-av { margin:0 auto 10px; }
.chat-contact-head h2 { margin:0; font-size:1.1rem; color:var(--ink); }
.chat-contact-head p { margin:3px 0 0; color:var(--muted); font-size:.8rem; }
.chat-contact-status { display:inline-flex; align-items:center; gap:6px; }
.chat-contact-actions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.chat-contact-btn { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:72px; padding:10px 12px; border-radius:14px; background:var(--primary-lite); color:var(--primary); text-decoration:none; font-weight:800; font-size:.78rem; }
.chat-contact-btn span { font-size:1.2rem; }
.chat-contact-number { text-align:center; color:var(--ink2); font-size:.85rem; margin:0; user-select:all; }
.chat-contact-none { text-align:center; color:var(--muted); font-size:.8rem; margin:0; }
.chat-contact-admin { display:flex; flex-direction:column; gap:8px; }

/* ── Sheet (message actions, reactions, attach, confirm) ───────────────── */
.chat-sheet { position:fixed; inset:0; z-index:100001; background:rgba(0,0,0,.4); display:flex; align-items:flex-end; justify-content:center; }
.chat-sheet[hidden] { display:none; }
.chat-sheet-card { width:100%; max-width:440px; max-height:80vh; overflow-y:auto; background:#fff; border-radius:20px 20px 0 0; padding:14px 14px calc(14px + env(safe-area-inset-bottom)); transform:translateY(24px); opacity:0; transition:transform .2s var(--ease), opacity .2s; }
.chat-sheet.open .chat-sheet-card { transform:none; opacity:1; }
@media (min-width:768px) { .chat-sheet { align-items:center; } .chat-sheet-card { border-radius:18px; } }
.chat-sheet-title { margin:4px 4px 6px; font-size:1rem; font-weight:800; color:var(--ink); }
.chat-sheet-text { margin:0 4px 12px; color:var(--ink2); font-size:.86rem; line-height:1.45; }
.chat-sheet-row { display:flex; gap:8px; justify-content:flex-end; }
.chat-sheet-row > * { flex:1; }
.chat-sheet-meta { text-align:center; color:var(--muted); font-size:.72rem; margin:8px 0 2px; }
.chat-quick { display:flex; justify-content:space-around; padding:4px 0 10px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.chat-quick button { font-size:1.5rem; width:48px; height:48px; border-radius:50%; border:none; background:var(--bg2); cursor:pointer; }
.chat-quick button.on { background:var(--primary-lite); box-shadow:inset 0 0 0 2px var(--primary); }
.chat-menu { display:flex; flex-direction:column; }
.chat-menu button { text-align:left; border:none; background:none; font:inherit; font-size:.92rem; font-weight:600; color:var(--ink); padding:12px 10px; border-radius:10px; cursor:pointer; min-height:46px; }
.chat-menu button:hover { background:var(--bg2); }
.chat-menu button.danger { color:#b91c1c; }
.chat-reactor-group { padding:6px 4px; border-bottom:1px solid var(--border); }
.chat-reactor-emoji { font-weight:800; font-size:.9rem; display:block; margin-bottom:4px; }
.chat-reactor { display:flex; align-items:center; gap:10px; padding:4px 0; font-size:.86rem; color:var(--ink); }
.chat-reactor span { flex:1; }
.chat-sheet .block { margin-top:12px; }

/* ── Viewer ─────────────────────────────────────────────────────────────── */
.chat-viewer { position:fixed; inset:0; z-index:100002; background:#05070d; color:#fff; display:flex; flex-direction:column; }
.chat-viewer[hidden] { display:none; }
.chat-viewer-top { display:flex; align-items:center; gap:10px; padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top)); }
.chat-viewer-who { flex:1; font-size:.8rem; opacity:.8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-viewer-count { font-size:.76rem; opacity:.7; font-variant-numeric:tabular-nums; }
.chat-viewer-stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; }
.chat-viewer-media { max-width:100%; max-height:100%; object-fit:contain; transition:transform .12s; user-select:none; }
video.chat-viewer-media { transition:none; }
.chat-viewer-err { opacity:.75; }
.chat-viewer-btn { min-width:44px; height:44px; border-radius:22px; border:none; background:rgba(255,255,255,.14); color:#fff; font:inherit; font-weight:700; cursor:pointer; padding:0 14px; }
.chat-viewer-btn.wide { flex:1; max-width:180px; }
.chat-viewer-bar { display:flex; justify-content:center; gap:12px; padding:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
.chat-viewer-nav { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:64px; border:none; background:rgba(255,255,255,.1); color:#fff; font-size:2rem; cursor:pointer; border-radius:12px; }
.chat-viewer-nav.prev { left:10px; } .chat-viewer-nav.next { right:10px; }
.chat-viewer-nav:disabled { opacity:.2; cursor:default; }
@media (pointer:coarse) { .chat-viewer-nav { display:none; } }
body.chat-viewer-open { overflow:hidden; }

/* ── Desktop workspace ≥1024px: list | conversation | Group Info panel ─── */
@media (min-width:1024px) {
  body.chat-open #chatGroupsView { transform:none; visibility:visible; right:auto; width:320px; border-right:1px solid var(--border); z-index:9999; transition:none; }
  body.chat-open #chatRoomView { left:calc(320px + var(--shell-left)); transition:none; }
  body.chat-room-open #chatRoomView { transform:none; visibility:visible; z-index:9998; }
  body.chat-open:not(.chat-room-open) #chatRoomView { visibility:hidden; }
  body.chat-open:not(.chat-room-open) #chatDesktopEmpty {
    display:flex; position:fixed; inset:0 var(--shell-right) 0 calc(320px + var(--shell-left)); z-index:9998; background:var(--bg2); color:var(--muted);
    flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center;
  }
  #chatDesktopEmpty .cde-ico { width:56px; height:56px; opacity:.35; }
  #chatDesktopEmpty .cde-title { font-weight:800; color:var(--ink2); }
  body.chat-open #chatRoomView .chat-room-head > .back-btn { display:none; }
  /* Group Info (380px) lies OVER the conversation below 1440: at 1024 with
     the rail, pushing would leave the room 1024 − 72 − 320 − 380 = 252px. */
  #chatGroupInfoPanel, #chatPickerView { left:auto; width:380px; border-left:1px solid var(--border); box-shadow:var(--shadow-md); }
  .chat-col { max-width:min(70%, 620px); }
  .chat-media { width:320px; }
}
/* ≥1440 there is room for all three: Group Info pushes the conversation. */
@media (min-width:1440px) {
  body.chat-info-open #chatRoomView { right:calc(380px + var(--shell-right)); }
}

/* ── Voice recording (V3.1) ─────────────────────────────────────────── */
.chat-mic { background:var(--primary); }
.chat-rec-bar { display:flex; align-items:center; gap:10px; padding:8px 10px; min-height:58px; }
.chat-rec-bar[hidden] { display:none !important; }
.chat-rec-dot { --lvl:0; width:14px; height:14px; border-radius:50%; background:var(--red); box-shadow:0 0 0 calc(var(--lvl) * 10px) rgba(220,38,38,.18); transition:box-shadow .1s linear; flex-shrink:0; }
.chat-rec-time { font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); min-width:3.2em; }
.chat-rec-hint { flex:1; color:var(--muted); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (prefers-reduced-motion: reduce) { .chat-rec-dot { transition:none; } }

/* ── Vehicles in chat (V2) ──────────────────────────────────────────── */
.chat-suggest:not([hidden]) { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--ink2); }
.chat-suggest-text { flex:1; min-width:0; display:inline-flex; align-items:center; gap:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-suggest-text b { font-weight:700; color:var(--ink); }
.chat-icon-btn.sm { width:32px; height:32px; font-size:.8rem; }
.chat-veh-tray { display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px 0; }
.chat-veh-chip { display:inline-flex; align-items:center; gap:6px; max-width:100%; background:var(--blue-bg); color:var(--primary); border-radius:999px; padding:4px 4px 4px 10px; font-size:.78rem; font-weight:600; }
.chat-veh-chip > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-veh-chip button { border:none; background:transparent; color:inherit; width:28px; height:28px; border-radius:50%; cursor:pointer; flex-shrink:0; }
.chat-veh-chip button:hover { background:rgba(0,0,0,.06); }
.chat-opt-veh { width:30px; height:30px; border-radius:8px; background:var(--blue-bg); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-opt-hint { color:var(--muted); font-size:.82rem; padding:4px 2px; }
.chat-opt-name em { color:var(--red); font-style:normal; font-weight:600; }
.chat-veh-results { display:flex; flex-direction:column; gap:2px; margin:10px 0; max-height:50vh; overflow-y:auto; }
.chat-veh-result { display:flex; align-items:center; gap:10px; text-align:left; width:100%; border:none; background:transparent; padding:10px 8px; border-radius:10px; cursor:pointer; font:inherit; color:inherit; min-height:48px; }
.chat-veh-result:hover, .chat-veh-result:focus-visible { background:var(--bg2); }
.chat-input-field { width:100%; box-sizing:border-box; border:1.5px solid var(--border); border-radius:12px; padding:11px 13px; font:inherit; font-size:16px; background:var(--bg); color:var(--ink); }

.chat-vehicles { display:flex; flex-direction:column; gap:6px; margin:2px 0 4px; }
.vc { background:#fff; color:var(--ink); border:1px solid var(--border); border-radius:12px; overflow:hidden; min-width:0; }
.chat-row.me .vc { border-color:transparent; }
.vc-main { display:flex; gap:10px; padding:10px; min-width:0; }
.vc-photo { width:58px; height:58px; border-radius:9px; background:var(--bg2); color:var(--muted2); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.vc-photo img { width:100%; height:100%; object-fit:cover; }
.vc-body { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.vc-title { font-weight:800; font-size:.86rem; line-height:1.25; }
.vc-sub, .vc-ids { font-size:.72rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vc-ids { font-family:'IBM Plex Mono', ui-monospace, monospace; }
.vc-chip { display:inline-block; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:1px 6px; border-radius:6px; background:var(--bg2); color:var(--muted); vertical-align:middle; }
.vc-chip.sold { background:var(--red-bg); color:var(--red); }
.vc-loc { display:flex; align-items:flex-start; gap:4px; font-size:.72rem; color:var(--ink2); margin-top:2px; line-height:1.35; }
.vc-loc > .icon { flex-shrink:0; margin-top:1px; }
.vc-loc-txt { min-width:0; flex:1; }
@media (max-width: 360px) { .vc-photo { width:44px; height:44px; } .vc-main { gap:8px; padding:9px; } .vc-actions button { font-size:.68rem; } }
.vc-loc a { color:var(--primary); font-weight:600; text-decoration:none; }
.vc-loc a:hover { text-decoration:underline; }
.vc-loc.unknown { color:var(--muted2); }
.vc-loc-when { color:var(--muted); }
.vc-actions { display:flex; border-top:1px solid var(--border); }
.vc-actions button { flex:1; border:none; background:transparent; color:var(--primary); font:inherit; font-size:.72rem; font-weight:700; padding:9px 4px; cursor:pointer; min-height:40px; }
.vc-actions button + button { border-left:1px solid var(--border); }
.vc-actions button:hover, .vc-actions button:focus-visible { background:var(--bg2); }
.vc.gone { opacity:.85; }
.vc.loading .vc-photo { animation:vcPulse 1.2s ease-in-out infinite; }
@keyframes vcPulse { 50% { opacity:.5; } }
@media (prefers-reduced-motion: reduce) { .vc.loading .vc-photo { animation:none; } }

.vd-chat-mentions { margin:0 0 16px; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.vd-chat-head { display:flex; align-items:center; gap:6px; padding:10px 12px; font-size:.78rem; font-weight:800; color:var(--ink); background:var(--bg2); }
.vd-chat-item { display:grid; grid-template-columns:1fr auto; gap:2px 8px; width:100%; text-align:left; border:none; border-top:1px solid var(--border); background:#fff; padding:9px 12px; cursor:pointer; font:inherit; color:inherit; }
.vd-chat-item:hover, .vd-chat-item:focus-visible { background:var(--bg2); }
.vd-chat-where { font-size:.72rem; font-weight:700; color:var(--primary); }
.vd-chat-when { font-size:.68rem; color:var(--muted); grid-row:1; grid-column:2; }
.vd-chat-text { grid-column:1 / -1; font-size:.78rem; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Report Issue from a chat card opens over the conversation. */
body.chat-open #flagModal.open { z-index:100000; }

/* ── Pinned message (V3.4) + role mentions (V3.5) ───────────────────── */
.chat-pin-bar:not([hidden]) { display:flex; align-items:center; gap:4px; padding:4px 8px 4px 4px; background:#fff; border-bottom:1px solid var(--border); flex-shrink:0; }
.chat-pin-main { flex:1; min-width:0; display:flex; align-items:center; gap:8px; border:none; background:transparent; font:inherit; color:var(--ink2); text-align:left; padding:8px; border-radius:10px; cursor:pointer; min-height:40px; }
.chat-pin-main:hover, .chat-pin-main:focus-visible { background:var(--bg2); }
.chat-pin-main .icon { color:var(--primary); flex-shrink:0; }
.chat-pin-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8rem; }
.chat-pin-text b { color:var(--ink); }
.chat-opt-role { width:30px; height:30px; border-radius:50%; background:var(--blue-bg); color:var(--primary); font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── Group creation (people → details) ──────────────────────────────── */
.chat-step { flex:1; min-height:0; display:flex; flex-direction:column; }
.chat-step[hidden] { display:none !important; }
.chat-sel-chips:not([hidden]) { display:flex; gap:6px; padding:10px 12px; overflow-x:auto; scrollbar-width:none; background:#fff; border-bottom:1px solid var(--border); flex-shrink:0; }
.chat-sel-chips::-webkit-scrollbar { display:none; }
.chat-sel-chip { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; max-width:190px; background:#fff; border:1.5px solid var(--border); border-radius:999px; padding:3px 2px 3px 3px; font-size:.78rem; font-weight:700; color:var(--ink); }
.chat-sel-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.chat-sel-chip button { width:28px; height:28px; border:none; border-radius:50%; background:transparent; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.chat-sel-chip button:hover { background:var(--bg2); color:var(--ink); }
.chat-av.xs { width:24px; height:24px; font-size:.58rem; }
.chat-section-label { padding:14px 16px 6px; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.chat-picker-list .chat-empty.small .chat-link-btn { margin-top:6px; }
.chat-check { transition:background .12s, border-color .12s; }
.chat-check .icon { opacity:0; width:14px; height:14px; stroke-width:3; }
.chat-pick-row.on .chat-check .icon { opacity:1; }
.chat-pick-row.on { background:#fff; }
.chat-pick-row.on .chat-pick-name { color:var(--primary); }
.chat-pick-sub, .chat-new-member .chat-pick-sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.chat-cta { display:flex; align-items:center; justify-content:center; gap:10px; min-height:50px; }
.chat-cta .chat-cta-meta:not([hidden]) { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-weight:600; opacity:.9; font-size:.8rem; }
.chat-cta:has(.chat-cta-meta:not([hidden])) { justify-content:space-between; padding-left:20px; padding-right:18px; }
.chat-cta.busy { opacity:.8; cursor:progress; }
.chat-cta.busy .chat-cta-label::before { content:''; display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }

.chat-new-photo { display:flex; flex-direction:column; align-items:center; gap:2px; padding:24px 16px 8px; }
.chat-new-photo-btn { position:relative; width:96px; height:96px; border-radius:50%; border:none; padding:0; background:transparent; cursor:pointer; }
.chat-new-photo-img { width:96px; height:96px; border-radius:50%; background:var(--bg2); color:var(--muted); display:flex; align-items:center; justify-content:center; overflow:hidden; border:1.5px dashed var(--border2); }
.chat-new-photo-img .icon { width:30px; height:30px; }
.chat-new-photo-img img { width:100%; height:100%; object-fit:cover; }
.chat-new-photo-badge { position:absolute; right:0; bottom:2px; width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; border:3px solid var(--bg); }
.chat-new-photo-title { margin-top:10px; font-weight:800; font-size:.86rem; color:var(--ink); }
.chat-new-photo-hint { font-size:.74rem; color:var(--muted); }
.chat-name-field { padding-top:18px; }
.chat-input-wrap { position:relative; display:flex; }
.chat-input-wrap input { flex:1; min-width:0; padding-right:44px; }
.chat-input-clear { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:36px; height:36px; border:none; background:transparent; color:var(--muted); border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.chat-input-clear:hover { background:var(--bg2); }
.chat-field-hint { font-size:.72rem; color:var(--muted); }
.chat-new-members { margin:0 12px; background:#fff; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.chat-new-member { display:flex; align-items:center; gap:12px; padding:10px 12px; min-height:56px; }
.chat-new-member + .chat-new-member { border-top:1px solid var(--border); }
.chat-new-note { margin:10px 16px 20px; font-size:.74rem; color:var(--muted); }

.chat-empty-hero { padding:40px 24px 32px; max-width:420px; margin:0 auto; }
.chat-empty-art { position:relative; width:112px; height:96px; margin:0 auto 18px; }
.chat-empty-bubble, .chat-empty-people { position:absolute; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.chat-empty-bubble { left:0; top:0; width:76px; height:76px; background:var(--primary-lite); color:var(--primary); }
.chat-empty-bubble .icon { width:34px; height:34px; }
.chat-empty-people { right:0; bottom:0; width:58px; height:58px; background:var(--primary); color:#fff; border:4px solid #fff; }
.chat-empty-people .icon { width:26px; height:26px; }
.chat-empty-hero .chat-empty-title { font-size:1.2rem; margin:0 0 6px; }
.chat-empty-hero > p { margin:0 auto; max-width:30ch; font-size:.9rem; }
.chat-empty-cta { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; }
.chat-empty-values { list-style:none; margin:28px 0 0; padding:18px 0 0; border-top:1px solid var(--border); display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.chat-empty-values li { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.72rem; line-height:1.3; color:var(--ink2); }
.chat-empty-values .icon { width:22px; height:22px; color:var(--primary); }
#chatGroupsView .chat-search-bar[hidden] { display:none; }
.chat-new-photo-img:has(img) { border-style:solid; border-color:transparent; }
.chat-empty-values li { text-wrap:balance; }
.chat-head .h-logo { min-width:0; }
.chat-head .h-logo-wm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (min-width: 1024px) {
  #chatGroupsView .chat-head { gap:6px; }
  #chatGroupsView .chat-head .h-logo { gap:6px; }
  #chatGroupsView .chat-head .h-logo-wm { font-size:1.1rem; overflow:visible; }
  #chatGroupsView .chat-pill-btn { padding:8px 11px; }
  #chatPickerView .chat-chips { flex-wrap:wrap; overflow:visible; }
}