/* IBM 3270 font family – SIL Open Font License / BSD */
@font-face {
  font-family: "IBM 3270";
  src: url("fonts/3270-Regular.woff2") format("woff2"),
       url("fonts/3270-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM 3270 Semi-Condensed";
  src: url("fonts/3270SemiCondensed-Regular.woff2") format("woff2"),
       url("fonts/3270SemiCondensed-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM 3270 Condensed";
  src: url("fonts/3270Condensed-Regular.woff2") format("woff2"),
       url("fonts/3270Condensed-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.bg-overlay,
.bg-overlay * {
  box-sizing: border-box;
}

.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
  overflow: hidden;
  cursor: pointer;
}

.bg-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--bg-overlay-opacity);
  background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.08), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.06), transparent 35%);
  transition: opacity 0.3s ease;
}

.bg-overlay canvas {
  width: 100%;
  height: 100%;
  display: block;
}

body.bg-paused .bg-overlay::before,
body.bg-paused .bg-overlay canvas {
  opacity: 0.05;
}

:root {
  --bg: #0b1a0b;
  --panel: #0f260f;
  --panel-2: #123012;
  --border: #1f3b1f;
  --fg: #39ff14;
  --fg-muted: #8bdc79;
  --accent: #39ff14;
  --accent-2: #7cff3b;
  /* Text drawn on an --accent-colored fill (the touch keypad's Enter key, a
     notification action button). Every built-in theme's accent is a bright,
     saturated color that white text all but disappears into — measured
     contrast as low as 1.3:1, far under the 3:1 floor for bold text — so
     black is the sane default. The two paper themes swap it back to white,
     since their accent is a dark teal instead. */
  --accent-contrast: #000;
  --term-color-blue: #0000ff;
  --term-color-red: #ff0000;
  --term-color-pink: #ff77ff;
  --term-color-green: #00ff00;
  --term-color-turquoise: #00ffff;
  --term-color-yellow: #ffff00;
  --term-color-white: #ffffff;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --mono: "Cascadia Mono", "Consolas", "Courier New", monospace;
  --error-bg: rgba(255, 120, 120, 0.15);
  --bg-overlay-opacity: 0.35;
  --terminal-cell-size: 12pt;
  --scrollbar-track: color-mix(in srgb, var(--panel) 88%, var(--bg));
  --scrollbar-track-border: color-mix(in srgb, var(--border) 72%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--accent) 28%, var(--panel-2));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--accent) 42%, var(--panel-2));
  --scrollbar-thumb-active: color-mix(in srgb, var(--accent) 58%, var(--panel-2));
  --scrollbar-thumb-border: color-mix(in srgb, var(--accent) 22%, var(--border));
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border: 1px solid var(--scrollbar-track-border);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--scrollbar-thumb) 92%, white),
    var(--scrollbar-thumb)
  );
  border: 2px solid var(--scrollbar-track);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--scrollbar-thumb-border);
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--scrollbar-thumb-hover) 92%, white),
    var(--scrollbar-thumb-hover)
  );
}

*::-webkit-scrollbar-thumb:active {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--scrollbar-thumb-active) 92%, white),
    var(--scrollbar-thumb-active)
  );
}

*::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

body.theme-classic {
  --bg: #1a1407;
  --panel: #231b0d;
  --panel-2: #2e2412;
  --border: #4b3a1c;
  --fg: #ffd36b;
  --fg-muted: #c6a45f;
  --accent: #ffbe3b;
  --accent-2: #fff3bf;
  --accent-contrast: #000;
  --bg-overlay-opacity: 0.28;
}

body.theme-dark {
  --bg: #050b14;
  --panel: #0b1222;
  --panel-2: #121c33;
  --border: #233251;
  --fg: #b7f5ff;
  --fg-muted: #7ea2c6;
  --accent: #43d9ff;
  --accent-2: #78ffe0;
  --accent-contrast: #000;
  --bg-overlay-opacity: 0.4;
}

body.theme-light {
  --bg: #f7f2e7;
  --panel: #fffaf0;
  --panel-2: #f3ead6;
  --border: #d8c8a9;
  --fg: #2f2415;
  --fg-muted: #72604a;
  --accent: #0f6d8f;
  --accent-2: #b6621f;
  --accent-contrast: #fff;
  --term-color-blue: #1f4aa8;
  --term-color-red: #a32626;
  --term-color-pink: #a63a8a;
  --term-color-green: #1f7d2b;
  --term-color-turquoise: #0f7f8f;
  --term-color-yellow: #7a5a00;
  --term-color-white: #3a3126;
  --bg-overlay-opacity: 0.14;
}

body.theme-modern {
  --bg: #12071e;
  --panel: #1b0f2d;
  --panel-2: #25163d;
  --border: #3a2562;
  --fg: #ffb8f9;
  --fg-muted: #c594c4;
  --accent: #4bffcf;
  --accent-2: #ffd166;
  --accent-contrast: #000;
  --bg-overlay-opacity: 0.32;
}

body.theme-slick {
  --bg: #07151c;
  --panel: #0d1f29;
  --panel-2: #123040;
  --border: #1f4d63;
  --fg: #b8f3ff;
  --fg-muted: #86b9c6;
  --accent: #2df4ff;
  --accent-2: #57ffa5;
  --accent-contrast: #000;
  --bg-overlay-opacity: 0.22;
}

body.theme-yorkshire {
  --bg: #0a0e0a;
  --panel: #0f140f;
  --panel-2: #141a14;
  --border: #1e2b1e;
  --fg: #33cc33;
  --fg-muted: #5da75d;
  --accent: #33cc33;
  --accent-2: #66dd66;
  --accent-contrast: #000;
  --bg-overlay-opacity: 0.35;
  --crt-glow: #00ff804d;
  --crt-scanline: #00ff8026;
  --crt-radial: #00ff801a;
  --yorkshire-accent: #c79600;
  --crt-vignette: rgba(0, 0, 0, 0.55);
  --crt-edge: rgba(0, 255, 128, 0.08);
}

body.theme-yorkshire .bg-overlay::before {
  opacity: 0.2;
  background:
    radial-gradient(circle at 30% 20%, var(--crt-edge), transparent 45%),
    radial-gradient(circle at 70% 10%, var(--crt-edge), transparent 35%),
    radial-gradient(circle at 50% 50%, transparent 55%, var(--crt-vignette) 100%);
}

body.theme-yorkshire .bg-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.35) 1px,
    rgba(0, 255, 128, 0.18) 1px,
    rgba(0, 255, 128, 0.18) 3px
  );
  mix-blend-mode: screen;
}

body.theme-yorkshire .screen-container,
body.theme-yorkshire .renderer-form,
body.theme-yorkshire .h3270-form {
  position: relative;
  background: radial-gradient(var(--crt-radial), transparent 70%);
  box-shadow: none;
  border-color: transparent;
}

body.theme-yorkshire .card {
  border: 1px solid var(--border);
  box-shadow: 0 0 18px rgba(0, 255, 128, 0.22), 0 0 40px rgba(0, 0, 0, 0.35);
}

body.theme-yorkshire a,
body.theme-yorkshire .yorkshire-accent {
  color: var(--yorkshire-accent);
  font-style: italic;
}

body.theme-yorkshire a:hover,
body.theme-yorkshire .yorkshire-accent:hover {
  text-shadow: 0 0 4px #ffc1074d;
}

body.theme-authentic {
  --bg: #050905;
  --panel: #070d07;
  --panel-2: #0a130a;
  --border: #1a2b1a;
  --fg: #45ff45;
  --fg-muted: #64b664;
  --accent: #45ff45;
  --accent-2: #98ff7a;
  --accent-contrast: #000;
  --bg-overlay-opacity: 0.02;
  font-family: var(--mono);
}

body.theme-authentic .bg-overlay {
  display: none;
}

body.theme-authentic .card,
body.theme-authentic .screen-container {
  border-radius: 0;
  box-shadow: none;
}

/* ---------------------------------------------------------------------
   3270.io palettes

   The project site and both docs sites share one four-palette design
   system — phosphor green, amber CRT, ice and daylight — switched by a
   GRN / AMB / ICE / DAY control. These four themes carry the same colour
   values into the terminal so a reader who picks a palette on the site
   finds it here as well.

   Token mapping, kept the same for all four:
     --bg              ← site --bg
     --panel/--panel-2 ← site --surface-solid, one step lighter
     --border          ← site --line
     --fg/--fg-muted   ← site --text / --text-2
     --accent(-2)      ← site --accent / --accent-2
     --accent-contrast ← site --accent-ink
     --aurora-1..3     ← site aurora wash, painted by .bg-overlay::before
   --------------------------------------------------------------------- */

body.theme-io-phosphor {
  --bg: #03110d;
  --panel: #06201a;
  --panel-2: #0a2b22;
  --border: rgba(78, 255, 176, 0.16);
  --fg: #e6fff5;
  --fg-muted: #9fe6c8;
  --accent: #4effb3;
  --accent-2: #7cf9d0;
  --accent-contrast: #02130a;
  --aurora-1: rgba(78, 255, 176, 0.18);
  --aurora-2: rgba(90, 210, 255, 0.12);
  --aurora-3: rgba(185, 140, 255, 0.1);
  --bg-overlay-opacity: 0.9;
}

body.theme-io-amber {
  --bg: #150c02;
  --panel: #1e1204;
  --panel-2: #291a06;
  --border: rgba(255, 183, 77, 0.18);
  --fg: #fff3dc;
  --fg-muted: #e9c48a;
  --accent: #ffb84d;
  --accent-2: #ffd489;
  --accent-contrast: #1a0f01;
  --aurora-1: rgba(255, 183, 77, 0.2);
  --aurora-2: rgba(255, 122, 89, 0.12);
  --aurora-3: rgba(255, 231, 143, 0.08);
  --bg-overlay-opacity: 0.9;
}

body.theme-io-ice {
  --bg: #050b16;
  --panel: #0a1830;
  --panel-2: #10203f;
  --border: rgba(120, 200, 255, 0.16);
  --fg: #eaf5ff;
  --fg-muted: #a7c9e8;
  --accent: #5ad2ff;
  --accent-2: #9be6ff;
  --accent-contrast: #021019;
  --aurora-1: rgba(90, 210, 255, 0.2);
  --aurora-2: rgba(120, 140, 255, 0.14);
  --aurora-3: rgba(80, 255, 220, 0.08);
  --bg-overlay-opacity: 0.9;
}

/* The one light palette of the four. Terminal colours are darkened the same
   way Paper Terminal darkens them: the host's bright 3270 primaries are
   unreadable on a near-white screen. */
body.theme-io-daylight {
  --bg: #eef2f0;
  --panel: #ffffff;
  --panel-2: #f6f9f7;
  --border: rgba(12, 60, 45, 0.16);
  --fg: #082019;
  --fg-muted: #3d5c51;
  --accent: #00875a;
  --accent-2: #00a76f;
  --accent-contrast: #ffffff;
  --aurora-1: rgba(0, 160, 105, 0.12);
  --aurora-2: rgba(0, 130, 190, 0.08);
  --aurora-3: rgba(140, 100, 220, 0.06);
  --term-color-blue: #0b6fa4;
  --term-color-red: #c0392b;
  --term-color-pink: #9c3f86;
  --term-color-green: #12805a;
  --term-color-turquoise: #0f7f8f;
  --term-color-yellow: #a16207;
  --term-color-white: #2b3b35;
  --bg-overlay-opacity: 0.9;
}

/* Aurora wash — the same three-radial recipe the site paints behind its
   content, tinted by each palette's --aurora tokens. */
body.theme-io-phosphor .bg-overlay::before,
body.theme-io-amber .bg-overlay::before,
body.theme-io-ice .bg-overlay::before,
body.theme-io-daylight .bg-overlay::before {
  background:
    radial-gradient(120% 90% at 12% -10%, var(--aurora-1), transparent 58%),
    radial-gradient(110% 80% at 88% 0%, var(--aurora-2), transparent 55%),
    radial-gradient(120% 120% at 50% 120%, var(--aurora-3), transparent 60%);
}

body.theme-custom .screen-container,
body.theme-custom .screen-oia {
  border-radius: 0;
}

body.chrome-hidden [data-chrome-title],
body.authentic-chrome-hidden [data-chrome-title] {
  display: none;
}

/* Legacy aliases kept for backward compatibility with stored theme IDs. */
body.theme-minimal {
  --bg: #050b14;
  --panel: #0b1222;
  --panel-2: #121c33;
  --border: #233251;
  --fg: #b7f5ff;
  --fg-muted: #7ea2c6;
  --accent: #43d9ff;
  --accent-2: #78ffe0;
  --accent-contrast: #000;
  --bg-overlay-opacity: 0.4;
}

body.theme-not3270 {
  --bg: #f7f2e7;
  --panel: #fffaf0;
  --panel-2: #f3ead6;
  --border: #d8c8a9;
  --fg: #2f2415;
  --fg-muted: #72604a;
  --accent: #0f6d8f;
  --accent-2: #b6621f;
  --accent-contrast: #fff;
  --term-color-blue: #1f4aa8;
  --term-color-red: #a32626;
  --term-color-pink: #a63a8a;
  --term-color-green: #1f7d2b;
  --term-color-turquoise: #0f7f8f;
  --term-color-yellow: #7a5a00;
  --term-color-white: #3a3126;
  --bg-overlay-opacity: 0.14;
}

.page-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}

body.terminal-fit-active .page-wrap {
  padding: 12px;
}

.card {
  width: fit-content;
  min-width: min(920px, 100%);
  max-width: calc(100vw - 40px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1;
}

body.terminal-fit-active .card {
  max-width: calc(100vw - 8px);
  padding: 16px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.card-header h1,
.card-header h2 {
  margin: 0;
  font-weight: 600;
}

.subtle {
  color: var(--fg-muted);
  font-size: 0.95rem;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  min-width: 0;
}

.status-indicator[data-status-open] {
  cursor: pointer;
}

.active-run-toolbar-row {
  margin: -4px 0 16px;
  width: 100%;
}

.active-run-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--panel-2) 92%, transparent),
    color-mix(in srgb, var(--panel) 86%, transparent)
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent);
  cursor: pointer;
}

.active-run-row:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--panel-2) 90%, transparent),
    color-mix(in srgb, var(--panel) 82%, transparent)
  );
}

.active-run-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.active-run-label {
  flex: 0 0 auto;
  color: var(--fg-muted);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.active-run-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg-muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.active-run-chip[data-run-mode="recording"] {
  color: #ff6b6b;
  border-color: color-mix(in srgb, #ff6b6b 45%, var(--border));
}

.active-run-chip[data-run-mode="playback"] {
  color: #39ff14;
  border-color: color-mix(in srgb, #39ff14 45%, var(--border));
}

.active-run-chip[data-run-mode="chaos"] {
  color: #a855f7;
  border-color: color-mix(in srgb, #a855f7 45%, var(--border));
}

.active-run-meta {
  display: inline-block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.active-run-extend,
.active-run-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  color: var(--fg-muted);
  line-height: 1;
}

.active-run-close {
  order: 2;
  margin-left: auto;
}

.active-run-extend {
  order: 1;
  color: color-mix(in srgb, var(--accent) 72%, var(--fg));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.active-run-extend:not([hidden]) + .active-run-close {
  margin-left: 0;
}

.active-run-extend:hover,
.active-run-close:hover {
  color: var(--fg);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--panel) 65%, var(--accent) 12%);
}

.active-run-extend svg,
.active-run-close svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  display: block;
}

@media (max-width: 900px) {
  .active-run-row {
    padding: 9px 10px;
    gap: 8px;
  }
}

.status-text {
  color: var(--fg);
}

.workflow-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.workflow-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.workflow-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.workflow-status-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--text);
  opacity: 0.9;
}

.workflow-status-file-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.recording-indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ff4d4d;
  box-shadow: 0 0 10px rgba(255, 77, 77, 0.7);
  animation: pulse 1s infinite;
}

.playing-indicator {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #39ff14;
  filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.7));
  animation: pulse 1s infinite;
}

.paused-indicator {
  width: 14px;
  height: 14px;
  display: inline-flex;
  gap: 3px;
}

.paused-indicator::before,
.paused-indicator::after {
  content: "";
  display: block;
  width: 4px;
  height: 14px;
  background-color: #ffd24d;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 210, 77, 0.7);
}

.chaos-indicator {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background-color: #a855f7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
  animation: chaos-spin 2s linear infinite;
}

@keyframes chaos-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(0.8); }
  100% { transform: rotate(360deg) scale(1); }
}

.chaos-runs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
}

.chaos-run-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  background: var(--panel-bg, #1e1e1e);
}

