/* Rectangle skin — port of Design/UI-Prototype/skin-rectangle.jsx to the v1 contract.
   Drops prototype-only fields not present in agentboard-skin/1: model, lastMessage, lastTool,
   lastFile, cost, elapsedSec.
   Status indicator colours (dot, state label, top accent, background wash) come from the host
   theme's `theme.statuses` map applied by rectangle.js — no `^#[0-9a-fA-F]{6}$` status literals
   live in this stylesheet. The non-status hex literals below are Rectangle's brand palette
   (progress bar, background washes) and intentionally do not equal any host status brush. */
:root {
  --bg: #171a21;
  --text: #e6ecf2;
  --text-dim: rgba(230, 236, 242, 0.55);
  --text-faint: rgba(230, 236, 242, 0.4);
  --border-idle: rgba(255, 255, 255, 0.08);
  --chip-bg: rgba(255, 255, 255, 0.06);
  --progress-track: rgba(255, 255, 255, 0.08);
  --progress-fill: #00419b;
  --progress-fill-critical: #e53935;
  /* Filled at runtime by rectangle.js from `theme.statuses[session.status]`. The fallback
     keeps the card legible during the brief gap between navigation completion and the init
     message arriving. */
  --status-color: rgba(230, 236, 242, 0.55);
  --status-wash: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: transparent;
  color: var(--text);
  font-family: Manrope, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
}

.card {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 14px 14px 12px 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg);
}

/* Density tweak. `regular` keeps the default values defined on .card / .title / etc.
   `compact` shrinks padding + body fonts; `comfy` expands them. The body's
   data-density attribute is set by rectangle.js from the resolved tweak value. */
body[data-density="compact"] .card {
  padding: 10px 10px 8px 10px;
  font-size: 11px;
}
body[data-density="compact"] .title { font-size: 13px; line-height: 17px; }
body[data-density="compact"] .project { font-size: 10px; }
body[data-density="compact"] .stat-value { font-size: 11px; }

body[data-density="comfy"] .card {
  padding: 18px 18px 16px 18px;
  font-size: 14px;
}
body[data-density="comfy"] .title { font-size: 17px; line-height: 22px; }
body[data-density="comfy"] .project { font-size: 12px; }
body[data-density="comfy"] .stat-value { font-size: 14px; }

/* Tweak: hide branch row when show-branch is off. Mirrors the existing
   .branch-line[hidden] rule but is driven by an attribute so the hidden flag
   can still be used for content-driven hiding (no branch / no worktree). */
body[data-show-branch="false"] .branch-line { display: none !important; }

/* Tweak: hide context (the footer + progress) when show-context is off. */
body[data-show-context="false"] .footer,
body[data-show-context="false"] .progress { display: none; }

/* Background wash for active/permission/error states. rectangle.js sets --status-wash from
   `theme.statuses[session.status]` with reduced alpha; the host-owned base colour shows
   through underneath. */
body[data-status="Running"] .card,
body[data-status="Starting"] .card,
body[data-status="Working"] .card,
body[data-status="WaitingForPermission"] .card,
body[data-status="Errored"] .card {
  background: var(--status-wash);
  background-color: var(--bg);
}

.top-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
}
body[data-status="Running"] .top-accent,
body[data-status="Working"] .top-accent,
body[data-status="WaitingForPermission"] .top-accent { background: var(--status-color); }
body[data-status="WaitingForPermission"] .top-accent {
  animation: rect-blink 1s ease-in-out infinite;
}

body[data-status="WaitingForPermission"],
body[data-status="Errored"] { animation: rect-vibrate 0.18s ease-in-out 2; }

@keyframes rect-vibrate {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-1px); }
  75%      { transform: translateX(1px); }
}

@keyframes rect-blink {
  50% { opacity: 0.4; }
}

@keyframes rect-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  100% { box-shadow: 0 0 0 6px transparent; }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  margin-right: 24px;          /* room for host's bell + close cluster */
}

.state-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: Poppins, "Segoe UI Variable", sans-serif;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--status-color);
  color: var(--status-color);
}

/* The active-status dot keeps the box-shadow pulse animation; the colour itself is driven by
   --status-color which rectangle.js refreshes on every render from theme.statuses. */
body[data-status="Running"] .dot,
body[data-status="Working"] .dot,
body[data-status="Starting"] .dot,
body[data-status="WaitingForPermission"] .dot {
  animation: rect-pulse 1.6s ease-out infinite;
}

.state-label { color: var(--status-color); }

.permission-mode {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-family: Poppins, sans-serif;
}

.title-block { margin-bottom: 8px; min-width: 0; }

.title {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 19px;
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project {
  font-size: 11px;
  color: var(--text-dim);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.branch-line {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 10px;
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  color: var(--text-dim);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.branch-line[hidden] { display: none; }

.branch {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--chip-bg);
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 10px;
}

.worktree-sep[hidden] { display: none; }

.footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border-idle);
}

.stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-family: Poppins, sans-serif;
  margin-bottom: 2px;
}

.stat-value {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-variant-numeric: tabular-nums;
}

.stat-sub {
  font-size: 10px;
  font-weight: 500;
  margin-left: 4px;
  color: var(--text-dim);
}

.progress {
  height: 4px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--progress-track);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--progress-fill);
  transition: width 400ms ease, background 200ms ease;
}

.progress[data-critical="true"] .progress-fill { background: var(--progress-fill-critical); }

.just-cleared {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.45);
  padding: 1px 5px;
  border-radius: 3px;
}

.just-cleared[hidden] { display: none; }

.pulsing .card { animation: rect-card-pulse 0.7s ease-out 1; }

@keyframes rect-card-pulse {
  0%, 100% { opacity: 1.0; }
  25%      { opacity: 0.55; }
  50%      { opacity: 1.0; }
  75%      { opacity: 0.7; }
}