* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #e7ebf0;
  overflow: hidden;
}
.hidden { display: none !important; }

#app { position: relative; display: flex; flex-direction: column; height: 100dvh; max-width: 900px; margin: 0 auto; background: #fff; box-shadow: 0 0 24px rgba(0,0,0,.12); }

/* ---------- top bar ---------- */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #4a7bab, #3d6a97);
  color: #fff; padding: 10px 12px; flex-shrink: 0;
}
.brand { display: flex; align-items: center; gap: 10px; }
.logo { font-size: 26px; }
.title { font-weight: 700; font-size: 16px; }
.subtitle { font-size: 12px; opacity: .8; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.me-badge {
  font-size: 13px; font-weight: 700; color: #ffd76a; letter-spacing: .2px;
  background: rgba(255,255,255,.14); padding: 4px 11px; border-radius: 12px; cursor: pointer;
}

.icon-btn {
  position: relative; background: none; border: none; font-size: 20px;
  cursor: pointer; padding: 6px; border-radius: 8px; color: inherit;
}
.icon-btn:active { background: rgba(0,0,0,.1); }
.pill {
  background: #fff; color: #3d6a97; border: none; font-weight: 600;
  padding: 7px 14px; border-radius: 16px; cursor: pointer; font-size: 14px;
}
.pill.ghost { background: transparent; color: #6b7a89; border: 1px solid #cfd8e0; }
.dot {
  position: absolute; top: 4px; right: 2px; width: 10px; height: 10px;
  background: #e53935; border-radius: 50%; border: 2px solid #3d6a97;
}
/* Header envelope: show the total unread count as a small red number badge. */
#users-dot.dot {
  width: auto; height: auto; min-width: 16px; top: 0; right: -2px;
  padding: 0 4px; border-radius: 9px; line-height: 15px; text-align: center;
  font-size: 10px; font-weight: 700; color: #fff; box-sizing: border-box;
}
/* Per-conversation unread count (online rail + DM chips). */
.unread-badge {
  flex-shrink: 0; min-width: 16px; padding: 0 4px; border-radius: 9px;
  background: #e53935; color: #fff; font-size: 10px; font-weight: 700;
  line-height: 16px; text-align: center; border: 1.5px solid rgba(255,255,255,.95);
}

/* ---------- DM strip (conversation chips, anchored right) ---------- */
/* Compact chips so many private chats fit; the row scrolls sideways once they
   run past the strip width, so it never grows past one line on mobile or web. */
.dm-strip { background: #35608a; padding: 5px 8px; flex-shrink: 0; }
#dm-chips {
  display: flex; justify-content: flex-end; gap: 6px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
#dm-chips::-webkit-scrollbar { height: 4px; }
#dm-chips::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 4px; }
/* Name-only chips: a short rectangle that sizes itself to the name, with long
   names truncating at a fixed cap. Keeps the strip to one slim line so the
   public chat window gets more height. */
/* Neutral box; the person's colour is applied inline to the name text. */
.chip {
  display: flex; align-items: center; gap: 5px; cursor: pointer; position: relative;
  border-radius: 6px; padding: 4px 9px; background: rgba(255,255,255,.13);
  max-width: 120px; flex-shrink: 0; touch-action: manipulation; transition: background .12s;
}
.chip:active { background: rgba(255,255,255,.26); }
.chip.active { background: rgba(255,255,255,.26); box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }
.chip .cname {
  font-size: 12px; line-height: 1.25; font-weight: 600; min-width: 0; color: #eaf2f9;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip .reddot {
  position: static; width: 8px; height: 8px; background: #e53935; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.95); flex-shrink: 0;
}
.chip-x {
  position: absolute; top: -5px; right: -4px; width: 15px; height: 15px; z-index: 1;
  background: #223b52; color: #cfe0ef; border-radius: 50%; font-size: 10px;
  line-height: 15px; text-align: center; cursor: pointer; transition: opacity .12s;
  /* Hidden × must not swallow taps: opacity:0 alone still receives pointer
     events, so tapping the top-left of a chip hit remove instead of open. */
  opacity: 0; pointer-events: none;
}
/* Reveal on hover ONLY where a real pointer exists. A bare :hover rule makes
   touch browsers apply "sticky hover" on the first tap — which is why opening
   a chat from the DM strip needed two taps. The active chip always shows its ×
   so touch users can still remove a conversation. */
@media (hover: hover) {
  .chip:hover .chip-x { opacity: 1; pointer-events: auto; }
}
.chip.active .chip-x { opacity: 1; pointer-events: auto; }
.strip-hint { color: #c7d8e8; font-size: 12px; padding: 6px 4px; white-space: nowrap; }

/* ---------- messages ---------- */
#main-row { flex: 1; display: flex; overflow: hidden; }
#chat-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #dde5ed url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" opacity=".04"><text x="8" y="38" font-size="28">💬</text></svg>'); }
/* room switcher (staff: Main / Admin) */
.room-tabs {
  display: flex; gap: 6px; padding: 6px 10px; flex-shrink: 0;
  background: rgba(255,255,255,.85); border-bottom: 1px solid #e1e7ed;
}
.room-tab {
  border: 1px solid #d5dde4; background: #fff; color: #5a6b7a;
  border-radius: 10px; padding: 4px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.room-tab.active { background: #4a7bab; border-color: #4a7bab; color: #fff; }
.room-tab[data-room="admin"] { border-color: #b83fae; color: #9b2f92; }
.room-tab[data-room="admin"].active { background: #9b2f92; border-color: #9b2f92; color: #fff; }
.room-unread {
  display: inline-block; min-width: 15px; padding: 0 4px; margin-left: 3px;
  background: #e53935; color: #fff; border-radius: 8px; font-size: 10px; line-height: 15px; text-align: center;
}
#room-head {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 10px; background: rgba(255,255,255,.8); border-bottom: 1px solid #e1e7ed;
  flex-shrink: 0; backdrop-filter: blur(3px);
}
.room-head-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
#room-head .room-name { font-weight: 700; font-size: 13px; color: #2c3e50; }
#room-head .room-18 {
  font-size: 10px; font-weight: 700; color: #fff; background: #e53935;
  border-radius: 8px; padding: 1px 6px;
}
#room-head .room-safe {
  font-size: 12px; font-weight: 600; color: #7a3d8f; background: #f3e6f9;
  border-radius: 10px; padding: 3px 12px;
}
#room-head .room-tagline { font-size: 11px; color: #6b7a89; }

/* ---------- always-visible online rail (user-resizable) ---------- */
#online-rail {
  width: 84px; flex-shrink: 0; background: #f4f7fa; border-left: 1px solid #e1e7ed;
  padding: 8px 4px; position: relative; display: flex; flex-direction: column; overflow: hidden;
}
#online-list { flex: 1; min-height: 0; overflow-y: auto; }
/* drag handle on the rail's left edge to widen it (e.g. to see full names) */
.rail-resizer {
  position: absolute; left: 0; top: 0; bottom: 0; width: 9px;
  cursor: col-resize; z-index: 6; touch-action: none;
}
.rail-resizer::before {
  content: ''; position: absolute; left: 1px; top: 0; bottom: 0; width: 2px;
  background: transparent; transition: background .12s;
}
.rail-resizer:hover::before, body.rail-resizing .rail-resizer::before { background: #4a7bab; }
body.rail-resizing { cursor: col-resize; user-select: none; }
.rail-label { font-size: 10px; text-transform: uppercase; color: #8195a7; text-align: center; letter-spacing: .05em; margin-bottom: 6px; }
.rail-count {
  display: inline-block; background: #dfe7ef; color: #4a6076; border-radius: 8px;
  padding: 0 6px; font-size: 10px; font-weight: 700; letter-spacing: 0; margin-left: 2px;
}
/* Plain rows; each person's colour is applied inline to their name. */
.rail-user {
  display: flex; align-items: center; gap: 5px; padding: 4px 6px; margin-bottom: 3px;
  cursor: pointer; position: relative; border-radius: 6px; transition: background .12s;
}
.rail-user:active { background: #e6edf4; }
.rail-user .rname {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-user .reddot {
  position: static; width: 8px; height: 8px; background: #e53935; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.95); flex-shrink: 0;
}
.rail-empty { font-size: 10px; color: #94a3b1; text-align: center; padding: 6px 2px; }
.messages { overflow-y: auto; padding: 12px 10px 16px; -webkit-overflow-scrolling: touch; }
#messages { flex: 1; min-height: 0; }
.msg { display: flex; margin-bottom: 8px; }
.msg .bubble {
  background: #fff; border-radius: 12px; border-top-left-radius: 4px;
  padding: 6px 10px 5px; max-width: 82%; box-shadow: 0 1px 1px rgba(0,0,0,.08);
  word-wrap: break-word; overflow-wrap: anywhere;
}
.msg.mine { justify-content: flex-end; }
.msg.mine .bubble { background: #d3ecff; border-top-left-radius: 12px; border-top-right-radius: 4px; }
.msg .sender { font-size: 14px; font-weight: 700; cursor: pointer; }
.msg .text { font-size: 15px; line-height: 1.4; white-space: pre-wrap; }
.msg .meta { font-size: 11px; color: #94a3b1; text-align: right; margin-top: 1px; }
.msg .tick { color: #94a3b1; margin-left: 4px; }
.msg .tick.seen { color: #2196f3; }
.typing { display: block; font-size: 11px; font-weight: 400; opacity: .85; }
.dm-head-left { min-width: 0; }
.msg img.chat-img { max-width: 100%; max-height: 260px; border-radius: 8px; margin-top: 4px; display: block; }

/* Public chat: keep pictures as small squares so they don't dominate the room —
   tapping one opens it full size in the viewer. DM bubbles keep the big preview. */
.msg.flat .img-box { display: inline-block; position: relative; vertical-align: middle; margin: 2px 4px 2px 0; }
.msg.flat img.chat-img { width: 92px; height: 92px; object-fit: cover; margin-top: 0; cursor: pointer; }
.msg.flat .img-box .timer-badge {
  position: absolute; left: 4px; bottom: 4px; margin: 0;
  background: rgba(0,0,0,.62); color: #fff; font-size: 10px; padding: 0 6px;
}
.msg.flat .view-once-tile {
  width: 92px; height: 92px; margin: 2px 4px 2px 0;
  display: inline-flex; vertical-align: middle;
}
.msg.flat .vo-clock { font-size: 20px; }
.msg.flat .vo-label { font-size: 9px; line-height: 1.15; padding: 0 4px; text-align: center; }
.timer-badge {
  display: inline-block; font-size: 11px; background: #fff3e0; color: #b26a00;
  border-radius: 8px; padding: 1px 7px; margin-top: 3px;
}
.expired-note {
  font-size: 13px; color: #94a3b1; font-style: italic;
  background: #f1f4f7; border-radius: 8px; padding: 8px 10px; margin-top: 4px;
}
.sys-note { text-align: center; font-size: 12px; color: #8195a7; margin: 10px 0; }

/* Public chat: continuous lines instead of bubbles */
.msg.flat { display: block; margin-bottom: 2px; padding: 1px 4px; border-radius: 6px; }
.msg.flat .line { word-wrap: break-word; overflow-wrap: anywhere; }
.msg.flat .sender { font-size: 14px; font-weight: 700; cursor: pointer; margin-right: 6px; }
.msg.flat .text { font-size: 15px; line-height: 1.4; white-space: pre-wrap; }
.msg.flat .meta { font-size: 10px; color: #a5b2bf; margin-left: 6px; }
.msg.flat.mention-me { background: #fff3c4; }

/* faint join/leave notices */
.sys-lite { font-size: 11px; color: rgba(90, 108, 125, .55); padding: 1px 6px; font-style: italic; }

/* moderation notices (ban / timeout / verify) — centred, highlighted pill */
.mod-note {
  display: table; margin: 8px auto; padding: 4px 12px; border-radius: 12px;
  font-size: 12px; font-weight: 600; color: #7a5b1e;
  background: #fff4d6; border: 1px solid #f0dca5; max-width: 90%;
}
@media (prefers-color-scheme: dark) {
  .mod-note { color: #f0dca5; background: rgba(240,220,165,.12); border-color: rgba(240,220,165,.3); }
}

/* @mentions */
.mention { color: #2b6cb0; font-weight: 600; }
.mention.to-me { background: #ffe082; border-radius: 4px; padding: 0 3px; }

/* clickable links in messages */
.msg-link { color: #1a6fc4; text-decoration: underline; word-break: break-all; }
.msg-link:active { color: #0d4d8f; }

/* delete-for-everyone button on own messages */
.msg-del {
  background: none; border: none; cursor: pointer; font-size: 12px;
  opacity: .35; margin-left: 4px; padding: 0 2px; vertical-align: middle;
}
.msg-del:hover, .msg-del:active { opacity: 1; }
.removed-note { font-size: 13px; color: #94a3b1; font-style: italic; }

/* Long-press a message for the Reply / Delete menu, so suppress the native
   iOS text-callout and text selection that would otherwise hijack the gesture. */
.msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* long-press action menu */
.msg-menu-backdrop { position: fixed; inset: 0; z-index: 70; background: transparent; }
.msg-menu {
  position: fixed; z-index: 71; background: #fff; border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28); overflow: hidden; min-width: 150px;
  animation: menu-pop .12s ease;
}
@keyframes menu-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.msg-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 13px 18px; font-size: 15px; cursor: pointer; color: #2c3e50;
}
.msg-menu-item:hover, .msg-menu-item:active { background: #eef3f8; }
.msg-menu-item.danger { color: #e53935; border-top: 1px solid #eef1f4; }

/* quoted message shown inside a reply */
.reply-quote {
  display: block; cursor: pointer; margin: 2px 0 3px; padding: 3px 8px;
  border-left: 3px solid #4a7bab; background: rgba(74,123,171,.09);
  border-radius: 5px; max-width: 100%; overflow: hidden;
}
.msg.flat .reply-quote { display: inline-block; margin: 1px 6px 2px 0; padding: 1px 6px; vertical-align: middle; }
.reply-quote-who { display: block; font-size: 11px; font-weight: 700; color: #3d6a97; }
.msg.flat .reply-quote-who { display: inline; margin-right: 5px; }
.reply-quote-snip {
  display: block; font-size: 12px; color: #61707e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.msg.flat .reply-quote-snip { display: inline; }
.msg.flash { animation: reply-flash 1.2s ease; }
@keyframes reply-flash {
  0%, 100% { background: transparent; }
  20%, 60% { background: #fff3c4; }
}

/* reply preview bar above a composer */
.reply-bar {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: #eef3f8; border-top: 1px solid #e1e7ed; flex-shrink: 0;
}
.reply-bar-icon { color: #4a7bab; font-size: 14px; flex-shrink: 0; }
.reply-bar-text {
  flex: 1; min-width: 0; font-size: 13px; color: #4a5b6b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid #4a7bab; padding-left: 8px;
}
.reply-bar-x {
  background: none; border: none; cursor: pointer; font-size: 20px;
  line-height: 1; color: #8195a7; padding: 0 4px; flex-shrink: 0;
}
.reply-bar-x:hover, .reply-bar-x:active { color: #e53935; }

/* view-once tile: blurred cover with a clock until tapped */
.view-once-tile {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; width: 200px; height: 110px; margin: 4px 0;
  border-radius: 10px; cursor: pointer; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, #7f8fa6, #5c6f87, #7f8fa6);
}
.view-once-tile::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 8px, rgba(255,255,255,0) 8px 16px);
  filter: blur(3px);
}
.vo-clock { font-size: 26px; position: relative; }
.vo-label { font-size: 12px; font-weight: 600; position: relative; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* fullscreen lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  cursor: pointer;
}
.lightbox img {
  max-width: 94vw; max-height: 84vh; border-radius: 8px;
  animation: lb-pop .18s ease;
}
.lightbox img.vanish { animation: lb-vanish .6s ease forwards; }
.lightbox-hint { color: rgba(255,255,255,.7); font-size: 12px; }
@keyframes lb-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lb-vanish {
  to { transform: scale(.05) rotate(8deg); opacity: 0; filter: blur(14px); }
}

/* ---------- composer ---------- */
#composer, .dm-composer {
  display: flex; align-items: center; gap: 4px; padding: 8px;
  background: #f7f9fb; border-top: 1px solid #e1e7ed; flex-shrink: 0;
}
.dm-composer { position: relative; } /* anchors the voice recorder overlay */
#composer .icon-btn, .dm-composer .icon-btn { color: #6b7a89; }
#input-text, #dm-input {
  flex: 1; border: 1px solid #d5dde4; border-radius: 18px; padding: 9px 14px;
  font-size: 15px; outline: none; background: #fff; min-width: 0;
}
#input-text:focus, #dm-input:focus { border-color: #4a7bab; }
.send-btn {
  background: #4a7bab; color: #fff; border: none; width: 38px; height: 38px;
  border-radius: 50%; font-size: 16px; cursor: pointer; flex-shrink: 0;
}
.send-btn:active { background: #3d6a97; }

/* On phones the 📷 😊 🎤 buttons crowd the composer (worst in the narrow DM
   popup), leaving little room to see what you type. Tighten the icons, gaps
   and send button so the text field gets most of the width. */
@media (max-width: 480px) {
  #composer, .dm-composer { gap: 0; padding: 6px 6px; }
  #composer .icon-btn, .dm-composer .icon-btn { font-size: 19px; padding: 5px 4px; }
  #input-text, #dm-input { padding: 8px 12px; margin: 0 2px; }
  .send-btn { width: 34px; height: 34px; font-size: 15px; }
}

.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; }
.backdrop.gate { background: rgba(10, 15, 22, .82); z-index: 80; }
#gate-modal, #banned-modal { z-index: 85; }

/* ---------- emoji picker ---------- */
.emoji-panel {
  position: fixed; z-index: 75; background: #fff; border: 1px solid #d5dde4;
  border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.25);
  padding: 8px; width: 288px; max-width: calc(100vw - 16px); max-height: 210px;
  overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
.emoji-panel button {
  border: none; background: none; font-size: 20px; cursor: pointer;
  padding: 4px 0; border-radius: 8px; line-height: 1;
}
.emoji-panel button:hover, .emoji-panel button:active { background: #eef2f6; }

/* ---------- Sakhi AI assistant ---------- */
.rail-user { position: relative; }
.rail-user.ai { box-shadow: 0 0 0 1.5px rgba(224,95,160,.45); }
.rail-user.ai .rname { font-weight: 800; }
/* pending (optimistic) own message while Sakhi is thinking */
.msg.pending .bubble { opacity: .6; }
.dm-popup.ai-chat .dm-head { background: linear-gradient(180deg, #d264a2, #b23a86); }

/* Sakhi inline bar: compact language picker + topic chips inside the AI chat */
.sakhi-bar {
  background: #fbeef6; border-bottom: 1px solid #f0d6e6; padding: 7px 10px;
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}
.sakhi-lang-row { display: flex; align-items: center; gap: 8px; }
.sakhi-lang-label { font-size: 11px; color: #9a5b82; font-weight: 600; white-space: nowrap; }
.lang-row { display: flex; gap: 6px; margin: 0; }
.lang {
  border: 1px solid #e2c3d6; background: #fff; border-radius: 12px;
  padding: 3px 10px; font-size: 12px; cursor: pointer; color: #7a3d63;
}
.lang.active { background: #b23a86; color: #fff; border-color: #b23a86; }
.sakhi-topics-row { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.topic-chip {
  flex-shrink: 0; border: 1px solid #e2c3d6; background: #fff; color: #7a3d63;
  border-radius: 14px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.topic-chip:hover, .topic-chip:active { background: #b23a86; color: #fff; border-color: #b23a86; }
.hint.small { font-size: 12px; }

/* ---------- badges & role tags ---------- */
.vbadge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; margin-left: 3px; border-radius: 50%;
  background: #2e9e5b; color: #fff; font-size: 7.5px; font-weight: 700; vertical-align: middle;
}
.vbadge.female { background: #e0489e; } /* pink tick for verified females */
.vbadge.male { background: #1e88e5; }   /* blue tick for verified males */
.vbadge.other { background: #8a4fd1; }  /* purple tick for verified 'other' */

/* small online / offline status dot (replaces the big 🟢 / ⚪ emoji) */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.status-dot.on { background: #3bbf5d; }
.status-dot.off { background: #b7c1cc; }
.role-tag {
  margin-left: 4px; font-size: 8.5px; font-weight: 800; letter-spacing: .03em;
  padding: 1px 4px; border-radius: 5px; vertical-align: middle; color: #fff;
}
.role-owner { background: #c62828; }
.role-admin { background: #8e24aa; }
.role-moderator { background: #2e7d32; }
.role-supervisor { background: #00897b; }
.role-verifier { background: #1c8fb5; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%);
  background: #2c3e50; color: #fff; font-size: 13px; padding: 10px 16px;
  border-radius: 20px; z-index: 95; max-width: 88vw; text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

/* ---------- profile card ---------- */
.profile-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.profile-meta { min-width: 0; }
.profile-name { font-weight: 700; font-size: 18px; color: #2c3e50; display: flex; align-items: center; flex-wrap: wrap; }
.profile-mod { border-top: 1px solid #e8edf2; padding-top: 10px; margin-bottom: 6px; }
.mod-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; color: #6b7a89; }
.mini {
  border: 1px solid #d5dde4; background: #fff; border-radius: 10px;
  padding: 5px 10px; font-size: 12px; cursor: pointer; color: #2c3e50;
}
.mini:hover, .mini:active { background: #eef2f6; }
.mini.good { border-color: #66bb6a; color: #2e7d32; }
.mini.danger { border-color: #e0a1a1; color: #c62828; }
.mini.danger:hover, .mini.danger:active { background: #fdecec; }
.mod-row select, .admin-acts select {
  border: 1px solid #d5dde4; border-radius: 10px; padding: 5px 8px; font-size: 12px; background: #fff;
}
.pill.full { width: 100%; margin: 6px 0; }

/* ---------- admin panel ---------- */
.sheet.wide { width: min(560px, 94vw); }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tab {
  border: none; background: #eef2f6; color: #5a6b7a; border-radius: 10px;
  padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tab.active { background: #4a7bab; color: #fff; }
.tab-count { background: #e53935; color: #fff; border-radius: 8px; padding: 0 5px; font-size: 10px; margin-left: 4px; }
#admin-search { width: 100%; }
.admin-list { max-height: 46vh; overflow-y: auto; margin-top: 6px; }
.admin-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid #eef2f6; flex-wrap: wrap;
}
.admin-item-top, .admin-nm { display: flex; align-items: center; flex-wrap: wrap; }
.admin-nm { font-weight: 600; color: #2c3e50; font-size: 14px; }
.admin-acts { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.muted-tag { margin-left: 6px; font-size: 9px; font-weight: 700; color: #fff; background: #f57c00; padding: 1px 5px; border-radius: 5px; }
.banned-tag { margin-left: 6px; font-size: 9px; font-weight: 700; color: #fff; background: #c62828; padding: 1px 5px; border-radius: 5px; }
.to-sel { min-width: 94px; }
.points-item { justify-content: space-between; }
.points-val { font-weight: 700; color: #b58900; font-size: 13px; white-space: nowrap; }
.ai-diag {
  white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.45; color: #2c3e50; background: #f4f7fa;
  border: 1px solid #e1e7ed; border-radius: 10px; padding: 10px; margin-top: 8px;
  max-height: 40vh; overflow: auto;
}

/* ---------- voice notes ---------- */
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e53935; animation: recpulse 1s infinite; flex-shrink: 0; }
.mic-btn { display: inline-flex; align-items: center; justify-content: center; }
.voice-box { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.voice-mic { font-size: 16px; }
.voice-audio { height: 34px; max-width: 200px; vertical-align: middle; }

/* record → stop → review bar, overlaying the DM composer */
.dm-voice {
  position: absolute; inset: 0; display: flex; align-items: center;
  gap: 8px; padding: 8px; background: #f7f9fb; z-index: 2;
}
.voice-state { display: flex; align-items: center; gap: 8px; width: 100%; }
.voice-time { font-size: 13px; font-weight: 600; color: #e53935; font-variant-numeric: tabular-nums; min-width: 42px; }
.voice-hint { font-size: 12px; color: #8195a7; flex: 1; }
.voice-stop {
  background: #e53935; color: #fff; border: none; width: 38px; height: 38px;
  border-radius: 50%; font-size: 15px; cursor: pointer; flex-shrink: 0; margin-left: auto;
}
.voice-stop:active { background: #c62828; }
.voice-audio.review { flex: 1; max-width: none; height: 36px; }

/* small, no-frills popup (DM timeout picker) */
.sheet.compact { width: min(248px, 84vw); padding: 14px; }
.sheet.compact .sheet-title { font-size: 15px; margin-bottom: 10px; }
.sheet.compact .sheet-actions { margin-top: 10px; }
.to-opts { display: flex; flex-direction: column; gap: 6px; }
.to-opts .fbtn { width: 100%; text-align: center; }

/* banner shown to a user who has been personally timed out in a DM */
.dm-blocked {
  background: #fff3e0; color: #a05a00; border-bottom: 1px solid #f0dcc0;
  font-size: 12.5px; padding: 7px 12px; text-align: center; flex-shrink: 0;
}
.dm-composer input:disabled, .dm-composer button:disabled { opacity: .45; cursor: not-allowed; }

/* name / text colour picker */
.color-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 12px; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 0 0 1px #d5dde4;
}
.swatch.active { box-shadow: 0 0 0 2px #2c3e50; transform: scale(1.1); }
.swatch-default { background: #fff; color: #2c3e50; font-size: 13px; font-weight: 800; line-height: 22px; }

/* ---------- chat reward points ---------- */
.points-card {
  background: linear-gradient(135deg, #fff6e5, #ffeccf); border: 1px solid #f3dcb8;
  border-radius: 12px; padding: 11px 13px; margin: 4px 0 10px;
}
.points-head { font-size: 17px; font-weight: 800; color: #8a5a00; }
.points-bar { height: 7px; background: #f0dcbe; border-radius: 4px; overflow: hidden; margin: 7px 0 6px; }
.points-fill { height: 100%; background: linear-gradient(90deg, #f0a92e, #e0761f); border-radius: 4px; transition: width .3s; }
.points-hint { font-size: 12px; color: #8a6a3a; line-height: 1.35; }

/* admin toggle row */
.admin-setting {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; color: #5a6b7a; background: #f4f7fa; border: 1px solid #e1e7ed;
  border-radius: 6px; padding: 4px 8px; margin-bottom: 8px;
  white-space: nowrap; max-width: 100%;
}
.admin-setting.hidden { display: none; }
.admin-setting span { white-space: nowrap; }
.admin-setting input { width: 14px; height: 14px; flex-shrink: 0; margin: 0; }

/* guest (logged-out) chat lock */
.guest-lock { padding: 22px 14px; }
.guest-lock a { color: #d1417e; font-weight: 700; text-decoration: none; margin-left: 4px; }
.guest-lock a:hover { text-decoration: underline; }

/* ---------- feedback ---------- */
.fb-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fbtn {
  border: 1px solid #d5dde4; background: #fff; border-radius: 14px;
  padding: 6px 11px; font-size: 13px; cursor: pointer; color: #2c3e50;
}
.fbtn.active { background: #4a7bab; color: #fff; border-color: #4a7bab; }
.sheet textarea {
  width: 100%; border: 1px solid #d5dde4; border-radius: 10px; padding: 11px 12px;
  font-size: 15px; font-family: inherit; outline: none; resize: vertical; margin-bottom: 8px;
}
.sheet textarea:focus { border-color: #4a7bab; }
.fb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.fb-tag {
  font-size: 11px; font-weight: 700; color: #3d6a97; background: #eaf1f8;
  border-radius: 8px; padding: 2px 8px;
}
.fb-body { font-size: 14px; color: #2c3e50; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }

/* ---------- members directory ---------- */
.member-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 6px;
  border-bottom: 1px solid #eef1f4; cursor: pointer; border-radius: 8px;
}
.member-item:hover, .member-item:active { background: #eef3f8; }
.member-info { min-width: 0; flex: 1; }
.member-nm { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-weight: 600; color: #2c3e50; font-size: 14.5px; }
.member-sub { font-size: 12px; color: #8195a7; margin-top: 1px; }

/* ---------- verify gender picker ---------- */
.gender-row { display: flex; gap: 8px; margin-bottom: 10px; }
.gbtn {
  flex: 1; border: 1px solid #d5dde4; background: #fff; border-radius: 12px;
  padding: 9px 6px; font-size: 14px; cursor: pointer; color: #2c3e50;
}
.gbtn.active { background: #b23a86; color: #fff; border-color: #b23a86; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-big { width: 64px; height: 64px; font-size: 26px; }
.avatar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

/* profile editor: avatar with a camera badge + name field beside it */
.profile-edit { display: flex; gap: 16px; align-items: center; margin: 8px 0 14px; }
.avatar-edit { position: relative; flex-shrink: 0; }
.avatar-cam {
  position: absolute; bottom: -3px; right: -3px; width: 27px; height: 27px;
  border-radius: 50%; background: #4a7bab; color: #fff; border: 2px solid #fff;
  font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.avatar-cam:hover, .avatar-cam:active { background: #3d6a97; }
.profile-edit-fields { flex: 1; min-width: 0; }
.field-label { display: block; font-size: 12px; font-weight: 600; color: #6b7a89; margin-bottom: 5px; letter-spacing: .02em; }
.profile-edit-fields input { margin-bottom: 6px; }
.profile-edit-fields .hint { margin-bottom: 0; font-size: 12px; }

/* topbar icon buttons drawn from inline SVG */
.svg-btn { display: inline-flex; align-items: center; justify-content: center; }
.svg-btn svg { display: block; }

/* ---------- DM popup: hangs from the strip, ~70% tall, tail points at the chip ---------- */
.dm-popup {
  position: absolute; z-index: 60; right: 0; /* top set in JS, just below the strip */
  width: min(420px, 88%); height: min(70dvh, 560px);
  background: #fff; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 14px 0 0 14px; box-shadow: -4px 8px 30px rgba(0,0,0,.28);
  animation: dropdown .18s ease;
}
/* Little triangle joining the popup's top edge to the active user's chip, so it
   reads as belonging to that user. It is a sibling of the popup (not clipped by
   the popup's overflow) and is positioned in JS. Coloured like the DM header. */
.dm-tail {
  position: absolute; z-index: 61; width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-bottom: 10px solid #3d6a97; pointer-events: none;
  filter: drop-shadow(0 -2px 2px rgba(0,0,0,.12));
}
@keyframes dropdown { from { transform: translateY(-6%); opacity: .5; } to { transform: translateY(0); opacity: 1; } }
.dm-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; background: #3d6a97; color: #fff; font-weight: 700; flex-shrink: 0;
}
.dm-messages { flex: 1; background: #eef2f6; }

/* ---------- sheets / modals ---------- */
.sheet {
  position: fixed; z-index: 70; background: #fff; border-radius: 16px;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(360px, 92vw); padding: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.sheet-title { font-weight: 700; font-size: 17px; margin-bottom: 10px; color: #2c3e50; }
.sheet-label { font-weight: 600; font-size: 14px; margin: 12px 0 8px; color: #2c3e50; }
.sheet .hint { font-size: 13px; color: #6b7a89; margin-bottom: 10px; }
.sheet select {
  width: 100%; border: 1px solid #d5dde4; border-radius: 10px; padding: 11px 12px;
  font-size: 15px; margin-bottom: 8px; background: #fff; outline: none;
}
.sheet input {
  width: 100%; border: 1px solid #d5dde4; border-radius: 10px; padding: 11px 12px;
  font-size: 15px; margin-bottom: 8px; outline: none;
}
.sheet input:focus { border-color: #4a7bab; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.logout-btn { margin-right: auto; color: #c62828 !important; border-color: #e0b4b4 !important; }
.sheet-actions .pill { background: #4a7bab; color: #fff; }
.sheet-actions .pill.ghost { background: transparent; color: #6b7a89; }
#img-preview { width: 100%; max-height: 240px; object-fit: contain; border-radius: 10px; background: #f1f4f7; }
.ttl-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ttl {
  border: 1px solid #d5dde4; background: #fff; border-radius: 14px;
  padding: 6px 11px; font-size: 13px; cursor: pointer; color: #2c3e50;
}
.ttl.active { background: #4a7bab; color: #fff; border-color: #4a7bab; }
.error { color: #c62828; font-size: 13px; margin-top: 8px; }

/* ==================== responsive: desktop ====================
   Below 900px the app already fills the window; past it, it used to freeze at a
   900px column. Use the whole desktop instead: full-width shell, a roomy online
   list (rows: avatar + name), larger type, a bigger DM popup and hover states. */
@media (min-width: 900px) {
  #app { max-width: none; box-shadow: none; }
  #topbar { padding: 12px 24px; }
  .logo { font-size: 30px; }
  .title { font-size: 18px; }
  .subtitle { font-size: 12.5px; }
  .icon-btn:hover { background: rgba(0,0,0,.08); }

  .dm-strip { padding: 8px 16px 6px; }
  .chip { max-width: 150px; padding: 5px 11px; }
  .chip .cname { font-size: 12.5px; }

  #room-head { padding: 9px 16px; }
  #room-head .room-safe { font-size: 13px; padding: 3px 14px; }
  #room-head .room-tagline { font-size: 12px; }

  .messages { padding: 18px 28px 22px; }
  .msg.flat { margin-bottom: 3px; padding: 2px 8px; }
  .msg.flat:hover:not(.mention-me) { background: #eef3f8; }
  .msg.flat .sender { font-size: 15px; }
  .msg .text { font-size: 15.5px; }
  .msg .bubble { max-width: 65%; }
  .reply-quote-snip { max-width: 380px; }

  /* Online rail becomes a real member list */
  #online-rail { width: 220px; padding: 12px 10px; }
  .rail-label { text-align: left; padding-left: 4px; font-size: 11px; }
  .rail-user { padding: 7px 10px; }
  .rail-user:hover { background: #e6edf4; }
  .rail-user .rname { font-size: 13.5px; }
  .rail-empty { font-size: 12px; }

  .dm-popup { width: min(560px, 60%); height: min(78dvh, 720px); border-radius: 14px; right: 8px; }
  #composer, .dm-composer { padding: 10px 16px; gap: 6px; }
  #input-text, #dm-input { padding: 10px 16px; }
  .voice-audio { max-width: 300px; }
}

/* Very wide screens: don't let public chat lines run edge-to-edge forever. */
@media (min-width: 1500px) {
  #messages, #room-head { padding-left: max(28px, calc((100% - 1200px) / 2)); padding-right: max(28px, calc((100% - 1200px) / 2)); }
}

/* ==================== responsive: mobile polish ==================== */
@media (max-width: 480px) {
  #topbar { padding: 8px 10px; }
  .logo { font-size: 22px; }
  .title { font-size: 15px; }
  .subtitle { font-size: 11px; }
  #room-head { padding: 4px 8px; }
  .messages { padding: 10px 8px 14px; }
  .msg .bubble { max-width: 88%; }
  .dm-popup { height: min(74dvh, 560px); }

  /* Names need a bit more width now that the avatar circle is gone, but the
     rows are far shorter, so the rail still feels lighter than before. */
  #online-rail { width: 97px; padding: 6px 5px; }
  .rail-user { padding: 4px 6px; margin-bottom: 4px; }
  .rail-user .rname { font-size: 11px; }

  /* DM strip: compact name chips, capped so long names don't hog the row */
  .chip { max-width: 104px; padding: 4px 8px; }
  .chip .cname { font-size: 11.5px; }
  .chip-x { width: 17px; height: 17px; line-height: 17px; font-size: 11px; }
}