/*
 * mobile-polish.css
 *
 * Consolidated mobile UI polish — light theme only.
 * Added 2026-04-19 via 15-agent mobile GUI review.
 *
 * Breakpoint triad (guidance for new queries):
 *   <=480px  phone
 *   <=768px  tablet
 *   <=1024px small desktop
 *
 * SCOPE: surgical mobile-only CSS. No theme changes. No new UI components.
 * All voice (mic) buttons remain intact (mandatory per CLAUDE.md).
 */

/* Prevent iOS from auto-zooming body text on rotation */
html {
    -webkit-text-size-adjust: 100%;
}

/* Eliminate iOS zoom-on-focus on inputs (requires >= 16px font).
   Narrowly scoped to common form inputs; does not touch desktop >480px. */
@media (max-width: 480px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px;
    }
}

/* Touch target minimums (Apple HIG 44x44). Hit-slop grows without resizing icons. */
.chat-header-btn,
.back-to-list,
.send-btn,
.voice-btn,
.ai-btn,
.modal-close,
.back-btn,
.welcome-back-btn {
    min-width: 44px;
    min-height: 44px;
}

/* Secondary utility controls — keep compact but reachable (36px). */
.voice-transcript-toggle,
.voice-transcript-dismiss,
.transcript-toggle,
.transcript-close {
    min-height: 36px;
}
.voice-transcript-dismiss,
.transcript-close {
    min-width: 36px;
}

/* Hard 24px floor for a BARE native checkbox / radio (phones only).
 *
 * Measured, not assumed (Chromium 390px, mobile emulation):
 *   - `padding` is IGNORED on an appearance:auto checkbox, so the usual
 *     hit-slop trick ("grow the hit area, keep the glyph") cannot work here.
 *     The border box IS the whole target; only width/height move it.
 *   - Most checkboxes in this app are already fine because they sit inside a
 *     padded <label> (a 16x16 radio in a label.type-card measures 284x83
 *     effective). Those must NOT be touched — inflating them would resize a
 *     glyph inside an already-correct target and shift the card layout.
 *   - What is left over is the BARE checkbox in a table cell — .row-checkbox,
 *     .seq-checkbox, .form-check-input — 13x13 to 16x16 with no surrounding
 *     label to borrow. Those are under the floor on BOTH axes.
 *
 * Hence: floor only what has no <label> ancestor, and only on a coarse pointer.
 * `role=switch` is excluded — a styled switch is deliberately not square and
 * forcing min-width on it would deform the track.
 *
 * The gate is `pointer: coarse` and deliberately NOT a width. A tablet at
 * 768-834px is a touch viewport at mouse dimensions: the finger is the same
 * size there as it is at 390px, so a width-keyed floor would leave the whole
 * tablet band under the floor. (Lane a5 found exactly that shape on /about,
 * where the desktop 16px nav survives into the 768/834 touch band.) Sizing may
 * key off width; TOUCH FLOORS key off the pointer. Desktop density is
 * untouched — a mouse pointer does not match this query at any width.
 */
@media (pointer: coarse) {
    input[type="checkbox"]:not(label *):not([role="switch"]),
    input[type="radio"]:not(label *) {
        min-width: var(--st-tap-floor, 24px);
        min-height: var(--st-tap-floor, 24px);
    }
}

/* Modal body-scroll lock. Modal open/close handlers toggle `modal-open` on body. */
body.modal-open {
    overflow: hidden;
}

/* Visible focus ring for keyboard navigation (WCAG 2.4.7).
   Uses :focus-visible so mouse users keep the current look. */
:focus-visible {
    outline: 2px solid #0096D6;
    outline-offset: 2px;
}

/* Honor prefers-reduced-motion globally. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Hover-only UI fallback for touch devices. Actions should always be
   reachable when the primary input is touch (no hover). */
@media (hover: none) {
    .client-item-actions {
        display: flex !important;
    }
    .kanban-column-collapse-side {
        opacity: 0.6;
    }
}

/* Wrap long URLs / unbroken strings inside chat messages. */
.message {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Safe-area bottom padding for fixed chat composers on notched phones.
   Applied narrowly so we don't affect desktop. */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    .compose-area,
    .message-input-container {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

/* ─────────────────────────────────────────────────────────────
 * Mobile polish — visible pass (2026-04-19)
 * ───────────────────────────────────────────────────────────── */

/* Polished scrollbars for WebKit. Narrow and light so they feel
   unobtrusive on mobile Safari and desktop Chrome alike. Firefox
   uses the `scrollbar-width` / `scrollbar-color` fallback. */
@supports (scrollbar-width: thin) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #d1d5db transparent;
    }
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Mobile-more bottom-sheet drag handle pill: user-spec polish.
   The element already exists; this is a light color/size calibration. */
.mobile-more-handle {
    width: 40px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: #d1d5db !important;
    margin: 8px auto 4px !important;
}

/* Transcripts pane: search field should use the search type on mobile so
   iOS shows the search keyboard with a dedicated "Search" key. Also wrap
   long transcript titles. */
#krispSearchFilter {
    -webkit-appearance: none;
    appearance: none;
}

/* Chat: stream region marker — JS adds aria-live to #chatMessages when
   it mounts, but this CSS keeps it visible (no visual change). */
[aria-live="polite"].chat-messages,
[aria-live="polite"].messages {
    /* no-op: placeholder so selector isn't dead-code */
}

/* Transcripts "Record Meeting" outline-style hover polish. We already
   set the default colors inline; add a hover fill so it's still
   discoverable as the record action. */
#meetingRecorderLaunchBtn:hover {
    background: #dc2626 !important;
    color: #fff !important;
}

/* Transcripts tab-mode ghost button hover polish. */
.tag-mode-btn:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

/* ── Global "tag" density cap on engagement cards (visible on sidebar).
   ONLY hides 4th+ tags; first three still show. Commented-out until
   confirmed against .engagement-card markup. Keep disabled. */
/*
.engagement-card .tag:nth-child(n+4) { display: none; }
*/

/* Touch devices: ensure any residual hint element rendered inside the
   3d-force-graph canvas (class "scene-nav-info") never appears. */
@media (pointer: coarse) {
    .scene-nav-info { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
 * Aggressive mobile simplification pass (2026-04-19)
 *
 * User feedback: "Still really bad and overly complicated… Needs to be simple!!!!"
 *
 * Philosophy: every user-facing pane on mobile shows ONE primary action
 * + ONE secondary action. Power-user / bulk operations (Create Embeddings,
 * Generate Embeddings, Download All *, Disconnect, AI Rename) get hidden
 * on ≤768px — they remain accessible on desktop, and the backend runs
 * indexing automatically anyway. Per-card action clusters collapse to
 * a single Tags chip + a primary View button. Long item titles no
 * longer fight with a row of 5 coloured buttons for space.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {

    /* Drag-handle pill: bolder, unmistakable as a swipe-to-dismiss affordance. */
    .mobile-more-handle {
        width: 56px !important;
        height: 6px !important;
        background: #94a3b8 !important;
        border-radius: 3px !important;
        margin: 10px auto 14px !important;
    }

    /* ── Emails pane: one-CTA layout ────────────────────────────
       Keep "Import Emails" visible. Hide the 3 extras that stack
       underneath (Create Embeddings, Disconnect, Download All). */
    #emailsPane .btn.btn-success[onclick*="embedClientEmails"],
    #emailsPane .btn.btn-secondary[onclick*="disconnectOutlook"],
    #emailsPane .btn.btn-secondary[onclick*="downloadAllEmails"] {
        display: none !important;
    }

    /* ── Transcripts / Documents / Messages: hide the standalone
       "Generate Embeddings" button next to the item-count line. Power
       feature; backend indexing runs automatically too. */
    #transcriptsPane .btn.btn-success[onclick*="generateEmbeddings"],
    #documentsPane  .btn.btn-success[onclick*="generateDocumentEmbeddings"],
    #messagesPane   .btn.btn-success[onclick*="generateMessageEmbeddings"] {
        display: none !important;
    }

    /* ── Per-card action clusters: show Tags + View only ────────
       The shared .transcript-card / .document-card / .message-card /
       email-thread card all render a row of 5–6 action buttons on the
       right. On mobile we keep ONLY the source-tag button (always
       first) and the primary View button. Rename, AI-Rename, Download,
       Update, Delete are desktop/long-press territory. */
    .transcript-card .transcript-actions > button:not(.btn-primary):not([data-source-tag-btn]):not(.source-tag-assign-btn):not(.source-share-btn) {
        display: none !important;
    }

    /* Keep the cross-engagement Share control reachable on mobile. Touch has
       no :hover, so a hover-only affordance would make share unreachable here;
       the Share button stays visible alongside Tags + View. */
    .transcript-card .transcript-actions > button.source-share-btn {
        display: inline-flex !important;
    }

    /* Some email-thread action rows sit inside a .transcript-card but
       not inside .transcript-actions — catch them too. */
    .transcript-card > .btn-group .btn:not(.btn-primary):not(.source-tag-assign-btn) {
        display: none !important;
    }

    /* ── Redundant "AI Rename" chip (even on desktop it was redundant
       next to plain Rename; on mobile, it stays hidden regardless). */
    .transcript-actions button[onclick*="aiRenameTranscript"] {
        display: none !important;
    }

    /* ── Loud per-card delete buttons: drop them on mobile. Delete
       remains accessible by long-press / swipe on cards wired for it,
       or via the item detail view. Reduces the "every row has a red
       button" visual screaming. */
    .transcript-actions button[onclick^="deleteTranscript"],
    .transcript-actions button[onclick^="deleteMessage"],
    .transcript-actions button[onclick^="deleteDocument"] {
        display: none !important;
    }

    /* ── Reclaim vertical space on pane headers. The Emails /
       Documents / Transcripts pane headers often have a wrapped CTA
       column; remove the gap between stacked blocks. */
    #emailsPane .outlook-connection-box,
    #documentsPane .empty-state,
    #transcriptsPane .transcripts-header {
        padding-bottom: 12px;
    }

    /* ── Documents pane: the "Drag & Drop Files Here" dashed zone is
       pointless and misleading on phones (there's no drag on touch)
       and doubles the vertical distance to the file list. The blue
       "📥 Upload Document" button above it does the same job. */
    #documentDropZone,
    .document-drop-zone {
        display: none !important;
    }

    /* ── Date range filter + "Select All" bulk-action row: both take
       a full row each on mobile for power-user features. Hide. */
    #transcriptsPane .filter-date-range,
    #transcriptsPane .bulk-actions-bar,
    #documentsPane  .filter-date-range,
    #documentsPane  .bulk-actions-bar,
    #messagesPane   .filter-date-range,
    #messagesPane   .bulk-actions-bar,
    #emailsPane     .filter-date-range,
    #emailsPane     .bulk-actions-bar {
        display: none !important;
    }

    /* Trim the source-list "40 documents · Generate Embeddings · Sort"
       row: with Generate-Embeddings already hidden above, center the
       remaining count + sort label. */
    .list-summary-row,
    .transcripts-summary-row,
    .documents-summary-row {
        flex-wrap: wrap;
        gap: 6px;
        font-size: 13px;
    }
}

