/* --- FONT DEFINITIONS (as per plan.md) --- */
/* Make sure you have these fonts in a /fonts/ subfolder */
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.woff2') format('woff2'); font-weight: normal; }
@font-face { font-family: 'Roboto'; src: url('fonts/Roboto-Regular.woff2') format('woff2'); font-weight: normal; }
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-Regular.woff2') format('woff2'); font-weight: normal; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: normal; }
@font-face { font-family: 'Fira Code'; src: url('fonts/FiraCode-Light.woff2') format('woff2'); font-weight: normal; }
@font-face { font-family: 'Caveat'; src: url('fonts/Caveat-Regular.woff2') format('woff2'); font-weight: normal; }

/* --- CSS VARIABLES & THEMES --- */
:root {
    /* Default Theme: Dark */
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --control-bg: #2a2a2a;
    --control-border: #444;
    --control-text: #f0f0f0;
    --highlight-color: rgba(255, 255, 0, 0.3); /* Default, will be updated by JS */
    --guide-color: rgba(255, 0, 0, 0.5);
    --active-color: #007bff;

    /* Typography (will be controlled by JS) */
    --font-family: 'Inter', sans-serif;
    --font-size: 42px;
    --line-height: 1.8;
    --letter-spacing: 0px;
    --content-width: 60ch;
    --text-align: center;
    /* UI layout */
    --popover-label-width: 60px; /* keep dropdowns aligned */
    --topbar-height: 58px; /* single source of truth */
    /* UA form control theming */
    --color-scheme: dark;
}

.theme-light {
    --bg-color: #f5f5f5;
    --text-color: #212121;
    --control-bg: #ffffff;
    --control-border: #ccc;
    --control-text: #333;
    --highlight-color: rgba(255, 255, 0, 0.4);
    --color-scheme: light;
}

.theme-amber {
    --bg-color: #000000;
    --text-color: #ffbf00;
    --control-bg: #221a00;
    --control-border: #594300;
    --control-text: #ffcf40;
    --highlight-color: rgba(255, 255, 255, 0.2);
}

.theme-high-contrast {
    --bg-color: #000000;
    --text-color: #ffffff;
    --control-bg: #000;
    --control-border: #fff;
    --control-text: #fff;
    --highlight-color: rgba(0, 255, 255, 0.5);
    --guide-color: #ffff00;
}

/* --- GLOBAL & LAYOUT --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Visually-hidden but accessible label text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

#app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* --- CONTROLS BAR --- */
#controls {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    padding: 10px 15px;
    height: var(--topbar-height); /* Keep a consistent topbar height */
    background-color: var(--control-bg);
    border-bottom: 1px solid var(--control-border);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: translateY(0);
    /* Let content scroll horizontally on very narrow screens */
    overflow: hidden;          /* prevent vertical scrollbar */
    overflow-x: auto;          /* allow horizontal only */
    overflow-y: hidden;        /* explicitly hide vertical */
    -webkit-overflow-scrolling: touch;
}

/* When playing, hide controls by default. JS will add .show-controls on mouse activity. */
/* HIDE: When playing and auto-hide is on, and the parent container does NOT have .show-controls */
#app-container.topbar-autohide-enabled.is-playing:not(.show-controls) #controls:not(.topbar-collapsed) {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

/* The hover is a good fallback/enhancement for showing the controls */
.topbar-autohide-enabled.is-playing #controls:hover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.controls-left, .controls-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Keep groups at natural width so bar can scroll horizontally */
.controls-left { flex: 0 0 auto; }
.controls-right { flex: 0 0 auto; }

.control-group-separator {
    width: 1px;
    height: 24px;
    background-color: var(--control-border);
}

#controls button, #controls select, #controls input {
    background-color: var(--control-bg);
    color: var(--control-text);
    border: 1px solid var(--control-border);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
}

/* Make native number spinners follow theme in topbar */
#controls input, #controls select { color-scheme: var(--color-scheme); }

/* Modern Icon Button Style */
.icon-btn {
    background: transparent;
    border: none;
    padding: 6px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.icon-btn.active {
    background-color: var(--active-color);
}
.icon-btn.active:hover {
    background-color: #0056b3;
}
.icon-btn.active svg {
    fill: #fff;
}
.icon-btn svg {
    fill: var(--control-text);
}
.icon-btn img {
    width: 24px;
    height: 24px;
    display: block;
}

/* Style for play/pause button state */
#play-pause {
    transition: background-color 0.2s;
}

.is-playing #play-pause {
    background-color: rgba(200, 35, 51, 0.8); /* A shade of red for 'Pause' */
}
.is-playing #play-pause:hover {
    background-color: rgba(200, 35, 51, 1);
}

#controls input[type="number"] {
    width: 60px;
}

