/* Animica Deploy — page styles layered over the site CSS (aicf-*).
 * Phthalo palette: blue #2E63FF = your actions, green #14C79B = status
 * signals only (never white-on-green), void #05140F, surfaces #0C231A /
 * #123524, line #1C4633, ink #EAF5EF, focus #7AA6FF. */

:root {
  --dpl-void: #05140F;
  --dpl-surface: #0C231A;
  --dpl-surface-2: #123524;
  --dpl-line: #1C4633;
  --dpl-ink: #EAF5EF;
  --dpl-muted: #9fb5ab;
  --dpl-blue: #2E63FF;
  --dpl-focus: #7AA6FF;
  --dpl-green: #14C79B;
  --dpl-red: #ff6b6b;
}

/* ── shared bits ─────────────────────────────────────────────────────────── */
.dpl-card {
  background: linear-gradient(160deg, var(--dpl-surface-2), var(--dpl-surface));
  border: 1px solid var(--dpl-line);
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  color: var(--dpl-ink);
}
.dpl-card + .dpl-card { margin-top: 1rem; }

.dpl-input, .dpl-textarea, .dpl-select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--dpl-line);
  background: var(--dpl-void);
  color: var(--dpl-ink);
  font: inherit;
}
.dpl-input:focus, .dpl-textarea:focus, .dpl-select:focus {
  outline: 2px solid var(--dpl-focus);
  outline-offset: 1px;
  border-color: var(--dpl-focus);
}
.dpl-textarea { resize: vertical; min-height: 4.5rem; }
.dpl-label { display: block; font-size: 0.85rem; color: var(--dpl-muted); margin: 0.9rem 0 0.3rem; }

.dpl-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1.2rem; border-radius: 10px; border: none;
  background: var(--dpl-blue); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.dpl-btn:hover { filter: brightness(1.12); }
.dpl-btn:disabled { opacity: 0.55; cursor: wait; }
.dpl-btn-ghost {
  background: transparent; color: var(--dpl-ink);
  border: 1px solid var(--dpl-line);
}
.dpl-btn-ghost:hover { border-color: var(--dpl-focus); filter: none; }
.dpl-btn-sm { padding: 0.35rem 0.7rem; font-size: 0.85rem; border-radius: 8px; }
.dpl-btn:focus-visible { outline: 2px solid var(--dpl-focus); outline-offset: 2px; }

.dpl-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.dpl-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.dpl-error {
  display: none; margin-top: 0.7rem; padding: 0.6rem 0.9rem;
  border: 1px solid rgba(255, 107, 107, 0.4); border-radius: 10px;
  background: rgba(255, 107, 107, 0.08); color: #ffc9c9; font-size: 0.9rem;
}
.dpl-error.show { display: block; }
.dpl-note { color: var(--dpl-muted); font-size: 0.85rem; margin-top: 0.6rem; }

.dpl-spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em;
  border: 2px solid rgba(234, 245, 239, 0.3); border-top-color: var(--dpl-ink);
  border-radius: 50%; animation: dpl-spin 0.8s linear infinite;
}
@keyframes dpl-spin { to { transform: rotate(360deg); } }

.dpl-hidden { display: none !important; }

/* status dot — the ONE green element (never text on green) */
.dpl-dot {
  display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%;
  background: var(--dpl-muted); margin-right: 0.4em;
}
.dpl-dot.ok { background: var(--dpl-green); }
.dpl-dot.bad { background: var(--dpl-red); }
.dpl-dot.busy { background: var(--dpl-focus); }

.dpl-chip {
  display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--dpl-line); background: var(--dpl-void);
  color: var(--dpl-ink); font-size: 0.82rem; margin: 0.15rem 0.25rem 0.15rem 0;
}

.dpl-code {
  display: block; padding: 0.9rem 1rem; border-radius: 10px;
  border: 1px solid var(--dpl-line); background: var(--dpl-void);
  color: var(--dpl-ink); font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82rem; white-space: pre; overflow-x: auto; margin: 0;
}

