/* ============================================================================
   Speech to Decisions

   The visual design follows IBM's Granite demo pages, in particular
   https://huggingface.co/spaces/ibm-granite/granite-speech-streaming-webgpu
   (Apache-2.0): the Carbon design tokens, the app card and its header, the
   record panel with its voice-bubble cluster, the canvas frame, the dark info
   panel, tags and pills are adapted from that Space's stylesheet.
   The judgment tiles and noul bars are this demo's own, drawn with the same
   tokens. The header's IBM logo (assets/logo-ibm.svg) comes from that Space.
   ========================================================================== */

:root {
  /* --- Carbon / IBM design tokens --- */
  --white: #ffffff;
  --black: #000000;
  --cool-gray-10: #f2f4f8;
  --cool-gray-20: #dde1e6;
  --cool-gray-30: #c1c7cd;
  --cool-gray-50: #878d96;
  --cool-gray-60: #697077;
  --cool-gray-80: #343a3f;
  --cool-gray-100: #121619;

  --text-primary: #161616;
  --text-secondary: #525252;
  --text-on-color: #ffffff;
  --text-placeholder: #a8a8a8;
  --text-disabled: rgba(22, 22, 22, 0.25);
  --text-on-color-disabled: #8d8d8d;
  --content-regular: #252525;
  --content-inverse: #ffffff;
  --icon-primary: #161616;
  --icon-secondary: #525252;

  --blue-10: #edf5ff;
  --blue-40: #78a9ff;
  --blue-60: #0f62fe;
  --red-10: #fff1f1;
  --red-20: #ffd7d9;
  --red-60: #da1e28;
  --red-70: #a2191f;
  --support-success: #24a148;
  --container-inverse: #131313;

  --tag-color-green: #0e6027;
  --tag-background-green: #a7f0ba;
  --tag-color-orange: #8a3800;
  --tag-background-orange: #ffd9be;
  --tag-border-orange: #ff832b;

  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tooltip-caret-url: url("assets/tooltip-caret.svg");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Thin, borderless scrollbars. */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cool-gray-30); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--cool-gray-50); }
* { scrollbar-width: thin; scrollbar-color: var(--cool-gray-30) transparent; }

html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font-sans);
  background: var(--black);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--blue-60); outline-offset: 2px; }

/* ============================================================================
   Shell: a black page, with the app card floating inside it
   ========================================================================== */
.app {
  height: 100vh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  background: var(--black);
  overflow: hidden;
}
.stage {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px;
  position: relative;
  min-height: 0;
}
.app-card {
  --header-height: 44px;
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--cool-gray-10);
  border: 1px solid var(--cool-gray-20);
  border-radius: 8px;
}

/* Card header: mark + title + action buttons */
.app-header {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-height);
  padding: 0 8px 0 16px;
  flex-shrink: 0;
}
.app-header__brand { display: flex; align-items: center; gap: 16px; flex: 1 0 0; min-width: 0; }
.app-header__logo { display: block; width: 31px; height: auto; flex-shrink: 0; }
.app-header__divider { width: 1px; height: 24px; flex-shrink: 0; background: var(--cool-gray-30); }
.app-header__title { margin: 0; font-size: 16px; line-height: 20px; color: var(--content-regular); white-space: nowrap; }
.app-header__title strong { font-weight: 700; }
.app-header__actions { display: flex; align-items: center; gap: 6px; }

/* Carbon-style pill buttons */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 20px;
  font-size: 14px;
  line-height: 16px;
}
.btn-pill svg { width: 16px; height: 16px; }
.btn-pill--primary { background: var(--cool-gray-100); color: var(--content-inverse); }
.btn-pill--primary:hover { background: var(--blue-60); }
.btn-pill--icon {
  width: 28px;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--cool-gray-30);
  color: var(--icon-secondary);
}
.btn-pill--icon:hover,
.btn-pill--icon[aria-pressed="true"] { color: var(--icon-primary); }

/* Tooltips: a dark pill and caret under the trigger, on hover. */
[data-tooltip] { position: relative; --tt-bg: var(--cool-gray-80); }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--tt-bg);
  color: var(--text-on-color);
  font-size: 12px;
  line-height: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 30;
}
[data-tooltip]::before {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  width: 13px;
  height: 11.5px;
  transform: translateX(-50%);
  background: var(--tt-bg);
  -webkit-mask: var(--tooltip-caret-url) center / 100% 100% no-repeat;
          mask: var(--tooltip-caret-url) center / 100% 100% no-repeat;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 31;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before { opacity: 1; }

/* ============================================================================
   Workspace: two columns of white panels
   ========================================================================== */
.workspace {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 0 0 8px 8px;
}
.ws-col { display: flex; flex-direction: column; padding: 0 8px 8px; overflow: hidden; min-width: 0; }
.ws-col--right { padding-left: 0; }
.panel {
  flex: 1 0 0;
  min-height: 0;
  background: var(--white);
  border: 1px solid var(--cool-gray-20);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.panel--pad { padding: 16px; }

/* Left column heading: shown only while listening. */
.recorder-toolbar { display: none; padding-bottom: 16px; flex-shrink: 0; align-items: center; gap: 8px; }
.panel:has(.record-panel.is-listening) .recorder-toolbar { display: flex; }
.recorder-toolbar__title,
.canvas-toolbar__title { font-weight: 500; font-size: 16px; line-height: 20px; color: var(--text-primary); }

/* ---- Record panel ----------------------------------------------------------
   Idle: a blue-10 field with a dashed border. Listening: a plain gray field. */
.record-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: var(--blue-10);
  border: 1.5px dashed var(--blue-40);
  border-radius: 12px;
  text-align: center;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.record-panel.is-listening { background: var(--cool-gray-10); border-color: transparent; padding-bottom: 72px; }
.record-panel.is-disabled { opacity: 0.6; }
.record-panel.is-disabled .record-panel__mic { pointer-events: none; }

.record-visual { position: relative; display: grid; place-items: center; margin-bottom: 12px; padding: 8px; }
.voice-cluster { position: relative; width: 200px; height: 180px; }
.vdot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--s, 16px);
  height: var(--s, 16px);
  margin: calc(var(--s, 16px) / -2) 0 0 calc(var(--s, 16px) / -2);
  border-radius: 50%;
  background: var(--cool-gray-100);
  transform: translate(var(--x, 0), var(--y, 0));
  transform-origin: center;
}
/* Hovering the mic, or waiting on the microphone or the last answers: a slow pulse. */
.record-panel:not(.is-listening) .record-visual:has(.record-panel__mic:hover) .vdot,
.record-panel.is-busy .vdot {
  animation: vdot-pulse 1.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
/* Listening: the cluster swells with the microphone level (--vscale, set by app.js). */
.record-panel.is-listening .vdot {
  animation: none;
  transform: translate(var(--x, 0), var(--y, 0)) scale(var(--vscale, 1));
  transition: transform 0.08s linear;
}
@keyframes vdot-pulse {
  0%, 100% { transform: translate(var(--x, 0), var(--y, 0)) scale(0.83); opacity: 0.72; }
  45%      { transform: translate(var(--x, 0), var(--y, 0)) scale(1.18); opacity: 1; }
}

/* Mic button: a white circle over the middle of the cluster. */
.record-panel__mic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--cool-gray-20);
  color: var(--icon-secondary);
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.08s ease;
}
.record-panel__mic:hover,
.record-panel.is-listening .record-panel__mic { border-color: var(--cool-gray-30); color: var(--icon-primary); }
.record-panel__mic:active { transform: translate(-50%, -50%) scale(0.96); }
.record-panel__mic svg { width: 24px; height: 24px; display: block; }

