/* Maily: estilos de telas específicas (legado).
 *
 * REGRA: tokens, componentes e a caixa de entrada vivem em ui.css, que é a fonte única do visual.
 * Este arquivo só guarda o que ainda não tem componente próprio no ui.css (telas de configuração,
 * fluxo de decisão, Testar conversa...) e NÃO define cor nenhuma: tudo vem de variáveis do ui.css.
 * O bloco "ponte" abaixo traduz os nomes antigos de variável para os do ui.css; ao migrar uma tela
 * para os componentes do ui.css, apague as regras dela daqui.
 */

/* ---------- ponte: nomes antigos -> tokens do ui.css ---------- */
:root {
  --text: var(--text-1);
  --text-meta: var(--text-2);
  --text-muted: var(--text-3);
  --bg-sidebar: var(--bg-rail);
  --bg-active: var(--bg-selected);
  --accent-fill: var(--accent);
  --accent-fill-hover: var(--accent-hover);
  --on-accent: var(--text-on-accent);
  --notif-fill: var(--danger-strong);
  --dot-ok: var(--ok);
  --dot-warn: var(--warn);
  --dot-bad: var(--danger);
  --tx-ok: var(--badge-green-tx);   --ok-bg: var(--badge-green-bg);   --ok-border: color-mix(in srgb, var(--badge-green-tx) 30%, transparent);
  --tx-warn: var(--badge-amber-tx); --warn-bg: var(--badge-amber-bg); --warn-border: color-mix(in srgb, var(--badge-amber-tx) 30%, transparent);
  --tx-bad: var(--badge-red-tx);    --bad-bg: var(--badge-red-bg);    --bad-border: color-mix(in srgb, var(--badge-red-tx) 30%, transparent);
  --tx-info: var(--badge-blue-tx);  --info-bg: var(--badge-blue-bg);  --info-border: color-mix(in srgb, var(--badge-blue-tx) 30%, transparent);
  --tx-vip: var(--badge-purple-tx); --vip-bg: var(--badge-purple-bg); --vip-border: color-mix(in srgb, var(--badge-purple-tx) 30%, transparent);
  --note-text: var(--note-tx);
  --tint-reply: var(--bg-reply);
  --skeleton-a: var(--bg-subtle);
  --skeleton-b: var(--border);
  --shadow-float: var(--shadow-pop);
  --motion: var(--t-fast);
  --font: var(--font-sans);
  --space-1: var(--sp-1); --space-2: var(--sp-2); --space-3: var(--sp-3); --space-4: var(--sp-4);
  --space-6: var(--sp-6); --space-8: var(--sp-8);
  --radius-xs: var(--r-badge); --radius-control: var(--r-ctrl); --radius-card: var(--r-card);
  --radius-panel: var(--r-card); --radius-pill: var(--r-full);
  --fs-body: 14px; --fs-list: 13px; --fs-meta: 12px; --fs-card-title: 14px; --fs-page: 20px;
  --fs-kpi-label: 13px; --fs-kpi: 30px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-body: 1.45; --lh-tight: 1.3;
  --secnav-w: var(--menu-w);
  --side-w: var(--panel-w);
}

/* ---------- base (legado) ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{margin:0;font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
h1{font-size:var(--fs-page)}
h2,h3,h4{font-size:var(--fs-card-title)}
p{margin:0 0 var(--space-3)}
code,kbd{font-family:var(--font-mono);font-size:.92em}
.tnum{font-variant-numeric:tabular-nums}
.dim{color:var(--text-meta)}
.skip{position:absolute;left:var(--space-2);top:-72px;z-index:80;background:var(--bg-surface);
  border:1px solid var(--border);color:var(--text);padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-control);font-weight:var(--fw-medium);box-shadow:var(--shadow-float);
  transition:top var(--motion) ease}
.skip:focus{top:var(--space-2);text-decoration:none}

/* ---------- ícones (sprite Lucide) ---------- */
:where(.ic){width:16px;height:16px;flex:none;stroke:currentColor;fill:none;display:inline-block;vertical-align:-3px;stroke-width:1.75}
.ic-lg{width:20px;height:20px}
.ic-xl{width:24px;height:24px}

/* tooltip com o nome (e o atalho) ao passar o mouse OU focar pelo teclado */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;z-index:60;white-space:nowrap;pointer-events:none;
  background:var(--text);color:var(--bg-surface);font-size:var(--fs-meta);font-weight:var(--fw-medium);
  padding:var(--space-1) var(--space-2);border-radius:var(--radius-xs);box-shadow:var(--shadow-float);
  opacity:0;transform:translateY(2px);transition:opacity var(--motion),transform var(--motion)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:none}
.rail [data-tip]::after{display:none}           /* o trilho usa o .tip-float do app.js */
.tip-float{position:fixed;z-index:120;display:none;white-space:nowrap;pointer-events:none;background:var(--text);color:var(--bg-surface);
  font-size:var(--fs-meta);font-weight:var(--fw-medium);padding:var(--space-1) var(--space-2);border-radius:var(--radius-xs);box-shadow:var(--shadow-float)}
[data-tip-pos="bottom"]::after{left:50%;top:calc(100% + var(--space-1));transform:translate(-50%,2px)}
[data-tip-pos="bottom"]:hover::after,[data-tip-pos="bottom"]:focus-visible::after{transform:translate(-50%,0)}
[data-tip-pos="top"]::after{left:50%;bottom:calc(100% + var(--space-1));transform:translate(-50%,-2px)}
[data-tip-pos="top"]:hover::after,[data-tip-pos="top"]:focus-visible::after{transform:translate(-50%,0)}


/* ---------- ponto de loja (8px) ---------- */
.status-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;background:var(--text-meta)}
.status-dot.ok{background:var(--dot-ok)}.status-dot.warn{background:var(--dot-warn)}.status-dot.bad{background:var(--dot-bad)}
/* a pulsação só existe quando HÁ problema (conexão saudável é bolinha estática) */
.status-dot.bad.pulse{animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--dot-bad) 55%,transparent)}100%{box-shadow:0 0 0 8px transparent}}

/* ---------- botões antigos (telas ainda não migradas para .btn--* do ui.css) ---------- */
:where(button:not(.btn,.chip,.link-btn,.th-sort,[class*="__"])),.btn:not([class*="btn--"]){display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:9px var(--space-4);border-radius:var(--radius-control);border:1px solid var(--accent);
  background:var(--accent);color:var(--on-accent);font:var(--fw-medium) var(--fs-body)/1 var(--font);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--motion),border-color var(--motion),color var(--motion),transform 60ms}
:where(button:not(.btn,.chip,.link-btn,.th-sort,[class*="__"])):hover,.btn:not([class*="btn--"]):hover{background:var(--accent-hover);border-color:var(--accent-hover);text-decoration:none;color:var(--on-accent)}
:where(button:not(.btn,.chip,.link-btn,.th-sort,[class*="__"])):active,.btn:not([class*="btn--"]):active{transform:translateY(1px)}
button.sec,.btn.sec,button.ghost,.btn.ghost{background:var(--bg-surface);color:var(--text-btn);border-color:var(--border);
  font-weight:var(--fw-medium)}
button.sec:hover,.btn.sec:hover{background:var(--bg-subtle);color:var(--text);border-color:var(--border-strong)}
button.ghost,.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
button.ghost:hover,.btn.ghost:hover{background:var(--bg-hover);color:var(--text)}
button.bad,.btn.bad{background:var(--bad-bg);color:var(--tx-bad);border-color:var(--bad-border)}
button.bad:hover,.btn.bad:hover{background:var(--bad-bg);border-color:var(--tx-bad);color:var(--tx-bad)}
button.ibtn,.btn.ibtn{min-width:32px;padding:9px}
:where(button:not(.btn,.chip,.link-btn,.th-sort,[class*="__"])) .ic,.btn:not([class*="btn--"]) .ic{width:14px;height:14px}
button.ibtn .ic,.btn.ibtn .ic{width:16px;height:16px}
button:disabled{opacity:.5;cursor:not-allowed}
button.is-loading{color:transparent!important;pointer-events:none;position:relative}
button.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;border:2px solid color-mix(in srgb,var(--on-accent) 40%,transparent);border-top-color:var(--on-accent);
  animation:spin .6s linear infinite}
button.sec.is-loading::after,button.bad.is-loading::after,button.ghost.is-loading::after{
  border-color:var(--border-strong);border-top-color:var(--text-btn)}
.btn.is-loading::after{border-color:var(--border-strong);border-top-color:var(--text-btn)}
@keyframes spin{to{transform:rotate(360deg)}}
form.inline{display:inline}
/* alternância antiga (aria-pressed): o ui.css tem .seg para as telas novas */
.segmented{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1);background:var(--bg-hover);
  border-radius:var(--radius-control)}
.segmented button,.segmented .btn{padding:6px var(--space-3);border:1px solid transparent;border-radius:var(--radius-xs);
  background:transparent;color:var(--text-btn);font-weight:var(--fw-medium);font-size:var(--fs-list)}
.segmented button:hover,.segmented .btn:hover{background:var(--bg-hover);border-color:transparent;color:var(--text)}
.segmented [aria-pressed="true"],.segmented [aria-current],.segmented [aria-pressed="true"]:hover{background:var(--bg-surface);
  color:var(--text);border-color:var(--border);box-shadow:var(--shadow-sm)}

