:root {
  --bg: #0b0f14;
  --panel: #12171f;
  --panel-2: #1a212b;
  --panel-3: #212a35;
  --border: #262f3b;
  --text: #e3e8ef;
  --text-dim: #8894a3;
  --text-faint: #5c6773;
  --amber: #f0b429;
  --amber-soft: rgba(240, 180, 41, 0.14);
  --red: #ef5a52;
  --red-soft: rgba(239, 90, 82, 0.14);
  --blue: #4d9de0;
  --blue-soft: rgba(77, 157, 224, 0.14);
  --green: #4fbf7a;
  --violet: #8b5cf6;
  --violet-soft: rgba(139, 92, 246, 0.14);
  --shadow: 0 8px 24px rgba(0,0,0,0.35);
  --radius: 10px;
}

/* tema grafite claro - mesma paleta de cores de destaque (amber/red/blue/green/violet),
   so troca fundo/texto pra um contraste melhor em ambientes bem iluminados */
:root[data-theme="light"] {
  --bg: #eceef1;
  --panel: #f7f8fa;
  --panel-2: #ffffff;
  --panel-3: #e7e9ed;
  --border: #d6dae0;
  --text: #1c2127;
  --text-dim: #545c67;
  --text-faint: #767f8a;
  --shadow: 0 8px 24px rgba(20,24,30,0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #2c3644; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #c3c9d1; }

code {
  font-family: "Cascadia Code", "Consolas", monospace;
  background: var(--panel-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-dim);
}

/* ---------- gate ---------- */
#gate {
  height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(240,180,41,0.06), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(77,157,224,0.06), transparent 40%),
    var(--bg);
}
.gate-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px;
  width: 320px;
  text-align: center;
  box-shadow: var(--shadow);
}
.gate-logo {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--amber-soft); color: var(--amber);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
#gate h1 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -0.2px; }
#gate p { color: var(--text-dim); font-size: 13px; margin: 0 0 22px; }
#gate-form { display: flex; flex-direction: column; gap: 10px; }
#gate-input {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 11px 14px; border-radius: 8px; font-size: 14px; text-align: center;
  letter-spacing: 3px; transition: border-color .15s;
}
#gate-input:focus { outline: none; border-color: var(--amber); }
#gate-error { color: var(--red); font-size: 12.5px; height: 16px; margin-top: 12px; }

.btn, #gate-btn {
  background: var(--amber); color: #241a00; border: none; padding: 11px 18px;
  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 13px;
  transition: background .15s, transform .05s;
}
.btn:hover, #gate-btn:hover { background: #ffc857; }
.btn:active, #gate-btn:active { transform: scale(0.98); }

/* ---------- layout ---------- */
#app { display: none; height: 100vh; }
#app.visible { display: flex; }

#sidebar {
  width: 340px; min-width: 340px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 18px 16px; overflow: hidden;
  background: var(--panel);
}

.brand-row { display: flex; align-items: center; justify-content: space-between; }
.brand { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; color: var(--text); }
.brand svg { color: var(--amber); flex-shrink: 0; }
.brand-actions { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; padding: 0; transition: all .12s;
}
.icon-btn:hover { border-color: var(--amber); color: var(--amber); }
.icon-btn.active { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }

.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(79,191,122,0.15);
}
.status-dot.offline { background: var(--red); box-shadow: 0 0 0 3px rgba(239,90,82,0.15); }

.sub { font-size: 11.5px; color: var(--text-faint); margin: 6px 0 16px; }

.stream-header {
  display: flex; justify-content: space-between; align-items: center; font-size: 11px;
  text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint); padding: 4px 2px 10px;
}
.header-actions { display: flex; align-items: center; gap: 8px; }
.count-pill {
  background: var(--panel-3); color: var(--text-dim); border-radius: 20px;
  padding: 1px 8px; font-size: 10.5px; font-weight: 600;
}

.company-select {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 10px; border-radius: 8px; font-size: 12.5px; margin-bottom: 10px; outline: none;
}
.company-select:focus { border-color: var(--amber); }

.model-select {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim);
  padding: 6px 8px; border-radius: 8px; font-size: 11px; margin-bottom: 6px; outline: none;
}
.model-select:focus { border-color: var(--amber); }

.model-active-label {
  font-size: 10.5px; color: var(--text-faint); margin: -3px 0 6px 2px;
}
.model-active-label:empty { display: none; }

