/* ===========================================================
   Fleet AI — design tokens (ported from v2cloudailabs)
   Dark theme with cyan/teal accent and subtle glow effects.
   =========================================================== */

:root {
  /* Surfaces (HSL components — usable inside hsl() / hsl(... / alpha)) */
  --background: 222 47% 4%;
  --card: 222 47% 7%;
  --popover: 222 47% 7%;
  --muted: 222 30% 12%;
  --muted-elevated: 222 30% 14%;

  /* Foreground */
  --foreground: 210 40% 98%;
  --muted-foreground: 215 20% 55%;

  /* Accent (cyan/teal) */
  --primary: 175 80% 50%;
  --primary-foreground: 222 47% 4%;
  --accent: 175 80% 50%;

  /* Status */
  --destructive: 0 84% 60%;
  --warning: 38 92% 50%;
  --success: 142 71% 45%;
  --info: 199 89% 48%;

  /* Lines */
  --border: 222 30% 18%;
  --border-strong: 222 30% 26%;
  --input: 222 30% 18%;
  --ring: 175 80% 50%;

  /* Effects */
  --shadow-card: 0 8px 32px -8px hsl(0 0% 0% / 0.55);
  --shadow-glow: 0 0 60px -15px hsl(var(--primary) / 0.4);
  --gradient-card: linear-gradient(180deg, hsl(222 30% 12% / 0.8), hsl(222 47% 7% / 0.95));
  --gradient-glow: linear-gradient(135deg, hsl(175 80% 50% / 0.12), hsl(260 80% 60% / 0.08));

  /* Spacing scale */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;

  /* Radii */
  --radius: 0.75rem;        /* 12px — base */
  --radius-sm: 0.5rem;      /* 8px */
  --radius-xs: 0.375rem;    /* 6px */
}

* { box-sizing: border-box; border-color: hsl(var(--border)); }

html, body {
  margin: 0;
  padding: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
}

a {
  color: hsl(var(--primary));
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: hsl(var(--primary) / 0.8); }

code, pre, .mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.muted { color: hsl(var(--muted-foreground)); }
.small { font-size: 12px; }

/* The `hidden` attribute (HTML standard) must beat any later
   `display: flex/grid/block` rule we set on the same element. Without
   this, `<div class="modal" hidden>` would still render because
   `.modal { display: flex }` overrides the user-agent default. We use
   the HTML attribute as the canonical "is this thing visible?" toggle
   and rely on this rule to enforce it. The legacy `.hidden` class
   below is kept for elements toggled via classList.toggle. */
[hidden] { display: none !important; }
.hidden { display: none !important; }

::selection { background: hsl(var(--primary) / 0.3); color: hsl(var(--foreground)); }

/* Scrollbars (Webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--border-strong)); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }

/* ===========================================================
   App layout (top header, full-width main)
   =========================================================== */

.layout-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: hsl(var(--card) / 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid hsl(var(--border));
}
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: hsl(var(--foreground));
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; color: hsl(var(--foreground)); }
.brand-mark {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  box-shadow: 0 0 20px hsl(var(--primary) / 0.15);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-user { color: hsl(var(--muted-foreground)); font-size: 13px; }

.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: hsl(var(--muted-foreground));
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ghost-btn:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.content {
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 32px 24px 64px;
}

/* Auth screen */
.layout-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, hsl(var(--primary) / 0.15), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, hsl(260 80% 60% / 0.10), transparent 60%),
    hsl(var(--background));
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-card), var(--shadow-glow);
  backdrop-filter: blur(12px);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: hsl(var(--foreground));
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  margin-bottom: 24px;
}
.auth-card h1 {
  margin: 0 0 6px;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.auth-card p { margin: 0 0 24px; color: hsl(var(--muted-foreground)); }
.auth-error {
  background: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  border: 1px solid hsl(var(--destructive) / 0.3);
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  margin-bottom: 16px;
}

/* ===========================================================
   Page header
   =========================================================== */

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.page-header h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.page-header p { margin: 4px 0 0; color: hsl(var(--muted-foreground)); }
.page-header-actions { display: flex; align-items: center; gap: 12px; }

.breadcrumbs {
  font-size: 11.5px;
  color: hsl(var(--muted-foreground));
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.breadcrumbs a { color: hsl(var(--muted-foreground)); }
.breadcrumbs a:hover { color: hsl(var(--foreground)); }

/* ===========================================================
   Cards
   =========================================================== */

.card {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.card h2 {
  margin: 0 0 14px;
  font-size: 16px;
  letter-spacing: -0.005em;
}
.card h3 {
  margin: 16px 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
}

/* ===========================================================
   Machine hero (replaces task-header on machine detail page)
   =========================================================== */

.machine-hero {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
.machine-hero h2 { margin: 0; font-size: 20px; }
.machine-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid hsl(var(--border) / 0.7);
  padding-top: 12px;
}
.machine-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 24px;
  margin-right: 24px;
  border-right: 1px solid hsl(var(--border));
}
.machine-stat:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
.machine-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}
.machine-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: hsl(var(--foreground));
  font-family: "Space Grotesk", sans-serif;
}
.machine-stat-value.stat-bad { color: hsl(var(--destructive)); }
.machine-stat-value.stat-good { color: hsl(140 60% 55%); }

