/* ==========================================================================
   AUTOPILOT — design system v2 ("sala de controle")
   Claro por padrão, escuro opcional ([data-theme="dark"], botão no header).
   Os NOMES das variáveis de cor (--cyan, --violet, --amber, --danger,
   --done, --text-dim, --text-dimmer) são usados também via
   `style="color:var(--x)"` gerado em app.js — não renomear sem atualizar
   app.js junto.

   Princípios desta versão:
   - uma única linguagem de acento: barras de 2px (projeto ativo, aba ativa,
     status da tarefa) — nada de caixas coloridas competindo entre si;
   - tipografia faz o trabalho: Inter pra interface, mono só pra dados
     (hora, datas, ids) e micro-rótulos — dá cara de instrumento, sem ruído;
   - chrome mínimo: bordas sutis, sombras quase invisíveis, cor só onde
     carrega significado (status, ação primária).
   ========================================================================== */

:root{
  /* ---- tema claro (padrão) ---- */
  --bg:#F4F5F7;
  --bg-panel:#FFFFFF;
  --bg-raised:#FFFFFF;
  --bg-inset:#F8F9FB;
  --border:#E5E8EE;
  --border-bright:#CBD2DC;
  --text:#181C25;
  --text-dim:#5A6372;
  --text-dimmer:#8A93A3;

  /* cores semânticas — mesmo nome nos dois temas, valor ajustado por tema */
  --cyan:#2B5FD9;      /* marca / ação primária / "em execução" */
  --violet:#6C4CE0;    /* origem: modo autônomo */
  --amber:#9C6A08;     /* atenção / descartado */
  --danger:#C9333E;    /* erro / destrutivo / urgente */
  --done:#147A50;      /* concluído / ativo */

  --shadow-sm:0 1px 2px rgba(16,20,28,0.05);
  --shadow-md:0 10px 30px rgba(16,20,28,0.10), 0 2px 6px rgba(16,20,28,0.05);
  --overlay:rgba(18,22,30,0.45);

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;

  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  color-scheme:light;
}

[data-theme="dark"]{
  --bg:#0C0E13;
  --bg-panel:#12151D;
  --bg-raised:#191D28;
  --bg-inset:#0F1219;
  --border:#202532;
  --border-bright:#333C4E;
  --text:#E9EDF4;
  --text-dim:#9AA5B8;
  --text-dimmer:#666F80;

  --cyan:#6E96F2;
  --violet:#A78BFA;
  --amber:#E0A63C;
  --danger:#F0787E;
  --done:#3ECF94;

  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 14px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.35);
  --overlay:rgba(3,5,9,0.66);

  color-scheme:dark;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:13.5px;
  -webkit-font-smoothing:antialiased;
  transition:background-color .15s ease, color .15s ease;
}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:var(--border-bright); border-radius:4px;}
::-webkit-scrollbar-track{background:transparent;}

a, button, input, select, textarea{font-family:inherit;}
button{font:inherit;}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* micro-rótulo em mono — o "instrumento" da identidade: usado no brand, em
   títulos de grupo, no relógio e em datas. Um só padrão, aplicado em todo
   lugar que mostra metadado. */
.brand, .clock, .card-date, .msg-meta,
.settings-group-title, .sidebar-section-label,
.project-toggle-status{
  font-family:var(--mono);
}

/* ---------- layout geral: sidebar de projetos + coluna de conteúdo ---------- */
.app-shell{display:flex; align-items:stretch; min-height:100%;}
.app-main{flex:1; min-width:0; display:flex; flex-direction:column;}

.sidebar{
  width:232px; flex-shrink:0;
  display:flex; flex-direction:column; gap:14px;
  padding:18px 14px 14px; background:var(--bg-panel); border-right:1px solid var(--border);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-brand{
  font-size:12px; font-weight:600; letter-spacing:0.14em;
  display:flex; align-items:center; gap:9px; padding:2px 8px 4px;
  color:var(--text);
}
.sidebar-section-label{
  font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-dimmer); padding:0 8px; margin-bottom:-6px;
}
.sidebar-projects{display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto;}
.sidebar-project-row{display:flex; align-items:stretch; gap:2px; border-radius:var(--radius-sm);}
.sidebar-project-item{
  display:block; width:100%; flex:1; min-width:0; text-align:left;
  font-size:13px; color:var(--text-dim); background:none;
  border:none; border-left:2px solid transparent;
  border-radius:var(--radius-sm);
  padding:8px 10px; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:background-color .1s ease, color .1s ease;
}
.sidebar-project-item:hover{color:var(--text); background:color-mix(in srgb, var(--text) 5%, transparent);}
.sidebar-project-item.active{
  color:var(--text); font-weight:600; border-left-color:var(--cyan);
  background:color-mix(in srgb, var(--cyan) 9%, transparent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.sidebar-project-item:disabled{cursor:default; opacity:0.45;}
.sidebar-project-item:disabled:hover{color:var(--text-dim); background:none;}
.sidebar-project-toggle-btn{
  flex-shrink:0; width:28px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; line-height:1; color:var(--done);
  background:none; border:none; border-radius:var(--radius-sm); cursor:pointer;
}
.sidebar-project-toggle-btn:hover{background:color-mix(in srgb, var(--text) 8%, transparent);}
.sidebar-project-row.inactive .sidebar-project-toggle-btn{color:var(--text-dimmer);}
.sidebar-project-row.inactive .sidebar-project-toggle-btn:hover{color:var(--text);}
.sidebar-new-btn{
  font-size:12.5px; font-weight:500; text-align:center; padding:8px 10px;
  color:var(--text-dim);
  border:1px dashed var(--border-bright); border-radius:var(--radius-sm);
  background:none; cursor:pointer;
}
.sidebar-new-btn:hover{border-color:var(--cyan); color:var(--cyan); text-decoration:none;}

.sidebar-footer-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding-top:12px; border-top:1px solid var(--border);
}
.tips-toggle-label{
  display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-dimmer); cursor:pointer;
}
.tips-toggle-label:hover{color:var(--text-dim);}
.tips-toggle-label input[type="checkbox"]{accent-color:var(--cyan); width:13px; height:13px; cursor:pointer;}

/* ---------- header: uma faixa só — título + status à esquerda, utilidades à
   direita; embaixo, a linha de agendamento como metadado discreto ---------- */
header{
  position:sticky; top:0; z-index:10;
  padding:14px 24px 0;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
}
.top-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.brand{
  font-size:12px; font-weight:600; letter-spacing:0.14em;
  display:flex; align-items:center; gap:9px;
}
.brand .dot{
  width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cyan) 18%, transparent);
}
.current-project-title{
  font-size:16px; font-weight:600; letter-spacing:-0.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46vw;
}
.clock{font-size:11.5px; color:var(--text-dimmer); letter-spacing:0.03em;}

/* ---------- header: menu de conta (relógio + tema + usuário/admin/sair) ----------
   Consolidação de 20/09/2026: esses itens saíram da faixa principal do
   cabeçalho e foram para um dropdown só, aberto pelo ícone "⋮" — mesmo
   padrão visual do menu "+ adicionar" do canvas (.canvas-add-menu). */
.header-account{position:relative; margin-left:auto;}
.header-account-dropdown{
  position:absolute; top:calc(100% + 6px); right:0; z-index:20; min-width:170px;
  background:var(--bg-raised); border:1px solid var(--border-bright); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); padding:10px 12px;
  display:flex; flex-direction:column; align-items:flex-end; gap:9px;
}
.header-account-dropdown[hidden]{display:none;}
.header-account-dropdown .header-username{margin-right:0;}

.schedule-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:7px 0 10px;
}
.schedule-row .section-sub{margin-top:0;}
.schedule-row .link-btn{font-size:12px;}

.busy-indicator{
  font-size:11px; font-weight:600; letter-spacing:0.05em;
  color:var(--cyan); display:inline-flex; align-items:center; gap:7px;
  background:color-mix(in srgb, var(--cyan) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  border-radius:999px; padding:3px 11px;
}
.busy-indicator::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); animation:pulse 1.1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.25;}}

/* 25/09/2026 — "N execuções em andamento": só aparece quando a instância
   está com MAIS DE UMA execução ao mesmo tempo (updateRunsIndicator em
   app.js). Mesma pílula do "executando", em tom neutro e sem a bolinha
   pulsando: o "executando" é o estado DESTE projeto, este aqui é recado
   sobre a instância inteira. */
.runs-indicator{
  font-size:11px; font-weight:600; letter-spacing:0.03em;
  color:var(--text-dimmer); align-items:center; gap:7px;
  background:color-mix(in srgb, var(--text) 6%, transparent);
  border:1px solid var(--border-bright);
  border-radius:999px; padding:3px 11px; cursor:default;
}

body.busy #runNextBtn,
body.busy [id^="run-"]{opacity:0.45; pointer-events:none;}

.section-sub{font-size:12px; color:var(--text-dimmer); margin-top:6px; line-height:1.55;}

.no-projects-banner{
  max-width:860px; margin:14px auto 0; padding:11px 16px;
  background:color-mix(in srgb, var(--amber) 8%, var(--bg-panel));
  border:1px solid color-mix(in srgb, var(--amber) 32%, transparent);
  border-radius:var(--radius-md);
  font-size:12.5px; color:var(--text); line-height:1.6; position:relative; z-index:1;
}
.no-projects-banner code{
  font-family:var(--mono);
  background:color-mix(in srgb, var(--text) 8%, transparent);
  padding:1px 5px; border-radius:4px; font-size:11.5px;
}

/* ---------- primeiro acesso: nenhum projeto criado ainda ---------- */
body.no-projects-yet nav.tabs,
body.no-projects-yet main,
body.no-projects-yet .schedule-row{display:none;}

.welcome-state{display:flex; justify-content:center; padding:48px 20px;}
.welcome-card{
  width:100%; max-width:540px; background:var(--bg-panel);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:32px 34px 28px;
}
.welcome-title{font-size:19px; font-weight:700; letter-spacing:-0.01em; margin-bottom:8px;}
.welcome-lead{font-size:13.5px; color:var(--text-dim); line-height:1.6;}
.welcome-steps{list-style:none; margin:22px 0 6px; display:flex; flex-direction:column; gap:13px;}
.welcome-steps li{display:flex; align-items:flex-start; gap:12px; font-size:13.5px; line-height:1.55;}
.welcome-step-n{
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:color-mix(in srgb, var(--cyan) 12%, transparent);
  color:var(--cyan); font-size:11.5px; font-weight:600; font-family:var(--mono);
  display:inline-flex; align-items:center; justify-content:center;
}
.welcome-safe{
  margin-top:20px; padding:11px 14px; font-size:12.5px; line-height:1.6;
  color:var(--text-dim); background:color-mix(in srgb, var(--done) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--done) 26%, transparent);
  border-radius:var(--radius-md);
}
.welcome-actions{margin-top:22px;}
.welcome-actions .action{width:100%; padding:11px 16px; font-size:14px;}
.welcome-foot{margin-top:13px; font-size:11.5px; color:var(--text-dimmer); text-align:center;}

