/* Um único stylesheet para o app inteiro (sem outro <link> concorrente), então empilhar tudo em
   camadas aqui dentro não muda nenhuma disputa de cascata existente — cada seletor continua
   vencendo exatamente como antes. O que a camada compra é estrutura: um token nunca é
   acidentalmente sobrescrito por um componente carregado depois, porque tokens e base sempre
   perdem para components por definição de ordem de camada, não por especificidade de seletor. */
@layer tokens, base, components;

@layer tokens {
    :root {
        color-scheme: light;

        /* ---------- superfícies ---------- */
        --canvas: #f3f1eb;
        --surface: #fffefa;
        --surface-strong: #ffffff;
        --surface-hover: #f9faf8;

        /* ---------- texto ---------- */
        --ink: #17201b;
        --ink-muted: #667068;
        --placeholder: #666d68;

        /* ---------- bordas ---------- */
        /* --line é decorativa (divisórias, bordas de painel estático) e pode ficar discreta.
           Qualquer borda que delimita um controle de fato precisa do mínimo não textual da
           WCAG 1.4.11 (3:1) — é isso que --line-control garante. */
        --line: #d9dcd5;
        --line-hover: #9fa8a1;
        --line-control: #828983;
        --panel-line: #c8cec8;
        --control-line: #c5cbc6;
        --control-line-soft: #b7beb8;

        /* ---------- marca ---------- */
        --green: #176b45;
        --green-dark: #0f4d32;
        --green-900: #0b3e28;
        --green-soft: #e4f0e8;

        /* Realce do cartão da integração preferida. Tokens próprios porque a receita não
           sobrevive à troca de tema: no claro é um verde pálido com borda discreta; no
           escuro a mesma dupla vira um bloco saturado, e o que funciona é quase nenhum
           fundo, com a barra lateral carregando o sinal. */
        --tile-preferred-bg: #eaf4ee;
        --tile-preferred-border: #b7d8c5;
        --tile-preferred-bar: var(--green);
        --on-accent: #ffffff;
        --on-soft-accent: #0f4d32;
        /* O acento quando ele é *texto* ou ícone sobre uma superfície comum, e não preenchimento.
           Os dois papéis não podem compartilhar um token: --green-dark é escuro o bastante para
           receber texto branco por cima, o que é exatamente o que o torna ilegível como texto no
           tema escuro (1,64:1 sobre a superfície). */
        --accent-ink: #0f4d32;
        /* Botão primário (Salvar, Enviar, Entrar, Comprar...). Tokens próprios porque o par
           --green/--green-dark não sobrevive à troca de tema: no escuro o --green-dark fica a
           1,6:1 da superfície e o botão some, então lá ele vira verde claro com texto escuro.
           --green-dark continua existindo para bordas, anel de foco e outros usos. */
        --button-primary: #0f4d32;
        --button-primary-hover: #176b45;
        --on-button-primary: #ffffff;
        --cta-shadow: rgb(15 77 50 / 28%);
        --cta-shadow-strong: rgb(15 77 50 / 34%);
        /* A bolha do usuário precisa do seu próprio par de tokens, e não de --green-dark:
           aquele é preenchimento de botão e serve bem sobre o canvas claro, mas no tema
           escuro fica a 1,78:1 do fundo — a bolha praticamente some. Separar permite
           clarear só a bolha no escuro sem mexer nos botões nem no anel de foco. */
        --user-bubble: #0f4d32;
        --on-user-bubble: #ffffff;
        --assistant-ring: #b9c6bd;
        --glow-accent: rgba(23, 107, 69, 0.26);
        --grid-tint: rgba(23, 107, 69, 0.035);

        /* ---------- semântico ---------- */
        --danger: #a43b35;
        --danger-bg: #fbeceb;
        --danger-border: #eabdb8;
        --status-idle: #a7ada8;
        --status-live: #20a464;
        --status-live-ring: rgba(32, 164, 100, 0.12);
        --warn-bg: #fff8d8;
        --warn-border: #d2c89d;
        --warn-ink: #514717;

        /* ---------- controles ----------
           A seta do <select> é desenhada com dois gradientes, e não com um SVG embutido, porque
           assim ela é currentcolor: acompanha o tema claro e o escuro, o estado desabilitado e o
           alto contraste do sistema sem precisar de uma segunda cópia da imagem por tema.
           Em tokens porque os três seletores do app têm alturas diferentes e só o espaçamento
           muda entre eles — a seta em si tem de ser a mesma em todos. */
        --select-arrow: linear-gradient(45deg, transparent 50%, currentcolor 50%),
            linear-gradient(135deg, currentcolor 50%, transparent 50%);
        --select-arrow-size: 5px 5px, 5px 5px;

        /* ---------- utilidades de superfície ---------- */
        --code-bg: #f6f7f4;
        --scrim: rgba(23, 32, 27, 0.45);
        --glass-header: rgba(255, 254, 250, 0.94);
        --glass-footer: rgba(243, 241, 235, 0.96);

        /* ---------- Google (cores de marca do provedor, fixas nos dois temas) ---------- */
        --google-ink: #27312b;
        --google-line: #cfd3ce;

        /* ---------- escada de elevação ----------
           Uma sombra só (--shadow) servia para cinco alturas diferentes ao mesmo tempo — nada
           media "mais perto" de nada. Três níveis, usados deliberadamente: elev-1 para controles
           discretos, elev-2 para o que hoje já usava a sombra original (sem mudança visual),
           elev-3 só para o modal, que é a única superfície que deveria dominar a tela. */
        --shadow-1: 0 2px 8px rgba(23, 32, 27, 0.06);
        --shadow-2: 0 12px 36px rgba(23, 32, 27, 0.09);
        --shadow-3: 0 24px 64px rgba(15, 23, 19, 0.22);

        /* ---------- escala de tipo (títulos e texto de destaque) ----------
           Cobre os tamanhos que eram escolhidos caso a caso; legendas e rótulos pequenos (11–14px)
           permanecem literais nesta passada — já são consistentes dentro do próprio contexto e o
           ganho de tokenizá-los não paga o risco mecânico de reescrever ~20 regras a mais. */
        /* Texto pequeno (legendas, rótulos, metadados). Em toque cada degrau sobe 1px — ver
           o bloco (pointer: coarse) abaixo: 11px de legenda num celular a 30cm do rosto é o
           que faz a tela parecer "apertada". */
        --text-2xs: 11px;
        --text-xs: 12px;
        --text-sm: 13px;
        --text-heading-sm: 1.25rem;
        --text-heading-md: 1.5rem;
        --text-heading-lg: 1.75rem;
        --text-display-compact: 2.625rem;
        --text-display-sm: clamp(2.125rem, 6vw, 3.25rem);
        --text-display-lg: clamp(2.125rem, 6vw, 3.5rem);
    }

    @media (pointer: coarse) {
        :root {
            --text-2xs: 12px;
            --text-xs: 13px;
            --text-sm: 14px;
        }
    }

    /* Preferência do sistema: aplica-se sempre que a pessoa não escolheu um tema à mão. */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            color-scheme: dark;

            --canvas: #12181a;
            --surface: #1a2226;
            --surface-strong: #202b30;
            --surface-hover: #26333a;

            --ink: #e9efe9;
            --ink-muted: #9fada3;
            --placeholder: #87958d;

            --line: #26332f;
            --line-hover: #46605c;
            --line-control: #69837a;
            --panel-line: #35453f;
            --control-line: #384843;
            --control-line-soft: #3c4c46;

            --green: #4fb489;
            --green-dark: #0f4d32;
            --green-900: #08301f;
            /* Clareado: a #17301f ficava a 1,14:1 da superfície e o hover dos menus sumia. */
            --green-soft: #214634;
            --tile-preferred-bg: rgba(79, 180, 137, 0.07);
            --tile-preferred-border: #2c4a3c;
            --tile-preferred-bar: var(--green);
            --on-accent: #ffffff;
            --on-soft-accent: #8fe0bd;
            --accent-ink: #4fb489;
            --button-primary: #3ea377;
            --button-primary-hover: #5fc497;
            --on-button-primary: #08301f;
            --cta-shadow: rgb(79 180 137 / 32%);
            --cta-shadow-strong: rgb(79 180 137 / 45%);
            /* Clareada em relação ao tema claro: sobre o canvas escuro ela sobe de 1,78:1
               para 2,75:1, e o texto branco ainda fica em 6,5:1. */
            --user-bubble: #226b4b;
            --on-user-bubble: #ffffff;
            --assistant-ring: #345048;
            --glow-accent: rgba(79, 180, 137, 0.3);
            --grid-tint: rgba(79, 180, 137, 0.05);

            --danger: #e8897c;
            --danger-bg: #3a201d;
            --danger-border: #6b3a34;
            --status-idle: #8a978d;
            --status-live: #4fc98c;
            --status-live-ring: rgba(79, 201, 140, 0.18);
            --warn-bg: #3a3218;
            --warn-border: #6b5d2e;
            --warn-ink: #f0dfa0;

            --code-bg: #16201e;
            --scrim: rgba(0, 0, 0, 0.6);
            --glass-header: rgba(26, 34, 38, 0.85);
            --glass-footer: rgba(18, 24, 26, 0.9);

            --google-ink: #dfe6e1;
            --google-line: #3a4a44;

            --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.28);
            --shadow-2: 0 12px 36px rgba(0, 0, 0, 0.38);
            --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.55);
        }
    }

    /* Preferência explícita da pessoa (guardada no perfil), que sempre vence a do sistema —
       inclusive quando ela pede escuro num sistema claro. */
    :root[data-theme="dark"] {
        color-scheme: dark;

        --canvas: #12181a;
        --surface: #1a2226;
        --surface-strong: #202b30;
        --surface-hover: #26333a;

        --ink: #e9efe9;
        --ink-muted: #9fada3;
        --placeholder: #87958d;

        --line: #26332f;
        --line-hover: #46605c;
        --line-control: #69837a;
        --panel-line: #35453f;
        --control-line: #384843;
        --control-line-soft: #3c4c46;

        --green: #4fb489;
        --green-dark: #0f4d32;
        --green-900: #08301f;
        --green-soft: #214634;
        --tile-preferred-bg: rgba(79, 180, 137, 0.07);
        --tile-preferred-border: #2c4a3c;
        --tile-preferred-bar: var(--green);
        --on-accent: #ffffff;
        --on-soft-accent: #8fe0bd;
        --accent-ink: #4fb489;
        --button-primary: #3ea377;
        --button-primary-hover: #5fc497;
        --on-button-primary: #08301f;
        --cta-shadow: rgb(79 180 137 / 32%);
        --cta-shadow-strong: rgb(79 180 137 / 45%);
        --user-bubble: #226b4b;
        --on-user-bubble: #ffffff;
        --assistant-ring: #345048;
        --glow-accent: rgba(79, 180, 137, 0.3);
        --grid-tint: rgba(79, 180, 137, 0.05);

        --danger: #e8897c;
        --danger-bg: #3a201d;
        --danger-border: #6b3a34;
        --status-idle: #8a978d;
        --status-live: #4fc98c;
        --status-live-ring: rgba(79, 201, 140, 0.18);
        --warn-bg: #3a3218;
        --warn-border: #6b5d2e;
        --warn-ink: #f0dfa0;

        --code-bg: #16201e;
        --scrim: rgba(0, 0, 0, 0.6);
        --glass-header: rgba(26, 34, 38, 0.85);
        --glass-footer: rgba(18, 24, 26, 0.9);

        --google-ink: #dfe6e1;
        --google-line: #3a4a44;

        --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.28);
        --shadow-2: 0 12px 36px rgba(0, 0, 0, 0.38);
        --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.55);
    }
}

