/* Visual 2 do Shimo — opt-in em Configurações → Aparência → Visual
   (data-ui="v2" no <html>, persistido em localStorage "viewer.ui"; ver o
   script do <head> em index.html e app.js). Sem o atributo, nada aqui vale e
   o app fica exatamente como o visual clássico.

   Ideia: as três colunas (canais, conversa, membros) viram painéis flutuantes
   sobre um fundo mais fundo, com um brilho ambiente da cor de destaque. O
   acento sai do "preenchimento chapado" e vira luz: estados ativos usam o
   tom suave + uma barrinha, e não blocos inteiros pintados.

   Carrega DEPOIS de styles.css. Tudo prefixado por [data-ui="v2"], que ganha
   das regras base por especificidade. O layout dos painéis só vale em
   desktop — no celular as colunas são drawers (styles.css) e uma margem/raio
   aqui quebraria o off-canvas, por isso a media query abaixo é o inverso
   exato da de "é celular?" usada em styles.css. */

[data-ui="v2"] {
  --bg-0: #08090d;
  --bg-1: #0d0f14;
  --panel: #12141a;
  --panel-soft: #171a21;
  --panel-raised: #1e222b;
  --border: #23272f;
  --hairline: color-mix(in srgb, white 6%, transparent);
  --hairline-strong: color-mix(in srgb, white 10%, transparent);
  --text: #eef0f4;
  --muted: #8f95a3;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-panel: 18px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-2: 0 24px 64px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  --panel-highlight: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-base) 30%, transparent);
}

/* ---- Fundo: brilho ambiente da cor de destaque nos cantos ---- */
[data-ui="v2"] body {
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, color-mix(in srgb, var(--accent-base) 12%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 45% at 100% 100%, color-mix(in srgb, var(--accent-base) 7%, transparent), transparent 70%),
    var(--bg-0);
}

[data-ui="v2"] .shimo-titlebar {
  background: transparent;
  border-bottom-color: transparent;
}

/* ---- Telas de entrada (servidor/login/escolher servidor) ---- */
[data-ui="v2"] .gate {
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent-base) 18%, transparent), transparent 42%);
}

[data-ui="v2"] .gate-card {
  width: min(400px, 92vw);
  padding: 32px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 1px solid var(--hairline-strong);
  border-radius: 24px;
  box-shadow: var(--shadow-2), var(--panel-highlight);
  backdrop-filter: blur(18px) saturate(1.2);
}

[data-ui="v2"] .gate-card h1 {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

[data-ui="v2"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
[data-ui="v2"] select {
  border-radius: var(--radius-sm);
}

/* ---- Painéis flutuantes (só desktop) ---- */
@media (min-width: 901px) and (orientation: portrait), (min-width: 901px) and (min-height: 561px) {
  [data-ui="v2"] .app-shell {
    padding: 10px;
    gap: 0;
  }

  [data-ui="v2"] .sidebar,
  [data-ui="v2"] .main-panel,
  [data-ui="v2"] .member-sidebar {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-1), var(--panel-highlight);
  }

  [data-ui="v2"] .sidebar {
    margin: 0;
    padding: 10px;
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent-base) 6%, transparent), transparent 180px);
  }

  [data-ui="v2"] .main-panel {
    overflow: hidden;
  }

  [data-ui="v2"] .member-sidebar {
    background-image: none;
  }

  /* As alças de redimensionar viram o "respiro" entre os painéis: 10px de
     largura, com um traço fino que só acende no hover/arraste. */
  [data-ui="v2"] .resize-handle {
    flex: 0 0 10px;
    width: 10px;
    position: relative;
    background: transparent;
  }

  [data-ui="v2"] .resize-handle::after {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 4px;
    width: 2px;
    border-radius: 2px;
    background: transparent;
    transition: background-color var(--dur-fast) ease;
  }

  [data-ui="v2"] .resize-handle:hover,
  [data-ui="v2"] .resize-handle.dragging {
    background: transparent;
  }

  [data-ui="v2"] .resize-handle:hover::after,
  [data-ui="v2"] .resize-handle.dragging::after {
    background: var(--accent-strong);
  }

  /* A alça da lista de membros fica display:none — sem ela, falta o respiro
     entre conversa e membros. */
  [data-ui="v2"] .member-sidebar:not(.collapsed) {
    margin-left: 10px;
  }
}