/* ---------- blocos do popup de configurações ---------- */
.settings-group{
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px 16px; margin-bottom:18px; background:var(--bg-inset);
}
.settings-group-title{
  font-size:10.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-dimmer); margin-bottom:10px;
}
.settings-group .checkbox-row{margin-top:10px;}

.checkbox-row{
  display:flex; align-items:center; gap:8px; margin-top:8px;
  font-size:12.5px; color:var(--text-dim); cursor:pointer;
}
.checkbox-row input[type="checkbox"]{accent-color:var(--cyan); width:14px; height:14px; cursor:pointer;}

.interval-control{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-dim);}
.interval-control input{
  width:52px; background:var(--bg-panel); border:1px solid var(--border-bright); border-radius:var(--radius-sm);
  color:var(--text); padding:5px 6px; font-size:12.5px; text-align:center;
}
.interval-control select{
  background:var(--bg-panel); border:1px solid var(--border-bright); border-radius:var(--radius-sm);
  color:var(--text); padding:5px 8px; font-size:12.5px; cursor:pointer;
}

/* ---------- barra de ferramentas dos painéis (filtros, ações secundárias) ---------- */
.filter-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; color:var(--text-dimmer); margin:14px 0 0;
}
.filter-row input[type="date"]{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text-dim); padding:5px 8px; font-size:12px;
}
.filter-row input[type="date"]:hover{border-color:var(--border-bright);}
.filter-row .spacer{flex:1;}

.icon-btn{
  background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text-dim); width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; line-height:1;
}
.icon-btn:hover{border-color:var(--border-bright); color:var(--text);}

/* botão secundário (fantasma) — "executar agora", "nova pasta" etc. */
.btn-secondary{
  font-size:12.5px; font-weight:500; color:var(--text-dim);
  background:var(--bg-panel); border:1px solid var(--border-bright);
  border-radius:var(--radius-sm); padding:7px 14px; cursor:pointer;
  white-space:nowrap;
}
.btn-secondary:hover{border-color:var(--cyan); color:var(--cyan);}

/* ---------- dica de uso ---------- */
.panel-head{display:flex; justify-content:flex-end; margin-bottom:8px;}
.tip-btn{
  font-size:11px; color:var(--text-dimmer); background:none;
  border:none; border-radius:999px; padding:3px 8px; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
}
.tip-btn::before{
  content:'?'; display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; border:1px solid var(--border-bright);
  font-size:10px; font-weight:600; font-family:var(--mono);
}
.tip-btn:hover{color:var(--cyan);}
.tip-btn:hover::before{border-color:var(--cyan);}

/* ---------- abas ---------- */
nav.tabs{
  display:flex; gap:2px; padding:0 24px;
  background:var(--bg-panel); border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none;
  position:sticky; top:0; z-index:9;
}
nav.tabs::-webkit-scrollbar{display:none;}
.tab-btn{
  font-size:13px; font-weight:500;
  color:var(--text-dim); background:none; border:none;
  padding:10px 13px 11px; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  flex-shrink:0; white-space:nowrap;
  transition:color .1s ease;
}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--text); font-weight:600; border-color:var(--cyan);}

main{
  max-width:860px; width:100%; margin:0 auto; padding:22px 24px 64px;
  position:relative; z-index:1;
}
main.main-wide{max-width:1500px;}
.panel{display:none;}
.panel.active{display:block; animation:fade-in .12s ease;}
@keyframes fade-in{from{opacity:0; transform:translateY(2px);} to{opacity:1; transform:none;}}

/* ---------- controles genéricos ---------- */
.add-row{display:flex; gap:8px;}
.add-row input{
  flex:1; background:var(--bg-panel); border:1px solid var(--border-bright); border-radius:var(--radius-sm);
  color:var(--text); padding:10px 13px; font-size:13.5px;
}
.add-row input::placeholder{color:var(--text-dimmer);}
.add-row select{
  background:var(--bg-panel); border:1px solid var(--border-bright); border-radius:var(--radius-sm);
  color:var(--text-dim); padding:10px 10px; font-size:12.5px; cursor:pointer;
}

button.action{
  font-size:13px; font-weight:600;
  background:var(--cyan); color:#fff; border:none; border-radius:var(--radius-sm);
  padding:10px 18px; cursor:pointer;
  white-space:nowrap;
}
button.action:hover{filter:brightness(0.94);}
button.action:disabled{opacity:0.5; cursor:not-allowed;}
[data-theme="dark"] button.action{color:#0C0E13;}

.link-btn{
  background:none; border:none; color:var(--cyan); font-size:12.5px;
  cursor:pointer; padding:0; text-decoration:none;
}
.link-btn:hover{text-decoration:underline;}

.placeholder{color:var(--text-dimmer); font-style:italic; font-size:12.5px;}

/* ---------- cards de tarefa ---------- */
#taskCards{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
.task-card{
  border:1px solid var(--border); border-left:2px solid var(--border-bright);
  border-radius:var(--radius-md); padding:13px 16px;
  background:var(--bg-panel);
}
.task-card.status-running{border-left-color:var(--cyan);}
.task-card.status-done{border-left-color:var(--done);}
.task-card.status-error{border-left-color:var(--danger);}
.task-card.status-discarded{border-left-color:var(--amber);}
.task-card.is-urgent{border-left-color:var(--danger);}
.card-head{display:flex; align-items:center; gap:6px; margin-bottom:9px; flex-wrap:wrap;}
.badge{
  font-size:10px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
  background:color-mix(in srgb, currentColor 11%, transparent);
  border-radius:4px; padding:3px 8px;
}
.origin-tag{
  font-size:10.5px; font-weight:500; color:var(--violet);
  background:color-mix(in srgb, var(--violet) 10%, transparent);
  border-radius:4px; padding:3px 8px;
}
.urgent-tag{
  font-size:10px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--danger); background:color-mix(in srgb, var(--danger) 11%, transparent);
  border-radius:4px; padding:3px 8px;
}
.priority-tag{font-size:10.5px; font-weight:500; border-radius:4px; padding:3px 8px;}
.priority-tag.priority-alta{color:var(--danger); background:color-mix(in srgb, var(--danger) 11%, transparent);}
.priority-tag.priority-media{color:var(--amber); background:color-mix(in srgb, var(--amber) 11%, transparent);}
.priority-tag.priority-baixa{color:var(--text-dimmer); background:color-mix(in srgb, var(--text-dimmer) 12%, transparent);}
.card-date{margin-left:auto; font-size:10.5px; color:var(--text-dimmer); letter-spacing:0.02em;}
.card-text{font-size:13.5px; line-height:1.55; margin-bottom:9px; white-space:pre-wrap;}
.card-summary{
  font-size:12.5px; line-height:1.6; color:var(--text-dim);
  background:var(--bg-inset);
  border-left:2px solid var(--border-bright); padding:9px 12px; margin-bottom:10px;
  white-space:pre-wrap; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.card-actions{display:flex; gap:6px; flex-wrap:wrap;}
.refresh-btn{
  font-size:11.5px; font-weight:500; color:var(--text-dim);
  background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:5px 11px; cursor:pointer;
}
.refresh-btn:hover{color:var(--cyan); border-color:var(--cyan);}
.refresh-btn.danger:hover{color:var(--danger); border-color:var(--danger);}
.refresh-btn.active-urgent{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, transparent); background:color-mix(in srgb, var(--danger) 8%, transparent);}
.loading-dot{color:var(--text-dim); font-size:12.5px;}
.loading-dot::after{content:'●●●'; letter-spacing:2px; color:var(--cyan); animation:blink 1.2s infinite; margin-left:6px;}
@keyframes blink{0%,100%{opacity:0.2;} 50%{opacity:1;}}

/* ---------- mensagens ---------- */
#messageThread{
  display:flex; flex-direction:column; gap:10px; max-height:58vh; overflow-y:auto;
  padding:16px; margin-top:14px;
  background:var(--bg-inset); border:1px solid var(--border); border-radius:var(--radius-md);
}
.msg{border-radius:var(--radius-md); padding:9px 13px; max-width:82%; border:1px solid var(--border); background:var(--bg-panel);}
.msg-claude{align-self:flex-start; border-left:2px solid var(--violet);}
.msg-user{
  align-self:flex-end; margin-left:auto;
  background:color-mix(in srgb, var(--cyan) 8%, var(--bg-panel));
  border-color:color-mix(in srgb, var(--cyan) 24%, var(--border));
}
.msg-system{
  align-self:center; max-width:100%;
  background:color-mix(in srgb, var(--danger) 7%, var(--bg-panel));
  border-color:color-mix(in srgb, var(--danger) 28%, var(--border));
}
/* recado ROTINEIRO do sistema (kind='notice'): mesma forma centrada do
   alerta, tom neutro — nada de --danger aqui, senão pergunta de rotina
   volta a ter cara de alarme e o alerta de verdade perde o peso. */
.msg-system-notice{
  align-self:center; max-width:100%;
  background:var(--bg-inset);
  border-color:var(--border-bright);
  border-left:2px solid var(--text-dimmer);
  color:var(--text-dim);
}
.msg-meta{font-size:10px; color:var(--text-dimmer); margin-bottom:4px; letter-spacing:0.02em;}
.msg-answered{margin-left:6px; color:var(--done); font-weight:600;}
.msg-text{font-size:13px; line-height:1.55; white-space:pre-wrap;}

