:root {
  color-scheme: dark;

  /* Cinzas neutros em camadas, em degraus
     (moldura, canais e conversa, superfícies). O destaque é neutro (claro sobre escuro), sem cor de marca. */
  --sea-950: #2c2d32;   /* moldura: lista de servidores e barra de cima */
  --sea-900: #323339;   /* canais, conversa e membros */
  --sea-800: #323339;
  --sea-700: #393a41;   /* campo de mensagem, hover forte */
  --sea-600: #44454d;   /* item selecionado */
  --line: #45464e;
  --hover: rgb(255 255 255 / 6%);
  --selected: rgb(255 255 255 / 11%);
  --border-subtle: rgb(255 255 255 / 8%);
  --surface: #393a41;   /* menus e janelinhas flutuantes */

  --ink: #f2f3f5;
  --ink-text: #dfe0e4;
  --ink-soft: #c5c6ca;
  --ink-muted: #999aa1;

  /* destaque neutro e discreto: botões principais claros com texto escuro (sem laranja) */
  --accent: #e4e6ea;
  --accent-strong: #ffffff;
  --accent-ink: #17181b;
  --danger: #f23f43;
  --danger-soft: #f57376;
  --online: #23a55a;
  --idle: #f0b232;

  --font: system-ui, -apple-system, "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;

  /* medidas: lista de servidores 72px, canais 268px, membros 264px, cabeçalho 48px, barra de cima 32px */
  --rail-w: 72px;
  --sidebar-w: 268px;
  --members-w: 264px;
  --head-h: 48px;
  --topbar-h: 32px;
  --panels-h: 60px;
  --panels-gap: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--sea-950);
  color: var(--ink);
  font: 16px/1.375 var(--font);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- botões e campos ---------- */
.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-m);
  padding: 9px 16px;
  font-weight: 650;
}
.primary:hover { background: var(--accent-strong); }
.primary:disabled { opacity: .5; cursor: not-allowed; }

.ghost {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 8px 14px;
  color: var(--ink-soft);
}
.ghost:hover { background: var(--sea-700); color: var(--ink); }
.ghost.small, .primary.small { padding: 4px 10px; font-size: 13px; }

.danger {
  background: var(--danger); color: #fff; border: 0;
  border-radius: var(--radius-m); padding: 9px 16px; font-weight: 650;
}
.danger:hover { filter: brightness(1.08); }

.link-btn {
  background: none; border: 0; padding: 0; color: var(--accent);
  font-size: inherit; text-decoration: underline; text-underline-offset: 2px;
}

.badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 750; line-height: 1;
}
.badge.inline { margin-left: 4px; }

.icon-btn {
  background: transparent; border: 0; border-radius: var(--radius-s);
  width: 28px; height: 28px; line-height: 1; font-size: 18px; padding: 0;
  display: inline-grid; place-items: center;
  color: var(--ink-soft);
}
.icon-btn:hover { color: var(--ink); }
.icon { flex: none; display: block; }

label { display: grid; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.opt { color: var(--ink-muted); }

input, textarea {
  background: #26272b;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
  padding: 10px 12px;
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-muted); }
input:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgb(228 230 234 / 13%); }

.form-error { margin: 0; color: var(--danger); font-size: 14px; }
.form-ok { margin: 0; color: var(--online); font-size: 14px; }

/* ---------- entrada (entrar / criar conta) ----------
   Minimalista, no mesmo cinza do resto do Prosa: um cartão centralizado, rótulos pequenos em maiúsculas,
   erros embaixo de cada campo e um botão claro. */
