:root {
  --ink: #16251c;
  --muted: #6c776f;
  --cream: #f5f1e8;
  --white: #fffdf8;
  --green: #174c32;
  --lime: #d8f05a;
  --line: #dfe3db;
  --danger: #b42318;
  --bot-avatar-content: '👩🏻';
  --bot-avatar-image: none;
  --widget-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 20%, rgba(216,240,90,.28), transparent 28rem),
    linear-gradient(135deg, #f9f6ef 0%, #e9eee7 100%);
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--widget-font);
}
html.embed, body.embed { width: 100%; height: 100%; min-height: 0; background: transparent; overflow: hidden; }
body.embed .page-shell { display: block; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; background: transparent; }
body.embed .intro { display: none; }
body.embed .chat-card { right: 7px; bottom: 7px; width: calc(100% - 14px); height: calc(100% - 14px); min-width:0; min-height:0; }
body.embed .chat-launcher { right: 7px; bottom: 7px; }

.page-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(260px, 480px) minmax(320px, 430px);
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  padding: 3rem 1.5rem;
}

.intro h1 {
  margin: .7rem 0 1rem;
  max-width: 520px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.4rem, 7vw, 6.8rem);
  line-height: .88;
  letter-spacing: -.06em;
}
.intro p { max-width: 430px; color: var(--muted); font-size: 1.08rem; }
.eyebrow { font-weight: 800; letter-spacing: .18em; font-size: .75rem; color: var(--green); }

.chat-card {
  position: fixed;
  right: 24px;
  bottom: 22px;
  z-index: 20;
  width: min(430px, calc(100vw - 28px));
  height: min(650px, calc(100vh - 44px));
  min-width: 320px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255,253,248,.96);
  border: 1px solid rgba(23,76,50,.13);
  border-radius: 14px;
  box-shadow: 0 28px 70px rgba(22,37,28,.16);
  transform-origin: bottom right;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.chat-card:not(.is-open) { opacity: 0; visibility: hidden; transform: translateY(12px) scale(.96); pointer-events: none; }
.chat-header { display: flex; align-items: center; gap: 10px; margin: 11px; padding: 12px 13px; color: white; background: var(--green); border-radius: 12px; transition: background-color .2s; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff2e4; font-size: 1.35rem; }
.chat-header strong, .chat-header span { display: block; }
.chat-header strong { font-size: .9rem; }
.chat-header span { color: #eee; font-size: .69rem; }
.header-button { border: 0; color: white; background: transparent; line-height: 1; cursor: pointer; }
.restart { margin-left: auto; font-size: 1.55rem; transform: rotate(180deg); }
.close-chat { width: 25px; height: 25px; display: grid; place-items: center; color: var(--green); background: white; border-radius: 50%; font-size: 1.45rem; }
.resize-handle { position:absolute; left:2px; top:2px; z-index:5; width:20px; height:20px; padding:0; border:0; background:transparent; cursor:nwse-resize; touch-action:none; }
.resize-handle::before { content:''; position:absolute; left:4px; top:4px; width:8px; height:8px; border-left:2px solid rgba(255,255,255,.8); border-top:2px solid rgba(255,255,255,.8); border-radius:2px 0 0; }
body.embed .resize-handle { display:none; }

.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 18px 14px; scroll-behavior: smooth; scrollbar-width:thin; scrollbar-color:#ccd4cd transparent; }
.message { position: relative; width:fit-content; max-width:86%; margin: 0 0 8px; padding: 10px 13px; border-radius: 13px; white-space: pre-line; overflow-wrap:anywhere; font-size: .88rem; line-height:1.48; animation: rise .24s ease-out; }
.message.bot { max-width:calc(100% - 42px); margin-left:42px; color:#142019; background:#edf1ec; border:1px solid #e8ede8; border-bottom-left-radius:5px; box-shadow:0 3px 10px rgba(20,44,29,.035); }
.message.bot::before { content: var(--bot-avatar-content); position: absolute; left: -42px; bottom: -1px; width: 30px; height: 30px; display: grid; place-items: center; background-color: #fff0df; background-image: var(--bot-avatar-image); background-size: cover; background-position: center; border:2px solid #fff; box-shadow:0 2px 7px rgba(20,44,29,.12); border-radius: 50%; font-size:.9rem; }
.message.bot::after { content:''; position:absolute; left:-6px; bottom:0; width:10px; height:10px; background:#edf1ec; clip-path:polygon(100% 0,100% 100%,0 100%); }
.brand-mark.has-image,.chat-launcher i.has-image { background-size: cover; background-position: center; color: transparent; }
.message.user { margin-left:auto; color:white; background:var(--green); border-bottom-right-radius:5px; box-shadow:0 5px 13px color-mix(in srgb,var(--green) 20%,transparent); font-weight:600; }
.message.user::after { content:''; position:absolute; right:-6px; bottom:0; width:10px; height:10px; background:var(--green); clip-path:polygon(0 0,100% 100%,0 100%); }
.message.status { color: var(--muted); background: transparent; padding-left: 0; font-size: .9rem; }
.message.status::before { display: none; }
.message-time { margin:-4px 0 13px 43px; color:#98a099; font-size:.63rem; letter-spacing:.015em; }
.typing { width: 56px; display: flex; gap: 4px; }
.typing i { width: 6px; height: 6px; background: #8b948e; border-radius: 50%; animation: bounce 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 50% { transform: translateY(-4px); } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

.composer { margin: 0 14px; padding: 9px 10px; border: 1px solid #d4d8d3; border-radius: 12px; }
.input-row { display: flex; gap: 9px; }
.text-input { min-width: 0; flex: 1; padding: 13px 15px; color: var(--ink); background: white; border: 1px solid #cbd2c9; border-radius: 13px; font: inherit; outline: none; }
.text-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,76,50,.1); }
.send { min-width: 48px; border: 0; border-radius: 13px; color: var(--lime); background: var(--green); font-size: 1.15rem; cursor: pointer; }
.send:disabled { opacity: .5; cursor: wait; }
.phone-field { display: flex; flex: 1; min-width: 0; }
.phone-code { display: flex; align-items: center; gap: 5px; padding: 0 12px; background: #eef1ec; border: 1px solid #cbd2c9; border-right: 0; border-radius: 13px 0 0 13px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.phone-flag { font-size: 1.05rem; }
.phone-field .phone-input { flex: 1; min-width: 0; border-radius: 0 13px 13px 0; }
.choices { display: flex; flex-direction: column; gap: 0; max-height: 270px; margin: -9px -10px; overflow-y: auto; border-radius: 12px; }
.choice { padding: 11px 13px; border: 0; border-bottom: 1px solid #e5e5e5; color: #222; background: white; font: 500 .88rem inherit; cursor: pointer; }
.choice:first-child { border-radius: 12px 12px 0 0; }
.choice:hover, .choice.selected { color: var(--green); background: #eef4ef; }
.multi-control { display: flex; flex-direction: column; min-height: 0; }
.multi-control .multi-choices { max-height: clamp(140px, 28vh, 220px); margin: -9px -10px 8px; border-radius: 12px 12px 8px 8px; overscroll-behavior: contain; }
.multi-done { width: 100%; margin-top: 5px; padding: 11px; border: 0; border-radius: 12px; color: var(--lime); background: var(--green); font-weight: 700; cursor: pointer; }
.multi-done:disabled { opacity: .45; cursor: not-allowed; }
.field-error { margin: 7px 2px 0; color: var(--danger); font-size: .8rem; }
.skip { display: block; margin-top: 8px; padding: 0; border: 0; color: var(--muted); background: transparent; text-decoration: underline; cursor: pointer; }
.privacy { margin: 0; padding: 8px 20px 3px; color: #889089; text-align: center; font-size: .65rem; }
.powered { padding: 4px 0 8px; text-align: center; font-size: .75rem; }
.powered b { color: #f4a000; }.powered span { color: #0c60d9; }
.chat-launcher { position: fixed; right: 24px; bottom: 22px; z-index: 10; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; cursor: pointer; }
.chat-launcher span { padding: 12px 16px; color: white; background: var(--green); border-radius: 16px 16px 4px 16px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.chat-launcher i { width: 54px; height: 54px; display: grid; place-items: center; border: 3px solid var(--green); border-radius: 50%; background: #fff0df; font-style: normal; font-size: 1.7rem; }
body[data-widget-position="left"] .chat-launcher { left:24px; right:auto; flex-direction:row-reverse; }
body[data-widget-position="left"] .chat-launcher span { border-radius:16px 16px 16px 4px; }
body.embed[data-widget-position="left"] .chat-launcher { left:7px; right:auto; }
.chat-card.is-open + .chat-launcher { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 820px) {
  .intro { padding: 4rem 1.5rem; }
  .intro h1 { font-size: 3.8rem; }
  .chat-card { right: 7px; bottom: 7px; width: calc(100vw - 14px); height: calc(100vh - 14px); min-height: 480px; }
  .chat-launcher { right: 14px; bottom: 14px; }
  body[data-widget-position="left"] .chat-launcher { left:14px; right:auto; }
}
@media (max-width:600px){.resize-handle{display:none}.messages{padding-inline:12px}.message{max-width:88%}.message.bot{max-width:calc(100% - 40px);margin-left:40px}.message-time{margin-left:41px}.chat-card{min-width:0}}