/* ---- Machine page: edit hero button ---- */
.ms-edit-trigger {
  margin-left: auto;
  opacity: 0.45;
  transition: opacity 0.15s;
}
.ms-edit-trigger:hover,
.machine-hero:hover .ms-edit-trigger { opacity: 1; }

/* ---- Machine page: inline edit panel ---- */
.ms-edit-panel {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.ms-edit-form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.ms-edit-form .form-row label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
  flex: 1;
  min-width: 130px;
}
.ms-edit-form .form-row input,
.ms-edit-form .form-row select {
  background: hsl(var(--input));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  color: hsl(var(--foreground));
  font-size: 13px;
  font-family: inherit;
  width: 100%;
}
.ms-edit-form .form-row input:focus,
.ms-edit-form .form-row select:focus {
  outline: none;
  border-color: hsl(var(--primary) / 0.6);
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15);
}
.ms-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.ms-edit-actions button[type="submit"] {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ms-edit-actions button[type="submit"]:hover { filter: brightness(1.1); }
.ms-edit-actions .ms-cancel-btn {
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.ms-edit-status {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

/* ---- Machine page: resizable panels layout ---- */
.ms-panels {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ms-panels .shadow-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
}
/* Screen panel: default height, fills with screen-frame */
.ms-panels .shadow-screen {
  flex: 0 0 600px;
}
.ms-panels .shadow-screen .screen-frame {
  flex: 1;
  min-height: 0;
  max-height: none;
}
/* Events panel: default height with a scrollable feed */
.ms-panels .shadow-events {
  flex: 0 0 420px;
}
.ms-panels .shadow-events .event-feed,
.ms-panels .shadow-events .prev-activity {
  overflow-y: auto;
}

.task-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
}
.task-header h2 { margin: 0; font-size: 20px; }
.row { display: inline-flex; align-items: center; gap: 10px; }

/* ===========================================================
   Forms
   =========================================================== */

.form { display: grid; gap: 14px; }
.form label {
  display: grid;
  gap: 6px;
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.form input, .form select, .form textarea {
  font: inherit;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-xs);
  background: hsl(var(--muted) / 0.4);
  color: hsl(var(--foreground));
  text-transform: none;
  font-size: 14px;
  letter-spacing: normal;
  font-weight: 400;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form input::placeholder, .form textarea::placeholder { color: hsl(var(--muted-foreground) / 0.7); }
.form textarea {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  resize: vertical;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: hsl(var(--primary) / 0.5);
  background: hsl(var(--muted) / 0.6);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
/* Prevent label columns from overflowing their grid cell */
.form-row > * { min-width: 0; }
@media (max-width: 720px) { .form-row { grid-template-columns: 1fr; } }

.primary-btn, .form button {
  padding: 10px 18px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  justify-self: start;
  transition: filter 0.12s ease, transform 0.06s ease, box-shadow 0.12s ease;
}
.primary-btn { width: 100%; }
.primary-btn:hover, .form button:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 24px hsl(var(--primary) / 0.4);
}
.primary-btn:active, .form button:active { transform: translateY(1px); }

/* Secondary / outline button variants */
.btn-outline {
  background: transparent;
  border: 1px solid hsl(var(--border-strong));
  color: hsl(var(--foreground));
}
.btn-outline:hover { background: hsl(var(--muted)); box-shadow: none; filter: none; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.btn-icon:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border-strong));
}
.btn-icon.destructive { color: hsl(var(--destructive)); }
.btn-icon.destructive:hover { background: hsl(var(--destructive) / 0.12); border-color: hsl(var(--destructive) / 0.5); }

/* Add-machine collapsible */
.form-toggle summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid hsl(var(--border-strong));
  color: hsl(var(--foreground));
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 500;
  user-select: none;
}
.form-toggle summary:hover { background: hsl(var(--muted)); }
.form-toggle summary::-webkit-details-marker { display: none; }
.add-machine-card { border-left: 3px solid hsl(var(--primary)); }

