/* @neuvox/ui · componentes do painel piloto · extraídos do Protótipo Vivo (30/09/2026)
   Requer: dist/tokens.css (@neuvox/tokens) e css/ponte.css (nomes curtos do protótipo).
   Camadas: tokens < ponte < componentes < telas. */
@layer nvx.componentes{
@scope (.nvx-ui) {

@media (prefers-reduced-transparency:reduce){:root{--mat-regular:var(--surf);--mat-vidro:var(--surf);--mat-tint:var(--surf);--blur:0px;--sat:1}}

svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

.tab{font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:6px}

@keyframes flutua{to{transform:translate(6vmax,4vmax) scale(1.08)}}

.vidro{background:var(--mat-vidro);-webkit-backdrop-filter:blur(calc(var(--blur) + 6px)) saturate(var(--sat));backdrop-filter:blur(calc(var(--blur) + 6px)) saturate(var(--sat));box-shadow:inset 0 1px 0 var(--rim),inset 0 -1px 0 var(--rim-2),0 0 0 1px var(--line),var(--sombra-2)}

.vidro::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.28),transparent 60%);opacity:var(--brilho,0);transition:opacity var(--dur-3) var(--ease);mix-blend-mode:screen}

.item[aria-selected="true"]{background:transparent;box-shadow:none}

.item{z-index:1}

.menu.aberto{transform:none;opacity:1;pointer-events:auto}

.menu button{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;font-size:13.5px;cursor:pointer;text-align:left}

.menu button:hover{background:color-mix(in oklab,var(--acento) 12%,transparent)}

.menu button kbd{margin-left:auto;font:600 10.5px var(--font-body);color:var(--fg-3)}

.menu hr{border:0;border-top:1px solid var(--line);margin:4px 8px}

@keyframes recolhe{to{opacity:0;transform:scale(.985)}}

.menu .perigo{color:var(--vinho)}

@keyframes voa{30%{transform:translateY(-14px);opacity:0}31%{transform:translateY(14px);opacity:0}100%{transform:none;opacity:1}}

.av.urg-pulsa::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--st-urg);animation:anel 1.8s var(--ease) infinite}

@keyframes anel{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}

.sugestao.brilha::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);background-size:220% 100%;animation:brilho 1.2s var(--ease) 1;pointer-events:none}

@keyframes brilho{from{background-position:120% 0}to{background-position:-120% 0}}

.selo{position:relative;display:grid;place-items:center;border-radius:50%;background:var(--surf);isolation:isolate}

.selo::before{content:"";position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 210deg,#1F8E8A,#9D9BC4,#E3A04B,#D97A68,#C8476C,#8E2B2B,#1F8E8A);z-index:-1;opacity:0;transition:opacity var(--dur-3)}

.selo .simb{width:100%;height:100%;object-fit:contain;border-radius:50%}

.selo .branco{display:none}

@keyframes gira{to{transform:rotate(360deg)}}

@keyframes pulo{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

.titulo{font-family:var(--font-head);font-weight:400;font-size:30px;line-height:1;letter-spacing:-.01em;margin:0;transform-origin:left top;transition:transform var(--dur-3) var(--ease)}

.titulo small{font-family:var(--font-body);font-size:12.5px;color:var(--fg-3);margin-left:8px;font-weight:500}

.busca{display:flex;align-items:center;gap:8px;background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:8px 10px;color:var(--fg-3);font-size:13px;cursor:text;box-shadow:inset 0 1px 0 var(--rim)}

.busca kbd{margin-left:auto;font:600 10.5px var(--font-body);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px;color:var(--fg-3)}

.filtros{display:flex;gap:4px;background:var(--bg-2);padding:3px;border-radius:999px;position:relative}

.filtros button{flex:1;border:0;background:transparent;font-size:12.5px;font-weight:600;color:var(--fg-2);padding:6px 8px;border-radius:999px;cursor:pointer;position:relative;z-index:1;transition:color var(--dur-2) var(--ease);white-space:nowrap}

.filtros button[aria-selected="true"]{color:var(--fg)}

.filtros .pill{position:absolute;top:3px;bottom:3px;left:3px;width:var(--w,25%);border-radius:999px;background:var(--surf);box-shadow:var(--sombra-1);transform:translateX(var(--x,0));transition:transform var(--dur-4) var(--spring-soft),width var(--dur-4) var(--spring-soft)}

.grupo{padding:14px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}

.item{display:grid;grid-template-columns:auto 1fr auto;gap:calc(12px*var(--dens));align-items:center;padding:calc(11px*var(--dens)) 10px;border-radius:14px;cursor:pointer;position:relative;transition:background var(--dur-2) var(--ease),transform var(--dur-4) var(--spring-soft);border:0;background:transparent;text-align:left;width:100%}

.item:hover{background:color-mix(in oklab,var(--surf) 60%,transparent)}

.item[aria-selected="true"]{background:var(--surf);box-shadow:var(--sombra-1),inset 0 1px 0 var(--rim)}

.item.nova{animation:entra var(--dur-4) var(--spring-soft) both}

@keyframes entra{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}

.item.realce{animation:realce 1.4s var(--ease)}

@keyframes realce{0%,30%{box-shadow:0 0 0 2px var(--acento),var(--sombra-1)}100%{box-shadow:var(--sombra-1)}}

.av{width:calc(38px*var(--dens) + 8px);height:calc(38px*var(--dens) + 8px);border-radius:50%;background:var(--acento-soft);color:var(--acento-ink);display:grid;place-items:center;font-weight:700;font-size:12.5px;position:relative;flex:none}

.av .st{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;border:2px solid var(--surf-2);background:var(--stc);z-index:1}
/* foto de perfil (WhatsApp) com iniciais como reserva: <span class="av com-foto"><img src onerror="this.remove()"><span class="ini">PA</span><i class="st"></i></span> */
.av img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.av.com-foto .ini{visibility:hidden}
.chat-head .quem .av{width:40px;height:40px;font-size:13px;box-shadow:0 0 0 2px var(--surf)}

.item[aria-selected="true"] .av .st{border-color:var(--surf)}

.av .st{border-color:var(--surf)}

.item .t{min-width:0}

.item .nome{font-weight:600;font-size:14px;display:flex;gap:8px;align-items:center;min-width:0}

.item .nome b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

.item .previa{display:block;font-size:12.5px;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.item .previa .ia{color:var(--st-ia);font-weight:700}

.item .lado{display:grid;justify-items:end;gap:6px;font-size:11.5px;color:var(--fg-3)}

.item .nao{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--acento-btn);color:var(--acento-btn-fg);font-size:11px;font-weight:700;display:grid;place-items:center}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in oklab,var(--stc) 16%,var(--surf));color:color-mix(in oklab,var(--stc) 78%,var(--fg));white-space:nowrap}

.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--stc)}

.vazio{padding:40px 20px;text-align:center;color:var(--fg-3);font-size:13px}

.btn{border:1px solid var(--line);background:var(--surf);color:var(--fg);font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:transform var(--dur-4) var(--spring-pop),background var(--dur-2) var(--ease);box-shadow:inset 0 1px 0 var(--rim)}

.btn:hover{background:var(--surf-2)}

.btn:active{transform:scale(.95)}

.btn.primario{background:var(--acento-btn);border-color:transparent;color:var(--acento-btn-fg)}

.btn.icone{width:34px;height:34px;padding:0;justify-content:center}

.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}

