/* =========================================================
   Erebos — Style PRO (VS Code Dark+ Edition)
   Structure simple : side-left / chat-center / side-right
   ========================================================= */

/* ===================== VARIABLES ===================== */

:root {
  --bg: #1e1e1e;
  --bg-alt: #252526;
  --bg-item: #2d2d2d;
  --bg-input: #333;
  --text: #d4d4d4;
  --text-muted: #8c8c8c;
  --accent: #007acc;
  --accent-text: #ffffff;
  --border: #3c3c3c;
  --radius: 6px;
  --space: 10px;

  --font-main: 14px;
  --font-main-size: var(--font-main); /* ← ICI */
  --font-small: 12px;
}

/* ===================== RESET ===================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Consolas, monospace;
  font-size: var(--font-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===================== LOGIN SCREEN ===================== */

#login {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#login h1 {
  font-size: 3rem;
  margin-bottom: 30px;
}

.login-box {
  display: flex;
  gap: var(--space);
}

/* Inputs login harmonisés */
#login input,
#login button {
  height: 36px;
  padding: 0 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--font-main);
}

/* Bouton Join */
#login button#enter {
  padding: 0 24px;
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--accent-text);
  font-weight: bold;
  cursor: pointer;
}

#login button#enter:hover {
  filter: brightness(1.15);
}

.glow .dot {
  color: var(--accent);
}

.error {
  color: crimson;
  margin-top: 10px;
}

.entry-note { max-width: 540px; padding: 12px; text-align: center; color: var(--text-muted); font-size: 12px; line-height: 1.5; }

.tagline {
  margin-top: -30px;
  margin-bottom: 25px;
  text-align: center;
  font-size: 17px;
  opacity: 0.55;
  color: var(--text);
  font-style: italic;
  opacity: 0;
  animation: fadeIn 2s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 0.5;
  }
}

/* ===================== FOOTER DONATE ===================== */

.footer-donate {
  position: fixed;
  bottom: 14px;
  width: 100%;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.8;
  color: #a0a0a0;
}

/* ligne 1 - dominante */
.footer-donate .line1 {
  color: #c8c8c8;
  font-weight: 500;
}

/* ligne 2 - poétique, mais plus douce que ton bleu actuel */
.footer-donate .line2 {
  color: #7ab4ff; /* bleu plus soft */
  opacity: 0.85;
}

/* ligne 3 - discrète & technique */
.footer-donate .line3 {
  color: #8f8f8f;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;    /* légèrement mais subtilement plus petit */
  opacity: 0.75;
}

/* ===================== APP WRAPPER ===================== */

.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.hidden {
  display: none !important;
}

/* ===================== LAYOUT ===================== */

.app-layout {
  flex: 1;
  display: flex;
  gap: var(--space);
  padding: var(--space);
  min-height: 0;
}

/* ===================== TOP BRAND ===================== */

.brand-box {
  margin-bottom: 14px;
  padding-left: 4px;
}

.brand-title {
  font-size: 22px;
  font-weight: bold;
  color: var(--text);
}

.brand-title .dot {
  color: var(--accent);
}

.brand-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
}

/* ===================== SIDEBARS ===================== */

.side-left,
.side-right {
  width: 260px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space);
  display: flex;
  flex-direction: column;
}

.side-left .section-title{
    margin-top: 2px;
}
.side-right .section-title {
    margin-top: 40px;
}

.side-left .list-block,
.side-right .list-block {
    margin-top: 6px;
}

.section-title {
  margin-bottom: var(--space);
  font-weight: bold;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--separator);
}
.section-heading .section-title { margin: 0; }
.online-count {
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.online-count::before {
  content: '•';
  color: #88a687;
  font-size: 15px;
  line-height: 0;
  margin-right: 4px;
  vertical-align: -1px;
}

/* Shared list block */
.list-block {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: var(--space) 6px;
  border-radius: var(--radius);
}

/* ===================== CHANNEL ITEMS ===================== */

.channel-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-item);
  border: 1px solid var(--border);
  padding: 6px 8px;
  border-radius: var(--radius);
  margin-bottom: 6px;
  cursor: pointer;
}

.channel-item:hover {
  background: var(--accent);
  color: var(--accent-text);
}

.chan-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.chan-count {
  color: var(--text-muted);
}

/* ===================== CREATE ROOM ===================== */

.create-room {
  display: flex;
  gap: 6px;
  margin-top: var(--space);
}

#new-room-name {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}

