/* Windows has no flag emoji (🇺🇸 shows as "US"). This font covers flags only, so it never touches other text.
   Twemoji (CC-BY 4.0) via country-flag-emoji-polyfill. */
@font-face {
  font-family: 'Twemoji Country Flags';
  src: url('/fonts/TwemojiCountryFlags.woff2') format('woff2');
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  font-display: swap;
}

/* Shared by index.html (the app) and profile.html (profile settings). */

:root {
  --rail: #1e1f22;      /* outermost frame */
  --side: #2b2d31;      /* channel list, embeds */
  --chat: #313338;      /* main pane */
  --field: #383a40;     /* inputs */
  --hover: #35373c;
  --msg-hover: #2e3035;
  --panel: #232428;     /* user panel */
  --pop: #111214;       /* menus, popouts, tooltips: always opaque */
  --pop-2: #2b2d31;
  --line: #3f4147;
  --text: #dbdee1;
  --head: #f2f3f5;
  --muted: #949ba4;
  --faint: #989ca5;     /* small print: timestamps, counters (4.5:1 on the chat pane) */
  --accent: #5865f2;    /* buttons, focus, open goals */
  --accent-hi: #4752c4;
  --green: #23a55a;     /* credits, done, online */
  --red: #f23f43;       /* payouts, cancel, do not disturb */
  --red-text: #ff7a7d;  /* red words on dark surfaces, readable at small sizes */
  --badge: #da373c;     /* red pills with white numbers */
  --green-text: #2dc770;
  --gold: #f0b232;      /* reward text, idle */
  --link: #00a8fc;
  /* color emoji fonts come right after Figtree, so ❤ ☺ ✔ never fall into Segoe UI's flat black-and-white versions */
  --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla';
  --font: 'Figtree', 'Twemoji Country Flags', var(--emoji), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --theme-bg: var(--rail);
}

