/*
  OCTOPUS — REPAGINAÇÃO V2 (2026-10-04, pedido do dono: "É preciso repaginar todo o visual do Octopus.
  Existem erros de ux, de design, é preciso revisar o design de forma ampla").

  Carregado DEPOIS do <style> do index.html: sobrescreve sem cirurgia nas ~2.500 linhas de CSS embutido,
  e tirar este <link> volta ao visual anterior. O que a revisão de 04/10 (fotografada em HML) achou e este
  arquivo ataca, em ordem de peso:
   1. Identidade dividida: sobras de "HUD de ficção científica" (reator no login, grade de fundo, brilho no
      texto, marca em monoespaçada espaçada, linha luminosa sob o cabeçalho). Tudo isso sai.
   2. Hierarquia: neutros muito azuis e saturados, tudo com sombra e borda. Agora os neutros são grafite com
      leve viés azul, o acento (ciano) fica só no que é interativo, e a elevação é usada com parcimônia.
   3. Leitura do chat: a resposta do Octopus era uma bolha como a do dono. A resposta passa a ser texto
      corrido, numa largura de leitura; a fala do dono continua em bolha, discreta.
   4. Ruído na lista de conversas: 🏷️ e 🗑️ em toda linha. Agora aparecem ao passar o mouse (no toque, ficam).
   5. Configurações: dez abas quebrando em duas linhas, botão-gradiente para ação menor, select vazando
      do cartão. Abas numa linha só que rola, botão de destaque só no Salvar, campo nunca maior que o cartão.

  Os tokens mantêm os NOMES do :root original (eles estão em centenas de regras): mudar o valor aqui
  repagina o sistema inteiro de uma vez.
*/

:root {
  --bg-color: #0c1118;
  --bg-deep: #080c12;
  --panel-bg: #121922;
  --panel-bg-2: #18212c;
  --border-soft: rgba(205, 220, 240, 0.08);
  --border-strong: rgba(205, 220, 240, 0.16);
  --border-glow: #38bdf8;
  --text-glow: #7dd3fc;
  --text-1: #e7edf4;
  --text-2: #a9b6c6;
  --text-3: #7f8da0;
  --glass-bg: rgba(18, 25, 34, 0.96);
  --glass-border: rgba(205, 220, 240, 0.10);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .45);
  --glow-acc: 0 0 0 2px rgba(56, 189, 248, .35);
  --grad-acc: linear-gradient(180deg, #3cc1fa 0%, #2aa9e6 100%);
  --grad-acc-soft: rgba(56, 189, 248, .10);
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --leitura: 72ch;
}

body {
  background: var(--bg-color);
  background-image: none;
  font-size: 14px;
}

/* ---------- Login: sem reator, sem grade, sem terminal ---------- */
#login-screen {
  background: radial-gradient(900px 500px at 50% 0%, rgba(56, 189, 248, .07), transparent 70%), var(--bg-deep);
  background-size: auto;
}
#login-screen .reactor-container { display: none; }
#login-screen .login-card { width: min(380px, calc(100vw - 32px)); padding: 32px 28px; gap: 18px; }
#login-screen .login-card::before, #login-screen .login-card::after { display: none; }
#login-screen .login-card h2 {
  font-family: var(--font-sans); font-size: 22px; font-weight: 650; letter-spacing: 0;
  text-transform: none; text-shadow: none; color: var(--text-1);
}
#login-screen label { font-size: 13px; color: var(--text-2); letter-spacing: 0; text-transform: none; font-family: var(--font-sans); }
.login-terminal {
  min-height: 20px; max-height: none; height: auto; padding: 0; border: 0; background: none;
  font-family: var(--font-sans); font-size: 13px; color: var(--text-2); overflow: visible;
}
.login-terminal.err { color: #fca5a5; }

/* ---------- Campos e botões ---------- */
.login-input, .settings-field input, .settings-field select, select.login-input {
  font-family: var(--font-sans);
  background: #0e141c;
  border: 1px solid var(--border-strong);
  max-width: 100%;
  min-width: 0;
}
.login-input:focus { border-color: var(--border-glow); box-shadow: var(--glow-acc); }
.login-btn { box-shadow: none; text-shadow: none; letter-spacing: 0; font-weight: 600; }
.login-btn:hover { transform: none; filter: brightness(1.06); }
.login-btn.secondary { background: transparent; }

/* ---------- Cabeçalho: marca simples, sem linha luminosa ---------- */
header {
  background: var(--bg-color);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: none;
  padding: 10px 20px;
}
header::after { display: none; }
header h1 {
  font-family: var(--font-sans); font-size: 16px; font-weight: 650; letter-spacing: .2px;
  text-shadow: none; text-transform: none;
}
header h1 .marca-sub { display: none; }
.system-time { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); text-shadow: none; }