/* ---------- formulários ---------- */
input,select,textarea{width:100%;min-height:32px;background:var(--bg-surface);color:var(--text);
  border:1px solid var(--border-strong);border-radius:var(--radius-control);padding:var(--space-2) var(--space-3);
  font:var(--fw-regular) var(--fs-list)/var(--lh-body) var(--font);
  transition:border-color var(--motion),box-shadow var(--motion)}
textarea{min-height:96px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--text-2)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--text)}
select{width:auto;max-width:100%}
.fld{margin-bottom:var(--space-4)}
.fld label{display:block;margin-bottom:var(--space-1);color:var(--text-btn);font-size:var(--fs-list);font-weight:var(--fw-medium)}
.fld .desc{color:var(--text-meta);font-size:var(--fs-meta);margin-top:var(--space-1)}
.check-row{display:flex;align-items:flex-start;gap:var(--space-2)}

/* ---------- cards, painéis, KPIs ---------- */
.panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-panel);padding:var(--space-4);
  box-shadow:var(--shadow-sm)}
.panel>h2,.panel__title{margin:0 0 var(--space-3);font-size:var(--fs-card-title);font-weight:var(--fw-semibold)}
.panel--flush{padding:0;overflow:auto}
.grid{display:grid;gap:var(--space-4)}
.grid>*{min-width:0}            /* sem isto uma tabela larga alarga a coluna e a página rola de lado */
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--top{align-items:start}
@media(max-width:1000px){.grid-2,.grid-3{grid-template-columns:1fr}}
/* fileira de KPIs: 4 a 6 cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}
.kpi{position:relative;gap:var(--space-1);padding:var(--space-4)}
.kpi__label{font-size:var(--fs-kpi-label);font-weight:var(--fw-medium);color:var(--text-2);justify-content:flex-start}
.kpi__value{font-size:var(--fs-kpi);font-weight:var(--fw-bold);line-height:1.2;color:var(--text);font-variant-numeric:tabular-nums}
.kpi__delta{font-size:var(--fs-meta);display:inline-flex;align-items:center;gap:var(--space-1);color:var(--text-meta);
  font-variant-numeric:tabular-nums}
.kpi__delta.good{color:var(--tx-ok)}.kpi__delta.bad{color:var(--tx-bad)}
.kpi__unit{font-size:var(--fs-page);font-weight:var(--fw-semibold);color:var(--text-2)}
.kpi__go{position:absolute;top:var(--space-4);right:var(--space-4);color:var(--text-meta);opacity:0;transition:opacity var(--motion)}
a.kpi:hover .kpi__go,a.kpi:focus-visible .kpi__go{opacity:1}
.chartbox{position:relative;height:240px}
/* dashboard (padrão 1.4) */
.dash-block{margin-bottom:var(--space-4)}
.dash-title{margin:0 0 var(--space-3)}
.panel__title--pad{padding:var(--space-4) var(--space-4) 0;margin-bottom:var(--space-3)}
.cell-store{display:inline-flex;align-items:center;gap:var(--space-2)}
.segmented a.btn:hover{text-decoration:none}

/* ---------- tabelas ---------- */
.tbl-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius-panel);background:var(--bg-surface);box-shadow:var(--shadow-sm)}
.tbl-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
table{width:100%;border-collapse:collapse;background:var(--bg-surface)}
.panel table,.tbl-wrap table{border:0}
th,td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--border);vertical-align:middle;font-size:var(--fs-list)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
thead th{position:sticky;top:0;background:var(--bg-subtle);color:var(--text-2);font-size:var(--fs-meta);font-weight:var(--fw-medium);z-index:1}
tbody th{font-weight:var(--fw-regular);color:inherit;font-size:var(--fs-list)}
tbody tr:hover{background:var(--bg-subtle)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

.field input,.field select{padding:0;min-height:0;border:0;border-radius:0;width:auto}
.field input:focus,.field input:focus-visible{outline:0;border:0;box-shadow:none}

/* ---------- tags (legado; telas novas usam .badge do ui.css) ---------- */
.tag{display:inline-flex;align-items:center;gap:var(--space-1);padding:0 var(--space-2);border-radius:var(--radius-xs);
  font-size:var(--fs-meta);font-weight:var(--fw-medium);line-height:20px;background:var(--badge-gray-bg);color:var(--badge-gray-tx);
  white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--tx-ok)}
.tag.warn{background:var(--warn-bg);color:var(--tx-warn)}
.tag.bad{background:var(--bad-bg);color:var(--tx-bad)}
.tag.info{background:var(--info-bg);color:var(--tx-info)}
.tag.vip{background:var(--vip-bg);color:var(--tx-vip)}
.tag .ic{width:14px;height:14px}
.avatar.sm{width:24px;height:24px;font-size:var(--fs-meta)}
.avatar.lg{width:40px;height:40px;font-size:var(--fs-list)}

/* ---------- avisos (as mensagens do servidor viram avisos; sem JS continuam visíveis) ---------- */
.toast{animation:toast-in var(--motion) ease-out}
.toast.error{background:var(--danger-strong);color:var(--text-on-accent)}
.faixa-alerta{background:var(--danger-strong);color:var(--text-on-accent);padding:10px 16px;font-size:14px;font-weight:600}
.faixa-alerta a{color:inherit;text-decoration:underline}
.toast__body{flex:1}
.toast button{all:unset;cursor:pointer;display:inline-flex;border-radius:var(--radius-control);padding:var(--space-1);opacity:.8}
.toast button:hover{opacity:1}
.toast button:focus-visible{outline:2px solid var(--text-on-accent)}
.toast.is-leaving{opacity:0;transform:translateY(4px);transition:opacity 200ms,transform 200ms}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}


/* ---------- estados vazios, skeletons ---------- */
.empty .ic{width:24px;height:24px;color:var(--text-meta)}
.empty strong{color:var(--text);font-weight:var(--fw-semibold)}
.empty .btn{margin-top:var(--space-2)}
.empty{color:var(--text-2)}
.empty strong{color:var(--text)}
.skeleton.line{height:12px;margin:var(--space-2) 0}.skeleton.block{height:64px}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
/* carregando: a página nova ainda não chegou — mostra esqueletos no lugar da lista/painel */
[data-loading] .skeleton-host>*{visibility:hidden}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* ---------- filtros em chips ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-4)}
.pager-info{color:var(--text-meta);font-size:var(--fs-meta)}
.pager .pager-off{opacity:.5;pointer-events:none}


/* ---------- menu do avatar / popover ---------- */
.menu{position:fixed;z-index:70;min-width:240px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-panel);
  box-shadow:var(--shadow-float);padding:var(--space-2);display:none}
.menu.is-open{display:block}
.menu__head{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);margin-bottom:var(--space-1)}
.menu__head b{display:block;font-weight:var(--fw-semibold)}
.menu__section{padding:var(--space-2) var(--space-3)}
.menu__label{display:block;margin-bottom:var(--space-1);color:var(--text-meta);font-size:var(--fs-meta);font-weight:var(--fw-medium)}
.menu__head span{color:var(--text-meta);font-size:var(--fs-meta)}
.menu a,.menu button{display:flex;width:100%;justify-content:flex-start;gap:var(--space-2);min-height:32px;padding:0 var(--space-3);
  background:transparent;border:0;color:var(--text);font-weight:var(--fw-medium);font-size:var(--fs-list);border-radius:var(--radius-control)}
.menu a:hover,.menu button:hover{background:var(--bg-hover);text-decoration:none;color:var(--text)}
.menu .segmented{display:flex}
.menu .segmented button{flex:1;width:auto;min-height:28px;justify-content:center;padding:0 var(--space-2)}

/* ---------- paleta de comandos (Ctrl/⌘+K) ---------- */
.palette{position:fixed;inset:0;z-index:100;background:var(--overlay);display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
.palette.is-open{display:flex}
.palette__box{width:min(560px,calc(100vw - 32px));background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-panel);
  box-shadow:var(--shadow-float);overflow:hidden}
.palette__input{border:0;border-bottom:1px solid var(--border);border-radius:0;min-height:48px;padding:0 var(--space-4);font-size:var(--fs-body)}
/* o diálogo aberto já mostra onde está o foco (e o cursor pisca no campo): sem anel extra */
.palette__input:focus,.palette__input:focus-visible{box-shadow:none;outline:none;border-color:var(--border)}
.palette__list{list-style:none;margin:0;padding:var(--space-2);max-height:50vh;overflow-y:auto}
.palette__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-control);color:var(--text);cursor:pointer;font-size:var(--fs-list)}
.palette__item[aria-selected="true"]{background:var(--bg-active);color:var(--text)}
.palette__item[aria-selected="true"] .hint{color:var(--text)}
.palette__item .hint{margin-left:auto;color:var(--text-meta);font-size:var(--fs-meta)}
.palette__empty{padding:var(--space-4);color:var(--text-meta);font-size:var(--fs-list);text-align:center}