.record-panel__title { font-size: 16px; font-weight: 500; line-height: 1.2; color: var(--text-primary); }
.record-panel__formats {
  margin-top: 16px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.32px;
  color: var(--text-placeholder);
}
/* The example button: a quiet pill under the idle text. */
.example-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--blue-40);
  border-radius: 20px;
  background: var(--white);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 16px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.example-btn:hover { background: var(--blue-10); border-color: var(--blue-60); }
.example-btn:disabled { opacity: 0.5; pointer-events: none; }
.example-btn svg { width: 12px; height: 12px; color: var(--blue-60); }
.example-btn strong { font-weight: 600; }
.record-panel.is-busy .example-btn,
.record-panel.is-disabled .example-btn { opacity: 0.5; pointer-events: none; }

/* Listening: the idle text is swapped for the level meter and the elapsed time. */
.record-panel__recording { display: none; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.record-panel.is-listening .record-panel__text { display: none; }
.record-panel.is-listening .record-panel__recording { display: flex; }
.record-panel__rectime {
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1.2;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* Dotted level meter: a row of columns, each a stack of dots lit from the middle out. */
.rec-wave { display: flex; align-items: center; width: calc(100% - 32px); margin: 0 auto; height: 40px; }
.rec-wave__bars { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; overflow: hidden; }
.rec-wave__col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; flex-shrink: 0; }
.rec-wave__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--cool-gray-100);
  opacity: 0;
  transition: opacity 0.09s ease;
}
.rec-wave__dot.is-lit { opacity: 1; }

/* Bottom bar: the microphone's name on the left, Stop on the right. */
.rec-bar { display: none; }
.record-panel.is-listening .rec-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
}
.rec-bar__device {
  display: inline-block;
  height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--cool-gray-20);
  border-radius: 8px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rec-bar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rec-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 20px;
  background: var(--black);
  color: var(--text-on-color);
  font-size: 14px;
  line-height: 16px;
  transition: background 0.12s ease;
}
.rec-bar__btn:hover { background: var(--blue-60); }
.rec-bar__btn svg { width: 16px; height: 16px; display: block; }

/* ---- Transcript (under the record panel) ---------------------------------- */
.transcript-block { flex: 0 0 34%; min-height: 150px; display: flex; flex-direction: column; margin-top: 16px; }
.block-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; flex-shrink: 0; }
.transcription-wrap { position: relative; flex: 1 0 0; min-height: 0; display: flex; flex-direction: column; }
.transcription {
  flex: 1 0 0;
  min-height: 0;
  padding: 16px 16px 44px;
  background: var(--cool-gray-10);
  border-radius: 12px;
  overflow: auto;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.16px;
  color: var(--text-primary);
  white-space: pre-wrap;
  text-align: left;
}
.transcription[data-placeholder="true"] { color: var(--text-placeholder); }
/* Words Parakeet may still revise. */
.transcript-interim { color: var(--cool-gray-50); }

.telemetry-pills {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.telemetry-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--cool-gray-20);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.notice { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--red-60); }

/* ============================================================================
   Right column: the board
   ========================================================================== */
.canvas-frame {
  width: 100%;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--cool-gray-20);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.canvas-toolbar { padding: 16px 16px 8px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.canvas-body {
  flex: 1 0 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 16px 16px;
}
.prompt-card__tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--blue-10);
  color: var(--content-regular);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

