@mooncompany/uplink-chat 0.5.0

package/public/css/mobile.css

@@ -0,0 +1,614 @@
+/* ============================================
+   MOBILE OPTIMIZATIONS
+   Responsive design and touch-friendly UI
+   ============================================ */
+
+/* ==========================================
+   RESPONSIVE BREAKPOINTS REFERENCE
+   --breakpoint-sm: 480px   (Small phones)
+   --breakpoint-md: 768px   (Tablets)
+   --breakpoint-lg: 1024px  (Desktop)
+   --breakpoint-xl: 1440px  (Wide desktop)
+   --breakpoint-2xl: 1920px (Ultra-wide)
+   ========================================== */
+
+/* ============================================
+   UNIFIED PANEL - Mobile/Tablet Full-Page Slide-In
+   Below split-view breakpoint (1024px), panels slide in full-page
+   ============================================ */
+@media (max-width: 1023px) {
+  .panel,
+  .dev-panel,
+  .satellite-navigator {
+    position: fixed !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: 100% !important;
+    border-radius: 0 !important;
+    transform: translateX(100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: var(--bg) !important;
+    z-index: var(--z-sticky) !important;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+    padding: 0 !important;
+    box-shadow: none !important;
+    top: 0 !important;
+    right: 0 !important;
+    left: 0 !important;
+    bottom: 0 !important;
+  }
+
+  .panel.visible,
+  .dev-panel.visible,
+  .satellite-navigator.visible {
+    display: flex !important;
+    flex-direction: column;
+    transform: translateX(0);
+  }
+
+  .panel-header,
+  .settings-panel-header,
+  .dev-panel-header,
+  .satellite-nav-header {
+    position: sticky;
+    top: 0;
+    background: var(--bg);
+    padding: var(--space-4) var(--space-5) !important;
+    border-bottom: 1px solid var(--border);
+    z-index: var(--z-base);
+    flex-shrink: 0;
+  }
+
+  .panel-content,
+  .settings-panel-content {
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Remove scroll mask-image on full-screen mobile panels - cuts off content */
+  .settings-panel-content {
+    mask-image: none !important;
+    -webkit-mask-image: none !important;
+  }
+
+  /* Panel rows - larger touch targets on mobile */
+  .panel-row,
+  .setting-row {
+    padding: var(--space-4) var(--space-5) !important;
+    min-height: 60px;
+  }
+
+  .panel-row-label,
+  .setting-label {
+    font-size: var(--text-base) !important;
+    font-weight: 500;
+  }
+
+  .panel-row-desc,
+  .setting-desc {
+    font-size: var(--text-sm) !important;
+    margin-top: var(--space-1);
+  }
+
+  /* Larger toggle on mobile/tablet */
+  .toggle {
+    width: 52px !important;
+    height: 30px !important;
+    border-radius: var(--radius-xl) !important;
+  }
+
+  .toggle::after {
+    width: 26px !important;
+    height: 26px !important;
+  }
+
+  .toggle.on::after {
+    transform: translateX(22px) !important;
+  }
+}
+
+/* Mobile breakpoint (--breakpoint-md: 768px) */
+@media (max-width: 768px) {
+  /* App container - constrain to viewport */
+  .app {
+    max-width: 100% !important;
+    width: 100% !important;
+    overflow-x: hidden;
+  }
+
+  /* Container adjustments */
+  .container {
+    padding: 0 !important;
+    border-radius: 0 !important;
+    height: 100vh !important;
+    max-width: 100% !important;
+  }
+
+  /* Header - tighter on mobile, prevent right-side cutoff */
+  header,
+  .header {
+    padding: var(--space-2) var(--space-3);
+    position: sticky;
+    top: 0;
+    gap: var(--space-2);
+    overflow: hidden;
+  }
+
+  .header-left {
+    min-width: 0;
+    overflow: hidden;
+    flex: 1 1 0;
+    gap: var(--space-1);
+  }
+
+  .header-right {
+    flex-shrink: 0;
+    gap: var(--space-1);
+  }
+
+  /* Hide less critical badges on mobile to save space */
+  .encryption-badge,
+  .connection-mode-badge {
+    display: none !important;
+  }
+
+  /* Tighter status badge on mobile — pull dot close to logo */
+  .status-badge {
+    gap: 2px;
+  }
+
+  .status-dot {
+    margin-right: 0;
+    z-index: var(--z-dropdown);
+    background: var(--bg);
+    border-bottom: 1px solid var(--border);
+  }
+
+  header h1 {
+    font-size: var(--text-base);
+  }
+
+  .header-buttons {
+    gap: var(--space-1);
+  }
+
+  .header-buttons button,
+  .header-btn {
+    padding: var(--space-1) var(--space-2);
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  /* Context tracker - compact on mobile */
+  .context-badge {
+    gap: 4px;
+  }
+  .context-bar {
+    width: 36px;
+  }
+  .context-text {
+    font-size: 9px;
+  }
+
+  /* Messages area */
+  #messages {
+    padding: var(--space-3);
+    padding-bottom: 140px; /* Space for input area */
+    overflow-x: hidden; /* Prevent horizontal scroll */
+  }
+
+  .message {
+    max-width: 85% !important;
+    min-width: 80px; /* padding (28px) + min content (~50px) */
+    padding: 10px 14px !important;
+    font-size: var(--text-base);
+    word-break: normal; /* Don't break words aggressively */
+    overflow-wrap: break-word; /* Only break long words on overflow */
+    overflow: visible; /* Don't make bubbles scrollable */
+    box-sizing: border-box;
+  }
+
+  /* Edit button - always visible on mobile (no hover on touch) */
+  .message.user .message-edit-btn {
+    opacity: 0.6;
+    position: absolute;
+    left: -44px;
+    top: 50%;
+    transform: translateY(-50%);
+    min-width: 44px;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .message.user {
+    position: relative;
+    /* Remove display:flex - it breaks text wrapping */
+  }
+
+  /* Message wrapper mobile fixes */
+  .message-wrapper {
+    max-width: 85% !important;
+  }
+
+  .message-wrapper .message {
+    min-width: 80px; /* padding (28px) + min content (~50px) */
+    word-break: normal; /* Override break-word for wrapped messages */
+    overflow-wrap: break-word; /* Only break on overflow, not every char */
+  }
+
+  /* Hide message actions by default on mobile - too cramped */
+  .message .message-actions {
+    display: none;
+  }
+
+  /* Show on tap/focus */
+  .message:focus .message-actions,
+  .message:active .message-actions {
+    display: flex;
+  }
+
+  /* Bottom dock - wraps input + mode tabs as single fixed unit */
+  .bottom-dock {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: var(--z-dropdown);
+    background: var(--bg);
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Input area - flows naturally inside bottom-dock */
+  .bottom-dock .input-area {
+    position: static !important;
+    padding: var(--space-3);
+    background: var(--bg);
+    border-top: none;
+  }
+
+  /* Mode tabs - flows naturally below input inside bottom-dock */
+  .bottom-dock .mode-tabs {
+    position: static;
+    padding: 0;
+    padding-bottom: env(safe-area-inset-bottom);
+    background: var(--bg);
+    border-top: 1px solid var(--border);
+  }
+
+  #textInput {
+    font-size: 16px !important; /* Prevent zoom on iOS */
+    padding: var(--space-3) var(--space-4);
+    min-height: 44px; /* Touch target */
+  }
+
+  #sendBtn {
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
+  }
+
+  .mode-tab {
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--text-base);
+  }
+
+  /* Settings panel - Mobile specifics (unified .panel handles full-page slide-in) */
+  /* Buttons on mobile - touch-friendly sizing */
+  .setting-btn {
+    min-height: 44px;
+    padding: var(--space-3) var(--space-5);
+    font-size: var(--text-base);
+  }
+
+  /* Inputs on mobile - touch-friendly sizing */
+  .setting-input,
+  .setting-select {
+    min-height: 44px;
+    font-size: var(--text-base) !important;
+    padding: var(--space-3) !important;
+  }
+
+  /* Input groups - stack if needed on very small screens */
+  .setting-input-group {
+    flex-wrap: wrap;
+  }
+
+  /* Wide inputs - allow full width on mobile */
+  .setting-input-wide {
+    max-width: 100%;
+  }
+
+  /* Developer/Activity panel - uses unified .panel styles from developer.css */
+  /* Mobile full-page slide-in handled by .panel.dev-panel rules */
+
+  /* Satellites panel - Mobile full page slide-in (uses unified .panel class) */
+  .panel.satellite-navigator {
+    position: fixed !important;
+    inset: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    height: 100% !important;
+    max-height: 100% !important;
+    border-radius: 0 !important;
+    transform: translateX(100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: var(--bg) !important;
+    z-index: var(--z-sticky) !important;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+  }
+
+  .panel.satellite-navigator.visible {
+    display: flex !important;
+    transform: translateX(0);
+  }
+
+  /* Shortcuts panel */
+  .shortcuts-panel-inner {
+    max-width: 100% !important;
+    margin: 0;
+    border-radius: 0;
+    height: 100%;
+  }
+
+  /* Voice mode */
+  #voiceMode {
+    padding: var(--space-5);
+  }
+
+  .voice-btn {
+    width: 80px;
+    height: 80px;
+  }
+
+  /* Avatars - smaller on mobile */
+  .message-avatar {
+    width: var(--space-6);
+    height: var(--space-6);
+    min-width: var(--space-6);
+    font-size: var(--text-sm);
+  }
+
+  /* Toggle sizing handled by ≤1023px breakpoint (52×30px, 26px thumb) */
+
+  /* File attachment */
+  #attachBtn {
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
+  }
+
+  /* Image/file preview */
+  #imagePreview {
+    max-width: calc(100% - var(--space-6));
+  }
+
+  /* M2: Preview remove button — 44px touch target */
+  .preview-remove {
+    width: 44px;
+    height: 44px;
+    top: -14px;
+    right: -14px;
+    font-size: var(--text-base);
+  }
+
+  /* M6: Mode tab — 44px min touch target */
+  .mode-tab {
+    min-height: 44px;
+  }
+
+  /* M7: Setting description — readable on mobile */
+  .setting-desc {
+    font-size: var(--text-sm);
+  }
+}
+
+/* Small phones (below --breakpoint-sm) */
+@media (max-width: 375px) {
+  /* Hide context badge text on small phones — bar only */
+  .context-text {
+    display: none;
+  }
+
+  header h1 {
+    font-size: var(--text-base);
+  }
+
+  .message {
+    font-size: var(--text-base);
+    padding: var(--space-2) var(--space-3) !important;
+  }
+
+  .mode-tab {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-sm);
+  }
+
+  .voice-btn {
+    width: 70px;
+    height: 70px;
+  }
+}
+
+/* Landscape mode */
+@media (max-height: 500px) and (orientation: landscape) {
+  /* Ensure header stays visible */
+  header {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-dropdown);
+    background: var(--bg);
+  }
+
+  /* Compact input area */
+  .input-area {
+    padding: var(--space-2) var(--space-3);
+    /* bottom set by JS syncInputBottom() */
+  }
+
+  /* Compact mode tabs */
+  .mode-tabs {
+    bottom: 0;
+    padding: var(--space-1) var(--space-3);
+  }
+
+  .mode-tab {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-sm);
+  }
+
+  /* Messages area with proper spacing */
+  #messages, main.messages {
+    padding-bottom: 90px;
+    padding-top: var(--space-2);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Compact messages */
+  .message {
+    padding: var(--space-2) var(--space-3) !important;
+  }
+
+  /* Smaller voice button */
+  .voice-btn {
+    width: 60px;
+    height: 60px;
+  }
+
+  /* Panels in landscape - still fullscreen */
+  .panel.dev-panel,
+  .panel.satellite-navigator {
+    max-height: 100% !important;
+    height: 100% !important;
+  }
+}
+
+/* Safe area insets for notched phones and large screens */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  .mode-tabs {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  #messages {
+    padding-bottom: calc(160px + env(safe-area-inset-bottom));
+  }
+
+  /* Input area bottom is set dynamically by JS syncInputBottom() */
+}
+
+/* Fix for tall phones like S25 Ultra where browser chrome eats space */
+@media (max-width: 768px) and (min-height: 800px) {
+  #messages {
+    padding-bottom: 180px;
+  }
+
+  /* Input area bottom is set dynamically by JS syncInputBottom() */
+}
+
+/* Touch feedback */
+@media (hover: none) {
+  button:active,
+  .mode-tab:active,
+  .setting-row:active {
+    opacity: 0.7;
+    transform: scale(0.98);
+  }
+
+  /* Disable hover effects on touch */
+  button:hover,
+  .mode-tab:hover {
+    background: inherit;
+  }
+}
+
+/* Touch optimization for mobile - prevent double-tap zoom and improve responsiveness */
+@media (max-width: 768px) {
+  button,
+  a,
+  input,
+  textarea,
+  select,
+  .toggle,
+  .mode-tab,
+  .header-btn,
+  .send-btn,
+  .voice-btn,
+  .input-btn,
+  .message-edit-btn,
+  .setting-row,
+  .satellite-item,
+  .satellite-action,
+  .dev-tab,
+  [role="button"],
+  [role="tab"],
+  [role="switch"],
+  [role="option"] {
+    touch-action: manipulation;
+  }
+
+  /* Ensure scrollable areas allow vertical scrolling */
+  .messages,
+  .settings-panel,
+  .dev-panel-content,
+  .satellite-list {
+    touch-action: pan-y;
+  }
+}
+
+/* Hide scrollbar on mobile but keep functionality */
+@media (max-width: 768px) {
+  #messages::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
+
+  #messages {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+/* Prevent pull-to-refresh on chat */
+body {
+  overscroll-behavior-y: contain;
+}
+
+/* Overlay/Onboarding screens - ensure scrollable on mobile */
+@media (max-width: 480px) {
+  /* Compact context on small screens — already stacked from 768px rule */
+  .context-bar {
+    width: 28px;
+  }
+}
+
+@media (max-width: 480px) {
+  .overlay-screen {
+    align-items: flex-start;
+    padding: var(--space-4);
+    padding-top: env(safe-area-inset-top, var(--space-4));
+    padding-bottom: env(safe-area-inset-bottom, var(--space-4));
+  }
+
+  .overlay-card {
+    margin: var(--space-4) 0;
+    max-width: 100%;
+    padding: var(--space-5);
+  }
+}
+
+/* PWA standalone mode adjustments */
+@media (display-mode: standalone) {
+  header {
+    padding-top: env(safe-area-inset-top, 12px);
+  }
+}