/* ---- Cabeçalho da conversa ---- */
[data-ui="v2"] .main-header {
  min-height: 56px;
  padding: 10px 14px 10px 20px;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, color-mix(in srgb, white 2%, transparent), transparent);
}

[data-ui="v2"] .main-header h1 {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}

[data-ui="v2"] .online-badge {
  border-radius: var(--radius-pill);
}

/* ---- Lista de canais ---- */
[data-ui="v2"] .dm-entry {
  border-radius: var(--radius-sm);
}

[data-ui="v2"] .channel-category-toggle {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 6px 8px 4px;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

[data-ui="v2"] .channel-category-toggle:hover {
  color: var(--text);
}

[data-ui="v2"] .channel-list li button {
  position: relative;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

[data-ui="v2"] .channel-list li button:hover {
  background: color-mix(in srgb, white 4%, transparent);
}

/* Ativo: tom suave do acento + barrinha à esquerda, em vez do bloco cheio. */
[data-ui="v2"] .channel-list li button.active {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent-base) 22%, transparent),
    color-mix(in srgb, var(--accent-base) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-base) 22%, transparent);
  color: var(--text);
}

[data-ui="v2"] .channel-list li button.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent-strong);
  box-shadow: var(--glow-accent);
}

[data-ui="v2"] .channel-list li button.active .channel-hash,
[data-ui="v2"] .channel-list li button.active .icon {
  color: var(--accent-strong);
}

[data-ui="v2"] .channel-alert-badge {
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 2px var(--panel);
}

/* ---- Painel do usuário (rodapé da sidebar) ---- */
[data-ui="v2"] .user-panel {
  gap: 8px;
  padding: 10px;
  background: var(--panel-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--panel-highlight);
}

[data-ui="v2"] .user-panel-share .btn-icon {
  border-radius: var(--radius-sm);
}

[data-ui="v2"] .voice-controls .btn-icon,
[data-ui="v2"] .sidebar-actions .btn-icon {
  border-radius: var(--radius-sm);
}

/* ---- Conversa ---- */
[data-ui="v2"] .chat-log {
  padding: 16px 20px 8px;
}

[data-ui="v2"] .chat-message {
  padding: 4px 10px;
  margin: 0 -10px;
  border-radius: 12px;
}

[data-ui="v2"] .chat-message.is-grouped {
  padding: 0 10px;
  margin-top: -4px;
}

[data-ui="v2"] .chat-message.is-grouped.has-media {
  margin-top: 4px;
}

[data-ui="v2"] .chat-message:not(:first-child):not(.is-grouped) {
  margin-top: 8px;
}

[data-ui="v2"] .chat-message:hover,
[data-ui="v2"] .chat-message:focus-within {
  background: color-mix(in srgb, white 3%, transparent);
}

[data-ui="v2"] .chat-message .author {
  font-weight: 650;
  letter-spacing: -0.005em;
}

[data-ui="v2"] .chat-message .time {
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

[data-ui="v2"] .chat-message-body {
  color: color-mix(in srgb, var(--text) 92%, var(--muted));
}

[data-ui="v2"] .chat-message-toolbar {
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-strong);
  background: var(--panel-raised);
  box-shadow: var(--shadow-1);
}

[data-ui="v2"] .reaction-pill {
  padding: 2px 9px;
  background: color-mix(in srgb, white 4%, transparent);
  border-color: var(--hairline-strong);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

[data-ui="v2"] .reaction-pill:hover {
  border-color: color-mix(in srgb, var(--accent-base) 50%, transparent);
}

[data-ui="v2"] .reaction-pill.reacted {
  background: color-mix(in srgb, var(--accent-base) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent-base) 55%, transparent);
}

