/* 
    Live Transcription V2 Styles
    Independent CSS with custom namespace (txv2-)
*/

/* ===================================
   Container and Layout
   =================================== */

.txv2-container {
    --txv2-primary: var(--color-accent-blue);
    --txv2-secondary: #8b5cf6;
    --txv2-success: var(--color-success);
    --txv2-warning: var(--color-warning);
    --txv2-danger: var(--color-error);
    --txv2-dark: var(--color-glass-bg);
    --txv2-light: var(--color-glass-bg-heavy);
    --txv2-border: var(--color-glass-border);
    --txv2-text: var(--color-text-primary);
    --txv2-text-secondary: var(--color-text-tertiary);
    --txv2-shadow: var(--shadow-md);
    --txv2-shadow-lg: var(--shadow-lg);
    
    position: relative;
    width: 100%;
    /* Removed max-width for full width usage */
    height: 100%; /* Use full height of container */
    min-height: 400px; /* Ensure minimum usable height */
    /* background: var(--color-bg-secondary); */
    border-radius: var(--radius-lg);
    /* box-shadow: var(--shadow-lg); */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font-family-primary);
}

/* Tab system height configuration */
.tab-content {
    height: calc(100vh - 400px); /* Adjust based on header/controls height */
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

/* Tab pane container should allow full height */
.tab-pane {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Active tab should fill available space */
.tab-pane:not(.hidden) {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* CRITICAL: Hidden tabs must be display:none to override .tab-pane display:flex */
.tab-pane.hidden {
    display: none !important;
}

/* When inside a tab pane, ensure full height */
.tab-pane .txv2-container,
#transcriptionTabContent .txv2-container {
    height: 100%;
    min-height: 400px;
    flex: 1; /* Take remaining space in flex container */
}

/* Light mode override (if needed) */
.txv2-container.light-mode {
    --txv2-dark: var(--color-glass-bg);
    --txv2-light: var(--color-glass-bg-heavy);
    --txv2-border: var(--color-glass-border);
    --txv2-text: var(--color-text-primary);
    --txv2-text-secondary: var(--color-text-tertiary);
    /* background: var(--color-bg-primary); */
}

/* ===================================
   Header
   =================================== */

.txv2-header {
    /* padding: 8px 16px; */
    /* background: rgba(30, 30, 40, 0.95); */
    /* border-bottom: 1px solid rgba(96, 165, 250, 0.2); */
    color: var(--color-white-text);
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    /* gap: 12px; */
    /* min-height: 36px; */
}

.txv2-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #93c5fd;
    letter-spacing: -0.025em;
    flex-shrink: 0;
}

/* Header Stats */
.txv2-header-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
    font-size: 13px;
}

.txv2-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.95;
}

.txv2-stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

.txv2-stat-value {
    color: white;
    font-weight: 600;
}

.txv2-stat-divider {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    user-select: none;
}

.txv2-controls {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.txv2-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    height: 24px;
}

.txv2-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(96, 165, 250, 0.3);
    color: white;
}

.txv2-btn:active {
    transform: translateY(0);
}

.txv2-icon {
    font-size: 16px;
    line-height: 1;
}

/* ===================================
   Status Bar
   =================================== */

.txv2-status-bar {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-glass-bg);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border-bottom: 1px solid var(--color-glass-border);
    display: flex;
    gap: var(--spacing-3xl);
    font-size: var(--font-size-xs);
}

.txv2-status-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.txv2-status-label {
    color: var(--txv2-text-secondary);
}

.txv2-status-value {
    color: var(--txv2-text);
    font-weight: 600;
}

/* ===================================
   Viewport and Scrolling
   =================================== */

.txv2-viewport {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /* background: linear-gradient(to bottom, var(--color-glass-bg), var(--color-bg-secondary)); */
}

.txv2-scroll-container {
    /* padding: 12px; */
    height: 100%;
}

/* Custom scrollbar */
.txv2-viewport::-webkit-scrollbar {
    width: 8px;
}

.txv2-viewport::-webkit-scrollbar-track {
    background: var(--color-bg-tertiary);
}

.txv2-viewport::-webkit-scrollbar-thumb {
    background: var(--txv2-text-secondary);
    border-radius: 4px;
}