#create-room-btn {
  height: 36px;
  padding: 0 14px;
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#create-room-btn:hover {
  filter: brightness(1.15);
}

/* ===================== CHAT CENTER ===================== */

.chat-center {
  flex: 1;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space);
  flex-wrap: wrap;
}

.tab {
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: var(--bg-item);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text); /* ← blanc comme demandé */
  font-weight: 400;
}

.tab.active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  font-weight: 600;
}

/* Room title */
.room-title {
  margin-bottom: var(--space);
  padding: 4px;
}

.tab-close {
  margin-left: 5px;
  font-size: 15px; /* plus grande et plus lisible */
  cursor: pointer;
  opacity: 0.75;
  display: inline-block;
  transform: translateY(-3px); /* micro alignement vertical */
}

.tab-close:hover {
  opacity: 1;
}

/* ===================== MESSAGES ===================== */

#messages {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: var(--space);
  border-radius: var(--radius);
  min-height: 0;
  overflow-x: hidden;
}

/* Liens en bleu Erebos */
#messages a {
  color: var(--accent);
  text-decoration: none;
}
#messages a:hover {
  text-decoration: underline;
}

/* Bulles de messages compactes */
.msg {
  background: var(--bg-item);
  border: 1px solid var(--border);
  padding: 6px 8px;
  border-radius: var(--radius);
  margin-bottom: 6px;
}

.msg-time {
  font-size: var(--font-small);
  color: var(--text-muted);
}

.msg-user {
  font-weight: bold;
}

.msg-body {
  margin-top: 4px;
  overflow-wrap: anywhere;
  line-height: 1.4em;
}

.mention-me {
  color: #32d74b;
  font-weight: 700;
  background: rgba(50, 215, 75, 0.18);
  padding: 2px 5px;
  border-radius: 4px;
}

/* ===================== INPUT MESSAGE ===================== */

.msg-input {
  display: flex;
  gap: var(--space);
  margin-top: var(--space);
  align-items: flex-end; /* important pour textarea qui grandit */
}

/* === MESSAGE TEXTAREA (remplace l'ancien input) === */

.msg-input textarea#message {
  flex: 1;

  height: 36px;
  padding: 8px 12px; /* ← centré proprement */
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);

  font-family: Consolas, monospace !important;
  font-size: var(--font-main) !important;
  line-height: 1.35; /* ← naturel = identique visuellement */

  resize: none;
  overflow-y: hidden;
  max-height: 200px;
  box-sizing: border-box;
}

/* === BOUTON SEND === */

.msg-input button {
  height: 36px;                /* ✔ même hauteur que l’ancien input et le bouton + */
  padding: 0 20px;
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;              /* ✔ empêche le bouton de s’étirer */
}

/* ===================== USER LIST ===================== */

