/* Madruga: visual da casa (tinta + dourado do manual de marca BSSP 2026), vidro no estilo Lumio, claro e escuro. */ :root { --tinta: #031d31; --dourado: #f6cd82; --dourado-forte: #e0ac4d; --ground-1: #f1f1f1; --ground-2: #e9e9e9; --marca: var(--tinta); --texto: #031d31; --texto-fraco: #5b6b7c; --borda: rgba(3, 29, 49, 0.12); --borda-forte: rgba(3, 29, 49, 0.22); --vidro: rgba(255, 255, 255, 0.72); --vidro-fino: rgba(255, 255, 255, 0.5); --sombra: 0 18px 40px rgba(3, 29, 49, 0.12); --bolha-eu: rgba(3, 29, 49, 0.94); --bolha-eu-texto: #ffffff; --bolha-ele: rgba(255, 255, 255, 0.86); --erro: #b3261e; --ok: #0f7b52; --realce: rgba(3, 29, 49, 0.055); --realce-forte: rgba(3, 29, 49, 0.10); --solido: #031d31; --solido-texto: #ffffff; --superficie: #fbfbfc; --raio: 18px; --fonte: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } [data-tema='escuro'] { --ground-1: #02121f; --ground-2: #031d31; --marca: #ffffff; --texto: #eaf1f8; --texto-fraco: #93a7ba; --borda: rgba(255, 255, 255, 0.12); --borda-forte: rgba(255, 255, 255, 0.22); --vidro: rgba(255, 255, 255, 0.07); --vidro-fino: rgba(255, 255, 255, 0.045); --sombra: 0 18px 40px rgba(0, 0, 0, 0.45); --bolha-eu: rgba(246, 205, 130, 0.16); --bolha-eu-texto: #f7e6c4; --bolha-ele: rgba(255, 255, 255, 0.07); --erro: #ff8a80; --ok: #6ee7b7; --realce: rgba(255, 255, 255, 0.07); --realce-forte: rgba(255, 255, 255, 0.12); --solido: #f0f5fa; --solido-texto: #031d31; --superficie: #0a2033; } * { box-sizing: border-box; } html, body { height: 100%; } /* A tela do chat é um app, não um documento: nada de rolar a página inteira nem de "bounce" quando o dedo passa do fim. Só a lista de mensagens rola. É isso que segura o layout no lugar quando o teclado do celular sobe. O "position: fixed" fica só no body. Colocar no também é o que fazia o Safari do iPhone se perder: ele passa a medir a página contra um elemento que não é mais a raiz de rolagem, e o resultado é tela pulando e conversa que não desce. */ html.app { height: 100%; overflow: hidden; overscroll-behavior: none; } body.app { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; } body { margin: 0; font-family: var(--fonte); color: var(--texto); background: var(--ground-1); background-image: radial-gradient(56rem 40rem at 6% -14%, rgba(246, 205, 130, 0.55), transparent 60%), radial-gradient(50rem 40rem at 98% 4%, rgba(3, 29, 49, 0.10), transparent 62%), radial-gradient(44rem 34rem at 54% 114%, rgba(3, 29, 49, 0.07), transparent 58%); background-attachment: fixed; -webkit-font-smoothing: antialiased; } [data-tema='escuro'] body { background-image: radial-gradient(58rem 40rem at 10% -12%, rgba(246, 205, 130, 0.16), transparent 62%), radial-gradient(52rem 38rem at 94% 6%, rgba(11, 58, 94, 0.55), transparent 64%), radial-gradient(46rem 34rem at 52% 112%, rgba(3, 29, 49, 0.9), transparent 60%); } a { color: inherit; } .vidro { background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); } .vidro-fino { background: var(--vidro-fino); border: 1px solid var(--borda); border-radius: 14px; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } /* ---------- tipografia ---------- */ h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; } h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; } .sub { color: var(--texto-fraco); font-size: 0.9rem; margin: 0; } .mono { font-variant-numeric: tabular-nums; } /* ---------- controles ---------- */ label { display: block; font-size: 0.8rem; font-weight: 600; margin: 14px 0 6px; color: var(--texto-fraco); } input[type='text'], input[type='email'], input[type='password'], input[type='number'], select, textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 0.95rem; color: var(--texto); background: var(--vidro-fino); border: 1px solid var(--borda-forte); border-radius: 12px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } input:focus, select:focus, textarea:focus { border-color: var(--dourado-forte); box-shadow: 0 0 0 3px rgba(246, 205, 130, 0.28); } textarea { resize: vertical; line-height: 1.5; } .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; font: inherit; font-weight: 700; font-size: 0.92rem; color: var(--tinta); background: linear-gradient(180deg, var(--dourado), var(--dourado-forte)); border: none; border-radius: 12px; cursor: pointer; transition: transform 0.12s, filter 0.15s; } .botao:hover { filter: brightness(1.05); } .botao:active { transform: translateY(1px); } .botao[disabled] { opacity: 0.55; cursor: not-allowed; } .botao.largo { width: 100%; } .botao-fantasma { background: transparent; color: var(--texto); border: 1px solid var(--borda-forte); } .botao-fantasma:hover { background: var(--vidro-fino); filter: none; } /* ---------- ícones ---------- Um traçado só para todos: 1.7px, ponta e junta redondas, cor herdada do texto. É o que dá a cara discreta e uniforme, no lugar do emoji e da seta em texto. */ .ic { width: 20px; height: 20px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .botao-icone { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 10px; cursor: pointer; background: transparent; color: var(--texto-fraco); transition: background 0.12s, color 0.12s; -webkit-tap-highlight-color: transparent; } .botao-icone:hover { background: var(--realce); color: var(--texto); } .botao-icone:active { background: var(--realce-forte); } .botao-mini { padding: 6px 10px; font-size: 0.78rem; border-radius: 9px; background: transparent; color: var(--texto-fraco); border: 1px solid var(--borda); cursor: pointer; font-family: inherit; font-weight: 600; } .botao-mini:hover { color: var(--texto); border-color: var(--borda-forte); } .botao-mini.perigo:hover { color: var(--erro); border-color: var(--erro); } /* abas sublinhadas (padrao escolhido pelo Roque) */ .abas { display: flex; gap: 18px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; } .aba { background: none; border: none; padding: 10px 2px; margin-bottom: -1px; font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--texto-fraco); cursor: pointer; border-bottom: 2px solid transparent; } .aba.ativa { color: var(--texto); border-bottom-color: var(--dourado-forte); } .aviso { padding: 11px 14px; border-radius: 12px; font-size: 0.86rem; margin: 14px 0 0; line-height: 1.45; } .aviso.erro { background: rgba(179, 38, 30, 0.12); color: var(--erro); border: 1px solid rgba(179, 38, 30, 0.25); } .aviso.ok { background: rgba(15, 123, 82, 0.12); color: var(--ok); border: 1px solid rgba(15, 123, 82, 0.25); } .escondido { display: none !important; } /* Assinatura BSSP PÓS-GRADUAÇÃO (manual de marca 2026). O PNG oficial entra como máscara, então a cor vem do tema: tinta no claro, branco no escuro, sem versão recolorida à mão e sem deformar a marca. */ /* O PNG é a assinatura oficial já recortada (sem moldura transparente em volta), e as caixas abaixo respeitam a proporção dela: 2.127. Se um dia trocar o arquivo, refaça as alturas, senão o "contain" deixa folga de um lado só e a marca volta a parecer encostada na borda. */ .marca { display: flex; align-items: center; gap: 14px; } .marca-logo { display: block; flex: none; width: 132px; height: 62px; background-color: var(--marca); -webkit-mask: url('/img/logo-bssp-pos.png') no-repeat center / contain; mask: url('/img/logo-bssp-pos.png') no-repeat center / contain; } .marca-logo.media { width: 118px; height: 55px; } .marca-logo.grande { width: 200px; height: 94px; } .marca-logo.negativa { background-color: #ffffff; } .marca-logo.pequena { width: 118px; height: 55px; } .marca-fio { width: 1px; align-self: stretch; background: var(--borda); } /* Cabeçalho da lateral: a marca centrada no espaço, não grudada na borda esquerda, com um fio embaixo para separar do resto da coluna. */ .marca-bloco { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px 14px; margin-bottom: 2px; border-bottom: 1px solid var(--borda); } .marca-bloco .marca-logo { margin: 0 auto; } .marca-bloco .marca-sub { text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 600; text-align: center; } .marca-nome { font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; font-size: 0.95rem; } .marca-sub { font-size: 0.72rem; color: var(--texto-fraco); letter-spacing: 0.06em; text-transform: uppercase; } /* fio dourado da base, do jeito que o manual fecha as páginas */ .fio-dourado { height: 4px; background: var(--dourado); } body > .fio-dourado { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; } /* ---------- tela de entrada ---------- */ .entrada { min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; } /* coluna da marca: tinta cheia, logo em negativo, fio dourado embaixo */ .painel-marca { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 54px 52px 50px; background: var(--tinta); background-image: radial-gradient(46rem 34rem at 4% -8%, rgba(246, 205, 130, 0.20), transparent 58%), radial-gradient(38rem 30rem at 96% 104%, rgba(255, 255, 255, 0.07), transparent 60%); color: #fff; overflow: hidden; } .painel-marca::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--dourado); } .painel-meio { max-width: 30rem; } .painel-titulo { font-size: clamp(1.6rem, 2.4vw, 2.15rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.03em; margin: 0 0 16px; color: #fff; } .painel-texto { font-size: 0.98rem; line-height: 1.65; color: rgba(255, 255, 255, 0.78); margin: 0; } .painel-lista { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .painel-lista li { position: relative; padding-left: 26px; font-size: 0.9rem; line-height: 1.5; color: rgba(255, 255, 255, 0.86); } .painel-lista li::before { content: ''; position: absolute; left: 0; top: 0.52em; width: 12px; height: 2px; background: var(--dourado); } .painel-pe { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .painel-form { display: grid; place-items: center; padding: 40px 24px; } .cartao-entrada { width: 100%; max-width: 420px; padding: 30px 28px; overflow: hidden; position: relative; } .cartao-entrada .fio-dourado { position: absolute; left: 0; right: 0; bottom: 0; } .cartao-titulo { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 3px; } .so-mobile { display: none; } @media (max-width: 900px) { .entrada { grid-template-columns: 1fr; } .painel-marca { padding: 26px 22px 24px; gap: 18px; flex-direction: row; align-items: center; justify-content: flex-start; } .painel-meio, .painel-pe { display: none; } .painel-marca .marca-logo.grande { width: 132px; height: 62px; } .painel-form { padding: 26px 18px 40px; align-items: start; } } @media (max-width: 420px) { .cartao-entrada { padding: 24px 20px; } } /* ---------- app do chat ---------- */ /* --altura vem do visualViewport no celular, porque o teclado do iOS não mexe no dvh em toda versão. No desktop cai no 100dvh de sempre. */ .tela { display: grid; grid-template-columns: 272px 1fr; height: var(--altura, 100dvh); overflow: hidden; } .veu { display: none; } .lateral { display: flex; flex-direction: column; gap: 12px; padding: 16px 14px; border-right: 1px solid var(--borda); background: var(--vidro-fino); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); min-height: 0; } .lista-conversas { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 0 -6px; padding: 0 6px; } /* "Nova conversa" era uma barra dourada gritando no topo da lateral. Virou uma linha calma, do mesmo peso das conversas, com o + na frente. */ .linha-nova { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border-radius: 11px; cursor: pointer; font: inherit; font-size: 0.87rem; font-weight: 600; color: var(--texto); background: transparent; border: 1px solid var(--borda); transition: background 0.12s, border-color 0.12s; -webkit-tap-highlight-color: transparent; } .linha-nova:hover { background: var(--realce); border-color: var(--borda-forte); } .linha-nova .ic { width: 18px; height: 18px; } .item-conversa { display: flex; align-items: center; gap: 4px; padding: 8px 6px 8px 11px; border-radius: 11px; cursor: pointer; font-size: 0.85rem; color: var(--texto-fraco); border: 1px solid transparent; -webkit-tap-highlight-color: transparent; } .item-conversa:hover { background: var(--realce); color: var(--texto); } .item-conversa.ativa { background: var(--realce-forte); color: var(--texto); font-weight: 600; } .item-conversa span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } /* o arquivar só aparece com o mouse em cima: quatro caixinhas fixas na lista poluíam mais do que ajudavam */ .item-conversa .botao-icone { width: 28px; height: 28px; opacity: 0; } .item-conversa .botao-icone .ic { width: 15px; height: 15px; } .item-conversa:hover .botao-icone, .item-conversa:focus-within .botao-icone { opacity: 1; } .item-conversa .botao-icone:hover { color: var(--erro); } .rodape-lateral { border-top: 1px solid var(--borda); padding-top: 10px; font-size: 0.8rem; color: var(--texto-fraco); } .rodape-lateral .quem { font-weight: 600; color: var(--texto); font-size: 0.85rem; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rodape-lateral .linha-acoes { gap: 2px; margin-left: -6px; } .painel { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; } .barra { display: flex; align-items: center; gap: 10px; flex: none; padding: 10px 18px; border-bottom: 1px solid var(--borda); background: var(--vidro-fino); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .barra .cresce { flex: 1; min-width: 0; } .titulo-barra { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Tarja de problema com a base. Antes essa informação era uma linha fixa embaixo do título, que em dia normal só dizia "4 documentos na base" e no primeiro quadro dizia "Carregando a base...". Agora só existe quando tem problema. */ .tarja { flex: none; padding: 9px 18px; font-size: 0.82rem; font-weight: 600; border-bottom: 1px solid var(--borda); } .tarja.atencao { background: rgba(224, 172, 77, 0.16); color: var(--dourado-forte); } .tarja.ruim { background: rgba(179, 38, 30, 0.12); color: var(--erro); } .conversa { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px 20px 8px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .trilho { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; } .msg { display: flex; flex-direction: column; gap: 6px; max-width: 88%; } .msg.eu { align-self: flex-end; align-items: flex-end; } .msg.ele { align-self: flex-start; } .bolha { padding: 13px 16px; border-radius: 18px; line-height: 1.58; font-size: 0.94rem; white-space: normal; overflow-wrap: anywhere; } .msg.eu .bolha { background: var(--bolha-eu); color: var(--bolha-eu-texto); border-bottom-right-radius: 6px; } .msg.ele .bolha { border: 1px solid var(--borda); } .bolha p { margin: 0 0 10px; } .bolha p:last-child { margin-bottom: 0; } .bolha ul, .bolha ol { margin: 0 0 10px; padding-left: 20px; } .bolha li { margin-bottom: 4px; } .bolha code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; background: var(--vidro-fino); padding: 1px 5px; border-radius: 5px; } .bolha table { border-collapse: collapse; width: 100%; font-size: 0.85rem; margin-bottom: 10px; display: block; overflow-x: auto; } .bolha th, .bolha td { border: 1px solid var(--borda); padding: 6px 9px; text-align: left; } /* linha copiavel: cada condicao comercial em uma linha com botao de copiar */ .linha-copiavel { display: flex; align-items: flex-start; gap: 8px; } .bolha li > .linha-copiavel { display: flex; } .bolha li { list-style: inherit; } .linha-copiavel .txt { flex: 1; } .copiar-linha { flex: none; opacity: 0; transition: opacity 0.12s; background: none; border: none; cursor: pointer; padding: 2px 4px; color: var(--texto-fraco); font-size: 0.72rem; font-family: inherit; font-weight: 600; } .linha-copiavel:hover .copiar-linha, .copiar-linha.fixo { opacity: 1; } .copiar-linha:hover { color: var(--dourado-forte); } /* O rodape da resposta ("copiar", a fonte, "resposta errada") vivia com tres caixinhas de borda competindo com o texto. Agora e texto discreto que so ganha fundo quando o mouse passa. */ .pe-msg { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; font-size: 0.72rem; color: var(--texto-fraco); padding-left: 2px; } .pe-msg .botao-mini { border-color: transparent; background: transparent; padding: 5px 8px; font-weight: 500; font-size: 0.74rem; } .pe-msg .botao-mini:hover { background: var(--realce); border-color: transparent; color: var(--texto); } .pe-msg .botao-mini.marcado { border-color: var(--dourado-forte); } .pe-msg .fonte-doc { padding: 0 6px; } .painel-erro { margin-top: 8px; padding: 12px 14px; display: grid; gap: 10px; max-width: 520px; } .painel-erro input { padding: 9px 11px; font-size: 0.85rem; } .botao-mini.marcado { color: var(--tinta); background: var(--dourado); border-color: var(--dourado-forte); } [data-tema='escuro'] .botao-mini.marcado { color: var(--tinta); } .aviso-base { margin: 0 0 14px; } .fonte-doc { font-size: 0.72rem; color: var(--texto-fraco); } .digitando { display: inline-flex; gap: 4px; align-items: center; } .digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-fraco); animation: pisca 1.1s infinite; } .digitando i:nth-child(2) { animation-delay: 0.15s; } .digitando i:nth-child(3) { animation-delay: 0.3s; } @keyframes pisca { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } } /* o estado vazio ficava colado no topo, com um vão enorme até o compositor; agora ele ocupa a área e se centra nela */ .vazio { max-width: 700px; margin: auto; text-align: center; padding: 24px 0; } .conversa:has(> .vazio:not(.escondido)) { display: flex; flex-direction: column; } .chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; } .chip { padding: 9px 14px; border-radius: 999px; font-size: 0.84rem; cursor: pointer; background: var(--vidro-fino); border: 1px solid var(--borda); color: var(--texto); font-family: inherit; } .chip:hover { border-color: var(--dourado-forte); } /* ---------- compositor ---------- Uma pílula só, borda fina e sombra curta. O microfone é um ícone fantasma (sem fundo, sem borda) e o enviar só ganha cor quando há texto: em repouso a barra inteira fica quieta, que é o ponto. */ .compositor { flex: none; padding: 10px 20px calc(14px + env(safe-area-inset-bottom)); } .caixa { max-width: 760px; margin: 0 auto; display: flex; align-items: flex-end; gap: 6px; padding: 7px 7px 7px 16px; border-radius: 26px; background: var(--vidro); border: 1px solid var(--borda-forte); box-shadow: 0 2px 10px rgba(3, 29, 49, 0.06); transition: border-color 0.15s, box-shadow 0.15s; } .caixa.focada { box-shadow: 0 3px 16px rgba(3, 29, 49, 0.10); } [data-tema='escuro'] .caixa { box-shadow: none; } .caixa textarea { border: none; background: none; box-shadow: none; padding: 8px 0; max-height: 200px; min-height: 24px; resize: none; font-size: 0.95rem; line-height: 1.5; } .caixa textarea:focus { box-shadow: none; } .caixa textarea::placeholder { color: var(--texto-fraco); opacity: 0.75; } .acoes-caixa { display: flex; align-items: center; gap: 2px; flex: none; padding-bottom: 1px; } .botao-caixa { flex: none; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 50%; background: transparent; color: var(--texto-fraco); transition: background 0.12s, color 0.12s, opacity 0.12s; -webkit-tap-highlight-color: transparent; } .botao-caixa:hover { background: var(--realce); color: var(--texto); } .botao-caixa[disabled] { opacity: 0.35; cursor: default; background: transparent; } /* enviar: círculo sólido de alto contraste, apagado enquanto o campo está vazio */ .botao-caixa.enviar { background: var(--solido); color: var(--solido-texto); } .botao-caixa.enviar:hover { background: var(--solido); color: var(--solido-texto); filter: brightness(1.15); } .botao-caixa.enviar[disabled] { background: var(--realce-forte); color: var(--texto-fraco); opacity: 1; filter: none; } .botao-caixa.gravando { background: var(--erro); color: #fff; animation: pulsa 1.4s infinite; } @keyframes pulsa { 50% { box-shadow: 0 0 0 7px rgba(179, 38, 30, 0.16); } } /* A dica virou linha de estado: nasce vazia e só fala quando tem o que dizer (gravando, transcrevendo, deu erro). Antes era um parágrafo fixo de duas linhas, que no celular comia altura preciosa. */ .dica-compositor { max-width: 760px; margin: 6px auto 0; min-height: 1em; font-size: 0.74rem; color: var(--texto-fraco); text-align: center; } .dica-compositor:empty { margin-top: 0; min-height: 0; } .abrir-lateral { display: none; } /* no desktop a marca já está fixa na lateral; no celular a lateral some e ela vai para a barra. Assim a logo aparece sempre, sem repetir duas vezes na mesma tela. */ .marca-barra { display: none; } @media (max-width: 860px) { .tela { grid-template-columns: 1fr; } .lateral { position: fixed; inset: 0 auto 0 0; width: 82vw; max-width: 300px; z-index: 30; transform: translateX(-102%); transition: transform 0.22s ease; background: var(--ground-1); border-right: 1px solid var(--borda); padding-top: calc(16px + env(safe-area-inset-top)); } .lateral.aberta { transform: none; box-shadow: var(--sombra); } .veu { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(3, 29, 49, 0.34); } .veu[hidden] { display: none; } .abrir-lateral { display: grid; } .marca-barra { display: block; width: 72px; height: 34px; flex: none; opacity: 0.9; } .msg { max-width: 96%; } .barra { padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); } .titulo-barra { font-size: 0.9rem; } .conversa { padding: 14px 12px 4px; } .compositor { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); } .caixa { padding-left: 14px; } /* 16px no campo evita o zoom automático do Safari ao focar, que era outra forma de a tela pular no celular */ .caixa textarea { font-size: 16px; } .vazio h1 { font-size: 1.3rem; } .vazio .sub { font-size: 0.85rem; } .chips { gap: 6px; } .chip { font-size: 0.8rem; padding: 8px 12px; } .bolha { font-size: 0.92rem; } .copiar-linha { opacity: 1; } .item-conversa .botao-icone { opacity: 1; } } /* Teclado aberto: sobra pouca altura, então o estado vazio sai da frente e o respiro do topo encolhe. O compositor continua colado no rodapé da área útil. */ @media (max-width: 860px) and (max-height: 520px) { .vazio h1 { font-size: 1.1rem; margin-bottom: 2px; } .vazio .sub, .tarja { display: none; } .vazio { padding: 8px 0; } .chips { margin-top: 10px; } .conversa { padding-top: 8px; } } /* ---------- admin ---------- */ .pagina { max-width: 1040px; margin: 0 auto; padding: 22px 18px 60px; } .cartao { padding: 20px; margin-bottom: 18px; } .tabela { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .tabela th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-fraco); padding: 8px 10px; border-bottom: 1px solid var(--borda); } .tabela td { padding: 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; } .tabela tr:last-child td { border-bottom: none; } .rolagem { overflow-x: auto; } .selo { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; } .selo.pendente { background: rgba(224, 172, 77, 0.2); color: var(--dourado-forte); } .selo.nao_confirmado { background: rgba(224, 172, 77, 0.2); color: var(--dourado-forte); } .selo.ativo { background: rgba(15, 123, 82, 0.16); color: var(--ok); } .selo.inativo, .selo.recusado { background: rgba(120, 130, 140, 0.2); color: var(--texto-fraco); } .selo.pronto { background: rgba(15, 123, 82, 0.16); color: var(--ok); } .selo.falhou { background: rgba(179, 38, 30, 0.16); color: var(--erro); } .grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .numero { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; } .rotulo { font-size: 0.74rem; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: 0.06em; } .linha-acoes { display: flex; gap: 6px; flex-wrap: wrap; } /* ---------- estatísticas ---------- */ .linha-titulo { display: flex; align-items: flex-start; gap: 16px; } .linha-titulo > div { flex: 1; min-width: 0; } .periodo { width: auto; flex: none; padding: 8px 12px; font-size: 0.84rem; font-weight: 600; border-radius: 10px; } .colunas-est { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; } @media (max-width: 780px) { .colunas-est { grid-template-columns: 1fr; } } /* A nuvem é posicionada por JS (as palavras são medidas de verdade antes de entrar), então aqui só cuidamos da caixa e do jeito de cada palavra. */ .nuvem { position: relative; width: 100%; height: 340px; margin-top: 16px; overflow: hidden; } .nuvem b { position: absolute; white-space: nowrap; font-weight: 700; line-height: 1; letter-spacing: -0.02em; cursor: default; transform: translate(-50%, -50%); transition: opacity 0.12s; } .nuvem:hover b { opacity: 0.42; } .nuvem b:hover { opacity: 1; } @media (max-width: 640px) { .nuvem { height: 260px; } } /* Barras horizontais: rótulo, trilho e número. Sem biblioteca, e o trilho já dá a comparação que um gráfico daria. */ .barra-linha { display: grid; grid-template-columns: 190px 1fr 54px; gap: 12px; align-items: center; margin-bottom: 9px; } .barra-linha .rotulo-barra { font-size: 0.82rem; font-weight: 600; color: var(--texto); } .barra-trilho { height: 22px; border-radius: 7px; background: var(--realce); overflow: hidden; } .barra-cheia { height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--dourado), var(--dourado-forte)); } .barra-linha .conta { font-size: 0.82rem; color: var(--texto-fraco); text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .barra-linha { grid-template-columns: 120px 1fr 42px; gap: 8px; } } /* Colunas para hora e dia da semana. */ .colunas { display: flex; align-items: stretch; gap: 4px; height: 140px; } .coluna { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; min-width: 0; } .coluna .caixa-haste { flex: 1; width: 100%; display: flex; align-items: flex-end; } .coluna .haste { width: 100%; border-radius: 5px 5px 0 0; background: var(--tinta); opacity: 0.78; min-height: 2px; } [data-tema='escuro'] .coluna .haste { background: var(--dourado); opacity: 0.68; } .coluna .haste.forte { opacity: 1; } .coluna .pe { font-size: 0.66rem; color: var(--texto-fraco); white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; } /* Espaço vazio no fim da conversa: é ele que deixa a última pergunta subir até o topo da tela quando a resposta ainda é curta. Sem isso não há para onde rolar. */ .espaco-fim { flex: none; } /* Botão de descer, ancorado logo acima do compositor. */ .compositor { position: relative; } .descer { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center; z-index: 5; color: var(--texto); background: var(--vidro); border: 1px solid var(--borda-forte); box-shadow: 0 3px 12px rgba(3, 29, 49, 0.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); -webkit-tap-highlight-color: transparent; } .descer:hover { background: var(--realce-forte); } /* Caixinha de marcar. O