/**
 * Mirror App - Visibility System
 * ==============================
 * Single source of truth for all visibility controls.
 *
 * This file consolidates all view visibility rules that were previously
 * scattered across workspace.css with !important declarations.
 *
 * ARCHITECTURE:
 * - Uses specificity hierarchy instead of !important
 * - Body mode classes control which view is visible
 * - .is-hidden class can override any view state
 *
 * LOAD ORDER: design-system.css -> visibility-system.css -> workspace.css
 *
 * MODE CLASSES:
 * - body (no mode class)            -> Dashboard visible
 * - body.chat-mode                  -> Chat view visible
 * - body.chat-history-mode          -> Chat history visible
 * - body.documents-mode             -> Documents view visible
 * - body.blog-mode                  -> Blog view visible
 * - body.external-service-mode      -> External service iframe visible (compliance, etc.)
 */

/* ============================================================================
   1. BASE VISIBILITY UTILITIES
   ============================================================================ */

/**
 * Universal hidden class
 * Specificity: (0, 2, 1) - higher than most element selectors
 * This allows .is-hidden to override mode-based visibility
 */
html body .is-hidden,
html body [hidden] {
    display: none !important;
}

/* ============================================================================
   2. VIEW VISIBILITY STATE MACHINE
   ============================================================================

   DEFAULT STATE: Dashboard visible, all feature views hidden

   The workspace uses body classes to control view visibility.
   Using specificity hierarchy instead of !important ensures:
   - .is-hidden can always override
   - Future additions don't need !important
   - Easier debugging and maintenance
   ============================================================================ */

/* --- DEFAULT STATE (No mode class on body) --- */
.dashboard-view {
    display: flex;
}

.chat-view-wrapper,
#documents-view,
.blog-view-wrapper,
#external-service-view {
    display: none;
}

/* --- CHAT MODE --- */
body.chat-mode .dashboard-view,
body.chat-mode #documents-view,
body.chat-mode .blog-view-wrapper,
body.chat-mode #external-service-view {
    display: none;
}

body.chat-mode .chat-view-wrapper {
    display: block;
}

/* Mobile/tablet: chat-view-wrapper needs display: flex for proper layout */
@media screen and (max-width: 1024px) {
    body.chat-mode .chat-view-wrapper {
        display: flex;
        flex-direction: column;
    }
}

/* --- CHAT HISTORY MODE --- */
body.chat-history-mode .dashboard-view,
body.chat-history-mode #documents-view,
body.chat-history-mode .blog-view-wrapper,
body.chat-history-mode #external-service-view {
    display: none;
}

body.chat-history-mode .chat-view-wrapper {
    display: block;
}

/* Mobile/tablet: chat-view-wrapper needs display: flex for proper layout */
@media screen and (max-width: 1024px) {
    body.chat-history-mode .chat-view-wrapper {
        display: flex;
        flex-direction: column;
    }
}

/* --- DOCUMENTS MODE --- */
body.documents-mode .dashboard-view,
body.documents-mode .chat-view-wrapper,
body.documents-mode .blog-view-wrapper,
body.documents-mode #external-service-view {
    display: none;
}

body.documents-mode #documents-view {
    display: flex;
}

/* --- BLOG MODE --- */
body.blog-mode .dashboard-view,
body.blog-mode .chat-view-wrapper,
body.blog-mode #documents-view,
body.blog-mode #external-service-view {
    display: none;
}

body.blog-mode .blog-view-wrapper {
    display: flex;
}

/* --- EXTERNAL SERVICE MODE --- */
body.external-service-mode .dashboard-view,
body.external-service-mode .chat-view-wrapper,
body.external-service-mode #documents-view,
body.external-service-mode .blog-view-wrapper {
    display: none;
}

body.external-service-mode #external-service-view {
    display: flex;
}

/* ============================================================================
   3. ELEMENT-SPECIFIC .is-hidden OVERRIDES
   ============================================================================

   These rules ensure .is-hidden works on specific elements regardless of
   the current body mode. Higher specificity (0, 2, 1) beats mode rules (0, 1, 1).
   ============================================================================ */

/* Chat elements */
body .chat-view-wrapper.is-hidden {
    display: none;
}

body .chat-sidebar.is-hidden {
    display: none;
}

body .chat-main.is-hidden {
    display: none;
}

body #sessions-content.is-hidden {
    display: none;
}

/* Documents elements */
body #documents-view.is-hidden {
    display: none;
}

/* Blog elements */
body .blog-view-wrapper.is-hidden {
    display: none;
}

/* External service elements */
body #external-service-view.is-hidden {
    display: none;
}

/* Mode toggle container */
body .top-mode-toggle-container.is-hidden {
    display: none;
}

/* ============================================================================
   4. MOBILE ELEMENT VISIBILITY
   ============================================================================

   Mobile-only elements should be hidden on desktop, shown on mobile.
   This is the single source of truth for mobile toggle visibility.
   ============================================================================ */

/* Hide mobile elements by default (desktop) */
.mobile-menu-toggle,
.doc-mobile-menu-toggle,
.chat-mobile-menu-toggle,
.pull-to-refresh,
.sidebar-toggle {
    display: none;
}

/* Show mobile elements on mobile/tablet screens */
@media screen and (max-width: 1024px) {
    .mobile-menu-toggle,
    .doc-mobile-menu-toggle,
    .chat-mobile-menu-toggle {
        display: flex;
    }
}

/* ============================================================================
   5. SIDEBAR COLLAPSED STATE VISIBILITY
   ============================================================================

   When sidebar is collapsed, certain elements are hidden.
   These rules work with body.sidebar-collapsed class.
   ============================================================================ */

/* Hide text elements when sidebar is collapsed */
body.sidebar-collapsed .chat-sidebar .nav-section-title,
body.sidebar-collapsed .chat-sidebar .nav-item span,
body.sidebar-collapsed .chat-sidebar .new-chat-btn span,
body.sidebar-collapsed .chat-sidebar .sidebar-sessions-title,
body.sidebar-collapsed .chat-sidebar .chat-title,
body.sidebar-collapsed .chat-sidebar .chat-preview,
body.sidebar-collapsed .chat-sidebar .chat-time,
body.sidebar-collapsed .chat-sidebar .chat-message-count,
body.sidebar-collapsed .chat-sidebar .chat-item-header,
body.sidebar-collapsed .chat-sidebar .chat-item-footer {
    display: none;
}

body.sidebar-collapsed .chat-sidebar .chat-actions {
    display: none;
}

/* Show elements on hover when collapsed */
body.sidebar-collapsed .chat-sidebar:hover .nav-section-title,
body.sidebar-collapsed .chat-sidebar:hover .nav-item span,
body.sidebar-collapsed .chat-sidebar:hover .new-chat-btn span,
body.sidebar-collapsed .chat-sidebar:hover .sidebar-sessions-title,
body.sidebar-collapsed .chat-sidebar:hover .chat-title,
body.sidebar-collapsed .chat-sidebar:hover .chat-preview,
body.sidebar-collapsed .chat-sidebar:hover .chat-time,
body.sidebar-collapsed .chat-sidebar:hover .chat-message-count,
body.sidebar-collapsed .chat-sidebar:hover .chat-item-header,
body.sidebar-collapsed .chat-sidebar:hover .chat-item-footer {
    display: block;
}

body.sidebar-collapsed .chat-sidebar:hover .chat-actions {
    display: flex;
}