.txv2-viewport::-webkit-scrollbar-thumb:hover {
    background: var(--txv2-text);
}

/* ===================================
   Empty State
   =================================== */

.txv2-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--color-text-tertiary);
    animation: txv2-fade-in 0.5s ease;
}

.txv2-empty-icon {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.txv2-empty-text {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
}

.txv2-empty-subtext {
    font-size: 14px;
    opacity: 0.8;
}

/* ===================================
   Tiles
   =================================== */

.txv2-tile {
    background: var(--color-glass-bg);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
    animation: txv2-slide-in 0.3s ease;
    transition: all var(--transition-normal);
    border: 1px solid var(--color-glass-border);
}

.txv2-tile:hover {
    box-shadow: var(--txv2-shadow-lg);
    transform: translateY(-2px);
}

.txv2-tile.complete {
    opacity: 0.8;
    border-left: 4px solid var(--txv2-success);
}

.txv2-tile.processing {
    border-left: 4px solid var(--txv2-warning);
}

.txv2-tile.completed {
    border-left: 4px solid var(--txv2-success);
}

/* Tile Header */
.txv2-tile-header {
    padding: 8px var(--spacing-lg);  /* Reduced vertical padding */
    background: var(--color-glass-bg);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border-bottom: 1px solid var(--color-glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.txv2-participant-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.txv2-participant-avatar {
    width: 24px;
    height: 24px;
    font-size: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--txv2-primary), var(--txv2-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.txv2-participant-name {
    font-weight: 600;
    color: var(--txv2-text);
    font-size: 14px;
}

.txv2-tile-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--txv2-text-secondary);
}

.txv2-timestamp {
    opacity: 0.8;
}

.txv2-tile-status {
    padding: 1px 6px;
    background: var(--txv2-primary);
    color: white;
    border-radius: 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tile Content */
.txv2-tile-content {
    padding: var(--spacing-lg) var(--spacing-lg);
}

.txv2-segments-container {
    line-height: 1.6;
    font-size: 14px;
    word-wrap: break-word;
}

/* Force all segment elements to be inline */
.txv2-segments-container > * {
    display: inline !important;
    vertical-align: baseline !important;
}

.txv2-segments-container .txv2-segment {
    display: inline !important;
    /* Remove any properties that might force block context */
    position: static !important;
    vertical-align: baseline !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}

.txv2-segments-container .txv2-segment-text {
    display: inline !important;
    position: static !important;
    vertical-align: baseline !important;
}

/* Tile Footer - Removed to save vertical space */
/* .txv2-tile-footer styles removed */

/* ===================================
   Segments
   =================================== */

/* Processing Level Colors */
:root {
    /* Basic provider levels */
    --txv2-level-0: #6b7280; /* No providers - gray */
    --txv2-level-1: #3b82f6; /* 1 provider - blue */
    --txv2-level-2: #10b981; /* 2+ providers consensus - green */
    
    /* Advanced processing levels */
    --txv2-level-llm: #8b5cf6; /* LLM processing - purple */
    --txv2-level-final: #f59e0b; /* Final/merged result - amber */
    
    /* Confidence-based colors */
    --txv2-confidence-low: #ef4444; /* < 50% - red */
    --txv2-confidence-medium: #f59e0b; /* 50-80% - amber */
    --txv2-confidence-high: #10b981; /* > 80% - green */
    
    /* Provider-specific colors (all text providers) */
    --txv2-provider-whisper: #3B82F6;
    --txv2-provider-deepgram: #EC4899;
    --txv2-provider-google: #EF4444;
    --txv2-provider-parakeet: #65A30D;  /* Lime green - parakeet color */
    --txv2-provider-kyutai: #06B6D4;    /* Cyan - streaming provider (Epic #419) */
    --txv2-provider-azure: #6366F1;
    --txv2-provider-assemblyai: #84CC16;
    --txv2-provider-gpt4o: #F59E0B;
    --txv2-provider-llm-merge: #8B5CF6;      /* Purple for LLM merge */
    --txv2-provider-agreement-merge: #10B981; /* Green for agreement */
    --txv2-provider-consensus: #10B981;       /* Green for consensus */
}

.txv2-segment {
    display: inline !important;
    animation: txv2-fade-in 0.3s ease;
    transition: opacity 0.3s ease-out, color 0.3s ease-out;
}

.txv2-segment-text {
    color: var(--txv2-text);
    transition: opacity 0.2s ease, color 0.2s ease, text-decoration-color 0.2s ease;
    display: inline;
}

.txv2-segment:hover .txv2-segment-text {
    background: rgba(59, 130, 246, 0.1);
    cursor: pointer;
}

/* Confidence scores removed - now shown in tooltip */

/* Processing segments - dotted underline and italic */
.txv2-segment.pending .txv2-segment-text,
.txv2-segment.processing .txv2-segment-text {
    font-style: italic;
    position: relative;
    /* Traveling white light effect on underline */
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.3) 40%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0.3) 60%,
        transparent 65%,
        transparent 100%
    );
    background-size: 200% 1px;
    background-position: -200% calc(100% + 2px);
    background-repeat: no-repeat;
    animation: txv2-underline-travel 2s linear infinite;  /* Faster, more regular pulse */
    /* Dotted baseline underline */
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(255, 255, 255, 0.2);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

/* Completed segments - no underline */
.txv2-segment.completed .txv2-segment-text,
.txv2-segment.is-final .txv2-segment-text {
    font-style: normal;
    text-decoration: none;
    opacity: 1;
}

/* ===== COMPLETED SEGMENT OVERRIDES ===== */
/* Force-remove processing styles for completed/final segments */
.txv2-segment.completed .txv2-segment-text,
.txv2-segment.is-final .txv2-segment-text {
    font-style: normal !important;
    text-decoration: none !important;
    animation: none !important;
    opacity: 1 !important;
    background-image: none !important;
    background-position: initial !important;
}

/* Remove waiting state animations for completed segments */
.txv2-segment.completed.waiting-llm .txv2-segment-text,
.txv2-segment.is-final.waiting-llm .txv2-segment-text,
.txv2-segment.completed.waiting-consensus .txv2-segment-text,
.txv2-segment.is-final.waiting-consensus .txv2-segment-text,
.txv2-segment.completed.waiting-provider .txv2-segment-text,
.txv2-segment.is-final.waiting-provider .txv2-segment-text,
.txv2-segment.completed.waiting-parakeet .txv2-segment-text,
.txv2-segment.is-final.waiting-parakeet .txv2-segment-text,
.txv2-segment.completed.waiting-deepgram .txv2-segment-text,
.txv2-segment.is-final.waiting-deepgram .txv2-segment-text,
.txv2-segment.completed.waiting-google .txv2-segment-text,
.txv2-segment.is-final.waiting-google .txv2-segment-text,
.txv2-segment.completed.waiting-kyutai .txv2-segment-text,
.txv2-segment.is-final.waiting-kyutai .txv2-segment-text,
.txv2-segment.completed.waiting-agreement .txv2-segment-text,
.txv2-segment.is-final.waiting-agreement .txv2-segment-text {
    animation: none !important;
    text-decoration: none !important;
}

/* Ensure completed segment underlines are removed */
.txv2-segment.completed .txv2-segment-text::after,
.txv2-segment.is-final .txv2-segment-text::after,
.txv2-segment.completed .txv2-segment-text::before,
.txv2-segment.is-final .txv2-segment-text::before {
    display: none !important;
}

/* Provider-specific underline colors - only for processing segments */
.txv2-segment.processing.provider-whisper .txv2-segment-text {
    text-decoration-color: var(--txv2-provider-whisper);
}

.txv2-segment.processing.provider-deepgram .txv2-segment-text {
    text-decoration-color: var(--txv2-provider-deepgram);
}

.txv2-segment.processing.provider-google .txv2-segment-text {
    text-decoration-color: var(--txv2-provider-google);
}

.txv2-segment.processing.provider-parakeet .txv2-segment-text {
    text-decoration-color: var(--txv2-provider-parakeet);
}

.txv2-segment.processing.provider-kyutai .txv2-segment-text {
    text-decoration-color: var(--txv2-provider-kyutai);
}

.txv2-segment.processing.provider-azure .txv2-segment-text {
    text-decoration-color: var(--txv2-provider-azure);
}

.txv2-segment.processing.provider-assemblyai .txv2-segment-text {
    text-decoration-color: var(--txv2-provider-assemblyai);
}

.txv2-segment.processing.provider-gpt4o .txv2-segment-text,
.txv2-segment.processing.provider-gpt4o-transcribe .txv2-segment-text {
    text-decoration-color: var(--txv2-provider-gpt4o);
}

.txv2-segment.processing.provider-llm-merge .txv2-segment-text,
.txv2-segment.processing.provider-llm-merged .txv2-segment-text {
    text-decoration-color: var(--txv2-provider-llm-merge);
}

.txv2-segment.processing.provider-agreement-merge .txv2-segment-text {
    text-decoration-color: var(--txv2-provider-agreement-merge);
}

.txv2-segment.processing.provider-consensus .txv2-segment-text {
    text-decoration-color: var(--txv2-provider-consensus);
}

.txv2-segment.failed {
    color: var(--txv2-danger);
    text-decoration: line-through;
}

/* Remove border-bottom as we're using text-decoration now */

/* LLM segments handled by text-decoration */

/* Removed border-bottom for final segments - clean appearance */

/* Waiting animations removed - now using provider-specific pulse animations */

/* Pulsing animations between processing levels */
/* Removed old pulsing animations that affected background */

/* Confidence-based coloring */
.txv2-segment.confidence-low .txv2-segment-text {
    opacity: 0.7;
}

.txv2-segment.confidence-medium .txv2-segment-text {
    opacity: 0.85;
}

.txv2-segment.confidence-high .txv2-segment-text {
    opacity: 1;
}

/* ===================================
   Processing Indicator
   =================================== */

/* Processing indicator - Removed with footer */
/* .txv2-processing-indicator and .txv2-processing-dot styles removed */

/* ===================================
   Provider List
   =================================== */

.txv2-provider-list {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-left: 8px;
}

.txv2-provider-badge {
    padding: 1px 5px;
    color: white;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    opacity: 0.9;
    transition: all 0.2s ease;
}

.txv2-provider-badge:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Provider badge colors matching processing levels */
.txv2-provider-badge.provider-single {
    background: var(--txv2-level-1); /* Blue for single provider */
}

.txv2-provider-badge.provider-consensus {
    background: var(--txv2-level-2); /* Green for consensus */
}

.txv2-provider-badge.provider-llm {
    background: var(--txv2-level-llm); /* Purple for LLM */
}

.txv2-provider-badge.provider-final {
    background: var(--txv2-level-final); /* Amber for final */
}

.txv2-provider-badge.failed {
    background: var(--txv2-danger);
    opacity: 0.6;
}

/* ===================================
   Settings Panel
   =================================== */

.txv2-settings-panel {
    position: absolute;
    top: 60px;
    right: var(--spacing-2xl);
    width: 300px;
    background: var(--color-glass-bg-heavy);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    animation: txv2-slide-down 0.3s ease;
    border: 1px solid var(--color-glass-border);
}

.txv2-settings-header {
    padding: var(--spacing-xl);
    background: var(--color-glass-bg);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border-bottom: 1px solid var(--color-glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.txv2-settings-header h4 {
    margin: 0;
    font-size: 16px;
}

.txv2-settings-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--txv2-text-secondary);
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.txv2-settings-content {
    padding: 16px;
}

.txv2-setting-group {
    margin-bottom: 12px;
}

.txv2-setting-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--txv2-text);
    cursor: pointer;
}

