/* Chat — Messaging (js/chat/**). Names use .chat-*; buttons/inputs reuse .btn/.inv-input, dialogs/toggles
   css/components.css's own. Logical properties throughout so Arabic (dir=rtl) flips without a second pass in
   rtl.css. Follows the Live podcast's look (css/live.css's card/bubble shapes) with Alnokhba Hub's tokens —
   no design board for this module yet (docs/chat-messaging-plan.md). */

:root {
  --chat-bubble-mine: var(--accent-soft-bg, color-mix(in srgb, var(--accent) 16%, var(--surface-1)));
  --chat-bubble-mine-border: var(--accent-soft-border, color-mix(in srgb, var(--accent) 30%, var(--border)));
  --chat-bubble: var(--surface-2);
  --chat-radius: var(--radius-lg, 14px);
}

/* ---------------------------------------------------------------------- app shell (owner) */
.chat-owner-page[hidden] { display: none; }
.chat-app { display: flex; flex-direction: column; height: calc(100vh - 64px); color: var(--text); font-family: var(--font-ui, system-ui, sans-serif); }
.chat-owner-app { flex-direction: row; }
.chat-owner-nav { display: flex; flex-direction: column; flex: none; border-inline-end: 1px solid var(--border); padding: 10px; }
.chat-owner-tabs { display: flex; flex-direction: column; gap: 4px; width: 160px; }
.chat-owner-tab { text-align: start; padding: 8px 10px; border: none; border-radius: 8px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.chat-owner-tab:hover { background: var(--surface-2); }
.chat-owner-tab.is-active { background: var(--accent-soft-bg); color: var(--text); font-weight: 600; }
.chat-owner-panel-host { flex: 1; min-width: 0; overflow: auto; }
.chat-owner-thread-host[hidden] { display: none; }
.chat-owner-thread-host { flex: 2; min-width: 0; border-inline-start: 1px solid var(--border); }
/* a room's thread open: the rooms list stays, its settings step aside until "back" */
.chat-owner-app.has-thread .chat-owner-room-detail { display: none; }
.chat-owner-app.has-thread .chat-owner-panel-host { flex: none; }

.chat-owner-rooms { display: flex; height: 100%; }
.chat-owner-sidebar { width: 280px; flex: none; border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; overflow: auto; padding: 10px; gap: 10px; }
.chat-owner-sidebar-head { display: flex; align-items: center; justify-content: space-between; }
.chat-owner-sidebar-head h2 { margin: 0; font-size: 15px; }
.chat-owner-room-list { display: flex; flex-direction: column; gap: 2px; }
.chat-owner-room-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: none; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.chat-owner-room-item:hover { background: var(--surface-2); }
.chat-owner-room-item.is-active { background: var(--accent-soft-bg); }
.chat-owner-room-meta { color: var(--muted); font-size: 11px; flex: none; }
.chat-owner-personal-link { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.chat-owner-personal-link h3 { margin: 0; font-size: 13px; }
.chat-owner-personal-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-owner-qr[hidden] { display: none; }
.chat-owner-qr svg { width: 140px; height: 140px; }
.chat-owner-room-detail { flex: 1; min-width: 0; overflow: auto; padding: 16px; }
.chat-owner-field { display: flex; flex-direction: column; gap: 4px; margin-block-end: 10px; max-width: 420px; }
.chat-owner-toggle { display: flex; align-items: center; gap: 8px; margin-block-end: 8px; }
.chat-owner-room-link a { word-break: break-all; }
.chat-owner-open-row { margin-block-start: 16px; }
.chat-owner-invites { margin-block-start: 20px; max-width: 520px; }
.chat-owner-invite-add { display: flex; gap: 6px; margin-block-end: 8px; flex-wrap: wrap; }
.chat-owner-invite-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.chat-owner-invite-devices { color: var(--muted); font-size: 12px; flex: 1; }
.chat-owner-conversations { padding: 16px; }
.chat-owner-conv-list { display: flex; flex-direction: column; gap: 2px; max-width: 480px; }
.chat-owner-conv-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.chat-owner-conv-item:hover { background: var(--surface-2); }
.chat-owner-conv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-owner-conv-preview { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-owner-conv-via { color: var(--muted); font-size: 11px; }
.home-card-icon-chat { border-radius: var(--radius-lg); background: var(--brand-soft); color: var(--brand); }
.home-card-icon-chat svg { width: 28px; height: 28px; }

/* ---------------------------------------------------------------------- thread (shared: owner + public) */
.chat-thread { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg); }
.chat-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-1); }
.chat-header-back { margin-inline-end: 2px; }
.chat-header-title { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header-spacer { flex: 1; }
.chat-call-btn:disabled { opacity: .4; cursor: not-allowed; }
.chat-banner { padding: 6px 14px; font-size: 13px; text-align: center; }
.chat-banner.is-warn { background: var(--warning-soft); color: var(--warning); }
.chat-banner.is-danger { background: var(--danger-soft); color: var(--danger-text, var(--danger)); }
.chat-search-panel[hidden] { display: none; }
.chat-search-panel { padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-1); }
.chat-search-input { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; }
.chat-search-results { margin-block-start: 8px; display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; }
.chat-search-hit { display: flex; flex-direction: column; align-items: start; gap: 2px; padding: 6px 8px; border: none; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.chat-search-hit:hover { background: var(--surface-2); }
.chat-search-hit-text { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.chat-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: 13px; font-weight: 600; flex: none; position: relative; }
.chat-avatar.is-online::after { content: ""; position: absolute; inset-inline-end: -2px; inset-block-end: -2px; width: 9px; height: 9px; border-radius: 999px; background: var(--success); border: 2px solid var(--surface-1); }

/* ---------------------------------------------------------------------- the message list */
.chat-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 14px; outline: none; }
.chat-spacer { width: 1px; }
.chat-rows { display: flex; flex-direction: column; gap: 2px; }
.chat-day { display: flex; justify-content: center; margin-block: 10px; }
.chat-day span { background: var(--surface-2); color: var(--muted); font-size: 12px; padding: 3px 12px; border-radius: 999px; }
.chat-new-divider { display: flex; align-items: center; gap: 8px; margin-block: 10px; color: var(--accent); font-size: 12px; }
.chat-new-divider::before, .chat-new-divider::after { content: ""; flex: 1; height: 1px; background: var(--accent-soft-border, var(--border)); }

