/* ============================================================================
v5-atendimento-popup.css — O POPUP DE ATENDIMENTO EM VIDRO (17/09/2026)
o dono do painel, olhando o Escritório no ar:
· "quando abrir uma pergunta ou reclamação abre um popup glassmorphism
com as infos";
· "melhore o botão de enviar ao mercado livre";
· "esses cards abaixo preciso que aumente a sombra para parecer que estão
flutuando e coloque uma suavidade nele quando passar o mouse".
O QUE ESTA FOLHA FAZ — e por que ela é a última da página:
o painel de resposta era uma GAVETA colada na direita (position:fixed;
right:0; top:0; bottom:0). Três outras folhas mexiam no `top` dela
(v5-app.css, v5-topo.css, v5-hud.css) porque a gaveta tinha de desviar da
barra de cima. Um popup no centro não desvia de nada — por isso a geometria
vem daqui, por último, e com !important onde aquelas folhas ainda mandam.
Tirar o ) ---------------------- */
body.v5-escritorio dialog.atd-painel::backdrop{
background: rgba(8, 24, 30, .58);
-webkit-backdrop-filter: blur(7px) saturate(120%);
backdrop-filter: blur(7px) saturate(120%);
}
/* -- 2. o popup ------------------------------------------------------------
`inset:0` + `margin:auto` centra sem transform — assim a animação de
entrada pode usar transform sem brigar com a centralização. */
body.v5-escritorio dialog.atd-painel{
position: fixed !important;
inset: 0 !important;
margin: auto !important;
width: min(760px, calc(100vw - 32px)) !important;
max-width: none !important;
height: auto !important;
max-height: min(86vh, 860px) !important;
padding: 0;
overflow: visible;
z-index: 400;
display: none;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, .18) !important;
border-radius: 26px !important;
background: rgba(var(--ds-atlantico-2-rgb), .72) !important;
-webkit-backdrop-filter: blur(28px) saturate(170%);
backdrop-filter: blur(28px) saturate(170%);
box-shadow: 0 48px 110px -46px rgba(0, 0, 0, .86),
inset 0 1px 0 rgba(255, 255, 255, .10) !important;
color: var(--ds-neutro-1);
}
body.v5-escritorio dialog.atd-painel[open]{ display: flex; }
/* a gaveta antiga usava .aberto; se um dia o faltar, ainda abre */
body.v5-escritorio dialog.atd-painel.aberto{ display: flex; }
/* entrada e saída: sem salto, e sem movimento para quem pediu menos movimento */
@media (prefers-reduced-motion: no-preference){
body.v5-escritorio dialog.atd-painel{
opacity: 0;
transform: translateY(14px) scale(.985);
transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .3, 1),
display .22s, overlay .22s;
transition-behavior: allow-discrete;
}
body.v5-escritorio dialog.atd-painel[open]{
opacity: 1;
transform: none;
@starting-style{ opacity: 0; transform: translateY(14px) scale(.985); }
}
}
/* -- 3. o cabeçalho -------------------------------------------------------- */
body.v5-escritorio dialog.atd-painel .atd-painel-topo{
padding: 20px 24px 16px !important;
border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
border-radius: 26px 26px 0 0;
background: rgba(255, 255, 255, .04);
}
body.v5-escritorio dialog.atd-painel .atd-painel-topo h2{
font-size: 20px; line-height: 1.3; margin: 10px 0 2px;
}
body.v5-escritorio dialog.atd-painel .atd-painel-topo small{
display: block; font-size: 12px; color: var(--ds-apoio-escuro);
}
body.v5-escritorio dialog.atd-painel .atd-fechar{
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .12);
color: var(--ds-linha-2);
width: 34px; height: 34px; border-radius: 11px; cursor: pointer;
transition: background .16s ease, color .16s ease;
}
body.v5-escritorio dialog.atd-painel .atd-fechar:hover{
background: rgba(255, 255, 255, .14); color: var(--ds-branco);
}
/* -- 4. o corpo que rola --------------------------------------------------- */
body.v5-escritorio dialog.atd-painel .atd-corpo{
padding: 20px 24px 24px !important;
overscroll-behavior: contain;
}
/* a fala do comprador e os fatos ganham superfície de vidro, não de caixa */
body.v5-escritorio dialog.atd-painel .atd-fala,
body.v5-escritorio dialog.atd-painel .atd-escrita,
body.v5-escritorio dialog.atd-painel .atd-opcao,
body.v5-escritorio dialog.atd-painel .atd-original{
background: rgba(255, 255, 255, .055) !important;
border-color: rgba(255, 255, 255, .12) !important;
}
body.v5-escritorio dialog.atd-painel .atd-escrita textarea{
background: rgba(var(--ds-atlantico-rgb), .45);
border-color: rgba(255, 255, 255, .14);
}
/* a nota discreta do rascunho: informação, não alerta.
(O alerta âmbar fica só para o que pede decisão sua.) */
body.v5-escritorio .atd-nota-rascunho{
display: flex; gap: 8px; align-items: flex-start;
margin: 10px 2px 0; font-size: 11.5px; line-height: 1.5;
color: var(--ds-apoio-escuro);
}
body.v5-escritorio .atd-nota-rascunho i{ font-style: normal; color: var(--ds-menta-3); }
/* o corpo rola. A sombra que diz "tem mais coisa embaixo" vem do RODAPÉ,
projetada para cima — e não de uma máscara no corpo, que apagaria as
últimas linhas justamente quando o lojista chegasse nelas. */
/* -- 5. o rodapé ----------------------------------------------------------- */
body.v5-escritorio dialog.atd-painel .atd-pe{
padding: 16px 24px 20px !important;
border-top: 1px solid rgba(255, 255, 255, .10) !important;
border-radius: 0 0 26px 26px;
background: rgba(var(--ds-atlantico-rgb), .45) !important;
box-shadow: 0 -22px 26px -22px rgba(0, 0, 0, .75);
}
/* o interruptor do envio real, em duas linhas */
body.v5-escritorio .atd-real{
align-items: flex-start !important;
gap: 11px !important;
padding: 11px 13px;
border-radius: 13px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .04);
cursor: pointer;
}
body.v5-escritorio .atd-real input{ margin-top: 2px; accent-color: var(--ds-atencao-claro); }
body.v5-escritorio .atd-real-txt b{
display: block; font-size: 12.5px; font-weight: 800; color: var(--ds-linha-2);
}
body.v5-escritorio .atd-real-txt small{
display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45;
color: var(--ds-apoio-escuro);
}
body.v5-escritorio .atd-real.ligado{
border-color: rgba(var(--ds-atencao-claro-rgb, 240,173,78), .45);
background: rgba(var(--ds-atencao-claro-rgb, 240,173,78), .10);
}
body.v5-escritorio .atd-real.ligado .atd-real-txt b{ color: var(--ds-atencao-claro); }
/* -- 6. O BOTÃO DE ENVIAR -------------------------------------------------
Antes: uma barra de cor chapada com uma frase dentro, que mudava de texto
entre teste e real — e no real virava um vermelho que, sobre o vidro, lia
como erro. Agora ele diz DUAS coisas: o que o clique faz (título) e o que
acontece com a loja (linha de baixo). Menta = ensaio; âmbar = publica. */
body.v5-escritorio .atd-enviar{
display: grid !important;
grid-template-columns: 38px minmax(0, 1fr);
gap: 13px;
align-items: center;
text-align: left;
width: 100%;
margin-top: 12px;
padding: 13px 16px !important;
border: 1px solid rgba(var(--ds-atlantico-rgb), .18) !important;
border-radius: 16px !important;
cursor: pointer;
background: linear-gradient(112deg, var(--ds-menta) 0%, var(--ds-menta-hover) 58%, var(--ds-menta-2) 100%) !important;
color: var(--ds-atlantico) !important;
box-shadow: 0 20px 44px -24px rgba(var(--ds-menta-rgb), .75);
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
body.v5-escritorio .atd-enviar:hover{
transform: translateY(-1px);
box-shadow: 0 26px 54px -22px rgba(var(--ds-menta-rgb), .85);
filter: none;
}
body.v5-escritorio .atd-enviar:focus-visible{
outline: 2px solid var(--ds-branco); outline-offset: 3px;
}
body.v5-escritorio .atd-enviar .atd-enviar-ico{
width: 38px; height: 38px; padding: 9px; border-radius: 12px;
background: rgba(var(--ds-atlantico-rgb), .14);
fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linejoin: round; stroke-linecap: round;
}
body.v5-escritorio .atd-enviar .atd-enviar-txt b{
display: block; font-size: 14.5px; font-weight: 850; letter-spacing: -.01em;
}
body.v5-escritorio .atd-enviar .atd-enviar-txt small{
display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4;
color: rgba(var(--ds-atlantico-rgb), .80);
}
/* ENVIO REAL: âmbar cheio. Estado sempre com texto junto — a cor não informa
sozinha (regra do design system). */
body.v5-escritorio .atd-enviar.real{
background: linear-gradient(112deg, var(--ds-atencao-claro) 0%, var(--ds-atencao-2) 100%) !important;
color: var(--ds-atlantico) !important;
box-shadow: 0 20px 44px -24px rgba(var(--ds-atencao-2-rgb, 208,122,26), .8);
}
body.v5-escritorio .atd-enviar.real:hover{
box-shadow: 0 26px 54px -22px rgba(var(--ds-atencao-2-rgb, 208,122,26), .9);
}
/* travado pela conferência: apagado, mas ainda legível — e o motivo fica na
lista de regras logo acima dele. */
body.v5-escritorio .atd-enviar:disabled{
background: rgba(255, 255, 255, .06) !important;
border-color: rgba(255, 255, 255, .10) !important;
color: var(--ds-apoio-escuro) !important;
box-shadow: none;
transform: none;
cursor: not-allowed;
}
body.v5-escritorio .atd-enviar:disabled .atd-enviar-ico{
background: rgba(255, 255, 255, .06);
}
body.v5-escritorio .atd-enviar:disabled .atd-enviar-txt small{
color: var(--ds-apoio-escuro);
}
/* o que aconteceu depois do envio */
body.v5-escritorio dialog.atd-painel .atd-saida{
background: rgba(255, 255, 255, .06) !important;
border-color: rgba(255, 255, 255, .12) !important;
color: var(--ds-linha-2) !important;
}
body.v5-escritorio dialog.atd-painel .atd-saida b{ color: var(--ds-menta-3); }
body.v5-escritorio dialog.atd-painel .atd-saida.ruim b{ color: var(--ds-erro-claro); }
/* os três botões do desfecho: eram texto colado no fundo colorido */
body.v5-escritorio .atd-desfecho{
display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
margin-top: 12px; padding-top: 11px;
border-top: 1px solid rgba(255, 255, 255, .10);
}
body.v5-escritorio .atd-desfecho > span{
flex: 1 1 100%; font-size: 11.5px; color: var(--ds-apoio-escuro); margin-bottom: 2px;
}
body.v5-escritorio .atd-desfecho button{
border: 1px solid rgba(255, 255, 255, .16);
background: rgba(255, 255, 255, .06);
color: var(--ds-linha-2);
border-radius: 999px; padding: 7px 14px;
font-size: 12px; font-weight: 750; cursor: pointer;
transition: background .16s ease, color .16s ease, border-color .16s ease;
}
body.v5-escritorio .atd-desfecho button:hover{
background: rgba(var(--ds-menta-rgb), .16);
border-color: rgba(var(--ds-menta-rgb), .45);
color: var(--ds-branco);
}
body.v5-escritorio .atd-desfecho button.marcado{
background: var(--ds-menta); border-color: var(--ds-menta); color: var(--ds-atlantico);
}
body.v5-escritorio .atd-desfecho button:disabled{ cursor: default; opacity: .55; }
/* -- 7. no celular o popup encosta no rodapé da tela ---------------------- */
@media (max-width: 720px){
body.v5-escritorio dialog.atd-painel{
width: 100vw !important;
max-height: 92vh !important;
margin: auto auto 0 !important;
border-radius: 24px 24px 0 0 !important;
}
body.v5-escritorio dialog.atd-painel .atd-painel-topo{ border-radius: 24px 24px 0 0; }
body.v5-escritorio dialog.atd-painel .atd-pe{ border-radius: 0; }
}
/* -- 8. O BOTÃO DA LISTA: "Responder" ------------------------------------
Era "Ler e responder →" em cinza de texto solto. Numa lista onde a linha
inteira já é clicável, o que faltava era parecer o destino do clique. */
body.v5-escritorio .atd-card .atd-abrir{
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; border-radius: 999px;
border: 1px solid var(--ds-linha);
background: var(--ds-branco);
color: var(--ds-verde-2) !important;
font-size: 12px; font-weight: 800;
transition: background .16s ease, color .16s ease, border-color .16s ease;
}
body.v5-escritorio .atd-card .atd-item:hover .atd-abrir{
background: var(--ds-verde); border-color: var(--ds-verde);
color: var(--ds-branco) !important;
}
/* ⚠️ o âmbar do urgente é o ESCURO (#A64B00): o claro dá 3,0:1 sobre a
Névoa e este botão tem 12px. Medido. */
body.v5-escritorio .atd-card .atd-item.urgente .atd-abrir{
border-color: var(--ds-atencao); color: var(--ds-atencao) !important;
}
body.v5-escritorio .atd-card .atd-item.urgente:hover .atd-abrir{
background: var(--ds-atencao); border-color: var(--ds-atencao);
color: var(--ds-branco) !important;
}
/* -- 8b. A CAIXA BRANCA TEM DE LER COMO PAPEL ----------------------------
A caixa de entrada virou branca em 17/09 (v5-vidro.css), mas três regras
de TEMA ESCURO continuaram valendo dentro dela — o relato do comprador, a
meta e o prazo ficaram em tons claros SOBRE BRANCO. Medido: 1,5:1 no
relato. Era isto que fazia a informação sumir na tela.
Aqui a tinta volta a ser a do claro: texto #46626C (6,0:1 na Névoa) e
prazo no âmbar escuro #A64B00 — o âmbar claro é para fundo escuro. */
html[data-tema="escuro"] body.v5-escritorio .atd-card .atd-item p,
body.v5-escritorio .atd-card .atd-item p{ color: var(--ds-tinta-2) !important; }
html[data-tema="escuro"] body.v5-escritorio .atd-card .atd-item .atd-meta,
body.v5-escritorio .atd-card .atd-item .atd-meta,
body.v5-escritorio .atd-card .atd-vazio,
body.v5-escritorio .atd-card .atd-opcoes{ color: var(--ds-tinta-2) !important; }
html[data-tema="escuro"] body.v5-escritorio .atd-card .atd-item .atd-prazo,
body.v5-escritorio .atd-card .atd-item .atd-prazo{ color: var(--ds-atencao) !important; }
body.v5-escritorio .atd-card .atd-item.respondida{ opacity: .62; }
/* -- 9. OS CARDS DO PALCO FLUTUANDO --------------------------------------
o dono do painel: "aumente a sombra para parecer que estão flutuando e coloque uma
suavidade nele quando passar o mouse". Sombra longa e difusa (a peça sobe
do fundo), e no hover ela sobe 3px com a sombra acompanhando. */
body.v5-escritorio .num-card{
box-shadow: 0 26px 48px -26px rgba(0, 0, 0, .78),
0 8px 18px -12px rgba(0, 0, 0, .55),
inset 0 1px 0 rgba(255, 255, 255, .06);
transition: transform .22s cubic-bezier(.2, .8, .3, 1),
box-shadow .22s ease, border-color .22s ease, background .22s ease;
will-change: transform;
}
body.v5-escritorio .num-card:hover{
transform: translateY(-3px);
border-color: rgba(var(--ds-menta-rgb), .40);
box-shadow: 0 38px 66px -26px rgba(0, 0, 0, .85),
0 12px 24px -14px rgba(0, 0, 0, .6),
0 0 0 1px rgba(var(--ds-menta-rgb), .14);
}
body.v5-escritorio .num-card:hover:before{ box-shadow: 0 0 18px var(--c, var(--ds-menta-3)); }
@media (prefers-reduced-motion: reduce){
body.v5-escritorio .num-card{ transition: box-shadow .2s ease; }
body.v5-escritorio .num-card:hover{ transform: none; }
}
/* -- 9b. A LINHA DE ATIVIDADE EMBAIXO DA SALA -----------------------------
o dono do painel: "retire a linha pós-venda recompra também". O elemento fica no DOM
(o v5-escritorio.js escreve nele a cada seleção); some da tela por aqui.
⚠️ `hidden` sozinho não resolve: v5.css dá `display:flex` a esta classe e
atributo não vence classe. */
body.v5-escritorio .office-controls{ display: none !important; }
/* -- 10. navegador sem backdrop-filter ------------------------------------ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
body.v5-escritorio dialog.atd-painel{ background: var(--ds-atlantico-2) !important; }
body.v5-escritorio dialog.atd-painel::backdrop{ background: rgba(8, 24, 30, .9); }
}