/* ─── BEE GREEN OUTDOOR LIVING CHAT WIDGET ───────────────────────── */
/* "Beesley" — AI assistant for groundsdesign.com                     */
/* v4.0 — Readability overhaul, dark mode fix, 20 UI/UX improvements */

:root {
  --gc-green: #2D5016;
  --gc-green-light: #3a6b1e;
  --gc-green-pale: #f0f5ec;
  --gc-gold: #C4973B;
  --gc-gold-light: #f5ecd8;
  --gc-text: #1a1a1a;
  --gc-text-light: #555;
  --gc-bg: #ffffff;
  --gc-bg-chat: #fafaf7;
  --gc-border: #e4e4e0;
  --gc-muted: #999;
  --gc-radius: 16px;
  --gc-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  --gc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gc-online: #22c55e;
}

/* ─── TOGGLE BUTTON ────────────────────────────────────────────────── */

.gc-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gc-green) 0%, var(--gc-green-light) 100%);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(45, 80, 22, 0.35), 0 0 0 0 rgba(45, 80, 22, 0.2);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: gc-pulse-ring 3s ease-in-out infinite;
}

.gc-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(45, 80, 22, 0.45);
  animation: none;
}

.gc-toggle.gc-open { animation: none; }

.gc-toggle .gc-bee-icon {
  width: 64px;
  height: 64px;
  transition: transform 0.2s ease, opacity 0.15s ease;
  animation: gc-bee-hover 2s ease-in-out infinite;
  overflow: visible;
  /* Bee overflows the circle — pokes out so holiday overlays are visible */
  margin: -12px;
}

.gc-toggle:hover .gc-bee-icon {
  animation: gc-bee-flutter 0.3s ease-in-out infinite;
}

/* Wing flutter animation — only on the toggle bee (not avatar/mini in chat) */
.gc-toggle .gc-bee-wing-l {
  transform-origin: 14px 30px;
  animation: gc-wing-flutter-l 0.12s ease-in-out infinite alternate;
}
.gc-toggle .gc-bee-wing-r {
  transform-origin: 50px 30px;
  animation: gc-wing-flutter-r 0.12s ease-in-out infinite alternate;
}

.gc-toggle .gc-icon-close {
  display: none;
  width: 24px;
  height: 24px;
  fill: white;
}

.gc-toggle.gc-open .gc-bee-icon { display: none; }
.gc-toggle.gc-open .gc-icon-close { display: block; }

/* ─── TOGGLE ONLINE DOT (GREEN) ─────────────────────────────────── */

.gc-toggle-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gc-online);
  border: 2.5px solid var(--gc-green);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
  animation: gc-status-glow-dot 1.5s ease-in-out infinite;
  z-index: 1;
}

.gc-toggle.gc-open .gc-toggle-dot { display: none; }

/* ─── UNREAD BADGE ──────────────────────────────────────────────── */

.gc-unread-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--gc-font);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
  animation: gc-badge-pop 0.3s ease;
}

/* ─── NOTIFICATION BUBBLE ──────────────────────────────────────────── */

.gc-bubble {
  position: fixed;
  bottom: 98px;
  right: 24px;
  background: var(--gc-bg);
  border: 1px solid var(--gc-border);
  border-radius: var(--gc-radius);
  padding: 14px 18px;
  max-width: 270px;
  box-shadow: var(--gc-shadow);
  font-family: var(--gc-font);
  font-size: 14px;
  color: var(--gc-text);
  z-index: 99997;
  animation: gc-fade-in 0.3s ease;
  cursor: pointer;
  line-height: 1.45;
}

.gc-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 28px;
  width: 16px;
  height: 16px;
  background: var(--gc-bg);
  border-right: 1px solid var(--gc-border);
  border-bottom: 1px solid var(--gc-border);
  transform: rotate(45deg);
}

.gc-bubble-close {
  position: absolute;
  top: 4px;
  right: 8px;
  background: none;
  border: none;
  font-size: 16px;
  color: var(--gc-text-light);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}

/* ─── CHAT PANEL ───────────────────────────────────────────────────── */

.gc-panel {
  position: fixed;
  bottom: 98px;
  right: 24px;
  width: 420px;
  max-height: 700px;
  background: var(--gc-bg);
  border-radius: var(--gc-radius);
  box-shadow: var(--gc-shadow);
  font-family: var(--gc-font);
  z-index: 99999;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: gc-slide-up 0.25s ease;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.gc-panel.gc-visible { display: flex; }

/* Minimized state (Improvement #17) */
.gc-panel.gc-minimized .gc-messages,
.gc-panel.gc-minimized .gc-quick-replies,
.gc-panel.gc-minimized .gc-privacy,
.gc-panel.gc-minimized .gc-input-area,
.gc-panel.gc-minimized .gc-footer,
.gc-panel.gc-minimized .gc-nav-bar,
.gc-panel.gc-minimized .gc-trust-strip {
  display: none !important;
}

/* ─── HEADER ───────────────────────────────────────────────────────── */

.gc-header {
  background: linear-gradient(135deg, var(--gc-green) 0%, #1e3d0e 100%);
  color: white;
  padding: 10px 10px 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.gc-header-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.25);
  overflow: visible;
}

.gc-header-avatar .gc-avatar-bee {
  width: 36px;
  height: 36px;
  overflow: visible;
  animation: gc-bee-hover 2.5s ease-in-out infinite;
}

/* Fly-in animation when panel opens */
.gc-panel.gc-visible .gc-header-avatar .gc-avatar-bee {
  animation: gc-bee-fly-in 0.6s ease-out forwards, gc-bee-hover 2.5s ease-in-out 0.6s infinite;
}

/* Fly-out animation when panel closes */
.gc-panel.gc-flying-out .gc-header-avatar .gc-avatar-bee {
  animation: gc-bee-fly-out 0.3s ease-in forwards;
}

.gc-header-info {
  flex: 1;
  min-width: 0;
}

.gc-header-name {
  font-size: 13.5px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.gc-header-subtitle {
  font-size: 10px;
  opacity: 0.75;
  margin: 1px 0 0;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gc-header-status {
  font-size: 10px;
  opacity: 0.75;
  margin: 1px 0 0;
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
  white-space: nowrap;
}

.gc-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gc-online);
  display: inline-block;
  box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
  animation: gc-status-glow 1.5s ease-in-out infinite;
}

/* Close button — always visible, prominent on mobile */
.gc-close-btn {
  display: none; /* hidden on desktop, shown on mobile */
}

/* Backdrop overlay for mobile tap-outside-to-close */
.gc-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99996;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gc-backdrop.gc-backdrop-visible {
  display: block;
  opacity: 1;
}

/* Header action buttons (sound, minimize, dock) */
.gc-header-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  align-items: center;
}

