/* * 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; } /* 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 #2196F3; 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) { .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) { /* 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) { display: none !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; } }