/* ===========================================================
   View toggle (segmented control)
   =========================================================== */

.view-toggle {
  display: inline-flex;
  background: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.vt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 5px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  transition: background 0.12s ease, color 0.12s ease;
}
.vt-btn:hover { color: hsl(var(--foreground)); }
.vt-btn.active {
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
}

/* ===========================================================
   Agent state pill
   =========================================================== */

.agent-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
}
.agent-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.agent-idle { color: hsl(var(--muted-foreground)); }
.agent-idle .agent-dot { background: hsl(var(--muted-foreground)); }
.agent-working {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.3);
}
.agent-working .agent-dot {
  background: hsl(var(--primary));
  box-shadow: 0 0 0 0 hsl(var(--primary) / 0.6);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.6); }
  50%      { box-shadow: 0 0 0 6px hsl(var(--primary) / 0); }
}
.agent-stopping {
  background: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  border-color: hsl(var(--destructive) / 0.3);
}
.agent-stopping .agent-dot {
  background: hsl(var(--destructive));
  animation: pulse-stop 1.2s ease-in-out infinite;
}

/* ===========================================================
   Tiles
   =========================================================== */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}
.tile {
  display: flex;
  flex-direction: column;
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tile:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--primary) / 0.3);
  box-shadow: var(--shadow-card), 0 0 32px -10px hsl(var(--primary) / 0.25);
}
.tile-clickable { display: block; color: inherit; }
.tile-clickable:hover { text-decoration: none; }

.tile-thumb {
  position: relative;
  background: hsl(var(--muted) / 0.3);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid hsl(var(--border));
}
.tile-screen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: filter 0.25s ease;
}
.tile-screen-missing { display: none; }

/* When the machine is idle we keep the last frame visible but dim and
   desaturate it — clearly the agent isn't currently driving the box. */
.tile[data-state="idle"] .tile-screen,
.is-stale-screen { filter: grayscale(0.7) brightness(0.6); }
.tile[data-state="idle"] .tile-live-badge { display: none; }
.tile-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 1;
}
.tile-live-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  background: hsl(var(--background) / 0.85);
  backdrop-filter: blur(8px);
  color: hsl(var(--primary));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tile-live-badge .agent-dot { background: hsl(var(--primary)); animation: pulse-dot 1.8s ease-in-out infinite; }

.tile-body { padding: 14px 16px; display: grid; gap: 10px; }
.tile-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tile-title-row strong {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-state-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tile-state-row .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.tile-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  flex-shrink: 0;
}
.empty-state {
  background: var(--gradient-card);
  border: 1px dashed hsl(var(--border-strong));
  border-radius: var(--radius);
  padding: 64px 32px;
  text-align: center;
}
.empty-state h2 { font-size: 16px; margin: 0 0 6px; }

/* ===========================================================
   Tables (list view + recent tasks)
   =========================================================== */

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table th, .table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: middle;
  font-size: 13.5px;
}
.table tr:last-child td { border-bottom: 0; }
.table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  background: hsl(var(--muted) / 0.2);
}
.table tbody tr:hover { background: hsl(var(--muted) / 0.25); }
.table .truncate {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-table .row-actions { text-align: right; }
.link-btn { color: hsl(var(--primary)); font-size: 12.5px; font-weight: 500; }

/* ===========================================================
   Status pills (task-level)
   =========================================================== */

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
}
.pill-direct_rdp { background: hsl(var(--success) / 0.12); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.3); }
.pill-reverse_tunnel { background: hsl(var(--warning) / 0.12); color: hsl(var(--warning)); border-color: hsl(var(--warning) / 0.3); }

