*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   TEMA E ESCALA
   ───────────────────────────────────────────────────────────
   Paleta de saturacao baixa: azuis e cinzas acinzentados, sem
   neon e sem gradiente colorido. Cor muito saturada em area
   grande cansa a vista, e o publico desta plataforma passa
   tempo lendo a tela.

   Todo texto foi escolhido para ficar acima de 4.5:1 de
   contraste sobre o proprio fundo (criterio AA da WCAG), nos
   dois temas.

   O tema vive no atributo data-theme do <html>, escrito pelo
   JavaScript antes da pagina aparecer. O padrao segue o
   sistema operacional da pessoa.
═══════════════════════════════════════════════════════════ */
:root {
    /* Claro (padrao) */
    --bg:           #f4f3f0;
    --bg2:          #eceae5;
    --bg3:          #e3e0da;
    --surface:      #ffffff;
    --surface2:     #f0eeea;
    --border:       #dbd7d0;
    --border2:      #c3beb5;
    --text:         #23262a;
    --text-muted:   #565c63;
    --text-faint:   #6f757c;
    --accent:       #3a6a8a;
    --accent-hover: #2f5872;
    --accent-soft:  #e6eef3;
    --accent-glow:  rgba(58,106,138,0.15);
    --on-accent:    #ffffff;
    --danger:       #9c4038;
    --danger-hover: #83352e;
    --success:      #3c6b4c;

    --radius-sm:    10px;
    --radius:       16px;
    --radius-lg:    22px;
    --shadow:       0 8px 32px rgba(30,32,36,0.16);
    --shadow-sm:    0 2px 10px rgba(30,32,36,0.10);
    --font-display: 'DM Sans', system-ui, sans-serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
    --sidebar-w:    280px;
    --sidebar-rail: 76px;
    --topbar-h:     68px;
    --transition:   0.18s ease;
}

:root[data-theme="dark"] {
    --bg:           #191b1e;
    --bg2:          #202226;
    --bg3:          #272a2f;
    --surface:      #24272b;
    --surface2:     #2e3238;
    --border:       #363a40;
    --border2:      #474c53;
    --text:         #e3e5e8;
    --text-muted:   #aab1b8;
    --text-faint:   #8b9198;
    --accent:       #83a9c6;
    --accent-hover: #9cbcd4;
    --accent-soft:  #2a343c;
    --accent-glow:  rgba(131,169,198,0.20);
    --on-accent:    #14181b;
    --danger:       #d99089;
    --danger-hover: #e8a49d;
    --success:      #8fbf9f;
    --shadow:       0 8px 32px rgba(0,0,0,0.45);
    --shadow-sm:    0 2px 10px rgba(0,0,0,0.32);
}

/* Base grande: o corpo inteiro do site e dimensionado em rem, entao esta
   linha e o unico lugar que decide o tamanho das letras. O JavaScript troca
   este valor quando a pessoa (ou a Aisha) pede letras maiores. */
html { font-size: 1.125rem; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--border2); }

/* ═══════════════════════════════════════════════════════════
   LOGIN / REGISTER
═══════════════════════════════════════════════════════════ */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, var(--bg2) 0%, transparent 70%),
        var(--bg);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    box-shadow: var(--shadow);
    animation: fadeUp 0.4s ease both;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.auth-brand-logo {
    width: 36px;
    height: 36px;
    background: var(--accent);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.auth-brand-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.3px;
}

.auth-card h1 {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

.auth-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 28px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.form-group { margin-bottom: 18px; }

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: var(--accent);
    background: var(--surface2);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

input::placeholder { color: var(--text-faint); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    width: 100%;
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-sm);
    margin-top: 8px;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--text);
}

.btn-danger {
    background: var(--danger);
    color: var(--on-accent);
    padding: 9px 16px;
    font-size: 0.85rem;
}

.btn-danger:hover {
    background: var(--danger-hover);
    transform: translateY(-1px);
}

.btn-ghost {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border2);
    padding: 9px 16px;
    font-size: 0.85rem;
}

.btn-ghost:hover {
    background: var(--surface2);
    color: var(--text);
    text-decoration: none;
}

