/* VOLURR AGI — the zone-review strip inside the Intelligence box.
 *
 * A separate stylesheet on purpose. The side panel's own rules live in chart-plot.css, which another
 * session is editing right now; adding to it would either lose their work or lose mine.
 *
 * THE LAYOUT RULE THIS FILE LEARNED THE HARD WAY
 *
 *   The side panel is about 230px wide. The first version put the question field and three buttons
 *   on ONE flex row, and `flex: 1` on a 230px parent minus three 40px controls left the input at
 *   forty pixels — a box you cannot read your own question in. The owner saw it before I did.
 *
 *   So the question owns a full row and the tools sit under it. Everything here is sized for a
 *   NARROW column first, because that is what this panel always is.
 *
 * COLOUR LAW, and here it is not decoration. Green and red mean DIRECTION on a price chart in this
 * product, so a positive verdict rendered green sits one glance from reading as a buy call — which
 * this product does not give. Verdicts and controls are slate, amber and crimson. Never green.
 *
 * TOUCH. Every control is at least 44px in its smallest dimension at every width, not only under a
 * media query: this panel is used on a phone in portrait and on a desktop with a trackpad, and a
 * 28px button is a miss on both.
 *
 * And the sizing selectors carry TWO classes, deliberately. A single `.pcz-btn { min-height: 44px }`
 * was measured resolving to 34px in the live browser: a later stylesheet carries a `.pcbtn` rule
 * inside a media query, same specificity, and later wins. Raising specificity is the fix that does
 * not depend on which file happens to load last — !important would have worked too, and would have
 * made the next person's override impossible for no reason.
 */

/* THE BOX'S OWN ACCENT. var(--pcac) resolves to brand CRIMSON on the chart card (base.css rebranded
   --gold to #e23b3b), so reading it here rendered crimson accents beside this design's amber washes
   — found by the adversarial cascade review, not by eye. Amber is the machine's colour in this
   product (the copilot's preview bands established it); the box declares it once and owns it. */
.pcside { --vagi: #e8932a; }


.pcz-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .09));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── the review button ─────────────────────────────────────────────────────────────────────────── */
.pcz-wrap .pcz-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
}
.pcz-n {
  font-size: 10px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}

.pcz-hint {
  font-size: 10.5px;
  line-height: 1.65;
  opacity: .6;
  text-align: start;
}

/* ── the answer ────────────────────────────────────────────────────────────────────────────────── */
.pcz-out:empty { display: none; }

.pcz-card {
  background: var(--bg2, rgba(0, 0, 0, .16));
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  border-radius: 10px;
  padding: 10px 11px;
}

/* Every line carries a number, so the numerals are tabular — a column of counts that jitters is
   harder to scan than one that does not, and this card is read as a table even though it is prose.
   overflow-wrap because a price band and a symbol must never push the panel sideways. */
.pcz-l {
  font-size: 11.5px;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  margin: 3px 0;
  opacity: .82;
  overflow-wrap: anywhere;
}
.pcz-l1 { font-weight: 800; opacity: 1; font-size: 12px; }
.pcz-l2 {
  font-weight: 800;
  opacity: 1;
  padding: 5px 8px;
  margin: 5px 0 6px;
  border-radius: 7px;
  border-inline-start: 3px solid var(--line, rgba(255, 255, 255, .18));
  background: rgba(255, 255, 255, .04);
}

/* ── §7 · the DETAILS level ───────────────────────────────────────────────────────────────────────
   The measurement list used to be one 241-character sentence inside .pcz-l. It is a table of
   name/value pairs and it is now laid out as one: each pair is an inline-flex chip that wraps as a
   unit, so a label can never end up on one line with its number on the next.

   .pcz-num is the LTR pin. It is the same mechanism chart-plot.css:1316 uses for .pcltr
   (direction:ltr + unicode-bidi:isolate) — declared again here rather than reused by class name
   because that rule is scoped to #pcBody and this strip lives in #pcAIOut. The behaviour is the
   repo's; only the selector is local. */
.pcz-d {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin: 5px 0 6px;
  font-size: 11px;
  line-height: 1.7;
}
.pcz-dr {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  max-width: 100%;
}
.pcz-dk { opacity: .62; overflow-wrap: anywhere; white-space: normal; }
.pcz-dv {
  font-weight: 800;
  opacity: 1;
  font-variant-numeric: tabular-nums;
}
.pcz-num { direction: ltr; unicode-bidi: isolate; }
.pcz-du { opacity: .62; }
/* «غير متاح» is a WORD, not a number — it must not inherit the numeric weight, or a missing
   measurement reads as loudly as a measured one. */
.pcz-dr.pcz-na .pcz-dv { font-weight: 600; opacity: .55; font-style: normal; }
.pcz-conv, .pcz-lim { opacity: .6; font-size: 11px; }
.pcz-untr { opacity: .6; font-size: 10.5px; font-style: italic; }

