/* TransistorKit Cloud Builds — web surface styles.
   Values mirror product/design-tokens.json (Midnight Indigo). Colors, spacing,
   radii, and the semantic tool/approval/session/coin mappings come from the
   shared contract — no surface invents its own palette. */
:root {
  --tk-bg: #07070C;        --tk-bgSoft: #0E0E16;   --tk-surface: #14141D;
  --tk-surface2: #1A1A26;  --tk-border: #FFFFFF14; --tk-textPrimary: #FFFFFF;
  --tk-textDim: #98A0B3;   --tk-textQuiet: #5D6275;--tk-accent: #6366F1;
  --tk-accent2: #A855F7;   --tk-accent3: #22D3EE;  --tk-success: #34D399;
  --tk-danger: #EF4444;    --tk-warning: #FACC15;
  /* semantic */
  --tk-tool-read: var(--tk-textDim);   --tk-tool-search: var(--tk-accent3);
  --tk-tool-write: var(--tk-success);  --tk-tool-edit: var(--tk-accent);
  --tk-tool-delete: var(--tk-danger);  --tk-tool-shell: var(--tk-warning);
  --tk-tool-denied: var(--tk-textQuiet);
  --tk-approval-allow: var(--tk-success); --tk-approval-deny: var(--tk-danger);
  --tk-session-connecting: var(--tk-accent3); --tk-session-running: var(--tk-accent);
  --tk-session-awaitingApproval: var(--tk-warning); --tk-session-completed: var(--tk-success);
  --tk-session-canceled: var(--tk-textQuiet); --tk-session-error: var(--tk-danger);
  --tk-coin-balance: var(--tk-accent2); --tk-coin-low: var(--tk-warning);
  --tk-coin-empty: var(--tk-danger); --tk-coin-meter: var(--tk-accent2);
  /* space / radius / type */
  --tk-xs: 4px; --tk-sm: 8px; --tk-md: 14px; --tk-lg: 20px; --tk-xl: 28px;
  --tk-r-sm: 8px; --tk-r-md: 12px; --tk-r-lg: 16px;
  --tk-t-title: 20px; --tk-t-headline: 16px; --tk-t-body: 13px; --tk-t-caption: 11px;
}

/* Entry button (cloud.entry.button) injected on /app and /play. */
.tkc-entry {
  position: fixed; right: var(--tk-lg); bottom: calc(var(--tk-lg) + env(safe-area-inset-bottom, 0px));
  z-index: 4000; display: inline-flex; align-items: center; gap: var(--tk-sm);
  padding: var(--tk-sm) var(--tk-md); border: none; border-radius: 999px;
  background: linear-gradient(135deg, var(--tk-accent), var(--tk-accent2));
  color: #fff; font: 600 var(--tk-t-body)/1 system-ui, -apple-system, sans-serif;
  box-shadow: 0 6px 24px #6366f155; cursor: pointer;
}
.tkc-entry:active { transform: translateY(1px); }
.tkc-entry svg { width: 16px; height: 16px; }

/* Full-screen overlay host for the 5 cloud screens. */
.tkc-overlay {
  position: fixed; inset: 0; z-index: 5000; display: none;
  background: var(--tk-bg); color: var(--tk-textPrimary);
  font: var(--tk-t-body)/1.45 system-ui, -apple-system, sans-serif;
  flex-direction: column; overflow: hidden;
}
.tkc-overlay.open { display: flex; }
.tkc-header {
  display: flex; align-items: center; gap: var(--tk-sm);
  padding: calc(var(--tk-md) + env(safe-area-inset-top, 0px)) var(--tk-lg) var(--tk-md);
  border-bottom: 1px solid var(--tk-border); background: var(--tk-bgSoft);
}
.tkc-header h1 { margin: 0; font-size: var(--tk-t-headline); font-weight: 600; flex: 1; }
.tkc-iconbtn {
  background: none; border: none; color: var(--tk-textDim); font-size: 22px;
  line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: var(--tk-r-sm);
}
.tkc-iconbtn:hover { color: var(--tk-textPrimary); background: var(--tk-surface2); }
.tkc-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--tk-lg); }
.tkc-foot {
  padding: var(--tk-md) var(--tk-lg) calc(var(--tk-md) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--tk-border); background: var(--tk-bgSoft);
  display: flex; gap: var(--tk-sm);
}

