Spaces:
Sleeping
Sleeping
| """Custom Gradio theme for Analog Town retro scanner interface.""" | |
| import gradio as gr | |
| # Retro scanner color palette | |
| COLORS = { | |
| "bg_dark": "#0a0e14", | |
| "bg_panel": "#111820", | |
| "bg_card": "#161d27", | |
| "amber": "#ffb347", | |
| "amber_dim": "#c78a30", | |
| "amber_glow": "#ffd699", | |
| "green": "#39ff14", | |
| "green_dim": "#2eb810", | |
| "red": "#ff4444", | |
| "red_dim": "#cc3333", | |
| "text_primary": "#e0d6c8", | |
| "text_secondary": "#8a8070", | |
| "text_muted": "#5a5248", | |
| "border": "#2a3040", | |
| "border_glow": "#ffb34733", | |
| } | |
| CUSTOM_CSS = """ | |
| /* ===== ANALOG TOWN RETRO SCANNER THEME ===== */ | |
| /* Import retro fonts */ | |
| @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;700&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Outfit:wght@300;400;500;600;700&display=swap'); | |
| /* Global overrides — use full viewport width */ | |
| html, body { | |
| background: #0a0e14 !important; | |
| margin: 0 !important; | |
| } | |
| .gradio-container { | |
| background: #0a0e14 !important; | |
| font-family: 'IBM Plex Mono', monospace !important; | |
| max-width: 100% !important; | |
| width: 100% !important; | |
| padding: 14px 24px !important; | |
| } | |
| /* Stretch Gradio's inner main content to full width too */ | |
| .gradio-container > .main, | |
| .gradio-container .contain, | |
| .gradio-container .wrap.svelte-1ipelgc, | |
| .gradio-container .app { | |
| max-width: 100% !important; | |
| width: 100% !important; | |
| } | |
| /* Tighten Gradio's default spacing so the whole app fits in one viewport */ | |
| .gradio-container .gap { | |
| gap: 10px !important; | |
| } | |
| .gradio-container .form, | |
| .gradio-container .block { | |
| gap: 8px !important; | |
| } | |
| /* Main header — compacted so map+receiver fit above the fold */ | |
| #header-block { | |
| background: linear-gradient(135deg, #111820 0%, #0a0e14 100%) !important; | |
| border: 1px solid #2a3040 !important; | |
| border-radius: 12px !important; | |
| padding: 14px 24px !important; | |
| margin-bottom: 12px !important; | |
| box-shadow: 0 0 30px rgba(255, 179, 71, 0.08), inset 0 1px 0 rgba(255,255,255,0.03) !important; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| #header-block::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, #ffb347, #39ff14, #ffb347, transparent); | |
| opacity: 0.6; | |
| } | |
| /* Header text */ | |
| .header-title { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 22px; | |
| font-weight: 700; | |
| color: #ffb347; | |
| letter-spacing: 5px; | |
| text-transform: uppercase; | |
| text-shadow: 0 0 20px rgba(255, 179, 71, 0.4); | |
| margin: 0; | |
| line-height: 1.2; | |
| } | |
| .header-subtitle { | |
| font-family: 'Crimson Pro', serif; | |
| font-size: 14px; | |
| font-style: italic; | |
| color: #8a8070; | |
| letter-spacing: 2px; | |
| margin-top: 2px; | |
| } | |
| .header-status { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 11px; | |
| color: #39ff14; | |
| letter-spacing: 1px; | |
| animation: blink-signal 2s ease-in-out infinite; | |
| margin-top: 2px; | |
| } | |
| @keyframes blink-signal { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| /* Panel styling */ | |
| .panel-box { | |
| background: #111820 !important; | |
| border: 1px solid #2a3040 !important; | |
| border-radius: 10px !important; | |
| padding: 20px !important; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; | |
| } | |
| .panel-box .panel-header { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: #c78a30; | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| border-bottom: 1px solid #2a3040; | |
| padding-bottom: 10px; | |
| margin-bottom: 16px; | |
| } | |
| /* Input fields */ | |
| .gradio-container input, | |
| .gradio-container textarea, | |
| .gradio-container select { | |
| background: #161d27 !important; | |
| border: 1px solid #2a3040 !important; | |
| color: #e0d6c8 !important; | |
| font-family: 'IBM Plex Mono', monospace !important; | |
| border-radius: 6px !important; | |
| } | |
| .gradio-container input:focus, | |
| .gradio-container textarea:focus { | |
| border-color: #ffb347 !important; | |
| box-shadow: 0 0 12px rgba(255, 179, 71, 0.15) !important; | |
| } | |
| /* Buttons */ | |
| .transmit-btn { | |
| background: linear-gradient(135deg, #ffb347 0%, #ff8c00 100%) !important; | |
| color: #0a0e14 !important; | |
| font-family: 'IBM Plex Mono', monospace !important; | |
| font-weight: 700 !important; | |
| letter-spacing: 2px !important; | |
| text-transform: uppercase !important; | |
| border: none !important; | |
| border-radius: 8px !important; | |
| padding: 12px 24px !important; | |
| font-size: 14px !important; | |
| box-shadow: 0 0 20px rgba(255, 179, 71, 0.3) !important; | |
| transition: all 0.3s ease !important; | |
| } | |
| .transmit-btn:hover { | |
| box-shadow: 0 0 30px rgba(255, 179, 71, 0.5) !important; | |
| transform: translateY(-1px) !important; | |
| } | |
| .export-btn { | |
| background: linear-gradient(135deg, #2a3040 0%, #1a2030 100%) !important; | |
| color: #39ff14 !important; | |
| font-family: 'IBM Plex Mono', monospace !important; | |
| font-weight: 500 !important; | |
| letter-spacing: 1px !important; | |
| border: 1px solid #39ff1433 !important; | |
| border-radius: 6px !important; | |
| transition: all 0.3s ease !important; | |
| } | |
| .export-btn:hover { | |
| border-color: #39ff14 !important; | |
| box-shadow: 0 0 15px rgba(57, 255, 20, 0.2) !important; | |
| } | |
| /* Radio receiver panel */ | |
| #receiver-panel { | |
| background: linear-gradient(180deg, #111820 0%, #0d1219 100%) !important; | |
| border: 1px solid #2a3040 !important; | |
| border-radius: 12px !important; | |
| padding: 24px !important; | |
| box-shadow: 0 0 40px rgba(255, 179, 71, 0.06), inset 0 0 60px rgba(0,0,0,0.3) !important; | |
| position: relative; | |
| } | |
| #receiver-panel::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 12px; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 2px, | |
| rgba(0,0,0,0.03) 2px, | |
| rgba(0,0,0,0.03) 4px | |
| ); | |
| pointer-events: none; | |
| } | |
| /* Frequency display */ | |
| .freq-display { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 36px; | |
| font-weight: 700; | |
| color: #ffb347; | |
| text-align: center; | |
| text-shadow: 0 0 20px rgba(255, 179, 71, 0.5); | |
| padding: 16px; | |
| background: #0a0e14; | |
| border: 1px solid #2a3040; | |
| border-radius: 8px; | |
| margin: 8px 0; | |
| letter-spacing: 3px; | |
| } | |
| .freq-label { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 14px; | |
| color: #39ff14; | |
| text-align: center; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| margin-top: 4px; | |
| } | |
| /* Monologue display */ | |
| .monologue-box { | |
| font-family: 'Crimson Pro', serif; | |
| font-size: 18px; | |
| line-height: 1.6; | |
| color: #e0d6c8; | |
| font-style: italic; | |
| padding: 20px; | |
| background: rgba(255, 179, 71, 0.03); | |
| border-left: 3px solid #ffb347; | |
| border-radius: 0 8px 8px 0; | |
| margin: 12px 0; | |
| min-height: 80px; | |
| } | |
| /* Signal strength */ | |
| .signal-bar { | |
| display: inline-block; | |
| width: 6px; | |
| height: 16px; | |
| margin: 0 2px; | |
| background: #2a3040; | |
| border-radius: 2px; | |
| transition: all 0.3s ease; | |
| } | |
| .signal-bar.active { | |
| background: #39ff14; | |
| box-shadow: 0 0 6px rgba(57, 255, 20, 0.5); | |
| } | |
| /* Emotion bars */ | |
| .emotion-grid { | |
| display: grid; | |
| grid-template-columns: 100px 1fr 40px; | |
| gap: 6px; | |
| align-items: center; | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 11px; | |
| color: #8a8070; | |
| } | |
| .emotion-bar-bg { | |
| height: 8px; | |
| background: #1a2030; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .emotion-bar-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| transition: width 0.5s ease; | |
| } | |
| /* Static noise animation */ | |
| .static-text { | |
| font-family: 'IBM Plex Mono', monospace; | |
| color: #5a5248; | |
| animation: static-flicker 0.15s infinite; | |
| font-size: 14px; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| @keyframes static-flicker { | |
| 0% { opacity: 0.5; } | |
| 25% { opacity: 0.8; } | |
| 50% { opacity: 0.3; } | |
| 75% { opacity: 0.9; } | |
| 100% { opacity: 0.6; } | |
| } | |
| /* Trace inspector */ | |
| .trace-json { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 11px; | |
| color: #39ff14; | |
| background: #0a0e14; | |
| padding: 16px; | |
| border-radius: 6px; | |
| border: 1px solid #2a3040; | |
| overflow-x: auto; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| /* Agent cards */ | |
| .agent-card { | |
| background: #161d27; | |
| border: 1px solid #2a3040; | |
| border-radius: 8px; | |
| padding: 12px 16px; | |
| margin: 6px 0; | |
| transition: all 0.3s ease; | |
| } | |
| .agent-card:hover { | |
| border-color: #ffb34766; | |
| box-shadow: 0 0 12px rgba(255, 179, 71, 0.1); | |
| } | |
| .agent-freq { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 12px; | |
| color: #ffb347; | |
| font-weight: 700; | |
| } | |
| .agent-name { | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 14px; | |
| color: #e0d6c8; | |
| font-weight: 500; | |
| } | |
| .agent-role { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 11px; | |
| color: #8a8070; | |
| } | |
| /* Slider customization */ | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 100%; | |
| height: 8px; | |
| background: linear-gradient(90deg, #2a3040, #1a2030); | |
| border-radius: 4px; | |
| outline: none; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 24px; | |
| height: 24px; | |
| background: radial-gradient(circle, #ffb347, #ff8c00); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| box-shadow: 0 0 12px rgba(255, 179, 71, 0.5); | |
| transition: box-shadow 0.2s ease; | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| box-shadow: 0 0 20px rgba(255, 179, 71, 0.8); | |
| } | |
| /* Accordion styling */ | |
| .gradio-accordion { | |
| background: #111820 !important; | |
| border: 1px solid #2a3040 !important; | |
| border-radius: 8px !important; | |
| } | |
| .gradio-accordion > .label-wrap { | |
| color: #c78a30 !important; | |
| font-family: 'IBM Plex Mono', monospace !important; | |
| font-size: 12px !important; | |
| letter-spacing: 2px !important; | |
| text-transform: uppercase !important; | |
| } | |
| /* Safety disclaimer */ | |
| .safety-footer { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 10px; | |
| color: #5a5248; | |
| text-align: center; | |
| padding: 16px; | |
| border-top: 1px solid #2a3040; | |
| margin-top: 20px; | |
| letter-spacing: 1px; | |
| line-height: 1.8; | |
| } | |
| /* Progress indicator */ | |
| .progress-text { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 12px; | |
| color: #39ff14; | |
| letter-spacing: 1px; | |
| } | |
| /* Scrollbar styling */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0a0e14; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #2a3040; | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #3a4050; | |
| } | |
| /* Label overrides */ | |
| .gradio-container label { | |
| color: #c78a30 !important; | |
| font-family: 'IBM Plex Mono', monospace !important; | |
| font-size: 11px !important; | |
| letter-spacing: 2px !important; | |
| text-transform: uppercase !important; | |
| } | |
| /* Dropdown styling */ | |
| .gradio-container .wrap { | |
| background: #161d27 !important; | |
| } | |
| /* Markdown text */ | |
| .gradio-container .prose { | |
| color: #e0d6c8 !important; | |
| } | |
| .gradio-container .prose h1, | |
| .gradio-container .prose h2, | |
| .gradio-container .prose h3 { | |
| color: #ffb347 !important; | |
| font-family: 'IBM Plex Mono', monospace !important; | |
| } | |
| /* Loading animation */ | |
| .loading-dots::after { | |
| content: ''; | |
| animation: loading-dots 1.5s steps(4, end) infinite; | |
| } | |
| @keyframes loading-dots { | |
| 0% { content: ''; } | |
| 25% { content: '.'; } | |
| 50% { content: '..'; } | |
| 75% { content: '...'; } | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .header-title { | |
| font-size: 18px; | |
| letter-spacing: 3px; | |
| } | |
| .freq-display { | |
| font-size: 24px; | |
| } | |
| .monologue-box { | |
| font-size: 15px; | |
| } | |
| } | |
| /* ===== 2D PIXEL-ART TOWN MAP STYLES ===== */ | |
| .hidden-component { | |
| display: none !important; | |
| } | |
| .town-map-wrapper { | |
| position: relative; | |
| display: inline-block; | |
| width: 100%; | |
| margin-top: 10px; | |
| overflow: hidden; | |
| border-radius: 8px; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.5); | |
| } | |
| .town-map-bg { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| image-rendering: pixelated; | |
| image-rendering: crisp-edges; | |
| border: 2px solid #2a3040; | |
| border-radius: 8px; | |
| pointer-events: none; | |
| } | |
| .agent-sprite { | |
| position: absolute; | |
| transform: translate(-50%, -50%); | |
| cursor: pointer; | |
| z-index: 10; | |
| transition: all 0.2s ease-in-out; | |
| } | |
| .sprite-avatar { | |
| width: 26px; | |
| height: 26px; | |
| background-color: #0a0e14; | |
| background-size: cover; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| border: 2px solid #39ff14; | |
| border-radius: 50%; | |
| box-shadow: 0 0 8px #39ff14; | |
| image-rendering: pixelated; | |
| image-rendering: crisp-edges; | |
| animation: pulse-radar 2s infinite; | |
| transition: border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease; | |
| } | |
| .anomaly-flag { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| width: 16px; | |
| height: 16px; | |
| background: #0a0e14; | |
| border: 1.5px solid #ffb347; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 9px; | |
| line-height: 1; | |
| z-index: 15; | |
| box-shadow: 0 0 8px rgba(255, 179, 71, 0.7); | |
| animation: anomaly-pulse 1.4s ease-in-out infinite; | |
| pointer-events: none; | |
| } | |
| @keyframes anomaly-pulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| box-shadow: 0 0 6px rgba(255, 179, 71, 0.5); | |
| } | |
| 50% { | |
| transform: scale(1.18); | |
| box-shadow: 0 0 14px rgba(255, 179, 71, 0.9); | |
| } | |
| } | |
| .agent-sprite.selected-sprite .sprite-avatar { | |
| border-color: #ffb347; | |
| box-shadow: 0 0 12px #ffb347; | |
| animation: pulse-selected 1.5s infinite; | |
| } | |
| .sprite-label { | |
| position: absolute; | |
| bottom: -22px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(17, 24, 32, 0.95); | |
| color: #e0d6c8; | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 9px; | |
| font-weight: 500; | |
| padding: 1px 6px; | |
| border: 1px solid #2a3040; | |
| border-radius: 3px; | |
| white-space: nowrap; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.3); | |
| opacity: 0.85; | |
| transition: all 0.2s ease; | |
| } | |
| .agent-sprite:hover .sprite-avatar { | |
| transform: scale(1.25); | |
| background-color: #ffd699; | |
| box-shadow: 0 0 15px #ffd699; | |
| } | |
| .agent-sprite:hover .sprite-label { | |
| color: #39ff14; | |
| border-color: #39ff14; | |
| opacity: 1; | |
| z-index: 20; | |
| } | |
| @keyframes pulse-radar { | |
| 0% { | |
| box-shadow: 0 0 0 0px rgba(57, 255, 20, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 8px rgba(57, 255, 20, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0px rgba(57, 255, 20, 0); | |
| } | |
| } | |
| @keyframes pulse-selected { | |
| 0% { | |
| box-shadow: 0 0 0 0px rgba(255, 179, 71, 0.8); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(255, 179, 71, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0px rgba(255, 179, 71, 0); | |
| } | |
| } | |
| /* ===== NEW LAYOUT: CONTROL BAR ===== */ | |
| #control-bar { | |
| background: linear-gradient(180deg, #111820 0%, #0d1219 100%) !important; | |
| border: 1px solid #2a3040 !important; | |
| border-radius: 12px !important; | |
| padding: 14px 18px !important; | |
| margin-bottom: 14px !important; | |
| box-shadow: 0 0 24px rgba(255, 179, 71, 0.05), inset 0 1px 0 rgba(255,255,255,0.03) !important; | |
| } | |
| #control-bar .form, | |
| #control-bar .block { | |
| gap: 6px !important; | |
| } | |
| .ctrl-label { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 10px; | |
| color: #c78a30; | |
| letter-spacing: 3px; | |
| margin-bottom: 4px; | |
| text-transform: uppercase; | |
| } | |
| .sub-header { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 10px; | |
| color: #c78a30; | |
| letter-spacing: 2px; | |
| margin: 6px 0 4px 0; | |
| text-transform: uppercase; | |
| } | |
| /* Control bar inputs — compact, consistent height */ | |
| #control-bar input, | |
| #control-bar textarea, | |
| #control-bar select, | |
| #control-bar .wrap { | |
| font-size: 12px !important; | |
| line-height: 1.3 !important; | |
| } | |
| #control-bar textarea { | |
| resize: none !important; | |
| } | |
| #sim-status textarea { | |
| font-size: 10px !important; | |
| color: #39ff14 !important; | |
| background: #0a0e14 !important; | |
| } | |
| #transmit-btn { | |
| width: 100% !important; | |
| padding: 10px 16px !important; | |
| font-size: 13px !important; | |
| margin-bottom: 4px !important; | |
| } | |
| /* ===== NEW LAYOUT: MAIN STAGE (map | receiver) ===== */ | |
| #main-stage { | |
| align-items: stretch !important; | |
| gap: 14px !important; | |
| } | |
| #map-panel, | |
| #receiver-panel { | |
| background: linear-gradient(180deg, #111820 0%, #0d1219 100%) !important; | |
| border: 1px solid #2a3040 !important; | |
| border-radius: 12px !important; | |
| padding: 14px 18px !important; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; | |
| height: 100% !important; | |
| display: flex !important; | |
| flex-direction: column !important; | |
| } | |
| /* Children of map/receiver panels — let the right child grow to fill */ | |
| #map-panel > *, | |
| #receiver-panel > * { | |
| flex-shrink: 0; | |
| } | |
| /* The map and the monologue are the "stretch to fill" components */ | |
| #receiver-panel #monologue { | |
| flex: 1 1 auto !important; | |
| display: flex !important; | |
| flex-direction: column !important; | |
| justify-content: center !important; | |
| min-height: 120px !important; | |
| } | |
| #receiver-panel #monologue .monologue-box { | |
| max-height: none !important; | |
| } | |
| #receiver-panel #monologue .static-text { | |
| flex: 1 1 auto; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* The dossier accordion takes remaining space in the map column */ | |
| #dossier-accordion { | |
| flex: 1 1 auto !important; | |
| display: flex !important; | |
| flex-direction: column !important; | |
| min-height: 120px !important; | |
| } | |
| #dossier-accordion > .label-wrap { | |
| flex-shrink: 0; | |
| } | |
| #map-panel .panel-header, | |
| #receiver-panel .panel-header { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 11px; | |
| color: #c78a30; | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| margin-bottom: 10px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid #2a3040; | |
| } | |
| /* Constrain the map so it doesn't push the dossier off-screen */ | |
| #town-map { | |
| max-height: 420px; | |
| overflow: hidden; | |
| border-radius: 8px; | |
| } | |
| #town-map .town-map-wrapper { | |
| width: 100%; | |
| max-height: 420px; | |
| overflow: hidden; | |
| } | |
| #town-map .town-map-bg { | |
| width: 100%; | |
| max-height: 420px; | |
| object-fit: cover; | |
| object-position: center; | |
| } | |
| /* Dossier — scrolls inside its accordion so the column stays predictable */ | |
| #agent-profile { | |
| max-height: 280px; | |
| overflow-y: auto; | |
| padding-right: 4px; | |
| } | |
| #dossier-accordion { | |
| margin-top: 10px !important; | |
| } | |
| /* Receiver — tighter spacing so all stations fit in viewport */ | |
| #receiver-panel .freq-display { | |
| font-size: 28px !important; | |
| padding: 10px 16px !important; | |
| margin: 4px 0 !important; | |
| letter-spacing: 3px !important; | |
| } | |
| #receiver-panel #freq-slider { | |
| margin-top: 4px !important; | |
| } | |
| #receiver-panel .monologue-box { | |
| font-size: 15px !important; | |
| line-height: 1.5 !important; | |
| padding: 14px 16px !important; | |
| min-height: 70px !important; | |
| max-height: 160px !important; | |
| overflow-y: auto !important; | |
| margin: 10px 0 !important; | |
| } | |
| #receiver-panel .static-text { | |
| padding: 14px !important; | |
| font-size: 13px !important; | |
| } | |
| /* Compact emotion bars for side-by-side layout */ | |
| #emotions .emotion-grid { | |
| grid-template-columns: 64px 1fr 32px !important; | |
| gap: 4px !important; | |
| font-size: 10px !important; | |
| margin-bottom: 3px !important; | |
| } | |
| #emotions .emotion-bar-bg { | |
| height: 6px !important; | |
| } | |
| /* Compact actions panel */ | |
| #actions { | |
| font-size: 11px !important; | |
| } | |
| #actions > div > div { | |
| margin-bottom: 5px !important; | |
| line-height: 1.4 !important; | |
| } | |
| /* Bottom stage spacing */ | |
| #bottom-stage { | |
| margin-top: 14px !important; | |
| } | |
| /* Wider viewport: keep main stage tall and aligned to fit one screen */ | |
| @media (min-width: 1100px) { | |
| #map-panel, | |
| #receiver-panel { | |
| min-height: 620px; | |
| } | |
| /* Cap the map so the dossier always shows below it */ | |
| #town-map, | |
| #town-map .town-map-wrapper, | |
| #town-map .town-map-bg { | |
| max-height: 360px !important; | |
| min-height: 260px !important; | |
| } | |
| /* Dossier always visible with a guaranteed strip below the map */ | |
| #dossier-accordion { | |
| min-height: 220px !important; | |
| } | |
| #agent-profile { | |
| max-height: 220px !important; | |
| min-height: 160px !important; | |
| } | |
| } | |
| /* Narrower viewport: let columns wrap naturally and remove forced heights */ | |
| @media (max-width: 1099px) { | |
| #main-stage { | |
| flex-wrap: wrap !important; | |
| } | |
| #map-panel, | |
| #receiver-panel { | |
| min-height: auto !important; | |
| } | |
| #town-map, | |
| #town-map .town-map-wrapper, | |
| #town-map .town-map-bg { | |
| max-height: 320px !important; | |
| } | |
| } | |
| /* ===== WAVE 3: TIMELINE STRIP ===== */ | |
| #timeline-strip { | |
| width: 100%; | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: nowrap; | |
| overflow-x: auto; | |
| gap: 8px; | |
| padding: 8px 12px; | |
| background: linear-gradient(180deg, #0d1219 0%, #111820 100%); | |
| border: 1px solid #2a3040; | |
| border-radius: 10px; | |
| margin-bottom: 10px; | |
| box-sizing: border-box; | |
| scrollbar-width: thin; | |
| scrollbar-color: #2a3040 #0a0e14; | |
| min-height: 54px; | |
| align-items: center; | |
| } | |
| .timeline-empty { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 11px; | |
| color: #5a5248; | |
| letter-spacing: 1px; | |
| padding: 6px 0; | |
| flex: 1; | |
| text-align: center; | |
| } | |
| .timeline-pill { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 2px; | |
| background: #161d27; | |
| border: 1px solid #2a3040; | |
| border-radius: 8px; | |
| padding: 5px 10px 5px 8px; | |
| cursor: pointer; | |
| min-width: 100px; | |
| max-width: 160px; | |
| flex-shrink: 0; | |
| transition: border-color 0.2s ease, box-shadow 0.2s ease; | |
| user-select: none; | |
| } | |
| .timeline-pill:hover { | |
| border-color: #ffb34766; | |
| box-shadow: 0 0 10px rgba(255, 179, 71, 0.12); | |
| } | |
| .timeline-pill.active { | |
| background: rgba(255, 179, 71, 0.07); | |
| border-color: #ffb347; | |
| box-shadow: 0 0 14px rgba(255, 179, 71, 0.25); | |
| } | |
| .pill-day { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 9px; | |
| font-weight: 700; | |
| color: #ffb347; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| } | |
| .timeline-pill:not(.active) .pill-day { | |
| color: #8a8070; | |
| } | |
| .pill-title { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 10px; | |
| color: #e0d6c8; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 140px; | |
| } | |
| .timeline-pill:not(.active) .pill-title { | |
| color: #5a5248; | |
| } | |
| .pill-anomaly { | |
| position: absolute; | |
| top: 3px; | |
| right: 4px; | |
| font-size: 8px; | |
| color: #ffb347; | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-weight: 700; | |
| line-height: 1; | |
| } | |
| .day-badge { | |
| position: absolute; | |
| top: 10px; | |
| right: 12px; | |
| background: #0a0e14; | |
| border: 1px solid #ffb347; | |
| border-radius: 6px; | |
| padding: 3px 10px; | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: #ffb347; | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| text-shadow: 0 0 10px rgba(255, 179, 71, 0.4); | |
| box-shadow: 0 0 12px rgba(255, 179, 71, 0.15); | |
| z-index: 20; | |
| pointer-events: none; | |
| } | |
| /* ===== CREATIVE MODE ===== */ | |
| #creative-mode { | |
| background: linear-gradient(180deg, #111820 0%, #0d1219 100%) !important; | |
| border: 1px solid rgba(255, 179, 71, 0.35) !important; | |
| border-radius: 10px !important; | |
| margin-bottom: 10px !important; | |
| box-shadow: 0 0 18px rgba(255, 179, 71, 0.06) !important; | |
| } | |
| #creative-mode > .label-wrap { | |
| font-family: 'IBM Plex Mono', monospace !important; | |
| font-size: 11px !important; | |
| color: #ffb347 !important; | |
| letter-spacing: 2px !important; | |
| text-transform: uppercase !important; | |
| } | |
| #creative-json { | |
| font-family: 'IBM Plex Mono', monospace !important; | |
| font-size: 11px !important; | |
| background: #0a0e14 !important; | |
| border: 1px solid #2a3040 !important; | |
| border-radius: 6px !important; | |
| } | |
| #creative-status { | |
| font-family: 'IBM Plex Mono', monospace !important; | |
| font-size: 11px !important; | |
| color: #8a8070 !important; | |
| margin-top: 4px !important; | |
| } | |
| """ | |