.chaos-run-item.is-selected {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.chaos-run-item-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.chaos-run-select {
  flex: 0 0 auto;
  margin-top: 2px;
}

.chaos-run-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.chaos-run-id {
  font-size: 0.8em;
  font-family: monospace;
}

.chaos-run-stats {
  font-size: 0.8em;
}

.chaos-run-load-btn {
  padding: 3px 10px;
  font-size: 0.8em;
  border: 1px solid var(--accent-color, #a855f7);
  border-radius: 3px;
  background: transparent;
  color: var(--accent-color, #a855f7);
  cursor: pointer;
}

.chaos-run-load-btn:hover {
  background: var(--accent-color, #a855f7);
  color: #fff;
}

.chaos-run-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 4px;
  flex-wrap: wrap;
}

.chaos-run-delete-btn {
  padding: 3px 10px;
  font-size: 0.8em;
  border: 1px solid #cc5b5b;
  border-radius: 3px;
  background: transparent;
  color: #cc5b5b;
  cursor: pointer;
}

.chaos-run-delete-btn:hover {
  background: #cc5b5b;
  color: #fff;
}

.chaos-map-flow-node {
  cursor: pointer;
}

.chaos-map-flow-node:hover rect:first-child {
  stroke: color-mix(in srgb, var(--accent) 55%, var(--border));
  stroke-width: 2px;
}

.chaos-map-flow-node:focus-visible rect:first-child {
  stroke: color-mix(in srgb, var(--accent) 75%, var(--border));
  stroke-width: 2px;
}

.modal-chaos-flow-screen-hints {
  width: min(1180px, 100%);
  min-width: 640px;
  max-width: calc(100vw - 32px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.modal-chaos-flow-screen-hints .stack {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.modal-chaos-flow-screen-hints .chaos-hint-field input,
.modal-chaos-flow-screen-hints .chaos-hint-field textarea {
  width: 100%;
  margin: 0;
}

.modal-chaos-flow-screen-hints .chaos-hint-field textarea {
  min-height: 72px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.35;
  padding: 10px 12px;
}

.modal-backdrop[data-chaos-flow-screen-hints-modal].is-maximized .modal-chaos-flow-screen-hints {
  width: min(1200px, 98vw);
  max-height: min(96vh, 1400px);
}

button.danger {
  border-color: #cc5b5b;
  color: #cc5b5b;
  background: rgba(204, 91, 91, 0.08);
}

button.danger:hover:not(:disabled) {
  background: #cc5b5b;
  color: #fff;
}

.chaos-hints-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  padding: 2px 2px 2px 0;
}

.chaos-hint-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) minmax(0, 2fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}

.chaos-hint-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.chaos-hint-field-label {
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.modal-chaos-hints .chaos-hint-field input,
.modal-chaos-hints .chaos-hint-field textarea {
  width: 100%;
  margin: 0;
}

.modal-chaos-hints .chaos-hint-field textarea {
  min-height: 72px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.35;
}

.chaos-hint-row input,
.chaos-hint-row textarea {
  width: 100%;
  margin: 0;
}

.chaos-hint-row textarea {
  min-height: 72px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 0.82rem;
}

.chaos-hint-group {
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-2) 75%, transparent);
  display: grid;
  gap: 10px;
  min-width: 0;
}

.chaos-hint-group > legend {
  padding: 0 8px;
  margin-left: -2px;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}

.chaos-hint-group .modal-actions {
  margin-top: 2px;
}

.chaos-hint-row-static {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(280px, 1.4fr);
}

.chaos-hint-remove {
  align-self: end;
  justify-self: end;
  white-space: nowrap;
  padding: 8px 12px;
}

@media (max-width: 1120px) {
  .chaos-hint-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .chaos-hint-row .chaos-hint-remove {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .chaos-hint-row-static {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .chaos-hint-row {
    grid-template-columns: 1fr;
  }

  .chaos-hint-row-static {
    grid-template-columns: 1fr;
  }

  .chaos-hint-remove {
    justify-self: end;
  }
}

@keyframes pulse {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0.35;
  }
}

.toolbar label {
  font-size: 0.85rem;
  color: var(--fg-muted);
}

.record-download-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.record-download-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.alert {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--error-bg);
  color: var(--fg);
  margin-bottom: 16px;
}

.alert strong {
  color: var(--accent);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip-link style: hidden like .visually-hidden until keyboard-focused, then
   shown so it can act as a real, discoverable escape hatch (e.g. the
   terminal's Ctrl+Tab focus-release target). */
.visually-hidden-focusable {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visually-hidden-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 8px 0 !important;
  padding: 8px 12px !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  border: 2px solid var(--accent, #5ab0ff) !important;
  background: var(--panel, #1a1d24);
  color: var(--fg, #fff);
  display: block;
  z-index: 20;
}

.required-mark {
  color: #cc5b5b;
  margin-left: 4px;
  font-weight: bold;
}

.error-page {
  margin-top: 50px;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 16px;
}

.error-card {
  display: inline-block;
  max-width: min(560px, 92vw);
  padding: 28px 32px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid #cc5b5b;
  border-radius: 12px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.error-message {
  margin: 0 0 20px;
  color: var(--fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.error-actions {
  margin: 0;
}

.workflow-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.workflow-modal[hidden] {
  display: none;
}

.workflow-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.workflow-modal-content {
  position: relative;
  width: min(760px, 92vw);
  max-height: 80vh;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1;
}

.workflow-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workflow-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workflow-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.workflow-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.workflow-preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  overflow: auto;
  max-height: none;
  flex: 1;
  min-height: 0;
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.workflow-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 12px;
  align-items: start;
}

.workflow-modal .workflow-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.workflow-modal .workflow-field > span {
  font-size: 0.76rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}

.workflow-modal .workflow-field > input {
  width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .workflow-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .workflow-field-grid {
    grid-template-columns: 1fr;
  }
}

.error-title {
  color: #ff5858;
  margin: 0 0 12px;
}

label, select, button, input {
  color: var(--fg);
  background-color: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

button {
  cursor: pointer;
  background: linear-gradient(135deg, var(--panel-2), transparent);
}

/* A link that navigates but is presented as a button.
   The alternative — <a href="..."><button></button></a> — is invalid HTML,
   and browsers make it behave like it: two tab stops for what looks like one
   control, and Space (which a button answers to) doing nothing on the anchor
   that actually carries the destination. */
.button-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg);
  background: linear-gradient(135deg, var(--panel-2), transparent);
  background-color: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  text-decoration: none;
  cursor: pointer;
}

button:hover,
.button-link:hover {
  border-color: var(--accent);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 1;
  gap: 0;
}

.icon-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}

.icon-button-record {
  color: #ff6b6b;
}

.icon-button-stop {
  color: #ff9a5a;
}

.icon-button-wrapper {
  display: inline-flex;
  align-items: center;
}

.chrome-toggle-button {
  position: relative;
}

.chrome-toggle-button [data-eye-open],
.chrome-toggle-button [data-eye-closed] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-play {
  display: none;
}

body[data-playback-paused="true"] .playback-pause-button .icon-play {
  display: inline-flex;
}

body[data-playback-paused="true"] .playback-pause-button .icon-pause {
  display: none;
}

a {
  color: var(--accent);
}

pre, pre input, textarea {
  font-family: var(--mono);
  font-size: var(--terminal-cell-size);
  font-kerning: none;
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "liga" 0, "calt" 0, "kern" 0;
  font-optical-sizing: none;
  letter-spacing: 0;
  word-spacing: 0;
  border-style: none;
  outline: none;
  background-color: var(--bg);
  color: var(--fg);
  caret-color: var(--fg);
}

.h3270-form,
.renderer-form {
  background-color: var(--bg);
  color: var(--fg);
  letter-spacing: 0;
}

.renderer-form pre,
.renderer-form input,
.renderer-form textarea {
  line-height: var(--terminal-cell-size);
  text-rendering: optimizeSpeed;
}

.renderer-form pre {
  margin: 0;
  white-space: pre;
  tab-size: 1;
}

.screen-container {
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  padding: 4px 0;
}

.terminal-shell {
  width: fit-content;
  margin-inline: auto;
}

.screen-oia {
  background-color: var(--fg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  color: var(--bg);
  display: flex;
  font-family: var(--mono);
  font-size: var(--terminal-cell-size);
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "kern" 0;
  gap: 16px;
  line-height: var(--terminal-cell-size);
  margin: 0;
  padding: 0 0 0 8px;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}

.screen-oia > * {
  flex: 0 0 auto;
}

.h3270-input,
.h3270-input-intensified,
.color-input,
.color-input-intensified,
.h3270-input-hidden,
.color-input-hidden {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none !important;
  border-bottom: 1px solid var(--accent);
  border-radius: 0 !important;
  outline: none !important;
  caret-color: var(--accent);
  padding: 0;
  box-sizing: content-box;
  min-width: 0;
  display: inline-block;
  vertical-align: top;
  height: var(--terminal-cell-size);
  line-height: var(--terminal-cell-size);
  font-family: inherit;
  font-size: inherit;
}

/* Block cursor for compatible browsers */
@supports (caret-shape: block) {
  .h3270-input,
  .h3270-input-intensified,
  .color-input,
  .color-input-intensified,
  .h3270-input-hidden,
  .color-input-hidden {
    caret-shape: block;
  }
}

/* Text selection styling for input fields */
.h3270-input::selection,
.h3270-input-intensified::selection,
.color-input::selection,
.color-input-intensified::selection,
.h3270-input-hidden::selection,
.color-input-hidden::selection {
  background-color: var(--accent);
  color: var(--panel);
}

.h3270-input,
.color-input {
  color: var(--accent);
}

.h3270-input-intensified,
.color-input-intensified {
  color: var(--accent-2);
  border-bottom-color: var(--accent-2);
}

.h3270-input-hidden,
.color-input-hidden {
  color: transparent;
  text-shadow: 0 0 0 var(--accent);
  -webkit-text-security: disc;
}

.h3270-intensified,
.color-intensified {
  --term-ink: var(--accent-2);
  color: var(--term-ink);
  background-color: transparent;
}

.color-blue {
  --term-ink: var(--term-color-blue);
  color: var(--term-ink);
}

.color-red {
  --term-ink: var(--term-color-red);
  color: var(--term-ink);
}

.color-pink {
  --term-ink: var(--term-color-pink);
  color: var(--term-ink);
}

.color-green {
  --term-ink: var(--term-color-green);
  color: var(--term-ink);
}

.color-turquoise {
  --term-ink: var(--term-color-turquoise);
  color: var(--term-ink);
}

.color-yellow {
  --term-ink: var(--term-color-yellow);
  color: var(--term-ink);
}

.color-white {
  --term-ink: var(--term-color-white);
  color: var(--term-ink);
}

/* Background colour. The 3270 background attribute is a separate attribute
   from the foreground one, and a host that sets it is drawing a panel rather
   than colouring text. The neutral value is the screen's own ground, which is
   what an application uses to punch a hole back through a coloured area. */
.bg-neutral {
  background-color: var(--bg);
}

.bg-blue {
  background-color: var(--term-color-blue);
}

.bg-red {
  background-color: var(--term-color-red);
}

.bg-pink {
  background-color: var(--term-color-pink);
}

.bg-green {
  background-color: var(--term-color-green);
}

.bg-turquoise {
  background-color: var(--term-color-turquoise);
}

.bg-yellow {
  background-color: var(--term-color-yellow);
}

.bg-white {
  background-color: var(--term-color-white);
}

/* Reverse video swaps the ink and the ground, so it has to name the ink
   rather than reach for currentColor: currentColor in background-color is the
   element's *own* color, and this rule sets that color in the same breath.
   Written the short way the two cancel — the text ends up painted in the
   colour it is sitting on, and a reverse-video field, which is how a host says
   "this is the line that matters", renders as a blank hole in the screen.
   --term-ink is published by whichever colour class is on the element, and
   falls back to the screen's own foreground when the host asked for no colour
   at all. */
.highlight-rev-video {
  background-color: var(--term-ink, var(--fg));
  color: var(--bg);
}

.highlight-underscore {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: currentColor;
  text-decoration-skip-ink: none;
  box-shadow: inset 0 -1px 0 currentColor;
}

.h3270-input.highlight-underscore,
.h3270-input-intensified.highlight-underscore,
.color-input.highlight-underscore,
.color-input-intensified.highlight-underscore,
.h3270-input-hidden.highlight-underscore,
.color-input-hidden.highlight-underscore {
  border-bottom-color: currentColor;
  border-bottom-width: 2px;
}

.highlight-blink {
  animation: blink-field 1s steps(1, end) infinite;
}

/* A blinking field is the host saying "look here", so it cannot simply be
   switched off for somebody who has asked for less motion — that would drop
   the message rather than deliver it quietly. It becomes a standing marker
   instead: the same emphasis, held still.

   The marker is a wash of the text's own colour laid over the cell, drawn with
   an inset shadow rather than a background or an outline. An outline reads as
   a focus ring, which is a different thing and appears in a different place; a
   background would replace one the host had set with the background-colour
   attribute; and both look wrong around a run of characters in the middle of a
   line, which is where a Set Attribute order puts one. A shadow composites
   over whatever ground is already there and takes no space. */
@media (prefers-reduced-motion: reduce) {
  .highlight-blink {
    animation: none;
    box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--term-ink, var(--fg)) 22%, transparent);
  }
}

.h3270-input-hidden,
.h3270-hidden,
.color-input-hidden,
.color-hidden {
  color: var(--bg);
}

@keyframes blink-field {
  50% {
    opacity: 0;
  }
}

.h3270-unformatted,
.unformatted {
  background-color: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 8px;
}

.controls,
.h3270-keypad-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Centred while everything fits, start-aligned once it does not: a row wider
     than its box would otherwise be centred over the overflow and lose its
     first keys off the left edge, where nothing can scroll them back. */
  justify-content: flex-start;
  justify-content: safe center;
}

.controls.h3270-keypad {
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

.h3270-keypad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-bottom: 2px;
}

.h3270-keypad-title {
  font-size: 0.85rem;
  color: var(--fg-muted);
  font-weight: 600;
}

.h3270-keypad-toggle {
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 999px;
}

.h3270-keypad-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.h3270-keypad-mode-btn {
  min-width: 70px;
}

.h3270-keypad-hide-btn {
  min-width: 62px;
}

.h3270-keypad-mode-btn.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.h3270-keypad-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.h3270-keypad-row--pf {
  gap: 6px;
}

.controls button,
.h3270-key {
  background-color: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 6px 8px;
  margin: 2px;
  cursor: pointer;
  border-radius: 8px;
  min-width: 78px;
  min-height: 46px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  transition: transform 0.08s ease, border-color 0.1s ease, box-shadow 0.1s ease;
}

.controls button:hover,
.h3270-key:hover {
  border-color: var(--accent);
}

.h3270-key.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(57, 255, 20, 0.35);
  transform: translateY(1px);
}

.h3270-key-label {
  font-size: 0.8rem;
  line-height: 1.1;
  color: var(--fg);
}

.h3270-key-mapping {
  font-size: 0.66rem;
  line-height: 1.1;
  color: var(--fg-muted);
}

.h3270-keypad.is-compact .h3270-keypad-extra {
  display: none !important;
}

.h3270-keypad-max {
  display: none;
}

.h3270-keypad.is-max .h3270-keypad-max {
  display: flex;
}

/* Letters, cursor keys and number pad stay on one line at any width. What does
   not fit is not wrapped but scaled: the keypad reports its true width, and the
   auto-scale in keyboard.js shrinks the whole keyboard to the room below the
   terminal. Wrapping would trade width the display has for height it does
   not. */
.h3270-max-layout {
  /* Every key in MAX mode is cut from these two numbers: --ku is one key unit
     and --kg the gap between caps, so a 2.25u Enter is as wide as two caps and
     the gap between them. That is what keeps the rows adding up to the same
     15u and the block looking like a keyboard rather than a table of
     buttons. */
  --ku: 44px;
  --kg: 5px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  /* "safe" so that a keyboard wider than its box spills off the right edge
     only. Plain centring spills equally off both, and the half that goes off
     the left is unreachable — no scroll position brings it back, and the
     auto-scale cannot see it to correct for it. */
  justify-content: flex-start;
  justify-content: safe center;
  align-items: flex-start;
  gap: calc(var(--kg) * 3);
}

.h3270-max-side {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: calc(var(--kg) * 3);
}

.h3270-max-main,
.h3270-max-nav,
.h3270-max-numpad {
  display: flex;
  flex-direction: column;
  gap: var(--kg);
}

.h3270-max-main {
  flex: 0 0 auto;
}

.h3270-max-row {
  display: flex;
  gap: var(--kg);
  flex-wrap: nowrap;
}

.h3270-max-key {
  --u: 1;
  width: calc(var(--u) * var(--ku) + (var(--u) - 1) * var(--kg));
  flex: 0 0 auto;
}

/* The generic key is sized for a row of labelled buttons. On the keyboard the
   width comes from the unit above instead, and the height is a key's height. */
.h3270-keypad.is-max .h3270-max-key {
  min-width: 0;
  min-height: 0;
  height: calc(var(--ku) - 2px);
  margin: 0;
  padding: 4px 6px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
}

.h3270-max-key .h3270-key-label {
  font-size: 0.78rem;
  white-space: nowrap;
}

.h3270-max-key .h3270-key-mapping {
  font-size: 0.6rem;
  white-space: nowrap;
}

/* The cursor cluster and the number pad are single-unit caps whose labels
   already say what they are; "ArrowRight" printed under → does not fit and
   does not help. The letter block keeps its captions, where they are the only
   place the PF-to-function-key mapping is written. */
.h3270-max-nav .h3270-key-mapping,
.h3270-max-numpad .h3270-key-mapping {
  display: none;
}

.h3270-max-spacer {
  visibility: hidden;
}

/* Shift, armed for one key or locked until pressed again. A modifier that is
   holding has to look different from one that is merely hovered, or the row
   silently sends PF19 when PF7 was meant — and locked has to look different
   from armed, or a run of capitals comes out as one. */
.h3270-max-shift.is-armed {
  border-color: var(--accent);
  background-color: rgba(57, 255, 20, 0.14);
  box-shadow: 0 0 0 1px var(--accent);
}

.h3270-max-shift.is-locked {
  border-color: var(--accent);
  background-color: rgba(57, 255, 20, 0.26);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(57, 255, 20, 0.32);
}

/* A symbol cap prints both its legends, shifted above, as the key itself
   does. Which one is live swaps with shift, so the row always reads as what
   it will type. */
.h3270-max-key .h3270-key-shifted {
  color: var(--fg-muted);
}

.h3270-max-main.is-shifted .h3270-max-key .h3270-key-shifted {
  color: var(--fg);
  font-size: 0.78rem;
}

.h3270-max-main.is-shifted .h3270-max-key .h3270-key-shifted + .h3270-key-label {
  color: var(--fg-muted);
  font-size: 0.6rem;
}

/* Which keyboard is on the desk. Sized down to the header rather than to a
   form, where it sits beside the size control rather than competing with
   it. */
.h3270-keypad-layout-select {
  background-color: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-family: inherit;
}

.h3270-keypad-layout-select:hover {
  border-color: var(--accent);
}

/* Only MAX lays out letters, so only MAX has a region to choose. */
.h3270-keypad:not(.is-max) .h3270-keypad-layout-select {
  display: none;
}

/* MAX carries every key the grouped modes carry, so it shows the keyboard
   alone. */
.h3270-keypad.is-max .h3270-keypad-grouped {
  display: none;
}

@media (max-width: 900px) {
  .controls.h3270-keypad {
    padding: 8px 6px;
  }

  .h3270-key {
    min-width: 68px;
    min-height: 40px;
    padding: 5px 6px;
  }

  .h3270-key-label {
    font-size: 0.72rem;
  }

  .h3270-key-mapping {
    font-size: 0.62rem;
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: visible;
  min-width: 0;
  min-height: 0;
}

.terminal-width-column {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The column is as wide as the terminal so the bar above it lines up with the
   screen below. On a phone the terminal has been shrunk to fit the viewport
   and is narrower still, and sizing the bar to *that* leaves it wrapping onto
   extra rows with empty space either side of it. Below the phone breakpoint
   the column takes the width it is given and the terminal centres in it. */
@media (max-width: 560px) {
  .terminal-width-column {
    width: 100%;
  }

  .terminal-width-column > .terminal-shell {
    align-self: center;
  }
}

.terminal-width-column > .appbar,
.terminal-width-column > .context-bar,
/* The sample-app chip sizes to its content — see the note in
   ui-polish.css. It used to be stretched to the terminal's full width as a
   banner. */
.terminal-width-column > .sample-status {
  box-sizing: border-box;
}

.terminal-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* WCAG 1.4.10. Below roughly a tablet the 80-column grid is wider than the
   viewport, and .terminal-shell is a flex item with the default
   min-width:auto — so it refuses to go under its content's min-content width
   and pushes the whole document sideways. The grid itself is exempt from
   reflow (it requires a two-dimensional layout for its meaning: which column
   a character sits in is information), but the *page* scrolling is not.
   Releasing the floor and letting the grid scroll inside its own box keeps
   the scrolling where it belongs. Wider than this there is nothing to
   scroll, so the rules simply do not apply. */
@media (max-width: 700px) {
  .terminal-shell {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.terminal-controls-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.terminal-size-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  background: var(--panel-2);
}

.terminal-size-control svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.terminal-size-slider {
  width: 140px;
  accent-color: var(--accent);
  padding: 0;
}

.terminal-size-step {
  width: 24px;
  height: 24px;
}

.terminal-size-step svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.terminal-control-btn {
  min-width: 34px;
  padding: 0;
}

.terminal-control-btn.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.terminal-control-btn-primary {
  min-width: 34px;
}

.terminal-size-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--fg-muted);
  min-width: 44px;
  text-align: right;
}

@media (max-width: 980px) {
  .terminal-size-slider {
    width: 110px;
  }
}

/* Phone widths.

   The tools widget sat on a single nowrap row of controls wider than the
   screen, hanging off the edge where, being fixed, nothing could scroll to
   reach it. */
@media (max-width: 560px) {
  /* Let the title keep its own row rather than being overlapped: brand-lockup
     carries min-width:0, so without wrapping it shrinks below its text and the
     translucent action group rides over the wordmark. */
  .card-header {
    flex-wrap: wrap;
  }

  /* The chrome around the terminal is overhead on a phone; every pixel it
     gives back is a pixel of 3270 screen. */
  .page-wrap {
    padding: 12px 8px;
    align-items: flex-start;
  }

  .card {
    padding: 14px;
    max-width: calc(100vw - 16px);
  }

  .card-header {
    gap: 10px;
    margin-bottom: 12px;
  }

  .card-header .subtle {
    font-size: 0.82rem;
  }

}

/* Label, host field and four buttons. The row must wrap: laid out nowrap it
   is wider than the card on anything narrower than a laptop, and since the
   overflow is nobody's to scroll the Connect button simply hangs off the edge
   of the screen — the one control the page exists for. */
.connect-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  margin: 0;
}

.connect-row label {
  font-size: 0.9rem;
  color: var(--fg-muted);
  min-width: 120px;
}

.connect-row input {
  /* min-width:0 as well as a basis: an input carries an intrinsic minimum
     width of its size attribute, which is what pushed the row past the card
     before it would give any of it back. */
  flex: 1 1 200px;
  min-width: 0;
  background-color: var(--panel);
  border: 1px solid var(--border);
  color: var(--fg);
}

.connect-row button {
  white-space: nowrap;
  padding: 10px 16px;
  flex: 0 0 auto;
}

/* Tablet widths: host field on its own line, the buttons together beneath it,
   rather than a ragged wrap that strands Connect on a line of its own. */
@media (max-width: 900px) {
  .connect-row label,
  .connect-row input {
    flex: 1 1 100%;
  }

  .connect-row button {
    flex: 1 1 auto;
  }
}

.saved-hosts-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.saved-hosts-row label {
  font-size: 0.9rem;
  color: var(--fg-muted);
}

.saved-host-actions {
  justify-content: flex-start;
}

@media (max-width: 640px) {
  .connect-row {
    flex-direction: column;
    align-items: stretch;
  }

  .connect-row label {
    min-width: 0;
  }
}

.split {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.sample-apps {
  display: grid;
  gap: 12px;
}

.sample-app {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.sample-app-title {
  font-weight: 600;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 950;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  width: min(420px, 100%);
  max-height: min(84vh, 900px);
  /* dvh over vh where it is understood. vh is the viewport with the browser's
     chrome and the software keyboard pretending not to be there, so on a phone
     with the keyboard open 84vh is most of a screen the operator cannot see —
     the dialog's lower half, buttons included, sits underneath the keyboard.
     dvh is the space actually on show. Browsers that do not know the unit skip
     the line and keep the one above. */
  max-height: min(84dvh, 900px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 16px;
  /* The dialog scrolls rather than clipping, which is not a nicety. It is
     capped at a share of the viewport, and `overflow: hidden` meant anything
     past the cap simply ended below the edge — on a short phone, or any phone
     with the software keyboard open, the Saved hosts dialog's Use / Connect /
     Delete row was off the bottom with no way to reach it. The dialog did not
     read as scrolled; it read as broken.

     The whole dialog rather than an inner region, because these are not all
     the same shape: some are header/body/actions, some carry a paragraph
     between, and a rule that shrinks "the second row" shrinks the paragraph in
     half of them. Scrolling the dialog itself is right whatever is inside it.
     The larger chaos dialogs, which do have a fixed shape, keep their own
     scrolling body and never reach this. */
  overflow-x: hidden;
  overflow-y: auto;
  /* Reaching the end must not start scrolling the page behind the backdrop,
     which on a touch device is what a flick otherwise does. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.16s ease, filter 0.16s ease, transform 0.16s ease;
}

.modal > .stack {
  min-width: 0;
  min-height: 0;
}

.modal-backdrop.is-backgrounded .modal {
  opacity: 0.62;
  filter: saturate(0.7) brightness(0.82);
  transform: translateY(2px) scale(0.995);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-header h3 {
  margin: 0;
  font-weight: 600;
}

.modal-close {
  padding: 6px 10px;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.modal-actions form {
  margin: 0;
}

.modal-chaos-runs {
  width: min(560px, 100%);
}

.modal-chaos-start-log-confirm {
  width: min(720px, 100%);
}

.chaos-start-log-confirm-help {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
}

.chaos-start-log-confirm-message {
  margin: 0;
}

.modal-chaos-hints {
  width: min(860px, 100%);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.modal-chaos-hints .stack {
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.modal-backdrop[data-chaos-hints-modal].is-maximized .modal-chaos-hints {
  width: min(1200px, 98vw);
  max-height: min(96vh, 1400px);
}

.chaos-hints-help {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
}

.modal-chaos-map {
  width: min(1120px, 100%);
}

.modal-backdrop[data-chaos-map-modal].is-maximized .modal-chaos-map {
  width: min(1500px, 99vw);
  max-height: min(97vh, 1600px);
}

.modal-chaos-flow {
  width: min(1300px, 100%);
  max-width: calc(100vw - 40px);
  max-height: min(96vh, 1400px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.modal-chaos-flow .stack {
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.modal-chaos-report {
  width: min(1200px, 100%);
  max-width: calc(100vw - 40px);
  max-height: min(92vh, 1200px);
}

.modal-backdrop[data-chaos-report-modal].is-maximized .modal-chaos-report {
  width: min(1500px, 99vw);
  max-width: calc(100vw - 24px);
  max-height: min(97vh, 1600px);
}

.modal-chaos-report .stack {
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.chaos-report-status {
  margin: 0;
}

.chaos-report-viewer {
  min-height: 240px;
  height: min(64vh, 760px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, transparent), color-mix(in srgb, var(--panel-2) 86%, transparent));
  padding: 14px;
}

.chaos-report-viewer.is-raw {
  padding: 0;
  background: color-mix(in srgb, var(--bg) 90%, var(--panel));
}

.modal-backdrop[data-chaos-report-modal].is-maximized .chaos-report-viewer {
  height: min(78vh, 1200px);
}

.chaos-report-raw-textarea {
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: 0;
  border-radius: 10px;
  margin: 0;
  padding: 14px;
  resize: none;
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.84rem;
  line-height: 1.4;
  white-space: pre;
  overflow: auto;
}

.chaos-report-raw-textarea:focus {
  outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: -1px;
}

.chaos-report-markdown {
  color: var(--fg);
  font-size: 0.92rem;
  line-height: 1.45;
}

.chaos-report-markdown > *:first-child {
  margin-top: 0;
}

.chaos-report-markdown h1,
.chaos-report-markdown h2,
.chaos-report-markdown h3,
.chaos-report-markdown h4 {
  margin: 1rem 0 0.55rem;
  color: var(--accent);
  line-height: 1.2;
}

.chaos-report-markdown h1 {
  font-size: 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  padding-bottom: 0.4rem;
}

.chaos-report-markdown h2 {
  font-size: 1.08rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  padding-bottom: 0.25rem;
}

.chaos-report-markdown h3 {
  font-size: 0.98rem;
}

.chaos-report-markdown h4 {
  font-size: 0.9rem;
}

.chaos-report-markdown p,
.chaos-report-markdown ul {
  margin: 0.45rem 0;
}

.chaos-report-markdown ul {
  padding-left: 1.15rem;
}

.chaos-report-markdown li {
  margin: 0.2rem 0;
}

.chaos-report-markdown pre {
  margin: 0.55rem 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 92%, var(--panel));
  overflow: auto;
}

.chaos-report-markdown code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
}

.chaos-report-markdown pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.85rem;
}

.chaos-report-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.55rem 0 0.75rem;
  font-size: 0.84rem;
}

.chaos-report-markdown th,
.chaos-report-markdown td {
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.chaos-report-markdown th {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--panel-2) 90%, transparent);
  color: var(--fg-muted);
  z-index: 1;
}

.chaos-report-markdown tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--panel) 68%, transparent);
}

.modal-backdrop[data-chaos-flow-modal].is-maximized .modal-chaos-flow {
  width: min(1500px, 99vw);
  max-height: min(97vh, 1600px);
}

.chaos-map-help {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
}

.chaos-map-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.chaos-map-status-row [data-chaos-map-status] {
  margin: 0;
}

.chaos-map-status-actions {
  gap: 8px;
}

.chaos-map-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  max-height: min(70vh, 860px);
  overflow: auto;
  padding-right: 2px;
}

.chaos-map-flow-panel {
  width: 100%;
  min-width: 0;
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 94%, transparent), color-mix(in srgb, var(--panel) 90%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent) 10%, transparent),
    0 8px 24px color-mix(in srgb, var(--panel) 45%, transparent);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.chaos-map-flow-panel.is-modal {
  padding: 16px;
  min-height: min(70vh, 900px);
}

.chaos-map-flow-panel--launcher {
  gap: 8px;
}

.chaos-map-flow-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.chaos-map-flow-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  gap: 12px;
  flex-wrap: wrap;
}

.chaos-map-flow-header > strong {
  font-size: 0.98rem;
  letter-spacing: 0.02em;
}

.chaos-map-flow-header-actions {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.chaos-map-flow-meta-row {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

.chaos-map-flow-meta-row .subtle {
  display: block;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
}

.chaos-map-flow-zoom-controls {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  max-width: 100%;
}

.chaos-map-flow-zoom-controls button {
  min-width: 32px;
  padding: 3px 8px;
  line-height: 1.2;
  border-radius: 999px;
}

.chaos-map-flow-zoom-controls button[data-chaos-flow-zoom-out],
.chaos-map-flow-zoom-controls button[data-chaos-flow-zoom-in] {
  min-width: 28px;
  font-weight: 700;
}

.chaos-map-flow-zoom-controls button[data-chaos-flow-layout-reset] {
  min-width: 52px;
}

.chaos-map-flow-zoom-value {
  min-width: 3.25rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.chaos-map-flow-viewport {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--border) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 14%, transparent) 1px, transparent 1px),
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    color-mix(in srgb, var(--panel) 86%, transparent);
  background-size: 26px 26px, 26px 26px, auto, auto;
  overflow: auto;
  height: min(42vh, 520px);
  max-height: min(42vh, 520px);
  padding: 12px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 6%, transparent);
  cursor: grab;
  touch-action: none;
}

.chaos-map-flow-panel.is-modal .chaos-map-flow-viewport {
  height: min(76vh, 1000px);
  max-height: min(76vh, 1000px);
  padding: 16px;
}

.chaos-map-flow-viewport.is-panning {
  cursor: grabbing;
}

.chaos-map-flow-stage {
  position: relative;
  display: block;
  width: max-content;
  min-width: 0;
  min-height: 0;
}

.chaos-map-flow-svg {
  display: block;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  transform-origin: 0 0;
  transform-box: fill-box;
  overflow: visible;
  will-change: transform;
}

.chaos-map-flow-panel.is-modal .chaos-map-flow-svg {
  min-width: 0;
}

.chaos-map-flow-svg marker path {
  fill: color-mix(in srgb, var(--accent) 84%, var(--fg));
  stroke: color-mix(in srgb, var(--panel) 88%, transparent);
  stroke-width: 0.7px;
}

.chaos-map-flow-edge-underlay,
.chaos-map-flow-edge-core {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chaos-map-flow-edge {
  --chaos-flow-edge-color: color-mix(in srgb, var(--accent) 82%, var(--fg));
  --chaos-flow-edge-dot-fill: color-mix(in srgb, var(--accent) 24%, var(--panel));
  pointer-events: none;
}

.chaos-map-flow-edge.is-low,
.chaos-map-flow-legend-row.is-low {
  --chaos-flow-edge-color: color-mix(in srgb, #7ef7a5 52%, var(--fg-muted));
  --chaos-flow-edge-dot-fill: color-mix(in srgb, #7ef7a5 20%, var(--panel));
}

.chaos-map-flow-edge.is-medium,
.chaos-map-flow-legend-row.is-medium {
  --chaos-flow-edge-color: color-mix(in srgb, #ffd166 68%, var(--accent));
  --chaos-flow-edge-dot-fill: color-mix(in srgb, #ffd166 24%, var(--panel));
}

.chaos-map-flow-edge.is-high,
.chaos-map-flow-legend-row.is-high {
  --chaos-flow-edge-color: color-mix(in srgb, #ff6b6b 76%, var(--accent));
  --chaos-flow-edge-dot-fill: color-mix(in srgb, #ff6b6b 26%, var(--panel));
}

.chaos-map-flow-edge-underlay {
  stroke: color-mix(in srgb, var(--panel) 85%, transparent);
  opacity: 0.98;
}

.chaos-map-flow-edge-core {
  stroke: var(--chaos-flow-edge-color);
  opacity: 0.96;
}

.chaos-map-flow-edge-dot {
  fill: color-mix(in srgb, var(--panel) 92%, transparent);
  stroke: var(--chaos-flow-edge-color);
  stroke-width: 1;
  opacity: 0.8;
}

.chaos-map-flow-edge-dot.is-to {
  fill: var(--chaos-flow-edge-dot-fill);
  opacity: 0.95;
}

.chaos-map-flow-arrowhead {
  fill: var(--chaos-flow-edge-color);
  stroke: color-mix(in srgb, var(--panel) 86%, transparent);
  stroke-width: 1;
  opacity: 1;
}

.chaos-map-flow-edge text {
  display: none;
}

.chaos-map-flow-node rect {
  fill: color-mix(in srgb, var(--panel) 92%, transparent);
  stroke: color-mix(in srgb, var(--accent) 45%, var(--border));
  stroke-width: 1.1;
  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--panel) 65%, transparent));
}

.chaos-map-flow-node {
  cursor: move;
}

.chaos-map-flow-node-screen {
  pointer-events: none;
}

.chaos-map-flow-node-screen-bg {
  fill: color-mix(in srgb, var(--bg) 92%, var(--panel));
  stroke: color-mix(in srgb, var(--accent) 16%, var(--border));
  stroke-width: 0.9;
}

.chaos-map-flow-node-screen-bg.is-placeholder {
  fill: color-mix(in srgb, var(--panel-2) 84%, var(--panel));
  stroke-dasharray: 3 2;
}

.chaos-map-flow-node-screen-text {
  fill: color-mix(in srgb, var(--fg) 92%, white);
  font-family: 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
  font-size: 8px;
  letter-spacing: 0;
  dominant-baseline: hanging;
  text-rendering: geometricPrecision;
}

.chaos-map-flow-node-screen-text.is-placeholder {
  fill: var(--fg-muted);
}

.chaos-map-flow-node-footer-bg {
  fill: color-mix(in srgb, var(--panel-2) 88%, transparent);
  stroke: color-mix(in srgb, var(--accent) 10%, transparent);
  stroke-width: 0.8;
}

.chaos-map-flow-node-footer-label {
  fill: var(--fg);
  font-size: 11.5px;
  font-weight: 700;
}

.chaos-map-flow-node-footer-meta {
  fill: var(--fg-muted);
  font-size: 8.6px;
}

.chaos-map-flow-panel.is-dragging-node .chaos-map-flow-viewport {
  cursor: default;
}

.chaos-map-flow-node.is-dragging rect {
  stroke-width: 1.5;
  stroke: color-mix(in srgb, var(--accent) 65%, var(--fg));
  filter: drop-shadow(0 0 0.35rem color-mix(in srgb, var(--accent) 25%, transparent))
          drop-shadow(0 3px 12px color-mix(in srgb, var(--panel) 58%, transparent));
}

.chaos-map-flow-node-title {
  fill: var(--fg);
  font-size: 13px;
  font-weight: 700;
}

.chaos-map-flow-node-meta {
  fill: var(--fg-muted);
  font-size: 10px;
}

.chaos-map-flow-legend {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, transparent), color-mix(in srgb, var(--panel-2) 82%, transparent));
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-chaos-flow [data-chaos-flow-content] {
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.chaos-map-flow-legend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chaos-map-flow-legend-header strong {
  font-size: 0.8rem;
}

.chaos-map-flow-legend-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow: auto;
  min-width: 0;
  padding-right: 2px;
}

.chaos-map-flow-legend-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-left: 3px solid var(--chaos-flow-edge-color, color-mix(in srgb, var(--accent) 64%, var(--fg-muted)));
  border-radius: 6px;
  padding: 4px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 78%, transparent), color-mix(in srgb, var(--panel) 74%, transparent));
}

.chaos-map-flow-legend-row.is-listed-only {
  opacity: 0.84;
  border-style: dashed;
}

.chaos-map-flow-legend-row.is-on-canvas {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

.chaos-map-flow-legend-route {
  font-family: var(--mono);
  font-size: 0.72rem;
  min-width: 0;
  color: var(--fg);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chaos-map-flow-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--chaos-flow-edge-dot-fill, color-mix(in srgb, var(--accent) 35%, var(--panel)));
  border: 1px solid var(--chaos-flow-edge-color, color-mix(in srgb, var(--accent) 64%, var(--fg-muted)));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel) 80%, transparent);
}

.chaos-map-flow-legend-meta {
  font-size: 0.7rem;
  color: var(--fg-muted);
  white-space: nowrap;
  line-height: 1.2;
}

.chaos-map-flow-launcher-copy {
  margin: 0;
  padding: 0 2px;
}

.chaos-map-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chaos-map-card-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.chaos-map-card-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.chaos-map-card-title strong {
  font-size: 0.9rem;
  line-height: 1.25;
}

.chaos-map-card-hash {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--fg-muted);
}

.chaos-map-card-purpose {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--fg-muted);
  line-height: 1.3;
}

.workflow-modal-business {
  font-size: 0.85rem;
  line-height: 1.35;
  padding: 4px 0;
}

.chaos-map-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chaos-map-card-screen-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chaos-map-card-screen-preview-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
}

.chaos-map-card-screen-preview-bg {
  fill: color-mix(in srgb, var(--panel-2) 90%, black 10%);
  stroke: color-mix(in srgb, var(--border) 85%, transparent);
  stroke-width: 1;
}

.chaos-map-card-screen-preview-bg.is-placeholder {
  fill: color-mix(in srgb, var(--panel) 80%, transparent);
}

.chaos-map-card-screen-preview-text {
  fill: var(--fg);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.02em;
}

.chaos-map-card-screen-preview-text.is-placeholder {
  fill: var(--fg-muted);
}

.chaos-map-card-screen-preview-meta {
  font-size: 0.7rem;
  color: var(--fg-muted);
  font-family: var(--mono);
  line-height: 1.2;
}

.chaos-map-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.72rem;
  color: var(--fg-muted);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}

.chaos-map-minimap {
  position: relative;
  width: 100%;
  height: 110px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(0deg, transparent 23px, color-mix(in srgb, var(--border) 35%, transparent) 24px),
    linear-gradient(90deg, transparent 23px, color-mix(in srgb, var(--border) 35%, transparent) 24px),
    var(--panel);
  background-size: 24px 24px, 24px 24px, auto;
  overflow: hidden;
}

.chaos-map-field-rect {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--accent) 65%, var(--border));
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 4px;
}

.chaos-map-field-rect.is-numeric {
  border-style: dashed;
}

.chaos-map-field-rect.is-hidden {
  opacity: 0.55;
}

.chaos-map-edges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
}

.chaos-map-edge {
  font-size: 0.74rem;
  line-height: 1.25;
}

.chaos-map-field-discovery {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}

.chaos-map-field-discovery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chaos-map-field-discovery-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chaos-map-field-discovery-header strong {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

.chaos-map-field-toggle {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1.2;
}

.chaos-map-field-discovery-table-wrap {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
}

.chaos-map-field-discovery-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  table-layout: fixed;
}

.chaos-map-field-discovery-table th,
.chaos-map-field-discovery-table td {
  padding: 5px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}

.chaos-map-field-discovery-table th {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--panel-2) 92%, transparent);
  color: var(--fg-muted);
  font-weight: 600;
  z-index: 1;
}

.chaos-map-field-discovery-table tbody tr:last-child td {
  border-bottom: 0;
}

.chaos-map-field-cell-label {
  min-width: 120px;
  max-width: 180px;
}

.chaos-map-field-label-main {
  font-family: var(--mono);
  color: var(--fg);
}

.chaos-map-field-label-flags {
  color: var(--fg-muted);
  font-size: 0.66rem;
}

.chaos-map-field-cell-value {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chaos-map-hints {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.chaos-map-hints textarea {
  min-height: 86px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 0.8rem;
}

.chaos-map-card-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.chaos-map-card-actions .subtle {
  font-size: 0.75rem;
}

@media (max-width: 820px) {
  .chaos-map-flow-svg {
    min-width: 0;
  }
  .chaos-map-flow-legend-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .chaos-map-hints {
    grid-template-columns: 1fr;
  }
}

/* Base styling only; ui-polish.css turns this into a compact chip. It was
   a stacked full-width card, which is a lot of furniture for "which local
   test server is running". */
.sample-status {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}

.workflow-status-row {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--panel-2), transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

.workflow-status-row:hover {
  border-color: var(--accent);
}

.workflow-status-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--fg-muted);
}

/* Bottom-LEFT. Toast notifications own the bottom-right corner
   (#h3270-notification-container, bottom/right 24px), so a widget at
   bottom/right 20px sat directly underneath them — and copy, reconnect and
   mode switching all raise toasts now. Anchoring left also stops the widget
   sliding sideways every time the Copilot panel opens or is resized. */
.workflow-status-widget {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: var(--workflow-status-width, 360px);
  height: var(--workflow-status-height, 320px);
  max-width: calc(100vw - 40px);
  max-height: 70vh;
  min-height: 180px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;
  transition: box-shadow 0.2s ease;
}

.workflow-status-widget.is-maximized,
html.workflow-status-maximized .workflow-status-widget {
  height: 70vh;
  max-height: calc(100vh - 40px);
  resize: none;
}

.workflow-status-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}

.workflow-status-widget-header strong {
  min-width: 0;
  white-space: nowrap;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workflow-status-widget-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
  margin-left: auto;
  flex-shrink: 0;
}

.workflow-status-tracking-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--fg-muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.workflow-status-tracking-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.workflow-status-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.workflow-status-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background 0.2s ease;
}

.workflow-status-tracking-toggle input:checked ~ .workflow-status-toggle {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.workflow-status-tracking-toggle input:checked ~ .workflow-status-toggle::after {
  transform: translateX(16px);
  background: var(--bg);
}

.workflow-status-widget-toggle {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
}

.workflow-status-widget-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 12px;
  min-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
  max-height: 60vh;
  scroll-behavior: smooth;
}

.workflow-status-widget.is-minimized,
html.workflow-status-minimized .workflow-status-widget {
  width: 220px;
  height: auto;
  min-height: 0;
  resize: none;
}

.workflow-status-widget.is-minimized .workflow-status-widget-body,
html.workflow-status-minimized .workflow-status-widget-body {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.workflow-status-widget.is-minimized .workflow-status-widget-toggle,
html.workflow-status-minimized .workflow-status-widget-toggle {
  display: none;
}

.workflow-status-widget.is-minimized .workflow-status-widget-header,
html.workflow-status-minimized .workflow-status-widget-header {
  cursor: pointer;
}

.workflow-status-line {
  font-size: 0.95rem;
}

.workflow-status-disabled {
  font-style: italic;
  color: var(--fg-muted);
}

.workflow-status-widget.is-tracking-disabled .workflow-status-line:not(.workflow-status-disabled),
.workflow-status-widget.is-tracking-disabled .workflow-status-events {
  display: none;
}

.workflow-status-events {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--panel-2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1;
  overflow: auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 10px 24px rgba(0, 0, 0, 0.25);
}

.workflow-status-event {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--fg);
}

.workflow-status-time {
  font-family: var(--mono);
  color: var(--accent);
  font-weight: 600;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin-right: 0.5em;
  vertical-align: -2px;
}

/* Logs Modal */
.logs-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logs-modal[hidden] {
  display: none;
}

.logs-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.logs-modal-content {
  position: relative;
  width: min(900px, 92vw);
  height: min(600px, 85vh);
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.logs-modal.is-maximized .logs-modal-content {
  width: 98vw;
  height: 96vh;
}

.logs-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--fg-muted);
  flex-shrink: 0;
}

.logs-modal-header h3 {
  margin: 0;
  font-weight: 600;
  color: var(--accent);
}

.logs-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logs-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.logs-toggle-label.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.logs-toggle-label input[type="checkbox"] {
  cursor: pointer;
}

.logs-toggle-label.is-disabled input[type="checkbox"] {
  cursor: not-allowed;
}

.logs-toggle-text {
  font-size: 14px;
  color: var(--fg);
}

.logs-modal-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
  min-height: 0;
}

.logs-content {
  margin: 0;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--fg-muted);
  border-radius: 4px;
  font-family: 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 100%;
}

.logs-modal-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--fg-muted);
  flex-shrink: 0;
}