.error-msg {
    color: #fca5a5;
    font-size: 0.85rem;
    margin-top: 6px;
    display: block;
}

.success-msg {
    color: var(--success);
    font-size: 0.85rem;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--accent-soft);
    border: 1px solid var(--success);
    border-radius: var(--radius-sm);
}

.auth-footer {
    margin-top: 22px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.auth-footer a { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL (HOME, SOBRE, CONTATO)
═══════════════════════════════════════════════════════════ */
.app-layout {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* ─── SIDEBAR ────────────────────────────────────────────── */
/* A barra lateral fica recolhida num trilho de icones e se abre sozinha
   quando o ponteiro chega perto — ninguem precisa acertar um botao para
   ver as conversas. Ela abre POR CIMA do conteudo (position: fixed) em vez
   de empurra-lo: reflow a cada passagem do mouse faria o texto do chat
   dancar na tela.

   :focus-within entra junto para quem navega por teclado: o Tab abre a
   barra do mesmo jeito que o mouse. */
.sidebar {
    width: var(--sidebar-rail);
    flex-shrink: 0;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--bg2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    transition: width var(--transition), transform var(--transition);
    z-index: 20;
}

@media (hover: hover) and (min-width: 769px) {
    .sidebar:hover,
    .sidebar:focus-within {
        width: var(--sidebar-w);
        box-shadow: var(--shadow);
    }

    /* Textos somem no trilho, mas continuam no DOM: escondidos por largura
       zero, e nao por display:none, para a transicao ser suave. */
    .sidebar .brand-name,
    .sidebar .brand-badge,
    .sidebar .nav-item span:not(.nav-icon),
    .sidebar .sidebar-section-title,
    .sidebar .conversations-list,
    .sidebar .user-info,
    .sidebar .btn-new-chat-label {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.12s ease;
        white-space: nowrap;
    }

    .sidebar:hover .brand-name,
    .sidebar:hover .brand-badge,
    .sidebar:hover .nav-item span:not(.nav-icon),
    .sidebar:hover .sidebar-section-title,
    .sidebar:hover .conversations-list,
    .sidebar:hover .user-info,
    .sidebar:hover .btn-new-chat-label,
    .sidebar:focus-within .brand-name,
    .sidebar:focus-within .brand-badge,
    .sidebar:focus-within .nav-item span:not(.nav-icon),
    .sidebar:focus-within .sidebar-section-title,
    .sidebar:focus-within .conversations-list,
    .sidebar:focus-within .user-info,
    .sidebar:focus-within .btn-new-chat-label {
        opacity: 1;
        pointer-events: auto;
    }

    /* O conteudo reserva a largura do trilho, nunca a da barra aberta. */
    .main-content { margin-left: var(--sidebar-rail); }
}

.sidebar-header {
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-logo {
    width: 32px;
    height: 32px;
    background: var(--accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.3px;
}

.brand-badge {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid var(--border2);
    padding: 2px 7px;
    border-radius: 99px;
    margin-left: auto;
}

.sidebar-nav {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.nav-item:hover {
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}

.nav-item.active {
    background: var(--accent-glow);
    color: var(--accent);
}

.nav-icon { font-size: 1rem; width: 20px; text-align: center; }

.sidebar-section-title {
    padding: 14px 12px 6px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-faint);
}

.btn-new-chat {
    margin: 12px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: var(--surface);
    border: 1px dashed var(--border2);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-new-chat:hover {
    background: var(--surface2);
    color: var(--text);
    border-color: var(--accent);
    text-decoration: none;
}

/* A lista de conversas e quem cresce e rola: e o conteudo que nao tem
   tamanho previsivel. min-height:0 e o que permite encolher dentro do flex
   da sidebar — sem ele o navegador respeita o tamanho do conteudo e a lista
   empurra o rodape (usuario e botao de sair) para fora da tela. */
.conversations-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conversation-item {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    line-height: 1.4;
    /* Titulos sao a primeira frase do usuario: cabem em uma linha ou viram "…" */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item:hover {
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}

.conversation-item.active {
    background: var(--accent-glow);
    color: var(--accent);
}

.conversations-empty {
    padding: 6px 12px;
    font-size: 0.85rem;
    color: var(--text-faint);
}

/* As sugestoes viraram a secao secundaria: teto proprio para nao disputar
   espaco com a lista de conversas. */
.sidebar-footer {
    padding: 12px 10px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--on-accent);
    flex-shrink: 0;
}

.user-info { flex: 1; min-width: 0; }

.user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ─── MAIN CONTENT AREA ──────────────────────────────────── */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ─── TOPBAR ─────────────────────────────────────────────── */
.topbar {
    height: var(--topbar-h);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    /* Cor do tema, e nao um cinza-escuro fixo: no tema claro a barra do topo
       ficava preta sobre a pagina clara. */
    background: var(--bg2);
    flex-shrink: 0;
    gap: 16px;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    border: none;
    background: none;
    border-radius: 8px;
    transition: var(--transition);
}

.hamburger:hover { background: var(--surface); }

.hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-muted);
    border-radius: 2px;
    transition: var(--transition);
}

.topbar-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.2px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logout-form { margin: 0; }

/* ─── PAGE BODY ──────────────────────────────────────────── */
.page-body {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

/* ═══════════════════════════════════════════════════════════
   CHAT PAGE
═══════════════════════════════════════════════════════════ */
.chat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.chat-welcome {
    text-align: center;
    padding: 60px 24px 30px;
}

.chat-welcome-icon {
    width: 56px;
    height: 56px;
    background: var(--accent);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.625rem;
    margin: 0 auto 18px;
    box-shadow: var(--shadow-sm);
}

.chat-welcome h2 {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.chat-welcome p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.message {
    display: flex;
    gap: 12px;
    animation: fadeUp 0.25s ease both;
    max-width: 800px;
}

.message.user { flex-direction: row-reverse; align-self: flex-end; }
.message.bot  { align-self: flex-start; }

.msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.message.bot .msg-avatar {
    background: var(--accent);
}

.message.user .msg-avatar {
    background: var(--surface2);
}

.msg-bubble {
    padding: 12px 16px;
    overflow-wrap: anywhere;
    border-radius: var(--radius);
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: calc(100% - 44px);
}

.message.bot .msg-bubble {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-bottom-left-radius: 4px;
    color: var(--text);
}

.message.user .msg-bubble {
    background: var(--accent);
    color: var(--on-accent);
    border-bottom-right-radius: 4px;
    box-shadow: var(--shadow-sm);
}

.chat-status-bar {
    padding: 0 24px 8px;
    min-height: 24px;
}

#chat-status {
    font-size: 0.85rem;
    color: var(--text-muted);
}

#chat-status.chat-error { color: var(--danger); font-weight: 500; }

/* ── Barra de escrita ────────────────────────────────────────
   Problemas do desenho anterior, todos corrigidos aqui:
   era um <input> de uma linha so, entao um texto mais longo
   rolava lateralmente e a pessoa perdia de vista o que ja
   tinha escrito; o campo tinha 24px de altura util e alvo de
   toque pequeno demais; e o botao de enviar era um quadrado
   de 38px com uma seta, sem dizer o que fazia.

   Agora e um <textarea> que cresce sozinho ate cinco linhas,
   com alvo de toque grande e botao rotulado. */
.input-wrapper {
    padding: 16px 24px 22px;
    background: var(--bg2);
    border-top: 1px solid var(--border);
}

.input-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    max-width: 820px;
    margin: 0 auto;
    background: var(--surface);
    border: 2px solid var(--border2);
    border-radius: var(--radius);
    padding: 10px 10px 10px 18px;
    transition: var(--transition);
}

.input-row:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

#message-input {
    flex: 1;
    background: none;
    border: none;
    padding: 10px 0;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.5;
    outline: none;
    resize: none;
    overflow-y: auto;
    /* Uma linha de altura inicial; o JavaScript cresce ate o teto abaixo. */
    height: 2.6rem;
    max-height: 8rem;
}

#message-input::placeholder { color: var(--text-faint); }

#send-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 2.9rem;
    padding: 0 20px;
    border-radius: 12px;
    background: var(--accent);
    border: none;
    color: var(--on-accent);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

#send-btn:hover:not(:disabled) { background: var(--accent-hover); }

#send-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.input-hint {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-faint);
    margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════
   SOBRE PAGE
═══════════════════════════════════════════════════════════ */
.page-header {
    margin-bottom: 36px;
}

.page-tag {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid var(--border2);
    padding: 4px 12px;
    border-radius: 99px;
    margin-bottom: 14px;
}

.page-title {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -1px;
    line-height: 1.15;
    margin-bottom: 12px;
}

.page-desc {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 540px;
    line-height: 1.7;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 32px;
}

.about-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    transition: var(--transition);
}

.about-card:hover {
    border-color: var(--border2);
    background: var(--surface);
    transform: translateY(-2px);
}

.about-card-icon {
    font-size: 1.75rem;
    margin-bottom: 14px;
    display: block;
}

.about-card h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}

.about-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.tech-stack {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 32px;
}

.tech-stack h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 18px;
    letter-spacing: -0.3px;
}

.tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tech-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
    transition: var(--transition);
}

.tech-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.tech-pill span { font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════
   CONTATO PAGE
═══════════════════════════════════════════════════════════ */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 32px;
    max-width: 900px;
}

.contact-info h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 14px;
    letter-spacing: -0.3px;
}

.contact-info p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 24px;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.95rem;
    transition: var(--transition);
    text-decoration: none;
}

.contact-link:hover {
    border-color: var(--accent);
    color: var(--text);
    text-decoration: none;
}

.contact-link-icon { font-size: 1.125rem; }

.contact-form {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
}

.contact-form h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 22px;
    letter-spacing: -0.3px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    resize: vertical;
    min-height: 110px;
    transition: var(--transition);
}

textarea:focus {
    border-color: var(--accent);
    background: var(--surface2);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

textarea::placeholder { color: var(--text-faint); }

.btn-send-form {
    width: 100%;
    margin-top: 4px;
    padding: 13px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.btn-send-form:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════
   OVERLAY (mobile sidebar)
═══════════════════════════════════════════════════════════ */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 19;
    backdrop-filter: blur(4px);
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   CONTROLES DA BARRA SUPERIOR (tema e tamanho das letras)
═══════════════════════════════════════════════════════════ */
.topbar-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Alvo de toque de 44px: a medida que as diretrizes de acessibilidade
   recomendam para quem tem menos firmeza no toque ou no clique. */
.icon-btn {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border2);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--transition);
}

