/**
 * SenScript - Centralized CSS Styles
 * Clean, consistent typography and component styling
 */

/* ============================================================================
   CSS VARIABLES - Consistent Design System
   ============================================================================ */

:root {
    /* Border Radius System */
    --radius-sm: 8px;     /* Small elements */
    --radius-md: 12px;    /* Standard elements */
    --radius-lg: 16px;    /* Large elements */
    --radius-xl: 20px;    /* Input toggles, special buttons */
    --radius-round: 50%;  /* Circular buttons */
    
    /* Standard Font Sizes */
    --font-xs: 0.8em;     /* Transcript text */
    --font-sm: 1em;       /* Buttons */
    --font-md: 1.2em;     /* Standard text */
    
    /* Glassmorphism System - Reduce redundancy */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-bg-hover: rgba(255, 255, 255, 0.2);
    --glass-border: 1px solid rgba(255, 255, 255, 0.2);
    --glass-blur: blur(20px);
    --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    --glass-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15);
    --glass-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   BASE STYLES
   ============================================================================ */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 25%, #3b82f6 50%, #1d4ed8 75%, #1e3a8a 100%);
    min-height: 100vh;
    color: white;
    overflow-x: hidden;
    font-size: var(--font-md);
}

/* Material Symbols Base Style - Consistent defaults */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: 100;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

/* Unified button and dropdown systems removed - reverted to original styling */

/* ============================================================================
   LEGACY BUTTON STYLES (to be gradually replaced)
   ============================================================================ */

/* Circular icon buttons */
.icon-button {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    color: white;
    cursor: pointer;
    transition: var(--glass-transition);
    font-size: var(--font-sm);
}

.icon-button:hover {
    background: var(--glass-bg-hover);
    transform: scale(1.1);
}

.icon-button .material-symbols-outlined {
    font-size: 20px;
    font-weight: 100;
}

