/* ============================================================================
   command-center.css  —  NOVA fonte de verdade do tema (substitui light-theme.css)
   Tema: "Command Center" escuro premium (Linear / Vercel / Grafana).
   Carregado depois de style.css: redefine TODOS os tokens + repolir componentes.
   Regra herdada (CLAUDE.md): NÃO animar `transform` em .card (bug de toque no WebView).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Camadas de superfície ---- */
  --bg:        #090b10;   /* fundo da app (quase-preto azulado) */
  --bg-deep:   #06070b;   /* fundo mais fundo (barras, splash) */
  --panel:     #10141d;   /* superfície primária */
  --panel-2:   #161b26;   /* superfície 2 (tiles/inputs) */
  --card:      #10141d;
  --card-bg:   #10141d;
  --card2:     #161b26;
  --card-elev: #1a2131;   /* elevado (popovers, hover) */
  --bg-card:   #10141d;
  --bg2:       #161b26;
  --bg3:       #1a2131;
  --input-bg:  #141924;
  --badge-bg:  #1a2131;
  --hover:     #1a2131;

  /* ---- Bordas ---- */
  --border:        #222b3a;
  --border-subtle: #192131;
  --border-strong: #2c384c;

  /* ---- Texto ---- */
  --text:      #e9edf6;
  --fg:        #e9edf6;
  --muted:     #8b95ac;
  --fg-muted:  #8b95ac;
  --faint:     #5c6784;

  /* ---- Acento primário (ciano-azul command center) ---- */
  --accent:            #4d9fff;
  --accent-2:          #a78bfa;   /* violeta secundário */
  --accent-soft:       rgba(77,159,255,0.12);
  --accent-softer:     rgba(77,159,255,0.06);
  --accent-rgb:        77,159,255;
  --current-accent:    #4d9fff;
  --current-accent-rgb: 77,159,255;

  /* ---- Estado ---- */
  --green: #35d07f;
  --amber: #ffb84d;
  --red:   #ff5c6c;
  --grey:  #5b6478;
  --err:   #ff5c6c;

  /* ---- Forma / profundidade ---- */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.28);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --ring:      0 0 0 1px rgba(77,159,255,.35), 0 0 0 4px rgba(77,159,255,.12);

  /* ---- Tipografia ---- */
  --alina-font: "Lexend Deca", -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;

  /* ---- Acentos por-vista (legíveis em fundo escuro) ---- */
  --c-comando:   #4d9fff;
  --c-frota:     #38bdf8;
  --c-conversas: #a78bfa;
  --c-tokens:    #ffb020;
  --c-pnl:       #34d399;
  --c-saude:     #22d3ee;
  --c-historico: #fb923c;
  --c-ajuda:     #94a3b8;
  --c-lembretes: #f472b6;
  --c-telemovel: #60a5fa;
}

/* ============================ BASE ============================ */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--alina-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* brilho ambiente subtil — z-index:-1 fica ATRÁS do conteúdo sem tocar no
   posicionamento de nenhum elemento (não mexer: o sidebar é position:fixed). */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(77,159,255,.10), transparent 60%),
    radial-gradient(900px 500px at 8% 4%, rgba(167,139,250,.07), transparent 55%);
}

::selection { background: rgba(77,159,255,.30); color: #fff; }

/* Scrollbars finas escuras */
* { scrollbar-width: thin; scrollbar-color: #2a3446 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #273143; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #33415a; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

.muted, .group-hint.muted { color: var(--muted) !important; }
a { color: var(--accent); }
code, kbd { background: rgba(255,255,255,.05); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 1px 5px; color: #cbd5f0; }

/* ============================ HEADER ============================ */
header {
  background: rgba(9,11,16,.72) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 20px !important;
}
header h1 {
  font-weight: 700 !important; letter-spacing: .04em; font-size: 16px !important;
  background: linear-gradient(90deg, #fff, #b9c6e6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#menu-toggle { color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.stamp, #last-update { color: var(--muted) !important; }
.force-refresh, .admin-key, .install-btn, #apk-btn {
  background: var(--panel-2) !important; border: 1px solid var(--border) !important;
  color: var(--text) !important; border-radius: var(--radius-sm) !important;
}
.force-refresh:hover, .admin-key:hover, #apk-btn:hover { border-color: var(--accent) !important; }

/* Install strip (barra azul topo) → mais discreta */
#install-strip {
  background: var(--panel-2) !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important;
}
#install-strip .ist-btn { background: var(--accent) !important; color: #04121f !important; border-radius: 8px !important; font-weight: 600; border: none !important; }

/* Verdict badge (estado da frota) */
#fleet-verdict {
  background: var(--panel-2) !important; border: 1px solid var(--border) !important;
  border-radius: 999px !important; color: var(--text) !important; font-weight: 600; padding: 5px 12px !important;
}
.bots-offline-badge { background: rgba(255,92,108,.14) !important; border: 1px solid rgba(255,92,108,.4) !important; color: #ff8a94 !important; border-radius: 999px !important; }

/* ============================ SIDEBAR ============================ */
#sidebar {
  background: linear-gradient(180deg, #0c0f16, #090b10) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none;
}
.sb-brand { border-bottom: 1px solid var(--border-subtle); padding-bottom: 14px; }
.sb-brand .sb-logo { border-radius: 10px; box-shadow: 0 0 0 1px var(--border), 0 4px 14px rgba(0,0,0,.4); }
.sb-brand-txt strong { color: #fff !important; font-weight: 700; letter-spacing: .02em; }
.sb-brand-txt span { color: var(--muted) !important; letter-spacing: .14em; text-transform: uppercase; font-size: 9px !important; }

.sb-group-label {
  color: var(--faint) !important; text-transform: uppercase; letter-spacing: .14em;
  font-size: 10px !important; font-weight: 600; padding: 14px 14px 6px !important;
}
.sb-item {
  color: #b7c0d6 !important; border-radius: 10px !important; margin: 2px 8px !important;
  padding: 9px 12px !important; font-weight: 500 !important; gap: 10px; position: relative;
  transition: background .16s, color .16s;
}
.sb-item span { font-weight: 500; }
.sb-item:hover { background: rgba(255,255,255,.045) !important; color: #fff !important; }
.sb-item.active {
  background: var(--accent-soft) !important; color: #fff !important; font-weight: 600 !important;
}
.sb-item.active::before {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.sb-collapse-btn, .sb-foot { color: var(--muted) !important; border-top: 1px solid var(--border-subtle); }
.sb-collapse-btn:hover { color: #fff !important; }
#sidebar-backdrop { background: rgba(4,6,10,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ============================ BOTTOM NAV (mobile) ============================ */
#bottomnav {
  background: rgba(9,11,16,.86) !important;
  -webkit-backdrop-filter: saturate(140%) blur(18px); backdrop-filter: saturate(140%) blur(18px);
  border-top: 1px solid var(--border) !important;
}
.bn-item { color: var(--muted) !important; }
.bn-item.active { color: var(--accent) !important; }
#bn-pill { background: var(--accent-soft) !important; border-radius: 12px !important; }

/* ============================ COMPOSE BAR ============================ */
#compose-bar {
  background: rgba(16,20,29,.82) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border) !important;
}
#compose-input {
  background: var(--input-bg) !important; border: 1px solid var(--border) !important;
  color: var(--text) !important; border-radius: var(--radius) !important;
}
#compose-input::placeholder { color: var(--faint) !important; }
#compose-input:focus { border-color: var(--accent) !important; box-shadow: var(--ring) !important; outline: none; }
#compose-bar select, #compose-target, #compose-model {
  background: var(--panel-2) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: var(--radius-sm) !important;
}
#compose-fab {
  background: var(--accent) !important; color: #04121f !important;
  box-shadow: 0 8px 26px rgba(77,159,255,.4) !important; border: none !important;
}

/* ============================ CARDS ============================ */
.card {
  background: linear-gradient(180deg, #12161f, #10141d) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, var(--shadow) !important;
  transition: border-color .18s, box-shadow .18s;
}
.card:hover { border-color: var(--border-strong) !important; }
/* Card "overview" com destaque de acento no topo */
#overview-card { border-color: var(--border-strong) !important; }
#overview-card::before {
  content: ""; display: block; height: 2px; margin: -1px -1px 14px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent);
}
.card > h2, .section-head h2 {
  color: #fff !important; font-weight: 650 !important; letter-spacing: .01em; font-size: 15px !important;
}
.section-head { border-bottom: 1px solid var(--border-subtle); padding-bottom: 10px; margin-bottom: 12px; }
.section-head .muted, .card h2 .muted { color: var(--muted) !important; }