.chat-msg { display: flex; flex-direction: column; gap: 2px; padding-block: 1px; margin-block-start: 2px; max-width: 78%; }
.chat-msg.is-mine { align-self: end; align-items: end; }
.chat-msg.is-first { margin-block-start: 8px; }
.chat-msg.is-highlight .chat-bubble { animation: chat-pulse 1.4s ease; }
@keyframes chat-pulse { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--accent); } }
.chat-author { display: flex; align-items: center; gap: 6px; margin-inline-start: 2px; margin-block-end: 2px; }
.chat-author-name { font-size: 12px; font-weight: 600; color: var(--muted); }
.chat-tag { font-size: 10px; padding: 1px 6px; border-radius: 999px; }
.chat-tag-host { background: var(--accent-soft-bg); color: var(--accent); }
.chat-msg-line { display: flex; align-items: flex-end; gap: 4px; }
.chat-msg.is-mine .chat-msg-line { flex-direction: row-reverse; }
.chat-bubble { background: var(--chat-bubble); border: 1px solid var(--border); border-radius: var(--chat-radius); padding: 7px 11px; min-width: 42px; max-width: 100%; }
.chat-msg.is-mine .chat-bubble { background: var(--chat-bubble-mine); border-color: var(--chat-bubble-mine-border); }
.chat-msg.is-local .chat-bubble { opacity: .75; }
.chat-text { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; }
.chat-text.is-deleted { color: var(--muted); font-style: italic; }
.chat-code { background: var(--surface-3); border-radius: 4px; padding: 0 4px; font-family: var(--font-mono, monospace); font-size: 13px; }
.chat-link { color: var(--accent); text-decoration: underline; word-break: break-all; }
.chat-mention { background: var(--info-soft); color: var(--info); border-radius: 4px; padding: 0 3px; unicode-bidi: isolate; }
.chat-quote { display: block; width: 100%; box-sizing: border-box; text-align: start; background: color-mix(in srgb, currentColor 6%, transparent); border-inline-start: 3px solid var(--accent); border-radius: 6px; padding: 4px 8px; margin-block-end: 4px; cursor: pointer; }
.chat-quote-name { display: block; font-size: 12px; font-weight: 600; color: var(--accent); }
.chat-quote-text { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-meta { display: flex; align-items: center; gap: 4px; margin-block-start: 2px; justify-content: flex-end; }
.chat-edited, .chat-time { font-size: 11px; color: var(--muted); }
.chat-pinned-mark { color: var(--accent); display: inline-flex; }
.chat-pinned-mark svg, .chat-status svg { width: 13px; height: 13px; }
.chat-status.is-sent, .chat-status.is-sending { color: var(--muted); display: inline-flex; }
.chat-status.is-seen { color: var(--accent); display: inline-flex; }
.chat-status.is-failed { display: inline-flex; align-items: center; gap: 4px; color: var(--danger-text, var(--danger)); font-size: 11px; }
.chat-link-btn { background: none; border: none; color: inherit; text-decoration: underline; font: inherit; font-size: 11px; cursor: pointer; padding: 0; }
.chat-tools { display: none; align-items: center; gap: 2px; align-self: center; }
.chat-msg:hover .chat-tools, .chat-msg:focus-within .chat-tools { display: flex; }
.chat-tool { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: 999px; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.chat-tool:hover { background: var(--surface-3); color: var(--text); }
.chat-tool svg { width: 14px; height: 14px; }
.chat-reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-inline-start: 4px; }
.chat-reaction { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text); font-size: 12px; cursor: pointer; }
.chat-reaction.is-mine { border-color: var(--accent); background: var(--accent-soft-bg); }