.gc-header-actions button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.gc-header-actions button:hover {
  background: rgba(255, 255, 255, 0.22);
  color: white;
}

.gc-header-actions button svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* New Chat / Restart button in header */
.gc-newchat-btn {
  width: auto !important;
  height: 22px !important;
  border-radius: 11px !important;
  padding: 0 7px !important;
  font-size: 9.5px;
  font-weight: 600;
  font-family: var(--gc-font);
  gap: 2px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.gc-newchat-btn svg {
  width: 9px;
  height: 9px;
  fill: currentColor;
  vertical-align: -1px;
  margin-right: 1px;
}

/* ─── BACK / NAV BAR ─────────────────────────────────────────────── */

.gc-nav-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--gc-green-pale);
  border-bottom: 1px solid var(--gc-border);
  flex-shrink: 0;
}

.gc-nav-bar.gc-visible { display: flex; }

.gc-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--gc-border);
  border-radius: 16px;
  padding: 5px 12px 5px 8px;
  font-size: 12px;
  font-family: var(--gc-font);
  color: var(--gc-green);
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: 500;
}

.gc-back-btn:hover {
  background: var(--gc-green);
  color: white;
  border-color: var(--gc-green);
}

.gc-back-btn svg { width: 14px; height: 14px; fill: currentColor; }

.gc-nav-breadcrumb {
  font-size: 11px;
  color: var(--gc-text-light);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gc-restart-btn {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--gc-text-light);
  cursor: pointer;
  padding: 4px 8px;
  font-family: var(--gc-font);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gc-restart-btn:hover { color: var(--gc-green); }

/* ─── MESSAGES ─────────────────────────────────────────────────────── */

.gc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 180px;
  max-height: 420px;
  background: var(--gc-bg-chat);
  scroll-behavior: smooth;
}

.gc-messages::-webkit-scrollbar { width: 4px; }
.gc-messages::-webkit-scrollbar-track { background: transparent; }
.gc-messages::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

.gc-msg {
  max-width: 85%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
  animation: gc-msg-in 0.25s ease;
  position: relative;
  letter-spacing: 0.01em;
}

.gc-msg-bot {
  background: var(--gc-bg);
  color: var(--gc-text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Rich text inside bot messages */
.gc-msg-bot p { margin: 0 0 8px; }
.gc-msg-bot p:last-of-type { margin-bottom: 0; }
.gc-msg-bot strong, .gc-msg-bot b { font-weight: 600; color: var(--gc-text); }
.gc-msg-bot em, .gc-msg-bot i { font-style: italic; }
.gc-msg-bot ul, .gc-msg-bot ol { margin: 6px 0 8px 18px; padding: 0; }
.gc-msg-bot li { margin-bottom: 4px; line-height: 1.5; }

.gc-msg-user {
  background: var(--gc-green);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  font-size: 14px;
}

/* Bot message row with avatar */
.gc-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Message grouping — hide avatar for consecutive bot messages */
.gc-msg-row.gc-msg-grouped {
  margin-top: -4px;
}

.gc-msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8f0e0 0%, #d4e4c6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1.5px solid #c0d6ae;
  box-shadow: 0 1px 4px rgba(45, 80, 22, 0.1);
  overflow: visible;
}

.gc-avatar-spacer {
  background: transparent;
  border: none;
  box-shadow: none;
}

.gc-msg-avatar .gc-mini-bee {
  width: 34px;
  height: 34px;
  overflow: visible;
  animation: gc-bee-hover 3s ease-in-out infinite;
}

/* ─── MESSAGE TIMESTAMPS ──────────────────────────────────────────── */

.gc-msg-time {
  display: block;
  font-size: 10px;
  color: #888;
  margin-top: 4px;
  font-weight: 400;
}

.gc-msg-time-user {
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
}

/* ─── PHONE LINK ──────────────────────────────────────────────────── */

.gc-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gc-green);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}

.gc-phone-link:hover { color: var(--gc-green-light); text-decoration: underline; }
.gc-phone-link svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ─── ERROR STATE + RETRY ─────────────────────────────────────────── */

.gc-msg-error {
  border: 1px dashed #f87171;
  background: #fef2f2;
}

.gc-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: white;
  border: 1px solid #f87171;
  color: #ef4444;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 12px;
  font-family: var(--gc-font);
  font-weight: 500;
  cursor: pointer;
  margin-top: 6px;
  transition: all 0.15s;
}

.gc-retry-btn:hover {
  background: #ef4444;
  color: white;
}

/* ─── LINK BUTTONS (rendered from AI responses) ───────────────────── */

.gc-link-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.gc-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--gc-font);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
  border: 1.5px solid var(--gc-green);
  background: var(--gc-green-pale);
  color: var(--gc-green);
  line-height: 1.3;
  z-index: 1;
}

.gc-link-btn:hover {
  background: var(--gc-green);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(45, 80, 22, 0.25);
}

.gc-link-btn:active {
  transform: translateY(0);
}

.gc-link-btn svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; }

.gc-link-emoji {
  font-size: 14px;
  line-height: 1;
}

/* CTA link button (gold variant for consultation/contact) */
.gc-link-btn--cta {
  border-color: var(--gc-gold);
  background: var(--gc-gold-light);
  color: #8a6d2b;
}

.gc-link-btn--cta:hover {
  background: var(--gc-gold);
  color: white;
  border-color: var(--gc-gold);
  box-shadow: 0 2px 8px rgba(196, 151, 59, 0.3);
}

/* ─── CONSULTATION CTA CARD ───────────────────────────────────────── */

.gc-cta-card {
  background: linear-gradient(135deg, var(--gc-green-pale) 0%, #e8f0e0 100%);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid #d0dfc4;
}

.gc-cta-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gc-green);
  margin-bottom: 4px;
}

.gc-cta-text {
  font-size: 12.5px;
  color: var(--gc-text-light);
  margin: 0 0 10px;
}

.gc-cta-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gc-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--gc-font);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.gc-cta-phone {
  background: var(--gc-green);
  color: white;
  border: none;
}

.gc-cta-phone:hover {
  background: var(--gc-green-light);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(45, 80, 22, 0.25);
}

.gc-cta-phone svg { width: 14px; height: 14px; }

.gc-cta-form {
  background: white;
  color: var(--gc-green);
  border: 1.5px solid var(--gc-green);
}

.gc-cta-form:hover {
  background: var(--gc-green);
  color: white;
  transform: translateY(-1px);
}

.gc-cta-form svg { width: 12px; height: 12px; fill: currentColor; }

/* ─── QUICK REPLIES ────────────────────────────────────────────────── */

.gc-quick-replies {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 6px 14px 10px;
  background: var(--gc-bg-chat);
}

/* When only 2 buttons, side by side is fine */
.gc-quick-replies:has(:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

/* When 3+ buttons, 2-column grid */
.gc-quick-replies:has(:nth-child(3)) {
  grid-template-columns: repeat(2, 1fr);
}

/* Odd last button spans full width */
.gc-quick-replies:has(:nth-child(3)) > .gc-quick-btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.gc-quick-replies:empty { display: none; }

.gc-quick-btn {
  background: white;
  border: 1.5px solid var(--gc-green);
  color: var(--gc-green);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--gc-font);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: normal;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  z-index: 1;
  text-align: center;
}

.gc-quick-btn:hover {
  background: var(--gc-green);
  color: white;
  box-shadow: 0 2px 8px rgba(45, 80, 22, 0.3);
  transform: translateY(-1px);
}

.gc-quick-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(45, 80, 22, 0.2);
}

/* Location quick button variant (gold) */
.gc-quick-btn--location {
  border-color: var(--gc-gold);
  color: #8a6d2b;
}

.gc-quick-btn--location:hover {
  background: var(--gc-gold);
  color: white;
  border-color: var(--gc-gold);
}

/* Consultation CTA quick button variant — stands out as primary action */
.gc-quick-btn--cta {
  background: var(--gc-green);
  color: white;
  border-color: var(--gc-green);
  flex-basis: 100%;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 14px;
  box-shadow: 0 2px 8px rgba(45, 80, 22, 0.25);
  order: 99; /* always last */
}

.gc-quick-btn--cta:hover {
  background: var(--gc-green-light);
  border-color: var(--gc-green-light);
  box-shadow: 0 3px 12px rgba(45, 80, 22, 0.35);
  transform: translateY(-1px);
}

.gc-quick-btn--fresh {
  background: transparent;
  color: var(--gc-muted);
  border: 1px dashed var(--gc-border);
  font-size: 12px;
  flex-basis: 100%;
  order: 100;
}

.gc-quick-btn--fresh:hover {
  background: var(--gc-green-pale);
  border-color: var(--gc-green);
  color: var(--gc-green);
  border-style: solid;
}

/* ─── v3.5 CRO: QUALIFIER BUTTONS ─────────────────────────────────── */

.gc-qual-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--gc-green);
  border-radius: 12px;
  background-color: #ffffff;
  background-image: none;
  color: #1a1a1a;
  font-family: var(--gc-font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  animation: gc-btn-appear 0.3s ease both;
  text-align: left;
  letter-spacing: -0.01em;
}

.gc-qual-btn:hover {
  background-color: var(--gc-green);
  background-image: none;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(45, 80, 22, 0.35);
}

/* Pillar buttons with title + description */
.gc-qual-btn--pillar {
  align-items: flex-start;
}
.gc-qual-btn--pillar .gc-qual-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gc-qual-btn--pillar .gc-qual-title {
  font-weight: 700;
  font-size: 14px;
}
.gc-qual-btn--pillar .gc-qual-desc {
  font-weight: 400;
  font-size: 11px;
  opacity: 0.65;
  line-height: 1.3;
}
.gc-qual-btn--pillar:hover .gc-qual-desc {
  opacity: 0.85;
}

.gc-qual-btn:active {
  transform: translateY(0);
}

.gc-qual-btn--hot {
  border-color: var(--gc-green);
  background-color: #eef5e8;
  background-image: linear-gradient(135deg, #f2f7ee, #e8f0e2);
  color: #1a1a1a;
}

.gc-qual-btn--hot:hover {
  background-color: var(--gc-green);
  background-image: none;
  color: #ffffff;
}

.gc-qual-btn--cold {
  border-color: #b0b0a8;
  background-color: #f8f8f5;
  background-image: none;
  color: #1a1a1a;
}

.gc-qual-btn--cold:hover {
  background-color: var(--gc-green);
  background-image: none;
  border-color: var(--gc-green);
  color: #ffffff;
}

.gc-qual-icon {
  font-size: 20px;
  flex-shrink: 0;
}

@keyframes gc-btn-appear {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── v3.5 CRO: VALUE EXCHANGE CARD ──────────────────────────────── */

.gc-value-exchange {
  padding: 4px 0;
}

.gc-value-header {
  font-size: 15px;
  font-weight: 700;
  color: var(--gc-text);
  margin-bottom: 6px;
}

.gc-value-desc {
  font-size: 13px;
  color: var(--gc-text-light);
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.gc-value-desc strong {
  color: var(--gc-green);
  font-weight: 700;
}

.gc-value-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gc-value-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--gc-border);
  border-radius: 8px;
  font-family: var(--gc-font);
  font-size: 13px;
  color: var(--gc-text);
  background-color: var(--gc-bg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.gc-value-input:focus {
  outline: none;
  border-color: var(--gc-green);
  box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.12);
}

.gc-value-input::placeholder {
  color: var(--gc-muted);
}

.gc-value-submit {
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: var(--gc-green);
  color: white;
  font-family: var(--gc-font);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(45, 80, 22, 0.25);
}

.gc-value-submit:hover:not(:disabled) {
  background: var(--gc-green-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(45, 80, 22, 0.35);
}

.gc-value-submit:disabled {
  background: var(--gc-border);
  color: var(--gc-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.gc-value-privacy {
  font-size: 10.5px;
  color: var(--gc-muted);
  text-align: center;
  margin: 6px 0 0 0;
  opacity: 0.7;
}

/* Portfolio nudge dismiss button */
.gc-portfolio-dismiss {
  display: block;
  width: 100%;
  padding: 6px 0;
  margin-top: 4px;
  background: none;
  border: none;
  color: var(--gc-text-light);
  font-size: 12px;
  font-family: var(--gc-font);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.gc-portfolio-dismiss:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Browse services divider */
.gc-browse-divider {
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: var(--gc-text-light);
  padding: 6px 0 2px;
  opacity: 0.6;
  letter-spacing: 0.02em;
}

/* Value exchange success state */
.gc-value-thanks {
  text-align: center;
  padding: 8px 0;
}

.gc-value-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gc-green);
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 6px;
}

.gc-value-thanks strong {
  display: block;
  font-size: 14px;
  color: var(--gc-text);
  margin-bottom: 4px;
}

.gc-value-thanks p {
  font-size: 12px;
  color: var(--gc-text-light);
  margin: 0;
  line-height: 1.4;
}

/* ─── SATISFACTION RATING ─────────────────────────────────────────── */

.gc-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  margin: 6px 16px;
  background: var(--gc-green-pale);
  border: 1px solid var(--gc-border);
  border-radius: 12px;
  animation: gc-fade-in 0.3s ease;
}

.gc-rating-label {
  font-size: 12px;
  color: var(--gc-text);
  font-weight: 500;
}

.gc-rating-btn {
  background: white;
  border: 1.5px solid var(--gc-green);
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  color: var(--gc-green);
}

.gc-rating-up:hover {
  background: var(--gc-green);
  color: white;
  box-shadow: 0 3px 10px rgba(45, 80, 22, 0.2);
  transform: scale(1.05);
}

.gc-rating-down:hover {
  background: var(--gc-green-pale);
  border-color: var(--gc-muted);
  color: var(--gc-muted);
  transform: scale(1.05);
}

.gc-rating-thanks {
  font-size: 13px;
  color: var(--gc-green);
  font-weight: 600;
}

/* ─── TYPING INDICATOR ─────────────────────────────────────────────── */

.gc-typing-row {
  display: none;
  align-items: flex-start;
  gap: 8px;
}

.gc-typing-row.gc-visible { display: flex; }

.gc-typing {
  padding: 10px 14px;
  background: var(--gc-bg);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  gap: 4px;
  align-items: center;
}

.gc-dot {
  width: 6px;
  height: 6px;
  background: var(--gc-green);
  border-radius: 50%;
  opacity: 0.4;
  animation: gc-bounce 1.2s infinite;
}

.gc-dot:nth-child(2) { animation-delay: 0.2s; }
.gc-dot:nth-child(3) { animation-delay: 0.4s; }

/* ─── INPUT ────────────────────────────────────────────────────────── */

.gc-input-area {
  border-top: 1px solid var(--gc-border);
  padding: 10px 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  background: var(--gc-bg);
}

.gc-input-wrap {
  flex: 1;
  position: relative;
}

.gc-input {
  width: 100%;
  border: 1.5px solid var(--gc-border);
  border-radius: 22px;
  padding: 10px 56px 10px 16px;
  font-size: 14px;
  font-family: var(--gc-font);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background: var(--gc-bg-chat);
  box-sizing: border-box;
  color: var(--gc-text);
}

.gc-input:focus {
  border-color: var(--gc-green);
  background: white;
  box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.08);
}

/* Character counter */
.gc-char-count {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #bbb;
  font-family: var(--gc-font);
  pointer-events: none;
  transition: color 0.15s, opacity 0.15s;
  opacity: 0;
}

.gc-char-count.gc-char-visible { opacity: 1; }
.gc-char-count.gc-char-warn { color: #f59e0b; opacity: 1; }
.gc-char-count.gc-char-over { color: #ef4444; font-weight: 600; opacity: 1; }

.gc-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gc-green);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(45, 80, 22, 0.3);
}

.gc-send:hover {
  background: var(--gc-green-light);
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(45, 80, 22, 0.4);
}

.gc-send:disabled {
  background: #8a9e7a;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.5;
}

.gc-send svg {
  width: 18px;
  height: 18px;
  fill: white !important;
  display: block;
}

.gc-send:disabled svg {
  fill: #888 !important;
}

/* ─── FOOTER ───────────────────────────────────────────────────────── */

.gc-footer {
  text-align: center;
  padding: 6px;
  font-size: 10px;
  color: var(--gc-text-light);
  border-top: 1px solid var(--gc-border);
  flex-shrink: 0;
  background: var(--gc-bg);
}

.gc-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--gc-text-light);
  text-decoration: none;
  transition: color 0.15s;
}

.gc-footer-link:hover { color: var(--gc-green); }

.gc-footer-link svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

/* ─── PRIVACY NOTICE ───────────────────────────────────────────────── */

.gc-privacy {
  font-size: 10.5px;
  color: var(--gc-text-light);
  text-align: center;
  padding: 4px 14px 5px;
  line-height: 1.3;
  background: var(--gc-bg-chat);
}

/* ─── ANIMATIONS ───────────────────────────────────────────────────── */

@keyframes gc-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gc-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gc-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@keyframes gc-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gc-pulse-ring {
  0%, 100% { box-shadow: 0 4px 20px rgba(45, 80, 22, 0.35), 0 0 0 0 rgba(45, 80, 22, 0.2); }
  50% { box-shadow: 0 4px 20px rgba(45, 80, 22, 0.35), 0 0 0 8px rgba(45, 80, 22, 0); }
}

@keyframes gc-status-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.6), 0 0 12px rgba(34, 197, 94, 0.3); }
  50% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.8), 0 0 20px rgba(34, 197, 94, 0.5); }
}

@keyframes gc-status-glow-dot {
  0%, 100% { box-shadow: 0 0 4px rgba(34, 197, 94, 0.5); }
  50% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.8), 0 0 14px rgba(34, 197, 94, 0.4); }
}

/* Bee flutter animation — subtle hovering/fluttering */
@keyframes gc-bee-hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes gc-bee-flutter {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-1.5px) rotate(2deg); }
  50% { transform: translateY(-3px) rotate(0deg); }
  75% { transform: translateY(-1.5px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Bee fly-in: enters from right, wiggles in */
@keyframes gc-bee-fly-in {
  0% { transform: translateX(60px) translateY(10px) rotate(15deg) scale(0.3); opacity: 0; }
  30% { transform: translateX(20px) translateY(-5px) rotate(-8deg) scale(0.8); opacity: 0.7; }
  60% { transform: translateX(-5px) translateY(3px) rotate(5deg) scale(1.1); opacity: 1; }
  80% { transform: translateX(3px) translateY(-2px) rotate(-2deg) scale(1); }
  100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); opacity: 1; }
}

/* Bee fly-out: exits to the right */
@keyframes gc-bee-fly-out {
  0% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
  50% { transform: translateX(10px) translateY(-8px) rotate(10deg) scale(0.9); opacity: 0.8; }
  100% { transform: translateX(70px) translateY(15px) rotate(20deg) scale(0.3); opacity: 0; }
}

@keyframes gc-wing-flutter-l {
  0% { transform: rotate(-20deg) scaleY(1); }
  100% { transform: rotate(-35deg) scaleY(0.8); }
}
@keyframes gc-wing-flutter-r {
  0% { transform: rotate(20deg) scaleY(1); }
  100% { transform: rotate(35deg) scaleY(0.8); }
}

@keyframes gc-badge-pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ─── MOBILE ───────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .gc-panel {
    width: calc(100vw - 16px);
    right: 8px;
    left: 8px;
    bottom: 8px;
    max-height: 80dvh;
    border-radius: 16px;
  }

  .gc-panel.gc-visible {
    position: fixed;
    top: auto;
    bottom: 8px;
    max-height: 80dvh;
    height: 80dvh;
  }

  .gc-toggle {
    bottom: 16px;
    right: 16px;
    width: 54px;
    height: 54px;
  }

  .gc-toggle.gc-open {
    display: none;
  }

  /* Show close button on mobile */
  .gc-close-btn {
    display: flex !important;
    width: 28px !important;
    height: 28px !important;
    background: rgba(255, 255, 255, 0.2) !important;
  }
  .gc-close-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Hide dock button on mobile — not useful */
  .gc-dock-btn {
    display: none !important;
  }

  .gc-bubble {
    right: 12px;
    bottom: 80px;
    max-width: calc(100vw - 80px);
  }

  .gc-header {
    padding: 10px 8px 10px 12px;
    gap: 6px;
    border-radius: 16px 16px 0 0;
  }

  .gc-header-avatar {
    width: 38px;
    height: 38px;
  }

  .gc-header-avatar .gc-avatar-bee {
    width: 32px;
    height: 32px;
  }

  .gc-header-name {
    font-size: 13px;
  }

  .gc-header-subtitle {
    font-size: 9.5px;
  }

  .gc-header-status {
    font-size: 9.5px;
  }

  .gc-header-actions button {
    width: 32px;
    height: 32px;
  }

  .gc-header-actions button svg {
    width: 16px;
    height: 16px;
  }

  .gc-newchat-btn {
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 10px;
  }

  .gc-trust-strip {
    font-size: 10px;
    padding: 4px 10px;
    gap: 3px;
  }

  .gc-messages {
    padding: 8px 10px;
  }

  .gc-msg {
    font-size: 13px;
    padding: 9px 12px;
  }

  .gc-quick-replies {
    padding: 5px 10px 7px;
  }

  .gc-quick-btn {
    padding: 7px 10px;
    font-size: 11px;
    word-break: break-word;
  }

  .gc-input-area {
    padding: 6px 8px;
  }

  .gc-footer {
    padding: 5px 10px;
    font-size: 9.5px;
  }

  .gc-starter-card {
    padding: 6px 8px;
    gap: 6px;
  }

  .gc-starter-icon {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }

  .gc-starter-info strong {
    font-size: 11.5px;
  }

  .gc-starter-info small {
    font-size: 10px;
  }

  /* Docked mode on mobile = full screen */
  #gc-chat-widget.gc-docked .gc-panel {
    width: 100vw;
    left: 0;
  }

  .gc-messages {
    max-height: none;
    flex: 1;
  }

  .gc-link-btn {
    font-size: 12px;
    padding: 6px 11px;
  }

  /* Swipe hint — subtle grab bar on header */
  .gc-header::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
  }
  .gc-header {
    position: relative;
  }

}

/* ═══════════════════════════════════════════════════════════════════ */
/* ─── v3.0 FEATURES ──────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════ */

/* ─── TRUST BADGE STRIP (#14) ─────────────────────────────────────── */

.gc-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #f0f5ec 0%, #e8f0e0 100%);
  border-bottom: 1px solid var(--gc-border);
  font-size: 11px;
  font-family: var(--gc-font);
  color: var(--gc-green);
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Trust strip SVG icons */
.gc-trust-icon {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  display: inline-block;
  margin-right: 1px;
}

/* ─── RESPONSE TIME INDICATOR (#3) ─────────────────────────────────── */

.gc-response-time {
  font-weight: 400;
  opacity: 0.8;
}

/* ─── QUICK-REPLY STAGGER ANIMATION (#4) ──────────────────────────── */

.gc-quick-btn {
  animation: gc-stagger-in 0.3s ease both;
}

@keyframes gc-stagger-in {
  from { opacity: 0; transform: translateY(6px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── ROTATING PLACEHOLDER (#5) ───────────────────────────────────── */

.gc-input.gc-placeholder-fade::placeholder {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gc-input::placeholder {
  transition: opacity 0.2s ease;
}

/* ─── READ RECEIPTS (#11) ─────────────────────────────────────────── */

.gc-read-receipt {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.5;
  letter-spacing: -1px;
}

.gc-read-receipt.gc-read {
  color: #22c55e;
  opacity: 0.8;
}

/* ─── PEOPLE ALSO ASK (#12) ───────────────────────────────────────── */

.gc-also-ask {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  animation: gc-fade-in 0.3s ease;
}

.gc-also-ask-label {
  font-size: 11px;
  color: var(--gc-text-light);
  font-weight: 500;
  font-family: var(--gc-font);
  margin-bottom: 2px;
  padding-left: 46px;
}

.gc-also-ask-btn {
  background: white;
  border: 1px solid var(--gc-border);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-family: var(--gc-font);
  color: var(--gc-green);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  margin-left: 46px;
  max-width: calc(100% - 60px);
  z-index: 1;
  position: relative;
}

.gc-also-ask-btn:hover {
  background: var(--gc-green-pale);
  border-color: var(--gc-green);
  transform: translateX(2px);
}

/* ─── SMART LEAD NUDGE (#1) ────────────────────────────────────────── */

.gc-lead-nudge {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, var(--gc-gold-light) 0%, #fdf6e8 100%);
  border-radius: 10px;
  border: 1px solid #e8d5a8;
  animation: gc-fade-in 0.3s ease;
}

.gc-lead-nudge-text {
  flex: 1;
  min-width: 0;
}

.gc-lead-nudge-text strong {
  display: inline;
  font-size: 11.5px;
  color: var(--gc-text);
  font-family: var(--gc-font);
}

.gc-lead-nudge-text span {
  font-size: 11px;
  color: var(--gc-text-light);
  font-family: var(--gc-font);
}

.gc-lead-nudge-btn {
  background: var(--gc-green);
  color: white;
  border: none;
  border-radius: 16px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--gc-font);
  cursor: pointer;
  transition: all 0.15s;
}

.gc-lead-nudge-btn:hover {
  background: var(--gc-green-light);
  transform: translateY(-1px);
}

.gc-lead-nudge-dismiss {
  background: none;
  border: none;
  color: var(--gc-text-light);
  font-size: 11px;
  font-family: var(--gc-font);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── MULTI-STEP LEAD FORM (#10) ─────────────────────────────────── */

.gc-lead-form {
  padding: 12px;
  animation: gc-fade-in 0.3s ease;
}

.gc-lead-form-step {
  display: none;
  flex-direction: column;
  gap: 8px;
}

.gc-lead-form-step.gc-lead-step-active {
  display: flex;
  animation: gc-fade-in 0.2s ease;
}

.gc-lead-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gc-green);
  font-family: var(--gc-font);
}

.gc-lead-input {
  border: 1.5px solid var(--gc-border);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-family: var(--gc-font);
  outline: none;
  transition: border-color 0.15s;
  background: white;
}

.gc-lead-input:focus {
  border-color: var(--gc-green);
  box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.08);
}

.gc-lead-next {
  align-self: flex-end;
  background: var(--gc-green);
  color: white;
  border: none;
  border-radius: 16px;
  padding: 7px 20px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--gc-font);
  cursor: pointer;
  transition: all 0.15s;
}

.gc-lead-next:hover {
  background: var(--gc-green-light);
  transform: translateY(-1px);
}

.gc-lead-thanks {
  text-align: center;
  padding: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gc-green);
  font-family: var(--gc-font);
  animation: gc-fade-in 0.3s ease;
}

/* ─── CONVERSATION STARTER CARDS (#16) ─────────────────────────────── */

.gc-starter-cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}