/* ---------- lojas: cartões ---------- */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-4);align-items:start}
.store-card{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);min-width:0}
.store-card__head{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:var(--space-2)}
.store-card__head .store-card__name{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
.store-card__name{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--fs-card-title);font-weight:var(--fw-semibold);margin:0}
.store-card__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.ministat{background:var(--bg-subtle);border-radius:var(--radius-control);padding:var(--space-2) var(--space-3)}
.ministat .n{font-size:var(--fs-page);font-weight:var(--fw-bold);line-height:1.2;font-variant-numeric:tabular-nums}
.ministat .l{font-size:var(--fs-meta);color:var(--text-2)}
.store-card__test{font-size:var(--fs-meta);color:var(--text-meta);margin:0}
.store-card__tags,.store-card__actions{display:flex;gap:var(--space-2);flex-wrap:wrap}

/* ---------- formulários longos (loja): índice fixo + seções ---------- */
.crumb{margin:0 0 var(--space-2);font-size:var(--fs-list)}
.crumb a{display:inline-flex;align-items:center;gap:var(--space-1)}
.form-page{max-width:860px}
.toc{position:sticky;top:0;z-index:5;display:flex;gap:var(--space-1);flex-wrap:wrap;max-width:860px;margin-bottom:var(--space-4);
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-1)}
.toc a{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-control);
  color:var(--text-2);font-size:var(--fs-list);font-weight:var(--fw-medium);white-space:nowrap;min-height:32px}
.toc a:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
.toc .dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted);flex:none}
.toc .dot.ok{background:var(--dot-ok)}
.form-sec{margin-bottom:var(--space-4);scroll-margin-top:64px}
.form-sec>h2{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-4)}
.hint{color:var(--text-meta);font-size:var(--fs-meta);margin:var(--space-1) 0 0}
.hint--inline{display:inline;font-weight:var(--fw-regular)}
.form-actions{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-8)}
.form-actions--after{margin-top:calc(-1 * var(--space-4))}
.push-right{margin-left:auto}
@media(max-width:800px){.cols{grid-template-columns:1fr}.toc{overflow-x:auto;flex-wrap:nowrap}}

/* ---------- tabelas de gestão (usuários, cargos) ---------- */
.block{margin-bottom:var(--space-6)}
.panel__desc{color:var(--text-2);margin:0 0 var(--space-3)}
.panel>h2{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.callout{border-color:var(--border-strong)}
.cell-sub{color:var(--text-2);font-weight:var(--fw-regular);font-size:var(--fs-meta)}
.cell-sub--wrap{max-width:420px;white-space:normal}
.cell-msg{color:var(--text-2)}
.cell-person{display:inline-flex;align-items:center;gap:var(--space-2)}
.cell-actions{text-align:right;white-space:nowrap}
.cell-actions form,.cell-actions .btn{margin-left:var(--space-1)}
.tbl-wide{min-width:640px}
.tbl-users{min-width:640px}
.page-sub--lead{margin:calc(-1 * var(--space-4)) 0 var(--space-4)}
.narrow{max-width:560px}
.perm-group{border:1px solid var(--border);border-radius:var(--radius-control);margin:0 0 var(--space-4);padding:var(--space-2) var(--space-4) var(--space-3)}
.perm-group legend{padding:0 var(--space-2);font-weight:var(--fw-semibold)}
.perm-item{margin:var(--space-2) 0}
.perm-item label{display:flex;gap:var(--space-2);align-items:flex-start;font-weight:var(--fw-regular);cursor:pointer}
.perm-item input{margin-top:var(--space-1)}
.perm-item__desc{display:block;color:var(--text-2);font-size:var(--fs-meta)}
.prose{max-width:760px}
.prose h2{margin:var(--space-6) 0 var(--space-2)}
.prose ul{margin:0 0 var(--space-3);padding-left:var(--space-6)}
.prose li{margin-bottom:var(--space-1)}
.prose__status{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}

/* ---------- avisos em bloco (erro de formulário) ---------- */
.alert{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);
  border:1px solid var(--bad-border);background:var(--bad-bg);color:var(--tx-bad);border-radius:var(--radius-card)}
.alert .ic{margin-top:var(--space-1)}

/* ---------- agente IA: fluxo de decisão ---------- */
.simbox{margin-bottom:var(--space-4)}
.simbox>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);
  font-weight:var(--fw-semibold);border-radius:var(--radius-panel)}
.simbox>summary::-webkit-details-marker{display:none}
.simbox>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--text-meta);border-bottom:2px solid var(--text-meta);
  transform:rotate(45deg);transition:transform var(--motion)}
.simbox[open]>summary::after{transform:rotate(-135deg)}
.simbox>summary:hover{background:var(--bg-hover)}
.simbox>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.simbox[open]>summary{border-bottom:1px solid var(--border);border-radius:var(--radius-panel) var(--radius-panel) 0 0}
.simgrid{display:grid;grid-template-columns:1fr 1fr}
.simgrid>form{padding:var(--space-4);border-right:1px solid var(--border);display:flex;flex-direction:column}
.simgrid>div{padding:var(--space-4)}
.simfields{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-3)}
.simfields .fld{margin-bottom:var(--space-2)}
.simfields .field label{display:flex;align-items:baseline;gap:var(--space-1)}
.sim-submit{width:100%;margin-top:var(--space-2)}
.sim-result__lbl{font-size:var(--fs-meta);color:var(--text-meta);font-weight:var(--fw-medium);margin-bottom:var(--space-2)}
.sim-result__acao{font-size:var(--fs-page);font-weight:var(--fw-semibold);color:var(--text)}
.sim-result__just{color:var(--text-2);margin:var(--space-2) 0}
.sim-result__row{margin-top:var(--space-2);display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:baseline;color:var(--text-2);font-size:var(--fs-meta)}
.sim-result__foot{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border);font-size:var(--fs-meta);color:var(--text-meta)}
.sim-result__foot b{color:var(--text)}
@media(max-width:1000px){.simgrid{grid-template-columns:1fr}.simgrid>form{border-right:0;border-bottom:1px solid var(--border)}}
@media(max-width:640px){.simfields{grid-template-columns:1fr}}

.fc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-bottom:var(--space-3);
  border-bottom:1px solid var(--border);margin-bottom:var(--space-3);flex-wrap:wrap}
