/* Theme tokens */
:root {
    /* Day (light) defaults */
    --bg:#f7f8fa; 
    --panel:#ffffff; 
    --panel-alt:#f1f3f5; 
    --border:#dfe3e8; 
    --accent:#ff7e39; 
    --accent-soft:#ff7e3922; 
    --text:#202124; 
    --muted:#5f6368; 
    --focus:#ffb88c; 
    --graph-bg:#ffffff;
    --header-bg:linear-gradient(90deg,#ffffff,#f3f4f7);
    --radius:8px; 
    --transition:160ms ease;
}
html.theme-night {
    --bg:#0f1115; 
    --panel:#1c2128; 
    --panel-alt:#222830; 
    --border:#2e3a46; 
    --accent:#ff7e39; 
    --accent-soft:#ff7e3922; 
    --text:#e6ebf0; 
    --muted:#9aa4af; 
    --focus:#ffd7bd; 
    --graph-bg:#0f1115;
    --header-bg:linear-gradient(90deg,#15181d,#1d232b);
}
/* Ensure padding/border are included in widths to prevent overflow */
*, *::before, *::after { box-sizing: border-box; }
body {margin:0; font-family: Roboto, system-ui, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; min-height:100vh; display:flex; flex-direction:column;}
header {display:flex; align-items:center; gap:.75rem; justify-content:space-between; padding:0.85rem 1.25rem; background:var(--header-bg); border-bottom:1px solid var(--border);}            
header h1 {font-size:1.05rem; letter-spacing:.5px; margin:0; font-weight:600;}
header nav a {color:var(--muted); text-decoration:none; margin-right:1rem; font-size:.8rem; transition:var(--transition);} header nav a:last-child{margin-right:0;} header nav a:hover{color:var(--text);} 
/* Theme toggle */
.theme-toggle {background:var(--panel); border:1px solid var(--border); color:var(--text); border-radius:999px; padding:.2rem .5rem; font-size:.9rem; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem;}
.theme-toggle:hover {background:var(--accent); color:#111;}
.theme-toggle .theme-icon {font-size:20px; line-height:1; display:inline-flex;}
/* Make content full-width under the header */
main {width:100%; max-width:none; margin:0; padding:1.25rem 1.25rem 3rem; flex:1; display:flex; flex-direction:column;}
/* CSS Grid Layout for overall shell (4 columns x 2 rows) */
.shell {display:grid; gap:1.25rem; grid-template-columns:260px 1fr 1fr 1fr; grid-template-rows:1fr 1fr; align-items:stretch; width:100%;}
/* Left column split into two panels: purpose (row1) and controls (row2) */
#purposePanel {grid-column:1; grid-row:1; align-self:stretch;}
#controlsPanel {grid-column:1; grid-row:2; align-self:stretch;}
/* Right area: internal grid holding top row (input + chunks) and bottom row (3 viz panels) */
.app-col {grid-column:2 / span 3; grid-row:1 / span 2; display:grid; gap:1.25rem; grid-template-columns:repeat(3, 1fr); grid-template-rows:400px 400px;} /* fixed-height rows */
/* Top-row panels: only input panel scrolls; chunk panel delegates scroll to its intermediate wrapper */
#inputPanel { overflow:auto; }
#chunkPanel { overflow:hidden; }
/* Top row placements (like merging 3 & 4 horizontally) */
#inputPanel {grid-column:1; grid-row:1;}
#chunkPanel {grid-column:2 / span 2; grid-row:1;}
/* Bottom row placements: three equal viz panels */
.viz-panel {min-height:240px; display:flex; flex-direction:column;}
#vizPanelGraph {grid-column:1; grid-row:2;}
#vizPanelHistogram {grid-column:2; grid-row:2;}
#vizPanelHEB {grid-column:3; grid-row:2;}
/* Responsiveness */
@media (max-width:1200px){.shell{grid-template-columns:220px 1fr 1fr 1fr;} }
@media (max-width:900px){
    .shell{grid-template-columns:1fr; grid-template-rows:auto auto auto auto auto auto;}
    #purposePanel,#controlsPanel{grid-column:1; grid-row:auto;}
    .app-col{grid-column:1; grid-row:auto; grid-template-columns:1fr; grid-template-rows:auto auto auto auto auto;}
    #inputPanel{grid-column:1; grid-row:auto;}
    #chunkPanel{grid-column:1; grid-row:auto;}
    #vizPanelGraph,#vizPanelHistogram,#vizPanelHEB{grid-column:1; grid-row:auto;}
}
.panel {background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; position:relative; display:flex; flex-direction:column; min-height:0; min-width:0;}
.panel h2 {margin:.15rem 0 .9rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--muted);} 
/* When h2 is inside a panel-title-row, remove its bottom margin; rely on row margin */
.panel-title-row h2 {margin:.15rem 0 0;}
.panel-title-row {display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.9rem;} /* add bottom margin to match h2 spacing in source panel */
/* Graph title row inside viz panel */
.graph-title-row {display:flex; align-items:center; gap:.75rem; margin:0 0 .55rem;}
.graph-title-row h3 {flex:0 0 auto; margin:0;}
.graph-export-btn {margin-left:auto; background:var(--panel-alt); border:1px solid var(--border); color:var(--text); font-size:.6rem; letter-spacing:.05em; padding:.4rem .65rem; border-radius:6px; cursor:pointer; transition:var(--transition);}
.graph-export-btn:hover:not([disabled]) {background:var(--accent); color:#111;}
.stopwatch-wrap {display:flex; align-items:center; gap:.4rem; color:var(--muted);}
.stopwatch {display:block;}
.stopwatch .face {fill:none; stroke:var(--border); stroke-width:2; opacity:.65;}
.stopwatch .hand {stroke:var(--accent); stroke-width:2; stroke-linecap:round; transform-origin:12px 12px;}
.stopwatch-running .hand {animation:sweep 1s linear infinite;}
@keyframes sweep {from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.stopwatch-label {font-size:.62rem; text-transform:uppercase; letter-spacing:.08em;}
.chunk-summary {font-size:.62rem; color:var(--muted); white-space:nowrap;}
textarea#textInput {width:100%; min-height:160px; resize:vertical; background:var(--panel-alt); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); padding:.75rem .85rem; font-size:.9rem; font-family:inherit; line-height:1.4; box-sizing:border-box;}
/* Let textarea grow within fixed panel height */
#inputPanel textarea#textInput { flex:1; min-height:0; }
textarea#textInput:focus {outline:2px solid var(--accent-soft); border-color:var(--accent);}
.actions {display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0 .25rem;}
button {background:var(--panel-alt); border:1px solid var(--border); color:var(--text); font-size:.75rem; letter-spacing:.05em; padding:.55rem .85rem; border-radius:var(--radius); cursor:pointer; transition:var(--transition); font-weight:500;}
button:hover:not([disabled]) {background:var(--accent); color:#111;} button[disabled]{opacity:.35; cursor:not-allowed;}
.btn-superseded {opacity:.4; cursor:not-allowed; position:relative;}
.btn-superseded::after {content:"auto"; position:absolute; top:-.45rem; right:-.35rem; font-size:.55rem; color:#111; background:var(--accent); border:1px solid var(--border); padding:.05rem .25rem; border-radius:6px; letter-spacing:.06em;}
.inline {display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; font-size:.7rem;}
.inline label {display:flex; align-items:center; gap:.35rem; cursor:pointer;}
.inline label span {color:var(--muted); font-size:.7rem;}
.projection-controls {display:flex; align-items:flex-start; gap:.65rem; flex-wrap:wrap; padding:.35rem .5rem .45rem; background:var(--panel-alt); border:1px solid var(--border); border-radius:6px;}
.projection-controls label {margin:0;}
.timing-line {font-size:.68rem; color:var(--muted); margin-top:.35rem;}
select#embeddingDimensions {background:var(--panel-alt); border:1px solid var(--border); color:var(--text); padding:.3rem .55rem; border-radius:6px; font-size:.7rem;}
/* Algorithm dropdown should follow theme too */
select#dimredAlgorithm {background:var(--panel-alt); border:1px solid var(--border); color:var(--text); padding:.3rem .55rem; border-radius:6px; font-size:.7rem;}
.chunk-display-wrapper {margin-top:0; display:flex; flex-direction:row; align-items:flex-start; flex-wrap:nowrap; gap:.6rem; flex:1 1 auto; min-height:0; overflow-y:auto; padding:.4rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel-alt); box-sizing:border-box;}
.strategy-column {background:var(--panel-alt); border:1px solid var(--border); border-radius:var(--radius); padding:.4rem .45rem; display:flex; flex-direction:column; gap:.3rem; min-width:200px; flex:1 1 0;}
.strategy-title {font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:.25rem .4rem; border-radius:4px;}
.strategy-content {display:flex; flex-direction:column; gap:.25rem; overflow:visible;}
/* Ensure per-strategy containers never show their own scrollbars */
.strategy-column { overflow: visible; max-height: none; }
/* New wrapper to contain all four strategy columns and manage vertical scroll */
.strategy-chunk-row {display:flex; flex:1 1 auto; width:100%; gap:.6rem; padding:0; box-sizing:border-box; align-items:flex-start;}
.chunk-container {background:var(--panel); border:1px solid var(--border); padding:.35rem .45rem; border-radius:6px; position:relative; transition:var(--transition);}
.chunk-container:hover {border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-soft);}
.text-chunk {font-size:.68rem; line-height:1.2; word-break:break-word;}
.token-text {color:var(--muted);}
.graph-zone {margin-top:1.2rem; display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); grid-column:1 / -1;}
#graphContainerWrapper {display:none;} /* legacy hidden */
.viz-panel {background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:.75rem;}
.viz-panel h3 {margin:.2rem 0 .75rem; font-size:.8rem; font-weight:600; letter-spacing:.05em; color:var(--muted);}
.viz-note {font-size:.62rem; color:var(--muted); font-style:italic; padding:.25rem .35rem;}
.tooltip {position:absolute; background:#111; color:var(--text); padding:.4rem .55rem; font-size:.65rem; border:1px solid var(--border); border-radius:4px; pointer-events:none;}
.highlight {outline:2px solid var(--accent);}
footer {margin-top:2.5rem; font-size:.6rem; color:var(--muted); text-align:center;}

/* Inner containers should fill panel content area under the title */
#graphContainer_dimred, #graphContainer_histogram, #graphContainer_HEB, #contentContainer {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0; /* allow flex item to shrink within panel */
    overflow: hidden; /* keep borders tight, avoid accidental scrollbars */
}

/* Content panel holds plain text, top-justified, scrollable if long */
#contentContainer {
    overflow: auto;
    padding: .5rem;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
}
/* Content text styling */
#contentContainer { 
    font-size: .78rem; 
    line-height: 1.35; 
    white-space: pre-wrap; 
    color: var(--text);
}

/* Remove borders from inner visualization containers (SVG and wrappers) */
#graphContainer_dimred, #graphContainer_dimred svg,
#graphContainer_histogram, #graphContainer_histogram svg,
#graphContainer_HEB, #graphContainer_HEB svg {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure the inserted SVG background rect never shows a stroke */
#graphContainer_dimred rect.background,
#graphContainer_histogram rect.background,
#graphContainer_HEB rect.background {
    stroke: none !important;
}