/* ===================================================================
 * Simini mobile responsive overrides (rewritten 2026-04-19)
 * -------------------------------------------------------------------
 * Layered on top of every page's own styles. Targets the ACTUAL DOM
 * selectors in chat.html / model_viewer.html / landing.html rather
 * than generic class guesses.
 *
 * Breakpoints:
 *   ≤ 768px — phone / tablet portrait
 *   ≤ 480px — phone portrait
 *
 * Ground rules:
 *   - All rules inside @media, never break desktop
 *   - Use high-specificity selectors + !important to beat inline styles
 *   - 16px input font to prevent iOS zoom-on-focus
 *   - 44x44 min tap target (WCAG 2.5.5)
 *   - Use safe-area-inset-bottom for iPhone notch
 * =================================================================== */

/* =========================================================
 * GLOBAL  (≤ 768px)
 * ========================================================= */
@media (max-width: 768px) {
    html, body {
        -webkit-text-size-adjust: 100%;
        overflow-x: hidden;
        max-width: 100vw;
    }
    img, video, canvas { max-width: 100%; height: auto; }

    /* Prevent any element from creating horizontal scroll */
    *, *::before, *::after { box-sizing: border-box; }

    /* Form inputs: 16px font prevents iOS zoom-on-focus */
    input[type=text], input[type=email], input[type=password],
    input[type=search], input[type=number], textarea, select {
        font-size: 16px !important;
    }
}

/* =========================================================
 * LANDING  (/, landing.html, index.html, home.html)
 * Single-column hero + stacked sections
 * ========================================================= */
@media (max-width: 768px) {
    .hero, .hero-section, .hero-container {
        flex-direction: column !important;
        text-align: center;
        padding: 32px 16px !important;
    }
    .hero h1, .hero-section h1 { font-size: 28px !important; line-height: 1.2; }
    .hero h2, .hero-section h2 { font-size: 20px !important; }
    .hero p, .hero-section p { font-size: 15px !important; line-height: 1.55; }

    /* Logo row — trim "→ Simulation" decorator on narrow viewports */
    .logo-arrow, .logo-arrow-text, .logo-tagline { display: none !important; }

    /* Generic grids collapse to 1-column */
    .grid, .feature-grid, .pricing-grid, .template-grid,
    .two-col, .three-col, .four-col {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .cta, .cta-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100%;
    }
    .cta a, .cta button, .cta-buttons a, .cta-buttons button {
        width: 100% !important;
        display: block;
    }
}

/* =========================================================
 * LOGIN / SIGNUP
 * ========================================================= */
@media (max-width: 768px) {
    .login-container, .signup-container, .auth-container,
    #loginForm, #signupForm {
        width: 100% !important;
        max-width: 440px !important;
        margin: 0 auto !important;
        padding: 20px 18px !important;
        box-sizing: border-box !important;
    }
    .login-form, .signup-form {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .login-form input, .signup-form input,
    #loginForm input, #signupForm input {
        width: 100% !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }
    .login-form button[type=submit], .signup-form button[type=submit],
    #loginForm button[type=submit], #signupForm button[type=submit] {
        width: 100% !important;
        min-height: 48px !important;
    }
}

/* =========================================================
 * CHAT PAGE  (chat.html)
 * DOM structure:
 *   <.sidebar[.collapsed]>
 *   <.workspace>
 *     <.header>      <- top bar: logo + search + avatar
 *     <.chat-area>
 *       <#chatWelcomeHeader>
 *       <.chat-messages>
 *     <.chat-input-area>
 * ========================================================= */
