/* ---------- colors ----------
   three styles (data-style: whatsapp, discord, classic) × modes (data-theme: dark, black, light, auto).
   classic is the base. light blocks exist twice (the mode, and "auto" when the phone is light): keep
   each pair identical. black comes last so it wins over any style's dark colors. */
:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel2: #202531;
  --line: #2a303d;
  --text: #e8eaf0;
  --muted: #8b93a7;
  --accent: #7c9cff;
  --accent-text: #0b1020;
  --danger: #ff6b6b;
  --danger-bg: #241619;
  --danger-line: #4a2a2e;
  --toast-bg: #2b2f3b;
  --strong: #fff;          /* unread chat titles */
  --scrim: rgba(0, 0, 0, .55);
  --avatar-bg: 30%;        /* avatar lightness: background / letter */
  --avatar-fg: 85%;
  --header: var(--bg);     /* top bars */
  --tabs: var(--panel);    /* bottom bar */
  --chat-bg: var(--bg);    /* behind the messages */
  --composer: var(--panel);
  --bubble-them: var(--panel2);
  --field: var(--panel2);  /* text boxes */
  color-scheme: dark;
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="light"] {
  --bg: #f4f5f8; --panel: #ffffff; --panel2: #eceef3; --line: #d9dce4;
  --text: #161a22; --muted: #5d6577; --accent: #3d63e0; --accent-text: #ffffff;
  --danger: #d93838; --danger-bg: #fdecec; --danger-line: #f3c4c4; --toast-bg: #ffffff;
  --strong: #000; --scrim: rgba(20, 24, 33, .4); --avatar-bg: 88%; --avatar-fg: 30%;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg: #f4f5f8; --panel: #ffffff; --panel2: #eceef3; --line: #d9dce4;
    --text: #161a22; --muted: #5d6577; --accent: #3d63e0; --accent-text: #ffffff;
    --danger: #d93838; --danger-bg: #fdecec; --danger-line: #f3c4c4; --toast-bg: #ffffff;
    --strong: #000; --scrim: rgba(20, 24, 33, .4); --avatar-bg: 88%; --avatar-fg: 30%;
    color-scheme: light;
  }
}

/* whatsapp */
:root[data-style="whatsapp"] {
  --bg: #111b21; --panel: #1f2c34; --panel2: #233138; --line: #222d34; --text: #e9edef; --muted: #8696a0;
  --accent: #00a884; --accent-text: #0b141a; --toast-bg: #2a3942; --strong: #fff;
  --header: #202c33; --tabs: #111b21; --chat-bg: #0b141a; --composer: #0b141a; --bubble-them: #202c33; --field: #2a3942;
}
:root[data-style="whatsapp"][data-theme="light"] {
  --bg: #ffffff; --panel: #ffffff; --panel2: #f0f2f5; --line: #e9edef; --text: #111b21; --muted: #667781;
  --accent: #00a884; --accent-text: #ffffff; --toast-bg: #ffffff; --strong: #000;
  --header: #ffffff; --tabs: #ffffff; --chat-bg: #efeae2; --composer: #efeae2; --bubble-them: #ffffff; --field: #ffffff;
}
@media (prefers-color-scheme: light) {
  :root[data-style="whatsapp"][data-theme="auto"] {
    --bg: #ffffff; --panel: #ffffff; --panel2: #f0f2f5; --line: #e9edef; --text: #111b21; --muted: #667781;
    --accent: #00a884; --accent-text: #ffffff; --toast-bg: #ffffff; --strong: #000;
    --header: #ffffff; --tabs: #ffffff; --chat-bg: #efeae2; --composer: #efeae2; --bubble-them: #ffffff; --field: #ffffff;
  }
}

/* discord */
:root[data-style="discord"] {
  --bg: #313338; --panel: #2b2d31; --panel2: #383a40; --line: #3f4147; --text: #dbdee1; --muted: #949ba4;
  --accent: #5865f2; --accent-text: #ffffff; --toast-bg: #111214; --strong: #f2f3f5;
  --header: #2b2d31; --tabs: #1e1f22; --chat-bg: #313338; --composer: #313338; --bubble-them: #2b2d31; --field: #383a40;
}
:root[data-style="discord"][data-theme="light"] {
  --bg: #ffffff; --panel: #f2f3f5; --panel2: #e3e5e8; --line: #e1e2e4; --text: #313338; --muted: #5c5e66;
  --accent: #5865f2; --accent-text: #ffffff; --toast-bg: #ffffff; --strong: #060607;
  --header: #f2f3f5; --tabs: #e3e5e8; --chat-bg: #ffffff; --composer: #ffffff; --bubble-them: #f2f3f5; --field: #e3e5e8;
}
@media (prefers-color-scheme: light) {
  :root[data-style="discord"][data-theme="auto"] {
    --bg: #ffffff; --panel: #f2f3f5; --panel2: #e3e5e8; --line: #e1e2e4; --text: #313338; --muted: #5c5e66;
    --accent: #5865f2; --accent-text: #ffffff; --toast-bg: #ffffff; --strong: #060607;
    --header: #f2f3f5; --tabs: #e3e5e8; --chat-bg: #ffffff; --composer: #ffffff; --bubble-them: #f2f3f5; --field: #e3e5e8;
  }
}

/* elegante: candlelight on velvet at night, porcelain by day. quiet tones, one soft gold accent.
   the rest of the look (serif titles, monogram avatars, calmer chrome) is at the end of this file */
:root[data-style="elegant"] {
  --bg: #141218; --panel: #1b1820; --panel2: #25212b; --line: #2f2a36; --text: #eee8df; --muted: #a39cab;
  --accent: #d8b878; --accent-text: #1c160c; --toast-bg: #2a2530; --strong: #fffaf1;
  --danger: #f08c8c; --danger-bg: #2a1a1f; --danger-line: #4d2c33; --scrim: rgba(8, 6, 10, .62);
  --avatar-bg: 27%; --avatar-fg: 82%;
  --header: #18151c; --tabs: #141218; --chat-bg: #121016; --composer: #121016; --bubble-them: #221e28; --field: #1f1b25; --me-own: #583e4e;
}
:root[data-style="elegant"][data-theme="light"] {
  --bg: #f5f4f6; --panel: #ffffff; --panel2: #eeecf0; --line: #e2dfe6; --text: #1e1b22; --muted: #66606d;
  --accent: #8a6421; --accent-text: #ffffff; --toast-bg: #ffffff; --strong: #000;
  --danger: #b3363f; --danger-bg: #fbeeee; --danger-line: #efc9cc; --scrim: rgba(30, 24, 36, .36);
  --avatar-bg: 91%; --avatar-fg: 33%;
  --header: #f5f4f6; --tabs: #fbfafc; --chat-bg: #f1eff3; --composer: #f1eff3; --bubble-them: #ffffff; --field: #ffffff; --me-own: #ebe5d9;
}
@media (prefers-color-scheme: light) {
  :root[data-style="elegant"][data-theme="auto"] {
    --bg: #f5f4f6; --panel: #ffffff; --panel2: #eeecf0; --line: #e2dfe6; --text: #1e1b22; --muted: #66606d;
    --accent: #8a6421; --accent-text: #ffffff; --toast-bg: #ffffff; --strong: #000;
    --danger: #b3363f; --danger-bg: #fbeeee; --danger-line: #efc9cc; --scrim: rgba(30, 24, 36, .36);
    --avatar-bg: 91%; --avatar-fg: 33%;
    --header: #f5f4f6; --tabs: #fbfafc; --chat-bg: #f1eff3; --composer: #f1eff3; --bubble-them: #ffffff; --field: #ffffff; --me-own: #ebe5d9;
  }
}

