/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --bg:             #050508;
  --surface:        rgba(255, 255, 255, 0.038);
  --surface-2:      rgba(255, 255, 255, 0.022);
  --surface-3:      rgba(255, 255, 255, 0.012);
  --surface-input:  rgba(0, 0, 0, 0.34);
  --surface-user:   rgba(210, 205, 255, 0.082);

  --border:         rgba(255, 255, 255, 0.078);
  --border-mid:     rgba(255, 255, 255, 0.16);
  --border-focus:   rgba(255, 255, 255, 0.30);

  --text:           #f0f0f8;
  --text-sub:       rgba(255, 255, 255, 0.52);
  --text-dim:       rgba(255, 255, 255, 0.32);
  --text-placeholder: rgba(255, 255, 255, 0.30);

  /* Violet-blue accent */
  --accent:         #8b7cf8;
  --accent-glow:    rgba(139, 124, 248, 0.32);
  --accent-soft:    rgba(139, 124, 248, 0.10);
  --accent-dim:     rgba(139, 124, 248, 0.055);

  /* Metallic primary button */
  --btn-from:       #d8d8ea;
  --btn-mid:        #b4b4c8;
  --btn-to:         #8a8a98;
  --btn-text:       #05050d;
  --btn-shine:      rgba(255, 255, 255, 0.65);

  /* Secondary button */
  --btn2-bg:        rgba(255, 255, 255, 0.040);
  --btn2-border:    rgba(255, 255, 255, 0.11);
  --btn2-text:      rgba(255, 255, 255, 0.68);

  /* Stage states */
  --stage-p-bg:     rgba(255, 255, 255, 0.026);
  --stage-p-bd:     rgba(255, 255, 255, 0.076);
  --stage-p-tx:     rgba(255, 255, 255, 0.26);

  --stage-a-bg:     rgba(139, 124, 248, 0.10);
  --stage-a-bd:     rgba(139, 124, 248, 0.38);
  --stage-a-tx:     rgba(200, 194, 255, 0.92);

  --stage-d-bg:     rgba(76, 196, 134, 0.065);
  --stage-d-bd:     rgba(76, 196, 134, 0.22);
  --stage-d-tx:     rgba(118, 216, 162, 0.82);

  /* Error */
  --error-bg:       rgba(180, 32, 52, 0.08);
  --error-bd:       rgba(180, 42, 62, 0.22);
  --error-tx:       #ce7880;

  /* Radius */
  --r:              14px;
  --r-lg:           18px;
  --r-xl:           24px;
  --r-2xl:          30px;

  /* Typography */
  --font-sans:      -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:      'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, Consolas, monospace;

  /* Easing */
  --ease:           180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-slow:      380ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-enter:     440ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Base ───────────────────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  height: -webkit-fill-available;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.55;
  min-height: 100dvh;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse 110% 65% at 50% -6%,  rgba(139, 124, 248, 0.13) 0%, transparent 62%),
    radial-gradient(ellipse 52%  32% at 50%  0%,  rgba(185, 175, 255, 0.07) 0%, transparent 42%),
    radial-gradient(ellipse 170% 65% at 50% 46%,  rgba(74,  66, 152, 0.04) 0%, transparent 72%),
    radial-gradient(ellipse 85%  58% at 50% 100%, rgba(36,  30,  70, 0.05) 0%, transparent 62%);
}

/* ── Shell ──────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: 0 2rem 5rem;
  display: flex;
  flex-direction: column;
}

/* ── Top bar ────────────────────────────────────────────────── */
.topbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3.75rem 0 2.75rem;
  position: relative;
  user-select: none;
}

.topbar-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 640px;
  height: 380px;
  background: radial-gradient(ellipse, rgba(148, 136, 240, 0.092) 0%, transparent 66%);
  pointer-events: none;
}

.topbar-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  outline: none;
  position: relative;
  z-index: 1;
}

.logo-img {
  height: 78px;
  width: auto;
  display: block;
  opacity: 0.88;
  filter:
    brightness(1.06) saturate(0.68)
    drop-shadow(0 0 38px rgba(185, 175, 255, 0.16))
    drop-shadow(0 2px 18px rgba(0, 0, 0, 0.66));
  animation: logoBreath 5s ease-in-out infinite;
}