.legenda{display:flex;gap:var(--space-4);flex-wrap:wrap;font-size:var(--fs-meta);color:var(--text-2)}
.legenda span{display:inline-flex;align-items:center;gap:var(--space-2)}
.sw{display:inline-block;width:12px;height:12px;border-radius:var(--radius-xs);border:2px solid var(--text-muted)}
.sw.inicio{border-color:var(--tx-warn);background:var(--warn-bg)}.sw.proc{border-color:var(--tx-vip);background:var(--vip-bg)}
.sw.dec{border-color:var(--tx-ok);background:var(--ok-bg)}.sw.acao{border-color:var(--tx-info);background:var(--info-bg)}
.fc-hint{font-size:var(--fs-meta);color:var(--text-meta);white-space:nowrap}
.fc-zoom{display:flex;align-items:center;gap:var(--space-1)}
.fc-zoom button{min-width:32px;padding:0 var(--space-2)}
.fc-zoom__label{font-size:var(--fs-meta);color:var(--text-meta);min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
@media(max-width:900px){.fc-hint{display:none}}
.fc-viewport-wrap{position:relative}
/* tela de desenho: fundo do app com uma grade de pontos discreta (como num quadro do Miro) */
.fc-viewport{overflow:auto;max-height:72vh;border-radius:var(--radius-card);border:1px solid var(--border);position:relative;cursor:grab;
  scroll-behavior:smooth;background-color:var(--bg-app);background-image:radial-gradient(var(--border-strong) 1px,transparent 1px);background-size:16px 16px}
.fc-viewport:active,.fc-viewport.panning{cursor:grabbing}
.fc-viewport.panning{scroll-behavior:auto;user-select:none}
.fc-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:900px){.fc-viewport{max-height:60vh}}
.fc-canvas{position:relative;transform-origin:0 0;padding:var(--space-8)}
.fc-svg{position:absolute;top:0;left:0;pointer-events:none;overflow:visible}
.fc-edge{fill:none;stroke:var(--border-strong);stroke-width:1.6;stroke-linecap:round;transition:stroke var(--motion)}
.fc-edge.path{stroke:var(--tx-info);stroke-width:2.4}
.fc-edge-label{position:absolute;text-align:center;pointer-events:none;z-index:2}
.fc-edge-label .pill{display:inline-block;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:0 var(--space-2);
  font-size:12px;color:var(--text-2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;cursor:help}
.fc-edge-label.path .pill{border-color:var(--info-border);color:var(--tx-info);background:var(--info-bg)}
.fc-node{position:absolute;z-index:3;background:var(--bg-surface);border:1px solid var(--border);border-left:3px solid var(--text-muted);
  border-radius:var(--radius-control);padding:var(--space-2) var(--space-3);font-size:var(--fs-meta);line-height:1.4;color:var(--text);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:center;transition:transform var(--motion)}
.fc-node:hover{transform:translateY(-1px)}
.fc-node:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fc-node.inicio{border-left-color:var(--tx-warn);font-weight:var(--fw-semibold);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4)}
.fc-node.proc{border-left-color:var(--tx-vip)}
.fc-node.dec{border-left-color:var(--tx-ok);font-weight:var(--fw-semibold)}
.fc-node.acao{border-left-color:var(--tx-info)}
.fc-node-label{overflow-wrap:break-word;word-break:break-word}
.fc-node-rule{margin-top:var(--space-1);font-size:12px;color:var(--text-2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* caminho aceso depois da simulação */
.fc-node.path{border-color:var(--info-border);background:var(--info-bg)}
.fc-node.hit{border-color:var(--tx-info);background:var(--info-bg);box-shadow:0 0 0 2px var(--tx-info)}
.fc-node.hit .fc-node-rule,.fc-node.path .fc-node-rule{color:var(--text)}
.fc-here-badge{position:absolute;top:-12px;right:var(--space-2);background:var(--tx-info);color:var(--bg-surface);font-size:12px;
  font-weight:var(--fw-semibold);padding:0 var(--space-2);border-radius:var(--radius-pill);pointer-events:none;z-index:4}
.fc-minimap{position:absolute;right:var(--space-6);bottom:var(--space-6);background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-control);box-shadow:var(--shadow-float);padding:var(--space-1);z-index:5;line-height:0}
.fc-minimap canvas{display:block;border-radius:var(--radius-xs);cursor:pointer}
.fc-minimap-view{position:absolute;border:2px solid var(--tx-info);background:var(--info-bg);opacity:.7;border-radius:var(--radius-xs);pointer-events:none}
@media(max-width:700px){.fc-minimap{display:none}}
.fc-lista{margin-top:var(--space-3)}
.fc-lista summary{cursor:pointer;font-size:var(--fs-list);color:var(--text-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-control);
  list-style:none;display:inline-flex;gap:var(--space-1);align-items:center}
.fc-lista summary:hover{background:var(--bg-hover);color:var(--text)}
.fc-lista summary::-webkit-details-marker{display:none}
.fc-lista summary::before{content:"▸";display:inline-block;transition:transform var(--motion)}
.fc-lista[open] summary::before{transform:rotate(90deg)}
.fc-lista ol{margin:var(--space-1) 0;padding-left:var(--space-6)}
.fc-lista li{font-size:var(--fs-list);color:var(--text-2);line-height:1.7}
.fcl-tipo{color:var(--text-meta)}
.fcl-edge{color:var(--text);font-weight:var(--fw-semibold)}
.fcl-rule,.ovl-rule{overflow-wrap:anywhere;font-size:12px;color:var(--text-2);background:var(--bg-subtle);border-radius:var(--radius-xs);padding:0 var(--space-1);margin-left:var(--space-1)}
.ovl-titulo{margin:var(--space-6) 0 0}
.overlays{border-top:1px solid var(--border);margin:var(--space-3) 0 0;padding:var(--space-3) 0 0;list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
.ovl{font-size:var(--fs-list);color:var(--text);background:var(--warn-bg);border:1px dashed var(--warn-border);border-radius:var(--radius-control);
  padding:var(--space-2) var(--space-3);display:flex;gap:var(--space-2);align-items:flex-start;line-height:1.5}
.ovl-ic{color:var(--tx-warn);flex:none;display:inline-flex;padding-top:var(--space-1)}
.ovl>span:last-child{min-width:0;overflow-wrap:anywhere}
.ovl .ovl-rule{background:var(--bg-surface)}
.ovl.hit{border-style:solid;border-color:var(--tx-warn)}

/* ---------- agente IA: aprendizado ---------- */
.kpis--compact{grid-template-columns:repeat(auto-fit,minmax(176px,240px))}
.caso{margin-bottom:var(--space-3)}
.caso__head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);flex-wrap:wrap}
.caso-num{margin:0;font-size:var(--fs-card-title);font-weight:var(--fw-semibold)}
.caso__quando{margin-left:auto;color:var(--text-meta);font-size:var(--fs-meta)}
.caso__bloco{margin-bottom:var(--space-3)}
.caso__exemplo{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-control);padding:var(--space-3);
  font-size:var(--fs-list);color:var(--text-2);margin-bottom:var(--space-3);white-space:pre-wrap;overflow-wrap:anywhere}
.yaml-lbl{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-1)}
.yaml-lbl>span{font-size:var(--fs-meta);color:var(--text-meta)}
.copy-yaml-btn{min-height:28px;padding:0 var(--space-3);font-size:var(--fs-meta)}
.copy-yaml-btn.copied{color:var(--tx-ok);border-color:var(--ok-border);background:var(--ok-bg)}
.yaml-block{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-control);padding:var(--space-3);
  font-size:var(--fs-meta);line-height:1.6;overflow-x:auto;margin:0 0 var(--space-3);color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2}
.caso__convs{font-size:var(--fs-meta);color:var(--text-meta);margin-bottom:var(--space-3)}
.teach-form{display:flex;gap:var(--space-2);align-items:flex-start}
.teach-form__campo{flex:1}
.caso__fim{margin:0;font-size:var(--fs-list)}
.caso__fim--ok{display:flex;align-items:center;gap:var(--space-2);color:var(--text)}
.caso__fim--ok .ic{color:var(--tx-ok)}
@media(max-width:640px){.teach-form{flex-direction:column;align-items:stretch}}

/* ---------- páginas sem menu (login, pedido de acesso) ---------- */
.main-center{align-items:center;justify-content:center;padding:var(--space-4)}
.auth{min-height:100%;display:flex;align-items:center;justify-content:center;padding:var(--space-4)}
.auth-card{width:100%;max-width:400px;padding:var(--space-8)}
.auth-brand{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-6)}
.auth-brand__mark{width:32px;height:32px;border-radius:var(--radius-control);background:var(--text);color:var(--bg-surface);
  display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold)}
.auth-brand__name{font-weight:var(--fw-semibold);font-size:var(--fs-card-title)}
.auth-title{font-size:var(--fs-page);margin:0 0 var(--space-1)}
.auth-sub{color:var(--text-2);margin:0 0 var(--space-6)}
.auth-submit{width:100%;margin-top:var(--space-2)}
.auth-foot{margin:var(--space-6) 0 0;color:var(--text-2);font-size:var(--fs-meta);text-align:center}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media(max-width:420px){.auth-card{padding:var(--space-6) var(--space-4)}}

