/* ============ Sistema real: login, fotos, conexão ============ */
[hidden] { display: none !important; }
.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--s6) var(--s4); background: var(--surface); }
.auth-card { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--s5); }
.auth-card .logo { height: 40px; width: auto; align-self: flex-start; }
.auth-card h1 { margin: 0; }
.auth-card .card { display: flex; flex-direction: column; gap: var(--s5); }
.auth-foot { color: var(--ink-muted); font-size: 14px; line-height: 20px; text-align: center; }

.conn-bar { position: sticky; top: 0; z-index: 25; background: var(--danger-soft); color: var(--danger); font-weight: 600; font-size: 14px; text-align: center; padding: var(--s2) var(--s4); }

.vc .ph img.cover, .vthumb img, .mimg img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.vthumb { position: relative; overflow: hidden; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s2); }
.photo { position: relative; aspect-ratio: 4 / 3; background: var(--surface-high); border-radius: var(--r-sm); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo .pbtns { position: absolute; inset: auto 4px 4px 4px; display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity .15s; }
.photo:hover .pbtns, .photo:focus-within .pbtns { opacity: 1; }
.photo .pbtns button { height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: rgba(0,0,0,.75); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.photo .capa { position: absolute; left: 4px; top: 4px; }
.photo-add { aspect-ratio: 4 / 3; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: var(--r-sm); color: var(--ink-muted); font-weight: 600; font-size: 14px; cursor: pointer; text-align: center; padding: var(--s2); }
.photo-add:hover { color: var(--ink); border-color: var(--ink); }
@media (hover: none) { .photo .pbtns { opacity: 1; } }
.mimg { cursor: zoom-in; }
.maudio audio { width: 220px; max-width: 100%; height: 36px; }
.mdoc a { color: inherit; }
.msg .merr { font-size: 12px; color: var(--danger); font-weight: 600; }
.ticks.fail { color: var(--danger); letter-spacing: 0; }
.secret { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; background: var(--surface); padding: var(--s2) var(--s3); border-radius: var(--r-sm); word-break: break-all; user-select: all; }
.copyrow { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.copyrow .secret { flex: 1 1 240px; }
.qr-img { width: 168px; height: 168px; background: #fff; padding: 8px; border-radius: 6px; flex: none; display: grid; place-items: center; }
.qr-img img, .qr-img svg { width: 100%; height: 100%; image-rendering: pixelated; }
.code-sample { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 19px; background: var(--surface); padding: var(--s3); border-radius: var(--r-sm); white-space: pre-wrap; overflow-x: auto; margin: 0; }
.temp-pass { font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; text-align: center; padding: var(--s4); background: var(--surface-raised); border-radius: var(--r-sm); user-select: all; }
.loading { color: var(--ink-muted); text-align: center; padding: var(--s8) var(--s4); }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.88); display: grid; place-items: center; padding: var(--s4); cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ============ Conexão do WhatsApp: escolha entre API oficial e QR Code ============ */
.wa-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.wa-opt { gap: var(--s4); }
.wa-opt > .btn { align-self: flex-start; }
.wa-opt-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.wa-opt-head h3 { margin: 0; font-size: 17px; line-height: 24px; }
.wa-pros { margin: 0; padding-left: var(--s5); line-height: 24px; font-size: 15px; }
.wa-warn { font-weight: 500; font-size: 14px; line-height: 20px; }
.qr-img.qr-lg { width: 232px; height: 232px; }
@media (max-width: 860px) { .wa-options { grid-template-columns: minmax(0, 1fr); } .qr-img.qr-lg { width: 200px; height: 200px; } }

/* ============ Etapas do funil ============ */
.head-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.st-list { display: flex; flex-direction: column; }
.st-row { display: flex; align-items: center; gap: var(--s3); min-height: 56px; border-top: 1px solid var(--line-soft); }
.st-list .st-row:first-child { border-top: 0; }
.st-row input { flex: 1; min-width: 0; height: 40px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 16px; font-weight: 600; }
.st-row.fixed b { flex: 1; padding-left: var(--s3); }
.st-meta { flex: none; white-space: nowrap; }
.st-btns { display: flex; flex: none; }
.st-btns .iconbtn[disabled] { opacity: .3; cursor: not-allowed; }
.kmark.lost { background: var(--danger); }
@media (max-width: 860px) { .st-meta { display: none; } .page-head .head-actions .btn-secondary { display: inline-flex; } }

/* ============ Mostrar senha ============ */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap input { width: 100%; padding-right: 48px !important; }
.pw-eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: var(--ink-muted); cursor: pointer; border-radius: var(--r-sm); }
.pw-eye:hover { color: var(--ink); background: var(--surface-raised); }
.pw-wrap input::-ms-reveal { display: none; }

/* ============ Páginas legais ============ */
.legal { max-width: 760px; margin: 0 auto; padding: var(--s7) var(--s4) var(--s8); line-height: 26px; }
.legal-logo img { height: 34px; width: auto; margin-bottom: var(--s6); }
.legal h2 { font-size: 18px; line-height: 24px; margin: var(--s7) 0 var(--s2); }
.legal ul { padding-left: var(--s5); }
.legal li { margin-bottom: var(--s1); }
.legal a { color: var(--accent-text); }
.legal mark { background: var(--brand); color: var(--on-brand); padding: 0 4px; border-radius: 3px; }
.legal-foot { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--line-soft); color: var(--ink-muted); font-size: 14px; }
.legal-links { text-align: center; font-size: 13px; color: var(--ink-muted); }
.legal-links a { color: inherit; }
.support-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: center; gap: var(--s3); flex-wrap: wrap; background: var(--brand); color: var(--on-brand); font-weight: 600; font-size: 14px; padding: 6px var(--s4); }
.support-bar button { height: 30px; padding: 0 var(--s3); border: 1px solid currentColor; background: transparent; color: inherit; font-weight: 700; cursor: pointer; border-radius: 6px; }
.danger-card { box-shadow: inset 3px 0 0 var(--danger); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not([disabled]) { filter: brightness(1.08); }

/* Foto do cliente: miniatura no card do funil e no cabeçalho da conversa */
.lc .who { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.lc .who .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av.lc-av { width: 28px; height: 28px; font-size: 11px; }
.drawer-title.has-av { display: flex; align-items: center; gap: var(--s3); }
.drawer-title .dt-txt { min-width: 0; }
.av.dr-av { width: 48px; height: 48px; font-size: 17px; border-radius: 12px; }

/* Agente de IA */
.ia-faq { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--line-soft); }
.ia-faq .btn { align-self: flex-start; }
.ia-res { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); background: var(--surface-raised); border-radius: var(--r-sm); }
.ia-res .msg { max-width: 100%; align-self: flex-start; white-space: pre-wrap; }

/* Calendário e horário com a identidade do Motor */
.dp-btn { width: 100%; height: 44px; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 16px; text-align: left; cursor: pointer; }
.dp-btn:hover:not(:disabled) { border-color: var(--ink-muted); }
.dp-btn[aria-expanded="true"], .dp-btn:focus-visible { border-color: var(--line); box-shadow: var(--glow); }
.dp-btn { transition: box-shadow .2s ease, border-color .2s ease; }
.dp-btn svg { flex: none; color: var(--ink-muted); }
.dp-btn:disabled { opacity: .6; cursor: default; }
.dp-pop, .tp-pop { position: fixed; z-index: 1000; background: var(--surface); color: var(--ink); border: 1px solid var(--line-soft); border-radius: var(--r-md); box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.dp-pop { width: 312px; padding: var(--s3); }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.dp-head b { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .5px; }
.dp-nav { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 10px; cursor: pointer; }
.dp-nav:hover { background: var(--surface-high); }
.dp-wd, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd span { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-muted); padding: 4px 0; }
.dp-day { height: 38px; border: 0; background: transparent; border-radius: 10px; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; }
.dp-day:hover:not(:disabled) { background: var(--surface-high); }
.dp-day.out { color: var(--ink-muted); opacity: .55; }
.dp-day.today { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--ink); }
.dp-day.sel { background: var(--ink); color: var(--brand); font-weight: 700; box-shadow: none; }
.dp-day:disabled { opacity: .25; cursor: default; }
.dp-day:focus-visible, .dp-nav:focus-visible, .dp-quick button:focus-visible, .tp-pop button:focus-visible { outline: none; box-shadow: var(--glow); }
.dp-quick { display: flex; gap: var(--s2); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-soft); }
.dp-quick button { flex: 1; height: 34px; border: 1px solid var(--line-soft); background: var(--surface-raised); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dp-quick button:hover { border-color: var(--ink); }
.tp-pop { width: 120px; max-height: 248px; overflow-y: auto; padding: 4px; display: flex; flex-direction: column; }
.tp-pop button { height: 36px; flex: none; border: 0; background: transparent; border-radius: 8px; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; }
.tp-pop button:hover { background: var(--surface-high); }
.tp-pop button[aria-selected="true"] { background: var(--ink); color: var(--brand); font-weight: 700; }
.tp-input { font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .dp-day.sel, :root[data-theme="dark"] .tp-pop button[aria-selected="true"] { background: var(--brand); color: #fff; }
:root[data-theme="dark"] .dp-day.today:not(.sel) { box-shadow: inset 0 0 0 1.5px var(--brand); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dp-day.sel, :root:not([data-theme="light"]) .tp-pop button[aria-selected="true"] { background: var(--brand); color: #fff; }
  :root:not([data-theme="light"]) .dp-day.today:not(.sel) { box-shadow: inset 0 0 0 1.5px var(--brand); }
}

/* Mensagens agendadas */
.msg-vars { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.msg-vars .pill { height: 32px; font-size: 13px; }
.msg-status { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3); border-radius: var(--r-sm); background: var(--surface-raised); font-size: 14px; line-height: 20px; }
.msg-status svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.msg-status.good { background: color-mix(in srgb, var(--brand) 22%, var(--surface)); }
.msg-status.danger { background: var(--danger-soft); color: var(--danger); }

/* Financeiro */
.fin-month { margin-bottom: var(--s5); }
.fin-alerts { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
.fin-alert { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--danger-soft); color: var(--danger); border: 0; border-radius: var(--r-sm); cursor: pointer; text-align: left; font-size: 14px; line-height: 20px; }
.fin-alert span b { display: block; }
.fin-alert svg { flex: none; width: 20px; height: 20px; }
.fin-chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s3); height: 190px; align-items: end; }
.fc-col { display: flex; flex-direction: column; align-items: center; gap: var(--s2); height: 100%; }
.fc-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.fc-bars span { width: min(22px, 38%); min-height: 2px; border-radius: 6px 0 0 0; }
.fc-r, .fc-legend i.fc-r { background: var(--ink); }
.fc-d, .fc-legend i.fc-d { background: var(--line); }
:root[data-theme="dark"] .fc-r, :root[data-theme="dark"] .fc-legend i.fc-r { background: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fc-r, :root:not([data-theme="light"]) .fc-legend i.fc-r { background: var(--brand); } }
.fc-l { font-size: 13px; color: var(--ink-muted); text-transform: capitalize; }
.fc-col.cur .fc-l { color: var(--ink); font-weight: 700; }
.fc-legend { display: flex; gap: var(--s4); margin-top: var(--s3); font-size: 13px; color: var(--ink-muted); }
.fc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.fin-cat .lbl { font-size: 14px; }
.fin-cat .val { min-width: 96px; text-align: right; font-size: 14px; }
.table-wrap { overflow-x: auto; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fin-table th { text-align: left; font-weight: 600; color: var(--ink-muted); padding: 0 var(--s3) var(--s2) 0; white-space: nowrap; }
.fin-table td { padding: var(--s3) var(--s3) var(--s3) 0; border-top: 1px solid var(--line-soft); white-space: nowrap; }
.fin-table td:first-child { white-space: normal; }
.pos { color: var(--accent-text); }
.neg { color: var(--danger); }
.fin-row .open { align-items: center; }
.fin-val { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-variant-numeric: tabular-nums; }
.fin-val b { font-size: 15px; }
.fin-row.is-paid .tx b { color: var(--ink-muted); }
.fin-tools { margin-bottom: var(--s4); }
.fin-totals { display: flex; flex-wrap: wrap; gap: var(--s5); padding: var(--s3) var(--s4); margin-bottom: var(--s5); background: var(--surface-raised); border-radius: var(--r-sm); font-size: 14px; color: var(--ink-muted); }
.fin-totals b { font-size: 16px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.fin-kind { width: 100%; }
.fin-kind button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.fin-kind button svg { width: 16px; height: 16px; }
.fin-parc { height: 44px; display: flex; align-items: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-setup { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.inv-num { flex: none; min-width: 64px; font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-head { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.inv-key { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 22px; word-break: break-all; padding: var(--s3); background: var(--surface-raised); border-radius: var(--r-sm); }
.form-sub { margin: var(--s2) 0 0; font-size: 15px; font-weight: 700; }
.fin-tax { border-top: 1px solid var(--line-soft); padding-top: var(--s4); }
.fin-tax summary { cursor: pointer; font-weight: 600; }
@media (max-width: 860px) { .fin-chart { height: 150px; } .fin-totals { gap: var(--s3); } }

/* Link de texto que é botão (ex.: "Ver todos") */
button.textlink { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.task .chk.msg-chk { display: grid; place-items: center; cursor: default; border-style: dashed; color: var(--ink-muted); }
.task .chk.msg-chk svg { width: 13px; height: 13px; }

/* Tema claro: botões e chaves em verde-limão, como no escuro; borda sutil para o verde não "sumir" no branco */
:root:not([data-theme="dark"]) .switch input:checked { border-color: var(--brand); }
:root:not([data-theme="dark"]) .switch input:checked::after { background: #fff; }
.dp-day.sel, .tp-pop button[aria-selected="true"] { background: var(--brand); color: #fff; }
.dp-day.today:not(.sel) { box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary, :root:not([data-theme="light"]) .sendbtn { box-shadow: none; } :root:not([data-theme="light"]) .switch input:checked::after { background: var(--on-action); } }

/* Site da loja */
.site-hero-in { display: flex; flex-direction: column; gap: var(--s4); }
.site-hero.on { box-shadow: inset 4px 0 0 var(--brand); }
.slug-row { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.slug-row:focus-within { box-shadow: var(--glow); }
.slug-pre { display: flex; align-items: center; padding: 0 var(--s3); background: var(--surface-high); color: var(--ink-muted); font-size: 15px; white-space: nowrap; }
.field .slug-row input { border: 0; border-radius: 0; height: 42px; }
.color-row { display: flex; align-items: center; gap: var(--s3); }
.color-row input[type="color"] { width: 52px; height: 40px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.site-swatch { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 6px; font-weight: 700; font-size: 14px; }
.site-banners { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); }
.site-banner { margin: 0; border: 1px solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.site-banner img { width: 100%; aspect-ratio: 8 / 3; object-fit: cover; }
.site-banner figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); font-size: 13px; color: var(--ink-muted); }
.site-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.site-nums .field { gap: 6px; }
@media (max-width: 860px) { .site-nums { grid-template-columns: minmax(0, 1fr); } .slug-pre { font-size: 13px; } }

/* ============ Movimento: transições suaves entre páginas, gaveta e conversa ============ */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes drawer-out { to { transform: translateX(24px); opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes topbar { 0% { transform: translateX(-100%) scaleX(.3); } 60% { transform: translateX(40%) scaleX(.6); } 100% { transform: translateX(110%) scaleX(.3); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* troca de página: o conteúdo sobe de leve, em cascata curta */
.view.enter > * { animation: rise .32s cubic-bezier(.2,.8,.2,1) both; }
.view.enter > *:nth-child(2) { animation-delay: .03s; }
.view.enter > *:nth-child(3) { animation-delay: .06s; }
.view.enter > *:nth-child(n+4) { animation-delay: .09s; }

/* gaveta: troca de aba ou de item sem piscar; fechamento desliza para fora */
.drawer.swap .drawer-body, .drawer.swap .drawer-foot { animation: rise .24s cubic-bezier(.2,.8,.2,1) both; }
.overlay.leaving { pointer-events: none; animation: fade-out .18s ease-in forwards; position: fixed; inset: 0; z-index: 49; }
.drawer-ghost { background: var(--surface); width: min(560px, 100%); height: 100%; overflow: hidden; display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(0,0,0,.12); animation: drawer-out .18s ease-in forwards; }
.dlg-overlay .dlg { transform-origin: center; }

/* conversa: mensagem nova entra deslizando; a que está saindo fica um pouco apagada */
.msg.msg-new { animation: msg-in .22s cubic-bezier(.2,.8,.2,1) both; }
.msg.out.msg-new { transform-origin: bottom right; }
.msg.in.msg-new { transform-origin: bottom left; }
.msg.sending { opacity: .72; }
.ticks.wait { display: inline-flex; vertical-align: -1px; opacity: .8; }
.sendbtn { transition: transform .12s, filter .15s; }
.sendbtn:active { transform: scale(.92); }

/* carregando: esqueleto da conversa e indicador giratório */
.chat-sk { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s2) 0; }
.chat-sk .sk { display: block; height: 40px; width: 58%; border-radius: var(--r-md) var(--r-md) var(--r-md) 0; background: linear-gradient(90deg, var(--surface-raised) 25%, var(--surface-high) 50%, var(--surface-raised) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.chat-sk .sk.out { align-self: flex-end; border-radius: var(--r-md) var(--r-md) 0 var(--r-md); width: 46%; }
.chat-sk .sk.short { width: 34%; }
.chat-sk .sk.long { width: 64%; height: 56px; }
.loading::before { content: ""; display: block; width: 22px; height: 22px; margin: 0 auto var(--s3); border: 2.5px solid var(--line); border-top-color: var(--action); border-radius: 50%; animation: spin .7s linear infinite; }

/* barra fina no topo enquanto o servidor responde */
#topbar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s; }
#topbar::after { content: ""; position: absolute; inset: 0; background: var(--action); transform-origin: left; animation: topbar 1.1s ease-in-out infinite; }
#topbar.on { opacity: 1; }

/* toques: botões e itens respondem ao clique */
.btn { transition: background-color .15s, border-color .15s, filter .15s, transform .12s; }
.btn:active:not([disabled]) { transform: scale(.97); }
.nav a, .row, .tab { transition: background-color .15s, color .15s; }
.tab[aria-selected="true"]::after { animation: tab-in .2s cubic-bezier(.2,.8,.2,1); transform-origin: left; }
@keyframes tab-in { from { transform: scaleX(.4); opacity: 0; } }
.nav a[aria-current="page"]::before { animation: fade .2s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .view.enter > *, .drawer.swap .drawer-body, .msg.msg-new, #topbar::after, .chat-sk .sk { animation: none !important; }
}

/* ============ Gráficos: barras crescem e números sobem ao abrir a página ============ */
@keyframes grow-w { from { width: 0; } }
@keyframes grow-h { from { height: 0; } }
.view.enter .frow .bar { animation: grow-w .9s cubic-bezier(.2,.8,.2,1) .08s both; }
.view.enter .frow:nth-child(2) .bar { animation-delay: .14s; }
.view.enter .frow:nth-child(3) .bar { animation-delay: .2s; }
.view.enter .frow:nth-child(4) .bar { animation-delay: .26s; }
.view.enter .frow:nth-child(5) .bar { animation-delay: .32s; }
.view.enter .frow:nth-child(n+6) .bar { animation-delay: .38s; }
.view.enter .fc-r, .view.enter .fc-d { animation: grow-h .9s cubic-bezier(.2,.8,.2,1) .1s both; }
.view.enter .fc-col:nth-child(2) span { animation-delay: .16s; }
.view.enter .fc-col:nth-child(3) span { animation-delay: .22s; }
.view.enter .fc-col:nth-child(4) span { animation-delay: .28s; }
.view.enter .fc-col:nth-child(5) span { animation-delay: .34s; }
.view.enter .fc-col:nth-child(6) span { animation-delay: .4s; }
.stat-value, .facts b, .frow .val, .pc .kv b { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .view.enter .frow .bar, .view.enter .fc-r, .view.enter .fc-d { animation: none !important; } }

/* ============ Conversa: arquivo do computador e atalhos com "/" ============ */
.qr-menu { position: absolute; left: var(--s3); right: var(--s3); bottom: calc(100% - 8px); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 6px; max-height: 280px; overflow-y: auto; z-index: 6; animation: pop .14s ease-out; }
.qr-menu[hidden] { display: none; }
.qr-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px var(--s3); background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; text-align: left; color: var(--ink); }
.qr-menu button b { font-size: 14px; color: var(--ink); }
.qr-menu button span { font-size: 13px; line-height: 18px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.qr-menu button[aria-selected="true"], .qr-menu button:hover { background: var(--surface-raised); }
.qr-menu button[aria-selected="true"] b { color: var(--accent-text); }
.qr-empty { padding: var(--s3); font-size: 14px; color: var(--ink-muted); }
.qr-empty a { color: var(--ink); font-weight: 600; }
.qr-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: var(--s3); align-items: start; padding: var(--s4) 0; border-top: 1px solid var(--line-soft); }
.qr-row .btn { margin-top: 26px; }
@media (max-width: 860px) { .qr-row { grid-template-columns: minmax(0, 1fr); } .qr-row .btn { margin-top: 0; justify-self: start; } }
.file-prev { display: grid; place-items: center; background: var(--surface-raised); border-radius: var(--r-md); padding: var(--s5); }
.file-prev.media { padding: 0; overflow: hidden; }
.file-prev img, .file-prev video { display: block; max-width: 100%; max-height: 300px; object-fit: contain; }
.file-prev .fp-ic svg { width: 48px; height: 48px; color: var(--ink-muted); }
.dlg-foot .btn svg { width: 18px; height: 18px; }
.mvideo video { display: block; width: 260px; max-width: 100%; border-radius: var(--r-sm); background: #22222b; }
.chat.drop { outline: 2px dashed var(--action); outline-offset: 4px; border-radius: var(--r-md); }

/* ============ Logo do site da loja (prévia nas configurações) ============ */
.site-logo-box { display: flex; align-items: center; height: 84px; padding: 0 var(--s5); background: var(--sl-bg); border: 1px solid var(--line-soft); border-radius: var(--r-md); margin-bottom: var(--s3); }
.site-logo-box img { height: 34px; width: auto; max-width: min(260px, 100%); object-fit: contain; }
.site-logo-box span { font: 600 20px var(--font-display); color: #8a8a85; }

/* ============ Gravação de áudio no chat ============ */
.composer .mic { color: var(--ink-muted); }
.composer .mic:hover { color: var(--ink); }
.rec-bar { position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3); min-height: 48px; display: flex; align-items: center; gap: var(--s3); padding: 0 4px 0 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; z-index: 7; animation: pop .16s ease-out; }
.rec-bar .iconbtn { color: var(--danger); }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; flex-shrink: 0; animation: rec-pulse 1s ease-in-out infinite; }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 40px; }
.rec-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 24px; overflow: hidden; }
.rec-wave i { flex: 1; max-width: 4px; height: 30%; background: var(--ink-muted); border-radius: 2px; opacity: .55; animation: rec-wave 1.1s ease-in-out infinite; }
.rec-wave i:nth-child(3n) { animation-delay: .15s; } .rec-wave i:nth-child(3n+1) { animation-delay: .35s; } .rec-wave i:nth-child(4n) { animation-delay: .55s; } .rec-wave i:nth-child(5n) { animation-delay: .8s; }
@keyframes rec-pulse { 50% { opacity: .35; } }
@keyframes rec-wave { 0%, 100% { height: 25%; } 50% { height: 95%; } }
@media (max-width: 860px) { .rec-bar { left: var(--s2); right: var(--s2); bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .rec-dot, .rec-wave i { animation: none !important; } }

/* ============ Plano e pagamento ============ */
.plan-hero-top { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.plan-price { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s2); }
.plan-price b { font-family: var(--font-display); font-size: 32px; line-height: 38px; }
.plan-price span { color: var(--ink-muted); }
.plan-items { list-style: none; margin: 0; padding: 0; }
.plan-items li { display: flex; justify-content: space-between; gap: var(--s3); padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.plan-items li.tot { font-weight: 700; }
.plan-ed { display: flex; flex-direction: column; }
.plan-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--line-soft); }
.plan-row.col { flex-direction: column; align-items: stretch; }
.plan-row > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.plan-row > div:first-child span { font-size: 14px; color: var(--ink-muted); }
.plan-step { display: inline-flex; align-items: center; gap: var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px; }
.plan-step b { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.plan-step .iconbtn { font-size: 20px; font-weight: 600; }
.seg { display: flex; gap: var(--s2); flex-wrap: wrap; }
.seg button { flex: 1; min-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s; }
.seg button small { font-weight: 500; font-size: 12px; color: var(--ink-muted); }
.seg button[aria-checked="true"] { border-color: var(--action); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--action); }
.plan-mods { display: flex; flex-direction: column; gap: var(--s2); }
.plan-mod { display: grid !important; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.plan-mod span { display: flex; flex-direction: column; gap: 2px; }
.plan-mod small { color: var(--ink-muted); font-size: 13px; }
.plan-mod em { font-style: normal; font-weight: 600; white-space: nowrap; }
.plan-mod.off { opacity: .6; }
.plan-total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s4) 0; border-top: 1px solid var(--line); margin-top: var(--s2); }
.plan-total b { font-family: var(--font-display); font-size: 26px; }
.plan-total small { font-family: var(--font-text); font-size: 14px; color: var(--ink-muted); margin-left: 4px; }
.plan-banner { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); margin-bottom: var(--s5); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: var(--r-md); }
.plan-banner span { flex: 1; min-width: 200px; }
.plan-banner svg { color: var(--danger); }
.note.warn svg { color: var(--danger); }
@media (max-width: 860px) { .plan-row { flex-direction: column; align-items: stretch; } .plan-mod { grid-template-columns: auto 1fr; } .plan-mod em { grid-column: 2; } }

/* ============ Menu lateral recolhível ============ */
/* a linha do logo sobe para o topo do logo ficar na mesma altura do símbolo do menu recolhido (alinhado ao título da página) */
.side-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: -4px 0 var(--s7) var(--s3); min-height: 36px; }
.side .side-top .logo { margin: 0; }
.logo-mini { display: none; width: 32px; height: auto; object-fit: contain; }
.side-toggle { color: var(--ink-muted); flex: none; }
.side-toggle:hover { color: var(--ink); }
.app, .side { transition: grid-template-columns .2s cubic-bezier(.2,.8,.2,1), padding .2s; }
@media (min-width: 861px) { body.side-min .app { grid-template-columns: 76px minmax(0, 1fr); } }
body.side-min .side { padding-left: var(--s3); padding-right: var(--s3); }
body.side-min .side-top { flex-direction: column; margin: var(--s2) 0 var(--s6); gap: var(--s3); }
body.side-min .side-top .logo { display: none; }
body.side-min .logo-mini { display: block; }
body.side-min .nav a, body.side-min .side-link { justify-content: center; padding: 0; }
body.side-min .nav a span:not(.count), body.side-min .side-link span { display: none; }
body.side-min .nav a[aria-current="page"]::before { left: 4px; }
body.side-min .nav .count { position: absolute; top: 4px; right: 6px; margin: 0; min-width: 18px; font-size: 11px; line-height: 16px; padding: 0 4px; }
body.side-min .me-card { justify-content: center; padding: var(--s2); }
body.side-min .me-card .who, body.side-min .me-card > svg { display: none; }
@media (max-width: 860px) { .side-toggle { display: none; } }
@media (prefers-reduced-motion: reduce) { .app, .side { transition: none; } }

/* ============ Emojis e figurinhas ============ */
.emoji-menu { position: absolute; left: var(--s3); right: var(--s3); bottom: calc(100% - 8px); max-width: 380px; max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: var(--s2) var(--s3) var(--s3); z-index: 6; animation: pop .14s ease-out; }
.emoji-menu[hidden] { display: none; }
.em-title { display: block; font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--ink-muted); margin: var(--s2) 0 4px; }
.em-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.em-grid button { height: 38px; font-size: 22px; line-height: 1; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.em-grid button:hover, .em-grid button:focus-visible { background: var(--surface-raised); }
.msg.t-sticker { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.msticker img { display: block; width: 150px; height: 150px; object-fit: contain; }
.msticker small, .msticker .linkbtn { display: inline-block; padding: 8px 10px; background: var(--surface-raised); border-radius: 10px; }
.msg.t-sticker .mmeta { justify-content: flex-end; padding: 2px 4px; }
@media (max-width: 860px) { .em-grid { grid-template-columns: repeat(7, 1fr); } }

/* ============ Avaliações ============ */
.av-card { text-align: left; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.badge.warn { background: color-mix(in srgb, #f5a524 18%, transparent); color: #b7791f; }
:root[data-theme="dark"] .badge.warn { color: #f5c46b; }
.tcount { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; font-size: 12px; line-height: 20px; border-radius: 6px; background: var(--surface-raised); color: var(--ink-muted); text-align: center; }
.av-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s2); }
.av-slot { position: relative; aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: var(--surface-raised); color: var(--ink-muted); font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; overflow: hidden; }
.av-slot:hover { border-color: var(--ink-muted); color: var(--ink); }
.av-slot svg { width: 22px; height: 22px; }
.av-slot.has { border-style: solid; }
.av-slot.has img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av-slot.has span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; }
.av-extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.av-extras figure { position: relative; margin: 0; aspect-ratio: 1; border-radius: 6px; overflow: hidden; }
.av-extras img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.av-extras button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; }
.av-extras button svg { width: 14px; height: 14px; }
.chk { display: flex; flex-direction: column; }
.chk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.chk-l { font-weight: 600; font-size: 15px; }
.chk-opts { display: inline-flex; gap: 4px; }
.chk-opts button { height: 32px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted); border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; }
.chk-opts button[aria-pressed="true"].chk-ok { background: color-mix(in srgb, #22a06b 16%, var(--surface)); border-color: #22a06b; color: #1a7f55; }
.chk-opts button[aria-pressed="true"].chk-atencao { background: color-mix(in srgb, #f5a524 18%, var(--surface)); border-color: #f5a524; color: #a1620b; }
.chk-opts button[aria-pressed="true"].chk-problema { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.chk-opts button[aria-pressed="true"].chk-na { background: var(--surface-high); color: var(--ink); }
:root[data-theme="dark"] .chk-opts button[aria-pressed="true"].chk-ok { color: #4cd39a; }
:root[data-theme="dark"] .chk-opts button[aria-pressed="true"].chk-atencao { color: #f5c46b; }
.chk-obs { grid-column: 1 / -1; height: 38px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.chk-group { border-top: 1px solid var(--line-soft); }
.chk-group summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-weight: 700; cursor: pointer; list-style: none; }
.chk-group summary::-webkit-details-marker { display: none; }
.chk-group .chk-row:first-of-type { border-top: 0; }
.av-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.av-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; background: color-mix(in srgb, #22a06b 12%, var(--surface)); }
.av-chip.atencao { background: color-mix(in srgb, #f5a524 16%, var(--surface)); }
.av-chip button { width: 22px; height: 22px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; border-radius: 50%; }
.av-chip button svg { width: 14px; height: 14px; }
.av-add { display: flex; gap: var(--s2); margin-top: var(--s3); }
.av-add input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; }
.av-prep { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.av-prep-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto; gap: var(--s2); width: 100%; }
.av-prep-row input { height: 44px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; min-width: 0; }
.av-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); margin-top: var(--s4); padding: var(--s4); background: var(--surface-raised); border-radius: var(--r-md); }
.av-sum div { font-size: 13px; color: var(--ink-muted); display: flex; flex-direction: column; gap: 2px; }
.av-sum b { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.av-sum b.neg { color: var(--danger); }
@media (max-width: 860px) { .chk-row { grid-template-columns: minmax(0, 1fr); } .av-prep-row { grid-template-columns: minmax(0, 1fr) 110px auto; } }
.av-foot { flex-wrap: wrap; }
@media (max-width: 560px) { .av-foot .btn { flex: 1 1 auto; } .av-foot .btn[data-act="av-del"] { flex: 0 0 100%; order: 3; margin: 0 !important; } }

/* ============ Responder e reagir ============ */
.msg { position: relative; }
.mact { position: absolute; top: -14px; display: none; gap: 2px; padding: 2px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.14); z-index: 2; }
.msg.out .mact { right: 6px; }
.msg.in .mact { left: 6px; }
.msg:hover .mact, .msg.act-on .mact, .msg:focus-within .mact { display: flex; }
.mact button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: pointer; }
.mact button:hover { background: var(--surface-raised); color: var(--ink); }
.mact button svg { width: 17px; height: 17px; }
.mquote { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px; padding: 6px 10px; border-left: 3px solid var(--mark); border-radius: 6px; background: rgba(0,0,0,.06); font-size: 13px; line-height: 18px; cursor: pointer; max-width: 100%; }
.mquote.q-in { border-left-color: #22a06b; }
.mquote b { font-size: 12px; }
.mquote span { color: var(--ink-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.msg.out .mquote { background: rgba(0,0,0,.07); }
.msg.has-rx { margin-bottom: 14px; }
.mreacts { position: absolute; bottom: -14px; display: inline-flex; gap: 2px; padding: 1px 6px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; font-size: 14px; line-height: 22px; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.msg.out .mreacts { right: 10px; }
.msg.in .mreacts { left: 10px; }
.reply-bar { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); }
.reply-bar .mquote { flex: 1; margin: 0; cursor: default; background: var(--surface-raised); }
.react-pop { position: fixed; z-index: 120; display: flex; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,.2); animation: pop .14s ease-out; }
.react-pop button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; cursor: pointer; transition: transform .12s; }
.react-pop button:hover { transform: scale(1.2); background: var(--surface-raised); }
.react-pop button[aria-pressed="true"] { background: var(--surface-high); }
@keyframes flash-msg { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--action); } }
.msg.flash { animation: flash-msg 1.2s ease-out; }
@media (hover: none) { .msg:hover .mact { display: none; } .msg.act-on .mact { display: flex; } }
/* campo de mensagem com espaço no celular: o teclado já tem emojis, e os botões ficam mais estreitos */
.composer textarea { flex: 1 1 auto; min-width: 0; }
@media (hover: none), (max-width: 560px) {
  .composer [data-act="chat-emoji"] { display: none; }
  .composer .iconbtn { width: 36px; min-width: 36px; }
}

/* ============ Menu de baixo (celular e app): ícones maiores, 5 por tela, arrasta para o lado ============ */
@media (max-width: 860px) {
  .tabbar { display: flex !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar a { flex: 0 0 20%; min-width: 20%; height: 68px; gap: 5px; scroll-snap-align: start; font-size: 12px; letter-spacing: .1px; }
  .tabbar a svg, .tabbar a i { width: 26px; height: 26px; stroke-width: 1.8; }
  .tabbar a span:not(.count) { max-width: 100%; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a[aria-current="page"]::before { left: 30%; right: 30%; }
  .tabbar .count { top: 7px; left: calc(50% + 8px); }
  /* poucas abas (área do mecânico): cada botão ocupa uma parte igual, ícone e nome lado a lado, letra maior */
  .tabbar.poucos a { flex: 1 1 0; min-width: 0; height: 72px; flex-direction: row; gap: 10px; font-size: 15px; font-weight: 600; }
  .tabbar.poucos a svg, .tabbar.poucos a i { width: 26px; height: 26px; }
  .tabbar.poucos a + a { border-left: 1px solid var(--line-soft); }
  .tabbar.poucos a[aria-current="page"] { background: var(--surface-raised); }
  .tabbar.poucos a[aria-current="page"]::before { left: 20%; right: 20%; }
  .tabbar.poucos .count { position: static; margin-left: -4px; }
  /* com mais de 5 opções, a borda direita esmaece para mostrar que dá para arrastar */
  .tabbar.scrolls { -webkit-mask-image: linear-gradient(90deg, #22222b calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #22222b calc(100% - 28px), transparent); }
  .toast, .fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ============ Responder e reagir (v2): botões ao lado do balão; gestos no celular ============ */
.msg { touch-action: pan-y; -webkit-tap-highlight-color: transparent; transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.msg.swiping { transition: none; }
.msg::before { content: ""; position: absolute; top: 50%; left: -40px; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; opacity: var(--sw, 0); transform: scale(calc(.6 + var(--sw, 0) * .4)); pointer-events: none;
  background: var(--surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17 4 12l5-5'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E") center/16px no-repeat; }
.mact { top: 50% !important; transform: translateY(-50%); display: flex !important; gap: 4px; padding: 0; background: none; border: 0; box-shadow: none; opacity: 0; pointer-events: none; transition: opacity .15s; }
.msg.out .mact { right: calc(100% + 8px) !important; left: auto !important; flex-direction: row-reverse; }
.msg.in .mact { left: calc(100% + 8px) !important; right: auto !important; }
.msg:hover .mact, .msg:focus-within .mact { opacity: 1; pointer-events: auto; }
.mact button { width: 32px; height: 32px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: 0 2px 8px rgba(0,0,0,.12); color: var(--ink-muted); transition: transform .12s, color .12s, background-color .12s; }
.mact button:hover { transform: scale(1.08); color: var(--ink); background: var(--surface-raised); }
.mact button svg { width: 16px; height: 16px; }
@media (hover: none) { .mact { display: none !important; } }
@media (hover: none) { .msg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }

/* ============ Áudio na mensagem agendada ============ */
.t-audio { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3); background: var(--surface-raised); border-radius: var(--r-md); }
.t-audio audio { flex: 1 1 220px; min-width: 0; height: 40px; }
.t-audio b { font-variant-numeric: tabular-nums; }

/* ============ Leads arquivados ============ */
.arq-row { gap: var(--s3); flex-wrap: wrap; }
.linkbtn-row { flex: 1; min-width: 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.linkbtn-row b { font-size: 15px; }
.linkbtn-row span { font-size: 14px; color: var(--ink-muted); }
.linkbtn-row:hover b { text-decoration: underline; }
.arq-acts { display: flex; gap: var(--s2); flex-wrap: wrap; }
@media (max-width: 560px) { .arq-acts { width: 100%; } .arq-acts .btn { flex: 1; } }
/* "Arquivados" continua visível no celular (os outros botões do topo viram o botão flutuante) */
@media (max-width: 860px) { .page-head .head-actions .btn-arq, .page-head .head-actions .btn-etapas { display: inline-flex; height: 40px; padding: 0 var(--s3); font-size: 14px; } .page-head:has(.btn-arq) { align-items: flex-start; } }
/* Leads no celular: Etapas e Arquivados lado a lado, no canto direito, na linha do título */
@media (max-width: 860px) {
  /* título e botões numa linha; o subtítulo desce e usa a largura toda */
  .page-head:has(.btn-arq) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s2); row-gap: 2px; }
  .page-head:has(.btn-arq) > div:first-child { display: contents; }
  .page-head:has(.btn-arq) .t-sub { grid-column: 1 / -1; }
  .page-head:has(.btn-arq) .head-actions { grid-row: 1; grid-column: 2; margin: 0; flex-direction: row; align-items: center; gap: 2px; flex-wrap: nowrap; }
  .page-head .head-actions .btn-arq, .page-head .head-actions .btn-etapas { height: 36px; padding: 0 var(--s2); font-size: 14px; white-space: nowrap; }
}

/* ============ Avisos e suporte ============ */
.aviso-banner { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); margin-bottom: var(--s5); background: var(--surface-raised); border: 1px solid var(--line-soft); border-left: 4px solid var(--mark); border-radius: var(--r-md); }
.aviso-banner.alerta { border-left-color: var(--danger); }
.aviso-banner > svg { color: var(--accent-text); flex: none; }
.aviso-banner.alerta > svg { color: var(--danger); }
.aviso-banner span { flex: 1; min-width: 200px; }
.side-link .count { margin-left: auto; font-size: 12px; line-height: 18px; font-weight: 700; min-width: 20px; padding: 0 6px; text-align: center; background: var(--danger); color: #fff; border-radius: 8px; }
.side-link .count[hidden] { display: none; }
body.side-min .side-link .count { position: absolute; top: 2px; right: 8px; min-width: 16px; padding: 0 4px; font-size: 10px; }
.side-link { position: relative; }
.sup-app, .sup-msgs { display: flex; flex-direction: column; gap: var(--s2); }
.sup-msgs { max-height: 60vh; overflow-y: auto; padding: var(--s2); }
.sup-msg { max-width: 82%; padding: 8px 12px; border-radius: 14px 14px 14px 3px; background: var(--surface-raised); border: 1px solid var(--line-soft); align-self: flex-start; font-size: 15px; line-height: 21px; }
.sup-msg.out { align-self: flex-end; background: var(--out-bg, var(--surface-high)); color: var(--out-ink, var(--ink)); border-color: transparent; border-radius: 14px 14px 3px 14px; }
.sup-msg small { display: block; margin-top: 2px; font-size: 12px; opacity: .7; }
.sup-foot { display: block !important; }
.sup-compose, .sup-form { display: flex; gap: var(--s2); align-items: flex-end; }
.sup-compose textarea, .sup-form textarea { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.sup-form { margin-top: var(--s3); }
.cs-meter { height: 10px; background: var(--surface-high); border-radius: 6px; overflow: hidden; margin: var(--s2) 0 var(--s4); }
.cs-meter span { display: block; height: 100%; border-radius: 6px; background: #22a06b; }
.cs-meter span.atencao { background: #f5a524; }
.cs-meter span.risco { background: var(--danger); }
.cs-fat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-fat li { display: flex; align-items: center; gap: var(--s2); font-size: 14px; }
.cs-fat li span { flex: 1; }
.cs-fat li svg { width: 18px; height: 18px; flex: none; }
.cs-fat li.ok svg { color: #22a06b; }
.cs-fat li.no { color: var(--ink-muted); }
.cs-fat li.no svg { color: var(--danger); }
.cs-fat b { font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cs-nota { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: var(--s2); align-items: start; margin: var(--s3) 0 var(--s4); }
.cs-nota textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; min-height: 44px; }
.cs-notas .linkbtn { font-size: 12px; color: var(--ink-muted); }
@media (max-width: 860px) { .cs-nota { grid-template-columns: minmax(0, 1fr); } }
.pp-rows { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.pp-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: var(--s3); align-items: center; }
.money-in { height: 44px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; width: 100%; font-variant-numeric: tabular-nums; }
.pp-mods { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s3); }
.pp-mod { padding: var(--s4); border: 1px solid var(--line-soft); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--s2); }
@media (max-width: 560px) { .pp-row { grid-template-columns: minmax(0, 1fr) 120px; } .pp-row span { display: none; } }

/* ============ Baixar mídia ============ */
.mdl { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 4px 10px; border: 1px solid var(--line-soft); border-radius: 14px; background: transparent; color: inherit; font: 600 12px var(--font-text); opacity: .85; cursor: pointer; }
.mdl:hover { opacity: 1; background: rgba(0,0,0,.06); }
.mdl svg { width: 14px; height: 14px; }

/* ============ Painel da plataforma (/admin): carregamento suave e menu recolhível ============ */
.view.busy > * { opacity: .5; transition: opacity .2s ease; pointer-events: none; }
.sk-page { display: flex; flex-direction: column; gap: var(--s4); }
.sk-page .sk { display: block; border-radius: var(--r-md); background: linear-gradient(90deg, var(--surface-raised) 25%, var(--surface-high) 50%, var(--surface-raised) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.sk-title { height: 30px; width: 260px; max-width: 70%; }
.sk-sub { height: 16px; width: 360px; max-width: 90%; margin-top: -8px; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s4); }
.sk-card { height: 112px; }
.sk-block { height: 280px; }
.side .adm-shop { margin: calc(-1 * var(--s4)) var(--s3) var(--s6); }
body.side-min .side .adm-shop { display: none; }
body.side-min .side-link { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .sk-page .sk { animation: none; } }

/* ============ CRM da Motor dentro do /admin ============ */
html.embed .side, html.embed .topbar, html.embed .tabbar, html.embed #support-bar { display: none !important; }
html.embed .app { grid-template-columns: minmax(0, 1fr) !important; }
html.embed .view { padding-top: var(--s5); padding-bottom: var(--s7); }
html.embed .fab { bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px)) !important; }
.crm-wrap { display: flex; flex-direction: column; gap: var(--s3); }
.crm-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.crm-tabs { display: flex; gap: 4px; padding: 3px; background: var(--surface-raised); border-radius: var(--r-sm); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.crm-tabs::-webkit-scrollbar { display: none; }
.crm-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 var(--s4); border: 0; background: transparent; border-radius: 6px; color: var(--ink-muted); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.crm-tabs button svg { width: 16px; height: 16px; }
.crm-tabs button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line-soft); }
.crm-meta { font-size: 13px; color: var(--ink-muted); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.crm-frame { width: 100%; height: calc(100vh - 170px); min-height: 520px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); }
@media (max-width: 860px) { .crm-frame { height: calc(100vh - 220px); } }
/* ============ Painel: ajustes de alinhamento ============ */
body.adm .page-head .btn { display: inline-flex; }
body.adm .group-title { margin: var(--s7) 0 var(--s4); font-size: 13px; letter-spacing: .3px; }
body.adm .view > .group-title:first-of-type { margin-top: var(--s2); }
.cs-funnel .frow { grid-template-columns: minmax(150px, 40%) minmax(0, 1fr) 32px; }

/* ===== Painel: alertas, crescimento, tabela de lojas, cobrança ===== */
.cs-al { width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; flex: none; background: var(--surface-high); }
.cs-al svg { width: 18px; height: 18px; }
.cs-al.risco, .cs-al.atraso { color: var(--danger); }
.cs-al.implantacao { color: var(--accent-text); }
.cs-funnel { display: grid; gap: 10px; }
.cf-row { display: grid; grid-template-columns: minmax(110px, 180px) 1fr 44px; align-items: center; gap: 12px; }
.cf-l { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-t { height: 12px; border-radius: 6px; background: var(--surface-high); overflow: hidden; }
.cf-b { display: block; height: 100%; border-radius: 6px; background: var(--ink); transform-origin: left; animation: cfGrow .7s cubic-bezier(.2,.7,.2,1) both; }
.cf-row.won .cf-b { background: var(--accent-text); }
.cf-row.lost .cf-b { background: var(--danger); opacity: .7; }
.cf-v { text-align: right; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .cf-b { background: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cf-b { background: var(--brand); } }
@keyframes cfGrow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .cf-b { animation: none; } }
.st-table td > span.muted { display: block; margin-top: 2px; }
.st-table td a { color: inherit; text-decoration: none; }
.st-table tbody tr[data-href] { cursor: pointer; }
.st-table tbody tr[data-href]:hover { background: var(--surface-high); }
.st-table td, .st-table th { white-space: nowrap; vertical-align: middle; }
.th-sort { all: unset; cursor: pointer; font: inherit; color: inherit; }
.th-sort:focus-visible { outline: none; box-shadow: var(--glow); border-radius: 4px; }
.cs-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .cs-acts { width: 100%; justify-content: stretch; } .cs-acts .btn { flex: 1; } .cf-row { grid-template-columns: 100px 1fr 36px; } }
.fin-chart.cs-chart { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.cs-chart .fc-l { font-size: 11px; }
.cs-chart .fc-bars span { width: min(16px, 42%); }
.cs-chart .fc-bars span:only-child { width: min(22px, 70%); }

/* ===== Agente de IA da Motor ===== */
.ia-dias { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.ia-acoes { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.ia-acoes li { display: flex; gap: 8px; align-items: center; }
.ia-acoes svg { width: 16px; height: 16px; color: var(--accent-text); flex: none; }
.ia-chip svg { width: 16px; height: 16px; margin-right: 4px; }
.ia-chip.on { color: var(--accent-text); }
.ia-chip.off { color: var(--ink-muted); }
.by-ia { color: var(--accent-text); font-weight: 600; }

/* ===== Contratos ===== */
.ct-doc { background: var(--surface-raised); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--s5); font-size: 14px; line-height: 1.6; }
.ct-doc p { margin: 0 0 6px; }
.ct-doc .ct-h1 { text-align: center; font-size: 16px; margin: 0 0 var(--s4); }
.ct-doc .ct-h2 { font-size: 14px; margin: var(--s4) 0 6px; }
.ct-v { background: color-mix(in srgb, var(--brand) 22%, transparent); border-radius: 4px; padding: 0 3px; }
.ct-miss { background: color-mix(in srgb, #f5b100 30%, transparent); border-radius: 4px; padding: 0 4px; font-weight: 600; }
.ct-miss::before { content: "["; } .ct-miss::after { content: "]"; }
.ct-f { background: var(--surface-high); border: 1px dashed var(--line); border-radius: 4px; padding: 0 4px; font-weight: 600; font-size: 13px; }
.ct-blank { background: color-mix(in srgb, #f5b100 25%, transparent); border-radius: 3px; }
.ct-sign { display: block; margin-top: var(--s4); white-space: normal; }
.ct-miss-txt { color: #b07a00; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
:root[data-theme="dark"] .ct-miss-txt { color: #f5c542; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ct-miss-txt { color: #f5c542; } }
.ct-ok { color: var(--accent-text); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.ct-miss-txt svg, .ct-ok svg { width: 16px; height: 16px; flex: none; }
.ct-status { margin: 0 0 var(--s4); }
.field.ct-falta input { border-color: #f5b100; }
.ct-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s3) 0; }
.ct-ta { width: 100%; min-height: 360px; font: 14px/1.55 var(--font-text); resize: vertical; }
#ctm-hints { display: flex; flex-direction: column; gap: 6px; margin: var(--s3) 0; font-size: 14px; }
.ct-ins h3 { margin: var(--s4) 0 var(--s2); } .ct-ins h3:first-child { margin-top: 0; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-start { display: flex; gap: var(--s3); align-items: flex-start; width: 100%; text-align: left; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-raised); color: var(--ink); cursor: pointer; margin-bottom: var(--s3); font: inherit; }
.ct-start:hover { border-color: var(--ink-muted); }
.ct-start > svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.ct-start b { display: block; } .ct-start small { color: var(--ink-muted); }

/* ===== Suporte com chamados e equipe do painel ===== */
.sup-info { margin: calc(-1 * var(--s3)) 0 var(--s4); color: var(--ink-muted); display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; font-size: 14px; }
.sup-sep { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0 var(--s2); color: var(--ink-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.sup-sep::before, .sup-sep::after { content: ""; flex: 1; border-top: 1px solid var(--line-soft); }
.sup-msg.auto { opacity: .8; font-style: italic; }
.sup-wait { color: var(--danger); font-weight: 600; }
.adm-row { flex-wrap: wrap; gap: var(--s3); }
.adm-acts { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-left: auto; }
.adm-acts select { height: 40px; }

/* ===== App instalado (PWA): sem vão no fim das gavetas =====
   O espaço da barra do sistema (iPhone) fica dentro do rodapé da gaveta, que encosta no fim da tela;
   antes ele ficava como espaço vazio da gaveta e o conteúdo rolando aparecia por baixo do rodapé. */
.drawer { padding-bottom: 0; }
.drawer-foot { padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px)); }
.drawer-body:last-child { padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom, 0px)); }
.drawer-foot.chat-foot { padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 860px) {
  .drawer-foot { padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); }
  .drawer-foot.chat-foot { padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px)); }
  .drawer-body:last-child { padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px)); }
}

/* ===== Respiro entre campos e botões =====
   Em cartões e blocos sem espaçamento automático, a linha de botões (e o campo seguinte) colava no item de cima.
   :where() mantém a regra fraca: um espaçamento escrito direto no elemento continua valendo. */
:where(.card, .drawer-body > section, .drawer-body > div, .sup-card, .cs-alerts) > :where(:not(.ai-row):not(.block-head):not(h2):not(h3)) + :where(.ai-row) { margin-top: var(--s4); }
:where(.card, .drawer-body > section) > :where(.field, .fgrid) + :where(.field, .fgrid) { margin-top: var(--s4); }

/* Agendamento a partir de um cliente: o cliente aparece fixo, sem campo para trocar */
.t-lead-fixo { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: var(--s2) var(--s3); background: var(--surface-raised); border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
.t-lead-fixo svg { width: 20px; height: 20px; color: var(--ink-muted); flex: none; }
.t-lead-fixo b { display: block; font-size: 15px; line-height: 20px; }
.t-lead-fixo small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* ===================== Agenda: Semana em grade de horas e Mês ===================== */
.ag-nav { margin-bottom: var(--s3); }
.ag-grid { background: var(--surface-raised); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-soft); }
.ag-head, .ag-body { display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(0, 1fr)); }
.ag-head { border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.ag-dh { display: flex; flex-direction: column; align-items: center; padding: var(--s2) 0; gap: 2px; color: var(--ink-muted); }
.ag-dh span { font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.ag-dh b { font-size: 20px; line-height: 28px; width: 32px; text-align: center; border-radius: 50%; color: var(--ink); }
.ag-dh.today b { background: var(--brand); color: var(--on-brand, #ffffff); }
.ag-scroll { height: min(640px, calc(100vh - 300px)); overflow-y: auto; overscroll-behavior: contain; }
.ag-body { position: relative; }
.ag-hours { position: relative; }
.ag-hours span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ag-col { position: relative; border-left: 1px solid var(--line-soft); cursor: copy;
  background-image: linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--line-soft) 45%, transparent) 1px, transparent 1px);
  background-size: 100% var(--hr), 100% var(--hr); background-position: 0 0, 0 calc(var(--hr) / 2); }
.ag-col.today { background-color: color-mix(in srgb, var(--brand) 5%, transparent); }
.ag-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 3; pointer-events: none; }
.ag-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.ag-ev { position: absolute; height: calc(var(--hr) / 2 - 2px); display: flex; align-items: center; gap: 5px; padding: 0 6px; overflow: hidden; white-space: nowrap; text-align: left; font: inherit; font-size: 12.5px; line-height: 1; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ink-muted); border-radius: 5px; cursor: grab; z-index: 2; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ag-ev:hover { border-color: var(--ink-muted); }
.ag-ev svg { width: 14px; height: 14px; flex: none; color: var(--ink-muted); }
.ag-ev b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-ev span { overflow: hidden; text-overflow: ellipsis; }
.ag-ev.late { border-left-color: var(--danger); }
.ag-ev.late b { color: var(--danger); }
.ag-ev.done { opacity: .55; }
.ag-ev.done span { text-decoration: line-through; }
.ag-ev.ag-src, .mc-ev.ag-src { opacity: .35; }
.ag-ev.ag-saving, .mc-ev.ag-saving { opacity: .5; }
.ag-ghost { pointer-events: none; z-index: 20 !important; box-shadow: 0 10px 28px rgba(0,0,0, .35); border-left-color: var(--brand); cursor: grabbing; }
.ag-dica { margin: var(--s3) 0 0; }
body.ag-dragging, body.ag-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* Mês */
.mc-nome { min-width: 170px; }
.mc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s5); align-items: start; }
.mc { background: var(--surface-raised); border-radius: var(--r-md); border: 1px solid var(--line-soft); overflow: hidden; }
.mc-wd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.mc-wd span { padding: var(--s2); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink-muted); text-align: center; }
.mc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mc-day { min-height: 112px; padding: 6px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; transition: background .12s; }
.mc-day:nth-child(7n) { border-right: 0; }
.mc-day:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.mc-day.out { color: var(--ink-muted); background: color-mix(in srgb, var(--surface) 50%, transparent); }
.mc-day.out .mc-ev { opacity: .6; }
.mc-day.sel { box-shadow: inset 0 0 0 2px var(--ink); }
.mc-day.drop { background: color-mix(in srgb, var(--brand) 18%, transparent); box-shadow: inset 0 0 0 2px var(--brand); }
.mc-n { font-size: 13px; font-weight: 700; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.mc-day.today .mc-n { background: var(--brand); color: var(--on-brand, #ffffff); }
.mc-evs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mc-ev { display: flex; align-items: center; gap: 4px; padding: 3px 5px; font-size: 12px; line-height: 14px; white-space: nowrap; overflow: hidden; background: var(--surface); border-left: 3px solid var(--ink-muted); border-radius: 4px; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; min-width: 0; }
.mc-ev svg { width: 12px; height: 12px; flex: none; color: var(--ink-muted); }
.mc-ev b { font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-ev span { overflow: hidden; text-overflow: ellipsis; }
.mc-ev.late { border-left-color: var(--danger); }
.mc-ev.late b { color: var(--danger); }
.mc-ev.done span { text-decoration: line-through; opacity: .6; }
.mc-ev.ag-ghost { position: fixed; z-index: 90; background: var(--surface); }
.mc-more { font-size: 12px; color: var(--ink-muted); font-weight: 600; padding-left: 4px; }
.mc-dots { display: none; }
.mc-panel { background: var(--surface-raised); border-radius: var(--r-md); border: 1px solid var(--line-soft); padding: var(--s4); position: sticky; top: var(--s4); }
.mc-pt { margin: 0; font-size: 16px; line-height: 22px; }
@media (max-width: 1100px) { .mc-wrap { grid-template-columns: 1fr; } .mc-panel { position: static; } }
@media (max-width: 860px) {
  .ag-scroll { height: calc(100vh - 330px - env(safe-area-inset-bottom, 0px)); min-height: 360px; }
  .ag-head, .ag-body { grid-template-columns: 44px repeat(var(--cols), minmax(0, 1fr)); }
  .mc-day { min-height: 58px; padding: 4px; align-items: center; }
  .mc-evs { display: none; }
  .mc-dots { display: flex; gap: 3px; }
  .mc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); }
  .mc-dots i.late { background: var(--danger); }
  .mc-wd span { padding: 6px 0; font-size: 11px; }
}
.toast.has-act { display: none; align-items: center; gap: var(--s4); }
.toast.has-act.show { display: flex; }
.toast-act { background: none; border: 0; color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }

/* ===== Domínio próprio ===== */
.dom-passos { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.dom-passos ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 22px; }
.dom-passos code { background: var(--surface-raised); padding: 1px 6px; border-radius: 4px; overflow-wrap: anywhere; }

/* ===== v5: interação suave e verde igual nos dois temas ===== */
/* Sem contorno duro: o foco acende um brilho leve em volta, com transição */
:focus { outline: none; }
.btn, .iconbtn, .sendbtn, .pill, .tab, .field input, .field select, .field textarea, .composer textarea, input, select, textarea {
  transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-muted); }
.field input:focus, .field select:focus, .field textarea:focus, .composer textarea:focus, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--line); box-shadow: var(--glow); }
/* Gráficos e marcas: verde também no tema claro */
.fc-r, .fc-legend i.fc-r, .cf-b { background: var(--brand); }
/* Hover de todo botão verde: o mesmo, só um verde um pouco mais vivo */
.rem .ra button.go:hover, .savebar .btn-primary:hover:not([disabled]), .btn-primary:hover:not([disabled]), .sendbtn:hover { background: var(--brand-hover); border-color: transparent; filter: none; }
.rem .ra button.go:hover { border-color: var(--brand-hover); }

/* ===== v8: chat — campo sem barra de rolagem e gravação de áudio no lugar do campo ===== */
.composer textarea { scrollbar-width: none; -ms-overflow-style: none; }
.composer textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Gravando: o campo e o botão de baixo ficam escondidos e a barra ocupa o lugar deles, com o botão dentro */
.chat-foot.recording .composer, .chat-foot.recording #reply-bar { visibility: hidden; }
.rec-bar { left: var(--s3); right: var(--s3); bottom: var(--s3); height: 52px; min-height: 52px; padding: 4px; gap: var(--s2);
  background: var(--surface-raised); border: 0; border-radius: 14px; box-shadow: var(--card-sombra, 0 1px 2px rgba(0,0,0,.06)); overflow: hidden; }
.rec-bar .iconbtn, .rec-bar .sendbtn { width: 44px; height: 44px; flex: none; }
.rec-bar .sendbtn { border-radius: 10px; }
.rec-bar .rec-time { padding-left: 2px; }
@media (max-width: 860px) { .rec-bar { left: var(--s2); right: var(--s2); } }
/* ===== v7: cards sem contorno; o destaque no hover é uma sombra ===== */
:root { --card-sombra: 0 1px 2px rgba(0,0,0,.06), 0 1px 6px rgba(0,0,0,.04); --card-hover: 0 8px 22px rgba(0,0,0,.14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --card-sombra: none; --card-hover: 0 8px 24px rgba(0,0,0,.7); } }
:root[data-theme="dark"] { --card-sombra: none; --card-hover: 0 8px 24px rgba(0,0,0,.7); }
.lc, .ct-doc, .t-lead-fixo, .ag-grid, .mc, .mc-panel, .dom-passos { border-color: transparent; }
.wev, .aviso-banner { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }
.lc, .wev { box-shadow: var(--card-sombra); transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease; }
.lc.is-waiting { box-shadow: inset 3px 0 0 var(--danger), var(--card-sombra); }
.lc:hover, .wev:hover { border-color: transparent; border-left-color: transparent; box-shadow: var(--card-hover); transform: translateY(-1px); }
.wev.late:hover { border-left-color: var(--danger); }
.lc.is-waiting:hover { box-shadow: inset 3px 0 0 var(--danger), var(--card-hover); }
:root[data-theme="dark"] .lc:hover { background: var(--surface-high); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lc:hover { background: var(--surface-high); } }
.lc.dragging { transform: scale(.98); box-shadow: var(--card-hover); }
.vc { transition: box-shadow .2s ease; }
.vc:hover:not(.featured) { box-shadow: var(--card-hover); }
@media (prefers-reduced-motion: reduce) { .lc, .wev { transition: box-shadow .2s ease; } .lc:hover, .wev:hover { transform: none; } }
/* ===== v6: sem controles do navegador (a lista dos selects e as janelas ficam em ui-nativo.js) ===== */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar-button { display: none; }

/* v11: mensagem clicada mantém responder/reagir visíveis (desktop) */
.msg.act-on .mact { opacity: 1; pointer-events: auto; }
/* v10: sem botão de voltar, o X de fechar fica na mesma linha do nome (aproveita o topo) */
.drawer-head.no-back { position: sticky; }
.drawer-head.no-back .drawer-bar { position: absolute; top: var(--s3); right: var(--s4); min-height: 0; height: 48px; z-index: 1; }
.drawer-head.no-back .drawer-title { min-height: 48px; display: flex; align-items: center; gap: var(--s3); padding: 0 calc(44px + var(--s4)) var(--s3) var(--s2); }
.drawer-head.no-back .drawer-title:not(.has-av) { display: block; padding-top: 10px; }
/* v9: botão de texto dentro do aviso vermelho: no hover só a cor clareia, o fundo segue transparente */
.notice .btn-tertiary { transition: color .2s ease; }
.notice .btn-tertiary:hover:not([disabled]) { background: transparent; color: color-mix(in srgb, var(--danger) 72%, #fff); }

/* ===== v12: um padrão só para botões, campos e opções: sem borda escura, fundo + sombra sutil ===== */
.btn-secondary:hover:not([disabled]), .photo-add:hover, .dp-quick button:hover { border-color: var(--line); background: var(--surface-raised); box-shadow: var(--glow); }
.photo-add:hover { color: var(--ink); }
.task .chk:hover { border-color: var(--ink-muted); }
.radio:hover { border-color: var(--line-soft); }
.radio:has(input:checked) { border-color: var(--line-soft); background: var(--surface-raised); box-shadow: var(--card-sombra), var(--glow); }
.radio { transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease; }
.seg button[aria-checked="true"] { border-color: var(--line-soft); background: var(--surface-raised); box-shadow: var(--glow), inset 3px 0 0 var(--action); }

/* ===== v13: sombras do tema escuro — preto puro, curtas e sem halo (nada de anéis claros em volta) ===== */
:root[data-theme="dark"] { --glow: 0 2px 8px rgba(0,0,0,.5); --card-hover: 0 8px 22px rgba(0,0,0,.55); --card-sombra: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glow: 0 2px 8px rgba(0,0,0,.5); --card-hover: 0 8px 22px rgba(0,0,0,.55); --card-sombra: none; } }
:root[data-theme="dark"] .dlg, :root[data-theme="dark"] .ui-dlg { box-shadow: 0 16px 40px rgba(0,0,0,.5); }
:root[data-theme="dark"] .drawer, :root[data-theme="dark"] .drawer-ghost { box-shadow: -10px 0 28px rgba(0,0,0,.4); }
:root[data-theme="dark"] .dp-pop, :root[data-theme="dark"] .tp-pop, :root[data-theme="dark"] .sel-pop, :root[data-theme="dark"] .col-pop,
:root[data-theme="dark"] .attach-menu, :root[data-theme="dark"] .qr-menu, :root[data-theme="dark"] .emoji-menu { box-shadow: 0 12px 30px rgba(0,0,0,.5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dlg, :root:not([data-theme="light"]) .ui-dlg { box-shadow: 0 16px 40px rgba(0,0,0,.5); }
  :root:not([data-theme="light"]) .drawer, :root:not([data-theme="light"]) .drawer-ghost { box-shadow: -10px 0 28px rgba(0,0,0,.4); }
  :root:not([data-theme="light"]) .dp-pop, :root:not([data-theme="light"]) .tp-pop, :root:not([data-theme="light"]) .sel-pop, :root:not([data-theme="light"]) .col-pop,
  :root:not([data-theme="light"]) .attach-menu, :root:not([data-theme="light"]) .qr-menu, :root:not([data-theme="light"]) .emoji-menu { box-shadow: 0 12px 30px rgba(0,0,0,.5); }
}

/* v14 · Funil: cards e colunas à prova de estouro em telas e colunas estreitas */
.kcol { min-width: 236px; }
.kbody { container-type: inline-size; container-name: kb; overflow-x: hidden; }
.lc { min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; }
.lc > span { min-width: 0; max-width: 100%; }
.lc .top { min-width: 0; }
.lc .top > :last-child { flex: none; }
.lc .who { flex: 1 1 auto; min-width: 0; }
.lc .car { min-width: 0; align-items: baseline; }
.lc .car span { flex: 1 1 auto; min-width: 0; }
.lc .car b { flex: none; }
.lc .last, .lc .lstep { min-width: 0; max-width: 100%; }
.lc .lstep { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; padding-left: 10px; position: relative; }
.lc .lstep::before { position: absolute; left: 0; top: 4px; }
.lc .foot { min-width: 0; flex-wrap: nowrap; }
.lc .foot .src { flex: 1 1 auto; min-width: 0; }
.lc .foot .badge { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: block; }
.lc .foot .mini-av { margin-left: auto; }
@container kb (max-width: 250px) {
  .lc .foot .badge .w-lbl { display: none; }
  .lc .car { flex-wrap: wrap; row-gap: 0; }
  .lc .car b { flex-basis: 100%; }
  .lc .car span { flex-basis: 100%; }
}
@container kb (max-width: 200px) {
  .lc .lc-av { display: none; }
  .lc .foot .src { display: none; }
  .lc .foot .badge { flex: 1 1 auto; }
}
@media (max-width: 760px) {
  .kcol { min-width: 260px; }
}

/* v14b · cards mantêm a altura natural; a coluna rola para ver todos */
.kbody > .lc { flex: 0 0 auto; }
.kbody { overflow-y: auto; }

/* v15 · Horários da loja: campos de hora no mesmo padrão dos demais campos */
.tp-input, .hrow input.tp-input { height: 40px; width: 104px; padding: 0 var(--s3); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; text-align: center; transition: border-color .12s, box-shadow .12s; }
.tp-input:hover { border-color: var(--ink-muted); }
.tp-input:focus, .tp-input:focus-visible { outline: none; border-color: var(--line); box-shadow: var(--glow); }
.tp-input:disabled { opacity: .55; cursor: not-allowed; }
.field .tp-input { width: 100%; height: 44px; text-align: left; font-size: 16px; }

/* Botões de excluir: o hover é um vermelho um pouco mais claro (nunca o verde dos botões de ação) */
:root { --danger-hover: #d9392d; }
:root[data-theme="dark"] { --danger-hover: #ff9486; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --danger-hover: #ff9486; } }
.btn.btn-danger:hover:not([disabled]) { background: var(--danger-hover); color: #fff; filter: none; }
:root[data-theme="dark"] .btn.btn-danger, :root[data-theme="dark"] .ui-dlg .ui-foot .ui-danger { color: #22222b; }
:root[data-theme="dark"] .btn.btn-danger:hover:not([disabled]), :root[data-theme="dark"] .ui-dlg .ui-foot .ui-yes.ui-danger:hover { color: #22222b; }
.nota-del:hover { background: var(--danger-soft); color: var(--danger); }
/* Todo botão de excluir (texto vermelho ou ícone de lixeira): no hover, vermelho um pouco mais claro com fundo avermelhado suave */
button[style*="var(--danger)"]:hover:not([disabled]):not(.btn-danger),
button[data-act*="-del"]:not([class*="btn-danger"]):not([class*="btn-primary"]):hover:not([disabled]),
button[data-act*="delete"]:not([class*="btn-danger"]):not([class*="btn-primary"]):hover:not([disabled]),
button[data-act$="-remove"]:not([class*="btn-primary"]):hover:not([disabled]) {
  color: var(--danger-hover) !important; background: var(--danger-soft); box-shadow: none;
}
/* v16 · Aba Anotações do lead */
.notas { display: flex; flex-direction: column; gap: var(--s3); }
.nota-input { width: 100%; min-height: 96px; padding: var(--s3); resize: vertical; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: 16px; line-height: 24px; }
.nota-input:hover { border-color: var(--ink-muted); }
.nota-input:focus, .nota-input:focus-visible { outline: none; border-color: var(--line); box-shadow: var(--glow); }
.nota-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.nota-bar .muted { flex: 1 1 200px; }
.nota-list { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.nota { background: var(--surface-raised, var(--surface)); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: var(--s3) var(--s4); box-shadow: var(--card-sombra, none); }
.nota-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.nota-top b { font-size: 15px; line-height: 20px; }
.nota-top time { font-size: 13px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.nota-del { margin-left: auto; width: 32px; height: 32px; color: var(--ink-muted); }
.nota-del:hover { color: var(--danger); }
.nota p { margin: var(--s2) 0 0; font-size: 15px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* v16b · campo de nova anotação fixo no topo; só a lista rola */
.drawer-head .nota-compose { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s2) var(--s3); }
.drawer-head .nota-input { min-height: 72px; max-height: 160px; }
.notas { gap: 0; }
.nota-list { margin-top: 0; }

/* Crédito de IA em destaque no topo da aba; o extrato abre ao clicar */
.ia-saldo { gap: var(--s3); border: 1px solid var(--line-soft); box-shadow: var(--card-sombra, none); }
.ia-saldo.ok { box-shadow: inset 3px 0 0 var(--brand), var(--card-sombra, none); }
.ia-saldo.baixo { box-shadow: inset 3px 0 0 #f5a524, var(--card-sombra, none); }
.ia-saldo.zero { box-shadow: inset 3px 0 0 var(--danger), var(--card-sombra, none); }
.ia-saldo-top { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.ia-saldo-ic { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--brand); color: #fff; }
.ia-saldo-ic svg, .ia-saldo-ic i { width: 26px; height: 26px; }
.ia-saldo-tx { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ia-saldo-tx .label { margin: 0; }
.ia-saldo-v { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 36px; font-variant-numeric: tabular-nums; }
.ia-saldo-tx small { color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.ia-extrato-btn { margin-left: auto; }
.ia-extrato-btn .ia-chev { display: inline-flex; transition: transform .18s ease; }
.ia-extrato-btn[aria-expanded="true"] .ia-chev { transform: rotate(180deg); }
.ia-extrato { border-top: 1px solid var(--line-soft); padding-top: var(--s4); }
.ia-extrato[hidden] { display: none; }
.ia-extrato h3 { margin: 0 0 var(--s3); }
@media (max-width: 560px) { .ia-extrato-btn { margin-left: 0; width: 100%; } .ia-saldo-v { font-size: 26px; } }

/* Enviar veículo no chat: carro + opções (foto principal, todas as fotos, ficha) */
.vsend { border: 0; margin: var(--s3) 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: var(--s2); }
.vsend legend { padding: 0; float: left; width: 100%; margin-bottom: var(--s2); }
.checkopt { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-sm); cursor: pointer; transition: border-color .12s, background-color .12s; }
.checkopt:hover { border-color: var(--line); }
.checkopt:has(input:checked) { border-color: var(--brand-hover, var(--brand)); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.checkopt input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.checkopt b { display: block; font-size: 15px; line-height: 20px; }
.checkopt small { display: block; color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.checkopt.off { opacity: .55; cursor: not-allowed; }

/* Linhas de barra: a coluna do valor cresce com o conteúdo (R$ 12.000,00 não passa mais da margem do cartão) */
.frow { grid-template-columns: 120px minmax(0, 1fr) minmax(32px, max-content); }
.frow .val { white-space: nowrap; min-width: 0; }
.frow .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-funnel .frow { grid-template-columns: minmax(150px, 40%) minmax(0, 1fr) minmax(32px, max-content); }
.cf-row { grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) minmax(44px, max-content); }
.fin-cat .val { min-width: 0; }
@media (max-width: 860px) {
  .frow { grid-template-columns: 104px minmax(0, 1fr) minmax(28px, max-content); }
  .fin-cat { grid-template-columns: 96px minmax(0, 1fr) minmax(28px, max-content); }
}
@media (max-width: 640px) { .cf-row { grid-template-columns: 100px minmax(0, 1fr) minmax(36px, max-content); } }
.card, .cfg-card { min-width: 0; }

/* Escolha do modelo do site */
.modelos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s4); }
.modelo-opt { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.modelo-opt:hover { border-color: var(--line); }
.modelo-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.modelo-opt:has(input:checked) { border-color: var(--brand-hover, var(--brand)); box-shadow: 0 0 0 1px var(--brand-hover, var(--brand)); }
.modelo-opt:has(input:focus-visible) { box-shadow: var(--glow); }
.modelo-thumb { display: block; overflow: hidden; border-radius: var(--r-sm); border: 1px solid var(--line-soft); aspect-ratio: 160 / 124; }
.modelo-thumb svg { display: block; width: 100%; height: 100%; }
.modelo-tx b { display: block; font-size: 16px; line-height: 22px; }
.modelo-tx small { display: block; color: var(--ink-muted); font-size: 13px; line-height: 18px; margin-top: 2px; }
.modelo-opt:has(input:checked) .modelo-tx b::after { content: "Selecionado"; margin-left: 8px; padding: 1px 7px; font-size: 11px; font-weight: 700; border-radius: 6px; background: var(--brand); color: #fff; vertical-align: 2px; }

/* Prévia das fontes do site */
.fonte-prev { display: grid; gap: 6px; padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.fonte-prev .fp-brand { font-family: var(--fs); font-size: 12px; letter-spacing: .14em; color: var(--ink-muted); }
.fonte-prev .fp-ttl { font-family: var(--fp); font-size: 26px; line-height: 32px; font-weight: 600; }
.fonte-prev .fp-price { font-family: var(--fp); font-size: 22px; font-weight: 600; color: var(--accent-text, var(--ink)); }
.fonte-prev .fp-meta { font-family: var(--fs); font-size: 14px; color: var(--ink-muted); }
.fonte-prev .fp-txt { font-family: var(--fs); font-size: 15px; line-height: 22px; margin: 4px 0 0; color: var(--ink); }
#fonte-aviso { display: flex; align-items: center; gap: var(--s2); }
#fonte-aviso[hidden] { display: none; }

/* Menu lateral: animação curta no ícone ao passar o mouse (uma vez por hover; nada no item atual nem para quem prefere menos movimento) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .side :is(a, button):not([aria-current="page"]):hover > svg { transform-box: fill-box; transform-origin: center; }
  .side :is(a, button):not([aria-current="page"]):hover > svg * { transform-box: fill-box; transform-origin: center; }
  /* Painel: os blocos crescem um depois do outro */
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-layout-dashboard > * { animation: mnPop .45s cubic-bezier(.2,.8,.2,1) both; }
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-layout-dashboard > :nth-child(2) { animation-delay: .05s; }
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-layout-dashboard > :nth-child(3) { animation-delay: .1s; }
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-layout-dashboard > :nth-child(4) { animation-delay: .15s; }
  /* Leads: os balões dão um pulinho */
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-messages-square > :nth-child(1) { animation: mnHop .5s ease both; }
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-messages-square > :nth-child(2) { animation: mnHop .5s ease .08s both; }
  /* Agenda e Avaliações: o check se redesenha */
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-calendar-check > path:last-of-type,
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-clipboard-check > path:last-of-type { stroke-dasharray: 14; animation: mnDraw .5s ease both; }
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-clipboard-check { animation: mnTilt .5s ease both; }
  /* Estoque: o carro pisca os faróis */
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-car-front > :nth-child(2),
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-car-front > :nth-child(3) { animation: mnFlash .5s ease both; }
  /* Contratos: só a caneta se move, de cima do ponto da assinatura até o lugar dela */
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-file-signature > :nth-child(2) { animation: mnPen .6s cubic-bezier(.3,.7,.3,1) both; }
  /* Financeiro: a carteira abre e fecha */
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-wallet { animation: mnSquish .45s ease both; }
  /* Equipe: as pessoas se aproximam */
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-users > :nth-child(n+3) { animation: mnNear .5s ease both; }
  /* Configurações e Ajuda: giram */
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-settings { animation: mnSpin .6s cubic-bezier(.3,.7,.3,1) both; }
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-life-buoy { animation: mnSpin90 .5s ease both; }
  /* Painel /admin: lojas (toldo balança), CRM (maleta erguida), avisos (megafone chama), produtos (caixa pula), cobrança (cartão passa), auditoria (linhas se escrevem), admins (escudo firma) */
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-store > :nth-child(5) { transform-origin: top; animation: mnAwning .55s ease both; }
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-briefcase { animation: mnCarry .55s ease both; }
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-megaphone { animation: mnShout .55s ease both; }
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-package { animation: mnHop .5s ease both; }
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-credit-card { animation: mnSwipe .55s ease both; }
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-scroll-text > :nth-child(-n+2) { stroke-dasharray: 6; animation: mnWrite .45s ease both; }
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-scroll-text > :nth-child(2) { animation-delay: .1s; }
  .side :is(a, button):not([aria-current="page"]):hover > svg.lucide-shield { animation: mnGuard .5s ease both; }
}
@keyframes mnPop { 0% { transform: scale(.55); opacity: .4; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes mnHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } 70% { transform: translateY(.5px); } }
@keyframes mnDraw { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } }
@keyframes mnTilt { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-10deg); } 70% { transform: rotate(4deg); } }
@keyframes mnFlash { 0%, 100% { stroke-width: 2; } 25%, 65% { stroke-width: 4.5; } 45% { stroke-width: 2; } }
@keyframes mnPen { 0% { transform: translate(-5px, 0); } 30% { transform: translate(-3.6px, -1px); } 55% { transform: translate(-2.2px, .6px); } 80% { transform: translate(-.8px, -.4px); } 100% { transform: translate(0, 0); } }
@keyframes mnSquish { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.14, .88); } 70% { transform: scale(.96, 1.05); } }
@keyframes mnNear { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(-2.5px); } }
@keyframes mnSpin { from { transform: rotate(0); } to { transform: rotate(180deg); } }
@keyframes mnSpin90 { from { transform: rotate(0); } to { transform: rotate(90deg); } }
@keyframes mnAwning { 0%, 100% { transform: scaleY(1); } 35% { transform: scaleY(1.3); } 70% { transform: scaleY(.9); } }
@keyframes mnCarry { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-2.5px) rotate(-7deg); } 70% { transform: translateY(0) rotate(3deg); } }
@keyframes mnShout { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-12deg) scale(1.08); } 50% { transform: rotate(6deg) scale(1.08); } 75% { transform: rotate(-4deg) scale(1.02); } }
@keyframes mnSwipe { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-3px); } 70% { transform: translateX(2px); } }
@keyframes mnWrite { from { stroke-dashoffset: 6; } to { stroke-dashoffset: 0; } }
@keyframes mnGuard { 0%, 100% { transform: scale(1); } 35% { transform: scale(.86); } 70% { transform: scale(1.1); } }

/* Chat: soltar arquivos em qualquer parte da conversa */
.drawer.dropping::after { content: "Solte para enviar na conversa"; position: fixed; top: 0; bottom: 0; left: var(--dz-l, 0); width: var(--dz-w, 100%); z-index: 50; display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(2px); outline: 2px dashed var(--brand, #1667d4); outline-offset: -14px;
  color: var(--ink); font-weight: 600; font-size: 16px; pointer-events: none; }

/* Chat: vários arquivos de uma vez */
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s3); max-height: 340px; overflow-y: auto; }
.fm-item { position: relative; display: flex; flex-direction: column; background: var(--surface-raised); border-radius: var(--r-md); overflow: hidden; min-width: 0; }
.fm-item img, .fm-item video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.fm-item .fp-ic { display: grid; place-items: center; aspect-ratio: 1; }
.fm-item .fp-ic svg { width: 36px; height: 36px; color: var(--ink-muted); }
.fm-nome { padding: 6px 8px; font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-nome small { display: block; color: var(--ink-muted); }
.fm-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; background: color-mix(in srgb, var(--surface) 80%, transparent); }

/* Chat: mensagem apagada (continua visível só para a equipe) e editada */
.msg.apagada, .msg.out.apagada { background: #fde8e8; color: #7a1f1f; border-color: #f6c9c9; }
.msg.apagada .mdel { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; font-weight: 600; color: #c43c3c; margin-bottom: 4px; }
.msg.apagada .mdel svg { flex: none; }
.msg.apagada .mtext, .msg.apagada .mimg, .msg.apagada .mdoc, .msg.apagada .mvideo, .msg.apagada .maudio { opacity: .75; }
.msg.apagada .mmeta { color: #7a1f1f; }
:root[data-theme="dark"] .msg.apagada { background: #3a1d1f; color: #f3c4c4; border-color: #5a2a2d; }
:root[data-theme="dark"] .msg.apagada .mdel { color: #ff8f8f; }
:root[data-theme="dark"] .msg.apagada .mmeta { color: #f3c4c4; }
.med { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mact .mact-del:hover { color: #e5484d; background: color-mix(in srgb, #e5484d 12%, transparent); }
.med-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.med-list li { background: var(--surface-raised); border-radius: var(--r-md); padding: 10px 14px; }
.med-list li.atual { box-shadow: inset 3px 0 0 var(--brand, #1667d4); }
.med-list small { color: var(--ink-muted); font-size: 12px; }
.med-list p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .msg.apagada { background: #3a1d1f; color: #f3c4c4; border-color: #5a2a2d; }
  :root:not([data-theme="light"]) .msg.apagada .mdel { color: #ff8f8f; }
  :root:not([data-theme="light"]) .msg.apagada .mmeta { color: #f3c4c4; }
}

/* Chat no computador: setinha no canto superior direito da mensagem abre o menu de opções (no celular continuam os gestos) */
.mmenu-btn { display: none; }
@media (hover: hover) {
  .mact { display: none !important; }
  .msg { position: relative; }
  .mmenu-btn { display: grid; place-items: center; position: absolute; top: 4px; right: 4px; z-index: 2; width: 26px; height: 22px; padding: 0; border: 0; border-radius: 8px;
    background: inherit; color: inherit; opacity: 0; cursor: pointer; transition: opacity .12s, background-color .12s; box-shadow: -6px 0 8px -2px var(--msg-bg, transparent); }
  .msg.in .mmenu-btn { --msg-bg: var(--surface); }
  .msg.out .mmenu-btn { --msg-bg: var(--out-bg); }
  .msg:hover .mmenu-btn, .msg.menu-on .mmenu-btn, .mmenu-btn:focus-visible { opacity: .75; }
  .mmenu-btn:hover, .msg.menu-on .mmenu-btn { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); box-shadow: none; }
}

/* Funil: olhinho para espiar a conversa sem marcar como lida */
.lc .lc-r { display: inline-flex; align-items: center; gap: 6px; }
.lc-peek { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--ink-muted); cursor: pointer; transition: background-color .12s, color .12s; }
.lc-peek svg { width: 16px; height: 16px; }
.lc-peek:hover, .lc-peek:focus-visible { background: var(--surface-high); color: var(--ink); outline: none; }
.dlg:has(.peek-chat) { width: min(580px, 100%); }
.dlg:has(.peek-chat) .dlg-head p { display: flex; align-items: center; gap: 6px; }
.dlg:has(.peek-chat) .dlg-head p svg { width: 15px; height: 15px; flex: none; }
.peek-chat { display: flex; flex-direction: column; gap: 8px; max-height: min(60vh, 520px); overflow-y: auto; padding: 4px 2px; background: var(--chat-bg, transparent); }
.peek-chat .mact, .peek-chat .mmenu-btn { display: none !important; }
.peek-mais { margin: 0 0 4px; text-align: center; font-size: 12px; color: var(--ink-muted); }
.msg-menu { position: fixed; z-index: 120; min-width: 200px; padding: 6px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22); animation: pop .14s ease; }
.msg-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.msg-menu button svg { width: 17px; height: 17px; flex: none; color: var(--ink-muted); }
.msg-menu button:hover, .msg-menu button:focus-visible { background: var(--surface-raised); outline: none; }
.msg-menu button.perigo, .msg-menu button.perigo svg { color: #e5484d; }
.msg-menu button.perigo:hover { background: color-mix(in srgb, #e5484d 12%, transparent); }

/* Ajuda: atalho para a Central de Ajuda no topo da conversa com o suporte */
.ajuda-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: var(--s3); border-radius: var(--r-md); background: var(--surface-raised); color: var(--ink); text-decoration: none; transition: background-color .12s; }
.ajuda-link:hover { background: var(--surface-high); }
.ajuda-link > svg:first-child { width: 22px; height: 22px; color: var(--accent-text); flex: none; }
.ajuda-link > svg:last-child { width: 16px; height: 16px; color: var(--ink-muted); margin-left: auto; flex: none; }
.ajuda-link small { display: block; color: var(--ink-muted); font-size: 13px; }

/* Nome do cliente editável: no topo do lead e no card do funil */
.nm-edit { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 6px; }
.nm-edit .nm-lapis { flex: none; color: var(--ink-muted); opacity: 0; transition: opacity .12s; }
.nm-edit:hover .nm-lapis, .nm-edit:focus-visible .nm-lapis { opacity: 1; }
@media (hover: none) { .nm-edit .nm-lapis { opacity: .6; } }
.lc .lc-nome { cursor: text; border-radius: 4px; }
.lc .lc-nome:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
/* Campo de busca no lugar da lista de clientes e veículos (ui-busca.js) */
.sb { position: relative; display: block; width: 100%; }
.sb > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-muted); pointer-events: none; }
.sb input.sb-in { width: 100%; height: 44px; padding: 0 40px 0 42px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; }
.sb.sm input.sb-in { height: 40px; font-size: 14px; }
.sb input.sb-in::placeholder { color: var(--ink-muted); }
.sb input.sb-in:focus { outline: none; box-shadow: var(--glow); }
.sb input.sb-in:disabled { opacity: .55; cursor: not-allowed; }
.sb .sb-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--ink-muted); cursor: pointer; }
.sb .sb-x[hidden] { display: none; }
.sb .sb-x:hover { background: var(--surface-high); color: var(--ink); }
.select-wrap.has-sb::after { display: none; }
.sel-pop .sb-vazio { padding: 10px 12px; color: var(--ink-muted); font-size: 14px; }

/* ============ Celular mais limpo: topo com ⋮, busca + filtro, funil deslizando e botão + redondo ============ */
.ph-mob { display: none; }
@media (max-width: 860px) {
  .page-head { flex-direction: row; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
  .page-head .t-sub, .page-head .head-actions, #view > .scope { display: none !important; }
  .page-head > div:first-child { flex: 1; min-width: 0; }
  .page-head:has(.btn-arq) { display: flex; }
  .page-head:has(.btn-arq) > div:first-child { display: block; }
  .page-head .t-page { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ph-mob { display: flex; align-items: center; gap: 4px; flex: none; }
  .ph-mais { position: relative; }
  .ph-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 210px; padding: 6px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.25); animation: pop .14s ease; }
  .ph-menu[hidden] { display: none; }
  .ph-menu a, .ph-menu button { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 15px; text-decoration: none; text-align: left; cursor: pointer; }
  .ph-menu a:hover, .ph-menu button:hover { background: var(--surface-raised); }
  .ph-menu svg { width: 18px; height: 18px; color: var(--ink-muted); }
  .filtro-btn { position: relative; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-md); }
  .filtro-btn.on { border-color: var(--brand); }
  .filtro-btn .fb-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
  .page-head .filtro-btn { width: 40px; height: 40px; }
  .ltools.ltools-m, .toolbar.tb-m { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
  .ltools.ltools-m .search, .toolbar.tb-m .search { flex: 1; min-width: 0; }
  .toolbar.tb-m > .scroller { display: none; }
  /* funil: etapas como indicador no topo e deslizar para o lado */
  .etapas-ind { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s4)) var(--s2); padding: 0 var(--s4); border-bottom: 1px solid var(--line-soft); }
  .etapas-ind::-webkit-scrollbar { display: none; }
  .etapas-ind .ei { flex: none; padding: 8px 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-muted); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
  .etapas-ind .ei .c { font-size: 12px; opacity: .8; }
  .etapas-ind .ei[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); }
  .stage-swipe { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--s4)); overscroll-behavior-x: contain; transition: height .2s ease; }
  .stage-swipe::-webkit-scrollbar { display: none; }
  .stage-pane { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; padding: 0 var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
  /* botão + redondo */
  .fab { width: 50px; height: 50px; padding: 0; border-radius: var(--r-md); justify-content: center; }
  .fab .fab-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fab svg { width: 24px; height: 24px; margin: 0; stroke-width: 2.75; }
}
.fs-body .fs-tit { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-muted); letter-spacing: .06em; }
.fs-body .fs-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s5); }
.fs-body .field { margin-bottom: var(--s4); }
.fs-body .fs-scope { display: flex; flex-direction: column; gap: 6px; }
.fs-body .fs-scope label { font-size: 14px; font-weight: 600; }
.fs-body .fs-scope .select-wrap, .fs-body .fs-scope select { width: 100%; }
@media (max-width: 860px) {
  .toolbar.tb-m { flex-direction: row; align-items: center; }
  /* valores em reais: um cartão por linha, número inteiro e sem quebrar o sinal */
  .stats.stats-dinheiro { grid-template-columns: minmax(0, 1fr); }
  .stats.stats-dinheiro .stat { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--s3); row-gap: 2px; }
  .stats.stats-dinheiro .stat-label { flex: 1 1 auto; }
  .stats.stats-dinheiro .stat-value { white-space: nowrap; font-size: 22px; }
  .stats.stats-dinheiro .stat-foot { flex-basis: 100%; }
  .stat-value .neg { white-space: nowrap; }
}

/* ============ Experiência: primeiros passos, card enxuto, pedido de nome, alvos de toque ============ */
.passos-ini { margin-bottom: var(--s5); }
.passos-ini .pp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.passos-ini .pp-head p { margin: 4px 0 0; }
.pp-barra { height: 6px; margin: var(--s3) 0 var(--s4); border-radius: 3px; background: var(--surface-high); overflow: hidden; }
.pp-barra span { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width .4s ease; }
.pp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pp-lista li > a, .pp-lista li.ok { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.pp-lista li > a:hover { background: var(--surface-high); }
.pp-lista li > a > svg { margin-left: auto; width: 16px; height: 16px; color: var(--ink-muted); }
.pp-lista li.ok { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--line); }
.pp-ic { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; border: 1.5px solid var(--line); }
.pp-lista li.ok .pp-ic { background: var(--brand); border-color: var(--brand); color: #fff; }
.pp-ic svg { width: 14px; height: 14px; stroke-width: 3; }
.lc .np { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--ink-muted); }
.lc .np svg { width: 15px; height: 15px; }
.nome-pede { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 var(--s3); padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 12%, var(--surface-raised)); font-size: 14px; }
.nome-pede > svg { width: 18px; height: 18px; flex: none; }
.nome-pede > span { flex: 1; min-width: 160px; }
.nome-pede .btn { height: 34px; padding: 0 12px; font-size: 13px; }
@media (pointer: coarse) {
  .lc-peek, .sb .sb-x, .etapas-ind .ei { position: relative; }
  .lc-peek::after, .sb .sb-x::after { content: ""; position: absolute; inset: -9px; }
  .etapas-ind .ei { min-height: 44px; }
}
.mtext.msem { font-style: italic; color: var(--ink-muted); }

/* Busca em Leads: resultados de todas as etapas, cada card mostra a etapa */
.busca-res { margin: 0 0 var(--s3); font-size: 13px; color: var(--ink-muted); }
.lc .lc-etapa { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: var(--surface-high); color: var(--ink); font-size: 12px; font-weight: 600; }
.lc .lc-etapa svg { width: 13px; height: 13px; color: var(--ink-muted); }

@media (max-width: 860px) { .stage-swipe { transition: none; } .etapas-ind .ei { transition: color .12s, border-color .12s; } }

/* Mercado Livre: conexão, anúncio do carro e pergunta no lead */
.ml-box { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--surface-raised); margin-bottom: var(--s4); }
.ml-box.on { box-shadow: inset 3px 0 0 #ffe600; }
.ml-top { display: flex; align-items: center; gap: 12px; }
.ml-top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ml-top span { font-size: 13px; color: var(--ink-muted); }
.ml-mark { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #ffe600; color: #2d3277 !important; font-weight: 800; font-size: 13px !important; }
.ml-erro { display: flex; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--danger-soft); color: var(--danger); font-size: 13px; }
.ml-erro svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.ml-q { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--surface); }
.ml-r { margin: 0; font-size: 14px; color: var(--ink-muted); }
.btn-perigo { color: var(--danger) !important; }

/* Integrações: catálogo do Facebook (passo a passo) e portais em breve */
.passo-a-passo { margin: 0; font-size: 14px; }
.passo-a-passo summary { cursor: pointer; font-weight: 600; color: var(--accent-text); }
.passo-a-passo ol { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; }
.breve-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.breve { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--surface-raised); cursor: pointer; }
.breve > span:first-child { font-weight: 600; }
.breve-av { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); }
.breve.on { box-shadow: inset 0 0 0 1px var(--brand); }
.breve.on .breve-av { color: var(--accent-text); }

/* ===== Financeiro (oficina) ===== */
@media (min-width: 1100px) { .stats.stats-oficina { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fin-saldo { margin: var(--s3) 0 0; }
.fin-nfse { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s5); }
.fin-nfse-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-raised); color: var(--ink-muted); flex: none; }
.fin-nfse-ic svg { width: 22px; height: 22px; }
.fin-nfse-tx { flex: 1 1 260px; min-width: 0; }
.fin-nfse-t { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.fin-nfse-tx p { margin: var(--s2) 0 0; }
.fin-nfse-tx .okline { margin-top: var(--s3); font-size: 14px; }

/* ===== Site da oficina ===== */
.ofs-list { display: flex; flex-direction: column; gap: var(--s3); }
.ofs-item { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface-raised); margin-bottom: var(--s3); }
.ofs-list .ofs-item { margin-bottom: 0; }
.ofs-item .field { margin: 0; }
.ofs-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s3); }
@media (max-width: 720px) { .ofs-grid { grid-template-columns: 1fr; } }
.ofs-row-acts { display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; }
.ofs-row-acts .btn svg { width: 16px; height: 16px; }
.ofs-item .btn-sm, .ofs-dif .btn-sm { min-height: 36px; height: 36px; padding: 0 10px; font-size: 14px; }
.ofs-item .btn-sm:disabled { opacity: .35; }
.ofs-dif { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }
.ofs-dif input { flex: 1; min-width: 0; }
.site-logo-box.ofs-capa-box { height: auto; aspect-ratio: 16 / 6; padding: 0; overflow: hidden; justify-content: center; }
.site-logo-box.ofs-capa-box img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.site-logo-box.ofs-capa-box span { font: 400 14px var(--font-text); padding: var(--s4); text-align: center; }
.ofs-dados { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.ofs-dados li { display: flex; gap: var(--s3); justify-content: space-between; padding: var(--s2) 0; border-bottom: 1px solid var(--line-soft); }
.ofs-dados li:last-child { border-bottom: 0; }
.ofs-dados span { color: var(--ink-muted); text-align: right; overflow-wrap: anywhere; }

/* ===== Orçamentos (oficina) ===== */
.chk-opts button[aria-pressed="true"].chk-trocar { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.orc-comb { margin-top: var(--s2); }
.orc-comb button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.orc-itens { display: flex; flex-direction: column; gap: var(--s2); }
.orc-item { display: grid; grid-template-columns: 130px minmax(0, 1fr) 64px 120px 100px 40px; gap: var(--s2); align-items: center; }
.orc-item input, .orc-item select { width: 100%; height: 44px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; min-width: 0; }
.orc-item input:disabled, .orc-item select:disabled { background: var(--surface-raised); color: var(--ink-muted); }
.orc-item .select-wrap { min-width: 0; }
.orc-lt { text-align: right; font-variant-numeric: tabular-nums; }
.orc-head { font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.orc-head span:nth-child(5) { text-align: right; }
@media (max-width: 760px) {
  .orc-head { display: none; }
  .orc-item { grid-template-columns: minmax(0, 1fr) 64px 110px 40px; padding: var(--s3); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
  .orc-item > .select-wrap { grid-column: 1 / 3; }
  .orc-item > input[data-if="desc"] { grid-column: 1 / -1; order: 2; }
  .orc-item > input[data-if="qtd"] { order: 3; grid-column: 1 / 2; }
  .orc-item > input[data-if="valor"] { order: 3; grid-column: 2 / 4; }
  .orc-item > .orc-lt { order: 4; grid-column: 1 / -1; }
  .orc-item > .select-wrap { order: 1; }
  .orc-item > :last-child { order: 1; grid-column: 4; grid-row: 1; }
}

/* ===== Ordens de serviço (oficina) ===== */
.os-flow { background: var(--surface-raised); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--s4); margin: 0 0 var(--s4); }
.os-flow .ai-row { margin: var(--s3) 0 0; }
.os-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.os-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-muted); text-align: center; position: relative; }
.os-steps li::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--line-soft); z-index: 0; }
.os-steps li:first-child::before { display: none; }
.os-steps li.done::before, .os-steps li.on::before { background: var(--action); }
.os-steps .dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-soft); color: var(--ink-muted); font-size: 12px; }
.os-steps .dot svg { width: 14px; height: 14px; }
.os-steps li.done .dot { background: var(--action); border-color: var(--action); color: var(--on-action); }
.os-steps li.on { color: var(--ink); }
.os-steps li.on .dot { border-color: var(--action); color: var(--ink); }
.field.os-full { grid-column: 1 / -1; }
.os-itens { display: flex; flex-direction: column; gap: var(--s2); margin: 0 0 var(--s3); }
.os-item, .os-itens-head { display: grid; grid-template-columns: 112px minmax(0, 1fr) 60px 104px 96px 36px; gap: 6px; align-items: center; }
.os-itens-head { font-size: 12px; font-weight: 600; color: var(--ink-muted); margin: 0 0 6px; }
.os-item input { min-width: 0; }
.os-item .os-qtd, .os-item .os-val { text-align: right; }
.os-item .os-sub { text-align: right; font-size: 14px; white-space: nowrap; }
.os-item .os-del svg { width: 18px; height: 18px; }
.os-totais { display: flex; flex-direction: column; gap: 6px; margin-left: auto; max-width: 320px; padding: var(--s3) var(--s4); background: var(--surface-raised); border-radius: var(--r-md); }
.os-totais > div { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); font-size: 14px; }
.os-totais label { font-weight: 400; margin: 0; }
.os-totais input { width: 120px; text-align: right; }
.os-totais .os-total { border-top: 1px solid var(--line-soft); padding-top: 6px; font-size: 16px; }
@media (max-width: 640px) {
  .os-itens-head { display: none; }
  .os-item { grid-template-columns: 1fr 64px 1fr 36px; padding: var(--s2) 0; border-bottom: 1px solid var(--line-soft); }
  .os-item > .os-tipo { grid-column: 1 / 4; }
  .os-item > .os-del, .os-item > span:last-child { grid-column: 4; grid-row: 1; }
  .os-item > .os-desc { grid-column: 1 / -1; }
  .os-item > .os-qtd { grid-column: 1 / 2; }
  .os-item > .os-val { grid-column: 2 / 4; }
  .os-item > .os-sub { grid-column: 1 / -1; }
  .os-totais { max-width: none; margin-left: 0; }
  .os-steps li { font-size: 11px; }
}

/* ===== Chat da equipe ===== */
.ce { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); height: calc(100dvh - 190px); min-height: 460px; border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.ce-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line-soft); background: var(--surface); }
.ce-busca { padding: var(--s3); border-bottom: 1px solid var(--line-soft); }
.ce-busca input { width: 100%; height: 40px; padding: 0 var(--s3); border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 15px; }
.ce-lista { list-style: none; margin: 0; padding: var(--s2); overflow-y: auto; flex: 1; min-height: 0; }
.ce-item { width: 100%; display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ce-item:hover { background: var(--surface-raised); }
.ce-item.on { background: var(--surface-high); }
.ce-item .av { width: 40px; height: 40px; font-size: 14px; border-radius: var(--r-md); }
.ce-av-geral { background: var(--surface-high); color: var(--ink); }
.ce-av-geral svg { width: 20px; height: 20px; }
.ce-item-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ce-item-l1, .ce-item-l2 { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.ce-item-l1 b { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-item-l1 small { font-size: 12px; color: var(--ink-muted); flex: none; }
.ce-item-prev { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-item.novo .ce-item-prev { color: var(--ink); font-weight: 600; }
.ce-item .count { flex: none; font-size: 12px; line-height: 20px; font-weight: 700; min-width: 20px; padding: 0 6px; text-align: center; border-radius: var(--r-full); background: var(--action); color: var(--on-action); }
.ce-dica { list-style: none; margin: 0; padding: var(--s3) var(--s4); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ce-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--chat-bg, var(--surface-raised)); }
.ce-vazio { margin: auto; display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s6); text-align: center; color: var(--ink-muted); }
.ce-vazio svg { width: 32px; height: 32px; }
.ce-vazio b { color: var(--ink); font-size: 17px; }
.ce-top { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.ce-top-l { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.ce-top-l .av { width: 40px; height: 40px; font-size: 14px; border-radius: var(--r-md); }
.ce-top-tx { display: flex; flex-direction: column; min-width: 0; }
.ce-top-tx b { font-size: 16px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-top-tx span { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ce-back { display: none; margin-left: calc(-1 * var(--s2)); }
.ce-fix { border-radius: var(--r-md); background: var(--surface-raised); }
.ce-fix-head { width: 100%; display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-md); }
.ce-fix-head > svg { width: 18px; height: 18px; flex: none; color: var(--accent-text); }
.ce-fix-head > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ce-fix-head b { font-size: 13px; line-height: 18px; }
.ce-fix-prev { font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); }
.ce-fix.aberto .ce-fix-prev { display: none; }
.ce-fix-lista { list-style: none; margin: 0; padding: 0 var(--s3) var(--s2); max-height: 40vh; overflow-y: auto; }
.ce-fix-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line-soft); font-size: 14px; line-height: 20px; }
.ce-fix-tx { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.ce-fix-acts { display: flex; gap: var(--s1); flex-wrap: wrap; }
.btn.ce-mini { height: 32px; padding: 0 var(--s2); font-size: 13px; gap: 6px; }
.btn.ce-mini svg { width: 16px; height: 16px; }
.ce-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: var(--s4); overscroll-behavior: contain; }
.ce-mais { align-self: center; }
.ce-msg { position: relative; max-width: min(82%, 560px); }
.ce-msg .mtext { white-space: pre-wrap; overflow-wrap: anywhere; }
.ce-autor { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--accent-text); margin-bottom: 2px; }
.ce-msg.ce-urg { box-shadow: inset 3px 0 0 var(--danger); }
.ce-urg-b { gap: 4px; margin: 2px 0 4px; }
.ce-urg-b svg { width: 14px; height: 14px; }
.ce-pin { display: inline-flex; }
.ce-pin svg { width: 13px; height: 13px; }
.ce-macts { display: flex; align-items: center; justify-content: flex-end; gap: var(--s1); margin-top: 2px; }
.ce-pinbtn { width: 32px; height: 32px; opacity: .55; }
.ce-pinbtn svg { width: 16px; height: 16px; }
.ce-msg:hover .ce-pinbtn, .ce-pinbtn:focus-visible { opacity: 1; }
.ce-visto { align-self: flex-end; font-size: 12px; line-height: 16px; color: var(--ink-muted); margin: -2px 2px 4px; }
.ce-audio { display: flex; align-items: center; gap: var(--s2); padding-top: 3px; }
.ce-audio audio { width: 240px; max-width: 100%; height: 40px; }
.ce-audio small { font-size: 12px; opacity: .7; }
.ce-transc { display: flex; gap: 6px; margin-top: 4px; padding: 6px 8px; border-radius: var(--r-sm); background: rgba(0,0,0,.05); font-size: 14px; line-height: 20px; }
.ce-transc svg { width: 16px; height: 16px; flex: none; margin-top: 2px; opacity: .7; }
.ce-foto { display: block; margin: 3px 0 4px; border-radius: 10px; overflow: hidden; max-width: 280px; }
.ce-foto img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
.ce-video { display: block; width: 280px; max-width: 100%; max-height: 360px; margin: 3px 0 4px; border-radius: 10px; background: #000; }
.ce-os, .ce-os-op { display: flex; align-items: center; gap: var(--s3); width: 100%; min-width: 220px; padding: var(--s2) var(--s3); margin: 3px 0; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ce-os:hover, .ce-os-op:hover { border-color: var(--line); }
.ce-os > svg, .ce-os-op > svg { width: 20px; height: 20px; flex: none; }
.ce-os-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ce-os-tx b { font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-os-tx small { font-size: 13px; line-height: 18px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-os-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); max-height: 55vh; overflow-y: auto; }
.ce-foot { padding: var(--s2) var(--s3) var(--s3); border-top: 1px solid var(--line-soft); background: var(--surface); }
.ce-foot .note { margin: var(--s1) 0; }
.ce-foot .note svg { width: 18px; height: 18px; flex: none; }
.ce-composer { align-items: flex-end; }
.ce-clip { position: relative; }
.ce-menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; min-width: 230px; display: flex; flex-direction: column; padding: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); }
.ce-menu[hidden] { display: none; }
.ce-menu button { display: flex; align-items: center; gap: var(--s3); height: 44px; padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.ce-menu button:hover { background: var(--surface-raised); }
.ce-menu svg { width: 18px; height: 18px; }
.ce-urgbtn[aria-pressed="true"] { color: var(--danger); background: var(--danger-soft); }
.ce-urg-aviso { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); padding: 6px var(--s3); border-radius: var(--r-sm); background: var(--danger-soft); color: var(--danger); font-size: 13px; line-height: 18px; font-weight: 600; }
.ce-urg-aviso svg { width: 16px; height: 16px; flex: none; }
.sendbtn.ce-big { width: 48px; height: 48px; border-radius: var(--r-full); }
.sendbtn.ce-big[hidden] { display: none; }
.sendbtn.ce-big svg { width: 22px; height: 22px; }
.ce-rec { display: flex; align-items: center; gap: var(--s3); min-height: 48px; }
.ce-rec-dot { width: 10px; height: 10px; border-radius: var(--r-full); background: var(--danger); animation: blink 1.2s infinite; flex: none; }
.ce-rec-t { font-weight: 700; font-variant-numeric: tabular-nums; }
.ce-rec-lbl { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-v-tit { font-size: 15px; line-height: 20px; margin: var(--s4) 0 var(--s2); }
.ce-v-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.ce-v-item { display: flex; align-items: center; gap: var(--s3); }
.ce-v-item > span:last-child { display: flex; flex-direction: column; }
.ce-v-item small { font-size: 13px; color: var(--ink-muted); }
@media (max-width: 860px) {
  .view:has(> .ce) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .view:has(> .ce.ce-open) > .page-head { display: none; }
  .ce { display: block; height: calc(100dvh - 56px - 76px - var(--s5) - 72px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); min-height: 380px; }
  .ce.ce-open { height: calc(100dvh - 56px - 76px - var(--s5) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .ce-side { height: 100%; border-right: 0; }
  .ce-main { display: none; height: 100%; }
  .ce.ce-open .ce-side { display: none; }
  .ce.ce-open .ce-main { display: flex; }
  .ce-back { display: inline-grid; }
  .ce-msgs { padding: var(--s3); }
  .ce-msg { max-width: 88%; }
}

/* ===== Técnico IA ===== */
.ti-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--s3) var(--s4); margin: var(--s2) 0; font-size: 14px; line-height: 20px; max-width: 560px; }
.ti-card.ti-pend { border-color: color-mix(in srgb, var(--action) 45%, var(--line-soft)); }
.ti-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s2); }
.ti-head > svg { width: 18px; height: 18px; color: var(--action); flex: none; }
.ti-head b { font-weight: 600; }
.ti-head .badge { margin-left: auto; }
.ti-achados, .ti-itens { list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.ti-achados li { display: flex; gap: var(--s2); align-items: flex-start; }
.ti-achados li > .badge { flex: none; margin-top: 1px; }
.ti-achados li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ti-achados span, .ti-achados small { color: var(--ink-muted); }
.ti-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ti-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); display: block; }
.ti-itens { border-top: 1px solid var(--line-soft); padding-top: var(--s2); }
.ti-itens li { display: flex; align-items: center; gap: var(--s2); }
.ti-itens .ti-tipo { flex: none; width: 58px; font-size: 12px; color: var(--ink-muted); }
.ti-itens .ti-desc { flex: 1; min-width: 0; }
.ti-itens .ti-desc small { color: var(--ink-muted); }
.ti-itens b { white-space: nowrap; font-weight: 600; }
.ti-msgcli { background: var(--surface-raised); border-radius: var(--r-sm); padding: var(--s2) var(--s3); margin: 0 0 var(--s3); }
.ti-msgcli summary { cursor: pointer; font-weight: 600; }
.ti-msgcli p { margin: var(--s2) 0 0; }
.ti-txt { margin: 0 0 var(--s3); white-space: normal; }
.ti-quote { margin: 0 0 var(--s2); padding: var(--s2) var(--s3); border-left: 3px solid var(--line-soft); color: var(--ink-muted); }
.ti-quote small { display: block; font-size: 12px; font-weight: 600; }
.ti-nota { display: flex; align-items: flex-start; gap: var(--s2); margin: 0 0 var(--s3); font-size: 13px; color: var(--ink-muted); }
.ti-nota svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.ti-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.ti-actions .btn, .ti-preparar { min-height: 40px; }
.ti-actions .btn svg, .ti-preparar svg { width: 18px; height: 18px; }
.ti-off { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 4px; }
.ti-painel .ti-card { max-width: none; }
.ti-painel > .ti-actions { margin: 0 0 var(--s3); }
.ti-lead { padding: 0 var(--s4); }
.ti-lead:empty { display: none; }
.ti-envio textarea { min-height: 160px; }
.ti-fotos { border: 0; margin: var(--s3) 0 0; padding: 0; }
.ti-fotos legend { font-weight: 600; font-size: 14px; margin: 0 0 var(--s2); padding: 0; }
.ti-fotos { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ti-foto { position: relative; cursor: pointer; }
.ti-foto input { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; accent-color: var(--action); }
.ti-foto img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-sm); display: block; border: 2px solid transparent; }
.ti-foto input:checked + img { border-color: var(--action); }
.ti-check { display: flex; gap: var(--s3); align-items: flex-start; margin: var(--s4) 0 0; cursor: pointer; }
.ti-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--action); flex: none; }
.ti-check span { display: flex; flex-direction: column; }
.ti-check small { color: var(--ink-muted); font-size: 13px; }
.ti-cfg-note { margin: 0 0 var(--s4); }
.ti-hora { max-width: 220px; }
.ti-srv, .ti-exp { display: grid; gap: var(--s2); align-items: end; padding: var(--s3) 0; border-top: 1px solid var(--line-soft); }
.ti-srv { grid-template-columns: minmax(0, 2fr) 110px minmax(0, 2fr) minmax(0, 2fr) 40px; }
.ti-exp { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 40px; }
.ti-srv .field, .ti-exp .field { margin: 0; }
.ti-del svg { width: 18px; height: 18px; }
.ti-save { position: sticky; bottom: var(--s3); display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); box-shadow: var(--shadow); margin-top: var(--s4); }
.ti-save > span { margin-right: auto; font-size: 14px; color: var(--ink-muted); }
.ti-save [hidden] { display: none; }
@media (max-width: 640px) {
  .ti-srv, .ti-exp { grid-template-columns: minmax(0, 1fr) 40px; }
  .ti-srv .field, .ti-exp .field { grid-column: 1; }
  .ti-srv .ti-del, .ti-exp .ti-del { grid-column: 2; grid-row: 1; align-self: end; }
  .ti-actions .btn { flex: 1 1 auto; }
  .ti-save { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== Bancada ===== */
/* Minhas OS: cartões grandes com faixa de cor do status */
.bc-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s3); }
.bc-sec { margin: var(--s6) 0 var(--s3); }
.bc-note { margin-bottom: var(--s4); }
.bc-nova-aviso { background: color-mix(in srgb, var(--action) 12%, var(--surface-raised)); color: var(--ink); }
.bc-card { display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 136px; padding: var(--s4); text-align: left; background: var(--surface-raised); border: 0; border-radius: var(--r-lg); cursor: pointer; position: relative; overflow: hidden; color: var(--ink); }
.bc-card:hover { background: var(--surface-high); }
.bc-card.is-nova { box-shadow: inset 0 0 0 2px var(--action); }
.bc-card-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.bc-num { font-size: 14px; line-height: 20px; color: var(--ink-muted); font-weight: 700; letter-spacing: .02em; }
.bc-nl { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; background: var(--action); color: var(--on-action); padding: 1px 8px; border-radius: var(--r-full); }
.bc-nl svg.lucide { width: 14px; height: 14px; }
.bc-carro { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; }
.bc-placa { align-self: flex-start; font-weight: 700; font-size: 15px; letter-spacing: .06em; padding: 0 8px; border: 1.5px solid var(--ink); border-radius: var(--r-xs); }
.bc-queixa { color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-card-foot { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: auto; padding-top: var(--s2); font-size: 14px; line-height: 20px; color: var(--ink-muted); font-weight: 600; }
.bc-card-foot > span { display: inline-flex; align-items: center; gap: 4px; }
.bc-card-foot svg.lucide { width: 16px; height: 16px; }
.bc-atraso { color: var(--danger); }
/* Celular da bancada: quem está usando, escolha do nome e PIN */
.bc-quem { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--surface-raised); border-radius: var(--r-md); margin-bottom: var(--s4); }
.bc-quem b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
.bc-pessoa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); min-height: 150px; padding: var(--s4); background: var(--surface-raised); border: 0; border-radius: var(--r-lg); cursor: pointer; font-size: 18px; color: var(--ink); }
.bc-pessoa:hover { background: var(--surface-high); }
.av.bc-av-g { width: 72px; height: 72px; font-size: 26px; border-radius: var(--r-full); }
.bc-pinbox { max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.bc-pinbox .bc-voltar { align-self: flex-start; }
.bc-pin-quem { display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; }
.bc-pin-quem .t-sub { margin: 0; }
.bc-dots { display: flex; gap: var(--s3); min-height: 20px; }
.bc-dots i { width: 16px; height: 16px; border-radius: var(--r-full); border: 2px solid var(--ink-muted); }
.bc-dots i.on { background: var(--ink); border-color: var(--ink); }
.bc-pin-err { min-height: 24px; text-align: center; }
.bc-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); width: 100%; }
.bc-tecla { height: 68px; font-size: 26px; font-weight: 600; border: 0; border-radius: var(--r-lg); background: var(--surface-raised); color: var(--ink); cursor: pointer; display: grid; place-items: center; touch-action: manipulation; }
.bc-tecla:active { background: var(--surface-high); }
.bc-tecla.ok { background: var(--action); color: var(--on-action); }
.bc-tecla svg.lucide { width: 26px; height: 26px; }
/* Tela da OS */
.bc-top { margin: 0 0 var(--s2) calc(-1 * var(--s3)); }
.bc-voltar { display: inline-flex; gap: 2px; }
.bc-head { margin-bottom: var(--s4); }
.bc-head .t-page { margin: var(--s1) 0 0; }
.bc-det { margin: 2px 0 0; color: var(--ink-muted); }
.bc-info { padding: var(--s5); margin-bottom: var(--s4); }
.bc-info .label { margin: 0 0 var(--s1); }
.bc-info p { margin: 0 0 var(--s4); }
.bc-info p:last-child { margin-bottom: 0; }
.bc-queixa-g { font-size: 18px; line-height: 26px; }
.bc-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.bc-itens li { display: flex; gap: var(--s2); align-items: flex-start; }
.bc-itens svg.lucide { color: var(--ink-muted); margin-top: 2px; }
.bc-acoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s6); }
.bc-acao { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); min-height: 96px; padding: var(--s3); border: 0; border-radius: var(--r-lg); background: var(--surface-raised); color: var(--ink); font-size: 16px; line-height: 20px; font-weight: 700; text-align: center; cursor: pointer; touch-action: manipulation; }
.bc-acao svg.lucide { width: 28px; height: 28px; }
.bc-acao:hover:not([disabled]) { background: var(--surface-high); }
.bc-acao[disabled] { opacity: .45; cursor: default; }
.bc-acao[data-act="bc-pronto"]:not([disabled]) { background: var(--action); color: var(--on-action); }
.bc-rec { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.bc-rec.on, .bc-comp .iconbtn.on { background: var(--danger); color: #fff; }
/* Conversa da OS (tela do mecânico e aba Conversa da gaveta da OS) */
.bc-conversa .label { margin-bottom: var(--s2); }
.bc-msgs { list-style: none; margin: 0 0 var(--s3); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); background: var(--surface-raised); border-radius: var(--r-lg); max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.bc-msgs.in-drawer { max-height: none; overflow: visible; padding: var(--s2) 0; background: none; }
.bc-dia { align-self: center; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); margin: var(--s2) 0; }
.bc-vazio { color: var(--ink-muted); text-align: center; padding: var(--s5) var(--s3); font-size: 14px; }
.bc-ev { align-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px var(--s2); max-width: 92%; padding: 4px var(--s3); font-size: 14px; line-height: 20px; color: var(--ink-muted); background: var(--surface-high); border-radius: var(--r-md); text-align: center; }
.bc-ev time { font-size: 12px; }
.bc-msg { display: flex; }
.bc-msg.eu { justify-content: flex-end; }
.bc-bolha { max-width: min(86%, 520px); padding: var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); border-top-left-radius: var(--r-xs); overflow-wrap: anywhere; }
.bc-msg.eu .bc-bolha { background: color-mix(in srgb, var(--action) 12%, var(--surface)); border-color: transparent; border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-xs); }
.bc-msg.ia .bc-bolha { border-color: var(--action); }
.bc-bolha p { margin: 4px 0 0; }
.bc-autor { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ink-muted); }
.bc-autor svg.lucide { width: 14px; height: 14px; color: var(--action); }
.bc-bolha img, .bc-bolha video { display: block; margin-top: 6px; max-width: 100%; max-height: 320px; border-radius: var(--r-sm); background: var(--surface-high); }
.bc-bolha audio { display: block; margin-top: 6px; width: 260px; max-width: 100%; }
.bc-trans { font-size: 14px; line-height: 20px; font-style: italic; }
.bc-recbar { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); margin-bottom: var(--s3); background: var(--danger-soft); border-radius: var(--r-md); }
.bc-recbar[hidden] { display: none; }
.bc-recbar .bc-rec-t { font-variant-numeric: tabular-nums; }
.bc-recbar .btn-tertiary { margin-left: auto; }
.bc-comp { display: flex; align-items: flex-end; gap: var(--s2); width: 100%; }
.bc-comp textarea { flex: 1; min-width: 0; min-height: 56px; max-height: 160px; padding: 15px var(--s3); font-size: 16px; line-height: 24px; resize: none; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); field-sizing: content; }
.bc-comp .bc-env { width: 56px; height: 56px; padding: 0; flex: none; }
.bc-comp .iconbtn { width: 48px; height: 56px; }
.drawer-foot.bc-foot { display: block; }
/* Painel do dono e configurações */
.bc-tempos { list-style: none; margin: 0; padding: 0; }
.bc-tempos li { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line-soft); }
.bc-tempos li span { flex: 1; min-width: 0; }
.bc-tempos small { color: var(--ink-muted); min-width: 52px; text-align: right; }
.bc-modos { display: grid; gap: var(--s2); }
.bc-modo { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border: 1px solid var(--line-soft); border-radius: var(--r-md); cursor: pointer; }
.bc-modo:has(input:checked) { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.bc-modo input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--action); flex: none; }
.bc-modo b { display: block; }
.bc-modo small { display: block; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.bc-mrows { list-style: none; margin: 0; padding: 0; }
.bc-mrow { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) 0; border-top: 1px solid var(--line-soft); }
.bc-mrow .txt { flex: 1; min-width: 200px; }
.bc-mrow .txt span { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.bc-mrow-acts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.bc-add { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
.bc-add .field { flex: 1 1 180px; }
@media (max-width: 640px) {
  .bc-lista { grid-template-columns: 1fr; }
  .bc-acoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-acao { min-height: 88px; }
  .bc-msgs { max-height: 55vh; }
  .bc-quem .btn { padding: 0 var(--s3); }
}

/* ===== Ajustes de leitura no celular (bancada e gavetas) ===== */
.bc-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.bc-meta span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bc-meta svg { width: 16px; height: 16px; flex: none; }
.bc-meta b { color: var(--ink); }
.bc-ia { display: flex; }
.bc-ia .btn { width: 100%; }
/* abas das gavetas: nomes inteiros numa linha; se não couber, a faixa rola para o lado */
.drawer .tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.drawer .tabs::-webkit-scrollbar { display: none; }
.drawer .tab { white-space: nowrap; flex: none; }