/* Input toggle buttons - keep form but 20px radius */
.input-toggle-button {
    border-radius: var(--radius-xl);
    padding: 8px 16px;
    font-size: var(--font-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-toggle-button .material-symbols-outlined {
    font-size: 18px;
    font-weight: 100;
}

.glass-button {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    transition: var(--glass-transition);
    box-shadow: var(--glass-shadow);
    font-size: var(--font-sm);
}

.glass-button:hover {
    background: var(--glass-bg-hover);
    transform: scale(1.02);
    box-shadow: var(--glass-shadow-hover);
}

.export-button {
    width: 100%;
    padding: 20px;
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    color: white;
    border-radius: var(--radius-xl);
}

.save-button {
    width: 100%;
    padding: 16px 24px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    color: white;
    font-size: var(--font-sm);
    font-weight: 700;
    cursor: pointer;
    transition: var(--glass-transition);
    margin-top: 24px;
    box-shadow: var(--glass-shadow);
}

.model-button {
    padding: 16px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    color: #f1f5f9;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    font-size: var(--font-sm);
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

/* ============================================================================
   TRANSCRIPT STYLES - Compact Design (no containers, 3 text sizes)
   ============================================================================ */

/* Main transcript container - allows user scrolling but auto-scrolls on new content */
.transcript-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;       /* Allow user scrolling */
    scroll-behavior: smooth; /* Smooth auto-scrolling */
}

/* Compact sentence container */
.transcript-sentences-compact {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push sentences toward bottom (current line) */
    gap: 8px;
    padding: 12px 16px 8px 16px; /* Less bottom padding */
    flex: 1; /* Takes available space, pushing current line to bottom */
    overflow-y: hidden; /* No scroll needed with 3-sentence max */
    min-height: 80px; /* Space for 3 lines */
    max-height: 120px; /* Limit height to prevent overflow beyond 3 sentences */
}

/* Compact sentence styling - no backgrounds, just clean text */
.transcript-sentence-compact {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
    transition: all 0.3s ease;
    opacity: 0.4; /* Default low opacity */
    font-size: 0.75em; /* Smallest default size */
}

/* Three-tier hierarchy with progressive font sizes and line heights */
.transcript-sentence-compact.sentence-newest {
    opacity: 1.0;           /* Full brightness - white */
    font-size: 0.9em;       /* Largest text */
    line-height: 1.3;       /* Comfortable reading */
    font-weight: 500;       /* Slightly bold */
    color: #ffffff;
}

.transcript-sentence-compact.sentence-middle {
    opacity: 1.0;           /* Keep white, not dimmed */
    font-size: 0.8em;       /* Medium text */
    line-height: 1.25;      /* Tighter line height */
    font-weight: 400;       /* Normal weight */
    color: #ffffff;
}

.transcript-sentence-compact.sentence-oldest {
    opacity: 0.6;           /* Only oldest is dimmed */
    font-size: 0.7em;       /* Smallest text */
    line-height: 1.2;       /* Most compact */
    font-weight: 300;       /* Light weight */
    color: #ffffff;
}

/* Optimized flag and text styling - minimize flag width, maximize text */
.sentence-flag-compact {
    font-size: 0.65em;      /* Much smaller flag */
    opacity: 0.7;           /* More subtle */
    width: 12px;            /* Fixed small width */
    flex-shrink: 0;
    text-align: center;
    margin-right: 6px;      /* Minimal spacing */
}

.sentence-text-compact {
    flex: 1;                /* Take all remaining width */
    color: #ffffff;
    /* Text now gets full width minus tiny flag */
}

/* Current line (interim text) styling - always at bottom */
.transcript-current-line {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0; /* Never shrinks, always maintains size */
    min-height: 40px; /* Minimum space for current line */
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.02); /* Very subtle background */
}

.interim-text-compact {
    font-size: 1.0em;       /* Regular size as requested */
    font-weight: 400 !important;  /* Regular font weight - override any parent */
    color: #ffffff;
    opacity: 0.95;          /* Slightly transparent */
    display: inline;
    font-style: normal !important;  /* No italics - force override */
}

/* Removed letter-by-letter animation - now uses simple text display */

@keyframes subtle-cursor-blink {
    0%, 70% { 
        opacity: 1;
        transform: scaleY(1);
    }
    85%, 100% {
        opacity: 0.3;
        transform: scaleY(0.95);
    }
}

/* Removed letter-appear animation - using simple text display now */

.interim-cursor-compact {
    color: #3b82f6;
    animation: subtle-cursor-blink 1.5s ease-in-out infinite;
    font-size: 1.1em;
    margin-left: 1px;
    display: inline-block;
    transform-origin: bottom;
}

/* Removed old stretch-cursor animation */

/* Compact placeholder */
.transcript-placeholder-compact {
    text-align: center;
    padding: 16px;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    transition: opacity 0.3s ease;
}

/* Hide placeholder when transcription is running */
.transcript-placeholder-compact.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Active state for current line */
.transcript-current-line.active-compact {
    border-top-color: rgba(59, 130, 246, 0.3);
}

/* Individual segment status line integrated into each segment */
.segment-status-line {
    padding: 4px 0 0 0;
    font-size: 0.55em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.4);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-variant: normal; /* No small caps */
    letter-spacing: 0.5px;
    font-weight: 500;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 6px;
    text-align: right;
}