#controls input[type="range"] {
    padding: 0;
}

.speed-control {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Keep speed slider at fixed size; bar will scroll instead */
.speed-control input[type="range"]#speed { width: 200px; }
#speed-value {
    font-variant-numeric: tabular-nums;
    min-width: 28px;
}

/* --- MAIN STAGE & READER --- */
#main-stage {
    flex-grow: 1;
    padding-top: 60px; /* Space for controls */
    overflow-y: auto;
    position: relative;
}
 
.script-render-area {
    max-width: var(--content-width);
    margin: 0 auto;
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    text-align: var(--text-align);
    white-space: pre-wrap;
    word-wrap: break-word;
    outline: none;
}

#reader-view {
    /*
     * Using height: 100% here causes the element's paint box to be
     * limited to the viewport height. When a CSS transform (flip/mirror)
     * is applied, browsers can clip overflow to that box, which makes
     * content outside the first screenful appear to disappear after
     * flipping. min-height preserves the original intent (fill at least
     * the viewport) while allowing the box to grow with content so the
     * entire script remains visible when flipped.
     */
    min-height: 100%;
    padding: 40vh 2rem 60vh; /* Top padding centers first line, bottom allows last line to center */
    transition: transform 0.3s ease; /* For mirror/flip */
}

#measurement-view {
    position: absolute;
    visibility: hidden;
    z-index: -1;
    top: 0;
    left: 0;
    padding: 40vh 2rem 60vh; /* Match padding to ensure same wrapping */
}

/* Themed Scrollbar */
#main-stage {
    scrollbar-width: thin;
    scrollbar-color: var(--control-border) var(--bg-color);
}

#main-stage::-webkit-scrollbar {
    width: 12px;
}

#main-stage::-webkit-scrollbar-track {
    background: var(--bg-color);
}

#main-stage::-webkit-scrollbar-thumb {
    background-color: var(--control-border);
    border-radius: 6px;
    border: 3px solid var(--bg-color);
}

/* Mirror & Flip */
.mirror-x #reader-view { transform: scaleX(-1); }
.flip-y #reader-view { transform: scaleY(-1); }
/* Combine transforms */
.mirror-x.flip-y #reader-view { transform: scale(-1, -1); }


/* Hide scrollbar ONLY when playing */
.is-playing #main-stage {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.is-playing #main-stage::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Highlighting */
.line {
    transition: background-color 0.2s;
    cursor: pointer;
}
#app-container:not(.highlight-disabled) .line.active {
    background-color: var(--highlight-color);
    border-radius: 4px;
}
.word {
    transition: background-color 0.1s, color 0.1s;
}
.word.active {
    background-color: var(--text-color);
    color: var(--bg-color);
    border-radius: 2px;
}

/* Guide Line */
#guide-line {
    position: fixed;
    top: 40vh; /* Matches reader/editor top padding */
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--guide-color);
    z-index: 50;
    display: none; /* Toggled by JS */
    pointer-events: none;
}
.guide-visible #guide-line {
    display: block;
}

/* --- FOOTER --- */
#footer {
    background-color: var(--control-bg);
    border-top: 1px solid var(--control-border);
    padding: 5px 15px 10px 15px;
    text-align: center;
    font-size: 12px;
    color: #999;
}

#app-container.footer-hidden #footer {
    display: none;
}

kbd {
    background-color: #555;
    border-radius: 3px;
    padding: 2px 4px;
    font-family: monospace;
    color: #eee;
}

/* --- READER MODE (for Pop-out window) --- */
.reader-mode #controls,
.reader-mode #footer {
    display: none;
}

.reader-mode #main-stage {
    padding-top: 0;
}

/* --- POPOVERS --- */
.popover {
    position: absolute;
    top: 58px; /* Below the header */
    right: 15px;
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 150;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 250px;
    /* Constrain height and scroll internally on small screens/mobile */
    /* Fallback */
    max-height: calc(100vh - 80px);
    /* Dynamic viewport units (modern mobile browsers) */
    max-height: calc(100dvh - 80px);
    /* JS-updated pixel value for widest compatibility */
    max-height: calc(var(--viewport-height, 100dvh) - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s, transform 0.2s;
}

/* Themed scrollbar for internal popover scrolling */
.popover {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--control-border) var(--control-bg);
}
.popover::-webkit-scrollbar {
    width: 10px; /* WebKit */
}
.popover::-webkit-scrollbar-track {
    background: var(--control-bg);
}
.popover::-webkit-scrollbar-thumb {
    background-color: var(--control-border);
    border-radius: 6px;
    border: 3px solid var(--control-bg);
}

.popover-hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.popover-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.popover-section label {
    font-size: 12px;
    color: #999;
    margin-bottom: 2px;
}

