:root {
  --chikoo-green: #18372e;
  --chikoo-cream: #fffaf1;
  --chikoo-gold: #e4b145;
  --chikoo-rose: #9d3040;
  --chikoo-ink: #2d2520;
}

.chikoo, .chikoo * { box-sizing: border-box; }
.chikoo { position: fixed; z-index: 10000; right: 24px; bottom: 22px; font-family: Manrope, Arial, sans-serif; }
body.prelude-pending .chikoo { display: none; }
.chikoo button, .chikoo textarea { font: inherit; }
.chikoo-teaser {
  position: absolute; right: 88px; bottom: 5px; width: min(330px, calc(100vw - 125px));
  padding: 15px 37px 15px 17px; border: 1px solid rgba(24,55,46,.14); border-radius: 18px 18px 4px 18px;
  background: #fffaf1; box-shadow: 0 14px 38px rgba(26,36,31,.18); animation: chikoo-teaser-in .35s ease both;
}
.chikoo-teaser[hidden] { display: none; }
.chikoo-teaser-message { display: block; width: 100%; padding: 0; border: 0; color: #342a24; background: transparent; font-size: 13px; line-height: 1.55; text-align: left; cursor: pointer; }
.chikoo-teaser-close { position: absolute; top: 7px; right: 8px; width: 25px; height: 25px; padding: 0 0 2px; border: 0; border-radius: 50%; color: #7b6e65; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }
.chikoo-teaser-close:hover { color: var(--chikoo-rose); background: rgba(157,48,64,.07); }
.chikoo-launcher {
  display: block; width: 78px; height: 78px; min-width: 0; padding: 0;
  border: 0; border-radius: 0; color: var(--chikoo-cream); background: transparent;
  box-shadow: none; cursor: pointer; filter: drop-shadow(0 10px 12px rgba(18,42,34,.22));
  transition: transform .2s ease, filter .2s ease;
}
.chikoo-launcher:hover { transform: translateY(-3px) scale(1.03); filter: drop-shadow(0 13px 15px rgba(18,42,34,.27)); }
.chikoo-launcher-photo, .chikoo-avatar, .chikoo-message-avatar {
  display: block; overflow: hidden; flex: 0 0 auto; border-radius: 50%; background: #f6e6c7;
}
.chikoo-launcher-photo { width: 78px; height: 78px; border: 0; border-radius: 0; background: transparent; }
.chikoo-launcher img { width: 100%; height: 100%; padding: 0; object-fit: contain; }
.chikoo-launcher-copy { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.chikoo-launcher-copy strong { font-family: Italiana, Georgia, serif; font-size: 19px; font-weight: 400; letter-spacing: .2px; }
.chikoo-launcher-copy small { margin-top: 3px; color: #d9d1c4; font-size: 9px; letter-spacing: 1.05px; text-transform: uppercase; }
.chikoo-launcher-sparkle { margin-left: auto; color: var(--chikoo-gold); font-size: 15px; }
.chikoo-launcher-copy, .chikoo-launcher-sparkle { display: none; }

.chikoo-panel {
  position: absolute; right: 0; bottom: 91px; width: min(390px, calc(100vw - 32px)); height: min(650px, calc(100vh - 125px));
  overflow: hidden; border: 1px solid rgba(24,55,46,.2); border-radius: 25px; background: var(--chikoo-cream);
  box-shadow: 0 26px 80px rgba(26,36,31,.26); color: var(--chikoo-ink);
}
.chikoo-panel[hidden] { display: none; }
.chikoo-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--chikoo-gold), #cc6e56, var(--chikoo-rose)); z-index: 2; }
.chikoo-header {
  height: 56px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 14px;
  color: var(--chikoo-cream); background: var(--chikoo-green); border-bottom: 1px solid rgba(255,255,255,.12);
}
.chikoo-avatar { width: 46px; height: 46px; border: 2px solid var(--chikoo-gold); }
.chikoo-avatar img, .chikoo-message-avatar img { width: 100%; height: 100%; padding: 2px; object-fit: contain; }
.chikoo-heading { display: flex; flex-direction: column; min-width: 0; }
.chikoo-heading strong { font-family: Italiana, Georgia, serif; font-size: 23px; font-weight: 400; line-height: 1; }
.chikoo-heading small { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #ded5c8; font-size: 9px; letter-spacing: 1.1px; text-transform: uppercase; }
.chikoo-heading i { width: 6px; height: 6px; border-radius: 50%; background: #85b595; box-shadow: 0 0 0 3px rgba(133,181,149,.14); }
.chikoo-reset { margin-left: auto; padding: 6px 7px; border: 0; color: #e8d9c4; background: transparent; font-size: 10px; letter-spacing: .7px; text-transform: uppercase; cursor: pointer; }
.chikoo-reset:hover { color: white; }
.chikoo-close { width: 31px; height: 31px; padding: 0 0 3px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: white; background: rgba(255,255,255,.08); font-size: 23px; line-height: 1; cursor: pointer; }

.chikoo-messages {
  height: calc(100% - 144px); padding: 21px 17px 14px; overflow-y: auto; overscroll-behavior: contain;
  background-color: #f9f1e5;
  background-image: radial-gradient(circle at 15% 10%, rgba(228,177,69,.11) 0 1px, transparent 1.5px), radial-gradient(circle at 85% 28%, rgba(157,48,64,.07) 0 1px, transparent 1.5px);
  background-size: 28px 28px, 34px 34px;
}
.chikoo-message { display: flex; align-items: flex-end; gap: 7px; margin: 0 0 13px; animation: chikoo-in .22s ease both; }
.chikoo-message-user { justify-content: flex-end; padding-left: 45px; }
.chikoo-message-assistant { padding-right: 26px; }
.chikoo-message-avatar { width: 36px; height: 36px; border: 0; border-radius: 0; background: transparent; }
.chikoo-message-avatar img { padding: 0; }
.chikoo-bubble { max-width: 100%; padding: 11px 13px; border-radius: 17px 17px 17px 5px; background: white; border: 1px solid rgba(88,65,49,.1); box-shadow: 0 5px 15px rgba(70,48,35,.06); font-size: 13.5px; line-height: 1.58; white-space: pre-wrap; }
.chikoo-message-assistant .chikoo-bubble a { color: #8d3041; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; }
.chikoo-message-user .chikoo-bubble { color: white; background: var(--chikoo-rose); border-color: var(--chikoo-rose); border-radius: 17px 17px 5px 17px; }
.chikoo-bubble.is-loading { display: flex; align-items: center; gap: 4px; min-width: 47px; min-height: 39px; }
.chikoo-bubble.is-loading i { width: 5px; height: 5px; border-radius: 50%; background: #ac9482; animation: chikoo-dot 1s infinite ease-in-out; }
.chikoo-bubble.is-loading i:nth-child(2) { animation-delay: .15s; }
.chikoo-bubble.is-loading i:nth-child(3) { animation-delay: .3s; }
.chikoo-bubble.is-typing::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; background: currentColor; vertical-align: -2px; animation: chikoo-cursor .7s steps(1) infinite; }
.chikoo-suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 3px 0 12px 41px; }
.chikoo-suggestions button { min-height: 37px; padding: 6px 9px; border: 1px solid rgba(157,48,64,.24); border-radius: 11px; color: #733341; background: rgba(255,255,255,.72); font-size: 10.5px; line-height: 1.25; text-align: left; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.chikoo-suggestions button:hover { background: white; transform: translateY(-1px); }

.chikoo-form { height: 88px; padding: 10px 13px 11px; border-top: 1px solid rgba(24,55,46,.13); background: #fffaf1; }
.chikoo-form > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.chikoo-compose { display: flex; align-items: flex-end; gap: 7px; padding: 7px 7px 7px 13px; border: 1px solid rgba(24,55,46,.2); border-radius: 19px; background: white; }
.chikoo-compose:focus-within { border-color: rgba(157,48,64,.55); box-shadow: 0 0 0 3px rgba(157,48,64,.08); }
.chikoo-compose textarea { flex: 1; max-height: 112px; min-height: 32px; padding: 6px 0 4px; resize: none; border: 0; outline: 0; color: var(--chikoo-ink); background: transparent; font-size: 13px; line-height: 1.45; }
.chikoo-compose textarea::placeholder { color: #9b9189; }
.chikoo-compose button { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; color: white; background: var(--chikoo-rose); cursor: pointer; }
.chikoo-compose button:disabled { opacity: .45; cursor: wait; }
.chikoo-compose svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chikoo-status { min-height: 13px; margin: 4px 6px 0; color: #9d3040; font-size: 9.5px; line-height: 1.25; }

@keyframes chikoo-in { from { opacity: 0; transform: translateY(5px); } }
@keyframes chikoo-teaser-in { from { opacity: 0; transform: translate(8px, 5px); } }
@keyframes chikoo-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes chikoo-cursor { 50% { opacity: 0; } }

@media (max-width: 640px) {
  body.chikoo-open { overflow: hidden; }
  .chikoo { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .chikoo-teaser { position: fixed; right: 16px; bottom: calc(91px + env(safe-area-inset-bottom)); width: min(330px, calc(100vw - 32px)); }
  .chikoo-launcher, .chikoo-launcher-photo { width: 72px; height: 72px; }
  .chikoo-panel { position: fixed; inset: auto; top: var(--chikoo-viewport-top, 0px); left: 0; width: 100%; height: var(--chikoo-viewport-height, 100dvh); max-height: none; border: 0; border-radius: 0; }
  .chikoo-header { height: calc(56px + env(safe-area-inset-top)); padding-top: calc(10px + env(safe-area-inset-top)); }
  .chikoo-messages { height: calc(100% - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 20px 14px 13px; }
  .chikoo-form { height: calc(94px + env(safe-area-inset-bottom)); padding: 10px 12px max(11px, env(safe-area-inset-bottom)); }
  .chikoo-compose textarea { font-size: 16px; transform: translateZ(0); }
  .chikoo-message-assistant { padding-right: 17px; }
  .chikoo-suggestions { margin-left: 41px; }
}

@media (prefers-reduced-motion: reduce) {
  .chikoo-message, .chikoo-teaser, .chikoo-bubble.is-loading i { animation: none; }
  .chikoo-launcher, .chikoo-suggestions button { transition: none; }
}
