/* Egytag Chat — Classic Neon Graphite.
   Vivid but restrained: midnight surfaces, electric blue focus, aqua presence,
   and a soft violet highlight. Keeps all existing layouts and behaviors. */
:root {
  color-scheme: dark;
  --bg: #0b1020;
  --base: #101827;
  --panel: #151e2f;
  --panel-2: #1b2940;
  --line: #30415d;
  --text: #f2f6ff;
  --muted: #a6b6d2;
  --accent: #75adff;
  --success: #43dec2;
  --danger: #ff8299;
  --glow: rgba(88, 152, 253, .22);
}
body { background: #0b1020; color: var(--text); }
.shell { background: var(--bg); }
.topbar {
  background: linear-gradient(105deg,#10192b 0%,#141d31 53%,#111b2f 100%);
  border-bottom-color: #33445f;
  box-shadow: 0 2px 24px rgba(4,9,23,.2);
}
.brand-icon {
  background: linear-gradient(145deg,#4569a0,#283858 62%,#4b3c73);
  border-color: #7189ba;
  box-shadow: 0 0 0 1px rgba(126,166,252,.12), 0 4px 17px rgba(41,84,177,.2);
}
.brand strong { color: #fff; }
.brand strong em { color: #9bc4ff; }
.brand small { color: #aebcda; }
.global-state { color: #d1e3ff; }
.live-dot, .small-live {
  background: #43dec2;
  box-shadow: 0 0 0 4px rgba(67,222,194,.11), 0 0 13px rgba(67,222,194,.22);
}
.site-link { color: #b4c9ec; }
.site-link:hover { color: #fff; }
.user-pill,.icon-button,.square {
  color: #e8f1ff;
  background: #20304b;
  border-color: #455c81;
}
.user-pill:hover,.icon-button:hover,.square:hover {
  background: #2a4167;
  border-color: #76a6f4;
}
.rooms-panel,.users-panel {
  background: linear-gradient(180deg,#111a2b,#101726 65%,#0f1726);
  scrollbar-color: #455b7f transparent;
  scrollbar-width: thin;
}
.rooms-panel { border-left-color: #31435e; }
.users-panel { border-right-color: #31435e; }
.panel-head h2 { color: #f3f7ff; }
.eyebrow,.category-title { color: #b1c6ea; }
.category-mark {
  color: #a8c7ff;
  border-color: #41608f;
  background: #1b2941;
}
.room-search {
  background: #19263e;
  border-color: #354a6a;
  color: #9fb5db;
}
.room-search:focus-within {
  border-color: #78acfa;
  box-shadow: 0 0 0 3px rgba(99,159,255,.12);
}
.room-search input { color: #f2f6ff; }
.room-search input::placeholder { color: #9aacca; }
.room-item {
  color: #d6e2f6;
  border-color: transparent;
  transition: background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.room-item:hover { background: #1c2b45; border-color: #304b73; }
.room-item.active {
  background: linear-gradient(115deg,#263b61,#1c2e4b);
  border-color: #5a82bd;
  color: #fff;
  box-shadow: inset 3px 0 0 #80b4ff, 0 4px 18px rgba(6,15,36,.22);
}
.room-item .hash { color: #8eaad2; }
.room-item.active .hash { color: #91c1ff; }
.room-item small { color: #9eafce; }
.room-item.active small { color: #bcceee; }
.live-count { color: #b5cae5; }
.live-count:before { background: #48dcc4; }
.sidebar-bottom,.users-bottom { border-color: #30415b; color: #a9b9d4; }
.side-hint,.users-bottom span { color: #6ee9d1; }
.chat-area {
  background: radial-gradient(ellipse at 50% -45%,rgba(82,111,188,.12),transparent 68%),
              linear-gradient(180deg,#151e2f 0%,#141d2e 100%);
}
.room-toolbar {
  background: rgba(23,34,54,.7);
  border-bottom-color: #35445f;
}
.room-meta h1 { color: #f7f9ff; }
.room-meta p { color: #b2c3e1; }
.room-hash {
  color: #b7d8ff;
  background: linear-gradient(145deg,#304d79,#253652);
  border: 1px solid #4a658c;
}
.room-count { color: #d1e1fa; }
.text-button {
  background: #1d2b45;
  border-color: #3b5276;
  color: #d9e8ff;
}
.text-button:hover {
  background: #28416c;
  border-color: #75abfa;
  color: #fff;
}
.room-tabs {
  background: rgba(17,25,41,.44);
  border-bottom-color: #2f405c;
  scrollbar-color: #486289 transparent;
}
.room-tab {
  background: #1c2b44;
  border-color: #344a6b;
  color: #bacbe7;
}
.room-tab:hover { background: #273d60; color:#fff; }
.room-tab.active {
  background: linear-gradient(180deg,#315484,#263c65);
  border-color: #6a9fec;
  color: #fff;
  box-shadow: inset 0 -2px 0 #87b8ff;
}
.tab-unread { background: #45dec1; color: #071f26; }
.conversation { scrollbar-color: #3f5578 transparent; }
.day-line { color: #90a7ca; }
.day-line:before,.day-line:after { background: #374762; }
.message .avatar,.user .avatar {
  background: linear-gradient(140deg,#345580,#293b5d);
  border: 1px solid #43628a;
  color: #e3eeff;
}
.message-name { color: #83beff; }
.message:nth-of-type(5n) .message-name { color: #c5b2ff; }
.message:nth-of-type(3n) .message-name { color: #80dfd3; }
.message-time { color: #9caecb; }
.message-body { color: #f0f5ff; }
.message-body a { color: #91c2ff; }
.message-system { color: #73edda; }
.typing { color: #9fb5d7; }
.room-intro,.room-intro.compact {
  background: radial-gradient(circle at 8% 0%,rgba(174,140,255,.16),transparent 65%),
              linear-gradient(120deg,#253b60,#1d2c49 66%,#1c2943);
  border-color: #506d9e;
  box-shadow: 0 12px 40px rgba(7,13,30,.14), inset 0 1px 0 rgba(178,208,255,.06);
}
.room-intro .intro-kicker { color: #70e5d2; }
.room-intro .intro-kicker::before { background: #4be2ca; }
.room-intro h2 { color: #f5f8ff; }
.room-intro p { color: #cbdaef; }
.intro-actions button {
  background: #273d60;
  border-color: #5477ab;
  color: #e9f2ff;
}
.intro-actions button.primary {
  color: #0d1a31;
  background: linear-gradient(180deg,#9dcbff,#68a9ff);
  border-color: #8ec2ff;
}
.intro-actions button:hover { filter: brightness(1.08); }
.composer {
  background: #1b2940;
  border-color: #4c6287;
  box-shadow: 0 4px 22px rgba(3,9,24,.18);
}
.composer:focus-within {
  border-color: #79afff;
  box-shadow: 0 0 0 3px rgba(96,156,255,.12),0 6px 24px rgba(3,9,24,.2);
}
.composer-main textarea { color: #f6f9ff; }
.composer-main textarea::placeholder { color: #adbfdb; }
.composer-tools { border-top-color: #344b6d; }
.input-tools button { color: #aacbfa; }
.input-tools button:hover,.input-tools button.recording {
  background: #344e79;
  color: #fff;
}
.composer-tip { color: #9eb2d0; }
.send-button {
  background: linear-gradient(180deg,#a1ceff,#6caeff);
  color: #0d1c33;
  box-shadow: 0 3px 12px rgba(64,129,226,.22);
}
.send-button:hover { background: linear-gradient(180deg,#b3d8ff,#85baff); }
.online-pill { background: #17433f; color: #8ff4e0; }
.user { color: #dce8fa; }
.user:hover { background: #1c2d47; }
.user-info small { color: #69e8cd; }
.footer {
  background: #0e1626;
  border-top-color: #30415b;
  color: #aabbd9;
}
.footer-version { background: #223753; color: #b7d1f8; }
.view-switch button { color: #a7bce0; }
.view-switch button:hover { color: #fff; background: #213552; }
.view-switch button.selected {
  background: #315382;
  color: #fff;
  box-shadow: inset 0 -2px 0 #81b9ff;
}
.mobile-new-room {
  background: #284874;
  border-color: #6496df;
  color: #e9f3ff;
}
.call-area { background: #1b2b45; border-color: #43618f; }
.danger-button { background: #533046; border-color: #a15a73; color: #ffe2e9; }
body[data-view=modern] .message-body { background:#243653; }
body[data-view=media] .conversation { background:#172438; }
.overlay { background: rgba(4,9,22,.8); }
.dialog {
  background: linear-gradient(155deg,#202e48,#182337);
  border-color: #55739e;
  box-shadow: 0 28px 88px rgba(0,4,16,.8);
}
.close-dialog { color: #b6cae7; }
.dialog p { color: #c1d1e9; }
.dialog label { color: #e7efff; }
.dialog input,.dialog textarea {
  background: #121d31;
  border-color: #4b6590;
  color: #f7faff;
}
.dialog input:focus,.dialog textarea:focus { border-color: #83baff; }
.dialog button[type=submit] {
  background: linear-gradient(180deg,#a2ccff,#70adfa);
  color: #102139;
}
.toast {
  background: #e9f2ff;
  color: #101f37;
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline-color: #9dccff;
}
@media (prefers-reduced-motion: reduce) {
  .room-item { transition: none; }
}

/* Keep room sidebar vertical scrolling without an unnecessary horizontal track. */
.rooms-panel { overflow-x: hidden; }
.room-list { width: 100%; min-width: 0; }
.room-item,.room-details { min-width: 0; }
@media (max-width: 590px) {
  .rooms-panel { overflow-x: visible; overflow-y: visible; }
}