@keyframes logoBreath {
  0%, 100% {
    opacity: 0.88;
    filter:
      brightness(1.06) saturate(0.68)
      drop-shadow(0 0 38px rgba(185, 175, 255, 0.16))
      drop-shadow(0 2px 18px rgba(0, 0, 0, 0.66));
  }
  50% {
    opacity: 0.94;
    filter:
      brightness(1.12) saturate(0.76)
      drop-shadow(0 0 56px rgba(195, 185, 255, 0.26))
      drop-shadow(0 2px 18px rgba(0, 0, 0, 0.58));
  }
}

/* ── Status badge ───────────────────────────────────────────── */
.status-badge {
  position: relative;
  margin-top: 1.125rem;
  padding-left: 1.125rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-sub);
  transition: color var(--ease-slow);
}

.status-badge::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(118, 210, 152, 0.72);
  box-shadow: 0 0 8px rgba(118, 210, 152, 0.52);
  animation: dotPulse 3.2s ease-in-out infinite;
  transition: background var(--ease-slow), box-shadow var(--ease-slow);
}

.status-badge.running::before {
  background: rgba(139, 124, 248, 0.92);
  box-shadow: 0 0 10px rgba(139, 124, 248, 0.72);
  animation: dotPulse 1.1s ease-in-out infinite;
}

.status-badge.complete::before {
  background: rgba(118, 210, 152, 0.92);
  box-shadow: 0 0 10px rgba(118, 210, 152, 0.62);
  animation: none;
}

.status-badge.error::before {
  background: rgba(206, 96, 108, 0.92);
  box-shadow: 0 0 10px rgba(206, 96, 108, 0.62);
  animation: none;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.38; }
}

/* ── Workspace layout ───────────────────────────────────────── */
.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 1.25rem;
  align-items: start;
}

/* ── Glass panel base ───────────────────────────────────────── */
.chat-panel,
.preview-panel {
  background: var(--surface);
  backdrop-filter: blur(64px) saturate(180%);
  -webkit-backdrop-filter: blur(64px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.048) inset,
    0 1px 0   0 rgba(255, 255, 255, 0.10) inset,
    0 -1px 0  0 rgba(0, 0, 0, 0.38) inset,
    0 72px 120px rgba(0, 0, 0, 0.82),
    0 22px  56px rgba(0, 0, 0, 0.56),
    0  7px  20px rgba(0, 0, 0, 0.46);
  animation: panelEnter var(--ease-enter) 0.06s both;
}

@keyframes panelEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Chat panel ─────────────────────────────────────────────── */
.chat-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Panel header ───────────────────────────────────────────── */
.panel-header {
  padding: 2.375rem 2.5rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
}

.panel-title {
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 0.375rem;
}

.panel-subtitle {
  font-size: 0.8125rem;
  color: var(--text-sub);
  line-height: 1.5;
}

/* ── Progress section ───────────────────────────────────────── */
.progress-section {
  padding: 1.625rem 2.5rem;
  border-bottom: 1px solid var(--border);
}

.progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.progress-text {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stage-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-sub);
  transition: color var(--ease-slow);
}

.progress-track {
  height: 2px;
  background: rgba(255, 255, 255, 0.055);
  border-radius: 99px;
  overflow: visible;
  position: relative;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(185, 174, 255, 0.88) 100%);
  border-radius: 99px;
  transition: width 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 0 14px rgba(139, 124, 248, 0.58), 0 0 4px rgba(139, 124, 248, 0.80);
  position: relative;
}

/* Moving shimmer tip */
.progress-fill::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -3px;
  width: 24px;
  height: 8px;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.72) 0%, transparent 70%);
  border-radius: 99px;
  pointer-events: none;
}

/* ── Stage grid ─────────────────────────────────────────────── */
.stage-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.375rem 2.5rem;
  border-bottom: 1px solid var(--border);
}

.stage-pill {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.4375rem 0.9375rem;
  border-radius: 99px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  cursor: default;
  user-select: none;
  transition:
    background var(--ease),
    border-color var(--ease),
    color var(--ease),
    box-shadow var(--ease);
}

/* Pending */
.stage-pill.pending {
  background: var(--stage-p-bg);
  border-color: var(--stage-p-bd);
  color: var(--stage-p-tx);
}
.stage-pill.pending .stage-icon {
  width: 5px; height: 5px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.5;
}