.status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
}
.status-queued { background: hsl(var(--warning) / 0.12); color: hsl(var(--warning)); border-color: hsl(var(--warning) / 0.3); }
.status-running { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); border-color: hsl(var(--primary) / 0.3); }
.status-completed { background: hsl(var(--success) / 0.12); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.3); }
.status-failed { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.3); }
.status-cancelled { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }

/* ===========================================================
   Key/value lists & code
   =========================================================== */

.kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 16px;
  margin: 0;
}
.kv dt { color: hsl(var(--muted-foreground)); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.kv dd { margin: 0; font-size: 13.5px; }

pre.instruction, pre.error {
  background: hsl(var(--muted) / 0.4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  overflow-x: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  color: hsl(var(--foreground));
}
pre.error {
  background: hsl(var(--destructive) / 0.08);
  border-color: hsl(var(--destructive) / 0.3);
  color: hsl(var(--destructive));
}
code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  background: hsl(var(--muted) / 0.6);
  color: hsl(var(--primary));
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid hsl(var(--border));
}

/* ===========================================================
   Quick-command form on each tile
   =========================================================== */

.quick-cmd {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.3);
}
.quick-cmd textarea {
  flex: 1;
  resize: none;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  color: hsl(var(--foreground));
  outline: none;
  min-height: 40px;
  max-height: 100px;
  line-height: 1.4;
}
.quick-cmd textarea::placeholder { color: hsl(var(--muted-foreground) / 0.7); }
.quick-cmd textarea:focus { background: hsl(var(--muted) / 0.5); }
.quick-cmd button {
  background: transparent;
  border: 0;
  border-left: 1px solid hsl(var(--border));
  color: hsl(var(--primary));
  padding: 0 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease;
  box-shadow: none;
  border-radius: 0;
  filter: none;
}
.quick-cmd button:hover { background: hsl(var(--primary) / 0.12); box-shadow: none; filter: none; }
.quick-cmd button:active { transform: scale(0.95); }

/* ===========================================================
   Stacked shadow layout (live screen + activity feed)
   =========================================================== */

.shadow-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.shadow-screen, .shadow-events {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: var(--shadow-card);
}
.shadow-screen h3, .shadow-events h3 {
  margin: 0 0 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
}

.screen-frame {
  position: relative;
  flex: 1;
  background: #04060d;
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: 480px;
  max-height: calc(100vh - 320px);
  border: 1px solid hsl(var(--border));
}
/* Container div that guacAttach appends the Guacamole display element into.
   Must fill the screen-frame so that (a) the absolutely-positioned
   .guac-display is centered relative to this element, and (b) the JS
   fit() function reads non-zero clientWidth/clientHeight from `container`
   and can calculate the correct scale factor. */
.screen-frame-content {
  position: absolute;
  inset: 0;
}
/* Any screen-output image (workspace, modal, machine page, task page)
   should fit its frame with letterboxing — never crop, never stretch.
   The old ID-only selector only hit #live-screen, so the dashboard's
   workspace and modal images were rendering at their natural ~1920px
   width and getting clipped by the parent's overflow:hidden. */
.screen-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Live share-view Guacamole display.
   The display element's own CSS width/height come from Guacamole.Display.scale()
   in JS (we pre-compute a scale factor that fits the framebuffer inside the
   parent .screen-frame). We center it absolutely so the residual letterbox
   area is shared evenly on both sides. The inner canvas is transformed by
   Guacamole.Display itself — we only own the wrapper's positioning.
   NOTE: use the descendant combinator (space) not the direct-child (>)
   because guacAttach inserts .guac-display inside #live-display, making it
   a grandchild of .screen-frame, not a direct child. */
.screen-frame .guac-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* The canvas inside is decorative — let pointer events fall through to
     the page (we don't drive input from here, this is read-only). */
  pointer-events: none;
}
/* Same idle/stale treatment as the polling-PNG version got. The class is
   set on the .guac-display element when the active task ends so the last
   visible frame goes grey, matching the screenshot path's UX. */