.model-switch-banner {
  display: flex; align-items: flex-start; gap: 6px; font-size: 11px; line-height: 1.4;
  background: var(--panel-3); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 8px; margin-bottom: 6px; color: var(--text-dim);
}
.model-switch-banner-text { flex: 1; }
.model-switch-banner-close {
  background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 0 2px;
  font-size: 13px; line-height: 1;
}
.model-switch-banner-close:hover { color: var(--text); }

.drive-status-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 11.5px; color: var(--text-dim);
}
.drive-status-row .btn { padding: 4px 10px; font-size: 11px; margin-left: auto; }

#gemini-usage-row { margin-bottom: 14px; }
#gemini-usage-text.usage-ok { color: var(--text-dim); }
#gemini-usage-text.usage-warn { color: var(--amber); font-weight: 600; }
#gemini-usage-text.usage-critical { color: var(--red); font-weight: 700; }

#diagnosis-model-row .btn-link { margin-left: auto; }
#openrouter-credit-row { margin-bottom: 14px; }
#openrouter-credit-text.usage-ok { color: var(--text-dim); }
#openrouter-credit-text.usage-warn { color: var(--amber); font-weight: 600; }
#openrouter-credit-text.usage-critical { color: var(--red); font-weight: 700; }

#model-switch-toast-container {
  position: fixed; top: 14px; left: 14px; z-index: 500;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.model-switch-toast {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 12px; border-radius: 8px; font-size: 11.5px; box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  opacity: 0; transform: translateY(-6px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.model-switch-toast.visible { opacity: 1; transform: translateY(0); }

/* ---------- tutorial guiado (fundo desfocado + seta animada) ---------- */
#tour-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(10,14,20,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: clip-path 0.3s ease; pointer-events: none;
}
:root[data-theme="light"] #tour-overlay { background: rgba(40,44,50,0.35); }
#tour-tooltip {
  position: fixed; z-index: 901; width: 300px; max-width: calc(100vw - 24px);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); transition: top 0.3s ease, left 0.3s ease;
}
#tour-tooltip-title { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; color: var(--amber); }
#tour-tooltip-text { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
#tour-tooltip-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 8px; }
#tour-step-count { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
#tour-tooltip-actions { display: flex; gap: 6px; align-items: center; }
#tour-tooltip-actions .btn { padding: 6px 12px; font-size: 12px; }
#tour-arrow {
  position: fixed; z-index: 901; color: var(--amber); pointer-events: none;
  transition: top 0.3s ease, left 0.3s ease; animation: tour-bounce 1.1s ease-in-out infinite;
}
#tour-arrow.tour-arrow-up { animation: tour-bounce-up 1.1s ease-in-out infinite; }
@keyframes tour-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes tour-bounce-up {
  0%, 100% { transform: translateY(0) rotate(180deg); }
  50% { transform: translateY(8px) rotate(180deg); }
}

#date-range {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 12px; background: var(--panel-2); overflow: hidden;
}
#date-range summary {
  padding: 9px 12px; font-size: 12px; color: var(--text-dim); cursor: pointer;
  list-style: none; user-select: none;
}
#date-range summary::-webkit-details-marker { display: none; }
#date-range summary::before { content: "▸ "; color: var(--text-faint); }
#date-range[open] summary::before { content: "▾ "; }
#date-range[open] summary { border-bottom: 1px solid var(--border); }
.dropzone-body { padding: 10px; }
#paste-log-input {
  width: 100%; min-height: 70px; resize: vertical; background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px; padding: 8px; box-sizing: border-box;
  color: var(--text); font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; outline: none;
}
#paste-log-input:focus { border-color: var(--amber); }
#paste-log-panel .btn { margin-top: 8px; }
.date-range-body label { font-size: 11px; color: var(--text-faint); display: block; margin: 6px 0 4px; }
.date-time-row { display: flex; gap: 6px; }
.date-time-row input {
  flex: 1; background: var(--panel); border: 1px solid var(--border); color: var(--text);
  padding: 6px 8px; border-radius: 6px; font-size: 12px; outline: none; min-width: 0;
  color-scheme: dark;
}
.date-time-row input:focus { border-color: var(--amber); }
.date-range-actions { display: flex; gap: 8px; margin-top: 10px; }
.date-range-actions .btn { flex: 1; padding: 8px; font-size: 12px; }
.btn-ghost {
  background: transparent !important; border: 1px solid var(--border); color: var(--text-dim) !important;
}

