/*
 * ux-fixes.css — UI/UX Pro Max Audit Fixes
 * 2026-05-14
 * 
 * Все исправления из UI-аудита собраны здесь,
 * чтобы не модифицировать защищённые файлы.
 * 
 * P1 — Critical: focus-visible, touch targets, glass contrast
 * P2 — High:     prefers-reduced-motion, z-index, labels
 * P3 — Medium:   chip cursors, duplicate cleanup
 */

/* ═══════════════════════════════════════════════════════════════
   P1 CRITICAL — Focus-Visible States
   ═══════════════════════════════════════════════════════════════ */

/* Глобальный сброс — убираем дефолтный outline, ставим наш */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Навигация — topbar */
.topbar-nav-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.08);
}

/* Навигация — bottom nav */
.bottom-nav-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    border-radius: 8px;
}

/* Навигация — drawer */
.drawer-nav-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    border-radius: 10px;
}

/* Кнопки topbar */
.topbar-hamburger:focus-visible,
.topbar-theme-btn:focus-visible,
.topbar-avatar:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Dropdown items */
.topbar-dd-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    background: var(--hover-bg);
}

/* Кнопки ввода (send, attach) */
.send-btn:focus-visible,
.attach-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Чат-input */
#messageInput:focus-visible {
    outline: none; /* уже есть border-color change через :focus-within */
}

/* Кнопки действий на дашборде */
.hdb-btn-primary:focus-visible,
.hdb-btn-secondary:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Skill pills */
.hdb-skill-pill:focus-visible,
.chat-skill-pill:focus-visible,
.glass-chip:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
}

/* Карточки дашборда — кликабельные */
.hdb-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Модальные кнопки */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.auth-login-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.2);
}

/* Chat items */
.chat-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* Timeline interactive elements */
.hdb-tl-add-btn:focus-visible,
.hdb-tl-delete:focus-visible,
.hdb-tl-bell:focus-visible,
.hdb-tl-task:focus-visible,
.hdb-tl-view-btn:focus-visible,
.hdb-cal-nav-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

/* Family member cards */
.hdb-member-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Close buttons */
.close-btn:focus-visible,
.drawer-close:focus-visible,
.hdb-notif-close:focus-visible,
.hdb-loc-modal-close:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   P1 CRITICAL — Touch Targets (≥44×44px)
   ═══════════════════════════════════════════════════════════════ */

/* Inline new chat button — was 24×24 */
.new-chat-inline-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
}

/* Timeline action buttons — were 28×28 */
.hdb-tl-delete {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.hdb-tl-view-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

.hdb-tl-add-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
}

/* Calendar nav buttons — were 28×28 */
.hdb-cal-nav-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
}

/* Whisper items — ensure 44px minimum height */
.hdb-whisper-item {
    min-height: 44px;
    padding: 10px 14px;
}


/* ═══════════════════════════════════════════════════════════════
   P1 CRITICAL — Glass Panel Contrast
   Гарантирует читаемость текста независимо от фоновой фотографии
   ═══════════════════════════════════════════════════════════════ */

/* Минимальный непрозрачный фон для панелей с текстом */
.hdb-card {
    background: rgba(10, 10, 20, 0.55);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
}

[data-mode="light"] .hdb-card {
    background: rgba(255, 255, 255, 0.72) !important;
}

/* Усиление контраста для card-titles — было #94a3b8, стало светлее */
.hdb-card-title {
    color: #cbd5e1;
}

[data-mode="light"] .hdb-card-title {
    color: #334155 !important;
}

/* Section labels */
.hdb-section-label {
    color: #94a3b8;
}

[data-mode="light"] .hdb-section-label {
    color: #475569 !important;
}

/* Whisper items — усиленный фон */
.hdb-whisper-item {
    background: rgba(10, 10, 20, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, 0.92);
}

[data-mode="light"] .hdb-whisper-item {
    background: rgba(255, 255, 255, 0.65) !important;
    color: #0f172a !important;
}

/* Whisper label — усиление */
.hdb-whisper-label {
    color: rgba(255, 255, 255, 0.85);
}

[data-mode="light"] .hdb-whisper-label {
    color: #334155 !important;
}

/* Orb status text — усиление */
.hdb-orb-zone {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Input footer disclaimer — было #475569, стало читаемее */
.input-footer span {
    color: #94a3b8;
}

[data-mode="light"] .input-footer span {
    color: #64748b !important;
}


/* ═══════════════════════════════════════════════════════════════
   P2 HIGH — prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════ */

@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;
    }
}


/* ═══════════════════════════════════════════════════════════════
   P2 HIGH — Unified z-index Scale
   Перечисляем переменные, но НЕ переопределяем существующие значения,
   чтобы не сломать порядок. Используем для новых компонентов.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --z-base: 1;
    --z-sticky: 10;        /* sticky headers, floating elements */
    --z-topbar: 100;       /* .topbar */
    --z-drawer-overlay: 150; /* .drawer-overlay */
    --z-drawer: 160;       /* .drawer */
    --z-dropdown: 200;     /* .topbar-dropdown */
    --z-modal: 1000;       /* .modal */
    --z-overlay: 2000;     /* .glass-overlay */
    --z-system: 3000;      /* .file-picker-modal, .hdb-loc-modal */
    --z-toast: 5000;       /* toast notifications */
}


/* ═══════════════════════════════════════════════════════════════
   P2 HIGH — Unified Label Typography Token
   ═══════════════════════════════════════════════════════════════ */

:root {
    --label-size: 11px;
    --label-weight: 700;
    --label-color: #94a3b8;
    --label-color-light: #475569;
    --label-spacing: 0.08em;
    --label-transform: uppercase;
}

/* Применяем ко всем label-подобным элементам */
.hdb-card-title,
.hdb-section-label,
.hdb-skill-pills-label {
    font-size: var(--label-size);
    font-weight: var(--label-weight);
    letter-spacing: var(--label-spacing);
    text-transform: var(--label-transform);
}


/* ═══════════════════════════════════════════════════════════════
   P3 MEDIUM — Welcome Chips: cursor + hover
   Chips с data-prompt являются кнопками — должны выглядеть интерактивно
   ═══════════════════════════════════════════════════════════════ */

.chip[data-prompt] {
    cursor: pointer;
}

.chip[data-prompt]:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(var(--primary-rgb), 0.35);
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}

.chip[data-prompt]:active {
    transform: scale(0.97);
}

[data-mode="light"] .chip[data-prompt]:hover {
    background: rgba(var(--primary-rgb), 0.08) !important;
    border-color: rgba(var(--primary-rgb), 0.3) !important;
    color: var(--primary-color) !important;
}


/* ═══════════════════════════════════════════════════════════════
   P3 MEDIUM — Quick Action cards cursor pointer
   ═══════════════════════════════════════════════════════════════ */

.hdb-suggestion-btn {
    cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════
   P4 LOW — Dead Sidebar Code Override
   Sidebar rules в @media (max-width: 768px) больше не нужны,
   но мы не удаляем их из styles.css (protected). 
   Просто убеждаемся, что drawer стили приоритетнее.
   ═══════════════════════════════════════════════════════════════ */

/* Нет действий — sidebar rules уже безвредны */