.screen-frame .guac-display.is-stale-screen {
  filter: grayscale(0.7) brightness(0.6);
}
.screen-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  text-align: center;
  padding: 16px;
  letter-spacing: 0.02em;
}
.take-control-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 0;
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s, box-shadow 0.12s;
  letter-spacing: 0.01em;
}
.take-control-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 20px hsl(var(--primary) / 0.4);
}
/* Banner shown when user has taken interactive control */
.control-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: hsl(var(--primary) / 0.92);
  color: hsl(var(--primary-foreground));
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.release-control-btn {
  pointer-events: all;
  background: transparent;
  border: 1px solid hsl(var(--primary-foreground) / 0.6);
  color: inherit;
  border-radius: 100px;
  font: inherit;
  font-size: 11px;
  padding: 2px 9px;
  cursor: pointer;
  margin-left: 4px;
}
.release-control-btn:hover { background: hsl(var(--primary-foreground) / 0.15); }

.event-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}
.event {
  display: grid;
  /* minmax(0, 1fr) instead of 1fr so the column can shrink without being
     pinned to the longest word's intrinsic width. Without it, long URLs
     in assistant text would force the cell wider than the parent and
     overflow becomes wrapping-per-word. */
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  background: hsl(var(--muted) / 0.4);
  border: 1px solid hsl(var(--border));
  min-width: 0;
}
.event > * { min-width: 0; }
/* The wrapper around the event's actual content (tag + text + chips).
   Sits in column 2 of the grid. Inline children inside it flow normally;
   no risk of grid auto-flow putting them in the narrow first column. */
.event-body { min-width: 0; line-height: 1.55; }
.event-ts {
  color: hsl(var(--muted-foreground));
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.event-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  margin-right: 4px;
}
.event-action-tag { background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); }
.event-done-tag { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); }
.event-error-tag { background: hsl(var(--destructive) / 0.15); color: hsl(var(--destructive)); }
.event-text {
  display: block;
  margin-top: 4px;
  white-space: pre-wrap;
  /* overflow-wrap (not word-break: break-word) so the element's
     min-content width stays at "longest word" rather than "single
     char" — Chrome's behavior for word-break: break-word triggers
     grid columns to collapse to ~1 character wide. */
  overflow-wrap: break-word;
  word-break: normal;
  color: hsl(var(--foreground));
  line-height: 1.55;
  min-width: 0;
}
.kvchip {
  display: inline-block;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  margin-right: 3px;
}
.kvchip .k { color: hsl(var(--muted-foreground)); }
.kvchip .v { color: hsl(var(--foreground)); }

/* Previous activity (machine page) */
.prev-activity {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed hsl(var(--border));
}
.prev-activity-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.prev-activity-header h4 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
}
.prev-feed { max-height: 360px; overflow-y: auto; padding-right: 4px; }
.event-prev-task .event-text { display: block; margin-top: 4px; color: hsl(var(--muted-foreground)); }
.event-error-line {
  margin-top: 4px;
  padding: 4px 8px;
  background: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  border-radius: 4px;
  font-size: 11.5px;
  font-family: "JetBrains Mono", monospace;
  white-space: pre-wrap;
}

/* ===========================================================
   Tile thumb buttons + log strip + expand overlay
   =========================================================== */

.tile-thumb-button {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.tile-thumb-button:hover .tile-expand-overlay { opacity: 1; }

.tile-expand-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--background) / 0.5);
  color: hsl(var(--foreground));
  opacity: 0;
  transition: opacity 0.15s ease;
}

.tile-icon-link { display: inline-flex; }
.tile-name-link { color: inherit; }
.tile-name-link:hover { color: hsl(var(--primary)); text-decoration: none; }