.segment-main-content {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

/* Rhythm visualization dots */
.rhythm-dots {
    font-size: 0.8em;
    color: rgba(16, 185, 129, 0.8);
    letter-spacing: 2px;
    margin-left: 8px;
    font-family: monospace;
    flex-shrink: 0;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(16, 185, 129, 0.3);
}

.rhythm-segment .rhythm-dots {
    color: rgba(16, 185, 129, 0.6);
}

/* Rhythm segment specific styling - borderless like cards */
.rhythm-segment {
    border-left: none; /* Remove accent border to match cards */
    padding-left: 0; /* Remove extra padding */
}

/* ============================================================================
   RHYTHM-BASED TRANSCRIPT SEGMENTATION STYLES
   ============================================================================ */

/* Main rhythm transcript container structure - reduce spacing */
.finalized-segments {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Match card spacing */
    padding: 0; /* Remove extra padding - parent already has 20px */
    overflow-y: auto;
    max-height: 400px; /* Increased from 250px to handle large text blocks */
    min-height: 60px; /* Minimum space for content */
    flex: 1; /* Take available space */
}

/* Placeholder within rhythm segments area - match cards placeholder styling */
.finalized-segments .transcript-placeholder {
    text-align: center;
    opacity: 0.5;
    padding: 40px 20px;
    font-size: 1.2em;
    color: rgba(255, 255, 255, 1);
    line-height: 1.4;
    font-style: normal;
}

/* Individual finalized segment - clean text only */
.finalized-segment {
    background: none; /* No background */
    border: none; /* No border */
    border-radius: 0; /* No radius */
    padding: 0; /* Zero padding - parent provides spacing */
    transition: none; /* No transitions */
    opacity: 1; /* Ensure visibility */
    width: 100%; /* Full width */
    backdrop-filter: none; /* No backdrop blur */
}

/* Segment with plop animation */
.segment-plop {
    animation: segmentPlop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes segmentPlop {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.0);
        opacity: 1;
    }
}

/* Segment content styling - matching card readability */
.segment-text {
    font-size: 1.0em;   /* Readable size like cards */
    line-height: 1.4;   /* Better line spacing */
    color: rgba(255, 255, 255, 0.95); /* Match card text visibility */
    margin-bottom: 8px; /* Better spacing */
    font-style: normal; /* No italics */
    font-weight: 400;   /* Regular weight */
}

.segment-status {
    display: flex;
    align-items: center;
    gap: 4px; /* Reduced gap */
    font-size: 0.5em; /* Slightly smaller */
    color: rgba(255, 255, 255, 0.5);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-variant: normal; /* No small caps */
    letter-spacing: 0.1px; /* Reduced letter spacing */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 2px; /* Reduced padding */
    margin-top: 2px; /* Reduced margin */
}

.segment-flag {
    font-size: 0.8em;
}

.segment-dots {
    font-family: monospace;
    color: rgba(16, 185, 129, 0.9);
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 1.1em;
    text-shadow: 0 0 3px rgba(16, 185, 129, 0.4);
}

.segment-lang, .segment-duration, .segment-time {
    font-weight: 500;
}

.card-icon {
    color: #f59e0b;
    font-size: 0.9em;
    margin-left: auto;
}

/* Pending line animation area - perfectly centered behind interim area with enhanced blur */
.pending-line-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%; /* More centered, contained within interim area */
    height: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.7; /* Slightly more visible */
    z-index: -1; /* Behind interim area background */
    pointer-events: none; /* Don't interfere with clicks */
    filter: blur(1px); /* Enhanced blur for better background effect */
    backdrop-filter: blur(2px); /* Additional backdrop blur */
}

/* The pending line that grows from center - PRD compliant */
.pending-line {
    width: 100%;
    height: 2px;
    position: relative;
    display: flex;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

/* Per PRD: 1-2px thick line that grows from center over 5 seconds */
.line-progress {
    height: 2px; /* PRD spec: 1-2px thickness */
    background: rgba(59, 130, 246, 0.35); /* Theme accent at 25-40% opacity per PRD */
    width: 0%;
    margin: 0 auto;
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(59, 130, 246, 0.2);
    position: relative;
    transition: width 5s linear; /* 5 second growth animation */
    transform-origin: center; /* Grow from center */
}

@keyframes progress-fill-and-fade {
    0% {
        width: 0%;
        opacity: 1;
    }
    80% {
        width: 100%;
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0.3;
    }
}

.line-progress::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    width: 1px;
    height: 100%;
    background: rgba(59, 130, 246, 0.8);
    border-radius: 0.5px;
    animation: progress-pulse-with-fade 5s linear;
}

