/* ============================================================================
   Design system do site colab — estilo Swiss/Geist (claro default + escuro).
   Fonte ÚNICA de estilo: as páginas não devem ter <style> próprio.
   Tema via [data-theme] no <html> (boot inline anti-FOUC em cada página;
   toggle no shared.js). Os nomes de classe são os MESMOS que os .js geram —
   não renomear sem varrer editor.js/vtracker.js/licoes.js/central.js.
   ========================================================================== */

/* ---- tokens ---------------------------------------------------------- */
:root, [data-theme="light"] {
  --bg: #fafafa;
  --surface: #ffffff;
  --subtle: #f2f2f2;
  --line: #e5e5e5;
  --line-strong: #d4d4d4;
  --fg: #171717;
  --muted: #666666;
  --blue: #0070f3;
  --green: #0f7b45;
  --yellow: #a35a00;
  --red: #cb2a2f;
  --blue-bg: #e8f1fd;
  --green-bg: #e6f4ec;
  --yellow-bg: #fbf1e0;
  --red-bg: #fbe9e9;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05);
  --overlay: rgba(0, 0, 0, .35);
  --radius: 6px;
  --radius-lg: 8px;
  /* terminais (xterm) ficam escuros nos DOIS temas: a saída ANSI do claude é
     calibrada p/ fundo escuro (padrão Geist de code block escuro em página clara) */
  --term-bg: #0a0a0a;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: Consolas, 'Cascadia Mono', monospace;
}
[data-theme="dark"] {
  --bg: #0a0a0a;
  --surface: #111111;
  --subtle: #1a1a1a;
  --line: #262626;
  --line-strong: #3a3a3a;
  --fg: #ededed;
  --muted: #a1a1a1;
  --blue: #52a8ff;
  --green: #3dd68c;
  --yellow: #f5b944;
  --red: #ff6369;
  --blue-bg: #10243e;
  --green-bg: #0f2920;
  --yellow-bg: #2a2008;
  --red-bg: #3c1618;
  --shadow: none;
  --overlay: rgba(0, 0, 0, .6);
}

/* ---- base ------------------------------------------------------------ */
* { box-sizing: border-box }
html { color-scheme: light }
[data-theme="dark"] { color-scheme: dark }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 14px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none }
a:hover { text-decoration: underline }
h1 { font-size: 20px; font-weight: 600; letter-spacing: -.01em }
h2 { font-size: 15px; font-weight: 600 }
::selection { background: var(--blue-bg) }

/* ---- topbar (header unificado; nav preenchida pelo shared.js) --------- */
.topbar {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 10px 18px; background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.topbar .title { font-weight: 600; font-size: 14px; white-space: nowrap }
.topbar .sub { color: var(--muted); font-size: 12px }
.topbar nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-left: auto }
.topbar nav a {
  color: var(--muted); font-size: 13px; padding: 5px 10px; border-radius: var(--radius);
}
.topbar nav a:hover { color: var(--fg); background: var(--subtle); text-decoration: none }
.topbar nav a.active { color: var(--fg); font-weight: 600 }
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.theme-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  width: 30px; height: 30px; border-radius: var(--radius); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0;
}
.theme-btn:hover { color: var(--fg); border-color: var(--line-strong) }

/* ---- layout ----------------------------------------------------------- */
.wrap { max-width: 1280px; margin: 24px auto; padding: 0 20px;
        display: flex; flex-direction: column; gap: 18px }
.wrap.narrow { max-width: 720px }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px }
.grid.tight { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }

/* ---- texto utilitário -------------------------------------------------- */
.lbl { font-size: 11px; color: var(--muted); text-transform: uppercase;
       letter-spacing: .06em; margin: 0 0 6px; font-weight: 500 }
.hint { color: var(--muted); font-size: 12px }
.muted { color: var(--muted) }
.empty { color: var(--muted); font-size: 13px; padding: 8px 2px }
.mono { font-family: var(--mono); font-size: 12px; word-break: break-all }
.big { font-size: 20px; font-weight: 600; margin: 2px 0 }
.msg { margin-top: 10px; font-size: 13px; color: var(--muted) }
.err { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 18px }
kbd {
  background: var(--subtle); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 6px; font-size: 12px; font-family: var(--mono);
}

