/* Basic Body and Layout */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* Full viewport height */
    overflow: hidden;
    /* No main scrollbar */
}

#main-content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 12px;
    /* Add padding to create separation */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

#content-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    /* Fill the main-content area */
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
    /* The frame */
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
    box-sizing: border-box;
    /* Ensure border is included in width/height */
    background-color: #fff;
}

/* --- ToC Pane Styles --- */
#toc-pane {
    width: 250px;
    min-width: 200px;
    max-width: 600px;
    background: #f0f0f0;
    /* Outlook sidebar gray */
    border-right: 1px solid #d0d0d0;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    z-index: 100;
    height: 100%;
    flex-shrink: 0;
    font-size: 14px;
}

#toc-pane.pinned {
    transform: translateX(0);
}

#toc-pane.unpinned {
    position: relative;
    /* Take up space in layout */
    width: 32px !important;
    min-width: 32px !important;
    overflow: visible;
    /* Allow flyout to overflow */
    cursor: pointer;
    background: #f0f0f0;
    border-right: 1px solid #ccc;
    z-index: 200;
    transition: width 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
}

/* Hide the wrapper (header + content) when unpinned and NOT expanded */
#toc-pane.unpinned:not(.expanded) #toc-wrapper {
    display: none;
}

/* Hide resize handle when unpinned */
#toc-pane.unpinned #toc-resize-handle {
    display: none;
}

/* Vertical Text "Meetings" */
#toc-pane.unpinned::before {
    content: 'Meetings';
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    /* Top to bottom */
    font-size: 14px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
    margin-bottom: 8px;
    order: 2;
    /* Text below icon */
}

/* Right Caret Icon */
#toc-pane.unpinned::after {
    content: '▶';
    font-size: 10px;
    color: #555;
    margin-bottom: 8px;
    order: 1;
    /* Icon at top */
}

/* Expanded State (Flyout) */
#toc-pane.unpinned.expanded {
    /* Width stays 32px to not shift content! */
    width: 32px !important;
}

#toc-pane.unpinned.expanded #toc-wrapper {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 32px;
    /* Start after the strip */
    top: 0;
    width: 250px;
    height: 100%;
    background: #f0f0f0;
    border-right: 1px solid #ccc;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

/* Ensure content inside wrapper behaves */
#toc-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Hide strip content when expanded?
   User might want to see it or it might look weird if the flyout is next to it.
   If flyout is next to it (left: 32px), we keep the strip visible.
   If we want to cover it, left: 0.
   User said "should not overlap the navigation pane".
   The strip takes space. The flyout overlaps.
   Let's keep the strip visible so it acts as the anchor.
*/

/* Hide hamburger (removed in replacement) */

#toc-header {
    padding: 0 16px;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0f0f0;
    flex-shrink: 0;
}

#toc-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #252525;
}

#toc-pin-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: #666;
    padding: 4px;
    border-radius: 4px;
}

#toc-pin-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#toc-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* --- ToC Pane Sections (Dynamic) --- */
#toc-meetings-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#toc-links-section {
    flex: 0 0 auto;
    max-height: 25%;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #d0d0d0;
    min-height: 0;
}

#links-header {
    padding: 0 16px;
    height: 40px;
    display: flex;
    align-items: center;
    background: #f0f0f0;
    flex-shrink: 0;
}

#links-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #252525;
}

#links-content {
    flex-grow: 1;
    overflow-y: auto;
    background: #f8f8f8;
}

#toc-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
    z-index: 101;
}

#toc-resize-handle:hover {
    background: #0078d4;
    /* Outlook blue on hover */
}

