:root{--color-bg-primary: #000000;--color-bg-secondary: #0A0A0A;--color-bg-tertiary: #141414;--color-bg-elevated: #1A1A1A;--color-accent-cyan: #00FFFF;--color-accent-pink: #FF2ECC;--color-accent-purple: #8B5CF6;--color-accent-orange: #FF6B35;--color-text-primary: #FFFFFF;--color-text-secondary: #A0A0A0;--color-text-tertiary: #606060;--color-text-disabled: #404040;--color-border-subtle: #2A2A2A;--color-border-default: #404040;--color-border-strong: #606060;--color-success: #10B981;--color-warning: #F59E0B;--color-error: #EF4444;--color-info: #3B82F6;--glow-cyan: 0 0 20px rgba(0, 255, 255, .5);--glow-pink: 0 0 20px rgba(255, 46, 204, .5);--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-family-mono: "JetBrains Mono", "Fira Code", monospace;--font-size-xs: 11px;--font-size-sm: 13px;--font-size-md: 15px;--font-size-lg: 18px;--font-size-xl: 24px;--timeline-track-height: 80px;--timeline-header-height: 48px;--timeline-ruler-height: 32px;--timeline-grid-color: #1A1A1A;--timeline-playhead-color: var(--color-accent-cyan);--waveform-color-drums: #FF6B35;--waveform-color-bass: #8B5CF6;--waveform-color-synth: #00FFFF;--waveform-color-vocals: #FF2ECC}body{margin:0;font-family:var(--font-family-sans);background-color:var(--color-bg-primary);color:var(--color-text-primary)}*{box-sizing:border-box}.observability-tab{position:fixed;top:0;right:0;bottom:0;width:800px;max-width:90vw;background-color:var(--color-bg-primary);border-left:2px solid var(--color-border-default);display:flex;flex-direction:column;z-index:2000;box-shadow:-4px 0 20px #00000080;font-family:var(--font-family-mono)}.observability-tab__header{padding:var(--space-md);background-color:var(--color-bg-elevated);border-bottom:1px solid var(--color-border-default);display:flex;justify-content:space-between;align-items:center}.observability-tab__header h2{margin:0;font-size:var(--font-size-lg);color:var(--color-accent-cyan);font-family:var(--font-family-sans)}.observability-tab__close{background:none;border:none;color:var(--color-text-primary);cursor:pointer;font-size:var(--font-size-lg);padding:var(--space-xs);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}.observability-tab__close:hover{background-color:var(--color-bg-tertiary)}.observability-tab__controls{padding:var(--space-sm);background-color:var(--color-bg-secondary);border-bottom:1px solid var(--color-border-subtle);display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap}.observability-tab__button{padding:var(--space-xs) var(--space-sm);background-color:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:4px;cursor:pointer;font-size:var(--font-size-xs);font-family:var(--font-family-sans);white-space:nowrap}.observability-tab__button:hover{background-color:var(--color-bg-elevated)}.observability-tab__button--active{background-color:var(--color-accent-cyan);color:var(--color-bg-primary);border-color:var(--color-accent-cyan)}.observability-tab__button--small{padding:2px 6px;font-size:12px}.observability-tab__select{padding:var(--space-xs) var(--space-sm);background-color:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:4px;font-size:var(--font-size-xs);cursor:pointer}.observability-tab__search{flex:1;min-width:150px;padding:var(--space-xs) var(--space-sm);background-color:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:4px;font-size:var(--font-size-xs);font-family:var(--font-family-mono)}.observability-tab__count{font-size:var(--font-size-xs);color:var(--color-text-tertiary);margin-left:auto}.observability-tab__content{flex:1;overflow:hidden;display:flex;gap:1px;background-color:var(--color-border-subtle)}.observability-tab__message-list{flex:1;overflow-y:auto;background-color:var(--color-bg-primary);padding:var(--space-xs)}.observability-tab__message{padding:var(--space-xs);margin-bottom:var(--space-xs);background-color:var(--color-bg-secondary);border-radius:4px;cursor:pointer;border:1px solid transparent;transition:border-color .2s,background-color .2s}.observability-tab__message:hover{background-color:var(--color-bg-elevated);border-color:var(--color-border-default)}.observability-tab__message--incoming{border-left:3px solid #10b981}.observability-tab__message--outgoing{border-left:3px solid #3b82f6}.observability-tab__message-header{display:flex;gap:var(--space-sm);align-items:center;margin-bottom:4px;font-size:var(--font-size-xs)}.observability-tab__timestamp{color:var(--color-text-tertiary);font-size:11px}.observability-tab__type{padding:2px 6px;border-radius:2px;font-size:10px;font-weight:600;text-transform:uppercase}.observability-tab__type--text{background-color:#3b82f633;color:#60a5fa}.observability-tab__type--binary{background-color:#a855f733;color:#c084fc}.observability-tab__direction{font-size:14px}.observability-tab__direction--incoming{color:#10b981}.observability-tab__direction--outgoing{color:#3b82f6}.observability-tab__size{color:var(--color-text-secondary);font-size:11px}.observability-tab__message-preview{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.observability-tab__message-preview code{font-family:var(--font-family-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.observability-tab__parsed{color:var(--color-text-tertiary);font-size:11px}.observability-tab__detail{width:400px;background-color:var(--color-bg-secondary);overflow-y:auto;display:flex;flex-direction:column}.observability-tab__detail-header{padding:var(--space-sm);border-bottom:1px solid var(--color-border-subtle);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background-color:var(--color-bg-elevated);z-index:1}.observability-tab__detail-header h3{margin:0;font-size:var(--font-size-sm);color:var(--color-accent-cyan);font-family:var(--font-family-sans)}.observability-tab__detail-content{padding:var(--space-sm)}.observability-tab__detail-row{padding:var(--space-xs) 0;font-size:var(--font-size-xs);color:var(--color-text-secondary);border-bottom:1px solid var(--color-border-subtle)}.observability-tab__detail-row strong{color:var(--color-text-primary);margin-right:var(--space-xs)}.observability-tab__detail-section{margin-top:var(--space-md)}.observability-tab__detail-section h4{margin:0 0 var(--space-xs) 0;font-size:var(--font-size-sm);color:var(--color-accent-cyan);font-family:var(--font-family-sans)}.observability-tab__detail-section pre{background-color:var(--color-bg-primary);padding:var(--space-sm);border-radius:4px;overflow-x:auto;font-size:var(--font-size-xs);color:var(--color-text-secondary);line-height:1.4;margin:0}.observability-tab__hexdump{font-family:Courier New,monospace;font-size:11px;line-height:1.3}.observability-tab__footer{padding:var(--space-sm);background-color:var(--color-bg-elevated);border-top:1px solid var(--color-border-default);display:flex;gap:var(--space-lg);font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.observability-tab__footer span{display:flex;align-items:center;gap:var(--space-xs)}.observability-tab__message-list::-webkit-scrollbar,.observability-tab__detail::-webkit-scrollbar{width:8px}.observability-tab__message-list::-webkit-scrollbar-track,.observability-tab__detail::-webkit-scrollbar-track{background:var(--color-bg-secondary)}.observability-tab__message-list::-webkit-scrollbar-thumb,.observability-tab__detail::-webkit-scrollbar-thumb{background:var(--color-border-default);border-radius:4px}.observability-tab__message-list::-webkit-scrollbar-thumb:hover,.observability-tab__detail::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}@media (max-width: 1200px){.observability-tab{width:700px}.observability-tab__detail{width:350px}}@media (max-width: 900px){.observability-tab{width:600px}.observability-tab__detail{width:300px}}