/* Login do UniChat.
 *
 * UNICHAT-MOBILE-UX-CONFORMANCE-01 (Owner Visual Review) — reescrito para seguir a GRAMÁTICA
 * VISUAL do login homologado do UniCursos (`.uni-login-page`, courses-design-system.css:3640+),
 * auditada em código e em renderização real. O que foi portado é a estrutura, não o branding:
 *
 *   - página inteira em fundo escuro com degradê diagonal + dois brilhos radiais;
 *   - coluna da marca transparente sobre esse fundo, com grade sutil mascarada (::before) e
 *     anel decorativo (::after);
 *   - MARCA SEM TILE/CARD: a variante branca do lockup (unichat-white.png) sobre o fundo
 *     escuro — o antigo quadrado branco existia só porque não havia variante clara da marca;
 *   - título com sublinhado curto em degradê, eyebrow em azul claro;
 *   - painel de acesso em "vidro escuro" (fundo translúcido + blur + borda azulada), não um
 *     bloco branco;
 *   - campos escuros translúcidos com ícone à esquerda e anel de foco azul;
 *   - CTA em degradê do primário, cantos do raio canônico e sombra colorida.
 *
 * Cores derivadas do UniChat (--crm-color-primary #1c7ed6 e o azul-marinho do chrome), não
 * copiadas do UniCursos. Só texto e logo são do produto.
 *
 * Global (não scoped) de propósito: a trava de altura usa `html:has(...)`, que precisa alcançar
 * elementos fora do componente. As páginas de conta (/primeiro-acesso, /recuperar-senha,
 * /redefinir-senha) reaproveitam estas classes e são mais altas — por isso a trava de altura
 * só vale no layout de duas colunas (>=1024) e o painel rola internamente.
 */

@media (min-width: 1024px) {
    html:has(.unichat-login-page),
    body:has(.unichat-login-page) {
        height: 100%;
        overflow: hidden;
    }
}

.unichat-login-page {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 460px);
    /* Arte de marca do UniChat como fundo da página. O degradê por cima mantém o texto
       legível sobre qualquer região da imagem e amarra a arte à paleta do produto. */
    background-color: #071a33;
    /* A ARTE é um PNG recortado (só os elementos, fundo transparente), então não existe
       retângulo de imagem e não há borda para aparecer: nenhuma costura é possível em
       nenhuma largura. A cor do fundo, que antes vinha embutida na imagem, agora é do
       degradê da página — que é quem também garante o contraste do texto.
       O offset horizontal é em `vw`, NÃO em `%`: com porcentagem o valor é fração da sobra
       (container - imagem), NEGATIVA quando a imagem é maior que a página — o deslocamento
       sairia invertido. */
    background-image:
        /* Véu POR CIMA da arte (primeira camada = mais acima), só do lado do texto: a arte
           é clara e translúcida e passaria por cima do título. À direita ele zera, para o
           motivo aparecer inteiro. */
        linear-gradient(103deg, rgba(6, 14, 28, 0.66) 0%, rgba(6, 16, 32, 0.30) 26%, rgba(6, 18, 36, 0.06) 42%, rgba(6, 18, 36, 0) 50%),
        url("/img/brand/unichat-login-art.png?v=20260902-9"),
        radial-gradient(circle at 22% 18%, rgba(28, 126, 214, 0.22), transparent 34%),
        radial-gradient(circle at 78% 82%, rgba(34, 211, 255, 0.12), transparent 36%),
        linear-gradient(145deg, #060d18 0%, #0a2c4e 55%, #0d4a78 100%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: auto, auto 85%, auto, auto, auto;
    background-position: center, right 26vw bottom, center, center, center;
    color: #ffffff;
    font-family: var(--uni-font-family);
}

@media (min-width: 1024px) {
    .unichat-login-page {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }
}

/* ---------- Coluna da marca ---------- */