/* ---- botões ------------------------------------------------------------ */
/* .btn = ação primária (Geist: fg/bg invertidos — preto no claro, branco no escuro) */
.btn {
  padding: 8px 16px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; font-size: 13px; font-weight: 500; font-family: var(--font);
  background: var(--fg); color: var(--bg); transition: opacity .12s;
}
.btn:hover { opacity: .85 }
.btn.ghost { background: var(--surface); color: var(--fg); border-color: var(--line) }
.btn.ghost:hover { opacity: 1; border-color: var(--line-strong); background: var(--subtle) }
.btn.ok { background: var(--green); color: #fff }
.btn.warn { background: var(--yellow-bg); color: var(--yellow); border-color: transparent }
.btn.warn.hot { background: var(--yellow); color: var(--bg) }
.btn:disabled { opacity: .4; cursor: not-allowed }
.btn.mini, .mini { font-size: 12px; padding: 5px 12px }

/* ---- chips e presets (seleção) ----------------------------------------- */
.chip {
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; font-size: 13px; user-select: none;
  background: var(--surface); color: var(--fg);
}
.chip:hover { border-color: var(--line-strong) }
.chip.on { background: var(--fg); border-color: var(--fg); color: var(--bg); font-weight: 500 }
.chip.disabled { opacity: .4; pointer-events: none }
.preset {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; font-size: 12px; background: var(--surface); color: var(--muted);
}
.preset:hover { color: var(--fg); border-color: var(--line-strong) }
.preset.on { background: var(--fg); border-color: var(--fg); color: var(--bg) }

/* ---- builder guiado (vtracker: passos 1-2-3 + modos como cartões) ------- */
.step { padding: 8px 0 }
.step + .step { border-top: 1px dashed var(--line); margin-top: 6px }
.step.step-off { opacity: .5 }
.seg { display: flex; gap: 8px; flex-wrap: wrap }
.seg-opt { flex: 1 1 190px; min-width: 175px; text-align: left; cursor: pointer;
           border: 1px solid var(--line); border-radius: var(--radius-lg);
           background: var(--surface); padding: 9px 12px; font-family: var(--font) }
.seg-opt:hover { border-color: var(--line-strong) }
.seg-opt.on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg) }
.seg-opt .t { font-size: 13px; font-weight: 600; color: var(--fg) }
.seg-opt .d { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4 }
/* medidor do limite de 5h do Claude (vtracker, topo do card Status do dia) */
.usage5h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
           font-size: 12px; color: var(--muted); flex-wrap: wrap }
.usage5h[hidden] { display: none }
.usage5h .u-track { flex: 0 0 160px; height: 6px; border-radius: 3px; background: var(--subtle);
                    border: 1px solid var(--line); overflow: hidden }
.usage5h .u-fill { display: block; height: 100%; width: 0; background: var(--green);
                   transition: width .3s }
.usage5h.warn .u-fill { background: var(--yellow) }
.usage5h.alert .u-fill { background: var(--red) }

/* agendamentos (vtracker) v2: grupo por cliente, N linhas de horário
   (toggle + hora + janela + dias da semana + remover + hint) */
.sched-grp { padding: 6px 0 10px; border-bottom: 1px solid var(--line) }
.sched-grp:last-child { border-bottom: 0 }
.sched-grp-head { display: flex; gap: 10px; align-items: center; justify-content: space-between;
                  padding: 4px 0 2px; font-size: 13px }
.sched-add { padding: 4px 10px; font-size: 12px }
.sched-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
             padding: 8px 0 8px 12px; border-bottom: 1px dashed var(--line) }
.sched-row:last-child { border-bottom: 0 }
.sched-tgl { display: flex; gap: 8px; align-items: center;
             font-size: 13px; cursor: pointer; user-select: none }
.sched-horas { width: 72px }
.sched-dias { display: inline-flex; gap: 4px }
.sched-dias .dia { width: 22px; height: 22px; line-height: 22px; text-align: center;
                   border: 1px solid var(--line); border-radius: 50%; font-size: 11px;
                   cursor: pointer; user-select: none; color: var(--muted) }
.sched-dias .dia.on { background: var(--fg); border-color: var(--fg);
                      color: var(--bg); font-weight: 600 }
.sched-del { border: 0; background: none; color: var(--muted); cursor: pointer;
             font-size: 13px; padding: 2px 6px; border-radius: var(--radius) }
.sched-del:hover { color: var(--red); background: var(--subtle) }