/* estilo compartilhado por TODO painel recolhivel da barra lateral (backup, padroes
   recorrentes, periodo exato, uso das IAs, visao geral, colar log) - existia antes so
   com regras duplicadas por #id (backup-panel/patterns-panel/date-range), o que deixava
   qualquer painel novo (ex: uso das IAs) com a aparencia padrao do navegador em vez de
   bater com o resto. Rola sozinho se o conteudo passar de 320px, em vez de vazar pra
   fora escondido sem like nenhuma barra de rolagem */
.collapsible-panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 12px; background: var(--panel-2); overflow: hidden;
}
.collapsible-panel > summary {
  padding: 9px 12px; font-size: 12px; color: var(--text-dim); cursor: pointer;
  list-style: none; user-select: none;
}
.collapsible-panel > summary::-webkit-details-marker { display: none; }
.collapsible-panel > summary::before { content: "▸ "; color: var(--text-faint); }
.collapsible-panel[open] > summary::before { content: "▾ "; }
.collapsible-panel[open] > summary { border-bottom: 1px solid var(--border); }
.collapsible-panel > .dropzone-body { max-height: 340px; overflow-y: auto; }
/* o painel de backup tem mais campo de formulario fixo (caminho, checkboxes, intervalo,
   botoes, progresso) antes mesmo de chegar no historico - com o teto padrao de 340px o
   historico ficava quase todo cortado, com so uma fresta de rolagem quase imperceptivel */
#backup-panel > .dropzone-body { max-height: 520px; }

.advanced-section-header {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint);
  margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--border);
}

/* ---------- botao de info (i) - explica cada funcao do painel ao passar o mouse (desktop)
   ou ao tocar/clicar (celular, onde nao existe hover de verdade) ---------- */
.info-wrap { position: relative; display: inline-flex; vertical-align: middle; margin-left: 5px; }
.info-btn {
  position: relative; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--text-faint); background: transparent; color: var(--text-faint);
  font-size: 9.5px; font-style: italic; font-family: Georgia, "Times New Roman", serif;
  line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center;
  justify-content: center; transition: all .12s;
}
/* a bolinha visivel continua pequena (nao poluir o layout), mas a area que realmente
   responde ao toque fica bem maior - 14px e preciso demais pra acertar com o dedo de
   verdade num celular */
.info-btn::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px;
}
.info-btn:hover, .info-btn.active { border-color: var(--amber); color: var(--amber); }
/* position:fixed (nao absolute) de proposito: varios paineis (Uso das IAs, Visao geral
   etc) tem overflow:hidden pros cantos arredondados, e um tooltip position:absolute
   dentro deles ficava cortado pelo proprio painel fechado. fixed escapa de qualquer
   overflow:hidden ancestral - a posicao (top/left) e calculada em JS na hora de mostrar
   (ver positionInfoTooltip em app.js), ja considerando a borda da tela pra nunca vazar
   pra fora horizontalmente (o bug do "Periodo rapido" cortando na lateral) */
.info-tooltip {
  display: none; position: fixed; z-index: 150;
  width: 230px; max-width: calc(100vw - 16px); background: var(--panel-3); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 11px; font-size: 11.5px; line-height: 1.5;
  color: var(--text-dim); box-shadow: var(--shadow); font-weight: 400; text-transform: none;
  letter-spacing: normal; white-space: normal; cursor: default;
}
/* dentro de <summary> o cursor vira "pointer" pra abrir/fechar o painel - sem isso o
   clique no botaozinho de info tambem recolhia/abria o <details> junto */
summary .info-wrap { cursor: default; }
.info-wrap:hover .info-tooltip, .info-tooltip.visible { display: block; }
@media (hover: none) {
  /* em touch puro (sem mouse de verdade) so mostra no toque, nunca "preso" num hover
     fantasma que alguns navegadores mobile simulam no primeiro toque */
  .info-wrap:hover .info-tooltip { display: none; }
  .info-tooltip.visible { display: block; }
}
.advanced-section-header:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.health-score-bar {
  display: inline-block; width: 50px; height: 6px; border-radius: 3px; background: var(--panel);
  overflow: hidden; vertical-align: middle; margin-right: 6px;
}
.health-score-bar-fill { height: 100%; border-radius: 3px; }
.incident-entry {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 11.5px;
}
.incident-entry:last-child { border-bottom: none; }