/* ---------- arquivos do projeto ---------- */
.files-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-bottom:12px;
}
.files-breadcrumb{display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-size:12.5px; color:var(--text-dim);}
.files-breadcrumb .breadcrumb-link{font-size:12.5px; padding:2px 2px; color:var(--text-dim);}
.files-breadcrumb .breadcrumb-link:hover{color:var(--cyan);}
.files-breadcrumb .breadcrumb-sep{color:var(--text-dimmer); margin:0 2px;}
.files-breadcrumb .breadcrumb-current{font-weight:600; color:var(--text);}
.files-upload-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.files-upload-row .modal-input{flex:1; min-width:220px;}
#filesList{display:flex; flex-direction:column; gap:6px;}
.file-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-panel);
  padding:8px 13px;
}
.file-row:hover{border-color:var(--border-bright);}
.file-row-name{font-size:13px; font-weight:500; word-break:break-all;}
.file-row-meta{
  margin-left:auto; display:flex; align-items:center; gap:10px;
  font-size:11px; color:var(--text-dimmer); white-space:nowrap; font-family:var(--mono);
}
.file-delete-btn, .folder-delete-btn{width:26px; height:26px; font-size:12px; border-color:transparent;}
.file-delete-btn:hover, .folder-delete-btn:hover{border-color:var(--danger); color:var(--danger);}
.folder-row{background:color-mix(in srgb, var(--cyan) 4%, var(--bg-panel));}
.folder-open-btn{font-size:13px; font-weight:500; padding:0; color:var(--text);}
.folder-open-btn:hover{color:var(--cyan); text-decoration:none;}

/* ---------- configurações: toggles de projeto ---------- */
#projectToggleList{display:flex; flex-direction:column; gap:8px; margin-top:6px;}
.project-toggle-row{
  display:flex; flex-direction:column; gap:8px;
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-panel);
  padding:12px 14px;
}
.project-toggle-main{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;}
.project-toggle-name{font-size:13.5px; font-weight:600;}
.project-toggle-usage{font-size:11px; white-space:nowrap; font-family:var(--mono);}
.project-select-label{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:var(--text-dimmer); cursor:pointer;
}
.project-select-label select{max-width:210px;}
.project-model-select, .project-granularity-select{
  background:var(--bg-inset); border:1px solid var(--border-bright); border-radius:var(--radius-sm);
  color:var(--text); padding:5px 8px; font-size:12px; cursor:pointer;
}
.project-toggle-active-label{display:flex; align-items:center; gap:8px; cursor:pointer;}
.project-toggle-status{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;}
.project-toggle-checkbox{accent-color:var(--cyan); width:15px; height:15px; cursor:pointer;}

.project-backup-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-top:8px; border-top:1px solid var(--border); font-size:12px; color:var(--text-dimmer);
}
.project-backup-toggle-label{display:flex; align-items:center; gap:6px; cursor:pointer;}
.project-backup-toggle-label input{accent-color:var(--cyan); width:14px; height:14px; cursor:pointer;}
.project-backup-freq{display:flex; align-items:center; gap:6px;}
.project-backup-value{
  width:52px; background:var(--bg-inset); border:1px solid var(--border-bright); border-radius:var(--radius-sm);
  color:var(--text); padding:4px 6px; font-size:12px;
}
.project-backup-mode{
  background:var(--bg-inset); border:1px solid var(--border-bright); border-radius:var(--radius-sm);
  color:var(--text); padding:4px 6px; font-size:12px; cursor:pointer;
}
.project-backup-row .project-delete-btn{
  margin-left:auto; font-size:11.5px; color:var(--text-dimmer);
}
.project-backup-row .project-delete-btn:hover{color:var(--danger); text-decoration:none;}
.project-delete-confirm{
  display:flex; flex-direction:column; gap:8px;
  margin-top:2px; padding:10px 12px; border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--danger) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 28%, transparent);
}
.project-delete-confirm[hidden]{display:none;}
.project-delete-warning{font-size:11.5px; color:var(--text-dim); line-height:1.5;}
.project-delete-confirm .modal-input{padding:7px 10px; font-size:12.5px; flex:1; min-width:180px;}
.project-delete-confirm .refresh-btn.danger{
  color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, transparent);
}
.project-delete-confirm .refresh-btn.danger:disabled{opacity:0.45; cursor:not-allowed;}

.project-storage{
  display:flex; align-items:center; gap:9px; min-width:0; flex-wrap:wrap;
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-panel);
  padding:10px 14px;
}
.project-storage-bar{width:120px; height:5px; border-radius:3px; background:var(--border); overflow:hidden; flex-shrink:0;}
.project-storage-fill{display:block; height:100%; border-radius:3px;}
.project-storage-label{font-size:11px; white-space:nowrap; font-family:var(--mono);}

#sidebarStorage{margin:2px 0 10px;}
#sidebarStorage .project-storage{padding:9px 11px; flex-direction:column; align-items:flex-start; gap:6px;}
#sidebarStorage .project-storage-bar{width:100%;}
#sidebarStorage .project-storage-label{white-space:normal; font-size:10.5px;}

/* ---------- modais ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:var(--overlay); backdrop-filter:blur(3px); padding:16px;
}
.modal-box{
  width:100%; max-width:480px; background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-md);
  position:relative; max-height:88vh; overflow-y:auto;
}
.modal-box-wide{max-width:720px;}
.modal-close-x{position:absolute; top:18px; right:18px; font-size:13px; color:var(--text-dimmer); padding:2px;}
.modal-close-x:hover{color:var(--text); text-decoration:none;}
.modal-title{font-weight:700; font-size:16px; letter-spacing:-0.01em; margin-bottom:6px;}
.modal-label{display:block; font-size:12px; font-weight:500; color:var(--text-dim); margin:15px 0 6px; line-height:1.5;}
.modal-input, .modal-textarea{
  width:100%; background:var(--bg-inset); border:1px solid var(--border-bright); border-radius:var(--radius-sm);
  color:var(--text); padding:9px 12px; font-size:13.5px;
}
.modal-textarea{min-height:110px; resize:vertical; line-height:1.5;}
.modal-error{color:var(--danger); font-size:12px; margin-top:10px;}
.modal-actions{display:flex; justify-content:flex-end; gap:14px; margin-top:20px; align-items:center;}

/* ---------- campos de texto que crescem com o conteúdo (14/09/2026) ----------
   Antes, escrever a tarefa de um agente era um <input> de uma linha: o começo
   do texto sumia pra esquerda e não dava pra ver o conjunto. Agora o campo é
   um <textarea.autogrow> que cresce até um teto (JS: applyAutoGrow) e traz um
   ⤢ no canto pra abrir o mesmo texto em tela grande. */
textarea.autogrow{
  display:block; width:100%; resize:none; overflow-y:hidden;
  line-height:1.55; min-height:0; white-space:pre-wrap; overflow-wrap:anywhere;
}
/* campo de bloco (instruções, descrição, objetivo): começa com uma altura
   confortável e cresce dali pra cima — não encolhe pra uma linha só. */
.modal-textarea.autogrow{min-height:88px;}
.field-expand-wrap{position:relative; flex:1; min-width:0; width:100%;}
.field-expand-wrap > textarea{padding-right:34px;}
.field-expand-btn{
  position:absolute; top:5px; right:5px; z-index:2; line-height:1;
  background:transparent; border:1px solid transparent; border-radius:var(--radius-sm);
  color:var(--text-dimmer); font-size:12px; padding:4px 6px; cursor:pointer;
}
.field-expand-btn:hover{color:var(--cyan); border-color:var(--border-bright); background:var(--bg-raised);}
.field-expand-wrap > textarea:disabled + .field-expand-btn{display:none;}

/* editor ampliado: o mesmo texto, com espaço pra ler e navegar */
.big-editor-box{max-width:900px;}
.big-editor-textarea{
  height:58vh; min-height:220px; resize:vertical; margin-top:10px;
  white-space:pre-wrap; line-height:1.65; font-size:14px;
}
.big-editor-foot{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:8px; font-size:11px; color:var(--text-dimmer); font-family:var(--mono);
}

/* ---------- escolha de template (novo projeto) ---------- */
.template-choice{display:flex; flex-direction:column; gap:8px;}
.template-option{
  display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--text-dim);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; cursor:pointer; line-height:1.5;
}
.template-option:hover{border-color:var(--border-bright);}
.template-option:has(input:checked){
  border-color:var(--cyan); color:var(--text);
  background:color-mix(in srgb, var(--cyan) 5%, transparent);
}
.template-option input{margin-top:2px; accent-color:var(--cyan);}
.template-option{flex-wrap:wrap;}
.template-option-name{font-weight:600; color:var(--text); flex-shrink:0;}
.template-option-desc{flex-basis:100%; margin-left:24px; color:var(--text-dimmer); font-size:11.5px;}
.template-note{font-size:11px; color:var(--text-dimmer); margin-top:2px; line-height:1.5;}

