:root {
  --chat-night: #101611;
  --chat-panel: #f3f0e5;
  --chat-surface: #fffdf5;
  --chat-green: #2f6a4f;
  --chat-green-deep: #1f4d3a;
  --chat-lime: #bcd765;
  --chat-mango: #df8a54;
  --chat-muted: #6c756d;
}

body {
  min-height: 100dvh;
  font-family: "Manrope", sans-serif;
  background:
    radial-gradient(circle at 8% 12%, rgba(188, 215, 101, .48), transparent 25rem),
    radial-gradient(circle at 92% 80%, rgba(223, 138, 84, .24), transparent 24rem),
    #dce4d7;
}

body::before {
  opacity: .11;
  background-size: 64px 64px;
  background-image: linear-gradient(rgba(31, 77, 58, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 77, 58, .16) 1px, transparent 1px);
}

.shell { width: min(1440px, calc(100% - 32px)); padding: 18px 0 32px; }
.topbar { margin-bottom: 14px; }
.brand { font-family: "Syne", sans-serif; letter-spacing: -.03em; }
.brand img { border-radius: 50%; box-shadow: 0 8px 28px rgba(16, 22, 17, .18); }
.back { border: 0; padding: 10px 14px; border-radius: 999px; background: rgba(255, 253, 245, .66); }

.layout {
  grid-template-columns: minmax(320px, .72fr) minmax(520px, 1.28fr);
  height: calc(100dvh - 100px);
  min-height: 660px;
  border: 1px solid rgba(16, 22, 17, .12);
  border-radius: 28px;
  background: var(--chat-surface);
  box-shadow: 0 30px 90px rgba(31, 77, 58, .2);
}

.story {
  padding: clamp(34px, 4vw, 66px);
  background:
    linear-gradient(180deg, rgba(16, 22, 17, .12), rgba(16, 22, 17, .72)),
    radial-gradient(circle at 68% 18%, rgba(188, 215, 101, .2), transparent 15rem),
    var(--chat-night);
}

.story::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -160px;
  top: -120px;
  border: 1px solid rgba(188, 215, 101, .28);
  border-radius: 50%;
  box-shadow: inset 0 0 0 42px rgba(188, 215, 101, .025), inset 0 0 0 84px rgba(188, 215, 101, .025);
}

.story::after { content: "CANCÚN · PRIVATE · CANCÚN · PRIVATE"; right: -173px; bottom: 170px; font-family: "Syne", sans-serif; font-size: .7rem; letter-spacing: 5px; color: rgba(255, 255, 255, .2); }
.eyebrow { color: var(--chat-lime); }
.story h1, .panel-title, .chat-name { font-family: "Syne", sans-serif; }
.story h1 { max-width: 460px; font-size: clamp(2.8rem, 5vw, 5.8rem); line-height: .9; letter-spacing: -.075em; }
.story-copy { font-size: .92rem; }
.trust-list { margin-top: auto; padding-top: 42px; }
.trust-number { border-radius: 11px; }

.workspace { padding: clamp(22px, 3.2vw, 42px); background: var(--chat-panel); }
.panel { min-height: 0; }
.panel-title { letter-spacing: -.05em; }
.switcher { background: rgba(31, 77, 58, .09); }
.switcher button { font-family: "Manrope", sans-serif; }
.switcher button.active { background: var(--chat-surface); }
input, textarea, .chat-tools select { background: var(--chat-surface); border-color: rgba(31, 77, 58, .17); }
.primary { background: var(--chat-green-deep); color: #f6f7e9; }

#chatPanel.active { margin: calc(clamp(22px, 3.2vw, 42px) * -1); }
.chat-tools {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(31, 77, 58, .12);
  background: rgba(255, 253, 245, .9);
}
.chat-tools select { max-width: 330px; }
.chat-tools .secondary { margin-left: auto; border-color: rgba(31, 77, 58, .17); background: rgba(47, 106, 79, .08); }
.chat-head {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(31, 77, 58, .12);
  background: var(--chat-surface);
}
.chat-head > div:first-child { position: relative; padding-left: 48px; }
.chat-head > div:first-child::before {
  content: "CW";
  position: absolute;
  left: 0;
  top: 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--chat-green-deep);
  color: var(--chat-lime);
  font: 800 .68rem "Syne", sans-serif;
}
.chat-name { font-size: 1rem; letter-spacing: -.02em; }
.status { position: relative; padding-left: 25px; background: rgba(223, 138, 84, .13); }
.status::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); border-radius: 50%; background: currentColor; }

.push-card { margin: 12px 16px 0; padding: 10px 12px; border-radius: 14px; background: rgba(188, 215, 101, .16); }
.push-icon { border-radius: 50%; background: var(--chat-green-deep); }
.push-button { background: var(--chat-green); }
.push-help { margin: 10px 16px 0; }
.messages {
  flex: 1;
  min-height: 260px;
  margin-top: 0;
  padding: 24px clamp(16px, 3vw, 34px);
  background-color: #e8e6dc;
  background-image:
    radial-gradient(circle at 20% 24%, rgba(47, 106, 79, .055) 0 2px, transparent 2px),
    radial-gradient(circle at 74% 68%, rgba(223, 138, 84, .065) 0 2px, transparent 2px);
  background-size: 44px 44px, 58px 58px;
  scrollbar-color: rgba(47, 106, 79, .28) transparent;
}
.message { max-width: min(76%, 620px); border-radius: 8px 18px 18px 18px; box-shadow: 0 2px 7px rgba(16, 22, 17, .08); }
.message.customer { border-radius: 18px 8px 18px 18px; background: #dcebb8; }
.message.admin { background: var(--chat-green-deep); color: #f9f7ed; }
.message.ai { background: #d7e7e3; color: var(--chat-night); }
.message.system { box-shadow: none; }
.composer {
  gap: 9px;
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid rgba(31, 77, 58, .12);
  background: var(--chat-surface);
}
.composer textarea { min-height: 46px; max-height: 120px; border-radius: 23px; padding: 12px 17px; }
.photo-button, .location-button, .send { width: 44px; height: 44px; border-radius: 50%; }
.send { background: var(--chat-green-deep); color: #fff; font-size: 1.3rem; }
.chat-note { margin: 0; padding: 6px 18px 8px; background: var(--chat-surface); font-size: .58rem; text-align: center; }
#chatNotice { margin: 0; padding: 0 18px; background: var(--chat-surface); }
.logout { margin: 0; padding: 8px 18px 12px; border: 0; background: var(--chat-surface); color: var(--chat-muted); text-align: right; }

@media (max-width: 820px) {
  .shell { width: 100%; padding: 0; }
  .topbar, .story { display: none; }
  .layout { display: block; height: 100dvh; min-height: 0; border: 0; border-radius: 0; }
  .workspace { min-height: 100dvh; padding: 22px; }
  #chatPanel.active { height: 100dvh; margin: -22px; }
  .chat-tools { padding-top: max(12px, env(safe-area-inset-top)); }
  .chat-head { padding: 12px 14px; }
  .push-card { grid-template-columns: 38px 1fr auto; margin: 9px 10px 0; }
  .push-copy span { display: none; }
  .messages { padding: 18px 12px; }
  .message { max-width: 88%; }
  .composer { padding: 9px 10px max(9px, env(safe-area-inset-bottom)); }
  .chat-note, #chatNotice, .logout { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}