/* ---- formulários -------------------------------------------------------- */
input, select, textarea {
  padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--fg); font-size: 13px; font-family: var(--font);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--blue); outline-offset: -1px; border-color: transparent;
}
textarea { width: 100%; min-height: 120px; padding: 10px; font: inherit; resize: vertical }
input::placeholder, textarea::placeholder { color: var(--muted) }

/* ---- cards --------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 12px; font-size: 13px; letter-spacing: .04em;
           text-transform: uppercase; color: var(--muted);
           display: flex; align-items: center; gap: 8px }
.card ul { padding-left: 20px; margin: 0 }
.card li { margin: 6px 0 }
.scard { background: var(--bg); border: 1px solid var(--line);
         border-radius: var(--radius-lg); padding: 12px 14px }
.scard .name { font-weight: 600; font-size: 14px;
               display: flex; justify-content: space-between; align-items: center }
.scard .mono { color: var(--muted); font-size: 11px }
.metrics { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; font-size: 12px }
.metrics b { color: var(--fg) } .metrics span { color: var(--muted) }
/* página /semanais: fase + checklist + avisos */
.sem-phase { font-size: 11px; padding: 2px 8px; border-radius: 10px;
             background: var(--subtle); color: var(--muted); font-weight: 500 }
.sem-phase[data-help] { cursor: help }
.sem-phase.warn { background: rgba(181, 133, 0, .14); color: #b58500 }
.sem-phase.good { background: rgba(56, 118, 29, .14); color: #38761d }
.sem-phase.info { background: rgba(47, 111, 235, .12); color: #2f6feb }
/* componente "?" de ajuda (shared.js) — única ajuda visual do site */
.help { display: inline-flex; align-items: center; justify-content: center;
        width: 16px; height: 16px; border-radius: 50%;
        border: 1px solid var(--line-strong); background: transparent;
        color: var(--muted); font-size: 11px; line-height: 1;
        margin-left: 6px; padding: 0; cursor: pointer; vertical-align: middle }
.help:hover { color: var(--fg); border-color: var(--fg) }
.help-pop { position: fixed; z-index: 80; max-width: 280px;
            background: var(--bg); border: 1px solid var(--line-strong);
            border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
            padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
            color: var(--fg) }
.sem-checks { margin: 6px 0; font-size: 12px; line-height: 1.9 }
.sem-ok { color: #38761d } .sem-pend { color: var(--muted) }
.sem-del { margin: 6px 0; font-size: 12px; color: #c0392b }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px;
        background: var(--bg); border: 1px solid var(--line);
        border-radius: var(--radius-lg); min-width: 120px }
.stat .v { font-size: 22px; font-weight: 600 }
.stat .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em }
.stat.alert .v { color: var(--yellow) }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
      padding: 5px 0; border-bottom: 1px solid var(--line) }
.kv:last-child { border-bottom: 0 }
.kv .k { color: var(--muted) }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block }
.dot.ok { background: var(--green) } .dot.warn { background: var(--yellow) } .dot.err { background: var(--red) }
.go { display: inline-block; margin-top: 10px; font-size: 12px }
ul.plain { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; color: var(--muted) }
ul.plain li { padding: 3px 0; border-bottom: 1px solid var(--line) }
ul.plain li:last-child { border-bottom: 0 }
.item { background: var(--bg); border: 1px solid var(--line);
        border-radius: var(--radius-lg); padding: 10px 14px; margin: 8px 0; font-size: 14px }
.item .meta { color: var(--muted); font-size: 12px; margin-bottom: 4px }

/* ---- badges e estados ------------------------------------------------------ */
.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px;
         background: var(--subtle); color: var(--muted); white-space: nowrap }
.badge.ok, .badge.aplicada { background: var(--green-bg); color: var(--green) }
.badge.warn, .badge.proposta { background: var(--yellow-bg); color: var(--yellow) }
.badge.alert { background: var(--red-bg); color: var(--red) }
.badge.aprovada { background: var(--blue-bg); color: var(--blue) }
.badge.rejeitada { background: var(--subtle); color: var(--muted) }
.state { font-size: 11px; padding: 2px 9px; border-radius: 999px; white-space: nowrap }
.state.run { background: var(--yellow-bg); color: var(--yellow) }
.state.ok { background: var(--green-bg); color: var(--green) }
.state.err { background: var(--red-bg); color: var(--red) }