.popover-section select,
.popover-section input {
    width: 100%;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--control-border);
    border-radius: 4px;
    padding: 6px 8px;
}

/* Topbar responsive tweaks on smaller screens */
/* Remove size changes on small screens to keep height consistent */

/* Themed scrollbar for topbar horizontal scroll */
#controls { scrollbar-width: thin; scrollbar-color: var(--control-border) var(--control-bg); }
#controls::-webkit-scrollbar { height: 8px; }
#controls::-webkit-scrollbar-track { background: var(--control-bg); }
#controls::-webkit-scrollbar-thumb { background-color: var(--control-border); border-radius: 6px; border: 2px solid var(--control-bg); }

/* Removed custom scroll arrows; native scrollbar arrows are sufficient */
/* Make native control chrome (like number spinners) follow theme */
.popover input,
.popover select,
.popover textarea {
    color-scheme: var(--color-scheme);
}

/* Compact row: label + control on one line */
.popover-section.row {
    display: grid;
    grid-template-columns: var(--popover-label-width) 1fr;
    align-items: center;
    gap: 6px 10px;
}
.popover-section.row > label { margin: 0; }

/* Slider groups: label + number on first row, slider full width below */
.slider-input {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
}
.slider-input > label { grid-column: 1; grid-row: 1; }
.slider-input > .value { grid-column: 2; grid-row: 1; text-align: right; font-size: small; min-width: 48px; font-variant-numeric: tabular-nums; color: var(--control-text); }
.slider-input > input[type="range"] {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0; /* keep tight */
}

.popover button {
    width: 100%;
    text-align: left;
    background-color: transparent;
    color: var(--control-text);
    border: none;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.popover button:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.popover .control-group-separator {
    width: 100%;
    height: 1px;
    background-color: var(--control-border);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.grid-2 > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* --- Checkbox Control in Popover --- */
.checkbox-control {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 4px 0; /* Add some vertical spacing */
}

.checkbox-control label {
    font-size: 14px;
    color: var(--control-text);
    margin: 0;
    cursor: pointer;
}

.checkbox-control input[type="checkbox"] {
    /* Reset */
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    
    /* Box */
    width: 20px;
    height: 20px;
    border: 2px solid var(--control-border);
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
    
    /* Checkmark */
    display: grid;
    place-content: center;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.checkbox-control input[type="checkbox"]::before {
    content: '';
    width: 12px;
    height: 12px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: white;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.checkbox-control input[type="checkbox"]:checked {
    background-color: var(--active-color);
    border-color: var(--active-color);
}

.checkbox-control input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* --- EDIT MODAL --- */
.modal-hidden {
    display: none !important;
}

#edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    position: relative;
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: 8px;
    padding: 20px;
    width: 80%;
    max-width: 800px;
    height: 80%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal-content h2 {
    margin: 0;
    color: var(--control-text);
}

#modal-editor {
    flex-grow: 1;
    width: 100%;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--control-border);
    border-radius: 4px;
    padding: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    line-height: 1.6;
    resize: none;
    outline: none;
}

#modal-close-btn {
    align-self: flex-end;
    padding: 8px 20px;
    background-color: var(--control-bg);
    color: var(--control-text);
    border: 1px solid var(--control-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

#modal-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

#modal-close-btn:focus-visible {
    outline: 2px solid var(--active-color);
    outline-offset: 2px;
}

/* --- MANUAL TOPBAR COLLAPSE --- */
#collapse-topbar-btn {
    position: fixed;
    top: 0;
    right: 15px;
    z-index: 101; /* Above topbar but below popovers */
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 2px 6px;
    transform: translateY(var(--topbar-offset, var(--topbar-height))); /* Stick just under topbar */
    transition: transform 0.4s ease; /* Animate transform for performance */
}

/* Move arrow tab up when topbar is auto-hidden */
#app-container.topbar-autohide-enabled.is-playing:not(.show-controls) #collapse-topbar-btn {
    transform: translateY(0);
}

#controls.topbar-collapsed {
    transform: translateY(-100%);
}

#controls.topbar-collapsed + #collapse-topbar-btn {
    transform: translateY(0);
}

#collapse-topbar-btn svg {
    transition: transform 0.3s;
}
/* Rotate arrow when topbar is collapsed, either manually or via auto-hide */
#controls.topbar-collapsed + #collapse-topbar-btn svg,
#app-container.topbar-autohide-enabled.is-playing:not(.show-controls) #collapse-topbar-btn svg {
    transform: rotate(180deg);
}

/* Dynamic offset handled via --topbar-offset from JS */


.done-btn {
    border-radius: 5px;
    border: 1px solid var(--control-border);
    cursor: pointer;  
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* subtle shadow */
    margin-right: 2px;
}

.done-btn:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.done-btn:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}