input.css

@import "tailwindcss";

/* ═══════════════════════════════════════════════════════════════════
   Notebook + cell styling (cell-wrap, code-cell, cell-out, cell-ctrls,
   rt-badge, cell-eye, cell-code-wrap, markdown prose, pluto-table,
   jl-error, jl-tree, cell-stdout, cell-logs, hljs overrides, cm-cell
   CodeMirror, state classes cv-*, keyframes) lives in ONE file:
     static/notebook-chrome.css

   Both the IDE (via this @import) and published notebooks (via
   Sessions.render_published_notebook's inline <style>) consume it —
   single source of truth. Every token used by those rules (--cell-*,
   --md-*, --cm-*, --adm-*, --logs-*, --text-*, --warm-*, --accent,
   --status-*, --selection-bg, etc.) is also defined there.
   ═══════════════════════════════════════════════════════════════════ */
@import "./static/notebook-chrome.css";

@source "./src/routes/**/*.jl";
@source "./src/components/**/*.jl";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --font-display: 'Fraunces', Georgia, serif;
  --color-workspace: var(--workspace-bg);
  --color-panel: var(--panel-bg);
  --color-cell: var(--cell-bg);
  --color-chrome: var(--chrome-bg);
  --color-divider: var(--divider);
  --color-accent: var(--accent);
  --color-rose: var(--accent);
  --color-status-done: var(--status-done);
  --color-status-running: var(--status-running);
  --color-status-error: var(--status-error);
  --color-warm-50: var(--warm-50);
  --color-warm-100: var(--warm-100);
  --color-warm-200: var(--warm-200);
  --color-warm-300: var(--warm-300);
  --color-warm-400: var(--warm-400);
  --color-warm-500: var(--warm-500);
  --color-warm-600: var(--warm-600);
  --color-warm-700: var(--warm-700);
  --color-warm-800: var(--warm-800);
}

/* ═══════════════════════════════════════════════════════════════════
   IDE chrome tokens — workspace / terminal / toolbar-pill surfaces
   that are not needed by published notebooks. Notebook tokens
   (--warm-*, --accent, --cell-*, --text-*, --md-*, --cm-*, --adm-*,
   --logs-*, --selection-bg, --scrollbar-thumb, --status-*) are
   defined in notebook-chrome.css and inherited via @import above.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --workspace-bg:    var(--warm-50);
  --chrome-bg:       var(--warm-100);
  --chrome-active:   #ffffff;
  --divider:         var(--warm-200);
  --term-bg:         var(--warm-100);
  --term-border:     #ffffff;
  --statusbar-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  /* xterm.js theme tokens — read by Terminal.jl via getComputedStyle */
  --term-fg:                 var(--warm-800);
  --term-cursor:             var(--accent);
  --term-cursor-accent:      var(--term-bg);
  --term-selection-bg:       rgba(212,117,154,.15);
  --term-ansi-black:         var(--warm-800);
  --term-ansi-red:           #dc3545;
  --term-ansi-green:         #219669;
  --term-ansi-yellow:        #b8860b;
  --term-ansi-blue:          #2563eb;
  --term-ansi-magenta:       #9558b2;
  --term-ansi-cyan:          #0d9488;
  --term-ansi-white:         var(--warm-50);
  --term-ansi-bright-black:  var(--warm-400);
  --term-ansi-bright-white:  #ffffff;
}

