/* mobile.css — Atlas Mobile Design System Only active when mobile-shell.js adds .atlas-mobile to */ /* === Skeleton shimmer animation === */ @keyframes skeleton-shimmer { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } #meetings-loading > div > div, .digest-loading > div > div { animation: skeleton-shimmer 1.2s ease-in-out infinite; } /* === Design Tokens === */ :root { --mobile-brand: #C41230; --mobile-brand-hover: #a0102a; --mobile-dark: #111827; --mobile-text-primary: #111827; --mobile-text-secondary: #374151; --mobile-text-muted: #6b7280; --mobile-text-light: #9ca3af; --mobile-text-faint: #b0b0b0; --mobile-border: #e5e7eb; --mobile-border-light: #f3f4f6; --mobile-bg-page: #f9fafb; --mobile-bg-card: #fff; --mobile-bg-muted: #fafafa; --mobile-green: #16a34a; --mobile-red: #ef4444; --mobile-amber: #f59e0b; --mobile-blue: #2D8CFF; --mobile-radius-card: 10px; --mobile-radius-compact: 8px; --mobile-radius-chip: 20px; --mobile-radius-badge: 4px; --mobile-header-height: 48px; --mobile-nav-height: 84px; --mobile-safe-bottom: env(safe-area-inset-bottom, 0px); --mobile-gutter: 16px; --mobile-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* === Mobile-Only Styles (gated by body.atlas-mobile) === */ body.atlas-mobile { font-family: var(--mobile-font); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* Hide desktop header */ body.atlas-mobile .unified-header { display: none !important; } /* Mobile header bar */ body.atlas-mobile .mobile-header { display: flex; align-items: center; justify-content: center; min-height: var(--mobile-header-height); padding: 10px var(--mobile-gutter); background: var(--mobile-bg-card); border-bottom: 1px solid var(--mobile-border); position: sticky; top: 0; z-index: 100; } body.atlas-mobile .mobile-header-title { font-family: var(--mobile-font); font-size: 16px; font-weight: 700; color: var(--mobile-text-primary); } body.atlas-mobile .mobile-header-back { font-family: var(--mobile-font); font-size: 14px; font-weight: 600; color: var(--mobile-brand); cursor: pointer; position: absolute; left: var(--mobile-gutter); } body.atlas-mobile .mobile-header-action { position: absolute; right: var(--mobile-gutter); } /* Bottom navigation */ body.atlas-mobile .mobile-bottom-nav { display: flex; align-items: flex-start; justify-content: space-around; padding: 0 16px calc(16px + var(--mobile-safe-bottom)); background: var(--mobile-bg-card); border-top: 1px solid var(--mobile-border); position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; transition: transform 0.25s ease; /* GPU layer — prevents iOS Safari repaint flicker during programmatic scroll */ will-change: transform; -webkit-transform: translateZ(0); } /* Auto-hide: slide nav off-screen */ body.atlas-mobile.mobile-nav-hidden .mobile-bottom-nav { transform: translateY(100%); } body.atlas-mobile .mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 64px; min-height: 49px; padding: 10px 0 6px; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; /* Red top-line indicator for active — 3px solid, hidden by default */ border-top: 3px solid transparent; transition: transform 80ms ease; } /* Press feedback: subtle scale on tap */ body.atlas-mobile .mobile-nav-item:active { transform: scale(0.92); } /* Active state: red top line */ body.atlas-mobile .mobile-nav-item.active { border-top-color: var(--mobile-brand, #C41230); } body.atlas-mobile .mobile-nav-item svg { width: 22px; height: 22px; stroke: #bcc0c7; stroke-width: 1.8; fill: none; } /* Active: let inline SVG attributes control fill/stroke — just remove the defaults */ body.atlas-mobile .mobile-nav-item.active svg { stroke: initial; stroke-width: initial; fill: initial; } body.atlas-mobile .mobile-nav-label { font-family: var(--mobile-font); font-size: 10px; color: #bcc0c7; } body.atlas-mobile .mobile-nav-item.active .mobile-nav-label { color: var(--mobile-text-primary, #111827); font-weight: 700; } /* Page body padding for fixed nav */ body.atlas-mobile .company-container, body.atlas-mobile .meetings-content-v3, body.atlas-mobile .screen-app, body.atlas-mobile #digest-app, body.atlas-mobile #detail-content, body.atlas-mobile #prefs-app, body.atlas-mobile #meetings-content { padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 16px) !important; } /* Chat app: when nav hidden (contextual deep-link), minimal bottom padding */ body.atlas-mobile.mobile-nav-hidden .chat-app { padding-bottom: calc(var(--mobile-safe-bottom) + 16px) !important; } /* Chat app: when nav visible (landing page), add nav height to bottom padding */ body.atlas-mobile:not(.mobile-nav-hidden) .chat-app { padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 16px) !important; } /* Card system */ body.atlas-mobile .mobile-card { background: var(--mobile-bg-card); border: 1px solid var(--mobile-border); border-radius: var(--mobile-radius-card); overflow: hidden; margin: 0 var(--mobile-gutter); } body.atlas-mobile .mobile-card + .mobile-card { margin-top: 8px; } /* Filter chips */ body.atlas-mobile .mobile-chip { font-family: var(--mobile-font); font-size: 10px; font-weight: 500; padding: 4px 10px; border-radius: var(--mobile-radius-chip); border: 1px solid var(--mobile-border); background: var(--mobile-bg-card); color: var(--mobile-text-secondary); cursor: pointer; } body.atlas-mobile .mobile-chip.active { background: var(--mobile-dark); color: #fff; border-color: var(--mobile-dark); } /* Section headers */ body.atlas-mobile .mobile-section-header { font-family: var(--mobile-font); font-size: 10px; font-weight: 600; color: var(--mobile-text-light); letter-spacing: 0.5px; text-transform: uppercase; padding: 0 2px; } /* Show more links */ body.atlas-mobile .mobile-show-more { font-family: var(--mobile-font); font-size: 12px; font-weight: 600; color: var(--mobile-brand); text-align: center; padding: 10px var(--mobile-gutter); cursor: pointer; } /* Page fade-in transition */ body.atlas-mobile .mobile-page-enter { animation: mobileFadeIn 150ms ease-out; } @keyframes mobileFadeIn { from { opacity: 0; } to { opacity: 1; } } /* === Search Input === */ body.atlas-mobile .mobile-search-wrapper { position: relative; margin-bottom: 12px; } body.atlas-mobile .mobile-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); stroke: var(--mobile-text-light); pointer-events: none; } body.atlas-mobile .mobile-search-input { font-family: var(--mobile-font); font-size: 14px; width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--mobile-border); border-radius: var(--mobile-radius-card); background: var(--mobile-bg-card); color: var(--mobile-text-primary); outline: none; box-sizing: border-box; -webkit-appearance: none; } body.atlas-mobile .mobile-search-input:focus { border-color: var(--mobile-text-light); } body.atlas-mobile .mobile-search-input::placeholder { color: var(--mobile-text-light); } /* === Filter Chips Row === */ body.atlas-mobile .mobile-filter-chips { display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; } body.atlas-mobile .mobile-filter-chips::-webkit-scrollbar { display: none; } body.atlas-mobile .mobile-filter-chip { padding: 6px 14px; border: 1px solid var(--mobile-border, #e5e7eb); border-radius: 20px; font-family: var(--mobile-font); font-size: 12px; font-weight: 500; color: var(--mobile-text-muted, #6b7280); white-space: nowrap; flex-shrink: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.atlas-mobile .mobile-filter-chip-active { background: var(--mobile-dark, #111827); border-color: var(--mobile-dark, #111827); color: #fff; font-weight: 600; } body.atlas-mobile .mobile-filter-chip .chip-badge { display: inline-flex; align-items: center; justify-content: center; background: #C41230; color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 10px; margin-left: 5px; } body.atlas-mobile .mobile-filter-fade { position: absolute; top: 0; right: 0; width: 40px; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)); pointer-events: none; } /* === Companies Card List === */ body.atlas-mobile .mobile-company-cards { padding: 0; } body.atlas-mobile .mobile-card-list { margin: 0 var(--mobile-gutter); background: var(--mobile-bg-card); border: 1px solid var(--mobile-border); border-radius: var(--mobile-radius-card); overflow: hidden; } body.atlas-mobile .mobile-company-row { display: flex; align-items: center; padding: 14px 12px 14px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.atlas-mobile .mobile-company-row:not(:last-child) { border-bottom: 1px solid var(--mobile-border-light); } body.atlas-mobile .mobile-company-row:active { background: var(--mobile-bg-page); } body.atlas-mobile .mobile-company-row-content { flex: 1; min-width: 0; } body.atlas-mobile .mobile-company-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } body.atlas-mobile .mobile-company-name { font-family: var(--mobile-font); font-size: 15px; font-weight: 600; color: var(--mobile-text-primary); } body.atlas-mobile .mobile-company-meta { font-family: var(--mobile-font); font-size: 12px; color: var(--mobile-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.atlas-mobile .mobile-company-chevron { flex-shrink: 0; stroke: var(--mobile-text-light); margin-left: 8px; } /* Badge tags */ body.atlas-mobile .mobile-badge { font-family: var(--mobile-font); font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--mobile-radius-chip); white-space: nowrap; } body.atlas-mobile .mobile-badge-portfolio { background: #111827; color: #fff; } body.atlas-mobile .mobile-badge-pipeline { background: #e0f2fe; color: #0369a1; } /* Companies empty state */ body.atlas-mobile .mobile-companies-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px var(--mobile-gutter); text-align: center; } body.atlas-mobile .mobile-empty-title { font-family: var(--mobile-font); font-size: 16px; font-weight: 700; color: var(--mobile-text-primary); margin-bottom: 6px; } body.atlas-mobile .mobile-empty-sub { font-family: var(--mobile-font); font-size: 13px; color: var(--mobile-text-muted); margin-bottom: 20px; } body.atlas-mobile .mobile-empty-clear { font-family: var(--mobile-font); font-size: 14px; font-weight: 600; padding: 10px 24px; border-radius: var(--mobile-radius-chip); border: none; background: var(--mobile-dark); color: #fff; cursor: pointer; } /* === Dashboard Stat Cards === */ body.atlas-mobile .mobile-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 var(--mobile-gutter); margin-bottom: 16px; } body.atlas-mobile .mobile-stat-card { background: var(--mobile-bg-card); border: 1px solid var(--mobile-border); border-radius: var(--mobile-radius-card); padding: 16px; position: relative; overflow: hidden; } body.atlas-mobile .mobile-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.06; pointer-events: none; } body.atlas-mobile .mobile-stat-card.tint-green::before { background: var(--mobile-green); } body.atlas-mobile .mobile-stat-card.tint-red::before { background: var(--mobile-red); } body.atlas-mobile .mobile-stat-label { font-family: var(--mobile-font); font-size: 11px; font-weight: 500; color: var(--mobile-text-muted); margin-bottom: 6px; } body.atlas-mobile .mobile-stat-value { font-family: var(--mobile-font); font-size: 28px; font-weight: 700; color: var(--mobile-text-primary); line-height: 1.1; } body.atlas-mobile .mobile-stat-delta { font-family: var(--mobile-font); font-size: 12px; font-weight: 600; margin-top: 4px; } body.atlas-mobile .mobile-stat-delta.positive { color: var(--mobile-green); } body.atlas-mobile .mobile-stat-delta.negative { color: var(--mobile-red); } body.atlas-mobile .mobile-stat-delta.neutral { color: var(--mobile-text-muted); } /* === Skeleton Loading === */ body.atlas-mobile .mobile-skeleton-line { height: 14px; background: var(--mobile-border-light); border-radius: 4px; animation: mobilePulse 1.2s ease-in-out infinite; } @keyframes mobilePulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* === Quick Prep Full-Screen Overlay === */ .mobile-prep-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1050; /* Above header (1000) but below pre-read modal (1100) */ background: var(--mobile-bg-page); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 200ms ease-out; } .mobile-prep-overlay.open { transform: translateX(0); } /* Overlay header */ .prep-overlay-header { display: flex; align-items: center; justify-content: space-between; min-height: var(--mobile-header-height); padding: 14px var(--mobile-gutter); background: var(--mobile-bg-card); border-bottom: 1px solid var(--mobile-border); flex-shrink: 0; } .prep-overlay-back { font-family: var(--mobile-font); font-size: 14px; font-weight: 600; color: var(--mobile-brand); cursor: pointer; min-width: 50px; } .prep-overlay-title { font-family: var(--mobile-font); font-size: 16px; font-weight: 700; color: var(--mobile-text-primary); text-align: center; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prep-overlay-action { min-width: 50px; text-align: right; } .prep-join-btn { font-family: var(--mobile-font); font-size: 12px; font-weight: 600; color: var(--mobile-text-primary); border: 1px solid var(--mobile-border); border-radius: var(--mobile-radius-chip); padding: 4px 12px; text-decoration: none; } /* Overlay body */ .prep-overlay-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 20px; } /* Countdown bar */ .prep-countdown-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--mobile-gutter); border-bottom: 1px solid var(--mobile-border); background: var(--mobile-bg-card); } .prep-countdown-text { font-family: var(--mobile-font); font-size: 12px; font-weight: 700; color: var(--mobile-brand); letter-spacing: 0.3px; } .prep-countdown-detail { font-family: var(--mobile-font); font-size: 13px; color: var(--mobile-text-secondary); margin-top: 2px; } .prep-avatar-stack { display: flex; } .prep-avatar-mini { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mobile-font); font-size: 10px; font-weight: 600; color: #fff; margin-left: -6px; border: 2px solid var(--mobile-bg-card); } .prep-avatar-mini:first-child { margin-left: 0; } /* Section labels */ .prep-mobile-section { padding: 16px var(--mobile-gutter) 0; } .prep-mobile-section-label { font-family: var(--mobile-font); font-size: 11px; font-weight: 600; color: var(--mobile-text-light); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; } .prep-mobile-context { font-family: var(--mobile-font); font-size: 15px; color: var(--mobile-text-primary); line-height: 1.5; } /* Metric cards row */ .prep-metric-row { display: flex; gap: 8px; padding: 16px var(--mobile-gutter) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .prep-metric-card { flex: 1; min-width: 0; background: var(--mobile-bg-card); border: 1px solid var(--mobile-border); border-radius: var(--mobile-radius-compact); padding: 12px; text-align: center; } .prep-metric-value { font-family: var(--mobile-font); font-size: 20px; font-weight: 700; color: var(--mobile-text-primary); } .prep-metric-label { font-family: var(--mobile-font); font-size: 11px; color: var(--mobile-text-muted); margin-top: 2px; } /* People card */ .prep-people-card { background: var(--mobile-bg-card); border: 1px solid var(--mobile-border); border-radius: var(--mobile-radius-card); overflow: hidden; } .prep-person-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .prep-person-row:not(:last-child) { border-bottom: 1px solid var(--mobile-border-light); } .prep-person-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mobile-font); font-size: 13px; font-weight: 600; color: #fff; flex-shrink: 0; } .prep-person-info { flex: 1; min-width: 0; } .prep-person-name { font-family: var(--mobile-font); font-size: 15px; font-weight: 600; color: var(--mobile-text-primary); } .prep-person-title { font-family: var(--mobile-font); font-size: 12px; color: var(--mobile-text-muted); margin-top: 1px; } .prep-person-link { font-family: var(--mobile-font); font-size: 11px; font-weight: 600; color: #2563eb; text-decoration: none; flex-shrink: 0; } .prep-relationship-summary { padding: 10px 16px; font-family: var(--mobile-font); font-size: 12px; color: var(--mobile-text-muted); line-height: 1.4; border-top: 1px solid var(--mobile-border-light); } /* Note cards */ .prep-note-card { background: var(--mobile-bg-card); border: 1px solid var(--mobile-border); border-radius: var(--mobile-radius-compact); padding: 12px 14px; margin-bottom: 8px; } .prep-note-author { font-family: var(--mobile-font); font-size: 11px; font-weight: 600; color: var(--mobile-text-muted); margin-bottom: 4px; } .prep-note-text { font-family: var(--mobile-font); font-size: 13px; color: var(--mobile-text-secondary); line-height: 1.4; } /* Overlay footer — action buttons */ .prep-overlay-footer { display: flex; gap: 10px; padding: 12px var(--mobile-gutter) calc(12px + var(--mobile-safe-bottom)); background: var(--mobile-bg-card); border-top: 1px solid var(--mobile-border); flex-shrink: 0; } .prep-footer-btn { flex: 1; font-family: var(--mobile-font); font-size: 15px; font-weight: 600; padding: 12px 16px; border-radius: var(--mobile-radius-card); cursor: pointer; text-align: center; border: none; } .prep-footer-btn.primary { background: var(--mobile-dark); color: #fff; } .prep-footer-btn.secondary { background: var(--mobile-bg-card); color: var(--mobile-text-primary); border: 1px solid var(--mobile-border); } /* Hide per-card Ask Atlas buttons on mobile — global pill replaces them */ .atlas-mobile .prep-toggle-link[data-action="ask-atlas"] { display: none !important; } /* --- FOUC prevention: hide desktop chrome until mobile card list renders --- */ .atlas-mobile .ag-theme-alpine, .atlas-mobile #grid-container, .atlas-mobile .screener-filters, .atlas-mobile #loading-overlay, .atlas-mobile .search-toolbar, .atlas-mobile .pagination-bar, .atlas-mobile .grid-wrapper, .atlas-mobile .column-filter-row { display: none !important; } /* Toast positioning: above mobile bottom nav */ .atlas-mobile .toast-container { bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 12px) !important; right: 16px !important; left: 16px !important; align-items: center; transition: bottom 0.25s ease; } .atlas-mobile.mobile-nav-hidden .toast-container { bottom: calc(var(--mobile-safe-bottom) + 12px) !important; } .atlas-mobile .toast { max-width: 100%; } /* Pre-auth FOUC: hide desktop chrome on small viewports before .atlas-mobile is added. Without this, the desktop header/grid flash between auth-pending removal and atlas-mobile addition. */ @media (max-width: 767px) { body.auth-pending #loading-overlay, body.auth-pending .ag-theme-alpine, body.auth-pending #grid-container, body.auth-pending .grid-wrapper, body.auth-pending .unified-header, body.auth-pending .screener-filters, body.auth-pending .search-toolbar, body.auth-pending .pagination-bar, body.auth-pending .column-filter-row { display: none !important; } } /* --- Meeting card mobile overrides --- */ /* Collapse hero card auto-expanded prep on mobile — user taps for full-screen overlay */ .atlas-mobile .meeting-card-v3.hero [id^="context-"] { display: none !important; } /* Tighten meeting card spacing */ .atlas-mobile .meeting-card-v3 { border-radius: var(--mobile-radius-card); overflow: hidden; margin-bottom: 8px; } .atlas-mobile .meeting-card-v3 .card-v3-header { padding: 12px 14px 8px; } .atlas-mobile .meeting-card-v3 .card-v3-countdown { font-size: 11px; } .atlas-mobile .meeting-card-v3 .card-v3-company { font-size: 15px; } .atlas-mobile .meeting-card-v3 .card-v3-subtitle { font-size: 12px; } /* Hide team avatars on mobile — too wide */ .atlas-mobile .meeting-card-v3 .team-avatars { display: none !important; } /* Tighten prep toggle row */ .atlas-mobile .prep-toggle-row { padding: 4px 0; gap: 8px; } .atlas-mobile .prep-toggle-link { font-size: 12px; } /* Hide side strip on mobile — takes horizontal space */ .atlas-mobile .card-side-strip { display: none !important; } /* Ensure card-v3-content takes full width when strip hidden */ .atlas-mobile .card-v3-top { display: block; } /* === Company Page — Mobile Layout === */ /* Company header — logo + name centered */ .atlas-mobile .mobile-company-header .mobile-header-center { display: flex; align-items: center; gap: 8px; max-width: 70%; overflow: hidden; flex: 1; justify-content: center; } .atlas-mobile .mobile-company-logo { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; } .atlas-mobile .mobile-company-header .mobile-header-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Hide desktop chrome that leaks through */ .atlas-mobile .company-header-section .company-links, .atlas-mobile .company-header-section .watchlist-action, .atlas-mobile .company-header-section .report-issue-btn { display: none !important; } /* Company container — full bleed */ .atlas-mobile .company-container { padding: 0 !important; max-width: 100% !important; } .atlas-mobile .company-content { padding: 0 !important; } .atlas-mobile .company-header-section { padding: 0 !important; } /* Tag chips bar below header */ .atlas-mobile .mobile-company-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px var(--mobile-gutter) 10px; } .atlas-mobile .mobile-company-tag { display: inline-block; font-family: var(--mobile-font); font-size: 11px; font-weight: 500; color: var(--mobile-text-secondary); background: var(--mobile-border-light); padding: 3px 10px; border-radius: var(--mobile-radius-chip); } /* Deal Team highlight card — left red border, expandable */ .atlas-mobile .mobile-deal-team-card { margin: 6px var(--mobile-gutter) 8px; border: 1px solid var(--mobile-border); border-left: 3px solid var(--mobile-brand); border-radius: 8px; background: var(--mobile-bg-card); overflow: hidden; } .atlas-mobile .mobile-deal-team-summary { -webkit-tap-highlight-color: transparent; } .atlas-mobile .mobile-deal-team-inner { display: flex; align-items: center; padding: 10px 14px; } .atlas-mobile .mobile-deal-team-col { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .atlas-mobile .mobile-deal-team-divider { padding-left: 14px; border-left: 1px solid var(--mobile-border); } .atlas-mobile .mobile-deal-team-expand { display: flex; align-items: center; color: var(--mobile-text-light); margin-left: 8px; flex-shrink: 0; transition: transform 0.2s ease; } .atlas-mobile .mobile-deal-team-card.expanded .mobile-deal-team-expand { transform: rotate(180deg); } .atlas-mobile .mobile-deal-team-label { font-family: var(--mobile-font); font-size: 10px; font-weight: 700; color: var(--mobile-brand); text-transform: uppercase; letter-spacing: 0.5px; } .atlas-mobile .mobile-deal-team-value { font-family: var(--mobile-font); font-size: 13px; font-weight: 600; color: var(--mobile-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Expanded details section */ .atlas-mobile .mobile-deal-team-details { border-top: 1px solid var(--mobile-border-light); padding: 8px 14px 10px; } .atlas-mobile .mobile-deal-team-detail-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; } .atlas-mobile .mobile-deal-team-detail-row:not(:last-child) { border-bottom: 1px solid var(--mobile-border-light); } .atlas-mobile .mobile-deal-team-detail-label { font-family: var(--mobile-font); font-size: 11px; font-weight: 500; color: var(--mobile-text-muted); flex-shrink: 0; margin-right: 12px; } .atlas-mobile .mobile-deal-team-detail-value { font-family: var(--mobile-font); font-size: 12px; font-weight: 600; color: var(--mobile-text-primary); text-align: right; word-break: break-word; } /* Accordion section cards */ .atlas-mobile .tab-panel { margin: 8px var(--mobile-gutter) 0 !important; background: var(--mobile-bg-card) !important; border: 1px solid var(--mobile-border) !important; border-radius: var(--mobile-radius-card) !important; overflow: hidden; } .atlas-mobile .mobile-accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .atlas-mobile .mobile-accordion-title { font-family: var(--mobile-font); font-size: 14px; font-weight: 700; color: var(--mobile-text-primary); } .atlas-mobile .mobile-accordion-arrow { color: #c7c7cc; display: flex; align-items: center; } .atlas-mobile .mobile-accordion-arrow svg { width: 16px; height: 16px; } .atlas-mobile .mobile-accordion-content { padding: 0 14px 14px; } .atlas-mobile .mobile-accordion-header:active { background: var(--mobile-bg-muted); } /* Section titles inside accordion content */ .atlas-mobile .mobile-accordion-content .section-title { font-size: 13px; font-weight: 600; color: var(--mobile-text-secondary); margin-bottom: 8px; } .atlas-mobile .mobile-accordion-content .section { margin-bottom: 12px; padding: 0; border: none; } /* Funding search input inside accordion */ .atlas-mobile .funding-search-input { width: 100%; padding: 8px 12px; font-size: 13px; border-radius: 8px; border: 1px solid var(--mobile-border); background: var(--mobile-bg-page); margin-bottom: 8px; box-sizing: border-box; } /* Expert calls inside accordion */ .atlas-mobile .expert-calls-loading { font-size: 13px; color: var(--mobile-text-muted); padding: 12px 0; } /* Hide benchmark peer selector on mobile (too wide) */ .atlas-mobile .benchmark-peer-selector { display: none !important; } /* Metrics grid — flex row, 3 across like the mock */ .atlas-mobile .metrics-grid { display: flex !important; flex-wrap: wrap; gap: 6px !important; padding: 0 !important; margin: 0; } .atlas-mobile .metric-card { flex: 1 1 calc(33.3% - 4px); min-width: 0; padding: 12px 8px !important; text-align: center; border-radius: 8px; background: var(--mobile-bg-page); border: 1px solid var(--mobile-border); display: flex; flex-direction: column; align-items: center; gap: 2px; } /* Value on top, label below (reversed from desktop) */ .atlas-mobile .metric-card .metric-value { font-size: 18px; font-weight: 700; color: var(--mobile-text-primary); order: -1; } .atlas-mobile .metric-card .metric-label { font-size: 10px; color: var(--mobile-text-light); order: 0; } .atlas-mobile .metric-card .metric-sublabel { font-size: 10px; color: var(--mobile-text-muted); order: 1; } .atlas-mobile .metric-card .metric-sublabel.investors { display: none; } /* Metric values need to handle overflow cleanly */ .atlas-mobile .metric-card .metric-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .atlas-mobile .metric-card .metric-change { font-size: 10px; font-weight: 600; order: 2; } .atlas-mobile .metric-label { font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mobile-text-muted); } .atlas-mobile .metric-value { font-size: 16px !important; font-weight: 700; } .atlas-mobile .metric-sublabel { font-size: 10px !important; } /* Overview — single column */ .atlas-mobile .overview-columns { flex-direction: column !important; } .atlas-mobile .overview-column { width: 100% !important; min-width: 0 !important; } /* Description section */ .atlas-mobile .company-description { font-size: 13px; line-height: 1.5; color: var(--mobile-text-secondary); } /* Team/leadership cards */ .atlas-mobile .executive-card { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--mobile-border-light); } .atlas-mobile .executive-card:last-child { border-bottom: none; } /* Funding rounds */ .atlas-mobile .funding-round-item { padding: 10px 0; border-bottom: 1px solid var(--mobile-border-light); } /* Hide overview-columns on mobile (leadership/investors extracted) */ .atlas-mobile .overview-columns { display: none !important; } /* Hide score tabs on mobile */ .atlas-mobile #panel-company-score, .atlas-mobile #panel-team-score { display: none !important; } /* Expert call items — links to transcripts page */ .atlas-mobile .expert-call-item { display: block; padding: 12px 0; border: none; border-bottom: 1px solid var(--mobile-border-light); border-radius: 0; background: transparent; text-decoration: none; color: inherit; } .atlas-mobile .expert-call-item:last-child { border-bottom: none; } .atlas-mobile .expert-call-item:active { background: var(--mobile-bg-muted); } .atlas-mobile .expert-call-title { font-size: 14px; font-weight: 600; color: var(--mobile-text-primary); } .atlas-mobile .expert-call-meta { font-size: 12px; color: var(--mobile-text-muted); margin-top: 2px; } /* Notes — load more pagination */ .atlas-mobile .notes-load-more { display: block; width: 100%; padding: 12px; margin-top: 8px; border: 1px solid var(--mobile-border); border-radius: var(--mobile-radius-compact); background: var(--mobile-bg-card); color: var(--mobile-text-secondary); font-size: 14px; font-weight: 500; text-align: center; cursor: pointer; } .atlas-mobile .notes-load-more:active { background: var(--mobile-bg-muted); } /* Hide create expert grid button on mobile */ .atlas-mobile #btn-create-expert-grid { display: none; } /* Charts — full width stacked */ .atlas-mobile .charts-grid { grid-template-columns: 1fr !important; } /* Hide tabs nav — accordion replaces it */ .atlas-mobile .tabs-nav { display: none !important; } /* Bottom spacing for nav bar */ .atlas-mobile .company-container { padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 16px) !important; } /* Hide desktop sidebar if present */ .atlas-mobile .company-sidebar { display: none !important; } /* === Meeting Card Mobile Styles === */ /* Hide side strip on mobile — takes horizontal space */ body.atlas-mobile .card-side-strip { display: none !important; } /* Card body takes full width when strip hidden */ body.atlas-mobile .card-v3-top { width: 100%; } /* Overflow menu button — three dots icon */ body.atlas-mobile .mobile-overflow-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: none; cursor: pointer; color: var(--mobile-text-light); flex-shrink: 0; border-radius: 6px; } body.atlas-mobile .mobile-overflow-btn:active { background: var(--mobile-bg-muted); } body.atlas-mobile .mobile-overflow-btn svg { width: 20px; height: 20px; } /* Contextual action button — Ask Atlas, Schedule Follow-up, etc. */ body.atlas-mobile .mobile-action-btn { display: flex; align-items: center; justify-content: center; width: 100%; font-family: var(--mobile-font); font-size: 13px; font-weight: 600; padding: 9px 10px; border-radius: 8px; border: 1px solid #fecaca; background: #fef2f2; color: #C41230; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.atlas-mobile .mobile-action-btn:active { background: #fee2e2; } /* Compact action button variant */ body.atlas-mobile .mobile-action-btn.compact { font-size: 12px; padding: 6px 10px; border-radius: 6px; } /* === Mobile Card Action Area === */ /* Container for action buttons in card footer */ body.atlas-mobile .mobile-card-actions { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--mobile-bg-page); border-top: 1px solid var(--mobile-border); } /* Single row of actions */ body.atlas-mobile .action-row { display: flex; gap: 8px; align-items: stretch; } /* Action button in card footer */ body.atlas-mobile .action-btn { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--mobile-font); font-size: 13px; font-weight: 600; padding: 10px 12px; border-radius: var(--mobile-radius-compact); border: 1px solid var(--mobile-border); background: var(--mobile-bg-card); color: var(--mobile-text-primary); cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.atlas-mobile .action-btn:active { background: var(--mobile-bg-muted); } /* Compact action button variant */ body.atlas-mobile .action-btn.compact { font-size: 12px; padding: 8px 10px; border-radius: 6px; } /* Pre-read action button */ body.atlas-mobile .action-btn.preread { border-color: #fecaca; background: #fef2f2; color: var(--mobile-brand); } body.atlas-mobile .action-btn.preread:active { background: #fee2e2; } /* Join action button */ body.atlas-mobile .action-btn.join { border-color: var(--mobile-border); background: var(--mobile-bg-card); color: var(--mobile-text-primary); } body.atlas-mobile .action-btn.join:active { background: var(--mobile-bg-muted); } /* Full-width join button variant */ body.atlas-mobile .action-btn.join-full { width: 100%; flex: none; border-color: var(--mobile-border); background: var(--mobile-bg-card); color: var(--mobile-text-primary); } body.atlas-mobile .action-btn.join-full:active { background: var(--mobile-bg-muted); } /* Join status indicator dot */ body.atlas-mobile .join-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mobile-green); margin-right: 4px; flex-shrink: 0; } /* === Meeting Detail Page === */ /* Full-screen detail page container */ body.atlas-mobile .meeting-detail-page { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; background: var(--mobile-bg-page); z-index: 500; overflow: hidden; } /* Scrollable content area in detail page */ body.atlas-mobile .meeting-detail-page-content { flex: 1; overflow-y: auto; padding: 0 0 var(--mobile-gutter); } /* Main card in detail page */ body.atlas-mobile .meeting-detail-card { margin: var(--mobile-gutter); border: 1px solid var(--mobile-border); border-radius: var(--mobile-radius-card); background: var(--mobile-bg-card); overflow: hidden; } /* Section label in detail page */ body.atlas-mobile .meeting-detail-section-label { font-family: var(--mobile-font); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--mobile-brand); padding: 12px 14px 4px; margin-bottom: 8px; } /* Links section in detail page */ body.atlas-mobile .meeting-detail-links { padding: 0; margin: 0; list-style: none; } /* Single link row in detail page */ body.atlas-mobile .meeting-detail-link-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--mobile-border-light); -webkit-tap-highlight-color: transparent; } body.atlas-mobile .meeting-detail-link-row:first-child { border-top: none; } body.atlas-mobile .meeting-detail-link-row:active { background: var(--mobile-bg-muted); } /* Link icon container */ body.atlas-mobile .meeting-detail-link-icon { width: 32px; height: 32px; border-radius: var(--mobile-radius-badge); background: var(--mobile-border-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } body.atlas-mobile .meeting-detail-link-icon.missing { background: #fef2f2; } body.atlas-mobile .meeting-detail-link-icon img, body.atlas-mobile .meeting-detail-link-icon svg { width: 100%; height: 100%; object-fit: cover; } /* Link info — label + value */ body.atlas-mobile .meeting-detail-link-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* Link label */ body.atlas-mobile .meeting-detail-link-label { font-family: var(--mobile-font); font-size: 13px; font-weight: 600; color: var(--mobile-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Link value — domain, email, etc. */ body.atlas-mobile .meeting-detail-link-value { font-family: var(--mobile-font); font-size: 12px; color: var(--mobile-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Badge in detail page — "Linked", "Missing", etc. */ body.atlas-mobile .meeting-detail-badge { display: inline-block; font-family: var(--mobile-font); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: var(--mobile-radius-badge); text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0; white-space: nowrap; } body.atlas-mobile .meeting-detail-badge.linked { background: #dcfce7; color: var(--mobile-green); } body.atlas-mobile .meeting-detail-badge.missing { background: #fee2e2; color: var(--mobile-red); } /* Chevron icon in link row */ body.atlas-mobile .meeting-detail-chevron { width: 16px; height: 16px; flex-shrink: 0; color: #c7c7cc; display: flex; align-items: center; justify-content: center; } body.atlas-mobile .meeting-detail-chevron svg { width: 100%; height: 100%; } /* Prep section in detail page */ body.atlas-mobile .meeting-detail-prep-row { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-top: 1px solid var(--mobile-border-light); -webkit-tap-highlight-color: transparent; } body.atlas-mobile .meeting-detail-prep-row:first-child { border-top: none; } body.atlas-mobile .meeting-detail-prep-row:active { background: var(--mobile-bg-muted); } /* Prep section title */ body.atlas-mobile .meeting-detail-prep-title { font-family: var(--mobile-font); font-size: 13px; font-weight: 600; color: var(--mobile-text-primary); } /* Prep section description */ body.atlas-mobile .meeting-detail-prep-desc { font-family: var(--mobile-font); font-size: 12px; color: var(--mobile-text-muted); line-height: 1.4; margin-top: 2px; } /* === Inferred Deal Cards (mobile) === */ body.atlas-mobile .inferred-deal-row { flex-direction: column !important; align-items: stretch !important; padding: 0 !important; gap: 0 !important; margin: 0 var(--mobile-gutter) 8px !important; } body.atlas-mobile .inferred-deal-row > div:first-child { padding: 12px 14px; } body.atlas-mobile .inferred-deal-row > div:last-child { padding: 8px 14px 10px; border-top: 1px solid #f3f4f6; display: flex !important; gap: 6px; } body.atlas-mobile .inferred-deal-row button { padding: 9px 6px !important; border-radius: 7px !important; font-size: 13px !important; } body.atlas-mobile .inferred-deal-row button[data-action="approve-deal"] { flex: 1 !important; background: #16a34a !important; color: #fff !important; } body.atlas-mobile .inferred-deal-row button[data-action="edit-deal"] { flex: 1 !important; background: #fff !important; border: 1px solid #e5e7eb !important; color: #111827 !important; } body.atlas-mobile .inferred-deal-row button[data-action="skip-deal"] { background: transparent !important; color: #9ca3af !important; padding: 9px 16px !important; } /* === PWA Install Banner === */ @keyframes pwa-slide-in { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pwa-slide-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }