/* w0q Labs identity — source: github/portfolio/css/style.css.
   Static surfaces and system fonts keep the interface inexpensive to render. */
:root {
  --bg: #080808;
  --sidebar: #111113;
  --surface: #18181b;
  --hover: #232326;
  --border: #29272b;
  --text: #fff4f5;
  --muted: #b8b3b6;
  --dim: #969094;
  --brand: #e11d2e;
  --brand-hot: #ff2438;
  --accent: #ff7f8c;
  --on-accent: #080808;
  --danger: #ff7f8c;
  --link: #ff9ca6;
  --success: #83d5a2;
  --selected: #2a171c;
  --accent-line: #66303b;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}
body { -webkit-font-smoothing: antialiased; }
::selection { background: #8f1721; color: #fffefe; }
button, a, input, textarea, select { transition: background-color .15s, border-color .15s, color .15s; }
input, textarea, select { border-color: #383439; background: #0d0d0e; border-radius: 10px; }
input::placeholder, textarea::placeholder { color: #969094; }
.primary { background: var(--brand); color: #fffefe; border: 1px solid #f23b4c; box-shadow: 0 4px 16px #e11d2e18; }
.primary:hover { background: #bd1423; border-color: #ff6370; }
.secondary { background: #202023; border-color: #3a353a; }
.secondary:hover { background: #2a272c; }
.danger-button { background: #36171e; color: #ff9ca6; border-color: #78303f; }
.danger-button:hover { background: #491e28; }
.alpha { color: #ff9ca6; background: #e11d2e12; border-color: #66303b; border-radius: 5px; }
.status-dot { background: var(--success); }
.eyebrow, .tiny-label { color: var(--accent); }

/* Entry: editorial typography, a quiet grid, and the red launch-orbit motif. */
.auth-story {
  background: radial-gradient(ellipse at 10% 85%, #6d0d183b, transparent 55%), #0d0d0e;
  border-right: 1px solid var(--border);
  padding: 44px clamp(30px, 4.5vw, 76px);
}
.auth-story::before {
  inset: 0; width: auto; height: auto; border-radius: 0;
  background: linear-gradient(#fff4f504 1px, transparent 1px), linear-gradient(90deg, #fff4f504 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(transparent, #000);
}
.wordmark { font-weight: 750; letter-spacing: -1.4px; position: relative; }
.wordmark img { box-shadow: 0 6px 24px #e11d2e25; }
.story-content { padding-bottom: 190px; }
.auth-story h1 { font-weight: 730; letter-spacing: -.065em; line-height: 1.02; }
.auth-story h1 em { color: var(--brand-hot); }
.auth-story .eyebrow { color: #d2c7cc; font-family: ui-monospace, monospace; letter-spacing: 2px; }
.auth-story .eyebrow .status-dot { background: var(--brand-hot); }
.auth-story p { max-width: 390px; color: #b8b3b6; }
.auth-story footer { color: #a5a1a3; font-size: 11px; }
.auth-story footer .icon { color: var(--accent); }
.orbit { border-color: #e11d2e40; }
.orbit-two { border-style: dashed; }
.orbit-center { color: #fff4f5; background: var(--brand); border-color: #ff6370; box-shadow: 0 0 55px #e11d2e26; }
.orbit-item { color: #ff9ca6; background: #1b1115; border-color: #66303b; }
.spark { background: var(--brand-hot); }
.auth-main { background: radial-gradient(ellipse at 100% 0, #e11d2e08, transparent 50%), var(--bg); }
.auth-form-wrap { max-width: 380px; }
.auth-form-wrap > .eyebrow { font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: 1.6px; color: var(--accent); }
.auth-form-wrap h2 { font-size: 32px; font-weight: 700; letter-spacing: -1.3px; }
.auth-form-wrap .large { min-height: 49px; margin-top: 5px; }
.auth-note { color: #969094; }
.form-error { color: #ff9ca6; }

/* Workspace: a narrow identity rail and calm, clearly separated surfaces. */
.community-rail { background: #080808; border-color: var(--border); gap: 18px; }
.brand-mark img { border-radius: 13px; }
.rail-button { background: #1b1b1e; color: #c9c1c6; border: 1px solid #29272b; border-radius: 14px; }
.rail-button:hover { background: #302026; border-color: #66303b; }
.rail-button.active { background: var(--brand); border-color: #f23b4c; color: white; box-shadow: 0 5px 20px #e11d2e20; }
.rail-button.active::before { background: var(--brand-hot); }
.rail-add { color: var(--accent); border: 1px dashed #4b353d; background: transparent; }
.sidebar { border-color: var(--border); }
.space-heading { height: 78px; border-color: var(--border); }
.space-heading:hover { background: #18181b; }
.space-heading strong { font-size: 15px; font-weight: 650; }
.space-heading small { font-size: 11px; color: var(--dim); }
.sidebar-scroll { padding-top: 20px; }
.find-button { background: #0d0d0e; color: var(--dim); border-color: #302c31; border-radius: 9px; padding: 10px; }
.main-nav { gap: 5px; margin-bottom: 26px; }
.main-nav button { font-size: 13px; border: 1px solid transparent; color: var(--muted); padding: 11px 10px; }
.main-nav button:hover, .channel-item:hover { background: #202023; }
.main-nav button.active { background: #21171c; border-color: #422730; color: #fff4f5; }
.main-nav button.active > .icon { color: var(--accent); }
.small-dot { background: var(--brand-hot); }
.section-label { color: #a5a1a3; font-size: 10px; letter-spacing: 1.3px; }
.channel-item { font-size: 13px; min-height: 40px; color: #b8b3b6; border-radius: 8px; }
.channel-item > .icon { color: #969094; }
.channel-item.selected { background: var(--selected); color: #fff4f5; }
.channel-item.selected::before { background: var(--brand-hot); }
.channel-item.selected > .icon { color: var(--accent); }
.channel-item .unread-count { background: var(--brand); color: white; }
.sidebar-card { background: linear-gradient(135deg, #31171e, #171315 75%); border-color: #4b2933; border-radius: 12px; padding: 17px 14px; }
.sidebar-card strong { color: #fff4f5; font-size: 13px; line-height: 1.5; }
.sidebar-card p { color: #b8a8ae; }
.sidebar-card .secondary { color: #fff4f5; background: #ffffff08; border-color: #63303c; font-size: 11px; }
.self-panel { background: #0d0d0e; height: 76px; }
.self-info strong { font-size: 12px; }
.self-info small { font-size: 11px; }
.color-0 { background: #48232d; color: #ffb3bd; }
.color-1 { background: #342c48; color: #d9c9ff; }
.color-2 { background: #403126; color: #f2cfab; }
.color-3 { background: #283b43; color: #bddde9; }
.color-4 { background: #42263c; color: #efc3e1; }
.avatar.with-status::after { background: var(--success); }
.workspace { background: #141416; }
.channel-header { min-height: 78px; height: 78px; background: #141416; border-color: var(--border); }
#channel-heading strong { font-size: 15px; font-weight: 650; }
#channel-heading > .icon { color: var(--accent); }
.header-description { font-size: 12px; color: var(--dim); }
.header-actions { gap: 12px; }
.header-actions > .icon-button { width: 35px; height: 35px; border-radius: 10px; }
#header-call { color: var(--accent); background: #24171c; border: 1px solid #4b2933; }
#header-call:hover { background: #3a1d25; }
.connection { color: var(--dim); font-size: 10px; }
.connection .status-dot { background: #fbbf24; }
.connection.online .status-dot { background: var(--success); }
.search-box { background: #0d0d0e; border-color: #353035; border-radius: 9px; padding: 9px 11px; }
.search-box input { font-size: 11px; }
#message-scroll { scrollbar-color: #40343b transparent; padding-top: 28px; }
.channel-intro { position: relative; margin-top: 12px; margin-bottom: 28px; padding: 28px; border: 1px solid #38252c; border-radius: 18px; background: radial-gradient(ellipse at 100% 0, #e11d2e14, transparent 65%), #181518; }
.channel-emblem { color: #fff4f5; background: #361820; border-color: #72303f; border-radius: 16px; width: 50px; height: 50px; margin-bottom: 22px; }
.channel-intro .eyebrow { color: #ff9ca6; }
.channel-intro h1 { font-weight: 700; letter-spacing: -1.1px; }
.channel-intro h1 > span { color: #ff9ca6; }
.channel-intro p { color: var(--muted); font-size: 13px; max-width: 520px; margin-bottom: 0; }
.channel-intro .primary { margin-top: 18px; }
.date-divider { color: var(--dim); font-size: 10px; }
.message { padding: 13px 10px; margin-inline: -10px; border-radius: 10px; }
.message:hover { background: #ffffff03; }
.message-meta { margin-bottom: 8px; }
.message-meta strong { font-size: 13px; color: #eee7eb; }
.message-meta time, .message-meta small { color: var(--dim); font-size: 10px; }
.message-body { color: #d0c9cd; font-size: 14px; line-height: 1.7; }
.you-label { background: #3c2029; color: #ffb3bd; }
.message-actions { z-index: 1; background: #202023; border-color: #41363d; box-shadow: 0 5px 15px #0003; }
.reaction { background: #202023; border-color: #3a343a; }
.reaction.mine { background: #361c25; border-color: #984454; }
.attachment { background: #101012; border-color: #3b3138; }
.empty-state > .icon { color: var(--accent); }
.empty-state strong { color: var(--muted); }
.composer { background: #1d1b1e; border-color: #44383f; border-radius: 14px; min-height: 62px; box-shadow: 0 6px 24px #0002; padding: 11px 13px; }
.composer:focus-within { border-color: #b14c5c; box-shadow: 0 0 0 3px #e11d2e0b; }
.composer .icon-button { border-color: #51434b; color: #c6b6be; border-radius: 9px; width: 30px; height: 30px; }
.composer textarea { font-size: 13px; }
.composer-divider { background: #40343b; }
.send-button { background: var(--brand); color: white; width: 36px; height: 36px; border-radius: 10px; }
.send-button:hover { background: #bd1423; }
.composer-hint { color: var(--dim); font-size: 10px; margin-top: 12px; }
.composer-hint kbd { color: var(--muted); }
.composer-hint .icon { color: var(--accent); }
.pending-file, .pending-message { background: #26191e; border-color: #6a3443; color: #f3d6df; }
.pending-message.failed { background: #31151d; border-color: #b14c5c; }
#latest-messages { color: #ffb3bd; background: #331d26; }
.member-panel { background: #101012; padding-top: 28px; }
.member-heading { color: #cf8290; font-size: 8px; letter-spacing: 1.3px; }
.member-panel .section-label { font-size: 9px; }
.member strong { color: #d0c9cd; font-size: 12px; }
.member small { color: var(--dim); font-size: 10px; }
.member:hover:not(:disabled) { background: #202023; }
.member-footer { color: var(--dim); font-size: 9px; }

/* Call status remains green; destructive controls and brand red stay distinct. */
#call-stage { background: #0e0d0f; padding-top: 22px; padding-bottom: 22px; }
.live-pill { color: var(--success); border-color: #305d40; background: #14251b; }
.live-pill .status-dot { background: var(--success); }
.participant-tile { background: #201a20; border-color: #44333e; border-radius: 14px; }
.participant-video { background: radial-gradient(ellipse, #34212b, #171419); }
.participant-name, .peer-connection { background: #080808db; }
.call-controls { gap: 10px; }
.call-control { background: #272329; color: #e0d4dc; border: 1px solid #41363f; border-radius: 10px; }
.call-control:hover { background: #373039; }
.call-control.on { background: #173124; color: #a6e7bf; border-color: #3b7051; }
.call-control.off { background: #381c25; color: #ffb3bd; border-color: #693043; }
.call-control.hang-up { background: #b51b2a; border-color: #e63748; color: white; }
.voice-status { background: #14221a; border-color: #305d40; }
.voice-status > div:first-child { color: #a6e7bf; }
.voice-status small { color: #a5c8b2; }
.mini-controls > button { background: #263a2e; color: #c4e7d0; }
.mini-controls > button.off { background: #48242f; color: #ffb3bd; }
dialog { background: #181619; border-color: #4b363f; border-radius: 18px; box-shadow: 0 30px 100px #000b; }
dialog::backdrop { background: #080808c9; backdrop-filter: blur(4px); }
.settings-account { background: #100f11; border: 1px solid #30272e; }
.toast { background: #193023; border-color: #426c50; color: #ddf4e5; }
.toast.error { background: #3c1c27; border-color: #9b4058; color: #ffdae3; }

@media (max-width: 1250px) {
  .connection { font-size: 0; }
}
@media (max-width: 700px) {
  .auth-story { padding: 25px; border-right: 0; border-bottom: 1px solid var(--border); }
  .auth-main { padding: 36px 26px; }
  .auth-form-wrap h2 { font-size: 29px; }
  .channel-header { height: 70px; min-height: 70px; }
  .header-actions { gap: 4px; }
  #channel-heading strong { font-size: 12px; }
  #header-call { width: 30px; height: 30px; }
  .search-box { padding: 7px; }
  .channel-intro { padding: 20px; border-radius: 14px; }
  .channel-intro h1 { font-size: 24px; }
  .channel-intro p { font-size: 12px; }
  .message-body { font-size: 13px; }
  .message-meta strong { font-size: 12px; }
  .message-meta time { font-size: 9px; }
  .message-actions { box-shadow: none; background: transparent; }
  .composer { min-height: 56px; padding: 8px; }
  .composer-hint { font-size: 9px; }
  .call-controls { gap: 6px; }
  .call-control { padding: 9px; }
}