/* Steam 2004 Classic Green Theme - Ultra-Compact Vertical OBS Overlay */
:root {
    --steam-bg: rgba(45, 53, 41, 0.95);
    --steam-header-bg: #3c4438;
    --steam-inset-bg: #2d3529;
    --steam-border-light: #67745e;
    --steam-border-dark: #1b2019;
    --steam-text-bright: #dbe4d0;
    --steam-text-sub: #a2b195;
    --steam-accent: #8ba079;
    --steam-highlight: #c5d7b5;
    
    --font-steam: 'Tahoma', 'Verdana', sans-serif;
    --font-mono: 'Lucida Console', 'Courier New', monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0 !important; /* Sharp 90-degree corners - No rounded corners */
}

html, body.obs-body {
    background: transparent !important;
    background-color: transparent !important;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: var(--font-steam);
    color: var(--steam-text-bright);
}

/* Positioning Container */
body.obs-body {
    display: flex;
    padding: 12px;
}

body.pos-bottom-left { align-items: flex-end; justify-content: flex-start; }
body.pos-bottom-right { align-items: flex-end; justify-content: flex-end; }
body.pos-top-left { align-items: flex-start; justify-content: flex-start; }
body.pos-top-right { align-items: flex-start; justify-content: flex-end; }
body.pos-center { align-items: center; justify-content: center; }

/* Default position: bottom-left */
body:not([class*="pos-"]) {
    align-items: flex-end;
    justify-content: flex-start;
}

/* Ultra-Compact Vertical Steam 2004 Window Overlay Card */
.obs-card {
    background: var(--steam-bg);
    border-top: 2px solid var(--steam-border-light);
    border-left: 2px solid var(--steam-border-light);
    border-bottom: 2px solid var(--steam-border-dark);
    border-right: 2px solid var(--steam-border-dark);
    padding: 4px;
    width: 280px;
    max-width: 90vw;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* Completely Invisible when no sound is playing (Idle) */
.obs-card.idle {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(6px);
    pointer-events: none;
}

/* Visible when sound is playing */
.obs-card.speaking {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
}

/* Steam Window Header Bar */
.obs-header {
    background: var(--steam-header-bg);
    border-top: 1px solid var(--steam-border-light);
    border-left: 1px solid var(--steam-border-light);
    border-bottom: 1px solid var(--steam-border-dark);
    border-right: 1px solid var(--steam-border-dark);
    padding: 3px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.obs-live-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: bold;
    font-family: var(--font-steam);
    color: var(--steam-highlight);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background: var(--steam-highlight);
    animation: steamPulse 1s infinite alternate;
}

@keyframes steamPulse {
    from { opacity: 0.3; }
    to { opacity: 1; }
}



/* Body Content Area - Compact Vertical Stack */
.obs-body-content {
    background: var(--steam-inset-bg);
    border-top: 1px solid var(--steam-border-dark);
    border-left: 1px solid var(--steam-border-dark);
    border-bottom: 1px solid var(--steam-border-light);
    border-right: 1px solid var(--steam-border-light);
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.obs-speaker-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.obs-avatar {
    width: 18px;
    height: 18px;
    background: var(--steam-header-bg);
    border-top: 1px solid var(--steam-border-light);
    border-left: 1px solid var(--steam-border-light);
    border-bottom: 1px solid var(--steam-border-dark);
    border-right: 1px solid var(--steam-border-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
    font-family: var(--font-mono);
    color: var(--steam-highlight);
    flex-shrink: 0;
}

.obs-speaker-name {
    font-family: var(--font-steam);
    font-size: 11px;
    font-weight: bold;
    color: var(--steam-text-bright);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.1;
}

.obs-spoken-text {
    font-family: var(--font-steam);
    font-size: 11px;
    color: var(--steam-text-sub);
    line-height: 1.25;
    word-break: break-word;
}

/* Visualizer Bar */
.obs-visualizer-bar {
    background: var(--steam-inset-bg);
    border-top: 1px solid var(--steam-border-dark);
    border-left: 1px solid var(--steam-border-dark);
    border-bottom: 1px solid var(--steam-border-light);
    border-right: 1px solid var(--steam-border-light);
    padding: 2px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.obs-canvas {
    width: 100%;
    height: 16px;
    display: block;
}