.icon-btn:hover { background: var(--surface2); border-color: var(--accent); }

.icon-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.icon-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* O icone mostra o DESTINO do clique: no tema claro aparece a lua (vai
   escurecer), no escuro aparece o sol. */
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun  { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

/* ═══════════════════════════════════════════════════════════
   CONFIGURACOES
═══════════════════════════════════════════════════════════ */
.settings-layout {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.settings-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 26px 30px;
    box-shadow: var(--shadow-sm);
}

.settings-card h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: 6px;
    color: var(--text);
}

.settings-card .settings-help {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 22px;
}

.settings-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.settings-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

.settings-identity-email {
    color: var(--text-muted);
    font-size: 0.95rem;
    word-break: break-all;
}

.settings-readonly {
    display: block;
    padding: 12px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 1rem;
}

.settings-note {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-faint);
}

/* ═══════════════════════════════════════════════════════════
   FOCO VISIVEL
   Navegar por teclado precisa mostrar onde se esta. O anel usa
   a cor de destaque do tema, entao aparece nos dois modos.
═══════════════════════════════════════════════════════════ */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVO
   ───────────────────────────────────────────────────────────
   Este bloco fica no FIM do arquivo de proposito. Regra dentro
   de media query nao vence regra escrita depois dela com a
   mesma especificidade — com o bloco no meio, tudo que viesse
   abaixo passava por cima dos ajustes de tela pequena.

   Os cortes seguem o que muda no uso, nao numeros redondos:
   existe ponteiro ou nao, cabe uma coluna de leitura ou nao,
   sobra altura ou nao.