/* ---------- canvas: nós (v2 — ícone + nome + sub-rótulo) ---------- */
.canvas-node{
  min-width:172px; max-width:240px; background:var(--bg-raised); border:1px solid var(--border-bright);
  border-radius:var(--radius-md); padding:11px 14px 13px; cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.canvas-node:hover{border-color:var(--cyan);}
/* barra de tipo no topo — mesma linguagem de acento do resto do sistema:
   pasta = azul, agente = violeta, backup = verde. */
.canvas-node::before{
  content:''; display:block; height:2px; border-radius:2px; margin:-3px 0 9px;
  background:var(--border-bright);
}
.canvas-node-folder::before{background:var(--cyan);}
.canvas-node-agent::before{background:var(--violet);}
.canvas-node-backup::before{background:var(--done);}
.canvas-node-body{display:flex; align-items:flex-start; gap:10px; padding-right:10px;}
.canvas-node-icon{flex-shrink:0; width:22px; height:22px; margin-top:1px;}
.canvas-node-icon svg{width:100%; height:100%; display:block;}
.canvas-node-folder .canvas-node-icon{color:var(--cyan);}
.canvas-node-agent .canvas-node-icon{color:var(--violet);}
.canvas-node-backup .canvas-node-icon{color:var(--done);}
/* (14/09/2026) agente GERENTE — o que tem seta apontando pra outro agente:
   galão no canto do robô + acento mais forte na barra de tipo. É só desenho
   derivado do grafo (ver canvasManagerCounts), não existe "nó gerente". */
.canvas-node-icon{position:relative;}
.canvas-node-rank{
  position:absolute; right:-5px; bottom:-4px; width:12px; height:12px;
  color:var(--amber); background:var(--bg-raised); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.canvas-node-rank svg{width:10px; height:10px; display:block;}
.canvas-node-manager::before{background:var(--amber);}
.canvas-node-texts{min-width:0;}
.canvas-node-label{
  font-weight:600; font-size:13px; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.canvas-node-sub{
  font-size:10.5px; color:var(--text-dimmer); margin-top:2px; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* nó fantasma esperando nome (criação inline, sem prompt do navegador) */
.canvas-node-pending{
  position:absolute; min-width:200px; border-style:dashed; border-color:var(--cyan);
  cursor:default;
}
.canvas-node-name-input{
  width:100%; min-width:120px; background:transparent; border:none; outline:none;
  color:var(--text); font-size:13px; font-weight:600; padding:0;
  border-bottom:1px solid var(--border-bright);
}
.canvas-node-name-input:focus{border-bottom-color:var(--cyan);}
.canvas-node-name-input::placeholder{color:var(--text-dimmer); font-weight:400;}
.canvas-node-pending-hint{
  font-size:10px; color:var(--text-dimmer); margin-top:7px; font-family:var(--mono);
}

/* legenda das cores de seta */
.canvas-legend{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  font-size:11px; color:var(--text-dimmer); margin-left:6px;
}
.canvas-legend span{display:inline-flex; align-items:center; gap:5px;}
.canvas-legend i{width:14px; height:2px; border-radius:2px; display:inline-block;}

/* ---------- canvas: layout ---------- */
.canvas-layout{display:flex; align-items:flex-start; gap:16px;}
.canvas-layout-main{flex:1; min-width:0;}
.canvas-layout-side{width:400px; flex-shrink:0; position:sticky; top:118px; max-height:calc(100vh - 138px); overflow-y:auto;}
@media (max-width:980px){
  .canvas-layout{flex-direction:column;}
  .canvas-layout-side{width:100%; position:static; max-height:none;}
}

/* ---------- canvas: editor ---------- */
.canvas-toolbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px;}
.canvas-toolbar-label{font-size:12px; color:var(--text-dimmer); margin-right:2px;}
button.action-sm{
  font-size:12.5px; font-weight:500;
  background:var(--bg-panel); color:var(--text-dim); border:1px solid var(--border-bright);
  border-radius:var(--radius-sm); padding:6px 13px; cursor:pointer;
}
button.action-sm:hover{border-color:var(--cyan); color:var(--cyan);}
button.action-sm.icon-only{padding:6px 10px; font-size:14px; line-height:1;}
button.action-sm:disabled{opacity:0.45; cursor:not-allowed;}
button.action-sm:disabled:hover{border-color:var(--border-bright); color:var(--text-dim);}

.canvas-add-dropdown{position:relative;}
.canvas-add-menu{
  position:absolute; top:calc(100% + 4px); left:0; z-index:5; min-width:150px;
  background:var(--bg-raised); border:1px solid var(--border-bright); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); padding:4px; display:flex; flex-direction:column; gap:2px;
}
.canvas-add-menu[hidden]{display:none;}
/* abre pra CIMA quando o botão está perto do rodapé (o painel da pasta fica
   no fim de uma coluna rolável — pra baixo o menu sairia da tela) */
.canvas-add-menu.abre-pra-cima{top:auto; bottom:calc(100% + 4px);}
.canvas-add-menu button{
  text-align:left; font-size:12.5px; color:var(--text); background:none; border:none;
  border-radius:var(--radius-sm); padding:8px 10px; cursor:pointer;
}
.canvas-add-menu button:hover{background:color-mix(in srgb, var(--cyan) 10%, transparent); color:var(--cyan);}
/* menu do painel da pasta: cada opção tem uma dica, que vai embaixo do nome
   (alinhada ao texto, não ao ícone) em vez de espremida na mesma linha */
.canvas-folder-add-menu{min-width:232px;}
.canvas-folder-add-menu .canvas-menu-hint{display:block; margin:2px 0 0 19px;}
.canvas-note{font-size:11.5px; color:var(--text-dimmer); line-height:1.5; margin-bottom:10px; max-width:560px;}
.canvas-note-flash{color:var(--amber); font-weight:600;}
.canvas-editor{
  position:relative; min-height:440px; border:1px solid var(--border);
  border-radius:var(--radius-md); background:var(--bg-panel); overflow:hidden;
  touch-action:none; /* pinça/arraste são do canvas, não da página */
  /* grade de pontos discreta — comunica "área de desenho" sem tutorial */
  background-image:radial-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px);
  background-size:22px 22px;
}
.canvas-editor-empty{position:absolute; top:16px; left:16px;}
.canvas-node-draggable{position:absolute; min-width:150px; cursor:grab; user-select:none;}
.canvas-node-draggable.dragging{cursor:grabbing; border-color:var(--cyan); box-shadow:var(--shadow-md);}
.canvas-node-del{
  position:absolute; top:8px; right:8px; background:none; border:none; cursor:pointer;
  color:var(--text-dimmer); font-size:14px; line-height:1; padding:2px; opacity:0;
  transition:opacity .1s ease;
}
.canvas-node-draggable:hover .canvas-node-del{opacity:0.8;}
.canvas-node-del:hover{color:var(--danger); opacity:1;}

.canvas-node-link-handle{
  position:absolute; bottom:6px; right:7px; background:none; border:none; cursor:crosshair;
  color:var(--text-dimmer); padding:2px; opacity:0.55; width:20px; height:20px;
}
.canvas-node-link-handle svg{width:14px; height:14px; display:block;}
.canvas-node-link-handle:hover{color:var(--cyan); opacity:1;}
.canvas-node-draggable.canvas-node-connect-selected{border-color:var(--cyan); box-shadow:0 0 0 2px color-mix(in srgb, var(--cyan) 30%, transparent);}
.canvas-node-draggable.canvas-node-drop-target{border-color:var(--done); box-shadow:0 0 0 2px color-mix(in srgb, var(--done) 30%, transparent);}
.canvas-node-draggable.canvas-node-drop-invalid{border-color:var(--danger); box-shadow:0 0 0 2px color-mix(in srgb, var(--danger) 26%, transparent);}
.canvas-node-draggable.canvas-node-selected{border-color:var(--cyan); box-shadow:0 0 0 2px color-mix(in srgb, var(--cyan) 22%, transparent), var(--shadow-md);}

.canvas-edges-svg{position:absolute; top:0; left:0; pointer-events:none; overflow:visible;}
.canvas-edge-line{stroke:var(--text-dimmer); stroke-width:1.6; transition:stroke-width .1s ease;}
.canvas-edge-line.canvas-edge-hover{stroke-width:2.6;}
.canvas-edge-line.canvas-edge-selected{stroke-width:2.8;}
.canvas-edge-line-temp{stroke:var(--cyan); stroke-width:1.6; stroke-dasharray:5 4; opacity:0.85;}
.canvas-edge-arrowhead{fill:var(--text-dimmer);}
.canvas-edge-hit{stroke:transparent; stroke-width:16; pointer-events:stroke; cursor:pointer;}
.canvas-edge-line.canvas-edge-kind-read{stroke:var(--cyan);}
.canvas-edge-arrowhead.canvas-edge-kind-read{fill:var(--cyan);}
.canvas-edge-line.canvas-edge-kind-write{stroke:var(--amber);}
.canvas-edge-arrowhead.canvas-edge-kind-write{fill:var(--amber);}
.canvas-edge-line.canvas-edge-kind-chain{stroke:var(--violet);}
.canvas-edge-arrowhead.canvas-edge-kind-chain{fill:var(--violet);}
.canvas-edge-line.canvas-edge-kind-backup{stroke:var(--done);}
.canvas-edge-arrowhead.canvas-edge-kind-backup{fill:var(--done);}
.canvas-edge-line.canvas-edge-kind-replicate{stroke:var(--text-dim); stroke-dasharray:4 3;}
.canvas-edge-arrowhead.canvas-edge-kind-replicate{fill:var(--text-dim);}
.canvas-edge-label{
  font-size:10px; fill:var(--text-dimmer); text-anchor:middle; pointer-events:none;
  font-family:var(--mono);
  paint-order:stroke; stroke:var(--bg-panel); stroke-width:3.5px;
}
.canvas-edge-label-selected{fill:var(--text); font-weight:600;}

/* ---------- canvas: painel de detalhe ---------- */
.canvas-detail-panel:empty{display:none;}
.canvas-detail-panel{
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--bg-panel); padding:16px 18px;
}
.canvas-detail-header{display:flex; align-items:flex-start; gap:10px; margin-bottom:4px;}
.canvas-detail-icon{flex-shrink:0; width:20px; height:20px; margin-top:1px; color:var(--text-dim);}
.canvas-detail-icon svg{width:100%; height:100%; display:block;}
.canvas-detail-icon.icon-folder{color:var(--cyan);}
.canvas-detail-icon.icon-agent{color:var(--violet);}
.canvas-detail-icon.icon-backup{color:var(--done);}
.canvas-detail-icon.icon-project{color:var(--text-dim);}
.canvas-detail-icon.icon-edge-read{color:var(--cyan);}
.canvas-detail-icon.icon-edge-write{color:var(--amber);}
.canvas-detail-icon.icon-edge-chain{color:var(--violet);}
.canvas-detail-icon.icon-edge-backup{color:var(--done);}
.canvas-detail-icon.icon-edge-replicate{color:var(--text-dim);}
.canvas-menu-icon{display:inline-flex; width:15px; height:15px; vertical-align:-2px; margin-right:4px;}
.canvas-menu-icon svg{width:100%; height:100%;}
.canvas-menu-icon.icon-folder{color:var(--cyan);}
.canvas-menu-icon.icon-agent{color:var(--violet);}
.canvas-menu-icon.icon-backup{color:var(--done);}

/* campos de edição do painel (renomear, gatilho) */
.detail-field{margin-top:13px;}
.detail-field>label{
  display:block; font-size:11px; color:var(--text-dimmer); margin-bottom:6px; line-height:1.5;
}
.detail-inline{display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
.detail-inline .modal-input{flex:1; min-width:0; padding:7px 10px; font-size:12.5px;}
/* linha com campo que cresce: os botões acompanham a base do campo */
.detail-inline:has(.field-expand-wrap){align-items:flex-end;}
.detail-inline .field-expand-wrap > textarea{padding:7px 32px 7px 10px; font-size:12.5px;}
.detail-inline .action{padding:7px 13px; font-size:12px;}
.detail-inline-label{font-size:12px; color:var(--text-dim); white-space:nowrap;}
.detail-num{flex:0 0 74px; text-align:center;}
.detail-select{
  width:100%; background:var(--bg-inset); border:1px solid var(--border-bright); border-radius:var(--radius-sm);
  color:var(--text); padding:7px 10px; font-size:12.5px; cursor:pointer;
}
.detail-field .modal-textarea{min-height:88px; font-size:12.5px;}

/* "?" de ajuda: a explicação do campo só aparece ao passar o mouse, em vez
   de gastar uma linha de texto embaixo de cada campo (ver helpDot no app.js) */
.help-dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:13px; height:13px; margin-left:5px; flex:0 0 auto;
  border:1px solid var(--border-bright); border-radius:50%;
  font-size:9px; font-weight:700; line-height:1; color:var(--text-dimmer);
  cursor:help; user-select:none; vertical-align:-2px;
}
.help-dot:hover{color:var(--text); border-color:var(--cyan);}