#backup-panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 12px; background: var(--panel-2); overflow: hidden;
}
#backup-panel summary {
  padding: 9px 12px; font-size: 12px; color: var(--text-dim); cursor: pointer;
  list-style: none; user-select: none;
}
#backup-panel summary::-webkit-details-marker { display: none; }
#backup-panel summary::before { content: "▸ "; color: var(--text-faint); }
#backup-panel[open] summary::before { content: "▾ "; }
#backup-panel[open] summary { border-bottom: 1px solid var(--border); }
.backup-check {
  display: flex !important; align-items: center; gap: 8px; font-size: 12.5px !important;
  color: var(--text) !important; margin: 0 0 10px !important; cursor: pointer;
}
.backup-check input { width: 15px; height: 15px; accent-color: var(--amber); }
.backup-label { font-size: 11px; color: var(--text-faint); flex: none !important; display: flex; align-items: center; white-space: nowrap; }
#backup-interval { max-width: 55px; flex: none !important; }
#backup-last-info { margin: 10px 0 0; }
.backup-log-header {
  display: flex; align-items: center; justify-content: space-between; margin-top: 12px;
}
.backup-log-header-actions { display: flex; gap: 10px; }
.btn-link {
  background: transparent; border: none; color: var(--text-faint); font-size: 11px;
  cursor: pointer; padding: 0; text-decoration: underline;
}
.btn-link:hover { color: var(--red); }
#backup-log { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; }
.backup-log-entry {
  font-size: 11px; padding: 6px 8px; border-radius: 6px; background: var(--panel);
  border: 1px solid var(--border); display: flex; justify-content: space-between; gap: 8px;
}
.backup-log-entry.falha { border-color: var(--red); color: var(--red); }
.backup-log-entry.sucesso { color: var(--text-dim); }
.backup-log-entry.expirado { color: var(--text-faint); opacity: .65; }
.backup-log-entry a { color: var(--amber); text-decoration: none; white-space: nowrap; }
.backup-log-entry a:hover { text-decoration: underline; }

.backup-dbpath-row { margin-bottom: 12px; }
.backup-dbpath-row .backup-label { margin-bottom: 4px; }
#backup-dbpath-input {
  width: 100%; box-sizing: border-box; background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 7px 9px; font-size: 12px; color: var(--text); margin-bottom: 6px;
}
#backup-dbpath-input:focus { border-color: var(--amber); outline: none; }
#backup-dbpath-detected { margin: 0 0 8px; }
#backup-client-info { margin: 0 0 10px; }
.backup-gate-warning { color: var(--red); margin: 8px 0 0; }
.version-outdated { color: var(--red); font-weight: 600; }
.version-uptodate { color: var(--green); font-weight: 600; }

#patterns-panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 12px; background: var(--panel-2); overflow: hidden;
}
#patterns-panel summary {
  padding: 9px 12px; font-size: 12px; color: var(--text-dim); cursor: pointer;
  list-style: none; user-select: none;
}
#patterns-panel summary::-webkit-details-marker { display: none; }
#patterns-panel summary::before { content: "▸ "; color: var(--text-faint); }
#patterns-panel[open] summary::before { content: "▾ "; }
#patterns-panel[open] summary { border-bottom: 1px solid var(--border); }
.pattern-entry {
  font-size: 11px; padding: 6px 8px; border-radius: 6px; background: var(--panel);
  border: 1px solid var(--border); margin-bottom: 6px;
}
.pattern-entry .pattern-count { color: var(--amber); font-weight: 600; }
.pattern-entry .pattern-msg { color: var(--text-dim); display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* diferente de .pattern-msg (resumo de uma linha, usado nos outros paineis) - a base de
   conhecimento precisa ser lida por completo, entao nunca corta com "...", so quebra linha */
.pattern-entry .kb-msg { color: var(--text-dim); display: block; margin-top: 2px; white-space: normal; word-break: break-word; }
.pattern-entry .kb-diagnosis {
  color: var(--text); display: block; margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--border); white-space: pre-wrap; word-break: break-word; font-size: 11px; line-height: 1.5;
}