/* Active */
.stage-pill.active {
  background: var(--stage-a-bg);
  border-color: var(--stage-a-bd);
  color: var(--stage-a-tx);
  box-shadow:
    0 0 18px rgba(139, 124, 248, 0.16),
    0 0 0 1px rgba(139, 124, 248, 0.10) inset;
}
.stage-pill.active .stage-icon {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px var(--accent-glow);
  animation: iconPulse 1s ease-in-out infinite;
}
@keyframes iconPulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 6px  var(--accent-glow); }
  50%       { opacity: 0.5; box-shadow: 0 0 12px var(--accent-glow); }
}

/* Done */
.stage-pill.done {
  background: var(--stage-d-bg);
  border-color: var(--stage-d-bd);
  color: var(--stage-d-tx);
}
.stage-pill.done .stage-icon {
  width: 10px; height: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  color: rgb(118, 216, 162);
}
.stage-pill.done .stage-icon::before { content: '✓'; }

/* ── Conversation ───────────────────────────────────────────── */
.conversation {
  flex: 1;
  padding: 1.625rem 2.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  min-height: 300px;
  max-height: 500px;
  scroll-behavior: smooth;
}

.conversation::-webkit-scrollbar       { width: 3px; }
.conversation::-webkit-scrollbar-track { background: transparent; }
.conversation::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
}
.conversation::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.13); }

/* Empty state */
.conversation-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  pointer-events: none;
}

.empty-icon {
  width: 36px;
  height: 36px;
  color: rgba(255, 255, 255, 0.08);
}
.empty-icon svg { width: 100%; height: 100%; }

.conversation-empty p {
  font-size: 0.8125rem;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 220px;
}

/* ── Messages ───────────────────────────────────────────────── */
.msg {
  display: flex;
  animation: msgEnter 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes msgEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* User: right-aligned, violet tint */
.msg-user { justify-content: flex-end; }
.msg-user .msg-bubble {
  background: var(--surface-user);
  border: 1px solid rgba(139, 124, 248, 0.20);
  border-radius: var(--r) var(--r) 5px var(--r);
  max-width: 82%;
  box-shadow:
    0 0 0 1px rgba(139, 124, 248, 0.075) inset,
    0 5px 18px rgba(0, 0, 0, 0.34);
}
.msg-user .msg-content { color: rgba(218, 214, 255, 0.92); }

/* Agent: left-aligned, neutral glass */
.msg-agent { justify-content: flex-start; }
.msg-agent .msg-bubble {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r) var(--r) var(--r) 5px;
  max-width: 90%;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}
.msg-agent .msg-content { color: var(--text); }

/* System: subtle, full-width, italic */
.msg-system { justify-content: flex-start; }
.msg-system .msg-bubble {
  background: transparent;
  border: none;
  padding: 0.125rem 0;
  box-shadow: none;
}
.msg-system .msg-content {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-style: italic;
  padding: 0 !important;
}

/* Error: red-tinted */
.msg-error { justify-content: flex-start; }
.msg-error .msg-bubble {
  background: var(--error-bg);
  border: 1px solid var(--error-bd);
  border-radius: var(--r);
  max-width: 90%;
  box-shadow: 0 4px 16px rgba(180, 32, 52, 0.12);
}
.msg-error .msg-content { color: var(--error-tx); }

/* Bubble padding and text */
.msg-bubble { padding: 0.9375rem 1.1875rem; }
.msg-content {
  font-size: 0.9375rem;
  line-height: 1.68;
  word-break: break-word;
  white-space: pre-wrap;
}

/* "Use optimized prompt" — inside agent message */
.use-prompt-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 0.875rem;
  padding: 0.4375rem 1rem;
  background: var(--accent-dim);
  border: 1px solid rgba(139, 124, 248, 0.26);
  border-radius: 8px;
  color: rgba(200, 194, 255, 0.88);
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--ease),
    border-color var(--ease),
    color var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.use-prompt-btn:hover {
  background: rgba(139, 124, 248, 0.14);
  border-color: rgba(139, 124, 248, 0.40);
  color: rgba(220, 216, 255, 0.96);
}