.txv2-setting-label input[type="checkbox"] {
    cursor: pointer;
}

.txv2-setting-label input[type="range"] {
    flex: 1;
    margin-left: 8px;
}

/* ===================================
   Animations
   =================================== */

@keyframes txv2-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes txv2-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes txv2-slide-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes txv2-pulse {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* ===================================
   Segment Tooltip
   =================================== */

/* Segment Tooltip - Dense and Refined */
.txv2-segment-tooltip {
    position: absolute;
    z-index: var(--z-tooltip);
    background: var(--color-glass-bg-heavy);
    backdrop-filter: blur(var(--blur-xl));
    -webkit-backdrop-filter: blur(var(--blur-xl));
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    min-width: 280px;
    max-width: 420px;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    animation: txv2-fade-in 0.2s ease;
}

.txv2-tooltip-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    gap: var(--spacing-md);
}

.txv2-tooltip-participant {
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    flex: 1;
}

.txv2-tooltip-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 500;
}

.txv2-tooltip-status.processing {
    background: #3b82f6;
    color: white;
}

.txv2-tooltip-status.is-final {
    background: #10b981;
    color: white;
}

.txv2-tooltip-status.failed {
    background: #ef4444;
    color: white;
}

.txv2-tooltip-pin {
    background: none;
    border: none;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
    margin-right: 4px;
}

