. A classe `chAcLinha` e' posta pelo JS ao armar o gesto, entao estas regras valem nas QUATRO conversas sem cada folha precisar repeti-las. ══════════════════════════════════════════════════════════════════════════ */ .chAcLinha{ position:relative; } /* Os dois icones. ⚠️ NAO sao `content` de pseudo-elemento: a 1a versao usava "\\21A9" (seta) e "\\1F5D1" (lixeira) e sairam como quadradinho no aparelho do dono — o escape foi corrompido no caminho, e mesmo correto dependeria da fonte do Android. Agora sao SVG no traco do app, criados por /assets/js/chat-acoes.js ao armar o gesto. */ .chAcIco{ position:absolute; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; opacity:0; transition:opacity .12s, transform .12s; pointer-events:none; z-index:0; } .chAcIcoResp{ left:2px; color:var(--cha-am); background:var(--cha-am-fraco); } .chAcIcoApagar{ right:2px; color:var(--cha-al-ink); background:var(--cha-al); } .chAcIco svg{ display:block; } .chAcLinha.chAcVaiResponder .chAcIcoResp{ opacity:1; transform:translateY(-50%) scale(1.08); } .chAcLinha.chAcVaiApagar .chAcIcoApagar{ opacity:1; transform:translateY(-50%) scale(1.08); } /* A bolha passa POR CIMA do icone enquanto desliza. */ .chAcLinha > *:not(.chAcIco){ position:relative; z-index:1; } /* `will-change` so' enquanto arrasta: segurar camada de composicao nas ~30 linhas da lista custa memoria de video a toa. */ .chAcLinha.chAcArrasta > *{ will-change:transform; } .chAcLinha:not(.chAcArrasta) > *{ transition:transform .18s ease; } @media (prefers-reduced-motion: reduce){ .chAcLinha:not(.chAcArrasta) > *{ transition:none; } } /* ── A LINHA DO CHAT DO PEDIDO E DO WIDGET DA LOJA ────────────────────────── Nessas duas telas a bolha ERA a linha: um

so'. Com o arrasto padronizado isso nao serve — quem desliza e' a bolha, e o icone fica na linha, parada, atras. As duas ganharam um

em volta; estas regras sao tudo o que ele precisa. A bolha manteve o CSS que ja' tinha. ⚠️ O alinhamento continua saindo da BOLHA: no chat do pedido o `--me` ja' tinha `margin-left:auto`, que num flex-row empurra para a direita igual. No widget da loja o `--me` so' tinha `align-self`, que num flex-row e' vertical e nao alinharia nada — por isso a linha de baixo. */ .dlvChat-linha, .od-chat-linha{ display:flex; width:100%; } .dlvChat-linha{ margin-bottom:9px; } .dlvChat-linha > .dlvChat-msg{ margin-bottom:0; } .od-chat-linha > .od-chat-msg--me{ margin-left:auto; } /* ══════════════════════════════════════════════════════════════════════════ OS DIALOGOS DA FROTA DENTRO DA FOLHA — 12/09/2026 ────────────────────────────────────────────────────────────────────────── `caixaDialogo()` (chat-frota.js) passou a montar a folha de baixo, mas o CONTEUDO dos 32 dialogos continua usando as classes de la' (rv2cf-conf-tit, rv2cf-conf-txt, rv2cf-conf-acoes, rv2cf-btn). Em vez de reescrever os 32, as classes de la' recebem aqui o visual daqui — mesma tipografia, mesmo espaco, mesmos botoes. Assim "quem viu", "quem reagiu", silenciar e as confirmacoes ficam com o layout que o dono escolheu. ══════════════════════════════════════════════════════════════════════════ */ .chAcCaixa .rv2cf-conf-tit{ font:800 14px/1.3 system-ui, sans-serif; color:var(--cha-tx); padding:2px 4px 10px; } .chAcCaixa .rv2cf-conf-txt{ font:400 13px/1.5 system-ui, sans-serif; color:var(--cha-tx2); padding:0 4px 12px; } .chAcCaixa .rv2cf-conf-acoes{ display:flex; gap:8px; justify-content:flex-end; padding:10px 4px 2px; } .chAcCaixa .rv2cf-btn{ padding:10px 18px !important; border-radius:999px !important; cursor:pointer; font:800 13px/1.2 system-ui, sans-serif !important; min-height:0 !important; border:1px solid var(--cha-am) !important; background:var(--cha-am) !important; color:var(--cha-am-ink) !important; } .chAcCaixa .rv2cf-btn-fraco{ border-color:var(--cha-ln2) !important; background:transparent !important; color:var(--cha-tx2) !important; } .chAcCaixa .rv2cf-btn-perigo{ border-color:var(--cha-al) !important; background:var(--cha-al) !important; color:var(--cha-al-ink) !important; } /* as listas de gente (quem viu / quem reagiu) rolam dentro da folha */ .chAcCaixa .rv2cf-quem{ max-height:46vh; overflow:auto; } .chAcCaixa .rv2cf-quem-item{ display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--cha-ln); } .chAcCaixa .rv2cf-quem-item:last-child{ border-bottom:0; } .chAcCaixa .rv2cf-mudos-t{ font:800 11.5px/1.5 system-ui, sans-serif; color:var(--cha-tx3); padding:0 4px 6px; } /* ── o compositor enquanto grava (nao some mais, fica inerte) ────────────── */ .supDrvComp.gravando{ opacity:.42; pointer-events:none; } .supDrvComp.gravando textarea{ background:transparent; } /* ── A FAIXA DE AVISO ─────────────────────────────────────────────────────── ⚠️ EXISTE PORQUE O SILENCIO CUSTOU CARO. Os avisos deste modulo e do painel do motoboy iam para `window.toast`, que NAO EXISTE no /driver — todo erro (rede, 422, audio vazio) virava nada na tela. O dono gravou um audio, tocou em enviar e o app nao disse absolutamente nada. z-index acima da folha de acoes (3200): um erro DENTRO da folha precisa ser visto por cima dela. */ .chAcAviso, .supDrvAviso{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%) translateY(8px); z-index:3400; max-width:min(92vw, 420px); padding:11px 16px; border-radius:12px; background:var(--cha-tx); color:var(--cha-sf); font:600 13px/1.45 system-ui, sans-serif; text-align:center; box-shadow:0 6px 22px rgba(0,0,0,.34); opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease; } .chAcAviso.on, .supDrvAviso.on{ opacity:1; transform:translateX(-50%) translateY(0); } .chAcAviso.err, .supDrvAviso.err{ background:var(--cha-al); color:var(--cha-al-ink); } @media (prefers-reduced-motion: reduce){ .chAcAviso, .supDrvAviso{ transition:none; } } /* ══════════════════════════════════════════════════════════════════════════ O PLAYER DE AUDIO, A PREVIA DA FOTO E O ZOOM — 12/09/2026 ────────────────────────────────────────────────────────────────────────── Pedido do dono, com print de referencia: o audio "bonito igual o do WhatsApp"; a foto pre-visualizada com legenda antes de enviar; e a foto do chat ampliando ao toque. ══════════════════════════════════════════════════════════════════════════ */ /* ── o player ───────────────────────────────────────────────────────────── */ .chAcAudio{ display:flex; align-items:center; gap:9px; min-width:min(248px, 62vw); margin:2px 0 1px; } .chAcAudio audio{ display:none; } /* o nativo sai; quem manda e' o nosso */ .chAcPlay{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0; border:0; background:var(--cha-am); color:var(--cha-am-ink); } .chAcPlay:active{ transform:scale(.94); } /* A onda. ⚠️ E' REGUA DE PROGRESSO, nao a forma de onda do arquivo — ver a nota em /assets/js/chat-acoes.js. As barras sao estaveis por mensagem. */ .chAcOnda{ position:relative; flex:1 1 auto; min-width:0; height:26px; display:flex; align-items:center; gap:2px; cursor:pointer; } .chAcOnda i{ flex:1 1 0; min-width:2px; max-width:3px; border-radius:2px; background:var(--cha-tx3); opacity:.55; } /* o trecho ja' ouvido, por cima */ .chAcOndaFeita{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--cha-am); opacity:.28; border-radius:4px; pointer-events:none; transition:width .1s linear; } .chAcAudioDir{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:3px; } .chAcAudioT{ font:600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--cha-tx3); font-variant-numeric:tabular-nums; } .chAcVel{ padding:2px 8px; border-radius:999px; cursor:pointer; border:1px solid var(--cha-ln); background:transparent; color:var(--cha-tx2); font:700 10.5px/1.3 system-ui, sans-serif; } .chAcVel:active{ background:var(--cha-sf2); } /* ── transcricao ────────────────────────────────────────────────────────── */ .chAcAudioBar{ display:block; margin-top:4px; } .chAcTr{ padding:3px 10px; border-radius:999px; cursor:pointer; border:1px solid var(--cha-ln); background:transparent; color:var(--cha-tx2); font:600 11px/1.3 system-ui, sans-serif; } .chAcTr[hidden]{ display:none !important; } .chAcTrTx{ display:block; margin-top:6px; padding:8px 10px; border-radius:8px; background:var(--cha-sf2); color:var(--cha-tx); font:400 13px/1.5 system-ui, sans-serif; } .chAcTrTx[hidden]{ display:none !important; } /* ── previa da foto antes de enviar ─────────────────────────────────────── */ .chAcPrev{ display:flex; justify-content:center; padding:2px 0 12px; } .chAcPrev img{ max-width:100%; max-height:46vh; border-radius:12px; display:block; background:var(--cha-sf2); } .chAcLegenda{ width:100%; box-sizing:border-box; padding:11px 13px; border-radius:12px; border:1px solid var(--cha-ln2); background:var(--cha-sf2); color:var(--cha-tx); font:400 14px/1.4 system-ui, sans-serif; } .chAcLegenda:focus{ outline:2px solid var(--cha-am); outline-offset:-1px; } /* ── a foto em tela cheia ───────────────────────────────────────────────── */ .chAcLb{ position:fixed; inset:0; z-index:3600; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.94); } .chAcLb.on{ display:flex; } .chAcLb img{ max-width:100%; max-height:100%; object-fit:contain; /* a pinca do proprio navegador: melhor que qualquer zoom que eu escrevesse, e igual nos dois sistemas */ touch-action:pinch-zoom; } .chAcLbX{ position:absolute; top:calc(12px + env(safe-area-inset-top, 0px)); right:14px; width:40px; height:40px; border-radius:50%; cursor:pointer; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; } /* a foto na bolha convida ao toque */ .supDrvBl img[data-ampliar]{ cursor:zoom-in; } /* ── A FOTO NA BOLHA, uma medida só para todos os hospedeiros ───────────── Classe própria (e não `bolha img`) porque agora são SEIS conversas em três apps, cada uma com o seu nome de bolha. 190 px é a medida que o chat do pedido já usava desde 01/09 e que virou a de todas hoje, a pedido do dono: *"a imagem ficou muito grande, o usuário amplia se quiser"*. */ .chAcFoto{ display:block; max-width:190px; max-height:190px; width:auto; height:auto; object-fit:cover; border-radius:10px; margin:2px 0 5px; background:var(--cha-sf2); cursor:zoom-in; } /* ⚠️ TETO DA FOTO NA BOLHA. O dono: *"a imagem ficou muito grande, tem que diminuir, o usuário amplia se quiser"*. Sem teto, uma foto em retrato tomava a tela e empurrava a conversa para fora. 190 px é a mesma medida que o chat do pedido usa desde 01/09 — aqui virou a medida dos quatro chats. `object-fit:cover` para o corte ser bonito em retrato e paisagem; quem quer ver inteiro toca e amplia. */ .supDrvBl img{ max-width:190px; max-height:190px; width:auto; height:auto; object-fit:cover; background:var(--cha-sf3, rgba(255,255,255,.06)); }