/*
 * 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 and contrast enhancements */
.close-btn:focus-visible,
.drawer-close:focus-visible,
.hdb-notif-close:focus-visible,
.hdb-loc-modal-close:focus-visible,
.app-modal-close:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.app-modal-close {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-mode="light"] .app-modal-close {
    border-color: rgba(0, 0, 0, 0.18) !important;
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.06) !important;
}


/* ═══════════════════════════════════════════════════════════════
   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;
}

/* Central Orb Light Mode Contrast */
[data-mode="light"] .agent-orb-slide-title {
    color: #0f172a !important;
}

[data-mode="light"] .agent-orb-sub-text,
[data-mode="light"] .agent-orb-main-value {
    color: #1e293b !important;
}

[data-mode="light"] .hdb-suggestion-btn {
    color: #1e293b !important;
    background: rgba(255, 255, 255, 0.65) !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 {
    /* ── Unified z-index scale (EPIC 3, 2026-05-17) ── */
    --z-behind:          -1;   /* декоративные слои за контентом */
    --z-base:             1;   /* явный in-flow stacking */
    --z-sticky:         100;   /* topbar, hub-tabs, мобильная bottom-nav */
    --z-topbar:         100;   /* алиас: .topbar */
    --z-dropdown:       200;   /* выпадашки, popover, пикеры, FAB */
    --z-drawer-backdrop:150;   /* затемнение под drawer/sidebar */
    --z-drawer-overlay: 150;   /* алиас для совместимости */
    --z-drawer:         160;   /* выезжающий drawer */
    --z-modal-backdrop: 2000;  /* затемнение под модалкой */
    --z-modal-overlay:  2999;  /* алиас: overlay непосредственно под модалкой */
    --z-modal:          3000;  /* модальное окно */
    --z-system:         3000;  /* алиас: system-level modals */
    --z-popover:        3100;  /* popover поверх модалки */
    --z-banner:         4000;  /* PWA install banner, lightbox */
    --z-pwa:            4000;  /* алиас: .pwa-banner */
    --z-toast:          5000;  /* тосты / снэкбары */
    --z-overlay:        5000;  /* алиас: .family-toast, legacy usage */
    --z-auth:           5500;  /* auth-gate — самый верх */
}


/* ═══════════════════════════════════════════════════════════════
   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;
}


/* ═══════════════════════════════════════════════════════════════
   P3 SEO/A11Y — Screen-Reader-Only Utility
   Визуально скрывает элемент, но оставляет для screen-readers.
   Используется для динамического <h1> в SPA.
   ═══════════════════════════════════════════════════════════════ */

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


/* ═══════════════════════════════════════════════════════════════
   P4 TECH DEBT — Icon Sizing Helpers
   Заменяют inline style="font-size:Npx" на Material Icons
   ═══════════════════════════════════════════════════════════════ */

.icon-xs { font-size: 14px !important; }
.icon-sm { font-size: 16px !important; }
.icon-md { font-size: 18px !important; }


/* ═══════════════════════════════════════════════════════════════
   P4 TECH DEBT — Chat Header Balance Wrap
   Рефакторинг из inline style в index.html (строка 333)
   ═══════════════════════════════════════════════════════════════ */

.header-balance-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 99px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    transition: all 0.2s;
}

.header-balance-wrap .material-symbols-outlined {
    font-size: 16px;
    color: var(--primary-color);
}


/* ═══════════════════════════════════════════════════════════════
   P4 TECH DEBT — Chat Header Beta Badge
   Рефакторинг из inline style в index.html (строка 338)
   ═══════════════════════════════════════════════════════════════ */

.beta-badge-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--accent-gradient);
    color: white;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    cursor: default;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    transition: all 0.2s;
    white-space: nowrap;
}

.beta-badge-wrap .material-symbols-outlined {
    font-size: 14px;
}


/* ═══════════════════════════════════════════════════════════════
   DEAD CODE REGISTRY — CLEARED 2026-05-15
   ───────────────────────────────────────────────────────────────
   Следующие мёртвые CSS-селекторы старого sidebar были удалены
   из styles.css:
   
   ✓ .logo, .logo-icon, .logo-text (old sidebar logo)
   ✓ .sidebar responsive rules (768px media query)
   ✓ .sidebar-section-title
   ✓ html:not([data-mode="light"]) .sidebar (ambient glow)
   ✓ .sidebar mobile overlay (.sidebar, .sidebar-overlay)
   ✓ .sidebar glass background
   ✓ [data-mode="light"] .sidebar, .sidebar-header, .sidebar-footer
   ✓ [data-mode="light"] .sidebar-section-title (duplicated)
   
   Оставлено: [data-mode="light"] .sidebar-hamburger-btn — используется
   в settings.css (SM_TabsAndStyles.js).
   
   Удалено: ~120 строк dead CSS из styles.css.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   P5 INTERACTIVITY — Agent Orb Clickable Feedback
   ═══════════════════════════════════════════════════════════════ */

/* Делаем сам круг визуально интерактивным */
.agent-orb-container,
.agent-orb {
    touch-action: pan-y; /* Разрешаем вертикальную прокрутку, но предотвращаем горизонтальный скролл браузером для плавной обработки swipe жестов */
}