/* A chosen theme paints the page background; surfaces turn into tinted glass over it. */
html[data-themed] {
  --rail: rgba(0, 0, 0, .44);
  --side: rgba(0, 0, 0, .30);
  --chat: rgba(0, 0, 0, .16);
  --field: rgba(0, 0, 0, .30);
  --hover: rgba(255, 255, 255, .06);
  --msg-hover: rgba(0, 0, 0, .10);
  --panel: rgba(0, 0, 0, .38);
  --line: rgba(255, 255, 255, .12);
  --muted: #b5bac1;
  --faint: #8e939b;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--theme-bg) fixed; background-color: #1e1f22; color: var(--text); font: 16px/1.375 var(--font); -webkit-font-smoothing: antialiased; }
html:not([data-themed]) body { background: var(--rail); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hidden { display: none !important; }
a { color: var(--link); }

label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
input, textarea, select { width: 100%; background: var(--field); border: 0; border-radius: 8px; padding: 10px 12px; color: var(--text); }
textarea { min-height: 64px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--faint); }

button.act { border: 0; border-radius: 3px; padding: 7px 16px; font-size: 14px; font-weight: 500; cursor: pointer; background: #4e5058; color: #fff; }
button.act:hover { background: #6d6f78; }
button.act:disabled { opacity: .5; cursor: not-allowed; }
button.act.primary { background: var(--accent); } button.act.primary:hover { background: var(--accent-hi); }
button.act.go { background: #1a7f45; } button.act.go:hover { background: #156b3a; } /* white text needs a darker green than --green */
button.act.danger { background: none; color: var(--red-text); } button.act.danger:hover { background: rgba(242,63,67,.12); }
button.act.link { background: none; color: var(--text); } button.act.link:hover { text-decoration: underline; background: none; }
button.icon { background: none; border: 0; color: var(--muted); width: 32px; height: 32px; border-radius: 4px; display: grid; place-items: center; cursor: pointer; font-size: 18px; padding: 0; flex: none; }
button.icon:hover { color: var(--head); background: var(--hover); }
button.icon svg { width: 20px; height: 20px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 8px); background: var(--pop); color: var(--head); padding: 10px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none; box-shadow: 0 8px 16px rgba(0,0,0,.4); z-index: 100; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- avatars and presence ---- */
.av { display: inline-block; vertical-align: middle; position: relative; flex: none; border-radius: 50%; width: var(--s, 40px); height: var(--s, 40px); }
.av > .face { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: calc(var(--s, 40px) * .42); overflow: hidden; user-select: none; }
.av > .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av > .dot { position: absolute; right: -2px; bottom: -2px; width: calc(var(--s, 40px) * .3 + 4px); height: calc(var(--s, 40px) * .3 + 4px); min-width: 12px; min-height: 12px; border-radius: 50%; border: 3px solid var(--ring, var(--chat)); background: #80848e; box-sizing: border-box; }
.dot.online, .sdot.online { background: var(--green); }
.dot.idle, .sdot.idle { background: var(--gold); }
.dot.dnd, .sdot.dnd { background: var(--red); }
.dot.offline, .dot.invisible, .sdot.offline, .sdot.invisible { background: #80848e; }
.sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* ---- nameplate: decorative strip behind a name, faded on the reading side ---- */
.plate { position: relative; isolation: isolate; overflow: hidden; }
.plate::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--plate, none); }
.plate::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,0) 100%); }
.plate:not([style*="--plate"])::after { display: none; }

/* ---- profile card (popout in chat, preview on the profile page) ---- */
.pcard { width: 300px; border-radius: 8px; overflow: hidden; background: var(--card-bg, #232428); box-shadow: 0 8px 24px rgba(0,0,0,.45); color: var(--text); position: relative; }
.pcard .banner { height: 106px; background: var(--banner, #5865f2) center / cover no-repeat; }
.pcard.small .banner { height: 60px; }
.pcard .top { position: relative; padding: 0 16px; height: 46px; }
.pcard .top .av { position: absolute; left: 12px; top: -46px; --s: 80px; }
.pcard .top .av > .face { box-shadow: 0 0 0 6px var(--card-ring, #232428); }
.pcard .top .av > .dot { --ring: var(--card-ring, #232428); border-width: 5px; right: 0; bottom: 0; }
.pcard .bubble { position: absolute; left: 100px; top: -20px; max-width: calc(100% - 112px); z-index: 1; display: flex; align-items: center; gap: 6px;
  background: var(--card-ring, #232428); border-radius: 999px; padding: 5px 12px 5px 8px; font-size: 13px; line-height: 18px; color: var(--head); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.pcard .bubble .emo { font-size: 16px; line-height: 1; flex: none; }
.pcard .bubble .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Her accent: a ring around the card, her name in it, and a soft tint from the top. */
.pcard.accented { box-shadow: 0 0 0 2px var(--card-accent), 0 8px 24px rgba(0,0,0,.45); }
.pcard.accented .inner { background: linear-gradient(color-mix(in srgb, var(--card-accent) 22%, rgba(0,0,0,.30)), rgba(0,0,0,.30) 70%); }
.pcard.accented .dname { color: var(--card-accent-text); }
.pcard.accented .bubble { box-shadow: 0 0 0 2px var(--card-accent), 0 2px 8px rgba(0,0,0,.35); }
.pcard .inner { margin: 0 12px 12px; background: rgba(0,0,0,.30); border-radius: 8px; overflow: hidden; }
.pcard .nameblock { padding: 12px 12px 10px; }
.pcard .dname { font-size: 20px; font-weight: 800; color: var(--head); line-height: 1.2; word-break: break-word; }
.pcard .handle { font-size: 14px; color: var(--head); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pcard .pron { color: var(--muted); }
.pcard .role { font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 3px; padding: 0 5px; line-height: 16px; text-transform: capitalize; }
.pcard .role.parent { background: var(--green); }
.pcard .sect { padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.08); }
.pcard .sect h4 { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--head); }
.pcard .sect .md { font-size: 14px; }
.pcard .since { font-size: 14px; color: var(--text); }

/* ---- rendered markdown ---- */
.md { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.md strong { font-weight: 700; color: var(--head); }
.md .md-code { background: var(--rail); border-radius: 4px; padding: .1em .3em; font: .85em/1.2 Consolas, ui-monospace, monospace; }
.md .md-pre { background: var(--side); border: 1px solid var(--rail); border-radius: 4px; padding: 8px 10px; margin: 4px 0; white-space: pre-wrap; font: 14px/1.4 Consolas, ui-monospace, monospace; max-width: 100%; overflow-x: auto; }
.md blockquote { margin: 2px 0; padding: 0 0 0 12px; border-left: 4px solid #4e5058; }
.md h1, .md h2, .md h3 { margin: 6px 0 2px; color: var(--head); line-height: 1.25; }
.md h1 { font-size: 24px; } .md h2 { font-size: 20px; } .md h3 { font-size: 16px; }
.md .md-sub { font-size: 12px; color: var(--muted); }
.md ul { margin: 2px 0; padding-left: 22px; }
.md .mention { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; cursor: pointer; }
.md .mention:hover { background: var(--accent); color: #fff; }
.md .mention.mine { background: rgba(240,178,50,.25); color: #f8d888; }
.md .spoiler { background: #1e1f22; color: transparent; border-radius: 3px; cursor: pointer; transition: background .1s; }
.md .spoiler * { visibility: hidden; }
.md .spoiler.open { background: rgba(255,255,255,.1); color: inherit; cursor: auto; }
.md .spoiler.open * { visibility: visible; }
.md.jumbo { font-size: 48px; line-height: 1.15; }

/* ---- floating layers ---- */
.layer { position: fixed; z-index: 50; }
.menu { background: var(--pop); border-radius: 6px; padding: 6px; box-shadow: 0 8px 16px rgba(0,0,0,.45); min-width: 188px; }
.menu button { display: flex; width: 100%; align-items: center; gap: 10px; background: none; border: 0; color: var(--text); padding: 8px 10px; border-radius: 3px; font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; }
.menu button:hover, .menu button.on { background: var(--accent); color: #fff; }
.menu button.danger { color: var(--red-text); } .menu button.danger:hover { background: var(--red); color: #fff; }
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 60; display: grid; place-items: center; padding: 16px; }
.modal { background: #313338; border-radius: 8px; width: 100%; max-width: 560px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(0,0,0,.5); overflow: hidden; }
.modal > header { padding: 16px 16px 8px; display: flex; align-items: center; gap: 8px; }
.modal > header h2 { margin: 0; font-size: 20px; color: var(--head); flex: 1; }
.modal > .mbody { padding: 0 16px 16px; overflow-y: auto; }
.modal > footer { background: #2b2d31; padding: 14px 16px; display: flex; justify-content: flex-end; gap: 8px; }
.modal input, .modal textarea { background: #1e1f22; }
em-emoji-picker { --rgb-background: 17, 18, 20; --rgb-accent: 88, 101, 242; --border-radius: 8px; height: min(400px, calc(100dvh - 16px)); }

@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }