chamba 0.3.1 → 0.4.0

package/templates/webterm/public/styles.css

@@ -0,0 +1,1193 @@
+/* styles.css - Dark layout: session bar on top, the attached session's terminal filling the middle,
+   and a composer below with the action buttons floating in the textbox's bottom-right corner. */
+
+:root {
+    --bg: #0d1117;
+    --panel: #161b22;
+    --border: #30363d;
+    --text: #e6edf3;
+    --muted: #8b949e;
+    --bad: #f85149;
+    /* A touch lighter than pure black so the terminal does not read as a void. */
+    --term-bg: #12161d;
+    /* This workspace's colour, replaced by app/theme.js from the palette before anything is drawn. Everything that
+       says "you are in this window" is this one hue: the composer border, the terminal edge, the active tab's
+       edge, and the buttons. The value here is only what shows if the script never runs. */
+    --ws: #2fe58a;
+    /* The interface has one accent and it is the workspace's, so a window is one colour and not two. */
+    --accent: var(--ws);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    margin: 0;
+    height: 100%;
+    background: var(--bg);
+    color: var(--text);
+    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+/* ---- Session bar ---- */
+
+#tabbar {
+    display: flex;
+    align-items: stretch;
+    gap: 4px;
+    padding: 6px 12px 0;
+    background: var(--panel);
+    border-bottom: 1px solid var(--border);
+    overflow-x: auto;
+}
+
+/* Each tab carries its session's colour in --sc, set inline when the bar is rendered. */
+.tab {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 9px 7px 11px;
+    border: 1px solid var(--border);
+    border-bottom: none;
+    border-radius: 8px 8px 0 0;
+    background: #10151c;
+    color: var(--muted);
+    font-size: 12.5px;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    position: relative;
+    top: 1px;
+    /* A stacking context of its own, so the travelling light below can sit between the tab's surface and its
+       label rather than being pushed behind the whole bar. */
+    isolation: isolate;
+}
+
+.tab:hover {
+    color: var(--text);
+}
+
+/* Drag to reorder. The tab being dragged fades so the bar reads as a row with a hole in it, and the line
+   showing where it would land is drawn in the 4px gap on one side of the tab under the pointer. */
+.tab[draggable="true"] {
+    cursor: grab;
+}
+
+.tab.dragging {
+    opacity: 0.4;
+    cursor: grabbing;
+}
+
+.tab.drop-before::before,
+.tab.drop-after::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    bottom: 0;
+    width: 2px;
+    border-radius: 1px;
+    background: var(--accent);
+}
+
+.tab.drop-before::before {
+    left: -3px;
+}
+
+.tab.drop-after::after {
+    right: -3px;
+}
+
+/* The inset top edge is the workspace's colour, which also visually joins the tab to the terminal below it. */
+.tab.active {
+    background: var(--term-bg);
+    color: var(--text);
+    box-shadow: inset 0 2px 0 var(--ws);
+}
+
+/* The session's identity, and only that: one solid disc, always shown, never animated. Everything a session
+   is doing is said by the tab around it, which leaves the dot free to just mean "this one". */
+.tab .dot {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--sc);
+}
+
+/* Output arrived while this window was looking elsewhere, but not enough of it to count as work finishing:
+   the label brightens and the dot takes a thin ring. Nothing moves - movement belongs to the two states
+   below, so a session that merely said something cannot be mistaken for one that wants you. */
+.tab.unread {
+    color: var(--text);
+}
+
+.tab.unread .dot {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 22%, transparent);
+}
+
+/* ---- The agent is working ---- */
+/*
+   A light travels around the tab, in that session's colour. It rides the tab's own border box as a motion
+   path, so it covers the same distance in the same time on every edge and through the corners. (The obvious
+   way to do this - a conic gradient rotating behind a ring-shaped mask - turns at a constant angle instead,
+   which on a short wide tab crawls along the middle of an edge and then whips through the corners.)
+
+   The light lives in its own layer rather than in a pseudo-element on the tab, because it has to be clipped:
+   turning a corner swings part of it outside the tab, and the tab itself cannot clip (the drop markers a drag
+   draws sit just outside it, and would be cut off).
+*/
+.tab .trace {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    border-radius: 7px 7px 0 0;
+    pointer-events: none;
+    /* Above the tab's own surface but under its label, so the light passes behind the name instead of over
+       it. This needs the tab to be a stacking context of its own (isolation, above), or a negative index
+       would drop the light behind the whole bar and out of sight. */
+    z-index: -1;
+}
+
+.tab .comet {
+    position: absolute;
+    width: 16px;
+    height: 2.5px;
+    border-radius: 2px;
+    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sc) 45%, transparent) 55%, var(--sc));
+    filter: drop-shadow(0 0 4px var(--sc));
+    /* The leading edge sits on the path and the body hangs inwards, so the light stays inside the tab. */
+    offset-path: border-box;
+    offset-rotate: auto;
+    offset-anchor: 50% 0%;
+    /* One lap. TRACE_MS in app/tabs.js must match: it hands each new light a negative delay from the wall clock,
+       so a bar rebuilt mid-lap carries on instead of jumping back to the start. */
+    animation: orbit 4s linear infinite;
+}
+
+@keyframes orbit {
+    from {
+        offset-distance: 0%;
+    }
+    to {
+        offset-distance: 100%;
+    }
+}
+
+/* Motion paths off a coord-box are recent CSS. Without them the light becomes a line crossing the bottom
+   edge - the same idea, one edge instead of four - rather than nothing at all. */
+@supports not (offset-path: border-box) {
+    .tab .comet {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: auto;
+        height: 2px;
+        border-radius: 0;
+        background: linear-gradient(90deg, transparent, var(--sc), transparent);
+        background-size: 55% 100%;
+        background-repeat: no-repeat;
+        animation: sweep 1.5s linear infinite;
+    }
+
+    @keyframes sweep {
+        from {
+            background-position: -60% 0;
+        }
+        to {
+            background-position: 160% 0;
+        }
+    }
+}
+
+/* ---- It finished, and nobody was watching ---- */
+/*
+   The loudest thing the bar does, and the one it is all for: an agent that stopped needs you, and you are
+   somewhere else. It arrives with two flashes and a shove sideways - the bar never moves otherwise, so the
+   movement is what catches an eye that is not on it - and then holds lit in the session's colour until the
+   tab is visited. The held state is the part that matters: the arrival plays once and can be missed.
+*/
+.tab.attention {
+    color: var(--text);
+    background: color-mix(in srgb, var(--sc) 26%, #10151c);
+    box-shadow:
+        0 0 0 1px var(--sc),
+        0 0 18px color-mix(in srgb, var(--sc) 55%, transparent);
+}
+
+/* ARRIVAL_MS in app/tabs.js must match the total (4 x 0.34s), and is fed in as a negative delay so a re-render
+   mid-flash neither restarts it nor cuts it short. */
+.tab.attention.arriving {
+    animation:
+        alertFlash 0.34s ease-in-out 4 alternate,
+        alertNudge 0.36s ease-in-out 2;
+}
+
+@keyframes alertFlash {
+    from {
+        background: color-mix(in srgb, var(--sc) 26%, #10151c);
+    }
+    to {
+        background: color-mix(in srgb, var(--sc) 72%, #10151c);
+        color: #06090d;
+    }
+}
+
+@keyframes alertNudge {
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+    25% {
+        transform: translateX(-3px);
+    }
+    75% {
+        transform: translateX(3px);
+    }
+}
+
+/* Someone who has asked for less movement still gets both states, told without it: the working light holds
+   still on the bottom edge, and the alert simply appears already lit. */
+@media (prefers-reduced-motion: reduce) {
+    .tab .comet {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: auto;
+        height: 2px;
+        border-radius: 0;
+        background: var(--sc);
+        offset-path: none;
+        animation: none;
+    }
+
+    .tab.attention.arriving {
+        animation: none;
+    }
+}
+
+.tab .age {
+    font-size: 11px;
+    opacity: 0.85;
+}
+
+/* Inline name editor: sits where the name span was, borrowing the tab's font and colour so renaming
+   happens in place rather than in a popup. The session colour underlines it to say "this is being edited". */
+.tab .rename {
+    font: inherit;
+    color: var(--text);
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid var(--sc);
+    outline: none;
+    padding: 0;
+    margin: 0;
+    width: 12ch;
+}
+
+/* Another browser window is driving this session. */
+.tab .elsewhere {
+    font-size: 10.5px;
+    color: var(--muted);
+    border: 1px solid var(--border);
+    border-radius: 5px;
+    padding: 1px 4px;
+}
+
+/* This session runs somewhere other than the workspace root, and this is where. Only the tabs that are
+   somewhere else carry it, so a bar of ordinary sessions looks exactly as it did. A long path is cut rather
+   than allowed to push the tabs around; the tooltip has all of it. */
+.tab .dir {
+    max-width: 16ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 10.5px;
+    color: var(--muted);
+    border: 1px solid var(--border);
+    border-radius: 5px;
+    padding: 1px 4px;
+}
+
+.tab .close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--muted);
+    font-size: 13px;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.tab .close:hover {
+    background: rgba(248, 81, 73, 0.15);
+    color: var(--bad);
+}
+
+/* Shaped like a session tab, so the bar reads as one row: it is the outline of the next tab. Dashed and
+   empty is what keeps it from looking like a session that is already there. Split in two - the button starts
+   the usual agent where the last chamba session did, the chevron opens the panel that asks for both. */
+#newtab-group {
+    display: flex;
+    align-items: stretch;
+    margin: 0 0 0 6px;
+    position: relative;
+    top: 1px;
+}
+
+#newtab,
+#newtab-more {
+    display: flex;
+    align-items: center;
+    padding: 7px 11px;
+    background: transparent;
+    color: var(--muted);
+    border: 1px dashed var(--border);
+    border-bottom: none;
+    font-size: 12.5px;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+#newtab {
+    border-radius: 8px 0 0 0;
+    border-right: none;
+}
+
+#newtab-more {
+    border-radius: 0 8px 0 0;
+    padding: 7px 7px;
+    justify-content: center;
+}
+
+#newtab:hover,
+#newtab-more:hover {
+    color: var(--accent);
+    border-color: var(--accent);
+}
+
+#newtab:disabled,
+#newtab-more:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+/* What the next session should be, dropped under the chevron. Solid where the outline above it is dashed: that
+   outline is the next tab waiting to exist, this is a thing to fill in. Right under the button it came from,
+   because it opens on the way to something routine and a trip to the middle of the screen is not that. */
+#newpop {
+    position: fixed;
+    z-index: 60;
+    display: flex;
+    flex-direction: column;
+    width: 288px;
+    padding: 12px;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
+}
+
+.poplabel {
+    margin: 0 0 6px;
+    color: var(--muted);
+    font-size: 11px;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+}
+
+.poplabel:not(:first-child) {
+    margin-top: 12px;
+}
+
+#newpop .path {
+    width: 100%;
+    padding: 7px 9px;
+    background: var(--bg);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    font: inherit;
+    font-size: 12.5px;
+    outline: none;
+    box-sizing: border-box;
+}
+
+#newpop .path:focus {
+    border-color: var(--ws);
+}
+
+/* Which agent the session runs, above the directory it runs in - the same one question, asked once. */
+.agentrow {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.agentchoice {
+    padding: 6px 11px;
+    background: var(--bg);
+    color: var(--muted);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    font: inherit;
+    font-size: 12.5px;
+    cursor: pointer;
+}
+
+.agentchoice:hover {
+    color: var(--text);
+}
+
+.agentchoice.chosen {
+    color: var(--ws);
+    border-color: var(--ws);
+}
+
+.poprow {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    margin-top: 14px;
+}
+
+#barright {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0 0 6px auto;
+    padding-left: 12px;
+    color: var(--muted);
+    font-size: 11.5px;
+    white-space: nowrap;
+}
+
+/* The workspace name is the only thing on the right now, so it reads as a label rather than muted
+   metadata: full text colour, no dimming. */
+#barright .ws {
+    color: var(--text);
+}
+
+/* ---- Terminal ---- */
+
+/* The row between the session bar and the composer: the terminal, and the web pane beside it when there is
+   one. The terminal takes whatever the pane leaves, which is all of it until an agent publishes a page. */
+#middle {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+}
+
+#termwrap {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    /* Spacing via margin, not padding: FitAddon measures the wrapper height but does not subtract
+       its padding, so wrapper padding makes it propose one row too many and the last line clips.
+       Margin gives the same visual inset (page and terminal share a background) without breaking fit. */
+    margin: 8px 12px;
+}
+
+#term {
+    height: 100%;
+    background: var(--term-bg);
+    overflow: hidden;
+}
+
+/* ---- Transient status pill ---- */
+
+/* Floats over the bottom of the terminal instead of sitting in the layout: it appears and disappears
+   constantly (every copy says so), and in the flow each one shifted everything under it. Click-through,
+   so it can never swallow a click meant for the terminal underneath. */
+#note {
+    position: absolute;
+    left: 50%;
+    bottom: 12px;
+    transform: translateX(-50%);
+    max-width: 85%;
+    padding: 5px 13px;
+    background: rgba(22, 27, 34, 0.95);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
+    color: var(--muted);
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+}
+
+#note.error {
+    color: var(--bad);
+    border-color: rgba(248, 81, 73, 0.5);
+}
+
+/* No pill at all when there is nothing to say. */
+#note:empty {
+    display: none;
+}
+
+/* ---- The web pane ---- */
+
+/* Both the pane and its handle are hidden until the attached session has a page, so a terminal is the whole
+   window until an agent has something to show. `hidden` alone would lose to the display below. */
+#pane[hidden],
+#grip[hidden] {
+    display: none;
+}
+
+/* The drag handle between the terminal and the pane. Its own element rather than a border, because a border
+   is 1px and a grip has to be catchable: this is the one control on the page that is aimed at rather than
+   clicked, so it is wide enough to hit without looking and its nub is long enough to see where to aim. */
+#grip {
+    position: relative;
+    flex: none;
+    width: 12px;
+    background: var(--panel);
+    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
+    cursor: col-resize;
+}
+
+#grip::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 2px;
+    width: 6px;
+    height: 64px;
+    margin-top: -32px;
+    border-radius: 3px;
+    background: #3a4250;
+}
+
+#grip:hover::after,
+body.dragging #grip::after {
+    background: var(--accent);
+}
+
+/* While a drag is on, the pointer belongs to the grip: no text selects, and the cursor does not change as it
+   crosses the terminal or a page. */
+body.dragging {
+    cursor: col-resize;
+    user-select: none;
+}
+
+/* The width is app/pane.js's, in a custom property so the two rules that must win - the collapsed spine and
+   the narrow-screen layout - still do. The value here is what shows before the first drag. */
+#pane {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    width: var(--pane-width, 44%);
+    min-width: 0;
+    background: var(--bg);
+}
+
+/* The pagination bar: this session's pages as chips, the arrows for a bar too narrow to hold them, and where
+   in the history the open page sits. Drawn by the interface, outside the page's frame, so it always says the
+   truth about which page is open. */
+#pagebar {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 10px;
+    background: var(--panel);
+    border-bottom: 1px solid var(--border);
+    overflow: hidden;
+}
+
+.pane-nav {
+    flex: none;
+    padding: 1px 6px;
+    border: none;
+    border-radius: 6px;
+    background: none;
+    color: var(--muted);
+    font-size: 15px;
+    line-height: 1.2;
+    cursor: pointer;
+}
+
+.pane-nav:hover {
+    background: #10151c;
+    color: var(--text);
+}
+
+#chips {
+    display: flex;
+    gap: 6px;
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+
+#chips::-webkit-scrollbar {
+    display: none;
+}
+
+.chip {
+    display: flex;
+    flex: none;
+    align-items: baseline;
+    gap: 6px;
+    padding: 3px 11px;
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    background: #10151c;
+    color: var(--muted);
+    font-size: 12px;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.chip .ct {
+    color: var(--text);
+}
+
+.chip:hover {
+    border-color: #3a4250;
+}
+
+.chip.sel {
+    border-color: var(--accent);
+    background: #0f1722;
+}
+
+.chip.sel .ct {
+    color: var(--accent);
+}
+
+.chip .time {
+    font-size: 10.5px;
+}
+
+/* A page nobody has opened yet. The same green as everything else that means "something happened here". */
+.chip .new {
+    padding: 0 5px;
+    border-radius: 8px;
+    background: var(--accent);
+    color: #04140b;
+    font-size: 9.5px;
+    font-weight: 700;
+}
+
+#page-count {
+    flex: none;
+    margin-left: auto;
+    padding-left: 8px;
+    color: var(--muted);
+    font-size: 11.5px;
+}
+
+/* Out of the way, at the end of the bar: the pane is put away far more often than the chips are paged. */
+#pane-collapse {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 4px;
+    padding: 2px 5px;
+}
+
+#page-doc {
+    flex: 1;
+    min-width: 0;
+    overflow: auto;
+}
+
+/* The page itself: an agent's document, in a frame with an opaque origin (see app/pane-frame.js). Nothing
+   here styles its contents - the page brings its own. */
+.page-frame {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: var(--bg);
+}
+
+/* A page is a document with an event loop of its own, and a pointer that crosses into it during a drag is a
+   pointer the grip has to keep. Capture does that in every engine that has it; taking the frame out of the
+   hit test for the length of the drag is what makes it true everywhere. */
+body.dragging .page-frame {
+    pointer-events: none;
+}
+
+.pane-empty {
+    margin: 0;
+    padding: 20px 24px;
+    color: var(--muted);
+    font-size: 13px;
+    line-height: 1.6;
+}
+
+/* What a session with nothing in its pane says when it is opened. The one place the feature introduces
+   itself, so it is a short page rather than a line: what the pane is for, what to ask for, and that a page
+   can ask back. */
+.pane-intro {
+    padding: 18px 22px;
+    color: #9fb0c0;
+    font-size: 13px;
+    line-height: 1.6;
+}
+
+.pane-intro h2 {
+    margin: 0 0 8px;
+    color: var(--muted);
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+}
+
+.pane-intro p {
+    margin: 0 0 10px;
+}
+
+/* The asks are things to say out loud, so they are set as the words themselves - no bullets in the way. */
+.pane-intro ul {
+    margin: 0 0 12px;
+    padding: 0;
+    list-style: none;
+    color: var(--text);
+    font-size: 12.5px;
+    line-height: 1.9;
+}
+
+/* Collapsed: the pane is a spine with the unread count on it, and a click brings it back. */
+#pane.collapsed {
+    width: 30px;
+}
+
+#pane.collapsed #pagebar,
+#pane.collapsed #page-doc {
+    display: none;
+}
+
+#spine {
+    display: none;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-left: 1px solid var(--border);
+    background: var(--panel);
+    cursor: pointer;
+}
+
+#pane.collapsed #spine {
+    display: flex;
+}
+
+#spine .label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--muted);
+    font-size: 11px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    writing-mode: vertical-rl;
+}
+
+#spine:hover .label {
+    color: var(--text);
+}
+
+#spine-badge {
+    padding: 0 5px;
+    border-radius: 8px;
+    background: var(--accent);
+    color: #04140b;
+    font-size: 10px;
+    font-weight: 700;
+    writing-mode: horizontal-tb;
+}
+
+#spine-badge[hidden] {
+    display: none;
+}
+
+/* On a phone there is no room for a split: the pane takes the window, and the spine is the way back to the
+   terminal. Dragging is pointless at that width, so the grip goes. */
+@media (max-width: 700px) {
+    #grip {
+        display: none;
+    }
+
+    #pane:not(.collapsed) {
+        width: 100%;
+    }
+}
+
+/* ---- Overlay cards (take over / end session / limit reached) ---- */
+
+#overlay {
+    display: none;
+    position: absolute;
+    inset: 0;
+    background: rgba(13, 17, 23, 0.82);
+    align-items: center;
+    justify-content: center;
+}
+
+#overlay.show {
+    display: flex;
+}
+
+.card {
+    max-width: 460px;
+    padding: 18px 20px;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+}
+
+.card h2 {
+    margin: 0 0 8px;
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.card p {
+    margin: 0 0 14px;
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--muted);
+}
+
+.card .row {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+}
+
+.btn {
+    padding: 7px 13px;
+    background: rgba(48, 54, 61, 0.5);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    font-size: 12.5px;
+    cursor: pointer;
+}
+
+.btn:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+/* The one filled control on a card, in the workspace's colour with a near-black glyph on it - the only
+   place the hue is used as a fill rather than an edge, which is what makes it read as "this is the button". */
+.btn.primary {
+    background: color-mix(in srgb, var(--ws) 82%, transparent);
+    color: #06090d;
+    border-color: var(--ws);
+    font-weight: 600;
+}
+
+.btn.primary:hover {
+    background: var(--ws);
+    color: #06090d;
+}
+
+.btn.danger {
+    background: rgba(248, 81, 73, 0.15);
+    color: #ff9b95;
+    border-color: rgba(248, 81, 73, 0.5);
+}
+
+.btn.danger:hover {
+    background: rgba(248, 81, 73, 0.28);
+    color: #fff;
+    border-color: var(--bad);
+}
+
+/* ---- The curtain ---- */
+
+/* One state for "this window cannot do anything at all", over the whole page rather than over the terminal
+   like a card: while it is up, the tab bar and the composer are as dead as the terminal is, and covering
+   them says so. Half-transparent on purpose - the conversation underneath is still there, and seeing it
+   is what makes "nothing was lost" believable. */
+#curtain {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 20;
+    background: rgba(13, 17, 23, 0.78);
+    backdrop-filter: blur(2px);
+    align-items: center;
+    justify-content: center;
+}
+
+#curtain.show {
+    display: flex;
+}
+
+/* The dots on the one curtain that is waiting for something rather than reporting a state that has settled. They
+   go with the state: the curtain that replaces it has none, which is half of how it reads as finished. */
+#curtain-card .dots {
+    display: inline-flex;
+    gap: 3px;
+    margin-left: 6px;
+}
+
+#curtain-card .dots i {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: var(--muted);
+    animation: curtainDot 1.2s ease-in-out infinite;
+}
+
+@keyframes curtainDot {
+    0%,
+    60%,
+    100% {
+        opacity: 0.25;
+    }
+    30% {
+        opacity: 1;
+    }
+}
+
+/* The moment the socket drops, before any curtain: a control whose answer goes nowhere must stop taking
+   clicks. The composer disables itself, so this is about the bar - its tabs, its X, its + New session. */
+body.offline #tabbar {
+    pointer-events: none;
+}
+
+/* ---- Sound, and stopping the container ---- */
+
+/* Both sit at the far right of the bar, away from the tabs: neither one is about a single session. */
+#bellbtn,
+#stopbtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    background: transparent;
+    color: var(--muted);
+    border: 1px solid transparent;
+    border-radius: 7px;
+    cursor: pointer;
+}
+
+#stopbtn:hover {
+    color: var(--bad);
+    border-color: rgba(248, 81, 73, 0.5);
+}
+
+/* The bell is harmless, so it lights up like an ordinary control rather than a warning - and it keeps a little
+   distance from the button that ends everything, which is the one thing it must never be mistaken for. */
+#bellbtn {
+    margin-right: 3px;
+}
+
+#bellbtn:hover {
+    color: var(--text);
+    border-color: var(--border);
+}
+
+/* Muted reads as off at a glance, so the slash through the bell is not the only thing carrying it. */
+#bellbtn.muted {
+    opacity: 0.55;
+}
+
+/* ---- The status strip ---- */
+
+/* One line between the terminal and the composer, out of the terminal's way: the attached session's model,
+   the context it is holding, what is left of its quota, and the version it runs. It wraps rather than
+   scrolls, because a number half off the edge of the window is worse than a second row. */
+#strip {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+    padding: 6px 14px;
+    background: var(--panel);
+    border-top: 1px solid var(--border);
+    color: var(--muted);
+    font-size: 12px;
+}
+
+#strip[hidden] {
+    display: none;
+}
+
+.seg {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    white-space: nowrap;
+}
+
+/* The one value in a segment that the eye should land on; everything beside it is context for it. */
+.seg .name {
+    color: var(--text);
+    font-weight: 600;
+}
+
+.sep {
+    color: #3a4250;
+}
+
+.bar {
+    width: 74px;
+    height: 6px;
+    overflow: hidden;
+    border-radius: 3px;
+    background: #262c36;
+}
+
+.bar .fill {
+    display: block;
+    height: 100%;
+    background: var(--accent);
+}
+
+/* A meter that has moved far enough to be worth looking at, and one that is nearly out of room. */
+.bar.warn .fill {
+    background: #d29922;
+}
+
+.bar.low .fill {
+    background: var(--bad);
+}
+
+/* ---- Composer ---- */
+
+#composer {
+    background: var(--panel);
+    padding: 6px 12px 12px;
+    display: flex;
+    flex-direction: column;
+}
+
+#input-wrap {
+    position: relative;
+}
+
+#input {
+    display: block;
+    width: 100%;
+    /* Tall enough by default to show the three stacked buttons (3 x 28px + 2 x 6px gap, plus 8px
+       top and bottom insets = 112px), which also gives the box a comfortable typing height. */
+    min-height: 112px;
+    max-height: 200px;
+    resize: none;
+    background: #0d1117;
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    /* Right padding reserves the button gutter so typed text wraps to the next line instead of
+       sliding behind the buttons (button column is 28px wide at right: 8px, so ~44px clears it). */
+    padding: 9px 44px 9px 12px;
+    font:
+        14px / 1.5 ui-monospace,
+        "SF Mono",
+        Menlo,
+        Consolas,
+        monospace;
+    outline: none;
+    transition: border-color 0.15s ease;
+}
+
+/* Border carries the state (no separate status dot): lit in the workspace's colour when you can type into the
+   attached session, plain grey while this window is between sessions or reconnecting. A dropped connection is
+   not a failure here - the session on the other side kept running - so it goes quiet rather than warning. */
+#input.online {
+    border-color: var(--ws);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ws) 25%, transparent);
+}
+
+#input.waiting {
+    border-color: var(--border);
+}
+
+#input:disabled {
+    cursor: not-allowed;
+    color: var(--muted);
+}
+
+/* Fainter than the muted text so the placeholder hint recedes and typed input stands out. */
+#input::placeholder {
+    color: var(--muted);
+    opacity: 0.5;
+}
+
+/* Action cluster floats inside the textbox as a vertical column pinned to the right edge. The
+   textarea's right padding keeps typed text out from behind it. */
+#composer-actions {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+}
+
+/* Semi-transparent so they stay unobtrusive when floating over typed text; solidify on hover. The workspace's
+   hue is in them from the start - a faint wash and a tinted edge - so the cluster belongs to the window it
+   sits in instead of being three grey squares. */
+.icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    background: color-mix(in srgb, var(--ws) 12%, rgba(48, 54, 61, 0.5));
+    color: color-mix(in srgb, var(--ws) 30%, var(--text));
+    border: 1px solid color-mix(in srgb, var(--ws) 28%, rgba(48, 54, 61, 0.6));
+    border-radius: 7px;
+    cursor: pointer;
+    backdrop-filter: blur(2px);
+}
+
+.icon-btn:hover {
+    background: color-mix(in srgb, var(--ws) 22%, rgba(48, 54, 61, 0.9));
+    border-color: var(--ws);
+    color: var(--ws);
+}
+
+.icon-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+/* Send is the one filled button in the window: the hue solid, with a near-black arrow on it. */
+.icon-btn.primary {
+    background: color-mix(in srgb, var(--ws) 78%, transparent);
+    color: #06090d;
+    border-color: var(--ws);
+}
+
+.icon-btn.primary:hover {
+    background: var(--ws);
+    color: #06090d;
+}
+
+#mic.recording {
+    background: var(--bad);
+    border-color: var(--bad);
+    color: #fff;
+}