/*
IC SHIP PASS — generated by icpass.py from the map. edit the CODE; rerun to refresh this.

══════════════════════════════════════════════════════════════════════
 PAGE 0 — TABLE OF CONTENTS  (goldfish pointers)
 jump by SEARCHING the anchor phrase — line numbers drift, names don't.
══════════════════════════════════════════════════════════════════════
  the COMPACT strip: a tiny green→red ... search: "the COMPACT strip: a"
══════════════════════════════════════════════════════════════════════

 FOR AI
 ───────
   **OWNS** — the visual styling and layout of the context-window meter that appears under agent
   **input. Exports CSS classes: `.ctx-bar` (container), `.ctx-mini` (compact strip),
   **`.ctx-thermo` (thermometer), `.ctx-full` (expanded view), `.ctx-hallu` (hallucination
   **checker), and their state variants. Any HTML element using these class names depends on this
   **file's structure and naming.
   
   **TOUCH HERE** —
   - change thermometer colors (green/yellow/red gradient) → `.ctx-thermo` L9 and
   - `.ctx-thermo-fill` L11
   - change compact strip layout or spacing → `.ctx-mini` L7
   - change percentage text size or styling → `.ctx-pct` L14
   - change expanded bar height or track styling → `.ctx-track` L30
   - change hallucination checker icon size → `.ctx-hallu img` L19
   - change phone skin positioning or inset values → `.convo[data-skin="phone"] .ctx-bar` L46–49
   - change button styling (action buttons) → `.ctx-act` L37–40
   
   **TRAPS** —
   - `.ctx-hallu.ok::after` hardcodes the checkmark character `'✓'` (L24); changing this requires
   - coordination with the JS that adds the `.ok` class
   - phone skin uses `z-index: 3` (L47) to float above the bezel frame; lowering this will hide
   - the meter behind the phone frame PNG
   - `.ctx-thermo-fill` uses `background-size: 7px 20px` (L11) tied to the thermometer's `width:
   - 7px; height: 20px` (L8); changing dimensions requires updating both
   - `.ctx-full[hidden]` (L29) relies on the `[hidden]` attribute; CSS `display: none` will break
   - if JS removes the attribute without removing the class
   - phone skin bottom offset `3.1%` (L45, L47) must match between `.convo-screen` and `.ctx-bar`
   - or the meter will misalign with the bezel
   
   **DO NOT** —
   - rename `.ctx-bar`, `.ctx-mini`, `.ctx-thermo`, `.ctx-full`, `.ctx-hallu` or any state
   - classes (`.ok`, `.busy`, `.hot`, `.warn`) — these are hardcoded in HTML and JavaScript
   - move the phone skin rules (L45–49) to a different file; they are layout-critical overrides
   - that must stay here
   - add animations or transitions beyond what exists (L12, L25) without checking if JS code
   - expects specific timing
   - change the `data-skin="phone"` selector — it is the contract with the skin system elsewhere
   
   
   
   
   
   ---

END IC SHIP PASS
*/

/* context-bar.css — the context-window meter under an agent's input. tokens only. */
/* its OWN surface (var(--surface)) so the label reads on any skin's convo frame (the neo/coder frame is tan
   → var(--text) at 0.6 washed out). consistent meter chrome on every agent. */
.ctx-bar { flex-shrink: 0; padding: 5px var(--space-md) 6px; border-top: 1px solid var(--line); background: var(--surface); }

/* ── the COMPACT strip: a tiny green→red vertical thermometer · % · voice controls · (click → unfold) ── */
.ctx-mini { display: flex; align-items: center; justify-content: flex-end; gap: 9px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.ctx-thermo { position: relative; width: 7px; height: 20px; border-radius: 3px; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(to top, rgba(46,158,91,.22), rgba(216,151,60,.22) 60%, rgba(194,65,12,.22)); box-shadow: inset 0 0 0 1px var(--line); }
.ctx-thermo-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 3px;
  background: linear-gradient(to top, #2e9e5b 0%, #d8973c 60%, #c2410c 100%); background-size: 7px 20px; background-position: bottom; background-repeat: no-repeat;
  transition: height .25s ease; }
.ctx-thermo[data-level="hot"] { box-shadow: inset 0 0 0 1px var(--danger, #c2410c), 0 0 6px rgba(194,65,12,.7); }
.ctx-pct { font-size: 0.72em; opacity: 0.85; color: var(--text); min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }
.ctx-mini:hover .ctx-pct { opacity: 1; text-decoration: underline dotted; text-underline-offset: 2px; }
.ctx-voice { display: inline-flex; align-items: center; gap: 1px; }
/* (Sum 2026-07-13) the manual HILLICINOT pill — fire a re-check; green ✓ when a second read confirms */
.ctx-hallu { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 20px; padding: 0 3px; margin-right: 2px; border: 0; background: none; cursor: pointer; opacity: .68; }
.ctx-hallu img { height: 15px; width: auto; display: block; }
.ctx-hallu:hover { opacity: 1; }
.ctx-hallu.busy { animation: ctx-hallu-pulse 1s ease-in-out infinite; }
.ctx-hallu.ok { opacity: 1; }
.ctx-hallu.ok img { display: none; }
.ctx-hallu.ok::after { content: '✓'; color: #2e9e5b; font: 800 15px/1 system-ui; }
@keyframes ctx-hallu-pulse { 50% { opacity: .45 } }

/* the FULL window bar + scissors — hidden until the strip is clicked */
.ctx-full { margin-top: 7px; }
.ctx-full[hidden] { display: none; }
.ctx-track { position: relative; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ctx-fill { height: 100%; border-radius: 999px; width: 0; transition: width .2s ease, background .2s ease; background: var(--ok, #2e9e5b); }
.ctx-fill[data-level="warn"] { background: var(--warn, #d8973c); }
.ctx-fill[data-level="hot"]  { background: var(--danger, #c2410c); }
.ctx-mark { position: absolute; top: -2px; width: 2px; height: 10px; background: var(--text); opacity: 0.55; border-radius: 1px; }
.ctx-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: 5px; }
.ctx-label { font-size: 0.74em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-act { flex-shrink: 0; padding: 3px 9px; font: inherit; font-size: 0.78em; font-weight: 700; cursor: pointer;
  background: var(--surface-2, var(--surface)); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); }
.ctx-act:hover { background: var(--line); }
.ctx-act:disabled { opacity: 0.6; cursor: default; }

/* phone skin (PA) — the convo is bezel-framed: an absolute .convo-screen inset inside a frame png (::after,
   z-index 2). an in-flow meter lands BEHIND the frame. float it inside the window above the bottom bezel,
   on top of the frame, and lift the screen to make room so the bevel can't clip the bar or its button. */
.convo[data-skin="phone"] .convo-screen { bottom: calc(3.1% + 56px); }
.convo[data-skin="phone"] .ctx-bar {
  position: absolute; z-index: 3; left: 6.3%; right: 6.3%; bottom: 3.1%;
  border-top: none; border-radius: 0 0 6px 6px;
}