/* ---------- conversa: cards da lateral (pedido e decisão da IA) ---------- */
.section-lbl{font-size:var(--fs-meta);color:var(--text-meta);font-weight:var(--fw-medium);margin:var(--space-3) 0 var(--space-1)}
.fact-row{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.trace-row{display:flex;gap:var(--space-2);align-items:baseline;padding:var(--space-1) var(--space-2);border-radius:var(--radius-control);font-size:var(--fs-meta);border:1px solid transparent}
.trace-row.win{background:var(--bg-active);border-color:var(--border-strong)}
.trace-row.mod{background:var(--warn-bg)}
.trace-ic{min-width:16px}
.trace-name{flex:1}
.trace-name b{font-weight:var(--fw-regular);color:var(--text-2)}
.trace-row.win .trace-name b{font-weight:var(--fw-semibold);color:var(--text)}
.trace-row.win .trace-note,.trace-row.win .trace-pr{color:var(--text)}
.trace-note{color:var(--text-meta)}
.trace-note::before{content:" — "}
.trace-pr{color:var(--text-meta);font-variant-numeric:tabular-nums}
.trace-collapse summary{cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:var(--radius-control);font-size:var(--fs-meta);color:var(--text-meta)}
.trace-collapse summary:hover{background:var(--bg-hover);color:var(--text)}
.trace-total{font-size:var(--fs-meta);color:var(--text-meta);padding:var(--space-1) var(--space-2) 0}
.decision-box{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-3)}
.decision-acao{font-size:var(--fs-card-title);font-weight:var(--fw-semibold);color:var(--text);margin-bottom:var(--space-1)}
.pedido-head{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)}
.pedido-num{font-size:var(--fs-card-title);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.pedido-itens,.pedido-fix{list-style:none;margin:0 0 var(--space-3);padding:0;display:flex;flex-direction:column;gap:var(--space-1)}
.pedido-itens li{display:flex;gap:var(--space-2);align-items:baseline;justify-content:space-between;padding:var(--space-1) var(--space-2);border-radius:var(--radius-control);font-size:var(--fs-meta)}
.pedido-itens li:nth-child(odd){background:var(--bg-subtle)}
.pedido-qtd{font-variant-numeric:tabular-nums;flex:none}
.pedido-fix li{padding:var(--space-1) var(--space-2);border-radius:var(--radius-control);font-size:var(--fs-meta);background:var(--bg-subtle);color:var(--text)}
.pedido-nota{color:var(--text-meta);font-size:var(--fs-meta);margin:var(--space-2) 0 0}

/* ---------- Testar conversa (Agente IA) ---------- */
.pg{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--space-4);align-items:start}
.pg-lista{display:flex;flex-direction:column;gap:var(--space-3);position:sticky;top:var(--space-4)}
.pg-novo{display:flex;flex-direction:column;gap:var(--space-2);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-panel);padding:var(--space-3)}
.pg-novo label{font-size:13px;color:var(--text-2);font-weight:var(--fw-semibold)}
.pg-chats{display:flex;flex-direction:column;gap:var(--space-1);max-height:62vh;overflow:auto}
.pg-item{display:flex;flex-direction:column;gap:4px;padding:var(--space-2) var(--space-3);border:1px solid transparent;border-radius:var(--radius-panel);color:var(--text);text-decoration:none}
.pg-item:hover{background:var(--bg-subtle);text-decoration:none}
.pg-item[aria-current="page"]{background:var(--bg-surface);border-color:var(--border-strong)}
.pg-item__titulo{font-weight:var(--fw-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-item__meta{font-size:13px;color:var(--text-2)}
.pg-item__novo{font-size:13px;font-weight:var(--fw-semibold);color:var(--text)}
.pg-vazio{color:var(--text-2);font-size:14px;padding:var(--space-2) var(--space-3)}
.pg-painel{min-width:0}
.pg-chat{display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-panel);min-height:60vh}
.pg-chat__head{display:flex;justify-content:space-between;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}
.pg-chat__titulo{margin:0;font-size:var(--fs-card-title);font-weight:var(--fw-semibold)}
.pg-chat__loja{font-size:13px;color:var(--text-2);margin-top:4px}
.pg-chat__msgs{flex:1;overflow:auto;max-height:62vh;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.pg-dica{color:var(--text-2);margin:0;padding:var(--space-3);border:1px dashed var(--border-strong);border-radius:var(--radius-panel)}
.pg-msg{max-width:78%;border:1px solid var(--border);border-radius:var(--radius-panel);padding:var(--space-3)}
.pg-msg__quem{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;font-size:13px;font-weight:var(--fw-semibold);color:var(--text-2);margin-bottom:var(--space-1)}
.pg-msg__quem .ic{width:14px;height:14px}
.pg-msg__texto,.pg-pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.pg-msg--cliente{align-self:flex-end;background:var(--bg-subtle)}
.pg-msg--ia{align-self:flex-start;background:var(--tint-reply)}
.pg-msg--sistema{align-self:flex-start;background:var(--note-bg);border-color:var(--note-border);color:var(--note-text)}
.pg-msg--sistema .pg-msg__quem{color:var(--note-text)}
.pg-qa{margin:var(--space-2) 0 0;padding-left:var(--space-4);color:var(--tx-bad)}
.pg-detalhes{margin-top:var(--space-3);font-size:14px}
.pg-detalhes summary{cursor:pointer;color:var(--text-btn);font-weight:var(--fw-semibold)}
.pg-dl{display:grid;grid-template-columns:max-content 1fr;gap:4px var(--space-3);margin:var(--space-2) 0}
.pg-dl dt{color:var(--text-2)} .pg-dl dd{margin:0}
.pg-fatos{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.pg-fato{border:1px solid var(--border);border-radius:var(--radius-pill);padding:0 var(--space-2);background:var(--bg-surface);font-size:13px}
.pg-fato b{font-weight:var(--fw-semibold);margin-right:4px}
.pg-regras{margin:var(--space-1) 0 0;padding-left:var(--space-4)} .pg-regras .win{font-weight:var(--fw-semibold)}
.pg-aval{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap}
.pg-aval__rotulo{font-size:13px;color:var(--text-2)}
.pg-aval__btn[aria-pressed="true"].pg-aval__btn--boa{background:var(--ok-bg);color:var(--tx-ok);border-color:var(--ok-border)}
.pg-aval__btn[aria-pressed="true"].pg-aval__btn--ruim{background:var(--bad-bg);color:var(--tx-bad);border-color:var(--bad-border)}
.pg-nota{margin-top:var(--space-2);display:flex;flex-direction:column;gap:var(--space-1)}
.pg-nota[hidden]{display:none}
.pg-nota label{font-size:13px;color:var(--text-2)}
.pg-nota__acoes{display:flex;align-items:center;gap:var(--space-2)} .pg-nota__ok{font-size:13px;color:var(--tx-ok)}
.pg-compor{display:flex;gap:var(--space-2);align-items:flex-end;flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-top:1px solid var(--border)}
.pg-compor textarea{flex:1;min-width:200px;resize:vertical}
.pg-erro{flex-basis:100%;margin:0;color:var(--tx-bad);font-size:14px}
.pg-erro[hidden]{display:none}
.pg-pontos{display:flex;gap:4px;padding:var(--space-1) 0}
.pg-pontos i{width:6px;height:6px;border-radius:50%;background:var(--text-2);animation:pg-pulso 1.2s infinite ease-in-out}
.pg-pontos i:nth-child(2){animation-delay:.15s} .pg-pontos i:nth-child(3){animation-delay:.3s}
@keyframes pg-pulso{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pg-pontos i{animation:none}}
.pg-resumo{width:100%;font-family:monospace;font-size:13px}
.pg-av__topo{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-2)}
@media (max-width:900px){.pg{grid-template-columns:1fr}.pg-lista{position:static}.pg-chats{max-height:200px}.pg-msg{max-width:100%}}

/* ---------- Resumo do caso, cliente e notas da equipe (coluna da direita) ---------- */
.caso-box{display:flex;flex-direction:column;gap:var(--space-2)}
.caso-alerta{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-2) var(--space-3);border-radius:var(--radius-panel);border:1px solid var(--border);font-size:14px}
.caso-alerta .ic{width:16px;height:16px;flex:none;margin-top:4px}
.caso-alerta--bad{background:var(--bad-bg);color:var(--tx-bad);border-color:var(--bad-border)}
.caso-alerta--warn{background:var(--warn-bg);color:var(--tx-warn);border-color:var(--warn-border)}
.caso-resumo{margin:0;font-size:14px;line-height:1.5;color:var(--text)}
.caso-fonte{margin:0;font-size:13px;color:var(--text-2);display:flex;gap:var(--space-1);align-items:center}
.caso-fonte .ic{width:12px;height:12px}
.caso-passo{margin:var(--space-1) 0 0}
.caso-porque{margin:var(--space-2) 0 0;color:var(--text-2);font-size:14px}
.caso-linha{margin-top:var(--space-2);font-size:14px}
.caso-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
.caso-lista li{display:flex;gap:var(--space-2);align-items:flex-start}
.caso-lista .ic{width:14px;height:14px;flex:none;margin-top:4px;color:var(--tx-ok)}
.caso-lista--falta .ic{color:var(--tx-warn)}
.caso-tecnico{margin-top:var(--space-3);border-top:1px solid var(--border);padding-top:var(--space-2)}
.caso-tecnico summary{cursor:pointer;color:var(--text-2);font-size:14px}
.caso-nota{font-size:13px;margin:var(--space-2) 0}
.cli-nome{font-weight:var(--fw-semibold);font-size:15px;margin-bottom:var(--space-2)}
.cli-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin:var(--space-3) 0}
.cli-stat{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-panel);padding:var(--space-2);background:var(--bg-subtle);min-width:0}
.cli-stat__n{font-weight:var(--fw-semibold);font-size:15px;overflow-wrap:anywhere}
.cli-stat__l{font-size:12px;color:var(--text-2);line-height:1.25}
.cli-hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);font-size:14px}
.cli-hist li{display:flex;flex-direction:column;gap:4px}
.cli-nota{font-size:13px;margin:0 0 var(--space-2)}
.nota-aviso{font-size:13px;margin:0 0 var(--space-3)}
.nota{border:1px solid var(--note-border);background:var(--note-bg);color:var(--note-text);border-radius:var(--radius-panel);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2)}
.nota .dim{color:var(--note-text);opacity:.85}
.nota__meta{font-size:13px;margin-bottom:4px}
.nota__texto{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}
.nota__acoes{margin-top:var(--space-2);font-size:13px}
.nota__acoes summary{cursor:pointer}
.nota__acoes textarea,.nota-nova textarea{width:100%;margin:var(--space-1) 0;resize:vertical}
.nota__bar{display:flex;gap:var(--space-2);flex-wrap:wrap}
.nota-nova{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-3)}
.nota-nova label{font-size:13px;font-weight:var(--fw-semibold);color:var(--text-2)}

/* ---------- Sugestões de melhoria ---------- */
.sug-form{display:flex;flex-direction:column;gap:var(--space-3)}
.sug-form__linha{display:flex;gap:var(--space-3);flex-wrap:wrap}
.sug-campo{display:flex;flex-direction:column;gap:var(--space-1);min-width:180px;flex:1}
.sug-campo--grande{flex:3;min-width:260px}
.sug-campo label{font-size:13px;font-weight:var(--fw-semibold);color:var(--text-2)}
.sug-campo textarea{resize:vertical}
.sug-filtros{margin:var(--space-4) 0 var(--space-2);flex-wrap:wrap}
.sug-area{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);font-size:14px}
.sug-area label{color:var(--text-2)}
.sug{margin-bottom:var(--space-3)}
.sug__topo{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3)}
.sug__titulo{margin:0;font-size:var(--fs-card-title);font-weight:var(--fw-semibold)}
.sug__tags{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-2) 0;font-size:14px}
.sug__texto{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 var(--space-2)}
.sug__resposta{border:1px solid var(--border);background:var(--tint-reply);border-radius:var(--radius-panel);padding:var(--space-2) var(--space-3);margin:var(--space-2) 0;font-size:14px}
.sug__resposta p{margin:var(--space-1) 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.sug__mais{margin-top:var(--space-2);border-top:1px solid var(--border);padding-top:var(--space-2)}
.sug__mais summary{cursor:pointer;color:var(--text-2);font-size:14px}
.sug__mais .sug-form{margin-top:var(--space-3)}
.sug__bar{display:flex;gap:var(--space-2);flex-wrap:wrap}

/* ---------- Equipe (dashboard) ---------- */
.equipe-regra{max-width:var(--read-max);line-height:var(--lh-body);margin:var(--space-3) 0}
.equipe-form{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;font-size:14px}
.equipe-form input[type=number]{width:80px}
.cli-hist li .tag{align-self:flex-start}

/* ---------- Entrega e rastreio ---------- */
.rast-head{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-2)}
.rast-linha{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);font-size:14px;border-left:2px solid var(--border);padding-left:var(--space-3)}
.rast-linha li{display:flex;flex-direction:column;gap:0}
.rast-quando{font-size:13px;color:var(--text-2)}
.rast-desc{overflow-wrap:anywhere}
.rast-local{font-size:13px}
.rast-mais{margin-top:var(--space-2);font-size:14px}
.rast-mais summary{cursor:pointer;color:var(--text-2)}
.rast-fonte{font-size:13px;margin:var(--space-3) 0 0}

