/**
 * Content Viewer Component
 *
 * Scrollable content display panels for:
 * - Live transcriptions/translations
 * - Log viewers
 * - Diagnostic output
 * - Any dynamic scrollable content
 *
 * Supports fullscreen mode for immersive viewing
 */

/* Content Viewer Container */
.content-viewer-box {
    margin: 20px 0;
}

.content-viewer-box h3 {
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Content Display Area */
.content-viewer-content {
    background: var(--background);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    min-height: 150px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 1.1rem;
    line-height: 1.8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Content Lines (for structured content like logs or transcripts) */
.content-viewer-line {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color-light, #f1f5f9);
}

.content-viewer-line:last-child {
    border-bottom: none;
}

/* Metadata text (timestamps, secondary info) */
.content-viewer-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ==========================================
   Fullscreen Mode Styles
   ========================================== */

/* Standard fullscreen */
.content-viewer-box:fullscreen {
    background: #ffffff;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.content-viewer-box:fullscreen #fullscreen-status-bar,
.content-viewer-box:fullscreen #transcription-header {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.content-viewer-box:fullscreen .content-viewer-content {
    flex: 1;
    max-height: none;
    font-size: 1.5rem;
    line-height: 1.8;
}

/* WebKit fullscreen (Safari, older Chrome) */
.content-viewer-box:-webkit-full-screen {
    background: #ffffff;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.content-viewer-box:-webkit-full-screen .content-viewer-content {
    flex: 1;
    max-height: none;
    font-size: 1.5rem;
    line-height: 1.8;
}

/* MS fullscreen (IE/Edge) */
.content-viewer-box:-ms-fullscreen {
    background: #ffffff;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.content-viewer-box:-ms-fullscreen .content-viewer-content {
    flex: 1;
    max-height: none;
    font-size: 1.5rem;
    line-height: 1.8;
}

/* ==========================================
   Legacy Class Names (for backward compatibility)
   Keep these until all pages are migrated
   ========================================== */

.transcription-box {
    margin: 20px 0;
}

.transcription-box h3 {
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.transcription-content {
    background: var(--background);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    min-height: 150px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 1.1rem;
    line-height: 1.8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.transcription-line {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color-light, #f1f5f9);
}

.transcription-line:last-child {
    border-bottom: none;
}

.transcription-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Fullscreen support for legacy class names */
.transcription-box:fullscreen {
    background: #ffffff;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.transcription-box:fullscreen #fullscreen-status-bar,
.transcription-box:fullscreen #transcription-header {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.transcription-box:fullscreen .transcription-content {
    flex: 1;
    max-height: none;
    font-size: 1.5rem;
    line-height: 1.8;
}

.transcription-box:-webkit-full-screen {
    background: #ffffff;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.transcription-box:-webkit-full-screen .transcription-content {
    flex: 1;
    max-height: none;
    font-size: 1.5rem;
    line-height: 1.8;
}

.transcription-box:-ms-fullscreen {
    background: #ffffff;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.transcription-box:-ms-fullscreen .transcription-content {
    flex: 1;
    max-height: none;
    font-size: 1.5rem;
    line-height: 1.8;
}