@keyframes progress-pulse-with-fade {
    0%, 80% { 
        opacity: 1; 
        transform: scaleY(1);
        animation: progress-pulse 1s ease-in-out infinite alternate;
    }
    81%, 100% {
        opacity: 0.3;
        transform: scaleY(0.8);
    }
}

@keyframes progress-pulse {
    0% { opacity: 0.7; transform: scaleY(1); }
    100% { opacity: 1; transform: scaleY(1.2); }
}

/* Pending line finalizing state */
.pending-line.finalizing {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Fixed interim area at bottom - spans full width like cards container */
.interim-area {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    height: 54px;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 27px; /* Half of height (54px ÷ 2 = 27px) for all corners */
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    /* Create stacking context for pending line to sit behind */
}

/* Light mode interim area - reduce shadow */
.light .interim-area {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.interim-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
    z-index: 2; /* Above the pending line */
}

.interim-controls .control-element {
    min-width: auto;
    padding: 6px 12px;
    font-size: 11px;
    height: 24px;
    border-radius: 12px; /* radius = 1/2 height (24px ÷ 2 = 12px) - perfect pill shape */
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px; /* Add gap for icon and text */
}

.interim-controls .control-element:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

/* Smaller world language icon specifically - only for language selector */
.interim-controls .control-element #transcriptLanguageFlag.material-symbols-outlined,
.interim-area .interim-controls #transcriptLanguageFlag.material-symbols-outlined,
#interimArea #transcriptLanguageFlag.material-symbols-outlined,
#cardLanguageFlag.material-symbols-outlined {
    font-size: 12px !important; /* FIXED: Smaller world icon (was 16px) */
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 12px !important;
    height: 12px !important;
    height: 16px !important;
}

/* Hover states handled by unified button system */

.interim-text {
    font-size: 1.0em;   /* Regular size as requested */
    color: rgba(255, 255, 255, 0.9);
    font-style: normal; /* No italics as requested */
    font-weight: 400;   /* Regular font weight as requested */
    flex: 1;
    display: inline;
    text-align: left;
    padding-left: 8px;
    transition: none;   /* Remove transitions for cleaner appearance */
    position: relative;
    z-index: 2; /* Above the pending line */
}

.interim-text:empty::before {
    content: "Listening for speech...";
    color: rgba(255, 255, 255, 0.4);
    font-style: normal;
}

/* Right side controls in interim area */
.interim-right-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
    z-index: 2; /* Above the pending line */
    margin-right: -5px; /* Move 5px closer to the right edge */
}