.agent-orb[data-orb-action="go-to-chat"] {
    cursor: pointer;
}

.agent-orb[data-orb-action="go-to-chat"]:hover {
    border-color: rgba(var(--primary-rgb), 0.4);
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.45),
        0 0 50px rgba(var(--primary-rgb), 0.2),
        inset 0 0 80px rgba(255, 255, 255, 0.04);
    transform: scale(1.015);
}

.agent-orb[data-orb-action="go-to-chat"]:active {
    transform: scale(0.985);
    transition: transform 0.1s;
}

/* Улучшенный Glow под орбом (Item 9 из аудита) */
.agent-orb::before {
    inset: -60px !important;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.18) 0%, transparent 70%) !important;
    opacity: 0.8;
}

.agent-orb:hover::before {
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.25) 0%, transparent 70%) !important;
    opacity: 1;
}

/* Анимированные переходы слайдов (Item 11 из аудита) */
.agent-orb-slide {
    transform: translateY(12px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.agent-orb-slide.active {
    transform: translateY(0);
}

/* Стилизация настроения агента (Item 6 из аудита) */
.agent-orb-mood-pill {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Улучшенный разделитель (Item 10 из аудита) */
.agent-orb-divider {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 30%, rgba(255,255,255,0.25) 70%, transparent 100%) !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

/* Индикаторы слайдов теперь выглядят кликабельными */
.agent-orb-dot {
    cursor: pointer;
    width: 6px !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease;
}

.agent-orb-dot:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.3);
}

.agent-orb-dot.active {
    background: var(--primary-color) !important;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.5);
}

[data-mode="light"] .agent-orb[data-orb-action="go-to-chat"]:hover {
    background: rgba(255, 255, 255, 0.90) !important;
    border-color: rgba(var(--primary-rgb), 0.3) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
}

[data-mode="light"] .agent-orb-mood-pill {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
    color: #1e293b;
}


/* ═══════════════════════════════════════════════════════════════
   P3 UI POLISH — Reusable Loading Skeleton (2026-05-15)
   Единый shimmer-скелетон для списков. Анимация гасится глобальным
   @media (prefers-reduced-motion: reduce) выше.
   ═══════════════════════════════════════════════════════════════ */

.app-skeleton {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.09) 50%,
        rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: app-skeleton-shimmer 1.5s infinite linear;
    border-radius: var(--radius-sm);
}

[data-mode="light"] .app-skeleton {
    background: linear-gradient(90deg,
        rgba(15, 23, 42, 0.05) 25%,
        rgba(15, 23, 42, 0.10) 50%,
        rgba(15, 23, 42, 0.05) 75%);
    background-size: 200% 100%;
}

@keyframes app-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Скелетон-строка списка (карточка задачи / участника) */
.app-skeleton-row {
    height: 56px;
    margin-bottom: 10px;
}

.app-skeleton-list {
    padding: 4px 0;
}

/* TC-03: Family Space Empty State Tip Block */
.family-empty-tip {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 16px;
    padding: 16px 20px;
    text-align: left;
    margin: 24px auto 32px;
    max-width: 440px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13.5px;
    line-height: 1.5;
    color: #cbd5e1;
}

.family-empty-tip-title {
    color: #fff;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

[data-mode="light"] .family-empty-tip {
    background: rgba(99, 102, 241, 0.05) !important;
    border-color: rgba(99, 102, 241, 0.15) !important;
    color: #475569 !important;
}

[data-mode="light"] .family-empty-tip-title {
    color: #0f172a !important;
}

/* TC-03: Family Radar Widget Styling Alignment */
.family-radar-widget-wrapper .card-family-radar {
    background: var(--glass-panel-bg) !important;
    border: 1px solid var(--glass-panel-border) !important;
    border-radius: var(--glass-modal-radius) !important;
    padding: 24px !important;
    backdrop-filter: var(--glass-panel-blur) !important;
    -webkit-backdrop-filter: var(--glass-panel-blur) !important;
    box-shadow: var(--glass-panel-shadow) !important;
}

.family-radar-widget-wrapper .card-family-radar:hover {
    background: var(--glass-panel-bg-hover) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: var(--glass-panel-shadow-hover) !important;
}

[data-mode="light"] .family-radar-widget-wrapper .card-family-radar {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
}

[data-mode="light"] .family-radar-widget-wrapper .card-family-radar .htm-now-title {
    color: #0f172a !important;
}

[data-mode="light"] .family-radar-widget-wrapper .card-family-radar .htm-radar-summary {
    color: #334155 !important;
}

[data-mode="light"] .family-radar-widget-wrapper .card-family-radar .htm-radar-member-item {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-mode="light"] .family-radar-widget-wrapper .card-family-radar .htm-radar-member-item span {
    color: #0f172a !important;
}

/* TC-04: Chat Interface Quick Actions Chip Overflow & Scroll Fade */
@media (max-width: 768px) {
    .suggestion-chips {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding: 8px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        mask-image: linear-gradient(to right, transparent, white 16px, white calc(100% - 16px), transparent) !important;
        -webkit-mask-image: linear-gradient(to right, transparent, white 16px, white calc(100% - 16px), transparent) !important;
    }
    
    .suggestion-chips::-webkit-scrollbar {
        display: none !important;
    }

    .suggestion-chips .chip {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}