/* ============================================================ Mobile shell — shared between admin-server and main-server. Activated when has class .shell-mobile-on (set by JS; typically a viewport <768px gate or ?mobile=1 query string). This file ships the chrome and shell-scoped overrides: - .m-* primitives (top bar, tab bar, stage chips, sheets, search row, more list, filter pill, media seg, tab badge) - body.shell-mobile-on … overrides (modal full-screen, chat-widget repositioning, landscape compaction) Some selectors reference app-specific atoms (.match-card, #adminPlayerCommPanel, .modal, .cw-card, .chat-widget). Those are no-ops on hosts that don't render those elements; the rules stay here so future hosts can opt in by re-using the same atoms. See: - docs/plans/MOBILE_SHELL_REARCHITECTURE.md - CLAUDE.md "Two shells, one set of components" ============================================================ */ .shell--mobile { display: none; } body.shell-mobile-on .admin-container { display: none !important; } /* Chat widget (Zoro) is repositioned, NOT hidden, on mobile shell. See "AI Assistant FAB on mobile" CSS block lower down. */ body.shell-mobile-on { padding: 0; margin: 0; overflow: hidden; } body.shell-mobile-on .shell--mobile { display: flex; flex-direction: column; position: fixed; inset: 0; width: 100%; height: 100dvh; background: var(--bg, #1a1a1a); color: var(--text, #fff); font-family: inherit; overflow: hidden; z-index: 1; } /* Top bar (thin, sticky). padding-top respects the iOS safe-area-inset so the topbar slides under the notch / Dynamic Island when the PWA runs in standalone mode (where the OS gives the page the full screen including the unsafe top region). */ .m-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top, 10px)) 12px 10px; background: rgba(0, 0, 0, 0.55); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .m-topbar-icon-btn { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: inherit; font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .m-topbar-icon-btn:active { background: rgba(255, 255, 255, 0.12); } /* Logo mark — used at the start of the top bar in lieu of a hamburger when the avatar already provides access to the same player sheet. The image source should be a TRIMMED square (e.g., th-logo-mark.png) so it actually fills the box; the original th-logo.png has ~80% transparent padding baked in and renders as a tiny dot at this size. */ .m-topbar-mark { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; text-decoration: none; background: rgba(255, 255, 255, 0.04); } .m-topbar-mark img { width: 36px; height: 36px; object-fit: contain; display: block; } .m-topbar-title { flex: 1; margin: 0; font-size: 17px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent, #e4f91b); text-align: center; } .m-topbar-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(228, 249, 27, 0.18); border: 2px solid var(--accent, #e4f91b); color: var(--accent, #e4f91b); font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.02em; } .m-topbar-avatar:active { background: rgba(228, 249, 27, 0.32); } /* Tab content area */ .m-content { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; } .m-tab { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .m-tab[hidden] { display: none; } /* Stage chip swiper (Kanban tab) */ .m-stages { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; padding: 10px 12px; background: var(--bg, #1a1a1a); border-bottom: 1px solid rgba(255, 255, 255, 0.06); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .m-stages::-webkit-scrollbar { display: none; } .m-stage-chip { flex: 0 0 auto; padding: 9px 16px; min-height: 38px; border-radius: 19px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 600; cursor: pointer; scroll-snap-align: start; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; display: inline-flex; align-items: center; gap: 6px; } .m-stage-chip[aria-selected="true"] { background: rgba(228, 249, 27, 0.18); border-color: var(--accent, #e4f91b); color: var(--accent, #e4f91b); } .m-stage-chip[data-empty="true"] { opacity: 0.45; } .m-stage-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(255, 255, 255, 0.10); color: inherit; font-size: 11px; font-weight: 700; line-height: 1; } .m-stage-chip[aria-selected="true"] .m-stage-count { background: rgba(228, 249, 27, 0.32); color: var(--accent, #e4f91b); } /* Search row — sticky under stage chips */ .m-search-row { position: sticky; top: 58px; /* sits below the stage chip row */ z-index: 4; display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--bg, #1a1a1a); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .m-search-input { flex: 1; height: 38px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text, #fff); font-size: 14px; font-family: inherit; outline: none; -webkit-appearance: none; appearance: none; } .m-search-input:focus { border-color: var(--accent, #e4f91b); background: rgba(255, 255, 255, 0.12); } .m-search-input::placeholder { color: rgba(255, 255, 255, 0.45); } .m-search-clear { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.10); border: 0; color: var(--text, #fff); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .m-stage-content { padding: 12px; display: flex; flex-direction: column; gap: 12px; } /* Global search mode: hide the stage chip row, show stage badges per result */ body.shell-mobile-on[data-search-active="true"] .m-stages { display: none; } .m-search-result { display: flex; flex-direction: column; gap: 6px; } .m-search-result-stage { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgba(148, 163, 184, 0.16); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.28); } .m-search-result-stage[data-stage="InProcess"] { background: rgba(56, 189, 248, 0.14); color: #7dd3fc; border-color: rgba(56, 189, 248, 0.30); } .m-search-result-stage[data-stage="Review"] { background: rgba(250, 204, 21, 0.14); color: #facc15; border-color: rgba(250, 204, 21, 0.30); } .m-search-result-stage[data-stage="Done"] { background: rgba(34, 197, 94, 0.14); color: #4ade80; border-color: rgba(34, 197, 94, 0.30); } .m-search-result-stage[data-stage="FollowUp"] { background: rgba(244, 114, 182, 0.14); color: #f472b6; border-color: rgba(244, 114, 182, 0.30); } .m-search-summary { font-size: 12px; color: rgba(255, 255, 255, 0.55); padding: 0 2px 4px; } /* ============================================================ Mobile match-detail modal: take over full screen, single column. Pure CSS override — desktop modal behaviour intact; Phase 3 will rebuild this as an accordion stack push. ============================================================ */ body.shell-mobile-on .modal { padding: 0; } body.shell-mobile-on .modal.active { align-items: stretch; justify-content: stretch; z-index: 1100; } body.shell-mobile-on .modal .modal-content { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; min-height: 100dvh; border-radius: 0; border: 0; padding: 12px 14px max(14px, env(safe-area-inset-bottom, 14px)); } body.shell-mobile-on .modal .modal-header { gap: 8px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 10px; /* Stack the title row above the controls row on mobile. Without this the title + Stage select + 3 action icons + Close all fight for space on one row at 375-430px and wrap into a 4-row mess that pushes content below the fold. Going column makes the title sit on its own line and lets the controls span full width below it. */ flex-direction: column; align-items: stretch; } body.shell-mobile-on .modal .modal-header h2 { /* Title row: keep it from gobbling all the vertical space. The !important is required because the markup has inline style `flex: 1; min-width: 0;` (sized for desktop's row layout). Without this override, on mobile the title gets crushed to ~50px while the controls eat the rest of the row — title text wraps vertically letter-by-letter and overlaps the Stage select. */ flex: 0 0 auto !important; min-width: 0 !important; width: 100% !important; } body.shell-mobile-on .modal .modal-header-controls { /* Second row: stretch to full width, wrap action icons + Close. The stage on iOS/Android picks up the native picker, which needs a clean ≥44px hit area. */ min-height: 44px; padding: 10px 14px; padding-right: 32px; /* room for the native dropdown arrow */ font-size: 15px; touch-action: manipulation; } body.shell-mobile-on .modal-stage-label { font-size: 13px; } /* Stack the 2-column split into a single column */ body.shell-mobile-on .modal .card-modal-split { flex-direction: column; gap: 14px; } body.shell-mobile-on .modal .card-modal-main-col, body.shell-mobile-on .modal .card-modal-side-col { flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; padding: 0; border-left: 0; border-right: 0; } /* Action button rows wrap rather than overflow */ body.shell-mobile-on .modal #modalHeaderActions { flex-wrap: wrap; } body.shell-mobile-on .modal #modalHeaderActions button { font-size: 12px; padding: 6px 10px; } /* ============================================================ Mobile More tab — minimal but real: who you are, switch to desktop, logout, build info. ============================================================ */ .m-more-list { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; } .m-more-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: var(--text, #fff); font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; } .m-more-row:hover { background: rgba(255, 255, 255, 0.08); } .m-more-row .m-more-meta { font-size: 12px; color: rgba(255, 255, 255, 0.55); font-weight: 400; } .m-more-row[data-variant="danger"] { color: #fca5a5; border-color: rgba(248, 113, 113, 0.30); } .m-more-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.40); padding: 14px 16px 4px; } .m-more-footer { padding: 18px 16px 24px; font-size: 11px; color: rgba(255, 255, 255, 0.35); text-align: center; } /* Mobile filter sheet — coach select + apply/reset */ .m-filter-group { margin-bottom: 16px; } .m-filter-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 6px; } .m-filter-select { width: 100%; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--text, #fff); font-size: 15px; appearance: none; -webkit-appearance: none; } .m-filter-actions { display: flex; gap: 10px; margin-top: 6px; } .m-filter-reset, .m-filter-apply { flex: 1; padding: 13px 16px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: var(--text, #fff); } .m-filter-apply { background: var(--accent, #e4f91b); color: #1a1a1a; border-color: var(--accent, #e4f91b); } /* ============================================================ Mobile match-card density: tighter than desktop because we want 3-4 cards visible per stage instead of 1.5. Reduces padding, fonts, and the FFM triangle; hides low-signal rows (time-ago, "No chunks uploaded yet") since match-date carries the same info. ============================================================ */ body.shell-mobile-on .m-stage-content { gap: 8px; padding: 10px; } body.shell-mobile-on .m-stage-content .match-card { padding: 11px 12px; border-radius: 12px; border-width: 1px; } body.shell-mobile-on .m-stage-content .match-card .card-header { margin-bottom: 6px; gap: 6px; } body.shell-mobile-on .m-stage-content .match-card .age-badge, body.shell-mobile-on .m-stage-content .match-card .coach-badge { font-size: 10px; padding: 2px 7px; letter-spacing: 0.02em; } body.shell-mobile-on .m-stage-content .match-card .player-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; line-height: 1.2; } body.shell-mobile-on .m-stage-content .match-card .opponent-or-partner { font-size: 12px; margin-bottom: 2px; line-height: 1.3; } body.shell-mobile-on .m-stage-content .match-card .passcode { font-size: 11px; margin-bottom: 2px; } body.shell-mobile-on .m-stage-content .match-card .match-date { font-size: 12px; margin-bottom: 0; } /* Drop low-signal rows on mobile — match-date already conveys when */ body.shell-mobile-on .m-stage-content .match-card .time-ago, body.shell-mobile-on .m-stage-content .match-card .chunk-counter--empty { display: none; } /* Compact FFM triangle so the player-name column stretches further */ body.shell-mobile-on .m-stage-content .match-card .ffm-triangle--card { width: 78px; height: 70px; } body.shell-mobile-on .m-stage-content .match-card .ffm-triangle--card .vertex img { width: 16px !important; height: 16px !important; } body.shell-mobile-on .m-stage-content .match-card .ffm-triangle--card .vertex .rating { font-size: 11px !important; } /* ============================================================ Phone landscape (height < 500px, orientation landscape). iOS Safari's URL bar consumes ~80px in landscape so we compact aggressively and switch the card list to 2 columns. ============================================================ */ @media (orientation: landscape) and (max-height: 500px) { body.shell-mobile-on .m-topbar { min-height: 40px; padding: 4px 12px; } body.shell-mobile-on .m-topbar-title { font-size: 14px; } body.shell-mobile-on .m-topbar-icon-btn, body.shell-mobile-on .m-topbar-avatar { width: 32px; height: 32px; font-size: 14px; } body.shell-mobile-on .m-stages { padding: 4px 10px; gap: 6px; } body.shell-mobile-on .m-stage-chip { padding: 5px 12px; font-size: 12px; } body.shell-mobile-on .m-search-row { padding: 4px 10px; } body.shell-mobile-on .m-search-input { padding: 7px 12px; font-size: 13px; } body.shell-mobile-on .m-tabbar { padding: 2px 0 max(2px, env(safe-area-inset-bottom, 2px)) 0; } body.shell-mobile-on .m-tab-btn { padding: 4px 0; gap: 1px; } body.shell-mobile-on .m-tab-icon { font-size: 16px; } body.shell-mobile-on .m-tab-label { font-size: 10px; } /* 2-column card grid in landscape — there's plenty of width */ body.shell-mobile-on .m-stage-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 10px; } body.shell-mobile-on .m-stage-content .m-empty, body.shell-mobile-on .m-stage-content .m-search-summary { grid-column: 1 / -1; } body.shell-mobile-on .m-stage-content .m-search-result { /* search results carry their stage badge — keep as a flat 2-col grid */ grid-column: auto; } } /* ============================================================ Mobile Media tab — segmented filter + list view. Reuses the same /api/admin/media endpoint and window._mmAllMedia cache used by the desktop Media Manager. Cards rendered via the shared window._mmBuildCard atom. ============================================================ */ .m-media-seg { position: sticky; top: 0; z-index: 6; display: flex; gap: 6px; padding: 10px 12px; background: rgba(20, 20, 20, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); overflow-x: auto; scrollbar-width: none; } .m-media-seg::-webkit-scrollbar { display: none; } .m-media-seg-btn { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.75); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .m-media-seg-btn[aria-selected="true"] { background: rgba(228, 249, 27, 0.18); border-color: var(--accent, #e4f91b); color: var(--accent, #e4f91b); } /* Search row inside Media tab also sticks so it stays reachable while the user scrolls a long list */ body.shell-mobile-on #mTabMedia .m-search-row { position: sticky; top: 49px; /* sits below the seg control */ z-index: 5; background: rgba(20, 20, 20, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* List itself is a plain block container — the OUTER .m-tab is the scroll container (position: absolute; inset:0; overflow-y:auto). Earlier we set overflow-y:auto here too, which created a nested scroll axis with auto height — meaning content past the viewport was clipped and unreachable. Single scroll axis fixes that. */ .m-media-list { padding: 10px; display: flex; flex-direction: column; gap: 10px; } /* Override the desktop .cw-grid layout when used inside the mobile media list — single column on phones, 2-col landscape */ body.shell-mobile-on .m-media-list .cw-card { width: 100%; max-width: 100%; min-height: auto; } @media (orientation: landscape) and (max-height: 500px) { body.shell-mobile-on .m-media-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 10px; } body.shell-mobile-on .m-media-list .m-empty { grid-column: 1 / -1; } } /* ============================================================ Mobile Messages tab — host the existing #adminPlayerCommPanel inside .m-tab[data-tab="messages"] without rebuilding it. The panel is moved (appendChild) into #mMsgHost on first Messages-tab visit; CSS below makes it fill the viewport. Reuses all existing handlers (loadAdminThreadList, adminSelectThread, sendAdminDashboardCoachMessage) and the shared messaging-ui.js / messaging.css atoms. ============================================================ */ .m-msg-host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } body.shell-mobile-on .m-msg-host #adminPlayerCommPanel { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; border-radius: 0; border: 0; padding: 0; background: transparent; box-shadow: none; } /* Hide the redundant "Player communication" header on mobile — the top bar already says "Messages". Keep the inner tabs (Messages / Working checklist) since both are useful. */ body.shell-mobile-on .m-msg-host .admin-player-comm-head { display: none; } body.shell-mobile-on .m-msg-host .comm-dash-tabs { padding: 6px 12px; background: rgba(0, 0, 0, 0.20); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } body.shell-mobile-on .m-msg-host #adminCommDashMessages, body.shell-mobile-on .m-msg-host #adminCommDashChecklist { padding: 0; } body.shell-mobile-on .m-msg-host .msg-panel-threads { max-height: none; flex: 1 1 auto; } body.shell-mobile-on .m-msg-host .msg-thread-search { padding: 8px 12px; background: rgba(0, 0, 0, 0.25); } body.shell-mobile-on .m-msg-host .msg-panel-conversation { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } body.shell-mobile-on .m-msg-host #adminCommDashThread { flex: 1 1 auto; min-height: 0; padding: 12px; } /* Compose row pinned at bottom of the conversation, respecting safe-area for iOS Home indicator */ body.shell-mobile-on .m-msg-host .msg-compose { flex: 0 0 auto; padding: 8px 10px max(8px, env(safe-area-inset-bottom, 8px)) 10px; background: rgba(0, 0, 0, 0.40); border-top: 1px solid rgba(255, 255, 255, 0.08); } body.shell-mobile-on .m-msg-host #adminActiveThreadHeader { padding: 6px 12px; background: rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Tab-bar badge for unread conversations */ .m-tab-btn { position: relative; } .m-tab-badge { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; pointer-events: none; } .m-tab-badge[hidden] { display: none !important; } /* ============================================================ AI Assistant FAB on mobile — the existing #chatWidget Zoro widget is repositioned (not duplicated). The toggle becomes a yellow circular FAB above the bottom tab bar; the panel opens as a 100dvh bottom sheet so the chatbot has room to breathe. Hidden while another .m-sheet popover is already open to avoid stacking. Reuses /api/admin/chat backend and chat-engine.js — zero backend change. ============================================================ */ body.shell-mobile-on .chat-widget { position: fixed; bottom: auto; right: auto; top: auto; /* Bottom-LEFT anchor — bottom-right collided with the messaging compose Send button. Sits above the tab bar (48-56px) and respects the iOS Home indicator safe-area inset. */ left: 14px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 1200; pointer-events: none; /* container shouldn't catch taps */ transition: opacity 0.18s ease, transform 0.18s ease; } body.shell-mobile-on .chat-widget > * { pointer-events: auto; } body.shell-mobile-on .chat-toggle { width: 56px; height: 56px; font-size: 24px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(228, 249, 27, 0.18); } /* Float out of the way while the user is composing or editing text. Fade + shrink the FAB so it stops competing for thumb attention. Covers: messaging compose, coach-bar dictation, Stat Notes / Coach Notes textareas (`.notes-editor`), and the inline coach-note edit textarea added in coach-notes-editable. */ body.shell-mobile-on:has(.msg-compose-input:focus) .chat-widget, body.shell-mobile-on:has(.coach-bar-textarea:focus) .chat-widget, body.shell-mobile-on:has(.notes-editor:focus) .chat-widget, body.shell-mobile-on:has(.coach-note-edit-textarea:focus) .chat-widget { opacity: 0.25; transform: scale(0.85); } body.shell-mobile-on:has(.msg-compose-input:focus) .chat-widget:hover, body.shell-mobile-on:has(.coach-bar-textarea:focus) .chat-widget:hover, body.shell-mobile-on:has(.notes-editor:focus) .chat-widget:hover, body.shell-mobile-on:has(.coach-note-edit-textarea:focus) .chat-widget:hover { opacity: 1; transform: scale(1); } /* Hide the FAB while a sheet (popover) is already open OR while the chat panel itself is open (the panel has its own close button). Keeps the affordance unambiguous. */ body.shell-mobile-on:has(.m-sheet:popover-open) .chat-toggle { visibility: hidden; } body.shell-mobile-on .chat-widget.is-open .chat-toggle { visibility: hidden; } /* Promote the chat panel to a 100dvh bottom sheet on mobile. Overrides the desktop "absolute, bottom: 60-80px, width: 90vw" positioning. */ body.shell-mobile-on .chat-panel { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; box-shadow: none; z-index: 1250; } body.shell-mobile-on .chat-header { padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top, 14px)); gap: 10px; } body.shell-mobile-on .chat-header span { font-size: 17px; } body.shell-mobile-on .chat-header button { font-size: 22px; padding: 4px 10px; color: #cbd5e1; } body.shell-mobile-on .chat-messages { padding: 14px 14px 18px; font-size: 15px; } body.shell-mobile-on .chat-input-row { padding: 10px 12px max(10px, env(safe-area-inset-bottom, 10px)); gap: 8px; } body.shell-mobile-on .chat-input-row input { font-size: 16px; padding: 12px 14px; } body.shell-mobile-on .chat-input-row button { padding: 12px 18px; } /* ============================================================ Coach filter pill in top bar — visible affordance for the active filter so users trust what they're seeing. Empty state ("All") hides it; coach-name fills it. ============================================================ */ .m-topbar-filter-pill { flex: 0 0 auto; max-width: 110px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; background: rgba(228, 249, 27, 0.16); color: var(--accent, #e4f91b); border: 1px solid rgba(228, 249, 27, 0.32); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .m-topbar-filter-pill[hidden] { display: none !important; } /* User row in the filters sheet */ .m-sheet-userrow { display: flex; align-items: center; gap: 12px; padding: 8px 0 16px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .m-sheet-avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(228, 249, 27, 0.18); border: 2px solid var(--accent, #e4f91b); color: var(--accent, #e4f91b); font-size: 17px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .m-sheet-userinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .m-sheet-username { font-size: 15px; font-weight: 700; color: var(--text, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-sheet-userrole { font-size: 12px; color: rgba(255, 255, 255, 0.6); } .m-empty { padding: 48px 16px; text-align: center; color: rgba(255, 255, 255, 0.45); font-size: 14px; line-height: 1.5; } /* Mobile-shell match cards reuse the existing .match-card atom but expand to full container width and drop the column-card height constraints. */ body.shell-mobile-on .m-stage-content .match-card { width: 100%; margin: 0; max-width: 100%; flex: 0 0 auto; min-height: auto; } /* Bottom tab bar — flex-based so the same CSS works for 4-tab admin and 5-tab player shells without duplication. Each .m-tab-btn takes an equal share of the row via flex: 1 1 0. */ .m-tabbar { flex: 0 0 auto; display: flex; background: rgba(0, 0, 0, 0.85); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0 max(6px, env(safe-area-inset-bottom, 6px)) 0; } .m-tab-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: transparent; border: 0; color: rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: 500; text-decoration: none; cursor: pointer; min-height: 50px; } .m-tab-btn .m-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-tab-btn .m-tab-icon { font-size: 20px; line-height: 1; } .m-tab-btn[aria-selected="true"] { color: var(--accent, #e4f91b); } .m-tab-btn:active { background: rgba(255, 255, 255, 0.05); } /* Bottom sheet (Popover API) */ .m-sheet { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; width: 100%; max-width: 100vw; max-height: 80dvh; border: none; border-radius: 16px 16px 0 0; background: var(--bg-elevated, #2c5f2d); color: var(--text, #fff); padding: 0; overflow: hidden; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5); } .m-sheet:popover-open { display: flex; flex-direction: column; } .m-sheet::backdrop { background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .m-sheet-handle { width: 40px; height: 4px; margin: 8px auto; background: rgba(255, 255, 255, 0.3); border-radius: 2px; flex: 0 0 auto; } .m-sheet-head { display: flex; align-items: center; gap: 8px; padding: 4px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex: 0 0 auto; } .m-sheet-head h2 { flex: 1; margin: 0; font-size: 16px; color: var(--accent, #e4f91b); } .m-sheet-close { width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); color: inherit; cursor: pointer; font-size: 14px; line-height: 1; } .m-sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }