@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* PropertyRadar brand palette */
  --pr-blue: #2da6dd;
  --pr-blue-dark: #2375dd;
  --pr-blue-active: #123563;
  --pr-green: #38cb89;
  --pr-green-hover: #2fb97a;
  --pr-green-active: #28a745;
  --pr-navy: #0a1f44;
  --pr-heading: #19467f;
  --pr-muted: #87909e;
  --pr-green-tint: rgba(56, 203, 137, 0.12);
  --pr-blue-tint: rgba(45, 166, 221, 0.12);

  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ll-heading: var(--pr-heading);
  --ll-body: var(--pr-navy);
  --ll-muted: var(--pr-muted);
  --ll-purple: var(--pr-blue);
  --ll-purple-dark: var(--pr-blue-dark);
  --ll-accent: var(--pr-green);
  --ll-success: var(--pr-green);

  --ll-page-bg: #fbfcff;
  --ll-nav-bg: transparent;

  --ll-stepper-bg: linear-gradient(180deg, #ffffff 0%, #f4faff 100%);
  --ll-stepper-shadow: 0 12px 32px rgba(10, 31, 68, 0.08);
  --ll-stepper-radius: 16px;

  --ll-brand-gradient: radial-gradient(120% 120% at 80% 20%, rgba(45, 166, 221, 0.12) 0%, rgba(146, 208, 236, 0.08) 45%, rgba(251, 252, 255, 0.9) 100%);
  --ll-brand-border: #dee9eb;
  --ll-gradient: linear-gradient(135deg, #2da6dd 0%, #38cb89 100%);

  --ll-btn-primary-bg: var(--pr-green);
  --ll-btn-primary-text: var(--pr-navy);
  --ll-btn-primary-border: transparent;

  --ll-btn-primary-shadow: none;
  --ll-btn-welcome-shadow: none;
  --ll-btn-primary-disabled-opacity: 0.45;

  --radius-md: 8px;
  --radius-chat-card: 16px;

  --ll-purple-tint: var(--pr-blue-tint);
  --ll-purple-tint-light: #f0f9ff;
  --ll-purple-border: #c4e3f7;

  --ll-chat-messages-bg: #ffffff;
  --ll-chat-message-avatar-bg: #f0f9ff;

  --ll-pending-badge-bg: #edf3f5;
  --ll-pending-badge-text: var(--pr-muted);
  --ll-active-badge-bg: rgba(45, 166, 221, 0.14);
  --ll-active-badge-text: var(--pr-blue-dark);
  --ll-done-badge-bg: rgba(56, 203, 137, 0.16);
  --ll-done-badge-text: #1f9a62;

  --ll-off-white: #f4f8fd;
  --ll-dark-alt: #ffffff;
  --ll-light-purple: #eef6ff;
  --ll-border: #dee9eb;
  --ll-border-light: #e6eef7;
  --ll-white: #ffffff;
  --ll-dark: #ffffff;
}

#star-stop-a { stop-color: #92d0ec; }
#star-stop-b { stop-color: #2da6dd; }
#star-stop-c { stop-color: #19467f; }

body {
  background-color: var(--ll-page-bg);
  background-image: url('gradient-bg.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* ── Cards / containers ───────────────────────────────────── */
.chat-container,
.draft-card,
.video-card,
.platform-card,
.platform-card--rich,
.post-progress-rich,
.review-complete-modal,
.hubspot-lead-modal__dialog,
.video-capture-modal__dialog {
  background: #ffffff;
  border-color: var(--ll-border);
  box-shadow: 0 4px 20px rgba(10, 31, 68, 0.08);
}

/* ── Chat ─────────────────────────────────────────────────── */
.chat-header,
.chat-input-bar,
.chat-draft-prompt {
  background: #ffffff;
}
.chat-header {
  border-bottom-color: var(--ll-border);
}
.chat-input-bar {
  border-top-color: var(--ll-border);
}
.chat-messages {
  background: #ffffff;
}

.chat-bubble.agent {
  background: #f4f8fd;
  border-color: var(--ll-border);
  color: var(--pr-navy);
}
.chat-bubble.user {
  background: var(--pr-blue);
  border-color: var(--pr-blue);
  color: #ffffff;
}
.chat-bubble.user a {
  color: rgba(255, 255, 255, 0.92);
}

.chat-message-avatar {
  border-color: var(--ll-border);
}

.chat-input-bar input,
#draft-textarea,
.draft-textarea,
.video-capture-modal__select {
  background: #ffffff;
  border-color: var(--ll-border);
  color: var(--pr-navy);
}
.chat-input-bar input::placeholder,
.draft-textarea::placeholder {
  color: var(--pr-muted);
}
.chat-input-bar input:focus,
#draft-textarea:focus,
.draft-textarea:focus,
.video-capture-modal__select:focus {
  border-color: var(--pr-blue);
  box-shadow: 0 0 0 3px rgba(45, 166, 221, 0.16);
}

.chat-send-btn {
  background: var(--pr-blue);
  color: #ffffff;
}

.chat-draft-prompt__card {
  background: #ffffff;
  border-color: var(--ll-border);
}
.chat-draft-prompt__header {
  border-bottom-color: var(--ll-border);
}
.chat-draft-prompt__headline,
.chat-draft-prompt__mini-name {
  color: var(--pr-heading);
}
.chat-draft-prompt__subhead {
  color: var(--pr-navy);
}
.chat-draft-prompt__mini {
  background: #ffffff;
  border-color: var(--ll-border);
  box-shadow: 0 4px 20px rgba(10, 31, 68, 0.08);
}

/* ── Buttons (Figma: green primary CTA, 8px radius, Poppins Medium) ── */
.btn-primary {
  gap: 10px;
  border-radius: 8px;
  font-weight: 500;
}
.btn-primary:not(.btn-sm):not(.btn-lg) {
  padding: 0 30px;
  font-size: 18px;
  line-height: 21px;
}
.btn-primary:hover:not(:disabled) {
  background: var(--pr-green-hover);
}
.btn-primary:active:not(:disabled) {
  background: var(--pr-green-active);
}
.welcome-cta .btn-primary {
  background: var(--pr-green);
  color: var(--pr-navy);
}
.btn-secondary,
.btn-tertiary {
  background: #ffffff;
  color: var(--pr-navy);
  border-color: var(--pr-navy);
  border-radius: 8px;
  font-weight: 500;
}
.btn-secondary:hover,
.btn-tertiary:hover {
  background: #f4f8fd;
  border-color: var(--pr-blue);
  color: var(--pr-blue-dark);
}
.btn-copy {
  background: #ffffff;
  color: var(--pr-navy);
  border-color: var(--ll-border);
}
.btn-copy:hover {
  background: #f0f9ff;
  border-color: var(--pr-blue);
}

.welcome-content,
.screen-header h1 {
  max-width: 992px;
}

.welcome-callout {
  background: #ffffff;
}

.welcome-callout strong {
  color: var(--pr-heading);
}

.rr-logo-icon {
  height: 38px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

/* ── Progress stepper ─────────────────────────────────────── */
.progress-bar {
  border-color: var(--ll-border);
}
.progress-dot {
  background: #ffffff;
  border-color: var(--ll-border);
  color: var(--pr-muted);
}
.progress-step.active .progress-dot {
  background: var(--pr-blue);
  border-color: var(--pr-blue);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(45, 166, 221, 0.16);
}
.progress-step.done .progress-dot {
  background: var(--pr-green);
  border-color: var(--pr-green);
  color: #ffffff;
}
.progress-step.done .progress-dot::before {
  --progress-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 12 4 4 10-10' fill='none' stroke='%230a1f44' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.progress-step.done .progress-connector {
  background: var(--pr-green);
}
.progress-step.active .progress-connector {
  background: linear-gradient(
    to right,
    var(--pr-blue) 0%,
    var(--pr-blue) 50%,
    var(--ll-border-light) 50%,
    var(--ll-border-light) 100%
  );
}
.progress-step.done .progress-badge {
  border-color: rgba(56, 203, 137, 0.42);
}

/* ── Draft screen ─────────────────────────────────────────── */
.draft-tab {
  background: #ffffff;
  border-color: var(--ll-border);
  color: var(--pr-navy);
  box-shadow: 0 4px 20px rgba(10, 31, 68, 0.06);
}
.draft-tab:hover {
  border-color: var(--pr-blue);
  color: var(--pr-blue-dark);
}
.draft-tab.active {
  background: #f0f9ff;
  border-color: var(--pr-blue);
  color: var(--pr-blue-dark);
}
.draft-tab-icon--empty {
  background: #f4f8fd;
  border-color: var(--ll-border);
}
.edit-hint {
  background: #f4f8fd;
  color: var(--pr-navy);
  border-color: var(--ll-border);
}
.edit-hint:hover {
  background: #f0f9ff;
  border-color: var(--pr-blue);
}

/* ── Post screen ──────────────────────────────────────────── */
.platform-status.ready {
  background: var(--pr-blue);
  border-color: var(--pr-blue);
  color: #ffffff;
}
.platform-status.ready:hover {
  filter: brightness(1.05);
}
.platform-status.done {
  background: var(--pr-green);
  border-color: var(--pr-green);
  color: var(--pr-navy);
}
.btn-confirm {
  color: #ffffff;
}

.field-row {
  background: #f4f8fd;
  border-color: var(--ll-border);
}

.video-intro,
.platform-icon,
.video-card-header .video-title .icon-circle {
  background: #f4f8fd;
}

/* Links (Figma: default #19467F → hover #2375DD → active #123563) */
a,
.link-inline,
.chat-bubble a,
.card-details summary {
  color: var(--pr-heading);
}
a:hover,
.link-inline:hover,
.chat-bubble a:hover,
.card-details summary:hover,
.rr-legal-footer a:hover {
  color: var(--pr-blue-dark);
  text-decoration-color: var(--pr-blue-dark);
}
a:active,
.link-inline:active,
.chat-bubble a:active {
  color: var(--pr-blue-active);
}

.btn-tertiary {
  color: var(--pr-heading);
  border-color: color-mix(in srgb, var(--pr-heading) 30%, var(--ll-border));
}
.btn-tertiary:hover {
  color: var(--pr-blue-dark);
  border-color: var(--pr-blue);
  background: var(--pr-blue-tint);
}

.text-accent {
  color: var(--pr-blue);
}
.welcome-callout-icon {
  background: var(--pr-blue-tint);
  color: var(--pr-blue-dark);
}
.draft-tip .draft-tip-icon {
  color: var(--pr-blue-dark);
}
.draft-tip {
  border-color: color-mix(in srgb, var(--pr-blue) 22%, var(--ll-border));
  background: var(--pr-blue-tint);
}
.draft-tip .text-primary {
  color: var(--pr-blue-dark);
}

.screen-header h1,
.screen-header h2,
.screen-header h3,
.nav-title {
  color: var(--pr-heading);
  font-weight: 600;
}

.site-header {
  background: rgba(251, 252, 255, 0.92);
  backdrop-filter: blur(8px);
}