body.public-client-setup {
  min-height: 100vh;
  margin: 0;
  background: transparent;
}

/* LYRA template carousel: dark snap selector with magnetic center focus. */
.public-client-setup .template-carousel-panel {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 10px 0 14px;
  padding: 18px 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.22), transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(20, 184, 166, 0.18), transparent 30%),
    #020617;
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.28);
}

.public-client-setup .template-carousel-panel-hidden {
  display: none;
}

.public-client-setup .template-carousel-heading {
  padding: 0 18px 14px;
  color: #ffffff;
}

.public-client-setup .template-carousel-heading strong {
  display: block;
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
}

.public-client-setup .template-carousel-heading span {
  display: block;
  max-width: 560px;
  margin-top: 5px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.45;
}

.public-client-setup .template-carousel-track {
  display: flex;
  grid-template-columns: none;
  gap: 18px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 18px;
  padding: 8px 18px 24px;
  cursor: grab;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.public-client-setup .template-carousel-track:active {
  cursor: grabbing;
}

.public-client-setup .template-carousel-track::-webkit-scrollbar {
  display: none;
}

.public-client-setup .template-carousel-card {
  flex: 0 0 min(320px, 78vw);
  width: min(320px, 78vw);
  min-height: 380px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 24px;
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26);
  transform: scale(0.94);
  opacity: 0.72;
  transition:
    transform 420ms ease,
    opacity 420ms ease,
    border-color 420ms ease,
    box-shadow 420ms ease;
}

.public-client-setup .template-carousel-card:hover {
  transform: translateY(-8px) scale(0.98);
  opacity: 0.92;
}

.public-client-setup .template-carousel-card.active-card {
  transform: scale(1.05);
  opacity: 1;
  border-color: rgba(34, 211, 238, 0.78);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.16),
    0 32px 90px rgba(8, 145, 178, 0.28);
}

.public-client-setup .template-carousel-image {
  height: 190px;
  overflow: hidden;
  background: #111827;
}

.public-client-setup .template-carousel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms ease;
}

.public-client-setup .template-carousel-card:hover .template-carousel-image img,
.public-client-setup .template-carousel-card.active-card .template-carousel-image img {
  transform: scale(1.055);
}

.public-client-setup .template-carousel-body {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.public-client-setup .template-carousel-body span,
.public-client-setup .template-carousel-body em {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 8px;
  color: #67e8f9;
  background: rgba(8, 145, 178, 0.16);
  font-size: 10px;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.public-client-setup .template-carousel-body strong {
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
}

.public-client-setup .template-carousel-body small {
  min-height: 52px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.42;
}

.public-client-setup .template-carousel-body em {
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.16);
  text-transform: none;
}

.public-client-setup .template-carousel-body button {
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
  border: 0;
  border-radius: 14px;
  background: #2563eb;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.public-client-setup .template-carousel-body button:hover {
  background: #3b82f6;
  transform: translateY(-1px);
}

.public-client-setup .live-site-preview-mount.canvas-fade-in {
  animation: lyraCanvasFadeIn 300ms ease both;
}

@keyframes lyraCanvasFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.public-client-setup .ai-contract-preview-shell {
  background: #f8fafc;
  border-radius: 18px;
  overflow: hidden;
}

.public-client-setup .kreaton-ai-page {
  --ai-bg: #f8fafc;
  --ai-surface: #ffffff;
  --ai-primary: #0f172a;
  --ai-muted: #64748b;
  --ai-accent: #14b8a6;
  background: var(--ai-bg);
  color: var(--ai-primary);
  display: grid;
  gap: 0;
  min-height: 100%;
}

.public-client-setup .kreaton-ai-block {
  padding: clamp(28px, 5vw, 72px);
}

.public-client-setup .kreaton-ai-hero-split,
.public-client-setup .kreaton-ai-marketplace-hero {
  align-items: center;
  background:
    radial-gradient(circle at 72% 36%, rgba(20, 184, 166, 0.22), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #eef8f7 48%, #e7eefc 100%);
  display: grid;
  gap: clamp(24px, 4vw, 64px);
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.05fr);
  min-height: clamp(520px, 68vh, 760px);
}

.public-client-setup .kreaton-ai-copy {
  display: grid;
  gap: 18px;
  max-width: 680px;
}

.public-client-setup .kreaton-ai-badge {
  align-self: start;
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 999px;
  color: #0f766e;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  text-transform: uppercase;
}

.public-client-setup .kreaton-ai-copy h1 {
  font-size: clamp(44px, 6vw, 92px);
  letter-spacing: 0;
  line-height: 0.92;
  margin: 0;
}

.public-client-setup .kreaton-ai-copy p,
.public-client-setup .kreaton-ai-section-head p {
  color: var(--ai-muted);
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.55;
  margin: 0;
}

.public-client-setup .kreaton-ai-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
}

.public-client-setup .kreaton-ai-actions button,
.public-client-setup .kreaton-ai-actions a {
  align-items: center;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 900;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  text-decoration: none;
}

.public-client-setup .kreaton-ai-actions button {
  background: var(--ai-primary);
  color: #ffffff;
}

.public-client-setup .kreaton-ai-actions a {
  background: rgba(255, 255, 255, 0.72);
  color: var(--ai-primary);
}

.public-client-setup .kreaton-ai-visual {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(20, 184, 166, 0.18));
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 32px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
  min-height: 280px;
  overflow: hidden;
  position: relative;
}

.public-client-setup .kreaton-ai-visual img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.public-client-setup .kreaton-ai-visual-placeholder {
  align-items: center;
  display: grid;
  height: 100%;
  justify-items: center;
  padding: 32px;
  text-align: center;
}

.public-client-setup .kreaton-ai-visual-placeholder span {
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(20,184,166,0.35), rgba(37,99,235,0.12));
  border-radius: 999px;
  filter: blur(1px);
  height: 42%;
  width: 42%;
}

.public-client-setup .kreaton-ai-visual-placeholder em {
  bottom: 24px;
  color: rgba(15, 23, 42, 0.58);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  left: 24px;
  position: absolute;
  right: 24px;
}

.public-client-setup .kreaton-ai-search {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 6px;
  max-width: 520px;
  padding: 12px 16px;
}

.public-client-setup .kreaton-ai-search span {
  color: var(--ai-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-client-setup .kreaton-ai-search input {
  background: transparent;
  border: 0;
  color: var(--ai-primary);
  font: inherit;
  font-weight: 800;
  outline: 0;
}

.public-client-setup .kreaton-ai-section-head {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
  max-width: 760px;
}

.public-client-setup .kreaton-ai-section-head h2 {
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1;
  margin: 0;
}

.public-client-setup .kreaton-ai-category-rail > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.public-client-setup .kreaton-ai-category-rail span {
  background: var(--ai-surface);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  font-weight: 900;
  padding: 12px 16px;
}

.public-client-setup .kreaton-ai-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-client-setup .kreaton-ai-grid article {
  background: var(--ai-surface);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
  display: grid;
  gap: 10px;
  overflow: hidden;
  padding: 14px;
}

.public-client-setup .kreaton-ai-grid article > div {
  align-items: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(37, 99, 235, 0.1));
  border-radius: 16px;
  display: grid;
  justify-items: center;
  overflow: hidden;
}

.public-client-setup .kreaton-ai-grid img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.public-client-setup .kreaton-ai-grid article > div span {
  color: var(--ai-accent);
  font-size: 26px;
  font-weight: 950;
}

.public-client-setup .kreaton-ai-grid strong {
  font-size: 15px;
}

.public-client-setup .kreaton-ai-grid p {
  color: var(--ai-muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.public-client-setup .kreaton-ai-grid em {
  font-style: normal;
  font-weight: 950;
}

.public-client-setup .kreaton-ai-market-grid {
  align-items: stretch;
  gap: 20px;
}

.public-client-setup .kreaton-ai-product-card {
  border-radius: 18px;
  padding: 12px;
}

.public-client-setup .kreaton-ai-product-media {
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.public-client-setup .kreaton-ai-product-media img {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.public-client-setup .kreaton-ai-product-media span {
  align-items: center;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(59, 130, 246, 0.1));
  color: rgba(15, 23, 42, 0.64);
  display: flex;
  font-size: 32px;
  font-weight: 950;
  height: 100%;
  justify-content: center;
  letter-spacing: 0.02em;
  width: 100%;
}

.public-client-setup .kreaton-ai-product-media small {
  bottom: 10px;
  color: rgba(15, 23, 42, 0.5);
  font-size: 10px;
  font-weight: 800;
  left: 10px;
  line-height: 1.25;
  position: absolute;
  right: 10px;
  text-align: center;
}

.public-client-setup .kreaton-ai-product-meta {
  display: grid;
  gap: 7px;
}

.public-client-setup .kreaton-ai-product-meta b {
  color: var(--ai-accent);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-client-setup .kreaton-ai-rating {
  color: #f59e0b;
  font-size: 12px;
  font-weight: 900;
}

.public-client-setup .kreaton-ai-rating span {
  color: var(--ai-muted);
  margin-left: 4px;
}

.public-client-setup .kreaton-ai-product-meta button {
  background: var(--ai-accent);
  border: 0;
  border-radius: 999px;
  color: #052e2b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  min-height: 38px;
}

.public-client-setup .kreaton-ai-restaurant-menu {
  background: #fffaf2;
}

.public-client-setup .kreaton-ai-menu-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-client-setup .kreaton-ai-menu-category {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(120, 53, 15, 0.12);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(120, 53, 15, 0.08);
  display: grid;
  gap: 14px;
  padding: 22px;
}

.public-client-setup .kreaton-ai-menu-category h3 {
  color: #7c2d12;
  font-size: 22px;
  margin: 0;
}

.public-client-setup .kreaton-ai-menu-category > div {
  display: grid;
  gap: 14px;
}

.public-client-setup .kreaton-ai-menu-item {
  align-items: start;
  border-top: 1px solid rgba(120, 53, 15, 0.12);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-top: 14px;
}

.public-client-setup .kreaton-ai-menu-item strong {
  color: #1f2937;
  display: block;
  font-size: 15px;
}

.public-client-setup .kreaton-ai-menu-item p {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 0;
}

.public-client-setup .kreaton-ai-menu-item span {
  color: #a16207;
  display: block;
  font-size: 11px;
  font-weight: 900;
  margin-top: 6px;
  text-transform: uppercase;
}

.public-client-setup .kreaton-ai-menu-item em {
  color: #111827;
  font-style: normal;
  font-weight: 950;
}

.public-client-setup .kreaton-ai-feature-spotlight {
  align-items: center;
  background:
    radial-gradient(circle at 72% 38%, color-mix(in srgb, var(--ai-accent) 24%, transparent), transparent 30%),
    linear-gradient(135deg, #020617, #0f172a 54%, #111827);
  color: #ffffff;
  display: grid;
  gap: clamp(24px, 4vw, 64px);
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.05fr);
  min-height: clamp(540px, 72vh, 820px);
}

.public-client-setup .kreaton-ai-feature-spotlight .kreaton-ai-copy h2 {
  font-size: clamp(42px, 6vw, 88px);
  line-height: 0.94;
  margin: 0;
}

.public-client-setup .kreaton-ai-feature-spotlight .kreaton-ai-copy p {
  color: rgba(255, 255, 255, 0.72);
}

.public-client-setup .kreaton-ai-spec-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 12px;
}

.public-client-setup .kreaton-ai-spec-grid article {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 16px;
}

.public-client-setup .kreaton-ai-spec-grid span {
  color: rgba(255, 255, 255, 0.55);
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-client-setup .kreaton-ai-spec-grid strong {
  color: #ffffff;
  display: block;
  font-size: clamp(18px, 2vw, 28px);
  margin-top: 6px;
}

@media (max-width: 767px) {
  .public-client-setup .template-carousel-panel {
    border-radius: 18px;
    margin: 8px 0 12px;
    padding-top: 14px;
  }

  .public-client-setup .template-carousel-heading {
    padding: 0 14px 10px;
  }

  .public-client-setup .template-carousel-heading strong {
    font-size: 16px;
  }

  .public-client-setup .template-carousel-track {
    gap: 14px;
    scroll-padding-inline: 14px;
    padding: 8px 14px 22px;
  }

  .public-client-setup .template-carousel-card {
    flex-basis: min(286px, 82vw);
    width: min(286px, 82vw);
    min-height: 350px;
    border-radius: 20px;
  }

  .public-client-setup .template-carousel-card.active-card {
    transform: scale(1.025);
  }

  .public-client-setup .template-carousel-image {
    height: 166px;
  }

  .public-client-setup .kreaton-ai-block {
    padding: 18px;
  }

  .public-client-setup .kreaton-ai-hero-split,
  .public-client-setup .kreaton-ai-marketplace-hero {
    gap: 20px;
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .public-client-setup .kreaton-ai-copy {
    gap: 12px;
  }

  .public-client-setup .kreaton-ai-copy h1 {
    font-size: 34px;
    line-height: 1;
  }

  .public-client-setup .kreaton-ai-copy p,
  .public-client-setup .kreaton-ai-section-head p {
    font-size: 15px;
  }

  .public-client-setup .kreaton-ai-visual {
    border-radius: 22px;
    min-height: 220px;
  }

  .public-client-setup .kreaton-ai-grid {
    grid-template-columns: 1fr;
  }

  .public-client-setup .kreaton-ai-menu-grid,
  .public-client-setup .kreaton-ai-feature-spotlight,
  .public-client-setup .kreaton-ai-spec-grid {
    grid-template-columns: 1fr;
  }

  .public-client-setup .kreaton-ai-feature-spotlight {
    min-height: auto;
  }

  .public-client-setup .kreaton-ai-feature-spotlight .kreaton-ai-copy h2 {
    font-size: 34px;
  }
}

.public-client-setup .domain-check-card {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 12px;
  background: rgba(240, 253, 250, 0.72);
  padding: 10px;
}

.public-client-setup .domain-choice-list {
  display: grid;
  gap: 8px;
}

.public-client-setup .domain-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  padding: 10px 12px;
  text-align: left;
}

.public-client-setup .domain-choice strong,
.public-client-setup .domain-choice span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-client-setup .domain-choice span {
  color: #0f766e;
  font-size: 12px;
  font-weight: 800;
}

.public-client-setup .domain-choice.blocked {
  opacity: 0.58;
}

body.public-client-setup.generated-preview-open {
  overflow: auto;
  background: #ffffff;
}

.public-client-setup * {
  box-sizing: border-box;
}

.public-client-setup .ai-shell {
  min-height: 100vh;
  display: block;
}

.public-client-setup.client-auth-required .intake-panel,
.public-client-setup.client-auth-required .workspace {
  display: none !important;
}

.public-client-setup .client-support-hidden,
.public-client-setup .workspace,
.public-client-setup .intake-mode-tabs,
.public-client-setup .language-control {
  display: none !important;
}

.public-client-setup.generated-preview-open .guided-panel,
.public-client-setup.generated-preview-open .intake-panel,
.public-client-setup.generated-preview-open .editor-panel,
.public-client-setup.generated-preview-open .toolbar-actions {
  display: none !important;
}

.public-client-setup.generated-preview-open .workspace {
  display: block !important;
  min-height: 100vh;
  background: #ffffff;
  overflow: visible;
}

.public-client-setup.client-auth-required.generated-preview-open .workspace,
.public-client-setup.client-auth-required.generated-preview-open .intake-panel,
.public-client-setup.client-auth-required .guided-panel {
  display: none !important;
}

.public-client-setup.generated-preview-open .toolbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.public-client-setup.generated-preview-open .toolbar strong {
  display: block;
  color: #101827;
  font-size: 15px;
}

.public-client-setup.generated-preview-open .toolbar span {
  color: #667085;
  font-size: 12px;
}

.public-client-setup.generated-preview-open .work-grid {
  display: block;
  padding: 0;
}

.public-client-setup.generated-preview-open .preview-panel {
  display: block;
  min-height: calc(100vh - 54px);
  border: 0;
  border-radius: 0;
}

.public-client-setup.generated-preview-open .client-review-bar {
  position: sticky;
  top: 54px;
  z-index: 24;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-width: 0 0 1px;
  background:
    linear-gradient(90deg, rgba(12, 18, 32, 0.96), rgba(19, 34, 50, 0.94)),
    #101827;
  color: #ffffff;
  padding: 14px 16px;
}

.public-client-setup.generated-preview-open .client-review-bar strong,
.public-client-setup.generated-preview-open .client-review-bar span {
  display: block;
}

.public-client-setup.generated-preview-open .client-review-bar strong {
  font-size: 16px;
}

.public-client-setup.generated-preview-open .client-review-bar span {
  margin-top: 3px;
  color: #b9c6d6;
  font-size: 13px;
}

.public-client-setup.generated-preview-open .client-review-bar div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.public-client-setup.generated-preview-open .client-review-bar button {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 900;
}

.public-client-setup.generated-preview-open .client-review-bar #submitDraftReviewButton {
  border-color: #12b981;
  background: #0f9f75;
}

@media (max-width: 720px) {
  .public-client-setup.generated-preview-open .client-review-bar {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .public-client-setup.generated-preview-open .client-review-bar div:last-child {
    display: grid;
    grid-template-columns: 1fr;
  }

  .public-client-setup.generated-preview-open .client-review-bar button {
    width: 100%;
  }

  .public-client-setup.generated-preview-open #previewFrame,
  .public-client-setup.generated-preview-open #previewFrame .rendered-site {
    min-height: auto;
  }
}

.public-client-setup.generated-preview-open #previewFrame {
  min-height: calc(100vh - 112px);
  height: auto;
  overflow: visible;
  width: 100%;
  padding: 0;
  justify-items: stretch;
  background: #fff;
}

.public-client-setup.generated-preview-open #previewFrame .rendered-site {
  min-height: calc(100vh - 112px);
  width: 100%;
  max-width: none;
  box-shadow: none;
}

.public-client-setup.generated-preview-open.draft-adjust-open .workspace {
  margin-right: clamp(380px, 34vw, 460px);
}

.public-client-setup.generated-preview-open.draft-adjust-open .intake-panel {
  display: block !important;
  min-height: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
}

.public-client-setup.generated-preview-open.draft-adjust-open .intake-panel > :not(.guided-panel) {
  display: none !important;
}

.public-client-setup.generated-preview-open.draft-adjust-open .guided-panel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 70;
  display: grid !important;
  width: clamp(380px, 34vw, 460px);
  padding: 0;
  background: transparent;
  box-shadow: -18px 0 54px rgba(15, 23, 42, 0.16);
  pointer-events: auto;
}

.public-client-setup.generated-preview-open.draft-adjust-open .guided-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: 100%;
  height: 100vh;
  max-height: none;
  border: 0;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
  box-shadow: none;
}