/* ---------- Configurações › Custos e equipe ---------- */
.gestao-abas{margin:0 0 var(--space-4);flex-wrap:wrap}
.gestao-abas .btn .ic{width:16px;height:16px}
.gestao-filtros{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.gestao-periodo{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.gestao-datas{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;font-size:14px}
.gestao-datas label{display:flex;gap:var(--space-1);align-items:center;color:var(--text-2)}
.gestao-rotulo{font-size:13px}
.gestao-extra{display:flex;gap:var(--space-2);flex-wrap:wrap}
.gestao-nota{font-size:13px;margin:var(--space-2) 0 0;max-width:var(--read-max);line-height:var(--lh-body)}
.gestao-lista{margin:0;padding-left:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);font-size:14px}
.gestao-lista ul{margin:var(--space-1) 0 0;padding-left:var(--space-4)}
.gestao-preco-form{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:flex-end;margin-top:var(--space-3);font-size:14px}
.gestao-preco-form label{display:flex;flex-direction:column;gap:var(--space-1);color:var(--text-2)}
.gestao-preco-form input[type=number]{width:140px}
.qual-como{margin-bottom:var(--space-4)}
.qual-como p{margin:var(--space-2) 0 0;max-width:var(--read-max);line-height:var(--lh-body)}
.qual-ver{margin-left:var(--space-2);font-size:13px;font-weight:var(--fw-regular,400)}
.qual-detalhe{margin-bottom:var(--space-3)}
.qual-detalhe summary{cursor:pointer;padding:var(--space-1) 0}
.qual-descartado{opacity:.65}
.qual-marcar{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.qual-marcar input[type=text]{min-width:200px}

/* ---------- A conversa parece e-mail ---------- */
.mail{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-panel);padding:var(--space-4);margin-bottom:var(--space-4)}
.mail--out{background:var(--tint-reply)}
.mail--rascunho{border-style:dashed;border-color:var(--border-strong)}
.mail__head{display:flex;gap:var(--space-3);align-items:flex-start}
.mail__quem{flex:1;min-width:0}
.mail__linha{display:flex;gap:var(--space-2);align-items:baseline;flex-wrap:wrap}
.mail__nome{font-size:var(--fs-body)}
.manual-shopify{margin-top:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-3)}
.manual-shopify summary{cursor:pointer;font-weight:var(--fw-semibold);display:flex;align-items:center;gap:var(--space-2)}
.manual-shopify[open] summary{margin-bottom:var(--space-3)}
.manual-shopify .scopes{width:100%;border-collapse:collapse;margin:var(--space-2) 0 var(--space-3)}
.manual-shopify .scopes th,.manual-shopify .scopes td{text-align:left;padding:var(--space-1) var(--space-2);border-bottom:1px solid var(--border);vertical-align:top}
.manual-shopify ol{padding-left:20px;line-height:var(--lh-body)}
.manual-shopify li{margin-bottom:var(--space-2)}
.mail__email,.mail__para{color:var(--text-2);font-size:13px;overflow-wrap:break-word;word-break:normal}
.mail__data{color:var(--text-2);font-size:13px;white-space:nowrap}
.mail__assunto{margin:var(--space-3) 0 0;font-size:14px}
.mail__corpo{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;margin-top:var(--space-3);font-size:var(--fs-body)}
.mail__citado{margin-top:var(--space-3)}
.mail__citado summary{cursor:pointer;display:inline-block;padding:0 var(--space-2);border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--text-2);font-size:13px;letter-spacing:.1em;list-style:none}
.mail__citado summary::-webkit-details-marker{display:none}
.mail__citado[open] summary{background:var(--bg-subtle)}
.mail__citado .mail__corpo{color:var(--text-2);border-left:3px solid var(--border);padding-left:var(--space-3)}
.mail__anexos,.composer__guardados,.composer__escolhidos{list-style:none;margin:var(--space-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.anexo{display:inline-flex;align-items:center;gap:var(--space-2);max-width:100%;padding:var(--space-1) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg-surface);color:var(--text);font-size:14px;text-decoration:none}
a.anexo:hover{background:var(--bg-subtle);text-decoration:none}
.anexo .ic{width:14px;height:14px;flex:none}
.anexo__nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.anexo__tam{font-size:13px;white-space:nowrap}
.anexo__tirar{width:20px;height:20px;padding:0;line-height:1}
.composer__guardados li{display:flex;align-items:center;gap:var(--space-2)}
.composer__cab{display:flex;flex-direction:column;gap:var(--space-1);font-size:14px;padding:var(--space-2) 0;border-bottom:1px solid var(--border);margin-bottom:var(--space-2)}
.composer__anexar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
.composer__anexar .btn .ic{width:14px;height:14px}
.composer__limites{font-size:13px}
.composer__escolhidos{flex-basis:100%;margin:0}
.composer__erro{flex-basis:100%;margin:0;color:var(--tx-bad);font-size:14px}
.composer__erro[hidden]{display:none}
[data-composer].is-arrastando{outline:2px dashed var(--border-strong);outline-offset:-4px}

/* ---------- casca ---------- */
.app__main>.page{max-width:calc(var(--page-max) + 2*var(--sp-10))}
.rail__item .ic-lg{width:20px;height:20px}
.rail__avatar{position:relative;margin-top:var(--space-1);padding:0;border:0;background:transparent;cursor:pointer;border-radius:var(--r-full)}
.rail__item .tema-sol{display:none}
[data-theme="dark"] .rail__item .tema-sol{display:inline-flex}
[data-theme="dark"] .rail__item .tema-lua{display:none}
.scrim{display:none}
@media(max-width:1279px){
  body.side-open .scrim{display:block;position:fixed;inset:0;z-index:35;background:var(--overlay)}
}
@media(max-width:1023px){
  body.secnav-open .scrim{display:block;position:fixed;inset:0;z-index:35;background:var(--overlay)}
}

/* ==========================================================================
   Caixa de entrada: complementos do ui.css (só layout e estados; nenhuma cor ou medida nova)
   ========================================================================== */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* colunas: cabeçalho fixo e corpo que rola */
@media (min-width: 1024px) {
  .app--inbox > .col--list { overflow: hidden; }
  .app--inbox > .secnav--inbox { overflow-y: auto; }
}
.list-body { flex: 1; min-height: 0; overflow-y: auto; }
.secnav--inbox .col-header { flex: none; }
.secnav-expand { display: none; }
body[data-secnav="collapsed"] .secnav-expand { display: inline-flex; }
@media (min-width: 1024px) { body[data-secnav="collapsed"] .secnav--inbox { display: none; } }
.pref-ic { display: inline-flex; color: var(--badge-purple-tx); }
.pref-ic .icon--14 { fill: currentColor; }

.conv-row__name { min-width: 0; }
.conv-row__meta > .t-meta { min-width: 0; }
.conv-row__meta .badge { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 20px; }
a.chip, a.chip:hover { text-decoration: none; }
.pager { padding: var(--sp-3) var(--sp-4); }

/* menus flutuantes */
.pop-wrap { position: relative; display: inline-flex; }
.popover[hidden] { display: none; }
.pop-wrap > .popover { top: calc(100% + 4px); left: 0; }
.popover--right { left: auto !important; right: 0; }
.popover--wide { width: 260px; }
.popover form { margin: 0; }
a.popover__item { text-decoration: none; }
.popover__rotulo { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.popover__aviso { padding: var(--sp-2) 10px; }
.popover__data { padding: var(--sp-2) 10px; border-top: 1px solid var(--border); margin-top: var(--sp-1); }
.popover__linha { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); }
.popover__input { flex: 1; min-width: 0; height: 28px; padding: 0 var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-ctrl); background: var(--bg-surface); color: var(--text-1); }
.btn-split > .popover { top: auto; left: auto; }
.chip .dot { animation: none; }
.dot--neutro { background: var(--border-strong); }

/* cabeçalho da conversa */
.conv-header__linha { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.conv-header__linha:first-child { flex-wrap: nowrap; gap: var(--sp-1); }
.conv-header__titulo { flex: 1; min-width: 0; margin: 0; }
.conv-header__loja { display: inline-flex; align-items: center; gap: 6px; }
.conv-header__tags:empty { display: none; }
.conv-header__chips .presence-note { margin-left: auto; }
.back-to-list, .side-open-btn { display: none; }
body[data-side="collapsed"] .side-open-btn { display: inline-flex; }
.col--conversation { overflow: hidden; }
.conv-vazia { flex: 1; display: flex; align-items: center; justify-content: center; }

/* linha do tempo */
.msg__header { flex-wrap: nowrap; }
.msg__quem { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.msg__texto { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 10px; }
.msg__envelope { display: none; margin-top: 6px; overflow-wrap: anywhere; }
body.mostrar-original .msg__envelope { display: block; }
.msg__citado { margin-top: var(--sp-3); }
.msg__citado summary { cursor: pointer; list-style: none; display: inline-block; letter-spacing: .1em; }
.msg__citado summary::-webkit-details-marker { display: none; }
.msg__anexos { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.msg__acoes { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }
.msg .attachment { text-decoration: none; max-width: 100%; }
.note__lista { margin: 4px 0 0; padding-left: 18px; }
.note__extra { margin-top: 10px; padding-top: var(--sp-2); border-top: 1px solid var(--note-border); }
.note__texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.note__acoes { margin-top: var(--sp-2); }
.note__acoes summary { cursor: pointer; }
.note__bar { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }

/* editor */
.composer__topo { display: flex; align-items: center; gap: var(--sp-3); }
.composer__para { margin-left: auto; min-width: 0; }
.composer__form { display: flex; flex-direction: column; gap: 10px; }
.composer__form[hidden] { display: none; }
.composer__toolbar { flex-wrap: wrap; }
.editor--note .editor__text { background: transparent; }
.composer__guardados, .composer__escolhidos { margin: 0; }

/* painel cliente e pedido */
.col--panel { overflow-y: auto; }
.col-header .t-card { margin: 0; }
.side-cliente { display: flex; gap: var(--sp-3); align-items: flex-start; }
.side-cliente__dados { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.side-cliente__nome { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.side-cliente__linha { display: flex; align-items: center; gap: 4px; min-width: 0; }
.btn--mini { width: 24px; height: 24px; padding: 0; color: var(--text-2); }
.stat-strip { margin-top: var(--sp-3); }
.side-link { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-3); font-size: 12px; font-weight: 500; }
details.side-section > summary { list-style: none; cursor: pointer; }
details.side-section > summary::-webkit-details-marker { display: none; }
details.side-section[open] > .side-section__header { margin-bottom: var(--sp-3); }
details.side-section:not([open]) > .side-section__header { margin-bottom: 0; }
.side-section__header .t-card { margin: 0; }
.side-section__chev { display: inline-flex; color: var(--text-2); transition: transform var(--t-fast); }
.side-section__header h3 + .side-section__chev, .side-section__header #rastreio-alerta + .side-section__chev { margin-left: auto; }
details.side-section:not([open]) .side-section__chev { transform: rotate(180deg); }
.side-linha { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-3); flex-wrap: wrap; }
.side-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.side-itens li { display: flex; gap: 10px; align-items: flex-start; }
.side-itens__nome { flex: 1; min-width: 0; }
.side-totais { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.side-totais__total { display: flex; justify-content: space-between; font-weight: 600; }
.side-grade { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 8px; margin-top: var(--sp-3); }
.side-fix { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.side-rastreio { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.side-rastreio > .icon, .side-rastreio > .ic { color: var(--text-2); }
.side-section--compacta { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.side-hist > summary { list-style: none; justify-content: flex-start; padding: 0 4px; cursor: pointer; }
.side-hist > summary::-webkit-details-marker { display: none; }
.side-hist > summary > .ic:first-child { color: var(--text-2); transition: transform var(--t-fast); }
.side-hist[open] > summary > .ic:first-child { transform: rotate(90deg); }
.side-lista { list-style: none; margin: 4px 0 var(--sp-2) 28px; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.side-lista li { display: flex; flex-direction: column; gap: 2px; }
.side-hist__vazio { margin: 4px 0 var(--sp-2) 28px; }
.side-acao { padding: var(--sp-4); }
.track__title { display: block; }
.track__when { font-size: 12px; line-height: 16px; color: var(--text-2); }
.rast-resumo { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }

/* responsivo da caixa de entrada */
@media (max-width: 1279px) {
  .side-open-btn { display: inline-flex; }
  body.side-open .col--panel { display: block; position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 100vw); z-index: 41; box-shadow: var(--shadow-pop); }
}
@media (max-width: 1023px) {
  .secnav-expand { display: inline-flex; }
  body.secnav-open .secnav--inbox { display: flex; position: fixed; left: 0; top: 0; bottom: 0; z-index: 41; width: min(var(--menu-w), 100vw); box-shadow: var(--shadow-pop); }
  .app--inbox { height: auto; }
  .app--inbox > .col--list { flex: 1 1 100%; }
  .app--inbox[data-view="conversa"] .col--list { display: none; }
  .app--inbox[data-view="lista"] .col--conversation { display: none; }
  .app--inbox > .col--conversation { flex: 1 1 100%; min-height: calc(100vh - 56px); }
  .back-to-list { display: inline-flex; }
  .col--conversation, .timeline { min-height: 0; }
}
.stat-strip .num { white-space: nowrap; }
.rast-resumo + .track, .rast-resumo + .t-meta, .inline-alert + .track { margin-top: var(--sp-2); }
.rast-fonte { margin-top: var(--sp-3); }
.rast-mais { margin-top: var(--sp-2); }

/* Cabeçalho do menu de visões: "Caixa de entrada" pequeno em cima, nome da frente embaixo. */
.secnav__titulo { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }

/* Página que não rola para o vazio: texto só para leitor de tela (.sr-only, absoluto) dentro de uma
   coluna rolável escapava do corte e esticava o documento; com o .app como referência ele fica contido. */
.app { position: relative; }
/* Em telas largas o trilho e o menu lateral acompanham a rolagem, em vez de esticar até o fim da página. */
@media (min-width: 1024px) {
  .app:not(.app--inbox) > .rail,
  .app:not(.app--inbox) > .secnav { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
}

/* Cabeçalho de página (macro page_head): título e subtítulo à esquerda, ações à direita, com respiro embaixo. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.page-head h1 { margin: 0; }
.page-sub { margin: var(--sp-1) 0 0; color: var(--text-2); font-size: var(--fs-list, 13px); }
.page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.page-actions:empty { display: none; }

/* Editor (resposta e nota): a regra genérica de textarea/foco acima desenhava uma segunda borda por dentro
   do editor. Quem mostra o foco é o próprio .editor (:focus-within), então o campo fica sem borda e sem anel. */
.editor .editor__text,
.editor .editor__text:focus,
.editor .editor__text:focus-visible { border: 0; border-radius: 0; outline: 0; box-shadow: none; }
.editor .editor__text { min-height: 120px; resize: none; }
.editor--note .note__header { padding: var(--sp-3) var(--sp-3) 0 !important; }
.editor--note .editor__text { padding-top: var(--sp-2); min-height: 154px; }  /* mesma altura da aba Responder: o editor não pula ao trocar de aba */

/* Visões salvas e tags no menu lateral */
.nav-item-linha { display: flex; align-items: center; }
.nav-item-linha .nav-item { flex: 1; min-width: 0; }
.nav-item-linha form { flex: none; }
.visao-salvar summary { cursor: pointer; list-style: none; }
.visao-salvar summary::-webkit-details-marker { display: none; }
.visao-salvar form { display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.secnav__vazio { padding: 0 var(--sp-3); margin: 0; }
.popover__form { display: grid; gap: var(--sp-2); padding: var(--sp-2); }


/* Respostas prontas: página do Agente IA e seletor do editor */
.rp-loja { display: inline-flex; align-items: center; gap: var(--sp-2); }
.rp-loja select { height: 32px; }
.rp-barra { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.rp-busca { width: 280px; }
.rp-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.rp-corpo { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.rp-lista { padding: var(--sp-1); display: flex; flex-direction: column; }
.rp-item { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-ctrl); color: inherit; text-decoration: none; }
.rp-item:hover { background: var(--bg-hover); text-decoration: none; }
.rp-item.is-active { background: var(--bg-selected); }
.rp-item__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.rp-item__titulo { font-weight: 500; }
.rp-item__idiomas { display: flex; gap: 4px; flex: none; }
.rp-vazio { padding: var(--sp-5); }
.rp-editor { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.rp-grade3 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.rp-grade3 .field, .rp-editor .field { min-width: 0; }
.rp-vars { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.rp-idiomas summary { cursor: pointer; font-weight: 500; }
.rp-idioma { margin-top: var(--sp-3); }
.rp-check { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); font-size: 13px; }
.rp-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.rp-caixa { padding: var(--sp-3) var(--sp-4); }
.rp-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.rp-bloco { display: block; }
.rp-acao { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.rp-rodape { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.rp-dup { display: inline-flex; gap: var(--sp-2); }
.pop-wrap > .popover.rp-seletor { width: 340px; top: auto; bottom: calc(100% + 8px); left: 0; padding: var(--sp-2); }
.rp-seletor__lista { max-height: 260px; overflow-y: auto; margin: var(--sp-2) 0; }
.rp-seletor__item { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: var(--sp-2); border: 0; border-radius: var(--r-ctrl); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.rp-seletor__item:hover, .rp-seletor__item:focus-visible { background: var(--bg-hover); }
.rp-seletor__item span:first-child { font-weight: 500; }
.rp-seletor__rodape { padding: var(--sp-1) var(--sp-2) 0; border-top: 1px solid var(--border); padding-top: var(--sp-2); }
.rp-seletor__vazio { padding: var(--sp-3); }
@media (max-width: 1100px) { .rp-corpo { grid-template-columns: 1fr; } }


/* Sino de notificações */
.rail__badge--ponto { min-width: 8px; width: 8px; height: 8px; padding: 0; top: 8px; right: 9px; }
.popover--avisos { position: fixed; left: calc(var(--rail-w) + 8px); bottom: 64px; width: 360px; max-height: 70vh; padding: 0; display: flex; flex-direction: column; z-index: 45; }
.popover--avisos[hidden] { display: none; }
.avisos__cab { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.avisos__lista { overflow-y: auto; }
.aviso { display: block; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.aviso:last-child { border-bottom: 0; }
.aviso:hover { background: var(--bg-hover); text-decoration: none; }
.aviso--nova { background: var(--bg-subtle); }
.aviso__titulo { display: flex; align-items: center; gap: var(--sp-2); font-weight: 500; }
.aviso__ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.aviso__texto { margin: 2px 0 0; }
.avisos__vazio { padding: var(--sp-5); text-align: center; }

/* Clientes */
.cli-nome { display: inline-flex; align-items: center; gap: var(--sp-3); color: inherit; text-decoration: none; font-weight: 500; }
.cli-nome:hover .cli-nome__n { text-decoration: underline; }
.cli-nome__txt { display: flex; flex-direction: column; min-width: 0; }
.cli-lojas { display: inline-flex; flex-wrap: wrap; gap: var(--sp-3); }
.cli-loja { width: 200px; }
.cli-topo { display: flex; align-items: center; gap: var(--sp-3); }
.cli-resumo { margin-bottom: var(--sp-4); max-width: 640px; }
.cli-sec { padding: var(--sp-3) var(--sp-3) var(--sp-1); margin: 0; }
.cli-corpo { grid-template-columns: minmax(0, 1fr) 320px; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); }


/* Editor com as duas versões (português e idioma do cliente) */
.editor__bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) 0; }
.editor__aviso { margin: 0; padding: 0 var(--sp-3) var(--sp-2); }
.editor [hidden] { display: none; }

.side-totais__linha { display: flex; justify-content: space-between; margin-bottom: var(--sp-1); }


/* Solicitações (Sistema Stravon) e gaveta */
.request-item { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.request-item__txt { flex: 1; min-width: 0; }
.scrim--gaveta { position: fixed; inset: 0; z-index: 40; background: var(--overlay); }
.scrim--gaveta[hidden], .drawer--wide[hidden] { display: none; }
.gaveta__form { display: flex; flex-direction: column; height: 100%; }
.gaveta__bloco { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.int-card { padding: var(--sp-5); margin-bottom: var(--sp-4); display: grid; gap: var(--sp-4); max-width: 760px; }
.int-campo { display: flex; gap: var(--sp-2); }
.int-campo .field { flex: 1; }
.int-chaves { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.int-chaves li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.int-estado { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.int-code { display: block; margin-top: var(--sp-1); word-break: break-all; }
.scrim--gaveta:not([hidden]) { display: block; }
.drawer__body .field + .label, .drawer__body .textarea + .label { margin-top: var(--sp-3); }
[data-gaveta-tipo-campos][hidden] { display: none; }

/* Painel */
.pn-kpis { margin-bottom: var(--sp-5); }
.pn-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); align-items: start; }
.pn-card-h { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); min-height: 52px; }
.pn-li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); color: inherit; text-decoration: none; border-bottom: 1px solid var(--border); }
.pn-li:last-child { border-bottom: 0; }
.pn-li:hover { background: var(--bg-hover); text-decoration: none; }
.pn-li__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pn-li__nome { display: flex; align-items: center; gap: 6px; }
.pn-tag { min-width: 96px; justify-content: center; }
.pn-vazio { padding: var(--sp-5); }
.pn-barras { padding: var(--sp-4); display: grid; gap: var(--sp-2); }
.pn-barras[hidden] { display: none; }
.pn-barra { display: grid; grid-template-columns: 130px minmax(0, 1fr) 36px; align-items: center; gap: var(--sp-3); }
.pn-barra .num { text-align: right; }
.pn-barra__trilho { height: 8px; border-radius: var(--r-full); background: var(--bg-subtle); overflow: hidden; }
.pn-barra__preench { display: block; height: 100%; border-radius: var(--r-full); background: var(--text-2); }
.pn-barra__preench--irritado { background: var(--badge-amber-tx); }
.pn-barra__preench--muito_irritado { background: var(--badge-red-tx); }
.pn-canais { list-style: none; margin: 0; padding: var(--sp-2) 0; }
.pn-canais li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); }
.pn-canal__nome { font-weight: 500; }
.pn-canal__texto { flex: 1; min-width: 0; }
.pn-ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--dot-ok); }
.pn-ponto--warn { background: var(--badge-amber-tx); }
.pn-ponto--bad { background: var(--badge-red-tx); }
.pn-ponto--off { background: var(--text-muted); }
.pn-ponto--pulsa { animation: pn-pulsa 1.6s ease-in-out infinite; }
@keyframes pn-pulsa { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 5px var(--badge-red-bg); } }
@media (prefers-reduced-motion: reduce) { .pn-ponto--pulsa { animation: none; } }


/* Ações em massa */
.conv-row__sel { position: absolute; left: 6px; top: 12px; z-index: 2; width: 18px; height: 18px; opacity: 0; transition: opacity var(--t-fast); }
.conv-row__sel input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.conv-row { position: relative; }
.conv-row:hover .conv-row__sel, .conv-row__sel:focus-within, .conv-row__sel.is-ligada { opacity: 1; }
.massa { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.massa[hidden], .massa [hidden] { display: none; }
.massa select, .massa input[name="valor"] { height: 28px; width: auto; min-height: 28px; padding: 0 8px; font-size: 12px; }
.massa__n { margin-right: auto; font-size: 13px; }

/* Barra do "Desfazer" do envio */
.desfazer { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); background: var(--text-1); color: var(--bg-surface); border-radius: var(--r-card); box-shadow: var(--shadow-pop); }


/* Botão "IA" da conversa e página Autonomia */
.ia-botao { gap: 6px; }
.ia-chave { position: relative; width: 24px; height: 14px; border-radius: 999px; background: var(--border-strong); flex: none; }
.ia-chave::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg-surface); transition: transform var(--t-fast); }
.ia-chave.is-ligada { background: var(--accent); }
.ia-chave.is-ligada::after { transform: translateX(10px); }
.ia-botao.is-desligada { color: var(--text-2); }
.pop-wrap > .popover.popover--ia { width: 320px; padding: var(--sp-3); right: 0; left: auto; display: grid; gap: var(--sp-2); }
.pop-wrap > .popover.popover--ia[hidden] { display: none; }
.ia-motivos { border: 0; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.ia-motivos .chip { cursor: pointer; }
.ia-motivos label:has(input:checked) { background: var(--bg-selected); }
.ia-botoes { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
.aut-form { display: grid; gap: var(--sp-4); }
.aut-card { padding: var(--sp-5); margin-bottom: var(--sp-4); display: grid; gap: var(--sp-3); }
.aut-niveis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3); }
.aut-nivel { display: grid; gap: 4px; align-content: start; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-card); cursor: pointer; }
.aut-nivel input { position: absolute; opacity: 0; pointer-events: none; }
.aut-nivel.is-escolhido { border: 2px solid var(--text-1); padding: calc(var(--sp-4) - 1px); }
.aut-nivel.is-desabilitado { opacity: .55; cursor: not-allowed; }
.aut-nivel__nome { font-weight: 600; }
.aut-medidor { display: inline-flex; gap: 3px; }
.aut-medidor i { width: 14px; height: 6px; border-radius: 2px; background: var(--border-strong); }
.aut-medidor i.on { background: var(--text-1); }
.aut-tipos { list-style: none; margin: 0; padding: 0; display: grid; }
.aut-tipos li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.aut-tipos li:last-child { border-bottom: 0; }
.aut-ex { display: block; }
.aut-rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); position: sticky; bottom: 0; padding: var(--sp-3) 0; background: var(--bg-app); }
.aut-add { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.aut-add .field { min-width: 160px; }
.aut-desfazer { padding: var(--sp-2) var(--sp-3); background: var(--bg-subtle); border-radius: var(--r-ctrl); }
.aut-busca { max-width: 280px; }

/* anexos: miniatura de imagem dentro da mensagem */
.attachment-previa { display: block; margin-bottom: 6px; }
.attachment-previa img { display: block; max-width: min(100%, 320px); max-height: 220px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-subtle); object-fit: contain; }
/* lista de conversas sem o círculo de iniciais: a caixinha de seleção ganha uma margem própria */
.list-body .conv-row { padding-left: 30px; }