/* Top Valley Detail - chat widget (preset Q&A + tracked call CTA) */
:root {
  --w-teal: #2B2F36;
  --w-teal-dark: #1C2025;
  --w-teal-deeper: #15181C;
  --w-sunset: #D7263D;
  --w-sunset-bright: #F0394F;
  --w-sunset-dark: #B01A2E;
  --w-cream: #EEF1F4;
  --w-bg: #F7F8FA;
  --w-ink: #14181B;
  --w-ink-soft: #4A525C;
}

#dchat-launch {
  position: fixed; bottom: 22px; right: 22px;
  z-index: 1000;
  width: 64px; height: 64px;
  border-radius: 50%; border: 0;
  background: linear-gradient(135deg, var(--w-teal-dark) 0%, var(--w-teal-deeper) 100%);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(20, 24, 27, 0.35), 0 0 0 4px rgba(43, 47, 54, 0.15);
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
#dchat-launch:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 18px 36px rgba(20, 24, 27, 0.42), 0 0 0 5px rgba(43, 47, 54, 0.20);
}
#dchat-launch svg { width: 28px; height: 28px; }
#dchat-launch .dchat-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--w-sunset-bright);
  animation: dchatPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes dchatPulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.55); opacity: 0; }
}
#dchat-launch .dchat-badge {
  position: absolute; top: -4px; right: -4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--w-sunset);
  color: var(--w-ink);
  font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
  border: 2px solid var(--w-bg);
}

#dchat-greet {
  position: fixed; bottom: 96px; right: 22px;
  z-index: 999;
  background: #fff;
  color: var(--w-ink);
  padding: 12px 16px;
  border-radius: 16px 16px 4px 16px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 12px 28px rgba(20, 24, 27, 0.18);
  max-width: 220px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
  animation: dchatGreetIn 0.4s ease-out;
  transition: opacity 0.2s, transform 0.2s;
}
@keyframes dchatGreetIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#dchat-greet::after {
  content: ""; position: absolute; bottom: -8px; right: 24px;
  width: 0; height: 0;
  border: 8px solid transparent;
  border-top-color: #fff; border-bottom-width: 0;
}
#dchat-greet[hidden] { display: none !important; }

#dchat-panel {
  position: fixed; bottom: 100px; right: 22px;
  z-index: 1001;
  width: 360px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 140px);
  background: var(--w-bg);
  border-radius: 20px;
  border: 1px solid #E2E6EA;
  box-shadow: 0 30px 80px rgba(20, 24, 27, 0.30);
  display: none; flex-direction: column;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  animation: dchatPanelIn 0.25s ease-out;
}
@keyframes dchatPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#dchat-panel.open { display: flex; }
#dchat-panel * { box-sizing: border-box; }

.dchat-header {
  background: linear-gradient(135deg, var(--w-teal-dark) 0%, var(--w-teal-deeper) 100%);
  color: var(--w-cream);
  padding: 18px 18px 16px;
  position: relative;
}
.dchat-header .dchat-who { display: flex; align-items: center; gap: 12px; }
.dchat-header .dchat-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--w-sunset-bright) 0%, var(--w-sunset) 100%);
  color: var(--w-ink); font-weight: 800; font-size: 16px;
  display: grid; place-items: center;
  border: 2px solid rgba(238, 241, 244, 0.30);
}
.dchat-header h4 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.2; color: #fff; }
.dchat-header .dchat-status {
  font-size: 12px; opacity: 0.85; margin-top: 2px;
  display: flex; align-items: center; gap: 6px;
}
.dchat-header .dchat-status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}
.dchat-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(238, 241, 244, 0.15); color: var(--w-cream);
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
}
.dchat-close:hover { background: rgba(238, 241, 244, 0.30); color: #fff; }

.dchat-body {
  flex: 1; overflow-y: auto;
  padding: 18px 18px 16px;
}
.dchat-msg {
  background: #fff; color: var(--w-ink);
  padding: 12px 14px; border-radius: 14px 14px 14px 4px;
  font-size: 14px; line-height: 1.5;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(20, 24, 27, 0.06);
  animation: dchatMsgIn 0.25s ease-out;
}
.dchat-msg.user {
  background: var(--w-teal); color: #fff;
  border-radius: 14px 14px 4px 14px;
  margin-left: 32px;
}
@keyframes dchatMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dchat-msg strong { color: var(--w-ink); font-weight: 700; }
.dchat-msg.user strong { color: #fff; }
.dchat-msg a { color: var(--w-teal-dark); font-weight: 600; }
.dchat-msg.user a { color: var(--w-cream); }

.dchat-questions {
  display: flex; flex-direction: column; gap: 8px;
  margin: 8px 0 4px;
}
.dchat-q-btn {
  background: #fff; border: 1px solid #E2E6EA; color: var(--w-ink);
  text-align: left; padding: 11px 14px;
  font-size: 13px; font-weight: 600;
  border-radius: 12px; cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, transform 0.1s, color 0.15s;
}
.dchat-q-btn:hover { border-color: var(--w-teal); color: var(--w-teal-dark); transform: translateX(2px); }
.dchat-q-btn:active { transform: translateX(0); }

.dchat-footer {
  border-top: 1px solid #E2E6EA;
  padding: 14px 18px;
  background: #fff;
  display: flex; gap: 8px;
}
.dchat-cta {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 12px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  border: 0; font-family: inherit;
  transition: transform 0.1s, box-shadow 0.15s;
}
.dchat-cta.primary {
  background: linear-gradient(135deg, var(--w-sunset-bright) 0%, var(--w-sunset) 100%);
  color: var(--w-ink);
  box-shadow: 0 4px 14px rgba(215, 38, 61, 0.40);
}
.dchat-cta.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(215, 38, 61, 0.50); }
.dchat-cta.secondary {
  background: var(--w-bg); color: var(--w-ink);
  border: 1px solid #E2E6EA;
}
.dchat-cta.secondary:hover { border-color: var(--w-teal); color: var(--w-teal-dark); }
.dchat-cta svg { width: 14px; height: 14px; }

@media (max-width: 480px) {
  #dchat-launch { width: 56px; height: 56px; bottom: 18px; right: 18px; }
  #dchat-launch svg { width: 24px; height: 24px; }
  #dchat-panel { right: 12px; left: 12px; bottom: 86px; max-width: none; width: auto; }
  #dchat-greet { right: 18px; bottom: 84px; max-width: 200px; font-size: 12px; }
}