.dark {
  --workspace-bg:    #1a2332;
  --chrome-bg:       #050709;
  --chrome-active:   #0f1419;
  --divider:         #243043;
  --term-bg:         #050709;
  --term-border:     #2a3a4f;
  --statusbar-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
  --term-fg:                 #d4dce8;
  --term-cursor:             var(--accent);
  --term-cursor-accent:      var(--term-bg);
  --term-selection-bg:       rgba(212,117,154,.2);
  --term-ansi-black:         #080b10;
  --term-ansi-red:           #dc3545;
  --term-ansi-green:         #56d4a0;
  --term-ansi-yellow:        #d4a056;
  --term-ansi-blue:          #7bb8e8;
  --term-ansi-magenta:       #b08fd8;
  --term-ansi-cyan:          #56d4a0;
  --term-ansi-white:         #d4dce8;
  --term-ansi-bright-black:  #6b7d93;
  --term-ansi-bright-white:  #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════
   Table of Contents — widget styling lives in SessionsUI/src/toc.jl.
   Two IDE-specific overrides:
     1. position: absolute → anchors the ToC to nb-island instead of
        the viewport.
     2. cell-list width clamp when the ToC is open.
   ═══════════════════════════════════════════════════════════════════ */
#nb-island .sessions-toc.aside{position:absolute;top:58px;}
/* Reserve right-side space for the ToC when it's open on wide viewports.
   Previously keyed off `container-type: inline-size` on #nb-island so the
   query tracked the panel's width instead of the viewport. That stacked
   `contain: layout inline-size style` onto the flex-column parent, and
   Chromium rewrites child flex sizing under that combination — the
   `h-[38px] shrink-0` tab_bar collapsed to 0px, so the file tab, Stop,
   progress, Save, and Format all vanished the moment the ToC opened
   (returned when it was hidden because the rule stopped matching).
   Plain @media dodges the containment entirely; viewport width tracks
   nb-island width closely enough in the single-pane IDE layout. */
@media (min-width: 1200px) {
  #nb.toc-open{padding-right: calc(300px + 0.5rem) !important;}
}

/* ═══════════════════════════════════════════════════════════════════
   Structural layout — workspace / panels / scrollbars / animations
   ═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* `overflow: clip` instead of `hidden` on every layout container that wraps
   the scrollable #nb. `hidden` still makes an element a scrolling box (it
   has a scrollTop, just no visible scrollbar), and `scrollIntoView` walks
   up the ancestor chain and scrolls every scrolling box it finds. When the
   ToC jumps to a heading near the bottom of a large notebook, #nb runs out
   of scroll room, so the browser continues and also scrolls nb-island /
   editor-area — which pushes the tab bar off the top of nb-island. `clip`
   explicitly is NOT a scroll container, so scrollIntoView skips it.
   See NotebookPanel.jl for the matching nb-island change. */
html,body{height:100%;overflow:clip;margin:0;padding:0;}
#sessions-root{display:flex;flex-direction:column;height:100vh;overflow:clip;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1;background:var(--workspace-bg);color:var(--text-1);transition:background .2s,color .2s;}
#workspace{flex:1 1 0%;display:flex;gap:12px;padding:12px;min-height:0;overflow:clip;}
#workspace>*{min-height:0;}
#workspace>div{min-height:0;}
#nb-island>therapy-island{flex:1;display:flex;flex-direction:column;min-height:0;}
#nb{overflow-x:hidden;}

/* Activity Bar */
.ab-btn[data-state="on"]{background:rgba(212,117,154,.1) !important;color:var(--accent) !important;}
.ab-btn:hover{background:rgba(128,128,128,.08) !important;color:var(--text-2) !important;}

/* Tab bar + cell-gap insert buttons */
.cdiv{height:0;position:relative;}
.cdiv::before{content:'';position:absolute;left:0;right:0;top:-12px;height:24px;cursor:pointer;}
.cdiv-inner{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center;z-index:5;}
.cdiv:hover .cdiv-inner{opacity:1;}
.cdiv-btn{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--cell-border);background:var(--panel-bg);color:var(--text-3);cursor:pointer;font-size:12px;padding:0;transition:all .12s;}
.cdiv-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}
.chv{transition:transform .12s ease;}
.chv.open{transform:rotate(90deg);}
.tab.active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);border-radius:2px 2px 0 0;}
.tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;color:#B5A898;transition:background .12s,color .12s;cursor:pointer;margin-left:6px;flex-shrink:0;}
.tab:not(.active) .tab-close{color:#CEC6BB;}
.tab-close:hover{background:rgba(0,0,0,.05);color:#6B4C3B;}
.dark .tab-close{color:#7A7A8E;}
.dark .tab:not(.active) .tab-close{color:#4A4A58;}
.dark .tab-close:hover{background:rgba(255,255,255,.06);color:#E8DFD2;}
.tab-close svg{width:10px;height:10px;display:block;}
#fpanel.hide{width:0!important;opacity:0;padding:0;border:none;overflow:hidden;pointer-events:none;}

/* Scrollbars + selection */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px;}
::selection{background:var(--selection-bg);}

/* Resize zones */
#fpanel{position:relative;}
#fpanel::after{content:'';position:absolute;top:0;bottom:0;right:-8px;width:12px;cursor:col-resize;z-index:10;}
#repl{position:relative;}
#repl::before{content:'';position:absolute;left:0;right:0;top:-8px;height:12px;cursor:row-resize;z-index:10;}
#workspace.terminal-right #repl-panel{flex-shrink:0;}
#workspace.terminal-right #repl{height:100% !important;width:350px;border-radius:12px;}
#workspace.terminal-right #repl::before{left:-8px;right:auto;top:0;bottom:0;width:12px;height:auto;cursor:col-resize;}
body.resizing-x *{cursor:col-resize!important;user-select:none!important;}
body.resizing-y *{cursor:row-resize!important;user-select:none!important;}

/* Shoelace loading */
sl-tree:not(:defined),sl-tree-item:not(:defined){opacity:0;height:0;overflow:hidden;}
sl-tree:defined,sl-tree-item:defined{opacity:1;height:auto;transition:opacity .2s;}

/* Notebook loading overlay (IDE only) */
.nb-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;z-index:10;background:var(--panel-bg);transition:opacity .3s;pointer-events:none;}
.nb-loading.loaded{opacity:0;}
.nb-loading .dot-pulse{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pulse 1.2s ease-in-out infinite;}
.nb-loading .dot-pulse:nth-child(2){animation-delay:.2s;}
.nb-loading .dot-pulse:nth-child(3){animation-delay:.4s;}

/* Animations */
@keyframes blink{50%{opacity:0}}
.cblink{animation:blink 1s step-end infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}

/* Drop ruler / marquee select (IDE drag-to-reorder) */
#drop-ruler{position:absolute;display:none;left:0;right:0;height:4px;background:var(--accent);border-radius:2px;z-index:50;pointer-events:none;transition:top .05s ease-out;box-shadow:0 0 8px rgba(212,117,154,.3);}
#select-area{position:absolute;background:rgba(212,117,154,.15);border:1px solid rgba(212,117,154,.3);border-radius:3px;z-index:100;pointer-events:none;display:none;}

/* Shoelace overrides + file tree */
:root{--sl-color-primary-600:var(--accent);--sl-font-sans:'DM Sans',system-ui,sans-serif;--sl-font-mono:'JetBrains Mono',monospace;--sl-font-size-small:12px;}
sl-tree{--indent-size:14px;--indent-guide-width:1px;--indent-guide-color:var(--divider);min-width:max-content;}
sl-tree-item::part(label){font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--text-3);display:flex;align-items:center;gap:6px;}
sl-tree-item::part(item){border-radius:4px;padding:1px 4px;transition:background .12s,color .12s;}
sl-tree-item::part(item--selected){background:rgba(212,117,154,.1);outline:none;border-left:2px solid var(--accent);}
sl-tree-item::part(expand-button){color:var(--text-3);padding-right:0;}
sl-tree-item[selected]::part(label){color:var(--text-1);}
sl-tree-item::part(item):hover{background:rgba(128,128,128,.06);}
.tree-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tree-rename-input{background:var(--cell-bg);border:1px solid var(--accent);border-radius:3px;color:var(--text-1);font-family:'JetBrains Mono',monospace;font-size:12px;padding:1px 4px;outline:none;width:100%;}
.file-ctx-menu{display:none;position:fixed;z-index:9999;background:var(--panel-bg);border:1px solid var(--cell-border-hov);border-radius:8px;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,.3);overflow:hidden;padding:4px 0;}
.file-ctx-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;cursor:pointer;color:var(--text-2);font-family:'JetBrains Mono',monospace;transition:background .1s,color .1s;}
.file-ctx-item:hover{background:rgba(212,117,154,.08);color:var(--text-1);}
.file-ctx-item.danger:hover{background:rgba(220,53,69,.1);color:var(--status-error);}
.file-ctx-sep{height:1px;background:var(--divider);margin:4px 8px;}
.tree-breadcrumb{display:flex;align-items:center;gap:4px;padding:4px 8px;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-3);overflow:hidden;}
.tree-breadcrumb button{background:none;border:none;color:var(--text-3);cursor:pointer;padding:2px 4px;border-radius:3px;display:flex;align-items:center;transition:color .12s,background .12s;}
.tree-breadcrumb button:hover{color:var(--text-1);background:rgba(128,128,128,.06);}
.tree-breadcrumb .crumb{color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;}