.txv2-tooltip-pin:hover {
    color: #2563eb;
    transform: scale(1.1);
}

.txv2-tooltip-close {
    background: none;
    border: none;
    color: #666;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    line-height: 1;
    pointer-events: auto;
    position: relative;
    z-index: 10001;
}

.txv2-tooltip-close:hover {
    color: #fff;
}

.txv2-tooltip-content {
    padding: 10px;
    max-height: 350px;
    overflow-y: auto;
}

/* Info Icon and Tooltip for Tile Headers */
.txv2-info-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

.txv2-info-icon {
    font-size: 12px;
    color: var(--txv2-text-secondary);
    cursor: help;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.txv2-info-icon:hover {
    opacity: 1;
}

.txv2-info-tooltip {
    position: fixed;
    /* Position will be set dynamically by JavaScript */
    background: var(--color-glass-bg-heavy);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-glass-border);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10000; /* Increased z-index to ensure it's above everything */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: none; /* Prevent tooltip from interfering with hover */
}

.txv2-info-icon-wrapper:hover .txv2-info-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Arrow for tooltip */
.txv2-info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-glass-border);
}

/* Provider list in tooltip */
.txv2-info-tooltip .txv2-provider-list {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

/* Status badge in tooltip */
.txv2-info-tooltip .txv2-status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
}