@layer base {
    * {
        box-sizing: border-box;
    }

    html,
    body {
        height: 100%;
    }

    body {
        margin: 0;
        overflow: hidden;
        color: var(--ink);
        background:
            linear-gradient(var(--grid-tint) 1px, transparent 1px),
            linear-gradient(90deg, var(--grid-tint) 1px, transparent 1px),
            var(--canvas);
        background-size: 32px 32px;
        font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    }

    /* select faltava aqui, e era essa a origem das "letras menores": sem font: inherit o
       navegador desenha o campo com a fonte de sistema dele (~13px, outra família), então no
       formulário do perfil Idioma e Região saíam visivelmente menores que o input de Nome logo
       acima. Dois dos três seletores do app corrigiam isso por conta própria; o do perfil não. */
    button,
    textarea,
    input,
    select {
        font: inherit;
    }

    button {
        cursor: pointer;
    }

    /* Toque: manipulation elimina o atraso de 300ms/zoom por duplo toque que alguns navegadores
       móveis ainda aplicam a controles, e o realce azul do WebKit ao tocar destoa do tema — o
       estado :active/:focus-visible de cada controle é quem responde ao toque. */
    button,
    a,
    label,
    select,
    [role="button"] {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Aparência comum a todo <select>: o desenho nativo muda de forma entre Windows, macOS e
       Android, e o campo destoava dos inputs ao lado dele em cada plataforma. Com appearance:
       none a moldura passa a ser nossa e a seta vem dos tokens, igual nos três seletores.
       Os componentes ajustam só espaçamento, cor de fundo e borda por cima disto. */
    select {
        max-width: 100%;
        padding: 10px 34px 10px 12px;
        border: 1px solid var(--line-control);
        border-radius: 9px;
        color: var(--ink);
        background-color: var(--surface);
        background-image: var(--select-arrow);
        background-repeat: no-repeat;
        background-position: right 15px center, right 10px center;
        background-size: var(--select-arrow-size);
        appearance: none;
        cursor: pointer;
        text-overflow: ellipsis;
        transition: border-color 140ms ease;
    }

    select:hover:not(:disabled) {
        border-color: var(--line-hover);
    }

    select:disabled {
        cursor: default;
        opacity: 0.6;
    }

    /* A lista aberta é desenhada pelo sistema a partir das cores do próprio <select>, e as
       <option> não herdam as dele em todos os navegadores: sem isto o app no tema escuro abre um
       menu claro. */
    option {
        color: var(--ink);
        background-color: var(--surface);
    }

    /* input e select faltavam aqui: sem eles, os campos do perfil e do login ficavam sem
       anel de foco e o único indicador era a cor da borda, que sozinha é fraca demais para
       quem navega por teclado (WCAG 2.4.11). */
    button:focus-visible,
    textarea:focus-visible,
    input:focus-visible,
    select:focus-visible,
    a:focus-visible {
        outline: 3px solid var(--green-dark);
        outline-offset: 2px;
    }
}

@layer components {
    .app-shell {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        height: 100vh;
        height: 100dvh;
    }

    .app-header {
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        min-height: 72px;
        padding: 12px clamp(18px, 4vw, 56px);
        /* viewport-fit=cover (necessário para o safe-area do composer no iOS) faz o conteúdo
           passar por baixo do recorte da tela quando instalado como PWA; o cabeçalho absorve
           a área de status e as laterais em paisagem. */
        padding-top: max(12px, env(safe-area-inset-top));
        padding-left: max(clamp(18px, 4vw, 56px), env(safe-area-inset-left));
        padding-right: max(clamp(18px, 4vw, 56px), env(safe-area-inset-right));
        border-bottom: 1px solid var(--line);
        background: var(--glass-header);
        backdrop-filter: blur(14px);
    }

    .brand {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        color: var(--ink);
        text-decoration: none;
    }

    /* Três <img> e o CSS escolhe qual mostra: o tema é decidido por token/atributo no :root
       (inclusive a escolha manual salva), e o <picture> só saberia da preferência do sistema.
       Fora do tema escuro e das telas estreitas, vale o wordmark claro. */
    .brand-logo {
        display: block;
        height: 36px;
        width: auto;
    }

    .brand-logo-dark,
    .brand-logo-mark {
        display: none;
    }

    :root[data-theme="dark"] .brand-logo-light {
        display: none;
    }

    :root[data-theme="dark"] .brand-logo-dark {
        display: block;
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .brand-logo-light {
            display: none;
        }

        :root:not([data-theme="light"]) .brand-logo-dark {
            display: block;
        }
    }

    .integration-actions {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .connection-status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        white-space: nowrap;
    }

    .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--status-idle);
    }

    .connection-status.is-connected {
        color: var(--accent-ink);
    }

    .connection-status.is-connected .status-dot {
        background: var(--status-live);
        box-shadow: 0 0 0 4px var(--status-live-ring);
    }

    .google-button {
        display: inline-flex;
        min-height: 42px;
        align-items: center;
        gap: 10px;
        padding: 0 15px;
        border: 1px solid var(--google-line);
        border-radius: 6px;
        color: var(--google-ink);
        background: var(--surface-strong);
        font-weight: 650;
        white-space: nowrap;
        box-shadow: var(--shadow-1);
    }

    .google-button:hover:not(:disabled) {
        border-color: var(--line-hover);
        background: var(--surface-hover);
    }

    .google-button:disabled {
        cursor: default;
        opacity: 0.68;
    }

    .google-mark {
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-sm);
        font-weight: 700;
        /* Cores oficiais da marca do Google — fixas nos dois temas, como o próprio "G" do Google
           também não se retema. */
        background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
        background-clip: text;
        color: transparent;
    }

    .account-area {
        display: flex;
        position: relative;
        gap: 10px;
        align-items: center;
    }

    /* ---------- localização (só quando não está habilitada) ---------- */

    .location-toggle .location-icon {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .location-toggle {
        color: var(--ink-muted);
    }

    /* `.theme-toggle` põe display: grid, que vence o `hidden` do UA — sem isto o ícone aparecia
       sempre, logado ou não. */
    .location-toggle[hidden] {
        display: none;
    }

    /* ---------- alternância de tema ---------- */
    /* Seletor de idioma: pílula com bandeira + código, dropdown no padrão do menu de conta. */
    .language-menu {
        position: relative;
        flex: 0 0 auto;
    }

    .language-toggle {
        display: flex;
        height: 42px;
        align-items: center;
        gap: 7px;
        padding: 0 12px;
        border: 1px solid var(--line-control);
        border-radius: 999px;
        color: var(--ink);
        background: var(--surface);
        cursor: pointer;
        font-size: var(--text-xs);
        font-weight: 700;
        letter-spacing: 0.04em;
        transition: border-color 120ms ease, background 120ms ease;
    }

    .language-toggle:hover {
        border-color: var(--ink-muted);
    }

    .language-flag {
        width: 20px;
        height: 14px;
        border-radius: 2px;
        /* O branco da bandeira americana some no fundo claro sem este traço. */
        box-shadow: 0 0 0 1px var(--line-control);
        flex: 0 0 auto;
    }

    .language-flag[hidden] {
        display: none;
    }

    .language-caret {
        width: 10px;
        height: 6px;
        color: var(--ink-muted);
    }

    .language-dropdown {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 3;
        display: flex;
        width: 220px;
        flex-direction: column;
        gap: 2px;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface-strong);
        box-shadow: var(--shadow-2);
        animation: enter 160ms ease-out both;
    }

    .language-dropdown[hidden] {
        display: none;
    }

    .language-option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border: none;
        border-radius: 8px;
        color: var(--ink);
        background: transparent;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .language-option:hover {
        background: var(--green-soft);
    }

    .language-option-name {
        flex: 1;
    }

    .language-option-check {
        visibility: hidden;
        color: var(--ink-muted);
    }

    .language-option.is-current .language-option-check {
        visibility: visible;
    }

    .theme-toggle {
        display: grid;
        width: 42px;
        height: 42px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid var(--line-control);
        border-radius: 999px;
        color: var(--ink);
        background: var(--surface);
        cursor: pointer;
        transition: border-color 120ms ease, background 120ms ease;
    }

    .theme-toggle:hover {
        border-color: var(--line-hover);
        background: var(--surface-hover);
    }

    .theme-toggle:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }

    .theme-icon {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Mostra o ícone do tema que o clique vai ativar, não o do tema atual: o botão é a ação. */
    .theme-toggle[data-theme="light"] .theme-icon-sun,
    .theme-toggle[data-theme="dark"] .theme-icon-moon {
        display: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .theme-toggle {
            transition: none;
        }
    }

    .login-button {
        display: inline-flex;
        align-items: center;
        min-height: 42px;
        padding: 0 20px;
        border: 1px solid var(--button-primary);
        border-radius: 999px;
        color: var(--on-button-primary);
        background: var(--button-primary);
        font-weight: 650;
        white-space: nowrap;
    }

    .login-button:hover {
        background: var(--button-primary-hover);
        border-color: var(--button-primary-hover);
    }

    .account-menu[hidden],
    .login-button[hidden] {
        display: none;
    }

    .account-trigger {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 42px;
        padding: 4px 14px 4px 4px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface-strong);
        box-shadow: var(--shadow-1);
    }

    .account-trigger:hover {
        border-color: var(--line-hover);
        background: var(--surface-hover);
    }

    .account-avatar-img,
    .account-avatar-fallback {
        width: 32px;
        height: 32px;
        border-radius: 50%;
    }

    .account-avatar-img {
        object-fit: cover;
    }

    .account-avatar-img[hidden],
    .account-avatar-fallback[hidden] {
        display: none;
    }

    .account-avatar-fallback {
        display: grid;
        place-items: center;
        background: var(--button-primary);
        color: var(--on-button-primary);
        font-weight: 650;
        font-size: 14px;
    }

    .account-name {
        max-width: 160px;
        overflow: hidden;
        color: var(--ink);
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-dropdown {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 3;
        display: flex;
        width: 200px;
        flex-direction: column;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface-strong);
        box-shadow: var(--shadow-2);
        animation: enter 160ms ease-out both;
    }

    .account-dropdown[hidden] {
        display: none;
    }

    .account-dropdown-item {
        display: block;
        padding: 10px 12px;
        border: none;
        border-radius: 8px;
        color: var(--ink);
        background: transparent;
        font: inherit;
        text-align: left;
        text-decoration: none;
    }

    .account-dropdown-item:hover {
        background: var(--green-soft);
    }

    .account-dropdown-action {
        width: 100%;
        color: var(--danger);
    }

    /* Flex + margin:auto no cartão em vez de place-items:center: quando o modal fica mais alto que a
       viewport (modo "criar conta" em tela baixa), a centralização por grid corta o topo e o
       conteúdo fica inalcançável; assim ele rola por inteiro. */
    .modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 10;
        display: flex;
        padding: 24px 16px;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--scrim);
        backdrop-filter: blur(2px);
    }

    .modal-overlay[hidden] {
        display: none;
    }

    /* O confirm de exclusão: o mesmo shell dos modais, encolhido ao tamanho de uma decisão. O
       botão perigoso é o único preenchido com --danger no app — a cor conta o custo do clique, e
       o texto usa a superfície para manter contraste nos dois temas. */
    .confirm-dialog {
        width: min(360px, 100%);
        padding: 24px;
    }

    .confirm-dialog-title {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .confirm-dialog-message {
        margin: 10px 0 0;
        color: var(--ink-muted);
        font-size: 14px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .confirm-dialog-actions {
        display: flex;
        margin-top: 22px;
        gap: 10px;
        justify-content: flex-end;
    }

    .confirm-dialog-actions button {
        padding: 8px 16px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .confirm-dialog-cancel {
        border: 1px solid var(--control-line);
        background: transparent;
        color: var(--ink);
    }

    .confirm-dialog-cancel:hover {
        border-color: var(--line-hover);
        background: var(--surface-hover);
    }

    .confirm-dialog-danger {
        border: 1px solid transparent;
        background: var(--danger);
        color: var(--surface-strong);
    }

    .confirm-dialog-danger:hover {
        filter: brightness(0.94);
    }

    /* Nunca mais alto que a viewport: acima disso o próprio cartão rola, para que o botão de envio e
       o alternador de modo continuem alcançáveis em telas baixas em vez de ficarem fora da tela.
       A sombra é a única superfície do app em elev-3: é o que deve dominar a tela quando aberta. */
    .modal-card {
        position: relative;
        width: min(400px, 100%);
        max-height: calc(100dvh - 48px);
        margin: auto;
        padding: 32px 28px 28px;
        border-radius: 16px;
        background: var(--surface-strong);
        box-shadow: var(--shadow-3);
        flex: 0 0 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        animation: enter 220ms ease-out both;
    }

    /* Em telas baixas o ritmo vertical encolhe para o diálogo caber inteiro sem rolagem, que é o
       caso comum em celular no modo "criar conta" (quatro campos em vez de dois). */
    @media (max-height: 760px) {
        .modal-card {
            padding: 22px 22px 20px;
        }

        .login-modal h2 {
            font-size: 21px;
        }

        .login-modal-subtitle {
            margin-bottom: 16px;
        }

        .login-modal-divider {
            margin: 13px 0;
        }

        .login-modal-field {
            margin-top: 7px;
            gap: 4px;
        }

        .login-modal-field input {
            padding: 9px 12px;
        }

        .login-submit-button {
            margin-top: 13px;
        }

        .login-mode-toggle {
            margin-top: 11px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .modal-card {
            animation: none;
        }
    }

    .modal-close {
        position: absolute;
        top: 14px;
        right: 14px;
        display: grid;
        width: 32px;
        height: 32px;
        place-items: center;
        border: none;
        border-radius: 50%;
        color: var(--ink-muted);
        background: transparent;
        font-size: var(--text-heading-sm);
        line-height: 1;
    }

    .modal-close:hover {
        background: var(--canvas);
    }

    .login-modal h2 {
        margin: 0 0 8px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-md);
    }

    .login-modal-subtitle {
        margin: 0 0 24px;
        color: var(--ink-muted);
        font-size: 14px;
    }

    /* Carries the reason the modal opened by itself, so it has to read as the point of the dialog
       rather than as the usual quiet helper line. */
    .login-modal-subtitle.is-prompt {
        padding: 11px 14px;
        border-left: 3px solid var(--green);
        border-radius: 0 8px 8px 0;
        background: var(--green-soft);
        color: var(--on-soft-accent);
        font-weight: 600;
    }

    .google-signin-container {
        display: flex;
        justify-content: center;
        min-height: 44px;
    }

    .login-modal-divider {
        display: flex;
        align-items: center;
        margin: 20px 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .login-modal-divider::before,
    .login-modal-divider::after {
        flex: 1;
        height: 1px;
        background: var(--line);
        content: "";
    }

    .login-modal-divider span {
        padding: 0 12px;
    }

    .login-password-form {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .login-modal-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 10px;
    }

    .login-modal-field[hidden] {
        display: none;
    }

    .login-modal-field input {
        padding: 11px 14px;
        border: 1px solid var(--line-control);
        border-radius: 8px;
        color: var(--ink);
        background: var(--canvas);
    }

    .login-modal-field input:focus-visible {
        border-color: var(--green);
        outline: none;
    }

    .login-submit-button {
        width: 100%;
        margin-top: 18px;
    }

    .login-mode-toggle {
        display: block;
        width: 100%;
        margin-top: 16px;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--accent-ink);
        font-size: var(--text-sm);
        font-weight: 650;
        text-align: center;
    }

    .login-mode-toggle:hover {
        text-decoration: underline;
    }

    .login-modal-error {
        margin: 16px 0 0;
        color: var(--danger);
        font-size: var(--text-sm);
        text-align: center;
    }

    .login-modal-error[hidden] {
        display: none;
    }

    .terms-checkbox-label {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-top: 6px;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        line-height: 1.4;
    }

    .terms-checkbox-label input {
        margin-top: 2px;
        accent-color: var(--green);
    }

    .terms-link {
        color: var(--accent-ink);
        text-decoration: underline;
    }

    .login-forgot-link {
        display: block;
        margin-top: 10px;
        color: var(--accent-ink);
        font-size: var(--text-sm);
        text-align: right;
    }

    .login-forgot-link[hidden] {
        display: none;
    }

    .login-forgot-link:hover {
        text-decoration: underline;
    }

    .google-signup-account {
        margin: -8px 0 20px;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        font-weight: 600;
    }

    .terms-modal {
        width: min(560px, 100%);
    }

    .terms-updated {
        margin: 0 0 20px;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .terms-body h3 {
        margin: 18px 0 6px;
        font-size: 15px;
    }

    .terms-body h3:first-child {
        margin-top: 0;
    }

    .terms-body p {
        margin: 0 0 4px;
        color: var(--ink-muted);
        font-size: 14px;
        line-height: 1.6;
    }

    .chat-main {
        position: relative;
        min-height: 0;
        overflow-y: auto;
        /* Chegar ao topo do histórico não pode virar pull-to-refresh do navegador, e chegar ao
           fim não pode "puxar" a página inteira no iOS. */
        overscroll-behavior: contain;
        scroll-padding-bottom: 16px;
        scrollbar-color: var(--line-hover) transparent;
        scrollbar-width: thin;
    }

    /* Cobre a área de rolagem inteira e centraliza o conteúdo. Ao contrário do posicionamento por
       translate, isto acomoda a apresentação (bem mais alta que a saudação) sem estourar para fora
       da tela: se não couber, rola dentro do próprio bloco. */
    .empty-state {
        position: absolute;
        display: grid;
        padding: 24px clamp(16px, 4vw, 32px);
        inset: 0;
        place-items: center;
        overflow-y: auto;
        text-align: center;
        animation: enter 420ms ease-out both;
    }

    .empty-state[hidden] {
        display: none;
    }

    .welcome,
    .intro {
        width: min(680px, 100%);
    }

    .welcome[hidden],
    .intro[hidden] {
        display: none;
    }

    /* ---------- apresentação para visitante sem sessão ---------- */

    .intro {
        display: flex;
        width: min(760px, 100%);
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .intro-mark {
        display: block;
        width: 46px;
        height: 46px;
        margin-bottom: 20px;
        border-radius: 14px;
        box-shadow: 0 8px 22px var(--glow-accent);
    }

    .intro-title {
        margin: 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-display-sm);
        font-weight: 500;
        line-height: 1.06;
        letter-spacing: -0.015em;
        text-wrap: balance;
    }

    .intro-lede {
        max-width: 46ch;
        margin: 16px 0 0;
        color: var(--ink-muted);
        font-size: clamp(15px, 2.2vw, 17px);
        line-height: 1.55;
        text-wrap: pretty;
    }

    .intro-hint {
        margin: 30px 0 12px;
        color: var(--green);
        font-size: var(--text-xs);
        font-weight: 750;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .intro-cards {
        display: grid;
        width: 100%;
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }

    .intro-card {
        display: flex;
        padding: 13px 15px;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: var(--surface);
        color: inherit;
        cursor: pointer;
        flex-direction: column;
        gap: 5px;
        text-align: left;
        transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
    }

    .intro-card:hover {
        border-color: var(--green);
        background: var(--surface-strong);
        transform: translateY(-2px);
    }

    /* Sem ponteiro que paira, o "levantar" do card ficaria preso depois do toque. */
    @media (hover: none) {
        .intro-card:hover {
            border-color: var(--line);
            background: var(--surface);
            transform: none;
        }
    }

    .intro-card:focus-visible {
        border-color: var(--green);
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }

    .intro-card-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        margin: 18px auto 0;
        padding: 8px 18px;
        border: 1px dashed var(--line);
        border-radius: 999px;
        background: transparent;
        color: var(--green);
        font-size: var(--text-sm);
        font-weight: 650;
        text-align: center;
    }

    .intro-card-more:hover {
        background: var(--surface);
    }

    .intro-card-label {
        color: var(--green);
        font-size: var(--text-2xs);
        font-weight: 750;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .intro-card-prompt {
        color: var(--ink);
        font-size: 14px;
        line-height: 1.4;
    }

    .intro-footnote {
        margin: 26px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        text-wrap: pretty;
    }

    @media (prefers-reduced-motion: reduce) {
        .empty-state {
            animation: none;
        }

        .intro-card {
            transition: none;
        }

        .intro-card:hover {
            transform: none;
        }

        .new-messages-button {
            animation: none;
        }
    }

    .eyebrow {
        margin: 0 0 13px;
        color: var(--green);
        font-size: var(--text-xs);
        font-weight: 750;
        letter-spacing: 0;
    }

    /* Escopado ao estado de saudação: a apresentação do visitante tem a própria escala de tipo, e
       um seletor em .empty-state venceria .intro-title por especificidade. */
    .welcome h1 {
        margin: 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-display-lg);
        font-weight: 500;
        line-height: 1.08;
    }

    .welcome p:last-child {
        margin: 18px 0 0;
        color: var(--ink-muted);
        font-size: 17px;
    }

    .messages {
        display: flex;
        width: min(880px, calc(100% - 36px));
        min-height: 100%;
        margin: 0 auto;
        padding: 42px 0 56px;
        flex-direction: column;
        justify-content: flex-end;
        gap: 24px;
    }

    .message {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        animation: message-in 240ms ease-out both;
    }

    .message.user {
        justify-content: flex-end;
    }

    /* The article itself is the horizontal row (mark + bubble); the footer (timestamp, actions)
       has to sit below the bubble rather than beside it, so it nests inside this vertical stack
       instead of being another direct sibling of body. */
    .message-stack {
        display: flex;
        min-width: 0;
        flex-direction: column;
    }

    .message.user .message-stack {
        align-items: flex-end;
    }

    /* A foto enviada, dentro da bolha. É um botão porque abre o visualizador — e botão já vem com
       teclado e leitor de tela; uma <img> com onclick não viria. */
    .message-attachment {
        margin-bottom: 6px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: none;
        cursor: zoom-in;
        line-height: 0;
        overflow: hidden;
    }

    .message-attachment:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }

    .message-attachment img {
        display: block;
        /* Teto em duas dimensões: retrato e paisagem ocupam o mesmo espaço na conversa, e nenhum
           dos dois empurra as mensagens vizinhas para fora da vista. */
        max-width: min(280px, 70vw);
        max-height: 280px;
        object-fit: cover;
    }

    .lightbox {
        position: fixed;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgb(0 0 0 / 88%);
        inset: 0;
    }

    .lightbox img {
        max-width: 100%;
        /* A foto inteira sempre visível: nada de recortar por causa da altura da janela. */
        max-height: 100%;
        border-radius: 8px;
        object-fit: contain;
    }

    .lightbox-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50%;
        background: rgb(255 255 255 / 16%);
        color: #fff;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

    .lightbox-close:hover {
        background: rgb(255 255 255 / 28%);
    }

    .message-content {
        max-width: min(720px, 82%);
        white-space: pre-wrap;
        /* break-word, não anywhere: os dois quebram uma palavra que realmente não cabe, mas
           `anywhere` também entra no cálculo de min-content, o que deixa o flex encolher a
           bolha quase até zero e faz o texto quebrar muito antes do necessário. */
        overflow-wrap: break-word;
        line-height: 1.58;
    }

    /* O raio era 8px 8px 2px 8px: um canto quase reto embaixo à direita, imitando a cauda que
       aponta para o avatar de quem falou. Só que o lado do usuário não tem avatar — a marca
       circular existe apenas no assistente. A cauda apontava para o vazio e lia como erro, não
       como intenção. Uniforme, então, e em 14px: fica entre a família de controles (6–8px) e a
       de cartões (12–16px), que é o que uma bolha é. */
    .message.user .message-content {
        max-width: min(620px, 80%);
        padding: 12px 16px;
        border-radius: 14px;
        color: var(--on-user-bubble);
        background: var(--user-bubble);
        line-height: 1.5;
    }

    /* A seleção padrão do navegador é pensada para texto escuro sobre fundo claro; dentro da
       bolha ela deixava texto branco sobre azul-claro. */
    .message.user .message-content::selection {
        color: var(--user-bubble);
        background: var(--on-user-bubble);
    }

    /* Em alto contraste do sistema, background e color são substituídos pelas cores do usuário,
       e a bolha desapareceria: sem borda, o que separa usuário de assistente é só o fundo. */
    @media (forced-colors: active) {
        .message.user .message-content {
            border: 1px solid CanvasText;
        }
    }

    /* The assistant's reply is real Markdown now (real <p>/<ul>/<pre> elements from
       core/markdown.ts), not raw text relying on pre-wrap to fold its newlines into line breaks —
       carrying pre-wrap into it would double the vertical rhythm on top of each block's own
       margin. The user's own bubble keeps pre-wrap; it is still plain text. */
    .message.assistant .message-content {
        white-space: normal;
    }

    .message-content :is(h4, h5, h6) {
        margin: 14px 0 6px;
        font-family: Georgia, "Times New Roman", serif;
        font-weight: 600;
        line-height: 1.3;
    }

    .message-content :is(h4, h5, h6):first-child {
        margin-top: 0;
    }

    .message-content h4 {
        font-size: 17px;
    }

    .message-content h5 {
        font-size: 16px;
    }

    .message-content h6 {
        font-size: 15px;
    }

    .message-content p {
        margin: 0 0 10px;
        /* Evita a última linha com uma palavra só. Navegador que não conhece ignora. */
        text-wrap: pretty;
    }

    .message-content ul,
    .message-content ol {
        margin: 0 0 10px;
        padding-left: 22px;
    }

    .message-content li {
        margin: 2px 0;
    }

    .message-content > :last-child {
        margin-bottom: 0;
    }

    /* Rede de segurança: o .block já corta o que estoura (overflow: hidden), mas cortar esconde
       conteúdo. Se um corpo de bloco não couber na bolha do celular, ele rola de lado, sem barra
       visível — a regra específica de cada bloco é quem cuida de empilhar as colunas. */
    .block-body {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    /* Espelho de conversa com terceiro: a fala do contato à esquerda, a do César à direita,
       como o chat que é. Os balões usam os mesmos tokens das bolhas da conversa principal. */
    .outreach-mirror {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px 0;
    }

    .outreach-mirror-bubble {
        max-width: 85%;
        padding: 8px 12px;
        border-radius: 14px;
    }

    .outreach-mirror-bubble.contact {
        align-self: flex-start;
        background: var(--surface-hover);
        border: 1px solid var(--line);
        border-bottom-left-radius: 4px;
    }

    .outreach-mirror-bubble.cesar {
        align-self: flex-end;
        background: var(--user-bubble);
        color: var(--on-user-bubble);
        border-bottom-right-radius: 4px;
    }

    .outreach-mirror-author {
        display: block;
        margin-bottom: 2px;
        font-size: 11px;
        font-weight: 600;
        opacity: 0.75;
    }

    .outreach-mirror-text {
        margin: 0;
        white-space: pre-wrap;
    }

    .outreach-mirror-silence {
        margin: 0;
        align-self: flex-end;
        font-size: 13px;
        font-style: italic;
        color: var(--ink-muted);
    }

    .message-content pre {
        max-width: 100%;
        margin: 0 0 10px;
        padding: 10px 12px;
        overflow-x: auto;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--code-bg);
    }

    .message-content pre code {
        font: 13px/1.5 Consolas, "Courier New", monospace;
        white-space: pre;
    }

    .message-content :not(pre) > code {
        padding: 0.1em 0.4em;
        border-radius: 4px;
        background: var(--code-bg);
        font: 0.9em/1 Consolas, "Courier New", monospace;
    }

    .message-content a {
        color: var(--accent-ink);
        text-decoration-color: var(--line-hover);
    }

    .message-content a:hover {
        text-decoration-thickness: 2px;
    }

    /* ---------- blocos (resultado estruturado) ----------
       Um bloco é o resultado que a tool devolveu, renderizado como componente em vez de prosa.
       Fica acima do texto da resposta, e o texto abaixo lê como a interpretação dele. */

    .block {
        max-width: min(720px, 100%);
        margin-bottom: 10px;
        border: 1px solid var(--panel-line);
        border-left: 3px solid var(--green);
        border-radius: 6px;
        background: var(--surface);
        overflow: hidden;
    }

    /* Quando nenhum renderer reconhece o tipo, o bloco exibe o próprio texto de fallback — que é um
       caminho normal de renderização, não um estado de erro, então não se distingue visualmente de
       uma resposta comum. */
    .block-fallback {
        padding: 12px 14px;
        line-height: 1.55;
    }

    .block-fallback > :first-child { margin-top: 0; }
    .block-fallback > :last-child { margin-bottom: 0; }

    .block-body {
        padding: 12px 14px;
    }

    .block-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        padding: 5px 0;
    }

    .block-row + .block-row {
        border-top: 1px solid var(--line);
    }

    .block-row-label {
        color: var(--ink-muted);
        font-size: 14px;
    }

    .block-row-value {
        color: var(--ink);
        font-weight: 650;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* ---------- finance.spending ---------- */

    .finance-spending-header {
        display: flex;
        align-items: baseline;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }

    .finance-spending-total {
        color: var(--ink);
        font-size: 22px;
        font-variant-numeric: tabular-nums;
    }

    .finance-spending-period {
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .finance-spending-breakdown {
        display: flex;
        flex-direction: column;
    }

    .finance-spending-row {
        padding: 7px 0;
    }

    .finance-spending-row + .finance-spending-row {
        border-top: 1px solid var(--line);
    }

    .finance-spending-row-line {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 5px;
    }

    .finance-spending-bar-track {
        height: 5px;
        border-radius: 999px;
        background: var(--line);
        overflow: hidden;
    }

    .finance-spending-bar-fill {
        height: 100%;
        border-radius: inherit;
        background: var(--green);
    }

    /* ---------- finance.transactions ---------- */

    .finance-transactions-header {
        margin-bottom: 8px;
    }

    .finance-transactions-period {
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .finance-transactions-list {
        display: flex;
        flex-direction: column;
    }

    /* ---------- importação de extrato (finance-statement-import-blocks.ts) ---------- */
    .statement-import {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .statement-import-header {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 10px;
    }

    .statement-import-source {
        font-weight: 650;
    }

    .statement-import-period {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .statement-import-facts {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .statement-import-fact {
        padding: 2px 9px;
        border-radius: 999px;
        background: var(--line);
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        font-weight: 650;
    }

    .statement-import-fact.is-warn {
        background: color-mix(in srgb, #c98a12 18%, transparent);
        color: #8a5a00;
    }

    .statement-import-fact.is-ok {
        background: var(--green-soft);
        color: var(--accent-ink);
    }

    .statement-import-totals {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .statement-import-total {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 8px 10px;
        border: 1px solid var(--line);
        border-radius: 10px;
    }

    .statement-import-total-label {
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .statement-import-total-value {
        font-variant-numeric: tabular-nums;
    }

    .statement-import-total.is-in .statement-import-total-value,
    .statement-import-category-total.is-in,
    .statement-import-line-amount.is-in {
        color: var(--green);
    }

    .statement-import-categories,
    .statement-import-sample {
        display: flex;
        flex-direction: column;
    }

    .statement-import-category,
    .statement-import-line {
        display: grid;
        align-items: baseline;
        gap: 10px;
        padding: 6px 0;
        font-size: var(--text-sm);
    }

    .statement-import-category {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .statement-import-line {
        grid-template-columns: 42px minmax(0, 1fr) auto;
    }

    .statement-import-category + .statement-import-category,
    .statement-import-line + .statement-import-line {
        border-top: 1px solid var(--line);
    }

    .statement-import-category-name,
    .statement-import-line-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .statement-import-category-count,
    .statement-import-line-date,
    .statement-import-line-meta {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .statement-import-line-detail {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 1px;
    }

    .statement-import-line.is-duplicate .statement-import-line-label {
        color: var(--ink-muted);
        text-decoration: line-through;
    }

    .statement-import-category-total,
    .statement-import-line-amount {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        font-weight: 600;
    }

    .statement-import-note,
    .statement-import-more {
        margin: 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .finance-transactions-row {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 12px;
        padding: 7px 0;
    }

    .finance-transactions-row + .finance-transactions-row {
        border-top: 1px solid var(--line);
    }

    .finance-transactions-date {
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .finance-transactions-detail {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: 8px;
        flex-wrap: wrap;
    }

    .finance-transactions-label {
        overflow: hidden;
        color: var(--ink);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .finance-transactions-category {
        flex: 0 0 auto;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .finance-transactions-amount {
        font-weight: 650;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .finance-transactions-debit {
        color: var(--ink);
    }

    .finance-transactions-credit {
        color: var(--green);
    }

    .finance-transactions-neutral {
        color: var(--ink-muted);
    }

    .finance-transactions-more {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- finance.budget-set ---------- */

    .finance-budget-set {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .finance-budget-set-category {
        overflow: hidden;
        color: var(--ink);
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .finance-budget-set-details {
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
    }

    /* ---------- finance.expense-created ---------- */

    .finance-expense-created {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .finance-expense-created-heading {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
    }

    .finance-expense-created-title {
        overflow: hidden;
        color: var(--ink);
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .finance-expense-created-amount {
        flex: 0 0 auto;
        color: var(--ink);
        font-weight: 650;
        font-variant-numeric: tabular-nums;
    }

    .finance-expense-created-details {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- finance write results ---------- */

    .finance-write-result {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .finance-write-result-heading {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
    }

    .finance-write-result-title {
        overflow: hidden;
        color: var(--ink);
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .finance-write-result-amount {
        flex: 0 0 auto;
        color: var(--ink);
        font-weight: 650;
        font-variant-numeric: tabular-nums;
    }

    .finance-write-result-credit {
        color: var(--green);
    }

    .finance-write-result-details {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- catalog and mutation results ---------- */

    .finance-catalog,
    .mutation-result {
        display: flex;
        flex-direction: column;
    }

    .finance-catalog-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        padding: 7px 0;
    }

    .finance-catalog-row + .finance-catalog-row {
        border-top: 1px solid var(--line);
    }

    /* Nome e tipo da conta empilhados; o saldo continua alinhado à direita. */
    .finance-catalog-main {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 2px;
    }

    .finance-catalog-title,
    .mutation-result-title {
        overflow: hidden;
        color: var(--ink);
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .finance-catalog-value {
        flex: 0 0 auto;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .finance-catalog-meta,
    .finance-catalog-more,
    .mutation-result-details {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .finance-catalog-more {
        margin-top: 6px;
    }

    .mutation-result {
        gap: 5px;
    }

    /* ---------- finance.bills ---------- */


    .block-document {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-top: 0.75rem;
        padding: 0.6rem 0.75rem;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: var(--surface-strong);
    }

    .block-document-icon {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--green-soft);
        color: var(--accent-ink);
    }

    .block-document-info {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .block-document-name {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .block-document-meta {
        font-size: 0.75rem;
        color: var(--ink-muted);
    }

    .block-document-link {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.9rem;
        border-radius: 999px;
        background: var(--green);
        color: #fff;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        transition: filter 0.15s ease, transform 0.15s ease;
    }

    .block-document-link:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

    .block-document-link:active {
        transform: translateY(0);
    }

    .finance-bills-list {
        display: flex;
        flex-direction: column;
    }

    .finance-bills-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 8px 0;
    }

    .finance-bills-row + .finance-bills-row {
        border-top: 1px solid var(--line);
    }

    .finance-bills-main {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 2px;
    }

    .finance-bills-payee {
        overflow: hidden;
        color: var(--ink);
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .finance-bills-details,
    .finance-bills-due,
    .finance-bills-total,
    .finance-bills-more,
    .finance-bills-empty,
    .finance-bills-action {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* Caderno de viagens: mesma anatomia dos cartões de cobrança; a rota em caixa alta com espaçamento de sigla. */
    .travel-book-route {
        margin-right: 6px;
        letter-spacing: 0.06em;
        font-variant-numeric: tabular-nums;
    }

    .travel-book-when {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .travel-book-row.is-cancelled .finance-bills-payee,
    .travel-book-row.is-ignored .finance-bills-payee {
        color: var(--ink-muted);
        text-decoration: line-through;
    }

    .finance-bills-side {
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        text-align: right;
    }

    .finance-bills-amount,
    .finance-bills-due {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .finance-bills-amount {
        color: var(--ink);
        font-weight: 650;
    }

    .finance-bills-row.is-overdue .finance-bills-due,
    .finance-bills-row.is-overdue .finance-bills-amount {
        color: var(--danger, #b42318);
    }

    .finance-bills-row.is-paid .finance-bills-amount,
    .finance-bills-row.is-ignored .finance-bills-amount {
        color: var(--ink-muted);
        font-weight: 500;
        text-decoration: line-through;
    }

    .finance-bills-total {
        display: block;
        margin-top: 8px;
        color: var(--ink);
        font-weight: 600;
    }

    .finance-bills-more {
        display: block;
        margin-top: 6px;
    }

    .finance-bills-action {
        display: block;
        margin-bottom: 4px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* ---------- finance.budgets ---------- */

    .finance-budgets-period {
        display: block;
        margin-bottom: 8px;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .finance-budgets-list {
        display: flex;
        flex-direction: column;
    }

    .finance-budgets-row {
        padding: 8px 0;
    }

    .finance-budgets-row + .finance-budgets-row {
        border-top: 1px solid var(--line);
    }

    .finance-budgets-row-line,
    .finance-budgets-summary {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
    }

    .finance-budgets-category {
        min-width: 0;
        overflow: hidden;
        color: var(--ink);
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .finance-budgets-amount,
    .finance-budgets-percentage,
    .finance-budgets-remaining {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .finance-budgets-amount {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .finance-budgets-bar-track {
        height: 5px;
        margin: 5px 0;
        overflow: hidden;
        border-radius: 999px;
        background: var(--line);
    }

    .finance-budgets-bar-fill {
        height: 100%;
        border-radius: inherit;
        background: var(--green);
    }

    .finance-budgets-summary {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .finance-budgets-row.is-over-budget .finance-budgets-bar-fill {
        background: var(--danger);
    }

    .finance-budgets-row.is-over-budget .finance-budgets-remaining {
        color: var(--danger);
        font-weight: 650;
    }

    .finance-budgets-more {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- calendar.events ---------- */

    .calendar-events-header {
        margin-bottom: 8px;
    }

    .calendar-events-period {
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .calendar-events-list {
        display: flex;
        flex-direction: column;
    }

    .calendar-events-row {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 12px;
        padding: 7px 0;
    }

    .calendar-events-row + .calendar-events-row {
        border-top: 1px solid var(--line);
    }

    .calendar-events-row.is-cancelled {
        opacity: 0.6;
    }

    .calendar-events-row.is-cancelled .calendar-events-title {
        text-decoration: line-through;
    }

    .calendar-events-when {
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .calendar-events-detail {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: 8px;
        flex-wrap: wrap;
    }

    .calendar-events-title {
        overflow: hidden;
        color: var(--ink);
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calendar-events-location {
        flex: 0 0 auto;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .calendar-events-meet,
    .calendar-event-link {
        color: var(--ink);
        font-size: var(--text-xs);
        font-weight: 650;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* Links do cartão de evento (agenda, videochamada), lado a lado. */
    .calendar-event-links {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 4px;
    }

    .calendar-event-when {
        color: var(--ink);
        font-weight: 600;
    }

    .calendar-events-status {
        flex: 0 0 auto;
        padding: 1px 8px;
        border-radius: 999px;
        font-size: var(--text-2xs);
        font-weight: 650;
        white-space: nowrap;
    }

    .calendar-events-status-tentative {
        color: var(--warn-ink);
        background: var(--warn-bg);
    }

    .calendar-events-status-cancelled {
        color: var(--danger);
        background: var(--danger-bg);
    }

    .calendar-events-more {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- email.messages ---------- */

    .email-messages-list {
        display: flex;
        flex-direction: column;
    }

    .email-messages-row {
        display: grid;
        grid-template-columns: minmax(96px, 0.7fr) minmax(0, 1.6fr) auto;
        align-items: baseline;
        gap: 12px;
        padding: 7px 0;
    }

    .email-messages-row + .email-messages-row {
        border-top: 1px solid var(--line);
    }

    .email-messages-sender,
    .email-messages-subject,
    .email-messages-snippet {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .email-messages-sender {
        color: var(--ink);
        font-weight: 650;
    }

    /* Não lido: remetente e assunto mais fortes, como numa caixa de entrada. */
    .email-messages-row.is-unread .email-messages-sender,
    .email-messages-row.is-unread .email-messages-subject {
        font-weight: 750;
    }

    .email-messages-flags {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .email-messages-detail {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: 8px;
    }

    .email-messages-subject {
        flex: 0 1 auto;
        color: var(--ink);
    }

    .email-messages-snippet {
        min-width: 0;
        flex: 1 1 auto;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .email-messages-snippet::before {
        content: "—";
        margin-right: 8px;
    }

    .email-messages-date {
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .email-messages-more {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- web.search.results ---------- */

    .web-search-list {
        display: flex;
        flex-direction: column;
    }

    .web-search-row {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 3px;
        padding: 8px 0;
    }

    .web-search-row + .web-search-row {
        border-top: 1px solid var(--line);
    }

    .web-search-title {
        overflow: hidden;
        color: var(--ink);
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    a.web-search-title {
        text-decoration: none;
    }

    a.web-search-title:hover,
    a.web-search-title:focus-visible {
        text-decoration: underline;
    }

    .web-search-meta {
        display: flex;
        align-items: baseline;
        gap: 8px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .web-search-date {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .web-search-snippet {
        display: -webkit-box;
        overflow: hidden;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .web-search-more {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- location.place.details / location.place.reviews ---------- */

    .place-details-title,
    .place-reviews-title {
        font-weight: 700;
    }

    a.place-details-title {
        color: inherit;
        text-decoration: underline;
    }

    .place-details-meta,
    .place-reviews-header {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        margin-top: 4px;
        font-size: var(--text-sm);
        color: var(--ink-muted);
    }

    .place-details-closed {
        margin-top: 4px;
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--danger);
    }

    .place-details-hours {
        margin-top: 8px;
        font-size: var(--text-sm);
    }

    .place-details-hours summary {
        cursor: pointer;
        color: var(--ink-muted);
    }

    .place-details-hours-line {
        margin: 2px 0 0 12px;
        color: var(--ink-muted);
    }

    .place-reviews-list {
        display: grid;
        gap: 10px;
        margin-top: 8px;
    }

    .place-reviews-text {
        margin: 0;
        padding-left: 10px;
        border-left: 2px solid var(--line-control);
    }

    .place-reviews-meta {
        display: flex;
        gap: 10px;
        margin-top: 2px;
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    .place-reviews-more {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* O selo da fonte quando ela não é a implícita (Tripadvisor ao lado das do Google). */
    .place-reviews-site {
        padding: 1px 8px;
        border: 1px solid var(--line-control);
        border-radius: 999px;
        font-size: var(--text-2xs);
        font-weight: 600;
    }

    /* ---------- travel.hotel.offers ---------- */

    .travel-hotels-period {
        font-weight: 700;
    }

    .travel-hotels-list {
        display: grid;
        gap: 10px;
        margin-top: 8px;
    }

    .travel-hotel-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .travel-hotel-name {
        font-weight: 600;
    }

    a.travel-hotel-name {
        color: inherit;
        text-decoration: underline;
    }

    .travel-hotel-price {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
    }

    .travel-hotel-meta {
        margin-top: 2px;
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    .travel-hotels-more,
    .travel-hotels-collected {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* A lista de chaves de capability no modal de integração do perfil. Monoespaçada de
       propósito: são identificadores técnicos, e a fonte diz isso antes de qualquer rótulo. */
    .integration-tools-hint {
        margin: 0 0 8px;
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    .integration-tools-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .integration-tool-chip {
        padding: 3px 10px;
        border: 1px solid var(--line-control);
        border-radius: 999px;
        background: var(--surface-sunken, transparent);
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: var(--text-2xs);
        letter-spacing: 0.01em;
        color: var(--ink-muted);
        white-space: nowrap;
    }

    /* Espelhamento da conta externa no modal de integração: uma linha por área, o tom da linha
       diz a situação (ok, ocupado, erro, desligado) e o texto a explica por extenso. */
    .integration-sync-list {
        display: grid;
        gap: 6px;
        margin: 0 0 10px;
        padding: 0;
        list-style: none;
    }

    .integration-sync-row {
        display: flex;
        gap: 10px;
        align-items: baseline;
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    .integration-sync-row::before {
        content: "";
        flex: 0 0 auto;
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: var(--green);
        transform: translateY(-1px);
    }

    .integration-sync-busy::before { background: var(--accent-ink); }
    .integration-sync-error::before { background: var(--danger); }
    .integration-sync-off::before { background: var(--line-control); }

    .integration-sync-family {
        flex: 0 0 auto;
        min-width: 72px;
        font-weight: 600;
        color: var(--ink);
    }

    .integration-sync-detail {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .integration-sync-message {
        margin: 0 0 8px;
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    .integration-sync-message.is-error {
        color: var(--danger);
    }

    .integration-sync-now {
        padding: 6px 12px;
        border: 1px solid var(--line-control);
        border-radius: 999px;
        background: transparent;
        font: inherit;
        font-size: var(--text-xs);
        color: var(--ink);
        cursor: pointer;
    }

    .integration-sync-now:hover:not(:disabled) {
        background: var(--surface-sunken, transparent);
    }

    /* Cartão com sincronização falhando: um ponto no canto, sem roubar largura do nome. */
    .integration-tile.has-sync-error {
        position: relative;
    }

    .integration-tile.has-sync-error::after {
        content: "";
        position: absolute;
        top: 8px;
        right: 8px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--danger);
    }

    /* ---------- news.headlines ---------- */

    .news-headlines-list {
        display: grid;
        gap: 10px;
    }

    .news-headline-title {
        font-weight: 600;
    }

    a.news-headline-title {
        color: inherit;
        text-decoration: none;
    }

    a.news-headline-title:hover,
    a.news-headline-title:focus-visible {
        text-decoration: underline;
    }

    .news-headline-meta {
        display: block;
        margin-top: 2px;
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    .news-headlines-more {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- shopping.offers ---------- */

    .shopping-offers-list {
        display: grid;
        gap: 10px;
    }

    .shopping-offer-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .shopping-offer-title {
        font-weight: 600;
    }

    a.shopping-offer-title {
        color: inherit;
        text-decoration: underline;
    }

    .shopping-offer-price {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
    }

    .shopping-offer-meta {
        margin-top: 2px;
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    .shopping-offers-more,
    .shopping-offers-collected {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- finance.market.quote ---------- */

    .market-quote-header {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 10px;
    }

    .market-quote-title {
        font-weight: 700;
    }

    .market-quote-symbol {
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    .market-quote-line {
        display: flex;
        align-items: baseline;
        gap: 12px;
        margin-top: 4px;
    }

    .market-quote-price {
        font-size: 22px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .market-quote-change {
        font-size: var(--text-sm);
        font-weight: 600;
    }

    .market-quote-change.is-up {
        color: var(--success, #1a7f37);
    }

    .market-quote-change.is-down {
        color: var(--danger);
    }

    .market-quote-collected {
        margin-top: 6px;
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    /* ---------- social.profile ---------- */

    .social-profile-header {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 4px 12px;
    }

    .social-profile-title {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 8px;
    }

    .social-profile-name {
        font-weight: 700;
    }

    .social-profile-username,
    .social-profile-network {
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .social-profile-verified {
        padding: 1px 8px;
        border: 1px solid var(--line-control);
        border-radius: 999px;
        font-size: var(--text-2xs);
        font-weight: 600;
    }

    .social-profile-bio {
        margin-top: 4px;
        font-size: var(--text-sm);
        color: var(--ink-muted);
    }

    .social-profile-counts {
        margin-top: 6px;
        font-size: var(--text-sm);
        font-variant-numeric: tabular-nums;
    }

    .social-profile-posts {
        display: grid;
        gap: 8px;
        margin-top: 8px;
    }

    .social-profile-post-caption {
        margin: 0;
        padding-left: 10px;
        border-left: 2px solid var(--line-control);
    }

    .social-profile-post-meta {
        display: block;
        margin-top: 2px;
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    a.social-profile-post-meta {
        text-decoration: none;
    }

    a.social-profile-post-meta:hover,
    a.social-profile-post-meta:focus-visible {
        text-decoration: underline;
    }

    .social-profile-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 4px 12px;
        margin-top: 8px;
        font-size: var(--text-xs);
    }

    .social-profile-link {
        color: inherit;
        font-weight: 600;
    }

    .social-profile-collected {
        color: var(--ink-muted);
    }

    /* O caminho da busca quando o modelo refinou os termos. Discreto de propósito: explica de onde
       vieram as fontes sem competir com elas. */
    .web-search-queries {
        margin: 0 0 8px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- web.driver.plan ---------- */

    .web-driver-plan-summary {
        color: var(--ink);
        font-weight: 650;
    }

    /* Passos numerados pelo próprio <ol>: a ordem é o conteúdo aqui, e numerar no texto faria a
       lista discordar dela mesma quando o servidor cortasse o fim. */
    .web-driver-plan-steps {
        display: flex;
        margin: 8px 0 0;
        flex-direction: column;
        gap: 4px;
        padding-left: 20px;
        color: var(--ink);
        font-size: var(--text-sm);
    }

    .web-driver-plan-more {
        margin: 6px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* O limite do produto: fica visualmente separado porque é a informação que muda a decisão de
       aprovar, não um detalhe do plano. */
    .web-driver-plan-boundary {
        margin: 10px 0 0;
        border-left: 2px solid var(--line);
        padding-left: 8px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .web-driver-plan-cost {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
    }

    /* ---------- travel.flight.offers ---------- */

    .travel-offers-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .travel-offer-row {
        padding: 9px 11px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--surface-strong);
    }

    /* Voo à esquerda, preço à direita: comparar uma lista de passagens é ler a coluna de preços de
       cima a baixo, e ela precisa estar alinhada para isso funcionar. */
    .travel-offer-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .travel-offer-flight {
        color: var(--ink);
        font-weight: 650;
    }

    .travel-offer-price {
        color: var(--ink);
        font-weight: 650;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .travel-offer-meta {
        margin: 4px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* O valor que a companhia realmente cobra. Discreto porque o usuário compara em reais, mas
       presente porque é ele que vai aparecer na fatura. */
    .travel-offer-original {
        margin: 2px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        font-variant-numeric: tabular-nums;
    }

    .travel-offers-more {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* O carimbo de coleta é a única defesa contra o usuário tratar um preço morto como vivo, então
       ele fica visível — discreto, mas não escondido. */
    .travel-offers-collected {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .travel-offers-sandbox {
        margin: 0 0 8px;
        border: 1px solid var(--line);
        border-radius: 6px;
        padding: 6px 9px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-weight: 650;
    }

    /* ---------- travel.booking.handoff ---------- */

    .travel-handoff-trip {
        color: var(--ink);
        font-weight: 650;
    }

    .travel-handoff-note {
        margin: 6px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    /* O link é a entrega deste cartão, como no handoff do browser. */
    .travel-handoff-link {
        display: inline-block;
        margin: 12px 0 0;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 7px 12px;
        color: var(--ink);
        font-size: var(--text-sm);
        font-weight: 650;
        text-decoration: none;
    }

    .travel-handoff-link:hover,
    .travel-handoff-link:focus-visible {
        border-color: var(--ink-muted);
    }

    /* ---------- weather.current ---------- */

    .weather-current-place {
        color: var(--ink-muted);
        font-size: var(--text-sm);
        font-weight: 650;
    }

    .weather-current-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 4px;
    }

    .weather-current-icon {
        font-size: 2rem;
        line-height: 1;
    }

    /* A temperatura é o dado do cartão: grande, tabular, sem competir com o resto. */
    .weather-current-temperature {
        color: var(--ink);
        font-size: 2.25rem;
        font-weight: 700;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .weather-current-summary {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 2px;
    }

    .weather-current-condition {
        color: var(--ink);
        font-weight: 650;
        text-transform: capitalize;
    }

    .weather-current-feels,
    .weather-current-meta,
    .weather-current-observed {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .weather-current-meta {
        margin-top: 8px;
    }

    /* Próximas horas em faixa rolável: cada célula é hora, ícone, temperatura e chance de chuva. */
    .weather-current-hours {
        display: flex;
        gap: 4px;
        margin-top: 10px;
        padding-bottom: 4px;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .weather-current-hour {
        display: flex;
        flex: 0 0 auto;
        min-width: 44px;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        border-radius: 8px;
        padding: 6px 4px;
        background: var(--surface-hover);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
    }

    .weather-current-hour-time,
    .weather-current-hour-rain {
        color: var(--ink-muted);
    }

    .weather-current-hour-icon {
        line-height: 1;
    }

    .weather-current-hour-temperature {
        color: var(--ink);
        font-weight: 650;
    }

    .weather-current-observed {
        margin-top: 8px;
    }

    /* ---------- weather.forecast ---------- */

    .weather-forecast-place {
        color: var(--ink-muted);
        font-size: var(--text-sm);
        font-weight: 650;
    }

    /* Uma linha por dia: o rótulo do dia à esquerda, a faixa de temperatura à direita, e a condição
       no meio — a leitura de cima a baixo é pela coluna do dia, não pelos números. */
    .weather-forecast-days {
        display: flex;
        flex-direction: column;
        margin-top: 8px;
    }

    .weather-forecast-day {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        border-top: 1px solid var(--border-subtle, var(--surface-hover));
        font-size: var(--text-sm);
        font-variant-numeric: tabular-nums;
    }

    .weather-forecast-day:first-child {
        border-top: 0;
    }

    .weather-forecast-day-label {
        flex: 0 0 auto;
        min-width: 88px;
        color: var(--ink);
        font-weight: 650;
        text-transform: capitalize;
    }

    .weather-forecast-day-icon {
        flex: 0 0 auto;
        line-height: 1;
    }

    .weather-forecast-day-condition {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        color: var(--ink-muted);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .weather-forecast-day-range {
        flex: 0 0 auto;
        margin-left: auto;
        color: var(--ink);
        font-weight: 650;
    }

    .weather-forecast-day-rain {
        flex: 0 0 auto;
        min-width: 64px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        text-align: right;
    }

    .weather-forecast-issued {
        margin-top: 8px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- shipping.tracking.status ---------- */

    /* Cabeçalho: medalhão com o ícone à esquerda; status grande e código + transportadora à direita.
       A cor do estado mora em --shipping-tone e pinta medalhão, status e o marcador mais recente. */
    .shipping-status {
        --shipping-tone: var(--ink);
        --shipping-tone-bg: var(--surface-hover);
    }

    .shipping-status-delivered {
        --shipping-tone: var(--success, #1a7f37);
        --shipping-tone-bg: color-mix(in srgb, var(--success, #1a7f37) 12%, transparent);
    }

    .shipping-status-outfordelivery,
    .shipping-status-availableforpickup {
        --shipping-tone: var(--green);
        --shipping-tone-bg: color-mix(in srgb, var(--green) 12%, transparent);
    }

    .shipping-status-deliveryfailure,
    .shipping-status-exception {
        --shipping-tone: var(--danger);
        --shipping-tone-bg: color-mix(in srgb, var(--danger) 12%, transparent);
    }

    .shipping-status-expired,
    .shipping-status-notfound {
        --shipping-tone: var(--ink-muted);
    }

    .shipping-status-head {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .shipping-status-badge {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--shipping-tone-bg);
        color: var(--shipping-tone);
    }

    .shipping-status-icon {
        width: 22px;
        height: 22px;
    }

    .shipping-status-summary {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 2px;
    }

    /* O status é o dado do cartão: grande, na cor do estado. */
    .shipping-status-label {
        color: var(--shipping-tone);
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .shipping-status-code {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 8px;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    /* O código é o que a pessoa confere contra o e-mail: monoespaçado e sem quebrar no meio. */
    .shipping-status-number {
        color: var(--ink);
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-weight: 650;
        letter-spacing: 0.02em;
        white-space: nowrap;
        user-select: all;
    }

    .shipping-status-eta {
        margin-top: 10px;
        color: var(--ink);
        font-size: var(--text-sm);
        font-weight: 600;
    }

    /* Linha do tempo em grade: marcador e trilho à esquerda, evento à direita, do mais novo ao mais
       antigo. O primeiro marcador leva a cor do estado; os outros são neutros. */
    .shipping-status-events {
        margin: 14px 0 0;
        padding: 0;
        list-style: none;
    }

    .shipping-status-event {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding: 0 0 12px 22px;
    }

    .shipping-status-event:last-child {
        padding-bottom: 0;
    }

    /* Trilho: uma linha contínua atrás dos marcadores, cortada no último evento. */
    .shipping-status-event::after {
        content: "";
        position: absolute;
        left: 4px;
        top: 12px;
        bottom: -2px;
        width: 2px;
        background: var(--line);
    }

    .shipping-status-event:last-child::after {
        display: none;
    }

    .shipping-status-event::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        width: 10px;
        height: 10px;
        box-sizing: border-box;
        border: 2px solid var(--ink-muted);
        border-radius: 50%;
        background: var(--surface);
        z-index: 1;
    }

    .shipping-status-event:first-child::before {
        border-color: var(--shipping-tone);
        background: var(--shipping-tone);
    }

    .shipping-status-event-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 6px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
    }

    .shipping-status-event-text {
        color: var(--ink);
        font-size: var(--text-sm);
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .shipping-status-event:first-child .shipping-status-event-text {
        font-weight: 600;
    }

    .shipping-status-more,
    .shipping-status-retrieved {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .shipping-status-more {
        margin: 8px 0 0 22px;
    }

    .shipping-status-retrieved {
        margin-top: 12px;
        padding-top: 8px;
        border-top: 1px solid var(--line);
    }

    /* ---------- travel.flight.status ---------- */

    /* Mesmo desenho do cartão da encomenda: a cor do estado mora em --flight-tone e pinta o
       medalhão, a situação e o atraso. Verde para o que anda, vermelho para o que parou,
       âmbar para o que mudou de plano. */
    .flight-status {
        --flight-tone: var(--ink);
        --flight-tone-bg: var(--surface-hover);
    }

    .flight-status-scheduled,
    .flight-status-active,
    .flight-status-landed {
        --flight-tone: var(--green);
        --flight-tone-bg: color-mix(in srgb, var(--green) 12%, transparent);
    }

    .flight-status-delayed,
    .flight-status-diverted {
        --flight-tone: #a4711f;
        --flight-tone-bg: color-mix(in srgb, #a4711f 14%, transparent);
    }

    .flight-status-cancelled,
    .flight-status-incident {
        --flight-tone: var(--danger);
        --flight-tone-bg: color-mix(in srgb, var(--danger) 12%, transparent);
    }

    .flight-status-unknown {
        --flight-tone: var(--ink-muted);
    }

    .flight-status-head {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .flight-status-badge {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--flight-tone-bg);
        color: var(--flight-tone);
    }

    .flight-status-icon {
        width: 22px;
        height: 22px;
    }

    .flight-status-summary {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 2px;
    }

    .flight-status-label {
        color: var(--flight-tone);
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .flight-status-line {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 8px;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    /* O número é o que a pessoa confere contra o cartão de embarque: monoespaçado, sem quebrar. */
    .flight-status-number {
        color: var(--ink);
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-weight: 650;
        letter-spacing: 0.02em;
        white-space: nowrap;
        user-select: all;
    }

    /* As duas pontas lado a lado, com a seta no meio; em tela estreita empilham. */
    .flight-status-route {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        margin-top: 14px;
    }

    .flight-status-route:has(> .flight-endpoint:only-child) {
        grid-template-columns: minmax(0, 1fr);
    }

    @media (max-width: 420px) {
        .flight-status-route {
            grid-template-columns: minmax(0, 1fr);
        }

        .flight-status-arrow {
            display: none;
        }
    }

    .flight-status-arrow {
        align-self: center;
        color: var(--ink-muted);
        font-size: 1.25rem;
        line-height: 1;
    }

    .flight-endpoint {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 1px;
    }

    .flight-endpoint-label {
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /* O código do aeroporto é o dado grande da ponta: é o que se lê no painel de longe. */
    .flight-endpoint-code {
        font-size: 1.375rem;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0.02em;
    }

    .flight-endpoint-airport {
        color: var(--ink-muted);
        font-size: var(--text-xs);
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .flight-endpoint-times {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 6px;
        margin-top: 4px;
        font-variant-numeric: tabular-nums;
    }

    .flight-endpoint-scheduled {
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .flight-endpoint-time {
        font-size: 1rem;
        font-weight: 650;
    }

    .flight-endpoint-delay {
        color: var(--flight-tone);
        font-size: var(--text-xs);
        font-weight: 600;
    }

    .flight-endpoint-meta {
        margin-top: 2px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .flight-status-notes,
    .flight-status-more,
    .flight-status-date-note,
    .flight-status-checked {
        margin-top: 8px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .flight-status-checked {
        margin-top: 12px;
        padding-top: 8px;
        border-top: 1px solid var(--line);
    }

    /* ---------- mobility.ride.handoff ---------- */

    .ride-handoff-route {
        color: var(--ink);
        font-weight: 650;
    }

    .ride-handoff-origin,
    .ride-handoff-note {
        margin: 6px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    /* Um botão por app, lado a lado; os links são a entrega deste cartão. */
    .ride-handoff-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 12px 0 0;
    }

    .ride-handoff-link {
        display: inline-block;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 7px 12px;
        color: var(--ink);
        font-size: var(--text-sm);
        font-weight: 650;
        text-decoration: none;
    }

    .ride-handoff-link:hover,
    .ride-handoff-link:focus-visible {
        border-color: var(--ink-muted);
    }

    .travel-handoff-disclosure {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- web.driver.handoff ---------- */

    /* Mesmo motivo do cartão de live view: `blockText` devolve `span`, e sem `display: block` o
       resumo, o motivo e o link saem na mesma linha, colados. */
    .web-driver-handoff-summary {
        display: block;
        color: var(--ink);
        font-weight: 650;
    }

    .web-driver-handoff-reason {
        display: block;
        margin: 6px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    /* O link é a entrega deste cartão, então ele se parece com o botão principal e não com um link
       no meio de um texto. */
    .web-driver-handoff-link {
        display: inline-block;
        margin: 12px 0 0;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 7px 12px;
        color: var(--ink);
        font-size: var(--text-sm);
        font-weight: 650;
        text-decoration: none;
    }

    .web-driver-handoff-link:hover,
    .web-driver-handoff-link:focus-visible {
        border-color: var(--ink-muted);
    }

    /* ---------- web.driver.live_view ---------- */

    /* `blockText` devolve um `span`, e o corpo do bloco não é flex: sem `display: block` a frase, o
       botão e o aviso fluem na mesma linha e saem colados uns nos outros, sem nem um espaço entre
       eles. Foi assim que o cartão nasceu em produção. */
    .web-driver-live-view-reason {
        display: block;
        color: var(--ink);
        font-weight: 650;
    }

    /* Mesma forma do link do handoff: os dois cartões terminam num botão, e diferenciá-los aqui
       faria o usuário achar que um deles é menos real que o outro. */
    .web-driver-live-view-link {
        display: inline-block;
        margin: 12px 0 0;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 7px 12px;
        color: var(--ink);
        font-size: var(--text-sm);
        font-weight: 650;
        text-decoration: none;
    }

    .web-driver-live-view-link:hover,
    .web-driver-live-view-link:focus-visible {
        border-color: var(--ink-muted);
    }

    /* O aviso de custo fica visível, e não em cinza de rodapé: é a única entrega em que o usuário
       paga pelos minutos que ele mesmo gasta.

       O recuo à esquerda alinha o aviso com o rótulo dentro do botão (borda de 1px mais 12px de
       padding), para ele ler como nota do botão e não como frase solta do cartão. */
    .web-driver-live-view-note {
        display: block;
        margin: 8px 0 0;
        padding-left: 13px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* A seta indica que o clique sai daqui — o botão abre a sessão em outra aba. */
    .web-driver-live-view-icon {
        margin-left: 6px;
        vertical-align: -2px;
    }

    /* ---------- email.thread ---------- */

    .email-thread-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .email-thread-row {
        padding: 10px 11px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--surface-strong);
    }

    .email-thread-header {
        display: flex;
        min-width: 0;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .email-thread-sender {
        min-width: 0;
        overflow: hidden;
        color: var(--ink);
        font-size: var(--text-sm);
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .email-thread-date {
        flex: 0 0 auto;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
    }

    .email-thread-subject {
        display: block;
        margin-top: 4px;
        color: var(--ink);
        font-size: var(--text-sm);
        font-weight: 650;
    }

    .email-thread-body {
        display: block;
        margin-top: 5px;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        line-height: 1.45;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .email-thread-truncated,
    .email-thread-more {
        display: block;
        margin: 7px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .email-thread-truncated {
        font-style: italic;
    }

    /* ---------- tasks.items ---------- */

    .task-items-list {
        display: flex;
        flex-direction: column;
    }

    .task-items-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: baseline;
        gap: 12px;
        padding: 7px 0;
    }

    .task-items-row + .task-items-row {
        border-top: 1px solid var(--line);
    }

    .task-items-row.is-completed {
        opacity: 0.65;
    }

    .task-items-detail {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: 8px;
    }

    .task-items-title,
    .task-items-notes {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .task-items-title {
        flex: 0 1 auto;
        color: var(--ink);
        font-weight: 650;
    }

    .task-items-row.is-completed .task-items-title {
        text-decoration: line-through;
    }

    .task-items-notes {
        min-width: 0;
        flex: 1 1 auto;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .task-items-notes::before {
        content: "—";
        margin-right: 8px;
    }

    .task-items-due {
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* Vencida e não concluída: o único estado de uma tarefa que precisa saltar aos olhos. */
    .task-items-due.is-overdue {
        color: var(--danger);
        font-weight: 650;
    }

    .task-items-status {
        padding: 1px 8px;
        border-radius: 999px;
        color: var(--on-soft-accent);
        background: var(--green-soft);
        font-size: var(--text-2xs);
        font-weight: 650;
        white-space: nowrap;
    }

    .task-items-more {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- tasks.item-created ---------- */

    .task-item-created {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .task-item-created-title {
        min-width: 0;
    }

    .task-item-created-name {
        overflow: hidden;
        color: var(--ink);
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .task-item-created-details {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- entity lists (contacts, files, scheduled tasks, history) ---------- */

    .entity-rows {
        display: flex;
        flex-direction: column;
    }

    .entity-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 4px 12px;
        padding: 7px 0;
    }

    .entity-row + .entity-row {
        border-top: 1px solid var(--line);
    }

    .entity-row-muted .entity-primary,
    .entity-row-muted .entity-secondary {
        color: var(--ink-muted);
    }

    .entity-main {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: 8px;
    }

    .entity-primary,
    .entity-secondary {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .entity-primary {
        flex: 0 1 auto;
        color: var(--ink);
        font-weight: 650;
    }

    a.entity-primary {
        text-decoration: none;
    }

    a.entity-primary:hover {
        text-decoration: underline;
    }

    .entity-secondary {
        min-width: 0;
        flex: 1 1 auto;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .entity-meta {
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .entity-note {
        grid-column: 1 / -1;
        margin: 0;
        overflow: hidden;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .entity-more {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    a.mutation-result-title {
        text-decoration: none;
    }

    a.mutation-result-title:hover {
        text-decoration: underline;
    }

    /* ---------- notes.item ---------- */

    .notes-item-content {
        display: block;
        margin-top: 8px;
        color: var(--ink);
        font-size: 14px;
        line-height: 1.5;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    /* ---------- tasks.lists ---------- */

    .task-lists-list {
        display: flex;
        flex-direction: column;
    }

    .task-lists-row {
        display: block;
        padding: 7px 0;
        overflow: hidden;
        color: var(--ink);
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .task-lists-row + .task-lists-row {
        border-top: 1px solid var(--line);
    }

    .task-lists-more {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .block-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px;
        border-top: 1px solid var(--line);
        background: var(--surface-strong);
    }

    .block-action {
        min-height: 36px;
        padding: 0 14px;
        border: 1px solid var(--control-line);
        border-radius: 6px;
        color: var(--ink);
        background: var(--surface-strong);
        font-size: var(--text-sm);
        font-weight: 650;
    }

    .block-action:hover:not(:disabled) {
        border-color: var(--green);
        background: var(--green-soft);
    }

    .block-action.primary {
        border-color: var(--button-primary);
        color: var(--on-button-primary);
        background: var(--button-primary);
    }

    .block-action.primary:hover:not(:disabled) {
        background: var(--button-primary-hover);
    }

    /* Um plano de navegação aprovado leva quarenta segundos executando antes de o César responder.
       Nesse tempo o botão já estava desabilitado, mas continuava com a mesma cara de botão vivo:
       sem hover apagado nem opacidade, o usuário aperta "Confirmar" mais três vezes achando que o
       primeiro clique não pegou. O estado é o mesmo para o botão em voo e para o já gasto — em
       ambos não há nada a fazer com ele. */
    .block-action:disabled {
        opacity: 0.55;
        cursor: default;
    }

    /* Hidden until the message is hovered or one of its own actions has focus, so the thread does
       not carry a permanent row of timestamps and buttons under every single bubble. Touch
       screens have no hover to reveal it with, so they get it visible unconditionally instead —
       otherwise Copy and Resend would be unreachable there. */
    .message-footer {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 5px;
        opacity: 0;
        transition: opacity 120ms ease;
    }

    .message:hover .message-footer,
    .message:focus-within .message-footer {
        opacity: 1;
    }

    /* No toque não há hover para revelar o rodapé, e deixá-lo sempre visível enchia a conversa de
       fileiras de "Copiar/Reenviar" — uma sob cada bolha. A hora fica; as ações saem e voltam pelo
       toque longo, que é o gesto que as pessoas já usam em aplicativo de mensagem. */
    @media (hover: none) {
        .message-footer {
            opacity: 1;
        }


        /* Precisa valer *antes* do gesto, e não enquanto o nosso menu está aberto: o iOS assume o
           toque longo por conta própria, começa a seleção e dispara `pointercancel` — que cancela
           a contagem do nosso menu. Era por isso que ele nunca abria.

           O preço é a seleção parcial no toque, que é a troca já aceita: copiar a mensagem inteira
           é o caso comum, e o desktop continua selecionando normalmente. */
        .message-content,
        .message-content * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }
    }

    .message {
        position: relative;
    }

    .message-menu {
        position: absolute;
        z-index: 3;
        bottom: 100%;
        margin-bottom: 6px;
        display: flex;
        flex-direction: column;
        min-width: 168px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface-strong);
        /* A conversa rola atrás do menu; sem sombra ele se confunde com a bolha de cima. */
        box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
    }

    /* Ancorado do lado da bolha a que pertence: à direita nas suas mensagens, à esquerda nas dele. */
    .message.user .message-menu {
        right: 0;
    }

    .message.assistant .message-menu {
        left: 0;
    }

    .message-menu-item {
        padding: 11px 14px;
        border: 0;
        background: none;
        color: var(--ink);
        font: inherit;
        font-size: var(--text-sm);
        text-align: left;
        cursor: pointer;
    }

    .message-menu-item + .message-menu-item {
        border-top: 1px solid var(--line);
    }

    .message-menu-item:hover,
    .message-menu-item:focus-visible {
        background: var(--surface);
    }

    @media (prefers-reduced-motion: reduce) {
        .message-footer {
            transition: none;
        }
    }

    .message-footer time {
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        font-variant-numeric: tabular-nums;
    }

    .message-actions {
        display: flex;
        gap: 4px;
    }

    /* Depois da regra base de propósito: as duas têm a mesma especificidade, e quem vem por último
       vence. Colocado antes, o `display: flex` acima o desfazia em silêncio. */
    @media (hover: none) {
        .message-actions {
            display: none;
        }
    }

    /* 24px é o mínimo de alvo da WCAG 2.5.8; o botão tinha ~20px de altura. Em ponteiro
       grosso vai a 32px, onde o dedo — e não o cursor — é quem precisa acertar. */
    .message-action {
        display: inline-flex;
        min-height: 24px;
        padding: 3px 10px;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--ink-muted);
        background: transparent;
        font-size: var(--text-2xs);
        font-weight: 650;
    }

    @media (pointer: coarse) {
        .message-action {
            min-height: 40px;
            padding: 6px 13px;
        }
    }

    .message-action:hover {
        border-color: var(--line-hover);
        color: var(--ink);
        background: var(--surface-hover);
    }

    .assistant-mark {
        display: grid;
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        place-items: center;
        border: 1px solid var(--assistant-ring);
        border-radius: 50%;
        color: var(--on-soft-accent);
        background: var(--green-soft);
        font-family: Georgia, "Times New Roman", serif;
        font-weight: 700;
    }

    .message.error .message-content {
        color: var(--danger);
    }

    /* O que sobrou do painel de confirmação depois que ele virou o bloco action.confirm: só a
       tipografia. A moldura, a faixa de acento e a linha de ações agora vêm de .block, que as
       aplica igualmente a todo tipo de bloco. */

    .confirmation-description {
        margin: 0;
        color: var(--ink);
        font-weight: 650;
    }

    /* Campo rotulado dos cartões de aprovação ricos (regra proativa): rótulo curto em caixa alta
       discreta, valor em prosa. */
    .confirmation-field {
        margin: 0 0 10px;
    }

    .confirmation-field:last-child {
        margin-bottom: 0;
    }

    .confirmation-field-label {
        display: block;
        margin-bottom: 2px;
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .confirmation-details {
        margin-top: 10px;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .confirmation-details summary {
        width: fit-content;
        cursor: pointer;
        color: var(--accent-ink);
        font-weight: 650;
    }

    .confirmation-details pre {
        max-height: 180px;
        margin: 10px 0 0;
        padding: 10px;
        overflow: auto;
        border: 1px solid var(--line);
        border-radius: 4px;
        background: var(--code-bg);
        font: 12px/1.45 Consolas, "Courier New", monospace;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    /* ---------- cartão de automação disparada ----------
       Não é bolha de conversa: ninguém digitou aquilo — uma condição criada pelo usuário
       aconteceu. O cartão tem identidade própria: badge de raio, kicker em caixa alta e o nome
       da regra como título. */

    .automation-card {
        margin: 18px auto;
        max-width: 560px;
        width: 100%;
        padding: 14px 16px;
        border: 1px solid var(--tile-preferred-border);
        border-left: 4px solid var(--green);
        border-radius: 10px;
        background: var(--tile-preferred-bg);
        box-shadow: var(--shadow-2);
    }

    .automation-card-header {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 8px;
    }

    .automation-card-badge {
        display: grid;
        place-items: center;
        flex: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--green-soft);
        border: 1px solid var(--tile-preferred-border);
        font-size: var(--text-sm);
        line-height: 1;
    }

    .automation-card-kicker {
        flex: 1;
        min-width: 0;
        color: var(--accent-ink);
        font-size: var(--text-2xs);
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .automation-card-header time {
        flex: none;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .automation-card-title {
        margin: 0 0 6px;
        color: var(--ink);
        font-weight: 700;
        font-size: 15px;
    }

    .automation-card-body {
        margin: 0;
        color: var(--ink);
        font-size: 14px;
        line-height: 1.5;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .confirmation-status {
        min-height: 20px;
        margin: 10px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .typing-dots {
        display: inline-flex;
        gap: 5px;
        padding-top: 10px;
    }

    .typing-dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
        animation: typing 900ms infinite ease-in-out;
    }

    .typing-dots span:nth-child(2) {
        animation-delay: 120ms;
    }

    .typing-dots span:nth-child(3) {
        animation-delay: 240ms;
    }

    /* The container is just a stack of rows now — one call to notice.show() no longer erases
       whatever the previous one was showing. */
    .notice {
        position: fixed;
        z-index: 5;
        top: 84px;
        left: 50%;
        display: flex;
        width: min(520px, calc(100% - 32px));
        flex-direction: column;
        gap: 8px;
        translate: -50% 0;
    }

    .notice[hidden] {
        display: none;
    }

    .notice-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border: 1px solid var(--warn-border);
        border-radius: 6px;
        color: var(--warn-ink);
        background: var(--warn-bg);
        box-shadow: var(--shadow-2);
        font-size: 14px;
        text-align: left;
        animation: enter 180ms ease-out both;
    }

    .notice-item span {
        flex: 1;
    }

    /* Errors get their own color, distinct from the informational amber — and, unlike info rows,
       do not disappear on a timer (see notice.ts), so they carry the dismiss button below instead. */
    .notice-item.notice-error {
        border-color: var(--danger-border);
        color: var(--danger);
        background: var(--danger-bg);
    }

    .notice-dismiss {
        display: grid;
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        place-items: center;
        border: none;
        border-radius: 50%;
        color: inherit;
        background: transparent;
        font-size: 15px;
        line-height: 1;
        opacity: 0.7;
    }

    .notice-dismiss:hover {
        opacity: 1;
        background: rgba(0, 0, 0, 0.08);
    }

    @media (prefers-reduced-motion: reduce) {
        .notice-item {
            animation: none;
        }
    }

    .composer-area {
        z-index: 2;
        padding: 14px max(18px, calc((100% - 920px) / 2)) 20px;
        border-top: 1px solid var(--line);
        background: var(--glass-footer);
        backdrop-filter: blur(14px);
    }

    /* Quatro colunas: anexo, campo, microfone, Enviar. */
    .composer {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: 10px;
        align-items: end;
        padding: 8px 8px 8px 16px;
        border: 1px solid var(--line-control);
        border-radius: 8px;
        background: var(--surface-strong);
        box-shadow: var(--shadow-2);
    }

    .attachment-preview {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 46px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        min-height: 58px;
        padding: 6px 8px;
        border-bottom: 1px solid var(--line);
    }

    .attachment-preview[hidden] {
        display: none;
    }

    .attachment-preview img {
        width: 46px;
        height: 46px;
        object-fit: cover;
        border: 1px solid var(--line);
        border-radius: 4px;
        background: var(--canvas);
    }

    .attachment-preview img[hidden] {
        display: none;
    }

    .attachment-meta {
        min-width: 0;
    }

    .attachment-meta strong,
    .attachment-meta span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .attachment-meta strong {
        font-size: 14px;
    }

    .attachment-meta span {
        margin-top: 3px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .attach-button,
    .remove-attachment-button {
        display: grid;
        place-items: center;
        border: 1px solid var(--control-line);
        color: var(--accent-ink);
        background: var(--surface-strong);
        font-weight: 700;
    }

    .attach-button {
        width: 42px;
        height: 42px;
        border-radius: 6px;
        font-size: 24px;
        line-height: 1;
    }

    .remove-attachment-button {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 14px;
    }

    .attach-button:hover:not(:disabled),
    .remove-attachment-button:hover:not(:disabled) {
        border-color: var(--green);
        background: var(--green-soft);
    }

    .composer:focus-within {
        border-color: var(--green);
    }

    .composer textarea {
        width: 100%;
        max-height: 156px;
        padding: 9px 0;
        resize: none;
        overflow-y: hidden;
        border: 0;
        outline: 0;
        color: var(--ink);
        background: transparent;
        line-height: 1.45;
    }

    .composer textarea::placeholder {
        color: var(--placeholder);
    }

    .send-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 82px;
        min-height: 42px;
        padding: 0 17px;
        border: 1px solid var(--button-primary);
        border-radius: 6px;
        color: var(--on-button-primary);
        background: var(--button-primary);
        font-weight: 700;
    }

    /* Em desktop o rótulo basta; o ícone só aparece quando o texto some (telas estreitas). */
    .send-button-icon {
        display: none;
        flex: 0 0 auto;
    }

    .send-button:hover:not(:disabled) {
        background: var(--button-primary-hover);
    }

    .send-button:disabled,
    .composer textarea:disabled,
    .attach-button:disabled,
    .mic-button:disabled,
    .remove-attachment-button:disabled {
        cursor: not-allowed;
        opacity: 0.58;
    }

    /* ---------- entrada por voz ---------- */

    /* Entre o campo e o Enviar. Mesma família visual do botão de anexo: contorno, não
       preenchimento — o Enviar continua sendo o único botão sólido. */
    .mic-button {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid var(--control-line);
        border-radius: 6px;
        color: var(--accent-ink);
        background: var(--surface-strong);
    }

    .mic-button:hover:not(:disabled) {
        border-color: var(--green);
        background: var(--green-soft);
    }

    /* Ditar e escrever são modos exclusivos do mesmo espaço: enquanto grava, o painel é o
       composer. Esconder (e não sobrepor) evita foco alcançável por teclado em controles
       invisíveis. */
    .composer.is-recording .attach-button,
    .composer.is-recording textarea,
    .composer.is-recording .mic-button,
    .composer.is-recording .send-button,
    .composer.is-recording .attachment-preview {
        display: none;
    }

    .recorder-panel {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        min-height: 42px;
    }

    .recorder-panel[hidden] {
        display: none;
    }

    .recorder-live,
    /* ---------- espera bloqueante (core/blocking-progress.ts) ---------- */

    /* O cartão é estreito e centrado: não há nada para ler além do que está acontecendo. */
    .blocking-progress {
        width: min(340px, 100%);
        padding: 28px 24px;
        display: grid;
        justify-items: center;
        gap: 12px;
        text-align: center;
    }

    .blocking-progress:focus-visible {
        outline: none;
    }

    /* Maior que o spinner de botão: aqui ele é o conteúdo, não um adorno ao lado do rótulo. */
    .blocking-progress-spinner {
        width: 34px;
        height: 34px;
        border: 3px solid var(--line);
        border-top-color: var(--green);
        border-radius: 50%;
        animation: recorder-spin 0.9s linear infinite;
    }

    .blocking-progress-title {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: var(--ink);
    }

    .blocking-progress-message {
        margin: 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        line-height: 1.45;
    }

    /* Quem não quer animação vê um pulso suave: sem giro, mas ainda com sinal de que algo corre. */
    @media (prefers-reduced-motion: reduce) {
        .blocking-progress-spinner {
            animation: blocking-progress-pulse 1.6s ease-in-out infinite;
        }
    }

    @keyframes blocking-progress-pulse {
        50% { opacity: 0.35; }
    }

    .recorder-transcribing {
        display: flex;
        gap: 12px;
        align-items: center;
        min-width: 0;
    }

    .recorder-live[hidden],
    .recorder-transcribing[hidden] {
        display: none;
    }

    .recorder-dot {
        flex: none;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--danger);
        animation: recorder-pulse 1.4s ease-in-out infinite;
    }

    @keyframes recorder-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.35; }
    }

    .recorder-timer {
        flex: none;
        min-width: 44px;
        color: var(--ink);
        font-weight: 650;
        font-variant-numeric: tabular-nums;
    }

    /* O nível de cada barra chega por JS; aqui mora só a moldura. overflow escondido porque as
       barras crescem a partir do centro e não podem empurrar a altura do composer. */
    .recorder-bars {
        display: flex;
        flex: 1;
        gap: 3px;
        align-items: center;
        min-width: 0;
        height: 30px;
        overflow: hidden;
    }

    .recorder-bars span {
        flex: 1;
        min-height: 4px;
        height: 4px;
        max-width: 6px;
        border-radius: 3px;
        background: var(--green);
        transition: height 90ms ease-out;
    }

    .recorder-transcribing {
        color: var(--ink-muted);
        font-size: 14px;
    }

    .recorder-spinner {
        flex: none;
        width: 16px;
        height: 16px;
        border: 2px solid var(--line);
        border-top-color: var(--green);
        border-radius: 50%;
        animation: recorder-spin 0.8s linear infinite;
    }

    @keyframes recorder-spin {
        to { rotate: 1turn; }
    }

    .recorder-cancel-button,
    .recorder-stop-button {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 6px;
    }

    .recorder-cancel-button {
        border: 1px solid var(--control-line);
        color: var(--danger);
        background: var(--surface-strong);
    }

    .recorder-cancel-button:hover:not(:disabled) {
        border-color: var(--danger-border);
        background: var(--danger-bg);
    }

    /* O gesto principal do painel — parar e virar texto — herda o sólido do Enviar, porque é o
       Enviar deste modo. */
    .recorder-stop-button {
        border: 1px solid var(--button-primary);
        color: var(--on-button-primary);
        background: var(--button-primary);
    }

    .recorder-stop-button:hover:not(:disabled) {
        background: var(--button-primary-hover);
    }

    .recorder-cancel-button:disabled,
    .recorder-stop-button:disabled {
        cursor: not-allowed;
        opacity: 0.58;
    }

    .skip-link {
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 20;
        padding: 10px 16px;
        border-radius: 6px;
        color: var(--on-button-primary);
        background: var(--button-primary);
        font-weight: 650;
        text-decoration: none;
        translate: 0 -140%;
        transition: translate 140ms ease-out;
    }

    .skip-link:focus-visible {
        translate: 0 0;
    }

    @media (prefers-reduced-motion: reduce) {
        .skip-link {
            transition: none;
        }
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* height fixa, não auto: o <body> é overflow:hidden (o chat precisa da página travada),
       então um shell com height:auto cresce além da viewport, é cortado pelo body, e o
       próprio overflow-y:auto dele nunca ativa — nada rola. Limitando a altura, o shell vira
       o contêiner de rolagem. Era um bug latente aqui, que só apareceu quando a página Sobre
       ficou mais alta que a tela. */
    .profile-shell,
    .page-shell {
        display: block;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        scrollbar-color: var(--line-hover) transparent;
        scrollbar-width: thin;
    }

    .profile-shell {
        --shell-measure: 940px;
    }

    /* ---------- assumir o navegador (live view) ---------- */

    /* Esta tela é o navegador, e não uma página com um navegador dentro: a moldura ocupa o que
       sobra da altura, porque cada pixel tirado dela é pixel a menos do site que a pessoa veio
       operar — e ela está pagando por minuto enquanto procura o campo de senha. */
    .webdriver-shell {
        --shell-measure: 1280px;
    }

    .webdriver-main {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: min(var(--shell-measure), calc(100% - 40px));
        margin: 0 auto;
        padding: 16px 0 24px;
        flex: 1;
        min-height: 0;
    }

    /* `hidden` é atributo, mas quem o faz sumir é o `display: none` da folha do navegador — e
       qualquer `display` declarado aqui vence essa regra. Sem estas duas linhas a caixa de estado
       fica empilhada sobre a moldura, que foi exatamente o que apareceu em produção: cinza e
       branco juntos, com o navegador remoto espremido no que sobrou. */
    .webdriver-status[hidden],
    .webdriver-footer[hidden],
    .webdriver-frame[hidden] {
        display: none;
    }

    .webdriver-status {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 240px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface-strong);
    }

    .webdriver-status-text {
        margin: 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .webdriver-frame {
        flex: 1;
        /* Sem base própria a moldura encolhe para o conteúdo (zero, num iframe) quando o pai não
           consegue distribuir altura. 60vh é o piso; o `flex: 1` cresce a partir dele. */
        min-height: 60vh;
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface-strong);
    }

    .webdriver-actions[hidden] {
        display: none;
    }

    .webdriver-actions {
        display: flex;
        justify-content: flex-end;
    }

    /* Fica acima da moldura e alinhado à direita: é o fim da tarefa, e o olho procura o "pronto"
       no canto onde ele costuma estar. */
    .webdriver-return {
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 7px 12px;
        background: var(--surface-strong);
        color: var(--ink);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 650;
        cursor: pointer;
    }

    .webdriver-return:hover,
    .webdriver-return:focus-visible {
        border-color: var(--ink-muted);
    }

    .webdriver-return:disabled {
        cursor: default;
        opacity: 0.6;
    }

    .webdriver-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 16px;
        justify-content: space-between;
        margin: 0;
    }

    .webdriver-note,
    .webdriver-expiry {
        margin: 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .webdriver-note strong {
        color: var(--ink);
    }

    /* No celular a moldura é a tela: cada ponto gasto com moldura, margem ou aviso é um ponto a
       menos do site que a pessoa veio operar — e ela está pagando por minuto enquanto procura o
       campo de senha. O aviso continua legível, só para de ocupar duas linhas. */
    @media (max-width: 700px) {
        .webdriver-main {
            width: 100%;
            gap: 8px;
            padding: 8px 0 12px;
        }

        .webdriver-frame {
            min-height: 0;
            border-radius: 6px;
        }

        .webdriver-footer {
            flex-direction: column;
            gap: 2px;
            padding: 0 12px;
        }

        .webdriver-actions {
            padding: 0 12px;
        }
    }

    /* Dentro de um shell que rola, o cabeçalho gruda no topo: numa página longa a marca, o
       tema e o menu de conta continuam alcançáveis sem voltar ao início. */
    .profile-shell > .app-header,
    .page-shell > .app-header {
        position: sticky;
        top: 0;
    }

    /* ---------- rodapé institucional ---------- */
    /* A largura acompanha a medida da página em que o rodapé foi inserido, para a linha do
       topo dele bater com a coluna do conteúdo em vez de ultrapassá-la. */
    .site-footer {
        display: flex;
        width: min(var(--shell-measure, 940px), calc(100% - 40px));
        margin: 0 auto;
        padding: 20px 0 max(24px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        gap: 8px 24px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    /* Dentro da tela inicial do chat o contêiner já limita e centraliza; aplicar a medida
       de novo criaria um recuo duplo. */
    .intro .site-footer {
        width: 100%;
        margin-top: 12px;
    }

    .site-footer-legal {
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .site-footer-nav {
        display: flex;
        gap: 20px;
    }

    /* 24px de alvo mínimo (WCAG 2.5.8) sem engordar o texto: o padding vertical cresce,
       e a margem negativa devolve o espaço para o rodapé não ficar alto demais. */
    .site-footer-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        margin: -4px 0;
        padding: 4px 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        text-decoration: none;
    }

    .site-footer-nav a:hover {
        color: var(--ink);
        text-decoration: underline;
    }

    @media (pointer: coarse) {
        .site-footer-nav a {
            min-height: 32px;
        }
    }

    /* ---------- páginas de conteúdo (Sobre, Contato) ---------- */
    .page-shell {
        --shell-measure: 720px;
    }

    .page-main {
        width: min(720px, calc(100% - 40px));
        margin: 0 auto;
        padding: 48px 0 56px;
    }

    .page-header {
        margin-bottom: 40px;
    }

    /* Não usa --text-display-sm (34–52px): aquela é a escala do hero da home, e num texto
       corrido de 720px ela grita. Esta fica entre o heading grande e o display. */
    .page-header h1 {
        margin: 10px 0 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        line-height: 1.15;
    }

    .page-lede {
        margin: 18px 0 0;
        color: var(--ink-muted);
        font-size: 18px;
        line-height: 1.6;
        text-wrap: pretty;
    }

    .page-section {
        margin-top: 36px;
    }

    .page-section h2 {
        margin: 0 0 12px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-sm);
    }

    /* 66ch é a faixa em que a linha ainda é confortável de ler; acima disso o olho perde
       o começo da linha seguinte. */
    .page-section p {
        margin: 0 0 14px;
        line-height: 1.68;
        text-wrap: pretty;
    }

    .page-section p:last-child {
        margin-bottom: 0;
    }

    .page-list {
        max-width: 66ch;
        margin: 0;
        padding-left: 20px;
        line-height: 1.68;
    }

    .page-list li {
        margin-bottom: 8px;
    }

    .page-list li:last-child {
        margin-bottom: 0;
    }

    .page-section a,
    .page-list a {
        color: var(--accent-ink);
        text-decoration-color: var(--line-hover);
        text-underline-offset: 2px;
    }

    .page-section a:hover,
    .page-list a:hover {
        text-decoration-thickness: 2px;
    }

    /* ---------- página de integrações ---------- */
    /* Mais larga que Sobre/Contato: aqui o conteúdo é uma grade de cartões, não prosa, e a
       medida de leitura de 66ch não se aplica. */
    .page-main-wide {
        width: min(1000px, calc(100% - 40px));
    }

    .page-shell:has(.page-main-wide) {
        --shell-measure: 1000px;
    }

    .section-heading {
        margin: 0 0 20px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-md);
    }

    .integration-hero {
        margin-bottom: 52px;
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--surface-strong);
        box-shadow: var(--shadow-2);
    }

    .integration-hero-top {
        display: flex;
        gap: 18px;
        flex-wrap: wrap;
        align-items: center;
    }

    .integration-logo {
        display: grid;
        width: 56px;
        height: 56px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--canvas);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 26px;
        font-weight: 700;
    }

    .integration-hero-text {
        flex: 1 1 260px;
        min-width: 0;
    }

    .integration-hero-text h2 {
        margin: 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-md);
    }

    .integration-hero-text p {
        margin: 4px 0 0;
        color: var(--ink-muted);
        font-size: 15px;
    }

    .integration-cta {
        flex: 0 0 auto;
        text-decoration: none;
    }

    .integration-cta.is-connected .google-mark {
        color: var(--on-soft-accent);
    }

    /* Números do topo. <dl> e não uma lista solta: cada valor é a definição de um rótulo. */
    .integration-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        margin: 26px 0 0;
        padding-top: 22px;
        border-top: 1px solid var(--line);
        gap: 18px;
    }

    .integration-stats dt {
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-weight: 650;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .integration-stats dd {
        margin: 4px 0 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 26px;
    }

    .integration-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        margin: 0;
        padding: 0;
        gap: 14px;
        list-style: none;
    }

    .integration-item {
        display: flex;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 14px;
        flex-direction: column;
        gap: 8px;
        background: var(--surface);
    }

    .integration-item h3 {
        margin: 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 17px;
    }

    .integration-item p {
        margin: 0;
        flex: 1 1 auto;
        color: var(--ink-muted);
        font-size: 14px;
        line-height: 1.6;
        text-wrap: pretty;
    }

    .integration-count {
        color: var(--on-soft-accent);
        font-size: var(--text-xs);
        font-weight: 650;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    /* Localização não é uma conexão que o usuário faz; a borda tracejada separa o cartão dos
       que exigem uma ação dele. */
    .integration-item-builtin {
        border-style: dashed;
        background: none;
    }

    .integration-notes {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 22px;
    }

    .integration-note h3 {
        margin: 0 0 6px;
        font-size: 15px;
        font-weight: 650;
    }

    .integration-note p {
        max-width: none;
        margin: 0;
        color: var(--ink-muted);
        font-size: 14px;
        line-height: 1.6;
    }

    .contact-primary {
        margin: 0 0 14px;
        font-size: 20px;
    }

    .contact-primary a {
        font-weight: 650;
        /* Um e-mail longo não pode empurrar a largura da página num celular estreito. */
        overflow-wrap: break-word;
    }

    .profile-main {
        display: flex;
        width: min(940px, calc(100% - 40px));
        margin: 0 auto;
        padding: 40px 0 64px;
        flex-direction: column;
        gap: 20px;
    }

    .profile-main[hidden] {
        display: none;
    }

    .profile-layout {
        display: grid;
        grid-template-columns: 216px minmax(0, 1fr);
        gap: 32px;
        align-items: start;
    }

    .profile-sidebar {
        display: flex;
        position: sticky;
        top: 24px;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .profile-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    /* A aba ativa é marcada por uma faixa de acento à esquerda, não só por peso de fonte:
       cor sozinha não é indicador suficiente (WCAG 1.4.1). */
    .profile-nav-item {
        position: relative;
        padding: 10px 14px;
        border: none;
        border-radius: 8px;
        background: none;
        color: var(--ink-muted);
        font: inherit;
        font-size: 15px;
        text-align: left;
        cursor: pointer;
        transition: background 120ms ease, color 120ms ease;
    }

    .profile-nav-item::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 3px;
        height: 0;
        border-radius: 0 3px 3px 0;
        background: var(--green);
        transform: translateY(-50%);
        transition: height 140ms ease;
    }

    .profile-nav-item:hover {
        background: var(--surface-hover);
        color: var(--ink);
    }

    .profile-nav-item.is-active {
        background: var(--green-soft);
        color: var(--on-soft-accent);
        font-weight: 650;
    }

    .profile-nav-item.is-active::before {
        height: 60%;
    }

    .profile-nav-item:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }

    .profile-sidebar-footer {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 16px;
        border-top: 1px solid var(--line);
    }

    .profile-terms-link {
        color: var(--ink-muted);
        font-size: var(--text-sm);
        text-decoration: underline;
    }

    .profile-sections {
        display: flex;
        flex-direction: column;
        gap: 20px;
        min-width: 0;
    }

    .profile-card-header {
        margin-bottom: 24px;
    }

    .profile-card-header-row {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        justify-content: space-between;
    }

    .profile-card-hint {
        margin: 6px 0 0;
        color: var(--ink-muted);
        font-size: 14px;
    }

    .usage-month-nav {
        display: flex;
        flex: 0 0 auto;
        gap: 6px;
    }

    .usage-month-button {
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border: 1px solid var(--line-control);
        border-radius: 8px;
        color: var(--ink);
        background: var(--surface-strong);
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
    }

    .usage-month-button:hover:not(:disabled) {
        border-color: var(--line-hover);
        background: var(--surface-hover);
    }

    .usage-month-button:disabled {
        color: var(--ink-muted);
        cursor: default;
        opacity: 0.5;
    }

    /* 34px é confortável para o mouse e pequeno para o dedo. Em vez de engordar o botão em toda
       tela, ele cresce só onde o ponteiro é grosso — que é onde o alvo de 44px importa. */
    @media (pointer: coarse) {
        .usage-month-button {
            width: 44px;
            height: 44px;
        }
    }

    /* Enquanto um mês carrega, o conteúdo anterior fica visível mas esmaecido: trocar por
       um vazio faria a tela piscar a cada passo de navegação. */
    .usage-body.is-loading {
        opacity: 0.45;
        pointer-events: none;
        transition: opacity 120ms ease;
    }

    /* O saldo é do ciclo, não do mês: fica destacado acima da grade de totais, que muda
       conforme a navegação entre meses. */
    .credits-summary {
        padding: 20px;
        border: 1px solid transparent;
        border-radius: 12px;
        margin: 0 0 20px;
        background: var(--green-soft);
        color: var(--on-soft-accent);
    }

    .credits-summary-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
    }

    .credits-summary .usage-total-label,
    .credits-summary .usage-total-hint {
        display: block;
        color: var(--on-soft-accent);
        opacity: 0.75;
    }

    .credits-balance {
        display: block;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 32px;
        line-height: 1.1;
    }

    .credits-meter {
        height: 10px;
        border-radius: 5px;
        margin: 16px 0 6px;
        background: rgb(0 0 0 / 12%);
        overflow: hidden;
    }

    .credits-meter-fill {
        display: block;
        width: 0;
        height: 100%;
        border-radius: 5px;
        background: var(--on-soft-accent);
        transition: width 200ms ease;
    }

    @media (prefers-reduced-motion: reduce) {
        .credits-meter-fill,
        .usage-body.is-loading {
            transition: none;
        }
    }

    /* Barra cheia é o mesmo estado do chat bloqueado; a cor precisa dizer isso sem texto. */
    .credits-meter.is-exhausted .credits-meter-fill {
        background: #b3261e;
    }

    .credits-meter-label {
        font-size: var(--text-xs);
        opacity: 0.75;
    }

    /* As duas cestas, separadas por uma linha. A franquia vem primeiro porque é a que expira e a
       que é gasta primeiro — a ordem visual repete a ordem do débito. */
    .credits-allowance {
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid rgb(0 0 0 / 10%);
    }

    .credits-spend-order {
        margin: 12px 0 0;
        font-size: var(--text-xs);
        opacity: 0.75;
    }

    /* A linha de estado do plano, na aba Consumo. É informação, não ação: o realce fica no
       "Ver planos", que é o único clique daqui. */
    .credits-plan-line {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgb(0 0 0 / 10%);
    }

    /* O nome do plano é a resposta da seção: grande, serifado como os títulos, na cor de
       destaque. O selo ao lado diz o estado em uma palavra. */
    .credits-plan-summary {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

    .credits-plan-name {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 22px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--accent-ink);
    }

    .credits-plan-name.is-muted {
        color: inherit;
        opacity: 0.6;
    }

    .credits-plan-badge {
        padding: 2px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        color: var(--on-soft-accent);
        background: var(--green-soft);
    }

    .credits-plan-badge.is-warn {
        color: var(--warn-ink);
        background: var(--warn-bg);
        border: 1px solid var(--warn-border);
    }

    .credits-plan-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .credits-plan-pitch {
        margin: 0;
        font-size: var(--text-sm);
        opacity: 0.85;
    }

    .credits-plan-link {
        flex: 0 0 auto;
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        font: inherit;
        font-weight: 600;
        text-decoration: underline;
        cursor: pointer;
    }

    /* O modal de planos. Dois cartões lado a lado no desktop, empilhados no telefone: a decisão é
       uma comparação, e comparar exige ver os dois de uma vez. */
    .plans-modal {
        max-width: 640px;
    }

    .plans-modal-header {
        text-align: center;
        margin-bottom: 20px;
    }

    .plans-modal-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin-bottom: 12px;
        background: var(--green-soft);
        color: var(--on-soft-accent);
    }

    .plans-modal-header h2 {
        margin: 0 0 6px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 22px;
    }

    .plans-modal-body {
        margin: 0;
        font-size: var(--text-sm);
        opacity: 0.75;
    }

    .plans-modal-warning {
        margin: 0 0 16px;
        padding: 12px 16px;
        border-radius: 12px;
        background: var(--green-soft);
        color: var(--on-soft-accent);
        font-size: var(--text-sm);
    }

    .plans-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 12px;
    }

    .plans-card {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 20px;
        border: 1px solid var(--line);
        border-radius: 14px;
        text-align: center;
    }

    /* O plano maior ganha a âncora quando ninguém assina ainda: sem ela, dois cartões iguais viram
       uma comparação de preço, e o maior é justamente o que sai mais barato por token. */
    .plans-card.is-featured {
        border-color: var(--tile-preferred-border);
        background: var(--green-soft);
        color: var(--on-soft-accent);
    }

    .plans-card.is-current,
    .plans-card.is-pending {
        border-color: var(--tile-preferred-border);
    }

    .plans-card-name {
        margin: 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 20px;
    }

    .plans-card-price {
        margin: 0;
    }

    .plans-card-price strong {
        font-size: 26px;
    }

    .plans-card-price span {
        font-size: var(--text-sm);
        opacity: 0.75;
    }

    .plans-card-tokens {
        margin: 0;
        font-size: var(--text-sm);
    }

    .plans-card-unit {
        margin: 0 0 12px;
        font-size: var(--text-xs);
        opacity: 0.7;
    }

    .plans-card-action {
        margin-top: auto;
        width: 100%;
    }

    .plans-card-current {
        margin-top: auto;
        padding: 10px 0;
        border: 0;
        background: none;
        color: inherit;
        font-size: var(--text-sm);
        font-weight: 600;
        opacity: 0.75;
    }

    .plans-card-skeleton {
        display: block;
        height: 190px;
        border-radius: 14px;
        background: var(--surface-hover);
    }

    .plans-modal-status {
        margin: 12px 0 0;
        font-size: var(--text-sm);
        opacity: 0.75;
        text-align: center;
    }

    .plans-modal-error {
        margin-top: 12px;
        text-align: center;
    }

    .plans-modal-footer {
        margin-top: 20px;
        text-align: center;
    }

    .plans-modal-cancel {
        padding: 0;
        border: 0;
        margin-bottom: 10px;
        background: none;
        color: inherit;
        font: inherit;
        font-size: var(--text-sm);
        text-decoration: underline;
        opacity: 0.75;
        cursor: pointer;
    }

    .plans-modal-note {
        margin: 0 0 10px;
        font-size: var(--text-sm);
        opacity: 0.75;
    }

    /* É um <button> (abre o modal de planos), então precisa desfazer o visual de botão do
       navegador — fonte, borda e alinhamento — para continuar parecendo o convite que é. */
    .credits-plan-promo {
        width: 100%;
        font: inherit;
        cursor: pointer;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        border: 1px solid var(--tile-preferred-border);
        border-radius: 12px;
        margin: 0 0 16px;
        background: var(--green-soft);
        color: var(--on-soft-accent);
        text-decoration: none;
        font-size: var(--text-sm);
    }

    .credits-plan-promo-cta {
        flex: 0 0 auto;
        font-weight: 600;
        text-decoration: underline;
    }

    /* O botão fica sobre o cartão verde-claro do saldo, onde o verde-escuro padrão do
       .save-button perde contraste. Aqui ele vira sólido e ganha relevo: é a única ação
       possível de quem chegou no limite, e precisa ser a coisa mais visível do cartão.
       O seletor composto é necessário: .save-button vem depois neste mesmo layer e, com
       especificidade igual, levaria o background e a cor. */
    .save-button.credits-buy {
        display: inline-flex;
        padding: 13px 24px 13px 20px;
        align-items: center;
        gap: 9px;
        flex-shrink: 0;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--button-primary-hover) 0%, var(--button-primary) 100%);
        color: var(--on-button-primary);
        box-shadow: 0 6px 18px var(--cta-shadow), inset 0 1px 0 rgb(255 255 255 / 18%);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.01em;
        white-space: nowrap;
        transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
    }

    .credits-buy-icon {
        flex-shrink: 0;
        transition: transform 300ms ease;
    }

    .save-button.credits-buy:hover:not(:disabled) {
        background: linear-gradient(135deg, var(--button-primary-hover) 0%, var(--button-primary) 100%);
        color: var(--on-button-primary);
        box-shadow: 0 10px 24px var(--cta-shadow-strong), inset 0 1px 0 rgb(255 255 255 / 22%);
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

    .save-button.credits-buy:hover:not(:disabled) .credits-buy-icon {
        transform: rotate(18deg) scale(1.1);
    }

    .save-button.credits-buy:active:not(:disabled) {
        box-shadow: 0 2px 8px var(--cta-shadow);
        filter: none;
        transform: translateY(0);
    }

    .save-button.credits-buy:focus-visible {
        outline: 3px solid var(--green);
        outline-offset: 3px;
    }

    @media (max-width: 560px) {
        .credits-summary-header {
            flex-direction: column;
            align-items: stretch;
        }

        .save-button.credits-buy {
            width: 100%;
            justify-content: center;
            padding-block: 14px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .save-button.credits-buy,
        .credits-buy-icon {
            transition: none;
        }

        .save-button.credits-buy:hover:not(:disabled) {
            transform: none;
        }

        .save-button.credits-buy:hover:not(:disabled) .credits-buy-icon {
            transform: none;
        }
    }

    /* ---- Modal de compra de tokens (Pages/Shared/_CreditsModal.cshtml) ----
       Um pouco mais largo que o modal padrão para os pacotes caberem em duas colunas; no
       celular vira a folha inferior herdada de .modal-card e a grade cai para uma coluna. */
    .credits-modal {
        width: min(480px, 100%);
    }

    .credits-modal-header {
        margin: 0 0 20px;
        padding-right: 28px;
    }

    .credits-modal-icon {
        display: grid;
        width: 44px;
        height: 44px;
        margin: 0 0 14px;
        place-items: center;
        border-radius: 12px;
        background: var(--green-soft);
        color: var(--on-soft-accent);
    }

    /* Saldo esgotado: o ícone assume a cor da barra cheia, o mesmo sinal da aba de consumo. */
    .credits-modal.is-exhausted .credits-modal-icon {
        background: var(--danger-bg);
        color: var(--danger);
    }

    .credits-modal h2 {
        margin: 0 0 6px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-md);
        line-height: 1.2;
    }

    .credits-modal-body {
        margin: 0;
        color: var(--ink-muted);
        font-size: 14px;
        line-height: 1.5;
    }

    .credits-package-list {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .credits-package-list.is-hidden {
        display: none;
    }

    .credits-package,
    .credits-package-skeleton {
        min-height: 108px;
        border-radius: 14px;
    }

    .credits-package {
        position: relative;
        display: flex;
        width: 100%;
        padding: 16px 16px 14px;
        border: 1.5px solid var(--line);
        background: var(--surface);
        color: inherit;
        font: inherit;
        text-align: left;
        flex-direction: column;
        gap: 2px;
        cursor: pointer;
        transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
    }

    .credits-package:hover {
        border-color: var(--line-hover);
        background: var(--surface-hover);
    }

    .credits-package:focus-visible {
        outline: 3px solid var(--green);
        outline-offset: 2px;
    }

    .credits-package.is-selected {
        border-color: var(--green);
        background: var(--green-soft);
        color: var(--on-soft-accent);
        box-shadow: inset 0 0 0 1px var(--green);
    }

    .credits-package-amount {
        display: flex;
        align-items: baseline;
        gap: 6px;
    }

    .credits-package-amount strong {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 28px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -0.01em;
    }

    .credits-package-amount small {
        font-size: var(--text-xs);
        font-weight: 600;
        opacity: 0.8;
    }

    .credits-package-exact {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .credits-package.is-selected .credits-package-exact {
        color: inherit;
        opacity: 0.8;
    }

    .credits-package-price {
        margin-top: auto;
        padding-top: 10px;
        font-size: 16px;
        font-weight: 700;
    }

    /* Marca de seleção: círculo vazio nos demais, cheio com um "check" no escolhido. Redundante
       com a borda verde de propósito — cor sozinha não pode ser o único sinal. */
    .credits-package-check {
        position: absolute;
        top: 12px;
        right: 12px;
        display: grid;
        width: 20px;
        height: 20px;
        place-items: center;
        border: 1.5px solid var(--control-line);
        border-radius: 50%;
        background: var(--surface-strong);
        transition: background-color 120ms ease, border-color 120ms ease;
    }

    .credits-package.is-selected .credits-package-check {
        border-color: var(--green);
        background: var(--green);
    }

    .credits-package.is-selected .credits-package-check::after {
        content: "";
        width: 5px;
        height: 9px;
        margin-top: -2px;
        border: solid var(--on-accent);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    /* Esqueleto enquanto os pacotes carregam: mesmo tamanho dos cartões para nada pular. */
    .credits-package-skeleton {
        display: block;
        border: 1.5px solid var(--line);
        background: linear-gradient(
            90deg,
            var(--surface-hover) 25%,
            var(--canvas) 50%,
            var(--surface-hover) 75%
        );
        background-size: 200% 100%;
        animation: credits-shimmer 1.4s ease-in-out infinite;
    }

    @keyframes credits-shimmer {
        from {
            background-position: 200% 0;
        }
        to {
            background-position: -200% 0;
        }
    }

    .credits-modal-status {
        margin: 0;
    }

    .credits-modal-error {
        display: flex;
        padding: 14px 16px;
        border: 1px solid var(--danger-border);
        border-radius: 12px;
        background: var(--danger-bg);
        color: var(--danger);
        font-size: 14px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* display:flex venceria o [hidden] do UA; sem isto a caixa de erro apareceria sempre. */
    .credits-modal-error[hidden] {
        display: none;
    }

    .credits-modal-error p {
        margin: 0;
    }

    .credits-modal-retry {
        padding: 8px 14px;
        border: 1px solid currentcolor;
        border-radius: 999px;
        background: transparent;
        color: inherit;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    .credits-modal-retry:hover {
        background: rgb(255 255 255 / 40%);
    }

    .credits-modal-footer {
        margin-top: 20px;
    }

    /* Mesmos tokens do .credits-buy: o .save-button padrão (verde-escuro com texto da
       superfície) desaparece no tema escuro. */
    .save-button.credits-modal-buy {
        width: 100%;
        padding: 15px 22px;
        background: linear-gradient(135deg, var(--button-primary-hover) 0%, var(--button-primary) 100%);
        color: var(--on-button-primary);
        font-size: 16px;
        font-weight: 700;
        box-shadow: 0 2px 10px var(--cta-shadow);
        transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
    }

    .save-button.credits-modal-buy:hover:not(:disabled) {
        background: linear-gradient(135deg, var(--button-primary-hover) 0%, var(--button-primary) 100%);
        color: var(--on-button-primary);
        filter: brightness(1.06);
        box-shadow: 0 4px 16px var(--cta-shadow-strong);
        transform: translateY(-1px);
    }

    .save-button.credits-modal-buy:active:not(:disabled) {
        filter: none;
        box-shadow: 0 1px 6px var(--cta-shadow);
        transform: translateY(0);
    }

    .save-button.credits-modal-buy:disabled {
        box-shadow: none;
    }

    .credits-modal-secure {
        display: flex;
        margin: 12px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        line-height: 1.4;
        align-items: flex-start;
        justify-content: center;
        gap: 6px;
        text-align: center;
    }

    .credits-modal-secure svg {
        flex-shrink: 0;
        margin-top: 2px;
    }

    /* Celular estreito: uma coluna, e cada pacote vira uma linha (quantidade à esquerda, preço à
       direita) para quatro cartões caberem sem rolar a folha inferior. */
    @media (max-width: 420px) {
        .credits-package-list {
            grid-template-columns: 1fr;
        }

        .credits-package,
        .credits-package-skeleton {
            min-height: 0;
        }

        .credits-package-skeleton {
            height: 64px;
        }

        .credits-package {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-areas:
                "amount price"
                "exact price";
            padding: 12px 44px 12px 14px;
            align-items: center;
            column-gap: 12px;
        }

        .credits-package-amount {
            grid-area: amount;
        }

        .credits-package-amount strong {
            font-size: 22px;
        }

        .credits-package-exact {
            grid-area: exact;
        }

        .credits-package-price {
            grid-area: price;
            padding-top: 0;
            margin-top: 0;
        }

        .credits-package-check {
            top: 50%;
            translate: 0 -50%;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .credits-package,
        .save-button.credits-modal-buy,
        .credits-package-check {
            transition: none;
        }

        .save-button.credits-modal-buy:hover:not(:disabled) {
            transform: none;
        }

        .credits-package-skeleton {
            animation: none;
        }
    }

    .usage-totals {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 12px;
        margin: 0 0 28px;
    }

    .usage-total {
        display: flex;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 12px;
        flex-direction: column;
        gap: 4px;
    }

    /* O total gasto é o número que a pessoa veio ver; recebe a cor da marca. */
    .usage-total-primary {
        border-color: transparent;
        background: var(--green-soft);
    }

    .usage-total-primary .usage-total-label,
    .usage-total-primary .usage-total-hint {
        color: var(--on-soft-accent);
        opacity: 0.75;
    }

    .usage-total-primary .usage-total-value {
        color: var(--on-soft-accent);
    }

    .usage-total-label {
        color: var(--ink-muted);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .usage-total-value {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 24px;
    }

    .usage-total-hint {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .usage-subtitle {
        margin: 0 0 10px;
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--ink-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .usage-list,
    .usage-bars {
        display: flex;
        margin: 0 0 24px;
        padding: 0;
        flex-direction: column;
        gap: 2px;
        list-style: none;
    }

    /* A lista de cobranças alterna com o aviso de mês vazio; sem isto o flex vence o hidden. */
    .usage-list[hidden] {
        display: none;
    }

    .usage-list-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--line);
        align-items: baseline;
    }

    .usage-list-label {
        font-size: 15px;
    }

    .usage-list-value {
        grid-row: 1 / span 2;
        grid-column: 2;
        align-self: center;
        font-variant-numeric: tabular-nums;
    }

    .usage-list-detail {
        grid-column: 1;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
    }

    .usage-bar-item {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) 76px;
        gap: 10px;
        padding: 4px 0;
        align-items: center;
    }

    .usage-bar-label,
    .usage-bar-value {
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
    }

    .usage-bar-value {
        text-align: right;
    }

    .usage-bar-track {
        height: 8px;
        border-radius: 4px;
        background: var(--surface-hover);
        overflow: hidden;
    }

    .usage-bar-fill {
        display: block;
        height: 100%;
        border-radius: 4px;
        background: var(--green);
    }

    /* Vazio não é erro: é um mês em que nada aconteceu. Um ícone quieto e uma frase centrada
       ocupam o lugar da lista, para a área não colapsar e a tela não parecer quebrada. */
    .usage-empty {
        display: flex;
        margin: 0;
        padding: 28px 16px;
        border: 1px dashed var(--line);
        border-radius: 12px;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        text-align: center;
        color: var(--ink-muted);
        font-size: 14px;
    }

    .usage-empty[hidden] {
        display: none;
    }

    .usage-empty-icon {
        opacity: 0.55;
    }

    .usage-empty-text {
        margin: 0;
        max-width: 34ch;
    }

    /* Falhar ao carregar não é o mesmo que não ter nada: a borda contínua e a cor de perigo
       separam "deu erro, tente de novo" de "este mês foi tranquilo". */
    .usage-empty-error {
        border-style: solid;
        border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
        color: var(--danger);
    }

    /* ---------- Consumo e Cobranças em tela estreita ----------
       O ponto frágil é a grade das barras por dia: 48px + 76px de colunas fixas comem quase
       metade de um viewport de 320px e a trilha vira um traço. Aqui as colunas encolhem e o
       número passa a caber pela própria largura, não por um valor chutado. */
    @media (max-width: 680px) {
        .usage-bar-item {
            grid-template-columns: 38px minmax(0, 1fr) minmax(52px, auto);
            gap: 8px;
        }

        /* O saldo e o botão de comprar deixam de disputar a mesma linha. */
        .credits-summary-header {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }

        .credits-buy {
            justify-content: center;
            width: 100%;
        }

        .credits-plan-line {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .credits-balance {
            font-size: 28px;
        }
    }

    @media (max-width: 420px) {
        /* Abaixo disto o rótulo do dia e o total na mesma linha da barra não cabem sem apertar a
           trilha até ela não dizer mais nada. A barra passa a ocupar a linha inteira, embaixo. */
        .usage-bar-item {
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 4px 8px;
            padding: 6px 0;
        }

        .usage-bar-track {
            grid-column: 1 / -1;
            grid-row: 2;
        }

        .usage-bar-value {
            grid-column: 2;
            grid-row: 1;
        }

        /* Valor e detalhe empilham sob o rótulo em vez de espremerem a coluna da direita. */
        .usage-list-item {
            grid-template-columns: minmax(0, 1fr) auto;
            column-gap: 8px;
        }
    }

    /* ---------- Ações Agendadas ---------- */

    .rules-list {
        display: flex;
        margin: 0 0 16px;
        padding: 0;
        flex-direction: column;
        gap: 12px;
        list-style: none;
    }

    .rule-item {
        padding: 14px 16px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface);
    }

    .rule-item-header {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .rule-item-name {
        flex: 1;
        min-width: 0;
        font-size: 15px;
        overflow-wrap: anywhere;
    }

    .rule-item-paused {
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--surface-hover);
        color: var(--ink-muted);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .rule-item-buttons {
        display: flex;
        gap: 6px;
    }

    .rule-item-button {
        padding: 4px 10px;
        border: 1px solid var(--control-line);
        border-radius: 8px;
        background: transparent;
        color: var(--ink);
        font-size: var(--text-sm);
        cursor: pointer;
    }

    .rule-item-button:hover {
        border-color: var(--line-hover);
        background: var(--surface-hover);
    }

    .rule-item-button-danger {
        color: var(--danger, #a3352c);
    }

    .rule-item-condition {
        margin: 8px 0 0;
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    .rule-item-actions {
        display: flex;
        margin: 8px 0 0;
        padding: 0;
        flex-direction: column;
        gap: 4px;
        list-style: none;
    }

    .rule-item-actions li {
        display: flex;
        gap: 8px;
        align-items: baseline;
        justify-content: space-between;
        font-size: 14px;
        color: var(--ink-muted);
    }

    .rule-item-actions li > span:first-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .rule-item-mode {
        flex-shrink: 0;
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    .rule-item-interval {
        margin: 10px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .rules-filter {
        display: flex;
        gap: 10px;
        align-items: center;
        margin: 0 0 12px;
    }

    .rules-filter .field-label {
        margin: 0;
    }

    .rule-item-button-primary {
        border-color: var(--green);
        color: var(--accent-ink);
        background: var(--green-soft);
        font-weight: 700;
    }

    .rule-item-last-check {
        margin: 4px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* ---------- Formulário de ação agendada ----------
       Três passos numerados (observar → fazer → quando), cada um um fieldset. O cartão do
       formulário é um pouco mais claro que a lista para ler como "tarefa em andamento". */
    .rules-form {
        display: flex;
        margin: 0 0 20px;
        padding: 20px 22px 18px;
        flex-direction: column;
        gap: 22px;
        border: 1px solid var(--panel-line);
        border-radius: 14px;
        background: var(--surface);
        box-shadow: 0 1px 2px rgba(23, 32, 27, 0.04), 0 8px 24px -18px rgba(23, 32, 27, 0.35);
    }

    /* Um display explícito vence o atributo [hidden] do UA; sem esta regra, Cancelar marcava o
       formulário como oculto e ele continuava na tela. Mesmo padrão de .attachment-preview. */
    .rules-form[hidden] {
        display: none;
    }

    .rules-form-header {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        justify-content: space-between;
    }

    .rules-form-heading {
        min-width: 0;
    }

    .rules-form-title {
        margin: 0;
        font-size: 17px;
        line-height: 1.3;
    }

    .rules-form-lede {
        margin: 4px 0 0;
        color: var(--ink-muted);
        font-size: 14px;
        line-height: 1.45;
    }

    /* Alvo de toque de 40px mesmo com o ícone pequeno (WCAG 2.5.8). */
    .rules-form-close {
        display: inline-flex;
        width: 40px;
        height: 40px;
        margin: -8px -10px 0 0;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: var(--ink-muted);
    }

    .rules-form-close:hover {
        background: var(--surface-hover);
        color: var(--ink);
    }

    .rules-step {
        display: flex;
        min-width: 0;
        margin: 0;
        padding: 0;
        flex-direction: column;
        gap: 14px;
        border: none;
    }

    /* Separador entre passos: uma linha discreta acima de cada um a partir do segundo. */
    .rules-step + .rules-step {
        padding-top: 20px;
        border-top: 1px solid var(--line);
    }

    .rules-step-legend {
        display: flex;
        margin: 0;
        padding: 0;
        gap: 10px;
        align-items: center;
        font-size: 15px;
        font-weight: 650;
        color: var(--ink);
    }

    .rules-step-number {
        display: inline-flex;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--green-soft);
        color: var(--accent-ink);
        font-size: var(--text-xs);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .rules-step-note {
        margin-top: -6px;
    }

    /* Campos do formulário: mesma moldura dos inputs do perfil, com textarea incluído — sem
       isto os textareas caíam no desenho do navegador e destoavam dos selects ao lado. */
    .rules-form input,
    .rules-form textarea,
    .rules-form select {
        width: 100%;
        min-width: 0;
        padding: 11px 14px;
        border: 1px solid var(--line-control);
        border-radius: 9px;
        color: var(--ink);
        background-color: var(--canvas);
        line-height: 1.45;
        transition: border-color 140ms ease, background-color 140ms ease;
    }

    .rules-form select {
        padding-right: 36px;
    }

    .rules-form textarea {
        min-height: 3.6em;
        resize: vertical;
        overflow-y: hidden;
    }

    .rules-form input::placeholder,
    .rules-form textarea::placeholder {
        color: var(--placeholder);
    }

    .rules-form input:hover:not(:disabled),
    .rules-form textarea:hover:not(:disabled) {
        border-color: var(--line-hover);
    }

    .rules-form input:focus-visible,
    .rules-form textarea:focus-visible,
    .rules-form select:focus-visible {
        border-color: var(--green);
        background-color: var(--surface);
    }

    /* Campo inválido: borda e fundo em tom de perigo, além do texto abaixo dele. */
    .rules-form input[aria-invalid="true"],
    .rules-form textarea[aria-invalid="true"] {
        border-color: var(--danger);
        background-color: var(--danger-bg);
    }

    .rules-form .field-error[hidden],
    .rules-form .field-note[hidden] {
        display: none;
    }

    .rules-form .field-error {
        display: flex;
        gap: 6px;
        align-items: flex-start;
    }

    .rules-form .field-error::before {
        content: "!";
        display: inline-flex;
        width: 16px;
        height: 16px;
        margin-top: 1px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--danger);
        color: var(--surface);
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
    }

    /* Erro geral do formulário: caixa própria acima do rodapé, para o leitor de tela e o olho. */
    .rules-form-error {
        padding: 10px 14px;
        border: 1px solid var(--danger-border);
        border-radius: 10px;
        background: var(--danger-bg);
    }

    /* Ações: cada linha é um cartão numerado dentro do passo 2. */
    .rule-action-list {
        display: flex;
        margin: 0;
        padding: 0;
        flex-direction: column;
        gap: 12px;
        list-style: none;
        counter-reset: rule-action;
    }

    .rule-action-row {
        display: flex;
        min-width: 0;
        padding: 12px 14px 14px;
        flex-direction: column;
        gap: 8px;
        border: 1px solid var(--control-line);
        border-radius: 12px;
        background: var(--surface-hover);
    }

    .rule-action-row:focus-within {
        border-color: var(--line-hover);
    }

    .rule-action-head {
        display: flex;
        min-height: 28px;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
    }

    .rule-action-index {
        color: var(--ink-muted);
        font-size: var(--text-sm);
        font-weight: 650;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .rule-action-remove {
        display: inline-flex;
        width: 36px;
        height: 36px;
        margin: -4px -8px -4px 0;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: var(--ink-muted);
    }

    .rule-action-remove:hover {
        background: var(--danger-bg);
        color: var(--danger);
    }

    .rule-action-remove[hidden] {
        display: none;
    }

    .rule-action-controls {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }

    .rule-action-mode-label {
        flex-shrink: 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        font-weight: 650;
    }

    .rules-form .rule-action-mode {
        width: auto;
        flex: 1 1 220px;
        max-width: 320px;
        padding-top: 8px;
        padding-bottom: 8px;
        background-color: var(--surface);
    }

    .rule-action-mode-hint {
        margin-top: -2px;
    }

    .rule-add-action {
        display: inline-flex;
        gap: 8px;
        align-items: center;
        align-self: flex-start;
        min-height: 40px;
        padding: 8px 14px 8px 12px;
        border: 1px dashed var(--line-control);
        border-radius: 999px;
        background: transparent;
        color: var(--accent-ink);
        font-size: var(--text-sm);
        font-weight: 650;
    }

    .rule-add-action:hover {
        border-style: solid;
        border-color: var(--green);
        background: var(--green-soft);
    }

    .rules-form .rules-timing {
        gap: 16px;
    }

    .rules-form-footer {
        display: flex;
        margin-top: 2px;
        padding-top: 18px;
        border-top: 1px solid var(--line);
        gap: 12px;
        align-items: center;
        justify-content: flex-end;
    }

    .rule-cancel-button {
        min-height: 44px;
        padding: 10px 18px;
        border: 1px solid var(--control-line);
        border-radius: 999px;
        background: transparent;
        color: var(--ink);
        font-size: var(--text-sm);
        font-weight: 650;
    }

    .rule-cancel-button:disabled,
    .rules-form-close:disabled {
        cursor: default;
        opacity: 0.5;
    }

    .rule-cancel-button:hover:not(:disabled) {
        border-color: var(--line-hover);
        background: var(--surface-hover);
    }

    .rules-form .save-button {
        min-height: 44px;
    }

    @media (prefers-reduced-motion: reduce) {
        .rules-form input,
        .rules-form textarea,
        .rules-form select {
            transition: none;
        }
    }

    .rules-note {
        margin: 8px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    @media (max-width: 720px) {
        .profile-layout {
            grid-template-columns: minmax(0, 1fr);
        }

        .profile-main {
            width: calc(100% - 24px);
            padding: 20px 0 40px;
            gap: 14px;
        }

        .profile-layout {
            gap: 16px;
        }

        .profile-sidebar {
            position: static;
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }

        /* Abas em linha única rolável, com snap: quatro rótulos ("Ações Agendadas",
           "Integrações"...) quebravam em duas linhas e viravam um bloco de botões. */
        .profile-nav {
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 4px;
            margin: 0 -12px;
            padding: 0 12px 4px;
            overflow-x: auto;
            scrollbar-width: none;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch;
        }

        .profile-nav::-webkit-scrollbar {
            display: none;
        }

        .profile-nav-item {
            flex: 0 0 auto;
            min-height: 42px;
            padding: 8px 14px 8px 16px;
            scroll-snap-align: start;
            white-space: nowrap;
        }

        .profile-sidebar-footer {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding-top: 10px;
        }

        /* Cabeçalho da aba: título e "Nova ação agendada" empilham; o botão vira faixa larga. */
        #rulesCard .profile-card-header-row {
            flex-direction: column;
            align-items: stretch;
        }

        #rulesCard .profile-card-header-row .save-button {
            width: 100%;
        }

        .rules-form {
            padding: 16px 14px 14px;
            gap: 18px;
            border-radius: 12px;
        }

        .rules-step + .rules-step {
            padding-top: 16px;
        }

        /* 16px evita o zoom automático do iOS ao focar o campo. */
        .rules-form input,
        .rules-form textarea,
        .rules-form select {
            font-size: 16px;
        }

        .rules-form .rule-action-mode {
            flex-basis: 100%;
            max-width: none;
        }

        /* .field-row (auto-fit 180px) é declarado depois; a especificidade extra garante uma coluna. */
        .rules-form .rules-timing {
            grid-template-columns: minmax(0, 1fr);
        }

        /* Rodapé: Salvar em cima e cheio, Cancelar embaixo — o polegar alcança o principal. */
        .rules-form-footer {
            flex-direction: column-reverse;
            align-items: stretch;
            gap: 10px;
        }

        .rules-form-footer .save-button,
        .rules-form-footer .rule-cancel-button {
            width: 100%;
            min-height: 48px;
        }

    }

    .profile-card {
        position: relative;
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--surface-strong);
        box-shadow: var(--shadow-2);
        animation: enter 240ms ease-out both;
    }

    .profile-card[hidden] {
        display: none;
    }

    /* Depois da regra base de propósito: mesma especificidade, então a ordem decide. */
    @media (max-width: 720px) {
        .profile-card {
            padding: 18px 16px;
            border-radius: 12px;
        }
    }

    /* ---------- esqueleto de carregamento ----------
       A página nasce visível e vai preenchendo. Só a identidade recebe shimmer, porque é
       o único bloco cujo espaço final é conhecido; o formulário fica desabilitado, o que
       já comunica "ainda não dá para mexer" sem inventar caixas falsas. */
    .profile-main.is-loading .profile-identity-name,
    .profile-main.is-loading .profile-identity-email {
        border-radius: 4px;
        color: transparent;
        background: var(--surface-hover);
        animation: profile-skeleton 1.4s ease-in-out infinite;
    }

    .profile-main.is-loading .profile-identity-name {
        width: 108px;
    }

    .profile-main.is-loading .profile-identity-email {
        width: 132px;
        margin-top: 4px;
    }

    .profile-main.is-loading .profile-avatar-fallback {
        background: var(--surface-hover);
        color: transparent;
        animation: profile-skeleton 1.4s ease-in-out infinite;
    }

    /* O formulário também pulsa enquanto carrega. Só desabilitado, ele parecia uma página travada,
       não uma página buscando: o esmaecido de :disabled é o mesmo de "não pode mexer", e nada
       dizia que os valores ainda estavam a caminho. Os campos existem e têm o tamanho final, então
       o shimmer não inventa caixa nenhuma — só tira o texto e anima o fundo. */
    .profile-main.is-loading .profile-form input,
    .profile-main.is-loading .profile-form select,
    .profile-main.is-loading .channel-option-body {
        color: transparent;
        background: var(--surface-hover);
        opacity: 1;
        animation: profile-skeleton 1.4s ease-in-out infinite;
    }

    .profile-main.is-loading .channel-option-body > * {
        visibility: hidden;
    }

    /* A aba de regras carrega junto com o perfil; até chegar, o corpo pulsa em vez de ficar em
       branco — o branco vazio era lido como aba quebrada. */
    .rules-body[aria-busy="true"] .rules-list {
        min-height: 44px;
        border-radius: 8px;
        background: var(--surface-hover);
        animation: profile-skeleton 1.4s ease-in-out infinite;
    }

    @keyframes profile-skeleton {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.45; }
    }

    @media (prefers-reduced-motion: reduce) {
        .profile-main.is-loading .profile-form input,
        .profile-main.is-loading .profile-form select,
        .profile-main.is-loading .channel-option-body,
        .rules-body[aria-busy="true"] .rules-list,
        .profile-main.is-loading .profile-identity-name,
        .profile-main.is-loading .profile-identity-email,
        .profile-main.is-loading .profile-avatar-fallback {
            animation: none;
        }
    }

    .forgot-password-main {
        display: flex;
        width: min(420px, calc(100% - 40px));
        margin: 0 auto;
        padding: 64px 0;
        flex-direction: column;
    }

    .forgot-password-card {
        text-align: center;
    }

    .forgot-password-card h1 {
        margin: 0 0 10px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-md);
    }

    .forgot-password-subtitle {
        margin: 0 0 24px;
        color: var(--ink-muted);
        font-size: 14px;
    }

    .forgot-password-form {
        display: flex;
        flex-direction: column;
        gap: 6px;
        text-align: left;
    }

    .forgot-password-form input {
        padding: 11px 14px;
        margin-bottom: 10px;
        border: 1px solid var(--line-control);
        border-radius: 8px;
        color: var(--ink);
        background: var(--canvas);
    }

    .forgot-password-form input:focus-visible {
        border-color: var(--green);
        outline: none;
    }

    .forgot-password-form .save-button {
        width: 100%;
    }

    /* O aviso serve aos dois desfechos: confirmação de envio e falha. O estado calmo é o padrão
       porque é o comum — pintar de amarelo a mensagem "o link está a caminho" transformaria o
       caminho feliz num alerta. */
    .forgot-password-notice {
        margin: 20px 0 0;
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--green-soft);
        color: var(--ink);
        font-size: var(--text-sm);
        text-align: left;
    }

    .forgot-password-notice.is-error {
        border-color: var(--danger-border);
        background: var(--danger-bg);
        color: var(--danger);
    }

    .forgot-password-notice[hidden] {
        display: none;
    }

    .forgot-password-back {
        display: block;
        margin-top: 20px;
        color: var(--accent-ink);
        font-size: var(--text-sm);
    }

    .forgot-password-back:hover {
        text-decoration: underline;
    }

    /* Rotulado e em fluxo normal: era uma seta sozinha posicionada de forma absoluta
       contra o card, que deixou de ser o pai quando o perfil ganhou navegação própria. */
    .profile-back-button {
        display: flex;
        padding: 0;
        border: none;
        background: none;
        gap: 8px;
        align-items: center;
        color: var(--ink-muted);
        font: inherit;
        font-size: var(--text-sm);
        text-align: left;
        cursor: pointer;
    }

    .profile-back-button:hover {
        color: var(--ink);
    }

    .profile-card h1 {
        margin: 0 0 20px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-lg);
    }

    .profile-card h2 {
        margin: 0 0 8px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-sm);
    }

    .profile-identity {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .profile-identity-text {
        display: flex;
        min-width: 0;
        flex-direction: column;
    }

    /* Nome e e-mail truncam em vez de quebrar: um e-mail longo empurraria a coluna
       inteira e desalinharia o grid. */
    .profile-identity-name,
    .profile-identity-email {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .profile-identity-name {
        color: var(--ink);
        font-size: 15px;
        font-weight: 650;
    }

    .profile-identity-email {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* O avatar virou botão (troca de foto). Sem borda nem fundo próprios: quem desenha é a
       imagem/fallback de dentro; o selo de câmera no canto é o que diz "isto é clicável". */
    .profile-avatar-button {
        position: relative;
        flex: 0 0 auto;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        border-radius: 50%;
        line-height: 0;
    }

    .profile-avatar-button:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }

    .profile-avatar-badge {
        position: absolute;
        right: -2px;
        bottom: -2px;
        display: grid;
        place-items: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--surface-strong);
        border: 1px solid var(--line);
        color: var(--ink-muted);
    }

    .profile-avatar-badge svg {
        width: 11px;
        height: 11px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linejoin: round;
    }

    .profile-avatar-remove {
        align-self: flex-start;
        margin-top: 2px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        text-decoration: underline;
    }

    .profile-avatar-remove:hover,
    .profile-avatar-remove:focus-visible {
        color: var(--ink);
    }

    .profile-avatar-img,
    .profile-avatar-fallback {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        border-radius: 50%;
    }

    .profile-avatar-img {
        object-fit: cover;
    }

    .profile-avatar-img[hidden],
    .profile-avatar-fallback[hidden] {
        display: none;
    }

    .profile-avatar-fallback {
        display: grid;
        place-items: center;
        background: var(--button-primary);
        color: var(--on-button-primary);
        font-weight: 650;
        font-size: 18px;
    }

    .profile-form {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .profile-fieldset {
        display: flex;
        margin: 0;
        padding: 0;
        border: none;
        flex-direction: column;
        gap: 18px;
    }

    .field {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 6px;
    }

    /* display:flex acima venceria o [hidden] do navegador — o campo condicional (ex.: horário da
       ação agendada, só com "24 horas") precisa sumir de verdade. */
    .field[hidden] {
        display: none;
    }

    .field-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 18px;
    }

    .field-label {
        color: var(--ink-muted);
        font-size: var(--text-sm);
        font-weight: 650;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .field-note {
        margin: 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .field-error {
        margin: 0;
        color: var(--danger);
        font-size: var(--text-sm);
    }

    .profile-form input.is-invalid {
        border-color: var(--danger);
    }

    .profile-form-footer {
        display: flex;
        margin-top: 26px;
        padding-top: 20px;
        border-top: 1px solid var(--line);
        gap: 14px;
        align-items: center;
        justify-content: flex-end;
    }

    .profile-dirty-hint {
        margin-right: auto;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .profile-form input,
    .profile-form select {
        padding: 11px 14px;
        border: 1px solid var(--line-control);
        border-radius: 8px;
        color: var(--ink);
        background-color: var(--canvas);
    }

    /* Fundo pela longa e não pelo atalho background: o atalho zeraria a seta que a base
       desenha. O padding à direita abre o espaço dela sem mexer nas outras três bordas, para o
       campo continuar alinhado com o input de Nome. */
    .profile-form select {
        padding-right: 36px;
    }

    /* A borda verde acompanha o anel herdado do reset; ela reforça o foco, não o substitui. */
    .profile-form input:focus-visible,
    .profile-form select:focus-visible {
        border-color: var(--green);
    }

    /* Avisos fora do chat: um grupo de cartões-rádio com ícone. O input nativo continua no DOM
       (foco, setas, leitor de tela e o :disabled do fieldset vêm de graça); o cartão é só a
       pele. Seleção = borda verde + fundo suave + selo de check; foco = anel no cartão inteiro. */
    .channel-field {
        min-width: 0;
    }

    /* Janela de horário: uma linha de faixa ("das 08:00 às 22:00") que só aparece quando ligada —
       dois selects vazios em cima da tela sugeririam uma regra que não está valendo. */
    .quiet-hours-field {
        min-width: 0;
        margin-top: 4px;
    }

    .quiet-hours-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }

    /* Vence .profile-form input, que dá padding e borda de campo de texto ao checkbox. */
    .profile-form .quiet-hours-toggle input {
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
        accent-color: var(--green);
    }

    .quiet-hours-toggle .field-label {
        margin: 0;
        cursor: pointer;
    }

    .quiet-hours-range {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
    }

    .quiet-hours-slot {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .quiet-hours-slot-label {
        color: var(--ink-muted);
    }

    /* Largura pelo conteúdo: um select de "08:00" ocupando a linha inteira parece campo quebrado. */
    .profile-form .quiet-hours-slot select {
        width: auto;
        min-width: 104px;
    }

    .quiet-hours-summary {
        margin-top: 6px;
    }

    /* Interruptores por categoria de aviso automático: lista com cabeçalhos de grupo. O checkbox
       segue o mesmo trato do da janela de horário — sem virar campo de texto. */
    .notification-categories-field {
        min-width: 0;
        margin-top: 4px;
    }

    .notification-category-group {
        margin: 12px 0 4px;
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ink-muted);
    }

    .notification-category {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 6px 0;
        cursor: pointer;
    }

    .profile-form .notification-category input {
        width: auto;
        margin: 3px 0 0;
        padding: 0;
        border: 0;
        accent-color: var(--green);
    }

    .notification-category-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .notification-category-desc {
        font-size: 0.85rem;
        color: var(--ink-muted);
    }

    /* Duas colunas confortáveis; uma só quando aperta. Nunca três: título + descrição não cabem. */
    .channel-options {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
        gap: 10px;
        margin-top: 4px;
    }

    .channel-option {
        position: relative;
        display: flex;
        min-width: 0;
        cursor: pointer;
    }

    /* Vence .profile-form input (padding/borda) para o rádio escondido não ocupar espaço. */
    .profile-form .channel-option-input {
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        border: 0;
        opacity: 0;
        pointer-events: none;
    }

    .channel-option-body {
        position: relative;
        display: flex;
        flex: 1;
        padding: 14px 14px 14px 12px;
        border: 1px solid var(--line-control);
        border-radius: 12px;
        background: var(--canvas);
        gap: 12px;
        align-items: flex-start;
        transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
    }

    .channel-option:hover .channel-option-body {
        border-color: var(--line-hover);
        background: var(--surface-hover);
    }

    .channel-option-icon {
        display: grid;
        flex: none;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        color: var(--ink-muted);
        background: var(--surface-strong);
        box-shadow: inset 0 0 0 1px var(--line);
        place-items: center;
        transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
    }

    .channel-option-icon svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .channel-option-text {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
        gap: 3px;
        padding-right: 22px;
    }

    .channel-option-title {
        color: var(--ink);
        font-size: 0.95rem;
        font-weight: 650;
        line-height: 1.25;
    }

    .channel-option-desc {
        color: var(--ink-muted);
        font-size: var(--text-xs);
        line-height: 1.35;
    }

    .channel-option-desc:empty {
        display: none;
    }

    .channel-option-check {
        position: absolute;
        top: 10px;
        right: 10px;
        display: grid;
        width: 20px;
        height: 20px;
        border-radius: 999px;
        color: var(--on-accent);
        background: var(--green);
        opacity: 0;
        transform: scale(0.6);
        place-items: center;
        transition: opacity 140ms ease, transform 140ms ease;
    }

    .channel-option-check svg {
        width: 12px;
        height: 12px;
        fill: none;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .channel-option-input:checked + .channel-option-body {
        border-color: var(--green);
        background: var(--tile-preferred-bg);
        box-shadow: inset 0 0 0 1px var(--green);
    }

    .channel-option-input:checked + .channel-option-body .channel-option-icon {
        color: var(--accent-ink);
        background: var(--green-soft);
        box-shadow: inset 0 0 0 1px var(--tile-preferred-border);
    }

    .channel-option-input:checked + .channel-option-body .channel-option-check {
        opacity: 1;
        transform: scale(1);
    }

    .channel-option-input:focus-visible + .channel-option-body {
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }

    .channel-option:active .channel-option-body {
        transform: scale(0.99);
    }

    .channel-option-input:disabled + .channel-option-body {
        cursor: default;
        opacity: 0.6;
    }

    .channel-option:has(.channel-option-input:disabled) {
        cursor: default;
    }

    /* Canal ainda não disponível (WhatsApp): aparece no lugar dele, mas não seleciona. */
    .channel-option-soon .channel-option-body {
        border-style: dashed;
    }

    .channel-option-soon:hover .channel-option-body {
        border-color: var(--line-control);
        background: var(--canvas);
    }

    .channel-option-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 2px 8px;
        border-radius: 999px;
        color: var(--warn-ink);
        background: var(--warn-bg);
        box-shadow: inset 0 0 0 1px var(--warn-border);
        font-size: 11px;
        font-weight: 650;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .channel-option-soon .channel-option-text {
        padding-right: 72px;
    }

    /* Aviso contextual: o canal escolhido ainda não está conectado. */
    .channel-status {
        display: flex;
        gap: 8px;
        align-items: baseline;
        color: var(--warn-ink);
    }

    .channel-status a {
        color: inherit;
        font-weight: 600;
    }

    @media (prefers-reduced-motion: reduce) {
        .channel-option-body,
        .channel-option-icon,
        .channel-option-check {
            transition: none;
        }

        .channel-option:active .channel-option-body {
            transform: none;
        }
    }

    /* O fieldset inteiro fica desabilitado enquanto o perfil carrega. Com appearance: none o
       navegador não esmaece mais o select sozinho, então os dois tipos de campo passam a declarar
       o mesmo estado — caso contrário, no carregamento, só os selects pareceriam bloqueados. */
    .profile-form input:disabled,
    .profile-form select:disabled {
        cursor: default;
        opacity: 0.6;
    }

    /* Cartão da cobrança Pix no chat: o código é o produto, então ele domina o cartão. */
    .finance-pix-charge .pix-charge-headline {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px;
    }

    .pix-charge-amount {
        font-size: 18px;
        font-weight: 700;
    }

    .pix-charge-payer,
    .pix-charge-item-status {
        color: var(--muted);
    }

    .pix-charge-code {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
        margin: 10px 0;
    }

    /* Campo, e não parágrafo: quem não tem área de transferência precisa poder selecionar à mão. */
    .pix-charge-code-text {
        flex: 1 1 18ch;
        min-width: 0;
        resize: none;
        font-family: var(--mono, ui-monospace, monospace);
        font-size: 12px;
        line-height: 1.4;
        word-break: break-all;
    }

    .pix-charge-copy {
        padding: 8px 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: none;
        font: inherit;
        font-size: 13px;
        cursor: pointer;
        white-space: nowrap;
    }

    .pix-charge-copy:hover {
        border-color: var(--accent);
    }

    .pix-charge-note {
        font-size: 12px;
        color: var(--muted);
    }

    .pix-charge-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .pix-charge-item {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
    }

    /* Chaves Pix: bloco próprio entre o formulário e a zona de perigo. Cada chave é um recurso
       com CRUD próprio, então a seção não usa o botão "Salvar" do perfil — a separação visual
       (linha acima, como a zona de perigo) é o que evita a pessoa esperar um salvamento único. */
    .profile-pix,
    .profile-section {
        margin-top: 34px;
        padding-top: 22px;
        border-top: 1px solid var(--line);
    }

    .profile-pix-title,
    .profile-section-title {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
    }

    .pix-key-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 14px 0 0;
        padding: 0;
        list-style: none;
    }

    .pix-key-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 10px;
    }

    .pix-key-item.is-default {
        border-color: var(--accent);
    }

    .pix-key-type {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
    }

    /* A chave pode ser um e-mail longo: encolhe antes dos botões e quebra em vez de estourar. */
    .pix-key-value {
        flex: 1 1 12ch;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .pix-key-badge {
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--accent-soft, rgba(0, 0, 0, 0.06));
        font-size: 12px;
        font-weight: 600;
    }

    .pix-key-action {
        border: 0;
        background: none;
        padding: 4px;
        font: inherit;
        font-size: 13px;
        color: var(--muted);
        cursor: pointer;
        text-decoration: underline;
    }

    .pix-key-action:hover {
        color: var(--text);
    }

    .pix-key-action.is-danger:hover {
        color: var(--danger);
    }

    .pix-key-form {
        margin-top: 14px;
    }

    .pix-key-fields {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .pix-key-fields input {
        flex: 1 1 14ch;
        min-width: 0;
    }

    .pix-ambiguous {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 10px;
    }

    /* display:flex vence o [hidden] do navegador — sem esta regra a pergunta "CPF ou celular?"
       aparece sempre, mesmo escondida pelo script. */
    .pix-ambiguous[hidden] {
        display: none;
    }

    .pix-ambiguous button {
        padding: 6px 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: none;
        font: inherit;
        font-size: 13px;
        cursor: pointer;
    }

    .pix-ambiguous button:hover {
        border-color: var(--accent);
    }

    /* Zona de perigo do perfil: separada do formulário por uma linha, texto discreto e um botão
       vazado em --danger — a cor cheia fica só para o passo final, dentro do modal. */
    .profile-danger {
        margin-top: 34px;
        padding-top: 22px;
        border-top: 1px solid var(--line);
    }

    .profile-danger-title {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
    }

    .profile-danger-text {
        margin: 6px 0 14px;
        max-width: 56ch;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        line-height: 1.5;
    }

    .profile-danger-button {
        padding: 9px 16px;
        border: 1px solid var(--danger);
        border-radius: 999px;
        background: transparent;
        color: var(--danger);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .profile-danger-button:hover {
        background: color-mix(in srgb, var(--danger) 8%, transparent);
    }

    .delete-account-modal {
        width: min(400px, 100%);
    }

    .delete-account-title {
        margin: 0;
        padding-right: 28px;
        font-size: 17px;
        font-weight: 700;
    }

    .delete-account-body {
        margin: 10px 0 18px;
        color: var(--ink-muted);
        font-size: 14px;
        line-height: 1.5;
    }

    .delete-account-modal input {
        width: 100%;
        padding: 11px 14px;
        border: 1px solid var(--line-control);
        border-radius: 8px;
        color: var(--ink);
        background-color: var(--canvas);
    }

    .save-button {
        padding: 12px 22px;
        border: none;
        border-radius: 999px;
        color: var(--on-button-primary);
        background: var(--button-primary);
        font-weight: 650;
    }

    .save-button:hover:not(:disabled) {
        background: var(--button-primary-hover);
    }

    .save-button:disabled {
        cursor: default;
        opacity: 0.68;
    }

    /* Botão em processamento (ver core/busy-button.ts): spinner + rótulo, ainda legível — a
       opacidade de :disabled não vale aqui porque "ocupado" não é "indisponível". */
    .save-button.is-busy,
    .login-submit-button.is-busy,
    .rule-item-button.is-busy,
    .integration-modal-action.is-busy {
        display: inline-flex;
        gap: 8px;
        align-items: center;
        justify-content: center;
        opacity: 0.92;
        cursor: progress;
    }

    .button-spinner {
        display: inline-block;
        width: 1em;
        height: 1em;
        flex-shrink: 0;
        border: 2px solid currentcolor;
        border-right-color: transparent;
        border-radius: 999px;
        opacity: 0.9;
        animation: button-spin 700ms linear infinite;
    }

    @keyframes button-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .button-spinner {
            animation: button-spin 1.6s steps(8) infinite;
        }
    }

    .integration-hint {
        margin: 0 0 18px;
        color: var(--ink-muted);
        font-size: 14px;
    }

    .integration-row {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .provider-preferences {
        margin-top: 28px;
        padding-top: 20px;
        border-top: 1px solid var(--line);
    }

    .provider-preferences-title {
        margin: 0 0 6px;
        font-size: 15px;
    }

    .provider-preferences-empty {
        margin-top: 28px;
        padding-top: 20px;
        border-top: 1px solid var(--line);
        color: var(--ink-muted);
        font-size: 14px;
    }

    .provider-preference-list {
        list-style: none;
        margin: 16px 0 0;
        padding: 0;
        display: grid;
        gap: 12px;
    }

    /* Controle segmentado: com duas ou três opções por família, mostrar todas de uma vez custa
       menos espaço do que um dropdown e responde sem clique a pergunta que a seção faz. */
    .provider-preference {
        display: flex;
        min-width: 0;
        gap: 16px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .provider-preference-label {
        flex: 0 0 auto;
        font-size: 14px;
        font-weight: 650;
    }

    /* Família sem alternativa: mesmo alinhamento das que têm seletor, sem moldura de controle —
       nada aqui é clicável, e uma pílula sugeriria que é. */
    .provider-preference-fixed {
        display: flex;
        padding: 8px 4px;
        gap: 8px;
        align-items: center;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    /* A moldura fica no contêiner e o select entra sem borda própria: assim a marca do provider
       escolhido e o campo leem como um controle só, e não como um ícone solto ao lado de um
       dropdown. */
    .provider-preference-control {
        display: flex;
        min-width: 0;
        max-width: 100%;
        padding: 4px 4px 4px 7px;
        border: 1px solid var(--line-control);
        border-radius: 10px;
        gap: 8px;
        align-items: center;
        background: var(--surface);
        transition: border-color 140ms ease;
    }

    .provider-preference-control:hover {
        border-color: var(--line-hover);
    }

    .provider-preference-control:focus-within {
        border-color: var(--green);
        outline: 2px solid var(--green);
        outline-offset: 1px;
    }

    .provider-preference-control:has(.provider-preference-select:disabled) {
        cursor: progress;
        opacity: 0.6;
    }

    /* A moldura e a marca do provider pertencem ao contêiner, então este é o único <select> do app
       que abre mão da borda e do raio da base. Cores, seta e cursor continuam vindo de lá — o que
       sobra aqui é o encaixe dentro da moldura e um corpo menor, porque a linha compete com o
       rótulo da família ao lado. */
    .provider-preference-select {
        padding: 4px 24px 4px 2px;
        border: 0;
        border-radius: 0;
        background-position: right 12px center, right 7px center;
        font-size: 14px;
    }

    /* Quem esmaece durante a troca é o contêiner inteiro, marca junto. Sem isto as duas opacidades
       se multiplicam e o campo some enquanto a preferência salva. */
    .provider-preference-select:disabled {
        opacity: 1;
    }

    /* O anel de foco fica no contêiner, que envolve marca e campo: dois anéis concêntricos
       repetiriam a mesma informação e o de dentro cortaria a moldura. */
    .provider-preference-select:focus,
    .provider-preference-select:focus-visible {
        outline: none;
    }

    .provider-option-mark {
        display: grid;
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: var(--surface);
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-xs);
        font-weight: 700;
    }

    /* Google, Microsoft e Telegram usam o logo oficial (SVG inline, ver .integration-catalog-logo-google
       mais abaixo); aqui só o contorno. */
    .provider-option-mark.integration-catalog-logo-google,
    .provider-option-mark.integration-catalog-logo-microsoft,
    .provider-option-mark.integration-catalog-logo-dropbox,
    .provider-option-mark.integration-catalog-logo-zoho,
    .provider-option-mark.integration-catalog-logo-whatsapp,
    .integration-tile .integration-catalog-logo-whatsapp {
        border-color: var(--line);
        background-color: var(--canvas);
    }

    .provider-option-mark.integration-catalog-logo-telegram {
        border-color: var(--line);
        background-color: var(--canvas);
    }

    @media (prefers-reduced-motion: reduce) {
        .provider-preference-control {
            transition: none;
        }
    }

    @keyframes enter {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
    }

    @keyframes message-in {
        from {
            opacity: 0;
            transform: translateY(7px);
        }
    }

    @keyframes typing {
        0%, 60%, 100% {
            opacity: 0.35;
            transform: translateY(0);
        }
        30% {
            opacity: 1;
            transform: translateY(-3px);
        }
    }

    @keyframes history-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .history-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        translate: -50% -50%;
        align-items: center;
        gap: 10px;
        padding: 11px 18px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        box-shadow: var(--shadow-2);
        color: var(--ink-muted);
        font-size: 14px;
        animation: enter 320ms ease-out both;
    }

    .history-loading[hidden] {
        display: none;
    }

    .history-spinner {
        width: 15px;
        height: 15px;
        border: 2px solid var(--green-soft);
        border-top-color: var(--green);
        border-radius: 50%;
        animation: history-spin 720ms linear infinite;
    }

    /* position:absolute against .chat-main (the scroll container, position:relative) rather than
       sticky: its containing block is the viewport of .chat-main, not the scrolled content, so it
       stays pinned to the bottom of what is visible no matter how far up the thread is scrolled —
       the same technique .empty-state already uses with inset:0. */
    .new-messages-button {
        position: absolute;
        bottom: 18px;
        left: 50%;
        z-index: 1;
        display: inline-flex;
        width: fit-content;
        align-items: center;
        gap: 8px;
        translate: -50% 0;
        padding: 9px 16px;
        border: 1px solid var(--button-primary);
        border-radius: 999px;
        color: var(--on-button-primary);
        background: var(--button-primary);
        font-weight: 650;
        font-size: var(--text-sm);
        box-shadow: var(--shadow-2);
        animation: enter 180ms ease-out both;
    }

    .new-messages-button[hidden] {
        display: none;
    }

    .new-messages-button:hover {
        background: var(--button-primary-hover);
        border-color: var(--button-primary-hover);
    }

    .history-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 2px 0 6px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        letter-spacing: 0.02em;
    }

    /* Rodapé do painel de histórico: zerar contexto. Ícone + título + a frase que evita a
       pergunta ("apaga?" — não apaga). Neutro em repouso, tingido de perigo só no hover:
       é uma ação de manutenção, não um convite. */
    .history-context-reset-row {
        padding: 10px 12px;
        border-top: 1px solid var(--line);
    }

    .history-context-reset {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: transparent;
        color: var(--ink-muted);
        text-align: left;
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .history-context-reset-icon {
        flex: none;
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .history-context-reset-label {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 1px;
    }

    .history-context-reset-title {
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--ink);
    }

    .history-context-reset-hint {
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    .history-context-reset:hover {
        border-color: var(--danger-border);
        background: var(--danger-bg);
        color: var(--danger);
    }

    .history-context-reset:hover .history-context-reset-title {
        color: var(--danger);
    }

    .history-context-reset:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }

    .history-divider::before,
    .history-divider::after {
        height: 1px;
        background: var(--line);
        content: "";
        flex: 1;
    }

    @media (prefers-reduced-motion: reduce) {
        .history-spinner {
            animation-duration: 2.4s;
        }

        .history-loading {
            animation: none;
        }
    }

    @media (max-width: 680px) {
        .app-header {
            min-height: 64px;
            padding: 10px 14px;
            padding-top: max(10px, env(safe-area-inset-top));
            padding-left: max(14px, env(safe-area-inset-left));
            padding-right: max(14px, env(safe-area-inset-right));
        }

        .connection-status {
            display: none;
        }

        /* Só o círculo: o wordmark cede o espaço aos controles do cabeçalho. */
        .brand-logo-light,
        .brand-logo-dark {
            display: none !important;
        }

        .brand-logo-mark {
            display: block;
        }

        .integration-actions {
            gap: 8px;
        }

        .google-button {
            min-height: 42px;
            padding: 0 12px;
            font-size: 14px;
        }

        .messages {
            width: calc(100% - 24px);
            padding: 28px 0 34px;
            gap: 20px;
        }

        .empty-state h1 {
            font-size: var(--text-display-compact);
        }

        .message-content {
            max-width: 86%;
        }

        /* Em telas estreitas as ações do bloco dividem a largura igualmente em vez de se
           empilharem à direita, para o alvo de toque ser maior que o rótulo. */
        .block-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .block-action {
            min-width: 0;
        }

        .composer-area {
            padding: 10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
        }

        .composer {
            padding-left: 8px;
        }

        /* Enviar vira só ícone: os ~40px que o rótulo ocupava voltam para o campo de texto,
           que num aparelho de 360px disputava espaço com anexo, microfone e Enviar. */
        .send-button {
            width: 42px;
            min-width: 42px;
            padding: 0;
        }

        .send-button-icon {
            display: block;
        }

        .send-button-label {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        .composer {
            gap: 8px;
            padding: 6px 6px 6px 12px;
        }

        /* O nome ao lado do avatar é o primeiro a sair: no cabeçalho estreito cada controle
           tem 42px e o nome de até 160px é o único elemento elástico. */
        .account-name {
            display: none;
        }

        .account-trigger {
            padding: 4px;
        }

        /* A bolha do assistente perde a assimetria de chat: quando o conteúdo é um cartão
           (lista de voos, extrato, agenda) os 14% de margem à direita só apertavam colunas. */
        .message.assistant .message-content {
            max-width: 100%;
        }

        .message.user .message-content {
            max-width: 88%;
        }

        .notice {
            top: 74px;
        }

        /* Desliga o desfoque no vidro: em Android médio ele custa quadros durante o stream. */
        .app-header,
        .composer-area {
            backdrop-filter: none;
        }
    }

    /* ---------- bottom sheets ----------
       Em celular, menus e diálogos ancoram na base da tela, onde o polegar já está: o
       dropdown de 200px pendurado no cabeçalho e o cartão centralizado são padrões de mouse.
       Só CSS: o comportamento (abrir, fechar por clique fora e Escape) é o mesmo. O
       position: fixed dos dropdowns só funciona porque neste breakpoint o cabeçalho perde o
       backdrop-filter (que criaria um bloco contentor e prenderia o menu à faixa). */
    @media (max-width: 680px) {
        .account-dropdown,
        .language-dropdown {
            position: fixed;
            top: auto;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            width: auto;
            padding: 10px 12px max(14px, env(safe-area-inset-bottom));
            border-radius: 18px 18px 0 0;
            border-bottom: 0;
            box-shadow: var(--shadow-3);
            animation: sheet-in 220ms ease-out both;
        }

        /* Alça e scrim desenhados pelo próprio painel: o clique no scrim é um clique fora,
           que já fecha o menu. */
        .account-dropdown::after,
        .language-dropdown::after {
            content: "";
            position: absolute;
            top: 6px;
            left: 50%;
            width: 36px;
            height: 4px;
            border-radius: 999px;
            background: var(--line-hover);
            translate: -50% 0;
        }

        .account-dropdown::before,
        .language-dropdown::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -1;
            background: var(--scrim);
        }

        .account-dropdown-item,
        .language-option {
            padding: 12px 14px;
            font-size: 16px;
        }

        .account-dropdown-item:first-child,
        .language-option:first-child {
            margin-top: 8px;
        }

        .modal-overlay {
            padding: 0;
            align-items: flex-end;
        }

        .modal-card {
            width: 100%;
            max-height: calc(100dvh - 24px);
            margin: auto 0 0;
            padding: 26px 20px max(24px, env(safe-area-inset-bottom));
            border-radius: 20px 20px 0 0;
            animation: sheet-in 240ms ease-out both;
        }

        .modal-card::before {
            content: "";
            position: absolute;
            top: 8px;
            left: 50%;
            width: 36px;
            height: 4px;
            border-radius: 999px;
            background: var(--line-hover);
            translate: -50% 0;
        }
    }

    @keyframes sheet-in {
        from {
            opacity: 0;
            transform: translateY(24px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .account-dropdown,
        .language-dropdown,
        .modal-card {
            animation: none;
        }
    }

    /* Alvos de toque no mínimo de 44px (Apple HIG; WCAG 2.5.8 pede 24 mas 44 é o que
       evita erro de dedo). Só em toque: com mouse os 42px atuais são proporcionais. */
    @media (pointer: coarse) {
        .attach-button,
        .mic-button,
        .theme-toggle,
        .language-toggle,
        .send-button {
            min-height: 44px;
        }

        .attach-button,
        .mic-button,
        .theme-toggle {
            width: 44px;
            height: 44px;
        }

        .login-button,
        .account-trigger,
        .google-button,
        .block-action,
        .intro-card-more,
        .account-dropdown-item,
        .language-option {
            min-height: 44px;
        }

        .remove-attachment-button {
            width: 36px;
            height: 36px;
        }
    }

    @media (pointer: coarse) and (max-width: 680px) {
        .send-button {
            width: 44px;
            min-width: 44px;
        }
    }

    /* Linhas de bloco rico com três colunas viram duas: o rótulo de tempo/remetente ocupa a
       linha inteira em cima e o detalhe divide a de baixo com valor/estado. Abaixo de ~480px
       a coluna do meio ficava com menos de 100px. */
    @media (max-width: 480px) {
        .calendar-events-row,
        .email-messages-row {
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 2px 10px;
        }

        .calendar-events-when,
        .email-messages-sender {
            grid-column: 1 / -1;
        }

        .task-items-row {
            grid-template-columns: minmax(0, 1fr) auto;
        }

        .task-items-row > :nth-child(3) {
            grid-column: 1 / -1;
            justify-self: start;
        }

        .finance-transactions-row {
            gap: 8px;
        }
    }

    /* Celular deitado: ~350px de altura. Cabeçalho e composer encolhem para sobrar tela para
       a conversa; o modal de login já cuida de si pelo breakpoint de altura. */
    @media (max-height: 460px) and (orientation: landscape) {
        .app-header {
            min-height: 52px;
            padding-top: 6px;
            padding-bottom: 6px;
        }

        .composer-area {
            padding-top: 8px;
            padding-bottom: max(8px, env(safe-area-inset-bottom));
        }

        .messages {
            padding: 20px 0 28px;
            gap: 16px;
        }

        .intro-mark {
            display: none;
        }
    }

    @media (max-width: 360px) {
        .block-actions {
            grid-template-columns: 1fr;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            scroll-behavior: auto !important;
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
        }
    }
}

/* ---------- catálogo e modal de integrações ---------- */
@layer components {
    .integration-group + .integration-group {
        margin-top: 52px;
        padding-top: 44px;
        border-top: 1px solid var(--line);
    }

    .integration-group-header {
        display: flex;
        margin-bottom: 22px;
        gap: 24px;
        align-items: flex-end;
        justify-content: space-between;
    }

    .integration-group-header .section-heading {
        margin-bottom: 8px;
    }

    .integration-group-header p:not(.integration-group-kicker) {
        max-width: 60ch;
        margin: 0;
        color: var(--ink-muted);
        line-height: 1.55;
    }

    .integration-group-kicker {
        margin: 0 0 7px;
        color: var(--green);
        font-size: var(--text-2xs);
        font-weight: 750;
        letter-spacing: 0.06em;
    }

    .integration-group-count {
        flex: 0 0 auto;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        white-space: nowrap;
    }

    /* auto-fill em vez de um número fixo de colunas: com centenas de integrações a grade tem de
       usar toda a largura disponível, e uma trilha mínima de 200px mantém nome e categoria em
       uma linha legível em qualquer viewport sem precisar de breakpoint por contagem. */
    .integration-tile-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        margin: 0;
        padding: 0;
        gap: 12px;
        list-style: none;
    }

    .integration-tile {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 13px;
        gap: 12px;
        align-items: center;
        color: inherit;
        background: var(--surface);
        font: inherit;
        text-align: left;
        transition: border-color 140ms ease, background 140ms ease, transform 140ms ease,
            box-shadow 140ms ease;
    }

    .integration-tile:hover {
        border-color: var(--green);
        background: var(--surface-strong);
        box-shadow: var(--shadow-1);
        transform: translateY(-2px);
    }

    .integration-tile:focus-visible {
        border-color: var(--green);
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }

    .integration-tile.is-active {
        border-color: var(--green-soft);
    }

    .integration-tile-logo {
        display: grid;
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid var(--green-soft);
        border-radius: 11px;
        color: var(--accent-ink);
        background: var(--surface-hover);
        font-family: Georgia, "Times New Roman", serif;
        /* Sigla de duas letras ("Fi", "Vi"): 16px cabe nos 38px sem encostar na borda. */
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .integration-tile .integration-catalog-logo-google,
    .integration-tile .integration-catalog-logo-microsoft,
    .integration-tile .integration-catalog-logo-dropbox,
    .integration-tile .integration-catalog-logo-zoho,
    .integration-tile .integration-catalog-logo-telegram {
        border-color: var(--line);
        background-color: var(--canvas);
    }

    .integration-tile-text {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
        gap: 2px;
    }

    /* O nome é o que se procura numa lista longa: nunca quebra em duas linhas, para que todos os
       cartões tenham a mesma altura e a varredura vertical não trave. */
    .integration-tile-name {
        overflow: hidden;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .integration-tile-category {
        overflow: hidden;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Situação pela cor do cartão inteiro, não por um selo: o selo comia a largura de que o nome
       precisa, e é o nome que se procura numa lista longa. Cor sozinha não é acessível, então
       cada cartão carrega a mesma informação no aria-label, e a preferida — a única distinção
       entre dois cartões igualmente ativos — ganha também a estrela. */
    .integration-tile-managed {
        position: relative;
        padding-left: 17px;
    }

    .integration-tile-managed::before {
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 0;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: transparent;
        content: "";
    }

    /* Ativa, nativa e preferida vestem a mesma cor: o que está em uso é verde, ponto. A única
       distinção que sobra é a estrela da preferida — a marca de escolha entre duas ativas. */
    .integration-tile-managed.is-active,
    .integration-tile-managed.is-native,
    .integration-tile-managed.is-preferred {
        border-color: var(--tile-preferred-border);
        background: var(--tile-preferred-bg);
    }

    .integration-tile-managed.is-active::before,
    .integration-tile-managed.is-native::before,
    .integration-tile-managed.is-preferred::before {
        background: var(--tile-preferred-bar);
    }

    /* Apagada de propósito: o cartão inativo continua legível e clicável, mas não disputa a
       atenção com os que estão em uso. */
    .integration-tile-managed.is-inactive {
        border-style: dashed;
        background: var(--canvas);
    }

    .integration-tile-managed.is-inactive .integration-tile-name {
        color: var(--ink-muted);
        font-weight: 600;
    }

    .integration-tile-managed.is-inactive .integration-tile-logo {
        border-color: var(--line);
        color: var(--ink-muted);
        background-color: var(--surface);
    }

    /* Desconectada, a marca oficial não vira letra: continua o logo, só esmaecido. */
    .integration-tile-managed.is-inactive .integration-catalog-logo-google,
    .integration-tile-managed.is-inactive .integration-catalog-logo-microsoft,
    .integration-tile-managed.is-inactive .integration-catalog-logo-dropbox,
    .integration-tile-managed.is-inactive .integration-catalog-logo-zoho,
    .integration-tile-managed.is-inactive .integration-catalog-logo-whatsapp,
    .integration-tile-managed.is-inactive .integration-catalog-logo-telegram {
        color: transparent;
        opacity: 0.7;
    }

    .integration-tile-managed.is-unavailable {
        border-style: dashed;
        background: var(--canvas);
        opacity: 0.62;
    }

    .integration-tile-star {
        align-self: flex-start;
        flex: 0 0 auto;
        color: var(--green);
        font-size: var(--text-xs);
        line-height: 1.2;
    }

    .integration-catalog-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0;
        padding: 0;
        gap: 14px;
        list-style: none;
    }

    .integration-catalog-card {
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 190px;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 15px;
        gap: 16px;
        color: inherit;
        background: var(--surface);
        font: inherit;
        text-align: left;
        transition: border-color 140ms ease, background 140ms ease, transform 140ms ease,
            box-shadow 140ms ease;
    }

    .integration-catalog-card:hover {
        border-color: var(--green);
        background: var(--surface-strong);
        box-shadow: var(--shadow-1);
        transform: translateY(-2px);
    }

    .integration-catalog-card:focus-visible {
        border-color: var(--green);
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }

    .integration-catalog-logo,
    .integration-detail-logo {
        display: grid;
        width: 48px;
        height: 48px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid var(--green-soft);
        border-radius: 13px;
        color: var(--accent-ink);
        background: var(--surface-hover);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 22px;
        font-weight: 700;
    }

    /* Google, Microsoft, Dropbox, WhatsApp e Telegram: o logo oficial como SVG inline no fundo. A letra
       do catálogo continua no DOM (é o que o TS escreve e o que o leitor de tela ignora via aria-hidden),
       só fica invisível; o mesmo trio de regras vale para tile, cartão, detalhe e seletor de provider no
       perfil. PRECISA vir depois de .integration-tile-logo: o shorthand background de lá zera o
       background-image de qualquer regra anterior de mesma especificidade — foi o que engoliu o balão
       do WhatsApp, declarado no lugar errado do arquivo. */
    .integration-catalog-logo-google,
    .integration-catalog-logo-microsoft,
    .integration-catalog-logo-dropbox,
    .integration-catalog-logo-zoho,
    .integration-catalog-logo-whatsapp,
    .integration-catalog-logo-telegram {
        color: transparent;
        background-color: var(--canvas);
        background-repeat: no-repeat;
        background-position: center;
    }

    /* WhatsApp: o balão verde da marca com o telefone branco. Desenho nosso com a cor oficial. */
    .integration-catalog-logo-whatsapp {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%2325d366' d='M24 4C13 4 4 13 4 24c0 3.5.9 6.9 2.7 9.9L4 44l10.4-2.7c2.9 1.6 6.2 2.4 9.6 2.4 11 0 20-9 20-20S35 4 24 4z'/%3E%3Cpath fill='%23fff' d='M18.4 14.6c-.4-1-.9-1-1.3-1h-1.1c-.4 0-1 .1-1.5.7-.5.6-2 1.9-2 4.7s2.1 5.5 2.4 5.9c.3.4 4 6.4 9.9 8.7 4.9 1.9 5.9 1.5 7 1.4 1.1-.1 3.5-1.4 4-2.8.5-1.4.5-2.5.3-2.8-.1-.3-.5-.4-1.1-.7-.6-.3-3.5-1.7-4-1.9-.5-.2-.9-.3-1.3.3-.4.6-1.5 1.9-1.8 2.3-.3.4-.7.4-1.3.1-.6-.3-2.5-.9-4.7-2.9-1.7-1.5-2.9-3.4-3.2-4-.3-.6 0-.9.3-1.2.3-.3.6-.7.9-1.1.3-.4.4-.6.6-1 .2-.4.1-.8 0-1.1-.1-.3-1.3-3.3-1.8-4.4z'/%3E%3C/svg%3E");
        background-size: 66%;
    }

    .integration-catalog-logo-google {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23fbbc05' d='M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z'/%3E%3Cpath fill='%23ea4335' d='M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z'/%3E%3Cpath fill='%2334a853' d='M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z'/%3E%3Cpath fill='%234285f4' d='M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z'/%3E%3C/svg%3E");
        background-size: 56%;
    }

    .integration-catalog-logo-microsoft {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Crect x='1' y='1' width='10' height='10' fill='%23f25022'/%3E%3Crect x='12' y='1' width='10' height='10' fill='%237fba00'/%3E%3Crect x='1' y='12' width='10' height='10' fill='%2300a4ef'/%3E%3Crect x='12' y='12' width='10' height='10' fill='%23ffb900'/%3E%3C/svg%3E");
        background-size: 50%;
    }

    /* Dropbox: o glyph oficial (quatro losangos + base) no azul da marca. */
    .integration-catalog-logo-dropbox {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 43'%3E%3Cpath fill='%230061ff' d='M12.5 0 0 8l12.5 8L25 8zM37.5 0 25 8l12.5 8L50 8zM0 24l12.5 8L25 24l-12.5-8zM37.5 16 25 24l12.5 8L50 24zM12.5 34.7l12.5 8 12.5-8-12.5-8z'/%3E%3C/svg%3E");
        background-size: 54%;
    }

    /* Zoho Mail: envelope cujas quatro faces são as quatro cores da marca Zoho (vermelho, verde,
       amarelo, azul), separadas por vinco branco. É uma composição nossa com a paleta oficial, não o
       arquivo de marca do Zoho — trocar pelo SVG oficial é substituir este background-image. */
    .integration-catalog-logo-zoho {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36'%3E%3Cg stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath fill='%23e42527' d='M0 0h48L24 18z'/%3E%3Cpath fill='%2389c540' d='M0 0v36l24-18z'/%3E%3Cpath fill='%23f9b21d' d='M48 0v36L24 18z'/%3E%3Cpath fill='%23226db4' d='M0 36h48L24 18z'/%3E%3C/g%3E%3C/svg%3E");
        background-size: 58%;
    }

    .integration-catalog-logo-telegram {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Ccircle cx='120' cy='120' r='120' fill='%232aabee'/%3E%3Cpath fill='%23fff' d='M54.3 118.8c35-15.2 58.3-25.3 70-30.2 33.3-13.9 40.3-16.3 44.8-16.4 1 0 3.2.2 4.7 1.4 1.2 1 1.5 2.3 1.7 3.3.2 1 .4 3.1.2 4.7-1.8 19-9.6 65.1-13.6 86.3-1.7 9-5 12-8.2 12.3-7 .6-12.3-4.6-19-9-10.6-6.9-16.5-11.2-26.8-18-11.9-7.8-4.2-12.1 2.6-19.1 1.8-1.8 32.5-29.8 33.1-32.3.1-.3.1-1.5-.6-2.1-.7-.6-1.7-.4-2.5-.2-1.1.2-17.9 11.4-50.6 33.5-4.8 3.3-9.1 4.9-13 4.8-4.3-.1-12.5-2.4-18.7-4.4-7.5-2.4-13.5-3.7-13-7.9.3-2.2 3.3-4.4 8.9-6.7z'/%3E%3C/svg%3E");
        background-size: 62%;
    }

    .integration-catalog-card .integration-catalog-logo-google,
    .integration-catalog-card .integration-catalog-logo-microsoft,
    .integration-catalog-card .integration-catalog-logo-dropbox,
    .integration-catalog-card .integration-catalog-logo-zoho,
    .integration-catalog-card .integration-catalog-logo-telegram,
    .integration-detail-logo.integration-catalog-logo-google,
    .integration-detail-logo.integration-catalog-logo-microsoft,
    .integration-detail-logo.integration-catalog-logo-dropbox,
    .integration-detail-logo.integration-catalog-logo-zoho,
    .integration-detail-logo.integration-catalog-logo-telegram {
        border-color: var(--line);
        background-color: var(--canvas);
    }

    .integration-catalog-content {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
    }

    .integration-catalog-heading {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .integration-catalog-heading strong {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 18px;
    }

    /* Categoria: taxonomia, não estado. Deliberadamente quieta — descreve o que a integração é,
       algo que não muda e que ninguém abre o modal para descobrir. */
    .integration-category-chip {
        display: inline-flex;
        width: fit-content;
        align-items: center;
        padding: 4px 9px;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--ink-muted);
        background: var(--canvas);
        font-size: var(--text-2xs);
        font-weight: 650;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

    /* Situação: o fato que muda, e o motivo de o modal existir. Ponto colorido + caixa alta o
       separam das categorias mesmo de relance, e a cor nunca vai sozinha — o texto diz o mesmo,
       para quem não distingue as cores e para quem lê por leitor de tela. */
    .integration-state {
        display: inline-flex;
        width: fit-content;
        align-items: center;
        gap: 7px;
        padding: 5px 11px;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--ink-muted);
        background: var(--surface-hover);
        font-size: var(--text-2xs);
        font-weight: 750;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .integration-state::before {
        width: 7px;
        height: 7px;
        flex: none;
        border-radius: 50%;
        background: var(--status-idle);
        content: "";
    }

    .integration-state-active,
    .integration-state-always {
        border-color: var(--green-soft);
        color: var(--accent-ink);
    }

    .integration-state-active::before,
    .integration-state-always::before,
    .integration-state-preferred::before {
        background: var(--status-live);
        box-shadow: 0 0 0 3px var(--status-live-ring);
    }

    /* Preferida é um degrau acima de ativa, e as duas aparecem lado a lado na mesma lista: o
       preenchimento é o que as separa quando ambas estão verdes. */
    .integration-state-preferred {
        border-color: var(--tile-preferred-border);
        color: var(--accent-ink);
        background: var(--tile-preferred-bg);
    }

    .integration-state-inactive {
        background: var(--canvas);
    }

    .integration-state-unavailable {
        border-color: var(--danger-border);
        color: var(--danger);
        background: var(--danger-bg);
    }

    .integration-state-unavailable::before {
        background: var(--danger);
    }

    .integration-catalog-summary {
        margin-top: 12px;
        color: var(--ink-muted);
        font-size: 14px;
        line-height: 1.55;
        text-wrap: pretty;
    }

    .integration-card-link {
        margin-top: auto;
        padding-top: 18px;
        color: var(--accent-ink);
        font-size: var(--text-sm);
        font-weight: 650;
    }

    .integration-card-link span {
        display: inline-block;
        margin-left: 3px;
        transition: transform 140ms ease;
    }

    .integration-catalog-card:hover .integration-card-link span {
        transform: translateX(3px);
    }

    .integration-modal {
        width: min(680px, 100%);
        padding: 30px;
    }

    .integration-modal-header {
        display: flex;
        padding-right: 34px;
        gap: 18px;
        align-items: flex-start;
    }

    .integration-detail-logo {
        width: 58px;
        height: 58px;
        border-radius: 15px;
        font-size: 26px;
    }

    /* Situação, nome, resumo e categorias empilhados numa ordem só: o que mudou, o que é, o que
       faz, e por último em que áreas entra. */
    .integration-modal-heading {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Título e situação na mesma linha. Centralizado, e não pela linha de base: a pílula é
       maiúscula pequena com borda e padding, e alinhá-la pela base a faria flutuar contra um
       título serifado bem maior. O wrap existe porque nome longo e "PREFERIDA" não cabem juntos
       em tela estreita — e aí a pílula desce inteira, em vez de espremer o título. */
    .integration-modal-titlebar {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .integration-modal-header h2 {
        margin: 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-md);
    }

    .integration-modal-header p {
        margin: 0;
        color: var(--ink-muted);
        font-size: 14px;
        line-height: 1.55;
    }

    .integration-modal-content {
        margin-top: 26px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
    }

    .integration-modal-content[hidden] {
        display: none;
    }

    .integration-modal-content section + section {
        margin-top: 26px;
    }

    .integration-modal-content h3 {
        margin: 0 0 9px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 18px;
    }

    .integration-modal-content section > p:last-child {
        margin: 0;
        color: var(--ink-muted);
        font-size: 14px;
        line-height: 1.65;
    }

    .integration-feature-list {
        display: grid;
        margin: 0;
        padding: 0;
        gap: 10px;
        list-style: none;
    }

    .integration-feature-list li {
        display: flex;
        padding: 13px 14px;
        border: 1px solid var(--line);
        border-radius: 11px;
        gap: 11px;
        background: var(--surface);
    }

    .integration-feature-check {
        display: grid;
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        place-items: center;
        border-radius: 50%;
        color: var(--accent-ink);
        background: var(--green-soft);
        font-size: var(--text-xs);
        font-weight: 750;
    }

    .integration-feature-list strong {
        font-size: 14px;
    }

    .integration-feature-list p {
        margin: 3px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        line-height: 1.5;
    }

    .integration-modal-footer {
        display: flex;
        margin-top: 26px;
        padding-top: 20px;
        border-top: 1px solid var(--line);
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }

    .integration-modal-session-note,
    .integration-modal-error {
        margin: 0 auto 0 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .integration-modal-error {
        color: var(--danger);
    }

    /* No catálogo esta ação é um <a> (leva ao perfil) e no perfil é um <button>. O sublinhado do
       link não faz sentido num elemento que já se apresenta como botão. */
    .integration-modal-action {
        display: inline-flex;
        width: auto;
        min-width: 112px;
        margin: 0;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    /* O display acima vence o display:none do agente de usuário para [hidden], então sem esta
       regra a ação escondida (nativa, indisponível ou estado ainda não carregado) continua na
       tela como um botão verde vazio. */
    .integration-modal-action[hidden] {
        display: none;
    }

    .integration-modal-action.is-destructive {
        border: 1px solid var(--danger);
        color: var(--danger);
        background: transparent;
    }

    .integration-modal-action.is-destructive:hover:not(:disabled) {
        color: var(--surface-strong);
        background: var(--danger);
    }

    @media (max-width: 700px) {
        .integration-catalog-grid {
            grid-template-columns: 1fr;
        }

        .integration-group-header {
            align-items: flex-start;
            flex-direction: column;
            gap: 10px;
        }

        .integration-modal {
            padding: 26px 20px max(20px, env(safe-area-inset-bottom));
        }
    }

    @media (max-width: 460px) {
        .integration-catalog-card {
            min-height: 0;
            padding: 18px;
        }

        .integration-catalog-logo {
            width: 42px;
            height: 42px;
        }

        .integration-modal-header {
            padding-right: 26px;
            flex-direction: column;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .integration-catalog-card,
        .integration-tile,
        .integration-card-link span {
            transition: none;
        }

        .integration-catalog-card:hover,
        .integration-tile:hover {
            transform: none;
        }
    }
}

/* ---------- filtro de categoria e grade do perfil ---------- */
@layer components {
    .integration-filter {
        display: flex;
        margin-bottom: 22px;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
    }

    .integration-filter-label {
        color: var(--ink-muted);
        font-size: var(--text-sm);
        font-weight: 650;
    }

    /* Borda, cores, seta e comportamento vêm da base; aqui fica só o que é deste filtro: a
       largura mínima que impede o campo de encolher até o nome da categoria não caber. */
    .integration-filter-select {
        min-width: 200px;
        padding: 9px 32px 9px 12px;
    }

    .integration-filter-select:focus-visible {
        border-color: var(--green);
        outline: 2px solid var(--green);
        outline-offset: 1px;
    }

    .integration-group-empty {
        margin: 0;
        color: var(--ink-muted);
        font-size: 14px;
    }

    .integration-subgroup + .integration-subgroup {
        margin-top: 26px;
    }

    .integration-subgroup-title {
        margin: 0 0 10px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-weight: 750;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    #integrationsCard .integration-filter {
        margin-top: 18px;
    }

    /* Sem trilhas ainda desenhadas a grade tem altura zero e o card colapsa antes do fetch. */
    #userNativeGrid[aria-busy="true"] {
        min-height: 66px;
    }

    /* O que passa das duas fileiras no grupo recolhido. Fora do fluxo do grid, e não só
       invisível: escondido de outro jeito continuaria ocupando a fileira. */
    .integration-tile-grid > li.is-collapsed-away {
        display: none;
    }

    .integration-group-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
        padding: 6px 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: transparent;
        color: var(--ink-muted);
        font: inherit;
        font-size: var(--text-xs);
        font-weight: 650;
        cursor: pointer;
    }

    .integration-group-toggle:hover {
        border-color: var(--accent);
        color: var(--ink);
    }

    .integration-group-toggle-chevron {
        transition: transform 150ms ease;
    }

    .integration-group-toggle[aria-expanded="true"] .integration-group-toggle-chevron {
        transform: rotate(180deg);
    }

    .integration-modal-pills {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }
}

/* ---------- histórico da conversa (sessões) ----------
   O botão herda .theme-toggle (círculo de 42px) e o painel herda a casca do seletor de idioma
   (dropdown no desktop, folha inferior no celular). O painel é um diálogo não modal desenhado
   para muito histórico: cabeçalho, busca e período ficam fixos; só a lista rola, com os títulos
   de grupo (Hoje, Ontem, Esta semana, Agosto…) colados no topo enquanto ela passa. Cada item tem
   três linhas — quando, o quê, quanto — em vez de bandeira + nome; um resultado de busca troca a
   primeira por quem falou e realça o trecho com <mark>. Na thread, o botão de voltar ao presente
   segue a linguagem do "Novas mensagens", sem o peso de botão primário: rever o passado é leitura. */
@layer components {
    .history-menu[hidden] {
        display: none;
    }

    .history-toggle {
        color: var(--ink-muted);
    }

    .history-toggle[aria-expanded="true"] {
        border-color: var(--green);
        color: var(--accent-ink);
        background: var(--green-soft);
    }

    .history-icon {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Coluna: cabeçalho, busca e período fixos; a lista (.history-scroll) é o único que rola. */
    .history-dropdown {
        width: min(400px, calc(100vw - 32px));
        max-height: min(72vh, 620px);
        padding: 0;
        gap: 0;
        overflow: hidden;
    }

    .history-dropdown:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }

    .history-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 10px 6px 16px;
    }

    .history-drawer-title {
        margin: 0;
        color: var(--ink);
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-sm, 18px);
        font-weight: 600;
        line-height: 1.2;
    }

    .history-close {
        display: grid;
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
        place-items: center;
        border: none;
        border-radius: 999px;
        color: var(--ink-muted);
        background: transparent;
        cursor: pointer;
    }

    .history-close:hover {
        color: var(--ink);
        background: var(--surface-hover);
    }

    .history-close svg,
    .history-search-clear svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

    /* Busca: pílula com lupa; o campo é nativo (type=search) para o celular dar o teclado certo. */
    .history-search {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 4px 12px 0;
        padding: 0 8px 0 12px;
        border: 1px solid var(--line-control);
        border-radius: 999px;
        background: var(--surface);
        transition: border-color 120ms ease, box-shadow 120ms ease;
    }

    .history-search:focus-within {
        border-color: var(--green);
        box-shadow: 0 0 0 3px var(--green-soft);
    }

    .history-search-icon {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        fill: none;
        stroke: var(--ink-muted);
        stroke-width: 1.8;
        stroke-linecap: round;
    }

    .history-search-input {
        min-width: 0;
        flex: 1;
        height: 38px;
        padding: 0;
        border: none;
        color: var(--ink);
        background: transparent;
        font: inherit;
        font-size: var(--text-sm);
        outline: none;
        -webkit-appearance: none;
        appearance: none;
    }

    .history-search-input::placeholder {
        color: var(--ink-muted);
    }

    /* O "x" nativo do WebKit some: o nosso é maior, tem rótulo e devolve o foco ao campo. */
    .history-search-input::-webkit-search-decoration,
    .history-search-input::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

    .history-search-clear {
        display: grid;
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
        place-items: center;
        border: none;
        border-radius: 999px;
        color: var(--ink-muted);
        background: transparent;
        cursor: pointer;
    }

    .history-search-clear:hover {
        color: var(--ink);
        background: var(--surface-hover);
    }

    .history-search-clear[hidden] {
        display: none;
    }

    /* Atalhos de período: pílulas de alternância (aria-pressed), roláveis se não couberem. */
    .history-periods {
        display: flex;
        gap: 6px;
        margin: 0;
        padding: 10px 12px 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .history-periods::-webkit-scrollbar {
        display: none;
    }

    /* Canais (Chat / Telegram): mesma pílula, colada em cima do período. */
    .history-channels {
        padding-bottom: 0;
    }

    .history-channels[hidden] {
        display: none;
    }

    .history-channel {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .history-channel-icon {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Etiqueta "Telegram" numa sessão de outro canal, dentro da célula da contagem. */
    .history-session-channel {
        display: inline-block;
        margin-left: 6px;
        padding: 1px 7px;
        border-radius: 999px;
        color: var(--accent-ink);
        background: var(--green-soft);
        font-size: var(--text-2xs);
        font-weight: 650;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

    .history-period {
        flex: 0 0 auto;
        padding: 6px 12px;
        border: 1px solid var(--line-control);
        border-radius: 999px;
        color: var(--ink);
        background: transparent;
        font: inherit;
        font-size: var(--text-xs);
        font-weight: 650;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: border-color 120ms ease, background 120ms ease;
    }

    .history-period:hover {
        background: var(--surface-hover);
    }

    .history-period[aria-pressed="true"] {
        border-color: var(--green);
        color: var(--accent-ink);
        background: var(--green-soft);
    }

    .history-period:focus-visible,
    .history-session:focus-visible,
    .history-load-more:focus-visible,
    .history-close:focus-visible,
    .history-search-clear:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }

    /* A única parte que rola. */
    .history-scroll {
        display: flex;
        min-height: 0;
        flex: 1;
        flex-direction: column;
        padding: 0 8px 8px;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-top: 1px solid var(--line);
    }

    .history-drawer-status {
        margin: 0;
        padding: 22px 12px;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        line-height: 1.45;
        text-align: center;
        text-wrap: balance;
    }

    .history-drawer-status[data-kind="error"] {
        color: var(--danger);
    }

    .history-drawer-status[hidden] {
        display: none;
    }

    .history-list,
    .history-group-items {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .history-list {
        display: flex;
        flex-direction: column;
    }

    .history-list[aria-busy="true"] .history-session {
        opacity: 0.7;
    }

    .history-group {
        display: flex;
        flex-direction: column;
    }

    /* Cabeçalho de grupo colado ao topo enquanto o grupo passa: diz "onde estou" no meio de
       centenas de itens. Fundo opaco para os itens não vazarem por baixo. */
    .history-group-title {
        position: sticky;
        top: 0;
        z-index: 1;
        margin: 0;
        padding: 10px 10px 6px;
        color: var(--ink-muted);
        background: var(--surface-strong);
        font-size: var(--text-2xs);
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .history-group-title::first-letter {
        text-transform: uppercase;
    }

    .history-group-items {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    /* Três linhas empilhadas em grade; a linha inteira é o alvo. */
    .history-session {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "when count"
            "preview preview";
        row-gap: 3px;
        column-gap: 10px;
        align-items: baseline;
        width: 100%;
        padding: 10px 10px 10px 14px;
        border: none;
        border-left: 3px solid transparent;
        border-radius: 8px;
        color: var(--ink);
        background: transparent;
        font: inherit;
        text-align: left;
        cursor: pointer;
        transition: background 120ms ease;
    }

    .history-session:hover {
        background: var(--surface-hover);
    }

    .history-session.is-current {
        border-left-color: var(--green);
        background: var(--green-soft);
    }

    .history-session-when {
        display: flex;
        grid-area: when;
        gap: 8px;
        align-items: baseline;
        min-width: 0;
        color: var(--ink);
        font-size: var(--text-sm);
        font-weight: 650;
    }

    .history-session-day::first-letter {
        text-transform: uppercase;
    }

    .history-session-range {
        color: var(--ink-muted);
        font-weight: 500;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* Ponto pulsante discreto na sessão ativa: "isto é agora". */
    .history-session.is-active .history-session-range::after {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-left: 6px;
        border-radius: 999px;
        background: var(--green);
        vertical-align: middle;
        animation: history-pulse 1.8s ease-in-out infinite;
    }

    @keyframes history-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.35; }
    }

    .history-session-count {
        grid-area: count;
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .history-session-preview {
        grid-area: preview;
        overflow: hidden;
        color: var(--ink);
        font-size: var(--text-sm);
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .history-session-preview.is-muted {
        color: var(--ink-muted);
        font-style: italic;
    }

    /* Resultado de busca: quem falou vira uma etiqueta e o trecho pode quebrar em duas linhas. */
    .history-hit-who {
        padding: 1px 7px;
        border-radius: 999px;
        font-size: var(--text-2xs);
        font-weight: 750;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .history-hit-who.is-user {
        color: var(--accent-ink);
        background: var(--green-soft);
    }

    .history-hit-who.is-assistant {
        color: var(--ink-muted);
        background: var(--surface-hover);
    }

    .history-hit-snippet {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .history-hit-snippet mark {
        padding: 0 1px;
        border-radius: 3px;
        color: inherit;
        background: var(--mark-highlight, rgba(255, 214, 102, 0.55));
        font-weight: 700;
    }

    /* Esqueleto durante a primeira carga: quatro linhas com o mesmo ritmo dos itens. */
    .history-skeleton {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px 10px;
    }

    .history-skeleton-row {
        height: 40px;
        border-radius: 8px;
        background: linear-gradient(90deg, var(--surface-hover) 25%, var(--surface) 50%, var(--surface-hover) 75%);
        background-size: 200% 100%;
        animation: history-shimmer 1.4s linear infinite;
    }

    @keyframes history-shimmer {
        from { background-position: 200% 0; }
        to { background-position: -200% 0; }
    }

    .history-sentinel {
        height: 1px;
        flex: 0 0 auto;
    }

    .history-sentinel[hidden] {
        display: none;
    }

    .history-load-more {
        margin: 6px 4px 0;
        padding: 10px 12px;
        border: 1px solid var(--line-control);
        border-radius: 8px;
        color: var(--ink);
        background: transparent;
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 650;
        cursor: pointer;
    }

    .history-load-more:hover {
        background: var(--surface-hover);
    }

    .history-load-more[hidden] {
        display: none;
    }

    .history-load-more:disabled {
        opacity: 0.6;
        cursor: default;
    }

    .history-end {
        padding: 14px 10px 6px;
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        letter-spacing: 0.02em;
        text-align: center;
    }

    /* Na thread: fecha a sessão revista e devolve a conversa ao vivo. */
    .history-back-button {
        display: inline-flex;
        align-self: center;
        align-items: center;
        gap: 8px;
        margin: 8px auto 12px;
        padding: 9px 16px;
        border: 1px solid var(--line-control);
        border-radius: 999px;
        color: var(--ink);
        background: var(--surface);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 650;
        cursor: pointer;
        box-shadow: var(--shadow-2);
    }

    .history-back-button::before {
        content: "↓";
        color: var(--ink-muted);
    }

    .history-back-button:hover {
        border-color: var(--line-hover);
        background: var(--surface-hover);
    }

    .history-back-button:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }

    /* A mensagem em que um resultado de busca aterrissou: um realce que se apaga sozinho. */
    .message.is-highlighted .message-content {
        animation: history-flash 2.4s ease-out both;
    }

    .message:focus {
        outline: none;
    }

    .message:focus-visible .message-content {
        outline: 2px solid var(--green);
        outline-offset: 3px;
    }

    @keyframes history-flash {
        0% { box-shadow: 0 0 0 4px var(--green-soft), 0 0 0 1px var(--green); }
        70% { box-shadow: 0 0 0 4px var(--green-soft), 0 0 0 1px var(--green); }
        100% { box-shadow: 0 0 0 0 transparent; }
    }

    @media (max-width: 680px) {
        /* Folha inferior: a largura é a da tela; a altura, quase tudo — a lista é o conteúdo. A
           alça e o scrim vêm da casca (.language-dropdown). O padding-top abre espaço à alça. */
        .history-dropdown {
            display: flex;
            flex-direction: column;
            width: auto;
            max-height: min(88dvh, 88vh);
            padding: 0;
            padding-bottom: max(8px, env(safe-area-inset-bottom));
        }

        .history-drawer-header {
            padding-top: 20px;
        }

        .history-search-input {
            height: 42px;
            /* 16px: abaixo disso o iOS dá zoom ao focar o campo. */
            font-size: 16px;
        }

        .history-session {
            padding: 12px 12px 12px 14px;
        }

        .history-session:first-child {
            margin-top: 0;
        }

        /* A grade das linhas cede: preview em uma linha cheia, contagem embaixo à direita. */
        .history-session-preview {
            font-size: 15px;
        }
    }

    @media (pointer: coarse) {
        .history-session,
        .history-load-more,
        .history-period,
        .history-close {
            min-height: 44px;
        }

        .history-search-clear {
            width: 40px;
            height: 40px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .history-session.is-active .history-session-range::after,
        .history-skeleton-row {
            animation: none;
        }

        .history-skeleton-row {
            background: var(--surface-hover);
        }

        .message.is-highlighted .message-content {
            animation: none;
            box-shadow: 0 0 0 1px var(--green);
        }
    }

    @media (forced-colors: active) {
        .history-session.is-current {
            outline: 2px solid Highlight;
        }

        .history-period[aria-pressed="true"] {
            outline: 2px solid Highlight;
        }

        .history-hit-snippet mark {
            forced-color-adjust: none;
            color: MarkText;
            background: Mark;
        }
    }
}

/* ---------- menu Ferramentas + casca dos módulos ----------
   O menu herda a casca do seletor de idioma (mesmas classes: dropdown, folha inferior no
   celular, alvos de toque); aqui só o que difere. A casca de módulo (.module-*) é a base
   comum das páginas de painel (/finance, /contacts, e as próximas): título, cartões, botões,
   campos, listas, estados de carregamento — a mesma linguagem do perfil (/me), para um módulo
   parecer parte do site e não um sistema colado. O CSS específico de cada módulo entra na RCL. */
@layer components {
    .tools-menu[hidden] {
        display: none;
    }

    .tools-icon {
        width: 16px;
        height: 16px;
        fill: currentColor;
        color: var(--ink-muted);
    }

    .tools-toggle-label {
        letter-spacing: 0.02em;
    }

    .tools-option {
        text-decoration: none;
    }

    /* A mesma sigla do cartão nativo em .integration-tile-logo, em escala de menu. */
    .tools-option-logo {
        display: grid;
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid var(--green-soft);
        border-radius: 8px;
        color: var(--accent-ink);
        background: var(--surface-hover);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
    }

    .tools-option.is-current {
        background: var(--green-soft);
    }

    .tools-option[aria-disabled="true"] {
        color: var(--ink-muted);
        cursor: default;
    }

    .tools-option[aria-disabled="true"]:hover {
        background: transparent;
    }

    .tools-option-soon {
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    @media (max-width: 680px) {
        .tools-toggle-label {
            display: none;
        }
    }

    /* ---------- casca ---------- */
    .module-shell {
        display: flex;
        flex-direction: column;
    }

    /* Cabeçalho + navegação do módulo grudados no topo: a página rola por baixo e o menu
       (marca, conta, abas Painel / Extrato / …) continua sempre à mão. O sticky vai no
       invólucro, não em cada peça, para a navegação assentar exatamente sob o cabeçalho
       seja qual for a altura dele (safe-area, celular deitado). */
    .module-top {
        position: sticky;
        top: 0;
        z-index: 3;
        flex: none;
    }

    .module-top > .app-header {
        position: static;
    }

    .module-main {
        display: flex;
        width: min(var(--shell-measure, 940px), calc(100% - 40px));
        margin: 0 auto;
        padding: 36px 0 56px;
        flex: 1;
        flex-direction: column;
        gap: 22px;
    }

    /* Navegação secundária (Painel / Extrato / …), sob o cabeçalho, com o mesmo indicador de
       aba corrente da navegação do perfil: barra verde, texto escurecendo. */
    .module-nav {
        border-bottom: 1px solid var(--line);
        background: var(--surface);
    }

    .module-nav-inner {
        display: flex;
        width: min(var(--shell-measure, 940px), calc(100% - 40px));
        margin: 0 auto;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .module-nav-item {
        position: relative;
        padding: 13px 14px 12px;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        transition: color 120ms ease;
    }

    .module-nav-item:hover,
    .module-nav-item.is-current {
        color: var(--ink);
    }

    .module-nav-item.is-current::after {
        content: "";
        position: absolute;
        right: 14px;
        bottom: -1px;
        left: 14px;
        height: 2px;
        border-radius: 2px;
        background: var(--green);
    }

    .module-nav-item:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: -2px;
        border-radius: 6px;
    }

    .module-head {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .module-kicker {
        color: var(--accent-ink);
        font-size: var(--text-2xs);
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .module-title {
        margin: 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-lg);
        font-weight: 600;
        line-height: 1.15;
    }

    .module-lede {
        margin: 0;
        max-width: 62ch;
        color: var(--ink-muted);
    }

    /* Linha de ferramentas sob o título: ações à esquerda, contexto (mês, intervalo) à direita. */
    .module-toolbar {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .module-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ---------- botões ---------- */
    .module-button {
        display: inline-flex;
        min-height: 40px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 18px;
        border: 1px solid transparent;
        border-radius: 999px;
        color: var(--on-button-primary);
        background: var(--button-primary);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 650;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    }

    .module-button:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }

    .module-button:hover:not(:disabled) {
        background: var(--button-primary-hover);
    }

    .module-button:disabled {
        opacity: 0.38;
        cursor: default;
    }

    .module-button-secondary {
        border-color: var(--line-control);
        color: var(--ink);
        background: var(--surface);
    }

    .module-button-secondary:hover:not(:disabled) {
        border-color: var(--ink-muted);
        background: var(--surface);
    }

    .module-button-ghost {
        min-height: 32px;
        padding: 0 10px;
        border-color: transparent;
        color: var(--accent-ink);
        background: transparent;
    }

    .module-button-ghost:hover:not(:disabled) {
        background: var(--green-soft);
    }

    .module-button-danger {
        border-color: var(--danger);
        color: var(--danger);
        background: transparent;
    }

    .module-button-danger:hover:not(:disabled) {
        color: var(--on-accent);
        background: var(--danger);
    }

    .module-button-small {
        min-height: 30px;
        padding: 0 12px;
        font-size: var(--text-xs);
    }

    .module-button-icon {
        width: 40px;
        min-height: 40px;
        padding: 0;
    }

    .module-button svg {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
    }

    /* Segmentado (3 / 6 / 12 meses): um grupo de pílulas com uma marcada. */
    .module-segmented {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 3px;
        border: 1px solid var(--line-control);
        border-radius: 999px;
        background: var(--surface);
    }

    .module-segment {
        min-width: 38px;
        height: 32px;
        padding: 0 12px;
        border: none;
        border-radius: 999px;
        color: var(--ink-muted);
        background: transparent;
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 600;
        cursor: pointer;
    }

    .module-segment[aria-pressed="true"] {
        color: var(--accent-ink);
        background: var(--green-soft);
    }

    .module-segment-label {
        padding: 0 10px 0 6px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    /* Navegador de período (◀ Agosto de 2026 ▶). */
    .module-period {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .module-period-label {
        min-width: 12ch;
        text-align: center;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-sm);
        font-weight: 600;
    }

    /* "Hoje": volta ao mês atual; some quando já se está nele. */
    .module-period-today {
        margin-left: 4px;
        padding-inline: 10px;
    }

    .module-period-today:disabled {
        visibility: hidden;
    }

    /* ---------- campos ---------- */
    .module-field {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 6px;
    }

    .module-label {
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-weight: 650;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .module-input,
    .module-select,
    .module-textarea {
        width: 100%;
        min-height: 42px;
        padding: 10px 14px;
        border: 1px solid var(--line-control);
        border-radius: 10px;
        color: var(--ink);
        background-color: var(--canvas);
        font: inherit;
        transition: border-color 120ms ease;
    }

    .module-select {
        padding-right: 36px;
    }

    .module-textarea {
        resize: vertical;
    }

    .module-input:focus-visible,
    .module-select:focus-visible,
    .module-textarea:focus-visible {
        outline: none;
        border-color: var(--green);
        box-shadow: 0 0 0 3px var(--green-soft);
    }

    .module-check {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        color: var(--ink);
        font-size: var(--text-sm);
    }

    .module-check input {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--green);
    }

    /* Busca: pílula com lupa, como um campo de pesquisa e não um input qualquer. */
    .module-search {
        position: relative;
        flex: 1;
        min-width: 200px;
    }

    .module-search svg {
        position: absolute;
        top: 50%;
        left: 14px;
        width: 16px;
        height: 16px;
        color: var(--ink-muted);
        translate: 0 -50%;
        pointer-events: none;
    }

    .module-search .module-input {
        padding-left: 40px;
        border-radius: 999px;
    }

    /* ---------- cartões ---------- */
    .module-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
        align-items: stretch;
    }

    .module-card {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 14px;
        padding: 22px 24px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--surface-strong);
        box-shadow: var(--shadow-2);
        animation: enter 240ms ease-out both;
    }

    .module-card-head {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        gap: 6px 12px;
    }

    /* O título não quebra no meio para dar lugar ao botão: o botão é que desce de linha. */
    .module-card-head > .module-card-title {
        flex: 0 0 auto;
    }

    .module-card-head > .module-button {
        margin-left: auto;
    }

    .module-card-title {
        margin: 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-sm);
        font-weight: 600;
    }

    .module-card-label {
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .module-card-value {
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-md);
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
    }

    .module-tiles {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }

    .module-tile {
        gap: 8px;
        padding: 18px 22px;
    }

    .module-list {
        display: flex;
        margin: 0;
        padding: 0;
        flex-direction: column;
        list-style: none;
    }

    .module-list-item {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 10px 0;
        border-top: 1px solid var(--line);
    }

    .module-list-item:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .module-list-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .module-list-value {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .module-list-meta {
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .module-empty {
        margin: 0;
        padding: 6px 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .module-empty[hidden] {
        display: none;
    }

    .module-count {
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    /* Tabela dentro de cartão: cabeçalho discreto, linhas separadas por fio, rola na horizontal
       em vez de estourar o cartão. */
    /* Nunca barra de rolagem horizontal: a tabela cabe na largura e as células quebram linha
       (a linha fica mais alta, e tudo bem). Só o que é curto e perde sentido quebrado (valor,
       data) segue em nowrap, e as células de ação embrulham os botões. */
    .module-table-wrap {
        overflow-x: hidden;
        margin: 0 -8px;
    }

    .module-table-wrap .module-table td {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .module-table-wrap .module-table td.is-numeric,
    .module-table-wrap .module-table td.finance-cell-due,
    .module-table-wrap .module-table td.travel-cell-when,
    .module-table-wrap .module-table td.shipping-cell-eta,
    .module-table-wrap .module-table td.backoffice-cell-when {
        white-space: nowrap;
    }

    .module-table-wrap .module-table td.finance-col-actions,
    .module-table-wrap .module-table td.travel-col-actions,
    .module-table-wrap .module-table td.shipping-col-actions {
        width: auto;
        white-space: normal;
    }

    .module-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--text-sm);
    }

    .module-table th {
        padding: 6px 8px;
        border-bottom: 1px solid var(--line);
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .module-table td {
        padding: 11px 8px;
        border-bottom: 1px solid var(--line);
        vertical-align: top;
    }

    .module-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .module-table tbody tr:hover td {
        background: var(--surface-hover);
    }

    .module-table .is-numeric {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    /* Paginação: centrada, discreta. */
    .module-pager {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        padding-top: 4px;
    }

    .module-pager[hidden] {
        display: none;
    }

    .module-pager-label {
        color: var(--ink-muted);
        font-size: var(--text-sm);
        font-variant-numeric: tabular-nums;
    }

    /* Etiqueta pequena (grupo do contato, "estornada"). */
    /* ---------- ações de linha (documento + 1 ação + "⋯") ----------
       Substitui a fileira de botões que estourava a tabela: o que precisa estar à vista fica; o
       resto abre num menu fixo no body (fora do overflow da tabela). */
    .row-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        max-width: 240px;
        margin-left: auto;
    }

    .row-actions .module-tag {
        margin: 0;
    }

    .row-actions-more {
        width: 32px;
        min-width: 32px;
        min-height: 30px;
        padding: 0;
        color: var(--ink-muted);
    }

    .row-actions-more[aria-expanded="true"],
    .row-actions-more:hover {
        color: var(--ink);
        border-color: var(--ink-muted);
    }

    .row-actions-primary svg {
        margin-right: 6px;
    }

    .row-menu {
        position: fixed;
        z-index: 60;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 180px;
        max-width: 260px;
        padding: 6px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface-strong);
        box-shadow: var(--shadow-2);
        animation: enter 140ms ease-out both;
    }

    .row-menu-item {
        appearance: none;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 0;
        background: transparent;
        color: var(--ink);
        text-align: left;
        text-decoration: none;
        font: inherit;
        font-size: var(--text-sm);
        padding: 8px 10px;
        border-radius: 8px;
        cursor: pointer;
    }

    .row-menu-item svg {
        flex: none;
        width: 16px;
        height: 16px;
    }

    .row-menu-item.is-link {
        color: var(--accent-ink);
    }

    .row-menu-item:hover,
    .row-menu-item:focus-visible {
        background: var(--green-soft);
        outline: none;
    }

    .row-menu-item.is-danger {
        color: var(--danger);
    }

    .row-menu-item.is-danger:hover,
    .row-menu-item.is-danger:focus-visible {
        background: var(--danger-bg);
    }

    .module-tag {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--green-soft);
        color: var(--accent-ink);
        font-size: var(--text-2xs);
        font-weight: 600;
        white-space: nowrap;
    }

    .module-tag.is-muted {
        background: var(--line);
        color: var(--ink-muted);
    }

    /* Chips de sugestão sob um campo do form-modal (as tags de relação): tocar preenche. */
    .form-modal-suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 6px;
    }

    .form-modal-suggestion {
        padding: 2px 10px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface-hover);
        color: var(--ink-muted);
        font-size: var(--text-xs);
        cursor: pointer;
    }

    .form-modal-suggestion:hover {
        color: var(--accent-ink);
        border-color: var(--line-hover);
        background: var(--green-soft);
    }

    /* Tag de relação ("namorada", "mãe"): distinta do grupo — é vínculo pessoal, não pasta. */
    .module-tag.contact-relationship-tag {
        background: var(--accent-soft, var(--green-soft));
        border: 1px solid var(--line);
        font-style: italic;
    }

    /* ---------- carregamento ----------
       Dois estados: o primeiro carregamento (esqueleto nos valores) e as recargas depois de uma
       ação ou filtro (a barra de progresso no alto e as regiões marcadas com data-loading-region
       esmaecem, sem sumir — a pessoa continua vendo o que tinha e sabe que vem coisa nova). */
    .module-progress {
        position: sticky;
        top: 0;
        z-index: 2;
        height: 3px;
        margin: -3px 0 0;
        overflow: hidden;
        border-radius: 3px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 120ms ease;
    }

    .module-progress::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 -40%;
        width: 40%;
        border-radius: inherit;
        background: var(--green);
        animation: module-progress 1.1s ease-in-out infinite;
    }

    .module-main.is-loading .module-progress {
        opacity: 1;
    }

    .module-main.is-loading [data-loading-region] {
        opacity: 0.55;
        pointer-events: none;
        transition: opacity 160ms ease;
    }

    .module-main.is-first-load .module-card-value {
        display: inline-block;
        min-width: 6ch;
        color: transparent;
        border-radius: 6px;
        background: var(--surface-hover);
        animation: profile-skeleton 1.4s ease-in-out infinite;
    }

    @keyframes module-progress {
        0% { left: -40%; }
        100% { left: 100%; }
    }

    @media (prefers-reduced-motion: reduce) {
        .module-progress::before,
        .module-card {
            animation: none;
        }
    }

    @media (max-width: 720px) {
        .module-main {
            width: calc(100% - 24px);
            padding: 20px 0 40px;
            gap: 16px;
        }

        .module-nav-inner {
            width: calc(100% - 24px);
        }

        .module-card {
            padding: 18px;
            border-radius: 14px;
        }

        .module-toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        /* Três tiles empilhados viram uma coluna inteira de números; dois por linha, o primeiro
           (o saldo) sozinho no topo, cabem numa tela sem rolar. */
        .module-tiles {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .module-tiles > .module-tile:first-child:nth-last-child(odd) {
            grid-column: 1 / -1;
        }

        .module-tile {
            padding: 14px 16px;
        }

        .module-tile .module-card-value {
            font-size: var(--text-heading-sm);
        }

        .module-period {
            justify-content: space-between;
        }

        .module-period-label {
            flex: 1;
        }
    }

    @media (pointer: coarse) {
        .module-button,
        .module-input,
        .module-select {
            min-height: 44px;
        }
    }
}

/* ---------- modal de formulário (core/form-modal.ts) ----------
   Base comum dos cadastros de módulo. Campos herdam .finance-field/.contacts-field? Não: têm
   classe própria (.form-modal-field) para nenhum módulo depender do outro. */
@layer components {
    .form-modal {
        display: flex;
        width: min(460px, calc(100vw - 32px));
        max-height: calc(100dvh - 32px);
        flex-direction: column;
        gap: 16px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .form-modal-title {
        margin: 0;
        padding-right: 32px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--text-heading-md);
        font-weight: 600;
    }

    .form-modal-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .form-modal-field {
        display: flex;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: none;
        flex-direction: column;
        gap: 6px;
    }

    /* Campo ocupa a linha inteira; `is-half` põe dois lado a lado (valor + data, nome + sobrenome). */
    .form-modal-field {
        grid-column: 1 / -1;
    }

    /* Selo "veio do Google" (core/origin-badge.ts) ao lado do nome de um item espelhado. Discreto de
       propósito: informa a origem sem competir com o nome. */
    .origin-badge {
        display: inline-block;
        margin-left: 2px;
        padding: 1px 7px;
        border: 1px solid var(--line-control);
        border-radius: 999px;
        font-size: var(--text-2xs);
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0.02em;
        color: var(--ink-muted);
        vertical-align: middle;
        white-space: nowrap;
    }

    .origin-badge-google {
        color: #1a56c4;
        border-color: #b9cdf2;
        background: #eef3fd;
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .origin-badge-google {
            color: #9dbcf5;
            border-color: #2c4677;
            background: #17233b;
        }
    }

    :root[data-theme="dark"] .origin-badge-google {
        color: #9dbcf5;
        border-color: #2c4677;
        background: #17233b;
    }

    /* Controle de data (core/date-picker.ts): texto no idioma + botão de calendário sobreposto à
       direita; o <input type="date"> nativo fica renderizado mas invisível, só para o showPicker. */
    .date-field {
        position: relative;
        width: 100%;
        min-width: 0;
    }

    .date-field > input[type="text"] {
        padding-right: 44px;
    }

    .date-field-button {
        position: absolute;
        top: 50%;
        right: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--ink-muted);
        cursor: pointer;
        transform: translateY(-50%);
    }

    .date-field-button:hover,
    .date-field-button:focus-visible {
        color: var(--ink);
        background: var(--surface-sunken, transparent);
    }

    .date-field-native {
        position: absolute;
        right: 6px;
        bottom: 0;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        border: 0;
        opacity: 0;
        pointer-events: none;
    }

    .form-modal-field.is-half {
        grid-column: auto;
    }

    .form-modal-label {
        padding: 0;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-weight: 650;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .form-modal-field input,
    .form-modal-field select,
    .form-modal-field textarea {
        width: 100%;
        min-height: 42px;
        padding: 10px 14px;
        border: 1px solid var(--line-control);
        border-radius: 10px;
        color: var(--ink);
        background-color: var(--canvas);
        font: inherit;
        transition: border-color 120ms ease;
    }

    .form-modal-field select {
        padding-right: 36px;
    }

    .form-modal-field input:focus-visible,
    .form-modal-field select:focus-visible,
    .form-modal-field textarea:focus-visible {
        outline: none;
        border-color: var(--green);
        box-shadow: 0 0 0 3px var(--green-soft);
    }

    .form-modal-field textarea {
        resize: vertical;
    }

    .form-modal-hint {
        color: var(--ink-muted);
        font-size: var(--text-2xs);
    }

    /* Checkbox único, alinhado à base do campo vizinho (fica ao lado de um input). */
    .form-modal-check-field {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        align-self: end;
        min-height: 42px;
        color: var(--ink);
        font-size: var(--text-sm);
    }

    .form-modal-check-field input {
        width: 16px;
        min-height: 0;
        margin: 0;
        accent-color: var(--green);
    }

    .form-modal-checks {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 14px;
    }

    .form-modal-check {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--ink);
        font-size: var(--text-sm);
    }

    .form-modal-check input {
        width: auto;
        min-height: 0;
        margin: 0;
    }

    .form-modal-phones {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .form-modal-phone-rows {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .form-modal-phone-row {
        display: grid;
        grid-template-columns: minmax(120px, 1.4fr) minmax(90px, 1fr) auto auto auto;
        gap: 6px;
        align-items: center;
    }

    .form-modal-phone-channel {
        min-height: 32px;
        padding: 0 10px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: transparent;
        color: var(--ink-soft);
        font-size: var(--text-xs);
        cursor: pointer;
    }

    .form-modal-phone-channel[aria-pressed="true"].is-whatsapp {
        border-color: var(--green);
        color: var(--green);
        background: color-mix(in srgb, var(--green) 12%, transparent);
    }

    .form-modal-phone-channel[aria-pressed="true"].is-telegram {
        border-color: #2aabee;
        color: #2aabee;
        background: color-mix(in srgb, #2aabee 12%, transparent);
    }

    .form-modal-phone-remove {
        min-height: 32px;
        width: 32px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--ink-soft);
        font-size: var(--text-md);
        cursor: pointer;
    }

    .form-modal-phone-remove:hover {
        color: var(--danger);
    }

    .form-modal-phone-add {
        min-height: 32px;
        padding: 0 12px;
        border: 1px dashed var(--line);
        border-radius: 8px;
        background: transparent;
        color: var(--ink-soft);
        font-size: var(--text-sm);
        cursor: pointer;
    }

    .form-modal-error {
        margin: 0;
        color: var(--danger);
        font-size: var(--text-sm);
    }

    .form-modal-error[hidden] {
        display: none;
    }

    .form-modal-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .form-modal-spacer {
        flex: 1;
    }

    .form-modal-primary,
    .form-modal-secondary,
    .form-modal-danger {
        min-height: 40px;
        padding: 0 18px;
        border-radius: 999px;
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 650;
        cursor: pointer;
    }

    .form-modal-primary {
        border: none;
        color: var(--on-button-primary);
        background: var(--button-primary);
    }

    .form-modal-primary:hover:not(:disabled) {
        background: var(--button-primary-hover);
    }

    .form-modal-secondary {
        border: 1px solid var(--line-control);
        color: var(--ink);
        background: var(--surface);
    }

    .form-modal-danger {
        border: 1px solid transparent;
        color: var(--danger);
        background: transparent;
    }

    .form-modal-danger:hover {
        border-color: var(--danger);
    }

    @media (max-width: 480px) {
        .form-modal-fields {
            grid-template-columns: 1fr;
        }
    }
}

/* ---------- marcas das integrações nativas ----------
   Cada nativa tem dois tons do mesmo matiz (IntegrationMarkPalette), entregues como variáveis
   inline pela própria marca. Aqui só se decide o papel de cada tom: fundo claro e letra escura no
   tema claro; invertido no escuro — o contraste é o mesmo nos dois, e a marca não vira um bloco
   pastel gritando numa tela preta. Vale para o menu Ferramentas, o catálogo do perfil e a marca
   de módulo no cabeçalho; o Google segue com a marca própria (.integration-catalog-logo-google).
   Fica no fim do arquivo de propósito: dentro da mesma layer, a última regra de mesma
   especificidade vence as pinturas verdes genéricas de .integration-tile-logo e afins. */
@layer components {
    .mark-branded {
        --mark-bg: var(--mark-tint);
        --mark-ink: var(--mark-shade);
        border-color: transparent;
        color: var(--mark-ink);
        background: var(--mark-bg);
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .mark-branded {
            --mark-bg: var(--mark-shade);
            --mark-ink: var(--mark-tint);
        }
    }

    :root[data-theme="dark"] .mark-branded {
        --mark-bg: var(--mark-shade);
        --mark-ink: var(--mark-tint);
    }

    /* Nativa desligada não existe hoje, mas se existir a cor esmaece em vez de virar cinza. */
    .integration-tile-managed.is-inactive .mark-branded {
        color: var(--mark-ink);
        background: var(--mark-bg);
        opacity: 0.55;
    }

    /* A marca do módulo no cabeçalho, ao lado da marca do César: menor que a do menu, com um
       separador fino — "César · Fi". */
    .brand-module-divider {
        width: 1px;
        height: 22px;
        background: var(--line-control);
    }

    .brand-module-mark {
        display: grid;
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
        place-items: center;
        border-radius: 8px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.01em;
    }

    @media (max-width: 680px) {
        .brand-module-divider {
            height: 18px;
        }

        .brand-module-mark {
            width: 26px;
            height: 26px;
            font-size: 12px;
        }
    }
}


/* ---------- backoffice ----------
   Área interna: reaproveita a casca dos módulos (module-shell, module-card, module-table) e só
   acrescenta o que não existe lá — a porta de entrada, o menu do canto, o lookup, o diálogo de
   detalhe e a faixa de personificação. Monolíngue e sem tema próprio de propósito: quanto menos
   superfície própria, menos coisa para manter fora do caminho do usuário. */
@layer components {
    .backoffice-header {
        justify-content: space-between;
    }

    /* O atributo hidden precisa vencer os display: grid/flex daqui de baixo. Esta layer vem
       depois da base, então a regra do próprio navegador ([hidden] { display: none }) perde para
       qualquer .backoffice-* que declare display — foi o que deixou o cartão de login sempre na
       tela e o painel do menu sempre aberto. A specificity de .backoffice-shell [hidden] (0,2,0)
       resolve para todos de uma vez, em vez de um [hidden] por componente. */
    .backoffice-shell [hidden],
    .backoffice-menu [hidden],
    .backoffice-dialog [hidden] {
        display: none;
    }


    .backoffice-tag {
        padding: 3px 9px;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* ----- a porta: nada além do cartão de entrar ----- */
    .backoffice-auth {
        display: grid;
        min-height: 62vh;
        place-items: center;
        padding: 24px 0;
    }

    .backoffice-auth-card {
        display: flex;
        width: min(420px, 100%);
        flex-direction: column;
        align-items: center;
        padding: 36px 32px 28px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: var(--surface);
        box-shadow: 0 18px 48px rgb(0 0 0 / 8%);
        text-align: center;
    }

    .backoffice-auth-mark {
        width: 48px;
        height: 48px;
        margin-bottom: 14px;
    }

    .backoffice-auth-title {
        margin: 0;
        font-size: 1.5rem;
        letter-spacing: -0.01em;
    }

    .backoffice-auth-lede {
        margin: 6px 0 22px;
        color: var(--ink-muted);
        font-size: var(--text-sm);
        line-height: 1.5;
    }

    /* O botão do Google é desenhado pelo próprio script deles: aqui só se garante que ele fique
       centrado e não encoste nas bordas do cartão. */
    .backoffice-google {
        display: flex;
        min-height: 44px;
        justify-content: center;
    }

    .backoffice-auth-note {
        width: 100%;
        margin: 22px 0 0;
        padding-top: 16px;
        border-top: 1px solid var(--line);
        color: var(--ink-muted);
        font-size: var(--text-2xs);
    }

    /* ----- identidade: a mesma bolha de iniciais no menu e em cada resultado ----- */
    .backoffice-avatar {
        display: grid;
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
        place-items: center;
        border-radius: 999px;
        background: var(--green-soft);
        color: var(--on-soft-accent);
        font-size: var(--text-2xs);
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .backoffice-avatar-lg {
        width: 36px;
        height: 36px;
        font-size: var(--text-sm);
    }

    /* ----- o menu do canto ----- */
    .backoffice-menu {
        position: relative;
    }

    .backoffice-menu-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 5px 10px 5px 5px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        color: var(--ink);
        cursor: pointer;
        transition: border-color 120ms ease, background 120ms ease;
    }

    .backoffice-menu-button:hover,
    .backoffice-menu.is-open .backoffice-menu-button {
        border-color: var(--line-hover);
        background: var(--surface-hover);
    }

    .backoffice-menu-email {
        max-width: 210px;
        overflow: hidden;
        font-size: var(--text-sm);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .backoffice-menu-chevron {
        color: var(--ink-muted);
        transition: transform 140ms ease;
    }

    .backoffice-menu.is-open .backoffice-menu-chevron {
        transform: rotate(180deg);
    }

    .backoffice-menu-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 40;
        display: flex;
        min-width: 248px;
        flex-direction: column;
        gap: 2px;
        padding: 6px;
        border: 1px solid var(--panel-line);
        border-radius: 14px;
        background: var(--surface-strong);
        box-shadow: 0 16px 40px rgb(0 0 0 / 14%);
    }

    .backoffice-menu-head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 4px;
        padding: 10px;
        border-bottom: 1px solid var(--line);
    }

    .backoffice-menu-identity {
        display: flex;
        min-width: 0;
        flex-direction: column;
    }

    .backoffice-menu-identity-email {
        overflow: hidden;
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .backoffice-menu-item {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border: 0;
        border-radius: 10px;
        background: none;
        color: var(--ink);
        cursor: pointer;
        font: inherit;
        text-align: left;
        text-decoration: none;
    }

    .backoffice-menu-item svg {
        color: var(--ink-muted);
    }

    .backoffice-menu-item:hover {
        background: var(--surface-hover);
    }

    /* A tela em que já se está fica marcada em vez de repetida como se levasse a outro lugar. */
    .backoffice-menu-item[aria-current="page"] {
        background: var(--green-soft);
        color: var(--on-soft-accent);
        font-weight: 600;
    }

    .backoffice-menu-item[aria-current="page"] svg {
        color: currentcolor;
    }

    .backoffice-menu-item.is-danger,
    .backoffice-menu-item.is-danger svg {
        color: #a12d2d;
    }

    .backoffice-menu-separator {
        height: 1px;
        margin: 4px 6px;
        background: var(--line);
    }

    /* ----- personificação em curso ----- */
    .backoffice-active {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 22px;
        padding: 14px 18px;
        border: 1px solid var(--tile-preferred-border);
        border-radius: 16px;
        background: var(--green-soft);
        color: var(--on-soft-accent);
    }

    .backoffice-active-label {
        display: block;
        font-size: var(--text-2xs);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.8;
    }

    .backoffice-active-user {
        margin: 2px 0 0;
        font-size: var(--text-sm);
        overflow-wrap: anywhere;
    }

    .backoffice-active-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ----- o lookup ----- */
    .backoffice-head {
        margin-bottom: 14px;
    }

    .backoffice-picker {
        padding: 18px;
    }

    .backoffice-search {
        width: 100%;
    }

    .backoffice-lookup-results {
        margin: 12px 0 0;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 14px;
        list-style: none;
        overflow: hidden;
    }

    .backoffice-lookup-button {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border: 0;
        border-bottom: 1px solid var(--line);
        background: none;
        color: var(--ink);
        cursor: pointer;
        font: inherit;
        text-align: left;
    }

    .backoffice-lookup-item:last-child .backoffice-lookup-button {
        border-bottom: 0;
    }

    .backoffice-lookup-button:hover:not(:disabled) {
        background: var(--surface-hover);
    }

    .backoffice-lookup-button:disabled {
        cursor: default;
        opacity: 0.6;
    }

    .backoffice-lookup-text {
        display: flex;
        min-width: 0;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .backoffice-lookup-name {
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .backoffice-lookup-email {
        color: var(--ink-muted);
        font-size: var(--text-sm);
        overflow-wrap: anywhere;
    }

    /* Só aparece na linha sob o cursor: dizer "Personificar" em todas as linhas ao mesmo tempo
       transforma a lista num paredão de botões. */
    .backoffice-lookup-action {
        flex: 0 0 auto;
        color: var(--accent-ink);
        font-size: var(--text-sm);
        font-weight: 600;
        opacity: 0;
        transition: opacity 120ms ease;
    }

    .backoffice-lookup-button:hover .backoffice-lookup-action,
    .backoffice-lookup-button:focus-visible .backoffice-lookup-action {
        opacity: 1;
    }

    .backoffice-lookup-hint {
        margin: 10px 2px 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .backoffice-picker-link {
        display: inline-block;
        margin-top: 14px;
        color: var(--accent-ink);
        font-size: var(--text-sm);
    }

    /* ----- grid de usuários ----- */
    .backoffice-users-row {
        cursor: pointer;
    }

    .backoffice-users-row:hover {
        background: var(--surface-hover);
    }

    .backoffice-users-nickname {
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .backoffice-col-actions {
        width: auto;
        white-space: normal;
    }

    .backoffice-badge {
        display: inline-block;
        padding: 2px 8px;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        white-space: nowrap;
    }

    .backoffice-badge.is-active {
        border-color: var(--tile-preferred-border);
        background: var(--green-soft);
        color: var(--on-soft-accent);
    }

    .backoffice-pager {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 12px;
    }

    /* ----- detalhe do usuário ----- */
    .backoffice-dialog {
        width: min(560px, calc(100vw - 32px));
        max-height: 84vh;
        padding: 0;
        border: 1px solid var(--panel-line);
        border-radius: 18px;
        background: var(--surface-strong);
        color: var(--ink);
        overflow: auto;
    }

    .backoffice-dialog::backdrop {
        background: rgb(0 0 0 / 40%);
    }

    .backoffice-dialog-head,
    .backoffice-dialog-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 18px;
    }

    .backoffice-dialog-head {
        border-bottom: 1px solid var(--line);
    }

    .backoffice-dialog-foot {
        justify-content: flex-end;
        border-top: 1px solid var(--line);
    }

    .backoffice-dialog-body {
        padding: 16px 18px;
    }

    .backoffice-dialog-close {
        border: 0;
        background: none;
        color: var(--ink-muted);
        cursor: pointer;
        font-size: 22px;
        line-height: 1;
    }

    .backoffice-fields {
        display: grid;
        gap: 10px 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 18px;
    }

    .backoffice-field {
        display: flex;
        flex-direction: column;
        gap: 2px;
        overflow-wrap: anywhere;
    }

    .backoffice-integrations {
        margin: 8px 0 0;
        padding: 0;
        list-style: none;
    }

    .backoffice-integrations li {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 8px 0;
        border-bottom: 1px solid var(--line);
    }

    .backoffice-integrations li:last-child {
        border-bottom: 0;
    }

    .backoffice-integration-meta {
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .backoffice-integration-title {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    /* A chave técnica do provedor — desambigua conexões que compartilham o nome de exibição. */
    .backoffice-chip {
        padding: 1px 8px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        color: var(--ink-muted);
        font-family: var(--font-mono, ui-monospace, monospace);
        font-size: 11px;
    }

    /* As seções do detalhe respiram entre si; a primeira cola no topo do corpo. */
    .backoffice-dialog-body .module-card-title {
        margin: 18px 0 4px;
    }

    .backoffice-dialog-body .module-card-title:first-child {
        margin-top: 0;
    }

    /* ----- a faixa nas telas do usuário durante a personificação -----
       Fica no topo do fluxo, empurrando a página: uma tarja flutuante cobriria o cabeçalho
       justamente na tela que se foi olhar. */
    .impersonation-banner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 8px 14px;
        border-bottom: 1px solid var(--tile-preferred-border);
        background: var(--green-soft);
        color: var(--on-soft-accent);
        font-size: var(--text-sm);
    }

    .impersonation-banner-link,
    .impersonation-banner-exit {
        padding: 3px 12px;
        border: 1px solid currentcolor;
        border-radius: 999px;
        background: none;
        color: inherit;
        cursor: pointer;
        font: inherit;
        text-decoration: none;
    }

    @media (max-width: 680px) {
        .backoffice-fields {
            grid-template-columns: 1fr;
        }

        .backoffice-menu-email {
            display: none;
        }

        .backoffice-menu-button {
            padding: 5px;
        }

        .backoffice-lookup-action {
            display: none;
        }
    }
}

/* ---------- guia de uso (/guia) ---------- */

@layer components {
    .guide-main {
        width: min(1040px, calc(100% - 40px));
        margin: 0 auto;
        padding: 32px 0 64px;
    }

    .guide-header {
        margin-bottom: 20px;
    }

    .guide-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--ink-muted);
        text-decoration: none;
        font-size: 0.9rem;
        margin-bottom: 18px;
    }

    .guide-back:hover,
    .guide-back:focus-visible {
        color: var(--ink);
    }

    .guide-header h1 {
        margin: 6px 0 10px;
        font-size: clamp(1.5rem, 3vw, 2rem);
    }

    .guide-lede {
        margin: 0;
        color: var(--ink-muted);
        max-width: 46rem;
    }

    .guide-jump {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin: 20px 0 28px;
    }

    .guide-jump-label {
        color: var(--ink-muted);
        font-size: 0.88rem;
        margin-right: 4px;
    }

    .guide-jump-chip {
        display: inline-block;
        padding: 6px 13px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        color: var(--ink);
        font-size: 0.88rem;
        text-decoration: none;
        transition: border-color 120ms ease, background 120ms ease;
    }

    .guide-jump-chip:hover,
    .guide-jump-chip:focus-visible {
        border-color: var(--green);
        background: var(--green-soft);
    }

    /* Colunas, não grid: cada seção tem um número diferente de exemplos, e um grid alinhado por
       linha deixava cada fileira com a altura do cartão mais alto — buracos irregulares. Em
       colunas os cartões empacotam na altura natural, sem buraco, e o navegador decide quantas
       colunas cabem. */
    .guide-grid {
        columns: 21rem;
        column-gap: 16px;
    }

    .guide-card {
        /* O cabeçalho é sticky nesta casca: sem a folga, o salto da âncora esconde o título. */
        scroll-margin-top: 88px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        /* Um cartão partido no meio entre duas colunas é pior que qualquer desalinhamento. */
        break-inside: avoid;
        margin-bottom: 16px;
    }

    .guide-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .guide-card-header h2 {
        margin: 0;
        font-size: 1.1rem;
    }

    .guide-card-mark {
        flex: none;
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: var(--mark-bg, var(--green-soft));
        color: var(--mark-ink, var(--green));
        font-weight: 700;
        font-size: 1rem;
    }

    .guide-card-lede {
        margin: 0;
        color: var(--ink-muted);
        font-size: 0.93rem;
    }

    .guide-prompts {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* O exemplo é um balão de conversa clicável, do lado do usuário — a página ensina
       mostrando como a mensagem vai parecer. Alvo de toque generoso no celular. */
    .guide-prompt {
        display: block;
        padding: 10px 14px;
        border-radius: 14px;
        border-bottom-right-radius: 5px;
        background: var(--user-bubble);
        color: var(--on-user-bubble);
        text-decoration: none;
        font-size: 0.95rem;
        transition: transform 120ms ease, box-shadow 120ms ease;
    }

    .guide-prompt:hover,
    .guide-prompt:focus-visible {
        transform: translateY(-1px);
        box-shadow: var(--shadow-1);
    }

    .guide-prompt-text {
        display: block;
    }

    .guide-prompt-try {
        display: block;
        margin-top: 3px;
        font-size: 0.78rem;
        opacity: 0.78;
    }

    .guide-card-requires {
        margin: 0;
        font-size: 0.85rem;
        border-top: 1px dashed var(--line);
        padding-top: 10px;
    }

    .guide-card-requires a {
        color: var(--ink-muted);
    }

    .guide-card-requires a:hover,
    .guide-card-requires a:focus-visible {
        color: var(--ink);
    }
}

@media (max-width: 640px) {
    .guide-main {
        width: calc(100% - 24px);
        padding: 16px 0 40px;
    }

    .guide-grid {
        columns: 1;
    }
}

/* ---------- Ferramentas → Ligações (/voice) ---------- */
.voice-call-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.voice-call {
    border-bottom: 1px solid var(--line-control);
}

.voice-call:last-child {
    border-bottom: none;
}

.voice-call-summary {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 28px 12px 4px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* A seta diz "isto abre": aponta para baixo fechado, vira para cima aberto. */
.voice-call-summary::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted, #777);
    border-bottom: 2px solid var(--text-muted, #777);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 140ms ease;
}

.voice-call-summary[aria-expanded="true"]::after {
    transform: translateY(-30%) rotate(225deg);
}

.voice-call-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.voice-call-who {
    font-weight: 600;
}

.voice-call-meta {
    font-size: var(--text-sm);
    color: var(--text-muted, #777);
}

.voice-status-noanswer,
.voice-status-failed {
    opacity: 0.75;
}

/* O detalhe é visivelmente DENTRO da ligação: contêiner recuado com fundo próprio, não um bloco
   solto abaixo do cartão. A transcrição fica atrás do disclosure ali dentro. */
.voice-call-detail {
    margin: 0 4px 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface-hover);
    border-radius: 12px;
}

.voice-call-outcome {
    margin: 0;
}

.voice-call-agreed-list {
    margin: 4px 0 0;
    padding-left: 18px;
}

.voice-call-audio {
    width: 100%;
    max-width: 420px;
}

/* A transcrição como conversa: disclosure nativo + balões por falante. César fala na cor da
   casa (à direita, como "nosso lado"); quem atendeu fica neutro à esquerda. O nome aparece em
   todo turno — cor nunca é o único sinal (acessibilidade), e no celular os balões ocupam até
   85% da largura, sem scroll horizontal. */
.voice-call-transcript {
    border-top: 1px solid var(--line-control);
    padding-top: 10px;
}

.voice-call-transcript-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    padding: 4px 0;
}

.voice-call-transcript-toggle::-webkit-details-marker {
    display: none;
}

/* Mesma seta do cartão: display:flex no summary mata o triângulo nativo do <details>. */
.voice-call-transcript-toggle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text-muted, #777);
    border-bottom: 2px solid var(--text-muted, #777);
    transform: rotate(-45deg);
    transition: transform 140ms ease;
    flex: 0 0 auto;
}

.voice-call-transcript[open] .voice-call-transcript-toggle::before {
    transform: rotate(45deg);
}

.voice-call-transcript-toggle:focus-visible {
    outline: 2px solid var(--green, #0f4d32);
    outline-offset: 2px;
    border-radius: 6px;
}

.voice-call-transcript-count {
    font-weight: 400;
    font-size: var(--text-sm);
    color: var(--text-muted, #777);
}

.voice-transcript {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.voice-turn {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    max-width: 85%;
}

.voice-turn.is-cesar {
    align-self: flex-end;
    align-items: flex-end;
}

.voice-turn-role {
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted, #777);
    padding: 0 6px;
}

.voice-turn-bubble {
    margin: 0;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: var(--text-sm);
    line-height: 1.45;
    overflow-wrap: anywhere;
    background: var(--surface-hover);
    color: inherit;
    border-bottom-left-radius: 4px;
}

.voice-turn.is-cesar .voice-turn-bubble {
    background: var(--user-bubble);
    color: var(--on-user-bubble);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    .voice-call-transcript[open] .voice-transcript {
        animation: voice-transcript-in 160ms ease-out;
    }
}

@keyframes voice-transcript-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

/* ── voice.call: o cartão do desfecho de uma ligação ─────────────────────────── */
.voice-call { display: flex; flex-direction: column; gap: 0.75rem; }
.voice-call-header { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.voice-call-icon { font-size: 1.25rem; }
.voice-call-identity { display: flex; flex-direction: column; min-width: 0; }
.voice-call-who { font-weight: 600; }
.voice-call-phone { font-size: 0.8rem; color: var(--text-muted, #667085); }
.voice-call-meta { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.voice-call-status { font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; }
.voice-call-status.is-completed { background: #e6f4ea; color: #1e6b3a; }
.voice-call-status.is-noanswer { background: #fff4e5; color: #8a5300; }
.voice-call-status.is-failed { background: #fdecec; color: #a12622; }
.voice-call-duration { font-size: 0.8rem; color: var(--text-muted, #667085); }
.voice-call-summary { margin: 0; }
.voice-call-reason { color: #a12622; }
.voice-call-goal { font-size: 0.85rem; color: var(--text-muted, #667085); }
.voice-call-section-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #667085); }
.voice-call-agreed-list { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.voice-call-agreed-list li { margin: 0.15rem 0; }
.voice-call-lines { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.voice-call-line { display: flex; flex-direction: column; max-width: 85%; }
.voice-call-line.is-cesar { align-self: flex-start; }
.voice-call-line.is-other { align-self: flex-end; align-items: flex-end; }
.voice-call-speaker { font-size: 0.72rem; font-weight: 600; color: var(--text-muted, #667085); margin-bottom: 0.15rem; }
.voice-call-bubble { margin: 0; padding: 0.5rem 0.75rem; border-radius: 0.9rem; line-height: 1.4; }
.voice-call-line.is-cesar .voice-call-bubble { background: var(--bubble-assistant, #eef2ff); border-bottom-left-radius: 0.25rem; }
.voice-call-line.is-other .voice-call-bubble { background: var(--bubble-user, #f2f4f7); border-bottom-right-radius: 0.25rem; }
.voice-call-toggle { align-self: flex-start; margin-top: 0.35rem; background: none; border: none; padding: 0.25rem 0; color: var(--link, #3538cd); font: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: underline; }
.voice-call-toggle:focus-visible { outline: 2px solid var(--link, #3538cd); outline-offset: 2px; }