/* Mini start button in interim area */
.start-button-mini {
    width: 32px;
    height: 32px;
    border-radius: 16px; /* Perfect circle */
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10b981;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.start-button-mini:hover {
    background: rgba(16, 185, 129, 0.3);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.start-button-mini.recording {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
    animation: recording-pulse-mini 1.5s ease-in-out infinite;
}

.start-button-mini.recording:hover {
    background: rgba(239, 68, 68, 0.3);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

@keyframes recording-pulse-mini {
    0%, 100% {
        opacity: 0.9;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* ============================================================================
   CARD MODE TOGGLE STYLES
   ============================================================================ */

/* Simple card mode toggle button */
.card-mode-toggle {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.card-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* CheatCard mode - light orange backdrop */
.card-mode-toggle.cheat-mode {
    background: rgba(251, 146, 60, 0.2) !important;
    border: 1px solid rgba(251, 146, 60, 0.3) !important;
    color: #fed7aa !important;
    box-shadow: 0 2px 8px rgba(251, 146, 60, 0.15) !important;
}

.card-mode-toggle.cheat-mode:hover {
    background: rgba(251, 146, 60, 0.25) !important;
}

/* Light theme adjustments */
.light .card-mode-toggle {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1f2937 !important;
}

.light .card-mode-toggle:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

.light .card-mode-toggle.cheat-mode {
    background: rgba(251, 146, 60, 0.15) !important;
    border: 1px solid rgba(251, 146, 60, 0.25) !important;
    color: #ea580c !important;
    box-shadow: 0 2px 8px rgba(251, 146, 60, 0.1) !important;
}

.light .card-mode-toggle.cheat-mode:hover {
    background: rgba(251, 146, 60, 0.2) !important;
}

/* ============================================================================
   LEGACY TRANSCRIPT STYLES (maintained for compatibility)
   ============================================================================ */

.transcript-sentence {
    padding: 0; /* Zero padding - parent provides spacing */
    margin: 8px 0; /* Spacing between lines */
    border-radius: 0; 
    background: none; /* No background */
    border: none; /* No borders */
    color: rgba(255, 255, 255, 0.95); /* Text color only */
    font-size: 1.0em; /* Standard text size */
    line-height: 1.4; /* Readable line height */
    opacity: 1; /* Full visibility */
    display: block;
}

.transcript-sentence.sentence-current {
    opacity: 1.0;
    font-size: 0.9em;
    background: rgba(59, 130, 246, 0.1);
}

.transcript-sentence.sentence-recent {
    opacity: 0.9;
    font-size: 0.85em;
}

.transcript-placeholder {
    text-align: center;
    padding: 20px;
    font-size: var(--font-md);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

.transcript-placeholder small {
    font-size: var(--font-md);
    display: block;
    margin-top: 8px;
    opacity: 0.8;
}

/* ============================================================================
   LIGHT THEME OVERRIDES
   ============================================================================ */

.light .icon-button {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #374151;
}

.light .icon-button:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #1f2937;
}

.light .audio-circle {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
}

.light .audio-circle:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.8);
}

.light .audio-circle.active {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    color: #3b82f6;
}

.light .level-dot {
    background: rgba(0, 0, 0, 0.2);
}

.light .transcript-sentence {
    background: rgba(0, 0, 0, 0.05);
    color: #374151;
}

.light .transcript-placeholder {
    color: rgba(0, 0, 0, 0.6);
}

.light .export-button {
    color: #1f2937;
}

/* ============================================================================
   AUDIO TOGGLE STYLES - Two Circles (54px height)
   ============================================================================ */

.audio-toggle-circles {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1001; /* Above interim area to ensure clickability */
}

.audio-circle {
    width: 60px;
    height: 60px;
    min-width: 60px; /* Prevent shrinking */
    min-height: 60px; /* Prevent shrinking */
    border-radius: 50% !important; /* Perfect circle */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: var(--font-sm);
    padding: 0 !important; /* Remove any padding that makes it elliptical */
    margin: 0 !important; /* Remove any margin that affects shape */
    box-sizing: border-box; /* Ensure borders don't affect size */
    flex: none !important; /* Prevent flex from stretching */
    flex-shrink: 0; /* Prevent shrinking */
}

.audio-circle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
    transform: scale(1.05);
    animation: pulse-glow 1.5s ease-in-out infinite;
}

.audio-circle.active {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    color: #3b82f6;
    animation: active-pulse 2s ease-in-out infinite;
}

.audio-circle .material-symbols-outlined {
    font-size: 24px;
    font-weight: 100;
}

/* Start Button Container */
.start-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.record-button-large {
    width: 120px;
    height: 120px;
    border-radius: 50% !important; /* Perfect circle like mobile - override glass-button */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.record-button-large:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    animation: button-hover-pulse 2s ease-in-out infinite;
}

.record-button-large:active {
    transform: scale(0.98);
}

.record-button-large.recording {
    border-radius: 30px !important; /* Rounded square when recording like mobile */
    animation: recordingPulse 2s ease-in-out infinite, recording-glow 1.5s ease-in-out infinite alternate;
}

/* Record icon styling */
.record-icon {
    font-size: 32px;
    color: #10b981;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.record-button-large.recording .record-icon {
    color: #ef4444;
    animation: recording-pulse 1.2s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes recordingPulse {
    0%, 100% { 
        opacity: 0.9;
    }
    50% { 
        opacity: 1;
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.3);
    }
}

@keyframes active-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.7), 0 0 30px rgba(59, 130, 246, 0.4);
        transform: scale(1.02);
    }
}