.tile-log-strip {
  display: grid;
  gap: 2px;
  padding: 6px 12px;
  background: hsl(var(--muted) / 0.25);
  border-bottom: 1px solid hsl(var(--border));
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: hsl(var(--muted-foreground));
  min-height: 60px;
  max-height: 60px;
  overflow: hidden;
}
.tile-log-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.45;
  overflow: hidden;
}
.tile-log-time {
  color: hsl(var(--primary) / 0.5);
  flex-shrink: 0;
  font-size: 9.5px;
}
.tile-log-text {
  color: hsl(var(--foreground) / 0.65);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.tile-log-kind {
  display: inline-block;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: hsl(var(--primary) / 0.7);
  margin-right: 2px;
}
.tile-log-empty {
  color: hsl(var(--muted-foreground) / 0.5);
  font-style: italic;
}

/* ===========================================================
   Detail view — selector strip + workspace
   =========================================================== */

.view-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.agent-selector {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px;
  align-items: center;
}
.selector-chevron {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.selector-chevron:hover { background: hsl(var(--muted)); border-color: hsl(var(--border-strong)); }
.selector-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 4px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.selector-track::-webkit-scrollbar { display: none; }

.selector-card {
  flex: 0 0 190px;
  min-width: 190px;
  max-width: 210px;
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  font: inherit;
  color: hsl(var(--foreground));
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.selector-card:hover { transform: translateY(-1px); border-color: hsl(var(--primary) / 0.2); }
.selector-card.active {
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: var(--shadow-glow);
}
/* Screenshot thumbnail — top portion of the card */
.selector-card-thumb {
  position: relative;
  width: 100%;
  height: 88px;
  background: hsl(0 0% 4%);
  overflow: hidden;
  flex-shrink: 0;
}
.selector-card-screen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Live badge positioned inside the thumb */
.selector-card-thumb .tile-live-badge {
  position: absolute;
  bottom: 5px;
  right: 6px;
  top: auto;
}
/* Text section below the thumbnail */
.selector-card-info {
  padding: 8px 11px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.selector-card-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.selector-card-name .agent-pill { flex-shrink: 0; }
.selector-card-host {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* Pill inside tile title row — pushed to the far right */
.tile-title-row .agent-pill { flex-shrink: 0; margin-left: auto; }

/* Delete machine button — danger style in the edit panel */
.ms-delete-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid hsl(var(--destructive) / 0.4);
  color: hsl(var(--destructive));
  padding: 5px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ms-delete-btn:hover {
  background: hsl(var(--destructive) / 0.12);
  border-color: hsl(var(--destructive));
}
.ms-delete-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Workspace layout:
   - workspace-top  : screen (wide, ~70%) + thinking (~30%)
   - chat-section   : full-width below
*/
.workspace {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.workspace-top {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  flex: 1 1 auto;
}
@media (max-width: 1100px) {
  .workspace-top { flex-direction: column; }
  .ws-resize-h { display: none; }
}

.workspace-screen, .workspace-panel, .workspace-chat {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  /* min-height: 0 is what lets an inner flex/grid child with
     overflow-y: auto actually scroll instead of forcing the parent
     to grow. Required wherever we have a scrollable child in a flex
     column. */
  min-height: 0;
}
/* In flex workspace-top, screen drives height; panel stretches to match */
.workspace-top > .workspace-screen {
  flex: var(--ws-screen-flex, 2.5);
  min-width: 0;
}
.workspace-top > .workspace-panel {
  flex: 1;
  min-width: 260px;
  min-height: 0;
}
.workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: hsl(var(--muted) / 0.35);
  border-bottom: 1px solid hsl(var(--border));
  font-size: 12.5px;
  font-weight: 500;
  color: hsl(var(--foreground));
  gap: 8px;
}
.workspace-header-left { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.workspace-header-right { display: inline-flex; align-items: center; gap: 6px; }
.workspace-header-left .muted { font-family: "JetBrains Mono", monospace; }

.workspace-screen .screen-frame {
  flex: 1;
  min-height: 520px;
  max-height: calc(100vh - 360px);
  border: 0;
  border-radius: 0;
  background: #04060d;
  position: relative;
}
.workspace-panel { flex: 1; min-height: 0; }
.workspace-thinking {
  max-height: none;
  padding: 12px;
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
}
.workspace-chat {
  flex-shrink: 0;
}
.workspace-chat > select,
.workspace-chat > textarea,
.workspace-chat > button {
  margin: 12px 14px 0;
}
.workspace-chat > button { margin-bottom: 14px; align-self: flex-start; }
.workspace-chat select,
.workspace-chat textarea {
  width: calc(100% - 28px);
  font: inherit;
  font-family: inherit;
  padding: 10px 12px;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-xs);
  background: hsl(var(--muted) / 0.4);
  color: hsl(var(--foreground));
  font-size: 13.5px;
}
.workspace-chat textarea {
  resize: vertical;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  min-height: 80px;
}
.workspace-chat select:focus,
.workspace-chat textarea:focus {
  outline: none;
  border-color: hsl(var(--primary) / 0.5);
  background: hsl(var(--muted) / 0.6);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15);
}
.workspace-chat button {
  padding: 10px 18px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 0;
  border-radius: var(--radius-xs);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
}
.workspace-chat button:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 0 24px hsl(var(--primary) / 0.4);
}
.workspace-chat button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===========================================================
   Panel resize handles
   =========================================================== */

.ws-resize-h {
  flex: 0 0 12px;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.ws-resize-h::after {
  content: '';
  width: 2px;
  height: 36px;
  background: hsl(var(--border));
  border-radius: 1px;
  transition: background 0.12s, height 0.12s;
}
.ws-resize-h:hover::after,
.ws-resize-h.is-dragging::after {
  background: hsl(var(--primary) / 0.55);
  height: 52px;
}

.ws-resize-v {
  flex: 0 0 12px;
  cursor: row-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  position: relative;
}
.ws-resize-v::after {
  content: '';
  width: 36px;
  height: 2px;
  background: hsl(var(--border));
  border-radius: 1px;
  transition: background 0.12s, width 0.12s;
}
.ws-resize-v:hover::after,
.ws-resize-v.is-dragging::after {
  background: hsl(var(--primary) / 0.55);
  width: 52px;
}

/* ===========================================================
   Thinking indicator (shown while AI is processing)
   =========================================================== */

.thinking-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: hsl(var(--primary));
  padding: 2px 9px;
  background: hsl(var(--primary) / 0.1);
  border: 1px solid hsl(var(--primary) / 0.25);
  border-radius: 100px;
  letter-spacing: 0.01em;
}
.thinking-dots {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.thinking-dots span {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: thinking-bounce 1.2s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.18s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes thinking-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* ===========================================================
   Modal (screen expand)
   =========================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: hsl(var(--background) / 0.75);
  backdrop-filter: blur(8px);
}
.modal-card {
  position: relative;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  width: min(96vw, 1600px);
  height: min(90vh, 960px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card), 0 0 60px -10px hsl(var(--primary) / 0.25);
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.35);
  font-size: 13.5px;
  font-weight: 500;
}
/* Vertical-stack modal: large screen → link bar → compact chat */
.modal-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.modal-screen-area {
  background: #04060d;
  flex: 1;
  min-height: 0;
  position: relative;
}
.modal-screen-area .screen-frame {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  min-height: 0;
  max-height: none;
}
.modal-link-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.3);
  font-size: 12.5px;
  flex-shrink: 0;
}
.modal-link-bar a,
.modal-link-bar .btn-icon {
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: hsl(var(--foreground));
  background: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--border));
  transition: background 0.12s;
}
.modal-link-bar a:hover { background: hsl(var(--muted)); }
.modal-link-bar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Compact chat bar at the bottom of the modal */
.modal-chat-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.2);
  flex-shrink: 0;
}
.modal-chat-bar select.chat-model {
  font: inherit;
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-xs);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  max-width: 200px;
}
.modal-chat-bar textarea {
  resize: none;
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 8px 12px;
  font: inherit;
  font-size: 13.5px;
  border-radius: var(--radius-xs);
  min-height: 36px;
  max-height: 100px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.modal-chat-bar textarea:focus {
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15);
}
.modal-chat-bar button {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.modal-chat-bar button:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 0 24px hsl(var(--primary) / 0.4);
}
.modal-chat-bar button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Compact modal variant used by the Add machine form. */
.modal-card-compact {
  width: min(640px, 92vw);
  height: auto;
  max-height: 90vh;
}
.modal-form-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
}