.gc-starter-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--gc-border);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  font-family: var(--gc-font);
  animation: gc-stagger-in 0.3s ease both;
  position: relative;
  z-index: 1;
}

.gc-starter-card:hover {
  border-color: var(--gc-green);
  background: var(--gc-green-pale);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(45, 80, 22, 0.1);
}

.gc-starter-icon {
  flex-shrink: 0;
}

.gc-starter-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gc-starter-info strong {
  font-size: 12px;
  color: var(--gc-text);
  font-weight: 600;
  line-height: 1.2;
}

.gc-starter-info small {
  font-size: 10.5px;
  color: var(--gc-text-light);
  line-height: 1.25;
}

/* ─── PROGRESSIVE DISCLOSURE (#17) ─────────────────────────────────── */

.gc-msg-bot.gc-msg-collapsed {
  max-height: 120px;
  overflow: hidden;
  position: relative;
}

.gc-msg-bot.gc-msg-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, white);
  pointer-events: none;
}

.gc-show-more-btn {
  background: none;
  border: none;
  color: var(--gc-green);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--gc-font);
  cursor: pointer;
  padding: 2px 0;
  margin-left: 46px;
  transition: color 0.15s;
}

.gc-show-more-btn:hover {
  color: var(--gc-green-light);
  text-decoration: underline;
}

/* ─── SHARE TRANSCRIPT (#18) ──────────────────────────────────────── */

.gc-share-btn {
  background: none;
  border: none;
  color: var(--gc-text-light);
  font-size: 10px;
  font-family: var(--gc-font);
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.15s;
}

.gc-share-btn:hover {
  color: var(--gc-green);
}

.gc-share-icon {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  display: inline-block;
  margin-right: 1px;
}

.gc-footer-sep {
  color: var(--gc-border);
  font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* ─── v3.5 POLISH & FIXES ───────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════ */

/* ─── INLINE LINK STYLE (for external links rendered in messages) ── */

.gc-inline-link {
  color: var(--gc-green);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  transition: color 0.15s;
}

.gc-inline-link:hover {
  color: var(--gc-green-light);
}

/* ─── TYPING INDICATOR AVATAR PULSE ────────────────────────────── */

.gc-avatar-typing {
  animation: gc-avatar-pulse 1.2s ease-in-out infinite !important;
}

.gc-header-avatar.gc-typing-pulse {
  animation: gc-avatar-pulse 1.2s ease-in-out infinite;
}

@keyframes gc-avatar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 80, 22, 0.2); }
  50% { box-shadow: 0 0 0 6px rgba(45, 80, 22, 0); }
}

/* ─── SCROLL-TO-BOTTOM BUTTON ──────────────────────────────────── */

.gc-scroll-bottom {
  display: none;
  position: absolute;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gc-green);
  color: white;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(45, 80, 22, 0.3);
  z-index: 2;
  transition: all 0.2s ease;
  align-items: center;
  justify-content: center;
}

.gc-scroll-bottom.gc-visible {
  display: flex;
  animation: gc-fade-in 0.2s ease;
}

.gc-scroll-bottom:hover {
  background: var(--gc-green-light);
  transform: translateX(-50%) scale(1.1);
}

/* ─── HEADER SHIMMER EFFECT ────────────────────────────────────── */

.gc-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: gc-header-shimmer 8s ease-in-out infinite;
  pointer-events: none;
}

.gc-header {
  position: relative;
  overflow: hidden;
}

@keyframes gc-header-shimmer {
  0%, 100% { left: -100%; }
  40%, 60% { left: 200%; }
}

/* ─── BETTER INPUT FOCUS GLOW ──────────────────────────────────── */

.gc-input:focus {
  border-color: var(--gc-green);
  background: white;
  box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.1), 0 1px 3px rgba(0,0,0,0.05);
}

/* ─── QUICK REPLY HOVER RIPPLE ──────────────────────────────────── */

.gc-quick-btn {
  position: relative;
  overflow: hidden;
}

.gc-quick-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(45, 80, 22, 0.08);
  transition: width 0.3s ease, height 0.3s ease, top 0.3s ease, left 0.3s ease;
  pointer-events: none; /* CRITICAL: don't block clicks */
}

.gc-quick-btn:hover::after {
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
}

/* Avatar tooltip removed — was interfering with layout */

/* ─── LINK BUTTON (additional styles) ──────────────────────────── */

/* ─── SMOOTHER MESSAGE ENTRANCE ────────────────────────────────── */

@keyframes gc-msg-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── BETTER ORDERED LIST RENDERING ────────────────────────────── */

.gc-msg-bot ol {
  margin: 4px 0 6px 16px;
  padding: 0;
  list-style-type: decimal;
}

/* ─── MOBILE: SAFE AREA INSETS (notch phones) ──────────────────── */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 480px) {
    .gc-input-area {
      padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    .gc-toggle {
      bottom: calc(16px + env(safe-area-inset-bottom));
    }
  }
}