.user-item {
  background: var(--bg-item);
  border: 1px solid var(--border);
  padding: 6px 8px;
  border-radius: var(--radius);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.user-item:hover {
  background: var(--accent);
  color: var(--accent-text);
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1100px) {
  .side-right { display: none; }
}

@media (max-width: 900px) {
  .side-left { display: none; }
}

/* ===================== FORM FOCUS STYLES ===================== */
input,
select,
textarea {
  outline: none;
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ===================== SPECIAL MESSAGES ===================== */

/* Action messages (/me) */
.msg-action {
  font-style: italic;
  color: #c9c9c9;
  opacity: 0.9;
  margin: 4px 0;
  padding: 2px 4px;
  display: block;
  white-space: pre-wrap;
}

/* System messages (/help, notifications) */
.system {
  color: #8c8c8c;
  opacity: 0.85;
  font-size: 13px;
  padding: 3px 4px;
  margin: 4px 0;
  white-space: pre-wrap; /* important pour le multiline */
}

/* ===================== SCROLLBAR STYLES ===================== */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #666;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}

/* ===================== CODE BLOCK (/code) ===================== */

.msg-code {
  background: #1b1b1b;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  margin-bottom: 8px;
  font-family: Consolas, monospace;
  overflow: visible; /* bloc propre */
}

.msg-code .msg-line {
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.msg-code .msg-user {
  font-weight: bold;
  color: var(--text);
}

.msg-code .msg-lang {
  margin-left: 8px;
  color: var(--accent);
  font-size: 12px;
}

/* Bloc de code avec défilement horizontal */
.msg-code-block {
  background: #111;
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid #333;
  overflow-x: auto;     /* ← important */
  overflow-y: hidden;
  max-width: 100%;
  white-space: pre;     /* ← respecte les retours ligne */
  box-sizing: border-box;
}

.msg-code-block code {
  color: #e0e0e0;
  font-family: Consolas, monospace;
  font-size: 13px;
  display: inline-block;
  min-width: 100%;
}

/* ===================== TAB BLINKING ANIMATION ===================== */

.tab.blink {
  animation: tab-blink 0.7s ease-in-out infinite;
}

@keyframes tab-blink {
  0%, 100% {
    background: var(--bg-item);
    color: var(--text);
    border-color: var(--border);
  }
  50% {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
  }
}

/* ===================== ONLINE/OFFLINE DOTS ===================== */

.chan-dot {
  font-size: 14px;
  margin-right: 4px;
  transition: color 0.2s ease;
}

.dot-green {
  color: #32d74b; /* vert apple / discord */
}

.dot-red {
  color: #ff453a; /* rouge iOS clean */
}

/* =====================================================
   FLEX SAFETY — prevent layout expansion by long content
===================================================== */

#messages,
.msg,
.msg-body,
.msg-code {
  min-width: 0;
}
/* Accessible controls and mobile panels. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button{font:inherit;color:inherit}
button:disabled{opacity:.6;cursor:default}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #68b8ff!important;outline-offset:3px}
.channel-item,.user-item{width:100%;text-align:left;color:var(--text)}
.list-block{list-style:none}
.tab-wrap{display:flex;align-items:center}
.tab-close{background:transparent;border:0;color:var(--text);padding:8px;transform:none}
.msg-body{white-space:pre-wrap;display:inline;margin-top:0;vertical-align:baseline}
.message-entry{position:relative;padding-right:58px}
.reply-button,.expand-message{background:transparent;border:0;color:var(--text-secondary);font:inherit;font-size:11px;cursor:pointer;padding:3px 6px}
.reply-button{opacity:.65;position:absolute;right:0;top:0}
.reply-button:hover,.expand-message:hover{color:var(--text-primary);text-decoration:underline}
.reply-reference,.reply-draft{border-left:2px solid var(--border);padding:4px 8px;color:var(--text-secondary);font-size:12px;overflow-wrap:anywhere}
.reply-draft{display:flex;gap:8px;margin-top:6px}
.reply-draft[hidden]{display:none}
.reply-draft span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.reply-draft button{background:transparent;border:0;cursor:pointer}
.long-message:not(.expanded){display:block;max-height:13.05em;overflow:hidden}
.long-message.expanded{display:block}
.msg-code-block{max-height:20em;overflow:auto}
.typing-status{font-size:11px;color:var(--text-secondary);border-left:2px solid #4c5867;padding:4px 8px;margin:7px 0 3px;font-style:italic}
.typing-status:empty{display:none}
.user-away .pseudo{filter:saturate(.35);opacity:.7}
.msg-input{position:relative}
.message-counter{position:absolute;right:116px;bottom:5px;padding:1px 4px;background:var(--bg-input-deep);color:var(--text-faint);font-size:10px;line-height:1.2;pointer-events:none}
.message-counter[hidden]{display:none}
.message-counter.over-limit{color:#e18b87}
.completion-menu{position:absolute;bottom:100%;left:0;z-index:10;max-height:210px;overflow:auto;background:var(--bg-panel);border:1px solid var(--border);min-width:180px;padding:3px}
.completion-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:5px 8px;cursor:pointer}
.completion-menu [aria-selected="true"]{background:var(--accent-soft)}
.msg-embed img,.msg-embed video{max-width:100%;max-height:260px}
.msg-embed iframe{border:0;width:100%;max-width:360px;aspect-ratio:16/9}
.youtube-embed{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:6px}
.youtube-fallback{font-size:11px;color:var(--text-secondary)!important;text-decoration:underline dotted!important;text-underline-offset:3px}
.youtube-fallback:hover{color:var(--text-primary)!important}
.load-media{padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;margin-top:6px;cursor:pointer}
.room-notice{font-size:12px;line-height:1.5;color:#aaa;margin-bottom:8px}
.community-notice{background:rgba(255,255,255,.025);border:1px solid var(--separator);border-left:2px solid #7e909e;color:var(--text-secondary);padding:7px 9px}
.community-notice .notice-kind,.community-notice #channel-age{color:var(--text-primary)}
.community-notice code{color:#b9c6cf;font-family:inherit}
.msg-input textarea#message{overflow-y:auto}
.mobile-nav{display:none;gap:8px;padding:8px 10px}
.mobile-nav button{background:var(--bg-alt);border:1px solid var(--border);border-radius:5px;padding:8px 14px}
@media(max-width:1100px){.mobile-nav{display:flex}.side-right.mobile-open{display:flex;position:absolute;z-index:5;right:10px;top:52px;bottom:10px;width:min(85vw,300px)}}
@media(max-width:900px){.side-left.mobile-open{display:flex;position:absolute;z-index:5;left:10px;top:52px;bottom:10px;width:min(85vw,300px)}}
@media(max-width:600px){.login-box{flex-wrap:wrap;justify-content:center;max-width:92vw}.footer-donate{font-size:10px;padding:0 12px}#login h1{font-size:2.5rem}.tabs{flex-wrap:nowrap;overflow-x:auto;flex-shrink:0}.tab-wrap{flex-shrink:0}.app-layout{padding:5px}.chat-center{padding:6px}.msg-input button{padding:0 10px}}
@media(max-width:600px){.message-counter{right:76px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}

/* =========================================================
   Erebos — mIRC-inspired refinement
   Dense, practical and nostalgic without terminal clichés.
   ========================================================= */
:root {
  --bg-root: #1e1e1e;
  --bg-panel: #252526;
  --bg-surface: #2d2d2d;
  --bg-input-deep: #181818;
  --border-color: #3c3c3c;
  --separator: #343434;
  --text-primary: #d4d4d4;
  --text-secondary: #a0a0a0;
  --text-faint: #777777;
  --accent-blue: #8fa6b8;
  --accent-blue-dark: #5f7485;
  --accent-soft: rgba(143, 166, 184, .16);
  --hover-soft: rgba(255, 255, 255, .055);

  /* Compatibility aliases for the existing components. */
  --bg: var(--bg-root);
  --bg-alt: var(--bg-panel);
  --bg-item: var(--bg-surface);
  --bg-input: var(--bg-input-deep);
  --text: var(--text-primary);
  --text-muted: var(--text-secondary);
  --accent: var(--accent-blue);
  --accent-text: #07111b;
  --border: var(--border-color);
  --radius: 2px;
  --space: 8px;
}

body {
  background: radial-gradient(ellipse 75% 55% at 50% 0%, #343a40 0%, #272a2d 36%, var(--bg-root) 78%);
  letter-spacing: .01em;
}

#login {
  background: radial-gradient(ellipse 62% 48% at 50% 40%, #3b4249 0%, #2a2d31 32%, var(--bg-root) 74%);
}

#login h1 {
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  margin-bottom: 26px;
  letter-spacing: -.08em;
  text-shadow: 1px 1px 0 #000;
}

.brand-suffix { color: var(--accent-blue); }

.tagline { font-size: 14px; letter-spacing: .13em; text-transform: uppercase; }
.entry-note { border-top: 1px solid rgba(143, 157, 172, .32); margin-top: 12px; }
.technical-details-link {
  background: transparent;
  border: 0;
  color: var(--text-faint);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  margin-top: -4px;
  padding: 4px 7px;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.technical-details-link:hover { color: var(--text-primary); }
.footer-donate .technical-details-link {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  opacity: .78;
  padding: 0;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.footer-donate .technical-details-link.line1 { color: #c8c8c8; font-weight: 500; }
.footer-donate .technical-details-link:hover { color: var(--text); opacity: 1; text-decoration: underline dotted; }
.technical-dialog {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  color: var(--text-primary);
  max-width: min(560px,calc(100vw - 32px));
  padding: 0;
}
.technical-dialog::backdrop { background: rgba(0,0,0,.62); }
.technical-dialog-header {
  align-items: center;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--separator);
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
}
.technical-dialog h2 { font-size: 14px; font-weight: 700; }
.technical-dialog h3 { color: var(--text-primary); font-size: 12px; margin-bottom: 4px; }
.technical-dialog-body { padding: 12px; }
.technical-dialog section + section { border-top: 1px solid var(--separator); margin-top: 10px; padding-top: 10px; }
.technical-dialog p { color: var(--text-secondary); font-size: 12px; line-height: 1.55; margin: 0 0 6px; }
.technical-dialog p:last-child { margin-bottom: 0; }
.technical-dialog strong { color: var(--text-primary); }
.technical-dialog-close {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 2px 5px;
}
.technical-dialog-close:hover { color: var(--text-primary); }

#login input,
#login button,
#new-room-name,
#create-room-btn,
.msg-input textarea#message,
.msg-input button {
  border-radius: 2px;
  box-shadow: none;
}

#login button#enter,
#create-room-btn,
.msg-input button {
  background: #49545d;
  border-color: #697681;
  color: var(--text-primary);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
}

#login button#enter:active,
#create-room-btn:active,
.msg-input button:active { transform: translate(1px, 1px); filter: brightness(.88); }

.footer-donate { bottom: 12px; font-size: 11px; }
.footer-donate .line2 { color: #79b9e7; }

.app-layout { gap: 6px; padding: 6px; }
.side-left,
.side-right,
.chat-center {
  border-radius: 2px;
  border-color: var(--border-color);
  box-shadow: none;
}

.brand-box {
  background: var(--bg-surface);
  border: 1px solid var(--separator);
  margin: -1px -1px 10px;
  padding: 8px;
}
.brand-title { font-size: 20px; letter-spacing: -.055em; color: var(--text-primary); }
.section-title {
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.side-right .section-title { margin-top: 2px; }

.list-block,
#messages {
  background: var(--bg-root);
  border-radius: 1px;
  border-color: var(--border-color);
}

.channel-item,
.user-item {
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  margin-bottom: 1px;
  padding: 6px 7px;
}
.channel-item:hover,
.user-item:hover { background: var(--hover-soft); color: var(--text); }
.channel-item.active,
.user-item.active {
  background: var(--accent-soft);
  border-left-color: #aebdca;
  color: #f1f1f1;
}
.chan-count { color: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }

.tabs { gap: 2px; margin-bottom: 7px; border-bottom: 1px solid var(--separator); padding-bottom: 6px; }
.tab {
  position: relative;
  border-radius: 1px;
  border-color: var(--border-color);
  padding: 5px 10px;
  font-size: 12px;
}
.tab-wrap { gap: 0; align-items: stretch; }
.tab-wrap:has(.tab-close) .tab { border-right: 0; }
.tab:hover { background: var(--hover-soft); }
.tab.active {
  background: var(--accent-soft);
  border-color: #647482;
  color: var(--text-primary);
}
.tab-close {
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 0;
  color: var(--text-faint);
  display: inline-flex;
  font-size: 19px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  min-width: 27px;
  padding: 0 7px;
}
.tab-close:hover { background: #3a3a3a; color: var(--text-primary); }
.tab-close:focus-visible { outline-offset: -3px; }
.tab.active + .tab-close { background: var(--accent-soft); border-color: #647482; color: var(--text-primary); }
.room-title {
  margin-bottom: 7px;
  padding: 2px 4px 5px;
  border-bottom: 1px solid var(--separator);
  color: var(--text-primary);
  font-size: 14px;
}

#messages { padding: 6px 8px; }
.msg {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-left: 2px solid transparent;
  margin: 0;
  padding: 5px 8px;
}
.msg:nth-child(even) { background: rgba(255, 255, 255, .018); }
.msg:hover { background: var(--hover-soft); border-left-color: var(--accent-blue-dark); }
.msg-time { color: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.msg-user { color: #b9c6cf; }
.pseudo-badge { font-size: .78em; font-weight: 600; opacity: .72; vertical-align: .08em; }
.msg-user-link {
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: bold;
  padding: 0;
  text-decoration: underline dotted transparent;
  text-underline-offset: 3px;
}
.msg-user-link:hover { text-decoration-color: currentColor; }
.msg-user-link:focus-visible { outline-offset: 2px; }
.msg-body { margin-top: 2px; line-height: 1.45; }
.msg-action { border-left: 2px solid #806caa; color: #c2b3da; }
.system { border-left: 2px solid #4c5867; color: var(--text-secondary); }
.mention-me { color: #d6f4ff; background: #356a77; border-radius: 1px; }

.msg-input { margin-top: 7px; gap: 6px; }
.msg-input textarea#message { background: var(--bg-input-deep); border-color: var(--separator); }
.msg-input textarea#message:focus { border-color: #788b99; box-shadow: 0 0 0 1px rgba(143,166,184,.16); }
.msg-input textarea#message::placeholder { color: var(--text-faint); }

*::-webkit-scrollbar-thumb { background: #293440; border-radius: 0; }
*::-webkit-scrollbar-thumb:hover { background: #3a4a5b; }

/* Keep nickname completion independent of the send button styling. */
.msg-input .completion-menu button{background:transparent;color:var(--text-primary);font:inherit;font-size:12px;letter-spacing:normal;text-transform:none;min-height:0;padding:5px 8px;transform:none}
.msg-input .completion-menu button[aria-selected="true"]{background:var(--accent-soft)}