.auth {
  min-height: 100%; display: grid; place-items: center; padding: 40px 16px;
  background: var(--sea-950);
}
.auth-card {
  width: min(440px, 100%); padding: 36px 32px 28px;
  background: var(--sea-900); border: 1px solid var(--border-subtle); border-radius: 16px;
  box-shadow: 0 24px 64px rgb(0 0 0 / 35%);
}
.auth-mark {
  width: 44px; height: 44px; margin: 0 auto 18px; display: grid; place-items: center;
  border-radius: 12px; background: var(--sea-700); color: var(--ink);
}
.auth-mark svg { width: 26px; height: 26px; }
.auth-title { margin: 0; text-align: center; font-size: 24px; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; }
.auth-lead { margin: 6px 0 24px; text-align: center; color: var(--ink-muted); font-size: 15px; }
.auth-form { display: grid; gap: 18px; }
.auth-field { display: grid; gap: 6px; }
.auth-field > label {
  display: flex; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-soft);
}
.auth-opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-muted); }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-form input {
  width: 100%; height: 42px; padding: 0 12px; font-size: 15px;
  background: #1f2024; border: 1px solid transparent; border-radius: var(--radius-m); color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.auth-form input::placeholder { color: #6d6f78; }
.auth-form input:focus { border-color: #5c5e66; box-shadow: none; outline: none; }
.auth-form input[aria-invalid="true"] { border-color: var(--danger-soft); }
.auth-prefix { position: absolute; left: 12px; color: var(--ink-muted); font-size: 15px; pointer-events: none; }
.auth[data-mode="register"] #auth-username { padding-left: 28px; }
.auth-reveal {
  position: absolute; right: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-muted); font-size: 13px; font-weight: 500;
}
.auth-reveal:hover { background: var(--hover); color: var(--ink); }
#auth-password { padding-right: 84px; }
.auth-hint { margin: 0; font-size: 12.5px; color: var(--ink-muted); }
.auth-status { margin: 0; font-size: 13px; }
.auth-status[data-state="ok"] { color: #3dc47e; }
.auth-status[data-state="ok"]::before { content: "✓ "; }
.auth-status[data-state="bad"] { color: var(--danger-soft); }
.auth-error { margin: 0; font-size: 13px; color: var(--danger-soft); }
.auth-error-general { padding: 10px 12px; border-radius: var(--radius-m); background: rgb(242 63 67 / 10%); }
.auth-meter { height: 4px; border-radius: 2px; background: #1f2024; overflow: hidden; }
.auth-meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: #6d6f78; transition: width .2s ease, background .2s ease; }
.auth-meter[data-level="1"] span { background: var(--danger-soft); }
.auth-meter[data-level="2"] span { background: #c9c26a; }
.auth-meter[data-level="3"] span, .auth-meter[data-level="4"] span { background: #3dc47e; }
.auth-submit {
  height: 44px; margin-top: 4px; border: 0; border-radius: var(--radius-m);
  background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 650;
  transition: background .12s ease, opacity .12s ease;
}
.auth-submit:hover:not(:disabled) { background: var(--accent-strong); }
.auth-submit:disabled { opacity: .5; cursor: not-allowed; }
.auth-submit.busy { color: transparent; position: relative; }
.auth-submit.busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--accent-ink); border-right-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.auth-switch { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--ink-muted); }
.auth-link { padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #6d6f78; }
.auth-link:hover { text-decoration-color: var(--ink); }
.auth-closed { margin: 16px 0 0; padding: 10px 12px; border-radius: var(--radius-m); background: var(--sea-700); color: var(--ink-soft); font-size: 13.5px; text-align: center; }
.auth[data-mode="login"] .register-only, .auth[data-mode="register"] .login-only { display: none !important; }
.tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tabs button {
  background: none; border: 0; padding: 8px 12px; color: var(--ink-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }


/* ---------- layout do app ---------- */
.app {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: var(--rail-w) var(--sidebar-w) minmax(0, 1fr) var(--members-w);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  background: var(--sea-950);
}
body.members-hidden .app { grid-template-columns: var(--rail-w) var(--sidebar-w) minmax(0, 1fr) 0; }
body.members-hidden .members { display: none; }

/* barra de cima: onde você está (servidor ou conversa). No app de desktop ela arrasta a janela. */
.topbar {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; position: relative;
  background: var(--sea-950); color: var(--ink-soft); font-size: 14px; font-weight: 600; user-select: none;
}
.topbar-title { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 60%; }
.topbar-title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-icon {
  --hue: 190; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
  background: hsl(var(--hue) 30% 34%); color: #fff; font-size: 8px; font-weight: 700; text-transform: uppercase;
}
body.desktop-app .topbar { -webkit-app-region: drag; }
body.desktop-app .topbar button { -webkit-app-region: no-drag; }
.win-controls { position: absolute; right: 0; top: 0; bottom: 0; display: flex; }
.win-controls button {
  width: 46px; border: 0; background: transparent; color: var(--ink-soft); display: grid; place-items: center;
}
.win-controls button:hover { background: var(--hover); color: var(--ink); }
.win-controls .win-close:hover { background: #d83c3e; color: #fff; }

.rail {
  background: var(--sea-950);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 4px 0 calc(var(--panels-h) + var(--panels-gap) * 2);
  overflow-y: auto; scrollbar-width: none;
}
.rail-home { position: relative; }
.home-tile { display: grid; place-items: center; background: var(--sea-700); color: var(--accent); }
.home-tile svg { width: 24px; height: 24px; }
.home-tile[aria-current="true"], .home-tile:hover { background: var(--accent); color: var(--accent-ink); }
/* a "pílula" branca à esquerda: pequena com novidade, média no hover, alta no selecionado */
.rail-home::before, .rail-list li::before {
  content: ""; position: absolute; left: -16px; top: 50%; width: 4px; height: 0; transform: translateY(-50%);
  border-radius: 0 4px 4px 0; background: var(--ink); transition: height .15s ease;
}
.rail-home:hover::before, .rail-list li:hover::before { height: 20px; }
.rail-home:has(.tile[aria-current="true"])::before,
.rail-list li:has(.tile[aria-current="true"])::before { height: 40px; }
.rail-home .badge, .rail-list .badge {
  position: absolute; right: -4px; bottom: -4px; border: 3px solid var(--sea-950); height: 22px; border-radius: 11px;
}
.rail-sep { width: 32px; border: 0; border-top: 2px solid var(--line); margin: 0; flex: none; }
.rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rail-home, .rail-list li { position: relative; }
.rail-list li[data-unread="true"]::before { height: 8px; }
.tile {
  --hue: 190;
  width: 40px; height: 40px; border-radius: 12px; padding: 0;
  border: 0;
  background: hsl(var(--hue) 22% 30%);
  color: hsl(var(--hue) 40% 92%);
  font-weight: 600; font-size: 14px;
  transition: background .15s ease, color .15s ease;
}
.tile:hover, .tile[aria-current="true"] { background: hsl(var(--hue) 34% 40%); color: #fff; }
.rail-add {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; padding: 0;
  background: var(--sea-700); border: 0; color: var(--online);
  transition: background .15s ease, color .15s ease;
}
.rail-add:hover { background: var(--online); color: #fff; }

/* canais e conversa no mesmo cinza, com a quina de cima arredondada sobre a moldura. */
.channels {
  background: var(--sea-900);
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--border-subtle); border-width: 1px 1px 0 1px; border-top-left-radius: var(--radius-m);
}
.channels-head { flex: none; height: var(--head-h); border-bottom: 1px solid var(--border-subtle); }
.server-menu-btn {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px 0 16px; background: none; border: 0; color: var(--ink); border-top-left-radius: var(--radius-m);
}
.server-menu-btn:not(:disabled):hover { background: var(--hover); }
.server-menu-btn:disabled { cursor: default; }
.server-menu-btn:disabled .icon { display: none; }
.server-menu-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.server-name { margin: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channels-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 8px 4px 16px; color: var(--ink-muted); font-size: 12px; font-weight: 600;
}
.channels-title:hover { color: var(--ink-soft); }
.channel-list {
  list-style: none; margin: 0; padding: 8px 8px calc(var(--panels-h) + var(--panels-gap) * 2); flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #1f2024 transparent;
}
.channel-btn {
  width: 100%; min-height: 34px; display: flex; align-items: center; gap: 6px; text-align: left;
  background: none; border: 0; border-radius: var(--radius-m);
  padding: 6px 8px; color: var(--ink-muted); font-size: 16px; font-weight: 500;
}
.channel-btn .channel-icon { width: 20px; height: 20px; color: var(--ink-muted); }
.channel-btn:hover { background: var(--hover); color: var(--ink-soft); }
.channel-btn[aria-current="true"] { background: var(--selected); color: var(--ink); }
.channel-btn[data-unread="true"] { color: var(--ink); font-weight: 600; }
/* canal com novidade: pílula branca na borda */
.channel-item:has(.channel-btn[data-unread="true"])::before {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 8px; border-radius: 0 4px 4px 0; background: var(--ink);
}
.channel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.channel-btn .badge { margin-left: auto; }
.channel-btn:has(.badge)::after { display: none; }
.friends-btn { font-weight: 500; color: var(--ink-soft); }
.dm-title-slot { list-style: none; }
.dm-title-slot .channels-title { padding: 16px 0 4px 8px; }

/* painel de baixo: voz conectada + você. Flutua sobre a lista de servidores e a de canais. */
.panels {
  position: absolute; z-index: 10; left: var(--panels-gap); bottom: var(--panels-gap);
  width: calc(var(--rail-w) + var(--sidebar-w) - var(--panels-gap) * 2);
  background: #36373e; border: 1px solid var(--border-subtle); border-radius: var(--radius-m);
  box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
}
.me { display: flex; align-items: center; gap: 2px; padding: 8px; }
.me-card {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 2px 4px 2px 2px; margin-right: 4px;
  background: none; border: 0; border-radius: var(--radius-m); text-align: left; color: var(--ink); cursor: default;
}
.me-card .avatar { width: 32px; height: 32px; font-size: 12px; }
.me-text { display: grid; min-width: 0; flex: 1; line-height: 1.2; }
.me-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.conn { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn[data-state="retry"] { color: var(--accent); }
.panel-btn {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: var(--radius-m); color: var(--ink-soft);
}
.panel-btn:hover { background: var(--hover); color: var(--ink); }
.panel-btn[aria-pressed="true"] { color: var(--danger-soft); }
.panel-btn[aria-pressed="true"]:hover { background: rgb(242 63 67 / 12%); }

.avatar {
  --hue: 190;
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: hsl(var(--hue) 34% 28%); color: hsl(var(--hue) 62% 90%);
  font-weight: 700; font-size: 14px; text-transform: uppercase;
}
.avatar.small { width: 24px; height: 24px; font-size: 10px; }
.avatar { position: relative; }
/* foto de perfil dentro do avatar */
.avatar.has-img { background: #1f2024; }
.avatar.has-img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* ---------- conversa ---------- */
.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--sea-800); border-top: 1px solid var(--border-subtle); }
.chat-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; height: var(--head-h); border-bottom: 1px solid var(--border-subtle); }
.channel-title { margin: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.title-icon { color: var(--ink-muted); }
.head-icon { width: 32px; height: 32px; }
.head-icon[aria-pressed="true"] { color: var(--ink); }
.chat-head #leave-group { margin-left: auto; }
.nav-toggle { display: none; }

.messages { flex: 1; overflow-y: auto; padding: 12px 0 8px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #1f2024 transparent; }
.messages:focus-visible { outline-offset: -3px; }

.load-more { display: block; margin: 8px auto 16px; }
.empty { margin: 48px auto; max-width: 36ch; text-align: center; color: var(--ink-muted); }
.empty strong { display: block; color: var(--ink-soft); font-size: 17px; margin-bottom: 4px; }
.empty-actions { margin-top: 18px; }

/* separador de dia: linha fina com a data no meio */
.day {
  display: flex; align-items: center; gap: 4px; margin: 24px 14px 8px 16px; height: 0;
  color: var(--ink-muted); font-size: 12px; font-weight: 600;
}
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* mensagens no modo "confortável": avatar 40px, texto começa em 72px, grupo novo com 17px acima */
.msg { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 16px; padding: 2px 48px 2px 16px; }
.msg.first { margin-top: 17px; padding-top: 2px; }
.msg:hover, .msg:focus-within { background: rgb(0 0 0 / 6%); }
/* mensagens que mencionam você ganham uma faixa âmbar */
.msg.mentioned { background: rgb(228 230 234 / 5%); box-shadow: inset 3px 0 0 var(--accent); }
.msg.mentioned:hover { background: rgb(228 230 234 / 7%); }
.msg.pending .msg-text { opacity: .55; }
.msg.failed .msg-text { color: var(--danger); opacity: 1; }
.msg-failed { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--danger); }
.msg.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: rgb(228 230 234 / 17%); } to { background: transparent; } }

.msg-reply {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 6px; min-width: 0;
  margin: 0 0 4px 18px; padding: 0 0 0 38px; position: relative;
  background: none; border: 0; text-align: left; font-size: 14px; color: var(--ink-muted);
}
.msg-reply::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 32px; height: 12px;
  border-left: 2px solid #4e5058; border-top: 2px solid #4e5058; border-top-left-radius: 6px;
}
.msg-reply:not(:disabled):hover .msg-reply-text { color: var(--ink); }
.msg-reply:disabled { cursor: default; font-style: italic; }
.msg-reply-author { font-weight: 650; color: var(--ink-soft); flex: none; }
.msg-reply-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.mention {
  background: rgb(228 230 234 / 10%); color: var(--accent-strong); border-radius: 3px; padding: 0 2px; font-weight: 500;
}
.mention:hover { background: var(--accent); color: var(--accent-ink); }
.mention-self { background: rgb(228 230 234 / 18%); }
.edited { font-size: 11.5px; color: var(--ink-muted); }

.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.reaction {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; height: 26px;
  background: var(--sea-700); border: 1px solid transparent; border-radius: var(--radius-m); color: var(--ink-soft); font-size: 14px;
}
.reaction:hover { border-color: #55565e; }
.reaction[aria-pressed="true"] { background: rgb(228 230 234 / 10%); border-color: var(--accent); color: var(--accent-strong); }
.reaction-emoji { font-size: 15px; line-height: 1; }
.reaction-count { font-weight: 650; font-variant-numeric: tabular-nums; }

/* barra de ações que aparece no hover, no canto de cima à direita */
.msg-tools {
  position: absolute; right: 14px; top: -16px; display: none; gap: 0; padding: 2px;
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-m);
  box-shadow: 0 4px 12px rgb(0 0 0 / 22%); z-index: 2;
}
.msg:hover .msg-tools, .msg:focus-within .msg-tools { display: flex; }
.tool {
  width: 32px; height: 32px; display: grid; place-items: center; line-height: 1; padding: 0;
  background: none; border: 0; border-radius: 6px; color: var(--ink-soft);
}
.tool:hover { background: var(--hover); color: var(--ink); }
.danger-tool { color: var(--danger-soft); }
.danger-tool:hover { color: var(--danger); }

.edit { display: grid; gap: 4px; margin: 2px 0 4px; }
.edit-input { resize: none; background: var(--sea-700); line-height: 1.45; overflow: hidden; }
.edit-hint { margin: 0; font-size: 12px; color: var(--ink-muted); }
.msg-side { grid-column: 1; }
.msg-time-hover { visibility: hidden; display: block; text-align: right; font-size: 11px; color: var(--ink-muted); line-height: 22px; white-space: nowrap; margin-left: -8px; }
.msg:hover .msg-time-hover { visibility: visible; }
.msg-body { grid-column: 2; min-width: 0; }
.msg-head { display: flex; align-items: baseline; gap: 4px; line-height: 22px; }
.msg-author { font-weight: 500; color: var(--ink); }
.msg-author:hover { text-decoration: underline; cursor: pointer; }
.msg-time { font-size: 12px; color: var(--ink-muted); margin-left: 4px; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-text); line-height: 22px; }
.msg-text a { color: #00a8fc; text-decoration: none; }
.msg-text a:hover { text-decoration: underline; }

.typing { margin: 0; padding: 0 16px; min-height: 24px; line-height: 24px; font-size: 14px; color: var(--ink-soft); }

.reply-bar {
  display: flex; align-items: center; gap: 10px; margin: 0 8px; padding: 6px 8px 6px 16px;
  background: #2b2c31; border: 1px solid var(--border-subtle); border-bottom: 0;
  border-radius: var(--radius-m) var(--radius-m) 0 0; font-size: 14px; color: var(--ink-soft);
}
.reply-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar:not([hidden]) ~ .composer { border-top-left-radius: 0; border-top-right-radius: 0; }
#reply-ping[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

.mention-list {
  list-style: none; margin: 0 8px 6px; padding: 8px; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-m);
}
.mention-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-s); cursor: pointer; }
.mention-option[aria-selected="true"], .mention-option:hover { background: var(--sea-700); }

/* ---------- amigos ---------- */
/* abas de amigos logo depois do título, separadas por um traço; "Adicionar amigo" é um botão verde */
.friend-tabs { order: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 auto 0 4px; padding-left: 16px; border-left: 1px solid var(--line); }
.chat-head .channel-title { order: 0; }
.chat-head .channel-actions, .chat-head #members-toggle, .chat-head .search-form { order: 2; }
.friend-tabs button {
  background: none; border: 0; border-radius: var(--radius-s); padding: 3px 10px; color: var(--ink-muted); font-size: 14px;
}
.friend-tabs button:hover { background: var(--hover); color: var(--ink-soft); }
.friend-tabs button[aria-selected="true"] { background: var(--selected); color: var(--ink); }
.friend-tabs button { font-weight: 500; }
.friend-tabs .tab-add { background: var(--online); color: #fff; }
.friend-tabs .tab-add:hover { background: #1f8f4e; color: #fff; }
.friend-tabs .tab-add[aria-selected="true"] { background: transparent; color: #3dc47e; }

.friends { flex: 1; overflow-y: auto; padding: 16px 20px; }
.add-friend { display: grid; gap: 8px; max-width: 560px; margin-bottom: 16px; }
.add-friend-row { display: flex; gap: 8px; }
.add-friend-row input { flex: 1; min-width: 0; }
.friend-list { list-style: none; margin: 0; padding: 0; }
.friend {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px;
  border-top: 1px solid var(--sea-700);
}
.friend:hover { background: rgb(255 255 255 / 3%); }
.friend-text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.friend-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-sub { font-size: 12.5px; color: var(--ink-muted); }
.friend-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.empty.small { margin: 24px auto; font-size: 14px; list-style: none; }

/* campo de mensagem: uma caixa só, com o "+" de anexar à esquerda e o emoji à direita; Enter envia */
.composer {
  display: flex; align-items: flex-start; gap: 0; margin: 0 8px 8px; padding: 0 6px;
  background: var(--sea-700); border: 1px solid var(--border-subtle); border-radius: var(--radius-m);
}
.composer:focus-within { border-color: #4e5058; }
.composer textarea {
  flex: 1; resize: none; max-height: 40vh; min-height: 44px; padding: 11px 8px;
  background: transparent; border: 0; border-radius: 0; line-height: 22px; color: var(--ink-text);
}
.composer textarea:focus { box-shadow: none; }
.composer-btn {
  flex: none; width: 40px; height: 44px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; color: var(--ink-soft);
}
.composer-btn:hover { color: var(--ink); }

/* ---------- membros ---------- */
.members {
  background: var(--sea-900); border-top: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle);
  overflow-y: auto; padding: 0 0 16px; scrollbar-width: thin; scrollbar-color: #1f2024 transparent;
}
.member-list { list-style: none; margin: 0; padding: 0 8px; }
.member {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 4px 8px; min-height: 42px; text-align: left;
  background: none; border: 0; border-radius: var(--radius-m); color: var(--ink-soft); font-weight: 500;
}
.member:not(:disabled):hover { background: var(--hover); color: var(--ink); }
.member:disabled { cursor: default; }
.member .avatar { width: 32px; height: 32px; font-size: 12px; position: relative; }
/* offline fica apagado */
.member[data-online="false"] { opacity: .3; }
.member[data-online="false"]:hover { opacity: 1; }

.member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.members-empty { list-style: none; display: grid; gap: 4px; padding: 8px; text-align: center; font-size: 14px; color: var(--ink-muted); }
.members-empty strong { color: var(--ink); font-size: 15px; }

/* ---------- diálogos ---------- */
dialog {
  width: min(440px, calc(100vw - 32px));
  background: var(--sea-900); color: var(--ink);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-l);
  padding: 24px; box-shadow: 0 8px 32px rgb(0 0 0 / 35%);
}
dialog::backdrop { background: rgb(0 0 0 / 70%); }
dialog h2 { margin: 0 0 14px; font-size: 18px; }
.dlg-section { display: grid; gap: 10px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.dlg-section:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.dlg-section .primary { justify-self: start; }
.dlg-note { margin: 0 0 12px; color: var(--ink-soft); }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.invite-code {
  display: block; padding: 14px; text-align: center; border-radius: var(--radius-m);
  background: var(--sea-950); border: 1px dashed var(--accent); color: var(--accent);
  font: 600 22px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .06em;
  user-select: all;
}

.pick-friends { border: 0; padding: 0; margin: 0; }
.pick-friends legend { padding: 0; margin-bottom: 6px; font-size: 14px; color: var(--ink-soft); }
.pick-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.pick { display: flex; align-items: center; gap: 10px; padding: 6px 4px; color: var(--ink); cursor: pointer; }
.pick input { width: 18px; height: 18px; accent-color: var(--accent); }
.delete-preview {
  margin: 0 0 12px; padding: 10px 12px; max-height: 160px; overflow: auto;
  background: var(--sea-950); border-radius: var(--radius-m); white-space: pre-wrap; overflow-wrap: anywhere;
}

.emoji-pop {
  position: fixed; inset: auto; margin: 0; padding: 8px; width: 236px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border-subtle); border-radius: var(--radius-m);
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
}
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.emoji-btn { height: 34px; background: none; border: 0; border-radius: var(--radius-s); font-size: 20px; line-height: 1; }
.emoji-btn:hover, .emoji-btn:focus-visible { background: var(--sea-700); }
.emoji-other { display: flex; gap: 6px; margin-top: 8px; }
.emoji-other input { flex: 1; min-width: 0; padding: 4px 8px; }

.scrim { position: fixed; inset: 0; background: rgb(0 0 0 / 60%); z-index: 20; }

/* ---------- telas menores ---------- */
@media (max-width: 1000px) {
  .app, body.members-hidden .app { grid-template-columns: var(--rail-w) 240px minmax(0, 1fr); }
  .members, #members-toggle { display: none; }
  .panels { width: calc(var(--rail-w) + 240px - var(--panels-gap) * 2); }
}

@media (max-width: 700px) {
  .app, body.members-hidden .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 0 minmax(0, 1fr); }
  .topbar { display: none; }
  .rail, .channels {
    position: fixed; top: 0; bottom: 0; z-index: 30;
    transition: transform .2s ease;
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .rail { left: 0; width: var(--rail-w); transform: translateX(-110%); }
  /* a gaveta de canais começa 72px à direita; recua a largura toda mais esse deslocamento */
  .channels { left: var(--rail-w); width: min(260px, calc(100vw - var(--rail-w))); transform: translateX(calc(-100% - 80px)); border-radius: 0; }
  .panels { display: none; position: fixed; z-index: 31; width: calc(min(260px, 100vw - var(--rail-w)) + var(--rail-w) - var(--panels-gap) * 2); }
  body.nav-open .panels { display: block; }
  body.nav-open .rail, body.nav-open .channels { transform: none; }
  .nav-toggle { display: inline-block; }
  .chat-head { height: auto; min-height: 52px; flex-wrap: wrap; padding-block: 8px; }
  .friend-tabs { margin-left: 0; }
  .friend { flex-wrap: wrap; }
  /* no toque não há hover: as ações ficam visíveis na mensagem tocada */
  .msg-tools { top: auto; bottom: -12px; }
  .composer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- fase 3: organização ---------- */
select {
  font: inherit; color: var(--ink); background: var(--sea-950);
  border: 1px solid var(--line); border-radius: var(--radius-m); padding: 8px 10px;
}
select:focus { border-color: var(--accent); outline: none; }
.danger-text { color: var(--danger) !important; }
.danger-text:hover { border-color: var(--danger); }

/* árvore de canais */
.channel-item { position: relative; display: flex; align-items: center; }
.channel-item .channel-btn { flex: 1; min-width: 0; }
/* a engrenagem do canal aparece por cima, à direita, no hover ou no canal aberto */
.channel-gear { position: absolute; right: 6px; flex: none; width: 22px; height: 22px; opacity: 0; color: var(--ink-soft); }
.channel-item:hover .channel-gear, .channel-item:focus-within .channel-gear,
.channel-item:has(.channel-btn[aria-current="true"]) .channel-gear,
.category:hover .channel-gear, .category:focus-within .channel-gear { opacity: 1; }
.channel-item:has(.channel-gear) .channel-btn:hover, .channel-item:has(.channel-btn[aria-current="true"]) .channel-btn { padding-right: 30px; }
.channel-btn.thread { padding-left: 34px; font-size: 15px; min-height: 30px; }
.channel-btn.thread::before {
  content: ""; position: absolute; left: 18px; top: 2px; width: 12px; height: 14px;
  border-left: 1px solid #4e5058; border-bottom: 1px solid #4e5058; border-bottom-left-radius: 8px;
}
.channel-item:has(.thread) { position: relative; }
.category { position: relative; display: flex; align-items: center; gap: 0; margin-top: 16px; padding-right: 4px; }
.category .channel-gear { position: static; }
.category-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; text-align: left;
  background: none; border: 0; padding: 6px 2px 6px 8px; color: var(--ink-muted);
  font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.category-chevron { transition: transform .15s ease; }
.category-btn[aria-expanded="false"] .category-chevron { transform: rotate(-90deg); }
.category-btn:hover { color: var(--ink); }
.category-add { width: 22px; height: 22px; color: var(--ink-muted); }
.category-add:hover { color: var(--ink); }

/* cabeçalho */
.chat-head { gap: 10px; }
.channel-title { flex: none; max-width: 50%; }
.channel-title[data-kind="thread"] { display: flex; align-items: baseline; gap: 2px; }
.crumb { background: none; border: 0; padding: 0; color: var(--ink-muted); font: inherit; }
.crumb:hover { color: var(--ink); text-decoration: underline; }
.crumb-sep { color: var(--ink-muted); }
.channel-topic {
  flex: 1; min-width: 0; margin: 0 0 0 4px; padding-left: 12px; border-left: 1px solid var(--line);
  color: var(--ink-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.channel-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.channel-topic:not([hidden]) + .channel-actions { margin-left: 0; }

.composer-blocked {
  margin: 0 8px 8px; padding: 12px 16px; border-radius: var(--radius-m);
  background: var(--sea-700); color: var(--ink-muted); font-size: 14px; text-align: center;
}

/* nomes coloridos por cargo e menções de cargo */
.colored { color: var(--role-color) !important; }
.role-mention { --role-color: var(--accent-strong); color: var(--role-color); background: color-mix(in srgb, var(--role-color) 18%, transparent); }
.crown { color: var(--idle); display: inline-flex; flex: none; }
.member-group {
  padding: 24px 8px 4px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-muted); list-style: none;
}

/* mensagens */
.pinned-mark { display: inline-flex; color: var(--ink-muted); margin-left: 4px; align-self: center; }
.msg.system { padding-top: 4px; padding-bottom: 4px; }
.system-text { margin: 0; color: var(--ink-muted); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.system-icon { color: var(--ink-muted); margin: 0 12px 0 -44px; }
.system-text .msg-time { margin-left: 4px; }
.thread-chip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 2px; max-width: 420px;
  padding: 8px 12px; text-align: left; background: var(--sea-900); border: 1px solid var(--line);
  border-radius: var(--radius-m); color: var(--ink);
}
.thread-chip:hover { border-color: var(--accent); }
.thread-chip-name { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.thread-chip-count { font-size: 13px; color: var(--accent); }

/* painéis (fixadas, threads) */
.panel-pop {
  position: fixed; inset: auto; margin: 0; width: min(380px, calc(100vw - 16px)); max-height: 70vh; overflow-y: auto;
  padding: 16px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-m); box-shadow: 0 10px 30px rgb(0 0 0 / 40%);
}

/* menus (servidor e usuário): itens de 32px, ícone à direita, hover em âmbar */
.menu-pop {
  position: fixed; inset: auto; margin: 0; width: 220px; padding: 6px 8px; gap: 2px;
  background: #2b2c31; color: var(--ink-soft); border: 1px solid var(--border-subtle); border-radius: var(--radius-m);
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
}
/* só aberto vira grade: "display" no seletor base anularia o "fechado = escondido" do popover */
.menu-pop:popover-open { display: grid; }
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 6px 8px;
  background: none; border: 0; border-radius: var(--radius-s); color: inherit; font-size: 14px; font-weight: 500; text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--hover); color: var(--ink); outline: none; }
.menu-item.accent { color: var(--accent); }
.menu-item.accent:hover, .menu-item.accent:focus-visible { background: var(--accent); color: var(--accent-ink); }
.menu-item.danger { color: var(--danger-soft); }
.menu-item.danger:hover, .menu-item.danger:focus-visible { background: var(--danger); color: #fff; }
.menu-sep { border: 0; border-top: 1px solid var(--border-subtle); margin: 4px 4px; }
.panel-title { margin: 0 0 10px; font-size: 15px; }
.panel-body { display: grid; gap: 10px; }
.panel-body > .primary { justify-self: start; }
.panel-empty { margin: 8px 0; color: var(--ink-muted); font-size: 14px; }
.panel-item { padding: 10px 12px; background: var(--sea-900); border-radius: var(--radius-m); }
.panel-item-head { display: flex; align-items: baseline; gap: 8px; }
.panel-item .msg-text { font-size: 14px; }
.panel-item-actions { display: flex; gap: 12px; margin-top: 6px; font-size: 13px; }
.panel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.panel-link {
  width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; text-align: left;
  background: none; border: 0; border-radius: var(--radius-s); color: var(--ink);
}
.panel-link:hover { background: var(--hover); }

/* diálogos de configuração */
dialog.wide { width: min(780px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
dialog .tabs { margin-bottom: 14px; }
.pane { min-height: 200px; }
.pane.split { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
.split-list { display: grid; align-content: start; gap: 8px; }
.split-detail { display: grid; align-content: start; gap: 12px; min-width: 0; }
.split-list .pick-list { max-height: 50vh; }
.role-item {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; text-align: left;
  background: none; border: 0; border-radius: var(--radius-s); color: var(--ink-soft);
}
.role-item:hover { background: var(--sea-700); }
.role-item[aria-current="true"] { background: var(--sea-600); color: var(--ink); }
.role-dot { --role-color: var(--ink-muted); flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--role-color); }
.role-flags { display: flex; flex-wrap: wrap; gap: 10px 18px; }
label.inline { display: inline-flex; align-items: center; gap: 6px; }
label.inline input[type="color"] { width: 36px; height: 26px; padding: 0; border-radius: 6px; }
.perm-list { display: grid; gap: 2px; border: 0; margin: 0; padding: 0; }
.perm-list legend { padding: 0; margin-bottom: 6px; color: var(--ink-soft); font-size: 14px; }
.perm-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 4px; border-top: 1px solid var(--sea-700); color: var(--ink); }
.perm-row input[type="checkbox"] { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); }
.perm-row > span:first-of-type, .perm-row > input + span { display: grid; flex: 1; }
.perm-help { color: var(--ink-muted); font-size: 12.5px; }
.role-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tri-row { align-items: center; }
.tri-row > span:first-child { display: grid; flex: 1; }
.tri-group { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; flex: none; }
.tri { display: grid; place-items: center; width: 34px; height: 28px; cursor: pointer; color: var(--ink-muted); font-weight: 700; }
.tri + .tri { border-left: 1px solid var(--line); }
.tri input { position: absolute; opacity: 0; pointer-events: none; }
.tri:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.tri-deny:has(input:checked) { background: rgb(255 156 140 / 22%); color: var(--danger); }
.tri-inherit:has(input:checked) { background: var(--sea-600); color: var(--ink); }
.tri-allow:has(input:checked) { background: rgb(123 217 166 / 20%); color: var(--online); }
.tri:has(input:disabled) { cursor: not-allowed; opacity: .45; }

.ss-members { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow-y: auto; }
.ss-member { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 4px; border-top: 1px solid var(--sea-700); }
.ss-member-name { min-width: 140px; }
.role-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; align-items: center; }
.role-chip {
  --role-color: var(--ink-muted); display: inline-flex; align-items: center; gap: 5px; padding: 1px 4px 1px 8px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--ink-soft);
}
.chip-x { background: none; border: 0; padding: 0 4px; color: var(--ink-muted); font-size: 14px; line-height: 1; }
.chip-x:hover { color: var(--danger); }
.role-add { padding: 2px 6px; font-size: 12.5px; }
.radio-row { display: flex; gap: 18px; border: 0; padding: 0; margin: 0; }
.radio { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; color: var(--ink); }
.radio input { accent-color: var(--accent); }
.mention-icon { background: var(--sea-600); color: var(--ink-soft); }

@media (max-width: 700px) {
  .pane.split { grid-template-columns: minmax(0, 1fr); }
  .channel-topic { display: none; }
  .channel-gear { opacity: 1; }
}

/* Nos diálogos largos, título, abas e lista ficam fixos; só o conteúdo de cada lado rola. */
dialog.wide[open] { display: flex; flex-direction: column; overflow: hidden; }
dialog.wide .pane { flex: 1; min-height: 0; overflow-y: auto; }
dialog.wide .pane.split { overflow: hidden; grid-template-rows: minmax(0, 1fr); }
dialog.wide .split-list, dialog.wide .split-detail { min-height: 0; overflow-y: auto; padding-right: 4px; }
dialog.wide .split-list .pick-list { max-height: none; }
@media (max-width: 700px) {
  dialog.wide .pane.split { overflow-y: auto; grid-template-rows: auto; }
  dialog.wide .split-list, dialog.wide .split-detail { overflow: visible; }
}
.split-list select { width: 100%; min-width: 0; }

/* ---------- fase 4: mídia ---------- */
.composer { align-items: flex-end; }
.attach-btn { flex: none; }

.upload-tray {
  list-style: none; display: flex; gap: 8px; overflow-x: auto; margin: 0 16px 6px; padding: 8px;
  background: var(--sea-900); border-radius: var(--radius-m);
}
.upload {
  position: relative; flex: none; width: 150px; display: grid; gap: 4px; padding: 8px;
  background: var(--sea-800); border: 1px solid var(--line); border-radius: var(--radius-m); font-size: 12.5px;
}
.upload img { width: 100%; height: 90px; object-fit: cover; border-radius: var(--radius-s); }
.upload .file-icon { display: grid; place-items: center; height: 90px; color: var(--ink-soft); }
.upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.upload progress { width: 100%; height: 6px; accent-color: var(--accent); }
.upload.failed { border-color: var(--danger); }
.upload .chip-x { position: absolute; top: 2px; right: 2px; background: var(--sea-950); border-radius: 50%; width: 22px; height: 22px; }

.attachments { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.attachment-image {
  display: block; padding: 0; border: 0; background: var(--sea-900); border-radius: var(--radius-m);
  overflow: hidden; cursor: zoom-in; max-width: 100%;
}
.attachment-image img { display: block; max-width: min(400px, 100%); height: auto; object-fit: contain; }
.msg.pending .attachment-image img { opacity: .6; }
.attachment-file {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; max-width: 420px;
  background: var(--sea-900); border: 1px solid var(--line); border-radius: var(--radius-m);
}
.attachment-file .file-icon { color: var(--ink-soft); display: inline-flex; }
.file-text { display: grid; min-width: 0; }
.file-text a { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.embeds { display: grid; gap: 6px; margin: 4px 0; }
.embed {
  display: grid; gap: 4px; max-width: 432px; padding: 10px 14px 12px;
  background: var(--sea-900); border-left: 4px solid var(--accent); border-radius: var(--radius-s);
}
.embed-site { font-size: 12px; color: var(--ink-muted); }
.embed-title { font-weight: 700; color: var(--accent-strong); text-decoration: none; }
.embed-title:hover { text-decoration: underline; }
.embed-desc { margin: 0; font-size: 14px; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.embed-image { margin-top: 6px; max-width: 100%; height: auto; border-radius: var(--radius-s); }

.lightbox { width: auto; max-width: calc(100vw - 32px); padding: 0; background: transparent; border: 0; }
.lightbox img { display: block; max-width: calc(100vw - 32px); max-height: calc(100vh - 110px); margin: 0 auto; border-radius: var(--radius-m); }
.lightbox-bar { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.lightbox-name { flex: 1; color: var(--ink-soft); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox a.ghost { text-decoration: none; }

.drop-hint {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none;
  background: rgb(5 12 15 / 70%);
}
.drop-hint p {
  margin: 0; padding: 28px 40px; border: 2px dashed var(--accent); border-radius: var(--radius-l);
  background: var(--sea-800); color: var(--accent); font-size: 18px; font-weight: 700;
}

img.emoji { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; margin: 0 1px; }
img.emoji.big { width: 32px; height: 32px; }
.reaction img.emoji { width: 18px; height: 18px; vertical-align: -3px; }
.emoji-grid .emoji-btn img.emoji { width: 24px; height: 24px; }
.emoji-upload-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.emoji-upload-row input[type="file"] { padding: 6px; max-width: 260px; }
.emoji-admin-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.emoji-admin { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--sea-700); border-radius: var(--radius-m); }
.emoji-admin span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 700px) {
  .attachment-image img { max-width: 100%; }
  .attach-btn { width: 36px; }
}
.attachments { align-items: flex-start; }
.lightbox-bar { flex-wrap: wrap; }
.lightbox-name { min-width: 0; flex-basis: 140px; }
@media (max-width: 700px) {
  .lightbox-bar { justify-content: flex-start; }
  .lightbox-name { flex-basis: 100%; }
}

/* ---------- fase 5: voz e vídeo ---------- */
/* quem está na voz, logo abaixo do canal: avatar 24px, anel verde ao falar, ícones à direita */
.voice-member {
  position: relative; display: flex; align-items: center; gap: 8px; margin: 1px 0 1px 28px; padding: 4px 8px; list-style: none;
  border-radius: var(--radius-m); font-size: 14px; font-weight: 500; color: var(--ink-muted); min-width: 0;
}
.voice-member:hover { background: var(--hover); color: var(--ink-soft); }
.voice-member .avatar { width: 24px; height: 24px; font-size: 9px; transition: box-shadow .1s ease; }
.voice-member.speaking .avatar { box-shadow: 0 0 0 2px var(--sea-900), 0 0 0 4px var(--online); }
.voice-member.speaking { color: var(--ink); }
.voice-icons { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--ink-muted); }
.voice-icon { display: inline-flex; }
.voice-icon.off { color: var(--danger-soft); }
.live-pill {
  padding: 0 6px; border-radius: 8px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: .02em;
}

/* "Voz conectada": status em verde com as barrinhas, onde você está, configurações e desligar */
.voice-panel { display: grid; gap: 8px; padding: 8px 8px 10px; border-bottom: 1px solid var(--border-subtle); }
.voice-panel-row { display: flex; align-items: center; gap: 2px; }
.voice-panel-info { display: grid; line-height: 1.25; min-width: 0; flex: 1; padding-left: 2px; }
.voice-status { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--accent); }
.voice-status[data-state="on"] { color: var(--online); }
.voice-where { justify-self: start; font-size: 12px; color: var(--ink-muted); text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-where:hover { color: var(--ink); text-decoration: underline; }
.voice-panel .vc-leave { color: var(--ink-soft); }
.voice-panel .vc-leave:hover { background: rgb(242 63 67 / 15%); color: var(--danger-soft); }
.voice-buttons { display: flex; gap: 8px; }
.voice-buttons .vc-btn {
  flex: 1; height: 32px; display: grid; place-items: center; padding: 0;
  background: rgb(255 255 255 / 6%); border: 0; border-radius: var(--radius-m); color: var(--ink-soft);
}
.voice-buttons .vc-btn:hover { background: rgb(255 255 255 / 11%); color: var(--ink); }
.voice-buttons .vc-btn[aria-pressed="true"] { background: rgb(35 165 90 / 22%); color: #3dc47e; }
#vc-mute.ptt-live { color: var(--online); box-shadow: inset 0 0 0 2px var(--online); }

/* área da chamada: fundo quase preto, quadros arredondados e barra de botões redondos embaixo */
.voice-view {
  flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: grid; align-content: center; gap: 16px;
  background: #121214;
}
.voice-view.compact { flex: none; max-height: 42vh; align-content: start; border-bottom: 1px solid var(--border-subtle); }
.voice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.voice-view.compact .voice-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.voice-tile {
  position: relative; margin: 0; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden;
  background: var(--tile-bg, #2b2c31); border: 0; border-radius: var(--radius-m);
}
.voice-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .1s ease;
}
.voice-tile.speaking::after { box-shadow: inset 0 0 0 2px var(--online), inset 0 0 0 4px #121214; }
.voice-tile.connecting { opacity: .6; }
.voice-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; }
.voice-tile.has-video video { display: block; }
.voice-tile.screen video { object-fit: contain; }
.voice-tile .tile-screen-icon { font-size: 2rem; display: grid; place-items: center; }
.voice-tile { cursor: pointer; }
.voice-tile.mirror video { transform: scaleX(-1); }
.voice-tile.has-video .tile-avatar { display: none; }
.tile-avatar { width: 80px; height: 80px; font-size: 26px; }
.voice-tile figcaption {
  position: absolute; left: 8px; bottom: 8px; right: 8px; display: flex; align-items: center; gap: 6px;
  font-size: 13px; pointer-events: none;
}
.tile-name { padding: 2px 8px; border-radius: var(--radius-m); background: rgb(0 0 0 / 60%); font-weight: 500; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-icons .voice-icons { padding: 3px 6px; border-radius: var(--radius-m); background: rgb(0 0 0 / 60%); color: var(--ink); }
.tile-tools { position: absolute; top: 8px; right: 8px; display: none; gap: 4px; }
.voice-tile:hover .tile-tools, .voice-tile:focus-within .tile-tools { display: flex; }
.tile-tools .ghost { background: rgb(0 0 0 / 70%); }
.voice-cta { display: grid; justify-items: center; gap: 10px; text-align: center; }
.voice-hint { margin: 0; color: var(--ink-muted); }

.call-toast {
  position: fixed; left: 50%; top: max(44px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--online); border-radius: var(--radius-m); box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
}
.voice-settings { width: min(340px, calc(100vw - 16px)); }
.radio-row.stacked { display: grid; gap: 6px; }
.radio-row legend { padding: 0; margin-bottom: 6px; color: var(--ink-soft); font-size: 14px; }

@media (max-width: 700px) {
  .voice-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .tile-tools { display: flex; }
}
.voice-controls {
  position: sticky; bottom: 0; justify-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  padding: 8px; border-radius: 16px; background: rgb(0 0 0 / 55%);
}
.voice-controls .vc-btn {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  background: #2b2c31; border: 0; border-radius: 50%; color: var(--ink);
}
.voice-controls .vc-btn:hover { background: #3a3b41; }
.voice-controls .audio-toggle[aria-pressed="true"] { background: #fff; color: var(--danger); }
.voice-controls .video-toggle[aria-pressed="true"] { background: #fff; color: #121214; }
.voice-controls .vc-leave { width: 64px; border-radius: 24px; background: var(--danger); color: #fff; }
.voice-controls .vc-leave:hover { background: #d83c3e; }
.vc-sep { width: 1px; height: 28px; background: rgb(255 255 255 / 14%); margin: 0 4px; }
.voice-hint { color: var(--ink-soft); }
.voice-icons:empty, .tile-icons:has(.voice-icons:empty) { display: none; }

/* ---------- fase 6.3: busca ---------- */
/* busca no cabeçalho: caixa pequena com a lupa, que cresce ao focar */
.search-form { position: relative; flex: none; margin-left: 4px; }
.search-form input {
  width: 160px; height: 32px; padding: 4px 30px 4px 10px; font-size: 14px;
  background: #26272b; border-color: transparent; border-radius: var(--radius-m); transition: width .15s ease;
}
.search-form input:focus { width: 260px; box-shadow: none; border-color: transparent; }
.search-form input::-webkit-search-cancel-button { display: none; }
.search-form .icon { position: absolute; right: 9px; top: 8px; color: var(--ink-muted); pointer-events: none; }
.channel-actions + .search-form { margin-left: 4px; }
.chat-head .channel-actions:empty { margin-left: auto; }
.search-panel {
  position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: min(400px, 100vw); z-index: 35;
  display: flex; flex-direction: column; background: var(--sea-950); border-left: 1px solid var(--border-subtle);
  box-shadow: -10px 0 30px rgb(0 0 0 / 35%);
  padding-top: env(safe-area-inset-top);
}
.search-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 6px; }
.search-summary { flex: 1; font-size: 14px; }
.search-hint { margin: 0; padding: 0 14px 8px; font-size: 12px; color: var(--ink-muted); line-height: 1.8; }
.search-hint code { background: var(--sea-800); padding: 1px 5px; border-radius: 4px; color: var(--ink-soft); }
.search-results { list-style: none; margin: 0; padding: 0 8px; overflow-y: auto; flex: 1; }
.search-result {
  width: 100%; display: grid; gap: 4px; padding: 10px 12px; margin-bottom: 8px; text-align: left;
  background: var(--sea-900); border: 1px solid var(--border-subtle); border-radius: var(--radius-m); color: var(--ink);
}
.search-result:hover, .search-result:focus-visible { border-color: var(--accent); outline: none; }
.search-meta { font-size: 12.5px; color: var(--ink-muted); }
.search-meta strong { color: var(--ink-soft); }
.search-text { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.search-text mark { background: rgb(228 230 234 / 21%); color: var(--ink); border-radius: 3px; padding: 0 1px; }
.search-more { margin: 8px auto 14px; }
.detached-bar {
  position: sticky; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 8px 16px 0; padding: 8px 12px; border-radius: var(--radius-m);
  background: var(--sea-700); border: 1px solid var(--line); font-size: 13.5px;
}
@media (max-width: 700px) {
  .search-form input { width: 110px; }
  .search-form input:focus { width: 160px; }
}
/* Em telas largas, o painel de busca ocupa o lugar da lista de membros (sem cobrir a conversa nem o campo). */
@media (min-width: 1001px) {
  body.searching .app { grid-template-columns: var(--rail-w) var(--sidebar-w) minmax(0, 1fr) min(400px, 34vw); }
  body.searching .members { visibility: hidden; }
  body.searching .search-panel { width: min(400px, 34vw); box-shadow: none; }
}

/* ---------- fase 6.4: webhooks e bots ---------- */
.bot-tag {
  display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; vertical-align: 1px;
  background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 800; letter-spacing: .03em; line-height: 16px;
}
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.inline-form label { flex: 1; min-width: 160px; }
.inline-form .form-error { flex-basis: 100%; }
.secret-box {
  display: grid; gap: 6px; margin: 0 0 14px; padding: 12px; border-radius: var(--radius-m);
  background: var(--sea-950); border: 1px dashed var(--accent);
}
.secret-row { display: flex; gap: 8px; align-items: center; }
.secret { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--accent-strong); user-select: all; }
.secret-example { margin: 4px 0 0; padding: 8px; overflow-x: auto; background: var(--sea-900); border-radius: var(--radius-s); font: 12px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink-soft); }
.role-item.static { cursor: default; flex-wrap: wrap; }
.role-item.static button { margin-left: auto; }

/* qualidade do compartilhamento de tela */
.radio.quality { align-items: flex-start; padding: 6px 0; }
.radio.quality > span { display: grid; gap: 2px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tile-quality {
  position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; pointer-events: none;
  background: rgb(5 12 15 / 75%); color: var(--ink-soft); font: 11.5px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.voice-tile:not(.has-video) .tile-quality { display: none; }
.voice-tile.screen .tile-quality { top: auto; left: auto; right: 8px; bottom: 8px; }

/* ---------- transmissão de tela ---------- */
/* destaque: um quadro grande e os outros numa faixa embaixo */
.voice-view.focused { align-content: stretch; grid-template-rows: minmax(0, 1fr) auto; }
.voice-view.focused .voice-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 192px)); justify-content: center;
  grid-template-rows: minmax(0, 1fr); grid-auto-rows: 108px; gap: 8px; min-height: 0;
  container-type: inline-size;
}
.voice-view.focused .voice-tile { aspect-ratio: auto; height: 108px; }
.voice-view.focused .voice-tile .tile-avatar { width: 48px; height: 48px; font-size: 16px; }
/* o destaque ocupa a largura toda da área (100cqw), não só a das colunas da faixa */
.voice-view.focused .voice-tile.focused { grid-row: 1; grid-column: 1 / -1; height: 100%; min-height: 0; width: 100cqw; justify-self: center; }
.voice-view.focused .voice-tile.focused .tile-avatar { width: 96px; height: 96px; font-size: 32px; }
.voice-view.focused .voice-tile:not(.focused) .stream-cta .watch-btn { padding: 4px 8px; font-size: 12px; }
.voice-view.focused .voice-tile:not(.focused) .tile-quality,
.voice-view.focused .voice-tile:not(.focused) .stream-tools { display: none; }
.voice-tile:fullscreen { border-radius: 0; background: #000; }
.voice-tile:fullscreen video { object-fit: contain; }

/* quadro da tela: prévia apagada com "Assistir transmissão"; assistindo, o vídeo com os controles no hover */
.voice-tile.screen { background: #000; }
.stream-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) blur(1px); }
.voice-tile.screen.has-video .tile-screen-icon, .voice-tile.screen:has(.stream-preview:not([hidden])) .tile-screen-icon { display: none; }
.stream-cta { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; pointer-events: none; }
.stream-cta:empty { display: none; }
.stream-cta > * { pointer-events: auto; }
.voice-tile.screen:not(.has-video) .tile-screen-icon { opacity: .35; }
.watch-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-m); box-shadow: 0 4px 16px rgb(0 0 0 / 40%); }
.stream-live { position: absolute; top: 8px; left: 8px; pointer-events: none; }
.stream-tools {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s ease;
}
.voice-tile:hover .stream-tools, .voice-tile:focus-within .stream-tools, .voice-tile:fullscreen .stream-tools { opacity: 1; }
.stream-tool {
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-m);
  background: rgb(0 0 0 / 65%); color: #fff;
}
.stream-tool:hover { background: rgb(0 0 0 / 85%); }
.voice-tile.screen.self .stream-cta { color: var(--ink-soft); font-size: 14px; }

/* janela "Compartilhar tela" e o menu ao vivo: resolução e quadros em botões */
dialog.golive { width: min(480px, calc(100vw - 32px)); }
.golive-where { margin: -8px 0 16px; color: var(--ink-muted); font-size: 14px; }
.golive-body { display: grid; gap: 14px; }
.golive-label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.chip-row legend { padding: 0; margin-bottom: 8px; font-size: 14px; color: var(--ink-soft); }
.chip { display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  min-width: 64px; padding: 7px 14px; text-align: center; border-radius: var(--radius-m); font-size: 14px; font-weight: 500;
  background: rgb(255 255 255 / 6%); color: var(--ink-soft); border: 1px solid transparent;
}
.chip:hover span { background: rgb(255 255 255 / 10%); color: var(--ink); }
.chip input:checked + span { background: rgb(228 230 234 / 10%); border-color: var(--accent); color: var(--accent-strong); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.quality-note { margin: 0; font-size: 13px; color: var(--ink-muted); }
.golive-actions .primary { display: inline-flex; align-items: center; gap: 8px; }
#screen-menu .panel-title { display: flex; align-items: center; gap: 8px; }

/* no painel: "Transmitindo a tela", com qualidade, quem assiste e o botão de parar */
.stream-panel { display: flex; align-items: center; gap: 8px; padding: 6px 4px 6px 8px; border-radius: var(--radius-m); background: rgb(242 63 67 / 10%); }
.stream-panel-icon { color: var(--danger-soft); display: inline-flex; }
.stream-panel-text { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.stream-panel-text strong { font-size: 13px; color: var(--ink); }
.stream-panel-text span { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.live-pill { border: 0; cursor: pointer; }
button.live-pill:hover { background: #d83c3e; }

/* ---------- app de desktop (janela sem moldura) ---------- */
/* no macOS os botões de fechar/minimizar ficam na barra de cima, sobre a lista de servidores */
body.desktop-app.os-darwin .topbar-title { max-width: calc(100% - 160px); }
body.desktop-app:not(.os-darwin) .topbar-title { max-width: calc(100% - 300px); }

/* ---------- rodada 2: formatação das mensagens (Markdown) ---------- */
.md-code {
  padding: 0 .2em; border-radius: var(--radius-s); font: .85em/1.125rem ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: #2b2c31; border: 1px solid #3a3b41; white-space: pre-wrap;
}
.md-codeblock {
  position: relative; margin: 6px 0 2px; max-width: 90%; padding: 8px 10px; overflow-x: auto;
  background: #2b2c31; border: 1px solid #3a3b41; border-radius: var(--radius-s);
  font: 14px/1.125rem ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #dbdee1; white-space: pre;
}
.md-codeblock code { font: inherit; background: none; border: 0; padding: 0; }
.tk-keyword { color: #b9a6ff; }
.tk-string { color: #7ee2a8; }
.tk-number { color: #f5a3c7; }
.tk-comment { color: #8a8d96; font-style: italic; }
/* citação: barra cinza à esquerda, sem recuo extra no texto */
.md-quote { display: flex; gap: 0; margin: 2px 0; }
.md-quote-bar { flex: none; width: 4px; border-radius: 4px; background: #4e5058; }
.md-quote blockquote { margin: 0; padding: 0 8px 0 12px; min-width: 0; text-indent: 0; }
.md-heading { margin: 8px 0 4px; line-height: 1.375; color: var(--ink); font-weight: 700; }
h1.md-heading { font-size: 24px; }
h2.md-heading { font-size: 20px; }
h3.md-heading { font-size: 16px; }
.md-heading:first-child { margin-top: 0; }
.md-subtext { display: block; font-size: 13px; line-height: 1.11rem; color: var(--ink-muted); }
.md-list { margin: 4px 0 0 0; padding-left: 26px; }
.md-list li { margin-bottom: 2px; white-space: pre-wrap; }
.md-list .md-list { margin-top: 0; }
ul.md-list { list-style: disc; }
ul.md-list ul.md-list { list-style: circle; }
.md-link { color: #00a8fc; text-decoration: none; }
.md-link:hover { text-decoration: underline; }
/* spoiler: tarja escura até clicar; revelado fica com fundo leve */
.md-spoiler { border-radius: var(--radius-s); background: #1e1f22; cursor: pointer; transition: background .1s ease; }
.md-spoiler:hover { background: #18191c; }
.md-spoiler:not(.revealed) .md-spoiler-inner { opacity: 0; pointer-events: none; user-select: none; }
.md-spoiler:not(.revealed) img { visibility: hidden; }
.md-spoiler.revealed { background: rgb(255 255 255 / 10%); cursor: auto; }
.md-timestamp { padding: 0 2px; border-radius: 3px; background: rgb(255 255 255 / 6%); }
/* só emoji na mensagem: aparecem grandes */
.md.jumbo { font-size: 44px; line-height: 1.2; }
.md.jumbo img.emoji.big { width: 48px; height: 48px; vertical-align: -10px; }
.leave-url {
  margin: 0 0 4px; padding: 10px 12px; border-radius: var(--radius-m); background: #26272b;
  font: 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); overflow-wrap: anywhere;
}

/* ---------- rodada 3: leitura sincronizada ---------- */
/* linha "NOVAS": vermelha, com a etiqueta à direita */
.new-divider {
  position: relative; display: flex; align-items: center; justify-content: flex-end; height: 0; margin: 12px 14px 12px 16px;
  border-top: 1px solid var(--danger);
}
.new-divider span {
  position: relative; top: -1px; padding: 0 4px; border-radius: 0 4px 4px 0; transform: translateY(-50%);
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 13px; letter-spacing: .02em;
}
.new-divider + .msg { margin-top: 4px; }

/* ---------- rodada 4: perfis ---------- */
/* Indicadores de status: bolinha verde (online), lua amarela (ausente),
   vermelho com traço (não perturbe) e anel cinza (offline). A borda tem a cor do fundo onde o avatar está. */
.avatar[data-status] { --ring: var(--sea-900); }
.me-card .avatar[data-status] { --ring: #36373e; }
.profile-card .avatar[data-status], .status-menu .avatar[data-status] { --ring: #2b2c31; }
.avatar[data-status]::after, .status-dot {
  content: ""; position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%;
  border: 3px solid var(--ring); box-sizing: content-box;
}
.avatar[data-status="online"]::after, .status-dot[data-status="online"] { background: var(--online); }
.avatar[data-status="idle"]::after, .status-dot[data-status="idle"] {
  background: radial-gradient(circle at 28% 28%, var(--ring) 0 32%, var(--idle) 34%);
}
.avatar[data-status="dnd"]::after, .status-dot[data-status="dnd"] {
  background: linear-gradient(var(--ring), var(--ring)) center / 60% 26% no-repeat, var(--danger);
}
.avatar[data-status="offline"]::after, .status-dot[data-status="offline"] {
  background: radial-gradient(circle, var(--ring) 0 40%, #80848e 42%);
}
.status-dot { position: static; display: inline-block; flex: none; width: 10px; height: 10px; border: 0; --ring: #2b2c31; }
.avatar.small[data-status]::after { width: 8px; height: 8px; border-width: 2px; right: -2px; bottom: -2px; }

/* painel de baixo: a linha de baixo vira o status personalizado ou o nome do status */
.me-sub { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-card { cursor: pointer; }
.me-card:hover { background: var(--hover); }
.custom-status { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.custom-status .cs-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-text { display: grid; min-width: 0; line-height: 1.2; text-align: left; }
.member-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.member-cs { font-size: 12px; color: var(--ink-muted); font-weight: 400; }

/* nome e foto nas mensagens abrem o perfil */
.msg-avatar-btn { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; display: block; }
button.msg-author { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--ink); cursor: pointer; }
button.msg-author:hover { text-decoration: underline; }
button.msg-author.colored { color: var(--role-color); }

/* cartão de perfil */
.profile-card {
  position: fixed; inset: auto; margin: 0; width: 300px; padding: 0; overflow: hidden;
  background: #2b2c31; color: var(--ink); border: 1px solid var(--border-subtle); border-radius: 12px;
  box-shadow: 0 12px 36px rgb(0 0 0 / 45%);
}
.pc-banner { --hue: 220; height: 64px; background: hsl(var(--hue) 22% 34%); }
.pc-avatar-wrap { position: relative; height: 0; }
.pc-avatar-wrap .avatar { position: absolute; left: 16px; top: -40px; width: 80px; height: 80px; font-size: 26px; box-shadow: 0 0 0 6px #2b2c31; }
.pc-avatar-wrap .avatar[data-status]::after { width: 16px; height: 16px; border-width: 5px; right: -2px; bottom: -2px; }
.pc-body { display: grid; gap: 4px; padding: 52px 16px 16px; }
.pc-name { font-size: 20px; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
.pc-user { font-size: 14px; color: var(--ink-soft); }
.pc-also { font-size: 12.5px; color: var(--ink-muted); }
.pc-cs { margin-top: 6px; padding: 8px 10px; border-radius: var(--radius-m); background: #232428; font-size: 14px; white-space: normal; }
.pc-cs .cs-text { white-space: normal; overflow-wrap: anywhere; }
.pc-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--ink-muted); }
.pc-section { margin-top: 10px; display: grid; gap: 6px; }
.pc-section h4 { margin: 0; font-size: 12px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }
.pc-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-roles .role-chip { padding: 2px 8px; }
.pc-action { margin-top: 12px; width: 100%; }
.pc-nick { justify-self: start; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }

/* menu de status */
.status-menu { width: 260px; }
.sm-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.sm-head .avatar { width: 36px; height: 36px; font-size: 13px; }
.sm-who { display: grid; line-height: 1.2; min-width: 0; }
.sm-who strong { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-who span { font-size: 12px; color: var(--ink-muted); }
.status-item { justify-content: flex-start; gap: 10px; }
.status-item .si-text { display: grid; line-height: 1.25; }
.status-item small { font-size: 12px; color: var(--ink-muted); font-weight: 400; }
.status-item[aria-checked="true"] { background: var(--selected); color: var(--ink); }

/* diálogos de perfil */
.cs-row { display: flex; gap: 8px; }
.cs-emoji-input { width: 52px; text-align: center; font-size: 18px; padding: 8px 4px; }
.cs-row input:last-child { flex: 1; min-width: 0; }
.cs-quick { display: flex; flex-wrap: wrap; gap: 2px; }
.cs-quick .emoji-btn { width: 34px; }
.profile-photo { display: flex; align-items: center; gap: 16px; }
.profile-preview .avatar { width: 88px; height: 88px; font-size: 30px; }
.profile-preview .avatar[data-status]::after { width: 16px; height: 16px; border-width: 5px; --ring: var(--sea-900); }
.profile-photo-actions { display: grid; gap: 6px; justify-items: start; }
.profile-photo-actions .dlg-note { margin: 0; font-size: 12.5px; }

/* ---------- moderação: castigo, banimentos e registro de auditoria ---------- */
.timeout-tag { display: inline-flex; flex: none; color: var(--danger-soft); }
.composer-blocked.timed-out { display: flex; align-items: center; gap: 10px; text-align: left; color: var(--ink); }
.composer-blocked.timed-out > svg { flex: none; color: var(--danger-soft); }
.timeout-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.pc-mod { gap: 2px; }
.pc-mod .menu-item { padding: 6px 8px; }
.pc-timeout { margin: 0 0 4px; display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--danger-soft); }
.mod-choices { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mod-choices legend { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; padding: 0; }
.mod-choice { display: inline-flex; cursor: pointer; }
.mod-choice input { position: absolute; opacity: 0; pointer-events: none; }
.mod-choice span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--sea-700); font-size: 13px; }
.mod-choice input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.mod-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.label-hint { color: var(--ink-soft); font-weight: 400; font-size: 12px; }
#ban-search { width: 100%; margin: 8px 0; }
.ban-reason { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.ban-row .ss-member-name { flex: 1; min-width: 0; }
.audit-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.audit-filters label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.audit-list { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow-y: auto; }
.audit-entry { display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px; border-top: 1px solid var(--sea-700); }
.audit-text { flex: 1; min-width: 0; }
.audit-text p { margin: 0; overflow-wrap: anywhere; }
.audit-details { margin: 4px 0 0; padding-left: 16px; font-size: 13px; color: var(--ink-soft); }
.audit-reason { font-size: 13px; color: var(--ink-soft); margin-top: 4px !important; }
.audit-time { flex: none; font-size: 12px; color: var(--ink-soft); }
#audit-more { margin-top: 8px; }

/* ---------- configurações em tela cheia (servidor e canal) ----------
   Menu de seções à esquerda (fundo da moldura), conteúdo numa coluna de até 740px, e o botão redondo de fechar
   com "ESC" embaixo. Fica abaixo da barra de cima. */
dialog.settings-layer {
  position: fixed; inset: var(--topbar-h) 0 0 0; width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--sea-900); color: var(--ink);
}
dialog.settings-layer[open] { display: flex; animation: settings-in .16s ease-out; }
dialog.settings-layer::backdrop { background: transparent; }
@keyframes settings-in { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.settings-layer[open] { animation: none; } }

.settings-side { flex: 1 0 218px; display: flex; justify-content: flex-end; background: var(--sea-950); overflow-y: auto; }
.settings-side-inner { width: 218px; box-sizing: border-box; padding: 60px 6px 60px 20px; }
.side-header {
  margin: 0; padding: 6px 10px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-group:first-child .side-header { padding-top: 0; }
.side-group + .side-group::before { content: ""; display: block; height: 1px; margin: 8px 10px; background: var(--border-subtle); }
.side-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0 0 2px;
  padding: 6px 10px; border: 0; border-radius: var(--radius-s); background: none; color: var(--ink-muted);
  font: inherit; font-size: 15px; font-weight: 500; line-height: 20px; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-item:hover { background: var(--hover); color: var(--ink-soft); }
.side-item[aria-selected="true"] { background: var(--selected); color: var(--ink); cursor: default; }
.side-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.side-item.danger-item { color: var(--danger-soft); }
.side-item.danger-item:hover { background: rgb(242 63 67 / 10%); color: var(--danger-soft); }

.settings-main { flex: 1 1 800px; display: flex; align-items: flex-start; min-width: 0; overflow-y: auto; }
.settings-content { flex: 1 1 auto; min-width: 0; max-width: 740px; padding: 60px 40px 80px; }
.settings-title { margin: 0 0 20px; font-size: 20px; font-weight: 650; line-height: 24px; }
.settings-tools { position: sticky; top: 0; flex: 0 0 72px; display: flex; flex-direction: column; align-items: center; padding-top: 60px; }
.settings-close {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 2px solid var(--ink-muted); border-radius: 50%;
  background: none; color: var(--ink-muted); cursor: pointer;
}
.settings-close:hover { background: var(--hover); border-color: var(--ink-soft); color: var(--ink); }
.settings-close:hover + .settings-esc { color: var(--ink-soft); }
.settings-close:active { transform: translateY(1px); }
.settings-esc { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }

/* dentro da tela cheia, as listas usam a rolagem da página em vez de caixas com altura fixa */
.settings-layer .pane { min-height: 0; }
.settings-layer .ss-members, .settings-layer .audit-list, .settings-layer .pick-list, .settings-layer .split-list .pick-list { max-height: none; }
.settings-layer .pane.split { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
.settings-layer .dlg-section { padding-bottom: 20px; margin-bottom: 20px; }
.settings-layer .ss-member:first-child, .settings-layer .audit-entry:first-child { border-top: 0; }

@media (max-width: 760px) {
  dialog.settings-layer[open] { flex-direction: column; }
  .settings-side { flex: none; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; }
  .settings-side-inner { width: auto; display: flex; gap: 4px; padding: 10px 56px 10px 12px; }
  .side-group { display: flex; gap: 4px; }
  .side-header, .side-group + .side-group::before { display: none; }
  .side-item { width: auto; margin: 0; }
  .settings-main { flex: 1; }
  .settings-content { padding: 20px 16px 40px; }
  .settings-tools { position: absolute; top: 8px; right: 8px; padding: 0; flex: none; }
  .settings-esc { display: none; }
  .settings-layer .pane.split { grid-template-columns: minmax(0, 1fr); }
}

/* permissões do cargo como interruptores à direita, com o nome em cima e a explicação embaixo */
.settings-layer .perm-row { flex-direction: row-reverse; justify-content: space-between; gap: 16px; padding: 14px 0; border-top-color: var(--line); }
.settings-layer .perm-row strong { font-size: 15px; font-weight: 600; }
.settings-layer .perm-help { font-size: 13.5px; margin-top: 4px; }
.settings-layer .perm-row input[type="checkbox"] {
  appearance: none; flex: none; position: relative; width: 40px; height: 24px; margin: 0; border-radius: 12px;
  background: var(--sea-600); cursor: pointer; transition: background .15s;
}
.settings-layer .perm-row input[type="checkbox"]::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .15s;
}
.settings-layer .perm-row input[type="checkbox"]:checked { background: var(--online); }
.settings-layer .perm-row input[type="checkbox"]:checked::after { transform: translateX(16px); }
.settings-layer .perm-row input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }
.settings-layer .perm-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .settings-layer .perm-row input[type="checkbox"], .settings-layer .perm-row input[type="checkbox"]::after { transition: none; } }
.settings-layer .perm-row.tri-row { flex-direction: row; align-items: center; }

/* ---------- apps: autorizar e lista ---------- */
dialog.authorize { width: min(460px, calc(100vw - 32px)); }
#form-authorize { display: grid; gap: 14px; }
.auth-app { display: flex; align-items: center; gap: 14px; }
.auth-app h2 { margin: 0; }
.auth-app .dlg-note { margin: 2px 0 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.auth-avatar { width: 56px; height: 56px; font-size: 20px; }
.auth-desc { margin: 0; padding: 10px 12px; border-radius: var(--radius-m); background: var(--sea-950); color: var(--ink-soft); font-size: 14px; }
.auth-perms { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 40vh; overflow-y: auto; }
.auth-perms legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-muted); }
.auth-fine { font-size: 12.5px; margin: 0; }
.bot-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pane-subtitle { margin: 4px 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-muted); }
.inline-form .grow { flex: 1; }
.app-row .ss-member-name { flex: 1; min-width: 0; }