@media (max-width: 768px) {
    /* ── Sidebar: collapsed = fully hidden; expanded = slide-in drawer ── */
    .sidebar.collapsed {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        border-right: none !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }
    .sidebar:not(.collapsed) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 86vw !important;
        max-width: 320px !important;
        height: 100vh !important;
        z-index: 9500 !important;
        visibility: visible !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45);
    }

    /* ── Floating hamburger: always visible top-left, not trapped inside sidebar ── */
    .sidebar-toggle-btn, #sidebarToggle {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        width: 40px !important;
        height: 40px !important;
        z-index: 9600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(15, 23, 42, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
        visibility: visible !important;
    }
    .sidebar.collapsed .sidebar-toggle-btn,
    .sidebar.collapsed #sidebarToggle {
        /* Keep it visible even when its parent sidebar is hidden */
        visibility: visible !important;
    }

    /* ── Workspace fills full screen when sidebar hidden ── */
    .workspace, #workspace {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
    }

    /* ── Top bar: hide search, tighten logo, add left padding for hamburger ── */
    .header {
        padding: 8px 12px 8px 56px !important;   /* 56px left = hamburger */
        min-height: 52px !important;
        gap: 8px !important;
    }
    .header .search-bar {
        display: none !important;           /* not enough room on phones */
    }
    .header-title {
        min-width: 0 !important;
        flex: 1 !important;
        overflow: hidden !important;
    }
    .header-title > div {
        gap: 6px !important;
    }
    /* Shrink the Simini logo size */
    .header-title svg.variant-star {
        width: 24px !important;
        height: 24px !important;
    }
    .header-title [style*="font-size: 22px"] {
        font-size: 17px !important;
    }

    /* ── Chat area ── */
    .chat-area, #chatArea {
        padding: 12px !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        min-height: calc(100vh - 52px - 72px) !important;   /* header + input */
    }

    /* ── Welcome header (centered hero) ── */
    #chatWelcomeHeader {
        position: static !important;
        transform: none !important;
        padding: 32px 16px 16px !important;
        text-align: center !important;
    }
    #chatWelcomeHeader h1 { font-size: 24px !important; }
    #chatWelcomeHeader > div { font-size: 18px !important; }

    /* ── Chat messages list ── */
    .chat-messages, #chatMessages {
        padding: 8px !important;
    }
    .message, .chat-message {
        max-width: 95% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* ── Input bar: sticky bottom with safe-area ── */
    .chat-input-area, #chatInputArea {
        padding: 8px 12px !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
    .chat-input-area textarea, #chatInput {
        font-size: 16px !important;
        min-height: 40px !important;
        padding: 10px 12px !important;
        /* Make sure the placeholder text fits — grow the textarea width */
        width: 100% !important;
        min-width: 0 !important;
    }
    /* The chat-input-area container has logo + attach + send on either side
       of textarea. Flex-1 on the middle slot so placeholder isn't clipped. */
    .chat-input-area > .input-container,
    .chat-input-area > .chat-input-wrapper,
    .chat-input-area > .input-wrapper,
    .chat-input-area > form {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    /* Make the textarea actually take remaining width when siblings are
       buttons — the parent may be inline-flex which doesn't stretch kids. */
    .chat-input-area .input-container #chatInput {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    /* Shrink siblings so the textarea has ~300px instead of ~220px —
       'Describe your simulation...' then fits on one line. */
    .chat-input-area .input-container {
        gap: 4px !important;
        padding: 4px !important;
    }
    #genaiStartButton, .genai-start-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        padding: 4px !important;
        margin-right: 4px !important;
    }
    #genaiStartButton .genai-sparkle-star,
    .genai-start-btn .genai-sparkle-star {
        width: 16px !important;
        height: 16px !important;
    }
    .attachment-btn, #sendButton {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        padding: 4px !important;
    }
    .attachment-btn svg, #sendButton svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* ── Content panel (2D/3D model view) = full screen overlay ── */
    .content-panel, #contentPanel {
        width: 100vw !important;
        max-width: 100vw !important;
        top: 52px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-left: none !important;
    }
    .workspace.content-panel-visible .chat-area {
        width: 100% !important;
        max-width: 100% !important;
    }
    .content-panel iframe,
    .content-panel > div[id*="threeD"],
    .content-panel > div[id*="Viewer"] {
        width: 100% !important;
        height: 100% !important;
    }

    /* ── LLM warning banner: tighten width so it doesn't overflow ── */
    #llmWarningBanner {
        max-width: calc(100vw - 24px) !important;
        left: 12px !important;
        right: 12px !important;
        transform: none !important;
    }
}

