* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #09090b;
  --surface: #111113;
  --surface-2: #18181b;
  --border: #232326;
  --text: #fafafa;
  --text-2: #a1a1aa;
  --text-3: #71717a;
  --accent: #3b82f6;
  --accent-soft: rgba(59, 130, 246, 0.08);
  --accent-hover: #2563eb;
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #eab308;
  --radius: 8px;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Layout ───────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 224px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 20px 20px 16px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
}
.sidebar-brand span { color: var(--accent); }

.sidebar-section {
  padding: 16px 20px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin: 1px 8px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  border: none;
  background: none;
  width: calc(100% - 16px);
  text-align: left;
  font-family: inherit;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.nav-item .icon { width: 16px; text-align: center; font-size: 14px; opacity: 0.7; }
.nav-item.active .icon { opacity: 1; }

.sidebar-footer {
  margin-top: auto;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
}
.sidebar-footer button {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 0;
  font-family: inherit;
}
.sidebar-footer button:hover { color: var(--text); }

.main-content {
  flex: 1;
  padding: 32px 40px;
  max-width: 1600px;
  min-width: 0;
}

/* ─── Typography ───────────────────────────────────────── */
h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.4px; margin-bottom: 24px; }
h2 { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
h3 { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.muted { color: var(--text-2); }

/* ─── Cards ────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

/* ─── Buttons ──────────────────────────────────────────── */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.btn-primary, button:not(.btn-secondary):not(.btn-danger):not(.btn-ghost):not(.auth-tab):not(.nav-item) {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-primary:hover, button:not(.btn-secondary):not(.btn-danger):not(.btn-ghost):not(.auth-tab):not(.nav-item):hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { background: #252529; }
.btn-danger {
  background: transparent;
  color: var(--red);
  border-color: #3b1a1a;
}
.btn-danger:hover { background: rgba(239, 68, 68, 0.08); }
.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: none;
  padding: 5px 8px;
}
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Forms ────────────────────────────────────────────── */
input, textarea, select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  width: 100%;
  transition: border-color 0.15s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
textarea { min-height: 80px; resize: vertical; }
select { cursor: pointer; }

label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 14px;
}
label.inline { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
label.inline input { width: auto; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

/* ─── Tables ───────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
th {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-3);
  background: var(--surface);
  position: sticky;
  top: 0;
}
tbody tr { transition: background 0.1s; }
tbody tr:hover { background: var(--surface-2); }

/* ─── Tags & status ────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
}
.status-dot.active  { background: var(--green); box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); }
.status-dot.inactive { background: var(--text-3); }
.status-dot.verified { background: var(--green); box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); }
.status-dot.unverified { background: var(--yellow); }
.status-dot.connected { background: var(--green); box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); }

.model-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}

/* ─── Utilities ────────────────────────────────────────── */
.row { display: flex; gap: 12px; align-items: center; }
.hidden { display: none !important; }
.error-text { color: var(--red); font-size: 13px; min-height: 18px; margin-top: 4px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  overflow: auto;
  font-size: 12px;
  max-height: 400px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.5;
  color: var(--text-2);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text);
}

.method {
  font-weight: 600;
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.method.GET    { background: rgba(59, 130, 246, 0.1); color: #60a5fa; }
.method.POST   { background: rgba(34, 197, 94, 0.1);  color: #4ade80; }
.method.PUT    { background: rgba(234, 179, 8, 0.1);  color: #facc15; }
.method.DELETE { background: rgba(239, 68, 68, 0.1);  color: #f87171; }

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-3);
}
.empty-state p { margin-top: 8px; font-size: 13px; }

/* ─── Auth ─────────────────────────────────────────────── */
.auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
}
.auth-card h1 {
  text-align: center;
  margin-bottom: 4px;
  font-size: 20px;
}
.auth-card .subtitle {
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  margin-bottom: 24px;
}
.auth-tabs {
  display: flex;
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.auth-tab {
  flex: 1;
  padding: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text-3);
  border: none;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.auth-tab:first-child { border-right: 1px solid var(--border); }
.auth-tab.active {
  background: var(--surface);
  color: var(--text);
}

/* ─── API docs ─────────────────────────────────────────── */
.endpoint {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.endpoint summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  transition: background 0.1s;
}
.endpoint summary:hover { background: var(--surface-2); }
.endpoint summary::-webkit-details-marker { display: none; }
.endpoint[open] summary { border-bottom: 1px solid var(--border); }
.endpoint-body { padding: 16px; }
.endpoint .path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text); }
.endpoint .desc { margin-left: auto; color: var(--text-3); font-size: 12px; }

/* ─── Agent cards ──────────────────────────────────────── */
.agent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.agent-card:hover { border-color: #333; }
.agent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.agent-name {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.agent-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 10px;
}
.agent-meta span { display: flex; align-items: center; gap: 4px; }
.agent-section-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-3);
  margin: 10px 0 6px;
}
.agent-card pre {
  margin: 0;
  max-height: 100px;
  font-size: 11px;
  padding: 10px;
}

/* ─── Scrollbars ───────────────────────────────────────── */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #3a3a40 transparent;
}
/* WebKit: thin, dark, only visible on hover over a scrollable region. */
::-webkit-scrollbar            { width: 10px; height: 10px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      {
  background: #2a2a30;
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover        { background: #3a3a40; background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-corner             { background: transparent; }
/* Inside the app main content, scrollbars stay even more subtle so they
   don't compete with the data. */
.main-content ::-webkit-scrollbar-thumb { background: #26262a; background-clip: padding-box; border: 2px solid transparent; }

/* ─── Table — make content breathe ─────────────────────── */
/* Let tables use every pixel available, and let the first text column
   claim remaining width instead of every column getting an equal slice. */
table { table-layout: auto; }
td, th { white-space: nowrap; }
td.wrap, td[data-wrap] { white-space: normal; }
/* When a cell is explicitly wrap-enabled (used by template bodies), line
   height stays readable and long words break cleanly instead of overflowing. */
td[data-wrap] { overflow-wrap: anywhere; word-break: normal; line-height: 1.45; }

/* ─── Inline "empty chart" hint ────────────────────────── */
.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.2px;
  background: var(--bg);
  border-radius: 4px;
}

.chart-card {
  background: linear-gradient(180deg, #111113 0%, #0e0e10 100%);
  border: 1px solid #1e1e22;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}

/* Pulsing "Live" dot — same motion language as macOS recording indicators. */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.55);
  animation: livePulse 1.6s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}

/* Bars animate up on first paint and on updates — subtle, 220ms cubic. */
.chart-bar {
  transition: y 0.22s cubic-bezier(0.25, 0.8, 0.25, 1),
              height 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ─── iOS-style toggle switch ──────────────────────────── */
.toggle {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  flex-shrink: 0;
  vertical-align: middle;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #3a3a40;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  height: 13px;
  width: 13px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  transition: transform 0.15s cubic-bezier(0.3, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.toggle input:checked + .toggle-slider { background: var(--green); }
.toggle input:checked + .toggle-slider::before { transform: translateX(13px); }
.toggle input:focus-visible + .toggle-slider {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}
.toggle input:disabled + .toggle-slider { opacity: 0.45; cursor: not-allowed; }

/* Row wrapping a toggle + state label. The .toggle element itself is 30x17
   and uses absolute positioning internally, so NEVER nest text inside it —
   the slider would overlay the text. Put the label here as a sibling. */
.switch-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.switch-state {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  min-width: 22px;
  text-align: right;
  transition: color 0.15s ease;
}
.switch-state.on { color: var(--green); }

/* Expand / collapse region that follows a switch-row. Uses [hidden] — no
   max-height tricks — so when the form is shown it's immediately focusable
   and fully laid out. The parent card's padding provides the spacing. */
.webhook-details { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.webhook-details[hidden] { display: none; }
.webhook-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
@media (max-width: 720px) {
  .webhook-grid { grid-template-columns: 1fr; }
}
.chart-guide { opacity: 0; transition: opacity 0.1s; }
.chart-guide.on { opacity: 1; }

/* ── Brands / Funnels ───────────────────────────────── */
.brand-grid, .funnel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.brand-card, .funnel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.brand-card:hover, .funnel-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.brand-logo {
  width: 52px; height: 52px; flex-shrink: 0;
  background: var(--surface-2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px; color: var(--text-2);
  overflow: hidden;
}
.brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-body { flex: 1; min-width: 0; }
.brand-name { font-weight: 600; }
.brand-tagline { font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-meta { font-size: 11px; margin-top: 8px; }

.funnel-card { flex-direction: column; padding: 0; overflow: hidden; }
.funnel-thumb {
  width: 100%; height: 120px;
  background-color: var(--surface-2);
  background-size: 80px auto;
}
.funnel-body { padding: 12px 14px 16px; width: 100%; }
.funnel-name { font-weight: 600; }

.form-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  background: var(--surface); padding: 20px; border-radius: var(--radius);
  border: 1px solid var(--border);
}
.form-2col .col { display: flex; flex-direction: column; gap: 12px; }
.form-col { display: flex; flex-direction: column; gap: 10px; }
.form-col textarea, .form-2col textarea { min-height: 80px; resize: vertical; }

.logo-uploader { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.logo-preview {
  width: 120px; height: 120px;
  background: var(--surface-2);
  border: 1px dashed var(--border); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); overflow: hidden;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  width: 480px; max-width: 95vw;
}

.pill {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface-2);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-2);
}
.pill-ok { background: rgba(34,197,94,0.12); color: var(--green); }
.pill-err { background: rgba(239,68,68,0.12); color: var(--red); }

/* ── Funnel Builder layout ────────────────────────────
   Viewport-locked: shell fills the entire viewport minus the 224px fixed
   sidebar, NEVER scrolls the outer page, and each inner pane (chat, preview)
   owns its own scroll. This is what keeps the preview iframe pinned to the
   right as the chat grows — without it, a long chat pushes the whole page
   down and the preview drifts off-screen. */
.main-content.builder-mode {
  padding: 0;
  max-width: none;
  height: 100vh;
  overflow: hidden;
}
.builder-shell {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 224px;   /* must match .sidebar width */
  right: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}
.builder-top {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.builder-title { font-weight: 600; font-size: 14px; }
.builder-body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 38%) 1fr;
  overflow: hidden;
}
.builder-chat {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  min-width: 0; min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.builder-preview {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  overflow: hidden;
  background: #fff;
}

/* (Tabs were removed — chat takes the entire left pane now. Files and
   Versions live as icon buttons in the preview's bottom status bar.) */

/* Chat */
.chat-stream {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
  scroll-behavior: smooth;
}
.chat-stream::-webkit-scrollbar { width: 8px; }
.chat-stream::-webkit-scrollbar-thumb { background: #26262a; border-radius: 4px; }
.chat-msg {
  max-width: 100%;
  padding: 0;
  background: transparent;
  align-self: stretch;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.6;
}
.chat-msg.role-user {
  align-self: flex-end;
  max-width: 86%;
  padding: 10px 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(59,130,246,0.22);
  border-radius: 14px 14px 3px 14px;
}
.chat-msg.role-assistant {
  align-self: stretch;
  padding-left: 28px;
  position: relative;
}
.chat-msg.role-assistant::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px;
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
  border-radius: 5px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06), 0 4px 12px rgba(96,165,250,0.22);
}
.chat-msg.error::before { background: linear-gradient(135deg, #f87171, #ef4444); }
.chat-msg.error .chat-text { color: #fca5a5; }
.chat-msg-body { display: flex; flex-direction: column; gap: 8px; }
.chat-thumb { max-width: 220px; max-height: 140px; border-radius: 8px; border: 1px solid var(--border); }
.chat-att { font-size: 12px; color: var(--text-2); }
.chat-text { white-space: pre-wrap; }

.tool-card {
  align-self: stretch;
  margin-left: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tool-card.ok { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.03); }
.tool-card.err { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.04); }
.tool-card.running { border-color: rgba(34,197,94,0.45); background: rgba(34,197,94,0.04); }
.tool-card.preparing { border-color: rgba(234,179,8,0.35); background: rgba(234,179,8,0.04); }
.tool-card.running .tool-name::before {
  background: #22c55e;
  animation: dotPulseGreen 1.2s ease-out infinite;
}
.tool-card.preparing .tool-name::before {
  background: #eab308;
  animation: dotPulseAmber 1.6s ease-out infinite;
}
.tool-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
  grid-column: 1 / 2;
}
.tool-name {
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: -0.01em;
}
.tool-name::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-3);
  display: inline-block;
  margin-right: 2px;
  vertical-align: middle;
}
.tool-card.ok .tool-name::before { background: var(--green); }
.tool-card.err .tool-name::before { background: var(--red); }
.tool-status {
  grid-column: 2;
  font-size: 10.5px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600;
}
.tool-input {
  grid-column: 1 / -1;
  color: var(--text-2);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  word-break: break-all;
  line-height: 1.5;
}
.tool-input:empty { display: none; }
.tool-result {
  grid-column: 1 / -1;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
}
.tool-result:empty { display: none; }

/* In-card checklist for write_files — each pending row flips to done or
   error as its per-file emit lands. Gives Lovable-style "files appearing
   before your eyes" feedback inline in the chat. */
.tool-checklist {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
}
.tool-checklist:empty { display: none; }
.chk-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--text-2);
  transition: color 0.2s ease, opacity 0.2s ease;
}
.chk-row.pending { opacity: 0.6; }
.chk-row.done { color: var(--text); }
.chk-row.err { color: var(--red); }
.chk-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-3);
  justify-self: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.chk-row.pending .chk-dot {
  background: #eab308;
  animation: dotPulseAmber 1.6s ease-out infinite;
}
.chk-row.done .chk-dot {
  background: #22c55e;
  transform: scale(1);
  animation: chkPop 0.35s ease-out;
}
.chk-row.err .chk-dot { background: var(--red); }
@keyframes chkPop {
  0% { transform: scale(0.3); }
  70% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.chk-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chk-size { font-size: 10.5px; color: var(--text-3); }

/* Inline notice surfaced mid-run by the server (e.g., "we salvaged N
   truncated files"). Sits inside the assistant bubble. */
.inline-notice {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.28);
  color: #eab308;
}
.inline-notice.info { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.28); color: #60a5fa; }
.inline-notice.err  { background: rgba(239,  68, 68, 0.08); border-color: rgba(239,  68, 68, 0.32); color: #fca5a5; }

/* Resumable "run paused" card — shown when the stream ends with a
   max_tokens or parse-error so the user can one-click continue. */
.resumable-card {
  align-self: stretch;
  margin-left: 28px;
  background: linear-gradient(180deg, rgba(234,179,8,0.08), rgba(234,179,8,0.02));
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--text);
}
.resumable-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #eab308;
  margin-bottom: 6px;
}
.resumable-head svg { opacity: 0.9; }
.resumable-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

.chat-input-bar {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 12px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
}
.chat-input-bar textarea {
  min-height: 78px; max-height: 280px; resize: none;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font: inherit; font-size: 14px; line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-input-bar textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}
.chat-input-actions {
  display: flex; align-items: center; gap: 6px;
}
.chat-input-actions .spacer { flex: 1; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border-radius: 8px;
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-3); }
.icon-btn svg { display: block; }

/* Thinking dots — shown inside the assistant bubble until the first real
   token arrives. Three staggered bouncing dots + elapsed-time label. */
.thinking {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 0;
  color: var(--text-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.thinking .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.4;
  animation: thinkBounce 1.4s ease-in-out infinite;
}
.thinking .dot:nth-child(2) { animation-delay: 0.15s; }
.thinking .dot:nth-child(3) { animation-delay: 0.3s; }
.thinking-label { letter-spacing: 0.01em; }
@keyframes thinkBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}
.attach-row { display: flex; flex-wrap: wrap; gap: 6px; }
.attach-row:empty { display: none; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px 2px 2px;
  font-size: 12px;
}
.attach-chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.attach-chip button { background: transparent; color: var(--text-3); border: 0; cursor: pointer; font-size: 14px; padding: 0 2px; }

/* Files panel */
.files-toolbar { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.file-list { list-style: none; overflow-y: auto; flex: 1; }
.file-list li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  align-items: center;
}
.file-path { font-family: ui-monospace, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.file-size { font-size: 11px; }
.btn-sm { padding: 3px 8px; font-size: 11px; }

/* Versions */
.versions-list { overflow-y: auto; flex: 1; padding: 6px; }
.version-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  align-items: flex-start;
  transition: background 0.12s ease;
}
.version-row:hover { background: var(--surface-2); }
.version-row.draft { background: rgba(234,179,8,0.05); }
.version-row + .version-row { border-top: 1px solid var(--border); }
.version-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.version-msg { font-size: 13px; color: var(--text); margin-bottom: 2px; }
.version-url {
  display: inline-block; margin-top: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; color: var(--text-3);
  text-decoration: none;
}
.version-url:hover { color: var(--accent); text-decoration: none; }

/* Preview iframe */
.preview-toolbar {
  flex-shrink: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.preview-toolbar input {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 10px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
}
.preview-url {
  font-size: 11px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--text-3); letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preview-stage {
  position: relative;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: #fff;
}
.preview-frame {
  flex: 1; border: 0; background: white; min-height: 0; width: 100%;
}

/* Bottom status bar on the preview pane. Holds a live "agent is doing X"
   indicator plus a toggle for the slide-up file panel. */
.preview-footer {
  flex-shrink: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  min-height: 32px;
  color: var(--text-2);
}
.pf-status { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.pf-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.pf-elapsed {
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  font-size: 11px;
  padding-left: 4px;
  border-left: 1px solid var(--border);
  margin-left: 2px;
}
.pf-elapsed:empty { display: none; }

.pf-actions { display: inline-flex; gap: 4px; align-items: center; }
.pf-icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 26px;
  padding: 0;
  border-radius: 6px;
  background: transparent; color: var(--text-2); border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pf-icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.pf-icon-btn svg { display: block; }
.pf-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-size: 9.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 0 0 1.5px var(--surface);
}
.pf-badge.empty { display: none; }

/* Status dot: idle = dim, preparing = slow amber pulse, running = fast green
   pulse, error = static red. The pulsing animation gives the user a heartbeat
   that the agent is alive even during long tool runs. */
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-3);
  display: inline-block;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.status-dot.idle { background: #71717a; }
.status-dot.running {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.7);
  animation: dotPulseGreen 1.2s ease-out infinite;
}
.status-dot.preparing {
  background: #eab308;
  box-shadow: 0 0 0 0 rgba(234,179,8,0.7);
  animation: dotPulseAmber 1.6s ease-out infinite;
}
.status-dot.error { background: var(--red); }
@keyframes dotPulseGreen {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@keyframes dotPulseAmber {
  0% { box-shadow: 0 0 0 0 rgba(234,179,8,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(234,179,8,0); }
  100% { box-shadow: 0 0 0 0 rgba(234,179,8,0); }
}

/* Slide-up overlay panels (Files + Versions). Overlay the iframe, not a
   modal — user can still see the page behind. Only one opens at a time. */
.overlay-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 60%;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 36px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
  transform: translateY(0);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}
.overlay-panel.hidden { transform: translateY(101%); pointer-events: none; }
.overlay-head {
  flex-shrink: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.file-panel-list {
  list-style: none; padding: 6px; margin: 0;
  overflow-y: auto; flex: 1;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}
.file-panel-list li {
  display: grid; grid-template-columns: 10px 1fr auto;
  align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 6px;
  cursor: pointer; color: var(--text-2);
  transition: background 0.1s ease, color 0.1s ease;
}
.file-panel-list li.empty { grid-template-columns: 1fr; color: var(--text-3); cursor: default; font-family: inherit; }
.file-panel-list li:hover { background: var(--surface-2); color: var(--text); }
.file-panel-list li .fp-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-3);
}
.file-panel-list li.writing .fp-dot {
  background: #22c55e; animation: dotPulseGreen 1s ease-out infinite;
}
.file-panel-list li.done .fp-dot { background: #22c55e; }
.file-panel-list li.error .fp-dot { background: var(--red); }
.file-panel-list li.deleted { text-decoration: line-through; opacity: 0.55; }
.file-panel-list li.deleted .fp-dot { background: var(--red); }
.file-panel-list .fp-meta { color: var(--text-3); font-size: 11px; }
.btn-primary {
  background: var(--accent); color: white; border: 0;
  padding: 8px 14px; border-radius: 6px; font-weight: 600; cursor: pointer;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: progress; }

.cf-account-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
}

/* Contact activity timeline — the running log of everything that's
   happened to a contact. Each row has a colored dot-icon, a bold label,
   the event's summary, a muted meta line (time + campaign/funnel), and
   optional structured payload preview. */
.activity-feed {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.activity-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.activity-row:last-child { border-bottom: 0; }
.activity-dot {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  margin-top: 2px;
}
.activity-main { min-width: 0; }
.activity-head {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline;
}
.activity-head strong {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
}
.activity-summary {
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}
.activity-meta {
  font-size: 11px;
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 2px;
}
.activity-meta .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.activity-preview {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}
.activity-preview code {
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.activity-data {
  margin-top: 6px;
  font-size: 11px;
}
.activity-data summary {
  cursor: pointer;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}
.activity-data pre {
  margin-top: 6px;
  padding: 10px;
  background: var(--surface-2);
  border-radius: 6px;
  overflow: auto;
  max-height: 240px;
  font-size: 11px;
  line-height: 1.5;
}

/* Destination type toggle — segmented control for URL list vs funnel. */
.dest-type-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  gap: 2px;
  margin: 14px 0 18px;
}
.dest-type-tab {
  background: transparent;
  border: 0;
  color: var(--text-2);
  padding: 7px 16px;
  font-size: 13px; font-weight: 500;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dest-type-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.dest-type-tab:hover:not(.active) { color: var(--text); }
.dest-pane[hidden] { display: none; }

/* Sent / Received segmented toggle in the campaign messages tab. Same shape
   as .dest-type-toggle — could be unified later. Kept distinct so it can
   be tuned without affecting the destinations form. */
.msg-dir-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  gap: 2px;
}
.msg-dir-tab {
  background: transparent;
  border: 0;
  color: var(--text-2);
  padding: 6px 14px;
  font-size: 13px; font-weight: 500;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.msg-dir-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.msg-dir-tab:hover:not(.active) { color: var(--text); }