/* ===========================================================
   Chat section (detail view, full-width bottom)
   =========================================================== */

.workspace-chat-section {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 280px;
  max-height: 50vh;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.chat-messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-bubble-row {
  display: flex;
  width: 100%;
}
.chat-bubble-row.chat-user { justify-content: flex-end; }
.chat-bubble-row.chat-agent { justify-content: flex-start; }
.chat-bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
  position: relative;
}
.chat-user .chat-bubble {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-bottom-right-radius: 6px;
}
.chat-agent .chat-bubble {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-bottom-left-radius: 6px;
}
.chat-time {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  opacity: 0.65;
  font-family: "JetBrains Mono", monospace;
}

.chat-input {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.3);
}
.chat-input select.chat-model {
  font: inherit;
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-xs);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  max-width: 220px;
}
.chat-input textarea {
  flex: 1;
  resize: none;
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  border-radius: var(--radius-xs);
  min-height: 40px;
  max-height: 120px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.chat-input textarea:focus {
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15);
}
.chat-input button {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.chat-input button:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 0 24px hsl(var(--primary) / 0.4);
}
.chat-input button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===========================================================
   Stop button (destructive accent)
   =========================================================== */

.btn-stop {
  color: hsl(var(--destructive));
  border-color: hsl(var(--destructive) / 0.3);
  background: hsl(var(--destructive) / 0.1);
}
.btn-stop:hover {
  background: hsl(var(--destructive) / 0.2);
  border-color: hsl(var(--destructive) / 0.5);
  color: hsl(var(--destructive));
}
/* "Stopping…" feedback: pulse + cursor=wait while we wait for the
   worker to honor the cancel (which can take a few seconds because the
   harness checks the flag between turns). */
