@import url("main.css");

/* =========================================================
   DEMO PAGE — business info card + live chat panel
   ========================================================= */
.demo-header {
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.demo-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.demo-header__badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--gradient-brand);
  flex-shrink: 0;
}

.demo-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0 var(--space-8);
  align-items: start;
}

@media (max-width: 880px) {
  .demo-layout { grid-template-columns: 1fr; }
}

.business-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.business-card__section {
  margin-top: var(--space-5);
}

.business-card__section h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-weight: 500;
}

/* --- Chat panel --- */
.chat-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  height: 560px;
}

.chat-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.chat-panel__header-text strong { display: block; font-size: 0.92rem; }
.chat-panel__header-text span { font-size: 0.78rem; color: var(--color-text-muted); }

.chat-panel__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chat-panel__messages .bubble { animation: none; opacity: 1; } /* live messages appear instantly, not staged like the hero mockup */

.chat-panel__typing {
  display: none;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-family: var(--font-mono);
}
.chat-panel__typing.is-visible { display: flex; }

/* Distinct from .bubble--agent — for lead-created confirmations and
   similar system-level messages, NOT the AI's own conversational text.
   Needs to visually read as "the system did a thing", not "the agent said
   something". */
.bubble--system {
  align-self: center;
  max-width: 90%;
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

.chat-panel__typing .orb { width: 16px; height: 16px; }

.chat-panel__form {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.chat-panel__input {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.chat-panel__input:focus { outline: none; border-color: var(--color-brand-solid); }

.chat-panel__send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--gradient-brand);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-panel__send:disabled { opacity: 0.5; cursor: default; }

.chat-panel__consent-banner {
  display: none;
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem;
}
.chat-panel__consent-banner.is-visible { display: block; }