/* black ("negro"): pure black for oled screens, in any style */
:root[data-theme="black"] {
  --bg: #000000; --panel: #0c0d10; --panel2: #17191f; --line: #23262e; --toast-bg: #1d2027;
  --header: #000000; --tabs: #000000; --chat-bg: #000000; --composer: #000000; --bubble-them: #17191f; --field: #17191f;
}
/* elegante on black: the same warm grays, just darker */
:root[data-style="elegant"][data-theme="black"] { --panel: #0d0c10; --panel2: #18161c; --line: #25212a; --toast-bg: #1e1b22; --bubble-them: #17151b; --field: #17151b; --me-own: #432f3c; }

/* your own bubbles. defined on #app too, because a chat can have its own accent (set on #app)
   and these mix it in where they're defined. classic: the accent itself. */
:root, #app { --bubble-me: var(--accent); --bubble-me-text: var(--accent-text); }
:root[data-style="whatsapp"], :root[data-style="whatsapp"] #app { --bubble-me: color-mix(in srgb, var(--accent) 42%, #0b141a); --bubble-me-text: #e9edef; }
:root[data-style="discord"], :root[data-style="discord"] #app { --bubble-me: color-mix(in srgb, var(--accent) 38%, #313338); --bubble-me-text: #f2f3f5; }
:root[data-style="whatsapp"][data-theme="light"], :root[data-style="whatsapp"][data-theme="light"] #app { --bubble-me: color-mix(in srgb, var(--accent) 20%, #fff); --bubble-me-text: #111b21; }
:root[data-style="discord"][data-theme="light"], :root[data-style="discord"][data-theme="light"] #app { --bubble-me: color-mix(in srgb, var(--accent) 16%, #fff); --bubble-me-text: #060607; }
@media (prefers-color-scheme: light) {
  :root[data-style="whatsapp"][data-theme="auto"], :root[data-style="whatsapp"][data-theme="auto"] #app { --bubble-me: color-mix(in srgb, var(--accent) 20%, #fff); --bubble-me-text: #111b21; }
  :root[data-style="discord"][data-theme="auto"], :root[data-style="discord"][data-theme="auto"] #app { --bubble-me: color-mix(in srgb, var(--accent) 16%, #fff); --bubble-me-text: #060607; }
}
/* elegante: a deep tint of the accent at night, a pale wash of it by day */
:root[data-style="elegant"], :root[data-style="elegant"] #app { --bubble-me: color-mix(in srgb, var(--accent) 26%, #1c1921); --bubble-me-text: #f6efe3; }
:root[data-style="elegant"][data-theme="black"], :root[data-style="elegant"][data-theme="black"] #app { --bubble-me: color-mix(in srgb, var(--accent) 24%, #0d0c10); }
:root[data-style="elegant"][data-theme="light"], :root[data-style="elegant"][data-theme="light"] #app { --bubble-me: color-mix(in srgb, var(--accent) 17%, #fff); --bubble-me-text: #1e1b22; }
@media (prefers-color-scheme: light) {
  :root[data-style="elegant"][data-theme="auto"], :root[data-style="elegant"][data-theme="auto"] #app { --bubble-me: color-mix(in srgb, var(--accent) 17%, #fff); --bubble-me-text: #1e1b22; }
}
/* ...but with the style's own gold they're --me-own (wine at night: a dark gold is just brown). a color
   picked in Ajustes sits inline on <html>, a chat's own on #app; with either, the tint above is used */
:root[data-style="elegant"]:not([style*="--accent"]), :root[data-style="elegant"]:not([style*="--accent"]) #app:not([style*="--accent"]) { --bubble-me: var(--me-own); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  overscroll-behavior: none;
}
body { display: flex; flex-direction: column; height: 100dvh; }
#app {
  flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: var(--top);
  width: 100%; max-width: 760px; margin: 0 auto;
}
@media (min-width: 761px) { #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
body.has-banner #app { padding-top: 0; }

h1, h2, h3, h4, p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.pad { padding: 16px; }
.grow { flex: 1; min-width: 0; }
.title { font-weight: 600; overflow-wrap: anywhere; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.inline-icon { display: inline-flex; vertical-align: -2px; margin: 0 4px; }
.error { color: var(--danger); min-height: 1.2em; font-size: 14px; }

/* controls */
input, select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
select:disabled { opacity: .6; }
.btn {
  font: inherit; font-weight: 600; color: var(--text); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; cursor: pointer;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.danger { color: var(--danger); border-color: var(--danger-line); background: var(--danger-bg); }
.btn.ghost { background: transparent; }
.btn.small { padding: 7px 12px; font-size: 14px; border-radius: 10px; }
.btn:active { opacity: .75; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* layout pieces */
header.top, header.chat-top {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
header.top h2 { font-size: 22px; }
.icon-btn {
  font: inherit; font-size: 22px; line-height: 1; color: var(--accent); background: none;
  border: 0; padding: 8px; cursor: pointer; border-radius: 10px; display: inline-flex; flex: none;
}
.icon-btn:hover { background: var(--panel2); }
.icon-btn.muted { color: var(--muted); }
header.top { justify-content: space-between; }
main.scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 14px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit;
  color: var(--text); background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; cursor: pointer;
}
.item.static { cursor: default; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
h4.section { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 4px 2px 8px; }
.row { display: flex; gap: 8px; align-items: center; }
.badge {
  background: var(--accent); color: var(--accent-text); border-radius: 999px; font-size: 12px; font-weight: 700;
  min-width: 20px; text-align: center; padding: 1px 7px; flex: none;
}
.badge.quiet { background: var(--panel2); color: var(--muted); }
.role { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.role.owner { color: var(--accent); border-color: var(--accent); }

nav.tabs { display: flex; border-top: 1px solid var(--line); padding-bottom: var(--bottom); background: var(--panel); }
nav.tabs button {
  flex: 1; font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0; padding: 8px 0 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.tab-icon { position: relative; display: inline-flex; }
.tab-icon .badge { position: absolute; top: -6px; left: 14px; font-size: 11px; min-width: 18px; padding: 0 5px; }
nav.tabs button.active { color: var(--accent); font-weight: 600; }

/* auth */
.auth { flex: 1; overflow-y: auto; padding: 32px 20px; display: flex; flex-direction: column; gap: 20px; max-width: 460px; width: 100%; margin: 0 auto; }
.brand { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.brand h1 { font-size: 30px; }
.brand .logo { align-self: center; border-radius: 18px; }
.seg {
  display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 3px;
  overflow-x: auto; scrollbar-width: none; /* many sections (Moderar): slide sideways instead of spilling out */
}
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 1 0 auto; font: inherit; color: var(--muted); background: none; border: 0; border-radius: 9px; padding: 9px 10px; cursor: pointer; white-space: nowrap; }
.seg button.active { background: var(--panel2); color: var(--text); font-weight: 600; }

/* chat */
header.chat-top { gap: 4px; padding: 8px 8px 8px 4px; }
header.chat-top .titles {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left;
  font: inherit; color: var(--text); background: none; border: 0; padding: 4px; border-radius: 10px; cursor: pointer;
}
header.chat-top .titles:hover { background: var(--panel2); }
header.chat-top .titles > span { display: flex; flex-direction: column; min-width: 0; }
header.chat-top .titles .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header.chat-top .titles .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header.chat-top .titles .sub svg { vertical-align: -2px; }
.msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { display: flex; }
.msg.mine { justify-content: flex-end; }
.bubble { max-width: 82%; background: var(--panel2); border-radius: 18px 18px 18px 6px; padding: 8px 12px; }
.msg.mine .bubble { background: var(--accent); color: var(--accent-text); border-radius: 18px 18px 6px 18px; }
.bubble .who { font-size: 12px; font-weight: 700; opacity: .7; }
.bubble .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble .meta { font-size: 11px; opacity: .6; margin-top: 2px; display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.bubble .meta svg { vertical-align: -1px; }
.day { align-self: center; position: sticky; top: 0; z-index: 1; margin: 6px 0; }
.day span { background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 12px; border-radius: 999px; padding: 3px 10px; }
.sysnote { align-self: center; color: var(--muted); font-size: 12px; padding: 2px 10px; text-align: center; }
.composer {
  display: flex; gap: 8px; align-items: flex-end; padding: 8px 10px calc(8px + var(--bottom));
  border-top: 1px solid var(--line); background: var(--panel);
}
.composer textarea { flex: 1; min-width: 0; resize: none; max-height: 140px; border-radius: 20px; padding: 10px 14px; overflow: hidden; }
.ttl-btn {
  flex: none; height: 44px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 22px; cursor: pointer;
}
.ttl-btn.custom { color: var(--accent); border-color: var(--accent); }
.composer .send {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center;
}
.composer .send:disabled { background: var(--panel2); color: var(--muted); cursor: default; }

/* sheets */
.backdrop {
  position: fixed; inset: 0; background: var(--scrim); z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 560px; max-height: 88dvh; overflow-y: auto; background: var(--panel);
  border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + var(--bottom));
  display: flex; flex-direction: column; gap: 12px;
}
.sheet h3 { font-size: 20px; }
.steps { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; counter-reset: s; }
.steps li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; }
.steps li::before {
  content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text); font-weight: 700; text-align: center; line-height: 26px; font-size: 14px;
}
.steps svg { vertical-align: -4px; color: var(--accent); }
.note { background: var(--panel2); border-radius: 12px; padding: 10px 12px; font-size: 14px; color: var(--muted); }
.note.accent { color: var(--text); border: 1px solid var(--accent); display: flex; align-items: center; gap: 8px; }
.note.accent svg { color: var(--accent); flex: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px -6px 0 0; }
.sheet-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 4px 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; }
.section-head h4.section { margin: 4px 2px; }
.card.flat { background: var(--panel2); border: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 14px; color: var(--muted); }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.item.option.selected { border-color: var(--accent); }
.item.option svg { color: var(--accent); }
.item.invite { gap: 4px; }
.bullets { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* chips (pick one of a few presets) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit; font-size: 14px; color: var(--text); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.card.flat .chip:not(.active) { background: var(--panel); }
.chip.with-icon { display: inline-flex; align-items: center; gap: 6px; }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }

/* on/off switch */
.switch-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.switch { position: relative; flex: none; width: 46px; height: 28px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch .knob { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .15s; }
.switch .knob::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; transition: transform .15s;
}
.switch input:checked + .knob { background: var(--accent); }
.switch input:checked + .knob::after { transform: translateX(18px); }
.switch input:focus-visible + .knob { outline: 2px solid var(--accent); outline-offset: 2px; }

/* avatars */
.avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: hsl(var(--hue) 45% var(--avatar-bg)); color: hsl(var(--hue) 90% var(--avatar-fg)); font-weight: 700;
  width: 44px; height: 44px; font-size: 18px;
}
.avatar.sm { width: 34px; height: 34px; font-size: 15px; }
.avatar.lg { width: 64px; height: 64px; font-size: 26px; }

/* chat list */
.chat-row { padding: 10px 12px; }
.chat-row .row-top, .chat-row .row-bottom { display: flex; align-items: center; gap: 8px; }
.chat-row .row-top .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row .row-bottom { margin-top: 2px; }
.chat-row.unread .title { color: var(--strong); }
.chat-row .inline-icon { margin: 0; }
.nudge { flex-direction: row; align-items: center; gap: 12px; padding: 12px 8px 12px 14px; border-color: var(--accent); }
.nudge-icon { color: var(--accent); display: inline-flex; }
.profile { flex-direction: row; align-items: center; gap: 14px; }

/* empty states */
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 28px 12px; }
.empty .steps { text-align: left; align-self: stretch; max-width: 360px; margin: 6px auto; }
.empty .btn { align-self: stretch; max-width: 360px; width: 100%; margin: 0 auto; }
.empty-icon { color: var(--accent); width: 72px; height: 72px; border-radius: 50%; background: var(--panel2); display: flex; align-items: center; justify-content: center; }
.chat-empty { margin: auto 0; }
.chat-empty .muted { max-width: 320px; }

/* install banner */
.install-banner {
  flex: none; display: flex; align-items: center; gap: 10px; background: var(--panel2);
  border-bottom: 1px solid var(--line); padding: calc(var(--top) + 10px) 12px 10px;
}
.install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.install-text span { color: var(--muted); }
.install-x { font: inherit; color: var(--muted); background: none; border: 0; padding: 6px 8px; cursor: pointer; }

#toast {
  position: fixed; left: 50%; top: calc(var(--top) + 12px); transform: translate(-50%, -150%);
  background: var(--toast-bg); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; z-index: 100; max-width: 90%; font: inherit; font-size: 14px; transition: transform .2s;
}
#toast.tappable { cursor: pointer; border-color: var(--accent); }
#toast.show { transform: translate(-50%, 0); }

/* moderation */
.readonly-bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px calc(12px + var(--bottom));
  border-top: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 14px;
}
.readonly-bar svg { color: var(--accent); flex: none; }
.msg-del {
  font: inherit; color: inherit; background: none; border: 0; padding: 0 0 0 6px; cursor: pointer;
  display: inline-flex; opacity: .8;
}
.msg-del:hover { opacity: 1; color: var(--danger); }

.role.danger { color: var(--danger); border-color: var(--danger); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.stat-n { font-size: 22px; font-weight: 700; }
.info-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.temp-pass { border-color: var(--accent); }
.temp-pass .big { font-size: 20px; letter-spacing: .05em; user-select: all; }
main.scroll > .seg { flex: none; }
.lang-switch { align-self: center; color: var(--muted); border-color: transparent; }
.older { align-self: center; font: inherit; font-size: 13px; color: var(--accent); background: none; border: 0; padding: 6px 12px; cursor: pointer; }

/* polls */
.poll { display: flex; flex-direction: column; gap: 6px; min-width: 220px; margin: 2px 0 4px; }
.poll-label { font-size: 12px; font-weight: 700; opacity: .7; display: flex; align-items: center; gap: 2px; }
.poll-q { font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.poll-opt {
  font: inherit; text-align: left; color: inherit; background: transparent; cursor: pointer;
  border: 1.5px solid currentColor; border-radius: 12px; padding: 8px 12px; opacity: .9;
}
.poll-opt:hover { opacity: 1; }
.poll-res { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 10px; overflow: hidden; }
.poll-res .poll-bar { position: absolute; inset: 0 auto 0 0; background: currentColor; opacity: .15; border-radius: 10px; }
.poll-res.chosen { outline: 1.5px solid currentColor; }
.poll-text, .poll-num { position: relative; }
.poll-text { overflow-wrap: anywhere; }
.poll-num { font-size: 13px; opacity: .8; white-space: nowrap; }
.poll-you { font-size: 12px; opacity: .8; }
.poll-foot { font-size: 12px; opacity: .65; }
.poll-btn {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); background: var(--panel2); border: 1px solid var(--line); cursor: pointer;
}

/* message actions, reactions, reports */
.bubble.tappable { cursor: pointer; }
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.react-chip {
  font: inherit; font-size: 13px; color: inherit; background: rgba(127, 127, 127, .18);
  border: 1px solid transparent; border-radius: 999px; padding: 1px 8px; cursor: pointer;
}
.react-chip.mine { border-color: currentColor; }
.react-chip:disabled { cursor: default; }
.emoji-row { display: flex; justify-content: space-between; gap: 6px; }
.emoji-btn {
  font-size: 26px; line-height: 1; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 0; flex: 1; cursor: pointer;
}
.emoji-btn.active { border-color: var(--accent); background: var(--accent); }
.emoji-btn:disabled { opacity: .4; cursor: default; }
.quote {
  border-left: 3px solid var(--accent); padding: 6px 10px; background: var(--panel2); border-radius: 0 10px 10px 0;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px;
}
.row.wrap { flex-wrap: wrap; }
.card.report { gap: 8px; }
.card.report .row-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* replies */
.reply-quote {
  display: flex; flex-direction: column; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: rgba(127, 127, 127, .16); border: 0; border-left: 3px solid currentColor; border-radius: 4px 10px 10px 4px;
  padding: 4px 8px; margin: 2px 0 4px; font-size: 13px; opacity: .9;
}
.reply-quote .gone { font-style: italic; opacity: .8; }
.reply-who { font-weight: 700; font-size: 12px; }
.reply-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.reply-bar .reply-text { display: block; -webkit-line-clamp: unset; }
.reply-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; background: var(--panel);
  border-top: 1px solid var(--line); border-left: 3px solid var(--accent); font-size: 14px;
}
.reply-bar .reply-who { color: var(--accent); }
@keyframes flash { from { background: var(--accent); } to { background: transparent; } }
.msg.flash { animation: flash 1.2s ease-out; border-radius: 18px; }