═══════════════════════════════════════════════════════════ */

/* ── Telas largas: a conversa vira uma coluna centralizada ──
   Numa tela de 27 polegadas, as mensagens ficavam grudadas nas
   bordas opostas e o olho tinha de varrer a mesa inteira para
   acompanhar. O padding lateral cresce sozinho e mantem a
   coluna no centro, sem tirar a barra de rolagem da borda. */
@media (min-width: 1400px) {
    .messages-area {
        padding-left: max(24px, calc((100% - 62rem) / 2));
        padding-right: max(24px, calc((100% - 62rem) / 2));
    }

    .chat-welcome { padding-top: 80px; }
}

/* ── Sem ponteiro (tablet e celular, em qualquer largura) ──
   Sem mouse nao ha "passar o mouse": a barra volta a ser um
   menu que abre pelo botao. */
@media (hover: none) {
    .hamburger { display: flex; }

    .sidebar {
        width: var(--sidebar-w);
        transform: translateX(-100%);
        box-shadow: var(--shadow);
    }

    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }
    .main-content { margin-left: 0; }
}

/* ── Notebook estreito e tablet deitado ── */
@media (max-width: 1100px) {
    .page-body { padding: 24px 20px; }
    .topbar { padding: 0 18px; }
}

@media (max-width: 900px) {
    /* Duas colunas em 900px deixam cada uma com menos de 40 caracteres por
       linha: melhor empilhar. */
    .about-grid { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}

/* ── Celular ── */
@media (max-width: 768px) {
    .hamburger { display: flex; }

    .sidebar {
        width: var(--sidebar-w);
        transform: translateX(-100%);
        box-shadow: var(--shadow);
    }

    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }
    .main-content { margin-left: 0; }

    .topbar {
        padding: 0 14px;
        gap: 10px;
    }

    /* O nome da pagina cede espaco aos botoes, mas nao some: vira reticencias. */
    .topbar-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-body { padding: 20px 16px; }
    .page-title { font-size: 1.625rem; }

    .messages-area { padding: 16px 14px; }
    .message { max-width: 100%; }

    .input-wrapper { padding: 12px 14px 16px; }
    .input-row { padding: 8px 8px 8px 14px; }

    .chat-welcome { padding: 30px 16px 20px; }
    .chat-welcome h2 { font-size: 1.25rem; }

    .settings-card { padding: 20px 18px 24px; }
    .settings-identity { gap: 12px; }
    .settings-avatar { width: 52px; height: 52px; font-size: 1.25rem; }
}

/* ── Celular estreito ──
   Aqui o topo nao cabe mais com titulo e botoes juntos. Some o
   titulo, e nao os controles: o titulo repete o que a tela ja
   mostra, enquanto tema e "Sair" nao tem outro caminho. */
@media (max-width: 480px) {
    .topbar-title { display: none; }

    .auth-card { padding: 28px 20px; }

    /* Botao de enviar sem rotulo ganharia ambiguidade; o que encolhe e a
       folga em volta dele. */
    #send-btn { padding: 0 14px; }

    .msg-avatar { width: 28px; height: 28px; }
    .msg-bubble { max-width: calc(100% - 40px); }

    .input-hint { font-size: 0.8rem; }
}

/* ── Celular deitado ──
   Pouca altura: o teclado ocupa metade da tela e sobra uma faixa
   para a conversa. Tudo que e enfeite vertical encolhe. */
@media (max-height: 520px) and (orientation: landscape) {
    .topbar { height: 52px; }
    .chat-welcome { padding: 16px 16px 10px; }
    .chat-welcome-icon { display: none; }
    .input-wrapper { padding: 8px 14px 10px; }
    .input-hint { display: none; }
    #message-input { max-height: 4rem; }
}

/* ── Quem pediu menos movimento no sistema ──
   Animacao de entrada e transicao viram nada. Para parte das
   pessoas isso nao e preferencia estetica: movimento na tela
   provoca enjoo e tontura. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}