.unichat-login-brand {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 43px;
    overflow: hidden;
    padding-top: clamp(18px, 2.8vw, 44px);
    padding-right: clamp(32px, 6vw, 80px);
    padding-bottom: clamp(18px, 2.8vw, 44px);
    padding-left: clamp(32px, 6vw, 96px);
    background: transparent;
    color: #ffffff;
}

/* Lockup vertical: símbolo em cima, wordmark embaixo, ambos no mesmo eixo central —
   independente de o bloco de texto estar alinhado à esquerda (desktop) ou centralizado
   (mobile). */
/* Os assets foram recortados no bounding box do conteúdo (sem padding transparente), então
   este gap é o espaço VISUAL real entre símbolo e wordmark — antes o PNG carregava ~14% de
   folga embaixo do símbolo e ~26% em cima do wordmark, e os dois pareciam soltos. */
.unichat-login-brand-lockup {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.unichat-login-brand-wordmark {
    display: block;
    width: 176px;      /* wordmark 5.24:1 -> ~34px de altura */
    height: auto;
}

/* A marca fica direto sobre o fundo, sem card. A linha do grid é explícita para a altura em
   100% da <img> não virar dependência cíclica (mesma armadilha documentada no
   `.uni-login-brandmark` do UniCursos). O símbolo é quadrado (1254x1254). */
.unichat-login-brand-mark {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    width: 124px;
    height: 117px;     /* símbolo 1.064:1 */
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.unichat-login-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.unichat-login-brand-copy {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin-top: 0;
}

.unichat-login-eyebrow {
    margin: 0 0 16px;
    color: #8ec9f7;
    font-size: var(--uni-font-size-xs);
    font-weight: 750;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.unichat-login-brand-copy h1 {
    position: relative;
    max-width: 560px;
    margin: 0 0 18px;
    padding-bottom: 14px;
    color: #ffffff;
    font-size: clamp(2.1rem, 3.6vw, 3.5rem);
    font-weight: 720;
    letter-spacing: -0.045em;
    line-height: 1.12;
}

/* O `<FocusOnNavigate Selector="h1">` do Blazor (Routes.razor) move o foco para o título a
   cada navegação, para que leitores de tela anunciem a página. Esse foco é PROGRAMÁTICO e
   não deve desenhar anel — o título não é alcançável por Tab. A navegação real por teclado
   continua indicada em qualquer elemento interativo (:focus-visible dos campos/botões). */
.unichat-login-brand-copy h1:focus {
    outline: none;
}

.unichat-login-brand-copy h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #4dabf7 0%, #4dabf7 55%, transparent 100%);
}

.unichat-login-brand-copy > p:last-child {
    max-width: 480px;
    margin: 0;
    color: rgba(236, 246, 255, 0.76);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.55;
}

/* ---------- Painel de acesso (vidro escuro) ---------- */

/* Altura do painel acompanha o conteúdo (não estica a página): o respiro vem do espaçamento
   interno entre os grupos do formulário, não de altura vazia. */
.unichat-login-panel {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    min-height: 0;
    align-self: center;
    justify-content: center;
    max-height: calc(100dvh - 2 * clamp(16px, 2.6vw, 34px));
    margin: clamp(16px, 2.6vw, 34px) clamp(24px, 4vw, 48px);
    padding: clamp(22px, 2.6vw, 32px);
    overflow-y: auto;
    border: 1px solid rgba(119, 184, 255, 0.28);
    border-radius: 22px;
    background: rgba(6, 26, 48, 0.76);
    box-shadow:
        0 30px 90px rgba(2, 12, 28, 0.48),
        0 0 64px rgba(28, 126, 214, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.unichat-login-panel-inner {
    width: 100%;
    max-width: 410px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.unichat-login-form-header span {
    color: #8ec9f7;
    font-size: var(--uni-font-size-xs);
    font-weight: 750;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.unichat-login-form-header h2 {
    margin: 4px 0 6px;
    color: #ffffff;
    font-size: 1.45rem;
    font-weight: 720;
    letter-spacing: -0.025em;
}

.unichat-login-form-header p {
    margin: 0;
    color: rgba(236, 246, 255, 0.62);
    font-size: var(--uni-font-size-sm);
    line-height: 1.4;
}

/* ---------- Formulário ---------- */

.unichat-login-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

/* Cada par label+campo é um grupo: o respiro entre grupos vem daqui (o gap do flex é o
   espaço label->campo, que é curto de propósito). */
.unichat-login-form .app-field-label {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--uni-font-size-sm);
    font-weight: 650;
}

.unichat-login-form .app-field-label:first-of-type {
    margin-top: 0;
}

.unichat-login-page .app-control {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: var(--uni-radius-md);
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    font-size: var(--uni-font-size-md);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.unichat-login-page .app-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.unichat-login-page .app-control:focus,
.unichat-login-page .app-control:focus-visible {
    border-color: #75c7ff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.2);
}

/* Ícone à esquerda do campo, como no login homologado.

   UNICHAT-WEB-MVP-ATENDIMENTO-CHAT-COMPOSER-FIDELITY-01 (Cut 5B, corretiva A) — o ícone era
   background-image do próprio <input>. O autofill do Chrome impõe, com !important internos,
   background-color claro (#E8F0FE), background-image:none e cor de texto preta: o campo virava um
   retângulo branco sem ícone (screenshot 092101 do Owner). Correção sem hack frágil:
   1. o ícone vira um irmão posicionado (.unichat-field-icon), imune ao autofill;
   2. o fundo é "pintado" por box-shadow inset com a cor SÓLIDA equivalente ao campo sobre o card,
      que o autofill não sobrescreve; -webkit-text-fill-color mantém o texto branco; caret idem;
   3. transition longa em background-color neutraliza o flash inicial do autofill.
   Resultado: o campo preenchido pelo gerenciador de senhas parece o mesmo campo UniChat preenchido
   à mão (screenshot 092136). */
.unichat-icon-field {
    position: relative;
    display: flex;
}

.unichat-icon-field .app-control {
    flex: 1;
    padding-left: 42px;
}

.unichat-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: #6aa6dd;
    pointer-events: none;
    z-index: 1;
}

.unichat-login-page #email,
.unichat-login-page #password,
.unichat-login-page #confirmPassword {
    padding-left: 42px;
}

.unichat-login-page .app-control:-webkit-autofill,
.unichat-login-page .app-control:-webkit-autofill:hover,
.unichat-login-page .app-control:-webkit-autofill:focus,
.unichat-login-page .app-control:autofill {
    -webkit-box-shadow: 0 0 0 1000px #182a40 inset, inset 0 1px 0 rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 1000px #182a40 inset, inset 0 1px 0 rgba(255, 255, 255, 0.04);
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    border-color: rgba(255, 255, 255, 0.17);
    border-radius: var(--uni-radius-md);
    transition: background-color 9999s ease-in-out 0s;
}

.unichat-login-page .app-control:-webkit-autofill:focus,
.unichat-login-page .app-control:autofill:focus {
    border-color: #75c7ff;
    -webkit-box-shadow: 0 0 0 1000px #182a40 inset, 0 0 0 3px rgba(77, 166, 255, 0.2);
    box-shadow: 0 0 0 1000px #182a40 inset, 0 0 0 3px rgba(77, 166, 255, 0.2);
}

/* Páginas que ainda não têm o ícone como irmão (primeiro acesso / redefinir senha) continuam
   com o ícone em background-image — nelas o autofill de senha não se aplica ao fluxo principal. */
.unichat-login-page #email:not(.unichat-icon-field .app-control) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aa6dd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 17px 17px;
}

.unichat-login-page #password:not(.unichat-icon-field .app-control),
.unichat-login-page #confirmPassword {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aa6dd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 17px 17px;
}

.unichat-password-field {
    position: relative;
    display: flex;
}

.unichat-password-field .app-control {
    flex: 1;
    padding-right: 2.75rem;
}

.unichat-password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    margin: 0;
    padding: 7px;
    border: 0;
    border-radius: var(--uni-radius-sm);
    background: transparent;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.56);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.unichat-password-toggle:hover,
.unichat-password-toggle:focus-visible {
    background: rgba(117, 199, 255, 0.1);
    color: #8ec9f7;
}

.unichat-password-toggle .icon-eye-off {
    display: none;
}

.unichat-password-toggle.is-visible .icon-eye {
    display: none;
}

.unichat-password-toggle.is-visible .icon-eye-off {
    display: inline-flex;
}

.unichat-checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.68);
    font-size: var(--uni-font-size-sm);
    font-weight: 550;
}