/* =========================================================
 * MODEL VIEWER  (model_viewer.html)
 * DOM:
 *   <header>          — top: title + stats chips + tab bar
 *   <aside.toolbar>   — LEFT: component library (QUEUE/SERVER/...)
 *   <aside.right-panel> — RIGHT: metadata / settings / AI
 *   <main>            — flowchart canvas
 *   floating: Ask Sora bar, property snippet, dynamic island
 *
 * On mobile: hide toolbar (no drag-drop), stack right-panel below
 * canvas, hide the persistent Sora chat (redundant with main chat).
 * ========================================================= */
@media (max-width: 768px) {
    /* Hide the component-library toolbar — can't drag on touch anyway */
    aside.toolbar {
        display: none !important;
    }

    /* Right panel: stack below canvas, full-width, scrollable */
    aside.right-panel {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 40vh !important;
        overflow-y: auto !important;
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* Main canvas area fills width when toolbar is hidden */
    main, .canvas-container, .flowchart-container {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        min-height: 55vh !important;
    }

    /* 3D canvas: full viewport width */
    .three-d-overlay, #threeDOverlay, .model-viewer-3d,
    canvas[data-engine="three.js"] {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Tab bar (2D/3D/Code/Data) scrolls horizontally if it overflows */
    .main-tab-bar, .tab-bar, .content-tabs, .chat-tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .main-tab-bar::-webkit-scrollbar,
    .tab-bar::-webkit-scrollbar { display: none; }

    /* Dynamic island shrinks but stays centered */
    .dynamic-island {
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: 94vw !important;
        font-size: 12px !important;
    }

    /* Floating cards (stats, metadata, AI) never overflow viewport */
    #statsPanel, .stats-panel, .property-panel-floating,
    .panel.floating, .card.floating {
        max-width: calc(100vw - 16px) !important;
        box-sizing: border-box !important;
    }

    /* Sora persistent chat at the bottom: hide on mobile (main chat exists) */
    .sora-chat, #soraChat, .ask-sora-bar, .sora-input-bar,
    .chat-preview, .chat-input-container {
        display: none !important;
    }

    /* Model title + stats header: stack vertically */
    header > .model-title-row,
    header > .model-stats-row {
        flex-direction: column !important;
        gap: 6px !important;
        align-items: flex-start !important;
    }
}

/* =========================================================
 * FLOWCHART EDITOR (iframed ReactFlow)
 * ========================================================= */
@media (max-width: 768px) {
    iframe[src*="flowchart-editor"] {
        width: 100% !important;
        min-height: 55vh !important;
    }
    .react-flow__minimap { display: none !important; }
    .react-flow__panel { transform: scale(0.85); }
}

/* =========================================================
 * FLOATING PROPERTY SNIPPET (simini_property_snippet.js)
 * Move to bottom center so it doesn't overlap model viewer controls
 * ========================================================= */
@media (max-width: 480px) {
    #simini-property-snippet {
        right: 8px !important;
        left: 8px !important;
        bottom: 80px !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* =========================================================
 * PHONE ONLY  (≤ 480px) — extra tightening
 * ========================================================= */
@media (max-width: 480px) {
    html, body { font-size: 14px; }

    /* Hide explicitly desktop-only elements */
    .desktop-only, .hide-mobile, [data-desktop-only] {
        display: none !important;
    }

    /* Headings shrink further */
    h1 { font-size: 24px !important; line-height: 1.2; }
    h2 { font-size: 19px !important; }
    h3 { font-size: 16px !important; }

    /* Cards full-bleed */
    .card, .panel, .box {
        border-radius: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Chat welcome header tighter */
    #chatWelcomeHeader { padding: 20px 12px !important; }
    #chatWelcomeHeader h1 { font-size: 20px !important; }
}

/* =========================================================
 * PROJECTS / PROJECT DETAIL  (projects.html, project_detail.html)
 * Header has logo + nav + user-info; default padding 20px 30px is too
 * wide on phones. Stack the header rows, drop user-email (long), and
 * collapse the project grid to one column.
 * ========================================================= */
@media (max-width: 768px) {
    /* Generic page header used by projects.html / project_detail.html */
    body > .header {
        flex-wrap: wrap !important;
        padding: 12px 16px !important;
        gap: 8px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }
    body > .header .nav {
        order: 3 !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 12px !important;
        padding-top: 8px !important;
        border-top: 1px solid rgba(255,255,255,0.06);
        margin-top: 4px !important;
    }
    body > .header .user-info {
        gap: 8px !important;
    }
    body > .header .user-email {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px !important;
    }
    body > .container {
        padding: 20px 16px !important;
        max-width: 100% !important;
    }
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .page-header h1 {
        font-size: 24px !important;
    }
    .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .project-card {
        padding: 18px !important;
    }
    .new-project-btn {
        width: 100% !important;
        min-height: 44px !important;
    }
    /* Modal: full-screen-ish on mobile, scrollable */
    .modal.active .modal-content {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
        padding: 24px 20px !important;
    }
    .modal-actions {
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }
    .modal-actions .btn {
        width: 100% !important;
        min-height: 44px !important;
    }
}

/* =========================================================
 * SETTINGS  (settings.html)
 * Has its own 968px breakpoint that flexes the sidebar; layer
 * mobile-only tightening on top so chips/cards never overflow
 * and tap targets meet 44x44.
 * ========================================================= */
@media (max-width: 768px) {
    body > .header.settings-header,
    body.settings-page > .header,
    body[class*="settings"] > .header {
        padding: 10px 14px !important;
    }
    .settings-content, .settings-main {
        padding: 16px !important;
        max-width: 100% !important;
    }
    /* Cards stack on mobile */
    .settings-card, .setting-card, .preferences-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
        border-radius: 12px !important;
    }
    /* Toggle / button rows wrap so labels don't truncate */
    .setting-row, .preference-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .setting-action, .preference-action {
        flex: 1 1 auto !important;
    }
    /* Min tap target on every clickable settings element */
    .nav-item, .setting-toggle, .setting-button {
        min-height: 44px !important;
    }
}

/* =========================================================
 * AUTH FLOW  (forgot-password.html, reset-password.html, verify-otp.html)
 * Containers use 50px padding by default — phone-hostile. Tighten,
 * unlock body overflow so long content is reachable, and shrink OTP
 * inputs on iPhone SE so all 6 digits fit in viewport.
 * ========================================================= */
@media (max-width: 768px) {
    body { -webkit-tap-highlight-color: rgba(91,157,217,0.15); }

    .forgot-container, .reset-container, .verify-container {
        padding: 28px 20px !important;
        margin: 16px !important;
        border-radius: 20px !important;
        max-width: calc(100vw - 32px) !important;
    }
    /* Most auth pages set body{overflow:hidden} which clips error/help
       banners on small screens. Re-enable vertical scroll. */
    html, body { overflow-y: auto !important; }

    /* OTP grid: shrink boxes so 6 digits fit on iPhone SE (320px) */
    .otp-inputs { gap: 6px !important; }
    .otp-input {
        width: 40px !important;
        height: 48px !important;
        font-size: 20px !important;
        border-radius: 10px !important;
    }
}
@media (max-width: 360px) {
    .otp-input {
        width: 36px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
}

/* =========================================================
 * iOS AUTO-ZOOM PREVENTION on signup / login custom inputs
 * The global rule above targets input[type=...] but signup.html and
 * login.html use class .input-field / .form-input directly, and Safari
 * still zooms when the computed font-size is < 16px. Force 16px on
 * those classes too.
 * ========================================================= */
@media (max-width: 768px) {
    .input-field, .form-input {
        font-size: 16px !important;
    }
}

/* =========================================================
 * ACCESSIBILITY
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}