/* ---------- canvas: abas dentro do painel (visão/tarefas/mensagens) ---------- */
.canvas-detail-tabs{
  display:flex; gap:4px; margin:14px 0 4px; border-bottom:1px solid var(--border);
}
.canvas-detail-tab{
  background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
  color:var(--text-dimmer); font-size:12px; padding:7px 10px 8px; font-family:inherit;
}
.canvas-detail-tab:hover{color:var(--text-dim);}
.canvas-detail-tab.active{color:var(--text); border-bottom-color:var(--cyan); font-weight:600;}
.canvas-detail-tab-content{padding-top:4px;}

/* mini-lista de tarefas/mensagens dentro do painel */
.canvas-mini-empty{font-size:12px; color:var(--text-dimmer); padding:10px 0;}
.canvas-mini-list{display:flex; flex-direction:column; gap:6px; margin:6px 0;}
.canvas-mini-row{
  display:flex; align-items:center; gap:8px; font-size:11.5px;
  padding:6px 0; border-bottom:1px solid var(--border);
}
.canvas-mini-badge{
  flex-shrink:0; font-size:10px; padding:2px 6px; border:1px solid currentColor; border-radius:20px;
}
.canvas-mini-text{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-dim);}
.canvas-mini-time{flex-shrink:0; font-size:10px; color:var(--text-dimmer); font-family:var(--mono);}
.canvas-mini-more{font-size:11px; color:var(--text-dimmer); padding-top:2px;}
.canvas-mini-thread{display:flex; flex-direction:column; gap:8px; margin:6px 0; max-height:280px; overflow-y:auto;}
.canvas-mini-msg{font-size:12px; padding:8px 10px;}

/* mini navegador de arquivos (painel da pasta) */
.canvas-folder-browser{
  display:flex; flex-direction:column; gap:2px; margin-top:6px;
  max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 8px;
}
.canvas-file-row{border-bottom:1px solid var(--border);}
.canvas-file-row:last-child{border-bottom:none;}
.canvas-file-icon{flex-shrink:0; width:14px; height:14px; color:var(--cyan);}
.canvas-file-icon svg{width:100%; height:100%;}
.canvas-file-icon-doc{
  width:9px; height:12px; margin:0 2.5px; border:1.4px solid var(--text-dimmer); border-radius:1px;
}
.canvas-file-del{
  flex-shrink:0; background:none; border:none; color:var(--text-dimmer); cursor:pointer;
  font-size:14px; line-height:1; padding:2px 4px; opacity:0.6;
}
.canvas-file-del:hover{color:var(--danger); opacity:1;}

.canvas-danger-link{color:var(--text-dimmer);}
.canvas-danger-link:hover{color:var(--danger); text-decoration:none;}


.canvas-detail-heading{flex:1;}
.canvas-detail-title{font-weight:600; font-size:14px;}
.canvas-detail-subtitle{font-size:11.5px; color:var(--text-dimmer); margin-top:2px; line-height:1.5;}
.canvas-detail-close{flex-shrink:0; color:var(--text-dimmer);}
.canvas-detail-close:hover{color:var(--text); text-decoration:none;}
.canvas-detail-info{margin:12px 0; font-size:12.5px;}
.canvas-detail-row{
  display:flex; justify-content:space-between; gap:12px; padding:5px 0;
  border-bottom:1px solid var(--border);
}
.canvas-detail-row:last-child{border-bottom:none;}
.canvas-detail-row span:first-child{color:var(--text-dimmer);}
.canvas-detail-row span:last-child{font-weight:500; text-align:right;}
.canvas-detail-actions{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:10px;}

.canvas-detail-advanced{margin-top:13px; border-top:1px solid var(--border); padding-top:2px;}
.canvas-detail-advanced-summary{
  cursor:pointer; font-size:10.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-dimmer); padding:10px 0;
}
.canvas-detail-advanced[open] .canvas-detail-advanced-summary{margin-bottom:4px;}

/* ---------- tela de entrar/criar acesso ---------- */
.auth-box{max-width:360px;}
.auth-box .brand{margin-bottom:20px; justify-content:center;}
.auth-box .modal-actions{justify-content:stretch;}
.auth-box .modal-actions .action{width:100%;}

/* ---------- pipeline ---------- */
.pipeline-header{
  font-size:10.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-dimmer); margin-bottom:6px; font-family:var(--mono);
}
.pipeline-list{
  list-style:none; margin:0 0 14px; padding:12px 14px;
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-md);
  display:flex; flex-direction:column; gap:6px;
}
.pipeline-step{font-size:12.5px; color:var(--text);}
.pipeline-step.done{color:var(--text-dimmer); text-decoration:line-through;}
.pipeline-note{text-decoration:none; color:var(--text-dimmer); font-style:italic;}

/* ---------- memória ---------- */
.memory-box{
  white-space:pre-wrap; word-break:break-word; background:var(--bg-panel);
  border:1px solid var(--border); border-radius:var(--radius-md); padding:18px;
  font-family:var(--mono); font-size:12px; line-height:1.75; color:var(--text);
}
.subtabs{display:flex; gap:2px; border-bottom:1px solid var(--border);}
.subtab-btn{
  font-size:12.5px; font-weight:500; color:var(--text-dim);
  background:none; border:none; border-bottom:2px solid transparent;
  padding:6px 10px 10px; margin-bottom:-1px; cursor:pointer;
}
.subtab-btn:hover{color:var(--text);}
.subtab-btn.active{color:var(--text); font-weight:600; border-color:var(--cyan);}
.subpanel{display:none;}
.subpanel.active{display:block;}
.visao-textarea{min-height:240px; width:100%;}
/* o objetivo do projeto começa com espaço pra um parágrafo e cresce dali */
.visao-textarea.autogrow{min-height:180px;}
.visao-actions{display:flex; align-items:center; gap:12px; margin-top:12px;}
.visao-saved-msg{font-size:12px; color:var(--done); font-weight:500;}

/* ---------- painel do agente: abas (visão / tarefas / mensagens) ---------- */
.canvas-detail-tabs{
  display:flex; gap:2px; margin:12px 0 0;
  border-bottom:1px solid var(--border);
}
.canvas-detail-tab{
  background:none; border:none; cursor:pointer; color:var(--text-dimmer);
  font-size:12px; padding:7px 12px 8px; position:relative; font-family:inherit;
}
.canvas-detail-tab:hover{color:var(--text-dim);}
.canvas-detail-tab.active{color:var(--text); font-weight:600;}
.canvas-detail-tab.active::after{
  content:''; position:absolute; left:10px; right:10px; bottom:-1px; height:2px;
  border-radius:2px; background:var(--cyan);
}
.canvas-detail-tab-content{padding-top:2px;}

/* ---------- mini-listas dentro do painel (tarefas / mensagens / arquivos) ---------- */
.canvas-mini-list{display:flex; flex-direction:column; gap:6px; margin-top:12px;}
.canvas-mini-row{
  display:flex; align-items:center; gap:8px; padding:7px 9px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-inset); font-size:12px; min-width:0;
}
.canvas-mini-badge{
  font-size:9.5px; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.04em;
  border:1px solid; border-radius:3px; padding:1px 5px; flex-shrink:0;
}
.canvas-mini-text{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--text-dim);
}
.canvas-mini-time{font-size:10px; color:var(--text-dimmer); font-family:var(--mono); flex-shrink:0;}
.canvas-mini-more{font-size:11px; color:var(--text-dimmer); padding:2px 2px 0;}
.canvas-mini-empty{
  font-size:12px; color:var(--text-dimmer); padding:14px 4px; font-style:normal; margin-top:6px;
}
.canvas-mini-thread{
  display:flex; flex-direction:column; gap:8px; margin-top:12px;
  max-height:300px; overflow-y:auto; padding-right:2px;
}
.canvas-mini-msg{max-width:100%;}
.canvas-mini-msg .msg-text{font-size:12px;}

/* ---------- painel da pasta: navegador de arquivos embutido ---------- */
.canvas-folder-browser{
  display:flex; flex-direction:column; gap:5px;
  max-height:220px; overflow-y:auto;
}
.canvas-file-row{padding:6px 8px;}
.canvas-file-icon{flex-shrink:0; width:14px; height:14px; color:var(--cyan); display:inline-flex;}
.canvas-file-icon svg{width:100%; height:100%;}
/* arquivo comum: um "documento" desenhado só com CSS (sem novo SVG) */
.canvas-file-icon-doc{
  width:10px; height:13px; margin:0 2px; border:1.4px solid var(--text-dimmer);
  border-radius:2px; position:relative; color:transparent;
}
.canvas-file-icon-doc::after{
  content:''; position:absolute; left:1.5px; right:1.5px; top:3px; height:1.2px;
  background:var(--text-dimmer); box-shadow:0 3px 0 var(--text-dimmer);
}
.canvas-file-del{
  background:none; border:none; cursor:pointer; color:var(--text-dimmer);
  font-size:13px; line-height:1; padding:2px 4px; flex-shrink:0; opacity:0;
  transition:opacity .1s ease;
}
.canvas-file-row:hover .canvas-file-del{opacity:0.7;}
.canvas-file-del:hover{color:var(--danger); opacity:1;}
/* renomear usa a mesma "moldura" do apagar, mas não é destrutivo (sem vermelho) */
.canvas-file-ren{font-size:11px;}
.canvas-file-ren:hover{color:var(--cyan); opacity:1;}
.canvas-folder-rename{
  flex:1; min-width:0; font:inherit; font-size:12.5px; color:var(--text);
  background:var(--bg-inset); border:1px solid var(--cyan); border-radius:var(--radius-sm);
  padding:2px 6px; outline:none;
}

/* ---------- link perigoso (apagar projeto na visão geral) ---------- */
.canvas-danger-link{font-size:11.5px; color:var(--text-dimmer);}
.canvas-danger-link:hover{color:var(--danger); text-decoration:none;}