/* ── Collapsible long agent messages ────────────────────────── */
.msg-content.msg-collapsed {
  max-height: 7.8em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

.msg-expand-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 0.625rem;
  padding: 0.3125rem 0.8125rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  color: var(--text-sub);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background var(--ease),
    border-color var(--ease),
    color var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.msg-expand-btn:hover {
  background: rgba(255, 255, 255, 0.052);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text);
}

/* ── Composer ───────────────────────────────────────────────── */
.composer {
  border-top: 1px solid var(--border);
  padding: 1.625rem 2.5rem 2.375rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.10);
}

.composer textarea {
  width: 100%;
  min-height: 118px;
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.78;
  padding: 1.125rem 1.375rem;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  resize: vertical;
  transition:
    border-color var(--ease),
    box-shadow var(--ease),
    background var(--ease);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.30) inset,
    0 3px 14px rgba(0, 0, 0, 0.38) inset;
}
.composer textarea::placeholder { color: var(--text-placeholder); }
.composer textarea:hover { border-color: var(--border-mid); }
.composer textarea:focus {
  border-color: var(--border-focus);
  background: rgba(0, 0, 0, 0.48);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.30) inset,
    0 3px 14px rgba(0, 0, 0, 0.38) inset,
    0 0 0 3.5px rgba(139, 124, 248, 0.10),
    0 0 30px rgba(139, 124, 248, 0.055);
}

.composer-footer {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* ── Refine status ──────────────────────────────────────────── */
.refine-status {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.03em;
  opacity: 0.82;
  animation: refinePulse 1.6s ease-in-out infinite;
}
.refine-status.hidden { display: none; }

@keyframes refinePulse {
  0%, 100% { opacity: 0.82; }
  50%       { opacity: 0.44; }
}

/* ── Button row ─────────────────────────────────────────────── */
.btn-row {
  display: flex;
  gap: 0.75rem;
}

/* ── Run Agent System ───────────────────────────────────────── */
#submit-btn {
  flex: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 60px;
  background:
    linear-gradient(
      180deg,
      var(--btn-shine) 0%,
      var(--btn-shine) 1px,
      var(--btn-from)  1px,
      var(--btn-mid)   52%,
      var(--btn-to)    100%
    );
  border: none;
  border-radius: var(--r);
  color: var(--btn-text);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    filter var(--ease),
    transform var(--ease),
    box-shadow var(--ease);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.70) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.26) inset,
    0 9px 40px rgba(205, 198, 255, 0.18),
    0 2px 12px rgba(0, 0, 0, 0.70),
    0 1px 3px  rgba(0, 0, 0, 0.56);
  -webkit-tap-highlight-color: transparent;
}
#submit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.23) 0%, transparent 48%);
  border-radius: inherit;
  pointer-events: none;
}
#submit-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.70) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.26) inset,
    0 14px 50px rgba(205, 198, 255, 0.28),
    0 2px 12px rgba(0, 0, 0, 0.70),
    0 1px 3px  rgba(0, 0, 0, 0.56);
}
#submit-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.999);
  filter: brightness(0.94);
}
#submit-btn:disabled {
  opacity: 0.30;
  cursor: not-allowed;
}

/* ── Shared button spinner ──────────────────────────────────── */
.btn-loader {
  display: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: spin 0.55s linear infinite;
}
#submit-btn .btn-loader { border: 1.5px solid rgba(6, 6, 14, 0.16); border-top-color: rgba(6, 6, 14, 0.78); }
.loading .btn-loader { display: block; }
.loading .btn-label  { opacity: 0.46; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Preview panel ──────────────────────────────────────────── */
.preview-panel {
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Hidden: invisible on desktop (still in grid flow), display:none on mobile */
.preview-panel.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  transition: none;
}

/* Open: animate in */
.preview-panel:not(.hidden) {
  animation: previewReveal 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes previewReveal {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.5rem 1.875rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
}

.preview-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.preview-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-sub);
}

.preview-status {
  font-size: 0.6875rem;
  color: var(--text-dim);
}

/* ── Open Preview button ────────────────────────────────────── */
.open-preview-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  color: rgba(180, 176, 210, 0.45);
  font-family: var(--font-sans);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--ease),
    border-color var(--ease),
    color var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.open-preview-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(200, 196, 230, 0.72);
}
.open-preview-btn.hidden { display: none; }