/* profile pictures */
img.avatar { object-fit: cover; background: var(--panel2); padding: 0; }
.avatar-edit { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.avatar-cam {
  position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--panel);
}
.status-line { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; font-weight: 400; }

/* photos and voice messages */
.bubble .who.named { opacity: .9; }
.media-img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 4px 0; cursor: zoom-in; background: rgba(127, 127, 127, .15); }
/* voice notes: play button, progress bar, time, speed (like whatsapp) */
.voice { display: flex; align-items: center; gap: 10px; margin: 4px 0; min-width: 220px; }
.vp-btn { width: 40px; height: 40px; flex: none; border-radius: 50%; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; padding: 0; }
.vp-btn svg { fill: currentColor; }
.vp-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vp-bar { position: relative; height: 4px; border-radius: 2px; background: color-mix(in srgb, currentColor 25%, transparent); cursor: pointer; margin: 8px 0 2px; }
.vp-bar::before { content: ''; position: absolute; inset: -10px 0; } /* bigger touch target */
.vp-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: currentColor; border-radius: 2px; }
.vp-knob { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: currentColor; }
.vp-time { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }
.vp-speed { flex: none; border: none; border-radius: 12px; padding: 3px 8px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; }
.gone-media { font-style: italic; opacity: .7; }
.viewer { position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rec-time { text-align: center; font-size: 28px; font-variant-numeric: tabular-nums; padding: 8px 0; }
.rec-preview { width: 100%; }
.server-notice { font-size: 17px; }
.check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check-row input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.row.center { justify-content: center; }

/* links inside messages */
.bubble .text a, .server-notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.share-preview { max-width: 100%; max-height: 40vh; border-radius: 12px; align-self: center; object-fit: contain; }

/* @mentions */
.mention { font-weight: 700; background: rgba(127, 127, 127, .2); border-radius: 6px; padding: 0 3px; }
.mention.me { background: var(--accent); color: var(--accent-text); }
.msg.mine .mention.me { background: var(--accent-text); color: var(--accent); }
.mention-pop {
  display: flex; flex-direction: column; background: var(--panel); border-top: 1px solid var(--line);
  max-height: 240px; overflow-y: auto;
}
.mention-pop[hidden] { display: none; }
.mention-opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; font: inherit; color: var(--text);
  background: none; border: 0; text-align: left; cursor: pointer;
}
.mention-opt:hover { background: var(--panel2); }
.mention-opt .status-line { margin-left: auto; }