.txv2-info-tooltip .txv2-tile-status {
    display: inline-block !important;
    padding: 2px 6px;
    background: var(--txv2-primary);
    color: white;
    border-radius: 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Compact metadata row */
.txv2-tooltip-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2a2a2a;
}

.txv2-meta-item {
    color: #888;
    font-size: 10px;
}

.txv2-meta-item strong {
    color: #fff;
    font-weight: 500;
}

/* Text display */
.txv2-tooltip-text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    padding: var(--spacing-md);
    background: var(--color-bg-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    font-style: italic;
    border-left: 3px solid var(--color-accent-blue);
}

/* Providers section */
.txv2-tooltip-providers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding: 4px 0;
    border-bottom: 1px solid #2a2a2a;
}

.txv2-providers-title {
    color: #888;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.txv2-providers-count {
    background: #3b82f6;
    color: white;
    padding: 1px 5px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
}

.txv2-tooltip-providers {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Compact provider row */
.txv2-provider-row {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    transition: all var(--transition-normal);
}

.txv2-provider-row:hover {
    background: var(--color-glass-bg-hover);
    border-color: var(--color-accent-blue);
}

.txv2-provider-row.failed {
    opacity: 0.6;
    border-color: #4a1919;
}

.txv2-provider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.txv2-provider-name {
    padding: 2px 6px;
    border-radius: 3px;
    color: white;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.txv2-provider-confidence {
    color: #888;
    font-size: 10px;
}

.txv2-provider-text {
    color: #d0d0d0;
    font-size: 11px;
    line-height: 1.3;
    padding: 4px 6px;
    background: #0a0a0a;
    border-radius: 3px;
    margin: 4px 0;
}

.txv2-provider-meta {
    font-size: 9px;
    color: #666;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Keep legacy section styles for backwards compatibility */
.txv2-tooltip-section {
    margin-bottom: 12px;
    color: #f3f4f6;
    font-size: 13px;
    line-height: 1.5;
}

.txv2-tooltip-section strong {
    color: #3b82f6;
    display: inline;
    margin-right: 8px;
    padding: 4px 6px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 4px;
}

/* LLM Reasoning display */
.txv2-llm-reasoning {
    margin: 4px 0;
    padding: 6px;
    background: rgba(139, 92, 246, 0.1);  /* Light purple background */
    border-left: 2px solid var(--txv2-provider-llm-merge);
    border-radius: 3px;
    font-size: 10px;
    line-height: 1.4;
}

.txv2-reasoning-label {
    font-weight: bold;
    color: var(--txv2-provider-llm-merge);
    display: inline-block;
    margin-right: 6px;
}

.txv2-reasoning-text {
    color: #d1d5db;
    font-style: italic;
}

/* Tooltip scrollbar */
.txv2-tooltip-content::-webkit-scrollbar {
    width: 6px;
}

.txv2-tooltip-content::-webkit-scrollbar-track {
    background: #111827;
}

.txv2-tooltip-content::-webkit-scrollbar-thumb {
    background: var(--color-surface-hover, rgba(45, 50, 65, 0.7));
    border-radius: 3px;
}

.txv2-tooltip-content::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* ===================================
   Auto-Scroll Indicator
   =================================== */

.txv2-scroll-indicator {
    position: absolute;
    bottom: var(--spacing-xl);
    left: var(--spacing-xl);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-glass-bg-heavy);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    z-index: var(--z-sticky);
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.txv2-scroll-indicator::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: txv2-blink 2s ease-in-out infinite;
}

.txv2-scroll-indicator.active {
    color: #10b981;
    border-color: #10b981;
}

.txv2-scroll-indicator.active::before {
    background: #10b981;
}

.txv2-scroll-indicator.paused {
    color: #f59e0b;
    border-color: #f59e0b;
}

.txv2-scroll-indicator.paused::before {
    background: #f59e0b;
    animation: none;
}

.txv2-scroll-indicator.user-paused {
    color: #f59e0b;
    border-color: #f59e0b;
}

.txv2-scroll-indicator.user-paused::before {
    background: #f59e0b;
    animation: none;
}

/* Smooth transition for color changes */
.txv2-scroll-indicator.txv2-transition {
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

/* Pulse animation when auto-scroll resumes */
@keyframes txv2-pulse-resume {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.txv2-scroll-indicator.txv2-pulse-resume {
    animation: txv2-pulse-resume 0.6s ease 2;
}

/* Auto-scroll notification removed - now using pulse animation on indicator */

@keyframes txv2-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* ===================================
   Utility Classes
   =================================== */

.txv2-hidden {
    display: none !important;
}

.txv2-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.txv2-highlight {
    background: rgba(251, 191, 36, 0.2) !important;
    animation: txv2-highlight-pulse 1s ease;
}

@keyframes txv2-highlight-pulse {
    0% { background: rgba(251, 191, 36, 0.4); }
    100% { background: rgba(251, 191, 36, 0.2); }
}

/* Blinking cursor animation */
@keyframes txv2-cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.txv2-cursor {
    display: inline;
    width: 2px;
    height: 1em;
    background-color: #10B981;
    animation: txv2-cursor-blink 1s infinite;
    vertical-align: middle;
    margin-left: 1px;
}

/* Typing animation for new text */
@keyframes txv2-typing {
    from { max-width: 0; }
    to { max-width: 100%; }
}

.txv2-typing-text {
    display: inline-block;
    overflow: hidden;
    white-space: normal;
    animation: txv2-typing 0.5s steps(40, end) forwards;
}

/* Smooth segment transitions - merged with main segment styles above */

.txv2-segment.new-segment {
    animation: txv2-segment-appear 0.4s ease-out forwards;
    opacity: 0;
}

@keyframes txv2-segment-appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Smooth text updates - already defined above */

.txv2-segment-text.updating {
    animation: txv2-text-update 0.3s ease;
}

@keyframes txv2-text-update {
    0% { opacity: 1; }
    50% { opacity: 0.6; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

/* Provider-specific pulsing animations */
/* Applied dynamically based on active and waiting providers */

/* Pulse to specific providers - inherits current color and pulses to expected */
/* Traveling underline pulse animation - reversed direction (right to left) */
@keyframes txv2-underline-travel {
    0% {
        background-position: 200% 100%;
    }
    100% {
        background-position: -100% 100%;
    }
}

/* Provider-specific waiting animations - subtle underline color pulse only */
@keyframes txv2-pulse-to-parakeet {
    0%, 100% {
        text-decoration-color: currentColor;
    }
    50% {
        text-decoration-color: var(--txv2-provider-parakeet);
    }
}

@keyframes txv2-pulse-to-deepgram {
    0%, 100% {
        text-decoration-color: currentColor;
    }
    50% {
        text-decoration-color: var(--txv2-provider-deepgram);
    }
}

@keyframes txv2-pulse-to-google {
    0%, 100% {
        text-decoration-color: currentColor;
    }
    50% {
        text-decoration-color: var(--txv2-provider-google);
    }
}

@keyframes txv2-pulse-to-kyutai {
    0%, 100% {
        text-decoration-color: currentColor;
    }
    50% {
        text-decoration-color: var(--txv2-provider-kyutai);
    }
}

@keyframes txv2-pulse-to-llm {
    0%, 100% {
        text-decoration-color: currentColor;
    }
    50% {
        text-decoration-color: var(--txv2-provider-llm-merge);
    }
}

@keyframes txv2-pulse-to-agreement {
    0%, 100% {
        text-decoration-color: currentColor;
    }
    50% {
        text-decoration-color: var(--txv2-provider-agreement-merge);
    }
}

/* Apply animations based on waiting state - underline only */
.txv2-segment.waiting-parakeet .txv2-segment-text {
    animation: txv2-pulse-to-parakeet 2s ease-in-out infinite;
    text-decoration: underline;
    text-decoration-style: solid;
    text-underline-offset: 2px;
}

.txv2-segment.waiting-deepgram .txv2-segment-text {
    animation: txv2-pulse-to-deepgram 2s ease-in-out infinite;
    text-decoration: underline;
    text-decoration-style: solid;
    text-underline-offset: 2px;
}

.txv2-segment.waiting-google .txv2-segment-text {
    animation: txv2-pulse-to-google 2s ease-in-out infinite;
    text-decoration: underline;
    text-decoration-style: solid;
    text-underline-offset: 2px;
}

.txv2-segment.waiting-kyutai .txv2-segment-text {
    animation: txv2-pulse-to-kyutai 2s ease-in-out infinite;
    text-decoration: underline;
    text-decoration-style: solid;
    text-underline-offset: 2px;
}

.txv2-segment.waiting-llm .txv2-segment-text {
    animation: txv2-pulse-to-llm 2s ease-in-out infinite;
    text-decoration: underline;
    text-decoration-style: solid;
    text-underline-offset: 2px;
}

.txv2-segment.waiting-agreement .txv2-segment-text {
    animation: txv2-pulse-to-agreement 2s ease-in-out infinite;
    text-decoration: underline;
    text-decoration-style: solid;
    text-underline-offset: 2px;
}

/* ===================================
   Parallel STT Processing States
   =================================== */

/* Processing state with subtle animation - removed light background */
.txv2-segment.processing {
    opacity: 0.85;
    /* Removed light gradient background that was showing on dark theme */
    /* Use a subtle border pulse instead of background shimmer */
    border-left: 2px solid rgba(59, 130, 246, 0.5);
    animation: processing-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
    padding: 2px 4px 2px 6px; /* Adjusted padding for border */
}

/* Processing pulse animation for dark theme compatibility */
@keyframes processing-pulse {
    0%, 100% { 
        border-left-color: rgba(59, 130, 246, 0.3);
        opacity: 0.85;
    }
    50% { 
        border-left-color: rgba(59, 130, 246, 0.8);
        opacity: 1;
    }
}

/* Spinner animation */
.spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 4px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Interim results styling */
.txv2-segment.interim {
    opacity: 0.8;
    font-style: italic;
}

.interim-indicator {
    color: var(--txv2-text-secondary);
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Error state styling */
.txv2-segment.error {
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 3px solid var(--txv2-danger);
    padding: 2px 4px;
    border-radius: 4px;
}

/* Complete state (final results) */
.txv2-segment.complete {
    opacity: 1;
    background: transparent;
}

/* ===================================
   Filtered Provider Styles (Issue #433)
   ===================================
   Visual indicators for filtered/discarded providers
*/

.txv2-filter-badge {
    display: inline-block;
    background: #6b7280;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
}

.txv2-filter-reason {
    font-size: 10px;
    color: rgba(175, 190, 225, 0.68);
    font-style: italic;
    padding: 4px 8px;
    margin-top: 2px;
}

.txv2-provider-row.filtered {
    opacity: 0.6;
}

.txv2-provider-row.filtered .txv2-provider-name {
    text-decoration: line-through !important;
}