/* ─────────────────────────────────────────────────────────────
 * Small-mobile (≤480px): even tighter. Transcripts-pane CTA
 * stack becomes a 2-up grid so the user can see the list without
 * scrolling past four full-width buttons.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #transcriptsPane .transcripts-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
    }
    #transcriptsPane .transcripts-actions > button {
        margin: 0 !important;
        width: 100% !important;
        justify-content: center;
    }
}


/* ─────────────────────────────────────────────────────────────
 * Add Transcript modal (≤768px): mobile-native.css pins every
 * .modal-content to 100dvh with overflow:hidden, expecting an
 * inner .modal-body scroll region. #addTranscriptModal has no
 * .modal-body — its form sits directly in .modal-content — so
 * anything below the fold (the 200px textarea, the Add button)
 * was clipped and unreachable once the keyboard shrank dvh.
 * Scope the scroll fix to this modal only; other modals keep
 * their internal scroll regions. Also guarantee 44px targets.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    body.engagement-agent-app #addTranscriptModal .modal-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #addTranscriptModal .modal-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
        margin-top: 8px;
    }
    #addTranscriptModal .modal-actions .btn,
    #addTranscriptModal #transcriptTabText,
    #addTranscriptModal #transcriptTabAudio {
        min-height: 44px;
    }
    #addTranscriptModal input[type="text"] {
        min-height: 44px;
        font-size: 16px; /* prevents iOS focus zoom */
    }
    #transcriptsPane .transcripts-actions > button {
        min-height: 44px;
    }
}

/* ─────────────────────────────────────────────────────────────
 * Add Transcript modal title (all widths): the base sheet's
 * generic .modal-header h3 { color: white } expects the colored
 * gradient band some modals paint; addTranscriptModal's header
 * is plain white, so its "Add Transcript" title rendered
 * white-on-white on desktop and mobile alike.
 * ───────────────────────────────────────────────────────────── */
#addTranscriptModal .modal-header h3 {
    color: #1e293b;
}