/* ─── DARK MODE SUPPORT ────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --gc-bg: #1a1a1a;
    --gc-bg-chat: #222222;
    --gc-text: #ececec;
    --gc-text-light: #b0b0b0;
    --gc-border: #3a3a3a;
    --gc-green-pale: #1a2e12;
    --gc-gold-light: #2e2818;
  }

  .gc-panel {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .gc-msg-bot {
    background: #2c2c2c;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    color: var(--gc-text);
  }

  .gc-msg-bot strong, .gc-msg-bot b {
    color: #f0f0f0;
  }

  .gc-msg-bot.gc-msg-collapsed::after {
    background: linear-gradient(transparent, #2c2c2c);
  }

  .gc-msg-user {
    background: var(--gc-green);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }

  .gc-msg-time {
    color: #999;
  }

  .gc-quick-btn {
    background: #2c2c2c;
    border-color: var(--gc-green);
    color: #7cc25e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  }

  .gc-quick-btn:hover {
    background: var(--gc-green);
    color: white;
  }

  .gc-quick-btn--location {
    border-color: var(--gc-gold);
    color: #d4b050;
  }

  .gc-quick-btn--location:hover {
    background: var(--gc-gold);
    color: white;
  }

  .gc-link-btn {
    background: #1e2e16;
    border-color: #4a7a2e;
    color: #7cc25e;
  }

  .gc-link-btn:hover {
    background: var(--gc-green);
    color: white;
  }

  .gc-link-btn--cta {
    background: #2a2410;
    border-color: #8a6d2b;
    color: #d4b050;
  }

  .gc-link-btn--cta:hover {
    background: var(--gc-gold);
    color: white;
  }

  .gc-typing {
    background: #2c2c2c;
  }

  .gc-input {
    background: #2a2a2a;
    color: var(--gc-text);
    border-color: #444;
  }

  .gc-input::placeholder {
    color: #888;
  }

  .gc-input:focus {
    background: #303030;
    border-color: var(--gc-green);
    box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .gc-send {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }

  .gc-send:disabled {
    background: #555;
    opacity: 0.5;
  }

  .gc-char-count {
    color: #666;
  }

  .gc-header::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  }

  .gc-trust-strip {
    background: linear-gradient(135deg, #1a2e12 0%, #1e3d0e 100%);
    border-bottom-color: #2a3a22;
    color: #7cc25e;
  }

  .gc-msg-avatar {
    background: linear-gradient(135deg, #1e3d0e 0%, #2a4a18 100%);
    border-color: #3a5a2a;
  }

  .gc-starter-card {
    background: #2c2c2c;
    border-color: #404040;
  }

  .gc-starter-card:hover {
    background: var(--gc-green-pale);
    border-color: var(--gc-green);
  }

  .gc-starter-icon {
    background: #1e3d0e;
    color: #7cc25e;
  }

  .gc-starter-card:hover .gc-starter-icon {
    background: var(--gc-green);
    color: #fff;
  }

  .gc-starter-info strong {
    color: #ececec;
  }

  .gc-starter-info small {
    color: #b0b0b0;
  }

  .gc-lead-nudge {
    background: linear-gradient(135deg, #2e2818 0%, #352f1c 100%);
    border-color: #4a4230;
  }

  .gc-lead-nudge-text strong {
    color: #ececec;
  }

  .gc-lead-input {
    background: #2a2a2a;
    color: var(--gc-text);
    border-color: #444;
  }

  .gc-lead-input:focus {
    border-color: var(--gc-green);
  }

  .gc-cta-card {
    background: linear-gradient(135deg, #1a2e12 0%, #1e3d0e 100%);
    border-color: #2a4a18;
  }

  .gc-cta-title {
    color: #7cc25e;
  }

  .gc-cta-text {
    color: #b0b0b0;
  }

  .gc-privacy {
    background: var(--gc-bg-chat);
    color: #888;
  }

  .gc-footer {
    background: var(--gc-bg);
    border-top-color: var(--gc-border);
  }

  .gc-footer-link {
    color: #888;
  }

  .gc-share-btn {
    color: #888;
  }

  .gc-nav-bar {
    background: #1a2a14;
    border-bottom-color: #2a3a22;
  }

  .gc-back-btn {
    border-color: #3a5a2a;
    color: #7cc25e;
  }

  .gc-back-btn:hover {
    background: var(--gc-green);
    color: white;
  }

  .gc-restart-btn {
    color: #888;
  }

  .gc-nav-breadcrumb {
    color: #888;
  }

  .gc-also-ask-btn {
    background: #2c2c2c;
    border-color: #404040;
    color: #7cc25e;
  }

  .gc-also-ask-btn:hover {
    background: var(--gc-green-pale);
    border-color: var(--gc-green);
  }

  .gc-also-ask-label {
    color: #999;
  }

  .gc-rating-btn {
    background: #1a2e12;
    border-color: var(--gc-green);
    color: #7cc25e;
  }

  .gc-rating-label {
    color: #ccc;
  }

  .gc-show-more-btn {
    color: #7cc25e;
  }

  .gc-bubble {
    background: #2c2c2c;
    border-color: #404040;
    color: var(--gc-text);
  }

  .gc-bubble::after {
    background: #2c2c2c;
    border-color: #404040;
  }

  .gc-bubble-close {
    color: #888;
  }

  .gc-phone-link {
    color: #7cc25e;
  }

  .gc-inline-link {
    color: #7cc25e;
  }

  .gc-msg-error {
    border-color: #b91c1c;
    background: #2a1a1a;
  }

  .gc-retry-btn {
    background: #2a2a2a;
    border-color: #b91c1c;
    color: #f87171;
  }

  .gc-retry-btn:hover {
    background: #b91c1c;
    color: white;
  }

  .gc-scroll-bottom {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  .gc-lead-thanks {
    color: #7cc25e;
  }

  .gc-rating-thanks {
    color: #7cc25e;
  }

  .gc-lead-label {
    color: #7cc25e;
  }

  /* Dark mode scrollbar */
  .gc-messages::-webkit-scrollbar-thumb {
    background: #555;
  }

  /* ─── v3.5 CRO: Qualifier buttons in dark mode ─── */
  .gc-qual-btn {
    background-color: #2c2c2c !important;
    background-image: none !important;
    color: #ececec !important;
    border-color: #4a7a2e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .gc-qual-btn:hover {
    background-color: var(--gc-green) !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(45, 80, 22, 0.5);
  }

  .gc-qual-btn--hot {
    background-color: #1e3d0e !important;
    background-image: none !important;
    border-color: #4a7a2e;
    color: #b5e89d !important;
  }

  .gc-qual-btn--hot:hover {
    background-color: var(--gc-green) !important;
    background-image: none !important;
    color: #ffffff !important;
  }

  .gc-qual-btn--cold {
    background-color: #2a2a2a !important;
    background-image: none !important;
    border-color: #555;
    color: #cccccc !important;
  }

  .gc-qual-btn--cold:hover {
    background-color: var(--gc-green) !important;
    background-image: none !important;
    border-color: var(--gc-green);
    color: #ffffff !important;
  }

  /* Value exchange card in dark mode */
  .gc-value-header {
    color: #ececec !important;
  }

  .gc-value-desc {
    color: #b0b0b0 !important;
  }

  .gc-value-desc strong {
    color: #7cc25e !important;
  }

  .gc-value-input {
    background-color: #2a2a2a !important;
    color: #ececec !important;
    border-color: #444;
  }

  .gc-value-input:focus {
    background-color: #303030 !important;
    border-color: var(--gc-green);
  }

  .gc-value-input::placeholder {
    color: #888;
  }

  .gc-value-submit:disabled {
    background-color: #444 !important;
    color: #888 !important;
  }

  .gc-value-privacy {
    color: #777;
  }

  .gc-value-thanks strong {
    color: #ececec;
  }

  .gc-value-thanks p {
    color: #b0b0b0;
  }

  .gc-value-check {
    background-color: var(--gc-green);
  }
}

/* ─── REDUCED MOTION SUPPORT ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .gc-toggle,
  .gc-toggle .gc-bee-icon,
  .gc-msg,
  .gc-quick-btn,
  .gc-starter-card,
  .gc-msg-avatar .gc-mini-bee,
  .gc-header-avatar .gc-avatar-bee,
  .gc-status-dot,
  .gc-toggle-dot,
  .gc-header::after {
    animation: none !important;
    transition: none !important;
  }

  .gc-panel {
    animation: none !important;
  }

  .gc-scroll-bottom,
  .gc-link-btn,
  .gc-quick-btn {
    transition: background-color 0.1s !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* ─── v4.0 ADDITIONAL UI/UX IMPROVEMENTS ─────────────────────── */