.unichat-checkbox input[type="checkbox"] {
    accent-color: #2f8bea;
}

/* UNICHAT-AUTH-PERSISTENT-SESSION-01 — "Continuar conectado". A classe .unichat-checkbox já existia
   neste arquivo com a cor e o tamanho do painel escuro; o que faltava era o ritmo vertical do
   formulário e o foco visível. Ambos escopados na página, como já é feito para .app-field-label
   logo acima — nenhum token novo, nenhuma classe nova. */
.unichat-login-form .unichat-checkbox {
    margin-top: 16px;
    cursor: pointer;
}

.unichat-login-form .unichat-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* O anel de foco fica no rótulo inteiro porque é ele que a pessoa vê como o controle. */
.unichat-login-form .unichat-checkbox:has(input:focus-visible) {
    outline: 2px solid #8ec9f7;
    outline-offset: 3px;
    border-radius: var(--uni-radius-sm);
}

/* CTA: degradê do primário do UniChat, raio canônico e sombra colorida. */
.unichat-login-page .unichat-login-submit {
    width: 100%;
    min-height: 46px;
    margin-top: 24px;
    padding: 0 1.5rem;
    border: 0;
    border-radius: var(--uni-radius-md);
    background: linear-gradient(135deg, var(--uni-color-primary), var(--uni-color-primary-hover));
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(20, 94, 163, 0.32);
    font-weight: 700;
    transition: box-shadow 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}

