/**
 * Mirror App — Visibility System
 * ==============================
 * The single source of truth for which view is on screen.
 *
 * WHAT THIS REPLACED
 * ------------------
 * This file used to hold a CROSS-PRODUCT. Every mode block named every OTHER view
 * in order to hide it:
 *
 *     body.chat-mode .dashboard-view,
 *     body.chat-mode #documents-view,
 *     body.chat-mode .blog-writer-view,
 *     body.chat-mode #external-service-view   { display: none; }
 *
 *     body.documents-mode .dashboard-view,
 *     body.documents-mode .chat-view-wrapper,
 *     ...and so on, once per mode.
 *
 * With 5 views that is 20 hide-selectors. It grows as N x (N-1): ten more services,
 * as planned, means about 210 hand-written selectors — and every one of them has to
 * be remembered, or you get the classic bug where switching to the new service
 * leaves the old one painted underneath it.
 *
 * It is also a list that has been WRONG before: every blog rule in this file used to
 * target `.blog-view-wrapper`, a class that exists in no template. All of it was
 * dead, and blog visibility worked only because JS happened to toggle `.is-hidden`.
 * Nothing detected that for months, because a cross-product is exactly the kind of
 * thing nobody proof-reads.
 *
 * THE RULE NOW
 * ------------
 * A view is hidden unless it is the current one. That is one rule, it is O(1), and
 * ADDING A SERVICE NEEDS NO CSS AT ALL:
 *
 *     [data-view-content]                    { display: none; }
 *     [data-view-content].is-current-view    { display: flex; }
 *
 * Every view root already carries `data-view-content` (dashboard_view, chat_view,
 * _editor, external_service_view). workspace.js sets `.is-current-view` on exactly
 * one of them, derived from the registry — so the CSS never needs to learn the list.
 *
 * `.is-hidden` remains the highest authority and is unchanged: a view that is
 * current but explicitly hidden stays hidden.
 *
 * LOAD ORDER: design-system.css -> workspace-tokens.css -> visibility-system.css -> workspace.css
 */

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

/**
 * Universal hidden class — the highest visibility authority in the product.
 * Specificity (0,2,1) + !important, so it beats every rule below.
 * To show something, REMOVE this class. Never try to out-specify it.
 */
html body .is-hidden,
html body [hidden] {
    display: none !important;
}

/* ============================================================================
   2. THE VIEW STATE MACHINE — one rule, not a cross-product
   ============================================================================ */

/* Every view is off by default. */
[data-view-content] {
    display: none;
}

/* Exactly one view carries .is-current-view, set by workspace.js from the registry.
   This single rule replaces the entire N x (N-1) hide matrix. */
[data-view-content].is-current-view {
    display: flex;
}

/* --- The one genuine exception -------------------------------------------------
   Chat lays out as a block on desktop (its internal grid depends on it) and as a
   column flex on mobile. Every other view is a plain flex container. This is a
   property of CHAT, not of the state machine, so it is one targeted override rather
   than a per-mode rule — and a new service still needs zero CSS.

   Note chat and chat-history are two MODES that share ONE view root. That is why the
   registry stores `view` separately from `id`: the mapping is data, not an
   assumption that mode == element.
   ------------------------------------------------------------------------------ */
[data-view-content="chat"].is-current-view {
    display: block;
}

@media screen and (max-width: 1024px) {
    [data-view-content="chat"].is-current-view {
        display: flex;
        flex-direction: column;
    }
}

/* ============================================================================
   3. .is-hidden ON VIEW ROOTS
   ============================================================================
   Kept explicit for the elements JS toggles directly (chat history, the chat main
   pane). The universal rule above already covers them, but these document the
   intent and cost nothing.
   ============================================================================ */

body .chat-main.is-hidden,
body #sessions-content.is-hidden,
body .top-mode-toggle-container.is-hidden {
    display: none;
}

/* ============================================================================
   4. MOBILE ELEMENT VISIBILITY
   ============================================================================
   The single source of truth for mobile-only toggles.
   ============================================================================ */

.mobile-menu-toggle,
.doc-mobile-menu-toggle,
.chat-mobile-menu-toggle,
.pull-to-refresh,
.sidebar-toggle {
    display: none;
}

@media screen and (max-width: 1024px) {
    .mobile-menu-toggle,
    .doc-mobile-menu-toggle,
    .chat-mobile-menu-toggle {
        display: flex;
    }
}