/* ── accept / reject ──────────────────────────────────────────────────────────────────────────── */
.pcz-act {
  display: flex;
  gap: 7px;
  margin-top: 9px;
}
.pcz-wrap .pcz-ok, .pcz-wrap .pcz-no {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 8px 6px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  background: rgba(255, 255, 255, .04);
  color: var(--txt, inherit);
  touch-action: manipulation;      /* no 300ms tap delay, no accidental double-tap zoom */
}
/* Accept is amber — the same neutral the proposed band uses. Not green: accepting a MEASUREMENT is
   not an act with a direction, and colouring it like one would be the quiet way of implying a trade. */
.pcz-ok { border-color: rgba(232, 147, 42, .45); color: #e8932a; }
.pcz-ok:hover, .pcz-ok:focus-visible { background: rgba(232, 147, 42, .12); }
.pcz-no:hover, .pcz-no:focus-visible { background: rgba(255, 255, 255, .08); }

.pcz-note {
  font-size: 10px;
  line-height: 1.7;
  opacity: .58;
  text-align: start;
}
.pcz-note:empty { display: none; }

/* ── asking ───────────────────────────────────────────────────────────────────────────────────── */
.pcz-ask { display: block; }
.pcz-wrap .pcz-ask input, .vtab-pane .pcz-ask input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  font: inherit;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  background: var(--bg2, rgba(0, 0, 0, .18));
  color: var(--txt, inherit);
}
.pcz-ask input:focus {
  outline: none;
  border-color: rgba(232, 147, 42, .5);
}

.pcz-tools {
  display: flex;
  gap: 7px;
  align-items: stretch;
}
.pcz-wrap .pcz-send, .vtab-pane .pcz-send {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  background: rgba(255, 255, 255, .05);
  color: var(--txt, inherit);
  touch-action: manipulation;
}
.pcz-send:hover, .pcz-send:focus-visible { background: rgba(255, 255, 255, .09); }

/* ── voice ────────────────────────────────────────────────────────────────────────────────────── */
/* The mic pulses from a REAL level reading (--vu is the analyser's RMS), not from a canned animation.
   An animation would keep pulsing while the microphone was dead — the kind of small lie that teaches
   people not to trust the rest of the panel. */
.pcz-wrap .pcz-mic, .pcz-wrap .pcz-tts, .vtab-pane .pcz-mic, .vtab-pane .pcz-tts {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  background: rgba(255, 255, 255, .05);
  color: var(--txt, inherit);
  touch-action: manipulation;
}
.pcz-mic:hover, .pcz-tts:hover,
.pcz-mic:focus-visible, .pcz-tts:focus-visible { background: rgba(255, 255, 255, .09); }

/* Recording. Crimson is the brand's own alert colour and carries no direction — a green "recording"
   dot on a price chart would read as up. */
.pcz-mic.rec {
  border-color: rgba(226, 59, 59, .55);
  background: rgba(226, 59, 59, calc(.10 + var(--vu, 0) * .38));
  box-shadow: 0 0 0 calc(var(--vu, 0) * 5px) rgba(226, 59, 59, .12);
}

.pcz-tts.on { border-color: rgba(232, 147, 42, .45); color: #e8932a; }
/* Disabled means a voice for this language does not exist in this browser. It stays visible and
   explains itself on hover rather than disappearing — a missing control looks like a missing
   feature, and this is a browser limit, not ours. */
.pcz-tts[disabled] { opacity: .38; cursor: not-allowed; }

/* A very narrow panel: the tools stack rather than squeezing below the tap target. */
@media (max-width: 340px) {
  .pcz-tools { flex-wrap: wrap; }
  .pcz-wrap .pcz-send, .vtab-pane .pcz-send { flex: 1 0 100%; order: 3; }
}

/* ── the box's SVG glyphs (institutional pass — no emoji anywhere) ─────────────────────────────── */
.pcz-wrap .pcz-btn svg { width: 13px; height: 13px; flex: 0 0 auto; }
.pcz-wrap .pcz-send svg, .vtab-pane .pcz-send svg, .pcz-ok svg, .pcz-no svg { width: 12px; height: 12px; vertical-align: -2px; margin-inline-end: 4px; }
.pcz-wrap .pcz-mic svg, .pcz-wrap .pcz-tts svg, .vtab-pane .pcz-mic svg, .vtab-pane .pcz-tts svg { width: 15px; height: 15px; }
.pcz-wrap .pcz-mic, .pcz-wrap .pcz-tts, .vtab-pane .pcz-mic, .vtab-pane .pcz-tts { display: grid; place-items: center; }
.pcside-h .pcside-ic { display: inline-flex; margin-inline-end: 6px; color: var(--vagi, #e8932a); }
.pcside-h .pcside-ic svg { width: 14px; height: 14px; }
.pcexpl-btn svg { width: 13px; height: 13px; vertical-align: -2px; }
.pcpub svg { width: 13px; height: 13px; vertical-align: -2px; margin-inline-end: 5px; }