/* view-once, stickers, descriptions, blocked */
.once-btn, .once-label { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; margin: 4px 0; }
.once-btn { color: inherit; background: rgba(127, 127, 127, .18); border: 1.5px dashed currentColor; border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.once-label { opacity: .75; font-weight: 500; }
.viewer-caption { position: absolute; bottom: calc(20px + var(--bottom)); left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; opacity: .85; }
.msg.sticker .bubble { background: none !important; padding: 0; }
.msg.sticker .bubble .who, .msg.sticker .bubble .meta { color: var(--muted); }
.sticker-img { width: 140px; height: 140px; object-fit: contain; display: block; }
.sticker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sticker-tile { position: relative; aspect-ratio: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.sticker-tile img { width: 100%; height: 100%; object-fit: contain; }
.sticker-tile.editing { border-color: var(--danger); }
.sticker-x { position: absolute; top: -6px; right: -6px; background: var(--danger); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.group-desc { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); font-size: 14px; max-width: 420px; }
.blocked-note .linkish { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* a person/group row keeps room for the name; long names end in "…" instead of wrapping per letter */
.item .grow { min-width: 6em; }
.item .grow > .title, .item > .grow.title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }

/* search inside a chat */
.search-hit { overflow-wrap: anywhere; }
.search-hit mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* moderar → sitio: server health */
.health-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 0.92em; }
.health-row > span:last-child { text-align: right; overflow-wrap: anywhere; }
.health-row .warn { color: var(--danger, #d33); font-weight: 600; }
pre.log { font-size: 0.75em; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow: auto; background: var(--bg-2, rgba(127,127,127,.1)); padding: 8px; border-radius: 8px; margin: 0; }

/* polls with several answers */
.poll-opt.multi { display: flex; align-items: center; gap: 8px; }
.poll-box { width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 4px; flex: none; }
.poll-opt.ticked .poll-box { background: currentColor; }
.poll-send { text-align: center; font-weight: 700; }
.poll-send:disabled { opacity: .4; cursor: default; }

/* quick games */
.game { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.game-big { font-size: 28px; line-height: 1.2; }
.game-title { font-weight: 600; }
.game-picks { gap: 8px; flex-wrap: wrap; }
.game-picks .poll-opt { font-size: 22px; padding: 4px 14px; }
.game-emoji { font-size: 24px; width: 32px; text-align: center; }

/* view-once text, opened */
.once-text { font-size: 1.1em; white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; border-radius: 12px; background: var(--bg-2, rgba(127,127,127,.1)); }

/* buzón anónimo */
.inbox-q { align-items: flex-start; }
.inbox-text { font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-answer { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; opacity: .9; }
.col { display: flex; flex-direction: column; gap: 6px; flex: none; }

/* anuncios: the site-wide channel */
.ann-avatar { display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.ann-row { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ann-list { gap: 12px; }
.ann-post { background: var(--bg-2, rgba(127,127,127,.1)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 16px; padding: 12px 14px; max-width: 640px; width: 100%; align-self: center; }
.ann-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.ann-post .meta { margin-top: 6px; }
.ann-composer { display: flex; flex-direction: column; }
.ann-notify { display: flex; align-items: center; gap: 6px; padding: 6px 16px 0; }
.ann-composer .composer textarea { flex: 1; }
.ann-notify input { width: auto; flex: none; margin: 0; padding: 0; accent-color: var(--accent); }

/* markdown in announcements */
.ann-text.md { white-space: normal; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 8px; }
.md h3, .md h4, .md h5 { margin: 12px 0 6px; line-height: 1.25; }
.md h3 { font-size: 1.3em; }
.md h4 { font-size: 1.12em; }
.md h5 { font-size: 1em; }
.md ul, .md ol { margin: 2px 0 8px; padding-left: 22px; }
.md li { margin: 2px 0; }
.md li > ul, .md li > ol { margin: 2px 0; }
.md code { font-family: ui-monospace, monospace; font-size: .9em; background: rgba(127,127,127,.18); padding: 1px 5px; border-radius: 5px; }
.md pre { background: rgba(127,127,127,.15); padding: 10px; border-radius: 10px; overflow-x: auto; margin: 0 0 8px; }
.md pre code { background: none; padding: 0; white-space: pre; }
.md blockquote { margin: 0 0 8px; padding: 2px 0 2px 12px; border-left: 3px solid var(--accent); opacity: .9; }
.md hr { border: none; border-top: 1px solid rgba(127,127,127,.35); margin: 12px 0; }
.md a { color: var(--accent); }
.ann-notify .right { text-align: right; }
.ann-notify label { display: flex; align-items: center; gap: 6px; }

/* markdown inside chat bubbles: same rules, tighter */
.bubble .text.md, .once-text.md { white-space: normal; }
.bubble .md p { margin: 0 0 4px; }
.bubble .md h3 { font-size: 1.15em; margin: 4px 0; }
.bubble .md h4 { font-size: 1.05em; margin: 4px 0; }
.bubble .md h5 { font-size: 1em; margin: 4px 0; }
.bubble .md ul, .bubble .md ol { margin: 0 0 4px; padding-left: 20px; }
.bubble .md blockquote { margin: 0 0 4px; border-left-color: currentColor; opacity: .85; }
.bubble .md pre { margin: 0 0 4px; }
.bubble .md hr { margin: 6px 0; }

/* ---------- chat backgrounds (Tú → apariencia, or per chat) ---------- */
/* presets are drawn from the theme's own colors, so they work in light and dark */
.msgs.bg-dots { background-image: radial-gradient(color-mix(in srgb, var(--accent) 28%, transparent) 1.2px, transparent 1.6px); background-size: 22px 22px; }
.msgs.bg-grid {
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
}
.msgs.bg-glow {
  background-image: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    radial-gradient(100% 70% at 0% 100%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
}
.msgs.bg-sunset { background-image: linear-gradient(160deg, color-mix(in srgb, #ff7a59 26%, var(--bg)), color-mix(in srgb, #b44dd6 22%, var(--bg))); }
.msgs.bg-ocean { background-image: linear-gradient(170deg, color-mix(in srgb, #2aa9e0 24%, var(--bg)), color-mix(in srgb, #2246b8 24%, var(--bg))); }
.msgs.bg-forest { background-image: linear-gradient(170deg, color-mix(in srgb, #3fbf7f 22%, var(--bg)), color-mix(in srgb, #1d6b52 26%, var(--bg))); }
.msgs.bg-waves {
  background-image: repeating-radial-gradient(circle at 0 100%, transparent 0 18px, color-mix(in srgb, var(--accent) 12%, transparent) 18px 20px);
}
/* your own photo: dimmed with the background color so messages stay readable */
.msgs.bg-photo { background-size: cover; background-position: center; }
/* the background stays put while messages scroll over it, like a wallpaper */
.msgs[class*="bg-"] { background-attachment: scroll; }

/* the background pickers */
.bg-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.bg-chip {
  height: 64px; border-radius: 12px; border: 2px solid var(--line); background-color: var(--bg); cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding: 4px; font: inherit; font-size: 11px; color: var(--text);
  background-size: cover; background-position: center;
}
.bg-chip.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.bg-chip span { background: color-mix(in srgb, var(--bg) 80%, transparent); border-radius: 6px; padding: 1px 5px; }
.accent-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.accent-dot { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; }
.accent-dot.active { border-color: var(--text); }
.accent-dot.default { background: conic-gradient(#7c9cff, #b18cff, #ff86c8, #ffa463, #6fd69a, #7c9cff); }
.bg-chip.msgs { flex-direction: row; overflow: hidden; gap: 0; padding: 4px; }

/* inside your own bubbles (accent background) the theme's gray disappears: use the bubble's text color, softened */
.msg.mine .bubble .muted { color: inherit; opacity: .72; }
.msg.mine .bubble .meta { color: inherit; opacity: .75; }
.msg.mine .bubble .who { color: inherit; }
.msg.mine .bubble .poll-opt, .msg.mine .bubble .poll-res { color: inherit; }
.msg.mine .bubble .md code, .msg.mine .bubble .md pre { background: color-mix(in srgb, var(--accent-text) 14%, transparent); }
.msg.mine .bubble .once-btn { background: color-mix(in srgb, var(--accent-text) 12%, transparent); }

/* the message box hint stays on one line on narrow phones */
.composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nudge-icon.big { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }

/* feedback */
.fb-text { white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 500; }
.fb-info { overflow-wrap: anywhere; font-size: 11px; }
.fb-item.done { opacity: .6; }
.fb-item .row { margin-top: 6px; gap: 6px; }

/* ---------- message box: mic button, hold-to-record bar, photo waiting to be sent ---------- */
.composer { position: relative; }
.composer .send.mic { background: var(--accent); color: var(--accent-text); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.composer.recording .send.mic { transform: scale(1.35); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 25%, transparent); transition: transform .15s; }
.composer.recording > :not(.send):not(.rec-bar):not(.rec-lock) { visibility: hidden; }
.rec-bar {
  position: absolute; left: 10px; right: 64px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 22px; background: var(--panel2); overflow: hidden;
}
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: rec-blink 1s infinite; flex: none; }
@keyframes rec-blink { 50% { opacity: .2; } }
.rec-clock { font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-hint { flex: 1; text-align: center; color: var(--muted); font-size: 14px; white-space: nowrap; }
.rec-lock {
  position: absolute; right: 12px; bottom: 70px; width: 40px; padding: 8px 0; border-radius: 20px; background: var(--panel2);
  display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); animation: rec-up 1.2s infinite;
}
@keyframes rec-up { 50% { transform: translateY(-6px); } }
/* locked: recording hands-free, with its own cancel and send */
.composer.locked .rec-bar { right: 10px; }
.composer.locked > .send { visibility: hidden; }
.rec-bar .rec-trash { color: var(--danger); margin-left: auto; }
.rec-bar .rec-send { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--accent); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; }
.composer.locked .rec-bar { padding-right: 4px; }

#attach-slot:empty { display: none; }
.attach-chip { display: flex; align-items: center; gap: 10px; margin: 0 10px 6px; padding: 6px; border-radius: 14px; background: var(--panel2); }
.attach-chip img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; flex: none; }

/* text sent with a photo */
.bubble .caption { margin-top: 6px; }

/* swipe right to reply */
.msg { position: relative; touch-action: pan-y; }
.swipe-icon { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); opacity: 0; color: var(--muted); pointer-events: none; }
.msg.swipe-ready .swipe-icon { color: var(--accent); }
.msg .bubble { will-change: transform; }
.seg.small button { font-size: 14px; padding: 9px 7px; }
.voice audio { display: none; }

/* ---------- Tú: profile (discord-like) ---------- */
.card.hero { padding: 0; overflow: hidden; gap: 0; }
.hero-banner { height: 84px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--panel))); }
.hero-avatar { margin: -40px 0 0 16px; align-self: flex-start; border-radius: 50%; padding: 0; border: 5px solid var(--panel); background: var(--panel); }
.hero-body { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hero-body h3 { font-size: 21px; }

/* ---------- Ajustes: rows like whatsapp ---------- */
.set-list { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.set-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; color: var(--text);
  background: none; border: 0; border-bottom: 1px solid var(--line); padding: 13px 14px; cursor: pointer;
}
.set-row:last-child { border-bottom: 0; }
.set-row:active { background: var(--panel2); }
.set-row > svg { color: var(--muted); flex: none; }
.set-row .title, .set-me .title { display: block; }
.set-row .sub { display: block; margin-top: 1px; }
.set-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.set-icon.s-account { background: color-mix(in srgb, #3b82f6 22%, transparent); color: #60a5fa; }
.set-icon.s-privacy { background: color-mix(in srgb, #10b981 22%, transparent); color: #34d399; }
.set-icon.s-notifications { background: color-mix(in srgb, #ef4444 22%, transparent); color: #f87171; }
.set-icon.s-appearance { background: color-mix(in srgb, #a855f7 22%, transparent); color: #c084fc; }
.set-icon.s-language { background: color-mix(in srgb, #06b6d4 22%, transparent); color: #22d3ee; }
.set-icon.s-moderator { background: color-mix(in srgb, #f59e0b 22%, transparent); color: #fbbf24; }
.set-icon.s-help { background: color-mix(in srgb, #64748b 25%, transparent); color: #94a3b8; }
.set-me {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; cursor: pointer;
}
.set-me > svg { color: var(--muted); }
.set-me .title { font-size: 18px; font-weight: 700; }
.center { text-align: center; }
/* cards in a scrolling page keep their size (the page scrolls instead of squeezing them) */
main.scroll > * { flex-shrink: 0; }

/* ======================================================================
   whatsapp-like layout, for every style (the style only sets the colors)
   ====================================================================== */
#app { position: relative; }
header.top, header.chat-top { background: var(--header); }
header.top { padding: 12px 16px; }
header.chat-top { padding: 8px 8px 8px 4px; gap: 4px; }
nav.tabs { background: var(--tabs); }
.tab-icon { padding: 4px 18px; border-radius: 16px; transition: background .15s; }
.tab-icon .badge { left: calc(50% + 2px); }
nav.tabs button.active { color: var(--text); }
nav.tabs button.active .tab-icon { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--accent); }

/* chat: background, compact bubbles with a tail, time tucked at the bottom right */
.msgs { background-color: var(--chat-bg); gap: 6px; padding: 10px 14px; }
.composer { background: var(--composer); border-top: 0; }
.composer textarea { background: var(--field); border-color: transparent; }
.bubble { position: relative; background: var(--bubble-them); border-radius: 8px; border-top-left-radius: 0; padding: 6px 9px 5px 10px; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }
.msg.mine .bubble { background: var(--bubble-me); color: var(--bubble-me-text); border-radius: 8px; border-top-right-radius: 0; }
.bubble::before { content: ''; position: absolute; top: 0; left: -7px; width: 8px; height: 13px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.msg.mine .bubble::before { left: auto; right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.msg.sticker .bubble { box-shadow: none; }
.msg.sticker .bubble::before { display: none; }
.bubble .meta { opacity: .65; margin: 1px 0 -2px; }
.msg.mine .bubble .mention.me { background: var(--bubble-me-text); color: var(--bubble-me); }
.day span { background: var(--header); border: 0; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); border-radius: 8px; padding: 4px 12px; }
.sysnote { background: color-mix(in srgb, var(--header) 85%, transparent); border-radius: 8px; padding: 4px 12px; }

/* chat list: flat rows, bigger avatars, search, floating "+" */
.chat-search { display: flex; align-items: center; gap: 8px; background: var(--panel2); border-radius: 999px; padding: 0 14px; color: var(--muted); }
.chat-search input { background: none; border: 0; padding: 10px 0; min-width: 0; flex: 1; }
.chat-search input:focus { outline: none; }
.chat-list { gap: 0; margin: 0 -16px; }
.chat-list .item { border: 0; border-radius: 0; background: none; padding: 10px 16px; gap: 14px; }
.chat-list .item:active, .chat-list .item:hover { background: color-mix(in srgb, var(--panel2) 60%, transparent); }
.chat-list .avatar { width: 50px; height: 50px; font-size: 20px; }
.chat-list .chat-row.unread .row-top .muted { color: var(--accent); font-weight: 600; }
.chat-list .ann-row { border: 0; }
main.scroll.has-fab { padding-bottom: 92px; }
.fab {
  position: absolute; right: 16px; bottom: calc(80px + var(--bottom)); z-index: 5; width: 56px; height: 56px; border-radius: 16px; border: 0;
  background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.fab:active { transform: scale(.95); }

/* the "garabatos" chat background (default in the whatsapp style) */
.msgs.bg-doodle { background-image: url(/doodle.svg); background-size: 240px; }

/* choosing a style: little previews, two by two so each name fits on narrow phones */
.style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.style-pick { font: inherit; color: var(--text); background: none; border: 2px solid var(--line); border-radius: 14px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.style-pick.active { border-color: var(--accent); }
.style-pick .label { font-weight: 600; font-size: 14px; text-align: center; }
.pv { border-radius: 10px; overflow: hidden; height: 96px; display: flex; flex-direction: column; background: var(--pv-chat); }
.pv-top { height: 22px; background: var(--pv-head); }
.pv-msgs { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.pv-b { height: 14px; border-radius: 5px; width: 62%; background: var(--pv-them); }
.pv-b.me { align-self: flex-end; width: 54%; background: var(--pv-me); }
.pv[data-pv="whatsapp"] { --pv-chat: #0b141a; --pv-head: #202c33; --pv-them: #202c33; --pv-me: #005c4b; }
.pv[data-pv="discord"] { --pv-chat: #313338; --pv-head: #1e1f22; --pv-them: #2b2d31; --pv-me: #3e4691; }
.pv[data-pv="classic"] { --pv-chat: #0f1115; --pv-head: #171a21; --pv-them: #202531; --pv-me: #7c9cff; }
.pv[data-pv="elegant"] { --pv-chat: #121016; --pv-head: #18151c; --pv-them: #25212b; --pv-me: #583e4e; }
.pv[data-pv="elegant"] .pv-top { box-shadow: inset 0 -1px 0 rgba(216, 184, 120, .55); }
.pv[data-pv="elegant"] .pv-b { border-radius: 7px; }

/* ---------- text size, density, bubble shape (Ajustes → apariencia) ---------- */
:root { --fs: 1; }
:root[data-font="s"] { --fs: .9; }
:root[data-font="l"] { --fs: 1.14; }
:root[data-font="xl"] { --fs: 1.3; }
.bubble, .chat-list .item, .ann-text { font-size: calc(1rem * var(--fs)); }
:root[data-density="compact"] .msgs { gap: 2px; padding: 6px 10px; }
:root[data-density="compact"] .bubble { padding: 3px 8px 2px 9px; }
:root[data-density="compact"] .bubble .who { font-size: 11px; }
:root[data-density="compact"] .chat-list .item { padding: 6px 16px; }
:root[data-density="compact"] .chat-list .avatar { width: 40px; height: 40px; font-size: 16px; }
:root[data-density="compact"] main.scroll { gap: 10px; }
:root[data-density="compact"] .card { padding: 12px; gap: 8px; }
:root[data-bubbles="round"] .msg .bubble, :root[data-bubbles="round"] .msg.mine .bubble { border-radius: 18px; }
:root[data-bubbles="square"] .msg .bubble, :root[data-bubbles="square"] .msg.mine .bubble { border-radius: 4px; }
:root[data-bubbles="round"] .bubble::before, :root[data-bubbles="square"] .bubble::before { display: none; }

/* profiles */
.bio { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
.bio p { margin: 0; }
.avatar-btn { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; }
.person { margin: -4px -4px 4px; border-radius: 14px; overflow: hidden; background: var(--panel2); }
.person .hero-banner { height: 90px; }
.person-avatar { margin: -40px 0 0 16px; width: max-content; border-radius: 50%; border: 5px solid var(--panel2); background: var(--panel2); }

/* the sender's picture beside other people's messages */
.msg { gap: 8px; align-items: flex-start; }
.avatar.xs { width: 30px; height: 30px; font-size: 13px; }
.msg .avatar-btn, .msg .face-gap, .msg .avatar.anon { flex: none; margin-top: 1px; }
.face-gap { width: 30px; }
.avatar.anon { background: var(--panel2); color: var(--muted); }
.msg .bubble { max-width: calc(82% - 38px); }
.msg.mine .bubble { max-width: 82%; }
.adding-back { align-self: flex-start; }
/* the rest of a run by the same person: no tail, no name, closer together (like whatsapp) */
.msg.cont { margin-top: -3px; }
.msg.cont .bubble::before { display: none; }
.msg.cont .bubble { border-top-left-radius: 8px; }
.msg.mine.cont .bubble { border-top-right-radius: 8px; }
.msg.cont .bubble > .who { display: none; }

/* photos, like whatsapp: a thin frame, the time over the picture when there's no text */
.media-img { object-fit: cover; border-radius: 6px; margin: 0; max-width: 100%; }
.msg.photo .bubble { padding: 3px; }
.msg.photo .bubble > .who { padding: 2px 6px 3px; }
.msg.mine.photo .bubble > .who { display: none; }
.msg.photo .bubble > .reply-quote { margin: 0 0 3px; }
.msg.photo .bubble .caption { padding: 3px 6px 0; margin-top: 0; }
.msg.photo .bubble > .reactions { margin: 3px 4px 0; }
.msg.photo.captioned .bubble > .meta { padding: 0 6px 2px; }
.msg.photo:not(.captioned) .bubble:not(:has(> .reactions)) > .meta {
  position: absolute; right: 3px; bottom: 3px; margin: 0; padding: 14px 8px 4px 22px; border-radius: 0 0 6px 0;
  color: #fff; opacity: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  background: radial-gradient(at bottom right, rgba(0, 0, 0, .45), transparent 70%);
}
.msg.photo:not(.captioned) .bubble:not(:has(> .reactions)) > .meta .msg-del { color: #fff; }
img.avatar.zoom { cursor: zoom-in; }

/* short animations between screens (see animateScreen in app.js): the new screen slides in a little
   from the side it comes from, another tab fades in. sheets slide up and down, photos fade. */
#app { overflow-x: clip; }
@keyframes enter-fwd { from { opacity: 0; transform: translateX(32px); } }
@keyframes enter-back { from { opacity: 0; transform: translateX(-32px); } }
@keyframes enter-fade { from { opacity: 0; transform: translateY(8px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes zoom-in { from { transform: scale(.92); } }
.enter-fwd { animation: enter-fwd .22s cubic-bezier(.2, .8, .2, 1); }
.enter-back { animation: enter-back .22s cubic-bezier(.2, .8, .2, 1); }
.enter-fade { animation: enter-fade .18s ease-out; }
.fab.enter-fade { animation: fade-in .18s ease-out; }
.backdrop { animation: fade-in .2s ease-out; }
.backdrop > .sheet { animation: sheet-up .26s cubic-bezier(.2, .8, .2, 1); }
.backdrop.swap { animation: none; }
.backdrop.swap > .sheet { animation: fade-in .15s ease-out; }
.backdrop.closing { animation: fade-out .2s ease-in forwards; pointer-events: none; }
.backdrop.closing > .sheet { animation: sheet-down .2s ease-in forwards; }
.viewer { animation: fade-in .18s ease-out; }
.viewer img { animation: zoom-in .2s cubic-bezier(.2, .8, .2, 1); }
.viewer.closing { animation: fade-out .18s ease-in forwards; pointer-events: none; }
/* off in Ajustes → Apariencia, or when the phone asks for less motion */
:root[data-motion="off"] :is(.enter-fwd, .enter-back, .enter-fade, .backdrop, .backdrop > .sheet, .viewer, .viewer img) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.enter-fwd, .enter-back, .enter-fade, .backdrop, .backdrop > .sheet, .viewer, .viewer img) { animation: none !important; }
}

/* ---------- profundidad: shadows and raised surfaces, like whatsapp (data-depth on <html>) ----------
   light comes from above: raised things cast a shadow below and catch a thin highlight on top.
   the higher something floats (bubble < card < header < button < sheet), the bigger its shadow. */
:root[data-depth="on"] {
  --e1: 0 1px 2px rgba(0, 0, 0, .32), 0 1px 1px rgba(0, 0, 0, .2);
  --e2: 0 3px 8px rgba(0, 0, 0, .34), 0 1px 3px rgba(0, 0, 0, .24);
  --e3: 0 8px 22px rgba(0, 0, 0, .45), 0 3px 6px rgba(0, 0, 0, .3);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .08);
}
:root[data-depth="on"][data-theme="light"] {
  --e1: 0 1px 2px rgba(11, 20, 26, .14), 0 1px 1px rgba(11, 20, 26, .08);
  --e2: 0 3px 8px rgba(11, 20, 26, .12), 0 1px 3px rgba(11, 20, 26, .1);
  --e3: 0 8px 22px rgba(11, 20, 26, .2), 0 3px 6px rgba(11, 20, 26, .12);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .7);
}
@media (prefers-color-scheme: light) {
  :root[data-depth="on"][data-theme="auto"] {
    --e1: 0 1px 2px rgba(11, 20, 26, .14), 0 1px 1px rgba(11, 20, 26, .08);
    --e2: 0 3px 8px rgba(11, 20, 26, .12), 0 1px 3px rgba(11, 20, 26, .1);
    --e3: 0 8px 22px rgba(11, 20, 26, .2), 0 3px 6px rgba(11, 20, 26, .12);
    --hi: inset 0 1px 0 rgba(255, 255, 255, .7);
  }
}
/* bars: the chat header always floats over the messages, the list header once you scroll; the tab bar floats over the list */
:root[data-depth="on"] header.top, :root[data-depth="on"] header.chat-top { position: relative; z-index: 3; border-bottom-color: transparent; transition: box-shadow .2s; }
:root[data-depth="on"] header.chat-top, :root[data-depth="on"] header.top.scrolled { box-shadow: var(--e2); }
/* like whatsapp: the list header is the same color as the page, and lifts off it (color + shadow) once you scroll */
:root[data-depth="on"] header.top { background: var(--bg); transition: box-shadow .2s, background .2s; }
:root[data-depth="on"] header.top.scrolled { background: var(--header); }
:root[data-depth="on"] nav.tabs { position: relative; z-index: 3; border-top-color: transparent; box-shadow: 0 -1px 0 rgba(255, 255, 255, .03), 0 -3px 10px rgba(0, 0, 0, .22); }
:root[data-depth="on"][data-theme="light"] nav.tabs { box-shadow: 0 -3px 10px rgba(11, 20, 26, .08); }
:root[data-depth="on"] nav.tabs button.active .tab-icon { box-shadow: var(--hi); }
/* raised surfaces: cards and lists lose their outline and float instead */
:root[data-depth="on"] :is(.card, .set-list, .set-me, .ann-post) { border-color: transparent; box-shadow: var(--hi), var(--e2); }
:root[data-depth="on"] :is(.nudge, .temp-pass) { border-color: var(--accent); } /* these keep their colored outline */
:root[data-depth="on"] .ttl-btn.custom { border-color: var(--accent); }
:root[data-depth="on"] .chat-search { box-shadow: var(--hi), var(--e1); }
:root[data-depth="on"] .chat-list .avatar { box-shadow: var(--hi), var(--e1); }
:root[data-depth="on"] .badge { box-shadow: var(--e1); }
/* buttons sit up and sink when pressed */
:root[data-depth="on"] .fab { box-shadow: var(--hi), var(--e3); transition: transform .12s, box-shadow .12s; }
:root[data-depth="on"] .fab:active { transform: scale(.94); box-shadow: var(--e1); }
:root[data-depth="on"] .btn.primary { box-shadow: var(--hi), var(--e1); }
:root[data-depth="on"] .btn { transition: transform .1s, box-shadow .1s; }
:root[data-depth="on"] .btn:active { transform: translateY(1px); box-shadow: none; opacity: 1; filter: brightness(.9); }
/* chat: bubbles, date pills and notes float over the background; the message box and its buttons too */
:root[data-depth="on"] .bubble { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
:root[data-depth="on"][data-theme="light"] .bubble { box-shadow: 0 1px 1px rgba(11, 20, 26, .13); }
:root[data-depth="on"] .msg.sticker .bubble { box-shadow: none; }
:root[data-depth="on"] :is(.day span, .sysnote) { box-shadow: var(--e1); }
:root[data-depth="on"] .composer textarea { box-shadow: var(--hi), var(--e1); }
:root[data-depth="on"] .composer :is(.send, .poll-btn, .ttl-btn) { border-color: transparent; box-shadow: var(--hi), var(--e2); transition: transform .1s, box-shadow .1s; }
:root[data-depth="on"] .composer :is(.send, .poll-btn, .ttl-btn):active { transform: scale(.93); box-shadow: var(--e1); }
:root[data-depth="on"] .reply-bar { margin: 0 10px; border: 0; border-left: 3px solid var(--accent); border-radius: 12px; box-shadow: var(--hi), var(--e2); }
/* sheets rise above everything, with a handle on top */
:root[data-depth="on"] .sheet { box-shadow: var(--hi), 0 -10px 30px rgba(0, 0, 0, .45); }
:root[data-depth="on"] .sheet::before { content: ''; flex: none; align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--muted); opacity: .45; margin: -8px 0 -2px; }
:root[data-depth="on"] #toast { border-color: transparent; box-shadow: var(--hi), var(--e3); }

/* the "ia" bot: robot picture, and "ia está escribiendo…" (three bouncing dots) while it answers */
.avatar.bot { background: linear-gradient(135deg, #7c5cff, #00a884); color: #fff; }
.ai-typing .bubble { padding-bottom: 8px; }
.ai-typing .dots { display: inline-flex; gap: 4px; padding: 4px 2px 0; }
.ai-typing .dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; animation: ai-dot 1.2s infinite ease-in-out; }
.ai-typing .dots i:nth-child(2) { animation-delay: .15s; }
.ai-typing .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 30% { opacity: 1; transform: translateY(-3px); } 60% { opacity: .35; transform: none; } }
.card .linkish { font: inherit; font-size: 14px; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; align-self: flex-start; }
/* links that open a chat in the app (the ia bot gives these): look like a chip, not a web link */
a.in-app { text-decoration: none; font-weight: 600; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-radius: 6px; padding: 0 5px; }
/* its answer while it's being written: a blinking cursor at the end */
.ai-typing .caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; opacity: .6; animation: caret-blink 1s steps(2) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* moderar → estadísticas: a row of numbers for now, then one small bar chart per thing counted
   (marks in the accent, so they follow every style, accent and mode), and a table with every number */
.stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats.four .stat-n { overflow-wrap: anywhere; }
.stat-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.card.stat-chart { padding: 12px 14px 10px; gap: 8px; min-width: 0; }
.stat-head { display: flex; align-items: flex-start; gap: 12px; }
.stat-head h3 { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.stat-sum { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.stat-sum b { font-size: 17px; }
.stat-sum span { font-size: 11px; white-space: nowrap; }
/* y labels (top of the scale, 0) | bars, then the dates under the bars */
.stat-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; }
.stat-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; min-width: 3ch; font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-y span:first-child { transform: translateY(-50%); }
.stat-y span:last-child { transform: translateY(50%); }
/* the two hairlines are the top of the scale and the baseline (a little stronger, the bars stand on it) */
.stat-bars {
  display: block; width: 100%; overflow: hidden; touch-action: pan-y;
  border-top: 1px solid var(--line); border-bottom: 1px solid color-mix(in srgb, var(--muted) 45%, var(--panel));
}
.stat-bars .bar { fill: var(--accent); pointer-events: none; }
.stat-bars .bar.on { fill: color-mix(in srgb, var(--accent) 70%, var(--text)); }
.stat-bars .hit { fill: transparent; cursor: pointer; }
.stat-bars .hit.on { fill: color-mix(in srgb, var(--text) 7%, transparent); }
.stat-x { grid-column: 2; display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 11px; white-space: nowrap; }
.stat-readout { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.card.stat-table { display: block; padding: 12px 14px; }
.stat-table summary { cursor: pointer; font-size: 14px; color: var(--accent); }
.stat-table-wrap { overflow-x: auto; margin-top: 8px; }
.stat-table table { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.stat-table :is(th, td) { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stat-table thead th { color: var(--muted); font-weight: 600; font-size: 12px; white-space: normal; min-width: 64px; vertical-align: bottom; }
.stat-table tbody th { font-weight: 400; color: var(--muted); }
.stat-table :is(thead, tbody) th:first-child { position: sticky; left: 0; text-align: left; background: var(--panel); min-width: 0; }
/* moderar: contexto, ocultos, palabras, registro */
/* a message hidden after several reports: a dashed placeholder, no tail, never in the sender's color */
:root .msg.hidden-msg .bubble { background: color-mix(in srgb, var(--bubble-them) 55%, transparent); color: var(--muted); border: 1px dashed color-mix(in srgb, var(--muted) 50%, transparent); box-shadow: none; }
.msg.hidden-msg .bubble::before { display: none; }
.hidden-text { font-style: italic; font-size: 14px; }
.hidden-text svg { vertical-align: -2px; }
.hidden-msg .linkish { font: inherit; font-size: 13px; color: var(--accent); background: none; border: 0; padding: 0; margin-top: 2px; cursor: pointer; text-decoration: underline; }
/* reports: the hidden ones say so */
.card.report.is-hidden { border-color: var(--danger-line); }
.report-hidden { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: 12px; padding: 8px 10px; }
.report-hidden svg { flex: none; margin-top: 1px; }
/* the context sheet: the reported message stands out */
.ctx-list { display: flex; flex-direction: column; gap: 6px; }
.ctx-line { background: var(--panel2); border-left: 3px solid transparent; border-radius: 4px 12px 12px 4px; padding: 7px 10px; }
.ctx-line.sys { background: none; text-align: center; padding: 2px 10px; }
.ctx-line.reported { background: var(--danger-bg); border-left-color: var(--danger); }
.ctx-meta { margin-bottom: 2px; }
.ctx-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
/* blocked words: chips with a remove button */
.chip.word-chip { display: inline-flex; align-items: center; gap: 4px; padding-right: 8px; cursor: default; }
.word-x { display: inline-flex; padding: 2px; margin: -2px -2px -2px 0; background: none; border: 0; border-radius: 50%; color: var(--muted); cursor: pointer; }
.word-x:hover, .word-x:focus-visible { color: var(--danger); }
.word-add input { flex: 1; min-width: 0; }
.word-add .btn { flex: none; }
/* the moderator log */
.log-list { display: flex; flex-direction: column; }
.log-row { padding: 8px 0; border-top: 1px solid var(--line); }
.log-row:first-child { border-top: 0; padding-top: 0; }
.log-what { font-size: 14px; overflow-wrap: anywhere; }
.log-when { margin-top: 2px; overflow-wrap: anywhere; }
/* ======================================================================
   elegante (data-style="elegant"). its colors are with the other styles at the top.
   the one bold thing is the serif: screen titles, chat names, sheet titles, monogram avatars and the
   app's own notices speak in it; what people write stays in the phone's sans. everything around it
   is quiet: lighter weights, no all-caps labels, the accent only where something is yours or active,
   softer shadows, rounder shapes. rules start with :where(...) so they weigh the same as the shared
   rule they replace (being later, they win), and density, bubble shape, depth etc. still win over them.
   ====================================================================== */
:root[data-style="elegant"] { --display: ui-serif, "New York", "Iowan Old Style", "Noto Serif", Georgia, serif; }

/* type: serif titles, regular weight, a touch tighter */
:where(:root[data-style="elegant"]) header.top { padding: 14px 18px 12px; }
:where(:root[data-style="elegant"]) header.top h2 { font: 400 28px/1.15 var(--display); letter-spacing: -.01em; }
:where(:root[data-style="elegant"]) header.chat-top .titles .name { font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: -.01em; }
:where(:root[data-style="elegant"]) :is(.sheet h3, .card h3) { font-family: var(--display); font-weight: 500; font-size: 21px; letter-spacing: -.005em; }
:where(:root[data-style="elegant"]) .hero-body h3 { font-family: var(--display); font-weight: 500; font-size: 25px; }
:where(:root[data-style="elegant"]) .set-me .title { font-family: var(--display); font-weight: 500; font-size: 20px; }
:where(:root[data-style="elegant"]) .brand h1 { font: 400 34px/1.1 var(--display); letter-spacing: -.015em; }
/* section labels: sentence case, not shouted */
:where(:root[data-style="elegant"]) h4.section { text-transform: none; letter-spacing: .005em; font-size: 13.5px; font-weight: 600; margin: 6px 2px 8px; }

/* chrome: icons in the text color (the accent is kept for what's active), 44px to tap */
:where(:root[data-style="elegant"]) .icon-btn { color: var(--text); padding: 11px; border-radius: 999px; }
:where(:root[data-style="elegant"]) header.chat-top .titles { border-radius: 14px; }
/* tab bar: no pill, a short gold line over the active tab */
:where(:root[data-style="elegant"]) nav.tabs button { position: relative; font-size: 11.5px; letter-spacing: .01em; padding: 9px 0 10px; }
:where(:root[data-style="elegant"]) nav.tabs button.active .tab-icon { background: none; }
:where(:root[data-style="elegant"]) nav.tabs button.active::before { content: ''; position: absolute; top: -1px; left: 50%; width: 28px; height: 2px; margin-left: -14px; border-radius: 0 0 2px 2px; background: var(--accent); }
:where(:root[data-style="elegant"]) .badge { font-weight: 600; }

/* chat list: roomier rows, monogram avatars */
:where(:root[data-style="elegant"]) .chat-list .item { padding: 12px 18px; gap: 15px; }
:where(:root[data-style="elegant"]) .chat-list .avatar { width: 52px; height: 52px; }
:where(:root[data-style="elegant"]) .chat-row .row-bottom { margin-top: 3px; }
:where(:root[data-style="elegant"]) .chat-row .row-top .muted { font-size: 12.5px; font-variant-numeric: tabular-nums; }
:where(:root[data-style="elegant"]) .chat-search { background: var(--field); border: 1px solid var(--line); }
:where(:root[data-style="elegant"]) .nudge { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
:where(:root[data-style="elegant"]) .fab { border-radius: 20px; }
/* letter avatars: muted tones, the letter set like a monogram */
:where(:root[data-style="elegant"]) .avatar[style*="--hue"] {
  background: hsl(var(--hue) 16% var(--avatar-bg)); color: hsl(var(--hue) 34% var(--avatar-fg));
  font-family: var(--display); font-weight: 500;
}
:where(:root[data-style="elegant"]) .chat-list .avatar[style*="--hue"] { font-size: 23px; }
:where(:root[data-style="elegant"]) .avatar.bot { background: linear-gradient(135deg, #5b4a73, #c6a46a); color: #fff8ec; }
:where(:root[data-style="elegant"]) .ann-avatar { background: var(--panel2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
/* profile banners keep the color people picked, a little dustier so it sits with the rest */
:where(:root[data-style="elegant"]) .hero-banner { filter: saturate(.7) brightness(.92); }
:where(:root[data-style="elegant"]) :is(.hero-avatar, .person-avatar) { position: relative; } /* the filter would paint the banner over them */

/* chat: flat tonal bubbles, a small corner where the tail would be, quieter time line */
:where(:root[data-style="elegant"]) .msgs { gap: 6px; padding: 12px 14px; }
:where(:root[data-style="elegant"]) .bubble { padding: 7px 12px 6px; box-shadow: none; border-radius: 18px; line-height: 1.42; }
:where(:root[data-style="elegant"]) .msg.mine .bubble { border-radius: 18px; }
:root[data-style="elegant"][data-bubbles="tail"] .msg .bubble { border-radius: 18px; border-top-left-radius: 5px; }
:root[data-style="elegant"][data-bubbles="tail"] .msg.mine .bubble { border-radius: 18px; border-top-right-radius: 5px; }
:where(:root[data-style="elegant"]) .bubble::before { display: none; }
:where(:root[data-style="elegant"]) .bubble .who { font-size: 12.5px; font-weight: 600; opacity: 1; color: var(--muted); letter-spacing: .01em; margin-bottom: 1px; }
:where(:root[data-style="elegant"]) .msg.mine .bubble .who { opacity: .7; }
:where(:root[data-style="elegant"]) .bubble .meta { font-size: 11px; opacity: .66; gap: 4px; margin: 2px 0 -1px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
:where(:root[data-style="elegant"]) .msg-del { opacity: .6; }
/* dates and notices are the app talking: small serif italics, no boxes */
:where(:root[data-style="elegant"]) .day span {
  background: color-mix(in srgb, var(--chat-bg) 80%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 999px; box-shadow: none; padding: 3px 12px; font-size: 12px; letter-spacing: .02em;
}
:where(:root[data-style="elegant"]) .sysnote { background: none; font: italic 13.5px/1.35 var(--display); color: var(--muted); padding: 1px 12px; }
:where(:root[data-style="elegant"]) .sysnote .linkish { font-style: normal; }
/* inside bubbles */
:where(:root[data-style="elegant"]) .reply-quote {
  background: color-mix(in srgb, currentColor 7%, transparent); border-left: 2px solid var(--accent);
  border-radius: 4px 12px 12px 4px; padding: 5px 10px; opacity: 1;
}
:where(:root[data-style="elegant"]) .reply-quote .reply-who { color: var(--accent); font-weight: 600; }
:where(:root[data-style="elegant"]) .react-chip {
  position: relative; background: color-mix(in srgb, currentColor 8%, transparent); border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  padding: 2px 9px; font-variant-numeric: tabular-nums;
}
:where(:root[data-style="elegant"]) .react-chip.mine { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
:where(:root[data-style="elegant"]) .react-chip::after { content: ''; position: absolute; inset: -6px -2px; } /* easier to tap */
:where(:root[data-style="elegant"]) .poll-label { opacity: 1; color: var(--accent); font-weight: 600; letter-spacing: .01em; }
:where(:root[data-style="elegant"]) .poll-q { font-size: 1.05em; }
:where(:root[data-style="elegant"]) .poll-opt {
  min-height: 44px; border: 1px solid color-mix(in srgb, currentColor 26%, transparent); border-radius: 14px; padding: 10px 14px; opacity: 1;
  background: color-mix(in srgb, currentColor 3%, transparent);
}
:where(:root[data-style="elegant"]) .poll-opt:hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
:where(:root[data-style="elegant"]) .poll-res { border-radius: 12px; padding: 8px 12px; }
:where(:root[data-style="elegant"]) .poll-res .poll-bar { opacity: .13; border-radius: 12px; }
:where(:root[data-style="elegant"]) .poll-res.chosen { outline: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); }
:where(:root[data-style="elegant"]) .poll-foot { opacity: .6; }
:where(:root[data-style="elegant"]) .vp-btn { width: 44px; height: 44px; background: var(--accent); color: var(--accent-text); }
:where(:root[data-style="elegant"]) :is(.vp-fill, .vp-knob) { background: var(--accent); }
:where(:root[data-style="elegant"]) .vp-bar { height: 3px; background: color-mix(in srgb, currentColor 20%, transparent); }
:where(:root[data-style="elegant"]) .once-btn { border: 1px dashed color-mix(in srgb, currentColor 45%, transparent); background: color-mix(in srgb, currentColor 6%, transparent); border-radius: 14px; }
:where(:root[data-style="elegant"]) .media-img { border-radius: 14px; }
:where(:root[data-style="elegant"]) .msg.photo:not(.captioned) .bubble:not(:has(> .reactions)) > .meta { border-radius: 0 0 14px 0; }
/* your own bubble is already the accent: things inside it use its text color instead */
:where(:root[data-style="elegant"]) .msg.mine :is(.reply-quote .reply-who, .poll-label) { color: inherit; }
:where(:root[data-style="elegant"]) .msg.mine .reply-quote { border-left-color: color-mix(in srgb, currentColor 55%, transparent); }

/* message box: a hairline field, round buttons */
:where(:root[data-style="elegant"]) .composer { gap: 8px; padding: 8px 10px calc(10px + var(--bottom)); }
:where(:root[data-style="elegant"]) .composer textarea { border: 1px solid var(--line); border-radius: 22px; padding: 11px 16px; }
:where(:root[data-style="elegant"]) .composer textarea:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
/* typing shows as a gold edge on the field itself, not a second ring around it */
:root[data-style="elegant"] .composer textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
:where(:root[data-style="elegant"]) :is(.ttl-btn, .poll-btn) { background: var(--field); border-color: var(--line); }
:where(:root[data-style="elegant"]) .reply-bar { border-left-width: 2px; }

/* surfaces: rounder, roomier, no colored icon tiles */
:where(:root[data-style="elegant"]) .card { border-radius: 20px; padding: 18px; gap: 12px; }
:where(:root[data-style="elegant"]) .card.nudge { padding: 12px 8px 12px 16px; } /* keeps its tighter padding: narrow list panes need the room */
:where(:root[data-style="elegant"]) .nudge .btn.small { padding-inline: 14px; }
:where(:root[data-style="elegant"]) .nudge .title { hyphens: auto; -webkit-hyphens: auto; } /* "notifica-ciones", not "notificacion/es", in a narrow list pane */
:where(:root[data-style="elegant"]) :is(.set-list, .set-me) { border-radius: 20px; }
:where(:root[data-style="elegant"]) .item { border-radius: 16px; }
:where(:root[data-style="elegant"]) .set-row { padding: 14px 16px; border-bottom-color: color-mix(in srgb, var(--line) 75%, transparent); }
:where(:root[data-style="elegant"]) .set-row .set-icon { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--accent); border-radius: 12px; }
:where(:root[data-style="elegant"]) .ann-post { border-color: var(--line); border-radius: 20px; padding: 14px 16px; }
:where(:root[data-style="elegant"]) .stat { border-radius: 16px; }
:where(:root[data-style="elegant"]) .quote { border-left-width: 2px; border-radius: 4px 12px 12px 4px; }
:where(:root[data-style="elegant"]) .sheet { border-radius: 26px 26px 0 0; padding: 20px 18px calc(20px + var(--bottom)); gap: 14px; }
:where(:root[data-style="elegant"]) .emoji-btn { border-color: transparent; border-radius: 16px; }
:where(:root[data-style="elegant"]) #toast { border-radius: 16px; padding: 12px 16px; }

/* controls: pill buttons, filled ones without an outline, chips that tint instead of flooding */
:where(:root[data-style="elegant"]) .btn { border-radius: 24px; padding: 12px 20px; letter-spacing: .01em; border-color: transparent; } /* a pill on one line, a soft card on two */
:where(:root[data-style="elegant"]) .btn.small { border-radius: 18px; padding: 8px 14px; }
:where(:root[data-style="elegant"]) .btn.ghost { border-color: var(--line); }
:where(:root[data-style="elegant"]) .btn.danger { border-color: var(--danger-line); }
:where(:root[data-style="elegant"]) :is(input, select, textarea) { border-radius: 14px; }
:where(:root[data-style="elegant"]) .seg { border-radius: 999px; padding: 4px; }
:where(:root[data-style="elegant"]) .seg button { border-radius: 999px; }
:where(:root[data-style="elegant"]) .chips { gap: 8px; }
:where(:root[data-style="elegant"]) .chip { position: relative; padding: 8px 15px; background: transparent; }
:where(:root[data-style="elegant"]) button.chip::after { content: ''; position: absolute; inset: -4px 0; } /* 44px to tap, 36px to see (not on chips with their own buttons inside) */
:where(:root[data-style="elegant"]) .chip.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--text);
}
:where(:root[data-style="elegant"]) .switch .knob { background: color-mix(in srgb, var(--muted) 45%, var(--panel2)); }
:where(:root[data-style="elegant"]) .accent-dot.active { border-color: var(--bg); box-shadow: 0 0 0 2px var(--text); }

/* profundidad in this style: soft, wide shadows that fade out, a faint warm edge on top. the bars
   get a hairline instead of a cast shadow, the message box and search stay flat */
:root[data-style="elegant"][data-depth="on"] {
  --e1: 0 1px 2px rgba(0, 0, 0, .28);
  --e2: 0 10px 24px -12px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .22);
  --e3: 0 18px 40px -14px rgba(0, 0, 0, .7), 0 3px 8px rgba(0, 0, 0, .3);
  --hi: inset 0 1px 0 rgba(255, 244, 228, .05);
  --hi-fill: inset 0 1px 0 rgba(255, 255, 255, .18);
  --e-bubble: 0 1px 1.5px rgba(0, 0, 0, .22);
}
:root[data-style="elegant"][data-depth="on"][data-theme="light"] {
  --e1: 0 1px 2px rgba(36, 26, 46, .07);
  --e2: 0 10px 26px -14px rgba(36, 26, 46, .22), 0 1px 2px rgba(36, 26, 46, .06);
  --e3: 0 20px 44px -16px rgba(36, 26, 46, .3), 0 3px 8px rgba(36, 26, 46, .08);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  --e-bubble: 0 1px 1.5px rgba(36, 26, 46, .09);
}
@media (prefers-color-scheme: light) {
  :root[data-style="elegant"][data-depth="on"][data-theme="auto"] {
    --e1: 0 1px 2px rgba(36, 26, 46, .07);
    --e2: 0 10px 26px -14px rgba(36, 26, 46, .22), 0 1px 2px rgba(36, 26, 46, .06);
    --e3: 0 20px 44px -16px rgba(36, 26, 46, .3), 0 3px 8px rgba(36, 26, 46, .08);
    --hi: inset 0 1px 0 rgba(255, 255, 255, .9);
    --e-bubble: 0 1px 1.5px rgba(36, 26, 46, .09);
  }
}
:root[data-style="elegant"][data-depth="on"] .msg:not(.sticker):not(.hidden-msg) > .bubble { box-shadow: var(--e-bubble); }
:root[data-style="elegant"][data-depth="on"] nav.tabs { box-shadow: 0 -1px 0 var(--line); }
:root[data-style="elegant"][data-depth="on"] nav.tabs button.active .tab-icon { box-shadow: none; }
:root[data-style="elegant"][data-depth="on"] header.chat-top { box-shadow: 0 1px 0 var(--line), 0 12px 24px -20px rgba(0, 0, 0, .5); }
:root[data-style="elegant"][data-depth="on"] :is(.day span, .sysnote, .chat-search, .composer textarea:not(:focus-visible)) { box-shadow: none; }
:root[data-style="elegant"][data-depth="on"] .composer :is(.poll-btn, .ttl-btn:not(.custom)) { border-color: var(--line); box-shadow: none; }
:root[data-style="elegant"][data-depth="on"] .nudge { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
:root[data-style="elegant"][data-depth="on"] .chat-list .avatar:not(.ann-avatar) { box-shadow: none; }
/* filled buttons get a faint sheen on top: the light theme's white edge looked like a scratch on them */
:root[data-style="elegant"][data-depth="on"] .btn.primary:not(:active) { box-shadow: var(--hi-fill), var(--e1); }
:root[data-style="elegant"][data-depth="on"] .fab:not(:active) { box-shadow: var(--hi-fill), var(--e3); }
:root[data-style="elegant"][data-depth="on"] .composer .send:not(:active) { box-shadow: var(--hi-fill), var(--e2); }
/* ======================================================================
   escritorio: dos paneles. app.js sets <html data-layout="split"> from 900px wide (and 500px tall, so
   phones on their side keep the phone layout). the tab bar becomes a rail down the left, the list stays
   beside it and whatever is open fills the rest. it only uses the colors every style already has, so
   all styles, themes, densities and bubble shapes work as they are. what a style can restyle here:
     #app > nav.tabs      the rail: the tabs, then Ajustes at the bottom (.rail-settings, .on while open)
     .side-pane           the list: header.top, main.scroll, the "+" (.fab)
     .view-pane           what's open: a chat (header.chat-top, .msgs, .composer) or a page (header.top +
                          main.scroll, kept to a column of --col in the middle; .wide for Moderar)
     .view-empty          nothing open yet: the chat background with .empty inside
     .chat-row.selected   the open chat in the list
     .to-list             back buttons that only lead to the list: hidden here
     .sheet               a dialog in the middle instead of a sheet from the bottom
   ====================================================================== */
:root[data-layout="split"] { --rail-w: 72px; --side-w: clamp(340px, 30vw, 420px); }
:root[data-layout="split"] #app {
  display: grid; grid-template-columns: var(--rail-w) var(--side-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  max-width: 1600px;
}
/* edge to edge, until the screen is wider than the app: then it's framed like the phone column */
@media (max-width: 1600px) { :root[data-layout="split"] #app { border-left: 0; border-right: 0; } }
.side-pane, .view-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.side-pane { background: var(--bg); border-right: 1px solid var(--line); }
.view-pane { background: var(--bg); --col: 640px; }
.view-pane.wide { --col: 880px; }
/* the bars on both sides line up */
:root[data-layout="split"] :is(header.top, header.chat-top) { min-height: 64px; padding-block: 8px; }
:root[data-layout="split"] :is(.msgs, main.scroll) { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* the rail */
:root[data-layout="split"] nav.tabs {
  flex-direction: column; gap: 2px; padding: 10px 0 calc(10px + var(--bottom));
  border-top: 0; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none;
}
:root[data-layout="split"] nav.tabs button { flex: none; padding: 8px 0; }
.rail-settings { margin-top: auto; }
nav.tabs button.rail-settings.on { color: var(--accent); }
:root[data-layout="split"][data-depth="on"] nav.tabs { border-right-color: transparent; box-shadow: 1px 0 0 rgba(255, 255, 255, .03), 3px 0 10px rgba(0, 0, 0, .22); }
:root[data-layout="split"][data-depth="on"][data-theme="light"] nav.tabs { box-shadow: 3px 0 10px rgba(11, 20, 26, .08); }

/* the list: the "+" sits lower (no tab bar under it), Moderar's sections are a list down the side */
:root[data-layout="split"] .fab { bottom: calc(24px + var(--bottom)); }
:root[data-layout="split"] .side-pane main.scroll > .seg { flex-direction: column; overflow: visible; gap: 2px; }
:root[data-layout="split"] .side-pane main.scroll > .seg button { flex: none; text-align: left; padding: 11px 14px; font-size: 15px; }
.chat-list .chat-row.selected, .chat-list .chat-row.selected:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent); }

/* what's open: a chat fills the pane, a page keeps to a column in the middle */
.view-pane > header.top, .view-pane > main.scroll { padding-inline: max(16px, calc((100% - var(--col)) / 2)); }
.view-pane > main.scroll { padding-block: 20px 40px; }
:root[data-layout="split"] .to-list { display: none; }
:root[data-layout="split"] .view-pane header.chat-top { padding-left: 12px; }
:root[data-layout="split"] .view-pane .msgs { padding-inline: clamp(14px, 4%, 56px); }
/* long messages stay readable: about 70 letters a line */
:root[data-layout="split"] .msg .bubble { max-width: min(calc(82% - 38px), 600px); }
:root[data-layout="split"] .msg.mine .bubble { max-width: min(82%, 600px); }
.view-empty .empty { max-width: 420px; align-self: center; }
.view-empty .btn { align-self: center; width: auto; margin-top: 4px; }

/* sheets: a dialog in the middle of the screen */
:root[data-layout="split"] .backdrop { align-items: center; padding: 32px; }
:root[data-layout="split"] .sheet { max-width: 480px; max-height: min(88dvh, 820px); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 20px; }
:root[data-layout="split"] .sheet::before { display: none; } /* the handle is for dragging, on phones */
:root[data-layout="split"][data-depth="on"] .sheet { border-color: transparent; box-shadow: var(--hi), var(--e3); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
:root[data-layout="split"] .backdrop > .sheet { animation: dialog-in .2s cubic-bezier(.2, .8, .2, 1); }
:root[data-layout="split"] .backdrop.swap > .sheet { animation: fade-in .15s ease-out; }
:root[data-layout="split"] .backdrop.closing > .sheet { animation: dialog-out .16s ease-in forwards; }
/* another chat opening on the right just fades in (see settlePanes in app.js) */
.enter-pane { animation: fade-in .16s ease-out; }
:root[data-motion="off"] .enter-pane { animation: none; }
@media (prefers-reduced-motion: reduce) { .enter-pane { animation: none; } }

/* with a mouse, at any width: hover feedback, and a reply button beside messages (app.js adds it,
   since there's no swipe) */
.msg-reply { display: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover { background-color: color-mix(in srgb, var(--panel2) 88%, var(--text)); }
  .btn.primary:not(:disabled):hover { background-color: color-mix(in srgb, var(--accent) 88%, var(--text)); }
  .btn.danger:not(:disabled):hover { background-color: color-mix(in srgb, var(--danger-bg) 82%, var(--danger)); }
  .fab:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
  :is(.chip, .seg button):not(.active):not(:disabled):hover { color: var(--text); background-color: color-mix(in srgb, var(--panel2) 88%, var(--text)); }
  :is(.set-row, .set-me, .item.option):hover { background: color-mix(in srgb, var(--panel2) 70%, transparent); }
  button.item:not(.chat-row):not(.selected):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
  nav.tabs button:not(.active):hover { color: var(--text); }
  nav.tabs button:not(.active):hover .tab-icon { background: color-mix(in srgb, var(--text) 8%, transparent); }
  .composer :is(.poll-btn, .ttl-btn):hover { color: var(--text); }
  :is(.emoji-btn, .bg-chip, .style-pick):not(.active):not(:disabled):hover { border-color: var(--muted); }
  :is(.older, .linkish):hover { text-decoration: underline; }
  .msg-reply {
    display: inline-flex; flex: none; align-self: center; visibility: hidden; padding: 6px; border: 0; border-radius: 50%;
    cursor: pointer; color: var(--muted); background: color-mix(in srgb, var(--panel2) 85%, transparent);
  }
  .msg.mine .msg-reply { order: -1; }
  .msg:hover .msg-reply { visibility: visible; }
  .msg-reply:hover { color: var(--accent); }
}

/* ======================================================================
   elegante on the computer (two panes) and on the newer Moderar screens. after the layout above, so
   these win where both apply; still only with data-style="elegant".
   ====================================================================== */
/* the rail: the gold line moves to the left edge of the active tab, Ajustes uses it too */
:root[data-style="elegant"][data-layout="split"] nav.tabs button.active::before,
:root[data-style="elegant"][data-layout="split"] nav.tabs button.rail-settings.on::before {
  content: ''; position: absolute; top: 50%; left: 0; width: 2px; height: 30px; margin: -15px 0 0; border-radius: 0 2px 2px 0; background: var(--accent);
}
:root[data-style="elegant"][data-layout="split"] nav.tabs button.rail-settings.on { color: var(--text); font-weight: 600; }
:root[data-style="elegant"][data-layout="split"] nav.tabs button.rail-settings.on .tab-icon { color: var(--accent); }
:root[data-style="elegant"][data-layout="split"][data-depth="on"] nav.tabs { box-shadow: 1px 0 0 var(--line); }
/* the list beside: the open chat gets a quiet lift and the gold line, not a colored wash */
:root[data-style="elegant"] .chat-list .chat-row.selected,
:root[data-style="elegant"] .chat-list .chat-row.selected:hover { background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
:root[data-style="elegant"] .chat-list .chat-row.selected .title { color: var(--strong); }
:root[data-style="elegant"][data-layout="split"] .side-pane main.scroll > .seg { border-radius: 20px; padding: 6px; }
:root[data-style="elegant"][data-layout="split"] .side-pane main.scroll > .seg button { border-radius: 14px; }
/* what's open: a little more room for the serif names, and a dialog shaped like the cards */
:root[data-style="elegant"][data-layout="split"] header.chat-top .titles .name { font-size: 20px; }
:root[data-style="elegant"][data-layout="split"] .sheet { border-radius: 22px; padding: 22px 24px 24px; }
/* hover: the same quiet tint everywhere, no pill behind the rail icons */
@media (hover: hover) and (pointer: fine) {
  :root[data-style="elegant"] nav.tabs button:not(.active):hover .tab-icon { background: none; }
  :root[data-style="elegant"] .chat-list .item:not(.selected):hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
}

/* nothing open yet, and other empty states: the icon in a thin gold ring, the line in the serif */
:where(:root[data-style="elegant"]) .empty-icon { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
:where(:root[data-style="elegant"]) .empty h3 { font-family: var(--display); font-weight: 500; font-size: 24px; letter-spacing: -.005em; }

/* moderar: numbers set like the titles, chart titles smaller than card titles */
:where(:root[data-style="elegant"]) .stat-n { font-family: var(--display); font-weight: 500; }
:where(:root[data-style="elegant"]) .stat-head h3 { font-size: 16px; }
:where(:root[data-style="elegant"]) .stat-sum b { font-family: var(--display); font-weight: 500; font-size: 18px; }
:where(:root[data-style="elegant"]) .ctx-line { border-left-width: 2px; }
:where(:root[data-style="elegant"]) .report-hidden { border-radius: 14px; }

/* ---------- live voice rooms and calls ----------
   one palette for every style: the room stays with its chat and the mini bar survives navigation. */
#voice-room-slot { flex: none; }
.voice-room { padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.voice-room.joined { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.voice-room-head { display: flex; align-items: center; gap: 10px; }
.voice-room-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--panel2); font-size: 18px; }
.voice-room strong { font-size: 14px; }
.voice-room-head .grow { min-width: 0; }
.voice-room-head .btn { flex: none; }
.voice-people { display: flex; gap: 16px; margin: 14px 0 1px; overflow-x: auto; padding: 3px 2px; }
.voice-person { display: flex; flex: none; flex-direction: column; align-items: center; gap: 5px; min-width: 48px; }
.voice-face { position: relative; display: block; border-radius: 50%; padding: 3px; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .15s; }
.voice-person.speaking .voice-face { box-shadow: 0 0 0 2px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 25%, transparent); }
.voice-person.is-muted .voice-face { opacity: .65; }
.voice-person-state { position: absolute; bottom: -2px; right: -2px; border: 2px solid var(--panel); border-radius: 50%; width: 17px; height: 17px; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; font: 700 13px/1 system-ui; }
.voice-person.is-muted .voice-person-state { background: var(--panel2); color: var(--muted); }
.voice-person-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.voice-person-caption { display: none; }
.voice-settings p { margin-top: 9px; line-height: 1.5; }
.voice-mute { position: relative; flex: none; }
.voice-mute.off { background: var(--panel2); color: var(--muted); }
.voice-slash { position: absolute; font-size: 29px; line-height: 1; font-weight: 400; transform: rotate(-8deg); }
.voice-end { color: var(--danger); flex: none; }
.voice-mini { display: flex; align-items: center; gap: 6px; flex: none; width: 100%; max-width: 760px; margin: 0 auto; min-height: 65px; padding: 7px 12px calc(7px + var(--bottom)); background: var(--panel); border-top: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); z-index: 9; }
.voice-mini-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; text-align: left; padding: 2px 4px; background: none; color: var(--text); border: 0; cursor: pointer; }
.voice-mini-main .grow { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.voice-mini-main strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-mini-main .small { font-size: 12px; }
.voice-live-dot { width: 8px; height: 8px; flex: none; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.voice-overlay { position: fixed; inset: 0; padding: max(22px, var(--top)) 18px max(22px, var(--bottom)); z-index: 120; background: var(--scrim); backdrop-filter: blur(9px); display: flex; align-items: center; justify-content: center; }
.voice-dialog { position: relative; width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; padding: 40px 26px 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 24px 80px rgba(0, 0, 0, .25); text-align: center; }
.voice-eyebrow { display: flex; justify-content: center; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; color: var(--muted); margin-bottom: 15px; }
.voice-dialog h2 { font-size: 28px; overflow-wrap: anywhere; }
.voice-call-status { margin-top: 7px; font-variant-numeric: tabular-nums; font-size: 14px; }
.voice-call-avatar { display: flex; justify-content: center; padding: 33px 0 15px; }
.voice-call-avatar > .avatar { width: 88px; height: 88px; font-size: 34px; }
.voice-dialog .voice-people.large { justify-content: center; flex-wrap: wrap; overflow: visible; margin: 26px 0; gap: 22px; }
.voice-dialog .voice-people.large .voice-person-caption { display: block; font-size: 11px; }
.voice-dialog .voice-people.large .voice-person-name { font-size: 13px; }
.voice-dialog .voice-people.large .voice-face .avatar { width: 56px; height: 56px; font-size: 22px; }
.voice-private { margin: 20px 0 25px; font-size: 11px; }
.voice-actions { display: flex; align-items: flex-start; justify-content: center; gap: 16px; }
.voice-actions .btn { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 46px; padding-inline: 20px; }
.voice-reject { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.voice-action { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 120px; }
.voice-action .voice-mute { width: 46px; height: 46px; border-radius: 50%; background: var(--panel2); }
.voice-action > .small { font-size: 11px; }
.voice-minimize { position: absolute; top: 12px; right: 12px; transform: rotate(90deg); }
.voice-call-button { color: var(--accent); font-size: 25px; }
.voice-audio { display: none; }
:root[data-layout="split"] .voice-mini { max-width: 1600px; padding-left: calc(var(--rail-w) + 18px); }
:root[data-layout="split"] .voice-room { padding: 14px 22px; }
:root[data-layout="split"] .voice-mini-main .grow { flex-direction: row; align-items: center; gap: 14px; }
:root[data-style="discord"] .voice-room-icon, :root[data-style="discord"] .voice-dialog { border-radius: 10px; }
:root[data-style="classic"] .voice-dialog { border-radius: 16px; }
:root[data-style="elegant"] .voice-dialog h2, :root[data-style="elegant"] .voice-room strong { font-family: var(--display); font-weight: 500; }
:root[data-style="elegant"] .voice-room strong { font-size: 17px; }
:root[data-style="elegant"] .voice-dialog { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
@media (max-width: 420px) {
  .voice-room { padding: 10px 12px; }
  .voice-room-head { gap: 8px; }
  .voice-dialog { padding: 35px 20px 25px; }
  .voice-dialog h2 { font-size: 26px; }
}