/* ---- tabelas ----------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 13px }
th { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase;
     letter-spacing: .05em; padding: 6px 10px; border-bottom: 1px solid var(--line);
     font-weight: 500 }
td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top }
tr:hover td { background: var(--subtle) }

/* ---- execuções ao vivo (vtracker/licoes) -------------------------------------- */
#runs { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
        gap: 14px; margin-top: 12px }
#runHead { display: flex; align-items: center; gap: 10px }
#runCount { font-size: 12px; color: var(--muted) }
.run { background: var(--term-bg); border: 1px solid var(--line);
       border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column }
.run .bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
            background: var(--surface); border-bottom: 1px solid var(--line) }
.run .bar .rt { font-size: 12px; font-weight: 600; flex: 1;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.run .bar .x { cursor: pointer; color: var(--muted); padding: 0 4px }
.run .bar .x:hover { color: var(--fg) }
/* barrinha de fases do run (chat.js rec.setProgress; oculta até a 1ª fase anunciada) */
.run-prog { display: inline-flex; align-items: center; gap: 6px; flex: none }
.run-prog[hidden] { display: none }
.run-prog-track { width: 64px; height: 4px; border-radius: 2px; background: var(--subtle);
                  border: 1px solid var(--line); overflow: hidden; display: inline-block }
.run-prog-fill { display: block; height: 100%; width: 0; background: var(--green);
                 transition: width .3s }
.run-prog-t { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums }
.run .xterm-host { height: 300px; padding: 6px 8px }

/* ---- modal / toast -------------------------------------------------------------- */
.modal { position: fixed; inset: 0; background: var(--overlay); display: none;
         align-items: center; justify-content: center; z-index: 60 }
.modal.show { display: flex }
.modal .sheet { background: var(--surface); border: 1px solid var(--line);
                border-radius: 10px; max-width: 820px; width: 90%; max-height: 86vh;
                overflow: auto; padding: 22px 26px; box-shadow: 0 10px 40px rgba(0,0,0,.18) }
.modal .sheet h1, .modal .sheet h2, .modal .sheet h3 { line-height: 1.25 }
.modal .close { float: right; cursor: pointer; color: var(--muted); font-size: 20px }
.modal .close:hover { color: var(--fg) }
.modal pre { font-family: var(--mono); font-size: 12px; white-space: pre-wrap;
             background: var(--bg); border: 1px solid var(--line);
             border-radius: var(--radius-lg); padding: 12px }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
         background: var(--surface); border: 1px solid var(--line); color: var(--fg);
         padding: 10px 16px; border-radius: var(--radius-lg); font-size: 13px;
         opacity: 0; transition: .2s; pointer-events: none;
         box-shadow: 0 4px 20px rgba(0,0,0,.15); z-index: 70 }
.toast.show { opacity: 1 }

/* ---- login (pré-auth: esta página só carrega styles.css, sem shared.js) ---------- */
.login-body { display: flex; min-height: 100vh; align-items: center; justify-content: center }
.login-card { background: var(--surface); border: 1px solid var(--line);
              padding: 32px; border-radius: 10px; width: 330px; box-shadow: var(--shadow) }
.login-card h1 { font-size: 18px; margin: 0 0 4px }
.login-card p { color: var(--muted); font-size: 13px; margin: 0 0 20px }
.login-card input { width: 100%; padding: 10px 12px; font-size: 14px }
.login-card button { width: 100%; margin-top: 12px; padding: 10px; font-size: 14px }

/* ============================================================================
   EDITOR COLABORATIVO (index.html)
   ========================================================================== */
/* body do editor = coluna 100vh (topbar + status fixos, split ocupa o resto —
   sem calc() mágico de altura) */
.editor-body { display: flex; flex-direction: column; height: 100vh; overflow: hidden }
.editor-body .topbar { position: static }
#status { font-size: 12px; color: var(--muted); padding: 4px 18px;
          background: var(--bg); border-bottom: 1px solid var(--line); flex: none }
.presence { color: var(--muted); font-size: 12px; white-space: nowrap }
.split { display: flex; flex: 1; min-height: 0 }
.pane-rail { flex: 0 0 190px; min-width: 190px; background: var(--bg);
             border-right: 1px solid var(--line);
             display: flex; flex-direction: column; overflow: auto }
.rail-head { padding: 12px 12px 6px; font-size: 11px; color: var(--muted);
             text-transform: uppercase; letter-spacing: .05em }