/* ---- Judgment tiles: what the speaker is doing, and the safety check ------- */
.judgment-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; flex-shrink: 0; }
.judgment,
.questions {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 16px;
  background: var(--cool-gray-10);
  border-radius: 12px;
  transition: background 0.2s ease;
}
/* Wraps when a tile is too narrow for its label, model pill and verdict on one line. */
.judgment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; }
/* The label takes the slack, so whatever follows it sits at the right. */
.judgment__label { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
/* A tile's label stays whole, so its model pill wraps to the next line instead. */
.judgment .judgment__label { white-space: nowrap; min-width: max-content; }
.judgment .telemetry-pill,
.questions .telemetry-pill { background: var(--white); }
.judgment__value {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 300;
  line-height: 36px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.judgment__value[data-placeholder="true"] { color: var(--text-disabled); }

/* The verdict: a Carbon tag, green when clear and red when flagged. */
.verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  background: var(--tag-background-green);
  color: var(--tag-color-green);
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}
.verdict::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.judgment--safety.is-flagged { background: var(--red-10); }
.judgment--safety.is-flagged .verdict { background: var(--red-20); color: var(--red-70); }

/* ---- Noul rows: a question, a bar as wide as its noul, and the number ------ */
.noul-list { display: flex; flex-direction: column; }
.noul {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(48px, 30%) 36px;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  min-height: 30px;
  padding: 4px 0;
  border-bottom: 1px solid var(--cool-gray-20);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}
.noul:last-child { border-bottom: 0; }
.noul__bar { height: 4px; border-radius: 2px; background: var(--cool-gray-20); overflow: hidden; }
.noul__fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--cool-gray-50);
  transition: width 0.25s ease, background 0.2s ease;
}
.noul__value {
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
/* A noul above 0.5: the answer is yes. */
.noul.is-yes { color: var(--text-primary); font-weight: 500; }
.noul.is-yes .noul__fill { background: var(--blue-60); }
.noul.is-yes .noul__value { color: var(--blue-60); font-weight: 600; }

/* Inside the safety tile: tighter rows, and red, not blue, for a yes. */
.noul-list--compact { margin-top: 8px; }
.noul-list--compact .noul {
  grid-template-columns: minmax(0, 1fr) minmax(40px, 22%) 36px;
  gap: 12px;
  min-height: 26px;
  padding: 3px 0;
  border-bottom: 0;
  font-size: 13px;
  line-height: 18px;
}
.judgment--safety .noul__bar { background: var(--white); }
.judgment--safety.is-flagged .noul__bar { background: var(--red-20); }
.judgment--safety .noul.is-yes .noul__fill { background: var(--red-60); }
.judgment--safety .noul.is-yes .noul__value { color: var(--red-70); }

/* The yes/no questions take the rest of the column and scroll. */
.questions { flex: 1 1 0; min-height: 120px; padding-bottom: 8px; }
.questions .noul-list { flex: 1 1 0; min-height: 0; margin-top: 8px; overflow-y: auto; padding-right: 4px; }
.questions .noul__bar { background: var(--white); }
/* An editable row: the question sits in a bordered white field, with a button
   to remove it. The fields separate the rows, so there are no rules between them. */
.noul.is-editable {
  grid-template-columns: minmax(0, 1fr) minmax(48px, 26%) 36px 24px;
  gap: 12px;
  min-height: 0;
  padding: 2px 0;
  border-bottom: 0;
}
.noul__input {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--cool-gray-30);
  border-radius: 6px;
  background: var(--white);
  font: inherit;
  color: inherit;
  text-overflow: ellipsis;
  cursor: text;
}
.noul__input::placeholder { color: var(--text-placeholder); font-weight: 400; }
.noul__input:hover { border-color: var(--cool-gray-50); }
.noul__input:focus {
  border-color: var(--blue-60);
  box-shadow: 0 0 0 1px var(--blue-60);
  outline: none;
  color: var(--text-primary);
}
.noul__remove {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--icon-secondary);
}
.noul__remove:hover { background: var(--cool-gray-20); color: var(--icon-primary); }
.noul__remove svg { width: 16px; height: 16px; display: block; }
/* The empty row at the end, for adding a question: a dashed field, and no bar,
   number or remove button yet. */
.noul.is-new .noul__input { border-style: dashed; background: transparent; }
.noul.is-new .noul__bar,
.noul.is-new .noul__value,
.noul.is-new .noul__remove { visibility: hidden; }

/* ============================================================================
   Info panel: dark, floating over the right edge of the card
   ========================================================================== */