.logs-modal-footer button {
  padding: 8px 16px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.logs-modal-footer button:disabled,
.logs-modal-header-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.logs-modal-footer button:hover {
  background: var(--accent);
  color: var(--bg);
}

.logs-modal-header-actions button {
  padding: 6px 12px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.logs-modal-header-actions button:hover {
  background: var(--accent);
  color: var(--bg);
}

.logs-modal-header-actions .icon-button {
  padding: 6px;
  border: 1px solid var(--accent);
}

.logs-confirm-modal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logs-confirm-modal[hidden] {
  display: none;
}

.logs-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.logs-confirm-content {
  position: relative;
  z-index: 1;
  width: min(420px, 86vw);
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.logs-confirm-content h4 {
  margin: 0;
  color: var(--accent);
}

.logs-confirm-content p {
  margin: 0;
}

.logs-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.logs-confirm-actions button {
  padding: 8px 14px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
}

.logs-confirm-actions button:hover {
  background: var(--accent);
  color: var(--bg);
}

/* Settings Modal */
.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-modal[hidden] {
  display: none;
}

.settings-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.settings-modal-content {
  position: relative;
  width: min(1260px, 96vw);
  height: min(820px, 92vh);
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.settings-modal.is-maximized .settings-modal-content {
  width: calc(100vw - 24px);
  height: calc(100vh - 24px);
}

.settings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--fg-muted);
  flex-shrink: 0;
}

.settings-modal-header h3 {
  margin: 0;
  font-weight: 600;
  color: var(--accent);
}

.settings-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-modal-actions button {
  padding: 6px 12px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.settings-modal-actions button:hover {
  background: var(--accent);
  color: var(--bg);
}

.settings-modal-actions .icon-button {
  padding: 6px;
  min-width: auto;
}

.settings-modal-body {
  flex: 1;
  overflow: hidden;
  padding: 16px 20px 20px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-status {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid transparent;
  font-size: 0.9rem;
  color: var(--fg);
  display: none;
}

.settings-status.is-visible {
  display: block;
}

.settings-status.is-error {
  border-color: #ff8b8b;
  color: #ff8b8b;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.settings-theme-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Stacked rows need the gap their own flex layout gives them side to side.
   Theme and Terminal Font are built as two of these, and the fieldset holding
   them is an ordinary block box that adds nothing between: the two selects
   were touching, reading as one control with a stray label. */
.settings-theme-row + .settings-theme-row {
  margin-top: 12px;
}

/* One column for the captions, so the selects below each other line up rather
   than starting wherever the word above them happened to end. Wide enough for
   the longest of them with room to spare; a caption that outgrows it pushes
   its own select right rather than clipping, and the row still wraps whole
   when the modal is narrow. */
.settings-theme-row > label {
  flex: 0 0 auto;
  min-width: 8.5rem;
}

.settings-theme-slot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.settings-theme-selection-group {
  margin: 0;
}

.settings-theme-row label {
  font-weight: 600;
  color: var(--fg-muted);
}

.settings-theme-row select {
  min-width: 260px;
  max-width: 100%;
}

.settings-theme-editor-toggle {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg);
  cursor: pointer;
  font-size: 0.82rem;
}

.settings-theme-editor-toggle.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.settings-custom-theme-editor {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-2) 88%, var(--panel));
  min-width: 0;
}

.settings-custom-theme-hint {
  margin: 0;
}

.settings-custom-theme-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.settings-custom-theme-section {
  min-width: 0;
  margin: 0;
}

.settings-custom-theme-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin-bottom: 6px;
}

.settings-theme-palettes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-theme-palette,
.settings-theme-reset {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg);
  cursor: pointer;
  font-size: 0.8rem;
}

.settings-theme-palette.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.settings-theme-reset {
  align-self: flex-start;
}

.settings-theme-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  margin-bottom: 6px;
}

.settings-theme-action {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg);
  cursor: pointer;
  font-size: 0.8rem;
}

.settings-theme-action.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.settings-theme-save-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin-bottom: 0;
}

.settings-theme-save-name {
  flex: 1 1 220px;
  min-width: 0;
}

.settings-theme-save-destination {
  flex: 1 1 260px;
  min-width: 180px;
}

.settings-custom-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.settings-custom-theme-field {
  display: grid;
  grid-template-columns: minmax(92px, auto) 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 28%, transparent);
}

.settings-custom-theme-field label {
  font-weight: 600;
  color: var(--fg-muted);
  margin: 0;
}

.settings-custom-theme-inputs {
  display: contents;
}

.settings-custom-theme-color {
  width: 42px;
  min-width: 42px;
  height: 30px;
  padding: 2px;
  border-radius: 6px;
}

.settings-custom-theme-text {
  width: 100%;
  min-width: 0;
}

@media (max-width: 980px) {
  .settings-custom-theme-top {
    grid-template-columns: 1fr;
  }

  .settings-theme-actions {
    flex-wrap: wrap;
  }

  .settings-theme-save-meta {
    flex-wrap: wrap;
  }

  .settings-custom-theme-grid {
    grid-template-columns: 1fr;
  }

  .settings-custom-theme-field {
    grid-template-columns: minmax(100px, auto) 40px minmax(0, 1fr);
  }
}

.settings-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  /* Room above and below for what a hover does to a tab: buttons lift by a
     pixel and gain a glow, and the selected tab casts a shadow.

     There is deliberately no overflow clamp on this row. The tabs wrap, so
     they never overflow sideways to begin with, and the form around them
     clips anyway — but naming any overflow value here made the strip a
     clipping box in *both* axes, because a box that hides one axis may not
     leave the other visible. The tabs sat flush against the top of that box,
     so the pixel a hover lifted them by was a pixel outside it: the top
     border of whichever tab the pointer was over vanished. */
  padding: 4px 0 6px;
  /* The form is a flex column with overflow:hidden, so a row left to shrink
     is a row that gets cut in half when the modal is short — which is every
     modal on a tablet held upright. The scrolling panel of fields is the one
     row that should give up height; the tab strip is how you reach it. */
  flex: 0 0 auto;
}

.settings-tab {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.86rem;
}

.settings-tab.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}

.settings-groups {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.settings-group {
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: 12px;
  padding: 14px;
  display: none;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.settings-group.is-active {
  display: flex;
}

.settings-group-title {
  font-weight: 600;
  font-size: 1rem;
}

.settings-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-group-header .subtle {
  font-size: 0.85rem;
}

.settings-group-reset {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.8rem;
}

.settings-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.settings-subgroup {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 72%, var(--panel-2));
  padding: 10px 12px 12px;
  min-width: 0;
}

.settings-subgroup-legend {
  padding: 0 8px;
  margin-left: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent);
  text-transform: uppercase;
}

.settings-subgroup-description {
  margin: 0 0 8px;
  font-size: 0.8rem;
}

.settings-subgroup-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 14px;
  min-width: 0;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
}

.settings-field label {
  font-weight: 600;
}

.settings-field > label {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

.settings-field input,
.settings-field select,
.settings-field textarea {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 85%, var(--panel));
  color: var(--fg);
  font-size: 0.95rem;
}

.settings-select-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.settings-select-custom input {
  flex: 1;
  min-width: 0;
}

.settings-select-custom button {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 6px 10px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
}

.settings-select-custom button:hover {
  background: var(--accent);
  color: var(--bg);
}

.settings-select-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.settings-extra-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
}

.settings-extra-chip-label {
  font-size: 0.8rem;
}

.settings-extra-chip-remove {
  padding: 2px 7px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-size: 0.72rem;
  cursor: pointer;
}

.settings-extra-chip-remove:hover {
  background: var(--accent);
  color: var(--bg);
}

.settings-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

.settings-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
}

.settings-checkbox-row label {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

.settings-helper {
  font-size: 0.8rem;
  color: var(--fg-muted);
  line-height: 1.3;
}

/* A setting the API refuses to write is shown as the value it has, not as an
   edit the save is going to reject. See applyReadOnly in ui.js. */
.settings-field.is-readonly label {
  opacity: 0.75;
}

.settings-field.is-readonly input,
.settings-field.is-readonly select {
  opacity: 0.6;
  cursor: not-allowed;
}

.settings-readonly-note {
  font-style: italic;
}

.settings-error {
  font-size: 0.8rem;
  color: #ff8b8b;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  /* Same reason as .settings-tabs: Save must not be the row that shrinks. */
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--panel) 92%, transparent) 18%);
  padding-top: 6px;
}

.settings-actions button {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--panel);
  color: var(--fg);
  cursor: pointer;
  font-size: 0.95rem;
}

.settings-actions button:hover {
  background: var(--accent);
  color: var(--bg);
}

.settings-confirm-modal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-confirm-modal[hidden] {
  display: none;
}

.settings-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.settings-confirm-content {
  position: relative;
  z-index: 1;
  width: min(420px, 86vw);
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.settings-confirm-content h4 {
  margin: 0;
  color: var(--accent);
}

.settings-confirm-content p {
  margin: 0;
}

.settings-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.settings-confirm-actions button {
  padding: 8px 14px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
}

.settings-confirm-actions button:hover {
  background: var(--accent);
  color: var(--bg);
}

@media (max-width: 900px) {
  .settings-modal-content {
    width: min(98vw, 1260px);
    height: min(94vh, 900px);
  }

  .settings-modal-body {
    padding: 12px 14px 16px;
    gap: 12px;
  }

  .settings-group {
    padding: 12px;
  }

  .settings-subgroup-fields {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .settings-field {
    padding: 8px;
  }
}

.theme-save-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.theme-save-confirm-modal {
  width: min(460px, 92vw);
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.theme-save-confirm-modal h4 {
  margin: 0;
  color: var(--accent);
}

.theme-save-confirm-modal p {
  margin: 0;
  color: var(--fg-muted);
}

.theme-save-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   Notification toasts
   ============================================================ */

#h3270-notification-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: min(380px, calc(100vw - 48px));
}

.h3270-notification {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--fg);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  pointer-events: auto;
  cursor: default;
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.42, 0.64, 1), opacity 0.25s ease;
  will-change: transform, opacity;
  min-width: 220px;
}

.h3270-notification--visible {
  transform: translateX(0);
  opacity: 1;
}

.h3270-notification--leaving {
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  transition: transform 0.25s ease-in, opacity 0.2s ease;
}

.h3270-notification__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.h3270-notification__icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.h3270-notification__message {
  flex: 1;
  word-break: break-word;
}

.h3270-notification__action {
  flex-shrink: 0;
  background: var(--accent);
  color: var(--accent-contrast, #000);
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.h3270-notification__action:hover {
  filter: brightness(1.1);
}

.h3270-notification__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  margin-top: 1px;
  line-height: 0;
  color: var(--fg-muted);
  transition: color 0.15s ease, opacity 0.15s ease;
  opacity: 0.6;
}

.h3270-notification__close:hover {
  color: var(--fg);
  opacity: 1;
}

.h3270-notification__close svg {
  width: 14px;
  height: 14px;
  fill: none;
}

/* Type-specific accent colors */

.h3270-notification--success {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.h3270-notification--success .h3270-notification__icon {
  color: var(--accent);
}

.h3270-notification--error {
  border-color: rgba(255, 100, 100, 0.45);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 100, 100, 0.18);
}

.h3270-notification--error .h3270-notification__icon {
  color: #ff6464;
}

.h3270-notification--warning {
  border-color: rgba(255, 200, 60, 0.45);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 200, 60, 0.18);
}

.h3270-notification--warning .h3270-notification__icon {
  color: #ffc83c;
}

.h3270-notification--info {
  border-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--accent-2) 15%, transparent);
}

.h3270-notification--info .h3270-notification__icon {
  color: var(--accent-2);
}

/* Light theme adjustments */
body.theme-light #h3270-notification-container .h3270-notification,
body.theme-io-daylight #h3270-notification-container .h3270-notification {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18), 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--panel) 98%, transparent);
}

@media (max-width: 480px) {
  #h3270-notification-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: 100%;
  }
}

/* =====================================================================
   GitHub Copilot side panel
   ===================================================================== */
:root {
  --copilot-panel-width: 380px;
}

.copilot-toggle-button svg { fill: currentColor; }

.copilot-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--copilot-panel-width);
  height: 100vh;
  background: var(--panel);
  color: var(--fg);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  z-index: 50;
  font-family: inherit;
  font-size: 13px;
}

body.copilot-open .page-wrap {
  padding-right: var(--copilot-panel-width);
  transition: padding-right 0.2s ease;
}

.copilot-panel[hidden] { display: none; }

.copilot-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}

.copilot-panel-title {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--fg);
}

.copilot-panel-header-actions {
  display: flex;
  gap: 4px;
}

.copilot-icon-button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg-muted);
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.copilot-icon-button:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--fg);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.copilot-automode-btn.active,
.copilot-automode-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

.copilot-panel-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.copilot-msg {
  border-radius: 8px;
  padding: 8px 10px;
  word-wrap: break-word;
  line-height: 1.4;
  max-width: 100%;
}
.copilot-msg-user {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}
.copilot-msg-assistant {
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.copilot-msg-error {
  background: var(--error-bg);
  border: 1px solid color-mix(in srgb, red 40%, var(--border));
  color: var(--fg);
}
.copilot-msg pre, .copilot-msg code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 3px;
}
.copilot-msg pre {
  padding: 6px 8px;
  overflow-x: auto;
}

