/* Estilos anteriores ao redesenho noturno. Os blocos saem daqui a medida que cada tela e refeita nos arquivos novos desta pasta. */ /* A CASCA ADIANTADA. O cedo.js marca o ainda no , e o #app aparece na primeira pintura sem esperar o servidor. O !important nao e preguica: o #app nasce com display:none no ATRIBUTO style, e um atributo so perde para uma regra marcada assim. Quando /api/inicio responde, o app.js poe o proprio valor no atributo e tira a classe, nessa ordem — dai em diante quem manda e ele. Fica aqui em cima, fora de qualquer @media: vale para toda tela. */ html.casca-adiantada #app{display:flex !important} /* Bolha do MENTRE enquanto a traducao da conversa esta a caminho. */ .bolha.traduzindo{opacity:.55;transition:opacity .2s} /* MENTRE e SEMPRE escuro — sem seletor de tema, sem variavel condicional. */ :root{ --bg:#0b1117; --panel:#111a22; --input:#17232d; --border:#2a3b48; --gold:#b08d57; --gold-soft:#d1ab74; --text:#ece7da; --dim:#8a9690; --bubble-user:#1b2731; --success:#5f9873; /* Superficies em degraus de luz: fundo, cartao, controle, controle ativo. --linha e o fio que separa DENTRO de uma superficie (grade, tabela, lista); --border fica para contorno de campo e de botao. */ --sup-1:#101920; --sup-2:#16212a; --sup-3:#1d2a35; --linha:#1d2a34; --txt-2:#b3bab4; --ouro-tinta:rgba(176,141,87,.14); --raio:12px; --raio-ctl:10px; /* Financas: series validadas no fundo escuro (entradas 4,8:1, saidas 4,5:1), estados reservados (atencao, critico) e a linha de grade recessiva. */ --fin-s1:#3987e5; --fin-s2:#d95926; --fin-atencao:#fab219; --fin-critico:#e0524f; --fin-grade:#1f2c36; --rule:rgba(176,141,87,.07); } *{box-sizing:border-box} /* Controles de formulario NAO herdam fonte por padrao — o navegador impoe a dele (Arial, no Chrome). Sem esta linha, o campo do chat, os botoes da barra, os seletores das Configuracoes e o campo de reclamacao renderizavam todos em Arial enquanto o resto do app estava em Onest. Alem de destoar, custava LARGURA: Arial e mais larga que 'Geist', e foi por isso que "Escreva para o MENTRE" aparecia cortado no celular de um beta tester mesmo depois de o texto ja ter sido encurtado. */ button,input,select,textarea{font-family:inherit} body{margin:0;background:var(--bg);color:var(--text);font-family:'Geist',system-ui,sans-serif; height:100vh;display:flex;flex-direction:column;overflow:hidden; background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 27px,var(--rule) 28px); transition:background-color .2s,color .2s} #btnLateral{background:transparent;border:1px solid transparent;color:var(--dim); font-size:1.1rem;padding:6px 10px;border-radius:8px;cursor:pointer;margin-right:2px} #btnLateral:hover{color:var(--gold);background:var(--input);border-color:var(--border)} #btnLateral.ativo{color:var(--gold);border-color:var(--border);background:var(--input)} /* Cabecalho compacto. Ele consumia perto de 20% da altura util antes de a conversa comecar — num celular isso e uma tela inteira de mensagens perdida por dia. Logo menor, titulo menor, menos padding. */ header{background:var(--bg);border-bottom:1px solid var(--linha); padding:10px 20px;display:flex;align-items:center;gap:12px; flex-shrink:0} /* NAO existe mais "esconder ao rolar". A ideia era ganhar altura de conversa, e o comentario antigo aqui dizia que nao havia reflow porque a casca e fixa. Estava errado:
e item de um flex column e
e o flex:1 dele. Puxar o cabecalho com margin-top negativa faz o
CRESCER os mesmos 64px — e crescer um container ja rolado desloca o conteudo debaixo do dedo. No celular isso aparecia como a tela "tremendo"/saltando para cima a cada mudanca de direcao do scroll, e ao voltar o cabecalho o navegador grampeava o scrollTop e comia a ultima mensagem. Alem disso o pedido explicito era cabecalho e rodape ESTRITAMENTE fixos. O cabecalho agora e uma linha so de 44px no celular (icones no lugar dos rotulos), entao a altura que isso economizava deixou de fazer falta. */ html.sem-animacao header{transition:none} /* --- Bussola: TAMANHO ESTRITO, so a agulha gira --------------------- O tamanho mora SO aqui. width/height escritos no proprio elemento SVG sao presentation attributes: perdem para qualquer regra CSS. */ /* --logo: o anel de uso se dimensiona por ela, entao logo e anel nunca saem de sincronia quando um dos dois muda. */ :root{--logo:50px} svg.logo-mentre {width:var(--logo); height:var(--logo)} svg.mini-bussola {width:28px; height:28px} svg.bussola-carregando{width:56px; height:56px} svg.logo-login {width:124px; height:124px} .logo-mentre,.mini-bussola,.bussola-carregando{display:block;flex:0 0 auto} /* A ROSA fica sempre parada. So a AGULHA gira, como num relogio. Por padrao NAO existe animacao declarada; ela nasce no hover. Menos estados, menos jeito de quebrar. */ .compass-rose,.compass-rosa{transform-origin:200px 200px} /* fill-box + center: as quatro pontas da agulha sao simetricas em torno de (32,32), entao o centro da caixa E o centro da bussola. Antes o grupo .compass-needle continha dois pedacos da PROPRIA rosa, sem atributo fill — herdavam preto e sumiam no fundo escuro. A agulha girava; ninguem via. */ /* A agulha nova e ASSIMETRICA (155px de ponta longa contra 77,5 da curta), entao a caixa dela tem centro em (200,161) e nao em (200,200). Com transform-box:fill-box + center o eixo caía nesse 161 e ela girava torta, descrevendo um circulo em vez de rodar no lugar. O eixo agora e escrito em coordenadas do viewBox, que e onde ele de fato esta. */ .compass-needle{transform-origin:200px 200px;will-change:transform} @keyframes sia-girar{from{transform:rotate(0deg)} to{transform:rotate(360deg)}} /* Cabecalho: parada em repouso, gira enquanto o mouse estiver em cima. A classe .girando vem do JS (mouseenter/mouseleave + toque), entao funciona tambem onde :hover nao existe, como no celular. */ .marca-header:hover .logo-mentre .compass-needle, .marca-header:focus-within .logo-mentre .compass-needle, .marca-header.girando .logo-mentre .compass-needle{ animation:sia-girar 4s linear infinite} /* Carregando: a MESMA agulha, so que apressada. Ligado por classList. */ .is-thinking .compass-needle, .loading-active .compass-needle, svg.is-thinking .compass-needle{animation:sia-girar 1.6s linear infinite} /* Nada alem da agulha se mexe: nem escala no SVG, nem a rosa. */ .logo-mentre:hover,.logo-mentre:hover .compass-rose,.logo-mentre:hover .compass-rosa, svg.is-thinking,svg.is-thinking .compass-rose,svg.is-thinking .compass-rosa{transform:none} /* O giro do hover ele PEDE, entao continua — so mais devagar. O que some e o movimento automatico, que ninguem escolheu ver. */ html.sem-animacao .marca-header:hover .logo-mentre .compass-needle,html.sem-animacao .marca-header.girando .logo-mentre .compass-needle{animation-duration:12s} html.sem-animacao .is-thinking .compass-needle,html.sem-animacao .loading-active .compass-needle,html.sem-animacao svg.is-thinking .compass-needle{animation:none} html.sem-animacao svg.is-thinking{animation:sia-pulsa 1.8s ease-in-out infinite} /* ---- Bloco da marca ---- Altura automatica, de proposito: o wordmark cresceu (hierarquia) e os subtextos encolheram (easter egg), entao travar em 64px so ia voltar a quebrar na proxima vez que um dos tres mudar de tamanho. align-items:center no pai centraliza sozinho, sem numero magico. */ .marca-header{display:flex;align-items:center;gap:16px;cursor:default;position:relative} /* --- ANEL DE USO ----------------------------------------------------- Fica ATRAS da bussola, na mesma caixa: a bussola e desenhada por cima e o anel aparece so na borda. O botao e transparente e do tamanho exato do logo, entao o alvo de toque e a propria bussola — sem nenhum elemento novo competindo por espaco no cabecalho. O arco usa stroke-dasharray/offset com pathLength implicito de 2*PI*r: preencher e so mudar o offset, o que anima sozinho pela transicao. */ .anel-uso{position:absolute;left:0;top:50%;transform:translateY(-50%); width:var(--logo,40px);height:var(--logo,40px); padding:0;margin:0;border:0;background:none;cursor:pointer; z-index:1} .anel-svg{width:100%;height:100%;display:block;transform:rotate(-90deg)} .anel-trilho{fill:none;stroke:var(--border);stroke-width:2} .anel-arco{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round; /* 2*PI*22 = 138.23 */ stroke-dasharray:138.23;stroke-dashoffset:138.23; transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1),stroke .3s} /* Cor conta a historia sem texto: dourado normal, ambar avisando, terracota no fim. Nada de vermelho puro — o app nao esta com erro, so cheio. */ /* A cor do arco vem do JS (corDoUso), interpolada — nao ha regra de faixa aqui de proposito: ela sobrescreveria o inline e voltaria aos degraus. */ /* Modo Pro no botao: mesma linguagem do resto, so mais quente. Nao usa vermelho — nao e alerta, e um modo mais caro que a pessoa escolheu. */ #btnModoRaciocinio.modo-pro .ic{color:#E0A63C} #btnModoRaciocinio.modo-pro #rotuloModo{color:#E0A63C;font-weight:600} .anel-uso:hover .anel-arco{filter:brightness(1.25)} .anel-uso:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:50%} html.sem-animacao .anel-arco{transition:none} /* Painel de uso: o mesmo vocabulario dos outros popovers do app. */ .uso-cx{position:absolute;top:calc(100% + 10px);left:0;z-index:200; width:min(300px,86vw);padding:16px 18px; background:var(--panel);border:1px solid var(--border);border-radius:16px; box-shadow:0 14px 40px rgba(0,0,0,.5)} .uso-cx[hidden]{display:none} .uso-titulo{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; color:var(--dim);margin:0 0 12px} /* `block`: o numero grande e a linha de creditos sao duas informacoes de pesos diferentes e ficavam coladas na mesma linha, disputando a leitura. Empilhadas, o olho pega o percentual primeiro e o detalhe depois. */ .uso-num small{display:block;font-size:.78rem;font-weight:400;color:var(--dim); margin:7px 0 0;letter-spacing:.01em} /* Duas medidas empilhadas: hoje e a semana. A do dia vem primeiro porque e a que muda agora — a semana e contexto, o dia e a decisao. */ /* --- CONVITE DE NOTIFICACAO --------------------------------------- Cartao no proprio chat, nao modal: um modal na primeira tela e uma porta fechada antes de a pessoa ver o que o app faz. Aqui ela le, entende o porque, e decide — com o resto do app visivel atras. */ .convite-push{border:1px solid color-mix(in srgb, var(--gold) 45%, transparent); background:color-mix(in srgb, var(--gold) 8%, var(--panel)); border-radius:18px;padding:16px 18px;margin:14px 0 18px; animation:surge .3s cubic-bezier(.2,.8,.2,1)} .convite-topo{display:flex;align-items:center;gap:9px;margin:0 0 8px} .convite-topo .ic{width:18px;height:18px;color:var(--gold)} .convite-topo h4{margin:0;font-size:.95rem;color:var(--text);font-weight:600} .convite-push p{margin:0;font-size:.88rem;line-height:1.55;color:var(--dim)} .convite-acoes{display:flex;gap:10px;margin:14px 0 0;flex-wrap:wrap} .convite-sim{flex:1 1 auto;min-height:44px;padding:0 18px;border:0; border-radius:999px;background:var(--gold);color:var(--bg); font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer; transition:transform .12s,filter .16s} .convite-sim:hover{filter:brightness(1.08)} .convite-sim:active{transform:scale(.97)} .convite-nao{min-height:44px;padding:0 16px;border:1px solid var(--border); border-radius:999px;background:transparent;color:var(--dim); font-family:inherit;font-size:.85rem;cursor:pointer} .convite-nao:hover{color:var(--text);border-color:var(--gold-soft)} .convite-push small{display:block;margin:10px 0 0;font-size:.76rem;color:var(--dim)} .convite-push.ok{border-color:var(--success); background:color-mix(in srgb, var(--success) 10%, var(--panel))} .uso-medida{margin:0 0 14px} .uso-rot{display:flex;justify-content:space-between;align-items:baseline; font-size:.78rem;color:var(--dim);margin:0 0 6px} .uso-rot b{color:var(--text);font-weight:600;font-size:.95rem; font-variant-numeric:tabular-nums} .uso-barra{height:6px;border-radius:3px;background:var(--input);overflow:hidden} .uso-barra i{display:block;height:100%;background:var(--gold);border-radius:3px; transition:width .6s cubic-bezier(.2,.8,.2,1)} .uso-cx[data-faixa="atencao"] .uso-barra i{background:#E0A63C} .uso-cx[data-faixa="critico"] .uso-barra i{background:#C2603C} .uso-linha{display:flex;justify-content:space-between;gap:12px; font-size:.8rem;color:var(--dim);padding:7px 0; border-top:1px solid var(--border)} .uso-linha b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums} .uso-nota{font-size:.72rem;color:var(--dim);line-height:1.5;margin:10px 0 0} .marca-texto{display:flex;flex-direction:column;justify-content:center; gap:3px;min-width:0} .logo-mentre{opacity:.97;width:40px;height:40px; filter:drop-shadow(0 0 11px color-mix(in srgb, var(--gold) 48%, transparent))} @keyframes sia-pulsa{50%{opacity:.55}} .logo-login{filter:drop-shadow(0 0 26px color-mix(in srgb, var(--gold) 35%, transparent)); animation:flutua 6s ease-in-out infinite} .logo-login .compass-needle{animation:sia-girar 14s linear infinite} @keyframes flutua{50%{transform:translateY(-6px)}} /* --- Tela de carregamento do historico --- */ #carregandoConversa{display:none;flex-direction:column;align-items:center; justify-content:center;gap:14px;padding:70px 0;color:var(--dim); font-family:'Geist',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:.75rem;letter-spacing:1px} #carregandoConversa.ativo{display:flex} #dialogo:not(.visivel) ~ #carregandoConversa{display:none} #lateral.ocupado{pointer-events:none;opacity:.55} .eyebrow{font-family:'Geist',system-ui,sans-serif;font-size:.5rem;letter-spacing:.04em; line-height:1;height:auto;font-weight:500;color:var(--gold-soft);opacity:.55; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; /* Easter egg discreto: existe pra quem reparar, nao pra competir com o nome MENTRE. */ margin-right:-1px} /* "MENTRE" em ouro escovado. DUAS camadas de fundo, as duas recortadas no texto: embaixo o ouro fixo, em cima uma faixa de luz estreita que atravessa. Antes o proprio degrade de ouro era deslocado de -180% a 180% em 1,5s — o texto INTEIRO trocava de tom de uma vez, e era isso que lia como pisca-pisca. Agora o ouro nao se move: so a luz corre por cima. */ h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400; font-size:1.75rem;line-height:1;height:auto;margin:0;padding:0; letter-spacing:.15em;display:block;white-space:nowrap; /* Cancela a sobra que o letter-spacing deixa depois da ultima letra. */ margin-right:-.15em; /* "MENTRE" e caixa-alta e nao tem descendentes; o baseline do Instrument Serif nessa escala pede so 1px de ajuste (era 2px numa fonte menor). */ transform:translateY(1px); background-image: linear-gradient(102deg, transparent 38%, rgba(255,246,222,.92) 50%, transparent 62%), linear-gradient(103deg, #6b5320 0%, var(--gold) 18%, #f6e4b4 38%, var(--gold-soft) 52%, #8d7034 70%, var(--gold-soft) 86%, #5d4718 100%); background-size:280% 100%, 100% 100%; background-position:-190% 0, 0 0; background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text;color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))} /* 7 segundos, aceleracao simetrica: a luz entra devagar, atravessa e sai. Como so a camada de brilho se move, ela comeca e termina FORA do texto — nao ha salto ao acabar nem ao tirar o mouse. */ .marca-header:hover h1{animation:sia-lustro 7s cubic-bezier(.42,0,.32,1) infinite} @keyframes sia-lustro{ 0% {background-position:-190% 0, 0 0} 62% {background-position: 290% 0, 0 0} 100% {background-position: 290% 0, 0 0} /* respiro antes de repetir */ } html.sem-animacao .marca-header:hover h1{animation:none} .sessao{font-size:.72rem;line-height:1.4;color:var(--dim);opacity:.85; padding:0 4px 12px;margin-bottom:10px; border-bottom:1px solid var(--border);flex-wrap:wrap; display:flex;align-items:center;gap:5px;white-space:nowrap} nav{margin-left:auto;display:flex;gap:2px;align-items:center;padding:4px; background:var(--sup-1);border:1px solid var(--linha);border-radius:999px} /* O botao de aba e icone + rotulo. No desktop os dois aparecem; no celular o rotulo sai e sobra o icone (ve a media query de 700px). */ nav button{display:inline-flex;align-items:center;gap:7px} nav button .ic{width:17px;height:17px;flex:0 0 auto} /* Pilulas: raio alto ecoa o rx:80 dos cantos do simbolo. */ /* Abas discretas: so a ATIVA tem fundo. Antes as tres tinham caixa e borda, e a linha inteira competia com a conversa — quatro retangulos desenhados para indicar UMA escolha. Inativa agora e texto cinza. */ nav button{transition:background .16s,color .16s,box-shadow .16s; background:transparent;color:var(--dim);border:none; border-radius:999px;font-family:'Geist',system-ui,sans-serif; font-size:.86rem;font-weight:500;letter-spacing:.01em; padding:8px 16px;cursor:pointer} nav button:hover{color:var(--text)} /* A aba ativa e um degrau de luz com fio dourado, e nao uma pilula de ouro macico: o ouro cheio gritava mais que o conteudo da propria aba e brigava com o botao de enviar, que e a acao dourada da tela. */ nav button.ativo{background:var(--sup-3);color:var(--text);font-weight:600; box-shadow:inset 0 0 0 1px rgba(209,171,116,.24)} nav button.ativo .ic{color:var(--gold-soft)} nav button:focus-visible{outline:2px solid var(--gold-soft);outline-offset:1px} .corpo{flex:1;display:flex;min-height:0} main{flex:1;overflow-y:auto;padding:28px 32px 24px} /* Ocupa a tela inteira. A assimetria vem do RITMO interno (recuos, pesos), nao de espremer o conteudo numa coluna. */ .aba{display:none;width:100%;margin:0} .aba.visivel{display:block;animation:abaEntra .2s ease-out} @keyframes abaEntra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} html.sem-animacao .aba.visivel{animation:none} /* Coluna de leitura. Solta na tela inteira, uma resposta no desktop corria 1.100px por linha — o dobro do que o olho acompanha sem se perder na volta. 760px dao ~85 caracteres; a barra de digitacao usa a mesma largura, entao pergunta e resposta ficam no mesmo eixo. Agenda e Financas sao paineis de consulta: ganham mais largura, mas com teto. */ #dialogo{width:100%;max-width:760px;margin:0 auto} #agenda,#financas,#documentos{max-width:1200px;margin:0 auto} /* --- barra lateral de conversas --- */ /* Fechada, a lateral tinha 0px de largura mas mantinha a borda de 1px: era a linha vertical solta na borda esquerda de todas as telas. Borda transparente nao resolve — ela ainda ocupa 1px e o fundo do aside aparece por baixo. A borda so existe com a lateral aberta. */ #lateral{width:0;overflow:hidden;background:var(--sup-1); border-right:0 solid var(--linha);transition:width .22s ease;flex-shrink:0} #lateral.aberta{width:264px;border-right-width:1px} #lateral .cx{padding:14px 12px 12px;width:264px;display:flex;flex-direction:column} /* A lista de conversas rola DENTRO da lateral. O aside tem overflow:hidden (e o que faz a animacao de largura), e o .cx crescia alem da tela sem ter onde rolar: da decima conversa para baixo, nao havia como chegar. contain: bater no fim da lista nao arrasta o chat que esta atras. */ #lateral .cx{height:100%;box-sizing:border-box;overflow-y:auto; overscroll-behavior:contain;touch-action:pan-y} #btnConfigLateral,#btnDocsLateral{display:flex;align-items:center;gap:10px;width:100%; background:transparent;border:none;border-radius:9px;padding:9px 10px; color:var(--txt-2);cursor:pointer;font-family:inherit;font-size:.86rem; margin-bottom:2px;transition:background .14s,color .14s} #btnConfigLateral:hover,#btnDocsLateral:hover{background:var(--sup-2);color:var(--text)} #btnConfigLateral .ic,#btnDocsLateral .ic{width:17px;height:17px;flex-shrink:0;color:var(--dim)} /* Solido, e nao tracejado: borda pontilhada le como "area vazia, solte algo aqui", e nao como o botao principal do menu. */ #btnNovaConversa{width:100%;display:flex;align-items:center;gap:8px;text-align:left; background:var(--sup-2);color:var(--text);border:1px solid var(--linha);border-radius:10px; padding:10px 12px;cursor:pointer;font-family:inherit;font-size:.86rem;font-weight:500; margin-bottom:12px;transition:border-color .16s,background .16s} #btnNovaConversa:hover{border-color:rgba(209,171,116,.45);background:var(--sup-3)} #lateral h4{font-family:'Geist',system-ui,sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.01em; color:var(--dim);margin:18px 0 6px 10px} .conv{position:relative;padding:9px 28px 9px 10px;border-radius:9px;cursor:pointer; font-size:.8rem;color:var(--dim);margin-bottom:1px;transition:background .14s} .conv:hover{background:var(--sup-2);color:var(--text)} .conv.atual{background:var(--sup-3);color:var(--text)} .conv b{display:block;color:var(--text);font-size:.84rem;font-weight:500; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .conv small{font-size:.72rem;color:var(--dim)} /* Quem esta logado desce para o pe do menu, como em todo app com conta: e informacao de referencia, nao a primeira coisa a ler ao abrir o menu. */ #lateral .sessao{order:9;margin:auto 0 0;padding:14px 10px 2px;border-top:1px solid var(--linha); border-bottom:0;font-size:.8rem;color:var(--txt-2);opacity:1} #lateral .sessao b{font-weight:500} #lblSessao{display:none} #listaConversas{margin-bottom:16px} .conv .x{position:absolute;right:6px;top:50%;transform:translateY(-50%); opacity:0;background:transparent;border:none;color:var(--dim); cursor:pointer;font-size:.85rem;line-height:1;padding:3px 5px; border-radius:5px;transition:opacity .14s,color .14s} .conv:hover .x{opacity:1} .conv .x:hover{color:#e5686d;background:var(--bg)} /* --- calendario: headers de mes --- */ .mes-divisor{display:flex;align-items:baseline;gap:12px;margin:24px 0 10px; cursor:pointer;user-select:none} .mes-divisor:hover h3{color:var(--gold)} .mes-divisor .seta{color:var(--dim);font-size:.7rem;transition:transform .18s} .mes-divisor.fechado .seta{transform:rotate(-90deg)} .grupo-itens{overflow:hidden;transition:max-height .25s ease, opacity .2s} .grupo-itens.fechado{max-height:0!important;opacity:0} .mes-divisor h3{font-family:'Geist',system-ui,sans-serif;font-style:normal;font-weight:600;font-size:.88rem; color:var(--txt-2);margin:0} .mes-divisor .linha-fina{flex:1;height:1px;background:var(--linha)} .mes-divisor small{font-family:'Geist',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:.62rem; letter-spacing:.01em;color:var(--dim)} /* 10px entre falas do mesmo lado, 22px quando o remetente muda: o olho agrupa o que e do mesmo interlocutor e separa a troca de turno. */ .linha{display:flex;margin-bottom:10px} .linha + .linha.trocou{margin-top:12px} @keyframes surge{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .bolha code{background:var(--input);padding:1px 5px;border-radius:4px; font-family:'Geist',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:.85em} .bolha pre{background:var(--input);padding:10px 12px;border-radius:8px; overflow-x:auto;font-family:'Geist',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:.82em;margin:6px 0} .bolha strong{color:var(--gold-soft);font-weight:600} /* Item de lista com recuo pendurado: a segunda linha de um item longo alinha com o texto, e nao embaixo do marcador. */ .bolha .item{display:grid;grid-template-columns:1.3em minmax(0,1fr);margin:3px 0} .bolha .item > .m{color:var(--gold-soft);font-variant-numeric:tabular-nums} .bolha .par{display:block;height:.7em} /* Estado de retomada: o servidor detectou que a resposta era uma promessa vazia, apagou o que estava escrito e mandou o MENTRE executar de verdade. Enquanto isso, a bolha mostra a legenda do passo atual em vez de texto. */ .bolha .retomando{display:block;opacity:.55;font-style:italic;font-size:.9em; animation:pulsando 1.5s ease-in-out infinite} @keyframes pulsando{0%,100%{opacity:.38}50%{opacity:.72}} /* Link dentro da resposta. Antes o markdown [nome](url) aparecia cru na tela e a URL solta era texto morto: um roteiro cheio de "reserve aqui" sem nada clicavel. */ .bolha a{color:var(--gold-soft);text-decoration:none; border-bottom:1px solid rgba(176,141,87,.42); transition:border-color .18s ease,color .18s ease; word-break:break-word} .bolha a:hover{color:var(--gold);border-bottom-color:var(--gold)} .bolha{animation:surge .26s cubic-bezier(.2,.8,.2,1); letter-spacing:.1px;line-height:1.62; font-size:.95rem;white-space:pre-wrap;word-wrap:break-word} /* ------------------------------------------------------------------ DOIS PESOS, NAO DOIS RETANGULOS. Antes os dois lados eram cartao: mesmo raio, mesma sombra, mesma borda, so mudando a cor de fundo. Uma conversa vira entao uma pilha de caixas alternadas — a leitura fica dura e o app parece formulario, nao dialogo. Agora so o que ELE diz e objeto. A resposta do MENTRE nao tem caixa: ela e o proprio texto da pagina, do jeito que uma resposta lida deveria ser. Isso resolve dois problemas de uma vez — o visual engessado, e o fato de que resposta longa dentro de bolha estreita e desconfortavel de ler. A distincao de quem falou passa a vir de posicao (dele a direita, do MENTRE ocupando a coluna) e de peso, nao de moldura. ------------------------------------------------------------------ */ .user{margin-left:auto;max-width:80%; padding:10px 16px; background:color-mix(in srgb, var(--gold) 8%, var(--sup-3)); border:1px solid color-mix(in srgb, var(--gold) 16%, transparent); /* Redondo de verdade e sem rabicho: 22px em todos os cantos le como balao de conversa, nao como celula de tabela. O canto reto de 6px que existia aqui era o que mais puxava a cara de "projeto". */ border-radius:20px; box-shadow:none} /* Sem fundo, sem borda, sem sombra, sem teto de largura apertado. */ .sia{background:none;border:0;border-radius:0;box-shadow:none; padding:2px 2px 2px 0;max-width:92%; /* Um fio de contraste a mais que a bolha dele: e o texto que a pessoa realmente le, e sem caixa ele precisa se sustentar sozinho. */ color:var(--text); font-size:.97rem;line-height:1.68} /* Respiro entre turnos. Sem moldura, o espaco em branco e o unico separador — apertado ele vira parede de texto. */ .linha:has(.sia){margin-bottom:14px} .linha:has(.user){margin-bottom:16px} .audio-wrap{display:inline-flex;align-items:center;gap:8px;padding:4px 8px 4px 4px; background:var(--panel);border:1px solid var(--border);border-radius:20px;margin:4px 0 12px} .audio-wrap audio{height:34px;width:210px} .spd,.ouvir{background:var(--input);color:var(--gold-soft);border:1px solid var(--border); border-radius:12px;font-family:'Geist',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:.68rem;font-weight:700; padding:4px 10px;cursor:pointer} .spd:hover,.ouvir:hover{border-color:var(--gold)} .ouvir{margin-bottom:12px} /* Botao de ouvir a mensagem: so o icone, sem rotulo e sem emoji. Era um "🔊 Ouvir" em caixa-alta que aparecia embaixo de TODA resposta — um bloco de texto repetido a cada mensagem, competindo com o conteudo e destoando do conjunto de icones de traco usado no resto do app. Como acao secundaria e repetitiva, ele deve ser reconhecivel e discreto, nao legivel a distancia. O aria-label mantem o nome para leitor de tela. */ /* Disco preenchido, e nao contorno. Antes era uma borda de 1px em cor `--dim` e, no celular, NEM a borda — so um triangulo apagado boiando sob o texto. Com a resposta do MENTRE agora sem moldura, um contorno fraco no meio de texto corrido nao le como botao: e por isso que parte dos testers dizia que o botao "sumiu" mesmo com ele na tela. Um disco solido tem forma propria e sobrevive tanto ao fundo escuro quanto ao claro. */ .btn-ouvir{width:32px;height:32px;flex-shrink:0;margin:-4px 0 22px; display:inline-flex;align-items:center;justify-content:center; background:transparent;border:1px solid var(--border); border-radius:50%;color:var(--txt-2);cursor:pointer;padding:0; transition:color .16s,border-color .16s,background .16s,transform .12s} .btn-ouvir:hover{color:var(--gold-soft);border-color:var(--gold);background:var(--ouro-tinta)} .btn-ouvir:active{transform:scale(.94)} .btn-ouvir .ic{width:15px;height:15px;margin-left:1px} .btn-ouvir[data-ativo="1"]{color:var(--bg);background:var(--gold);border-color:var(--gold)} /* No celular o disco cresce ate o minimo confortavel de toque (44px), em vez de perder a borda e virar so o icone. */ @media (max-width:768px){ .btn-ouvir{width:40px;height:40px} .btn-ouvir:hover{color:var(--gold-soft);background:transparent} .btn-ouvir .ic{width:17px;height:17px} } footer{background:var(--bg);padding:6px 24px 12px;position:relative} /* A conversa se dissolve antes da barra, em vez de ser cortada a faca na borda de cima do rodape. */ footer::before{content:'';position:absolute;left:0;right:0;top:-28px;height:28px;pointer-events:none; background:linear-gradient(to bottom,rgba(11,17,23,0),var(--bg))} /* ================================================================== BARRA DE ENTRADA — uma linha só. Antes eram duas linhas e todo botao tinha borda propria. No celular aquilo virava uma grade de caixinhas competindo com a conversa: seis retangulos delimitados empilhados embaixo do texto. Aqui a regra e a oposta — um unico objeto (a pilula do campo) e, ao redor dele, icones SEM caixa. A area de toque continua com 44px; ela so nao e desenhada. ================================================================== */ /* A barra inteira e o objeto: campo e botoes dentro de uma capsula so, na mesma coluna de 760px da conversa. Antes o campo era uma pilula solta de 1.100px e os icones boiavam do lado de fora, nas duas pontas. */ .barra{width:100%;max-width:760px;margin:0 auto;display:flex;align-items:center;gap:2px; background:var(--sup-2);border:1px solid var(--linha);border-radius:28px;padding:4px; transition:border-color .16s,box-shadow .16s} .barra:focus-within{border-color:rgba(176,141,87,.5);box-shadow:0 0 0 4px rgba(176,141,87,.08)} /* Botao-fantasma: so o icone. O alvo de 44px vem do tamanho do botao, nao de uma borda visivel — e a regra da Apple sobre area de toque, nao sobre moldura. */ .acao{ flex:0 0 auto;width:44px;height:44px;padding:0; display:inline-flex;align-items:center;justify-content:center; background:transparent;border:none;outline:none;border-radius:50%; color:var(--dim);cursor:pointer;-webkit-tap-highlight-color:transparent; transition:color .16s,background .16s,transform .12s} .acao .ic{width:21px;height:21px;pointer-events:none} .acao:hover{color:var(--gold-soft);background:var(--sup-3)} .acao:active{transform:scale(.9)} .acao:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} /* Pilula central: fundo levemente acima do fundo da tela, sem borda. */ .barra input[type=text]{ flex:1 1 auto;min-width:0; background:transparent;color:var(--text); border:none;outline:none;border-radius:22px; padding:12px 8px;margin:0 2px;font-size:.95rem;line-height:1.3; text-overflow:ellipsis} .barra input[type=text]::placeholder{color:var(--dim);opacity:.75} .acoes-cluster{flex:0 0 auto;display:flex;align-items:center;gap:2px} /* O rodape sobe exatamente a altura que o teclado cobriu (ve ajustarAoTeclado). A transicao e curta e so no padding: animar `bottom` brigaria com o proprio movimento do teclado e produziria o solavanco que queremos evitar. */ /* `max()`, e nao soma. Com viewport-fit=cover o env(safe-area-inset-bottom) deixou de ser 0 e passou a valer os ~34px da barra de gestos do iPhone. Somando aos 10px de respiro dava 44px de rodape vazio abaixo da barra de digitacao — o "espaco morto" que apareceu. O inset JA E o respiro naquele trecho: onde ele existe, ele basta; onde nao existe, valem os 10px. */ /* DUAS propriedades, de proposito. `padding-bottom` cuida do safe-area, e `max()` e nao soma: com viewport-fit=cover o env(safe-area-inset-bottom) deixou de ser 0 e passou a valer os ~34px da barra de gestos do iPhone; somado aos 10px de respiro dava 44px de rodape vazio abaixo da barra de digitacao — o "espaco morto". O inset JA E o respiro naquele trecho: onde existe, basta; onde nao existe, valem os 10px. A altura do teclado continua somada aqui, em `padding` e nao em `margin`: `margin-bottom` no