/* ========================================================================= /diagnostico — Nora · Clicksoft · Rio Innovation Week Camada sobre /apps/style.css. Identidade Roxo Profundo (LP de produto), Manrope, lime com escassez. Mobile-first, experiência de chat. ========================================================================= */ :root { --nora-bg: #0d0921; --nora-bg-2: #160d30; --nora-bg-3: #180d3a; --nora-card: rgba(80, 57, 140, .16); --nora-card-2: rgba(22, 13, 48, .55); --nora-line: rgba(255, 255, 255, .10); --nora-line-soft: rgba(255, 255, 255, .07); --nora-lime: #DCFC17; --nora-lime-soft: rgba(220, 252, 23, .12); --nora-purple: #6941c6; --nora-text: #ffffff; --nora-muted: rgba(255, 255, 255, .84); --nora-faint: rgba(255, 255, 255, .66); --nora-radius: 22px; --nora-vh: 100dvh; /* altura da visual viewport (JS atualiza c/ teclado aberto) */ } /* [hidden] deve sempre vencer o display dos componentes (chat/composer/steps só aparecem depois do clique no CTA). */ .nora-app [hidden] { display: none !important; } /* ---- Base / layout -------------------------------------------------------- */ /* Cor sólida no : o "canvas" (tudo que fica fora da caixa do body — no iOS, a faixa entre o fim do body travado e a borda da tela, atrás do teclado) é pintado pelo html quando ele tem background próprio; sem isso ele herda o do body, que usa background-attachment: fixed e o Safari não repinta quando a viewport muda de tamanho — é daí que vinha a faixa branca. */ html { background-color: var(--nora-bg); } body.nora-body { margin: 0; min-height: 100dvh; font-family: 'Manrope', system-ui, sans-serif; color: var(--nora-text); background: radial-gradient(1200px 800px at 15% -10%, #1c1147 0%, transparent 55%), radial-gradient(1000px 700px at 100% 0%, #241056 0%, transparent 50%), linear-gradient(180deg, var(--nora-bg) 0%, #0b0720 100%); background-attachment: fixed; -webkit-font-smoothing: antialiased; } .nora-app { position: relative; display: flex; flex-direction: column; min-height: 100dvh; max-width: 1080px; margin: 0 auto; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); } /* No modo chat, trava a altura na visual viewport: a conversa rola por dentro e o campo de texto fica sempre logo acima do teclado (sem precisar scrollar). */ .nora-app.is-chatting { height: var(--nora-vh, 100dvh); min-height: 0; overflow: hidden; } /* Diagnóstico entregue: destrava a viewport. O resultado vira uma seção normal da página (scroll do navegador), bem mais confiável no mobile do que o scroll interno do thread com teclado. */ .nora-app.is-finished { height: auto; min-height: 100dvh; overflow: visible; } .nora-app.is-finished .nora-main, .nora-app.is-finished .nora-chat { flex: 0 0 auto; min-height: 0; } .nora-app.is-finished .nora-thread { flex: 0 0 auto; min-height: 0; overflow: visible; } /* Trava o documento inteiro na altura da visual viewport durante o chat (nada de position:fixed/inset — isso quebrou o layout no Safari iOS, o dimensionamento de fixed lá não acompanha a visual viewport). O ponto crítico é a ALTURA, não só o overflow: no iOS o 100dvh não encolhe quando o teclado abre, então antes só o .nora-app diminuía e o documento continuava alto — sobrava conteúdo rolável, o Safari rolava pra revelar o textarea e o JS rolava de volta pro topo, os dois puxando pros dois lados. Era isso que fazia a tela descer sozinha ao abrir o teclado. Preso a var(--nora-vh) (que o JS atualiza pela visualViewport), o documento passa a ter exatamente a altura visível: não sobra nada pra rolar e não há briga. Destravado de novo em .is-finished. */ html.nora-kb-lock, body.nora-kb-lock { height: var(--nora-vh, 100dvh); min-height: 0; max-height: var(--nora-vh, 100dvh); overflow: hidden; overscroll-behavior: none; /* /apps/style.css põe scroll-behavior: smooth no html. Isso transformava o scrollTo(0,0) de correção numa ANIMAÇÃO — a página deslizando sozinha em vez de um ajuste instantâneo e invisível. Aqui a correção tem que ser um salto seco. O smooth do resultado final é pedido no JS (scrollIntoView). */ scroll-behavior: auto; } /* Durante o chat a altura do documento muda a cada frame da animação do teclado, e o background-attachment: fixed do iOS não acompanha (deixa retângulo branco). Aqui ele é dispensável: o body já tem exatamente o tamanho da tela, e a camada decorativa fixa continua vindo do .nora-bg. */ body.nora-kb-lock { background-attachment: scroll; } /* Fundo tech sutil (nós/conexões do cenário do stand) */ .nora-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 0) 0 0 / 34px 34px, radial-gradient(560px 380px at 82% 8%, rgba(220, 252, 23, .07), transparent 60%), radial-gradient(620px 460px at 8% 92%, rgba(105, 65, 198, .18), transparent 60%); -webkit-mask-image: radial-gradient(120% 120% at 50% 30%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 120% at 50% 30%, #000 55%, transparent 100%); } .nora-main { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; } /* ---- Topbar mínima -------------------------------------------------------- */ .nora-topbar { display: flex; align-items: center; gap: 12px; padding: 16px 4px 14px; position: sticky; top: 0; z-index: 10; } /* Faixa frosted do topo estendida por toda a largura da página (o conteúdo do header segue alinhado à coluna central). position:fixed + left/right:0 usa a largura visível do viewport, sem gerar scroll horizontal (evita 100vw). */ .nora-topbar::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 66px; background: linear-gradient(180deg, rgba(13, 9, 33, .92) 58%, rgba(13, 9, 33, 0)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: -1; pointer-events: none; } .nora-brand__logo { display: block; height: 26px; width: auto; } .nora-topbar__tag { font-size: 12px; font-weight: 600; color: var(--nora-faint); padding-left: 12px; border-left: 1px solid var(--nora-line); letter-spacing: .01em; } @media (max-width: 380px) { .nora-topbar__tag { display: none; } } .nora-main { flex: 1; display: flex; flex-direction: column; } /* ---- Eyebrow / highlight -------------------------------------------------- */ .nora-eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--nora-lime); } .nora-hl { color: var(--nora-lime); position: relative; } /* ========================================================================= TELA 1 — Apresentação da Nora + entrada ========================================================================= */ .nora-intro { flex: 1; display: flex; align-items: center; justify-content: center; padding: 18px 0 28px; } .nora-hero { width: 100%; display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; } /* --- Persona / avatar --- */ .nora-persona { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .nora-persona__avatar { position: relative; flex-shrink: 0; width: 92px; height: 92px; border-radius: 50%; border: 2px solid rgba(220, 252, 23, .55); box-shadow: 0 0 0 6px rgba(220, 252, 23, .08), 0 14px 30px rgba(0, 0, 0, .4); } /* A foto se recorta em círculo por conta própria (border-radius no img), então o container NÃO usa overflow:hidden — assim o status "online" não é cortado. */ .nora-persona__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; border-radius: 50%; } .nora-persona__status { position: absolute; right: 4px; bottom: 4px; z-index: 2; width: 15px; height: 15px; border-radius: 50%; background: #34e07a; border: 2.5px solid #0d0921; animation: nora-pulse-green 2s infinite; } .nora-persona__id { display: flex; flex-direction: column; gap: 3px; } .nora-persona__name { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 9px; } .nora-persona__online { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #34e07a; padding: 3px 8px; border-radius: 99px; background: rgba(52, 224, 122, .12); border: 1px solid rgba(52, 224, 122, .32); } .nora-persona__role { font-size: 13.5px; color: var(--nora-muted); } .nora-intro__title { margin: 0 0 14px; font-size: clamp(27px, 6vw, 38px); font-weight: 800; line-height: 1.14; letter-spacing: -0.01em; } .nora-intro__desc { margin: 0 0 20px; font-size: 15.5px; line-height: 1.6; color: var(--nora-muted); max-width: 48ch; } /* --- Preview cards: o que a pessoa recebe --- */ .nora-previewcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .nora-pcard { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 14px; background: linear-gradient(145deg, rgba(80, 57, 140, .20), rgba(22, 13, 48, .34)); border: 1px solid var(--nora-line); transition: transform .25s ease, border-color .25s ease; } .nora-pcard:hover { transform: translateY(-2px); border-color: rgba(220, 252, 23, .28); } .nora-pcard__ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--nora-lime-soft); color: var(--nora-lime); border: 1px solid rgba(220, 252, 23, .22); } .nora-pcard__ic svg { width: 21px; height: 21px; } .nora-pcard__tx { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--nora-muted); line-height: 1.4; } .nora-pcard__tx strong { font-size: 15px; font-weight: 700; color: #fff; } /* --- Card do formulário --- */ .nora-formcard { position: relative; width: 100%; border-radius: var(--nora-radius); background: rgba(18, 12, 40, .80); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(18px); overflow: hidden; padding: 26px 22px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .42); } .nora-formcard__accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--nora-lime), #a8f000); } .nora-formcard__lead { margin: 0 0 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--nora-lime); } /* Tablet retrato: empilhado, mas centralizado (não estica na largura toda) */ @media (min-width: 640px) and (max-width: 899px) { .nora-hero { max-width: 600px; margin: 0 auto; } .nora-persona__avatar { width: 100px; height: 100px; } } /* Tablet paisagem + desktop: duas colunas (pitch + formulário). O formulário tem largura mínima garantida pra não espremer o CTA; pitch pode encolher (min-width:0) e o título quebra em vez de roubar largura. */ @media (min-width: 900px) { .nora-hero { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 48px; } .nora-hero__pitch { min-width: 0; } .nora-intro { padding: 0 0 20px; } } /* ---- Form ---------------------------------------------------------------- */ .nora-form { display: flex; flex-direction: column; gap: 14px; } .nora-field { display: flex; flex-direction: column; gap: 6px; } .nora-field label { font-size: 13px; font-weight: 600; color: var(--nora-muted); } .nora-optional { color: var(--nora-faint); font-weight: 500; } .nora-field input { width: 100%; height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .98); color: #101828; font-family: inherit; font-size: 16px; /* evita zoom no iOS */ transition: border-color .2s ease, box-shadow .2s ease; } .nora-field input::placeholder { color: #98a2b3; } .nora-field input:focus { outline: none; border-color: var(--nora-lime); box-shadow: 0 0 0 3px rgba(220, 252, 23, .28); } .nora-field__error { display: none; font-size: 12.5px; color: #ffb4a8; } .nora-field.is-invalid .nora-field__error, .nora-field__error--consent.is-visible { display: block; } .nora-field__error--consent { display: none; margin-top: -4px; } /* intl-tel-input dentro do campo escuro */ .nora-field .iti { width: 100%; } .nora-field .iti__tel-input, .nora-field .iti input[type=tel] { padding-left: 52px; } .iti__dropdown-content { color: #101828; } .nora-consent { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; line-height: 1.5; color: var(--nora-muted); cursor: pointer; margin-top: 2px; padding: 4px 0; /* área de toque maior no mobile */ } .nora-consent input { margin-top: 1px; width: 24px; height: 24px; /* alvo de toque confortável */ accent-color: var(--nora-lime); flex-shrink: 0; cursor: pointer; } .nora-start { margin-top: 8px; width: 100%; justify-content: center; padding-left: 24px; padding-right: 24px; font-size: 15px; line-height: 1.25; min-height: 50px; text-align: center; } .nora-intro__foot { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--nora-faint); } /* ========================================================================= TELA 2 — Chat ========================================================================= */ .nora-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 760px; margin: 0 auto; padding-top: 6px; } /* Stepper de 3 etapas — mostra o que a IA está fazendo */ .nora-steps { display: flex; align-items: center; gap: 8px; padding: 12px 2px 14px; border-bottom: 1px solid var(--nora-line-soft); margin-bottom: 8px; } .nora-step { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--nora-faint); white-space: nowrap; transition: color .3s ease; } .nora-step__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); flex-shrink: 0; transition: background .3s ease, box-shadow .3s ease; } .nora-step:not(:last-child)::after { content: ""; flex: 1; height: 1px; min-width: 10px; background: rgba(255, 255, 255, .12); margin-left: 3px; } .nora-step.is-active { color: #fff; } .nora-step.is-active .nora-step__dot { background: var(--nora-lime); box-shadow: 0 0 0 4px rgba(220, 252, 23, .16); animation: nora-pulse 1.6s infinite; } .nora-step.is-done { color: var(--nora-muted); } .nora-step.is-done .nora-step__dot { background: var(--nora-lime); } @media (max-width: 560px) { .nora-step__label { display: none; } .nora-step.is-active .nora-step__label { display: inline; } .nora-steps { gap: 6px; } } .nora-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 6px 2px 18px; overflow-y: auto; /* Sem scroll-behavior: smooth aqui. O efeito de digitação chama scrollDown() a cada palavra (~20ms) e cada chamada reiniciava a animação suave, deixando a conversa descendo em câmera lenta, sempre atrás do texto. Salto direto é imperceptível quando o conteúdo cresce palavra a palavra. */ overscroll-behavior: contain; } /* ---- Mensagens ------------------------------------------------------------ */ .nora-msg { display: flex; gap: 10px; max-width: 100%; animation: nora-rise .32s ease both; } .nora-msg--user { flex-direction: row-reverse; } .nora-msg__avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 13px; font-weight: 800; background: var(--nora-lime-soft); color: var(--nora-lime); border: 1px solid rgba(220, 252, 23, .32); margin-top: 2px; } .nora-msg__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; } .nora-msg--user .nora-msg__avatar { background: rgba(255, 255, 255, .10); color: var(--nora-muted); border-color: var(--nora-line); } .nora-msg__bubble { padding: 12px 15px; font-size: 15px; line-height: 1.55; border-radius: 18px; max-width: 82%; min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .nora-msg--nora .nora-msg__bubble { background: linear-gradient(145deg, rgba(80, 57, 140, .28), rgba(22, 13, 48, .40)); border: 1px solid var(--nora-line); border-top-left-radius: 6px; color: #f3f0fb; } .nora-msg--user .nora-msg__bubble { background: var(--nora-lime); color: #0d0921; font-weight: 500; border-top-right-radius: 6px; } /* ---- Indicador "digitando" ------------------------------------------------ */ .nora-typing { display: inline-flex; gap: 5px; align-items: center; padding: 4px 2px; } .nora-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--nora-faint); animation: nora-blink 1.3s infinite ease-in-out both; } .nora-typing span:nth-child(2) { animation-delay: .18s; } .nora-typing span:nth-child(3) { animation-delay: .36s; } /* ---- Card "análise em andamento" ------------------------------------------ */ .nora-analysis { align-self: flex-start; width: min(100%, 88%); border-radius: 18px; border: 1px solid rgba(220, 252, 23, .22); background: linear-gradient(145deg, rgba(80, 57, 140, .22), rgba(22, 13, 48, .42)); padding: 16px 16px 14px; margin-left: 44px; animation: nora-rise .32s ease both; } .nora-analysis__title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--nora-lime); margin: 0 0 12px; } .nora-analysis__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--nora-lime); box-shadow: 0 0 0 0 rgba(220, 252, 23, .55); animation: nora-pulse 1.6s infinite; } .nora-analysis__item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--nora-muted); padding: 5px 0; opacity: 0; transform: translateX(-6px); animation: nora-item-in .4s ease forwards; } .nora-analysis__check { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--nora-lime-soft); color: var(--nora-lime); font-size: 11px; font-weight: 800; } /* ========================================================================= Resultado do diagnóstico ========================================================================= */ .nora-result { align-self: stretch; border-radius: var(--nora-radius); border: 1px solid var(--nora-line); background: linear-gradient(160deg, rgba(80, 57, 140, .20), rgba(22, 13, 48, .50)); overflow: hidden; animation: nora-rise .4s ease both; } .nora-result__head { padding: 18px 18px 16px; border-bottom: 1px solid var(--nora-line-soft); } .nora-result__badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 5px 11px; border-radius: 99px; margin-bottom: 12px; } .nora-result__badge--sim { background: var(--nora-lime-soft); color: var(--nora-lime); border: 1px solid rgba(220,252,23,.3); } .nora-result__badge--parcial { background: rgba(255,255,255,.08); color: #ffe9a8; border: 1px solid rgba(255,233,168,.28); } .nora-result__badge--nao { background: rgba(255,255,255,.06); color: var(--nora-muted); border: 1px solid var(--nora-line); } .nora-result__verdict { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; } .nora-result__block { padding: 15px 18px; border-bottom: 1px solid var(--nora-line-soft); } .nora-result__label { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--nora-faint); } .nora-result__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: #efeafb; } /* Diagrama de sistemas (fluxo) */ .nora-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; } .nora-flow__step { font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--nora-line); color: #efeafb; } .nora-flow__step--ai { background: var(--nora-lime-soft); border-color: rgba(220, 252, 23, .32); color: var(--nora-lime); } .nora-flow__arrow { color: var(--nora-faint); font-size: 14px; } /* Impacto */ .nora-impact { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .nora-impact__num { font-size: 30px; font-weight: 800; line-height: 1; color: var(--nora-lime); } .nora-impact__unit { font-size: 14px; color: var(--nora-muted); } .nora-benefits { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; } .nora-benefits li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--nora-muted); line-height: 1.45; } .nora-benefits li::before { content: ""; flex-shrink: 0; margin-top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--nora-lime); box-shadow: 0 0 0 3px rgba(220, 252, 23, .18); } .nora-complexity { display: inline-flex; align-items: center; gap: 8px; } .nora-complexity__dot { width: 9px; height: 9px; border-radius: 50%; } .nora-complexity__dot--baixa { background: #63e6a0; } .nora-complexity__dot--media { background: var(--nora-lime); } .nora-complexity__dot--alta { background: #ffb27a; } .nora-complexity__val { font-weight: 700; } /* CTAs */ .nora-cta-row { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; } .nora-cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .nora-cta--primary { background: var(--nora-lime); color: #0d0921; border: none; } .nora-cta--primary:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(220, 252, 23, .28); } .nora-cta--secondary { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .22); } .nora-cta--secondary:hover { transform: translateY(-3px); border-color: rgba(220, 252, 23, .5); } /* Ghost: convite discreto (perfil DIY) — sem peso comercial */ .nora-cta--ghost { background: transparent; color: var(--nora-muted); border: none; height: auto; padding: 6px 8px; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .28); } .nora-cta--ghost:hover { color: #fff; } .nora-tools li::before { background: var(--nora-purple); box-shadow: 0 0 0 3px rgba(105, 65, 198, .18); } /* Bloco "onde entra desenvolvimento" — gancho técnico, leve destaque lime */ .nora-dev { background: rgba(220, 252, 23, .045); border-left: 2px solid rgba(220, 252, 23, .45); } .nora-dev .nora-result__label { color: var(--nora-lime); } /* Captura de e-mail pós-diagnóstico */ .nora-emailcap { align-self: stretch; border-radius: 18px; border: 1px solid var(--nora-line); background: linear-gradient(145deg, rgba(80, 57, 140, .20), rgba(22, 13, 48, .42)); padding: 18px 18px 16px; margin-top: 4px; animation: nora-rise .32s ease both; } .nora-emailcap__title { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: #fff; } .nora-emailcap__sub { margin: 0 0 14px; font-size: 13.5px; color: var(--nora-muted); line-height: 1.5; } .nora-emailcap__form { display: flex; gap: 8px; } .nora-emailcap__form input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .98); color: #101828; font: 16px/1 'Manrope', sans-serif; transition: border-color .2s ease, box-shadow .2s ease; } .nora-emailcap__form input:focus { outline: none; border-color: var(--nora-lime); box-shadow: 0 0 0 3px rgba(220, 252, 23, .28); } .nora-emailcap__form button { flex-shrink: 0; height: 46px; padding: 0 20px; border: none; border-radius: 10px; background: var(--nora-lime); color: #0d0921; font: 700 14px/1 'Manrope', sans-serif; cursor: pointer; transition: transform .2s ease, opacity .2s ease; } .nora-emailcap__form button:hover:not(:disabled) { transform: translateY(-2px); } .nora-emailcap__form button:disabled { opacity: .6; cursor: default; } .nora-emailcap__msg { margin: 4px 0 0; font-size: 14px; color: var(--nora-lime); font-weight: 600; line-height: 1.5; } @media (max-width: 440px) { .nora-emailcap__form { flex-direction: column; } .nora-emailcap__form button { width: 100%; } } /* ========================================================================= Composer ========================================================================= */ /* Sem position: sticky. O composer já é o último item do flex column (o thread leva o flex: 1), então o sticky não mudava layout nenhum — só promovia o elemento a camada de composição própria, e era ela que o iOS rasterizava errado quando o teclado redimensionava a viewport: o quadrado branco atrás do botão de enviar. Nada rola por baixo do composer (o thread tem overflow próprio e termina acima dele), então o gradiente segue só como acabamento. */ .nora-composer { display: flex; align-items: flex-end; gap: 10px; padding: 10px 0 calc(6px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, var(--nora-bg) 55%, rgba(13, 9, 33, 0)); } .nora-composer textarea { flex: 1; resize: none; max-height: 128px; padding: 13px 15px; border-radius: 16px; border: 1px solid var(--nora-line); background: rgba(255, 255, 255, .06); color: #fff; font-family: inherit; font-size: 16px; line-height: 1.4; transition: border-color .2s ease, box-shadow .2s ease; } .nora-composer textarea::placeholder { color: var(--nora-faint); } .nora-composer textarea:focus { outline: none; border-color: rgba(220, 252, 23, .5); box-shadow: 0 0 0 3px rgba(220, 252, 23, .16); } .nora-composer textarea:disabled { opacity: .5; } /* Enquanto a Nora responde, o textarea segue habilitado (desabilitar fecha o teclado no iOS) — só fica esmaecido junto com o botão de enviar. Pela cor, e não por opacity, pelo mesmo motivo do .nora-send: opacity promove a camada. */ .nora-composer.is-waiting textarea { color: var(--nora-faint); } .nora-send { /* appearance: none é obrigatório aqui. Sem isso o iOS mantém o desenho nativo do