/* =====================================================================
   base.css — tokens, acessibilidade e componentes globais da Lucy.
   Carregado DEPOIS do CSS de cada página: aqui só entram regras que
   devem valer em todas as telas (foco, movimento reduzido, leitor de
   tela, paleta de comandos, agrupamento da sidebar).
   ===================================================================== */

:root {
    /* Verde da marca escurecido: branco sobre #0b7a5f = 5.3:1 (WCAG AA).
       O #0b7a5f original dava 3.2:1 e reprovava em texto pequeno. */
    --primary-color: #0b7a5f;
    --primary-hover: #096b52;
    --lucy-focus: #2563eb;
    --lucy-radius: 10px;
    --lucy-radius-lg: 14px;
    --lucy-gap: 12px;
    --lucy-shadow: 0 18px 48px rgba(0, 0, 0, .22);
    --lucy-z-palette: 3000;
    --lucy-z-skip: 4000;
}

/* Foco visível de verdade em todos os controles (só para teclado). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--lucy-focus);
    outline-offset: 2px;
}

/* Botões que eram <div onclick> continuam com cara de item de menu. */
button.nav-item,
a.nav-item {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
}

/* Área de toque confortável no celular. */
@media (pointer: coarse) {
    .icon-btn { min-width: 42px; min-height: 42px; }
    .chat-list-item { min-height: 42px; }
}

/* Conteúdo só para leitores de tela. */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* "Pular para a conversa" — aparece ao apertar Tab. */
.lucy-skip-link {
    position: fixed;
    top: -100px;
    left: 12px;
    z-index: var(--lucy-z-skip);
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--primary-color);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: top .15s ease;
}
.lucy-skip-link:focus { top: 12px; }

/* Quem prefere menos movimento não recebe animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Títulos de período na lista de conversas (Hoje, Ontem, ...). */
.chat-group-title {
    margin: 12px 0 4px;
    padding-left: 12px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: .85;
}
.chat-group-title:first-child { margin-top: 4px; }

.chats-empty {
    margin: 8px 12px;
    padding: 14px 12px;
    border: 1px dashed var(--border-color, #d4d4d8);
    border-radius: 10px;
    color: var(--text-secondary, #565869);
    font-size: .82rem;
    line-height: 1.45;
    text-align: center;
}

/* Esqueleto de carregamento (lista de conversas). */
.lucy-skeleton {
    position: relative;
    overflow: hidden;
    height: 34px;
    margin: 4px 6px;
    border-radius: 8px;
    background: var(--hover-bg, rgba(127, 127, 127, .12));
}
.lucy-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(127, 127, 127, .18), transparent);
    animation: lucySkeleton 1.4s infinite;
}
@keyframes lucySkeleton { to { transform: translateX(100%); } }

/* Aviso de "sem conexão" no topo do chat. */
.lucy-offline-banner {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2500;
    padding: 9px 16px;
    border-radius: 999px;
    background: #7c2d12;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    box-shadow: var(--lucy-shadow);
}
.lucy-offline-banner[hidden] { display: none; }

/* ===================== Paleta de comandos (Ctrl/Cmd+K) ===================== */
.lucy-palette {
    position: fixed;
    inset: 0;
    z-index: var(--lucy-z-palette);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 24px;
}
.lucy-palette[hidden] { display: none; }
.lucy-palette-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    animation: lucyPaletteFade .12s ease-out;
}
.lucy-palette-dialog {
    position: relative;
    width: min(620px, 100%);
    max-height: min(70vh, 560px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: var(--lucy-radius-lg);
    background: var(--card-bg, #fff);
    color: var(--text-primary, #202123);
    box-shadow: var(--lucy-shadow);
    animation: lucyPaletteIn .14s ease-out;
}
.lucy-palette-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color, #e5e5e5);
}
.lucy-palette-search > i { color: var(--text-secondary, #565869); }
.lucy-palette-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1rem;
}
.lucy-palette-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    overscroll-behavior: contain;
}
.lucy-palette-section {
    padding: 8px 10px 4px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary, #565869);
}
.lucy-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.lucy-palette-item i {
    width: 20px;
    text-align: center;
    color: var(--text-secondary, #565869);
}
.lucy-palette-item[aria-selected="true"],
.lucy-palette-item:hover {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}
.lucy-palette-item[aria-selected="true"] i { color: var(--primary-color); }
.lucy-palette-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lucy-palette-item-hint {
    flex: 0 0 auto;
    font-size: .72rem;
    color: var(--text-secondary, #565869);
}
.lucy-palette-empty {
    padding: 26px 16px;
    text-align: center;
    color: var(--text-secondary, #565869);
    font-size: .9rem;
}
.lucy-palette-footer {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding: 9px 14px;
    border-top: 1px solid var(--border-color, #e5e5e5);
    font-size: .72rem;
    color: var(--text-secondary, #565869);
}
.lucy-palette kbd {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid var(--border-color, #d4d4d8);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--hover-bg, rgba(127, 127, 127, .1));
    font-family: inherit;
    font-size: .7rem;
    line-height: 1.5;
}
.dark-theme .lucy-palette-dialog {
    background: #1f2125;
    border-color: #3a3d42;
}
.dark-theme .lucy-palette-search,
.dark-theme .lucy-palette-footer { border-color: #3a3d42; }
@media (max-width: 600px) {
    .lucy-palette { padding: 8vh 10px 16px; }
    .lucy-palette-dialog { max-height: 78vh; }
    .lucy-palette-footer { display: none; }
}

@keyframes lucyPaletteIn {
    from { opacity: 0; transform: translateY(-8px) scale(.99); }
    to { opacity: 1; transform: none; }
}
@keyframes lucyPaletteFade { from { opacity: 0; } to { opacity: 1; } }

body.lucy-palette-open { overflow: hidden; }