/* 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;
}