.info-panel {
  position: absolute;
  z-index: 10;
  top: calc(var(--header-height) + 8px);
  right: 8px;
  bottom: 8px;
  width: 272px;
  max-width: calc(100% - 64px);
  background: var(--black);
  border-radius: 12px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  color: var(--text-on-color);
}
.info-panel__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.info-panel__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.info-panel__header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 24px;
}
.info-panel__header::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 1px;
  background: var(--cool-gray-80);
}
.info-panel__title { margin: 0; font-weight: 400; font-size: 20px; line-height: 28px; }
.info-panel__subtitle { margin: 4px 0 0; font-size: 16px; line-height: 24px; color: var(--text-on-color-disabled); }
.info-panel__icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--cool-gray-80);
  background: transparent;
  color: var(--text-on-color);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.info-panel__icon-btn:hover { background: var(--cool-gray-80); }
.info-panel__icon-btn svg { width: 16px; height: 16px; display: block; }
.info-panel__body {
  flex: 1 0 0;
  min-height: 0;
  padding: 20px;
  overflow: auto;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.16px;
}
.info-panel__body p { margin: 0 0 20px; }
.info-panel__body p.info-panel__list-title { margin: 0 0 4px; }
.info-panel__body ul { margin: 0; padding-left: 21px; list-style: disc; }
.info-panel__footer { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: auto; padding: 20px 20px 16px; }

/* Carbon read-only tags */
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  background: var(--tag-background-orange);
  border: 1px solid var(--tag-border-orange);
  color: var(--tag-color-orange);
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}

/* ============================================================================
   Responsive: Carbon breakpoints (md 672px, lg 1056px)
   ========================================================================== */
/* A wide but short window: shrink the cluster so the panel's contents still fit. */
@media (min-width: 1057px) and (max-height: 820px) {
  .voice-cluster { transform: scale(0.8); margin: -18px 0; }
  .record-visual { margin-bottom: 0; }
  .record-panel { min-height: 240px; }
  .judgment__value { font-size: 24px; line-height: 32px; }
  .canvas-body { gap: 12px; }
}
/* lg: one column, and the page scrolls. */
@media (max-width: 1056px) {
  html, body { height: auto; overflow: auto; }
  .app { height: auto; min-height: 100vh; overflow: visible; background: var(--cool-gray-10); }
  .stage { padding: 0; }
  .app-card { border: 0; border-radius: 0; }
  .workspace { display: flex; flex-direction: column; overflow: visible; }
  .ws-col { overflow: visible; }
  .ws-col--right { padding-left: 8px; }
  .panel, .canvas-frame { flex: none; height: auto; }
  .record-panel { flex: none; min-height: 320px; }
  .transcript-block { flex: none; height: 220px; }
  .canvas-body { flex: none; }
  .questions { flex: none; }
  .questions .noul-list { flex: none; overflow: visible; }
  .info-panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 70vh;
    border-radius: 16px 16px 0 0;
  }
}
/* md: tighter spacing, stacked tiles, no tooltips. */
@media (max-width: 672px) {
  [data-tooltip]::before,
  [data-tooltip]::after { display: none; }
  .app-header__title { font-size: 14px; }
  .panel--pad { padding: 12px; }
  .record-panel { padding: 12px; border-radius: 8px; }
  .voice-cluster { transform: scale(0.78); margin: -16px 0; }
  .record-visual { margin-bottom: 0; }
  .canvas-toolbar { padding: 12px 12px 0; }
  .canvas-body { padding: 12px; gap: 12px; }
  .judgment-row { grid-template-columns: 1fr; gap: 12px; }
  .judgment__value { font-size: 26px; line-height: 32px; }
  .noul { grid-template-columns: minmax(0, 1fr) 56px 36px; gap: 12px; }
  .noul.is-editable { grid-template-columns: minmax(0, 1fr) 40px 36px 24px; gap: 8px; }
  .telemetry-pills { position: static; flex-wrap: wrap; margin-top: 8px; }
  .transcription { padding-bottom: 16px; }
  .transcript-block { height: auto; }
  .transcription-wrap { flex: none; }
  .transcription-wrap .transcription { flex: none; min-height: 140px; max-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .vdot, .noul__fill { animation: none !important; transition: none; }
}