/* Directory Tree Styles */
.toc-list,
.nested {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nested {
    display: none;
    padding-left: 16px !important;
    /* Use padding for indentation, force override */
    margin-left: 0 !important;
}

/* Ensure root list has no margin/padding */
.toc-list {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.nested.active {
    display: block;
}

/* Common Item Styles */
.toc-folder-row,
.toc-link {
    display: flex;
    align-items: center;
    padding: 1px 16px 1px 8px;
    /* Right padding for scrollbar space */
    cursor: pointer;
    user-select: none;
    color: #252525;
    text-decoration: none;
    min-height: 18px;
    border-left: 3px solid transparent;
    /* For active state marker */
}

.toc-folder-row:hover,
.toc-link:hover {
    background-color: #e1dfdd;
    /* Hover gray */
}

/* Active State */
.toc-link.active-meeting {
    background-color: #c7e0f4;
    /* Selection blue */
    border-left-color: #0078d4;
    /* Blue marker */
    font-weight: 500;
}

/* Toggle (Chevron) */
.toc-toggle,
.toc-toggle-spacer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 4px;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.toc-toggle {
    color: #605e5c;
    transition: transform 0.1s ease;
    font-size: 10px;
    /* Small chevron */
}

.toc-toggle::before {
    content: '▶';
    /* Fallback */
    font-family: 'Segoe UI Symbol', sans-serif;
    font-size: 8px;
}

/* Use a better chevron if possible, or CSS shape */
.toc-toggle::before {
    content: '';
    border: solid #605e5c;
    border-width: 0 1.5px 1.5px 0;
    display: inline-block;
    padding: 2.5px;
    transform: rotate(-45deg);
    margin-left: -2px;
}

.toc-toggle.open {
    transform: rotate(90deg);
}

/* Icons */
.toc-icon {
    margin-right: 8px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #605e5c;
}

.folder-icon::before {
    content: '📁';
    /* Fallback */
}

/* Hide fallback if we use CSS shapes or SVGs later. For now, emoji is okay but maybe too colorful. 
   Let's try to use a monochrome folder look or just the emoji if user didn't provide assets.
   Outlook uses monochrome icons usually.
*/
.folder-icon {
    /* filter: grayscale(100%); Optional: make emoji gray */
}

.document-icon::before {
    content: '📄';
}

.toc-label,
.toc-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}



/* --- Navigation Pane (Left Pane) --- */
#left-pane {
    /* "navigation pane should have 1/3 of the available horizontal space"
       "available horizontal space" usually means viewport width.
       Let's use 33vw.
    */
    width: 33vw;
    min-width: 300px;
    /* Minimum readable width */
    flex-shrink: 0;
    /* Do not shrink when ToC expands */
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ddd;
    background: #fff;
    height: 100%;
    overflow: hidden;
}

#agenda {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

#video-pane {
    flex-shrink: 0;
    background: #fff !important;
    /* Changed from #000 to #fff */
    border-top: 1px solid #ddd;
    padding-bottom: 10px;
}

#time-range {
    padding: 10px 12px 5px 12px;
    color: #333;
    font-weight: 600;
    font-size: 0.95rem;
}

#player-controls {
    padding: 0 12px 10px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* --- Transcript Pane (Right Pane) --- */
#transcript-pane {
    flex-grow: 1;
    /* Takes remaining space */
    min-width: 300px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff;
}

#transcript-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    /* Padding for the container */
    border-bottom: 1px solid #eee;
    background: #fff;
    flex-shrink: 0;
}

#transcript-header h2 {
    margin: 0;
    padding: 10px 0;
    /* Vertical padding only */
    border-bottom: none;
    /* Remove border from h2 as container has it */
    flex-grow: 1;
}

/* Header Title Group */
.header-title-group {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    /* Allow wrapping on small screens */
}

.header-title-group h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: normal;
    color: #333;
}

#header-banner {
    height: 90%;
    max-height: 60px;
    /* Constraint to prevent excessive growth */
    margin-left: auto;
    object-fit: contain;
}

#transcript-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

#text-container {
    white-space: pre-wrap;
    max-width: 900px;
    /* Readable line length */
    margin: 0 auto;
}


/* --- Other Styles --- */

#meeting-list-container,
#agenda-display {
    /* These seem to be legacy or specific to the old index.html layout.
       We might need them for the NEW index.html if it reuses them.
       But the new index.html should use the 3-pane layout.
       Let's keep them but ensure they don't conflict.
    */
    overflow-y: auto;
    padding: 1rem;
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
    body {
        height: auto;
        overflow: auto;
    }

    #content-container {
        flex-direction: column;
    }

    #toc-pane,
    #left-pane,
    #transcript-pane {
        width: 100% !important;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    #toc-pane.unpinned {
        width: 100% !important;
        height: 40px;
        /* Header only */
    }

    #toc-pane.unpinned::after {
        content: 'Show Menu';
        position: static;
        transform: none;
        padding: 10px;
    }
}