@keyframes button-hover-pulse {
    0%, 100% {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }
    50% {
        box-shadow: 0 16px 50px rgba(59, 130, 246, 0.2), 0 12px 40px rgba(0, 0, 0, 0.15);
    }
}

@keyframes recording-glow {
    0% {
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.4), 0 8px 32px rgba(0, 0, 0, 0.1);
    }
    100% {
        box-shadow: 0 0 40px rgba(239, 68, 68, 0.8), 0 0 60px rgba(239, 68, 68, 0.4), 0 8px 32px rgba(0, 0, 0, 0.2);
    }
}

/* Level Meter Container - positioned between audio selector and start button */
.level-meter-container {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    height: 40px; /* Fixed height for consistent spacing */
}

.level-meter-container.active {
    opacity: 1;
}

/* Legacy overlay styles - kept for backward compatibility */
.level-meter-overlay {
    position: absolute;
    top: -60px; /* More spacing to match audio circles distance */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.level-meter-overlay.active {
    opacity: 1;
}

.audio-level-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    opacity: 0.8; /* Make visible by default */
    transition: opacity 0.3s ease;
}

.level-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: rgba(156, 163, 175, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.15s ease;
}

/* Active dots show theme color with better visibility */
.level-dot.active {
    background-color: #10b981; /* Theme green */
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    border-color: rgba(16, 185, 129, 0.4);
}

.light .level-dot.active {
    background-color: #059669;
    box-shadow: 0 0 8px rgba(5, 150, 105, 0.6);
    border-color: rgba(5, 150, 105, 0.4);
}

/* Audio level visualization uses dynamic height scaling via inline styles */

/* ============================================================================
   CARD STYLES - Enhanced for CheatCard vs FlashCard differentiation
   ============================================================================ */