/* ---------- chat com o Product Owner (P.O.) ---------- */
.po-header{
  display:flex; align-items:flex-start; gap:12px; margin-bottom:14px;
  padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--bg-panel);
}
.po-header::before{
  content:''; flex-shrink:0; width:3px; align-self:stretch; border-radius:2px;
  background:var(--violet);
}
.po-title{font-weight:600; font-size:14px;}
.po-subtitle{font-size:12px; color:var(--text-dim); margin-top:4px; line-height:1.55; max-width:640px;}
.po-thread{
  display:flex; flex-direction:column; gap:10px;
  min-height:200px; max-height:calc(100vh - 380px); overflow-y:auto;
  padding:4px 2px; margin-bottom:12px;
}
.po-msg{max-width:680px;}
.po-empty{
  border:1px dashed var(--border-bright); border-radius:var(--radius-md);
  padding:22px 24px; max-width:640px; margin:16px auto; text-align:center;
}
.po-empty-title{font-weight:600; font-size:13.5px; margin-bottom:7px;}
.po-empty-text{font-size:12.5px; color:var(--text-dim); line-height:1.6;}
.po-compose{display:flex; gap:8px; align-items:flex-end; max-width:820px;}
.po-compose input[type="text"], .po-compose textarea{
  flex:1; background:var(--bg-inset); border:1px solid var(--border-bright); border-radius:var(--radius-sm);
  color:var(--text); padding:10px 13px; font-size:13px;
}
.po-compose input[type="text"]:focus, .po-compose textarea:focus{outline:none; border-color:var(--cyan);}
.po-compose-hint{
  max-width:820px; margin-top:6px; font-size:11px; color:var(--text-dimmer); font-family:var(--mono);
}
.po-thinking{
  margin-top:10px; font-size:12px; color:var(--text-dimmer); font-family:var(--mono);
}
.po-thinking::before{
  content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--violet); margin-right:7px; animation:poPulse 1.1s ease-in-out infinite;
  vertical-align:1px;
}
@keyframes poPulse{0%,100%{opacity:0.25;} 50%{opacity:1;}}
.po-mic-btn{font-size:14px; line-height:1;}
.po-mic-btn.po-mic-recording{color:var(--danger); animation:poPulse 1s ease-in-out infinite;}
.po-brief-wrap{position:relative;}
.po-brief-wrap .po-mic-btn{position:absolute; right:8px; bottom:10px;}
.template-option-po:has(input:checked){
  border-color:var(--violet);
  background:color-mix(in srgb, var(--violet) 6%, transparent);
}

/* ---------- execução ao vivo no canvas (borda verde pulsando) ---------- */
.canvas-node-draggable.canvas-node-running{
  border-color:var(--done);
  animation:canvasRunPulse 1.6s ease-in-out infinite;
}
@keyframes canvasRunPulse{
  0%, 100%{ box-shadow:0 0 0 1px color-mix(in srgb, var(--done) 45%, transparent); }
  50%{ box-shadow:0 0 0 4px color-mix(in srgb, var(--done) 16%, transparent),
                 0 0 14px color-mix(in srgb, var(--done) 30%, transparent); }
}

/* ---------- avisos desenhados nos nós do canvas (14/09/2026) ----------
   Erro, mensagem não lida, aprovação esperando uma pessoa: dá pra ver de
   longe onde está o problema, sem abrir painel nenhum. Ficam no canto
   superior direito do retângulo, meio pra fora — o × de apagar (que só
   aparece no hover, mais pra dentro) continua acessível. */
.canvas-node-badges{
  position:absolute; top:-11px; right:-7px; display:flex; gap:4px; z-index:3;
}
.canvas-node-badge{
  display:inline-flex; align-items:center; gap:3px; cursor:pointer;
  min-width:20px; height:20px; padding:0 5px; border-radius:99px;
  border:1px solid var(--border-bright); background:var(--bg-raised);
  color:var(--text-dim); font-size:11px; line-height:1;
  box-shadow:var(--shadow-sm);
}
.canvas-node-badge:hover{filter:brightness(1.08);}
.canvas-badge-icon{font-size:11.5px; line-height:1; font-weight:700; display:inline-flex;}
.canvas-badge-icon svg{width:12px; height:12px; display:block;}
.canvas-badge-count{font-family:var(--mono); font-size:9.5px; letter-spacing:.02em;}
.canvas-node-badge-danger{
  border-color:var(--danger); color:var(--danger);
  background:color-mix(in srgb, var(--danger) 12%, var(--bg-raised));
  animation:canvasBadgePulse 1.8s ease-in-out infinite;
}
.canvas-node-badge-warn{
  border-color:var(--amber); color:var(--amber);
  background:color-mix(in srgb, var(--amber) 12%, var(--bg-raised));
}
.canvas-node-badge-info{
  border-color:var(--cyan); color:var(--cyan);
  background:color-mix(in srgb, var(--cyan) 12%, var(--bg-raised));
}
.canvas-node-badge-human{
  border-color:var(--violet); color:var(--violet);
  background:color-mix(in srgb, var(--violet) 12%, var(--bg-raised));
}
.canvas-node-badge-muted{background:var(--bg-inset);}
@keyframes canvasBadgePulse{
  0%, 100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--danger) 40%, transparent); }
  50%{ box-shadow:0 0 0 4px color-mix(in srgb, var(--danger) 0%, transparent); }
}
/* a borda do nó também avisa — o símbolo sozinho some num canvas cheio */
.canvas-node-draggable.canvas-node-alert{border-color:var(--danger);}

/* aviso de gatilhos interrompidos por erro, dentro do painel do agente */
.canvas-trig-halted{
  display:flex; gap:9px; align-items:flex-start; margin:0 0 9px;
  border:1px solid var(--danger); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--danger) 8%, transparent);
  padding:9px 11px; font-size:12px; color:var(--text-dim); line-height:1.45;
}
.canvas-trig-halted-icon{
  flex-shrink:0; width:18px; height:18px; border-radius:99px; margin-top:1px;
  border:1px solid var(--danger); color:var(--danger); font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px;
}

/* ---------- painel do agente: tarefas completas ---------- */
.canvas-task-composer{display:flex; gap:7px; margin-top:12px; align-items:flex-end;}
.canvas-task-composer .modal-input{flex:1; padding:8px 11px; font-size:12.5px;}
.canvas-task-composer .field-expand-wrap > textarea{padding:8px 32px 8px 11px; font-size:12.5px;}
.canvas-task-composer .action-sm{white-space:nowrap;}
.canvas-task-runbar{margin-top:9px;}
.canvas-task-list{display:flex; flex-direction:column; gap:6px; margin-top:12px;}
.canvas-task-card{
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-inset); overflow:hidden;
}
.canvas-task-head{
  display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer;
  font-size:12px; min-width:0;
}
.canvas-task-head:hover{background:color-mix(in srgb, var(--text) 3%, transparent);}
.canvas-task-expanded{border-color:var(--border-bright);}
.canvas-task-body{padding:2px 12px 12px; border-top:1px solid var(--border);}
.canvas-task-fulltext{font-size:12.5px; line-height:1.55; margin-top:9px; white-space:pre-wrap;}
.canvas-task-meta{font-size:10.5px; color:var(--text-dimmer); font-family:var(--mono); margin-top:8px;}
.canvas-task-result{
  margin-top:9px; padding:9px 11px; border-left:2px solid var(--done);
  background:color-mix(in srgb, var(--done) 5%, transparent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:12px; line-height:1.55;
}
.canvas-task-error{border-left-color:var(--danger); background:color-mix(in srgb, var(--danger) 6%, transparent);}
.canvas-task-actions{display:flex; gap:8px; align-items:center; margin-top:11px; flex-wrap:wrap;}

/* ---------- chat do agente: "digitando" ---------- */
.canvas-chat-typing{
  font-size:11.5px; color:var(--text-dimmer); font-family:var(--mono); padding:2px 4px;
}
.canvas-chat-typing::before{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--cyan); margin-right:6px; animation:poPulse 1s ease-in-out infinite;
  vertical-align:1px;
}

/* ---------- anotações do agente ---------- */
.canvas-notes{
  font-size:12.5px; line-height:1.6; margin-top:6px; max-height:420px; overflow-y:auto;
  padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-inset); white-space:pre-wrap;
}

/* ---------- navegador de arquivos: lote + navegação ---------- */
.canvas-folder-crumb{margin-bottom:6px; font-size:11.5px;}
.canvas-crumb-path{color:var(--text-dimmer); font-family:var(--mono); margin-left:6px;}
.canvas-file-check{accent-color:var(--cyan); margin:0; flex-shrink:0; cursor:pointer;}
.canvas-file-check-spacer{width:13px; flex-shrink:0;}
.canvas-file-name{cursor:pointer;}
.canvas-file-name:hover{color:var(--text); text-decoration:underline;}
[data-open-folder]{cursor:pointer;}
.canvas-folder-toolbar{gap:8px;}

/* ---------- modal de visualização de arquivo ---------- */
.file-preview-box{max-width:860px; width:min(92vw, 860px);}
.file-preview-body{
  max-height:60vh; overflow:auto; margin:10px 0 4px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-inset);
}
.file-preview-text{
  margin:0; padding:14px 16px; font-family:var(--mono); font-size:12px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word;
}
.file-preview-img{display:block; max-width:100%; margin:0 auto;}

/* ---------- configurações gerais: gerenciar projetos ---------- */
.settings-project-row{
  display:flex; align-items:center; gap:10px; padding:9px 4px;
  border-bottom:1px solid var(--border); font-size:13px;
}
.settings-project-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;}
/* ações da linha (exportar template / apagar) nunca quebram em duas linhas —
   quem encolhe é o nome do projeto, que já tem reticências. */
.settings-project-row .link-btn{white-space:nowrap; flex-shrink:0;}
.project-active-dot{
  width:11px; height:11px; border-radius:50%; flex-shrink:0; cursor:pointer;
  border:1.5px solid var(--text-dimmer); background:transparent; padding:0;
  transition:background .12s ease, border-color .12s ease;
}
.project-active-dot.on{background:var(--done); border-color:var(--done);}
.project-active-dot:hover{border-color:var(--text);}

/* ---------- painel do agente: aba pipeline ---------- */
.canvas-pipeline{display:flex; flex-direction:column; gap:5px; margin-top:6px;}
.canvas-pipe-step{
  display:flex; align-items:flex-start; gap:8px; padding:7px 9px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-inset); font-size:12.5px; line-height:1.45;
}
.canvas-pipe-icon{flex-shrink:0; font-weight:700; width:14px; text-align:center;}
.canvas-pipe-num{flex-shrink:0; color:var(--text-dimmer); font-family:var(--mono); font-size:11px; padding-top:1px;}