/* Rich markdown rendered inside a chat message body. */
.copilot-msg-body > :first-child { margin-top: 0; }
.copilot-msg-body > :last-child { margin-bottom: 0; }
.copilot-msg-body p { margin: 0 0 8px; }
.copilot-msg-body h1,
.copilot-msg-body h2,
.copilot-msg-body h3,
.copilot-msg-body h4,
.copilot-msg-body h5,
.copilot-msg-body h6 {
  margin: 12px 0 6px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--accent);
}
.copilot-msg-body h1 { font-size: 1.25em; }
.copilot-msg-body h2 { font-size: 1.18em; }
.copilot-msg-body h3 { font-size: 1.1em; }
.copilot-msg-body h4,
.copilot-msg-body h5,
.copilot-msg-body h6 { font-size: 1em; }
.copilot-msg-body ul,
.copilot-msg-body ol { margin: 4px 0 8px; padding-left: 22px; }
.copilot-msg-body li { margin: 2px 0; }
.copilot-msg-body li > ul,
.copilot-msg-body li > ol { margin: 2px 0; }
.copilot-msg-body a { color: var(--accent); text-decoration: underline; }
.copilot-msg-body a:hover { text-decoration: none; }
.copilot-msg-body blockquote {
  margin: 6px 0;
  padding: 2px 10px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  color: var(--fg-muted);
}
.copilot-msg-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 10px 0;
}
.copilot-md-table {
  border-collapse: collapse;
  margin: 6px 0;
  width: 100%;
  font-size: 12px;
  display: block;
  overflow-x: auto;
}
.copilot-md-table th,
.copilot-md-table td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: left;
}
.copilot-md-table th {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
  font-weight: 600;
}
.copilot-md-table tr:nth-child(even) td {
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}

.copilot-tool-call {
  border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
  border-radius: 8px;
  padding: 8px 10px;
}

.copilot-tool-call-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.copilot-tool-call-name {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  margin-right: 8px;
}
.copilot-tool-call-status {
  font-size: 11px;
  color: var(--fg-muted);
}
.copilot-tool-call-args, .copilot-tool-call-result {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 6px 8px;
  border-radius: 4px;
  max-height: 220px;
  overflow: auto;
  margin: 4px 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--fg-muted);
}
.copilot-tool-call-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.copilot-btn-run, .copilot-btn-skip {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  background: transparent;
  color: var(--fg);
}
.copilot-btn-run {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent);
}
.copilot-btn-run:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
.copilot-btn-skip:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.copilot-btn-run:disabled, .copilot-btn-skip:disabled { opacity: 0.45; cursor: default; }

/* Tool result extras: download / open-panel action buttons */
.copilot-tool-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.copilot-tool-extra-btn {
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  transition: background 0.1s;
}
.copilot-tool-extra-btn:hover {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

/* Inline Mermaid flowchart diagram */
.copilot-mermaid-wrap {
  margin: 8px 0 4px;
  overflow-x: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
}
.copilot-mermaid-svg {
  display: block;
  max-width: 100%;
}
.copilot-mermaid-elabel {
  font-family: var(--mono, monospace);
}

/* ask_user decision card */
.copilot-ask-user {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--panel-2));
}
.copilot-ask-user-question {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
  line-height: 1.4;
  color: var(--fg);
}
.copilot-ask-user-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.copilot-btn-option {
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  transition: background 0.1s;
}
.copilot-btn-option:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
}
.copilot-btn-option:disabled { opacity: 0.45; cursor: default; }
.copilot-ask-user-textform {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.copilot-ask-user-textinput {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  background: var(--panel);
  color: var(--fg);
}
.copilot-ask-user-textinput:disabled { opacity: 0.45; cursor: default; }
.copilot-ask-user-chosen {
  margin-top: 8px;
  font-size: 12px;
  color: var(--fg-muted);
  font-style: italic;
}

.copilot-model-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  flex-shrink: 0;
}

.copilot-model-label {
  font-size: 0.72rem;
  color: var(--text-muted, #888);
  white-space: nowrap;
  user-select: none;
}

.copilot-model-select {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.78rem;
  background: var(--panel-1, var(--panel-2));
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px;
}

.copilot-model-select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.copilot-panel-form {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
}
.copilot-panel-form textarea {
  flex: 1 1 auto;
  resize: vertical;
  min-height: 44px;
  max-height: 180px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  padding: 6px 8px;
  font: inherit;
}
.copilot-panel-form textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}
/* Explain-this-screen, in the composer. Sits at the same baseline as Send
   and reads as an accessory to the box rather than a second submit, so the
   quiet border stays until it is hovered or focused. */
.copilot-explain {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
}
.copilot-explain svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.copilot-explain:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.copilot-explain:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.copilot-send {
  align-self: flex-end;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
.copilot-send:hover {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
}
.copilot-stop {
  align-self: flex-end;
  border: 1px solid color-mix(in srgb, var(--danger, #c0392b) 55%, var(--border));
  background: color-mix(in srgb, var(--danger, #c0392b) 20%, transparent);
  color: var(--danger, #c0392b);
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
.copilot-stop:hover {
  background: color-mix(in srgb, var(--danger, #c0392b) 32%, transparent);
}

.copilot-panel-hint {
  margin: 0;
  padding: 6px 12px 10px;
  font-size: 11px;
  color: var(--fg-muted);
  background: var(--panel-2);
  border-top: 1px solid var(--border);
}

/* Connect prompt — shown when not signed in to Copilot */
.copilot-connect-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 1 1 auto;
  padding: 24px 20px;
  text-align: center;
}
.copilot-connect-prompt[hidden] { display: none; }
/* When disconnected, shrink messages so the connect prompt fills remaining space */
.copilot-panel.copilot-disconnected .copilot-panel-messages {
  flex: 0 0 auto;
  min-height: 0;
}
.copilot-connect-text {
  margin: 0;
  font-size: 13px;
  color: var(--fg-muted);
}
.copilot-connect-btn {
  padding: 8px 20px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}
.copilot-connect-btn:hover { filter: brightness(1.12); }

/* Login modal (dynamically injected by copilot-auth.js) */
.copilot-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  /* The backdrop scrolls and the panel is centred by auto margins rather than
     by alignment. align-items:center overflows in both directions once the
     panel is taller than the space available, and an overflowing fixed box
     cannot be scrolled to.
     That is the ordinary case here, not an edge one: choosing a provider means
     touching the model or API-key box, which opens the software keyboard and
     takes roughly half the height away. Save and Cancel — and, once the panel
     has grown a key field, the provider list itself — ended up underneath it
     with nothing to scroll. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
}
.copilot-modal-backdrop[hidden] { display: none; }

.copilot-modal {
  background: var(--panel);
  color: var(--fg);
  border-radius: 10px;
  border: 1px solid var(--border);
  width: min(520px, calc(100vw - 32px));
  /* Auto margins shrink to zero rather than going negative, so a panel taller
     than the viewport starts at the top with its whole height reachable. */
  margin: auto;
  padding: 20px;
  box-shadow: var(--shadow);
}
.copilot-modal-header { display: flex; justify-content: space-between; align-items: center; }
.copilot-modal-header h3 { margin: 0; font-size: 16px; color: var(--fg); }
.copilot-modal-close {
  background: transparent;
  border: none;
  color: var(--fg-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.copilot-modal-close:hover { color: var(--fg); }
.copilot-modal-body { margin-top: 14px; color: var(--fg-muted); }
.copilot-modal-intro { margin-top: 0; }
.copilot-modal-steps { padding-left: 1.2em; }
.copilot-user-code {
  display: inline-block;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.15em;
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 0 6px;
  color: var(--accent);
}
.copilot-copy-button {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
}
.copilot-copy-button:hover { color: var(--fg); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.copilot-modal-status {
  margin-top: 12px;
  padding: 6px 10px;
  background: var(--panel-2);
  border-left: 3px solid var(--accent);
  font-size: 12px;
  color: var(--fg-muted);
}
.copilot-modal-footer { margin-top: 16px; text-align: right; }
.copilot-modal-footer button {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-muted);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.copilot-modal-footer button:hover { color: var(--fg); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* --- AI provider settings dialog ---
   Reuses the .copilot-modal chrome; these rules only add the form layout
   the provider picker needs (label above control, full-width inputs). */
.ai-provider-modal { max-width: 460px; }
.ai-field {
  display: block;
  margin-top: 14px;
}
.ai-field-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.ai-field select,
.ai-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
}
.ai-field select:focus,
.ai-field input:focus {
  outline: none;
  border-color: var(--accent);
}
.ai-field-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-field-help {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--fg-muted);
}
.ai-field-help a { color: var(--accent); }
.ai-secondary-btn,
.ai-primary-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-muted);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
.ai-secondary-btn:hover { color: var(--fg); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ai-primary-btn {
  border-color: var(--accent);
  color: var(--accent);
}
.ai-primary-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.ai-status-error { border-left-color: var(--danger, #e05252); }

/* Provider name in the model bar, so it is always obvious which backend a
   reply came from. It sits beside the model rather than in the header, which
   has no room left once Auto / Provider / Clear / Sign out are in it. */
.copilot-provider-name {
  margin-left: auto;
  padding-left: 8px;
  font-size: 11px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}
.copilot-panel-title { white-space: nowrap; }

/* --- Streaming "thinking" indicator --- */
.copilot-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  margin: 2px 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: fit-content;
}
.copilot-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-muted);
  opacity: 0.5;
  animation: copilot-typing-bounce 1.2s infinite ease-in-out;
}
.copilot-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.copilot-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes copilot-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .copilot-typing-dot { animation: none; }
}

/* --- Empty state / example prompts --- */
.copilot-empty-state {
  padding: 18px 14px;
  color: var(--fg-muted);
  text-align: center;
}
.copilot-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 6px;
}
.copilot-empty-hint { font-size: 12px; margin: 0 0 12px; }
.copilot-empty-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.copilot-example-chip {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--fg);
  border-radius: 16px;
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.copilot-example-chip:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

/* --- Copy button on <pre> blocks --- */
.copilot-pre-copyable { position: relative; }
.copilot-copy-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  color: var(--fg-muted);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.copilot-pre-copyable:hover .copilot-copy-btn,
.copilot-copy-btn:focus { opacity: 1; }
.copilot-copy-btn:hover { color: var(--fg); background: var(--bg); }

/* --- Retry / Continue affordance --- */
.copilot-btn-retry {
  display: inline-block;
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.copilot-btn-retry:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* --- Jump-to-latest button --- */
.copilot-jump-btn {
  position: absolute;
  right: 16px;
  bottom: 96px;
  z-index: 5;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 22%, var(--panel-2));
  color: var(--fg);
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.copilot-jump-btn:hover { background: color-mix(in srgb, var(--accent) 34%, var(--panel-2)); }

/* Disabled Send button (in-flight request). */
.copilot-panel-form button[data-copilot-send]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Who a published host profile is for. Grouped in a fieldset rather than
   scattered among the connection settings, because these answer a different
   question — not how to reach the mainframe, but who may. */
.profiles-share {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 8px);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.profiles-share legend {
  padding: 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.profiles-audience-hint {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
}