.card-source {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    padding: 6px 0 0 0;
    background: transparent;
    border-radius: 0;
    margin-top: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-variant: normal; /* No small caps */
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Card Answer Label - matches transcript typography */
.card-answer-label {
    font-weight: 600;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Card separator dots between metadata items */
.card-separator {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 4px;
    font-size: 10px;
}

/* CheatCard content styling - preserve emoji formatting */
.cheat-content {
    line-height: 1.6;
    font-size: 14px;
}

.cheat-content .card-answer-content {
    /* Preserve emoji line structure for cheatcards */
    white-space: pre-line;
}

/* FlashCard content styling - paragraph format */
.flash-content {
    line-height: 1.7;
    font-size: 13px;
}

.flash-content .card-answer-content {
    /* Standard paragraph formatting for flashcards */
    text-align: left;
}

/* ============================================================================
   CARD STYLING & ANIMATIONS
   ============================================================================ */

/* Base card styling - original simple layout */
.card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    min-height: 80px;
    color: rgba(255, 255, 255, 0.95) !important;
    overflow: visible;
}

/* Simple card elements */
.card-question {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 12px;
    line-height: 1.4;
}

.card-answer-content {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin-bottom: 12px;
    flex: 1;
}

.card-source {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 8px;
    margin-top: auto;
}

.card-type {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-time {
    opacity: 0.8;
}

.card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Legacy card styles - keeping for compatibility but unused in 3-box layout */

/* Card Animation States */
.card-birth {
    height: 12px !important;
    min-height: auto;
    padding: 6px 16px !important;
    opacity: 0.3;
    overflow: hidden;
    transform: scale(0.95);
}

.card-breeding {
    animation: card-breeding-shake 0.2s ease-in-out;
    opacity: 0.6;
}

.card-open {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 16px !important;
    opacity: 0.8;
    transform: scale(1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-ready {
    opacity: 1 !important;
    animation: card-content-fade-in 0.3s ease-out;
}

/* Animation Keyframes */
@keyframes card-breeding-shake {
    0%, 100% { transform: scale(0.95) translateX(0px); }
    25% { transform: scale(0.95) translateX(-1px); }
    75% { transform: scale(0.95) translateX(1px); }
}

@keyframes card-content-fade-in {
    0% { opacity: 0.8; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   CARD CONTENT STYLING - Prominent Back Content Display
   ============================================================================ */

/* Card content styling for prominent back content display */
.card-content {
    font-size: 13px;
    line-height: 1.5; /* Tighter line spacing */
    margin: 4px 0; /* Reduced margin */
    max-height: none; /* Show all content on one page */
    overflow: visible;
    color: rgba(255, 255, 255, 0.9);
    /* Ensure content is always visible */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* CheatCard content - flexbox container for visual boxes */
.card-content.cheat-content {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    width: 100%;
}

/* CheatCard box layout */
.card-content.cheat-content .card-answer-content {
    display: block !important;
    width: 100% !important;
}

/* CheatCard individual boxes - 33% width with larger text */
.cheat-box {
    flex: 1 1 calc(33.33% - 8px);
    min-width: 120px;
    max-width: calc(33.33% - 8px);
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    transition: all 0.2s ease;
    font-size: 1.3em; /* 1.3x larger font size */
}

.cheat-box:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* Light mode cheat boxes */
.light .cheat-box {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.light .cheat-box:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
}

/* Responsive boxes - 33% default, single column on mobile */
@media (max-width: 600px) {
    .cheat-box {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* 33% width maintained for larger screens */
@media (min-width: 601px) {
    .cheat-box {
        flex: 1 1 calc(33.33% - 8px);
        max-width: calc(33.33% - 8px);
    }
}

.card-content.cheat-content .card-answer-content {
    white-space: pre-line; /* Preserve line breaks */
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* FlashCard content - clean, no borders */
.card-content.flash-content {
    font-size: 15px !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Ensure question/front is always visible */
.card-content.flash-content .card-front {
    display: block !important;
    visibility: visible !important;
    font-size: 16px !important; /* Slightly smaller for compactness */
    font-weight: 700 !important;
    margin-bottom: 8px !important; /* Reduced spacing */
    color: rgba(255, 255, 255, 1) !important;
    line-height: 1.3 !important; /* Tighter */
    padding: 0 !important; /* No padding */
    opacity: 1 !important;
}

/* Ensure answer content is always visible */
.card-content.flash-content .card-answer-content {
    text-align: left !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 13px !important; /* Slightly smaller */
    line-height: 1.5 !important; /* Tighter */
    margin-top: 4px !important; /* Reduced spacing */
}

/* Ensure the Answer label is visible */
.card-content.flash-content strong {
    display: block !important;
    visibility: visible !important;
    color: rgba(255, 255, 255, 0.7) !important; /* Slightly dimmer for hierarchy */
    opacity: 1 !important;
    font-size: 0.85em !important; /* Smaller */
    margin-bottom: 4px !important; /* Reduced spacing */
}

/* Card header styling - minimal with single border */
.card-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    padding: 0 0 6px 0;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.light .card-header {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* Card metadata - no small caps */
.card-metadata {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-variant: normal; /* No small caps */
    letter-spacing: 0;
}

.card-type {
    font-weight: 700;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.5px;
}

.metadata {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.6);
}

/* Card type indicator styling */
.card-type-indicator {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.1);
}

/* Language flag sizing - 50% smaller as requested */
.sentence-flag-compact {
    font-size: 0.45em; /* Reduced from 0.9em to ~50% */
    opacity: 0.8;
    flex-shrink: 0;
}

/* Rejection indicator styling - struck-through document icon in circle */
.sentence-rejection-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.2); /* Red background */
    border: 1px solid rgba(239, 68, 68, 0.4);
    margin-right: 8px;
    flex-shrink: 0;
    position: relative;
}

.sentence-rejection-indicator .material-symbols-outlined {
    font-size: 10px;
    color: #ef4444;
    opacity: 0.8;
}

/* Strike-through effect on the icon */
.sentence-rejection-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    right: 2px;
    height: 1px;
    background: #ef4444;
    transform: translateY(-50%) rotate(-15deg);
    opacity: 0.9;
}

/* Rejected sentence styling */
.transcript-sentence-compact.sentence-rejected {
    opacity: 0.6; /* Lower opacity for rejected sentences */
}

.sentence-text-rejected {
    color: rgba(255, 255, 255, 0.7);
    font-style: normal; /* Use regular font weight, no italics */
    font-weight: 400; /* Ensure regular weight */
}

.light .card-source {
    color: rgba(0, 0, 0, 0.6);
    border-top-color: rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   SETTINGS STYLES
   ============================================================================ */

.range-description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid rgba(255, 255, 255, 0.3);
}

.light .range-description {
    color: rgba(31, 41, 55, 0.6);
    background: rgba(0, 0, 0, 0.05);
    border-left-color: rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   CRITICAL FIX: Force Card Content Visibility
   ============================================================================ */

/* Override all parent styles that might hide card content */
#cardsContainer .card,
#cardsContainer .card * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure all card text is white on dark background */
#cardsContainer .card .card-content,
#cardsContainer .card .card-content * {
    color: rgba(255, 255, 255, 0.95) !important;
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
}

/* Card question in header - matching transcript segment style */
#cardsContainer .card .card-question {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 0.9 !important;
    line-height: 1.4 !important;
}

/* Fix light mode question visibility */
.light #cardsContainer .card .card-question {
    color: rgba(31, 41, 55, 0.9) !important;
}

/* Answer content - main focus with larger text */
#cardsContainer .card .card-answer-content {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

.light #cardsContainer .card .card-answer-content {
    color: rgba(31, 41, 55, 0.95) !important;
}

/* Source section - single line, minimal */
#cardsContainer .card .card-source {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 8px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.light #cardsContainer .card .card-source {
    border-top-color: rgba(0, 0, 0, 0.1) !important;
    color: rgba(31, 41, 55, 0.5) !important;
}

/* Light mode card styling */
.light #cardsContainer .card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.light #cardsContainer .card .card-content,
.light #cardsContainer .card .card-content * {
    color: rgba(31, 41, 55, 0.95) !important;
}

.light #cardsContainer .card .metadata {
    opacity: 0.6 !important;
    color: rgba(31, 41, 55, 0.6) !important;
}

/* ============================================================================
   LANGUAGE DROPDOWN STYLES
   ============================================================================ */

/* Unified language dropdown option styling */
.language-dropdown-option {
    transition: background-color 0.2s ease;
    color: white;
    font-weight: 500;
}

.language-dropdown-option:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px);
}

.language-dropdown-option:active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(0px);
}

.light .language-dropdown-option {
    color: #1f2937;
}

.light .language-dropdown-option:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

.light .language-dropdown-option:active {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* FIXED: Language dropdown positioning - override inline styles */
#transcriptLanguageDropdown,
#inputLanguageDropdown {
    position: absolute !important;
    top: calc(100% + 5px) !important; /* Position below the indicator, not -200px */
    left: 0 !important;
    z-index: 1000 !important;
    min-width: 180px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px !important;
}

/* Ensure dropdown is visible when display:block is set */
#transcriptLanguageDropdown[style*="display: block"],
#inputLanguageDropdown[style*="display: block"] {
    visibility: visible !important;
    opacity: 1 !important;
}