/* ═══════════════════════════════════════════════════════════════════ */

/* Improvement 1: Better message spacing & grouping */
.gc-msg-row + .gc-msg-row:not(.gc-msg-grouped) {
  margin-top: 4px;
}

.gc-msg-user + .gc-msg-row {
  margin-top: 8px;
}

/* Improvement 2: Smooth hover transitions on all interactive elements */
.gc-quick-btn,
.gc-link-btn,
.gc-also-ask-btn,
.gc-starter-card,
.gc-cta-btn,
.gc-back-btn,
.gc-rating-btn,
.gc-lead-nudge-btn,
.gc-lead-next,
.gc-retry-btn,
.gc-show-more-btn,
.gc-share-btn {
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Improvement 3: Better send button active/pressed state */
.gc-send:active:not(:disabled) {
  transform: scale(0.92);
  box-shadow: 0 1px 3px rgba(45, 80, 22, 0.2);
}

/* Improvement 4: Subtle gradient on user messages for depth */
.gc-msg-user {
  background: linear-gradient(135deg, var(--gc-green) 0%, #264612 100%);
}

/* Improvement 5: Better link button icon alignment */
.gc-link-btn svg {
  transition: transform 0.2s ease;
}

.gc-link-btn:hover svg {
  transform: translateX(2px);
}

/* Improvement 6: Animated trust strip entrance */
.gc-trust-strip {
  animation: gc-trust-slide 0.4s ease 0.2s both;
}

@keyframes gc-trust-slide {
  from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
  to { opacity: 1; max-height: 40px; padding-top: 6px; padding-bottom: 6px; }
}

/* Improvement 7: Better CTA button hover effects */
.gc-cta-phone:active {
  transform: scale(0.97);
}

.gc-cta-form:active {
  transform: scale(0.97);
}

/* Improvement 8: Subtler nav bar with frosted effect */
.gc-nav-bar {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Improvement 9: Input focus ring animation */
@keyframes gc-focus-ring {
  0% { box-shadow: 0 0 0 0 rgba(45, 80, 22, 0.3); }
  100% { box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.1), 0 1px 3px rgba(0,0,0,0.05); }
}

.gc-input:focus {
  animation: gc-focus-ring 0.2s ease forwards;
}

/* Improvement 10: Starter card icon container — inline SVG icons */
.gc-starter-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--gc-green-pale);
  border-radius: 8px;
  transition: all 0.18s ease;
  color: var(--gc-green);
  padding: 5px;
}

.gc-starter-icon svg {
  width: 100%;
  height: 100%;
}

.gc-starter-card:hover .gc-starter-icon {
  background: var(--gc-green);
  color: white;
  transform: scale(1.1);
}

/* Improvement 11: Better consultation CTA card styling */
.gc-cta-card {
  border-radius: 14px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.gc-cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: rgba(45, 80, 22, 0.06);
  border-radius: 50%;
  transform: translate(20px, -20px);
  pointer-events: none;
}

/* Improvement 12: Better lead form styling */
.gc-lead-form {
  background: var(--gc-green-pale);
  border-radius: 12px;
  border: 1px solid var(--gc-border);
}

.gc-lead-label {
  font-size: 13.5px;
}

.gc-lead-next {
  padding: 8px 22px;
  font-size: 13px;
  border-radius: 18px;
}

/* Improvement 13: Better footer spacing */
.gc-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 10.5px;
}

/* Improvement 14: Better character counter visibility */
.gc-char-count {
  font-size: 9px;
  letter-spacing: 0.02em;
  right: 14px;
}

/* Improvement 15: Better error message styling */
.gc-msg-error {
  border-style: solid;
  border-width: 1px;
  border-left-width: 3px;
}

/* Improvement 16: Better privacy text line height */
.gc-privacy {
  line-height: 1.4;
  padding: 5px 16px 6px;
}

/* Improvement 17: (merged into header base styles) */

/* Improvement 18: Better quick reply container padding */
.gc-quick-replies {
  padding: 6px 12px 8px;
  gap: 5px;
}

/* Improvement 19: Smoother panel open animation */
@keyframes gc-slide-up {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Improvement 20: Better scroll-to-bottom button */
.gc-scroll-bottom {
  width: 34px;
  height: 34px;
  font-size: 16px;
  bottom: 145px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ─── DARK MODE OVERRIDES FOR v4.0 IMPROVEMENTS ──────────────── */
/* Must come AFTER improvement blocks to win specificity */

@media (prefers-color-scheme: dark) {
  .gc-starter-icon {
    background: #1e3d0e;
    color: #7cc25e;
  }

  .gc-starter-card:hover .gc-starter-icon {
    background: #3a6b1e;
    color: #fff;
  }

  .gc-cta-card::before {
    background: rgba(124, 194, 94, 0.08);
  }

  .gc-lead-form {
    background: #1a2e12;
    border-color: #2a3a22;
  }

  #gc-chat-widget.gc-docked .gc-panel {
    border-right-color: rgba(255, 255, 255, 0.08);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  }
}

/* ─── DOCKED MODE (left-side panel) ──────────────────────────── */

#gc-chat-widget.gc-docked .gc-toggle {
  display: none;
}

#gc-chat-widget.gc-docked .gc-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: auto;
  width: 380px;
  max-height: none;
  height: 100dvh;
  border-radius: 0;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  animation: gc-dock-slide 0.3s ease;
  border: none;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* Docked mode: hide the external quick-replies container.
   Quick reply buttons are moved INSIDE .gc-messages when docked
   so they scroll with messages and sit right below them. */
#gc-chat-widget.gc-docked .gc-panel .gc-messages {
  max-height: none;
  flex: 1;
  overflow-y: auto;
}

#gc-chat-widget.gc-docked .gc-panel > .gc-quick-replies {
  /* Hide the outer container — buttons are rendered inside messages when docked */
  display: none !important;
}

/* Inline quick replies (inside messages area when docked) */
.gc-quick-replies-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px 16px 12px;
  margin-top: 0;
}

@keyframes gc-dock-slide {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Dock toggle button in header — inherits size from .gc-header-actions button */
.gc-dock-btn svg {
  width: 12px;
  height: 12px;
}

/* When docked, show undock icon highlighted */
#gc-chat-widget.gc-docked .gc-dock-btn {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

/* On smaller screens, docked mode goes full-width (handled in mobile block above) */

/* ─── PRINT STYLESHEET ────────────────────────────────────────── */

@media print {
  #gc-chat-widget {
    display: none !important;
  }
}