#backup-progress-box { margin: 10px 0; }
.backup-progress-track {
  width: 100%; height: 7px; border-radius: 4px; background: var(--panel-3); overflow: hidden;
}
.backup-progress-bar {
  height: 100%; background: var(--amber); border-radius: 4px; width: 0%;
  transition: width .3s ease;
}
.backup-progress-bar.indeterminate {
  width: 40% !important; animation: backupIndeterminate 1.3s ease-in-out infinite;
}
@keyframes backupIndeterminate {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}
.backup-progress-label {
  font-size: 11px; color: var(--text-dim); margin-top: 6px; display: flex; justify-content: space-between;
}
.btn-ghost:hover { border-color: var(--text-faint); background: var(--panel-3) !important; }

.filter-row { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.filter-chip {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-size: 11px; padding: 4px 10px; border-radius: 20px; cursor: pointer;
  transition: all .12s;
}
.filter-chip:hover { border-color: var(--text-faint); color: var(--text); }
.filter-chip.active { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }

#event-list { flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
#event-list:empty::after {
  content: "Nenhum evento ainda."; display: block; text-align: center;
  color: var(--text-faint); font-size: 12px; padding: 24px 0;
}
.event-row {
  padding: 10px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
  margin-bottom: 3px; border: 1px solid transparent; transition: background .1s;
}
.event-row:hover { background: var(--panel-2); }
.event-row.selected { background: var(--panel-3); border-color: var(--border); }
.event-row.new { animation: rowIn .35s ease; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.event-row .top { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.event-row .company-tag { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .3px; }
.event-row .msg { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-row .time { font-size: 10.5px; color: var(--text-faint); margin-left: auto; }

.badge {
  font-size: 10px; text-transform: uppercase; padding: 3px 7px; border-radius: 5px;
  font-weight: 700; letter-spacing: .3px; flex-shrink: 0;
}
.badge.Error, .badge.Fatal { background: var(--red-soft); color: var(--red); }
.badge.Warning { background: var(--amber-soft); color: var(--amber); }
.badge.Information { background: var(--blue-soft); color: var(--blue); }
.badge.Debug, .badge.Verbose { background: rgba(136,148,163,0.14); color: var(--text-dim); }

/* severidade real de negocio (segundo a IA), diferente do nivel bruto do log */
.severity-badge {
  font-size: 10px; text-transform: uppercase; padding: 3px 7px; border-radius: 5px;
  font-weight: 700; letter-spacing: .3px; flex-shrink: 0; display: inline-flex; align-items: center;
}
.severity-badge.sev-critico { background: var(--red-soft); color: var(--red); }
.severity-badge.sev-alto { background: var(--amber-soft); color: var(--amber); }
.severity-badge.sev-médio, .severity-badge.sev-medio { background: var(--blue-soft); color: var(--blue); }
.severity-badge.sev-baixo { background: rgba(136,148,163,0.14); color: var(--text-dim); }

.event-group { margin-bottom: 3px; }
.event-group .event-row { margin-bottom: 0; }
.count-badge {
  font-size: 10px; font-weight: 700; color: var(--violet); background: var(--violet-soft);
  padding: 2px 6px; border-radius: 999px; flex-shrink: 0;
}
.group-toggle {
  background: transparent; border: none; color: var(--text-faint); font-size: 10.5px;
  cursor: pointer; padding: 3px 10px 5px; text-align: left; width: 100%;
}
.group-toggle:hover { color: var(--amber); }
.event-group-sub { padding-left: 14px; border-left: 1px dashed var(--border); margin: 0 0 4px 12px; }
.event-group-sub .sub-row {
  padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 11px;
  color: var(--text-faint); border: 1px solid transparent;
}
.event-group-sub .sub-row:hover { background: var(--panel-2); }
.event-group-sub .sub-row.selected { background: var(--panel-3); border-color: var(--border); color: var(--text-dim); }
.badge.company { background: var(--panel-3); color: var(--text); text-transform: none; }

/* ---------- detail ---------- */
#detail { flex: 1; display: flex; flex-direction: column; padding: 24px 32px; overflow: hidden; }
#empty-state {
  color: var(--text-faint); font-size: 13px; margin: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
#event-detail { display: flex; flex-direction: column; height: 100%; }
#detail-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#detail-source { font-size: 12px; color: var(--text-dim); }
#detail-time { font-size: 12px; color: var(--text-faint); margin-left: auto; }
#detail-message {
  font-size: 15.5px; margin-bottom: 12px; line-height: 1.5; font-weight: 500;
  max-height: 180px; overflow-y: auto; overflow-wrap: break-word; word-break: break-word;
  padding-right: 4px;
}

#exception-wrap {
  border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px;
  background: var(--panel); overflow: hidden;
}
#exception-wrap summary {
  padding: 8px 12px; font-size: 12px; color: var(--text-dim); cursor: pointer; list-style: none;
  user-select: none;
}
#exception-wrap summary::-webkit-details-marker { display: none; }
#exception-wrap summary::before { content: "▸ "; color: var(--text-faint); }
#exception-wrap[open] summary::before { content: "▾ "; }
#exception-wrap[open] summary { border-bottom: 1px solid var(--border); }
#detail-exception {
  padding: 12px; margin: 0; font-size: 12px; white-space: pre-wrap;
  max-height: 220px; overflow-y: auto; color: var(--text-dim);
  font-family: "Cascadia Code", Consolas, monospace;
}