.public-client-setup.generated-preview-open.draft-adjust-open .guided-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.public-client-setup.generated-preview-open.draft-adjust-open .guided-live-stage,
.public-client-setup.generated-preview-open.draft-adjust-open .summary-panel {
  display: none !important;
}

.public-client-setup.generated-preview-open.draft-adjust-open .guided-chat-card {
  display: flex;
  height: 100%;
  min-height: 0;
  border-left: 0;
}

.public-client-setup.generated-preview-open.draft-adjust-open .guided-chat {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.public-client-setup.generated-preview-open.draft-adjust-open .chat-status-card,
.public-client-setup.generated-preview-open.draft-adjust-open .asset-chat-card,
.public-client-setup.generated-preview-open.draft-adjust-open .quick-chip-row {
  display: none;
}

.public-client-setup.generated-preview-open.draft-adjust-open .chat-composer {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.96);
}

@media (max-width: 900px) {
  .public-client-setup.generated-preview-open.draft-adjust-open .workspace {
    margin-right: 0;
  }

  .public-client-setup.generated-preview-open.draft-adjust-open .guided-panel {
    inset: auto 0 0;
    width: 100%;
    height: min(72vh, 680px);
    box-shadow: 0 -18px 54px rgba(15, 23, 42, 0.18);
  }

  .public-client-setup.generated-preview-open.draft-adjust-open .guided-shell {
    height: 100%;
    border-left: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px 22px 0 0;
  }
}

.public-client-setup .intake-panel {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  border: 0;
  background: transparent;
}

.public-client-setup .guided-panel {
  background: transparent;
  padding: 0;
}

.public-client-setup .guided-shell {
  position: relative;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)),
    radial-gradient(circle at 20% 0%, rgba(20, 184, 166, 0.14), transparent 34%);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.public-client-setup .guided-header {
  padding: 16px 56px 12px 16px;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78));
}

.public-client-setup .assistant-identity {
  align-items: center;
  gap: 11px;
}

.public-client-setup .guided-avatar-dock .avatar-assistant {
  width: auto;
}

.public-client-setup .guided-avatar-dock .avatar-caption {
  display: none;
}

.public-client-setup .assistant-identity strong {
  display: block;
  color: #101827;
  font-size: 16px;
  line-height: 1.15;
}

.public-client-setup .assistant-identity span {
  display: block;
  margin-top: 2px;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.public-client-setup .assistant-identity em {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: #0f766e;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.public-client-setup .assistant-identity em i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

.public-client-setup .assistant-avatar.large {
  width: 92px;
  height: 92px;
  border: 0;
  border-radius: 0;
  padding: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 12px 20px rgba(20, 184, 166, 0.25));
  animation: luma-idle 4.6s ease-in-out infinite;
}

.public-client-setup .assistant-avatar-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

.public-client-setup .assistant-avatar-wrap::before,
.public-client-setup .assistant-avatar-wrap::after {
  content: none;
  position: absolute;
  inset: -5px;
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
}

.public-client-setup .assistant-avatar-wrap::before {
  border: 1px solid rgba(20, 184, 166, 0.34);
}

.public-client-setup .assistant-avatar-wrap::after {
  background: radial-gradient(circle, rgba(20, 184, 166, 0.2), transparent 68%);
  filter: blur(10px);
  z-index: -1;
}

.public-client-setup .assistant-avatar[data-state="speaking"],
.public-client-setup .assistant-avatar[data-state="happy"] {
  animation: luma-talk 0.72s ease-in-out infinite;
  box-shadow: none;
}

.public-client-setup .assistant-avatar[data-state="thinking"] {
  animation: luma-thinking 1.4s ease-in-out infinite;
  filter: saturate(1.08);
}

.public-client-setup .assistant-avatar[data-state="listening"] {
  animation: luma-listening 1.1s ease-in-out infinite;
}

.public-client-setup .assistant-avatar[data-state="alert"] {
  animation: luma-alert 0.55s ease-in-out 3;
  box-shadow: none;
}

.public-client-setup .assistant-avatar[data-state="success"] {
  animation: luma-success 0.9s ease-in-out infinite;
  box-shadow: none;
}

.public-client-setup:has(.assistant-avatar.large[data-state="speaking"]) .assistant-avatar-wrap::before,
.public-client-setup:has(.assistant-avatar.large[data-state="listening"]) .assistant-avatar-wrap::before,
.public-client-setup:has(.assistant-avatar.large[data-state="success"]) .assistant-avatar-wrap::before {
  opacity: 1;
  animation: assistantRing 1.25s ease-in-out infinite;
}

.public-client-setup:has(.assistant-avatar.large[data-state="speaking"]) .assistant-avatar-wrap::after,
.public-client-setup:has(.assistant-avatar.large[data-state="thinking"]) .assistant-avatar-wrap::after,
.public-client-setup:has(.assistant-avatar.large[data-state="success"]) .assistant-avatar-wrap::after {
  opacity: 1;
}

.public-client-setup .guided-header-actions {
  gap: 8px;
  padding-right: 34px;
}

.public-client-setup .compact-action {
  min-height: 34px;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.public-client-setup .client-account-button {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.public-client-setup .compact-language {
  width: auto;
  min-width: 0;
  max-width: 96px;
  font-size: 0;
}

.public-client-setup .compact-language::before {
  content: "🌐";
  margin-right: 4px;
  font-size: 13px;
}

.public-client-setup .compact-language select {
  width: 62px;
  min-height: 34px;
  border-radius: 999px;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 900;
}

.public-client-setup .icon-button,
.public-client-setup .icon-only {
  width: 36px;
  height: 36px;
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0;
}

.public-client-setup.embedded-chat #guidedCloseButton {
  display: none;
}

.public-client-setup.embedded-chat .guided-header {
  padding-right: 16px;
}

.public-client-setup.embedded-chat .guided-header-actions {
  padding-right: 0;
}

.public-client-setup .icon-only {
  font-size: 0 !important;
}

.public-client-setup .audio-toggle::before {
  content: "🔇";
  font-size: 15px;
}

.public-client-setup .audio-toggle[data-enabled="true"]::before,
.public-client-setup .audio-toggle.active::before {
  content: "🔊";
}

.public-client-setup .mic-toggle::before {
  content: "🎙";
  font-size: 16px;
}

.public-client-setup .send-toggle::before {
  content: "➤";
  font-size: 15px;
  transform: translateX(1px);
}

.public-client-setup .guided-progress {
  padding: 9px 16px 6px;
  gap: 8px;
  border: 0;
  background: rgba(255, 255, 255, 0.58);
}

.public-client-setup .guided-progress span {
  color: #667085;
  font-size: 11px;
  font-weight: 900;
}

.public-client-setup .guided-progress div {
  height: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

.public-client-setup .guided-progress i {
  border-radius: inherit;
}

.public-client-setup .guided-layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(20, 184, 166, 0.13), transparent 28%),
    radial-gradient(circle at 72% 4%, rgba(99, 102, 241, 0.13), transparent 30%),
    linear-gradient(135deg, #f8fafc 0%, #eefcf9 48%, #f7f5ff 100%);
}

.public-client-setup .guided-live-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  overflow: auto;
  padding: clamp(18px, 3vw, 38px);
}

.public-client-setup .live-stage-header {
  max-width: 780px;
}

.public-client-setup .live-stage-header span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 999px;
  padding: 4px 9px;
  color: #0f766e;
  background: rgba(240, 253, 250, 0.88);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.public-client-setup .live-stage-header strong {
  display: block;
  margin-top: 10px;
  color: #101828;
  font-size: clamp(24px, 3.1vw, 44px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.98;
}

.public-client-setup .live-stage-header p {
  max-width: 560px;
  margin: 10px 0 0;
  color: #475467;
  font-size: 14px;
  line-height: 1.5;
}

.public-client-setup .live-site-preview-mount {
  min-height: 0;
  display: grid;
  align-content: start;
}

.public-client-setup .guided-chat-card {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: -18px 0 44px rgba(15, 23, 42, 0.08);
}

.public-client-setup .guided-chat-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(20, 184, 166, 0.09), transparent 28%),
    linear-gradient(180deg, #f7fbfa 0%, #eef7f5 100%);
}

.public-client-setup .guided-panel.media-drop-active .guided-chat-card::after {
  content: attr(data-drop-label);
  position: absolute;
  inset: 14px;
  z-index: 30;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(20, 184, 166, 0.72);
  border-radius: 22px;
  color: #0f766e;
  background: rgba(240, 253, 250, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 18px 44px rgba(15, 118, 110, 0.16);
  font-size: 14px;
  font-weight: 950;
  pointer-events: none;
}

.public-client-setup .luma-coach-card {
  margin: 12px 16px 0;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 10%, rgba(20, 184, 166, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 253, 250, 0.88));
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.public-client-setup .luma-coach-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.public-client-setup .luma-coach-top span,
.public-client-setup .luma-coach-top em {
  border-radius: 999px;
  padding: 4px 7px;
  color: #0f766e;
  background: rgba(20, 184, 166, 0.1);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.public-client-setup .luma-coach-top strong {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-client-setup .luma-coach-card p {
  margin: 8px 0 0;
  color: #475467;
  font-size: 12px;
  line-height: 1.45;
}

.public-client-setup .luma-coach-template {
  margin-top: 8px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.public-client-setup .luma-coach-template strong {
  color: #0f766e;
}

.public-client-setup .luma-coach-next {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.public-client-setup .luma-coach-next small {
  color: #0f766e;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.public-client-setup .luma-coach-next span {
  color: #111827;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.public-client-setup .luma-coach-examples {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.public-client-setup .luma-coach-examples button {
  flex: 0 0 auto;
  min-height: 28px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 999px;
  padding: 5px 9px;
  color: #0f766e;
  background: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.public-client-setup .live-site-preview-card {
  flex: 0 0 auto;
  margin: 10px 16px 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(99, 102, 241, 0.07)),
    #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.public-client-setup .guided-live-stage .live-site-preview-card {
  width: 100%;
  margin: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-client-setup .live-preview-page {
  min-height: 1180px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.13);
}

.public-client-setup .live-preview-rendered {
  min-height: 1180px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.13);
}

.public-client-setup .live-preview-rendered .rendered-site {
  min-height: 1180px;
  box-shadow: none;
}

.public-client-setup .live-preview-rendered .rendered-page-switcher,
.public-client-setup .live-preview-rendered .studio-floating-catalog {
  display: none;
}

.public-client-setup .live-preview-rendered .rendered-nav {
  position: sticky;
  top: 0;
  z-index: 4;
}

.public-client-setup .neutral-live-workspace {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  padding: clamp(28px, 5vw, 72px);
  background:
    radial-gradient(circle at 72% 22%, rgba(20, 184, 166, 0.18), transparent 28%),
    linear-gradient(135deg, #f8fffc, #eef6ff 58%, #f7f4ff);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.12);
}

.public-client-setup .neutral-live-orbit {
  position: absolute;
  inset: auto clamp(28px, 7vw, 92px) clamp(40px, 8vw, 120px) auto;
  width: clamp(220px, 28vw, 430px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.22), rgba(37, 99, 235, 0.1) 42%, transparent 68%);
  filter: blur(0.2px);
}

.public-client-setup .neutral-live-orbit span {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: inherit;
}

.public-client-setup .neutral-live-orbit span:nth-child(2) {
  inset: 25%;
}

.public-client-setup .neutral-live-orbit span:nth-child(3) {
  inset: 39%;
  background: rgba(255, 255, 255, 0.42);
}

.public-client-setup .neutral-live-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.public-client-setup .neutral-live-copy > span {
  display: inline-flex;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 999px;
  padding: 7px 11px;
  color: #0f766e;
  background: rgba(240, 253, 250, 0.86);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.public-client-setup .neutral-live-copy h2 {
  max-width: 720px;
  margin: 22px 0 0;
  color: #101828;
  font-size: clamp(42px, 5.2vw, 82px);
  line-height: 0.96;
  letter-spacing: 0;
}

.public-client-setup .neutral-live-copy p {
  max-width: 620px;
  margin: 22px 0 0;
  color: #475467;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.6;
}

.public-client-setup .neutral-live-steps {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 760px;
  gap: 12px;
  margin-top: clamp(34px, 5vw, 72px);
}

.public-client-setup .neutral-live-steps article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
}

.public-client-setup .neutral-live-steps article.active {
  border-color: rgba(15, 118, 110, 0.26);
  background: rgba(240, 253, 250, 0.82);
}

.public-client-setup .neutral-live-steps b {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  color: #0f766e;
  background: rgba(20, 184, 166, 0.12);
  font-size: 13px;
}

.public-client-setup .neutral-live-steps strong {
  display: block;
  color: #101828;
  font-size: 14px;
}

.public-client-setup .neutral-live-steps span {
  display: block;
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
}

.public-client-setup .live-page-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 74px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding: 0 clamp(18px, 3vw, 38px);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.public-client-setup .live-page-header strong {
  color: #101828;
  font-size: 18px;
  font-weight: 950;
}

.public-client-setup .live-page-header nav {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 2vw, 26px);
  overflow: hidden;
}

.public-client-setup .live-page-header nav span {
  color: #475467;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.public-client-setup .live-page-header button,
.public-client-setup .live-page-actions button {
  border: 0;
  border-radius: 999px;
  padding: 11px 16px;
  color: #062f2c;
  background: #99f6e4;
  font-size: 12px;
  font-weight: 950;
}

.public-client-setup .live-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 42%);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
  min-height: 560px;
  padding: clamp(42px, 6vw, 86px) clamp(24px, 5vw, 70px);
  color: #ffffff;
  background: linear-gradient(135deg, #020617, #111827 55%, #134e4a);
}

.public-client-setup .live-page-hero-copy em {
  display: inline-flex;
  border-radius: 999px;
  padding: 7px 10px;
  color: #99f6e4;
  background: rgba(20, 184, 166, 0.14);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.public-client-setup .live-page-hero-copy h1 {
  max-width: 780px;
  margin: 18px 0 0;
  color: #ffffff;
  font-size: clamp(46px, 6vw, 92px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.94;
}

.public-client-setup .live-page-hero-copy p {
  max-width: 680px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.55;
}

.public-client-setup .live-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.public-client-setup .live-page-actions span {
  max-width: 420px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 800;
}

.public-client-setup .live-page-visual {
  min-height: 380px;
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(circle at 68% 28%, rgba(45, 212, 191, 0.8), transparent 34%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.35), rgba(124, 58, 237, 0.28));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 28px 74px rgba(0, 0, 0, 0.24);
}

.public-client-setup .live-page-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  mix-blend-mode: screen;
}

.public-client-setup .live-page-search,
.public-client-setup .live-page-rail,
.public-client-setup .live-page-lookbook,
.public-client-setup .live-page-menu,
.public-client-setup .live-page-proof-row,
.public-client-setup .live-page-premium-strip,
.public-client-setup .live-page-section,
.public-client-setup .live-page-proof {
  margin: 0;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 5vw, 70px);
}

.public-client-setup .live-page-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
}

.public-client-setup .live-page-search span {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  padding: 14px 18px;
  color: #667085;
  background: #ffffff;
  font-size: 14px;
  font-weight: 850;
}

.public-client-setup .live-page-search b {
  border-radius: 999px;
  padding: 11px 15px;
  color: #713f12;
  background: #fef3c7;
  font-size: 12px;
  font-weight: 950;
}

.public-client-setup .live-page-rail,
.public-client-setup .live-page-lookbook,
.public-client-setup .live-page-menu,
.public-client-setup .live-page-proof-row,
.public-client-setup .live-page-premium-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.public-client-setup .live-page-rail span,
.public-client-setup .live-page-lookbook span,
.public-client-setup .live-page-menu span,
.public-client-setup .live-page-proof-row span,
.public-client-setup .live-page-premium-strip span {
  min-height: 120px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  padding: 18px;
  color: #344054;
  background: #ffffff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.public-client-setup .live-page-lookbook span:nth-child(odd) {
  min-height: 190px;
  background: linear-gradient(135deg, #fff7ed, #fce7f3);
}

.public-client-setup .live-page-section-head span {
  color: #0f766e;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.public-client-setup .live-page-section-head h2 {
  max-width: 780px;
  margin: 8px 0 24px;
  color: #101828;
  font-size: clamp(30px, 3.2vw, 54px);
  line-height: 1;
}

.public-client-setup .live-page-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.public-client-setup .live-page-card-grid article {
  min-height: 180px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  padding: 20px;
  background: #f8fafc;
}

.public-client-setup .live-page-card-grid i {
  display: block;
  color: #0f766e;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.public-client-setup .live-page-card-grid strong {
  display: block;
  margin-top: 14px;
  color: #101828;
  font-size: 18px;
  line-height: 1.2;
}

.public-client-setup .live-page-card-grid span {
  display: block;
  margin-top: 12px;
  color: #667085;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.public-client-setup .live-page-proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  background: #101828;
}

.public-client-setup .live-page-proof div {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 20px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.public-client-setup .live-page-proof span {
  display: block;
  color: #99f6e4;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.public-client-setup .live-page-proof strong {
  display: block;
  margin-top: 8px;
  font-size: 17px;
}

.public-client-setup .live-page-footer {
  padding: 22px clamp(24px, 5vw, 70px);
  color: #667085;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 850;
}

.public-client-setup .live-template-fashion .live-page-hero {
  background: linear-gradient(135deg, #140f1f, #3b1636 55%, #111827);
}

.public-client-setup .live-template-marketplace .live-page-hero {
  grid-template-columns: minmax(0, 0.88fr) minmax(340px, 1.12fr);
  min-height: 500px;
  background:
    radial-gradient(circle at 78% 28%, rgba(251, 191, 36, 0.28), transparent 28%),
    linear-gradient(135deg, #111827, #1f2937 46%, #78350f);
}

.public-client-setup .live-template-marketplace .live-page-hero-copy h1 {
  max-width: 620px;
  font-size: clamp(38px, 4.2vw, 72px);
  line-height: 0.98;
}

.public-client-setup .live-template-marketplace .live-page-hero-copy p {
  max-width: 590px;
}

.public-client-setup .live-template-marketplace .live-page-visual {
  position: relative;
  min-height: 420px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.96)),
    #ffffff;
  box-shadow: 0 34px 90px rgba(2, 6, 23, 0.32);
}

.public-client-setup .live-template-marketplace .live-page-visual::before {
  content: "Search • categories • deals";
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 1;
  border-radius: 999px;
  padding: 14px 18px;
  color: #475467;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  font-size: 13px;
  font-weight: 950;
}

.public-client-setup .live-template-marketplace .live-page-visual::after {
  content: "";
  position: absolute;
  inset: 84px 18px 18px;
  z-index: 1;
  border-radius: 20px;
  background:
    linear-gradient(90deg, #fde68a 0 31%, transparent 31% 34%, #bae6fd 34% 65%, transparent 65% 68%, #ddd6fe 68%),
    linear-gradient(180deg, transparent 0 44%, rgba(15, 23, 42, 0.08) 44% 45%, transparent 45%);
  background-size: 100% 48%, 100% 100%;
  background-repeat: repeat-y;
  opacity: 0.9;
}

.public-client-setup .live-template-marketplace .live-page-visual img {
  display: none;
}

.public-client-setup .live-template-marketplace .live-page-search {
  background: #fff7ed;
}

.public-client-setup .live-template-marketplace .live-page-rail {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #ffffff;
}

.public-client-setup .live-template-marketplace .live-page-rail span {
  min-height: 100px;
  border-color: rgba(245, 158, 11, 0.18);
  background:
    radial-gradient(circle at 82% 20%, rgba(251, 191, 36, 0.35), transparent 24%),
    #fffaf0;
}

.public-client-setup .live-template-marketplace .live-page-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-client-setup .live-template-marketplace .live-page-card-grid article {
  min-height: 160px;
  border-radius: 16px;
  background: #ffffff;
}

.public-client-setup .live-template-restaurant .live-page-hero {
  background: linear-gradient(135deg, #2f1608, #713f12 52%, #111827);
}

.public-client-setup .live-template-service .live-page-hero {
  background: linear-gradient(135deg, #071b2f, #0f766e 52%, #172554);
}

.public-client-setup .live-preview-browser {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.public-client-setup .guided-live-stage .live-preview-browser {
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(16px, 2.6vw, 32px);
}

.public-client-setup .live-preview-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #667085;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.public-client-setup .live-preview-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding-bottom: 12px;
}

.public-client-setup .live-preview-nav strong {
  color: #101828;
  font-size: 16px;
  font-weight: 950;
}

.public-client-setup .live-preview-nav span {
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  font-weight: 850;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-client-setup .live-preview-dots {
  display: flex;
  gap: 4px;
}

.public-client-setup .live-preview-dots i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d0d5dd;
}

.public-client-setup .live-preview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 12px;
  align-items: center;
  border-radius: 14px;
  padding: 12px;
  background: #101827;
  color: #ffffff;
}

.public-client-setup .guided-live-stage .live-preview-hero {
  min-height: clamp(280px, 36vh, 460px);
  grid-template-columns: minmax(0, 1fr) minmax(220px, 36%);
  gap: clamp(16px, 3vw, 34px);
  align-items: stretch;
  border-radius: 24px;
  padding: clamp(22px, 3vw, 40px);
  background:
    radial-gradient(circle at 82% 20%, rgba(45, 212, 191, 0.34), transparent 26%),
    radial-gradient(circle at 18% 92%, rgba(124, 58, 237, 0.26), transparent 28%),
    linear-gradient(135deg, #08111f, #15223b 50%, #102f35);
}

.public-client-setup .live-preview-hero strong {
  display: block;
  font-size: 17px;
  line-height: 1.05;
}

.public-client-setup .live-preview-hero em {
  display: inline-flex;
  margin-bottom: 12px;
  border-radius: 999px;
  padding: 6px 9px;
  color: #99f6e4;
  background: rgba(20, 184, 166, 0.14);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.public-client-setup .live-preview-hero button {
  margin-top: 18px;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  color: #062f2c;
  background: #99f6e4;
  font-size: 12px;
  font-weight: 950;
}

.public-client-setup .guided-live-stage .live-preview-hero strong {
  max-width: 720px;
  font-size: clamp(34px, 4.8vw, 74px);
}

.public-client-setup .live-preview-hero span {
  display: block;
  margin-top: 5px;
  color: #c9d7e6;
  font-size: 11px;
  line-height: 1.35;
}

.public-client-setup .guided-live-stage .live-preview-hero span {
  max-width: 620px;
  margin-top: 14px;
  font-size: clamp(13px, 1.2vw, 18px);
  line-height: 1.48;
}

.public-client-setup .live-preview-visual {
  height: 76px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 68% 28%, rgba(45, 212, 191, 0.8), transparent 34%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.35), rgba(124, 58, 237, 0.28));
}

.public-client-setup .live-preview-visual img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  opacity: 0.88;
  mix-blend-mode: screen;
}

.public-client-setup .guided-live-stage .live-preview-visual {
  height: auto;
  min-height: 230px;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 26px 70px rgba(0, 0, 0, 0.18);
}

.public-client-setup .live-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.public-client-setup .live-preview-grid span {
  min-height: 42px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 10px;
  padding: 8px;
  color: #344054;
  background: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
}

.public-client-setup .live-preview-grid span b {
  display: block;
  margin-bottom: 8px;
  color: #0f766e;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.public-client-setup .live-preview-search,
.public-client-setup .live-preview-rail,
.public-client-setup .live-preview-lookbook,
.public-client-setup .live-preview-menu,
.public-client-setup .live-preview-proof,
.public-client-setup .live-preview-premium-strip {
  display: grid;
  gap: 10px;
}

.public-client-setup .live-preview-search {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  padding: 10px 12px;
  background: #ffffff;
}

.public-client-setup .live-preview-search span {
  color: #667085;
  font-size: 12px;
  font-weight: 850;
}

.public-client-setup .live-preview-search b {
  border-radius: 999px;
  padding: 7px 10px;
  color: #713f12;
  background: #fef3c7;
  font-size: 11px;
  font-weight: 950;
}

.public-client-setup .live-preview-rail,
.public-client-setup .live-preview-lookbook,
.public-client-setup .live-preview-menu,
.public-client-setup .live-preview-proof,
.public-client-setup .live-preview-premium-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-client-setup .live-preview-rail span,
.public-client-setup .live-preview-lookbook span,
.public-client-setup .live-preview-menu span,
.public-client-setup .live-preview-proof span,
.public-client-setup .live-preview-premium-strip span {
  min-height: 74px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 12px;
  color: #344054;
  background: #ffffff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.public-client-setup .live-preview-menu span {
  display: grid;
  gap: 8px;
}

.public-client-setup .live-preview-menu em {
  color: #b45309;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.public-client-setup .live-template-marketplace .live-preview-hero {
  min-height: 300px;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
  background: linear-gradient(135deg, #111827, #1f2937 52%, #78350f);
}

.public-client-setup .live-template-marketplace .live-preview-grid,
.public-client-setup .live-template-listings .live-preview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-client-setup .live-template-fashion .live-preview-hero {
  grid-template-columns: minmax(0, 0.76fr) minmax(260px, 1.24fr);
  background: linear-gradient(135deg, #140f1f, #3b1636 55%, #111827);
}

.public-client-setup .live-template-fashion .live-preview-lookbook span:nth-child(odd) {
  min-height: 118px;
  background: linear-gradient(135deg, #fff7ed, #fce7f3);
}

.public-client-setup .live-template-restaurant .live-preview-hero {
  background: linear-gradient(135deg, #2f1608, #713f12 52%, #111827);
}

.public-client-setup .live-template-service .live-preview-hero {
  background: linear-gradient(135deg, #071b2f, #0f766e 52%, #172554);
}

.public-client-setup .live-template-premium .live-preview-hero {
  justify-items: center;
  text-align: center;
  background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.18), transparent 22%), linear-gradient(135deg, #020617, #111827 55%, #312e81);
}

.public-client-setup .guided-live-stage .live-preview-grid {
  gap: clamp(10px, 1.4vw, 18px);
}

.public-client-setup .guided-live-stage .live-preview-grid span {
  min-height: 96px;
  border-radius: 18px;
  padding: clamp(14px, 1.5vw, 20px);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.35;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.public-client-setup .live-preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #667085;
  font-size: 10px;
  font-weight: 850;
}

.public-client-setup .live-preview-footer b {
  border-radius: 999px;
  padding: 6px 9px;
  color: #063b36;
  background: #ccfbf1;
}

.public-client-setup .guided-live-stage .live-preview-footer {
  font-size: 12px;
}

.public-client-setup .guided-live-stage .live-preview-footer b {
  padding: 9px 13px;
}

.public-client-setup .site-plan-card {
  justify-self: start;
  width: min(100%, 720px);
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 20px;
  background: #ffffff;
  padding: 13px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1);
}

.public-client-setup .site-plan-card.approved {
  border-color: rgba(15, 118, 110, 0.42);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12), 0 18px 44px rgba(15, 23, 42, 0.1);
}

.public-client-setup .site-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.public-client-setup .site-plan-head span {
  display: block;
  color: #0f766e;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.public-client-setup .site-plan-head strong {
  display: block;
  margin-top: 3px;
  color: #101828;
  font-size: 14px;
  font-weight: 950;
}

.public-client-setup .site-plan-head em {
  max-width: 190px;
  border-radius: 999px;
  padding: 5px 8px;
  color: #475467;
  background: #f2f4f7;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  text-align: right;
}

.public-client-setup .site-plan-card > p {
  margin: 9px 0 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.4;
}

.public-client-setup .site-plan-pages {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.public-client-setup .site-plan-pages article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  padding: 9px;
  background: #f8fafc;
}

.public-client-setup .site-plan-pages b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 10px;
  color: #ffffff;
  background: #0f766e;
  font-size: 12px;
}

.public-client-setup .site-plan-pages strong,
.public-client-setup .site-plan-pages span,
.public-client-setup .site-plan-pages small {
  display: block;
}

.public-client-setup .site-plan-pages strong {
  color: #101828;
  font-size: 12px;
  font-weight: 950;
}

.public-client-setup .site-plan-pages span {
  margin-top: 3px;
  color: #475467;
  font-size: 11px;
  line-height: 1.35;
}

.public-client-setup .site-plan-pages small {
  margin-top: 5px;
  color: #0f766e;
  font-size: 10px;
  font-weight: 850;
}

.public-client-setup .site-plan-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.public-client-setup .site-plan-actions button {
  min-height: 32px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 999px;
  padding: 7px 11px;
  color: #0f766e;
  background: rgba(20, 184, 166, 0.08);
  font-size: 12px;
  font-weight: 950;
}

.public-client-setup .site-plan-actions button:first-child {
  border-color: transparent;
  color: #ffffff;
  background: #0f766e;
}

.public-client-setup .luma-ready-card {
  display: grid;
  justify-self: start;
  gap: 12px;
  width: min(100%, 720px);
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 22px;
  padding: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(240, 253, 250, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.public-client-setup .luma-ready-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.public-client-setup .luma-ready-head span {
  color: #0f766e;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.public-client-setup .luma-ready-head strong {
  color: #101828;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.05;
  text-align: right;
}

.public-client-setup .luma-ready-card p {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.45;
}

.public-client-setup .luma-ready-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.public-client-setup .luma-ready-points span {
  border-radius: 999px;
  padding: 7px 10px;
  color: #0f766e;
  background: rgba(20, 184, 166, 0.12);
  font-size: 11px;
  font-weight: 900;
}

.public-client-setup .luma-ready-actions {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) minmax(120px, 0.8fr) minmax(140px, 1fr);
  gap: 8px;
}

.public-client-setup .luma-ready-actions button {
  min-height: 42px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 999px;
  padding: 10px 14px;
  color: #0f172a;
  background: #ffffff;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.public-client-setup .luma-ready-actions [data-chat-generate] {
  color: #ffffff;
  background: #0f8f78;
  box-shadow: 0 12px 26px rgba(15, 143, 120, 0.22);
}

.public-client-setup.ready-chat-mode .chat-status-card {
  border-color: rgba(15, 118, 110, 0.2);
  background: rgba(240, 253, 250, 0.78);
}

.public-client-setup .guided-chat {
  flex: 1 1 auto;
  align-content: start;
  gap: 12px;
  max-height: none;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 16px 12px;
  scroll-behavior: smooth;
}

.public-client-setup .guided-chat {
  display: grid;
  grid-auto-rows: max-content;
}

.public-client-setup .guided-chat-card,
.public-client-setup .guided-chat,
.public-client-setup .chat-message,
.public-client-setup .chat-message span,
.public-client-setup .site-plan-card,
.public-client-setup .luma-ready-card,
.public-client-setup .chat-understanding-card,
.public-client-setup .template-choice-panel,
.public-client-setup .luma-coach-card,
.public-client-setup .luma-ready-actions button,
.public-client-setup .site-plan-pages article {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.public-client-setup .chat-message {
  width: fit-content;
  max-width: min(82%, 620px);
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.public-client-setup .chat-message.assistant,
.public-client-setup .chat-message.system {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: flex-start;
  justify-self: start;
  width: min(100%, 680px);
  max-width: min(92%, 680px);
}

.public-client-setup .chat-message span {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 11px 13px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px 18px 18px 6px;
  color: #111827;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  font-size: 14px;
  line-height: 1.45;
}

.public-client-setup .chat-message.user {
  justify-self: end;
  display: block;
  max-width: min(78%, 560px);
  padding: 11px 13px;
  border-radius: 18px 18px 6px 18px;
  color: #ffffff;
  background: linear-gradient(135deg, #0f8f78, #14b8a6);
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.18);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
}

.public-client-setup .chat-message .assistant-avatar.tiny {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 8px 14px rgba(20, 184, 166, 0.22));
}

.public-client-setup .guided-thinking {
  flex: 0 0 auto;
  width: fit-content;
  margin: 0 16px 8px;
  padding: 8px 10px;
  border-radius: 999px;
  color: #667085;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.public-client-setup .guided-thinking.active span::after {
  width: 18px;
}

.public-client-setup .chat-status-card {
  flex: 0 0 auto;
  margin: 0 16px 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.public-client-setup .chat-status-card > div {
  min-width: 0;
}

.public-client-setup .chat-status-card strong {
  max-width: 210px;
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-client-setup .chat-status-card span {
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
}

.public-client-setup #reviewDetailsButton {
  min-height: 30px;
  border-radius: 999px;
  padding: 7px 10px;
  color: #0f766e;
  background: rgba(20, 184, 166, 0.09);
  font-size: 12px;
  font-weight: 900;
}

.public-client-setup .quick-chip-row {
  flex: 0 0 auto;
  padding: 0 16px 8px;
  gap: 7px;
}

.public-client-setup .quick-chip-row button {
  min-height: 30px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}

.public-client-setup .hidden-helper-actions {
  display: none !important;
}

.public-client-setup .chat-composer {
  flex: 0 0 auto;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}

.public-client-setup .chat-input-label {
  margin: 0;
}

.public-client-setup .chat-input-label input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 0 14px;
  color: #101827;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.public-client-setup .chat-input-label input:focus {
  border-color: rgba(20, 184, 166, 0.48);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12);
}

.public-client-setup .guided-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.public-client-setup #guidedSkipButton,
.public-client-setup #switchManualFormButton {
  display: none !important;
}

.public-client-setup #guidedSendButton {
  border: 0;
  color: #ffffff;
  background: #0f766e;
  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.22);
}

.public-client-setup #guidedMicButton {
  border-color: rgba(15, 23, 42, 0.08);
  color: #344054;
  background: #ffffff;
}

.public-client-setup #guidedMicButton.listening {
  animation: luma-listening 1.1s ease-in-out infinite;
}

.public-client-setup .text-action {
  width: auto;
  min-height: 0;
  border: 0;
  padding: 0 3px;
  color: #667085;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  font-weight: 900;
}

.public-client-setup #switchManualFormButton::before {
  content: "";
}

.public-client-setup #switchManualFormButton {
  max-width: 98px;
  text-align: left;
}

.public-client-setup #voiceStatusText {
  margin: -8px 16px 8px;
  min-height: 14px;
  color: #0f766e;
  font-size: 11px;
  font-weight: 800;
}