/* ---------- Painéis: chapados, uma borda, sem brilho ---------- */
.hud-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border-soft);
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hud-panel::before, .hud-panel::after { display: none; }

/* ---------- Chat: a resposta é texto para ler; a fala do dono é bolha ---------- */
.message { font-size: 15px; line-height: 1.6; }
.message.assistant {
  max-width: var(--leitura);
  background: none; border: 0; box-shadow: none;
  padding: 4px 2px;
  color: var(--text-1);
}
.message.user {
  max-width: min(var(--leitura), 78%);
  background: #1d2a3a;
  border: 1px solid var(--border-soft);
  box-shadow: none;
}
.message pre, .message code { background: #0e141c; border: 1px solid var(--border-soft); border-radius: 6px; }
.message code { padding: 1px 5px; }
.message pre { padding: 10px 12px; }
.message pre code { border: 0; padding: 0; background: none; }

.composer { background: #0e141c; border: 1px solid var(--border-strong); box-shadow: none; }
.composer:focus-within { box-shadow: var(--glow-acc); }

/* ---------- Lista de conversas: ações só ao passar o mouse (no toque, sempre) ---------- */
.conversation-item.active { background: rgba(56, 189, 248, .10); border-color: transparent; }
.conversation-item.active::before { box-shadow: none; }
.conversation-item:hover { background: rgba(205, 220, 240, .06); }
@media (hover: hover) {
  .conversa-linha .tree-btn { opacity: 0; transition: opacity var(--dur) var(--ease); }
  .conversa-linha:hover .tree-btn, .conversa-linha:focus-within .tree-btn { opacity: .75; }
  .conversa-linha .tree-btn:hover, .conversa-linha .tree-btn:focus-visible { opacity: 1; }
}

/* ---------- Configurações: abas numa linha só, cartão mais largo ---------- */
#settings-modal > .login-card { width: min(760px, 94vw) !important; }
#settings-tabs {
  /* O cartão é coluna flex com altura limitada: sem isto a fileira de abas encolhia a poucos pixels. */
  flex-shrink: 0;
  min-height: 52px;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: thin;
  gap: 4px !important;
}
.settings-tab-btn { flex: none; white-space: nowrap; box-shadow: none; }
.settings-tab-btn.active { background: rgba(56, 189, 248, .12); border-color: rgba(56, 189, 248, .45); color: var(--text-1); box-shadow: none; }
/* Botão de destaque só para Salvar: o resto das ações dentro das abas é secundário. */
.settings-tab-panel .login-btn:not(.secondary) {
  background: transparent; color: var(--text-1); border: 1px solid var(--border-strong);
}
.settings-tab-panel .login-btn:not(.secondary):hover { border-color: var(--border-glow); background: rgba(56, 189, 248, .06); filter: none; }
.settings-tab-panel select, .settings-tab-panel input:not([type="checkbox"]):not([type="radio"]) { max-width: 100%; min-width: 0; }
.settings-tab-panel div[style*="display:flex"] > select { min-width: 0; }

/* ---------- Cérebro: título em caixa normal ---------- */
.ck-header__titulo { letter-spacing: 0; font-size: var(--fs-lg); }

.ck-dec__falhas { margin-top: 12px; }
.ck-dec__falhas summary { cursor: pointer; padding: 6px 0; }

/* ---------- Avisos (central de 04/10) no mesmo sistema ---------- */
#avisos-painel { background: var(--panel-bg) !important; border-color: var(--border-strong) !important; }

@media (max-width: 600px) {
  header { padding: 8px 12px; }
  .message.user { max-width: 88%; }
}