#chat {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  padding: 8px 2px 16px; border-top: 1px solid var(--border);
}
#chat:empty::after {
  content: "Sem conversa ainda."; color: var(--text-faint); font-size: 12.5px;
  display: block; text-align: center; margin-top: 20px;
}
.msg {
  max-width: 88%; padding: 11px 15px; border-radius: 12px; font-size: 13.5px;
  line-height: 1.6; white-space: pre-wrap; box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.msg.agent { background: var(--panel-2); align-self: flex-start; border: 1px solid var(--border); border-left: 3px solid var(--amber); }
.msg.user { background: var(--blue-soft); align-self: flex-end; color: var(--text); }
.msg .role {
  display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-faint); margin-bottom: 5px; font-weight: 700;
}
/* data/hora de cada mensagem (pedido do Rafael pra saber quando cada coisa foi dita, nao
   so a ordem) - herdaria uppercase/negrito do .role sem essas duas linhas */
.msg .msg-time { text-transform: none; font-weight: 400; letter-spacing: normal; }

#composer { display: flex; gap: 8px; padding-top: 12px; }
#composer input {
  flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 11px 15px; border-radius: 8px; font-size: 13.5px; transition: border-color .15s;
}
#composer input:focus { outline: none; border-color: var(--amber); }
#composer button {
  background: var(--amber); color: #241a00; border: none; border-radius: 8px; padding: 0 18px;
  font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
#composer button:hover { background: #ffc857; }

/* ---------- chat geral flutuante ---------- */
#general-chat-toggle { display: none; }
#general-chat-toggle.visible {
  position: fixed; bottom: 22px; right: 22px; z-index: 90;
  background: var(--amber); color: #241a00; border: none; border-radius: 999px;
  padding: 12px 20px; font-weight: 600; font-size: 13px; cursor: pointer;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px;
  transition: transform .12s, background .15s;
}
#general-chat-toggle:hover { background: #ffc857; transform: translateY(-1px); }
.general-chat-toggle-icon { display: none; }

/* quando um evento esta selecionado, o botao e movido (via JS) pra dentro do
   #detail-header, igual ao botao de ignorar - vira um icone fixo que ocupa espaco
   reservado na linha, em vez de flutuar por cima do texto do evento (flutuando, nao tinha
   como garantir que nunca ia cobrir conteudo, ja que o tamanho da mensagem varia) */
/* seletor com #detail-header como ancestral (nao so ".in-header") de proposito - da mais
   especificidade que a regra mobile "#general-chat-toggle.visible" mais abaixo no arquivo,
   senao empatariam e a ordem no arquivo decidiria (fragil) */
#detail-header #general-chat-toggle.in-header {
  position: static; width: 24px; height: 24px; padding: 0; border-radius: 6px;
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  box-shadow: none; flex-shrink: 0;
}
#detail-header #general-chat-toggle.in-header:hover { background: transparent; border-color: var(--amber); color: var(--amber); transform: none; }
#detail-header #general-chat-toggle.in-header .pulse-dot,
#detail-header #general-chat-toggle.in-header .general-chat-toggle-text { display: none; }
#detail-header #general-chat-toggle.in-header .general-chat-toggle-icon { display: block; width: 13px; height: 13px; }

