/* PWA-specific overlay on top of the shared design system. Handles: mobile viewport, bottom-safe-area insets, TV focus ring scaling. */ html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; /* Lock the document scroller. Without `overflow: hidden` on , focusing the textarea triggers a default scrollIntoView on the document which pushes .topbar above the visible area — the "input bar slides under the topbar" bug. The internal .thread-list scroller is unaffected. */ overflow: hidden; } /* Safe-area insets (notch, home indicator). Top/left/right are applied to the outer shell so the topbar clears the notch. The BOTTOM inset is intentionally NOT applied here — when the on-screen keyboard opens, Chrome shrinks the layout viewport but the home indicator inset stays >0 in some configurations, which would crop the thread list. The bottom inset is applied directly on the composer (the only element actually touching the bottom edge) instead. */ .app { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); box-sizing: border-box; } /* Mobile: collapse the 3-pane layout to a single-column pushdown. Contacts list becomes the whole screen; the thread overlays it when a contact is selected. Two trigger conditions: - narrow/medium width (max-width: 1000px) — phones AND a desktop browser window resized narrow. Raised from 720px: between 721 and ~1000px the desktop 2-pane layout put a fixed-width contacts column (up to 520px) next to a squashed thread, and the back arrow (shown only inside this query) was hidden — so a medium Firefox window was stuck with no way back. One-column overlay + back arrow now kick in for every window under 1000px. - any landscape phone (orientation: landscape AND max-height: 900px) — a desktop in landscape is at least ~1000px tall, so this excludes desktops/laptops while catching every phone/handheld in landscape. Without the second condition a 660×412 Galaxy S20 FE in landscape would fall into the desktop 2-pane layout (300px contacts + thread squashed), which is the case we explicitly forbid. */ @media (max-width: 1000px), (orientation: landscape) and (max-height: 900px) { .drag-region { display: none; } /* --- Topbar: compact layout. The wide action buttons (Appareils, Déconnecter) are hidden on mobile; a ⋮ kebab button exposes them via a popover menu so the header stays readable on a 360dp screen. */ .topbar { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); flex-wrap: nowrap; } .topbar-left { gap: var(--sp-2); min-width: 0; flex: 1; } .topbar-user { min-width: 0; } .topbar-user .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; } .topbar-right { gap: var(--sp-2); flex-wrap: nowrap; flex-shrink: 0; } .topbar .avatar { width: 32px; height: 32px; font-size: var(--fs-sm); } /* Swap the two wide buttons for the kebab on mobile. */ .topbar-action-wide { display: none; } .topbar-kebab-wrap { display: block; } /* --- Pairing screen: fit on small phones. */ .pair-screen { padding: var(--sp-4); align-items: start; padding-top: var(--sp-5); } .pair-card { padding: var(--sp-5); gap: var(--sp-4); } .pair-header h2 { font-size: var(--fs-lg); } /* --- Chat panes: single-column with slide-in thread overlay. Pin .chat-main to row 2 of .chat-screen (`grid-template-rows: auto 1fr` from layout.css). Without `grid-row: 2`, when `.topbar` is `display: none` (mobile + .thread-open), .chat-main becomes the only in-flow grid item and CSS Grid auto-places it in the FIRST cell (the `auto` row), which sizes to its min-content and collapses to ~128px. The `1fr` row stays empty and shows as a void at the bottom. Pinning to row 2 puts it in the `1fr` cell where it gets the remaining height. */ .chat-main { grid-template-columns: 1fr; grid-row: 2; } .contacts-pane { border-right: 0; } /* Pas de redimensionnement en overlay mobile (un seul panneau visible). */ .pane-resizer { display: none !important; } /* Thread overlay: anchored to `.chat-main` (which is `position: relative` in layout.css). Fills 100% of the main area, slides in from the right. Kept as a flex column (inherited from layout.css) — no grid overrides, no nested position hacks. z-index sits ABOVE .contacts-pane but BELOW .topbar so the menu popover (z-index 10 on .topbar) always wins. */ .thread-root { position: absolute; inset: 0; background: var(--c-bg-0); z-index: 2; transform: translateX(100%); transition: transform 220ms var(--ease-out); /* Disable pointer events until the overlay is open so the user can't accidentally tap through to the contacts list underneath. */ pointer-events: none; /* Promote to its own compositor layer to keep the slide transition smooth. `will-change` is safe here — one element only. */ will-change: transform; } .thread-open .thread-root { transform: translateX(0); pointer-events: auto; } .thread-open .contacts-pane { visibility: hidden; } /* When a thread is open, hide the global topbar so the thread's own header takes over. Less vertical clutter, more room for messages. */ .thread-open .topbar { display: none; } /* Thread header: back arrow + peer name, comfortable touch target. */ .thread-header { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); min-width: 0; } .thread-back { display: inline-grid; place-items: center; } .thread-title { min-width: 0; flex: 1; } .thread-title .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-pane, .thread-wrap { min-width: 0; } .thread-list { padding: var(--sp-3) var(--sp-3); padding-left: max(var(--sp-3), env(safe-area-inset-left)); padding-right: max(var(--sp-3), env(safe-area-inset-right)); } /* --- Bubbles on narrow screens: wider by default, break words so nothing clips beyond the viewport edge. `box-sizing: border-box` + `min-width: 0` lets flex items shrink below their intrinsic content size. */ .bubble { max-width: 85%; min-width: 0; box-sizing: border-box; } .file-bubble { width: auto; max-width: 85%; min-width: 0; box-sizing: border-box; } /* --- Composer mobile: flat flex row, no animations (saccades on Android). Resting state → [📎] [🎙] [ field .................... 😊 GIF ] Typing (has-text) → [ field ......................... 😊 GIF ] [➤] Only TWO leading icons (attach + mic) so the field stays wide instead of wrapping onto 2 lines; emoji + GIF live INSIDE the field on the right. We show/hide leading icons and the send button with `display`, not width/opacity transitions, to avoid layout reflows mid-animation. */ .composer { padding: var(--sp-2) var(--sp-3); gap: 6px; padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom)); } .composer-leading { gap: 6px; } /* When typing we collapse the leading cluster to reclaim field width — BUT keep the attach (📎) button reachable so a file can still be attached after some text is typed (caption-first flow). Only the mic is hidden (recording mid-sentence makes no sense anyway). */ .composer.has-text .composer-leading .btn-mic { display: none; } /* Mobile keyboards (e.g. Samsung) already ship emoji + GIF pickers, so the in-app emoji/GIF buttons are redundant on touch and just eat field width. Hide the whole trailing cluster on mobile; keep it on desktop where the keyboard has neither. (Desktop styles live in layout.css, untouched.) */ .composer-field-actions { display: none !important; } .composer-field { gap: 0; } /* Icon buttons: circular 40×40, subtle. */ .btn-attach, .btn-mic { width: 40px; height: 40px; padding: 0; font-size: 20px; border-radius: 50%; border: 0; background: transparent; color: var(--c-text-soft); flex-shrink: 0; } .btn-attach:active, .btn-mic:active { background: var(--c-bg-2); } /* Send button: hidden while the input is empty, revealed when typing. */ .composer .btn-send { display: none; width: 40px; height: 40px; min-width: 40px; padding: 0; font-size: 0; line-height: 1; border-radius: 50%; } /* `inline-flex` + center both axes so the ➤ glyph sits dead-center instead of hugging the left edge (a bare inline-flex left-aligns its content). The small optical nudge accounts for the arrow glyph's built-in left bearing. */ .composer.has-text .btn-send { display: inline-flex; align-items: center; justify-content: center; } .composer .btn-send::before { content: '➤'; font-size: 18px; line-height: 1; transform: translateX(1px); } .composer-field { border-radius: 20px; } .composer-input { min-height: 40px; max-height: 120px; /* No trailing in-field buttons on mobile → symmetric horizontal padding so the placeholder/text is comfortably inset on both sides. */ padding: 9px 14px; font-size: 16px; /* prevent iOS zoom-on-focus (needs >=16px) */ } /* --- Modal: full-width on small screens. */ .modal-card { width: calc(100vw - 24px); max-width: calc(100vw - 24px); } /* --- Contact rows: more compact on mobile. */ .contact-row { padding: var(--sp-2) var(--sp-3); } .pane-header { padding: var(--sp-3); } } /* TV tweaks (focus-visible ring larger, no hover). */ html.tv :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: var(--r-md); transition: outline-offset 80ms var(--ease-out); } html.tv { cursor: none; font-size: 18px; /* comfortable at 10ft */ } html.tv .drag-region { display: none; } html.tv .composer-input { min-height: 56px; } html.tv .btn { padding: 14px 22px; } html.tv .btn-sm { padding: 10px 16px; } html.tv .contact-row { padding: var(--sp-4); } html.tv .thread-list { padding: var(--sp-7) var(--sp-8); } html.tv .bubble { max-width: 60%; font-size: 20px; }