/* ── Composer hint ──────────────────────────────────────────── */
.composer-hint {
  font-size: 0.6875rem;
  color: var(--text-dim);
  letter-spacing: 0.01em;
  line-height: 1.5;
  padding-bottom: 0.125rem;
}
.composer-hint.hidden { display: none; }

.preview-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 1rem 3rem;
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  overflow: visible;
}

/* ── Phone stage: centering + scale container ─────────────────── */
.phone-stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

/* ── Phone frame ─────────────────────────────────────────────── */
.phone-frame {
  position: relative;
  width: min(375px, 92%);
  aspect-ratio: 375 / 812;
  background: linear-gradient(170deg, #0e0e1c 0%, #07070f 60%, #050510 100%);
  border-radius: 52px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    /* glass inner edge */
    inset 0  1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.60),
    inset 1px 0 0 rgba(255, 255, 255, 0.035),
    inset -1px 0 0 rgba(255, 255, 255, 0.035),
    /* screen depth */
    inset 0 0 0 8px rgba(0, 0, 0, 0.45),
    /* outer device ring */
    0 0 0 1px rgba(0, 0, 0, 0.80),
    /* ambient glow */
    0 0 40px rgba(139, 124, 248, 0.18),
    0 0 90px rgba(100, 88, 200, 0.10),
    0 0 180px rgba(80, 68, 180, 0.06),
    /* cinematic depth shadow */
    0 60px 160px rgba(0, 0, 0, 0.96),
    0 24px 60px rgba(0, 0, 0, 0.78);
  overflow: hidden;
  flex-shrink: 0;
  transform-origin: top center;
}

/* Top-edge glass sheen on bezel */
.phone-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56%;
  border-radius: 52px 52px 0 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.062) 0%,
    rgba(255, 255, 255, 0.018) 30%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 4;
}

/* Side volume buttons */
.phone-frame::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 26%;
  width: 3px;
  height: 52px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
  border-radius: 0 2px 2px 0;
  box-shadow:
    0  68px 0 rgba(255, 255, 255, 0.08),
    0 -64px 0 rgba(255, 255, 255, 0.06);
}

/* Dynamic Island */
.phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 32px;
  background: #05050d;
  border-radius: 22px;
  z-index: 10;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 0 2px rgba(0, 0, 0, 0.60),
    0 3px 16px rgba(0, 0, 0, 0.70);
}

/* Front camera */
.phone-notch::after {
  content: '';
  position: absolute;
  right: 19px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0e0e20;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 5px rgba(139, 124, 248, 0.22);
}

/* Screen */
.phone-screen {
  position: absolute;
  top: 10px; left: 8px; right: 8px; bottom: 10px;
  border-radius: 44px;
  overflow: hidden;
  background: var(--bg);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.038),
    inset 0 6px 32px rgba(0, 0, 0, 0.60);
}

/* Placeholder inside the screen */
.preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 4.5rem 2rem 2rem; /* top pad clears the notch */
  text-align: center;
}

.preview-icon {
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.07);
}
.preview-icon svg { width: 100%; height: 100%; }

.preview-placeholder p {
  font-size: 0.6875rem;
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 170px;
}

/* iframe fills the screen */
.preview-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;
}
.preview-iframe.hidden { display: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .workspace { grid-template-columns: 1fr 380px; }
}

@media (max-width: 880px) {
  .shell { padding: 0 1.375rem 4.5rem; }

  .workspace {
    grid-template-columns: 1fr;
    gap: 1.125rem;
  }

  .preview-panel {
    position: static;
    min-height: 0;
    transform: none !important;
    transition: none !important;
  }

  .preview-panel.hidden { display: none; }
  .preview-panel:not(.hidden) { display: flex; }

  .preview-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem;
  }

  .preview-body {
    padding: 2rem 1.5rem 2.5rem;
    overflow: hidden;
  }

  .phone-stage {
    overflow: hidden;
    width: 100%;
  }

  .phone-frame {
    width: min(340px, 84%);
  }
}