.public-client-setup .summary-panel {
  display: none;
  background: #ffffff;
}

.public-client-setup .guided-panel.active {
  display: grid;
}

.public-client-setup.review-details-open .guided-shell,
.public-client-setup.final-review-mode .guided-shell {
  width: min(1440px, calc(100% - 28px));
}

.public-client-setup.review-details-open .guided-layout,
.public-client-setup.final-review-mode .guided-layout {
  display: grid;
}

.public-client-setup.review-details-open .summary-panel {
  position: absolute;
  inset: 76px 12px 12px;
  z-index: 5;
  display: block;
  max-height: none;
  overflow: auto;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 22px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow: 0 20px 70px rgba(15, 23, 42, 0.22);
}

.public-client-setup.final-review-mode .guided-chat-card {
  display: flex;
}

.public-client-setup.final-review-mode .summary-panel {
  display: none;
}

.public-client-setup .summary-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.public-client-setup .summary-head {
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.public-client-setup .summary-head h2 {
  margin: 0;
  color: #101827;
  font-size: 20px;
  letter-spacing: 0;
}

.public-client-setup .summary-head p {
  max-width: 360px;
  margin: 5px 0 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.45;
}

.public-client-setup .guided-brief-review {
  display: grid;
  gap: 12px;
}

.public-client-setup .brief-ready-card {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 20px;
  padding: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.22), transparent 38%),
    linear-gradient(135deg, rgba(240, 253, 250, 0.96), rgba(255, 255, 255, 0.95));
}

.public-client-setup .brief-ready-card span {
  color: #0f766e;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.public-client-setup .brief-ready-card strong {
  color: #101828;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.1;
}

.public-client-setup .brief-ready-card p {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.45;
}

.public-client-setup .brief-chip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.public-client-setup .brief-chip-grid article {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 12px;
  background: rgba(248, 250, 252, 0.86);
}

.public-client-setup .brief-chip-grid article span {
  color: #667085;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.public-client-setup .brief-chip-grid article strong {
  color: #101828;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.public-client-setup .ai-build-card {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 22px;
  padding: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.24), transparent 36%),
    linear-gradient(145deg, #f0fdfa, #ffffff 62%);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.public-client-setup .ai-build-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.public-client-setup .ai-build-card-head span,
.public-client-setup .ai-build-reason b,
.public-client-setup .ai-build-grid span {
  color: #0f766e;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.public-client-setup .ai-build-card-head strong {
  color: #101828;
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  text-align: right;
}

.public-client-setup .ai-build-card p,
.public-client-setup .ai-build-reason span,
.public-client-setup .ai-build-focus span,
.public-client-setup .ai-build-pages article span {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.45;
}

.public-client-setup .ai-build-reason {
  display: grid;
  gap: 5px;
  border-radius: 16px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
}

.public-client-setup .ai-build-focus {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 15px;
  background: #101828;
}

.public-client-setup .ai-build-focus strong {
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.15;
}

.public-client-setup .ai-build-focus span {
  color: rgba(255, 255, 255, 0.72);
}

.public-client-setup .ai-build-pages {
  display: grid;
  gap: 8px;
}

.public-client-setup .ai-build-pages article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 12px;
  background: rgba(248, 250, 252, 0.92);
}

.public-client-setup .ai-build-pages article b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #064e3b;
  background: #99f6e4;
  font-size: 12px;
  font-weight: 950;
}

.public-client-setup .ai-build-pages article strong {
  display: block;
  color: #101828;
  font-size: 14px;
  font-weight: 950;
}

.public-client-setup .ai-build-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.public-client-setup .ai-build-grid section {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 12px;
  background: #ffffff;
}

.public-client-setup .ai-build-grid strong {
  color: #344054;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.public-client-setup .summary-asset-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.public-client-setup .summary-asset-actions #editDetailsButton {
  grid-column: 1 / -1;
  justify-self: center;
  color: #0f766e;
  font-weight: 950;
}

.public-client-setup .mobile-review-details {
  display: block;
}

.public-client-setup.final-review-mode:not(.review-details-open) .mobile-review-details {
  display: none;
}

.public-client-setup.review-details-open .guided-brief-review,
.public-client-setup.review-details-open .summary-asset-actions {
  display: none;
}

.public-client-setup .mobile-review-details summary {
  display: none;
}

.public-client-setup .summary-grid label {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  color: #475467;
  background: rgba(248, 250, 252, 0.86);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.public-client-setup .summary-grid input,
.public-client-setup .summary-grid textarea {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 0;
  color: #101827;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}

.public-client-setup .summary-grid textarea {
  min-height: 54px;
  resize: vertical;
}

.public-client-setup .summary-grid input:focus,
.public-client-setup .summary-grid textarea:focus {
  outline: 0;
  box-shadow: 0 2px 0 rgba(20, 184, 166, 0.45);
}

.public-client-setup .asset-preview-row {
  margin: 12px 0;
}

.public-client-setup #keepChattingButton {
  border-radius: 999px;
  margin-top: 8px;
}

.public-client-setup #guidedGenerateButton {
  border-radius: 999px;
}

.public-client-setup.manual-form-open .manual-form-shell {
  width: min(760px, calc(100% - 28px));
  max-height: calc(100vh - 40px);
  margin: 20px auto;
  padding: 22px;
  display: block !important;
  overflow: auto;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.18);
}

.public-client-setup.manual-form-open .manual-form-shell .brand-row,
.public-client-setup.manual-form-open .manual-form-shell .intake-mode-tabs,
.public-client-setup.manual-form-open .manual-form-shell .language-control {
  display: none !important;
}

.public-client-setup.manual-form-open .manual-form-shell .intake-form {
  display: grid;
  gap: 14px;
}

.public-client-setup.manual-form-open .guided-panel {
  display: none !important;
}

@media (max-width: 760px) {
  .public-client-setup .guided-panel {
    padding: 0;
  }

  .public-client-setup .guided-shell {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  .public-client-setup .guided-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 8px;
  }

  .public-client-setup .assistant-identity {
    min-width: 0;
    gap: 8px;
  }

  .public-client-setup .assistant-identity > div {
    min-width: 0;
  }

  .public-client-setup .assistant-identity strong,
  .public-client-setup .assistant-identity span,
  .public-client-setup .assistant-identity em {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .public-client-setup .assistant-avatar.large {
    width: 64px;
    height: 64px;
    border-radius: 0;
  }

  .public-client-setup .guided-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding-right: 0;
  }

  .public-client-setup .compact-action {
    max-width: 112px;
    padding: 7px 9px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .public-client-setup .client-account-button {
    max-width: 148px;
  }

  .public-client-setup .compact-language {
    max-width: none;
  }

  .public-client-setup .compact-language::before {
    display: none;
  }

  .public-client-setup .compact-language select {
    width: 58px;
    min-height: 32px;
    padding: 6px;
    font-size: 11px;
  }

  .public-client-setup .icon-button,
  .public-client-setup .icon-only {
    width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .public-client-setup .guided-layout {
    height: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }

  .public-client-setup .guided-live-stage {
    display: none;
  }

  .public-client-setup .live-stage-header {
    display: none;
  }

  .public-client-setup .live-preview-page {
    min-height: 0;
    border-radius: 18px;
  }

  .public-client-setup .live-preview-rendered,
  .public-client-setup .live-preview-rendered .rendered-site {
    min-height: 190px;
    max-height: 190px;
    border-radius: 18px;
    overflow: hidden;
  }

  .public-client-setup .neutral-live-workspace {
    min-height: 176px;
    max-height: 176px;
    border-radius: 18px;
    padding: 16px;
    overflow: hidden;
  }

  .public-client-setup .neutral-live-orbit {
    right: -40px;
    bottom: -70px;
    width: 220px;
    opacity: 0.76;
  }

  .public-client-setup .neutral-live-copy h2 {
    max-width: 290px;
    font-size: 24px;
  }

  .public-client-setup .neutral-live-copy p {
    max-width: 300px;
    font-size: 12px;
  }

  .public-client-setup .neutral-live-steps {
    display: none;
  }

  .public-client-setup .guided-chat-card {
    width: 100%;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-left: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.08);
  }

  .public-client-setup .guided-header {
    min-height: 58px;
    padding: 8px 10px;
  }

  .public-client-setup .assistant-identity {
    min-width: 0;
    gap: 8px;
  }

  .public-client-setup .assistant-identity .assistant-avatar.large {
    width: 42px;
    height: 42px;
  }

  .public-client-setup .assistant-identity strong {
    font-size: 15px;
  }

  .public-client-setup .assistant-identity span,
  .public-client-setup .assistant-identity em {
    font-size: 11px;
  }

  .public-client-setup .luma-coach-card {
    margin: 8px 10px 0;
    padding: 10px;
    border-radius: 14px;
  }

  .public-client-setup .luma-coach-card p,
  .public-client-setup .luma-coach-template {
    display: none;
  }

  .public-client-setup .luma-coach-next {
    margin-top: 8px;
    padding: 8px;
  }

  .public-client-setup .luma-coach-examples {
    margin-top: 8px;
    gap: 8px;
  }

  .public-client-setup .guided-chat {
    min-height: 0;
    padding: 12px 10px 8px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .public-client-setup .chat-message {
    width: auto;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 16px;
  }

  .public-client-setup .chat-message.assistant,
  .public-client-setup .chat-message.system {
    grid-template-columns: 34px minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    gap: 7px;
  }

  .public-client-setup .chat-message span,
  .public-client-setup .chat-message.user {
    font-size: 16px;
    line-height: 1.45;
  }

  .public-client-setup .chat-message span {
    width: auto;
    max-width: min(88vw, 100%);
    padding: 12px 14px;
  }

  .public-client-setup .chat-message.user {
    max-width: 88%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .public-client-setup .chat-message .assistant-avatar.tiny {
    width: 32px;
    height: 32px;
    margin-top: 2px;
  }

  .public-client-setup .luma-ready-actions {
    grid-template-columns: 1fr;
  }

  .public-client-setup .luma-ready-head {
    display: grid;
  }

  .public-client-setup .luma-ready-head strong {
    text-align: left;
  }

  .public-client-setup .luma-ready-card,
  .public-client-setup .site-plan-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 18px;
    padding: 14px;
  }

  .public-client-setup .luma-ready-points {
    grid-template-columns: 1fr;
  }

  .public-client-setup .chat-composer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  }

  .public-client-setup .chat-input-label input {
    min-height: 48px;
    border-radius: 18px;
    font-size: 16px;
  }

  .public-client-setup .guided-actions {
    display: grid;
    grid-template-columns: 42px 42px;
    justify-content: end;
    width: auto;
    min-width: 90px;
  }

  .public-client-setup .guided-actions .text-action {
    max-width: none;
    font-size: 11px;
  }

  .public-client-setup #guidedMicButton {
    order: 1;
  }

  .public-client-setup #guidedSendButton {
    order: 2;
  }

  .public-client-setup #guidedSkipButton,
  .public-client-setup #switchManualFormButton {
    display: none !important;
  }

  .public-client-setup .live-preview-rendered .rendered-nav nav {
    display: none;
  }

  .public-client-setup .live-preview-rendered .rendered-nav {
    min-height: 52px;
    padding: 0 14px;
  }

  .public-client-setup .live-preview-rendered .rendered-site section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .public-client-setup .live-page-header {
    min-height: 48px;
    grid-template-columns: 1fr auto;
    padding: 0 12px;
  }

  .public-client-setup .live-page-header nav {
    display: none;
  }

  .public-client-setup .live-page-header button {
    min-height: 30px;
    padding: 7px 10px;
    font-size: 10px;
  }

  .public-client-setup .live-page-hero {
    min-height: 190px;
    grid-template-columns: 1fr 96px;
    gap: 12px;
    padding: 16px;
  }

  .public-client-setup .live-page-hero-copy h1 {
    font-size: 24px;
  }

  .public-client-setup .live-page-hero-copy p,
  .public-client-setup .live-page-actions span,
  .public-client-setup .live-page-hero-copy em,
  .public-client-setup .live-page-actions button {
    display: none;
  }

  .public-client-setup .live-page-visual {
    min-height: 110px;
    border-radius: 16px;
  }

  .public-client-setup .live-page-search,
  .public-client-setup .live-page-rail,
  .public-client-setup .live-page-lookbook,
  .public-client-setup .live-page-menu,
  .public-client-setup .live-page-proof-row,
  .public-client-setup .live-page-premium-strip,
  .public-client-setup .live-page-section,
  .public-client-setup .live-page-proof,
  .public-client-setup .live-page-footer {
    padding: 12px;
  }

  .public-client-setup .live-page-search,
  .public-client-setup .live-page-rail,
  .public-client-setup .live-page-lookbook,
  .public-client-setup .live-page-menu,
  .public-client-setup .live-page-proof-row,
  .public-client-setup .live-page-premium-strip,
  .public-client-setup .live-page-card-grid,
  .public-client-setup .live-page-proof {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .public-client-setup .live-page-card-grid article,
  .public-client-setup .live-page-rail span,
  .public-client-setup .live-page-lookbook span,
  .public-client-setup .live-page-menu span,
  .public-client-setup .live-page-proof-row span,
  .public-client-setup .live-page-premium-strip span {
    min-height: 72px;
    border-radius: 12px;
    padding: 10px;
    font-size: 10px;
  }

  .public-client-setup .live-page-section-head h2 {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .public-client-setup .guided-live-stage .live-site-preview-card {
    border-radius: 18px;
  }

  .public-client-setup .guided-live-stage .live-preview-browser {
    gap: 9px;
    padding: 10px;
  }

  .public-client-setup .guided-live-stage .live-preview-hero {
    min-height: 128px;
    grid-template-columns: minmax(0, 1fr) 92px;
    border-radius: 14px;
    padding: 12px;
  }

  .public-client-setup .guided-live-stage .live-preview-hero strong {
    font-size: 20px;
  }

  .public-client-setup .guided-live-stage .live-preview-hero span {
    margin-top: 5px;
    font-size: 11px;
  }

  .public-client-setup .guided-live-stage .live-preview-visual {
    min-height: 90px;
    border-radius: 12px;
  }

  .public-client-setup .guided-live-stage .live-preview-grid span {
    min-height: 42px;
    padding: 8px;
    font-size: 10px;
  }

  .public-client-setup .live-preview-nav {
    padding-bottom: 8px;
  }

  .public-client-setup .live-preview-nav span {
    display: none;
  }

  .public-client-setup .live-preview-hero button,
  .public-client-setup .live-preview-hero em,
  .public-client-setup .live-preview-search,
  .public-client-setup .live-preview-rail,
  .public-client-setup .live-preview-lookbook,
  .public-client-setup .live-preview-menu,
  .public-client-setup .live-preview-proof,
  .public-client-setup .live-preview-premium-strip {
    display: none;
  }

  .public-client-setup.review-details-open .guided-live-stage,
  .public-client-setup.final-review-mode .guided-live-stage {
    display: none;
  }

  .public-client-setup.review-details-open .guided-chat-card {
    display: none;
  }

  .public-client-setup.final-review-mode .guided-chat-card {
    display: flex;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .public-client-setup.review-details-open .guided-layout,
  .public-client-setup.final-review-mode .guided-layout {
    grid-template-rows: minmax(0, 1fr);
  }

  .public-client-setup.review-details-open .summary-panel,
  .public-client-setup.final-review-mode .summary-panel {
    position: static;
    grid-column: 1;
    grid-row: 1;
    display: block;
    height: 100%;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    padding: 14px;
  }

  .public-client-setup .ai-build-card-head {
    display: grid;
  }

  .public-client-setup .ai-build-card-head strong {
    text-align: left;
  }

  .public-client-setup .ai-build-grid {
    grid-template-columns: 1fr;
  }

  .public-client-setup .guided-progress {
    padding: 7px 12px 5px;
  }

  .public-client-setup .chat-status-card {
    margin: 0 12px 8px;
  }

  .public-client-setup .quick-chip-row {
    padding: 0 12px 8px;
  }

  .public-client-setup .chat-composer {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 9px 10px 10px;
  }

  .public-client-setup .guided-actions {
    display: flex;
    gap: 6px;
  }

  .public-client-setup #switchManualFormButton,
  .public-client-setup #guidedSkipButton {
    display: none;
  }
}

@keyframes luma-idle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes luma-listening {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.25);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(20, 184, 166, 0.12);
  }
}

@keyframes luma-talk {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.035);
  }
}

@keyframes luma-thinking {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  35% {
    transform: rotate(-2deg) translateY(-2px);
  }
  70% {
    transform: rotate(2deg) translateY(1px);
  }
}

@keyframes luma-alert {
  0%, 100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-2px);
  }
  70% {
    transform: translateX(2px);
  }
}

@keyframes luma-success {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.04);
  }
}