.unichat-login-page .unichat-login-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--uni-color-primary), var(--uni-color-primary-hover));
    filter: brightness(1.06);
    box-shadow: 0 15px 30px rgba(20, 94, 163, 0.38);
    transform: translateY(-1px);
}

.unichat-login-page .unichat-login-submit:focus-visible {
    outline: 2px solid #8ec9f7;
    outline-offset: 2px;
}

.unichat-login-submit-loading {
    display: none;
}

.unichat-login-form.is-submitting .unichat-login-submit {
    opacity: 0.78;
    pointer-events: none;
}

.unichat-login-form.is-submitting .unichat-login-submit-ready {
    display: none;
}

.unichat-login-form.is-submitting .unichat-login-submit-loading {
    display: inline;
}

/* ---------- Apoio / links ---------- */

.unichat-login-support {
    margin: 0;
    color: rgba(236, 246, 255, 0.62);
    font-size: var(--uni-font-size-sm);
    line-height: 1.4;
}

/* O segundo parágrafo de apoio ganha respiro extra e um fio separando do bloco de ação. */
.unichat-login-support + .unichat-login-support {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.unichat-login-support a {
    color: #8ec9f7;
    font-weight: 650;
    text-decoration: none;
}

.unichat-login-support a:hover,
.unichat-login-support a:focus-visible {
    text-decoration: underline;
}

.unichat-login-alert {
    background: rgba(225, 72, 72, 0.16);
    color: #ffc9c9;
    border: 1px solid rgba(225, 72, 72, 0.38);
    border-radius: var(--uni-radius-sm);
    padding: .75rem;
    font-size: var(--uni-font-size-sm);
    margin: 0;
}

.unichat-login-alert.success {
    background: rgba(26, 156, 94, 0.16);
    border-color: rgba(26, 156, 94, 0.38);
    color: #b2f2d0;
}

/* Listas de requisitos/ajuda das páginas de conta herdam a cor do painel escuro. */
.unichat-login-panel-inner ul,
.unichat-login-panel-inner li,
.unichat-login-panel-inner p:not(.unichat-login-alert) {
    color: rgba(236, 246, 255, 0.72);
}

/* ---------- Tablet / mobile (contrato canônico 1023 / 767) ---------- */

@media (max-width: 1023px) {
    /* A arte é panorâmica: numa coluna estreita, `cover` centralizado cortaria justamente as
       bolhas. Ancorar à direita mantém o motivo visível atrás do conteúdo, e o degradê fica
       mais opaco porque aqui o texto passa POR CIMA da parte ilustrada. */
    .unichat-login-page {
        grid-template-columns: 1fr;
        /* Linhas por conteúdo + `align-content: center`: o conjunto marca -> título -> painel
           fica como um bloco centralizado na tela, com o respiro dividido entre topo e base,
           em vez de tudo encostado no topo. Se o conteúdo passar da altura (páginas de conta),
           o grid cresce e a página rola normalmente. */
        grid-template-rows: auto auto;
        align-content: center;
        /* Mesma arte recortada, na faixa superior atrás do hero. Sem fundo próprio, ela não
           tem borda — o degradê casado em 52% que existia só para esconder a emenda saiu.
           O véu vertical vem POR CIMA (primeira camada) para a arte não competir com o
           lockup e o título, mantendo o mesmo peso visual discreto da versão aprovada. */
        background-image:
            linear-gradient(180deg, rgba(7, 26, 51, 0.14) 0%, rgba(7, 24, 46, 0.38) 26%, rgba(7, 22, 42, 0.70) 46%, rgba(7, 26, 51, 0.90) 62%),
            url("/img/brand/unichat-login-art-sm.png?v=20260902-9"),
            radial-gradient(circle at 76% 12%, rgba(28, 126, 214, 0.18), transparent 46%),
            linear-gradient(180deg, #0a2744 0%, #08213a 42%, #071a33 72%);
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
        background-position: center, right -14% top 1%, center, center;
        background-size: auto, auto 40%, auto, auto;
    }

    /* Hero centralizado no mobile/tablet: marca, "UNICHAT" e o título no mesmo eixo.
       Todas as medidas verticais são `clamp(piso, Xvh, teto)`: a página se distribui pela
       altura REAL disponível — encolhe junto em telas baixas sem encavalar e sem ficar
       miúdo, e cresce até o teto em telas altas. */
    .unichat-login-brand {
        min-height: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: clamp(8px, 1.6vh, 16px);
        padding: clamp(12px, 2.6vh, 26px) clamp(20px, 6vw, 52px) clamp(6px, 1.2vh, 12px);
    }

    .unichat-login-brand-lockup {
        gap: clamp(3px, 0.6vh, 6px);
    }

    .unichat-login-brand-mark {
        width: clamp(66px, 11vh, 110px);
        height: clamp(62px, 10.3vh, 103px);   /* símbolo 1.064:1 */
        flex: 0 0 auto;
    }

    .unichat-login-brand-wordmark {
        width: clamp(118px, 19.5vh, 196px);   /* wordmark 5.24:1 */
    }

    .unichat-login-brand-copy {
        max-width: 560px;
        margin-inline: auto;
    }

    .unichat-login-brand-copy h1 {
        max-width: 100%;
        margin-bottom: clamp(8px, 1.4vh, 14px);
        padding-bottom: clamp(6px, 1.1vh, 12px);
        font-size: clamp(1.25rem, 2.9vh + 0.6vw, 2.4rem);
    }

    /* Com o texto centralizado, o traço de acento acompanha o eixo. */
    .unichat-login-brand-copy h1::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .unichat-login-brand-copy > p:last-child {
        max-width: 100%;
        margin-inline: auto;
        font-size: 0.92rem;
    }

    .unichat-login-panel {
        min-height: auto;
        align-items: stretch;
        margin: 8px 18px 16px;
        padding: 22px 24px;
        box-shadow: 0 24px 70px rgba(2, 12, 28, 0.44);
    }
}

@media (max-width: 767px) {
    /* O lockup do UniChat é horizontal (530x470), ao contrário do vertical do UniCursos: em
       390px a composição lado-a-lado deixaria a marca minúscula e o título espremido. A
       gramática do hero (compacto no topo, painel logo abaixo) é preservada; só a direção
       do eixo muda para acomodar a proporção da marca. */
    .unichat-login-brand {
        padding-inline: 18px;
    }

    .unichat-login-brand-copy > p:last-child,
    .unichat-login-form-header span {
        display: none;
    }

    .unichat-login-brand-copy h1 {
        margin: 0;
        padding: 0;
        font-size: 1.45rem;
        line-height: 1.12;
    }

    .unichat-login-brand-copy h1::after {
        display: none;
    }

    .unichat-login-eyebrow {
        margin-bottom: clamp(4px, 0.9vh, 10px);
    }

    /* O painel também respira por altura: em telas baixas encolhe o padding e os vãos antes
       de qualquer coisa transbordar; em telas altas volta ao espaçamento cheio. */
    .unichat-login-panel {
        margin: clamp(6px, 1.2vh, 14px) 12px clamp(10px, 2vh, 20px);
        padding: clamp(16px, 2.4vh, 26px) clamp(16px, 4vw, 22px);
    }

    .unichat-login-panel-inner {
        gap: clamp(10px, 1.8vh, 18px);
    }

    .unichat-login-form-header h2 {
        margin: 0 0 3px;
        font-size: clamp(1.15rem, 2.2vh, 1.45rem);
    }

    .unichat-login-form-header p {
        margin: 0;
        font-size: 0.8rem;
    }

    .unichat-login-form {
        gap: clamp(4px, 0.8vh, 8px);
        margin-top: 0;
    }

    .unichat-login-form .app-field-label {
        margin-top: clamp(9px, 1.8vh, 18px);
    }

    .unichat-login-page .app-control {
        min-height: clamp(40px, 5.2vh, 46px);
    }

    .unichat-login-page .unichat-login-submit {
        min-height: clamp(42px, 5.6vh, 48px);
        margin-top: clamp(12px, 2.6vh, 26px);
    }

    .unichat-login-support + .unichat-login-support {
        padding-top: clamp(10px, 1.8vh, 18px);
    }
}

/* ---------- Aviso em modal (padrão G27) sobre o fundo escuro do login ----------
   A anatomia `.uni-notice-*` vem de crm-knowledge.css, desenhada para superfície CLARA.
   Aqui ela é reafinada para o login: mesmo card, mesma estrutura, cores do vidro escuro. */

.unichat-login-page .uni-notice-modal {
    border-color: rgba(119, 184, 255, 0.28);
    background: rgba(10, 30, 54, 0.96);
    box-shadow:
        0 30px 90px rgba(2, 12, 28, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.unichat-login-page .uni-notice-modal h2 {
    color: #ffffff;
}

.unichat-login-page .uni-notice-message {
    color: rgba(236, 246, 255, 0.78);
}

.unichat-login-page .uni-notice-eyebrow {
    color: #8ec9f7;
}

.unichat-login-page .uni-notice-scrim {
    background: rgba(3, 10, 22, 0.62);
}

/* O CTA do aviso é o botão canônico, no mesmo raio do restante do login. */
.unichat-login-page .uni-notice-actions .app-button {
    border-radius: var(--uni-radius-md);
}

@media (max-width: 767px) {
    .unichat-login-page .uni-notice-modal {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 12px;
        padding: 20px;
        text-align: center;
    }

    .unichat-login-page .uni-notice-actions {
        width: 100%;
    }

    .unichat-login-page .uni-notice-actions .app-button {
        width: 100%;
        justify-content: center;
    }
}