/* Header Styles */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #ccc !important;
    /* Darker separator */
    background: #fff !important;
    /* Force white background */
    flex-shrink: 0;
}

#viewer-menu {
    display: flex;
    gap: 0.5rem;
}

#viewer-menu button {
    background-color: #f0f0f0;
    /* Light grey background */
    color: #333;
    /* Dark text */
    border: 1px solid #ccc;
    /* Border for definition */
    padding: 0.5rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

#viewer-menu button:hover {
    background-color: #e0e0e0;
}

header h1 {
    margin: 0;
    font-size: 1.5rem;
    color: #333 !important;
    /* Force Dark grey/black text */
}

.page-header h1 a {
    color: inherit;
    text-decoration: none;
}

#main-content h2,
#transcript-pane h2 {
    font-weight: normal;
    color: #333 !important;
    background-color: transparent !important;
    /* Ensure no black background */
    margin-top: 0;
    padding: 10px;
    /* Add some padding if it was missing */
    font-size: 1.2rem;
    border-bottom: 1px solid #eee;
    /* Optional separator */
}


/* Video Player */
#player-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    position: relative;
}

#videoElement {
    width: 100%;
    height: 100%;
}

/* Utterances */
.utterance {
    display: inline;
}

.utterance:hover {
    background-color: #f0f8ff;
    cursor: pointer;
}

/* Modals */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    /* Default hidden; JS toggles to flex */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 600px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

/* --- Restored Styles --- */

#text-container p {
    margin: 0;
    padding: 0;
}

/* Navigation Tabs */
.nav-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
}

.nav-tab-button {
    flex-grow: 1;
    padding: 0.75rem 0.5rem;
    background: #eee;
    border: none;
    border-right: 1px solid #ddd;
    cursor: pointer;
    font-size: 0.8rem;
    color: #333;
    transition: background-color 0.2s;
}

.nav-tab-button:last-child {
    border-right: none;
}

.nav-tab-button.active {
    background: #fff;
    font-weight: bold;
    color: #005a9c;
}

.nav-tab-button:hover:not(.active) {
    background: #e0e0e0;
}

#nav-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.nav-tab-content {
    display: none;
}

.nav-tab-content.active {
    display: block;
}

#text-search-input,
#speaker-search-input {
    width: calc(100% - 1rem);
    padding: 0.5rem;
    margin: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.search-results {
    padding: 0 0.5rem;
    list-style: none;
}

.search-results li {
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.search-results li:hover {
    background-color: #f0f0f0;
}

/* Share Buttons */
#share-buttons {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#share-buttons button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
}

#share-buttons button:hover {
    background: #f0f0f0;
}

#share-buttons svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.link-button {
    background: none;
    border: none;
    color: #005a9c;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
}

/* YouTube Overrides */
body.youtube-player-active #player-wrapper {
    padding-top: 0;
}

/* --- Print Styles --- */
@media print {

    /* Hide all non-essential elements */
    #toc-pane,
    #left-pane,
    #video-pane,
    #player-controls,
    #viewer-menu,
    header,
    .modal,
    #share-buttons,
    #time-range,
    #toc-resize-handle,
    .nav-header,
    .nav-tabs,
    .nav-tab-content {
        display: none !important;
    }

    /* Reset layout for print */
    body,
    #main-content,
    #content-container,
    #transcript-pane,
    #transcript-container,
    #text-container {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        border: none !important;
        box-shadow: none !important;
        background: white !important;
    }

    /* Ensure text is readable */
    #text-container {
        font-size: 12pt;
        line-height: 1.5;
        color: black;
        padding: 20px !important;
    }

    /* Ensure speakers are bold */
    strong {
        font-weight: bold !important;
        color: black !important;
    }

    /* Ensure links are underlined but black */
    a {
        text-decoration: underline;
        color: black !important;
    }

    /* Hide scrollbars */
    ::-webkit-scrollbar {
        display: none;
    }
}