@keyframes assistantRing {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* KREATON client hardening: final override for mobile chat and generated preview. */
body.public-client-setup {
  max-width: 100%;
  overflow-x: hidden;
}

.public-client-setup,
.public-client-setup *,
.public-client-setup *::before,
.public-client-setup *::after {
  box-sizing: border-box;
}

.public-client-setup .guided-shell,
.public-client-setup .guided-layout,
.public-client-setup .guided-chat-card,
.public-client-setup .guided-chat,
.public-client-setup .chat-message,
.public-client-setup .chat-message span,
.public-client-setup .luma-ready-card,
.public-client-setup .chat-understanding-card,
.public-client-setup .site-plan-card,
.public-client-setup .chat-composer,
.public-client-setup .chat-input-label,
.public-client-setup .chat-input-label input {
  min-width: 0;
  max-width: 100%;
}

.public-client-setup .guided-chat {
  overflow-x: hidden;
}

.public-client-setup .chat-message.user {
  width: fit-content;
  max-width: min(78%, 560px);
}

.public-client-setup .chat-message.assistant span,
.public-client-setup .chat-message.system span {
  max-width: 100%;
}

.public-client-setup .chat-input-label input {
  width: 100%;
}

@media (max-width: 760px) {
  body.public-client-setup:not(.generated-preview-open) {
    height: 100dvh;
    overflow: hidden;
  }

  .public-client-setup:not(.generated-preview-open) .ai-shell,
  .public-client-setup:not(.generated-preview-open) .guided-panel {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  .public-client-setup:not(.generated-preview-open) .guided-shell {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .public-client-setup:not(.generated-preview-open) .guided-layout {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .public-client-setup:not(.generated-preview-open) .guided-chat-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .public-client-setup:not(.generated-preview-open) .guided-chat {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 10px 96px;
    -webkit-overflow-scrolling: touch;
  }

  .public-client-setup:not(.generated-preview-open) .chat-message {
    max-width: 100%;
  }

  .public-client-setup:not(.generated-preview-open) .chat-message.assistant,
  .public-client-setup:not(.generated-preview-open) .chat-message.system {
    grid-template-columns: 38px minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
  }

  .public-client-setup:not(.generated-preview-open) .chat-message .assistant-avatar.tiny {
    width: 36px;
    height: 36px;
  }

  .public-client-setup:not(.generated-preview-open) .chat-message span {
    width: auto;
    max-width: min(78vw, 100%);
    word-break: normal;
    overflow-wrap: break-word;
  }

  .public-client-setup:not(.generated-preview-open) .chat-message.user {
    width: fit-content;
    max-width: 78vw;
    margin-left: auto;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .public-client-setup:not(.generated-preview-open) .chat-composer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    padding: 10px 10px max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.08);
  }

  .public-client-setup:not(.generated-preview-open) .chat-input-label input {
    min-height: 48px;
    font-size: 16px;
  }

  .public-client-setup:not(.generated-preview-open) .guided-actions {
    grid-template-columns: 42px 42px;
    min-width: 90px;
  }

  .public-client-setup:not(.generated-preview-open) #guidedSendButton,
  .public-client-setup:not(.generated-preview-open) #guidedMicButton {
    width: 42px;
    height: 42px;
    min-height: 42px;
  }
}

@media (max-width: 720px) {
  .public-client-setup.generated-preview-open #previewFrame,
  .public-client-setup.generated-preview-open #previewFrame .rendered-site {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .public-client-setup.generated-preview-open #previewFrame .rendered-site {
    min-height: 100vh;
  }

  .public-client-setup.generated-preview-open .client-review-bar {
    gap: 10px;
    padding: 12px;
  }

  .public-client-setup.generated-preview-open .client-review-bar strong {
    font-size: 14px;
  }

  .public-client-setup.generated-preview-open .client-review-bar span {
    font-size: 12px;
  }
}

/* Strict mobile-first layout contract for Lyra client workspace. */
@media (max-width: 768px) {
  body.public-client-setup {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .public-client-setup:not(.generated-preview-open) .ai-shell,
  .public-client-setup:not(.generated-preview-open) .intake-panel,
  .public-client-setup:not(.generated-preview-open) .guided-panel,
  .public-client-setup:not(.generated-preview-open) .guided-shell {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-width: 100%;
    overflow: hidden;
  }

  .public-client-setup:not(.generated-preview-open) .guided-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .public-client-setup:not(.generated-preview-open) .guided-live-stage,
  .public-client-setup:not(.generated-preview-open) .live-stage-header,
  .public-client-setup:not(.generated-preview-open) .live-site-preview-mount {
    display: none !important;
  }

  .public-client-setup:not(.generated-preview-open) .guided-chat-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    border: 0;
    box-shadow: none;
  }

  .public-client-setup:not(.generated-preview-open) .guided-header,
  .public-client-setup:not(.generated-preview-open) .guided-progress,
  .public-client-setup:not(.generated-preview-open) .luma-coach-card,
  .public-client-setup:not(.generated-preview-open) .quick-chip-row,
  .public-client-setup:not(.generated-preview-open) .chat-status-card,
  .public-client-setup:not(.generated-preview-open) .chat-composer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .public-client-setup:not(.generated-preview-open) .luma-coach-card,
  .public-client-setup:not(.generated-preview-open) .chat-status-card {
    margin-left: 12px;
    margin-right: 12px;
  }

  .public-client-setup:not(.generated-preview-open) .guided-chat {
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 10px 96px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .public-client-setup:not(.generated-preview-open) .live-stage-header strong,
  .public-client-setup:not(.generated-preview-open) .neutral-live-copy h2,
  .public-client-setup:not(.generated-preview-open) .luma-ready-head strong,
  .public-client-setup:not(.generated-preview-open) .site-plan-head strong,
  .public-client-setup:not(.generated-preview-open) .chat-understanding-card strong {
    font-size: min(24px, 7vw);
    line-height: 1.08;
  }

  .public-client-setup:not(.generated-preview-open) .luma-coach-top strong,
  .public-client-setup:not(.generated-preview-open) .chat-status-card strong,
  .public-client-setup:not(.generated-preview-open) .guided-progress span {
    font-size: 11px;
  }

  .public-client-setup:not(.generated-preview-open) .chat-message span,
  .public-client-setup:not(.generated-preview-open) .chat-message.user {
    font-size: 15px;
    line-height: 1.45;
  }

  .public-client-setup:not(.generated-preview-open) .chat-message.assistant,
  .public-client-setup:not(.generated-preview-open) .chat-message.system {
    grid-template-columns: 36px minmax(0, 1fr);
    width: 100%;
  }

  .public-client-setup:not(.generated-preview-open) .chat-message span {
    max-width: min(80vw, 100%);
  }

  .public-client-setup:not(.generated-preview-open) .chat-message.user {
    max-width: 80vw;
  }

  .public-client-setup:not(.generated-preview-open) .chat-composer {
    position: sticky;
    bottom: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    padding-top: 10px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
  }

  .public-client-setup.generated-preview-open.draft-adjust-open .workspace {
    margin-right: 0;
  }

  .public-client-setup.generated-preview-open.draft-adjust-open .guided-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    padding: 0;
    background: #f7fbfa;
  }

  .public-client-setup.generated-preview-open.draft-adjust-open .guided-shell {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

/* KREATON Studio visual layer: clean AI workspace without changing existing logic. */
body.public-client-setup:not(.generated-preview-open):not(.client-auth-required) {
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 10%, rgba(20, 184, 166, 0.11), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(99, 102, 241, 0.12), transparent 30%),
    linear-gradient(135deg, #f8fafc 0%, #eefcf9 52%, #f7f5ff 100%);
  color: #0f172a;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .ai-shell,
.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .intake-panel,
.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-panel {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-shell {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(18px, 2.2vw, 32px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .assistant-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .assistant-avatar.large {
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 14px 22px rgba(20, 184, 166, 0.2));
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .assistant-identity strong {
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .assistant-identity span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .compact-action,
.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .compact-language select,
.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .audio-toggle,
.public-client-setup:not(.generated-preview-open):not(.client-auth-required) #guidedCloseButton {
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.86);
  color: #334155;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px clamp(18px, 2.2vw, 32px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.62);
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-progress div {
  height: 5px;
  background: rgba(15, 23, 42, 0.08);
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-progress i {
  background: linear-gradient(90deg, #14b8a6, #6366f1);
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 430px);
  overflow: hidden;
  background: transparent;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-live-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 22px;
  overflow: auto;
  padding: clamp(22px, 3.2vw, 46px);
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-live-stage::after {
  content: "";
  position: absolute;
  right: 5%;
  top: 18%;
  width: min(32vw, 420px);
  height: min(32vw, 420px);
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.12);
  filter: blur(48px);
  pointer-events: none;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .live-stage-header {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .live-stage-header span {
  border-color: rgba(20, 184, 166, 0.18);
  background: rgba(240, 253, 250, 0.9);
  color: #0f766e;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .live-stage-header strong {
  max-width: 720px;
  margin-top: 14px;
  color: #0f172a;
  font-size: clamp(34px, 4.3vw, 62px);
  line-height: 0.98;
  letter-spacing: 0;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .live-stage-header p {
  max-width: 640px;
  color: #475569;
  font-size: 16px;
  line-height: 1.58;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .live-site-preview-mount {
  position: relative;
  z-index: 1;
  min-height: 420px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(#f8fafc 0 48px, transparent 48px),
    #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .live-site-preview-mount::before {
  content: "vista-previa.kreaton.ai/tu-proyecto";
  position: sticky;
  top: 0;
  z-index: 5;
  height: 48px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  color: #94a3b8;
  background:
    radial-gradient(circle at 22px 50%, #cbd5e1 0 5px, transparent 6px),
    radial-gradient(circle at 42px 50%, #cbd5e1 0 5px, transparent 6px),
    radial-gradient(circle at 62px 50%, #cbd5e1 0 5px, transparent 6px),
    rgba(248, 250, 252, 0.96);
  font-size: 11px;
  font-weight: 700;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .live-site-preview-mount:empty::after {
  content: "LYRA esta mapeando el negocio antes de disenar.";
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #64748b;
  text-align: center;
  font-weight: 800;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .live-site-preview-card,
.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .live-preview-rendered {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-chat-card {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-left: 1px solid rgba(15, 23, 42, 0.09);
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(18px);
  box-shadow: -12px 0 40px rgba(15, 23, 42, 0.08);
}

.public-client-setup .lyra-agent-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(99, 102, 241, 0.14);
  background: rgba(238, 242, 255, 0.68);
  color: #4338ca;
}

.public-client-setup .lyra-agent-status span {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #6366f1;
}

.public-client-setup .lyra-agent-status span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: lyra-agent-ping 1.8s ease-out infinite;
}

.public-client-setup .lyra-agent-status strong {
  font-size: 12px;
  font-weight: 850;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-chat {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 18px 14px;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-message {
  margin-bottom: 14px;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-message.assistant,
.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-message.system {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-message .assistant-avatar.tiny {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(20, 184, 166, 0.18));
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-message.assistant span,
.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-message.system span {
  width: fit-content;
  max-width: min(100%, 330px);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 20px 20px 20px 6px;
  padding: 13px 15px;
  background: #ffffff;
  color: #334155;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  font-size: 14px;
  line-height: 1.5;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-message.user {
  display: block;
  width: fit-content;
  max-width: min(78%, 340px);
  margin-left: auto;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-message.user span {
  display: block;
  border-radius: 20px 20px 6px 20px;
  padding: 13px 15px;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 118, 110, 0.18);
  font-size: 14px;
  line-height: 1.5;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-thinking,
.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-status-card,
.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-asset-prompt,
.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .quick-chip-row {
  margin-left: 18px;
  margin-right: 18px;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-status-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-asset-prompt {
  border-color: rgba(20, 184, 166, 0.16);
  border-radius: 16px;
  background: rgba(240, 253, 250, 0.72);
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .quick-chip-row button,
.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-asset-prompt button,
.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-status-card button {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-weight: 850;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.9);
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-input-label input {
  min-height: 46px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  padding: 0 14px;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
  font-size: 14px;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-actions {
  display: grid;
  grid-template-columns: 40px 40px;
  gap: 8px;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-actions .text-action {
  grid-column: 1 / -1;
  min-height: 20px;
  padding: 0;
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
  text-align: center;
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .send-toggle {
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .mic-toggle {
  background: #ffffff;
  color: #334155;
}

@keyframes lyra-agent-ping {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  body.public-client-setup:not(.generated-preview-open):not(.client-auth-required) {
    height: 100dvh;
    overflow: hidden;
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-shell {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-header {
    min-height: 64px;
    padding: 8px 10px;
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .assistant-avatar.large {
    width: 48px;
    height: 48px;
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-header-actions {
    gap: 6px;
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .compact-action {
    max-width: 96px;
    min-height: 32px;
    padding: 6px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-live-stage {
    display: none !important;
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-chat-card {
    border-left: 0;
    box-shadow: none;
  }

  .public-client-setup .lyra-agent-status {
    padding: 8px 12px;
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-chat {
    padding: 12px 10px 12px;
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-message.assistant,
  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-message.system {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-message.assistant span,
  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-message.system span {
    max-width: min(78vw, 100%);
    font-size: 14px;
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-message.user {
    max-width: 78vw;
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-message.user span {
    font-size: 14px;
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-thinking,
  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-status-card,
  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .guided-asset-prompt,
  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .quick-chip-row {
    margin-left: 10px;
    margin-right: 10px;
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-composer {
    position: sticky;
    bottom: 0;
    padding: 10px 10px max(12px, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
  }

  .public-client-setup:not(.generated-preview-open):not(.client-auth-required) .chat-input-label input {
    min-height: 46px;
    font-size: 16px;
  }
}

/* Final priority layer for LYRA carousel. Keep this at EOF. */
body.public-client-setup .template-carousel-panel {
  background:
    radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.22), transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(20, 184, 166, 0.18), transparent 30%),
    #020617;
}

body.public-client-setup .template-carousel-track {
  display: flex !important;
  grid-template-columns: none !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

body.public-client-setup .template-carousel-card {
  flex: 0 0 min(320px, 78vw) !important;
  width: min(320px, 78vw) !important;
  scroll-snap-align: center;
}

body.public-client-setup .template-carousel-card.active-card {
  transform: scale(1.05);
  opacity: 1;
}

body.public-client-setup .template-board-panel {
  width: 100%;
  max-width: none;
  min-height: clamp(520px, 66vh, 760px);
  display: grid;
  grid-template-rows: auto minmax(0, auto);
  align-content: stretch;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(18px, 2.4vw, 32px);
  border-radius: 28px;
  overflow-x: hidden;
  overflow-y: auto;
}

body.public-client-setup .template-board-panel .template-carousel-heading {
  max-width: 920px;
}

body.public-client-setup .template-board-panel .template-carousel-heading strong {
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 0.95;
}

body.public-client-setup .template-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(18px, 1.8vw, 26px);
  align-content: start;
  align-items: stretch;
  min-height: min-content;
  padding-block: 8px 20px;
  overflow: visible;
}

body.public-client-setup .template-board-card {
  width: 100% !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(8, 13, 28, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow:
    0 24px 70px rgba(2, 6, 23, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
  will-change: transform, opacity, filter;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

body.public-client-setup .template-board-grid-enter .template-board-card {
  animation: templateCardFadeIn 460ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--template-card-index, 0) * 55ms);
}

body.public-client-setup .template-board-card:hover,
body.public-client-setup .template-board-card.active-card {
  transform: translateY(-5px);
  border-color: rgba(103, 232, 249, 0.62);
  box-shadow:
    0 32px 90px rgba(8, 47, 73, 0.2),
    0 16px 44px rgba(2, 6, 23, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

body.public-client-setup .template-board-card.recommended:first-child,
body.public-client-setup .template-skeleton-card:first-child {
  grid-column: auto;
}

body.public-client-setup .template-board-card.recommended:first-child {
  min-height: 0;
}

body.public-client-setup .template-board-image {
  height: clamp(170px, 24vh, 260px);
  margin: 12px 12px 0;
  border-radius: 18px 18px 14px 14px;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.16);
  overflow: hidden;
}

body.public-client-setup .template-board-card.recommended:first-child .template-board-image {
  height: clamp(170px, 24vh, 260px);
  min-height: 0;
  margin: 12px 12px 0;
  border-radius: 18px 18px 14px 14px;
}

body.public-client-setup .template-board-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1);
  transition: transform 300ms ease, filter 300ms ease;
}

body.public-client-setup .template-board-card:hover .template-board-image img,
body.public-client-setup .template-board-card.active-card .template-board-image img {
  transform: scale(1.05);
  filter: saturate(1.06) contrast(1.03);
}

@keyframes templateCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

body.public-client-setup .template-board-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}

body.public-client-setup .template-board-filter-bar button {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  padding: 10px 14px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.72);
  font-weight: 850;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

body.public-client-setup .template-board-filter-bar button:hover,
body.public-client-setup .template-board-filter-bar button:focus-visible,
body.public-client-setup .template-board-filter-bar button.active,
body.public-client-setup .template-board-filter-bar button[aria-pressed="true"] {
  transform: translateY(-3px);
  color: #ecfeff;
  background: rgba(20, 184, 166, 0.16);
  border-color: rgba(103, 232, 249, 0.42);
  box-shadow: 0 14px 34px rgba(8, 47, 73, 0.22);
}

body.public-client-setup .template-skeleton-panel {
  background:
    radial-gradient(circle at 18% 8%, rgba(34, 211, 238, 0.18), transparent 30%),
    radial-gradient(circle at 78% 0%, rgba(99, 102, 241, 0.2), transparent 34%),
    linear-gradient(135deg, #020617 0%, #0f172a 52%, #111827 100%);
}

body.public-client-setup .template-skeleton-card {
  width: 100%;
  min-height: clamp(470px, 54vh, 650px);
  display: grid;
  grid-template-rows: clamp(260px, 34vh, 420px) minmax(210px, auto);
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  animation: templateSkeletonPulse 1.65s ease-in-out var(--skeleton-delay, 0ms) infinite;
}

body.public-client-setup .template-skeleton-card:first-child {
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: clamp(520px, 58vh, 680px);
}

body.public-client-setup .template-skeleton-preview,
body.public-client-setup .template-skeleton-pill,
body.public-client-setup .template-skeleton-body strong,
body.public-client-setup .template-skeleton-body small,
body.public-client-setup .template-skeleton-body em {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0) 0%, rgba(125, 211, 252, 0.2) 48%, rgba(15, 23, 42, 0) 100%),
    linear-gradient(135deg, rgba(51, 65, 85, 0.85), rgba(30, 41, 59, 0.86));
  background-size: 240% 100%, 100% 100%;
  animation: templateSkeletonShimmer 1.45s linear var(--skeleton-delay, 0ms) infinite;
}

body.public-client-setup .template-skeleton-preview {
  min-height: 100%;
}

body.public-client-setup .template-skeleton-body {
  padding: 22px;
  display: grid;
  gap: 12px;
  align-content: start;
}

body.public-client-setup .template-skeleton-pill {
  width: 112px;
  height: 20px;
  border-radius: 999px;
}

body.public-client-setup .template-skeleton-body strong {
  width: min(78%, 280px);
  height: 30px;
  border-radius: 12px;
}

body.public-client-setup .template-skeleton-body small {
  width: 100%;
  height: 14px;
  border-radius: 999px;
}

body.public-client-setup .template-skeleton-body small + small {
  width: 72%;
}

body.public-client-setup .template-skeleton-body em {
  width: 48%;
  height: 42px;
  align-self: end;
  margin-top: 18px;
  border-radius: 999px;
}

@keyframes templateSkeletonShimmer {
  0% {
    background-position: 180% 0, 0 0;
  }
  100% {
    background-position: -80% 0, 0 0;
  }
}

@keyframes templateSkeletonPulse {
  0%,
  100% {
    opacity: 0.72;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

body.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .live-site-preview-mount:has(.template-board-card-host) {
  min-height: min(760px, calc(100vh - 190px));
  overflow: auto;
  background: #020617;
}

body.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .live-site-preview-mount:has(.template-board-loading-host) {
  min-height: min(760px, calc(100vh - 190px));
  overflow: hidden;
  background: #020617;
}

body.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .live-site-preview-mount:has(.template-board-card-host)::before,
body.public-client-setup:not(.generated-preview-open):not(.client-auth-required) .live-site-preview-mount:has(.template-board-loading-host)::before {
  display: none;
}

body.public-client-setup .live-site-preview-card.template-board-card-host,
body.public-client-setup .live-site-preview-card.template-board-loading-host {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  display: block;
}

body.public-client-setup .live-site-preview-card.template-board-card-host .template-board-panel,
body.public-client-setup .live-site-preview-card.template-board-loading-host .template-board-panel {
  min-height: min(760px, calc(100vh - 190px));
  border-radius: 0;
}

@media (min-width: 1600px) {
  body.public-client-setup .template-board-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.public-client-setup .template-board-card.recommended:first-child,
  body.public-client-setup .template-skeleton-card:first-child {
    grid-column: span 2;
  }

  body.public-client-setup .template-board-card.recommended:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
  }

  body.public-client-setup .template-board-card.recommended:first-child .template-board-image {
    height: auto;
    min-height: calc(100% - 24px);
    margin: 12px 0 12px 12px;
    border-radius: 18px;
  }
}

@media (max-width: 1380px) {
  body.public-client-setup .template-board-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  }
}

body.public-client-setup .template-board-body {
  min-height: 0;
  flex: 1;
  padding: 18px 20px 20px;
  display: grid;
  gap: 10px;
  align-content: start;
}

body.public-client-setup .template-board-meta {
  display: grid;
  gap: 10px;
}

body.public-client-setup .template-status-pill {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  color: #67e8f9;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(103, 232, 249, 0.24);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.public-client-setup .template-board-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.public-client-setup .template-board-badges em {
  width: fit-content;
  padding: 7px 9px;
  border-radius: 999px;
  color: #ecfeff;
  background: rgba(45, 212, 191, 0.13);
  border: 1px solid rgba(94, 234, 212, 0.2);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

body.public-client-setup .template-board-badges em[data-badge-tone="1"] {
  color: #eef2ff;
  background: rgba(129, 140, 248, 0.14);
  border-color: rgba(165, 180, 252, 0.22);
}

body.public-client-setup .template-board-badges em[data-badge-tone="2"] {
  color: #fff7ed;
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(253, 186, 116, 0.2);
}

body.public-client-setup .template-board-body strong {
  color: #f8fafc;
  font-size: clamp(1.35rem, 1.7vw, 1.95rem);
  line-height: 1.04;
  letter-spacing: 0;
}

body.public-client-setup .template-board-body small {
  color: #b6c2d2;
  font-size: 0.92rem;
  line-height: 1.5;
}

body.public-client-setup .template-board-body button {
  position: relative;
  margin-top: auto;
  border: 0;
  border-radius: 999px;
  padding: 13px 16px;
  color: #041014;
  background: linear-gradient(135deg, #67e8f9, #2dd4bf);
  font-weight: 950;
  cursor: pointer;
  overflow: hidden;
  transform: translateY(0);
  box-shadow: 0 12px 30px rgba(45, 212, 191, 0.2);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, filter 220ms ease, background 220ms ease;
}

body.public-client-setup .template-board-body button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.32) 48%, transparent 100%);
  transform: translateX(-120%);
  transition: transform 420ms ease;
}

body.public-client-setup .template-board-body button:hover,
body.public-client-setup .template-board-body button:focus-visible {
  transform: translateY(-4px);
  background: linear-gradient(135deg, #a7f3d0, #22d3ee);
  box-shadow: 0 18px 44px rgba(45, 212, 191, 0.32);
  filter: brightness(1.06);
}

body.public-client-setup .template-board-body button:hover::after,
body.public-client-setup .template-board-body button:focus-visible::after {
  transform: translateX(120%);
}

body.public-client-setup .template-board-body button:active {
  transform: translateY(-2px) scale(0.985);
  box-shadow: 0 10px 26px rgba(45, 212, 191, 0.22);
}

body.public-client-setup .selected-template-preview {
  min-height: clamp(620px, 78vh, 920px);
  background:
    radial-gradient(circle at 20% 10%, rgba(45, 212, 191, 0.18), transparent 32%),
    radial-gradient(circle at 80% 0%, rgba(96, 165, 250, 0.16), transparent 34%),
    #020617;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 28px;
  color: #f8fafc;
  padding: clamp(18px, 3vw, 34px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 22px;
  overflow: hidden;
}

body.public-client-setup .selected-template-preview-copy {
  max-width: 820px;
}

body.public-client-setup .selected-template-preview-copy span {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.16);
  border: 1px solid rgba(94, 234, 212, 0.34);
  color: #67e8f9;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.public-client-setup .selected-template-preview-copy h2 {
  margin: 14px 0 8px;
  font-size: clamp(2rem, 4vw, 4.4rem);
  line-height: 0.94;
  letter-spacing: 0;
}

body.public-client-setup .selected-template-preview-copy p {
  margin: 0;
  max-width: 680px;
  color: #cbd5e1;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.55;
}

body.public-client-setup .selected-template-preview-frame {
  min-height: 0;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
  overflow: auto;
}

body.public-client-setup .selected-template-preview-frame img {
  display: block;
  width: 100%;
  min-height: 100%;
  object-fit: contain;
  background: #020617;
}

body.public-client-setup .selected-template-preview-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

body.public-client-setup .selected-template-preview-actions button {
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  font-weight: 900;
  cursor: pointer;
}

body.public-client-setup .selected-template-preview-actions [data-change-template] {
  background: rgba(248, 250, 252, 0.08);
  color: #f8fafc;
  border: 1px solid rgba(248, 250, 252, 0.2);
}

body.public-client-setup .selected-template-preview-actions [data-chat-generate] {
  background: #22d3ee;
  color: #02121a;
}

@media (prefers-reduced-motion: reduce) {
  body.public-client-setup .template-board-card,
  body.public-client-setup .template-board-body button,
  body.public-client-setup .template-board-body button::after,
  body.public-client-setup .template-board-filter-bar button {
    animation: none;
    transition: none;
  }
}

@media (max-width: 767px) {
  body.public-client-setup .template-board-panel {
    min-height: 100%;
    border-radius: 18px;
    padding: 16px;
  }

  body.public-client-setup .template-board-panel .template-carousel-heading strong {
    font-size: 2rem;
  }

  body.public-client-setup .template-board-grid {
    grid-template-columns: 1fr;
  }

  body.public-client-setup .template-board-card.recommended:first-child,
  body.public-client-setup .template-skeleton-card:first-child {
    grid-column: auto;
  }

  body.public-client-setup .template-board-card {
    min-height: 0;
  }

  body.public-client-setup .template-board-card.recommended:first-child {
    display: block;
    min-height: 0;
  }

  body.public-client-setup .template-board-card.recommended:first-child .template-board-image {
    height: 220px;
    min-height: 0;
    margin: 12px 12px 0;
    border-radius: 18px 18px 14px 14px;
  }

  body.public-client-setup .template-skeleton-card {
    min-height: 0;
    grid-template-rows: 220px minmax(180px, auto);
  }

  body.public-client-setup .template-skeleton-card:first-child {
    grid-template-columns: none;
    grid-template-rows: 220px minmax(180px, auto);
    min-height: 0;
  }

  body.public-client-setup .selected-template-preview {
    min-height: 100%;
    border-radius: 18px;
    padding: 16px;
  }

  body.public-client-setup .selected-template-preview-copy h2 {
    font-size: 2rem;
  }

  body.public-client-setup .selected-template-preview-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Canvas template selector: keep the options compact and clickable. */
body.public-client-setup .live-site-preview-card.template-board-card-host .template-board-panel {
  min-height: 0;
  display: block;
  padding: clamp(16px, 2vw, 24px);
  overflow: hidden;
}

body.public-client-setup .live-site-preview-card.template-board-card-host .template-carousel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
}

body.public-client-setup .live-site-preview-card.template-board-card-host .template-carousel-heading strong {
  max-width: 520px;
  font-size: clamp(1.4rem, 2.3vw, 2.4rem);
  line-height: 1;
}

body.public-client-setup .live-site-preview-card.template-board-card-host .template-carousel-heading span {
  max-width: 320px;
  text-align: right;
}

/* Persistent build canvas: replaces the template picker with one evolving site. */
body.public-client-setup .live-site-preview-card.live-construction-card-host {
  min-height: 100%;
  background: #ffffff;
}

body.public-client-setup .live-construction-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

body.public-client-setup .live-construction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 12px;
}

body.public-client-setup .live-construction-header div {
  min-width: 0;
}

body.public-client-setup .live-construction-header span,
body.public-client-setup .live-construction-header strong {
  display: block;
}

body.public-client-setup .live-construction-header span {
  color: #0f766e;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

body.public-client-setup .live-construction-header strong {
  margin-top: 4px;
  overflow: hidden;
  color: #0f172a;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.public-client-setup .live-construction-header em {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  padding: 7px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

body.public-client-setup .live-construction-progress {
  height: 5px;
  margin: 0 22px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

body.public-client-setup .live-construction-progress i {
  display: block;
  width: var(--construction-progress, 12%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14b8a6, #6366f1);
  transition: width 420ms ease;
}

body.public-client-setup .live-construction-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 14px 22px 16px;
  list-style: none;
}

body.public-client-setup .live-construction-stages li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}

body.public-client-setup .live-construction-stages li i {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  font-size: 10px;
  font-style: normal;
}

body.public-client-setup .live-construction-stages li.is-active {
  color: #4338ca;
}

body.public-client-setup .live-construction-stages li.is-active i {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

body.public-client-setup .live-construction-stages li.is-complete {
  color: #047857;
}

body.public-client-setup .live-construction-stages li.is-complete i {
  border-color: #14b8a6;
  background: #14b8a6;
  color: #ffffff;
}

body.public-client-setup .live-construction-canvas {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  background: #eef2f6;
}

body.public-client-setup .live-construction-working {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 10%, rgba(124, 58, 237, 0.42), transparent 46%),
    radial-gradient(circle at 84% 8%, rgba(34, 211, 238, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(30, 27, 75, 0.95), rgba(11, 10, 36, 0.97));
  color: #ffffff;
  text-align: center;
  backdrop-filter: blur(5px);
}

body.public-client-setup .live-construction-working span {
  width: 38px;
  height: 38px;
  border: 4px solid rgba(196, 181, 253, 0.24);
  border-top-color: #22d3ee;
  border-radius: 50%;
  animation: lyra-generation-spin 0.85s linear infinite;
}

body.public-client-setup.lyra-build-mode .guided-build-card {
  position: sticky;
  bottom: 82px;
  z-index: 8;
  margin: 12px 16px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.2);
}

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

body.public-client-setup .live-construction-canvas.is-sketch {
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 56px);
  background:
    linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px),
    #f8fafc;
  background-size: 24px 24px;
}

body.public-client-setup .live-construction-sketch {
  position: relative;
  width: min(680px, 92%);
  padding: 18px;
  border: 1px solid rgba(99, 102, 241, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

body.public-client-setup .live-construction-sketch .template-live-preview {
  min-height: 300px;
  border-radius: 12px;
}

body.public-client-setup .live-construction-sketch .tlp-nav b {
  max-width: 160px;
  font-size: 13px;
}

body.public-client-setup .live-construction-sketch .tlp-nav i {
  width: 34px;
  height: 5px;
}

body.public-client-setup .live-construction-sketch .tlp-nav em {
  width: 62px;
  height: 22px;
}

body.public-client-setup .live-construction-sketch .tlp-copy b {
  height: 13px;
}

body.public-client-setup .live-construction-sketch .tlp-copy i {
  width: 84px;
  height: 28px;
}

body.public-client-setup .live-construction-sketch .tlp-image i {
  height: 116px;
}

body.public-client-setup .live-construction-sketch .tlp-cards i {
  height: 56px;
}

body.public-client-setup .live-construction-sketch-lines {
  position: absolute;
  inset: auto 34px 34px auto;
  display: grid;
  gap: 5px;
  width: 26%;
  opacity: 0.7;
}

body.public-client-setup .live-construction-sketch-lines i {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

body.public-client-setup .live-construction-canvas.is-template .live-template-preview-viewport {
  min-height: 100%;
}

@media (max-width: 760px) {
  body.public-client-setup .live-construction-header {
    padding-inline: 16px;
  }

  body.public-client-setup .live-construction-progress {
    margin-inline: 16px;
  }

  body.public-client-setup .live-construction-stages {
    gap: 4px;
    padding-inline: 16px;
  }

  body.public-client-setup .live-construction-stages li {
    justify-content: center;
  }

  body.public-client-setup .live-construction-stages li span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  body.public-client-setup .live-construction-canvas.is-sketch {
    padding: 18px;
  }

  body.public-client-setup .live-construction-sketch {
    width: 100%;
    padding: 10px;
  }

  body.public-client-setup .live-construction-sketch .template-live-preview {
    min-height: 220px;
  }
}

body.public-client-setup .live-site-preview-card.template-board-card-host .template-board-grid {
  display: flex;
  grid-template-columns: none;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 14px;
  scrollbar-width: none;
}

body.public-client-setup .live-site-preview-card.template-board-card-host .template-board-grid::-webkit-scrollbar {
  display: none;
}

body.public-client-setup .live-site-preview-card.template-board-card-host .template-board-card,
body.public-client-setup .live-site-preview-card.template-board-card-host .template-board-card.recommended:first-child {
  flex: 0 0 clamp(250px, 28vw, 330px) !important;
  width: clamp(250px, 28vw, 330px) !important;
  min-height: 410px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: center;
}

body.public-client-setup .live-site-preview-card.template-board-card-host .template-board-image,
body.public-client-setup .live-site-preview-card.template-board-card-host .template-board-card.recommended:first-child .template-board-image {
  height: 180px;
  min-height: 0;
  margin: 12px 12px 0;
  border-radius: 18px 18px 14px 14px;
}

body.public-client-setup .live-site-preview-card.template-board-card-host .template-board-body {
  min-height: 0;
  padding: 16px 18px 18px;
  gap: 9px;
}

body.public-client-setup .live-site-preview-card.template-board-card-host .template-board-body strong {
  font-size: 1.25rem;
  line-height: 1.05;
}

body.public-client-setup .live-site-preview-card.template-board-card-host .template-board-body small {
  font-size: 0.86rem;
  line-height: 1.42;
}

body.public-client-setup .live-site-preview-card.template-board-card-host .template-board-body button {
  min-height: 42px;
  margin-top: auto;
}

@media (max-width: 767px) {
  body.public-client-setup .live-site-preview-card.template-board-card-host .template-carousel-heading {
    display: block;
  }

  body.public-client-setup .live-site-preview-card.template-board-card-host .template-carousel-heading span {
    margin-top: 8px;
    text-align: left;
  }

  body.public-client-setup .live-site-preview-card.template-board-card-host .template-board-card,
  body.public-client-setup .live-site-preview-card.template-board-card-host .template-board-card.recommended:first-child {
    flex-basis: min(280px, 82vw) !important;
    width: min(280px, 82vw) !important;
  }
}

/* LYRA two-state experience.
   State 1: conversation before a site exists.
   State 2: generated result with optional edit chat. */
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-progress,
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-live-stage,
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .summary-panel,
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .lyra-agent-status,
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .template-carousel-panel,
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .template-board-panel,
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .site-plan-card,
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .brief-ready-card {
  display: none !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-modal {
  padding: clamp(12px, 2vw, 24px);
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-layout {
  display: grid !important;
  grid-template-columns: minmax(320px, 760px) !important;
  justify-content: center;
  align-items: stretch;
  min-height: min(760px, calc(100vh - 128px));
  gap: 0;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-chat-card {
  width: 100%;
  min-height: min(760px, calc(100vh - 128px));
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.12);
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-chat-log {
  overflow-x: hidden;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-message {
  max-width: min(84%, 620px);
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-status-card {
  justify-content: flex-end;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-status-card > div {
  display: none !important;
}

/* 2026-08-11: Beto explicitly rejected the chat-only "State 1" above --
   he wants the same 3-part experience from the very first message: a
   progress indicator, the live draft in the center, and LYRA's chat at
   the side. Both renderLiveSitePreview() and renderGuidedStepRail() in
   src/ai-builder/index.js already run during the conversation (see
   index.js ~4217-4227) -- the data was always there, it was only ever
   CSS-hidden by the block above (and by an older, unrelated hide rule
   at client-setup.css:4677 that also targets .guided-live-stage). These
   rules override both by using the same high-specificity selector and
   placing it later in the file, rather than editing/removing the older
   rules, since several other states in this file reuse them and a
   removal risked breaking those. See docs/AGENT_LOG.md. */
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-progress {
  display: grid !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-live-stage {
  display: grid !important;
  min-width: 0;
  min-height: 0;
}

/* Found live 2026-08-11 after the override above went out: the container
   (.guided-live-stage) was visible, but its actual content card
   (.live-site-preview-card -- the thing renderLiveSitePreview() fills
   with the real template picker / draft HTML) was STILL display:none,
   from a separate, unrelated rule (client-setup.css:5619,
   ".public-client-setup .guided-layout .live-site-preview-card { display:
   none !important; }"). Net effect on screen: an empty browser-chrome
   box with real content sitting inside it at 0x0 -- looked broken/blank
   even though the fix above was working. Same override strategy: higher
   specificity, declared after. */
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .live-site-preview-card {
  display: block !important;
  /* min-height:100% (client-setup.css:5031) needs the ancestor chain
     (#liveSitePreviewMount -> .guided-live-stage, both CSS Grid with no
     explicit height) to have a "definite" height for percentage
     resolution, which nested grid 1fr tracks don't reliably give it --
     confirmed live: the mount reported a real ~700px box via
     getBoundingClientRect(), but the card's percentage min-height still
     resolved to 0. Sidestepping the percentage chain entirely with the
     same absolute clamp() already used for the panel one level down
     (client-setup.css:5039, .template-board-panel) instead of trying to
     fix the percentage-height chain itself. */
  min-height: min(760px, calc(100vh - 190px)) !important;
  /* Found live 2026-08-11, second round: once a real draft/site renders
     inside this card (.live-render-card-host > .live-template-preview-shell
     > .rendered-site, from renderLiveSitePreview() in
     src/ai-builder/index.js), the rendered page is a full site (nav +
     hero + sections + footer -- often 2000px+ tall) with NO dedicated CSS
     of its own (.live-render-card-host / .live-template-preview-shell had
     zero rules anywhere in this file). It was inheriting the base card
     rule's `overflow: hidden` (client-setup.css:1552), and because this
     card is a CSS Grid item of .guided-live-stage
     (grid-template-rows: auto minmax(0, 1fr), client-setup.css:1362),
     overflow:hidden disables the browser's content-based automatic
     minimum size for grid items -- so the row just sized to the
     min-height above (~760px) and silently clipped everything past that,
     with no way to reach the rest of the page. First fix (v54) added
     overflow-y:auto here so it could at least be scrolled to -- Beto
     rejected that: seeing a fragment via scrollbar isn't "ver la pagina
     completa". Kept overflow-y:auto as a harmless last-resort safety net
     (only engages if the JS scale below hits its floor on an extremely
     tall page); the real fix is the scale-to-fit block underneath. */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* v55: "fit to frame" preview -- fitLiveTemplatePreviewToCard() in
   src/ai-builder/index.js renders the real generated site at a fixed
   1280px desktop width inside .live-template-preview-shell, measures its
   true rendered height, then sets a transform:scale() on the shell so the
   ENTIRE page (nav to footer) fits inside .live-template-preview-viewport
   with nothing cropped -- same idea as the canvas zoom in Wix/Webflow.
   The shell is positioned absolute inside the viewport because a scaled
   element keeps its pre-scale footprint in normal flow, which would leave
   a huge blank gap below it; JS sets the viewport's own height in px
   (naturalHeight * scale) once the scale is known, so the surrounding
   card sizes correctly around the shrunk page. pointer-events:none because
   this is a live overview only, not an interactive canvas -- clicks
   through a scaled transform don't land on the right coordinates anyway. */
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .live-template-preview-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .live-template-preview-shell {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  pointer-events: none;
  background: #ffffff;
}

/* Third and last layer of the same bug: .template-board-panel /
   .template-carousel-panel -- the actual template-picker cards inside
   .live-site-preview-card -- were STILL in the original hide-list a few
   rules above this one (the one starting "LYRA two-state experience").
   That's the ACTUAL content (5 real template cards, confirmed live via
   DOM inspection); everything visible before this fix was just the
   surrounding card chrome with nothing inside it. Left the other four
   items in that original hide-list alone (.summary-panel,
   .lyra-agent-status, .site-plan-card, .brief-ready-card) since those
   are genuinely secondary/contextual, not the main content. */
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .template-carousel-panel,
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .template-board-panel {
  display: block !important;
}

/* Beto (2026-08-12), third round: "esa franja negra no tiene sentido, debe
   aprovecharse el espacio". Root cause, confirmed live: the "card-host"
   variant of .template-board-panel (client-setup.css:5358, used whenever
   it's hosted inside .live-site-preview-card) has `min-height: 0` and no
   explicit height, so it only ever sizes to its own content (~634px) and
   never stretches to match .live-site-preview-card's real height (now
   ~665-755px after the .live-stage-header removal above freed up extra
   room) -- the leftover gap exposes whatever dark background sits behind
   it. Stretching the panel to fill its card removes the gap outright
   instead of chasing the exact px math on every possible content height. */
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .template-board-panel {
  min-height: 100% !important;
}

/* justify-content:stretch (still here, harmless) controls how THIS
   element distributes its own tracks; it does nothing about the
   element's own size in ITS parent. That turned out to be the real gap:
   .guided-shell (ancestor) doesn't stretch grid items by default here,
   so .guided-layout was shrinking to fit its content (~880px, i.e.
   sum of the two column tracks) instead of filling the available
   width -- confirmed live: adding width:100% took it from 880px to the
   full 1920px viewport, with the live-stage column going from a
   cramped 440px to ~1500px. That cropped width was *also* why the
   template-picker heading text upstream was wrapping one word per
   line -- its font-size (clamp() up to 2.4rem) was built for a wide
   canvas, not an 880px-wide one. */
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-layout {
  width: 100% !important;
  justify-self: stretch !important;
  grid-template-columns: minmax(0, 2fr) minmax(340px, 420px) !important;
  justify-content: stretch !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-chat-card {
  width: auto;
  min-width: 0;
}

/* Beto (2026-08-11, same day, follow-up): "el chat de LYRA aun esta muy
   feo desorganizado" after seeing it live with real messages. Two
   concrete, confirmed-live issues (checked via getComputedStyle, not
   guesswork):
   1. Assistant bubbles (.chat-message.assistant span /
      .chat-message.system span, client-setup.css:2716) render on a
      near-white background with only a 6%-opacity border
      (rgba(15,23,42,0.06)) against this panel's own near-white
      background -- so every LYRA reply after the first reads as
      borderless floating text instead of a distinct message card, which
      is the single biggest reason the thread looks unstructured.
   2. .chat-status-card (holds the "Review details" button) had its
      background/border explicitly stripped to transparent in THIS mode
      (client-setup.css:5498-5504, from the earlier 3-panel-layout pass)
      -- so that button sits with no visual grouping, disconnected from
      the quick-reply chips right below it. Everything else in the
      action stack (.quick-chip-row buttons) already has a proper pill
      style, so this was the one piece left ungrouped.
   Fix: give assistant bubbles a tinted background + real border + soft
   shadow so they read as cards, and put a light, rounded container back
   under the review-details area so it groups visually with the chips
   below it instead of floating alone. */
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-message.assistant span,
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-message.system span {
  background: linear-gradient(180deg, #ffffff, #f7fbfa) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-status-card {
  justify-content: flex-end !important;
  background: rgba(240, 253, 250, 0.6) !important;
  border: 1px solid rgba(15, 118, 110, 0.14) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 8px 10px !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) #reviewDetailsButton {
  background: #ffffff;
  border: 1px solid rgba(15, 118, 110, 0.22);
}

/* 2026-08-12: Codex proposed a separate opt-in "v2" chat redesign
   (client-setup-v2.css, ?ui=v2) that read as noticeably more "pro" --
   bigger type, more breathing room, consistent bubble/button system --
   but it did that by hiding .guided-live-stage entirely and going back
   to a single centered chat column, which is the exact layout Beto
   rejected earlier the same day (wants progress + live preview + chat
   together, not chat alone). Decision: keep the 3-column layout, but
   bring the parts of v2 that were genuinely better -- larger/more
   readable type, more generous bubble padding, a real focus state on
   the composer -- into it, and go further by using KREATON's actual
   brand gradient (violet/cyan, same stops as the landing-page hero
   badge: landing.html --violet:#7c3aed / --cyan:#22d3ee) instead of
   v2's generic slate-gray SaaS palette, since flat gray was part of why
   it still read as "not pro enough" per Beto. */
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-message.assistant span,
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-message.system span,
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-message.user {
  padding: 15px 17px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-message {
  gap: 10px;
}

/* Beto (2026-08-12): "los botones arriba a la derecha estan desorganizados
   no estan alineados". Root cause, confirmed live via getBoundingClientRect:
   .compact-language (the "Eng" language <label>) computes to display:grid
   with align-items:normal, so its hidden "Website language" text (sr-only
   via font-size:0) still reserves its own grid row above the <select> --
   the label's box ends up 66px tall inside a 95px header while every
   sibling button is 34-36px tall, pushing the visible dropdown ~15px lower
   than "New page" / the account button / the icon buttons next to it even
   though the whole row is align-items:center. Forcing it back to a single-
   row inline-flex fixes the box height to match its siblings so centering
   actually lines them all up. */
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .compact-language {
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-chat {
  gap: 16px;
  /* Beto (2026-08-12): "la burbuja no usa todo el espacio hasta abajo, se
     ve todo incompleto". Root cause, confirmed live via
     getBoundingClientRect(): an old, unscoped rule further down this file
     (`.public-client-setup .guided-chat { flex: 0 1 auto; max-height:
     420px; }`, originally written for a different/older compact state)
     applies to every state including this one and hard-caps the chat log
     at 420px regardless of how tall .guided-chat-card actually is (828px
     here) -- leaving a ~250px dead gap between the composer and the
     bottom of the card. Overriding flex-grow and removing the cap so it
     fills the real available height down to the composer. */
  flex: 1 1 auto !important;
  max-height: none !important;
}

/* Beto (2026-08-12): "la parte izquierda debe verse completo, no se q
   hace ese texto enorme arriba si es inutil". .live-stage-header (Build
   workspace badge + big "Business model and site architecture" heading +
   paragraph, client-setup.css:1372) sits above .live-site-preview-card
   inside .guided-live-stage's auto/1fr row grid, confirmed live at 221px
   tall -- that's 221px stolen from the live preview, duplicating
   information .guided-progress already shows ("Step 1 of 7"). The left
   panel's job is to show the page being built, not a page-level title,
   so this header adds no value here even though it's legitimately used
   in other states (generated-preview-open, etc.) -- only hiding it in
   this specific mode. With it gone the grid's "auto" row collapses to 0
   and .live-site-preview-card's 1fr row claims the space instead. */
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .live-stage-header {
  display: none !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-message .assistant-avatar.tiny {
  filter: drop-shadow(0 6px 14px rgba(124, 58, 237, 0.22)) drop-shadow(0 2px 8px rgba(34, 211, 238, 0.16));
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-progress i {
  background: linear-gradient(90deg, #7c3aed, #22d3ee) !important;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.3);
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-input-label input {
  min-height: 48px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-input-label input:focus {
  border-color: rgba(124, 58, 237, 0.4) !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1) !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-actions .send-toggle {
  background: linear-gradient(135deg, #7c3aed, #22d3ee) !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.28) !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .quick-chip-row button:hover,
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .quick-chip-row button:focus-visible {
  border-color: rgba(124, 58, 237, 0.35) !important;
  background: rgba(124, 58, 237, 0.06) !important;
  color: #5b21b6 !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-message {
  animation: lyraMessageIn 0.28s ease both;
}

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

@media (prefers-reduced-motion: reduce) {
  body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .chat-message {
    animation: none;
  }
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .guided-shell {
  background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 30%, #6d28d9 55%, #0e7490 85%, #0d9488 100%);
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .guided-header {
  background: rgba(15, 12, 41, 0.55) !important;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .assistant-identity strong,
body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .assistant-identity span {
  color: #f5f3ff !important;
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .guided-progress span {
  color: #e9d5ff !important;
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .guided-progress div {
  background: rgba(255, 255, 255, 0.18) !important;
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .guided-layout {
  padding: 22px;
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .assistant-avatar.large {
  width: 72px;
  height: 72px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 18px rgba(232, 121, 249, 0.65));
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .assistant-identity {
  position: relative;
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .assistant-identity::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 36px;
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(232, 121, 249, 0.55), rgba(34, 211, 238, 0.4) 55%, transparent 72%);
  animation: lyraBreathe 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lyraBreathe {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.88); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .guided-progress i {
  background: linear-gradient(90deg, #e879f9, #22d3ee) !important;
  animation: lyraProgressGlow 2.2s ease-in-out infinite;
}

@keyframes lyraProgressGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(232, 121, 249, 0.5); }
  50% { box-shadow: 0 0 22px rgba(34, 211, 238, 0.7); }
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .live-site-preview-card {
  position: relative;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 30px 80px rgba(9, 6, 40, 0.55) !important;
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .live-site-preview-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, #e879f9, #22d3ee, #e879f9);
  background-size: 200% 100%;
  animation: lyraBuildingShimmer 2.6s linear infinite;
  z-index: 2;
  border-radius: 24px 24px 0 0;
}

@keyframes lyraBuildingShimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .guided-chat-card {
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 30px 80px rgba(9, 6, 40, 0.55) !important;
  border-radius: 24px !important;
  background: rgba(15, 12, 41, 0.4) !important;
  backdrop-filter: blur(20px);
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .chat-message.assistant span,
body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .chat-message.system span {
  background: rgba(255, 255, 255, 0.94) !important;
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .chat-status-card {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .chat-status-card strong {
  color: #f5f3ff !important;
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .quick-chip-row button {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #f5f3ff !important;
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .chat-input-label input {
  background: rgba(255, 255, 255, 0.95) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .guided-actions .send-toggle {
  background: linear-gradient(135deg, #e879f9, #22d3ee) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .guided-actions .send-toggle:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 22px rgba(232, 121, 249, 0.5) !important;
}

body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .guided-actions .send-toggle:active {
  transform: translateY(0) scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .assistant-identity::before,
  body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .guided-progress i,
  body.public-client-setup:is(.lyra-conversation-mode, .lyra-result-mode):not(.review-details-open):not(.final-review-mode) .live-site-preview-card::before {
    animation: none;
  }
}

body.public-client-setup.lyra-result-mode.draft-adjust-open .guided-progress,
body.public-client-setup.lyra-result-mode.draft-adjust-open .summary-panel,
body.public-client-setup.lyra-result-mode.draft-adjust-open .lyra-agent-status,
body.public-client-setup.lyra-result-mode.draft-adjust-open .template-carousel-panel,
body.public-client-setup.lyra-result-mode.draft-adjust-open .template-board-panel,
body.public-client-setup.lyra-result-mode.draft-adjust-open .site-plan-card,
body.public-client-setup.lyra-result-mode.draft-adjust-open .brief-ready-card {
  display: none !important;
}

body.public-client-setup.lyra-result-mode.draft-adjust-open .guided-panel.active {
  display: block !important;
}

body.public-client-setup.lyra-result-mode.draft-adjust-open .guided-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px) !important;
  align-items: stretch;
  gap: 18px;
}

body.public-client-setup.lyra-result-mode.draft-adjust-open .guided-live-stage {
  display: block !important;
  min-width: 0;
}

body.public-client-setup.lyra-result-mode.draft-adjust-open .guided-chat-card {
  min-width: 0;
  height: calc(100vh - 112px);
  max-height: 820px;
  overflow: hidden;
}

@media (max-width: 767px) {
  body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-modal {
    padding: 0;
  }

  body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-layout,
  body.public-client-setup.lyra-result-mode.draft-adjust-open .guided-layout {
    grid-template-columns: 1fr !important;
    min-height: calc(100dvh - 64px);
  }

  body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-chat-card,
  body.public-client-setup.lyra-result-mode.draft-adjust-open .guided-chat-card {
    min-height: calc(100dvh - 64px);
    height: calc(100dvh - 64px);
    max-height: none;
    border-radius: 0;
  }

  body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-live-stage,
  body.public-client-setup.lyra-result-mode.draft-adjust-open .guided-live-stage {
    display: none !important;
  }

  body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .guided-chat-card {
    width: 100%;
  }

  body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode) .chat-message {
    max-width: 88%;
  }
}

/* Customer setup shows one conversational block, not LYRA's internal plan. */
.public-client-setup .guided-layout {
  display: block !important;
  overflow: auto;
  padding: 0;
  background: #ffffff;
}

.public-client-setup .guided-live-stage,
.public-client-setup .lyra-agent-status,
.public-client-setup .luma-coach-card,
.public-client-setup .guided-layout .live-site-preview-card {
  display: none !important;
}

.public-client-setup .guided-chat-card {
  width: min(100%, 760px);
  height: auto;
  min-height: 0;
  margin: 0 auto;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.public-client-setup .guided-chat { flex: 0 1 auto; min-height: 0; max-height: 420px; }
.public-client-setup .guided-progress { padding: 8px 16px 12px; }
.public-client-setup .guided-progress span,
.public-client-setup .chat-status-card span { display: none; }
.public-client-setup .guided-progress div { height: 4px; }
.public-client-setup .chat-status-card { margin: 0 16px; border-width: 0 0 1px; border-radius: 0; background: transparent; padding: 12px 0; }
.public-client-setup .quick-chip-row,
.public-client-setup .chat-composer,
.public-client-setup .guided-asset-prompt,
.public-client-setup .guided-actions,
.public-client-setup .mini-note { margin-inline: 16px; }

@media (max-width: 720px) {
  .public-client-setup .guided-chat { flex: 0 1 auto; min-height: 0; max-height: 48vh; }
  .public-client-setup.review-details-open .summary-panel { position: fixed; inset: auto 0 0; z-index: 120; max-height: 76vh; border-radius: 18px 18px 0 0; }
}

body.public-client-setup.lyra-conversation-mode .live-construction-canvas.is-template .live-template-preview-viewport {
  position: relative;
  width: 100%;
  min-height: 420px;
  overflow: hidden;
}

body.public-client-setup.lyra-conversation-mode .live-construction-canvas.is-template .live-template-preview-shell {
  position: absolute;
  inset: 0 auto auto 0;
  max-height: none;
  overflow: visible;
  padding: 0;
  pointer-events: none;
  background: #ffffff;
}

/* Fix (2026-09-21): the ai-builder.css .guided-shell 100vh/overflow:hidden
   fix (task #66) did NOT reach this page. This file was never unified with
   ai-builder.css (see docs/AGENT_LOG.md, "client-setup.css: pendiente de
   unificacion") and carries its own dozen-plus .guided-shell/.guided-chat-
   card rules, most still declaring overflow:hidden and several still on
   plain 100vh. Live-reproduced on a real mobile viewport (375x812): with
   the panel forced open, #guidedReply sat at y=830 - 18px BELOW the
   visible 812px viewport - and every ancestor up to .guided-shell had
   overflow:hidden, so there was no way to scroll down to it. This is a
   scoped safety net rather than a rewrite of every duplicated rule above:
   it forces the two ancestors that were clipping the composer to allow
   vertical scroll on phone-sized screens, without changing any size,
   color, or spacing. Confirmed in a live headless-browser reproduction
   before and after this rule. A full pass to unify/de-duplicate this
   file's guided-shell rules with ai-builder.css is tracked separately
   (Beto asked for a full visual+generation review, 2026-09-21). */
@media (max-width: 900px) {
  .public-client-setup .guided-shell,
  .public-client-setup .guided-chat-card {
    overflow-y: auto !important;
  }
}

/* Authenticated client home and conversation use the same LYRA surface. */
body.public-client-setup .client-projects-panel.is-dashboard {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: block;
  overflow-y: auto;
  padding: 0;
  background: #f3fbf7;
  backdrop-filter: none;
}

body.public-client-setup .client-projects-panel.is-dashboard[hidden] {
  display: none;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-card {
  width: min(100%, 1080px);
  min-height: 100dvh;
  height: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: clamp(20px, 4vw, 48px);
  box-shadow: none;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-topbar {
  min-height: 42px;
  padding: 0;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-brand {
  gap: 12px;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-brand strong {
  color: #12372e;
  font-size: 18px;
  font-weight: 700;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-account {
  overflow: hidden;
  max-width: 45%;
  color: #547269;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.public-client-setup .client-dashboard-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 68px;
  margin-top: 28px;
  border: 1px solid #dcece5;
  border-radius: 16px;
  background: #ffffff;
  padding: 8px 8px 8px 20px;
  box-shadow: 0 12px 32px rgba(16, 96, 74, 0.09);
}

body.public-client-setup .client-dashboard-composer:focus-within {
  border-color: #15836a;
  box-shadow: 0 0 0 3px rgba(21, 131, 106, 0.12);
}

body.public-client-setup .client-dashboard-composer input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #12372e;
  font-size: 16px;
}

body.public-client-setup .client-dashboard-composer input::placeholder {
  color: #829b92;
}

body.public-client-setup .client-dashboard-composer button {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: #176c59;
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
}

body.public-client-setup .client-dashboard-composer button:hover {
  background: #11513f;
}

body.public-client-setup .client-dashboard-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 26px;
}

body.public-client-setup .client-dashboard-suggestions button {
  border: 0;
  border-radius: 999px;
  background: #e0f1e9;
  color: #236c57;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}

body.public-client-setup .client-dashboard-suggestions button:hover {
  background: #cae8d9;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-section-head {
  margin: 0 0 12px;
  border: 0;
  padding: 0;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-section-head h2 {
  margin: 0;
  color: #12372e;
  font-size: 19px;
  font-weight: 700;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-project-card,
body.public-client-setup .client-projects-panel.is-dashboard .client-new-project-card {
  min-height: 0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 5px 20px rgba(24, 69, 54, 0.06);
}

body.public-client-setup .client-projects-panel.is-dashboard .client-project-card {
  border: 1px solid #e0eee7;
  padding: 10px;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(24, 69, 54, 0.12);
}

body.public-client-setup .client-projects-panel.is-dashboard .client-project-preview {
  min-height: 0;
  height: 145px;
  border: 0;
  border-radius: 9px;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-project-status,
body.public-client-setup .client-projects-panel.is-dashboard .client-project-template,
body.public-client-setup .client-projects-panel.is-dashboard .client-project-meta-line p,
body.public-client-setup .client-projects-panel.is-dashboard .client-project-domain {
  display: none;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-project-content {
  display: block;
  padding: 10px 2px 2px;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-project-card-head {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 4;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-project-card h3 {
  margin: 0 0 4px;
  color: #12372e;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-project-meta-line small {
  margin: 0;
  color: #61796f;
  font-size: 12px;
  font-weight: 500;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-new-project-card {
  min-height: 214px;
  border: 1px dashed #b5d5c6;
  background: rgba(255, 255, 255, 0.65);
  color: #176c59;
  padding: 12px;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-dashboard-resume {
  min-height: 214px;
  display: grid;
  place-content: center;
  gap: 10px;
  border: 1px solid #afd4c1;
  border-radius: 14px;
  background: #e8f6ee;
  color: #176c59;
  font-size: 14px;
  cursor: pointer;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-dashboard-resume span {
  font-size: 26px;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-new-project-icon {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: transparent;
  color: #176c59;
  font-size: 30px;
  box-shadow: none;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-new-project-card strong {
  font-size: 14px;
  font-weight: 600;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-empty {
  margin-top: 18px;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid #f1d3c8;
  border-radius: 10px;
  background: #fff8f5;
  color: #813822;
  padding: 16px;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-error button {
  border: 1px solid #d7a18d;
  border-radius: 8px;
  background: #ffffff;
  color: #813822;
  padding: 8px 12px;
  cursor: pointer;
}

body.public-client-setup .client-dashboard-back {
  display: none;
}

body.public-client-setup .client-dashboard-chat-title {
  display: none;
}

body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .guided-shell {
  background: #f3fbf7;
}

body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .guided-header {
  background: #f3fbf7 !important;
  border-bottom: 1px solid #e0eee7 !important;
  box-shadow: none;
}

body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .client-dashboard-back {
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #dcece5;
  border-radius: 10px;
  background: #ffffff;
  color: #176c59;
  font-size: 22px;
  cursor: pointer;
}

body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .assistant-identity strong,
body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .assistant-identity span {
  color: #12372e !important;
}

body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .assistant-identity::before,
body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .guided-progress,
body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .guided-live-stage,
body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .summary-panel,
body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .chat-status-card,
body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .guided-asset-prompt {
  display: none !important;
}

body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .guided-layout {
  display: block !important;
  width: min(100%, 760px);
  min-height: 0;
  height: calc(100dvh - 88px);
  margin: 0 auto;
  background: transparent;
  padding: 12px 16px !important;
}

body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .guided-chat-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  height: 100%;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .guided-chat {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .chat-composer {
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid #dcece5;
  border-radius: 14px;
  background: #ffffff;
  padding: 8px;
  box-shadow: 0 8px 22px rgba(24, 69, 54, 0.08);
}

body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .chat-input-label input {
  background: #ffffff !important;
}

body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .guided-actions .send-toggle {
  background: #176c59 !important;
}

body.public-client-setup .studio-auth-gate:has([data-studio-auth-loading]:not([hidden])) {
  background: #f3fbf7;
  backdrop-filter: none;
}

body.public-client-setup .studio-auth-gate:has([data-studio-auth-loading]:not([hidden])) .studio-auth-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.public-client-setup .studio-auth-loading strong {
  color: #12372e;
}

body.public-client-setup .studio-auth-loading p {
  color: #547269;
}

@media (max-width: 640px) {
  body.public-client-setup .client-projects-panel.is-dashboard .client-projects-card {
    padding: 20px 16px;
  }

  body.public-client-setup .client-projects-panel.is-dashboard .client-projects-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.public-client-setup .client-projects-panel.is-dashboard .client-project-preview {
    height: 94px;
  }

  body.public-client-setup .client-projects-panel.is-dashboard .client-new-project-card {
    min-height: 174px;
  }

  body.public-client-setup .client-projects-panel.is-dashboard .client-dashboard-resume {
    min-height: 174px;
  }

  body.public-client-setup .client-projects-panel.is-dashboard .client-project-card h3 {
    font-size: 13px;
  }

  body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .guided-layout {
    height: calc(100dvh - 78px);
    padding: 8px 10px !important;
  }

  body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .guided-chat-card {
    overflow: hidden !important;
  }
}

body.public-client-setup.client-projects-open {
  overflow: hidden;
}

body.public-client-setup .client-projects-panel.is-dashboard .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-account {
  width: 38px;
  height: 38px;
  border: 1px solid #cfe7da;
  border-radius: 50%;
  background: #e0f1e9;
  color: #176c59;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-new-project-card::before {
  display: none;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode):not(.generated-preview-open) .guided-shell {
  grid-template-rows: 72px minmax(0, 1fr) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #f3fbf7 !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode):not(.generated-preview-open) .guided-header {
  height: 72px !important;
  min-height: 72px !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px;
  background: #f3fbf7 !important;
  border-bottom: 1px solid #e0eee7 !important;
  padding: 8px 18px !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode):not(.generated-preview-open) .assistant-identity {
  min-width: 0;
  flex: 1;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode):not(.generated-preview-open) .assistant-avatar.large {
  width: 48px !important;
  height: 48px !important;
  filter: none !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode):not(.generated-preview-open) .guided-header-actions {
  display: none !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode):not(.generated-preview-open) .assistant-identity {
  display: none !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode):not(.generated-preview-open) .client-dashboard-chat-title {
  display: block;
  color: #12372e;
  font-size: 16px;
  font-weight: 700;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode):not(.generated-preview-open) .guided-live-stage,
body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode):not(.generated-preview-open) .summary-panel {
  display: none !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode):not(.generated-preview-open) .guided-layout {
  display: block !important;
  grid-template-columns: none !important;
  width: min(100%, 760px) !important;
  height: calc(100dvh - 72px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  padding: 8px 16px 16px !important;
  background: transparent !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode):not(.generated-preview-open) .guided-chat-card {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode):not(.generated-preview-open) .guided-chat {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding-bottom: 16px !important;
}

body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode):not(.generated-preview-open) .chat-composer {
  flex: 0 0 auto !important;
  margin: 0 !important;
  background: #ffffff !important;
}

@media (max-width: 640px) {
  body.public-client-setup.lyra-conversation-mode:not(.review-details-open):not(.final-review-mode):not(.generated-preview-open) .guided-layout {
    padding-inline: 10px !important;
  }
}

@keyframes lyra-home-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lyra-card-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lyra-idle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(3deg); }
}

@keyframes lyra-send-breathe {
  0%, 100% { box-shadow: 0 6px 16px rgba(23, 108, 89, 0.2); }
  50% { box-shadow: 0 6px 22px rgba(23, 108, 89, 0.38); }
}

@keyframes lyra-idea-cycle {
  0%, 20% { opacity: 1; transform: translateY(0); }
  25%, 100% { opacity: 0; transform: translateY(-7px); }
}

@keyframes lyra-preview-shimmer {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@keyframes lyra-message-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-card {
  animation: lyra-home-enter 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-brand img {
  width: 64px;
  height: 64px;
  animation: lyra-idle-float 3.4s ease-in-out infinite;
  filter: drop-shadow(0 7px 10px rgba(23, 108, 89, 0.24));
}

body.public-client-setup .client-dashboard-composer {
  position: relative;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

body.public-client-setup .client-dashboard-composer:focus-within {
  transform: translateY(-2px);
}

body.public-client-setup .client-dashboard-composer input {
  position: relative;
  z-index: 1;
}

body.public-client-setup .client-dashboard-rotating-ideas {
  position: absolute;
  top: 0;
  right: 70px;
  bottom: 0;
  left: 20px;
  overflow: hidden;
  pointer-events: none;
  color: #829b92;
  font-size: 16px;
}

body.public-client-setup .client-dashboard-rotating-ideas span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  animation: lyra-idea-cycle 12s ease-in-out infinite;
}

body.public-client-setup .client-dashboard-rotating-ideas span:nth-child(2) { animation-delay: 3s; }
body.public-client-setup .client-dashboard-rotating-ideas span:nth-child(3) { animation-delay: 6s; }
body.public-client-setup .client-dashboard-rotating-ideas span:nth-child(4) { animation-delay: 9s; }

body.public-client-setup .client-dashboard-composer:has(input:not(:placeholder-shown)) .client-dashboard-rotating-ideas {
  display: none;
}

body.public-client-setup .client-dashboard-composer button {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #7064c5, #176c59);
  animation: lyra-send-breathe 2.8s ease-in-out infinite;
  transition: transform 180ms ease, filter 180ms ease;
}

body.public-client-setup .client-dashboard-composer button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

body.public-client-setup .client-dashboard-composer button:active {
  transform: scale(0.94);
}

body.public-client-setup .client-dashboard-suggestions button,
body.public-client-setup .client-projects-panel.is-dashboard .client-new-project-card,
body.public-client-setup .client-projects-panel.is-dashboard .client-dashboard-resume {
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 220ms ease, box-shadow 220ms ease;
}

body.public-client-setup .client-dashboard-suggestions button:hover {
  transform: translateY(-2px);
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-list > * {
  animation: lyra-card-enter 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-projects-list > :nth-child(2) { animation-delay: 70ms; }
body.public-client-setup .client-projects-panel.is-dashboard .client-projects-list > :nth-child(3) { animation-delay: 140ms; }
body.public-client-setup .client-projects-panel.is-dashboard .client-projects-list > :nth-child(4) { animation-delay: 210ms; }
body.public-client-setup .client-projects-panel.is-dashboard .client-projects-list > :nth-child(n+5) { animation-delay: 260ms; }

body.public-client-setup .client-projects-panel.is-dashboard .client-project-card {
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 250ms ease;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-new-project-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body.public-client-setup .client-projects-panel.is-dashboard .client-project-card:hover,
body.public-client-setup .client-projects-panel.is-dashboard .client-new-project-card:hover,
body.public-client-setup .client-projects-panel.is-dashboard .client-dashboard-resume:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(24, 69, 54, 0.13);
}

body.public-client-setup .client-projects-panel.is-dashboard .client-project-preview.is-loading .client-project-preview-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.48) 50%, transparent 75%);
  animation: lyra-preview-shimmer 2.2s ease-in-out infinite;
  pointer-events: none;
}

body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .guided-shell {
  animation: lyra-home-enter 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .chat-message {
  animation: lyra-message-enter 350ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  body.public-client-setup .client-projects-panel.is-dashboard .client-projects-card,
  body.public-client-setup .client-projects-panel.is-dashboard .client-projects-brand img,
  body.public-client-setup .client-projects-panel.is-dashboard .client-projects-list > *,
  body.public-client-setup .client-projects-panel.is-dashboard .client-project-preview.is-loading .client-project-preview-fallback::after,
  body.public-client-setup .client-dashboard-rotating-ideas span,
  body.public-client-setup .client-dashboard-composer button,
  body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .guided-shell,
  body.public-client-setup.lyra-conversation-mode:not(.generated-preview-open) .chat-message {
    animation: none;
  }

  body.public-client-setup .client-dashboard-rotating-ideas span:first-child {
    opacity: 1;
  }

  body.public-client-setup .client-dashboard-composer,
  body.public-client-setup .client-dashboard-composer button,
  body.public-client-setup .client-dashboard-suggestions button,
  body.public-client-setup .client-projects-panel.is-dashboard .client-project-card,
  body.public-client-setup .client-projects-panel.is-dashboard .client-new-project-card,
  body.public-client-setup .client-projects-panel.is-dashboard .client-dashboard-resume {
    transition: none;
  }
}

/* Public KREATON sign-in shares the client workspace palette. */
body.public-client-setup .studio-auth-gate {
  overflow-y: auto;
  padding: 32px;
  background-color: #f5fbf9;
  background-image:
    linear-gradient(rgba(34, 112, 105, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 112, 105, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  backdrop-filter: none;
}

body.public-client-setup .studio-auth-card {
  width: min(1040px, 100%);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #102a2e;
}

body.public-client-setup .studio-auth-card [data-studio-auth-content] {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
  align-items: center;
  gap: 28px;
}

body.public-client-setup .studio-auth-card [data-studio-auth-content][hidden] {
  display: none;
}

body.public-client-setup .studio-auth-intro {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 20px 24px 0;
}

body.public-client-setup .studio-auth-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  color: #102a2e;
}

body.public-client-setup .studio-auth-brand img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

body.public-client-setup .studio-auth-brand strong {
  font-size: 14px;
  font-weight: 950;
}

body.public-client-setup .studio-auth-brand span {
  margin-left: 3px;
  padding-left: 12px;
  border-left: 1px solid #bbd8d2;
  color: #087f76;
  font-size: 11px;
  font-weight: 900;
}

body.public-client-setup .studio-auth-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 390px);
  height: 294px;
  margin: 12px auto 0;
}

body.public-client-setup .studio-auth-avatar::before,
body.public-client-setup .studio-auth-avatar::after {
  content: "";
  position: absolute;
  width: 245px;
  height: 245px;
  border: 1px solid rgba(8, 127, 118, 0.28);
  border-radius: 50%;
  pointer-events: none;
}

body.public-client-setup .studio-auth-avatar::after {
  width: 285px;
  height: 285px;
  border-style: dashed;
  border-color: rgba(47, 76, 221, 0.2);
  animation: kreaton-auth-orbit 48s linear infinite;
}

body.public-client-setup .studio-auth-avatar .assistant-avatar {
  position: relative;
  z-index: 1;
  width: 224px;
  height: 260px;
  object-fit: contain;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 20px 22px rgba(12, 82, 89, 0.18));
  animation: kreaton-auth-float 5s ease-in-out infinite;
}

body.public-client-setup .studio-auth-card [data-studio-auth-content] .studio-auth-intro > span {
  color: #087f76;
  text-align: left;
}

body.public-client-setup .studio-auth-intro h2 {
  max-width: 480px;
  margin: 10px 0 12px;
  color: #102a2e;
  font-size: 42px;
  line-height: 1.07;
  text-align: left;
}

body.public-client-setup .studio-auth-intro p {
  max-width: 400px;
  color: #536d6b;
  font-size: 15px;
  text-align: left;
}

body.public-client-setup .studio-auth-entry {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  overflow: hidden;
  border: 1px solid #cfe2dc;
  border-radius: 16px;
  background: #ffffff;
  padding: 32px;
  color: #102a2e;
  box-shadow: 0 18px 48px rgba(16, 65, 63, 0.09);
}

body.public-client-setup .studio-auth-entry::after {
  content: "";
  position: absolute;
  top: 0;
  left: 32px;
  width: 90px;
  height: 3px;
  background: #47d3c1;
}

body.public-client-setup .studio-auth-entry-label {
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  color: #087f76;
  font-size: 11px;
  font-weight: 900;
}

body.public-client-setup .studio-auth-entry h3 {
  margin: 0;
  color: #102a2e;
  font-size: 24px;
  line-height: 1.15;
}

body.public-client-setup .studio-auth-entry p {
  margin: 0 0 8px;
  color: #536d6b;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

body.public-client-setup .studio-auth-card .studio-auth-entry .icon-button {
  top: 20px;
  right: 20px;
  z-index: 2;
  border-color: #cfe2dc;
  background: #f5fbf9;
  color: #102a2e;
}

body.public-client-setup .studio-auth-entry .studio-legal-consent {
  position: relative;
  z-index: 1;
  margin: 8px 0 4px;
  color: #536d6b;
  font-size: 13px;
}

body.public-client-setup .studio-auth-entry .studio-legal-consent input {
  accent-color: #47d3c1;
}

body.public-client-setup .studio-auth-entry .studio-legal-consent a {
  color: #087f76;
}

body.public-client-setup .studio-auth-entry .studio-auth-actions {
  position: relative;
  z-index: 1;
}

body.public-client-setup .studio-auth-entry .studio-auth-provider {
  height: 58px;
  min-height: 58px;
  gap: 10px;
  border: 1px solid #bfd9d3;
  border-radius: 10px;
  background: #f8fcfa;
  color: #153a3b;
  font-weight: 850;
  box-shadow: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body.public-client-setup .studio-auth-entry .studio-auth-provider svg {
  position: static;
  flex: 0 0 20px;
}

body.public-client-setup .studio-auth-entry .studio-auth-provider:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: #087f76;
  box-shadow: 0 12px 24px rgba(8, 127, 118, 0.12);
}

body.public-client-setup .studio-auth-entry .studio-auth-provider:focus-visible,
body.public-client-setup .studio-auth-entry .studio-legal-consent input:focus-visible {
  outline: 2px solid #087f76;
  outline-offset: 4px;
}

body.public-client-setup .studio-auth-entry #studioGoogleAuthButton:disabled {
  background: #eaf4f0;
  color: #536d6b;
  opacity: 1;
}

body.public-client-setup .studio-auth-entry #studioAppleAuthButton {
  display: flex;
  justify-content: center;
  border-color: #e2ebe7;
  background: #f6f9f8;
  padding: 12px 14px;
  color: #71827e;
  font-size: 15px;
  text-align: center;
  opacity: 1;
}

body.public-client-setup .studio-auth-entry #studioAppleAuthButton svg {
  width: 20px;
  height: 20px;
}

body.public-client-setup .studio-auth-entry .studio-auth-actions > .studio-auth-coming-soon {
  position: static;
  justify-self: center;
  margin-top: -5px;
  padding: 0;
  background: none;
  color: #617874;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

body.public-client-setup .studio-auth-loading {
  min-height: 360px;
  border: 1px solid #d0e3dd;
  background: #ffffff;
  padding: 30px;
  color: #102a2e;
}

body.public-client-setup .studio-auth-loading strong {
  color: #102a2e;
}

body.public-client-setup .studio-auth-loading p {
  color: #536d6b;
}

@keyframes kreaton-auth-orbit {
  to { transform: rotate(360deg); }
}

@keyframes kreaton-auth-float {
  50% { transform: translateY(-8px); }
}

@media (max-width: 700px) {
  body.public-client-setup .studio-auth-gate {
    place-items: start center;
    padding: 18px;
  }

  body.public-client-setup .studio-auth-card [data-studio-auth-content] {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body.public-client-setup .studio-auth-intro {
    align-items: center;
    padding: 0;
    text-align: center;
  }

  body.public-client-setup .studio-auth-brand {
    align-self: flex-start;
  }

  body.public-client-setup .studio-auth-avatar {
    height: 148px;
    margin: 4px auto 0;
  }

  body.public-client-setup .studio-auth-avatar::before {
    width: 126px;
    height: 126px;
  }

  body.public-client-setup .studio-auth-avatar::after {
    width: 145px;
    height: 145px;
  }

  body.public-client-setup .studio-auth-avatar .assistant-avatar {
    width: 122px;
    height: 144px;
  }

  body.public-client-setup .studio-auth-card [data-studio-auth-content] .studio-auth-intro > span,
  body.public-client-setup .studio-auth-intro h2,
  body.public-client-setup .studio-auth-intro p {
    text-align: center;
  }

  body.public-client-setup .studio-auth-intro h2 {
    margin: 7px 0 8px;
    font-size: 30px;
  }

  body.public-client-setup .studio-auth-intro p {
    font-size: 14px;
  }

  body.public-client-setup .studio-auth-entry {
    padding: 28px;
  }

  body.public-client-setup .studio-auth-entry-label {
    margin-bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.public-client-setup .studio-auth-avatar::after,
  body.public-client-setup .studio-auth-avatar .assistant-avatar {
    animation: none;
  }

  body.public-client-setup .studio-auth-entry .studio-auth-provider {
    transition: none;
  }
}