.ia-chip{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:color-mix(in oklab,var(--st-ia) 18%,var(--surf));color:color-mix(in oklab,var(--st-ia) 70%,var(--fg));font-size:12.5px;font-weight:700}

.ia-chip i{width:8px;height:8px;border-radius:50%;background:var(--st-ia);animation:respira 2.4s var(--ease) infinite}

@keyframes respira{0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--st-ia) 45%,transparent)}50%{box-shadow:0 0 0 6px transparent}}

.msgs{flex:1;overflow:auto;padding:84px 24px 110px;display:flex;flex-direction:column;gap:calc(8px*var(--dens));scrollbar-width:thin;view-transition-name:msgs}

.dia{align-self:center;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);padding:4px 10px;margin-block:8px;position:sticky;top:0;z-index:1;border-radius:999px}

.msg{max-width:min(64%,580px);padding:calc(10px*var(--dens)) 14px;border-radius:18px;background:var(--surf-2);border:1px solid var(--line);font-size:14px;line-height:1.5;position:relative;transform-origin:bottom}

.msg.deles{align-self:flex-start;border-bottom-left-radius:6px}

.msg.minha{align-self:flex-end;background:var(--mine);border-color:var(--mine-line);border-bottom-right-radius:6px}

.msg.ia{align-self:flex-end;background:color-mix(in oklab,var(--st-ia) 10%,var(--surf));border-color:color-mix(in oklab,var(--st-ia) 30%,var(--surf));border-bottom-right-radius:6px}

.msg .autor{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,var(--st-ia) 70%,var(--fg));margin-bottom:3px}

.msg .rod{display:flex;gap:6px;justify-content:flex-end;align-items:center;font-size:11px;color:var(--fg-3);margin-top:4px}




.msg.sobe{animation:sobe var(--dur-4) var(--spring-soft) both}

@keyframes sobe{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}

.digitando{align-self:flex-end;display:flex;gap:4px;padding:10px 14px;border-radius:18px;background:color-mix(in oklab,var(--st-ia) 10%,var(--surf));border:1px solid color-mix(in oklab,var(--st-ia) 30%,var(--surf))}

.digitando i{width:6px;height:6px;border-radius:50%;background:var(--st-ia);animation:ponto 1.2s var(--ease) infinite}

.digitando i:nth-child(2){animation-delay:.15s}
.digitando i:nth-child(3){animation-delay:.3s}

@keyframes ponto{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.audio{display:flex;align-items:center;gap:10px;min-width:240px}

.audio .play{width:32px;height:32px;border-radius:50%;border:0;background:var(--acento-btn);color:var(--acento-btn-fg);display:grid;place-items:center;cursor:pointer;flex:none}

.audio .onda{display:flex;align-items:center;gap:2px;height:28px;flex:1}

.audio .onda i{width:3px;border-radius:2px;background:color-mix(in oklab,var(--acento) 45%,var(--fg-3));height:var(--h);transition:background var(--dur-2)}

.audio.tocando .onda i{animation:onda 1.1s var(--ease) infinite alternate;animation-delay:calc(var(--k)*40ms)}

@keyframes onda{to{transform:scaleY(.45)}}

.audio .dur{font-size:11.5px;color:var(--fg-3)}

.transcr{font-size:13px;color:var(--fg-2);margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-2)}

.transcr b{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);display:block;margin-bottom:2px}

.sugestao{position:absolute;left:16px;right:16px;bottom:78px;z-index:4;padding:10px 12px 10px 14px;border-radius:16px;display:flex;gap:12px;align-items:center;font-size:13px;transform:translateY(var(--ty,0));transition:transform var(--dur-4) var(--spring-soft),opacity var(--dur-2) var(--ease)}

.sugestao[hidden]{display:none}

.sugestao b{color:color-mix(in oklab,var(--st-ia) 70%,var(--fg));font-size:11px;letter-spacing:.08em;text-transform:uppercase;flex:none}

.sugestao p{margin:0;flex:1;color:var(--fg-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.composer{position:absolute;left:16px;right:16px;bottom:16px;z-index:4;display:flex;gap:8px;align-items:center;padding:6px 6px 6px 8px;border-radius:999px}

.composer input{flex:1;border:0;background:transparent;font:inherit;font-size:14px;color:var(--fg);padding:8px 6px;min-width:0;outline:none}

.composer input::placeholder{color:var(--fg-3)}

.composer .enviar{width:38px;height:38px;border-radius:50%;border:0;background:var(--acento-btn);color:var(--acento-btn-fg);display:grid;place-items:center;cursor:pointer;transition:transform var(--dur-4) var(--spring-pop)}

.composer .enviar:active{transform:scale(.9)}

.camadas>*{pointer-events:auto}

.camadas .sheet{pointer-events:none}
.camadas .sheet.aberta{pointer-events:auto}

.sheet{visibility:hidden;transition:transform var(--dur-4) var(--spring-soft),visibility 0s linear var(--dur-4)}

.sheet.aberta{transform:none;visibility:visible;transition-delay:0s}

.sheet h3{font-family:var(--font-head);font-weight:400;font-size:24px;margin:0 0 2px;padding-right:44px}

.sheet .sub{font-size:12.5px;color:var(--fg-3);margin-bottom:16px}

.sheet .fechar{position:absolute;top:12px;right:12px}

@keyframes salvo{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--acento) 60%,transparent)}100%{box-shadow:0 0 0 8px transparent}}

.veu{position:absolute;inset:0;z-index:5;background:rgba(16,58,60,.18);opacity:0;pointer-events:none;transition:opacity var(--dur-3) var(--ease)}

.veu.on{opacity:1;pointer-events:auto}

dialog.paleta::backdrop{background:rgba(12,21,22,.25);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

dialog.paleta[open]{animation:paleta-in var(--dur-4) var(--spring-soft)}

@keyframes paleta-in{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}

.paleta .caixa{border-radius:var(--r-lg);overflow:hidden;color:var(--fg)}

.paleta .in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}

.paleta input{flex:1;border:0;background:transparent;font:inherit;font-size:17px;color:var(--fg);outline:none}

.paleta ul{list-style:none;margin:0;padding:8px;max-height:52vh;overflow:auto}

.paleta .sec{padding:10px 10px 4px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}

.paleta li button{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;cursor:pointer;text-align:left;font-size:14px}

.paleta li button[aria-selected="true"],.paleta li button:hover{background:color-mix(in oklab,var(--acento) 12%,transparent)}

.paleta li button kbd{margin-left:auto;font:600 10.5px var(--font-body);color:var(--fg-3);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px}

.paleta li button small{color:var(--fg-3);margin-left:6px}

.paleta .dica{padding:8px 14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--fg-3);display:flex;gap:14px}

.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;border-radius:16px;font-size:13.5px;color:var(--fg);animation:toast-in var(--dur-4) var(--spring-soft)}

.toast i{width:8px;height:8px;border-radius:50%;background:#3FAE73}

.toast button{border:0;background:transparent;color:var(--acento-ink);font-weight:700;cursor:pointer;padding:4px 8px}

.toast.sai{animation:toast-out var(--dur-3) var(--ease) forwards}

@keyframes toast-in{from{opacity:0;transform:translateX(24px) scale(.96)}to{opacity:1;transform:none}}

@keyframes toast-out{to{opacity:0;transform:translateX(16px) scale(.96)}}

.seg{display:flex;background:var(--bg-2);border-radius:999px;padding:2px;gap:2px}

.seg button{flex:1;border:0;background:transparent;font-size:11.5px;font-weight:600;color:var(--fg-2);padding:4px 6px;border-radius:999px;cursor:pointer;white-space:nowrap}

.seg button[aria-pressed="true"]{background:var(--surf);color:var(--fg);box-shadow:var(--sombra-1)}

.card{background:var(--surf-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:inset 0 1px 0 var(--rim)}

.card h3{font-family:var(--font-head);font-weight:400;font-size:21px;margin:0 0 12px;letter-spacing:0}

.rotulo{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}

.sw{position:relative;width:40px;height:24px;border-radius:12px;background:var(--line-2);border:0;cursor:pointer;transition:background var(--dur-3) var(--ease);flex:none}

.sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--dur-4) var(--spring-pop)}

