/* ============================================================
   Octopus Brain's v3.0 — Estilos adicionais
   Paleta: #000000 base | #222629 cards | #cea046 destaque | #ffffff contraste
   Tipografia: Playfair Display (títulos) + Mulish (textos)
   ============================================================ */

/* Aliases de variáveis CSS para compatibilidade com o JS v3 */
:root {
  --text-muted: var(--muted);
  --border-color: var(--border2);
  --warning: var(--yellow);
  --success: var(--green);
  --danger: var(--red);
  --info: var(--blue);
}

/* ============== UTIL / COMUM ============== */
.subtabs-bar {
  display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--border2);
}
.subtabs-bar .subtab {
  background:none; border:none; color:var(--muted2); padding:10px 18px; cursor:pointer;
  font-family:'Mulish',sans-serif; font-size:13px; font-weight:500; border-bottom:2px solid transparent;
  transition:all .15s;
}
.subtabs-bar .subtab:hover { color:var(--text); }
.subtabs-bar .subtab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ============== DASHBOARD EXECUTIVO ============== */
.exec-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; }
.exec-funnel-wrap { margin-top:14px; cursor:pointer; }
.exec-mini-funnel {
  /* FIX (2026-06-03): o JS (renderExecFunnel) renderiza barras EMPILHADAS (label + barra + contagem
     por linha). A CSS antiga era de um funil de SEGMENTOS horizontais (display:flex; height:34px;
     overflow:hidden) e espremia as 6 etapas lado a lado numa faixa cortada (no mobile só a 1a aparecia).
     Agora empilha na vertical e mostra todas, responsivo em qualquer largura. */
  display:block; width:100%; max-width:100%; border-radius:6px; background:var(--surface2);
  border:1px solid var(--border2); box-sizing:border-box; padding:10px 12px;
}
.exec-mini-funnel .seg {
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#000;
  transition:all .2s; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.exec-mini-funnel .seg:hover { filter:brightness(1.1); }
.exec-mini-funnel .seg-novo       { background:#9090a0; }
.exec-mini-funnel .seg-qualif     { background:#4d9dff; }
.exec-mini-funnel .seg-prop       { background:#ffd166; }
.exec-mini-funnel .seg-negoc      { background:#e0b96a; }
.exec-mini-funnel .seg-fechado    { background:#2bff8f; }
.exec-mini-funnel .seg-perdido    { background:#ff4d6b; }

/* Calendário: evento atrasado */
.cal-event-late { font-weight:700 !important; box-shadow:0 0 0 1px #ff4d6b inset !important; }
.cal-event-late .fc-event-title { text-shadow:0 1px 2px rgba(0,0,0,0.5); }

.exec-card-delta { font-size:11px; margin-top:4px; }
.exec-card-delta.up    { color:#2bff8f; }
.exec-card-delta.down  { color:#ff4d6b; }
.exec-card-delta.flat  { color:var(--muted); }

.dash-next-events { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.dash-next-events .ne-card {
  background:var(--surface2); border:1px solid var(--border2); border-radius:10px; padding:10px 14px;
  font-size:13px; cursor:pointer; transition:border-color .15s;
}
.dash-next-events .ne-card:hover { border-color:var(--accent); }
.dash-next-events .ne-date { font-size:11px; color:var(--accent); font-weight:700; margin-bottom:4px; letter-spacing:1px; text-transform:uppercase; }
.dash-next-events .ne-title { color:var(--text); font-weight:500; line-height:1.3; }
.dash-next-events .ne-tag { font-size:10px; color:var(--muted); margin-top:4px; }

/* ============== OBSIDIAN / DADOS ============== */
.obs-status { font-size:11px; padding:4px 10px; border-radius:12px; background:#3a3a3a; color:var(--muted2); }
.obs-status.ok { background:#0f3a1a; color:#2bff8f; }
.obs-status.err { background:#3a0f15; color:#ff4d6b; }
.obs-toolbar {
  display:flex; gap:10px; align-items:center; padding:10px 14px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px;
  flex-wrap:wrap;
}
.obs-search {
  flex:1; min-width:220px; background:var(--surface2); border:1px solid var(--border2); border-radius:8px;
  padding:9px 14px; color:var(--text); font-family:'Mulish',sans-serif; font-size:13px;
}
.obs-breadcrumb { color:var(--muted); font-size:12px; font-family:monospace; min-width:80px; max-width:30%; overflow:hidden; text-overflow:ellipsis; }
.obs-view-toggle { display:inline-flex; gap:2px; background:var(--surface2); border:1px solid var(--border2); border-radius:8px; padding:3px; }
.obs-view-toggle button {
  background:none; border:none; color:var(--muted2); padding:6px 12px; cursor:pointer;
  font-size:12px; border-radius:6px; transition:all .12s;
}
.obs-view-toggle button:hover { color:var(--text); }
.obs-view-toggle button.active { background:var(--accent); color:#000; font-weight:600; }

/* TASK F: 3 colunas — sidebar | main | graph always-visible */
.obs-layout { display:grid; grid-template-columns:260px 1fr; gap:14px; height:calc(100vh - 240px); min-height:480px; }
.obs-graph-always-wrap {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-self:start;
}
#obs-graph-always { background:var(--bg); position:relative; overflow:hidden; }
#obs-graph-always svg { width:100%; height:100%; }
#obs-graph-always .node circle { fill:var(--accent); stroke:#000; stroke-width:1; cursor:pointer; }
#obs-graph-always .link { stroke:var(--border2); stroke-opacity:0.5; }
.obs-sidebar { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:auto; padding:8px; }
.obs-tree { font-size:13px; }
.obs-tree .obs-node {
  display:flex; align-items:center; gap:6px; padding:5px 8px; cursor:pointer; border-radius:6px; color:var(--text);
  user-select:none; transition:background .1s;
}
.obs-tree .obs-node:hover { background:var(--border); }
.obs-tree .obs-node.active { background:rgba(206,160,70,0.15); color:var(--accent); }
.obs-tree .obs-node.folder { font-weight:500; }
.obs-tree .obs-node .obs-icon { font-size:13px; min-width:14px; }
.obs-tree .obs-children { margin-left:14px; border-left:1px dashed var(--border2); padding-left:6px; display:none; }
.obs-tree .obs-children.open { display:block; }

.obs-main { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.obs-pane { flex:1; display:flex; flex-direction:column; min-height:0; }
.obs-pane-header {
  display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface2); border-bottom:1px solid var(--border);
  font-size:13px; color:var(--text);
}
.obs-path { flex:1; font-family:monospace; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.obs-save-status { font-size:11px; color:var(--muted); }
.obs-save-status.dirty { color:#ffd166; }
.obs-save-status.saved { color:#2bff8f; }
.obs-btn-delete {
  background:none; border:1px solid var(--border2); color:var(--muted); cursor:pointer;
  padding:4px 10px; border-radius:6px; font-size:13px;
}
.obs-btn-delete:hover { color:var(--red); border-color:var(--red); }

#obs-editor {
  flex:1; width:100%; resize:none; background:var(--bg); border:none; outline:none; color:var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:14px; line-height:1.6; padding:18px;
  min-height:200px;
}
.obs-preview {
  flex:1; padding:18px 22px; overflow:auto; font-family:'Mulish',sans-serif; color:var(--text); line-height:1.6;
}
.obs-preview h1 { font-family:'Playfair Display',serif; font-size:24px; margin:14px 0 10px; border-bottom:1px solid var(--border); padding-bottom:6px; }
.obs-preview h2 { font-family:'Playfair Display',serif; font-size:20px; margin:12px 0 8px; }
.obs-preview h3 { font-size:16px; margin:10px 0 6px; color:var(--accent); }
.obs-preview code { background:var(--surface2); border:1px solid var(--border2); padding:1px 5px; border-radius:4px; font-size:13px; }
.obs-preview pre { background:var(--surface2); border:1px solid var(--border2); padding:12px; border-radius:8px; overflow:auto; }
.obs-preview pre code { border:none; padding:0; background:none; }
.obs-preview a { color:var(--accent); }
.obs-preview a.obs-link { color:#4d9dff; cursor:pointer; text-decoration:none; border-bottom:1px dashed #4d9dff; }
.obs-preview a.obs-link:hover { background:rgba(77,157,255,0.1); }
.obs-preview blockquote { border-left:3px solid var(--accent); padding:6px 14px; color:var(--muted2); margin:10px 0; background:rgba(206,160,70,0.05); }
.obs-preview ul, .obs-preview ol { margin:6px 0 6px 22px; }
.obs-preview table { width:100%; border-collapse:collapse; margin:10px 0; font-size:13px; }
.obs-preview th, .obs-preview td { padding:6px 10px; border:1px solid var(--border2); text-align:left; }
.obs-preview th { background:var(--surface2); font-weight:600; }
.obs-preview img { max-width:100%; border-radius:8px; }

/* Modo split (editor + preview) */
.obs-main.view-split #obs-pane-editor { flex:1; border-right:1px solid var(--border); }
.obs-main.view-split #obs-pane-preview { flex:1; }
.obs-main.view-split { flex-direction:row; }
.obs-main.view-edit #obs-pane-preview { display:none; }
/* Quando Graph é selecionado, esconde a sidebar tree pra dar tela toda ao grafo */
.obs-layout:has(.obs-main.view-graph) .obs-sidebar { display:none; }
.obs-layout:has(.obs-main.view-graph) { grid-template-columns: 1fr; }
.obs-main.view-edit #obs-pane-graph { display:none; }
.obs-main.view-preview #obs-pane-editor { display:none; }
.obs-main.view-preview #obs-pane-graph { display:none; }
.obs-main.view-graph #obs-pane-editor { display:none; }
.obs-main.view-graph #obs-pane-preview { display:none; }
.obs-main.view-graph #obs-pane-graph { display:flex !important; }
.obs-graph { flex:1; min-height:500px; height:calc(100vh - 280px); background:var(--bg); position:relative; overflow:hidden; }
.obs-graph svg { width:100%; height:100%; }
.obs-graph .node circle { fill:var(--accent); stroke:#000; stroke-width:1.5; cursor:pointer; }
.obs-graph .node text { fill:var(--text); font-size:11px; pointer-events:none; }
.obs-graph .link { stroke:var(--border2); stroke-opacity:0.6; }

.obs-search-results {
  position:absolute; background:var(--surface); border:1px solid var(--border2); border-radius:10px;
  padding:8px; max-width:560px; max-height:380px; overflow:auto; z-index:50; box-shadow:0 12px 40px rgba(0,0,0,0.6);
  margin-top:48px; left:14px; top:0; right:auto; width:560px;
}
.obs-search-result {
  padding:8px 10px; border-radius:6px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--border);
}
.obs-search-result:hover { background:var(--border); }
.obs-search-result .obs-search-path { color:var(--accent); font-size:11px; font-family:monospace; margin-bottom:3px; }
.obs-search-result mark { background:rgba(206,160,70,0.4); color:var(--text); }

/* ============== CALENDÁRIO ============== */
.calendar-container {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px;
  min-height:600px;
}
/* Calendário: adapta ao tema do app (dark/light) */
.calendar-container .fc { --fc-event-text-color:#000; }
.calendar-container .fc-toolbar-title { font-family:'Playfair Display',serif !important; color:var(--text); }
.calendar-container .fc-button-primary { background:var(--surface2) !important; border-color:var(--border2) !important; color:var(--text) !important; }
/* Inputs date: força formato visual PT-BR via lang attribute. Browsers seguem :lang(pt-BR) pra format */
input[type="date"] { font-family: 'Mulish', sans-serif; }
/* Adiciona dica placeholder em pt-BR via attr+after (browsers brasileiros já formatam dd/mm/yyyy se lang=pt-BR) */
html:lang(pt-BR) input[type="date"], html[lang^="pt"] input[type="date"] { direction: ltr; }

/* Setas prev/next: forçar ícone visível (fc-icon usa font próprio do FullCalendar) */
.calendar-container .fc-icon { color: var(--text) !important; opacity: 1 !important; }
.calendar-container .fc-prev-button .fc-icon::before { content: "‹"; font-size: 18px; }
.calendar-container .fc-next-button .fc-icon::before { content: "›"; font-size: 18px; }
.calendar-container .fc-prev-button, .calendar-container .fc-next-button { font-size: 16px; line-height: 1; padding: 4px 10px; }
.calendar-container .fc-button-primary:hover { background:var(--border) !important; }
.calendar-container .fc-button-primary.fc-button-active { background:var(--accent) !important; color:#000 !important; }
.calendar-container .fc-event { border:none; padding:2px 4px; font-size:11px; font-weight:600; cursor:pointer; }
.calendar-container .fc-bg-event.cal-holiday { opacity:0.4 !important; }

/* Tema DARK */
:root[data-theme="dark"] .calendar-container .fc { --fc-border-color:#333; --fc-page-bg-color:var(--surface); --fc-neutral-bg-color:var(--surface2); --fc-today-bg-color:rgba(206,160,70,0.10); }
:root[data-theme="dark"] .calendar-container .fc-scrollgrid, :root[data-theme="dark"] .calendar-container .fc-scrollgrid table { background:var(--surface) !important; }
:root[data-theme="dark"] .calendar-container .fc-daygrid-day { background:var(--surface) !important; }
:root[data-theme="dark"] .calendar-container .fc-daygrid-day.fc-day-other { background:#0f1012 !important; }
:root[data-theme="dark"] .calendar-container .fc-daygrid-day-number { color:var(--text) !important; font-weight:600; }
:root[data-theme="dark"] .calendar-container .fc-col-header-cell { background:var(--surface2) !important; }
:root[data-theme="dark"] .calendar-container .fc-col-header-cell-cushion { color:var(--text) !important; font-weight:700; }
:root[data-theme="dark"] .calendar-container .fc-daygrid-day.fc-day-today { background:rgba(206,160,70,0.15) !important; }

/* Tema LIGHT explícito */
:root[data-theme="light"] .calendar-container .fc { --fc-border-color:#d0d0d0; --fc-page-bg-color:#ffffff; --fc-neutral-bg-color:#f7f7f7; --fc-today-bg-color:#fff4d6; }
:root[data-theme="light"] .calendar-container .fc-scrollgrid, :root[data-theme="light"] .calendar-container .fc-scrollgrid table { background:#ffffff !important; }
:root[data-theme="light"] .calendar-container .fc-daygrid-day { background:#ffffff !important; }
:root[data-theme="light"] .calendar-container .fc-daygrid-day.fc-day-other { background:#f3f3f3 !important; }
:root[data-theme="light"] .calendar-container .fc-daygrid-day-number { color:#333 !important; font-weight:600; }
:root[data-theme="light"] .calendar-container .fc-col-header-cell { background:#ebebeb !important; }
:root[data-theme="light"] .calendar-container .fc-col-header-cell-cushion { color:#222 !important; font-weight:700; }
:root[data-theme="light"] .calendar-container .fc-daygrid-day.fc-day-today { background:#fff4d6 !important; }

/* Tema AUTO: usa media query do sistema. Quando system=dark, aplica regras dark; quando system=light, aplica light */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .calendar-container .fc { --fc-border-color:#333; --fc-page-bg-color:var(--surface); --fc-neutral-bg-color:var(--surface2); --fc-today-bg-color:rgba(206,160,70,0.10); }
  :root[data-theme="auto"] .calendar-container .fc-scrollgrid, :root[data-theme="auto"] .calendar-container .fc-scrollgrid table { background:var(--surface) !important; }
  :root[data-theme="auto"] .calendar-container .fc-daygrid-day { background:var(--surface) !important; }
  :root[data-theme="auto"] .calendar-container .fc-daygrid-day.fc-day-other { background:#0f1012 !important; }
  :root[data-theme="auto"] .calendar-container .fc-daygrid-day-number { color:var(--text) !important; font-weight:600; }
  :root[data-theme="auto"] .calendar-container .fc-col-header-cell { background:var(--surface2) !important; }
  :root[data-theme="auto"] .calendar-container .fc-col-header-cell-cushion { color:var(--text) !important; font-weight:700; }
  :root[data-theme="auto"] .calendar-container .fc-daygrid-day.fc-day-today { background:rgba(206,160,70,0.15) !important; }
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] .calendar-container .fc { --fc-border-color:#d0d0d0; --fc-page-bg-color:#ffffff; --fc-neutral-bg-color:#f7f7f7; --fc-today-bg-color:#fff4d6; }
  :root[data-theme="auto"] .calendar-container .fc-scrollgrid, :root[data-theme="auto"] .calendar-container .fc-scrollgrid table { background:#ffffff !important; }
  :root[data-theme="auto"] .calendar-container .fc-daygrid-day { background:#ffffff !important; }
  :root[data-theme="auto"] .calendar-container .fc-daygrid-day.fc-day-other { background:#f3f3f3 !important; }
  :root[data-theme="auto"] .calendar-container .fc-daygrid-day-number { color:#333 !important; font-weight:600; }
  :root[data-theme="auto"] .calendar-container .fc-col-header-cell { background:#ebebeb !important; }
  :root[data-theme="auto"] .calendar-container .fc-col-header-cell-cushion { color:#222 !important; font-weight:700; }
  :root[data-theme="auto"] .calendar-container .fc-daygrid-day.fc-day-today { background:#fff4d6 !important; }
}

.cal-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; font-size:12px; color:var(--muted2); }
.cal-legend i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:middle; }

/* ============== CHAT IA ============== */
.chat-container {
  display:flex; flex-direction:column; height:calc(100vh - 200px); min-height:480px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
.chat-messages { flex:1; overflow:auto; padding:24px; display:flex; flex-direction:column; gap:14px; }
.chat-empty { margin:auto; max-width:600px; text-align:center; color:var(--text); padding:20px; }
.chat-suggestions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chat-suggestions button {
  background:var(--surface2); border:1px solid var(--border2); color:var(--text);
  padding:8px 14px; border-radius:24px; cursor:pointer; font-family:'Mulish',sans-serif; font-size:12px;
  transition:all .15s;
}
.chat-suggestions button:hover { border-color:var(--accent); color:var(--accent); }

.chat-msg { max-width:75%; padding:12px 16px; border-radius:14px; font-size:14px; line-height:1.5; word-wrap:break-word; }
.chat-msg.user { align-self:flex-end; background:var(--accent); color:#000; border-bottom-right-radius:4px; }
.chat-msg.assistant { align-self:flex-start; background:var(--surface2); color:var(--text); border:1px solid var(--border2); border-bottom-left-radius:4px; }
.chat-msg.assistant pre { background:#000; border-radius:6px; padding:10px; overflow:auto; }
.chat-msg.error { align-self:center; background:#3a0f15; color:#ff4d6b; border:1px solid #ff4d6b; max-width:500px; text-align:center; font-size:12px; }
.chat-msg.loading::after { content:'...'; animation:dots 1.4s infinite; }
@keyframes dots { 0%,80%,100% { opacity:0.3; } 40% { opacity:1; } }

.chat-input-row { display:flex; gap:10px; padding:12px 14px; border-top:1px solid var(--border); background:var(--surface2); }
.chat-input-row textarea {
  flex:1; background:var(--bg); color:var(--text); border:1px solid var(--border2); border-radius:10px;
  padding:10px 14px; font-family:'Mulish',sans-serif; font-size:14px; resize:none; outline:none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.chat-input-row textarea:focus { border-color:var(--accent); }

/* ============== LEADS ============== */
.lead-view-toggle { display:inline-flex; gap:2px; background:var(--surface2); border:1px solid var(--border2); border-radius:8px; padding:3px; }
.lead-view-toggle button {
  background:none; border:none; color:var(--muted2); padding:6px 14px; cursor:pointer;
  font-family:'Mulish',sans-serif; font-size:12px; border-radius:6px; transition:all .12s;
}
.lead-view-toggle button:hover { color:var(--text); }
.lead-view-toggle button.active { background:var(--accent); color:#000; font-weight:600; }

.leads-filter-bar { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; align-items:center; }
.leads-filter-bar select, .leads-filter-bar input { background:var(--surface2); border:1px solid var(--border2); border-radius:8px; padding:8px 12px; color:var(--text); font-family:'Mulish',sans-serif; font-size:13px; }
.leads-filter-bar select:focus, .leads-filter-bar input:focus { border-color:var(--accent); outline:none; }

.lead-score-bar { display:inline-block; width:46px; height:6px; background:var(--surface2); border-radius:3px; overflow:hidden; vertical-align:middle; margin-left:6px; }
.lead-score-bar .fill { height:100%; background:var(--accent); transition:width .2s; }

.lead-temp { padding:2px 8px; border-radius:10px; font-size:10px; font-weight:600; }
.lead-temp.frio { background:rgba(77,157,255,.18); color:#7cb6ff; }
.lead-temp.morno { background:rgba(255,209,102,.18); color:#ffd166; }
.lead-temp.quente { background:rgba(255,77,107,.18); color:#ff4d6b; }

.lead-sla-ok { color:#2bff8f; }
.lead-sla-warn { color:#ffd166; }
.lead-sla-danger { color:#ff4d6b; }

/* KANBAN */
.kanban-board {
  /* PAPEL VENDEDOR (2026-07): funil ganhou a etapa 'Reunião agendada' → 8 colunas em 1 linha (scroll-x já existente) */
  display:grid; grid-template-columns:repeat(8,minmax(220px,1fr)); gap:12px; overflow-x:auto;
  padding-bottom:8px;
}
.kanban-col {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  display:flex; flex-direction:column; min-height:380px;
}
.kanban-col-header {
  padding:12px 14px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;
  font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted2);
}
.kanban-col-header .count { background:var(--surface2); border:1px solid var(--border2); border-radius:10px; padding:2px 8px; font-size:11px; }
.kanban-col-body { flex:1; overflow:auto; padding:10px; display:flex; flex-direction:column; gap:8px; }
.kanban-col.drag-over { background:rgba(206,160,70,0.05); }

.kanban-card {
  background:var(--surface2); border:1px solid var(--border2); border-radius:10px; padding:10px 12px; cursor:grab;
  font-size:12px; color:var(--text); transition:border-color .15s, transform .1s;
}
.kanban-card:hover { border-color:var(--accent); }
.kanban-card.dragging { opacity:0.4; }
.kanban-card .k-name { font-weight:600; margin-bottom:4px; font-size:13px; }
.kanban-card .k-empresa { color:var(--muted); font-size:11px; margin-bottom:6px; }
.kanban-card .k-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.kanban-card .k-foll { color:var(--accent); font-size:10px; margin-top:4px; }

/* PAINEL HISTORICO INTERACOES */
.interacoes-panel {
  position:fixed; right:0; top:0; bottom:0; width:420px; background:var(--surface);
  border-left:1px solid var(--border); transform:translateX(100%); transition:transform .25s ease;
  z-index:600; display:flex; flex-direction:column;
}
.interacoes-panel.open { transform:translateX(0); box-shadow:-20px 0 50px rgba(0,0,0,0.5); }
.interacoes-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; }
.interacoes-body { flex:1; overflow:auto; padding:16px 20px; }
.interacoes-body select, .interacoes-body input, .interacoes-body textarea {
  width:100%; background:var(--surface2); border:1px solid var(--border2); border-radius:8px;
  padding:8px 12px; color:var(--text); font-family:'Mulish',sans-serif; font-size:13px;
}
.interacoes-body textarea { resize:vertical; min-height:80px; }
.inter-card {
  background:var(--surface2); border:1px solid var(--border2); border-radius:10px; padding:10px 12px;
  margin-bottom:8px; font-size:12px;
}
.inter-card .inter-time { color:var(--accent); font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }
.inter-card .inter-meta { color:var(--muted); font-size:11px; margin-bottom:4px; }
.inter-card .inter-text { color:var(--text); line-height:1.4; white-space:pre-wrap; }

/* ============== RELATÓRIOS SOCIAL ============== */
.rel-layout { display:grid; grid-template-columns:280px 1fr; gap:16px; }
.rel-sidebar { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.rel-sidebar h4 { font-family:'Playfair Display',serif; font-size:13px; color:var(--accent); margin-bottom:6px; text-transform:uppercase; letter-spacing:1.5px; }
.rel-sidebar select, .rel-sidebar input[type=date] { background:var(--surface2); border:1px solid var(--border2); border-radius:8px; padding:7px 10px; color:var(--text); font-family:'Mulish',sans-serif; font-size:12px; }
.rel-sidebar label { display:flex; align-items:center; gap:6px; padding:5px 0; font-size:13px; cursor:pointer; }
.rel-sidebar label input[type=checkbox] { accent-color:var(--accent); }

.rel-main { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; min-height:480px; overflow:auto; }
.rel-cliente-section { margin-bottom:24px; }
.rel-cliente-section h3 { font-family:'Playfair Display',serif; font-size:18px; color:var(--accent); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.rel-plat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.rel-plat-card { background:var(--surface2); border:1px solid var(--border2); border-radius:10px; padding:14px; }
.rel-plat-card h4 { font-size:13px; color:var(--text); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.rel-plat-card .rel-field { display:flex; justify-content:space-between; padding:4px 0; font-size:12px; border-bottom:1px dashed var(--border); }
.rel-plat-card .rel-field input { width:80px; text-align:right; background:var(--bg); border:1px solid var(--border2); border-radius:4px; padding:2px 6px; color:var(--text); }
.rel-plat-card .rel-derived { color:var(--accent); font-weight:600; }
.rel-footer { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }

/* ============== ALIASES / CLASSES ADICIONAIS ============== */

/* exec-card aliases (reuses .card structure) */
.exec-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 20px; position:relative; overflow:hidden; transition:border-color .2s;
}
.exec-card:hover { border-color:var(--border2); }
.exec-card-label { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:8px; }
.exec-card-value { font-family:'Playfair Display',sans-serif; font-size:22px; font-weight:800; color:var(--text); }

/* lead score fill class used in JS */
.lead-score-fill { height:100%; background:var(--accent); transition:width .2s; }

/* lead temp alta for SLA alerts */
.lead-temp.alta { background:rgba(255,77,107,.18); color:#ff4d6b; }
.lead-temp.media { background:rgba(255,209,102,.18); color:#ffd166; }
.lead-temp.baixa { background:rgba(77,157,255,.18); color:#7cb6ff; }

/* kanban column count badge */
.kanban-col-count { background:var(--surface2); border:1px solid var(--border2); border-radius:10px; padding:2px 8px; font-size:11px; }

/* kanban card body elements */
.kanban-cards { flex:1; overflow:auto; padding:10px; display:flex; flex-direction:column; gap:8px; }
.kanban-card-name { font-weight:600; margin-bottom:4px; font-size:13px; }
.kanban-card-co { color:var(--muted); font-size:11px; margin-bottom:6px; }

/* interação history items */
.interacao-item {
  background:var(--surface2); border:1px solid var(--border2); border-radius:10px;
  padding:10px 12px; margin-bottom:8px; font-size:12px;
}

/* modal form inputs */
.input-field {
  width:100%; background:var(--surface2); border:1px solid var(--border2); border-radius:8px;
  padding:8px 12px; color:var(--text); font-family:'Mulish',sans-serif; font-size:13px;
  box-sizing:border-box;
}
.input-field:focus { border-color:var(--accent); outline:none; }

/* danger button variant for btn-sm */
.btn-sm.btn-danger, .btn-danger { background:#ff4d6b; color:#fff; }
.btn-sm.btn-danger:hover, .btn-danger:hover { background:#e0304a; }
.btn-sm.btn-primary { background:linear-gradient(135deg,#cea046 0%,#b88a35 100%); color:#1a1a1a; }
.btn-sm.btn-secondary { background:var(--surface2); border:1px solid var(--border2); color:var(--text); }

/* ============== FOOTER COMUM ============== */
.func-tab-content { animation:fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* ============== RESPONSIVO ============== */
@media (max-width:1280px) {
  /* TASK F: ainda mantém 3 colunas em telas grandes; em <=1280 vira sidebar+main e empurra graph pra baixo */
  .obs-layout { grid-template-columns:220px 1fr; }
  .obs-graph-always-wrap { grid-column: 1 / -1; height:260px; }
  #obs-graph-always { height:230px !important; }
}
@media (max-width:1100px) {
  .obs-layout { grid-template-columns:1fr; height:auto; }
  .obs-sidebar { max-height:200px; }
  .obs-graph-always-wrap { grid-column: auto; height:260px; }
  .kanban-board { grid-template-columns:repeat(3,minmax(220px,1fr)); }
  .rel-layout { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .interacoes-panel { width:100%; }
  .kanban-board { grid-template-columns:repeat(2,minmax(200px,1fr)); }
  .chat-msg { max-width:90%; }
}

/* ============== MOBILE (<=640px) ============== */
.mobile-menu-btn {
  display:none;
  position:fixed; top:12px; left:12px; z-index:600;
  background:var(--surface); border:1px solid var(--border2); border-radius:10px;
  width:44px; height:44px; align-items:center; justify-content:center;
  font-size:22px; cursor:pointer; color:var(--text); line-height:1;
  box-shadow:0 2px 12px rgba(0,0,0,0.4);
}
.mobile-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.65); z-index:498;
}
.mobile-overlay.open { display:block; }

@media (max-width:640px) {
  /* Hamburger visível */
  .mobile-menu-btn { display:flex; }

  /* Sidebar vira overlay deslizante */
  .sidebar {
    transform:translateX(-240px);
    transition:transform .25s ease;
    z-index:499;
    width:230px !important;
    box-shadow:none;
  }
  .sidebar.mobile-open {
    transform:translateX(0);
    box-shadow:6px 0 40px rgba(0,0,0,0.7);
  }

  /* Restaura itens escondidos pelo breakpoint 900px */
  .sidebar-logo { display:block !important; }
  .nav-item span { display:inline !important; }
  .sidebar-bottom .user-info,
  .sidebar-bottom .user-name,
  .btn-logout { display:block !important; }
  .nav-item { justify-content:flex-start !important; padding:12px 24px !important; }
  .nav-subitems .nav-subitem { padding-left:56px !important; }

  /* Main ocupa largura total */
  .main {
    margin-left:0 !important;
    padding:68px 14px 32px !important;
  }

  /* Título menor */
  .page-title { font-size:20px !important; }

  /* Cards grid 2 colunas em telas médias, 1 em muito pequenas */
  .cards-grid { grid-template-columns:1fr 1fr !important; gap:10px !important; }

  /* Tabelas scrolláveis horizontalmente */
  .table-wrap { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .table-wrap table { min-width:520px; }

  /* Modal como bottom sheet */
  .modal-overlay { align-items:flex-end !important; }
  .modal {
    width:100% !important;
    max-width:100vw !important;
    max-height:88vh !important;
    border-radius:18px 18px 0 0 !important;
    padding:24px 16px 32px !important;
    margin:0 !important;
  }

  /* Kanban scroll horizontal */
  .kanban-board { grid-template-columns:repeat(6,minmax(240px,1fr)); }

  /* Obsidian layout */
  .obs-layout { grid-template-columns:1fr; height:auto; }
  .obs-sidebar { max-height:180px; }

  /* Chat */
  .chat-container { height:calc(100vh - 140px); }
  .chat-msg { max-width:95%; }

  /* Relatórios */
  .rel-layout { grid-template-columns:1fr; }

  /* Painel interações cobre tela toda */
  .interacoes-panel { width:100%; }

  /* Subtabs scrolláveis */
  .subtabs-bar { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .subtabs-bar .subtab { white-space:nowrap; }

  /* Barra de filtros */
  .leads-filter-bar { flex-direction:column; align-items:stretch; }
  .leads-filter-bar select,
  .leads-filter-bar input { width:100%; box-sizing:border-box; }

  /* Inputs e selects cheios */
  .form-group input,
  .form-group select,
  .form-group textarea { width:100%; box-sizing:border-box; }

  /* Botões de ação em linha */
  .modal-actions { flex-wrap:wrap; }
  .modal-actions .btn { flex:1; min-width:120px; justify-content:center; }
}

@media (max-width:380px) {
  .cards-grid { grid-template-columns:1fr !important; }
  .main { padding:68px 10px 24px !important; }
}

/* === Hub: item-level drag-handle visual === */
.hub-item { display: flex; align-items: center; gap: 6px; padding: 6px 4px; border-radius: 4px; transition: background .12s; position: relative; }
.hub-item:hover { background: rgba(206,160,70,0.05); }
.hub-item-drag-handle { color: var(--muted); font-size: 12px; cursor: grab; user-select: none; opacity: 0.4; transition: opacity .15s; padding: 0 4px; }
.hub-item:hover .hub-item-drag-handle { opacity: 1; }
.hub-item.is-item-dragging { opacity: 0.4; }
.hub-item.is-item-drag-over { border-top: 2px solid var(--accent); }
.hub-item-actions { display: flex; gap: 4px; opacity: 0.4; transition: opacity .15s; }
.hub-item:hover .hub-item-actions { opacity: 1; }
.hub-item-actions .action-btn { padding: 2px 5px; font-size: 11px; }

/* Hub: filtro por tópico */
.hub-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.hub-tag-filter { background: var(--surface2); border: 1px solid var(--border2); color: var(--text); padding: 6px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; }
.hub-tag-filter.active { background: var(--accent); color: #000; border-color: var(--accent); }
.hub-card-tag { display: inline-block; background: rgba(206,160,70,0.15); color: var(--accent); padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 600; margin-left: 6px; text-transform: uppercase; letter-spacing: 1px; }

/* === Minha Conta: tabs sem hit-area sobreposta === */
#page-perfil .admin-tab-btn { position: relative; z-index: 1; min-width: max-content; }
#page-perfil .admin-tabs { gap: 6px; }
/* Garante que o conteúdo das tabs não fica posicionado por cima dos botões */
#page-perfil .admin-tab-content { position: relative; z-index: 0; }

/* === Funcionários: garantir right-align dos botões mesmo trocando sub-tab === */
#page-funcionarios .page-header { display:flex !important; align-items:center !important; justify-content:space-between !important; flex-wrap:wrap; gap:12px; }
#page-funcionarios .page-header > div:last-child { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#page-funcionarios .subtabs-bar { margin-top:16px; }

/* === Campanhas (page-marketing) layout fix — robusto contra clipping === */
#page-marketing { overflow: visible; min-width: 0; }
#page-marketing .page-header { flex-wrap: wrap !important; gap: 12px; align-items: center; width: 100%; min-width: 0; }
#page-marketing .page-header > .page-title { white-space: nowrap; flex-shrink: 0; }
#page-marketing .page-header > button, #page-marketing .page-header > .btn { flex-shrink: 0 !important; white-space: nowrap !important; min-width: max-content !important; }
#page-marketing .filter-bar { flex-wrap: wrap; gap: 6px; }
#page-marketing .table-wrap { overflow-x: auto !important; max-width: 100%; }
#page-marketing .cards-grid { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
#page-marketing .card { min-width: 0; overflow: hidden; word-break: break-word; }
#page-marketing .card-label { white-space: normal !important; overflow-wrap: break-word; word-break: break-word; }
#page-marketing .card-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* M2 (Auditoria 2026-05-28): texto longo em folder Obsidian com ellipsis */
.obs-node, .obs-tree .obs-node {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.obs-node.folder, .obs-node.note { display: block; }
/* M3 (Auditoria): cards do Hub com word-break controlado */
.hub-card, .hub-item, #page-hub .hub-card {
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow: hidden;
}
.hub-card .hub-item-text {
  max-height: 6em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
/* M4 (Auditoria): eventos do calendário com ellipsis claro */
.fc-event, .fc-event-title, .fc-event-main-frame {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* B3 (Auditoria): padding inferior no calendário */
#page-calendario { padding-bottom: 24px; }
/* M5 (Auditoria): tabela de campanhas com scroll-x */
#page-marketing .table-wrap, #page-campanhas .table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
/* M9 (Auditoria): wrap nos filtros de Leads (já coberto abaixo) */
/* MOB1 (Auditoria): breakpoint tablet 768-1024px */
@media (max-width: 1024px) and (min-width: 769px) {
  .cards-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 12px; }
  .sidebar { width: 220px; }
  .main { padding-left: 220px; }
  .page-header { flex-wrap: wrap; gap: 8px; }
}
/* MOB2 (Auditoria): mobile-menu-btn sempre visível e tocável (>=44x44) */
.mobile-menu-btn {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 6px;
  cursor: pointer;
  z-index: 50;
  color: var(--accent);
}
@media (max-width: 768px) {
  .mobile-menu-btn { display: flex !important; opacity: 1 !important; }
}
/* MOB3 (Auditoria): Dashboard KPIs em 380-640px também respeita auto-fit melhor */
@media (max-width: 640px) and (min-width: 381px) {
  #page-dashboard .cards-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
}
/* MOB4 (Auditoria): todas as tabelas envolvidas em scroll-x mesmo sem .table-wrap explícito */
@media (max-width: 768px) {
  .page table { display: block; overflow-x: auto; max-width: 100%; }
}
/* A4 (Auditoria 2026-05-28): KPIs e filtros de Leads sem overflow */
#page-leads .cards-grid, #page-marketing #page-leads .cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 10px !important;
  max-width: 100%; overflow: hidden;
}
#page-leads .card { min-width: 0; overflow: hidden; }
#page-leads .filter-bar, #page-leads .filters-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
#page-leads .filter-bar select, #page-leads .filter-bar input {
  min-width: 120px; max-width: 200px; flex: 1 1 140px;
}
/* A9 (Auditoria): header /leads não pode estourar horizontal */
#page-leads .page-header { flex-wrap: wrap; gap: 8px; }
@media (max-width: 1200px) {
  #page-leads .cards-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
}
@media (max-width: 900px) {
  #page-marketing .cards-grid { grid-template-columns: 1fr !important; }
  #page-marketing .page-header > button, #page-marketing .page-header > .btn { width: 100%; }
}
/* Main não corta horizontalmente */
.main { min-width: 0; }

/* === Otimização global de largura — todas as páginas ocupam o espaço disponível === */
.page { max-width: 100%; width: 100%; box-sizing: border-box; }
.page > * { max-width: 100%; }
.cards-grid { width: 100%; }
.table-wrap { width: 100%; }
.section-header, .page-header { width: 100%; }

/* Páginas específicas que tinham max-width fixo limitando — força full width */
#page-dashboard .cards-grid,
#page-entradas, #page-saidas, #page-assinaturas,
#page-tarefas, #page-leads, #page-marketing,
#page-equipe, #page-funcionarios, #page-colaboradores, #page-clientes,
#page-senhas, #page-hub, #page-acompanhamento,
#page-perfil, #page-admin, #page-workspace,
#page-dados, #page-calendario, #page-chat {
  width: 100%;
  max-width: 100%;
}

/* Tabelas que tinham width:auto ou fixed — força full do container */
.page table { width: 100%; }
.exec-section { width: 100%; }

/* === Exec cards clicáveis === */
.exec-card { cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.exec-card:hover { transform: translateY(-2px); border-color: var(--accent) !important; box-shadow: 0 4px 12px rgba(206,160,70,0.12); }

/* === Claudinho: chat bubble com markdown === */
.chat-bubble-md p { margin: 0 0 8px; }
.chat-bubble-md p:last-child { margin-bottom: 0; }
.chat-bubble-md h1, .chat-bubble-md h2, .chat-bubble-md h3, .chat-bubble-md h4 { font-family:'Playfair Display', serif; margin: 12px 0 6px; color: var(--text); }
.chat-bubble-md h1 { font-size: 18px; }
.chat-bubble-md h2 { font-size: 16px; }
.chat-bubble-md h3 { font-size: 15px; }
.chat-bubble-md ul, .chat-bubble-md ol { margin: 6px 0 8px; padding-left: 22px; }
.chat-bubble-md li { margin-bottom: 3px; }
.chat-bubble-md code { background: rgba(206,160,70,0.10); color: var(--accent); padding: 1px 6px; border-radius: 4px; font-family: monospace; font-size: 12px; }
.chat-bubble-md pre { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 10px; overflow-x: auto; margin: 8px 0; }
.chat-bubble-md pre code { background: transparent; padding: 0; color: var(--text); }
.chat-bubble-md a { color: var(--accent); text-decoration: underline; }
.chat-bubble-md strong { color: var(--text); font-weight: 700; }
.chat-bubble-md em { font-style: italic; }
.chat-bubble-md blockquote { border-left: 3px solid var(--accent); padding-left: 10px; color: var(--muted2); margin: 8px 0; }
.chat-bubble-md table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.chat-bubble-md th, .chat-bubble-md td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }
.chat-bubble-md th { background: var(--surface2); }

/* === Workspace (página pessoal por user) — 3 colunas lado a lado === */
.workspace-greeting { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--text); margin-bottom: 6px; }
.workspace-date { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.workspace-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
/* Garante que o cards-grid do workspace tem 3 cols mesmo (override do auto-fit) */
#page-workspace .cards-grid { grid-template-columns: 1fr 1fr 1fr !important; }
#page-workspace .card[style*="grid-column"] { grid-column: auto !important; } /* desfaz o "grid-column:1/-1" da menções */
@media (max-width:1100px) {
  .workspace-grid { grid-template-columns: 1fr 1fr; }
  #page-workspace .cards-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width:700px) {
  .workspace-grid { grid-template-columns: 1fr; }
  #page-workspace .cards-grid { grid-template-columns: 1fr !important; }
}
.workspace-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.workspace-card-title { font-family: 'Playfair Display', serif; font-size: 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; color: var(--text); }
.workspace-card-empty { color: var(--muted); font-size: 13px; padding: 20px; text-align: center; }
.workspace-item { padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 8px; font-size: 13px; }
.workspace-item-meta { color: var(--muted); font-size: 11px; margin-top: 4px; }
.workspace-item .mention { color: var(--accent); font-weight: 700; }

/* === Hub: drag-drop visual === */
.hub-card { transition: transform .15s, box-shadow .15s, opacity .15s; overflow-wrap: break-word; word-break: break-word; cursor: default; }
.hub-drag-handle { cursor: grab !important; user-select: none; }
.hub-card[draggable="true"] .hub-drag-handle:active { cursor: grabbing !important; }
.hub-card.hub-dragging { opacity: 0.45; }
.hub-card.hub-drag-over { box-shadow: 0 -3px 0 0 var(--accent); }
.hub-card.hub-drop-group { box-shadow: 0 0 0 3px var(--accent), 0 0 20px rgba(206,160,70,0.3); transform: scale(1.02); position: relative; }
.hub-card.hub-drop-group::after { content: "📁 Agrupar"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--accent); color: #000; padding: 6px 14px; border-radius: 6px; font-weight: 700; font-size: 13px; pointer-events: none; }
/* Container do Hub: gap maior pra visual de pasta */
#hub-container { gap: 18px !important; }
/* Cards em grupo: borda extra mostrando que estão agrupados */
.hub-card[data-group-id] { border-left-width: 4px !important; }
/* Item da lista quebra texto longo */
.hub-item, .hub-item-text, .hub-notas-display, .hub-notas-area { overflow-wrap: break-word; word-break: break-word; white-space: pre-wrap; }
.hub-item-link { word-break: break-all; }
/* Cards do Hub: containerize children */
.hub-card * { max-width: 100%; }

/* === Hub: limitar altura do texto livre (notas) e expandir DENTRO do próprio bloco (S1 2026-06-02) === */
.hub-notas-display.collapsed { max-height: 180px; overflow: hidden; position: relative; }
.hub-notas-display.collapsed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42px; background: linear-gradient(transparent, var(--surface2)); pointer-events: none; }
.hub-notas-display.expanded { max-height: 460px; overflow-y: auto; }
.hub-notas-toggle { display: inline-block; margin-top: 6px; background: var(--surface2); border: 1px solid var(--border2); color: var(--accent); font-size: 12px; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-family: Mulish, sans-serif; }
.hub-notas-toggle:hover { background: rgba(206,160,70,0.12); }
/* corrida/checklist: clicar no texto expande além das 4 linhas, ainda dentro do card */
.hub-card .hub-item-text { cursor: pointer; }
.hub-card .hub-item-text.expanded { max-height: none; -webkit-line-clamp: unset; display: block; overflow: visible; }
/* Hub: chips de anexos (arquivos/links) por item (S3 2026-06-02) */
.hub-item-anexos { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 4px 6px 28px; }
.hub-anexo-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; background: rgba(206,160,70,0.12); border: 1px solid var(--border2); color: var(--accent); font-size: 11px; padding: 2px 8px; border-radius: 4px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-anexo-chip:hover { background: rgba(206,160,70,0.22); }

/* === Refinements pros componentes novos (header inline, toolbar compacta, login logo grande) === */
@media (max-width:640px) {
  /* Dashboard header "Octopus Brain's" — diminui em mobile */
  .dash-brand-header { padding:6px 8px 4px !important; }
  .dash-brand-name { font-size:14px !important; letter-spacing:4px !important; }
  .dash-brand-sub { font-size:24px !important; }
  /* Toolbar empilha melhor: clocks à esquerda, data+export à direita */
  .dash-toolbar { justify-content:center !important; gap:6px !important; }
  .dash-date-btn { padding:4px 8px !important; }
  .dash-date-btn input[type="date"] { min-width:92px !important; font-size:12px !important; }
  .clock-btn { padding:4px 7px !important; font-size:11px !important; }
  /* Login: logo proporcionalmente menor em telas pequenas */
  .login-logo-wrap img, .login-logo-wrap svg { width:96px !important; height:96px !important; }
  .login-title-inline { font-size:26px !important; }
  .login-box { padding:32px 24px !important; }
  /* Sidebar logo (sem escrita): mantém logo 56px em mobile pra não ocupar */
  .sidebar-logo > img, .sidebar-logo > svg { width:56px !important; height:56px !important; }
  /* Hubstaff: cards horizontais grid */
  #hub-summary { grid-template-columns:repeat(2, 1fr) !important; }
  /* Admin tabs scrolláveis horizontalmente em mobile (já tem 6 tabs) */
  .admin-tabs { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .admin-tabs .admin-tab-btn { white-space:nowrap; }
}
@media (max-width:380px) {
  .dash-brand-sub { font-size:20px !important; }
  .login-logo-wrap img, .login-logo-wrap svg { width:80px !important; height:80px !important; }
  .login-title-inline { font-size:22px !important; }
  #hub-summary { grid-template-columns:1fr 1fr !important; }
}

/* ===== Auditoria S4 2026-05-28 fixes UI ===== */

/* M3: Enviar Claudinho não sobrepõe FAB */
#chat-send-btn { position: relative; z-index: 10; }
#claudinho-fab-btn, .claudinho-fab { z-index: 5; }

/* B5: ajuste sutil no grid de personalização */
.personalizacao-grid { gap: 14px; }

/* B7: badge pending mais visível */
.badge-status.pending { background: #ffa500; color: #000; font-weight: 700; }

/* B9: card-help texto longo trunca em 3 linhas */
.card-help {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* B13: sidebar footer fixa no fim */
.sidebar-bottom {
  position: sticky;
  bottom: 0;
  background: var(--surface, #222629);
}

/* B14: badges padronizados */
.badge-status {
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-weight: 600;
  display: inline-block;
  white-space: nowrap;
}

/* M6/M7: empty states */
.empty-state {
  text-align: center;
  color: var(--muted, #888);
  padding: 40px 20px;
}
.empty-state-icon { font-size: 32px; margin-bottom: 10px; opacity: .8; }

/* H1: garante mínimo de altura para Obsidian Graph */
#obs-graph, #obs-graph-always {
  min-height: 600px;
  width: 100%;
}

/* build: 2026-05-29_04-15-00 */