/* xterm.js */
.xterm{height:100%;}
.xterm .xterm-viewport{overflow-y:auto!important;}
.xterm .xterm-viewport::-webkit-scrollbar{width:5px;}
.xterm .xterm-viewport::-webkit-scrollbar-track{background:transparent;}
.xterm .xterm-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px;}
.term-tab{display:flex;align-items:center;gap:4px;padding:3px 10px;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-3);cursor:pointer;border-radius:4px 4px 0 0;transition:color .12s,background .12s;white-space:nowrap;user-select:none;}
.term-tab:hover{color:var(--text-2);background:rgba(128,128,128,.06);}
.term-tab.active{color:var(--text-1);background:var(--term-bg);border-bottom:2px solid var(--accent);}
.term-tab .close-x{opacity:0;font-size:9px;padding:1px 3px;border-radius:3px;transition:opacity .1s,background .1s;}
.term-tab:hover .close-x,.term-tab.active .close-x{opacity:.6;}
.term-tab .close-x:hover{opacity:1;background:rgba(220,53,69,.15);color:var(--status-error);}

/* Undo toast */
#undo-toast{position:fixed;bottom:20px;left:20px;z-index:9999;background:var(--panel-bg);border:1px solid var(--cell-border-hov);border-radius:8px;padding:10px 16px;font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--text-2);box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none;}
#undo-toast.show{opacity:1;transform:translateY(0);pointer-events:auto;}
#undo-toast kbd{background:var(--chrome-bg);border:1px solid var(--cell-border);border-radius:3px;padding:1px 5px;font-size:11px;color:var(--accent);}