.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: pulse 1.4s ease-in-out infinite; flex-shrink: 0;
}
@keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

#general-chat-panel {
  position: fixed; bottom: 22px; right: 22px; z-index: 95;
  width: 340px; height: 460px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column;
  overflow: hidden;
  /* redimensionavel puxando o canto - como o painel fica ancorado no canto inferior
     direito (bottom/right fixos), crescer largura/altura empurra o painel pra cima e pra
     esquerda, exatamente o que da mais espaco de leitura sem sair da tela. Pedido do
     Rafael: a tela pequena obrigava a copiar a resposta da IA pra um .txt so pra ler tudo */
  resize: both; min-width: 300px; min-height: 320px; max-width: min(90vw, 720px); max-height: 85vh;
}
#general-chat-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px;
}
#general-chat-close {
  background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px;
}
#general-chat-close:hover { color: var(--text); }
#general-chat {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 12px;
}
#general-chat:empty::after {
  content: "Pergunte qualquer coisa sobre o sistema ou sobre debugging."; color: var(--text-faint);
  font-size: 12.5px; display: block; text-align: center; margin-top: 20px;
}
#general-composer { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
#general-composer input {
  flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 12px; border-radius: 8px; font-size: 13px; outline: none;
}
#general-composer input:focus { border-color: var(--amber); }
#general-composer button {
  background: var(--amber); color: #241a00; border: none; border-radius: 8px; padding: 0 14px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* ---------- Modo Agente (function-calling) - mesma estrutura do chat geral, com um
   acento roxo pra ficar visualmente distinto (tem acesso a acoes reais, nao so conversa) */
#agent-mode-btn { color: var(--violet); border-color: var(--violet); }
#agent-mode-btn:hover { background: var(--violet-soft); }

#agent-unlock-panel {
  position: fixed; bottom: 22px; right: 22px; z-index: 96;
  width: 300px; background: var(--panel); border: 1px solid var(--violet);
  border-radius: 14px; box-shadow: var(--shadow); padding: 14px;
}
#agent-unlock-header {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--violet);
}
#agent-unlock-close { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; }
#agent-unlock-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
#agent-unlock-input {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 12px; border-radius: 8px; font-size: 13px; outline: none;
}
#agent-unlock-input:focus { border-color: var(--violet); }

#agent-chat-panel {
  position: fixed; bottom: 22px; right: 22px; z-index: 95;
  width: 340px; height: 460px; background: var(--panel); border: 1px solid var(--violet);
  border-radius: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column;
  overflow: hidden;
  resize: both; min-width: 300px; min-height: 320px; max-width: min(90vw, 720px); max-height: 85vh;
}
#agent-chat-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px;
  color: var(--violet);
}
.agent-chat-header-actions { display: flex; align-items: center; gap: 10px; }
#agent-pause-btn { color: var(--text-faint); }
#agent-chat-close { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; }
#agent-chat-close:hover { color: var(--text); }
#agent-chat {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 12px;
}
#agent-chat:empty::after {
  content: "Peça pra ver o status de uma empresa, disparar um backup, ou listar eventos recentes.";
  color: var(--text-faint); font-size: 12.5px; display: block; text-align: center; margin-top: 20px;
}
#agent-composer { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
#agent-composer input {
  flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 12px; border-radius: 8px; font-size: 13px; outline: none;
}
#agent-composer input:focus { border-color: var(--violet); }
#agent-composer button {
  background: var(--violet); color: #fff; border: none; border-radius: 8px; padding: 0 14px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* ---------- arquivar/limpar/ver arquivados (Agente Online e Super Agente) ---------- */
.chat-header-actions { display: flex; align-items: center; gap: 5px; }
#general-chat-header .icon-btn, #agent-chat-header .icon-btn { width: 22px; height: 22px; }

#chat-archives-panel {
  position: fixed; bottom: 22px; right: 22px; z-index: 97;
  width: 340px; height: 460px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column;
  overflow: hidden; resize: both; min-width: 300px; min-height: 320px; max-width: min(90vw, 720px); max-height: 85vh;
}
#chat-archives-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px;
}
#chat-archives-close { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; }
#chat-archives-close:hover { color: var(--text); }
#chat-archives-list-view, #chat-archives-detail-view { flex: 1; overflow-y: auto; padding: 12px; }
#chat-archives-list { color: var(--text-faint); font-size: 12px; }
.archive-entry {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px;
  cursor: pointer; font-size: 12px; color: var(--text-dim);
}
.archive-entry:hover { border-color: var(--amber); }
.archive-entry .archive-meta { color: var(--text-faint); font-size: 10.5px; margin-bottom: 4px; }
#chat-archives-back-btn { margin-bottom: 10px; }
#chat-archives-detail { display: flex; flex-direction: column; gap: 12px; }