.ed-item { display: flex; align-items: center; gap: 4px; padding: 7px 10px 7px 12px;
           cursor: pointer; font-size: 13px; border-left: 2px solid transparent }
.ed-item:hover { background: var(--subtle) }
.ed-item.active { background: var(--subtle); border-left-color: var(--fg); font-weight: 500 }
.ed-item .ed-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ed-item .ed-act { visibility: hidden; color: var(--muted); padding: 0 3px; border-radius: 4px }
.ed-item .ed-act:hover { color: var(--fg) }
.ed-item:hover .ed-act { visibility: visible }
.rail-new { margin: 8px 12px; padding: 8px; text-align: center;
            border: 1px dashed var(--line-strong); border-radius: var(--radius);
            color: var(--muted); cursor: pointer; font-size: 13px }
.rail-new:hover { color: var(--fg); border-color: var(--fg) }
/* grupos por cliente na lista de editores (organização por cliente/semana) */
.ed-group > summary { padding: 7px 10px 5px 12px; font-size: 11px; color: var(--muted);
                      text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
                      list-style: none; user-select: none }
.ed-group > summary::before { content: '▸ '; }
.ed-group[open] > summary::before { content: '▾ '; }
.ed-group > summary:hover { color: var(--fg) }
.ed-group .ed-item { padding-left: 20px }
.pane-editor { flex: 1 1 50%; min-width: 300px; overflow: auto; background: var(--subtle) }
/* pane do terminal pessoal: escuro nos 2 temas (ver --term-bg no topo) */
.pane-term { flex: 1 1 50%; min-width: 300px; background: var(--term-bg);
             border-left: 1px solid var(--line); display: flex; flex-direction: column;
             transition: flex-basis .15s, min-width .15s }
.pane-term.collapsed { flex: 0 0 0; min-width: 0; overflow: hidden; border-left: 0 }
.pane-term .term-bar { padding: 6px 12px; color: #a1a1a1; font-size: 12px;
                       border-bottom: 1px solid #262626 }
#terminal { flex: 1; padding: 6px 8px; overflow: hidden }

/* conteúdo do editor = espelho do e-mail final: fundo BRANCO + Arial + link
   #1155cc nos DOIS temas, de propósito fora dos tokens. NÃO tematizar. */
.email-wrap { max-width: 900px; margin: 18px auto; background: #fff; color: #111;
              border-radius: var(--radius-lg); overflow: hidden;
              border: 1px solid var(--line); box-shadow: var(--shadow) }
#editor { min-height: 60vh; font-family: Arial, sans-serif; font-size: 14px }
.ql-editor a { color: #1155cc; text-decoration: underline }

/* Quill snow: só o CHROME (toolbar/bordas/pickers) segue o tema; este arquivo é
   linkado DEPOIS do quill.snow.css do CDN, então a cascata resolve.
   Cuidado: a toolbar fica dentro do .email-wrap branco — os ícones usam cor fixa
   escura (não var(--fg)) p/ não sumirem no tema escuro. */
.ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid #e5e5e5; background: #fff }
.ql-container.ql-snow { border: 0 }
/* cursores colaborativos: o quill-cursors 4.0.4 INJETA o próprio CSS (caret na posição
   certa, cor inline). NÃO adicionar CSS custom de .ql-cursor — medido via puppeteer:
   qualquer override desloca o caret remoto ~263px pra baixo (o bug "3 linhas abaixo"). */

/* ---- chat do assistente (chat.js — pane do editor e cards de run) --------- */
.pane-chat { flex: 1 1 50%; min-width: 300px; background: var(--bg);
             border-left: 1px solid var(--line); display: flex; flex-direction: column;
             transition: flex-basis .15s, min-width .15s }
.pane-chat.collapsed { flex: 0 0 0; min-width: 0; overflow: hidden; border-left: 0 }
.chat-bar { padding: 6px 12px; color: var(--muted); font-size: 12px;
            border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center }
.bar-link { margin-left: auto; font-size: 11px; cursor: pointer; white-space: nowrap }
.pane-term .term-bar { display: flex; gap: 10px; align-items: center }
.chat-host { flex: 1; display: flex; flex-direction: column; min-height: 0 }
.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 6px;
               display: flex; flex-direction: column; gap: 8px }
.chat-empty { color: var(--muted); font-size: 13px; max-width: 420px;
              margin: auto; text-align: center; line-height: 1.6 }
.chat-msg { max-width: 88%; padding: 7px 12px; border-radius: 10px;
            font-size: 13.5px; line-height: 1.55; overflow-wrap: break-word }
.chat-msg.user { align-self: flex-end; background: var(--fg); color: var(--bg);
                 border-bottom-right-radius: 3px; white-space: pre-wrap }
.chat-msg.assistant { align-self: flex-start; background: var(--surface);
                      border: 1px solid var(--line); border-bottom-left-radius: 3px }
.chat-msg.assistant > :first-child { margin-top: 0 }
.chat-msg.assistant > :last-child { margin-bottom: 0 }
.chat-msg.assistant pre { overflow-x: auto; background: var(--subtle);
                          border: 1px solid var(--line); border-radius: var(--radius);
                          padding: 8px 10px; font-family: var(--mono); font-size: 12px }
.chat-msg.assistant code { font-family: var(--mono); font-size: 12px;
                           background: var(--subtle); padding: 1px 4px; border-radius: 4px }
.chat-msg.assistant pre code { background: none; padding: 0 }
.chat-msg.assistant ul, .chat-msg.assistant ol { padding-left: 20px; margin: 6px 0 }
.chat-msg.error { align-self: center; background: var(--red-bg); color: var(--red);
                  font-size: 12px; max-width: 96% }
.chat-tool { align-self: flex-start; max-width: 88%; font-size: 12px;
             border: 1px solid var(--line); border-radius: var(--radius-lg);
             background: var(--subtle) }
.chat-tool summary { list-style: none; cursor: pointer; display: flex;
                     align-items: center; gap: 7px; padding: 4px 10px; color: var(--muted) }
.chat-tool summary::-webkit-details-marker { display: none }
.chat-tool-spin { width: 10px; height: 10px; flex: none; border-radius: 50%;
                  border: 2px solid var(--line-strong); border-top-color: var(--fg);
                  animation: chatspin .8s linear infinite }
.chat-tool:not(.run) .chat-tool-spin { display: none }
.chat-tool.ok .chat-tool-label::after { content: ' ✓'; color: var(--green) }
.chat-tool.err .chat-tool-label::after { content: ' ✗'; color: var(--red) }
.chat-tool-body { border-top: 1px solid var(--line); padding: 6px 10px;
                  display: flex; flex-direction: column; gap: 6px }
.chat-tool-detail, .chat-tool-summary { font-family: var(--mono); font-size: 11px;
                  color: var(--muted); white-space: pre-wrap; word-break: break-word }
.chat-typing { display: flex; gap: 4px; padding: 6px 4px; align-self: flex-start }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
                    animation: chatblink 1.2s infinite }