/* File editor host */
.file-editor-wrap{height:100%;display:flex;flex-direction:column;}
.cm-file-editor{flex:1;min-height:0;}
.cm-file-editor .cm-editor{height:100%;}

/* ═══════════════════════════════════════════════════════════════════
   Notebook Toolbar Pill — IDE-only (published notebooks don't ship
   a toolbar, they're read-only). One pill: [exec] | [status] | [file].
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --tb-pill-bg:#FFFFFF;
  --tb-pill-border:rgba(0,0,0,.1);
  --tb-primary-text:#6B4C3B;
  --tb-primary-bg:#F0EBE4;
  --tb-default-text:#6B4C3B;
  --tb-ghost-text:#9B8F82;
  --tb-disabled-text:#CEC6BB;
  --tb-stale-text:#854F0B;
  --tb-stale-bg:#FAEEDA;
  --tb-stale-icon:#BA7517;
  --tb-stop-text:#993C1D;
  --tb-stop-icon:#D85A30;
  --tb-status-text:#9B8F82;
  --tb-dot:#B5A898;
  --tb-bar-track:#E5DED5;
  --tb-bar-fill:#B5A898;
  --tb-done:#6B8F3B;
  --tb-sep:rgba(0,0,0,.1);
  --tb-hover:rgba(0,0,0,.04);
  --tb-active:rgba(0,0,0,.08);
}
.dark{
  --tb-pill-bg:#282A3A;
  --tb-pill-border:rgba(255,255,255,.08);
  --tb-primary-text:#E8DFD2;
  --tb-primary-bg:#353749;
  --tb-default-text:#C7BEAD;
  --tb-ghost-text:#6B6A7A;
  --tb-disabled-text:#4A4A58;
  --tb-stale-text:#FAC775;
  --tb-stale-bg:rgba(250,199,117,.1);
  --tb-stale-icon:#FAC775;
  --tb-stop-text:#F09595;
  --tb-stop-icon:#F09595;
  --tb-status-text:#6B6A7A;
  --tb-dot:#7A7A8E;
  --tb-bar-track:#353749;
  --tb-bar-fill:#7A7A8E;
  --tb-done:#97C459;
  --tb-sep:rgba(255,255,255,.08);
  --tb-hover:rgba(255,255,255,.05);
  --tb-active:rgba(255,255,255,.09);
}

.nb-pill{display:inline-flex;align-items:center;gap:2px;padding:4px 6px;border-radius:20px;background:var(--tb-pill-bg);border:1px solid var(--tb-pill-border);font-family:'DM Sans',system-ui,sans-serif;font-size:11px;line-height:1;}
.pill-group{display:inline-flex;align-items:center;gap:2px;}
.pill-sep{display:inline-block;width:1px;height:16px;background:var(--tb-sep);margin:0 4px;flex-shrink:0;}

.pill-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:16px;border:none;background:transparent;color:var(--tb-default-text);cursor:pointer;font-size:11px;font-weight:500;white-space:nowrap;line-height:1;font-family:inherit;}
.pill-btn:hover{background:var(--tb-hover);}
.pill-btn:active{background:var(--tb-active);}
.pill-btn svg{width:10px;height:10px;flex-shrink:0;}

.pill-btn.pill-primary{color:var(--tb-primary-text);background:var(--tb-primary-bg);}
.pill-btn.pill-primary:hover{filter:brightness(.97);}
.dark .pill-btn.pill-primary:hover{filter:brightness(1.1);}

.pill-btn.pill-ghost{color:var(--tb-ghost-text);}
.pill-btn.pill-ghost-icon{padding:3px 6px;color:var(--tb-ghost-text);border-radius:12px;}

.pill-btn.pill-stale{color:var(--tb-stale-text);background:var(--tb-stale-bg);}
.pill-btn.pill-stale svg{color:var(--tb-stale-icon);}
.pill-btn.pill-stale:hover{filter:brightness(.98);}
.dark .pill-btn.pill-stale:hover{filter:brightness(1.1);}

.pill-btn.pill-stop{color:var(--tb-stop-text);}
.pill-btn.pill-stop svg{color:var(--tb-stop-icon);}

.pill-btn.tb-disabled{color:var(--tb-disabled-text);background:transparent;pointer-events:none;}
.pill-btn.tb-disabled svg{color:var(--tb-disabled-text);}

.pill-count-badge{margin-left:2px;font-weight:600;}

.pill-status{display:inline-flex;align-items:center;gap:8px;padding:0 4px;color:var(--tb-status-text);font-size:11px;font-family:'JetBrains Mono',monospace;}
.pill-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tb-dot);flex-shrink:0;animation:pill-dot-pulse 2.5s ease-in-out infinite;}
@keyframes pill-dot-pulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.pill-bar{width:60px;height:2px;background:var(--tb-bar-track);border-radius:1px;overflow:hidden;flex-shrink:0;}
.pill-bar-fill{height:100%;background:var(--tb-bar-fill);border-radius:1px;transition:width .3s ease;}

.pill-check{color:var(--tb-done);font-size:12px;font-weight:700;line-height:1;}
.pill-count.pill-done{color:var(--tb-done);font-family:'JetBrains Mono',monospace;}
#theme-toggle-btn:hover{background:rgba(212,117,154,.18) !important;border-color:var(--accent) !important;}