@media (max-width: 600px) {
  .shell { padding: 0 1rem 4rem; }

  .topbar { padding: 2.75rem 0 2.25rem; }
  .logo-img { height: 66px; }
  .topbar-halo { width: 380px; height: 250px; }

  .panel-header { padding: 1.75rem 1.625rem 1.5rem; }
  .panel-title  { font-size: 1.125rem; }

  .progress-section { padding: 1.375rem 1.625rem; }
  .progress-text    { font-size: 1.375rem; }

  .stage-grid { padding: 1.125rem 1.625rem; gap: 0.4375rem; }

  .conversation { padding: 1.375rem 1.625rem; max-height: 360px; }

  .composer { padding: 1.375rem 1.625rem 2rem; }
  .composer textarea { min-height: 104px; }

  .preview-body {
    padding: 1.5rem 1rem 2rem;
    overflow: hidden;
  }

  .phone-frame {
    width: min(300px, 88vw);
    max-width: 100%;
  }

  .btn-row { flex-direction: column; gap: 0.625rem; }
  #submit-btn { flex: none; width: 100%; height: 56px; }
}

@media (max-width: 380px) {
  .logo-img { height: 58px; }
  .panel-header { padding: 1.5rem 1.375rem 1.25rem; }
  .composer { padding: 1.25rem 1.375rem 1.75rem; }
}

/* iOS font-size zoom fix */
@media (max-width: 520px) {
  .composer textarea { font-size: 1rem; }
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 0 1.5rem;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--ease);
}
.footer-links a:hover { color: var(--text-sub); }

.footer-links span {
  color: var(--text-dim);
  font-size: 0.6875rem;
  opacity: 0.44;
}

.footer-copy {
  font-size: 0.625rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  opacity: 0.6;
}

/* ── Auth: hide dashboard until authenticated ─────────────────── */
body.auth-pending .shell,
body.auth-pending .site-footer {
  display: none;
}

/* ── Login overlay ───────────────────────────────────────────── */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse 110% 65% at 50% -6%, rgba(139, 124, 248, 0.13) 0%, transparent 62%),
    var(--bg);
}
.login-overlay.hidden { display: none; }

.login-card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 2.75rem 2.25rem 2.5rem;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 32px 80px rgba(0, 0, 0, 0.72),
    0 8px 24px rgba(0, 0, 0, 0.48);
}

.login-logo {
  height: 72px;
  width: auto;
  object-fit: contain;
}

.login-title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: center;
}

.login-sub {
  font-size: 0.8125rem;
  color: var(--text-sub);
  text-align: center;
  line-height: 1.6;
  margin-top: -0.5rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
}

.login-input {
  width: 100%;
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.75rem 1rem;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.login-input::placeholder { color: var(--text-placeholder); }
.login-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.login-btn {
  width: 100%;
  padding: 0.8125rem 1.25rem;
  background: linear-gradient(135deg, var(--btn-from) 0%, var(--btn-mid) 50%, var(--btn-to) 100%);
  border: none;
  border-radius: var(--r);
  color: var(--btn-text);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter var(--ease), transform var(--ease);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.70) inset,
    0 -1px 0 rgba(0, 0, 0, 0.26) inset,
    0 6px 24px rgba(205, 198, 255, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.60);
}
.login-btn:hover:not(:disabled) { filter: brightness(1.08); }
.login-btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.94); }
.login-btn:disabled { opacity: 0.40; cursor: not-allowed; }

.login-status {
  font-size: 0.8125rem;
  color: var(--text-sub);
  text-align: center;
  min-height: 1.25rem;
  line-height: 1.5;
}
.login-status-error { color: var(--error-tx); }

/* ── Logout button (topbar) ──────────────────────────────────── */
.logout-btn {
  display: none; /* shown via JS after auth */
  margin-left: auto;
  padding: 0.3125rem 0.8125rem;
  background: rgba(200, 48, 64, 0.08);
  border: 1px solid rgba(200, 64, 72, 0.28);
  border-radius: 8px;
  color: rgba(220, 130, 138, 0.88);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.logout-btn:hover {
  background: rgba(200, 48, 64, 0.14);
  border-color: rgba(220, 80, 90, 0.44);
  color: rgba(240, 150, 158, 0.96);
  box-shadow: 0 0 14px rgba(200, 48, 64, 0.18);
}

/* Show logout button only when authenticated */
body:not(.auth-pending) .logout-btn { display: inline-flex; align-items: center; }