.chat-typing span:nth-child(2) { animation-delay: .2s }
.chat-typing span:nth-child(3) { animation-delay: .4s }
.chat-composer { display: flex; gap: 8px; padding: 10px 12px; align-items: flex-end;
                 border-top: 1px solid var(--line); background: var(--surface) }
.chat-composer textarea { flex: 1; resize: none; max-height: 160px; min-height: 36px }
.chat-composer .chat-stop { flex: none }
@keyframes chatspin { to { transform: rotate(360deg) } }
@keyframes chatblink { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }
/* card de execução em modo chat (dashboards): superfície do tema, não o poço escuro.
   Tamanho FIXO com rolagem interna (dono 20/07: card nunca cresce com a conversa);
   max-height protege telas baixas (celular). Barra tem ▾/▸ p/ recolher o card. */
.run { overflow: hidden }
.run.chat-run { background: var(--surface) }
.chat-run .chat-host.run-host { height: 380px; max-height: 65vh }
.run.collapsed .chat-host, .run.collapsed .xterm-host { display: none }
.chat-log { font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap;
            word-break: break-word; background: var(--term-bg); color: #ededed;
            border-radius: var(--radius); padding: 8px 10px; margin: 0 }

/* modal de publicação Gmail (admin) */
.modal .sheet.pub { max-width: 440px; display: flex; flex-direction: column; gap: 10px }
.modal .sheet.pub h3 { margin: 0 0 4px; font-size: 15px }
.modal .sheet.pub label { display: flex; flex-direction: column; gap: 4px;
                          font-size: 12px; color: var(--muted) }
.modal .sheet.pub .acts { display: flex; gap: 8px; margin-top: 6px }
.modal .sheet.pub .acts button { flex: 1 }
#pubHint { font-size: 12px; color: var(--muted); min-height: 16px; margin: 0 }
