/* responsive.css — mobile breakpoints for Syndex UI */

/* === TABLET (< 768px) === */
@media (max-width: 768px) {
    #header {
        flex-wrap: wrap;
        padding: 10px 16px;
        gap: 8px;
    }

    .header-left {
        flex: 1;
        min-width: 0;
    }

    .header-right {
        flex: 0 0 auto;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* Hide less-critical controls on tablet */
    .teaching-toggle {
        display: none;
    }

    .depth-btn,
    .buffer-btn {
        font-size: 9px;
        padding: 3px 6px;
    }

    #messages {
        padding: 16px;
    }

    .message {
        padding: 12px 14px;
        margin-bottom: 14px;
    }

    /* Dashboard grid — 2 columns on tablet */
    .dash-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* === MOBILE (< 640px) === */
@media (max-width: 640px) {
    #header {
        padding: 10px 12px;
        gap: 6px;
    }

    .header-title {
        font-size: 14px;
        letter-spacing: 5px;
    }

    .header-left {
        gap: 10px;
    }

    /* Mode selector shrinks */
    .mode-btn {
        font-size: 9px;
        padding: 4px 7px;
    }

    .header-right {
        width: 100%;
        order: 3;
        justify-content: flex-start;
        gap: 6px;
        border-top: 1px solid var(--border);
        padding-top: 6px;
    }

    /* Keep service dots visible but compact */
    .service-dots {
        gap: 4px;
    }

    .service-dot {
        width: 6px;
        height: 6px;
    }

    /* Hide teaching, depth, buffer on mobile — too many controls */
    .teaching-toggle,
    .depth-btn,
    .buffer-btn {
        display: none;
    }

    .header-btn {
        font-size: 10px;
        padding: 4px 8px;
    }

    #status-indicator {
        font-size: 10px;
    }

    /* Dash nav fills available space */
    .dash-nav {
        flex: 1;
    }

    .dash-nav-link {
        flex: 1;
        text-align: center;
    }

    #messages {
        padding: 12px;
    }

    .message {
        padding: 10px 12px;
        margin-bottom: 12px;
        font-size: 13px;
    }

    .message .content {
        font-size: 13px;
    }

    .message .content pre {
        font-size: 11px;
    }

    /* Input area — safe area for iOS */
    #input-area {
        padding: 10px 12px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    #input-form {
        gap: 8px;
    }

    /* Prevent iOS zoom on focus — must be >= 16px */
    #message-input {
        padding: 10px 12px;
        font-size: 16px;
        min-height: 42px;
        border-radius: 8px;
    }

    #send-btn {
        padding: 10px 14px;
        font-size: 11px;
        letter-spacing: 1px;
        border-radius: 8px;
    }

    /* Attach button */
    .attach-btn {
        font-size: 16px;
        padding: 6px;
    }

    /* Upload status */
    .upload-status {
        font-size: 11px;
    }

    /* Dashboard grid — single column on mobile */
    .dash-grid {
        grid-template-columns: 1fr;
    }

    /* Events table scroll */
    .events-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .events-table {
        min-width: 600px;
    }

    /* Teaching controls (when visible) */
    .teaching-controls-inner {
        flex-direction: column;
        gap: 8px;
    }

    .teaching-fields {
        flex-direction: column;
        gap: 6px;
    }

    .teaching-notes-row {
        flex-direction: column;
        gap: 6px;
    }
}

/* === SMALL PHONES (< 400px) === */
@media (max-width: 400px) {
    #header {
        padding: 8px 10px;
    }

    .header-title {
        font-size: 12px;
        letter-spacing: 4px;
    }

    .orbital {
        width: 26px;
        height: 26px;
    }

    /* Hide mode selector on very small screens — too tight */
    .mode-selector {
        display: none;
    }

    /* Hide status indicator */
    #status-indicator {
        display: none;
    }

    .header-right {
        gap: 4px;
        padding-top: 4px;
    }

    .header-btn {
        font-size: 9px;
        padding: 3px 6px;
    }

    #input-area {
        padding: 8px 10px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    #message-input {
        font-size: 16px;
        padding: 8px 10px;
    }

    #send-btn {
        padding: 8px 12px;
        font-size: 10px;
    }

    .message {
        padding: 8px 10px;
        font-size: 12px;
    }

    .message .role {
        font-size: 9px;
    }

    .message .content {
        font-size: 12px;
        line-height: 1.5;
    }
}

/* === iPad / touch tablets (demo target) ===
   The reachability fix is body{height:100dvh} in base.css. This block only tunes touch
   ergonomics at tablet widths, and is scoped to COARSE pointers so desktop/laptop windows at
   the same pixel width are completely unaffected (the no-regression guard the operator asked
   for). iPhone is deliberately NOT addressed here — see responsive-iphone.css (stub). */
@media (pointer: coarse) and (min-width: 769px) {
    /* Header fits tablet-portrait width by wrapping its action cluster onto its OWN row instead
       of bleeding off the right edge — the same graceful pattern as the phone breakpoint, but
       scoped to COARSE pointers so regular desktop (pointer: fine) is NEVER matched → zero
       desktop change. All controls stay visible; they just wrap to a second row. */
    #header { flex-wrap: wrap; row-gap: 8px; }
    .header-left { min-width: 0; flex: 1 1 auto; }
    .header-right {
        width: 100%;
        order: 3;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
        padding-top: 6px;
        border-top: 1px solid var(--border);
    }
    /* Belt-and-suspenders: never let the header force horizontal page scroll. */
    #header { max-width: 100%; }

    /* 16px composer kills iOS focus-zoom; comfortable tap targets on what a presenter taps. */
    #message-input { min-height: 46px; font-size: 16px; }
    #send-btn,
    .attach-btn,
    .header-btn,
    .mode-btn,
    .depth-btn,
    .buffer-btn { min-height: 38px; }
}

/* === iOS SAFE AREAS === */
@supports (padding: env(safe-area-inset-bottom)) {
    #input-area {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    @media (max-width: 640px) {
        #input-area {
            padding-bottom: calc(10px + env(safe-area-inset-bottom));
        }
    }
}