[data-ui="v2"] .chat-message.message-alert-for-me {
  box-shadow: inset 3px 0 0 var(--mention);
}

/* ---- Composer: barra flutuante dentro do painel ---- */
[data-ui="v2"] .chat-form {
  border-top: 0;
  padding: 8px 16px 16px;
  padding-bottom: calc(16px + var(--safe-bottom));
  align-items: center;
}

[data-ui="v2"] .chat-input-shell {
  min-height: 46px;
  align-items: center;
  padding: 3px 6px 3px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  background: var(--panel-soft);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

[data-ui="v2"] .chat-input-shell:focus-within {
  border-color: color-mix(in srgb, var(--accent-base) 60%, transparent);
  box-shadow: var(--shadow-1), var(--focus-ring);
}

[data-ui="v2"] .chat-form > .btn,
[data-ui="v2"] .chat-form > button[type="submit"] {
  min-height: 46px;
  border-radius: 16px;
  padding: 0 18px;
  box-shadow: var(--glow-accent);
}

/* ---- Lista de membros ---- */
[data-ui="v2"] .member-sidebar-scroll {
  padding: 16px 12px;
}

[data-ui="v2"] .member-sidebar h2 {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  margin: 2px 8px 10px;
}

[data-ui="v2"] .member-group-heading {
  margin: 16px 8px 6px;
}

[data-ui="v2"] .member-group-heading:first-child {
  margin-top: 0;
}

[data-ui="v2"] .member-group-heading::after {
  background: var(--hairline);
}

[data-ui="v2"] .presence-row {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}

[data-ui="v2"] .presence-row.has-profile:hover {
  background: color-mix(in srgb, white 4%, transparent);
}

/* ---- Botões do kit ---- */
[data-ui="v2"] .btn {
  border-radius: var(--radius-sm);
  border-color: color-mix(in srgb, var(--accent) 70%, white);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 22%, transparent), 0 4px 14px color-mix(in srgb, var(--accent-base) 28%, transparent);
}

[data-ui="v2"] .btn-icon {
  border-radius: var(--radius-sm);
}

[data-ui="v2"] .tag {
  border-radius: var(--radius-pill);
}

/* ---- Modais ---- */
[data-ui="v2"] .modal {
  background: rgba(4, 5, 8, 0.62);
  backdrop-filter: blur(6px);
}

[data-ui="v2"] .modal-card {
  background: var(--panel);
  border: 1px solid var(--hairline-strong);
  border-radius: 22px;
  box-shadow: var(--shadow-2), var(--panel-highlight);
}

[data-ui="v2"] .modal-card h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

[data-ui="v2"] .modal-close-x {
  border-radius: var(--radius-pill);
}

/* Configurações: navegação sem caixa, item ativo em pílula suave. */
[data-ui="v2"] .modal-card.audio-settings-card {
  padding: 28px;
}

[data-ui="v2"] .audio-settings-body {
  gap: 24px;
}

[data-ui="v2"] .audio-settings-nav {
  flex-basis: 168px;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
}

[data-ui="v2"] .audio-settings-nav button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--muted);
  font-size: var(--text-sm);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

[data-ui="v2"] .audio-settings-nav button:hover:not(:disabled),
[data-ui="v2"] .audio-settings-nav button:focus-visible {
  background: color-mix(in srgb, white 5%, transparent);
  color: var(--text);
}

[data-ui="v2"] .audio-settings-nav button.active,
[data-ui="v2"] .audio-settings-nav button.active:hover {
  background: color-mix(in srgb, var(--accent-base) 18%, transparent);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-base) 26%, transparent);
}

[data-ui="v2"] .audio-settings-content {
  padding-left: 24px;
  border-left: 1px solid var(--hairline);
}

/* ---- Scrollbars mais discretas ---- */
[data-ui="v2"] .chat-log,
[data-ui="v2"] .sidebar-scroll,
[data-ui="v2"] .member-sidebar-scroll {
  scrollbar-color: color-mix(in srgb, white 10%, transparent) transparent;
}