FedMCP - Federal Parliamentary Information

/** * Mobile Debate Viewer Styles * Twitter/Instagram-inspired reading experience */ .mobile-debate-viewer { position: relative; min-height: 100vh; padding-bottom: 60px; /* Space for bottom nav */ } /* ============================================================================ Top Controls ============================================================================ */ .mobile-debate-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--bg-elevated, #1a1a1a); border-bottom: 1px solid var(--border-subtle, #333); position: sticky; top: 0; z-index: 50; } .mobile-debate-mode-toggle { padding: 0.5rem 1rem; background: var(--bg-overlay, #222); border: 1px solid var(--border-subtle, #333); border-radius: 20px; color: var(--text-primary, #fff); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; } .mobile-debate-mode-toggle:active { transform: scale(0.95); background: var(--accent-red, #dc2626); } .mobile-debate-filter-button { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--bg-overlay, #222); border: 1px solid var(--border-subtle, #333); border-radius: 20px; color: var(--text-primary, #fff); cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; } .mobile-debate-filter-button:active { transform: scale(0.95); } .mobile-debate-filter-badge { padding: 0.25rem 0.5rem; background: var(--accent-red, #dc2626); border-radius: 12px; font-size: 11px; font-weight: 700; } /* ============================================================================ Timeline Scrubber ============================================================================ */ .mobile-debate-timeline { position: fixed; right: 0.5rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.25rem; z-index: 40; max-height: 60vh; overflow-y: auto; padding: 0.5rem 0; /* Hide scrollbar */ scrollbar-width: none; -ms-overflow-style: none; } .mobile-debate-timeline::-webkit-scrollbar { display: none; } .mobile-debate-timeline-dot { width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .mobile-debate-timeline-dot:active { transform: scale(1.5); } /* ============================================================================ Scroll Mode ============================================================================ */ .mobile-debate-scroll-container { padding: 1rem; padding-right: 2rem; /* Space for timeline */ } /* ============================================================================ Focus Mode ============================================================================ */ .mobile-debate-focus-container { position: relative; min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; padding: 1rem; } .mobile-debate-focus-content { flex: 1; max-width: 600px; position: relative; } .mobile-debate-focus-counter { text-align: center; margin-top: 1rem; font-size: 14px; color: var(--text-tertiary, #666); font-weight: 600; } .mobile-debate-nav-button { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated, #1a1a1a); border: 1px solid var(--border-subtle, #333); border-radius: 50%; color: var(--text-primary, #fff); cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; z-index: 10; } .mobile-debate-nav-button.left { left: 1rem; } .mobile-debate-nav-button.right { right: 1rem; } .mobile-debate-nav-button:active { transform: translateY(-50%) scale(0.9); background: var(--accent-red, #dc2626); } /* ============================================================================ Filter Options ============================================================================ */ .mobile-debate-filter-options { display: flex; flex-direction: column; gap: 0.75rem; } .mobile-debate-filter-option { width: 100%; padding: 1rem; background: var(--bg-overlay, #222); border: 1px solid var(--border-subtle, #333); border-radius: 12px; color: var(--text-primary, #fff); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; } .mobile-debate-filter-option:active { transform: scale(0.98); } .mobile-debate-filter-option.active { background: var(--accent-red, #dc2626); border-color: var(--accent-red, #dc2626); } /* ============================================================================ Responsive Adjustments ============================================================================ */ @media (min-width: 768px) { .mobile-debate-scroll-container { padding: 1.5rem; padding-right: 3rem; } .mobile-debate-timeline { right: 1rem; } .mobile-debate-timeline-dot { width: 10px; height: 10px; } } @media (min-width: 1024px) { .mobile-debate-viewer { padding-bottom: 0; } .mobile-debate-timeline { display: none; } }