.sw[aria-checked="true"]{background:var(--acento-btn)}

.sw[aria-checked="true"]::after{transform:translateX(16px)}

.linha-cfg{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}

.linha-cfg:last-child{border-bottom:0}

.linha-cfg b{display:block;font-weight:600;font-size:14px}

.linha-cfg small{display:block;color:var(--fg-3);font-size:12.5px;margin-top:2px}

.tarefa{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 12px;border-radius:14px;background:var(--surf);border:1px solid var(--line);margin-bottom:8px;transition:transform var(--dur-4) var(--spring-soft),opacity var(--dur-3)}

.tarefa .chk{width:22px;height:22px;border-radius:50%;border:1.6px solid var(--line-2);background:transparent;cursor:pointer;display:grid;place-items:center;color:#fff;transition:background var(--dur-2),border-color var(--dur-2),transform var(--dur-4) var(--spring-pop)}

.tarefa .chk svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .3s var(--ease) .05s}

.tarefa.feita .chk{background:var(--acento-btn);border-color:var(--acento-btn);transform:scale(1.1)}

.tarefa.feita .chk svg{stroke-dashoffset:0}

.tarefa .tx{min-width:0}

.tarefa .tx b{display:inline-block;font-weight:600;font-size:14px;position:relative}

.tarefa .tx b::after{content:"";position:absolute;left:0;right:0;top:55%;height:1.5px;background:var(--fg-3);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}

.tarefa.feita .tx b::after{transform:scaleX(1)}

.tarefa.feita .tx{color:var(--fg-3)}

.tarefa .tx small{display:block;color:var(--fg-3);font-size:12px}

.tarefa .av{width:30px;height:30px;font-size:11px}

.tarefa.vencida .tx small{color:color-mix(in oklab,var(--ambar) 70%,var(--fg));font-weight:700}

.tarefa.sai{opacity:0;transform:translateY(12px) scale(.98)}

.contato{display:flex;gap:12px;align-items:center;padding:14px;border-radius:16px;background:var(--surf);border:1px solid var(--line);cursor:pointer;text-align:left;transition:transform var(--dur-4) var(--spring-pop),box-shadow var(--dur-2)}

.contato:hover{transform:translateY(-2px);box-shadow:var(--sombra-1)}

.contato b{display:block;font-weight:600;font-size:14px}

.contato small{display:block;color:var(--fg-3);font-size:12px}

.contato .av{width:42px;height:42px}

.arq{border-radius:16px;background:var(--surf);border:1px solid var(--line);overflow:hidden;cursor:pointer;transition:transform var(--dur-4) var(--spring-pop),box-shadow var(--dur-2)}

.arq:hover{transform:translateY(-2px);box-shadow:var(--sombra-1)}

.arq .mini{height:110px;background:var(--bg-2);display:grid;place-items:center;position:relative;overflow:hidden}

.arq .doc{width:64px;height:84px;background:#fff;border-radius:6px;box-shadow:0 2px 8px rgba(16,58,60,.15);padding:10px 9px;display:grid;gap:5px;align-content:start}

.arq .doc i{display:block;height:4px;border-radius:2px;background:#CFD6D4}

.arq .doc i:first-child{width:60%;background:var(--petroleo);height:5px}

.arq .foto{width:100%;height:100%;background:linear-gradient(135deg,color-mix(in oklab,var(--coral) 45%,var(--bg-2)),color-mix(in oklab,var(--lavanda) 45%,var(--bg-2)))}

.arq .aud{display:flex;gap:2px;align-items:center;height:36px}

.arq .aud i{width:3px;border-radius:2px;background:color-mix(in oklab,var(--acento) 55%,var(--fg-3));height:var(--h)}

.arq .info{padding:10px 12px}

.arq .info b{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.arq .info small{display:block;color:var(--fg-3);font-size:11.5px}

.arq .tipo{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:.1em;padding:2px 6px;border-radius:6px;background:var(--surf);color:var(--fg-2)}

.lendo{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in oklab,var(--surf) 55%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

.ondas{position:relative;width:44px;height:44px}

.ondas i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--acento);animation:escuta 2.4s var(--ease) infinite;opacity:0}

.ondas i:nth-child(2){animation-delay:.6s}
.ondas i:nth-child(3){animation-delay:1.2s}

.ondas b{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--rosa)}

@keyframes escuta{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.2);opacity:0}}

.kpi{padding:16px 18px;border-radius:18px;background:var(--surf);border:1px solid var(--line)}

.kpi .rotulo{margin-bottom:8px;display:block}

.kpi b{display:block;font-family:var(--font-head);font-weight:300;font-size:40px;line-height:1;letter-spacing:-.01em}

.kpi b small{font-family:var(--font-body);font-size:14px;color:var(--fg-3);margin-left:4px;font-weight:500}

.kpi .delta{font-size:12px;margin-top:8px;display:flex;gap:6px;align-items:center;color:var(--fg-2)}

.kpi .delta i{width:8px;height:8px;border-radius:50%}

.graf{position:relative}

.graf svg{width:100%;height:auto;display:block;overflow:visible}

.graf .grid line{stroke:var(--line);stroke-width:1}

.graf .eixo text{fill:var(--fg-3);font-size:11px;font-family:var(--font-body)}