/* ── progress timeline (checkout return + dashboard) ─────────────────────── */
.dpl-steps { list-style: none; margin: 1rem 0 0; padding: 0; }
.dpl-steps li {
  position: relative; padding: 0.45rem 0 0.45rem 2rem; color: var(--dpl-muted);
}
.dpl-steps li::before {
  content: ""; position: absolute; left: 0.45rem; top: 0.85rem;
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  border: 2px solid var(--dpl-line); background: var(--dpl-void);
}
.dpl-steps li.done { color: var(--dpl-ink); }
.dpl-steps li.done::before { border-color: var(--dpl-green); background: var(--dpl-green); }
.dpl-steps li.active { color: var(--dpl-ink); font-weight: 600; }
.dpl-steps li.active::before { border-color: var(--dpl-focus); animation: dpl-pulse 1.2s ease-in-out infinite; }
.dpl-steps li.failed { color: #ffc9c9; }
.dpl-steps li.failed::before { border-color: var(--dpl-red); background: var(--dpl-red); }
@keyframes dpl-pulse { 50% { box-shadow: 0 0 0 5px rgba(122, 166, 255, 0.18); } }
.dpl-step-detail { display: block; font-size: 0.8rem; color: var(--dpl-muted); font-weight: 400; }

/* ── tables (leads, admin) ───────────────────────────────────────────────── */
.dpl-table-wrap { overflow-x: auto; }
.dpl-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.dpl-table th, .dpl-table td {
  text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--dpl-line);
  vertical-align: top; color: var(--dpl-ink);
}
.dpl-table th { color: var(--dpl-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.dpl-table td.dpl-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.8rem; }

/* ── snippet tabs ────────────────────────────────────────────────────────── */
.dpl-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.dpl-tab {
  padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--dpl-line);
  background: transparent; color: var(--dpl-muted); font: inherit; font-size: 0.85rem; cursor: pointer;
}
.dpl-tab.active { background: var(--dpl-blue); border-color: var(--dpl-blue); color: #fff; }
.dpl-instructions { margin: 0.6rem 0 0.8rem 1.1rem; padding: 0; color: var(--dpl-muted); font-size: 0.9rem; }
.dpl-instructions li { margin: 0.25rem 0; }

/* ── stat cards ──────────────────────────────────────────────────────────── */
.dpl-stat { text-align: left; }
.dpl-stat .n { font-size: 1.7rem; font-weight: 700; color: var(--dpl-ink); font-variant-numeric: tabular-nums; }
.dpl-stat .k { font-size: 0.8rem; color: var(--dpl-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── widget preview iframe ───────────────────────────────────────────────── */
.dpl-preview-frame {
  width: 100%; max-width: 400px; height: 540px; border: 1px solid var(--dpl-line);
  border-radius: 16px; background: var(--dpl-void);
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.dpl-faq details {
  border: 1px solid var(--dpl-line); border-radius: 12px;
  background: var(--dpl-surface); padding: 0.85rem 1.1rem; margin-top: 0.7rem;
}
.dpl-faq summary { cursor: pointer; font-weight: 600; color: var(--dpl-ink); }
.dpl-faq p { color: var(--dpl-muted); margin: 0.6rem 0 0; font-size: 0.93rem; }

/* transcript bubbles for the dashboard Test tab */
.dpl-chatlog { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.4rem 0; }
.dpl-bubble { max-width: 85%; padding: 0.55rem 0.8rem; border-radius: 12px; font-size: 0.92rem; white-space: pre-wrap; overflow-wrap: break-word; }
.dpl-bubble.user { align-self: flex-end; background: var(--dpl-blue); color: #fff; }
.dpl-bubble.bot { align-self: flex-start; background: var(--dpl-void); border: 1px solid var(--dpl-line); color: var(--dpl-ink); }
.dpl-bubble.sys { align-self: center; color: var(--dpl-muted); font-size: 0.82rem; background: none; }