/* ============================================
   FOCUS MODE v4.0 — SIMPLE
   
   Минимальный CSS. Вся анимация через JS
   element.animate() — не нужны transitions/keyframes
   ============================================ */

/* Settled state — после анимации */
.fm-gone {
    display: none !important;
}

.fm-compact {
    gap: 8px !important;
    padding: 10px 12px !important;
    margin-top: calc(env(safe-area-inset-top, 20px) + 44px) !important;
    margin-bottom: 16px !important;
    overflow: visible !important;
}

.fm-compact .autocomplete-dropdown {
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.fm-active label {
    color: var(--accent-primary, #667eea) !important;
}

.fm-header-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.fm-bar-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.fm-hero-hide:not(.hero-collapsed) {
    display: none !important;
}

@keyframes fm-success {
    0%   { border-color: #34c759; box-shadow: 0 0 0 0 rgba(52,199,89,0.4); }
    50%  { box-shadow: 0 0 0 6px rgba(52,199,89,0); }
    100% { border-color: rgba(255,255,255,0.2); box-shadow: none; }
}
.fm-success {
    animation: fm-success 0.5s ease forwards !important;
}

/* Hide room selector in focus mode */
.fm-compact #roomSelectorSection {
    display: none !important;
}