/* ============================================================ * Bezel-to-bezel layout inside the native iOS/Android wrapper. * * The wrapper tags its user-agent with "AIPartnersApp/...". A tiny * inline script in index.html sets `` * BEFORE first paint when that UA is detected. These rules only apply * inside the wrapper — desktop browsers and Safari are untouched (which * preserves the aesthetic baseline documented in CLAUDE.md). * * Goal: collapse the desktop's body→canvas→card layering so the portal * fills the phone edge-to-edge, with no visible "double border" between * the device bezel and the inner workspace. * ============================================================ */ .in-native-app body { /* Match the inner workspace so the outer "canvas" ring disappears. */ background: var(--color-bg); } .in-native-app .app-container { /* Strip any card-chrome (border / radius / shadow / margin) and fill the full viewport — bezel-to-bezel. */ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; width: 100% !important; min-height: 100dvh; background: var(--color-bg); } /* Same flattening for auth screens (login / company setup / invite) so the first launch inside the app doesn't show the desktop card-on-canvas. */ .in-native-app .auth-screen { background: var(--color-bg); } .in-native-app .auth-card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; max-width: none !important; width: 100% !important; min-height: 100dvh; padding: max(env(safe-area-inset-top), 24px) 24px max(env(safe-area-inset-bottom), 24px); background: var(--color-bg); } /* Flatten the inner canvas layer that wraps each tab's content (was a light gray box-around-the-card on desktop, visible as a "double border" on phone), plus every chat-tab container nested below, so no stale gray peeks through. */ .in-native-app .tab-content, .in-native-app .tab-panel, .in-native-app .claude-ui, .in-native-app .claude-main, .in-native-app .claude-view { background: var(--color-bg); } /* Compact the top header for phone width — the desktop logo + roomy tabs + right-side controls overflow a 402px viewport (Cowork/AIO get clipped). Hide the redundant logo (the app icon already establishes brand), shrink the tab buttons, and let the tab strip scroll horizontally as a safety net. */ .in-native-app .main-header { padding: 8px 8px 8px 8px; padding-top: calc(env(safe-area-inset-top) + 8px); } .in-native-app .logo-container { display: none; } .in-native-app .main-tabs { padding: 3px; gap: 2px; overflow-x: auto; scrollbar-width: none; /* hide scrollbar but keep scrollability */ max-width: 100%; flex: 1 1 auto; } .in-native-app .main-tabs::-webkit-scrollbar { display: none; } .in-native-app .tab-btn { padding: 7px 12px; font-size: 13px; min-width: 0; flex-shrink: 0; } .in-native-app .header-settings-container { margin-left: 8px; flex-shrink: 0; } .in-native-app .chat-input-container, .in-native-app .claude-chat-input { padding-bottom: calc(env(safe-area-inset-bottom) + 12px); } /* ============================================================ * Mobile browser responsive: compact the desktop layout for * narrow viewports (phones in Safari/Chrome, not native app). * * Mirrors the .in-native-app rules above but fires via media * query so no class detection is needed. Both rule sets are * intentionally kept in sync — if you update one, update both. * ============================================================ */ @media (max-width: 768px) { /* Flatten desktop canvas/card layers so no double-border */ body { background: var(--color-bg); } .app-container { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; width: 100% !important; background: var(--color-bg); } .auth-screen { background: var(--color-bg); } .auth-card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; max-width: none !important; width: 100% !important; min-height: 100dvh; padding: max(env(safe-area-inset-top), 24px) 24px max(env(safe-area-inset-bottom), 24px); background: var(--color-bg); } .tab-content, .tab-panel, .claude-ui, .claude-main, .claude-view { background: var(--color-bg); } /* Compact header: hide logo, shrink tabs, allow horizontal scroll */ .main-header { padding: 8px; padding-top: calc(env(safe-area-inset-top) + 8px); } .logo-container { display: none; } .main-tabs { padding: 3px; gap: 2px; overflow-x: auto; scrollbar-width: none; max-width: 100%; flex: 1 1 auto; } .main-tabs::-webkit-scrollbar { display: none; } .tab-btn { padding: 7px 12px; font-size: 13px; min-width: 0; flex-shrink: 0; } /* Settings icons: drop just below the header so they appear visually inline with the "Hearty" flip-toolbar row. position:absolute is relative to .main-header (position:relative). */ .header-settings-container { top: calc(100% + 4px); right: 12px; z-index: 15; } /* Flip toolbar: full-width, hamburger left, "Hearty" truly centered. Use position:relative + absolute-center on the wrapper so "Hearty" sits at exactly 50% of the toolbar width regardless of what's on either side (hamburger left, settings icons right). */ .chat-flip-toolbar { width: 100%; box-sizing: border-box; justify-content: flex-start; position: relative; padding-right: 0; } .chat-flip-wrapper { position: absolute; left: 50%; transform: translateX(-50%); flex: unset; } /* Input: reduce side padding and add safe-area bottom clearance */ .claude-input-container { padding-left: 12px; padding-right: 12px; padding-bottom: calc(env(safe-area-inset-bottom) + 12px); } .chat-input-container { padding-bottom: calc(env(safe-area-inset-bottom) + 12px); } /* ---- Composer toolbar: 2-row CSS grid ---- Row 1: toolbar-left (attach/image/voice/meeting) on the left, toolbar-right (2nd-op/ask3/dictate/send) on the right. Both sides fill the row — fully balanced edge-to-edge. Row 2: model pill spans the full width — wide and easy to tap. Nothing overlaps; both rows are the same full width. */ .claude-toolbar-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; row-gap: 8px; align-items: center; } /* Row 1 left — file/voice buttons */ .toolbar-left { grid-row: 1; grid-column: 1; justify-content: flex-start; gap: 8px; } /* Row 1 right — AI toggles + send */ .toolbar-right { grid-row: 1; grid-column: 3; gap: 8px; } /* Row 2 — model pill, full width */ .cw-model-selector { grid-row: 2; grid-column: 1 / 4; position: static !important; transform: none !important; left: auto !important; } .cw-model-pill { width: 100%; max-width: unset; justify-content: center; } /* Re-enable second-opinion and ask3 — row 1 has room for them */ .claude-second-opinion-btn, .claude-ask3-btn { display: flex !important; } /* ---- Tools tab: mobile drawer sidebar pattern ---- JS auto-collapses the sidebar at ≤768px (initToolsSidebarNav). When the user opens it via the hamburger it overlays the content — never push the layout sideways (that leaves only ~155px for content on a 375px phone). Also strip the desktop floating-card chrome (border-radius / shadow / margins) so the tools area fills the screen edge-to-edge instead of looking like a misplaced overlay. */ .tools-flip-back { border-radius: 0 !important; box-shadow: none !important; border: none !important; margin: 0 !important; height: 100%; } /* Sidebar is a pure overlay on mobile — don't push the content */ .tools-with-sidebar:has(.tools-sidebar-nav:not(.tools-sidebar-collapsed)) .tools-layout { margin-left: 0 !important; } /* Welcome dashboard fills the full width (not offset by sidebar) */ .tools-welcome-dashboard { left: 0 !important; } }