/* vários pipelines por agente (15/09/2026): com 2+, cada um vira uma aba
   (20/09/2026 — pedido de UI/UX, antes era um bloco empilhado por extenso
   pra cada um). Com um pipeline só, continua sem barra de abas nenhuma —
   só o cabeçalho com o botão de apagar, igual a sempre. */
.canvas-pipe-tabs{margin:0 0 8px;}
.canvas-pipe-tabs .subtab-btn{max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.canvas-pipe-group{display:flex; flex-direction:column; gap:5px; margin-bottom:10px;}
.canvas-pipe-head{display:flex; align-items:center; gap:8px;}
.canvas-pipe-title{
  font-size:12px; color:var(--text-dim); font-weight:600; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.canvas-pipe-count{font-size:11px; color:var(--text-dimmer); font-family:var(--mono);}
/* passos concluídos, recolhidos por padrão (20/09/2026): só a contagem até
   alguém abrir — os pendentes ficam sempre fora, visíveis direto. */
.canvas-pipe-done{margin-bottom:2px;}
.canvas-pipe-done summary{
  cursor:pointer; font-size:11.5px; color:var(--text-dimmer); padding:3px 0;
  list-style:none;
}
.canvas-pipe-done summary::-webkit-details-marker{display:none;}
.canvas-pipe-done summary::before{content:'▸ '; }
.canvas-pipe-done[open] summary::before{content:'▾ '; }
.canvas-pipe-done summary:hover{color:var(--text-dim);}
.canvas-pipe-done .canvas-pipe-step{margin-top:5px;}
.btn-mini{
  font-size:11px; color:var(--text-dimmer); background:none;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:2px 7px; cursor:pointer; white-space:nowrap; line-height:1.6;
}
.btn-mini:hover{border-color:var(--cyan); color:var(--cyan);}
/* pipeline parado há muito tempo: aviso leve, com as duas saídas à mão */
.canvas-pipe-stale{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:11.5px; color:var(--text-dim); line-height:1.5;
  border:1px dashed var(--border-bright); border-radius:var(--radius-sm);
  padding:6px 9px; background:var(--bg-inset);
}

/* ---------- vários gatilhos por agente (14/09/2026) ---------- */
/* cada gatilho é um cartão próprio: sem a moldura, os campos de um se
   confundem com os do outro na hora de ler o painel de cima a baixo. */
.canvas-trig-list{display:flex; flex-direction:column; gap:8px;}
.canvas-trig-row{
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-inset); padding:9px 11px;
}
.canvas-trig-row-top{display:flex; gap:7px; align-items:center;}
.canvas-trig-row-top .detail-select{flex:1; min-width:0;}
.canvas-trig-del{
  flex-shrink:0; width:26px; height:26px; padding:0; line-height:1;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:transparent; color:var(--text-dimmer); cursor:pointer; font-size:12px;
}
.canvas-trig-del:hover{border-color:var(--danger); color:var(--danger);}
.canvas-trig-empty{
  border:1px dashed var(--border); border-radius:var(--radius-sm);
  padding:9px 11px; font-size:12px; color:var(--text-dimmer); line-height:1.45;
}

/* ---------- gatilho de pasta: seleção múltipla ---------- */
.canvas-trig-folder-list{
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-inset); padding:9px 11px;
  display:flex; flex-direction:column; gap:6px; max-height:180px; overflow-y:auto;
}
.canvas-trig-folder-row{font-size:12.5px; margin:0; display:flex; gap:8px; align-items:center; cursor:pointer;}
.canvas-trig-folder-row input{accent-color:var(--cyan); margin:0;}

/* ---------- multiusuário: cabeçalho ---------- */
.header-username{font-family:var(--mono); font-size:11.5px; color:var(--text-dimmer); margin-right:2px;}

/* ---------- avisos (toasts) ---------- */
#toastContainer{
  position:fixed; right:18px; bottom:18px; z-index:300;
  display:flex; flex-direction:column; gap:9px; max-width:min(420px, calc(100vw - 36px));
  pointer-events:none;
}
.toast{
  pointer-events:auto; cursor:pointer;
  padding:11px 15px 11px 13px; border-radius:10px; font-size:12.5px; line-height:1.5;
  background:var(--bg-panel); border:1px solid var(--border-bright);
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  border-left-width:3px;
  animation:toastIn .22s ease;
}
.toast-error{border-left-color:var(--danger);}
.toast-ok{border-left-color:var(--done);}
.toast-info{border-left-color:var(--cyan);}
.toast-leaving{opacity:0; transform:translateY(6px); transition:all .25s ease;}
@keyframes toastIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ---------- onboarding do canvas vazio ---------- */
.canvas-onboarding{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px;
}
.canvas-onboarding-title{font-weight:700; font-size:15px;}
.canvas-onboarding-text{font-size:12.5px; color:var(--text-dim); max-width:420px; line-height:1.6;}
.canvas-onboarding-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px;}
.canvas-onboarding-po{border-color:var(--violet); color:var(--violet);}
.canvas-onboarding-po:hover{background:color-mix(in srgb, var(--violet) 10%, transparent);}

/* ---------- badge de pendências na aba de tarefas do agente ---------- */
.canvas-tab-badge{
  display:inline-block; min-width:16px; text-align:center; margin-left:6px;
  font-size:10px; font-family:var(--mono); line-height:16px; border-radius:8px;
  background:color-mix(in srgb, var(--cyan) 18%, transparent); color:var(--cyan);
  padding:0 4px; vertical-align:1px;
}


/* ---------- zoom e pan do canvas ---------- */
.canvas-zoom-layer{position:absolute; inset:0; transform-origin:0 0; will-change:transform;}
.canvas-zoom-controls{
  position:absolute; left:12px; bottom:12px; z-index:5;
  display:flex; gap:6px; align-items:center;
  background:color-mix(in srgb, var(--bg-panel) 88%, transparent);
  border:1px solid var(--border-bright); border-radius:10px; padding:4px;
  backdrop-filter:blur(6px);
}
.canvas-zoom-btn{
  min-width:34px; height:34px; border:none; background:transparent; color:var(--text-dim);
  font-size:16px; border-radius:7px; cursor:pointer; font-family:var(--mono);
}
.canvas-zoom-btn:hover{background:var(--bg-inset); color:var(--text);}
.canvas-zoom-pct{font-size:11px; min-width:48px;}

/* ================= responsividade mobile (<=860px) ================= */
.sidebar-toggle{display:none;}
.sidebar-backdrop{display:none;}
@media (max-width:860px){
  /* sidebar vira gaveta por cima do conteúdo */
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; z-index:120; height:100dvh;
    transform:translateX(-102%); transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.5); width:min(300px, 84vw);
  }
  body.sidebar-open .sidebar{transform:none;}
  .sidebar-backdrop{
    display:block; position:fixed; inset:0; z-index:110;
    background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  body.sidebar-open .sidebar-backdrop{opacity:1; pointer-events:auto;}
  .sidebar-toggle{display:inline-flex;}

  /* header compacto que quebra linha sem estourar */
  .top-row{flex-wrap:wrap; row-gap:6px;}
  .current-project-title{font-size:17px; max-width:52vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  /* abas com rolagem horizontal (dedo) */
  .tabs{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab-btn{white-space:nowrap;}

  /* conteúdo respira menos nas bordas */
  .tab-content, .panel, main{padding-left:12px !important; padding-right:12px !important;}

  /* canvas: painel de detalhe empilha embaixo, largura total */
  .canvas-layout{flex-direction:column;}
  .canvas-layout-side{width:100%; position:static; max-height:none;}
  .canvas-editor{min-height:340px;}
  .canvas-zoom-controls{left:8px; bottom:8px;}
  .canvas-zoom-btn{min-width:40px; height:40px;} /* alvo de toque confortável */

  /* modais ocupam a tela quase toda */
  .modal-box, .settings-modal-box{width:94vw !important; max-width:94vw !important; max-height:88dvh; overflow-y:auto;}

  /* chat do P.O.: composer confortável no dedo */
  #poInput{font-size:16px;} /* 16px evita zoom automático do iOS */
  .detail-inline{flex-wrap:wrap;}
}

/* ---------- prévias expansíveis no card de tarefa ---------- */
.canvas-task-preview{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; cursor:pointer;
  /* tarefa agora pode ter várias linhas (14/09/2026): as quebras que a
     pessoa escreveu aparecem como escreveu, e não viram um parágrafo só. */
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.canvas-task-preview.expanded{display:block; -webkit-line-clamp:unset; overflow:visible;}
.canvas-task-resp{
  display:flex; gap:8px; align-items:baseline; cursor:pointer;
  margin:2px 10px 8px 10px; padding:6px 9px;
  border-left:2px solid var(--cyan); border-radius:0 7px 7px 0;
  background:color-mix(in srgb, var(--cyan) 5%, transparent);
  font-size:12px; line-height:1.55;
}
.canvas-task-resp-error{border-left-color:var(--danger); background:color-mix(in srgb, var(--danger) 5%, transparent);}
.canvas-task-resp-label{
  flex-shrink:0; font-size:10px; font-family:var(--mono); text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-dim); padding-top:1px;
}
.canvas-task-resp-text{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; white-space:pre-wrap; word-break:break-word; min-width:0;
}
.canvas-task-resp.expanded .canvas-task-resp-text{display:block; -webkit-line-clamp:unset; overflow:visible;}
/* de onde a tarefa veio (hierarquia): delegada por um gerente, ou a resposta
   de um subordinado voltando. Fica entre o cabeçalho e a prévia da resposta,
   discreta — é contexto, não o conteúdo da tarefa. */
.canvas-task-from{
  margin:-2px 10px 7px 10px; font-size:11px; line-height:1.4;
  color:var(--violet); overflow-wrap:anywhere;
}
.canvas-task-from-back{color:var(--cyan);}

/* ---------- histórico legado nas anotações do agente ---------- */
.canvas-notes-legacy{margin-top:12px;}
.canvas-notes-legacy summary{
  cursor:pointer; font-size:11px; color:var(--text-dim); font-family:var(--mono);
  padding:4px 0; user-select:none;
}
.canvas-notes-legacy summary:hover{color:var(--text);}
.canvas-notes-legacy .canvas-notes{margin-top:6px; opacity:.85;}

/* ---------- nó ponte (conexão declarada com outro projeto) ---------- */
/* (21/09/2026, Fase 1) cor própria — var(--teal), mesmo precedente do
   var(--pink) do humano logo abaixo: usada só via fallback inline, sem
   entrar nos blocos --root/[data-theme="dark"] (ver aviso no topo do
   arquivo — não confundir com as 6 cores "oficiais" já cadastradas ali).
   Borda TRACEJADA sempre: nesta fase a ponte só tem um estado possível
   ("pendente" — sem pareamento automático), então o tracejado nunca vira
   contorno cheio ainda; quando existir "pareada" (fase futura), aí sim
   troca pra border-style:solid. */
.icon-bridge, .canvas-node-bridge .canvas-node-icon{color:var(--teal, #0E7C86);}
.canvas-node-bridge::before{background:var(--teal, #0E7C86);}
.canvas-node-bridge{
  border-style:dashed;
  border-color:color-mix(in srgb, var(--teal, #0E7C86) 55%, var(--border));
}

/* ---------- pasta git em "modo clone" (22/09/2026) ---------- */
/* Mesmo tratamento visual da ponte acima ("conteúdo vem de fora"), estendido
   pra qualquer pasta GitHub/GitLab/Azure DevOps que tenha uma branch
   clonada (ver server.get_canvas_badges/git_branch e
   web/app.js:canvasNodeIsGitClone) — borda tracejada, sem trocar a cor do
   ícone da pasta (que já é a cor de cada integração), só o contorno. */
.canvas-node-git-clone{
  border-style:dashed;
}

/* ---------- nó humano (aprovador) ---------- */
.icon-human, .canvas-node-human .canvas-node-icon{color:var(--pink, #E879B9);}
.canvas-node-human{border-color:color-mix(in srgb, var(--pink, #E879B9) 45%, var(--border));}
.canvas-node-human .canvas-node-topline{background:var(--pink, #E879B9);}
.canvas-edge-line.canvas-edge-kind-propose,
.canvas-edge-line.canvas-edge-kind-release{stroke:var(--pink, #E879B9);}
.canvas-edge-arrowhead.canvas-edge-kind-propose,
.canvas-edge-arrowhead.canvas-edge-kind-release{fill:var(--pink, #E879B9);}
.canvas-edge-line.canvas-edge-kind-release{stroke-dasharray:6 3;}
.canvas-menu-hint{font-size:10px; color:var(--text-dim); margin-left:4px;}

/* ---------- cartões de aprovação ---------- */
.canvas-approval-card{
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:10px 12px; margin-bottom:9px; background:var(--bg-inset);
}
.canvas-approval-card.editing{border-color:var(--pink, #E879B9);}
.canvas-approval-head{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;}
.canvas-approval-title{font-weight:600; font-size:12.5px; flex:1; min-width:0;}
.canvas-approval-from{font-size:10.5px; color:var(--text-dim); font-family:var(--mono); margin-top:3px;}
.canvas-approval-detail{
  font-size:12px; line-height:1.55; margin-top:7px; white-space:pre-wrap;
  color:var(--text); border-left:2px solid var(--border-bright); padding-left:9px;
}
.canvas-approval-meta{font-size:11px; color:var(--text-dim); margin-top:7px; line-height:1.5;}
.canvas-approval-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center;}
.canvas-approval-card.editing .modal-input,
.canvas-approval-card.editing .modal-textarea{margin-top:7px; width:100%;}

/* ---------- lista de tarefas paginada + dicas de campo ---------- */
.canvas-show-more{width:100%; margin-top:4px;}
.detail-hint{font-size:11px; color:var(--text-dim); margin-top:5px; line-height:1.5;}
.detail-check{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim);}
.detail-check input{accent-color:var(--cyan);}

/* ---------- etapas de pipeline arquivadas ---------- */
.canvas-pipe-archived{
  font-size:11px; color:var(--text-dim); margin-bottom:8px; padding-bottom:7px;
  border-bottom:1px dashed var(--border); line-height:1.5;
}

/* ---------- minha empresa (24/09/2026) ---------- */
/* Reaproveita .settings-project-row/.settings-project-name pras linhas de
   pessoa e de projeto — aqui só o que não existia: a etiqueta da direita e a
   lista de caixinhas "quem pode ver este projeto". */
/* em tela estreita a linha quebra em vez de empurrar o botão pra fora da
   caixa (a etiqueta do meio é a primeira a descer de linha). */
#companyModal .settings-project-row{flex-wrap:wrap; row-gap:3px;}
/* o nome da pessoa/do projeto é o que a linha é: ele não encolhe até sumir —
   quem desce de linha é a etiqueta. */
#companyModal .settings-project-name{flex:1 1 auto; min-width:130px;}
.company-tag{font-size:11.5px; color:var(--text-dimmer); flex:1 1 auto; min-width:0; text-align:right;}
.company-members{
  display:flex; flex-wrap:wrap; gap:9px 18px;
  padding:9px 4px 13px; border-bottom:1px solid var(--border);
}
/* o display:flex acima ganha do [hidden] do navegador (que é só um
   display:none de folha de estilo do agente) — sem esta linha a lista de
   quem pode ver o projeto nunca fecharia. */
.company-members[hidden]{display:none;}
.company-members .detail-check{font-size:12.5px; cursor:pointer;}
.company-members .detail-check input:disabled + span{color:var(--text-dimmer);}
/* etiqueta de quem foi cadastrado e ainda não entrou pela primeira vez: fica
   na mesma .company-tag das outras etiquetas, só destacada. */
.company-tag-novo{
  color:var(--amber); padding:1px 7px; border-radius:999px; white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--amber) 38%, transparent);
}
/* quais modelos de IA o projeto pode usar: mesma caixa da lista de "quem pode
   ver", mas em coluna, porque a nota de estado fica embaixo das caixinhas. */
.company-models{
  display:flex; flex-direction:column; gap:7px;
  padding:9px 4px 13px; border-bottom:1px solid var(--border);
}
.company-models[hidden]{display:none;} /* o display:flex acima ganha do [hidden] */
.company-models-checks{display:flex; flex-wrap:wrap; gap:9px 18px;}
.company-models .detail-check{font-size:12.5px; cursor:pointer;}
.company-models-note{font-size:11.5px; color:var(--text-dim); line-height:1.5;}
/* chaves de acesso à IA (24/09/2026): uma linha por serviço, no mesmo desenho
   das linhas de pessoa/projeto, e logo abaixo o campo de colar a chave. */
.company-keys-note{font-size:11.5px; color:var(--text-dim); line-height:1.5; margin-bottom:4px;}
#companyModal .settings-project-row .detail-check{font-size:12.5px; cursor:pointer; flex-shrink:0;}
.company-key-form{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:9px 4px 13px; border-bottom:1px solid var(--border);
}
/* o campo cresce até o fim da linha, mas quebra pra baixo do botão em tela
   estreita em vez de espremer o "salvar". */
.company-key-input{flex:1 1 200px; min-width:0; width:auto;}
.company-pass-value{
  flex:0 0 160px; font-family:'JetBrains Mono', monospace; font-size:13px;
  letter-spacing:0.06em; text-align:center;
}

/* ---------- plataforma de instâncias (F2a, 05/10/2026) ----------
   Tudo aqui só aparece no modo plataforma (app.js, bloco "plataforma de
   instâncias"); no standalone os elementos ficam escondidos. */
/* seletor "empresa ▾ / instância ▾" na lateral: um link só, pra página da
   plataforma que lista todas as empresas e instâncias da pessoa */
.platform-switcher[hidden]{display:none;}
.platform-switcher-link{
  display:flex; flex-direction:column; gap:1px; min-width:0;
  padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-inset); color:var(--text); text-decoration:none;
  transition:border-color .1s ease, background-color .1s ease;
}
a.platform-switcher-link:hover{border-color:var(--border-bright); background:color-mix(in srgb, var(--text) 4%, var(--bg-inset));}
.platform-switcher-row{display:flex; align-items:baseline; gap:5px; min-width:0;}
.platform-switcher-empresa{font-size:11.5px; color:var(--text-dim);}
.platform-switcher-instancia{font-size:13px; font-weight:600;}
.platform-switcher-nome{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.platform-switcher-caret, .platform-switcher-sep{flex:none; font-size:10px; color:var(--text-dimmer); font-weight:400;}
.platform-switcher-meta{display:flex; align-items:baseline; gap:8px; margin-top:3px; font-size:11px; color:var(--text-dimmer);}
.platform-switcher-detalhe{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.platform-switcher-estado-ok{color:var(--done);}
.platform-switcher-estado-atencao{color:var(--amber);}
.platform-switcher-estado-erro{color:var(--danger);}
.platform-switcher-trocar{margin-left:auto; flex:none; font-size:11.5px; color:var(--cyan);}
a.platform-switcher-link:hover .platform-switcher-trocar{text-decoration:underline;}
/* trilha "Empresa › Instância › Projeto" no título: empresa e instância
   encolhem primeiro (reticências, nunca até sumir), o projeto por último */
.current-project-title.current-project-trail{display:flex; align-items:baseline; gap:7px; min-width:0;}
.current-project-trail .trail-part{
  flex:0 3 auto; min-width:2.5em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13px; font-weight:500; color:var(--text-dimmer);
}
.current-project-trail .trail-sep{flex:none; font-size:13px; font-weight:400; color:var(--text-dimmer);}
.current-project-trail .trail-project{flex:0 1 auto; min-width:2.5em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* no celular a faixa do título é estreita (52vw) e a trilha inteira viraria
   só reticências: fica o projeto, como no standalone — empresa e instância
   estão no seletor da gaveta, e a trilha inteira no title do título */
@media (max-width:860px){
  .current-project-trail .trail-part, .current-project-trail .trail-sep{display:none;}
}
/* aviso de instância fora do ar: por cima de tudo (até da gaveta lateral no
   celular), menos dos avisos (toasts) */
.instance-state-overlay{z-index:200;}
.instance-state-box{max-width:420px;}
.instance-state-where{
  font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:var(--text-dimmer);
  margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.instance-state-where[hidden]{display:none;}
.instance-state-actions{flex-wrap:wrap; margin-top:18px;}
.instance-state-actions[hidden]{display:none;}
.instance-state-retry{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;
  margin-top:16px; padding-top:12px; border-top:1px solid var(--border);
  font-size:11.5px; color:var(--text-dimmer);
}
.instance-state-retry[hidden]{display:none;}
.instance-state-retry .link-btn{font-size:11.5px;}
.instance-state-retry .link-btn:disabled{color:var(--text-dimmer); cursor:default; text-decoration:none;}