.tkc-screen { display: none; }
.tkc-screen.active { display: block; }

/* shared bits */
.tkc-subtitle { color: var(--tk-textDim); margin: 0 0 var(--tk-lg); }
.tkc-card {
  background: var(--tk-surface); border: 1px solid var(--tk-border);
  border-radius: var(--tk-r-md); padding: var(--tk-md); margin-bottom: var(--tk-md);
}
.tkc-row { display: flex; align-items: center; gap: var(--tk-sm); }
.tkc-row .spacer { flex: 1; }
.tkc-label { color: var(--tk-textQuiet); font-size: var(--tk-t-caption); text-transform: uppercase; letter-spacing: .05em; }
.tkc-strong { font-weight: 600; }
.tkc-dim { color: var(--tk-textDim); }
.tkc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--tk-t-caption); }

.tkc-btn {
  appearance: none; border: none; border-radius: var(--tk-r-md);
  padding: var(--tk-md); font: 600 var(--tk-t-body)/1 system-ui, sans-serif;
  cursor: pointer; min-height: 44px;
}
.tkc-btn.primary { background: var(--tk-accent); color: #fff; flex: 1; }
.tkc-btn.primary:disabled { background: var(--tk-surface2); color: var(--tk-textQuiet); cursor: default; }
.tkc-btn.ghost { background: var(--tk-surface2); color: var(--tk-textPrimary); }
.tkc-btn.danger { background: var(--tk-danger); color: #fff; }
.tkc-btn.allow { background: var(--tk-approval-allow); color: #04210f; }
.tkc-btn.deny { background: var(--tk-approval-deny); color: #fff; }

.tkc-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 999px; font-size: var(--tk-t-caption); font-weight: 600;
  background: var(--tk-surface2);
}
.tkc-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tkc-badge.online { color: var(--tk-success); }
.tkc-badge.offline { color: var(--tk-textQuiet); }
.tkc-chip-coin { color: var(--tk-coin-balance); }

textarea.tkc-composer {
  width: 100%; box-sizing: border-box; min-height: 120px; resize: vertical;
  background: var(--tk-surface); color: var(--tk-textPrimary);
  border: 1px solid var(--tk-border); border-radius: var(--tk-r-md);
  padding: var(--tk-md); font: var(--tk-t-body)/1.5 system-ui, sans-serif;
}

/* approval-mode picker */
.tkc-modes { display: grid; gap: var(--tk-sm); }
.tkc-mode {
  text-align: left; background: var(--tk-surface); border: 1px solid var(--tk-border);
  border-radius: var(--tk-r-md); padding: var(--tk-md); cursor: pointer; color: inherit;
}
.tkc-mode.sel { border-color: var(--tk-accent); box-shadow: 0 0 0 1px var(--tk-accent) inset; }
.tkc-mode .name { font-weight: 600; }
.tkc-mode .tag { color: var(--tk-textDim); font-size: var(--tk-t-caption); }
.tkc-mode .explain { color: var(--tk-textQuiet); font-size: var(--tk-t-caption); margin-top: 4px; }

/* toggle */
.tkc-toggle { display: flex; align-items: center; gap: var(--tk-sm); cursor: pointer; }
.tkc-toggle input { width: 18px; height: 18px; accent-color: var(--tk-accent); }

/* session view */
.tkc-statuspill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: 999px; font-weight: 600; font-size: var(--tk-t-caption);
  background: var(--tk-surface2);
}
.tkc-statuspill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: tkc-pulse 1.4s infinite; }
@keyframes tkc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.tkc-status-connecting { color: var(--tk-session-connecting); }
.tkc-status-running { color: var(--tk-session-running); }
.tkc-status-awaitingApproval { color: var(--tk-session-awaitingApproval); }
.tkc-status-paused { color: var(--tk-textDim); }
.tkc-status-completed { color: var(--tk-session-completed); }
.tkc-status-canceled { color: var(--tk-session-canceled); }
.tkc-status-error { color: var(--tk-session-error); }

.tkc-meterrow { display: flex; gap: var(--tk-md); margin: var(--tk-md) 0; }
.tkc-meter { flex: 1; }
.tkc-meter .v { font-size: var(--tk-t-title); font-weight: 700; }
.tkc-meter.coin .v { color: var(--tk-coin-meter); }

.tkc-assistant { color: var(--tk-textDim); font-style: italic; min-height: 1.4em; margin-bottom: var(--tk-md); }

.tkc-feed { display: flex; flex-direction: column; gap: 6px; }
.tkc-tool {
  display: flex; align-items: center; gap: var(--tk-sm); padding: var(--tk-sm) var(--tk-md);
  background: var(--tk-surface); border: 1px solid var(--tk-border); border-radius: var(--tk-r-sm);
}
.tkc-tool .glyph { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tkc-tool .txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkc-tool.read .glyph { background: var(--tk-tool-read); }
.tkc-tool.search .glyph { background: var(--tk-tool-search); }
.tkc-tool.write .glyph { background: var(--tk-tool-write); }
.tkc-tool.edit .glyph { background: var(--tk-tool-edit); }
.tkc-tool.delete .glyph { background: var(--tk-tool-delete); }
.tkc-tool.shell .glyph { background: var(--tk-tool-shell); }
.tkc-tool.denied { opacity: .6; }
.tkc-tool.denied .glyph { background: var(--tk-tool-denied); }
.tkc-tool .state { font-size: var(--tk-t-caption); color: var(--tk-textQuiet); }

/* approval screen */
.tkc-approval-pre {
  background: var(--tk-bg); border: 1px solid var(--tk-border); border-radius: var(--tk-r-sm);
  padding: var(--tk-md); white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, Menlo, monospace; font-size: var(--tk-t-body); margin: var(--tk-sm) 0;
}
.tkc-scope.outside { color: var(--tk-warning); }

/* summary */
.tkc-changes { display: flex; flex-direction: column; gap: 6px; }
.tkc-change { display: flex; align-items: center; gap: var(--tk-sm); }
.tkc-change .op { font-size: var(--tk-t-caption); padding: 2px 8px; border-radius: 999px; background: var(--tk-surface2); }
.tkc-change .op.created { color: var(--tk-success); }
.tkc-change .op.modified { color: var(--tk-accent); }
.tkc-change .op.deleted { color: var(--tk-danger); }
.tkc-change .count { margin-left: auto; color: var(--tk-textQuiet); font-family: ui-monospace, Menlo, monospace; font-size: var(--tk-t-caption); }
.tkc-outcome { font-size: var(--tk-t-title); font-weight: 700; margin-bottom: var(--tk-md); }
.tkc-outcome.ok { color: var(--tk-success); }
.tkc-outcome.bad { color: var(--tk-danger); }

/* wallet */
.tkc-hero { text-align: center; padding: var(--tk-xl) 0; }
.tkc-hero .bal { font-size: 44px; font-weight: 800; color: var(--tk-coin-balance); }
.tkc-pack { display: flex; align-items: center; gap: var(--tk-md); }
.tkc-pack .price { margin-left: auto; color: var(--tk-textDim); }

.tkc-empty { text-align: center; color: var(--tk-textDim); padding: var(--tk-xl) var(--tk-md); }
.tkc-error-note { color: var(--tk-danger); }