/* Group row (cabeçalho de grupo entre secções) */
.group-row .group-title {
  color: #fff !important; font-weight: 700 !important; letter-spacing: .02em;
}
.group-row { border-bottom: 1px solid var(--border-subtle); }
.card-drag-handle { color: var(--faint) !important; opacity: .5; }
.card-drag-handle:hover { opacity: 1; color: var(--accent) !important; }

/* ============================ OVERVIEW / KPIs ============================ */
.overview-grid .kpi, .kpi, .usage-kpi, .live-kpi {
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}
.kpi:hover { border-color: var(--border-strong) !important; }
.kpi .lbl, .usage-kpi .lbl {
  color: var(--muted) !important; text-transform: uppercase; letter-spacing: .1em; font-size: 10px !important; font-weight: 600;
}
.kpi .val, .usage-kpi .val { color: #fff !important; font-weight: 700 !important; }

/* ── "Estado geral" (overview-kpi) — limpo e premium ────────────────────
   Neutraliza o tratamento néon herdado (style.css ~4703: gradiente colorido
   + borda colorida + glow no número). Estado passa a ler-se por um accent
   subtil à esquerda + cor do valor — sem gradientes berrantes. */
.overview-grid { gap: 10px !important; }
.overview-kpi,
.overview-kpi.good, .overview-kpi.warn, .overview-kpi.bad,
.overview-kpi:not(.good):not(.warn):not(.bad) {
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--grey) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  transition: border-color .16s, transform .06s !important;
}
.overview-kpi.good { border-left-color: var(--green) !important; }
.overview-kpi.warn { border-left-color: var(--amber) !important; }
.overview-kpi.bad  { border-left-color: var(--red)   !important; }
.overview-kpi:hover { border-color: var(--border-strong) !important; }
.overview-kpi .lbl {
  color: var(--muted) !important; text-transform: uppercase;
  letter-spacing: .09em !important; font-size: 10px !important; font-weight: 600 !important;
}
.overview-kpi .val {
  color: #fff !important; font-weight: 700 !important;
  text-shadow: none !important; letter-spacing: -.01em;
}
.overview-kpi.good .val { color: var(--green) !important; }
.overview-kpi.warn .val { color: var(--amber) !important; }
.overview-kpi.bad  .val { color: var(--red)   !important; }
.overview-kpi .meta { color: var(--muted) !important; }

/* Pílulas de ação/sugestão por baixo dos KPIs — sóbrias, tom por severidade */
.overview-action {
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--radius-sm) !important;
}
.overview-action.warn  { border-left-color: var(--amber) !important; }
.overview-action.error { border-left-color: var(--red) !important; }
.overview-action strong { color: var(--text) !important; font-weight: 600; }
.overview-action span { color: var(--muted) !important; }

/* Responsivo: grelha que se adapta em vez de 1-coluna gigante no telemóvel.
   auto-fit dá 3-4 col no desktop e 2 col compactas a ~390px. */
@media (max-width: 640px) {
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .overview-kpi { min-height: 0 !important; padding: 10px 12px !important; }
  .overview-kpi .val { font-size: 22px !important; }
  .overview-kpi .meta { -webkit-line-clamp: 2; }
}