.graf .area{fill:url(#gradArea)}

.graf .linha{fill:none;stroke:var(--acento);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}

.graf .ponto{fill:var(--surf);stroke:var(--acento);stroke-width:2;r:4;opacity:0;transition:opacity var(--dur-2)}

.graf .mira{stroke:var(--fg-3);stroke-dasharray:3 3;opacity:0}

.graf .tip{position:absolute;pointer-events:none;font-size:12px;padding:6px 9px;border-radius:10px;background:var(--petroleo);color:#EAF1EF;opacity:0;transform:translate(-50%,-120%);transition:opacity var(--dur-2);white-space:nowrap}

.graf .tip b{display:block;font-size:13px}

.barras{display:grid;gap:10px;margin-top:6px}

.barra{display:grid;grid-template-columns:110px 1fr 42px;gap:10px;align-items:center;font-size:13px}

.barra i{display:block;height:14px;border-radius:0 4px 4px 0;background:var(--acento);width:var(--w);transform-origin:left;animation:cresce .9s var(--spring-soft) both}

.barra b{text-align:right;font-weight:600}

@keyframes cresce{from{transform:scaleX(0)}}

.graf .linha.desenha{stroke-dasharray:1200;stroke-dashoffset:1200;animation:desenha 1.4s var(--ease) forwards}

@keyframes desenha{to{stroke-dashoffset:0}}

.em{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:12px 10px;border-radius:14px;cursor:pointer;border:0;background:transparent;text-align:left;width:100%}

.em[aria-selected="true"]{background:var(--surf);box-shadow:var(--sombra-1)}

.em .av{width:36px;height:36px;font-size:11px;background:color-mix(in oklab,var(--dom) 18%,var(--surf));color:color-mix(in oklab,var(--dom) 75%,var(--fg))}

.em b{display:block;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.em .as{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.em small{display:block;color:var(--fg-3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.em .h{font-size:11.5px;color:var(--fg-3)}

.em .nl{width:8px;height:8px;border-radius:50%;background:var(--acento);margin-top:6px;justify-self:end}

.leitor{padding:26px 30px 90px;overflow:auto}

.leitor h2{font-family:var(--font-head);font-weight:400;font-size:26px;margin:0 0 6px}

.leitor .de{display:flex;gap:12px;align-items:center;margin-bottom:18px;font-size:13px;color:var(--fg-2)}

.leitor .corpo{max-width:64ch;font-size:14.5px;line-height:1.6}

.leitor .anexos{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

.anexo{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:12px;background:var(--surf-2);border:1px solid var(--line);font-size:12.5px;font-weight:600}

.leitor .responder{margin-top:20px;display:flex;gap:8px}

.cfg-menu{display:grid;gap:2px;position:sticky;top:0}

.cfg-menu button{display:flex;gap:10px;align-items:center;border:0;background:transparent;padding:9px 12px;border-radius:12px;font-size:13.5px;font-weight:600;color:var(--fg-2);cursor:pointer;text-align:left}

.cfg-menu button[aria-current="true"]{background:var(--surf);box-shadow:var(--sombra-1);color:var(--fg)}

.cfg-cont{display:grid;gap:14px}

.medidor{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}

.medidor svg{width:120px;height:66px;overflow:visible}

.medidor .tr{fill:none;stroke:var(--line-2);stroke-width:10;stroke-linecap:round}

.medidor .va{fill:none;stroke:var(--acento);stroke-width:10;stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:calc(157 - 157*var(--v));transition:stroke-dashoffset 1.2s var(--ease)}

.medidor b{font-family:var(--font-head);font-weight:300;font-size:34px;line-height:1}

.equipe .pessoa{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}

.equipe .pessoa:last-child{border:0}

.equipe .pessoa b{display:block;font-weight:600;font-size:14px}

.equipe .pessoa small{color:var(--fg-3);font-size:12px}

.equipe .pessoa .chip{margin-left:auto}

.faixa.on{height:40px}

.faixa.grave{background:color-mix(in oklab,var(--vinho) 18%,var(--surf));color:color-mix(in oklab,var(--vinho) 70%,var(--fg))}

.faixa button{margin-left:auto}

@keyframes respira-selo{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

@keyframes treme{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

@keyframes ganha-cor{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

@keyframes surge{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

@keyframes selo-cresce{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1.06)}}

@keyframes some{to{opacity:0;transform:translateY(8px)}}

@keyframes lente{0%{width:var(--d);height:var(--d);opacity:1}100%{width:calc(var(--r)*2.1);height:calc(var(--r)*2.1);opacity:0}}

@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}

@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

@media (prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms!important;transition-duration:.01ms!important}::view-transition-group(*){animation:none!important}}

/* Convite e gestão de acesso (dialog.convite, .papeis, .perms, .equipe .pessoa) */
/* equipe e convites */
[hidden]{display:none!important}
.equipe .pessoa{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 8px;margin:0 -8px;border-bottom:1px solid var(--line);border-radius:12px;transition:background var(--dur-2) var(--ease)}
.equipe .pessoa.editavel{cursor:pointer}
.equipe .pessoa.editavel:hover{background:color-mix(in oklab,var(--acento) 6%,transparent)}
.equipe .pessoa:last-of-type{border-bottom:0}
.equipe .pessoa b{display:block;font-weight:600;font-size:14px}
.equipe .pessoa small{display:block;color:var(--fg-3);font-size:12px}
.equipe .pessoa .dir{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.equipe .pessoa.nova{animation:entra var(--dur-4) var(--spring-soft) both}
.equipe .sec{display:flex;justify-content:space-between;align-items:center;margin:18px 0 4px}
.equipe .topo-eq{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.equipe .topo-eq h3{margin:0}
.btn.mini{padding:4px 10px;font-size:12px}
.btn.perigo-txt{color:var(--color-danger);border-color:transparent;background:transparent;box-shadow:none}
dialog.convite{border:0;padding:0;background:transparent;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);margin:auto;overflow:visible;color:var(--fg)}
dialog.convite::backdrop{background:rgba(12,21,22,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog.convite[open]{animation:paleta-in var(--dur-4) var(--spring-soft)}
dialog.convite.fecha{animation:convite-sai var(--dur-2) var(--ease) forwards}
@keyframes convite-sai{to{opacity:0;transform:translateY(8px) scale(.98)}}
.convite .caixa{border-radius:var(--r-xl);max-height:calc(100vh - 24px);display:flex;flex-direction:column;overflow:hidden}
.convite .cab{display:flex;gap:14px;align-items:flex-start;padding:22px 22px 12px}
.convite .cab .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--acento-soft);color:var(--acento-ink);flex:none}
.convite .cab h3{font-family:var(--font-head);font-weight:400;font-size:24px;margin:0;line-height:1.15}
.convite .cab p{margin:2px 0 0;color:var(--fg-3);font-size:13px}
.convite .cab .fechar{margin-left:auto}
.convite .corpo{padding:6px 22px 8px;overflow:auto;display:grid;gap:14px}
.convite .par{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.convite .par{grid-template-columns:1fr}}
.convite .campo{margin:0}
.convite .campo .ajuda{font-size:12px;color:var(--fg-3)}
.convite .campo.erro input{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-danger) 18%,transparent)}
.convite .campo.erro .ajuda{color:var(--color-danger)}
.papeis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.papel{text-align:left;border:1px solid var(--line);background:var(--surf);border-radius:14px;padding:10px 12px;cursor:pointer;display:grid;gap:2px;transition:border-color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-4) var(--spring-pop)}
.papel b{font-size:13.5px;font-weight:700}
.papel small{font-size:12px;color:var(--fg-3);line-height:1.35}
.papel[aria-checked="true"]{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-soft)}
.papel:active{transform:scale(.98)}
.perms{display:flex;flex-wrap:wrap;gap:6px}
.perm{border:1px solid var(--line);background:var(--surf);border-radius:999px;padding:6px 11px;font-size:12.5px;font-weight:600;color:var(--fg-2);cursor:pointer;display:inline-flex;gap:6px;align-items:center;transition:background var(--dur-2),color var(--dur-2),border-color var(--dur-2)}
.perm svg{width:0;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .25s var(--ease),width var(--dur-3) var(--spring-soft);margin-left:-2px;flex:none}
.perm:not([aria-pressed="true"]) svg{margin-left:-6px}
.perm[aria-pressed="true"]{background:var(--acento-soft);border-color:transparent;color:var(--acento-ink)}
.perm[aria-pressed="true"] svg{stroke-dashoffset:0;width:13px}
.previa-msg{border-radius:16px 16px 16px 6px;background:var(--surf-2);border:1px solid var(--line);padding:10px 12px;font-size:13px;line-height:1.5;white-space:pre-wrap;min-height:84px;outline:none}
.previa-msg:focus{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-soft)}
.convite .rodape{display:flex;gap:8px;align-items:center;padding:14px 22px 20px;border-top:1px solid var(--line)}
.convite .rodape .nota{font-size:12px;color:var(--fg-3);margin-right:auto;flex:1;min-width:0;line-height:1.35}
.convite .rodape .btn{white-space:nowrap;flex:none}
.btn .giro{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:gira .7s linear infinite;display:none}
.btn.carregando .giro{display:inline-block}
.btn.carregando .rot{opacity:.85}
.btn.ok{background:var(--color-success);border-color:transparent;color:#fff}
@media (max-width:560px){.convite .rodape{flex-wrap:wrap}.convite .rodape .nota{flex:1 1 100%}.convite .rodape .btn.primario{margin-left:auto}}
@media (max-width:640px){
  .equipe .pessoa{grid-template-columns:auto 1fr}
  .equipe .pessoa .dir{grid-column:1/-1;justify-content:flex-start;padding-left:48px}
  .equipe .pessoa:not(:has(.btn)){grid-template-columns:auto 1fr auto}
  .equipe .pessoa:not(:has(.btn)) .dir{grid-column:auto;padding-left:0;justify-content:flex-end}
  .equipe .topo-eq .btn{white-space:nowrap}
  .cfg-menu{display:flex;overflow-x:auto;gap:4px;position:static;margin:0 -4px;padding:2px 4px 6px;scrollbar-width:none}
  .cfg-menu button{white-space:nowrap;flex:none;padding:8px 12px}
}



/* Notificações: sino, central, aviso ao vivo, prévias e preferências */
/* ===== notificações ===== */
.sino{position:relative;width:44px;height:44px;border:0;background:transparent;border-radius:14px;display:grid;place-items:center;cursor:pointer;color:var(--fg-2);transition:background var(--dur-2),color var(--dur-2)}
.sino:hover{background:color-mix(in oklab,var(--surf) 60%,transparent);color:var(--fg)}
.sino[aria-expanded="true"]{background:var(--surf);color:var(--acento-ink);box-shadow:var(--sombra-1),inset 0 1px 0 var(--rim)}
.sino .n{position:absolute;top:5px;right:5px;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--st-urg);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center}
.sino .n[hidden]{display:none}
.sino.toca svg{animation:balanca .9s var(--spring-pop)}
@keyframes balanca{0%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-13deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}100%{transform:rotate(0)}}
.sino svg{transform-origin:50% 10%}
.sino .lua{display:none}.np-on .sino .lua{display:block}.np-on .sino .bell{display:none}
.np-on .sino::after{content:"";position:absolute;right:9px;bottom:9px;width:8px;height:8px;border-radius:50%;background:var(--lavanda);box-shadow:0 0 0 2px var(--bg)}

.ncentro{position:fixed;left:80px;bottom:16px;z-index:47;width:min(400px,calc(100vw - 96px));max-height:min(620px,calc(100vh - 32px));border-radius:var(--r-xl);display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom left;transform:scale(.7) translateY(10px);opacity:0;pointer-events:none;transition:transform var(--dur-4) var(--spring-soft),opacity var(--dur-2) var(--ease)}
.ncentro.aberto{transform:none;opacity:1;pointer-events:auto}
.ncentro .nc-cab{display:flex;align-items:center;gap:10px;padding:16px 16px 10px}
.ncentro .nc-cab h3{font-family:var(--font-head);font-weight:400;font-size:24px;margin:0;flex:1}
.ncentro .nc-filtros{padding:0 16px 10px;display:flex;gap:8px;align-items:center}
.ncentro .nc-filtros .seg{flex:1}
.ncentro .nc-lista{overflow:auto;padding:0 8px 8px;scrollbar-width:thin;flex:1}
.ncentro .nc-grupo{padding:12px 10px 4px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.nitem{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:10px 10px;border-radius:16px;cursor:pointer;transition:background var(--dur-2),transform var(--dur-4) var(--spring-soft),opacity var(--dur-3),max-height var(--dur-3) var(--ease),padding var(--dur-3);max-height:140px}
.nitem:hover{background:color-mix(in oklab,var(--surf) 70%,transparent)}
.nitem .nic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:color-mix(in oklab,var(--nc) 16%,var(--surf));color:color-mix(in oklab,var(--nc) 80%,var(--fg))}
.nitem .nic svg{width:17px;height:17px}
.nitem .ntx{min-width:0}
.nitem .ntx b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.nitem .ntx span{display:block;font-size:12.5px;color:var(--fg-2);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nitem .nlado{display:grid;justify-items:end;gap:6px;font-size:11px;color:var(--fg-3);white-space:nowrap}
.nitem .nponto{width:8px;height:8px;border-radius:50%;background:var(--acento)}
.nitem.lida .nponto{visibility:hidden}
.nitem.lida .ntx b{font-weight:500;color:var(--fg-2)}
.nitem .nx{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;border:0;background:var(--surf);box-shadow:var(--sombra-1);display:grid;place-items:center;cursor:pointer;opacity:0;transform:scale(.8);transition:opacity var(--dur-2),transform var(--dur-3) var(--spring-pop);color:var(--fg-2)}
.nitem:hover .nx,.nitem:focus-within .nx{opacity:1;transform:none}
.nitem .nx svg{width:13px;height:13px}
.nitem.sai{opacity:0;transform:translateX(40px);max-height:0;padding-block:0}
.nitem.entra{animation:entra var(--dur-4) var(--spring-soft) both}
.nitem.urg::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--st-urg)}
.ncentro .nc-vazio{padding:40px 20px;text-align:center;color:var(--fg-3);font-size:13px;display:grid;gap:8px;justify-items:center}
.ncentro .nc-vazio svg{width:34px;height:34px;color:var(--acento);opacity:.7}
.ncentro .nc-rod{border-top:1px solid var(--line);padding:10px 16px 14px;display:grid;gap:8px}
.ncentro .nc-rod .linha-np{display:flex;align-items:center;gap:10px}
.ncentro .nc-rod .linha-np b{display:block;font-size:13.5px}
.ncentro .nc-rod .linha-np small{display:block;font-size:12px;color:var(--fg-3)}
.ncentro .nc-rod .linha-np>div{flex:1;min-width:0}
.ncentro .np-op{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:900px){.ncentro{left:8px;right:8px;width:auto;bottom:84px;max-height:calc(100vh - 110px);transform-origin:bottom center}}

/* aviso ao vivo (heads-up) */
.aviso{pointer-events:auto;width:min(380px,calc(100vw - 32px));border-radius:20px;padding:12px 12px 12px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;position:relative;overflow:hidden;animation:aviso-in var(--dur-4) var(--spring-soft) both;cursor:pointer}
.aviso.sai{animation:aviso-out var(--dur-3) var(--ease) forwards}
@keyframes aviso-in{from{opacity:0;transform:translateY(-14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes aviso-out{to{opacity:0;transform:translateX(30px) scale(.96)}}
.aviso .av{width:40px;height:40px;font-size:12px}
.aviso .atx{min-width:0}
.aviso .atx .de{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--fg-3);margin-bottom:2px}
.aviso .atx .de img{width:14px;height:14px;border-radius:50%}
.aviso .atx b{display:block;font-size:14px;font-weight:600}
.aviso .atx span{display:block;font-size:13px;color:var(--fg-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4}
.aviso .aacoes{grid-column:2/-1;display:flex;gap:6px;margin-top:4px}
.aviso .ax{width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:var(--fg-3);display:grid;place-items:center;cursor:pointer}
.aviso .ax svg{width:14px;height:14px}
.aviso .prog{position:absolute;left:0;bottom:0;height:2px;background:var(--acento);transform-origin:left;animation:prog var(--t,6s) linear forwards}
.aviso:hover .prog{animation-play-state:paused}
@keyframes prog{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.aviso.urg{box-shadow:inset 3px 0 0 var(--st-urg),inset 0 1px 0 var(--rim),0 0 0 1px var(--line),var(--sombra-2)}
.aviso.urg .prog{display:none}
.aviso.urg .av::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--st-urg);animation:anel 1.8s var(--ease) infinite}

/* prévias de notificação do sistema (Configurações) */
.previas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:4px}
.prev-sis{border-radius:18px;padding:18px;position:relative;overflow:hidden;min-height:180px;display:grid;align-content:end}
.prev-sis .fundo-w{position:absolute;inset:0;background:linear-gradient(140deg,#1b3a4b,#2e5d6b 40%,#6b8f9c);}
.prev-sis .fundo-c{position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,#9D9BC4,transparent 55%),radial-gradient(circle at 80% 70%,#D97A68,transparent 55%),#1F3F42}
.prev-sis .rot{position:absolute;top:12px;left:14px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.prev-sis .relogio{position:absolute;top:30px;left:0;right:0;text-align:center;font-family:var(--font-body);font-weight:300;font-size:44px;color:rgba(255,255,255,.92);letter-spacing:-.02em}
.toast-w{position:relative;border-radius:10px;background:rgba(32,38,40,.82);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);color:#f2f4f3;padding:12px 14px;font-size:12.5px;box-shadow:0 12px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.08)}
.toast-w .tw-cab{display:flex;align-items:center;gap:8px;font-size:11.5px;color:rgba(255,255,255,.75);margin-bottom:8px}
.toast-w .tw-cab img{width:16px;height:16px;border-radius:50%}
.toast-w .tw-corpo{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.toast-w .tw-corpo .av{width:40px;height:40px;font-size:12px;background:#2e4d50;color:#bfe3df}
.toast-w b{display:block;font-size:13.5px;font-weight:600;color:#fff}
.toast-w .tw-acoes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.toast-w .tw-acoes span{display:block;text-align:center;padding:6px;border-radius:6px;background:rgba(255,255,255,.1);font-weight:600}
.toast-w .tw-acoes span:first-child{background:#12615E}
.cartao-c{position:relative;border-radius:20px;background:rgba(245,245,240,.62);-webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);color:#1c2b2c;padding:11px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.cartao-c img{width:34px;height:34px;border-radius:9px;background:#fff}
.cartao-c b{display:block;font-size:13px}
.cartao-c span{display:block;font-size:12.5px;color:#3d4d4e}
.cartao-c small{align-self:start;font-size:11px;color:#4f5f60}
.perm-card{display:flex;gap:14px;align-items:center;padding:14px;border-radius:16px;background:color-mix(in oklab,var(--acento) 8%,var(--surf));border:1px solid color-mix(in oklab,var(--acento) 20%,var(--line))}
.perm-card.ok{background:color-mix(in oklab,var(--color-success) 8%,var(--surf));border-color:color-mix(in oklab,var(--color-success) 22%,var(--line))}
.perm-card.negado{background:color-mix(in oklab,var(--color-danger) 7%,var(--surf));border-color:color-mix(in oklab,var(--color-danger) 22%,var(--line))}
.perm-card .pic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surf);color:var(--acento-ink);flex:none}
.perm-card>div{flex:1;min-width:0}
.perm-card b{display:block;font-size:14px}
.perm-card small{display:block;font-size:12.5px;color:var(--fg-3)}
.tipos-n .linha-cfg .ctrl{display:flex;gap:8px;align-items:center}
.tipos-n select{border:1px solid var(--line);border-radius:10px;padding:6px 8px;font:inherit;font-size:12.5px;background:var(--surf);color:var(--fg)}
.horario{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.horario input{border:1px solid var(--line);border-radius:10px;padding:6px 8px;font:inherit;background:var(--surf);color:var(--fg)}



/* estado de entrega: relógio → 1 check (enviada) → 2 checks (entregue) → 2 checks no acento (lida)
   dois traços paralelos com 4,5 unidades de distância: nunca se cruzam nem se tocam */
.msg .rod{gap:4px}
.ck{width:20px;height:12px;flex:none;fill:none;stroke:var(--fg-3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:stroke var(--dur-3) var(--ease)}
.ck .c1,.ck .c2{stroke-dasharray:16;stroke-dashoffset:0;transition:stroke-dashoffset .35s var(--ease)}
.ck .rel{display:none}
.ck-relogio .c1,.ck-relogio .c2{display:none}.ck-relogio .rel{display:inline}
.ck-enviado .c2{stroke-dashoffset:16}
.ck-lida{stroke:var(--acento-ink)}
:root[data-modo="escuro"] .ck-lida{stroke:var(--acento)}
.msg .rod .ck-relogio .rel{animation:gira 2s linear infinite;transform-origin:9px 6px}
/* c2 começa depois do fim de c1: a perna curta do segundo check para 1,2px antes do primeiro traço */

/* ===== movimento dos balões ===== */
.msg{transition:transform var(--dur-4) var(--spring-soft),box-shadow var(--dur-3) var(--ease),border-color var(--dur-3) var(--ease)}
.msg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 65%);opacity:0;transition:opacity var(--dur-3) var(--ease);mix-blend-mode:soft-light}
:root[data-modo="escuro"] .msg::after{background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 65%);mix-blend-mode:screen}
@media (hover:hover){
  .msg:hover{transform:translateY(-1px) scale(1.012);box-shadow:0 10px 24px -14px rgba(16,58,60,.35),0 1px 2px rgba(16,58,60,.06)}
  .msg.deles:hover{transform-origin:left center}.msg.minha:hover,.msg.ia:hover{transform-origin:right center}
  .msg:hover::after{opacity:1}
  .msg.deles:hover{border-color:var(--line-2)}
  .msg.minha:hover{border-color:color-mix(in oklab,var(--acento) 38%,var(--surf))}
  .msg.ia:hover{border-color:color-mix(in oklab,var(--st-ia) 45%,var(--surf))}
  .msg:hover .rod{color:var(--fg-2)}
}
/* ações do balão: aparecem ao lado, do lado livre */
.bacoes{position:absolute;top:50%;display:flex;opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease),transform var(--dur-4) var(--spring-soft);z-index:3}
.bacoes .bin{display:flex;gap:2px;padding:3px;border-radius:999px}
.msg.deles .bacoes{left:100%;padding-left:8px;transform:translate(-8px,-50%) scale(.9);transform-origin:left center}
.msg.minha .bacoes,.msg.ia .bacoes{right:100%;padding-right:8px;transform:translate(8px,-50%) scale(.9);transform-origin:right center}
.bacoes button{width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--fg-2);display:grid;place-items:center;cursor:pointer;opacity:0;transform:scale(.6);transition:opacity var(--dur-2) var(--ease),transform var(--dur-4) var(--spring-pop),background var(--dur-2),color var(--dur-2)}
.bacoes button:hover{background:color-mix(in oklab,var(--acento) 14%,transparent);color:var(--acento-ink)}
.bacoes button svg{width:15px;height:15px}
.msg:hover .bacoes,.msg:focus-within .bacoes,.msg.segura .bacoes{opacity:1;pointer-events:auto;transform:translate(0,-50%) scale(1)}
.msg:hover .bacoes button,.msg:focus-within .bacoes button,.msg.segura .bacoes button{opacity:1;transform:none}
.bacoes .bin button:nth-child(2){transition-delay:0s,35ms,0s,0s}.bacoes .bin button:nth-child(3){transition-delay:0s,70ms,0s,0s}.bacoes .bin button:nth-child(4){transition-delay:0s,105ms,0s,0s}
/* reações */
.reacoes-pop{position:absolute;bottom:calc(100% + 6px);display:flex;gap:2px;padding:5px 6px;border-radius:999px;z-index:4;animation:pop-in var(--dur-4) var(--spring-pop) both}
.msg.deles .reacoes-pop{left:0;transform-origin:bottom left}.msg.minha .reacoes-pop,.msg.ia .reacoes-pop{right:0;transform-origin:bottom right}
@keyframes pop-in{from{opacity:0;transform:translateY(6px) scale(.5)}to{opacity:1;transform:none}}
.reacoes-pop button{width:34px;height:34px;border:0;background:transparent;border-radius:50%;font-size:19px;line-height:1;cursor:pointer;transition:transform var(--dur-4) var(--spring-pop)}
.reacoes-pop button:hover{transform:scale(1.28) translateY(-3px)}
.reacoes-pop button:nth-child(n){animation:pop-in var(--dur-4) var(--spring-pop) both;animation-delay:calc(var(--k)*28ms)}
.reacao{position:absolute;bottom:-12px;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;font-size:13px;line-height:18px;background:var(--surf);border:1px solid var(--line);box-shadow:var(--sombra-1);cursor:pointer;animation:reacao-in .6s var(--spring-pop) both;z-index:2}
.msg.deles .reacao{left:12px}.msg.minha .reacao,.msg.ia .reacao{right:12px}
.reacao small{font-size:10.5px;color:var(--fg-3);font-weight:700}
@keyframes reacao-in{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.25)}100%{transform:scale(1)}}
.msg.tem-reacao{margin-bottom:12px}
.faisca{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;background:var(--c);animation:faisca .7s var(--ease) forwards;z-index:5}
@keyframes faisca{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
/* resposta com citação */
.citacao{border-left:3px solid var(--acento);background:color-mix(in oklab,var(--acento) 8%,transparent);border-radius:8px;padding:5px 9px;margin-bottom:6px;font-size:12.5px;color:var(--fg-2)}
.citacao b{display:block;font-size:11px;color:var(--acento-ink);font-weight:700}
.citacao span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px}
.resp-chip{position:absolute;left:16px;right:16px;bottom:74px;z-index:4;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;border-radius:14px;animation:sobe var(--dur-4) var(--spring-soft) both}
.resp-chip .citacao{flex:1;margin:0;min-width:0}
.resp-chip[hidden]{display:none}
/* entrada dos balões */
.msg.chega{animation:chega var(--dur-4) var(--spring-soft) both}
.msg.deles.chega{transform-origin:bottom left}.msg.minha.chega,.msg.ia.chega{transform-origin:bottom right}
@keyframes chega{from{opacity:0;transform:translateY(10px) scale(.7);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.msg.cascata,.dia.cascata{animation:cascata .42s var(--ease) both;animation-delay:calc(var(--i)*32ms)}
@keyframes cascata{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* sequência do mesmo remetente: um só "bico", espaço menor */
.msg.g-cont{margin-top:calc(-4px*var(--dens))}
.msg.deles.g-seg{border-bottom-left-radius:18px}.msg.deles.g-cont{border-top-left-radius:8px}
.msg.minha.g-seg,.msg.ia.g-seg{border-bottom-right-radius:18px}.msg.minha.g-cont,.msg.ia.g-cont{border-top-right-radius:8px}
/* paciente digitando */
.digitando.deles{align-self:flex-start;background:var(--surf-2);border-color:var(--line)}
.digitando.deles i{background:var(--fg-3)}
.nova-pill{position:absolute;left:50%;bottom:132px;z-index:4;transform:translate(-50%,20px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--acento-ink);cursor:pointer;border:0;transition:transform var(--dur-4) var(--spring-pop),opacity var(--dur-2)}
.nova-pill.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.chat:has(#sugestao:not([hidden])) .msgs,.chat:has(#resp-chip:not([hidden])) .msgs{padding-bottom:160px}
@media (prefers-reduced-motion:reduce){.msg:hover{transform:none}.msg.cascata,.msg.chega{animation:none}}



/* ===== anexos e figurinhas ===== */
.composer .btn.icone.ghost[aria-expanded="true"]{background:var(--acento-soft);color:var(--acento-ink)}
.composer #bt-anexo svg{transition:transform var(--dur-4) var(--spring-pop)}
.composer #bt-anexo[aria-expanded="true"] svg{transform:rotate(45deg)}
.menu-anexo{position:absolute;left:16px;bottom:78px;z-index:6;border-radius:22px;padding:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:min(330px,calc(100% - 32px));transform-origin:bottom left;transform:scale(.6) translateY(10px);opacity:0;pointer-events:none;transition:transform var(--dur-4) var(--spring-pop),opacity var(--dur-2) var(--ease)}
.menu-anexo.aberto{transform:none;opacity:1;pointer-events:auto}
.menu-anexo button{border:0;background:transparent;border-radius:16px;padding:12px 6px 10px;display:grid;justify-items:center;gap:7px;cursor:pointer;font-size:12px;font-weight:600;color:var(--fg-2);transition:background var(--dur-2),transform var(--dur-4) var(--spring-pop);opacity:0;transform:translateY(8px) scale(.9)}
.menu-anexo.aberto button{opacity:1;transform:none;transition-delay:calc(var(--k)*30ms)}
.menu-anexo button:hover{background:color-mix(in oklab,var(--surf) 70%,transparent)}
.menu-anexo button:active{transform:scale(.94)}
.menu-anexo .ic{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:var(--ca);color:#fff;box-shadow:0 6px 14px -8px var(--ca)}
.menu-anexo .ic svg{width:20px;height:20px}
.prev-anexo{position:absolute;left:16px;right:16px;bottom:74px;z-index:5;border-radius:20px;padding:12px;display:grid;gap:10px;animation:sobe var(--dur-4) var(--spring-soft) both}
.prev-anexo[hidden]{display:none}
.prev-anexo .pa-cab{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.prev-anexo .pa-cab span{flex:1}
.prev-anexo .pa-itens{display:flex;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:thin}
.pa-item{position:relative;flex:none;width:96px;height:96px;border-radius:14px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;animation:pop-in var(--dur-4) var(--spring-pop) both}
.pa-item img,.pa-item video{width:100%;height:100%;object-fit:cover}
.pa-item .doc-ic{display:grid;justify-items:center;gap:4px;padding:8px;text-align:center;font-size:10.5px;color:var(--fg-2);line-height:1.25;word-break:break-word}
.pa-item .doc-ic b{font-size:10px;letter-spacing:.08em;padding:2px 6px;border-radius:6px;background:var(--cd,var(--acento));color:#fff}
.pa-item .px{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(12,21,22,.55);color:#fff;display:grid;place-items:center;cursor:pointer}
.pa-item .px svg{width:12px;height:12px}
.pa-item.mais{border-style:dashed;cursor:pointer;color:var(--fg-3);font-size:12px;font-weight:600}
.prev-anexo .pa-rod{display:flex;gap:8px;align-items:center}
.prev-anexo .pa-rod input{flex:1;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font:inherit;font-size:14px;background:var(--surf);color:var(--fg);min-width:0;outline:none}
.prev-anexo .pa-rod input:focus{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-soft)}
.enquete-ed{display:grid;gap:6px}
.enquete-ed input{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:13.5px;background:var(--surf);color:var(--fg)}
.soltar{position:absolute;inset:8px;z-index:9;border-radius:var(--r-xl);display:grid;place-items:center;border:2px dashed color-mix(in oklab,var(--acento) 55%,transparent);opacity:0;pointer-events:none;transition:opacity var(--dur-2)}
.soltar.on{opacity:1}
.soltar div{display:grid;justify-items:center;gap:10px;font-weight:700;color:var(--acento-ink)}
/* mídia no balão */
.msg.tem-midia{padding:4px 4px 6px;max-width:min(310px,82%)}
.msg.tem-midia .doc-card{min-width:0}
.msg.tem-midia .legenda{padding:6px 8px 0}
.msg.tem-midia .rod{padding:0 8px}
.midia{position:relative;border-radius:14px;overflow:hidden;width:300px;max-width:100%;background:var(--bg-2)}
.midia img,.midia video{display:block;width:100%;max-height:320px;object-fit:cover;transition:filter .6s var(--ease),transform var(--dur-4) var(--spring-soft)}
.midia.subindo img,.midia.subindo video{filter:blur(6px) saturate(.7);transform:scale(1.04)}
.midia .anel-sobe{position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,21,22,.18);opacity:0;transition:opacity var(--dur-3)}
.midia.subindo .anel-sobe{opacity:1}
.anel-sobe svg{width:46px;height:46px;transform:rotate(-90deg)}
.anel-sobe circle{fill:none;stroke-width:3.5}
.anel-sobe .tr{stroke:rgba(255,255,255,.35)}
.anel-sobe .va{stroke:#fff;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:113}
.midia.subindo .anel-sobe .va{animation:sobe-anel 1.3s var(--ease) forwards}
@keyframes sobe-anel{to{stroke-dashoffset:0}}
.doc-card{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:color-mix(in oklab,var(--surf) 65%,transparent);border:1px solid var(--line);min-width:230px;position:relative;overflow:hidden}
.doc-card .dc-ic{width:40px;height:48px;border-radius:7px;background:var(--cd);color:#fff;display:grid;place-items:end center;padding-bottom:6px;font-size:9.5px;font-weight:800;letter-spacing:.06em;position:relative;flex:none;clip-path:polygon(0 0,70% 0,100% 22%,100% 100%,0 100%)}
.doc-card .dc-ic::after{content:"";position:absolute;right:0;top:0;width:30%;height:22%;background:rgba(255,255,255,.35)}
.doc-card b{display:block;font-size:13.5px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-card small{display:block;font-size:12px;color:var(--fg-3)}
.doc-card .barra-sobe{position:absolute;left:0;bottom:0;height:3px;background:var(--acento);width:0}
.doc-card.subindo .barra-sobe{animation:barra-sobe 1.3s var(--ease) forwards}
@keyframes barra-sobe{to{width:100%}}
.loc-card{width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.loc-card .mapa{height:120px;position:relative;background:color-mix(in oklab,var(--teal) 10%,var(--bg))}
.loc-card .mapa svg{position:absolute;inset:0;width:100%;height:100%}
.loc-card .pino{position:absolute;left:50%;top:48%;width:16px;height:16px;margin:-8px;border-radius:50%;background:var(--rosa);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.loc-card .pino::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid var(--rosa);animation:escuta 2.4s var(--ease) infinite}
.loc-card .li{padding:8px 10px;background:var(--surf);font-size:12.5px}
.loc-card .li b{display:block;font-size:13px}
.contato-card{display:flex;gap:10px;align-items:center;padding:6px 4px 10px;min-width:220px;border-bottom:1px solid var(--line);margin-bottom:6px}
.contato-card b{display:block;font-size:13.5px}.contato-card small{display:block;font-size:12px;color:var(--fg-3)}
.enquete{min-width:250px;display:grid;gap:8px}
.enquete .eq-p{font-weight:600;display:flex;gap:6px;align-items:center}
.enquete .op{position:relative;border:1px solid var(--line);border-radius:10px;padding:7px 10px;overflow:hidden;display:flex;justify-content:space-between;font-size:13px;background:var(--surf)}
.enquete .op i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:color-mix(in oklab,var(--acento) 16%,transparent);transition:width .9s var(--spring-soft);z-index:0}
.enquete .op span,.enquete .op b{position:relative;z-index:1}
.enquete small{color:var(--fg-3);font-size:11.5px}
/* figurinhas */
.painel-fig{position:absolute;left:16px;bottom:78px;z-index:6;width:min(380px,calc(100% - 32px));height:min(360px,calc(100% - 170px));border-radius:22px;display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom left;transform:scale(.7) translateY(12px);opacity:0;pointer-events:none;transition:transform var(--dur-4) var(--spring-soft),opacity var(--dur-2) var(--ease)}
.painel-fig.aberto{transform:none;opacity:1;pointer-events:auto}
.painel-fig .pf-cab{display:flex;gap:8px;align-items:center;padding:10px 10px 6px}
.painel-fig .pf-cab .seg{flex:1}
.painel-fig .pf-busca{margin:0 10px 6px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--surf);color:var(--fg-3)}
.painel-fig .pf-busca input{border:0;background:transparent;font:inherit;font-size:13px;color:var(--fg);outline:none;flex:1;min-width:0}
.painel-fig .pf-corpo{flex:1;overflow:auto;padding:4px 10px 12px;scrollbar-width:thin}
.painel-fig .pf-sec{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);padding:8px 2px 4px}
.grade-emoji{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.grade-emoji button{aspect-ratio:1;border:0;background:transparent;border-radius:10px;font-size:22px;line-height:1;cursor:pointer;transition:transform var(--dur-4) var(--spring-pop),background var(--dur-2)}
.grade-emoji button:hover{background:color-mix(in oklab,var(--surf) 70%,transparent);transform:scale(1.22)}
.grade-fig{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.grade-fig button{aspect-ratio:1;border:0;background:transparent;border-radius:14px;cursor:pointer;padding:4px;transition:transform var(--dur-4) var(--spring-pop),background var(--dur-2)}
.grade-fig button:hover{background:color-mix(in oklab,var(--surf) 70%,transparent);transform:scale(1.08) rotate(-3deg)}
.fig{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center}
.fig img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 6px rgba(0,0,0,.18))}
.fig .fig-txt{position:absolute;bottom:4%;left:50%;transform:translateX(-50%) rotate(var(--r,-4deg));white-space:nowrap;font-family:var(--font-head);font-style:italic;font-size:var(--fs,13px);padding:2px 9px 3px;border-radius:999px;background:var(--fb,#103A3C);color:#fff;border:2px solid #fff;box-shadow:0 3px 6px rgba(0,0,0,.18)}
.fig .fig-forma{width:70%;height:70%;filter:drop-shadow(0 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 6px rgba(0,0,0,.18))}
.msg.fig-msg{background:transparent!important;border-color:transparent!important;padding:0;box-shadow:none!important}
.msg.fig-msg::after{display:none}
.msg.fig-msg .fig{width:140px}
.msg.fig-msg .rod{justify-content:flex-end;padding:0 6px}
.msg.fig-msg.chega-fig{animation:fig-in .7s var(--spring-pop) both}
@keyframes fig-in{0%{opacity:0;transform:scale(.3) rotate(-14deg)}55%{opacity:1;transform:scale(1.1) rotate(4deg)}75%{transform:scale(.97,1.03) rotate(-1deg)}100%{transform:none}}
@media (hover:hover){.msg.fig-msg:hover{transform:rotate(-2deg) scale(1.04)}}


}
}