/* attachments */
.chat-atts { display: flex; flex-direction: column; gap: 4px; }
.chat-att.is-loading, .chat-att.is-missing { min-width: 120px; min-height: 60px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
.chat-photo { display: block; border: none; background: none; padding: 0; cursor: pointer; border-radius: 10px; overflow: hidden; max-width: 260px; }
.chat-photo img { display: block; max-width: 100%; border-radius: 10px; }
.chat-caption { margin: 4px 0 0; font-size: 13px; }
.chat-file { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); padding: 4px 2px; }
.chat-file-icon, .chat-file-dl { color: var(--accent); flex: none; }
.chat-file-icon svg, .chat-file-dl svg { width: 22px; height: 22px; }
.chat-file-text { display: flex; flex-direction: column; min-width: 0; }
.chat-file-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-size { font-size: 11px; color: var(--muted); }
.chat-sticker { width: 120px; height: 120px; object-fit: contain; }
.chat-sticker.is-missing { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; color: var(--muted); font-size: 12px; background: var(--surface-2); border-radius: 10px; }

/* voice notes */
.chat-voice { display: flex; align-items: center; gap: 8px; min-width: 220px; }
.chat-voice-play { width: 34px; height: 34px; border-radius: 999px; border: none; background: var(--accent); color: var(--on-brand, #fff); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.chat-voice-play svg { width: 16px; height: 16px; }
.chat-wave { flex: 1; height: 28px; display: flex; align-items: center; gap: 1px; cursor: pointer; }
.chat-wave i { display: block; flex: 1; min-width: 2px; border-radius: 1px; background: var(--border-strong, var(--border)); }
.chat-wave i.is-played { background: var(--accent); }
.chat-voice-time { font-size: 11px; color: var(--muted); min-width: 34px; }
.chat-voice-rate { border: none; background: var(--surface-2); border-radius: 999px; padding: 2px 7px; font-size: 11px; color: var(--text); cursor: pointer; }

/* video notes (round, WhatsApp-style) */
.chat-vnote { position: relative; width: 180px; height: 180px; border-radius: 999px; overflow: hidden; border: none; padding: 0; cursor: pointer; background: #000; }
.chat-vnote-video { width: 100%; height: 100%; object-fit: cover; }
.chat-vnote-ring { position: absolute; inset: 0; border-radius: 999px; border: 3px solid transparent; background: conic-gradient(var(--accent) calc(var(--p, 0) * 360deg), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
.chat-vnote-sound { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; width: 24px; height: 24px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; display: flex; align-items: center; justify-content: center; }
.chat-vnote-sound svg { width: 13px; height: 13px; }
.chat-vnote.is-sound .chat-vnote-sound { background: var(--accent); }

/* ---------------------------------------------------------------------- typing, pinned */
.chat-typing { margin: 2px 4px; font-size: 12px; color: var(--muted); min-height: 16px; }
.chat-typing[hidden] { display: none; }
.chat-pinned-bar[hidden] { display: none; }
.chat-pinned-bar { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--border); background: var(--accent-soft-bg); }
.chat-pinned-open { flex: 1; display: flex; align-items: center; gap: 6px; border: none; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; min-width: 0; }
.chat-pinned-open svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.chat-pinned-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

/* ---------------------------------------------------------------------- composer */
.chat-composer { border-top: 1px solid var(--border); background: var(--surface-1); padding: 8px 12px; }
.chat-reply-preview[hidden] { display: none; }
.chat-reply-preview { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 8px; padding: 6px 10px; margin-block-end: 6px; }
.chat-reply-preview-body { flex: 1; min-width: 0; }
.chat-reply-preview-name { display: block; font-size: 12px; font-weight: 600; color: var(--accent); }
.chat-reply-preview-text { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-input { flex: 1; resize: none; max-height: 160px; border: 1px solid var(--border); border-radius: 18px; padding: 9px 14px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; line-height: 1.4; }
.chat-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.chat-send { background: var(--accent); color: var(--on-brand, #fff); border-radius: 999px; width: 38px; height: 38px; }
.chat-composer-bar { display: flex; align-items: center; gap: 4px; margin-block-start: 6px; }
.chat-composer-spacer { flex: 1; }
.chat-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.chat-icon-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.chat-icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.chat-icon-btn svg { width: 19px; height: 19px; }
.chat-icon-btn.is-danger { color: var(--danger-text, var(--danger)); }
.chat-hold { touch-action: none; }
.chat-mention-menu[hidden] { display: none; }
.chat-mention-menu { position: absolute; z-index: 5; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-popover, var(--shadow-md)); padding: 4px; margin-block-end: 6px; max-height: 180px; overflow: auto; }
.chat-mention-item { display: block; width: 100%; text-align: start; padding: 6px 10px; border: none; background: none; color: var(--text); font: inherit; border-radius: 6px; cursor: pointer; }
.chat-mention-item:hover, .chat-mention-item[aria-selected="true"] { background: var(--surface-2); }

/* ---------------------------------------------------------------------- record overlays */
.chat-record-overlay { position: absolute; inset-inline: 10px; inset-block-end: 70px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-popover, var(--shadow-md)); padding: 10px 12px; z-index: 6; }
.chat-record-row { display: flex; align-items: center; gap: 8px; }
.chat-record-wave { flex: 1; height: 32px; }
.chat-record-time { font-size: 12px; color: var(--muted); min-width: 36px; }
.chat-record-hint { margin: 6px 0 0; font-size: 11px; color: var(--muted); text-align: center; }
.chat-record-stop, .chat-record-cancel { flex: none; }

.chat-vnote-capture { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.chat-vnote-frame { position: relative; }
.chat-vnote-preview { width: min(70vw, 360px); height: min(70vw, 360px); border-radius: 999px; object-fit: cover; transform: scaleX(-1); background: #111; }
.chat-vnote-capture .chat-vnote-time { position: absolute; inset-block-start: 10px; inset-inline-start: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .5); color: #fff; padding: 2px 10px; border-radius: 999px; }
.chat-vnote-controls { display: flex; gap: 12px; }
.chat-vnote-record, .chat-vnote-controls .chat-icon-btn { width: 56px; height: 56px; background: #fff; color: #c00; }
.chat-vnote-capture .chat-vnote-close, .chat-vnote-capture > .chat-icon-btn:last-child { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; color: #fff; }

/* ---------------------------------------------------------------------- member drawer */
.chat-member-drawer[hidden] { display: none; }
.chat-member-drawer { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(320px, 90vw); background: var(--surface-1); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-popover, var(--shadow-md)); z-index: 7; display: flex; flex-direction: column; }
.chat-member-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.chat-member-head h2 { margin: 0; font-size: 15px; }
.chat-member-list { flex: 1; overflow: auto; padding: 8px; }
.chat-member-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.chat-member-row:hover { background: var(--surface-2); }
.chat-member-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-member-role { font-size: 11px; color: var(--accent); }
.chat-member-actions { display: flex; gap: 2px; }

/* ---------------------------------------------------------------------- popovers, menus, dialogs */
.chat-popover { position: fixed; z-index: 30; }
.chat-menu { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-popover, var(--shadow-md)); padding: 4px; min-width: 160px; }
.chat-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: start; border-radius: 6px; cursor: pointer; }
.chat-menu-item:hover { background: var(--surface-2); }
.chat-menu-item.is-danger { color: var(--danger-text, var(--danger)); }
.chat-menu-item svg { width: 16px; height: 16px; flex: none; }
.chat-reaction-quick { display: flex; gap: 4px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 999px; padding: 4px; box-shadow: var(--shadow-popover, var(--shadow-md)); }
.chat-reaction-quick-item { width: 32px; height: 32px; border: none; background: none; border-radius: 999px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-reaction-quick-item:hover { background: var(--surface-2); }
.chat-reaction-more { color: var(--muted); font-weight: 700; }

.chat-dialog { border: 1px solid var(--border); border-radius: 14px; padding: 18px; max-width: min(420px, 92vw); box-shadow: var(--shadow-dialog, var(--shadow-md)); color: var(--text); background: var(--surface-1); }
.chat-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.chat-dialog-title { margin: 0 0 10px; font-size: 16px; }
.chat-dialog-body { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.chat-dialog-textarea { width: 100%; box-sizing: border-box; min-height: 90px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--surface-2); color: var(--text); font: inherit; margin-block-end: 14px; }
.chat-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.chat-dialog-actions .is-danger { background: var(--danger, #dc2626); border-color: var(--danger, #dc2626); color: #fff; }

.chat-emoji-or-sticker, .chat-emoji-picker, .chat-sticker-picker { width: min(320px, 92vw); background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-popover, var(--shadow-md)); padding: 8px; }
.chat-picker-tabs { display: flex; gap: 4px; margin-block-end: 6px; }
.chat-picker-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px; border: none; border-radius: 8px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.chat-picker-tab.is-active { background: var(--accent-soft-bg); color: var(--text); }
.chat-picker-tab svg { width: 14px; height: 14px; }
.chat-emoji-search, .chat-search-input { width: 100%; box-sizing: border-box; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; margin-block-end: 6px; }
.chat-emoji-tones { display: flex; gap: 2px; margin-block-end: 6px; }
.chat-emoji-tone { border: none; background: none; border-radius: 6px; padding: 2px 4px; font-size: 16px; cursor: pointer; opacity: .55; }
.chat-emoji-tone.is-active { opacity: 1; background: var(--surface-2); }
.chat-emoji-grid, .chat-sticker-grid { max-height: 260px; overflow: auto; }
.chat-emoji-cat { font-size: 11px; color: var(--muted); margin: 6px 4px 2px; }
.chat-emoji-row { display: flex; flex-wrap: wrap; }
.chat-emoji-item { width: 34px; height: 34px; border: none; background: none; font-size: 20px; border-radius: 6px; cursor: pointer; }
.chat-emoji-item:hover { background: var(--surface-2); }
.chat-sticker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chat-sticker-item { border: none; background: var(--surface-2); border-radius: 10px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-sticker-item img { width: 56px; height: 56px; }

.chat-lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.chat-lightbox-img { max-width: 92vw; max-height: 82vh; object-fit: contain; }
.chat-lightbox-caption { color: #fff; font-size: 14px; max-width: 80vw; text-align: center; }
.chat-lightbox-close { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; color: #fff; }

.chat-toast { position: fixed; inset-block-end: 20px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; box-shadow: var(--shadow-popover, var(--shadow-md)); z-index: 80; font-size: 13px; }
.chat-toast.is-error { border-color: var(--danger-border, var(--danger)); color: var(--danger-text, var(--danger)); }

/* ---------------------------------------------------------------------- public page */
body.chat-public { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui, var(--font-sans), system-ui, sans-serif); }
.chat-skip { position: absolute; inset-inline-start: -9999px; }
.chat-skip:focus { inset-inline-start: 8px; inset-block-start: 8px; z-index: 100; background: var(--surface-1); padding: 8px 12px; border-radius: 8px; }
.chat-public-main { min-height: 100vh; display: flex; }
.chat-public-main[aria-busy="true"] { align-items: center; justify-content: center; }
.chat-public-thread { flex: 1; min-width: 0; }
.chat-state { color: var(--muted); text-align: center; width: 100%; padding: 40px 20px; }
.chat-state-error { color: var(--danger-text, var(--danger)); }
.chat-public-card { margin: auto; width: min(420px, 92vw); padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-xl, 18px); background: var(--surface-1); box-shadow: var(--shadow-panel, var(--shadow-md)); }
.chat-public-form { display: flex; flex-direction: column; gap: 4px; }
.chat-public-title { margin: 0 0 4px; font-size: 20px; }
.chat-public-desc { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.chat-public-label { font-size: 12px; color: var(--muted); margin-block-start: 8px; }
.chat-public-input { box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; }
.chat-public-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.chat-public-row { display: flex; gap: 6px; }
.chat-public-row .chat-public-input { flex: 1; }
.chat-public-hint { margin: 4px 0; font-size: 12px; color: var(--muted); }
.chat-public-error[hidden] { display: none; }
.chat-public-error { color: var(--danger-text, var(--danger)); font-size: 13px; margin: 6px 0; }
.chat-public-submit { margin-block-start: 14px; }

@media (max-width: 480px) {
  .chat-msg { max-width: 90%; }
  .chat-owner-sidebar { width: 100%; position: absolute; inset: 0; z-index: 2; background: var(--surface-1); }
  .chat-owner-thread-host { position: absolute; inset: 0; z-index: 3; }
  .chat-member-drawer { width: 100%; }
  .chat-vnote-preview { width: 80vw; height: 80vw; }
}

/* ---- CM4 gaps + CM5: welcome, bell, toast action, screenshot crop, unread badges, members, reports, stickers ---- */
.chat-welcome { margin: 8px 12px 0; padding: 10px 12px; border: 1px solid var(--accent-soft-border, var(--border)); border-radius: 10px; background: var(--accent-soft-bg); font-size: 13px; }
.chat-welcome-label { display: block; font-weight: 600; color: var(--accent); margin-block-end: 2px; }
.chat-welcome-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-bell-btn.is-on { color: var(--accent); }
.chat-toast { display: flex; align-items: center; gap: 12px; }
.chat-toast-action { border: none; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.chat-crop-dialog { max-width: min(960px, 96vw); }
.chat-crop-canvas { display: block; max-width: 100%; height: auto; border-radius: 8px; cursor: crosshair; touch-action: none; background: var(--surface-2); }
.chat-unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-brand); font-size: 11px; font-weight: 600; margin-inline-start: auto; }
.chat-owner-tab .chat-unread-badge { margin-inline-start: 6px; }
.chat-owner-bi-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { .chat-owner-bi-inputs { grid-template-columns: 1fr; } }
.chat-owner-conv-row { display: flex; align-items: center; gap: 4px; }
.chat-owner-conv-row .chat-owner-conv-item { flex: 1; min-width: 0; }
.chat-owner-members { margin-block-start: 20px; display: grid; gap: 8px; }
.chat-owner-member-list { display: grid; gap: 4px; }
.chat-owner-member-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); }
.chat-owner-member-row.is-banned { opacity: 0.7; }
.chat-owner-member-info { display: grid; flex: 1; min-width: 140px; }
.chat-owner-member-meta { color: var(--muted); font-size: 12px; }
.chat-owner-member-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chat-owner-mute-select { width: auto; }
.chat-owner-member-actions .is-danger, .chat-owner-report-actions .is-danger { color: var(--danger-text, var(--danger)); }
.chat-owner-mod-log-box summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.chat-owner-mod-log { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.chat-owner-mod-log-row { display: flex; gap: 10px; }
.chat-owner-mod-log-row time { color: var(--muted); }
.chat-owner-reports, .chat-owner-stickers { padding: 16px; display: grid; gap: 12px; align-content: start; }
.chat-owner-report-filter { width: auto; }
.chat-owner-report-list { display: grid; gap: 10px; }
.chat-owner-report { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface-1); display: grid; gap: 8px; }
.chat-owner-report-head { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.chat-owner-report-message { margin: 0; padding: 8px 12px; border-inline-start: 3px solid var(--border-strong, var(--border)); background: var(--surface-2); border-radius: 6px; }
.chat-owner-report-message p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-owner-report-author { font-weight: 600; font-size: 13px; }
.chat-owner-report-reason { margin: 0; font-size: 13px; }
.chat-owner-report-actions { display: flex; gap: 8px; justify-content: flex-end; }
.chat-owner-sticker-import { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chat-owner-sticker-import .inv-input { width: 200px; }
.chat-owner-sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.chat-owner-sticker { margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); display: grid; justify-items: center; gap: 6px; font-size: 12px; }
.chat-owner-sticker.is-off img { opacity: 0.35; }
.chat-owner-sticker-actions { display: flex; align-items: center; gap: 6px; }