/* ============================ BOTÕES ============================ */
.btn, .btn-sm, button.cap-item {
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  transition: background .15s, border-color .15s, transform .06s;
}
.btn:hover, .btn-sm:hover { background: var(--card-elev) !important; border-color: var(--border-strong) !important; }
.btn:active, .btn-sm:active { transform: translateY(1px); }
.btn.primary, .btn-primary, button[type="submit"].primary {
  background: linear-gradient(180deg, #5aa8ff, #3d90f5) !important;
  border: 1px solid #2f7fe0 !important;
  color: #04121f !important; font-weight: 650 !important;
  box-shadow: 0 2px 10px rgba(77,159,255,.28) !important;
}
.btn.primary:hover, .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 4px 18px rgba(77,159,255,.42) !important; }
.btn.active, .controls .btn.active { background: var(--accent-soft) !important; border-color: var(--accent) !important; color: #fff !important; }
.ag-del-btn, #ag-del { color: #ff8a94 !important; }

/* ============================ INPUTS / SELECTS / TEXTAREAS ============================ */
input[type="text"], input[type="search"], input[type="password"], input[type="number"],
input[type="datetime-local"], input[list], textarea, select {
  background: var(--input-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
}
input::placeholder, textarea::placeholder { color: var(--faint) !important; }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important; box-shadow: var(--ring) !important; outline: none;
}
label, .rules-field, .ag-field { color: var(--muted) !important; }
.rules-check, .mgr-toggle, .batch-toggle { color: var(--muted) !important; }

/* ============================ TABS (fila de tarefas) ============================ */
.taskq-tabs { border-bottom: 1px solid var(--border) !important; gap: 4px; }
.taskq-tab {
  color: var(--muted) !important; border: none !important; background: transparent !important;
  border-radius: 10px 10px 0 0 !important; font-weight: 500 !important; position: relative;
}
.taskq-tab:hover { color: var(--text) !important; background: rgba(255,255,255,.03) !important; }
.taskq-tab.is-active { color: #fff !important; background: var(--accent-softer) !important; }
.taskq-tab.is-active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: 2px; box-shadow: 0 0 10px var(--accent);
}
.tab-count {
  background: var(--panel-2) !important; color: var(--muted) !important;
  border: 1px solid var(--border) !important; border-radius: 999px !important; font-weight: 600;
}
.taskq-tab.is-active .tab-count { background: var(--accent-soft) !important; color: #fff !important; border-color: var(--accent) !important; }

/* Sub-tabs do embed */
.embed-otab { background: var(--panel-2) !important; border: 1px solid var(--border) !important; color: var(--muted) !important; border-radius: 999px !important; }
.embed-otab.is-active { background: var(--accent-soft) !important; color: #fff !important; border-color: var(--accent) !important; }

/* ============================ BADGES / DOTS / CHIPS ============================ */
.dot { box-shadow: 0 0 0 3px rgba(255,255,255,.03); }
.dot.green { background: var(--green) !important; box-shadow: 0 0 8px rgba(53,208,127,.6); }
.dot.red   { background: var(--red) !important;   box-shadow: 0 0 8px rgba(255,92,108,.6); }
.dot.amber { background: var(--amber) !important; box-shadow: 0 0 8px rgba(255,184,77,.6); }
.dot.grey  { background: var(--grey) !important; }
.sched-chip, .chip {
  background: var(--panel-2) !important; border: 1px solid var(--border) !important;
  color: var(--text) !important; border-radius: 999px !important;
}
.sched-chip:hover { border-color: var(--accent) !important; color: #fff !important; }
.cap-item { background: var(--panel-2) !important; border: 1px solid var(--border) !important; color: #c3ccdf !important; border-radius: var(--radius-sm) !important; }
.cap-item:hover { border-color: var(--accent) !important; color: #fff !important; background: var(--card-elev) !important; }
.cap-title { color: #fff !important; font-weight: 650 !important; }
/* Banner de drift do card Capacidades (capacidades fantasma) */
.cap-drift { margin: 2px 0 12px !important; padding: 8px 12px !important; border-radius: var(--radius-sm, 10px) !important; font-size: 12px !important; line-height: 1.55 !important; }
.cap-drift.ok { background: rgba(77,159,255,.08) !important; border: 1px solid rgba(77,159,255,.28) !important; color: #cdd7ea !important; }
.cap-drift.warn { background: rgba(255,176,60,.10) !important; border: 1px solid rgba(255,176,60,.38) !important; color: #ffd48a !important; }
.cap-drift code { background: rgba(255,255,255,.08) !important; padding: 1px 5px !important; border-radius: 5px !important; font-size: 11px !important; }
/* 🛡️ Card Segurança da frota */
.sec-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.sec-pill { font-size: 11px !important; padding: 3px 9px !important; border-radius: 999px !important; border: 1px solid var(--border) !important; background: var(--panel-2) !important; color: #c3ccdf !important; }
.sec-pill.sec-critical { border-color: rgba(255,70,70,.5) !important; color: #ff9a9a !important; }
.sec-pill.sec-high { border-color: rgba(255,140,50,.5) !important; color: #ffbd85 !important; }
.sec-pill.sec-medium { border-color: rgba(255,200,60,.45) !important; color: #ffdc8a !important; }
.sec-hostblock { margin: 8px 0 12px; }
.sec-host { font-size: 13px; color: #fff; margin-bottom: 5px; }
.sec-err { color: #ff9a9a; font-size: 12px; }
.sec-item { font-size: 12px; padding: 7px 10px; margin: 5px 0; border-radius: var(--radius-sm, 10px); background: var(--panel-2); border: 1px solid var(--border); border-left-width: 3px; line-height: 1.5; }
.sec-item.sec-critical { border-left-color: #ff4646 !important; }
.sec-item.sec-high { border-left-color: #ff8c32 !important; }
.sec-item.sec-medium { border-left-color: #ffc83c !important; }
.sec-item.sec-info { border-left-color: #4d9fff !important; }
.sec-badge { font-weight: 650; text-transform: uppercase; font-size: 10px; letter-spacing: .3px; margin-right: 4px; opacity: .95; }
.sec-fix { color: #9fb0c9; font-size: 11px; margin-top: 3px; }
/* 🧭 Card Sincronismo dos checkouts (vigia diário de drift git) */
.drift-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.drift-pill { font-size: 11px !important; padding: 3px 9px !important; border-radius: 999px !important; border: 1px solid var(--border) !important; background: var(--panel-2) !important; color: #c3ccdf !important; }
.drift-pill em { font-style: normal; opacity: .7; }
.drift-pill.drift-grave { border-color: rgba(255,70,70,.5) !important; color: #ff9a9a !important; }
.drift-pill.drift-atras { border-color: rgba(255,176,60,.5) !important; color: #ffd48a !important; }
.drift-pill.drift-sujo { border-color: rgba(255,200,60,.4) !important; color: #ffdc8a !important; }
.drift-pill.drift-ok { border-color: rgba(70,214,140,.42) !important; color: #8fe6b7 !important; }
.drift-item { font-size: 12.5px; padding: 7px 10px; margin: 5px 0; border-radius: var(--radius-sm, 10px); background: var(--panel-2); border: 1px solid var(--border); border-left-width: 3px; line-height: 1.5; color: #d3dcec; }
.drift-item.drift-grave { border-left-color: #ff4646 !important; }
.drift-item.drift-atras { border-left-color: #ffb03c !important; }
.drift-item.drift-sujo { border-left-color: #ffc83c !important; }
.drift-item.drift-down { border-left-color: #5a6478 !important; }
.drift-badge { margin-right: 4px; }
.drift-detail { color: #9fb0c9; font-size: 11.5px; margin-top: 2px; }
.drift-branches { color: #7f8da3; font-size: 10.5px; margin-top: 2px; word-break: break-all; }
.drift-more { margin-top: 6px; }
.drift-more > summary { padding: 4px 2px; }
/* 🧠 Card Instintos da frota */
.inst-item { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 7px 10px; margin: 5px 0; border-radius: var(--radius-sm, 10px); background: var(--panel-2); border: 1px solid var(--border); border-left-width: 3px; line-height: 1.5; color: #d3dcec; }
.inst-item.inst-hi { border-left-color: #4d9fff !important; }
.inst-item.inst-mid { border-left-color: #8b7bff !important; }
.inst-item.inst-lo { border-left-color: #5a6478 !important; }
.inst-conf { font-weight: 700; font-size: 11px; color: #4d9fff; min-width: 34px; }
.inst-item.inst-mid .inst-conf { color: #a99bff; }
.inst-item.inst-lo .inst-conf { color: #8f9bb3; }
/* 🔍 Card Code-review */
.review-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.review-sel { background: var(--panel-2) !important; border: 1px solid var(--border) !important; color: #d3dcec !important; border-radius: var(--radius-sm, 10px) !important; padding: 6px 10px !important; font-size: 12px !important; }
#review-result a { color: #4d9fff !important; }
/* 🔭 Card ECC watch */
.ecc-head { font-size: 12px; margin-bottom: 4px; }
.ecc-grade { font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); }
.ecc-grade-a { color: #7ee0a0 !important; border-color: rgba(126,224,160,.4) !important; }
.ecc-grade-b { color: #cfe08a !important; }
.ecc-grade-c, .ecc-grade-d, .ecc-grade-f { color: #ffb060 !important; border-color: rgba(255,176,60,.4) !important; }
.ecc-sec { margin-top: 8px; font-size: 12px; }
.ecc-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.ecc-chip { font-size: 11px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-2); }
.ecc-chip.ecc-ok { color: #cdeacd !important; border-color: rgba(126,224,160,.35) !important; }
.ecc-chip.ecc-bad { color: #ffcf9a !important; border-color: rgba(255,176,60,.35) !important; }
.ecc-commit { font-size: 11px; color: #9fb0c9; margin: 3px 0; font-family: ui-monospace, monospace; }

/* Popovers / dropdowns elevados */
.sched-popover, .modal-card, .modal-overlay .modal-card {
  background: var(--card-elev) !important; border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important;
}
.modal-overlay { background: rgba(4,6,10,.6) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* Fleet strip / máquinas */
.fleet-strip .fleet-node, .frota-controls > *, .mac-card {
  background: var(--panel-2) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important;
}

/* Barras de progresso */
.budget-bar, .plan-bar-track, .progress { background: var(--panel-2) !important; border-radius: 999px !important; }
.budget-bar > span, .plan-bar-fill { background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important; }

/* Suggestions bar */
#suggestions-bar { background: transparent !important; }

/* Details / summary */
summary { color: var(--accent) !important; }
details { border-color: var(--border) !important; }

/* ─── 🌐 Sites (view "sites") — diretório de sites da casa ─── */
.sites-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 18px 2px 10px;
}
.sites-group-label:first-child { margin-top: 6px; }
.sites-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px;
}
a.site-link {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  background: var(--panel-2) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important; padding: 12px 14px;
  color: var(--text) !important; text-decoration: none !important;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
a.site-link:hover {
  background: var(--card-elev) !important; border-color: var(--accent) !important;
  transform: translateY(-1px);
}
.site-ico { font-size: 22px; flex: 0 0 auto; }
.site-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.site-txt strong { font-size: 13.5px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-desc { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-badge {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border);
}
.site-badge.publico { color: #45d28a; border-color: rgba(69,210,138,.35); background: rgba(69,210,138,.08); }
.site-badge.tailnet { color: var(--accent); border-color: rgba(77,159,255,.35); background: rgba(77,159,255,.08); }
@media (max-width: 520px) {
  .sites-grid { grid-template-columns: 1fr; }
}

/* ── Vistas com página embebida em iframe (🧵 Fila e 🎯 Objetivos) ──
   As duas são páginas autocontidas servidas em /fila e /objetivos; aqui só se
   lhes dá a altura útil, para o fundo do iframe ficar alcançável (a roda do
   rato não atravessa iframes — ver #345). */
#fila-embed-card, #objetivos-embed-card { padding: 0; overflow: hidden; }
#fila-embed-card iframe, #objetivos-embed-card iframe {
  display: block;
  width: 100%;
  height: calc(100dvh - 120px);
  border: 0;
  border-radius: inherit;
}
@media (max-width: 900px) {
  #fila-embed-card iframe, #objetivos-embed-card iframe { height: calc(100dvh - var(--bn-h, 56px) - env(safe-area-inset-bottom, 0px) - 130px); }
}

/* ── 🔐 Vista Cofre de credenciais (só admin) ─────────────────────────────── */
#vault-card { --vault-accent: #f0b866; }
.vault-btn {
  cursor: pointer; border: 1px solid var(--border, #2a3040); border-radius: 8px;
  padding: 6px 12px; background: transparent; color: inherit; font-size: 13px;
}
.vault-btn.primary { border: none; background: var(--vault-accent); color: #1a1408; font-weight: 700; }
.vault-btn:hover { border-color: var(--vault-accent); }
.vault-locked, .vault-empty {
  display: flex; gap: 14px; align-items: center; padding: 22px 16px;
  border: 1px dashed var(--border, #2a3040); border-radius: 12px; line-height: 1.5;
}
.vault-toolbar { margin: 0 0 12px; }
.vault-toolbar input {
  width: 100%; padding: 9px 12px; border-radius: 10px; box-sizing: border-box;
  border: 1px solid var(--border, #2a3040); background: rgba(255,255,255,.03); color: inherit; font-size: 13px;
}
.vault-form {
  display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 14px;
  border: 1px solid rgba(240,184,102,.35); border-radius: 12px; background: rgba(240,184,102,.05);
}
.vault-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.vault-form-row > input, .vault-form-row > .vault-secret-wrap { flex: 1; min-width: 180px; }
.vault-form input, .vault-form textarea {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border, #2a3040);
  background: rgba(255,255,255,.03); color: inherit; font-size: 13px; box-sizing: border-box; width: 100%;
}
.vault-form textarea { resize: vertical; }
.vault-secret-wrap { position: relative; display: flex; }
.vault-secret-wrap input { padding-right: 38px; }
.vault-secret-wrap button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer; font-size: 15px; padding: 4px 6px;
}
.vault-form-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vault-cat { margin-bottom: 14px; }
.vault-cat-head {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--vault-accent); margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border, #2a3040);
}
.vault-item {
  display: flex; gap: 10px; justify-content: space-between; align-items: flex-start;
  border: 1px solid var(--border, #2a3040); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  background: var(--bg-card, #12151d);
}
.vault-item:hover { border-color: rgba(240,184,102,.45); }
.vault-item-main { min-width: 0; flex: 1; }
.vault-item-label { font-weight: 650; font-size: 14px; }
.vault-item-sub { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 3px; font-size: 12.5px; }
.vault-user { cursor: pointer; opacity: .85; }
.vault-user:hover { color: var(--vault-accent); }
.vault-url { color: var(--accent, #4d9fff); text-decoration: none; overflow-wrap: anywhere; }
.vault-notes { font-size: 12px; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.vault-meta { font-size: 10.5px; margin-top: 5px; opacity: .7; }
.vault-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.vault-item-actions button {
  cursor: pointer; border: 1px solid transparent; border-radius: 8px; background: transparent;
  font-size: 15px; padding: 5px 7px; line-height: 1;
}
.vault-item-actions button:hover { border-color: var(--border, #2a3040); background: rgba(255,255,255,.05); }
.vault-item-actions button:disabled { opacity: .4; cursor: wait; }
.vault-reveal-box {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px;
  padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(240,184,102,.4); background: rgba(240,184,102,.08);
}
.vault-reveal-box code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  overflow-wrap: anywhere; user-select: all; color: var(--vault-accent);
}
.vault-reveal-box button {
  cursor: pointer; border: 1px solid var(--border, #2a3040); border-radius: 6px;
  background: transparent; color: inherit; font-size: 11px; padding: 3px 8px;
}
@media (max-width: 520px) {
  .vault-item { flex-direction: column; }
  .vault-item-actions { align-self: flex-end; }
}
/* item do menu do Cofre: invisível sem token admin, vence qualquer !important genérico */
#sb-cofre[hidden] { display: none !important; }

/* ── Interruptor do esforço das tarefas (cabeçalho da fila) ────────────────────
   ARMADILHA: o style.css tem `[id*="taskq"] button:last-of-type:not(.taskq-tab)`
   com `background: linear-gradient(...) !important; color:#07111d !important`,
   pensado para o botão "+ à fila". Qualquer botão acrescentado ao card da fila
   fica automaticamente o :last-of-type e sai pintado como botão PRIMÁRIO —
   foi o que aconteceu a este. Não se pode vencer sem !important e sem
   especificidade maior, por isso o seletor é qualificado com o id do card.
   Se acrescentares mais botões aqui, contas com o mesmo tratamento.
   Visualmente segue o irmão (.taskq-quota-guard): pastilha delineada, não sólida. */
#taskq-card .section-head button.taskq-effort,
#taskq-card .section-head button.taskq-split {
  background: rgba(94,196,255,.12) !important;
  background-image: none !important;
  border: 1px solid rgba(94,196,255,.35) !important;
  color: var(--accent, #5ec4ff) !important;
  box-shadow: none !important;
  white-space: nowrap; font-size: 11px; font-weight: 600;
}
#taskq-card .section-head button.taskq-effort:hover,
#taskq-card .section-head button.taskq-split:hover {
  background: rgba(94,196,255,.22) !important;
}
/* esforço no mínimo = estado "económico": mais discreto, como o .off do irmão */
#taskq-card .section-head button.taskq-effort.off,
#taskq-card .section-head button.taskq-split.off {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--border, #2a3040) !important;
  color: var(--muted, #8b95ac) !important;
}
#taskq-card .section-head button.taskq-effort.off:hover,
#taskq-card .section-head button.taskq-split.off:hover {
  background: rgba(255,255,255,.12) !important;
  color: var(--fg, #e4e8f0) !important;
}

/* ── Commit produzido pela tarefa (⎇ abc1234) ─────────────────────────────
   Vive ao lado do .tq-host: juntos respondem a "em que máquina está este
   trabalho?". Quando o commit não chegou ao remoto fica âmbar e a gritar —
   é a diferença entre trabalho publicado e trabalho a um disco de se perder. */
.tq-commit-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; padding: 1px 6px; border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(94,196,255,.10); color: var(--accent, #5ec4ff);
  border: 1px solid rgba(94,196,255,.28);
  white-space: nowrap; cursor: default; flex-shrink: 0;
}
.tq-commit-badge.is-stuck {
  background: rgba(255,176,32,.14); color: #ffb020;
  border-color: rgba(255,176,32,.45);
  font-weight: 700;
}

/* ══ 🎯 MISSÕES ═══════════════════════════════════════════════════════════
   Card #missoes-card (vista Conversas). Tema Command Center: superfícies
   escuras já vêm do style.css base, aqui só se afina o acento e o ritmo.
   Nada de !important a mais: o card é novo, não há regra antiga a combater. */
#missoes-card .mis-new {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  margin-bottom: 12px;
}
#missoes-card textarea#mis-goal {
  width: 100%; min-height: 54px; resize: vertical;
  font: inherit; font-size: 13px; line-height: 1.5;
}
#missoes-card .mis-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#missoes-card .mis-row input { flex: 1 1 120px; min-width: 0; }
#missoes-card .mis-row input#mis-name { flex: 1 1 140px; }
#missoes-card .mis-mode { font-size: 12px; color: var(--muted, #8b95ac); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
#missoes-card .mis-row .btn.primary { margin-left: auto; }

#missoes-card .mis-targets { display: flex; flex-wrap: wrap; gap: 6px; }
#missoes-card .mis-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 3px 8px; border-radius: 999px;
  background: rgba(77,159,255,.12); color: var(--accent, #4d9fff);
  border: 1px solid rgba(77,159,255,.30);
}
#missoes-card .mis-chip button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 2px; font-size: 13px; line-height: 1; }
#missoes-card .mis-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
#missoes-card .mis-suggest button {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  color: var(--muted, #8b95ac); cursor: pointer;
}
#missoes-card .mis-suggest button:hover { color: var(--fg, #e4e8f0); border-color: rgba(77,159,255,.4); }

#missoes-card .mis-list { display: flex; flex-direction: column; gap: 10px; }
#missoes-card .mis-item {
  border-radius: 12px; padding: 10px 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
}
#missoes-card .mis-item.is-running { border-color: rgba(77,159,255,.35); box-shadow: 0 0 0 1px rgba(77,159,255,.10) inset; }
#missoes-card .mis-head { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
#missoes-card .mis-goal { font-size: 13px; font-weight: 600; flex: 1 1 240px; line-height: 1.45; }
#missoes-card .mis-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.06); color: var(--muted, #8b95ac); border: 1px solid rgba(255,255,255,.10);
}
#missoes-card .mis-badge.st-running { background: rgba(77,159,255,.14); color: #4d9fff; border-color: rgba(77,159,255,.4); }
#missoes-card .mis-badge.st-done { background: rgba(46,204,113,.14); color: #2ecc71; border-color: rgba(46,204,113,.35); }
#missoes-card .mis-badge.st-failed, #missoes-card .mis-badge.st-cancelled { background: rgba(255,90,90,.12); color: #ff6b6b; border-color: rgba(255,90,90,.32); }
#missoes-card .mis-badge.st-draft { background: rgba(255,176,32,.12); color: #ffb020; border-color: rgba(255,176,32,.35); }
#missoes-card .mis-acts { display: flex; gap: 6px; flex-wrap: wrap; }
#missoes-card .mis-acts button { font-size: 11px; padding: 3px 10px; }
#missoes-card .mis-target {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: 12px; padding: 6px 0; border-top: 1px dashed rgba(255,255,255,.07);
  line-height: 1.5;
}
#missoes-card .mis-who { font-weight: 600; }
#missoes-card .mis-answer { color: var(--fg, #e4e8f0); flex: 1 1 100%; }
#missoes-card .mis-quote { color: var(--muted, #8b95ac); font-style: italic; flex: 1 1 100%; }
#missoes-card .mis-draft {
  flex: 1 1 100%; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  background: rgba(255,176,32,.08); border: 1px solid rgba(255,176,32,.28);
  border-radius: 10px; padding: 6px 8px; margin: 4px 0;
}
#missoes-card .mis-draft input { flex: 1 1 220px; min-width: 0; font-size: 12px; }
#missoes-card .mis-report { white-space: pre-wrap; font-size: 12px; line-height: 1.55; margin-top: 8px; color: var(--fg, #e4e8f0); }
#missoes-card .mis-log { max-height: 220px; overflow-y: auto; font-size: 11px; line-height: 1.6; margin-top: 8px; color: var(--muted, #8b95ac); }
#missoes-card .mis-log b { color: var(--fg, #e4e8f0); font-weight: 600; }
@media (max-width: 700px) {
  #missoes-card .mis-row .btn.primary { margin-left: 0; }
  #missoes-card .mis-row input { flex: 1 1 100%; }
}

/* ── 💸 Transferências (payments-gw) ─────────────────────────────────────────
   Tudo escopado a #pay-card: os nomes .pay-* já existem no approve-links.js
   (.pay-bar/.pay-sign/.pay-modal), e sem escopo estas regras iam-lhes bater no
   chat da Judite. O botão de assinar continua a vir com o CSS de lá. */
#pay-card .pay-st { font-size: 11px; }
#pay-card .pay-st.ok { color: #45d28a; }
#pay-card .pay-st.warn { color: #ffb454; }
#pay-card .pay-st.bad { color: #ff7a7a; }

#pay-card .pay-sec { margin-top: 14px; }
#pay-card .pay-sec-h {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--muted, #8b95ac); margin-bottom: 8px;
}
#pay-card .pay-sec-hint { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11px; }
#pay-card .pay-sub-h {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; font-weight: 600; color: var(--muted, #8b95ac);
  margin: 12px 0 7px;
}
#pay-card .pay-sec > .pay-sub-h:first-of-type { margin-top: 2px; }
#pay-card .pay-count {
  background: rgba(255,176,32,.18); border: 1px solid rgba(255,176,32,.45); color: #ffb454;
  border-radius: 999px; padding: 1px 8px; font-size: 11px; text-transform: none;
}

/* por assinar — o montante é a primeira coisa que se lê */
#pay-card .pay-pend {
  background: rgba(255,176,32,.06); border: 1px solid rgba(255,176,32,.3);
  border-radius: 12px; padding: 14px; margin-bottom: 10px;
}
#pay-card .pay-amt {
  font-size: 30px; font-weight: 750; line-height: 1.1; color: #ffce7a;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
#pay-card .pay-who { font-size: 14px; color: var(--fg, #e4e8f0); margin-top: 6px; overflow-wrap: anywhere; }
#pay-card .pay-iban { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted, #8b95ac); }
#pay-card .pay-ref { font-size: 12px; color: var(--muted, #8b95ac); margin-top: 5px; line-height: 1.5; overflow-wrap: anywhere; }
#pay-card .pay-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 11px; color: var(--muted, #8b95ac); }
#pay-card .pay-wait { color: #ffb454; }
#pay-card .pay-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .75; }
#pay-card .pay-err { font-size: 11px; color: #ff9b9b; margin-top: 6px; overflow-wrap: anywhere; }

#pay-card .pay-none {
  font-size: 12px; color: var(--muted, #8b95ac); line-height: 1.6;
  border: 1px dashed var(--border, #262b36); border-radius: 10px; padding: 12px;
}

/* saldos — um bloco por moeda, nunca um total geral */
#pay-card .pay-bals { display: flex; flex-wrap: wrap; gap: 10px; }
#pay-card .pay-bal {
  flex: 1 1 190px; min-width: 0;
  background: var(--bg2, #12161f); border: 1px solid var(--border, #262b36);
  border-radius: 12px; padding: 11px 13px;
}
#pay-card .pay-bal-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
#pay-card .pay-bal-c { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--muted, #8b95ac); }
#pay-card .pay-bal-t { font-size: 19px; font-weight: 700; color: #45d28a; font-variant-numeric: tabular-nums; }
#pay-card .pay-acc { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 2px 0; color: var(--muted, #8b95ac); }
#pay-card .pay-acc-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#pay-card .pay-acc-b { font-variant-numeric: tabular-nums; flex: none; color: var(--fg, #e4e8f0); }
#pay-card .pay-bal-empty { font-size: 12px; }

/* histórico */
#pay-card .pay-hrow { border-top: 1px solid var(--border, #262b36); padding: 10px 0; }
#pay-card .pay-hrow:first-child { border-top: 0; padding-top: 0; }
#pay-card .pay-hmain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
#pay-card .pay-hamt { font-size: 16px; font-weight: 700; color: var(--fg, #e4e8f0); font-variant-numeric: tabular-nums; }
#pay-card .pay-hwho { font-size: 13px; color: var(--fg, #e4e8f0); overflow-wrap: anywhere; }
#pay-card .pay-hchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
#pay-card .pay-hdate { font-size: 11px; color: var(--muted, #8b95ac); font-variant-numeric: tabular-nums; }
#pay-card .pay-chip {
  font-size: 11px; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
  border: 1px solid transparent;
}
#pay-card .pay-chip.ok { background: rgba(69,210,138,.12); border-color: rgba(69,210,138,.35); color: #6fe0a8; }
#pay-card .pay-chip.warn { background: rgba(255,176,32,.12); border-color: rgba(255,176,32,.35); color: #ffc46b; }
#pay-card .pay-chip.bad { background: rgba(255,110,110,.12); border-color: rgba(255,110,110,.35); color: #ff9b9b; }

/* falha de leitura — sóbrio, e explícito em dizer que NÃO SABE */
#pay-card .pay-fail {
  background: rgba(255,110,110,.06); border: 1px solid rgba(255,110,110,.28);
  border-radius: 12px; padding: 14px; margin-top: 12px;
}
#pay-card .pay-fail-t { font-size: 15px; font-weight: 700; color: #ffb0b0; }
#pay-card .pay-fail-b { font-size: 12.5px; line-height: 1.65; color: var(--fg, #e4e8f0); margin-top: 6px; }
#pay-card .pay-fail-b code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; background: rgba(255,255,255,.06); border-radius: 5px; padding: 1px 5px; }
#pay-card .pay-fail-d { font-size: 11px; color: var(--muted, #8b95ac); margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
#pay-card .pay-stale { margin-top: 10px; }
#pay-card .pay-stale summary { font-size: 12px; color: var(--muted, #8b95ac); cursor: pointer; }

@media (max-width: 430px) {
  #pay-card .pay-amt { font-size: 26px; }
  #pay-card .pay-bal { flex: 1 1 100%; }
}

/* ── 💬 Caixa de entrada de WhatsApp, multi-número ─────────────────────────────
   Duas colunas no desktop, um painel de cada vez no telemóvel (o .wa-open troca
   a lista pela thread). NENHUM `max-height` nem scroll interno: as listas
   paginam em JS. Cores só a partir dos tokens do Command Center. */

#whatsapp-card .wa-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px;
}
#whatsapp-card .wa-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; min-height: 40px;
  border-radius: 999px; cursor: pointer;
  background: var(--panel-2, #161b26);
  border: 1px solid var(--border, #222b3a);
  color: var(--muted, #8b95ac);
  font-size: 13px; line-height: 1.2;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#whatsapp-card .wa-tab:hover { background: var(--card-elev, #1a2131); color: var(--fg, #e9edf6); }
#whatsapp-card .wa-tab.on {
  background: var(--accent-soft, rgba(77,159,255,.12));
  border-color: rgba(var(--accent-rgb, 77,159,255), .55);
  color: var(--fg, #e9edf6);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 77,159,255), .18), 0 6px 18px -10px rgba(var(--accent-rgb, 77,159,255), .8);
}
#whatsapp-card .wa-tab-t { font-weight: 650; white-space: nowrap; }
#whatsapp-card .wa-tab-s { font-size: 11.5px; color: var(--faint, #5c6784); white-space: nowrap; font-variant-numeric: tabular-nums; }
#whatsapp-card .wa-tab.on .wa-tab-s { color: var(--muted, #8b95ac); }
#whatsapp-card .wa-tab-n {
  min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--accent, #4d9fff); color: #06070b;
  font-size: 11px; font-weight: 800; text-align: center; line-height: 18px;
}

#whatsapp-card .wa-inbox { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
#whatsapp-card .wa-pane { min-width: 0; }

#whatsapp-card .wa-listhead { display: flex; gap: 6px; margin-bottom: 8px; }
#whatsapp-card .wa-listhead input#wa-search {
  flex: 1; min-width: 0; font-size: 13px; padding: 9px 12px; border-radius: 10px;
  background: var(--input-bg, #141924); border: 1px solid var(--border, #222b3a); color: var(--fg, #e9edf6);
}
#whatsapp-card .wa-icon-btn {
  flex: 0 0 auto; width: 40px; min-height: 40px; border-radius: 10px; cursor: pointer;
  background: var(--panel-2, #161b26); border: 1px solid var(--border, #222b3a);
  color: var(--muted, #8b95ac); font-size: 15px;
}
#whatsapp-card .wa-icon-btn:hover { color: var(--fg, #e9edf6); background: var(--card-elev, #1a2131); }

#whatsapp-card .wa-convs { display: flex; flex-direction: column; gap: 6px; }
#whatsapp-card .wa-conv {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 12px;
  background: var(--panel-2, #161b26); border: 1px solid var(--border-subtle, #192131);
  color: var(--fg, #e9edf6);
  transition: background .15s ease, border-color .15s ease;
}
#whatsapp-card .wa-conv:hover { background: var(--card-elev, #1a2131); border-color: var(--border, #222b3a); }
#whatsapp-card .wa-conv.on { border-color: rgba(var(--accent-rgb, 77,159,255), .55); background: var(--accent-softer, rgba(77,159,255,.06)); }
#whatsapp-card .wa-conv-top { display: flex; align-items: baseline; gap: 8px; }
#whatsapp-card .wa-conv-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#whatsapp-card .wa-conv-when { flex: 0 0 auto; font-size: 11px; color: var(--faint, #5c6784); font-variant-numeric: tabular-nums; }
#whatsapp-card .wa-conv-prev {
  margin-top: 3px; font-size: 12.5px; color: var(--muted, #8b95ac); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#whatsapp-card .wa-conv-bot { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
#whatsapp-card .wa-unread {
  margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--green, #35d07f); color: #06070b; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
#whatsapp-card .wa-more, #whatsapp-card .wa-older {
  width: 100%; margin-top: 8px; padding: 9px 12px; min-height: 40px;
  border-radius: 10px; cursor: pointer; font-size: 12.5px;
  background: transparent; border: 1px dashed var(--border, #222b3a); color: var(--muted, #8b95ac);
}
#whatsapp-card .wa-more:hover, #whatsapp-card .wa-older:hover { color: var(--fg, #e9edf6); border-color: var(--border-strong, #2c384c); }
#whatsapp-card .wa-empty { padding: 18px 12px; font-size: 12.5px; color: var(--faint, #5c6784); text-align: center; }

/* rótulo do número por onde a conversa entrou — em cada linha, sempre */
#whatsapp-card .wa-chip {
  font-size: 10.5px; font-weight: 650; letter-spacing: .01em;
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
  background: var(--badge-bg, #1a2131); border: 1px solid var(--border, #222b3a); color: var(--muted, #8b95ac);
}
#whatsapp-card .wa-chip-pessoal { background: rgba(77,159,255,.13); border-color: rgba(77,159,255,.42); color: #8cc4ff; }
#whatsapp-card .wa-chip-empresa { background: rgba(167,139,250,.14); border-color: rgba(167,139,250,.44); color: #c4b1fd; }
#whatsapp-card .wa-chip-legacy  { background: rgba(140,150,175,.10); border-color: rgba(140,150,175,.30); color: var(--faint, #5c6784); }

/* thread */
#whatsapp-card .wa-pane-thread {
  border: 1px solid var(--border-subtle, #192131); border-radius: 14px;
  background: var(--panel, #10141d); padding: 12px;
}
#whatsapp-card .wa-threadhead { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle, #192131); }
#whatsapp-card .wa-back {
  display: none; flex: 0 0 auto; width: 40px; min-height: 40px; border-radius: 10px; cursor: pointer;
  background: var(--panel-2, #161b26); border: 1px solid var(--border, #222b3a); color: var(--fg, #e9edf6); font-size: 16px;
}
#whatsapp-card .wa-threadwho { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#whatsapp-card .wa-threadwho strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#whatsapp-card .wa-threadwho span { font-size: 11.5px; color: var(--faint, #5c6784); font-variant-numeric: tabular-nums; }
#whatsapp-card .wa-thread { display: flex; flex-direction: column; gap: 6px; padding: 12px 2px; }
#whatsapp-card .wa-day {
  align-self: center; margin: 8px 0 4px; padding: 3px 12px; border-radius: 999px;
  background: var(--panel-2, #161b26); border: 1px solid var(--border-subtle, #192131);
  font-size: 10.5px; color: var(--faint, #5c6784);
}
#whatsapp-card .wa-msg {
  max-width: min(78%, 560px); padding: 8px 12px 6px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere;
}
#whatsapp-card .wa-msg.in {
  align-self: flex-start; border-bottom-left-radius: 5px;
  background: var(--panel-2, #161b26); border: 1px solid var(--border-subtle, #192131); color: var(--fg, #e9edf6);
}
#whatsapp-card .wa-msg.out {
  align-self: flex-end; border-bottom-right-radius: 5px;
  background: rgba(var(--accent-rgb, 77,159,255), .16);
  border: 1px solid rgba(var(--accent-rgb, 77,159,255), .38);
  color: var(--fg, #e9edf6);
}
#whatsapp-card .wa-msg-t { white-space: pre-wrap; }
#whatsapp-card .wa-msg-h { margin-top: 3px; font-size: 10px; color: var(--faint, #5c6784); text-align: right; font-variant-numeric: tabular-nums; }

/* caixa de resposta — a linha que diz por onde vai sair está SEMPRE à vista */
#whatsapp-card .wa-compose { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle, #192131); }
#whatsapp-card .wa-compose-note { font-size: 12px; line-height: 1.5; margin-bottom: 7px; overflow-wrap: anywhere; }
#whatsapp-card .wa-note-ok { color: var(--muted, #8b95ac); }
#whatsapp-card .wa-note-bad { color: #ffb0b0; }
#whatsapp-card .wa-compose-row { display: flex; gap: 8px; align-items: flex-end; }
#whatsapp-card .wa-compose-row textarea#wa-reply {
  flex: 1; min-width: 0; resize: none; font: inherit; font-size: 13.5px; line-height: 1.5;
  padding: 10px 12px; border-radius: 12px; min-height: 42px;
  background: var(--input-bg, #141924); border: 1px solid var(--border, #222b3a); color: var(--fg, #e9edf6);
}
#whatsapp-card .wa-sendbtn {
  flex: 0 0 auto; min-height: 42px; padding: 0 18px; border-radius: 12px; cursor: pointer;
  font-size: 13px; font-weight: 700;
  background: var(--accent, #4d9fff); border: 1px solid var(--accent, #4d9fff); color: #06070b;
}
#whatsapp-card .wa-sendbtn:hover:not(:disabled) { filter: brightness(1.08); }
#whatsapp-card .wa-sendbtn:disabled { opacity: .45; cursor: not-allowed; }

/* conversa nova */
#whatsapp-card .wa-new { margin-top: 14px; border-top: 1px solid var(--border-subtle, #192131); padding-top: 10px; }
#whatsapp-card .wa-new summary { font-size: 12.5px; color: var(--muted, #8b95ac); cursor: pointer; min-height: 32px; line-height: 32px; }
#whatsapp-card .wa-new-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
#whatsapp-card .wa-new-row select, #whatsapp-card .wa-new-row input {
  min-width: 0; font-size: 13px; padding: 9px 12px; min-height: 42px; border-radius: 10px;
  background: var(--input-bg, #141924); border: 1px solid var(--border, #222b3a); color: var(--fg, #e9edf6);
}
#whatsapp-card .wa-new-row select { flex: 0 1 210px; }
#whatsapp-card #wa-to { flex: 0 1 160px; }
#whatsapp-card #wa-text { flex: 1 1 200px; }

@media (max-width: 900px) {
  /* Um painel de cada vez: a lista, ou a conversa aberta. */
  #whatsapp-card .wa-inbox { grid-template-columns: minmax(0, 1fr); }
  #whatsapp-card .wa-pane-thread { display: none; }
  #whatsapp-card .wa-inbox.wa-open .wa-pane-list { display: none; }
  #whatsapp-card .wa-inbox.wa-open .wa-pane-thread { display: block; }
  #whatsapp-card .wa-back { display: block; }
  /* A 390px o chip do número e o nome não cabem na mesma linha: o nome saía
     truncado («Rita Nu…»), e é o nome que diz com QUEM se está a falar. O chip
     passa para uma linha só dele — continua a dizer por que número entrou,
     inteiro, e o nome fica com a largura toda. */
  #whatsapp-card .wa-threadhead { flex-wrap: wrap; }
  #whatsapp-card .wa-threadwho { flex: 1 1 auto; }
  #whatsapp-card .wa-threadhead .wa-chip { flex: 0 0 100%; order: 3; text-align: center; }
  #whatsapp-card .wa-msg { max-width: 86%; }
  #whatsapp-card .wa-new-row select, #whatsapp-card #wa-to, #whatsapp-card #wa-text { flex: 1 1 100%; }
}

/* ── 📓 Card Caderno de receitas ─────────────────────────────────────────────
   Uma receita fechada é um título + metadados; aberta são passos e armadilhas
   em texto pré-formatado (os comandos NÃO podem ser reflowed — um `ssh -n` que
   quebra a meio deixa de se poder copiar). Sem `max-height` em lado nenhum: a
   lista pagina em JS, como no card do WhatsApp. */
#recipes-card .rec-head { display: flex; gap: 8px; margin-bottom: 8px; }
#recipes-card #rec-search {
  flex: 1 1 auto; min-width: 0;
  background: var(--input-bg) !important; border: 1px solid var(--border) !important;
  color: #d3dcec !important; border-radius: var(--radius-sm, 10px) !important;
  padding: 8px 12px !important; font-size: 12.5px !important;
}
#recipes-card #rec-search::placeholder { color: #6d7a90; }
#recipes-card .rec-list { display: flex; flex-direction: column; gap: 6px; }
/* ⚠️ O `border-left-color` TEM de ser `!important`: mais acima neste ficheiro há
   um `details { border-color: var(--border) !important }` que, sem isto, pinta a
   barra de cinzento na mesma — e um `!important` vence qualquer não-`!important`
   por muito específico que seja. A barra colorida do caderno esteve cinzenta
   desde que nasceu por causa disto, e só se apanha a MEDIR o `borderLeftColor`
   renderizado: no CSS a regra parece perfeitamente correcta. */
#recipes-card .rec-item {
  background: var(--panel-2); border: 1px solid var(--border);
  border-left: 3px solid #4d9fff; border-left-color: #4d9fff !important;
  border-radius: var(--radius-sm, 10px); overflow: hidden;
}
#recipes-card .rec-item > summary {
  list-style: none; cursor: pointer; padding: 9px 12px; display: block;
  font-size: 12.5px; color: #e2e8f4; line-height: 1.45;
}
#recipes-card .rec-item > summary::-webkit-details-marker { display: none; }
#recipes-card .rec-item[open] > summary { border-bottom: 1px solid var(--border-subtle); }
#recipes-card .rec-item > summary:hover { background: var(--hover); }
#recipes-card .rec-title { font-weight: 600; }
#recipes-card .rec-meta { display: block; margin-top: 3px; font-size: 10.5px; color: #8f9bb3; }
#recipes-card .rec-times { color: #4d9fff; font-weight: 700; }
#recipes-card .rec-slug { color: #7f8da3; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#recipes-card .rec-body { padding: 10px 12px; font-size: 12px; color: #c8d2e3; }
#recipes-card .rec-summary { margin: 0 0 8px; line-height: 1.55; color: #d3dcec; }
#recipes-card .rec-sub { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #8f9bb3; margin: 8px 0 4px; }
#recipes-card .rec-sub.rec-sub-warn { color: #ffc83c; }
#recipes-card .rec-pre {
  margin: 0; padding: 8px 10px; background: #0d1015; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 10px); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.6; color: #cdd6e5; white-space: pre-wrap; word-break: break-word;
}
#recipes-card .rec-src { margin-top: 8px; font-size: 10.5px; color: #7f8da3; }
#recipes-card .rec-more { margin-top: 8px; }

/* ⛔ O que NÃO funciona. A separação tem de ser visível ANTES de se ler o
   título: alguém a passar os olhos pelo caderno não pode confundir um beco sem
   saída com um passo a seguir. Três sinais redundantes de propósito — a barra
   vermelha à esquerda, o crachá, e o rótulo do estado com a DATA. */
#recipes-card .rec-kinds { display: flex; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
#recipes-card .rec-kind {
  background: var(--panel-2) !important; border: 1px solid var(--border) !important;
  color: #9aa7bd !important; border-radius: 999px !important;
  padding: 5px 12px !important; font-size: 11.5px !important; cursor: pointer;
}
#recipes-card .rec-kind:hover { background: var(--hover) !important; color: #d3dcec !important; }
#recipes-card .rec-kind.is-on {
  background: rgba(77, 159, 255, .16) !important; border-color: #4d9fff !important; color: #cfe4ff !important;
}
#recipes-card .rec-kind.rec-kind-bad.is-on {
  background: rgba(255, 92, 92, .16) !important; border-color: #ff5c5c !important; color: #ffd2d2 !important;
}
#recipes-card .rec-item-bad { border-left-color: #ff5c5c !important; }
#recipes-card .rec-item-ok { border-left-color: #3ddc84 !important; }
#recipes-card .rec-badge {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px;
}
#recipes-card .rec-badge-ok { background: rgba(61, 220, 132, .15); color: #6ee7a5; }
#recipes-card .rec-badge-bad { background: rgba(255, 92, 92, .15); color: #ff8a8a; }
#recipes-card .rec-stale { color: #ffc83c; font-weight: 600; }
#recipes-card .rec-count-bad { color: #ff8a8a; }
#recipes-card .rec-count-ok { color: #67e8a0; }
#recipes-card .rec-sub.rec-sub-bad { color: #ff8a8a; }
#recipes-card .rec-sub.rec-sub-ok { color: #6ee7a5; }
#recipes-card .rec-warnbox {
  margin: 0 0 8px; padding: 8px 10px; border-radius: var(--radius-sm, 10px);
  background: rgba(255, 200, 60, .09); border: 1px solid rgba(255, 200, 60, .28);
  color: #f0dca8; font-size: 11.5px; line-height: 1.55;
}

/* Mac emprestado: corre só o que lhe for FIXADO (fleet-roles.ts `pinned_only`).
   Não é verde como quem recebe tarefas nem âmbar como quem está pausado — é o
   acento, porque não é um aviso: é o estado normal desta máquina. */
.frota-state.pinned { color: var(--accent, #4d9fff); }

/* 🔁 Judite em automático (#judite-auto-card): as conversas com o loop ligado
   AGORA. Uma linha por conversa — objetivo curto, turnos e minutos restantes, e
   o estado de pausa (quota / fila do projeto). Até 10 Ago 2026 o estado do loop
   só existia dentro do /judite e uma conversa de cada vez; com dois loops a
   correr em paralelo (foi o caso das #248 e #255) não havia onde os ver juntos. */
#judite-auto-card .jauto-list { display: flex; flex-direction: column; gap: 8px; }
#judite-auto-card .jauto-row {
  display: block; padding: 9px 11px; border-radius: var(--radius-sm, 10px);
  background: var(--bg-card, #12161f); border: 1px solid var(--line, #232a37);
  border-left: 3px solid var(--accent, #4d9fff);
  color: var(--fg, #e4e8f0); text-decoration: none;
}
#judite-auto-card .jauto-row:hover { border-color: var(--accent, #4d9fff); }
/* Pausado NÃO é erro: é âmbar, e o loop retoma sozinho. */
#judite-auto-card .jauto-row.paused { border-left-color: #ffc83c; }
#judite-auto-card .jauto-top {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  font-size: 12px; font-weight: 700; color: var(--accent, #4d9fff);
}
#judite-auto-card .jauto-meta { font-weight: 600; color: var(--muted, #8c98ad); }
#judite-auto-card .jauto-pause { font-weight: 700; color: #ffc83c; }
#judite-auto-card .jauto-run { font-weight: 700; color: #6ee7a5; }
/* Objetivo e ponto de situação: 2 linhas no máximo — o cartão é um relance, não
   um relatório (esse vive no /judite). */
#judite-auto-card .jauto-obj { margin-top: 3px; font-size: 12.5px; line-height: 1.45; }
#judite-auto-card .jauto-prog {
  margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--muted, #8c98ad);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#judite-auto-card .jauto-proj { margin-top: 3px; font-size: 11px; color: var(--muted, #8c98ad); }