.btn-stop.stopping {
  cursor: wait;
  animation: pulse-stop 1.2s ease-in-out infinite;
  background: hsl(var(--destructive) / 0.2);
}
@keyframes pulse-stop {
  0%, 100% { box-shadow: 0 0 0 0 hsl(var(--destructive) / 0.5); }
  50%      { box-shadow: 0 0 0 6px hsl(var(--destructive) / 0); }
}

/* ===========================================================
   Action overlay markers (copilot-style visual cues)
   =========================================================== */

.screen-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}
.action-marker {
  position: absolute;
  pointer-events: none;
  animation: marker-fade 1.5s ease-out forwards;
  will-change: opacity, transform;
}

/* Click — pulsing ring */
.click-marker {
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border: 2px solid hsl(var(--primary));
  border-radius: 50%;
  box-shadow: 0 0 12px hsl(var(--primary) / 0.6), inset 0 0 8px hsl(var(--primary) / 0.5);
  background: hsl(var(--primary) / 0.15);
}
.click-marker.click-right { border-color: hsl(38 92% 60%); box-shadow: 0 0 12px hsl(38 92% 60% / 0.6), inset 0 0 8px hsl(38 92% 60% / 0.5); }
.click-marker.click-middle { border-color: hsl(260 80% 70%); }

.move-marker {
  width: 18px; height: 18px;
  margin-left: -9px; margin-top: -9px;
  border: 1.5px dashed hsl(var(--primary) / 0.6);
  border-radius: 50%;
}

/* Drag — line from start to end */
.drag-marker {
  height: 3px;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0.2));
  border-radius: 2px;
  box-shadow: 0 0 10px hsl(var(--primary) / 0.5);
  transform-origin: 0 50%;
}

/* Scroll — arrow */
.scroll-marker {
  margin-left: -12px;
  margin-top: -12px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

/* Key / Type — floating chip */
.key-marker {
  margin-left: 14px;
  margin-top: -14px;
  padding: 4px 10px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 16px hsl(var(--primary) / 0.4);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.key-marker.key-combo { background: hsl(260 80% 60%); color: white; }

@keyframes marker-fade {
  0%   { opacity: 0;   transform: scale(0.5); }
  15%  { opacity: 1;   transform: scale(1.15); }
  40%  { opacity: 0.9; transform: scale(1.0); }
  100% { opacity: 0;   transform: scale(1.6); }
}
/* Drag uses its own keyframes so we don't fight its rotate() transform. */
.drag-marker { animation: drag-fade 1.5s ease-out forwards; }
@keyframes drag-fade {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

/* "Add machine" button in the page header */
.add-machine-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 0;
  padding: 8px 14px;
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.add-machine-trigger:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 24px hsl(var(--primary) / 0.4);
}