/* ---------- mobile ---------- */
.mobile-only { display: none; }

@media (max-width: 768px) {
  .gate-card { width: calc(100vw - 32px); max-width: 320px; padding: 32px 24px; }

  #app.visible { flex-direction: column; }
  #sidebar {
    width: 100%; min-width: 0; height: 100%;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 14px 14px;
    /* no desktop o sidebar fica com overflow:hidden de proposito (so o #event-list rola,
       o resto fica fixo no topo) - no mobile a tela e baixa demais pra isso: com varios
       paineis (Backup, Uso das IAs etc) o conteudo simplesmente era espremido/cortado pelo
       flexbox em vez de rolar. Aqui o sidebar inteiro rola como uma pagina normal */
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  /* a causa raiz do "corte" que ja acontecia antes mesmo dessa mudanca: um item flex com
     overflow diferente de visible (".collapsible-panel" tem overflow:hidden, de proposito,
     pra arredondar os cantos) ganha automatic minimum size ZERO pela spec do flexbox, em
     vez do tamanho do proprio conteudo - entao qualquer pressao de espaco na coluna
     esmagava o painel pra poucos pixels (o summary continuava com 35px, mas o <details>
     em volta virava 2px e cortava tudo). flex-shrink:0 em todo mundo tira essa pressao:
     a coluna so cresce/rola, nunca espreme ninguem */
  #sidebar > * { flex-shrink: 0; }
  /* flex:1 exige um container de altura fixa pra calcular "o que sobrar" - dentro do
     sidebar que agora rola como pagina isso nao faz sentido (o "resto" seria infinito).
     Em vez de deixar sem limite (uma pagina de milhares de linhas de evento), da uma
     altura previsivel - o usuario rola a pagina uma vez pra passar dos paineis, e dentro
     dessa caixa os eventos rolam por conta propria, do jeito que se espera num app mobile */
  #event-list { flex: none; max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #detail { display: none; padding: 16px; }

  /* padrao mobile: mostra a lista; ao selecionar um evento, mostra so o detalhe */
  #app.mobile-detail-open #sidebar { display: none; }
  #app.mobile-detail-open #detail { display: flex; }

  .mobile-only { display: inline-flex !important; }

  /* modo compacto (botao "recolher tudo", so no mobile): esconde tudo que nao seja a
     selecao de empresa e o stream de eventos, pra parar de precisar rolar por cima de
     status do Drive/IA e todos os paineis recolhiveis so pra chegar nos eventos.
     !important porque backup-panel/patterns-panel/paste-log-panel recebem
     style.display="block" via JS assim que uma empresa e selecionada - um estilo inline
     sempre ganha de uma regra de classe comum, entao sem isso esses 3 continuavam
     aparecendo mesmo com o modo compacto ligado */
  #sidebar.mobile-compact #drive-status-row,
  #sidebar.mobile-compact .collapsible-panel,
  #sidebar.mobile-compact #mute-row {
    display: none !important;
  }

  .icon-btn { width: 34px; height: 34px; }

  #detail-header { flex-wrap: wrap; row-gap: 6px; }
  #detail-time { margin-left: 0; width: 100%; order: 5; }

  .date-time-row { flex-wrap: wrap; }
  .date-time-row input { min-width: 45%; }

  /* inputs com menos de 16px de fonte fazem o Safari/iOS dar zoom automatico ao focar */
  #gate-input, .company-select, #chat-input, #composer input,
  #general-chat-input, .date-time-row input, #log-input {
    font-size: 16px;
  }

  #general-chat-toggle.visible {
    left: 14px; right: 14px; bottom: 14px; width: auto;
    justify-content: center; font-size: 12.5px; padding: 12px 14px;
  }
  #general-chat-panel {
    left: 14px; right: 14px; bottom: 14px; width: auto;
    height: min(70vh, 460px);
  }

  .msg { max-width: 94%; }
}