/* ================================================== KKR AI Assistant ===
   WhatsApp-inspired layout, KKR branding — not a copy of WhatsApp's own
   visual identity (no green bubble scheme, no WhatsApp logo/wordmark). */

.kkr-ai {
  position: fixed; z-index: 200; inset-block-end: 1.25rem; inset-inline-end: 1.25rem;
  font-family: var(--font-sans, inherit);
}

/* ---- floating button */
.kkr-ai__fab {
  display: flex; align-items: center; gap: .6rem;
  background: var(--color-dark); color: var(--color-ivory);
  border: 2px solid var(--color-gold); border-radius: 999px;
  padding: .75rem 1.1rem .75rem .75rem;
  box-shadow: 0 10px 28px rgba(11,9,7,.28);
  cursor: pointer; transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease);
}
.kkr-ai__fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(11,9,7,.34); }
.kkr-ai__fab-icon {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--color-gold);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.kkr-ai__fab-icon svg { width: 1.4rem; height: 1.4rem; color: var(--color-dark); }
.kkr-ai__fab-label { font-size: .82rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.kkr-ai__fab-badge {
  position: absolute; inset-block-start: -.3rem; inset-inline-end: -.3rem;
  background: #2E7D32; color: #fff; font-size: .68rem; font-weight: 800;
  min-width: 1.3rem; height: 1.3rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-ivory);
}
.kkr-ai.is-open .kkr-ai__fab { display: none; }

/* ---- panel (desktop: floating card; mobile: full screen) */
.kkr-ai__panel {
  position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem;
  width: min(23rem, calc(100vw - 2rem)); height: min(38rem, calc(100vh - 3rem));
  background: var(--color-ivory); border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(11,9,7,.35); border: 1px solid rgba(11,9,7,.12);
  display: flex; flex-direction: column;
  transform: translateY(1.5rem) scale(.96); opacity: 0; pointer-events: none;
  transition: transform .28s var(--ease, ease), opacity .28s var(--ease, ease);
}
.kkr-ai.is-open .kkr-ai__panel { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.kkr-ai.is-minimized .kkr-ai__panel { height: 3.6rem; }
.kkr-ai.is-minimized .kkr-ai__body, .kkr-ai.is-minimized .kkr-ai__input-area { display: none; }

@media (max-width: 30rem) {
  .kkr-ai__panel {
    inset: 0; width: 100vw; height: 100dvh; border-radius: 0;
    padding-block-start: env(safe-area-inset-top, 0px); padding-block-end: env(safe-area-inset-bottom, 0px);
  }
  .kkr-ai.is-minimized .kkr-ai__panel { height: 100dvh; } /* minimize is desktop-only behavior; keep mobile full-screen */
}

/* ---- header */
.kkr-ai__header {
  display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem;
  background: var(--color-dark); color: var(--color-ivory); flex: none;
}
.kkr-ai__avatar { width: 2.3rem; height: 2.3rem; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--color-gold); background: #fff; flex: none; }
.kkr-ai__header-text { flex: 1 1 auto; min-width: 0; }
.kkr-ai__header-name { font-weight: 700; font-size: .92rem; line-height: 1.2; }
.kkr-ai__header-status { font-size: .74rem; opacity: .85; display: flex; align-items: center; gap: .35rem; }
.kkr-ai__status-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #2E7D32; flex: none; }
.kkr-ai__status-dot.is-offline { background: #B33A2E; }
.kkr-ai__header-actions { display: flex; gap: .35rem; flex: none; }
.kkr-ai__header-btn {
  width: 2rem; height: 2rem; border-radius: 50%; background: transparent; border: none;
  color: var(--color-ivory); opacity: .85; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.kkr-ai__header-btn:hover { opacity: 1; background: rgba(255,255,255,.1); }
.kkr-ai__header-btn svg { width: 1.1rem; height: 1.1rem; }

/* ---- message area */
.kkr-ai__body {
  flex: 1 1 auto; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .5rem;
  background: var(--color-cream);
}
.kkr-ai__msg { display: flex; flex-direction: column; max-width: 82%; animation: kkrAiIn .25s var(--ease, ease) both; }
.kkr-ai__msg.is-assistant { align-self: flex-start; align-items: flex-start; }
.kkr-ai__msg.is-customer { align-self: flex-end; align-items: flex-end; }
.kkr-ai__bubble { padding: .6rem .8rem; border-radius: 14px; font-size: .86rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.kkr-ai__msg.is-assistant .kkr-ai__bubble { background: var(--color-white); color: var(--color-dark); border-end-start-radius: 3px; box-shadow: 0 1px 2px rgba(11,9,7,.08); }
.kkr-ai__msg.is-customer .kkr-ai__bubble { background: var(--color-gold); color: var(--color-dark); border-end-end-radius: 3px; }
.kkr-ai__msg-time { font-size: .66rem; color: var(--color-muted); margin-block-start: .2rem; padding-inline: .3rem; }

@keyframes kkrAiIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---- typing indicator */
.kkr-ai__typing { display: flex; gap: .25rem; padding: .7rem .9rem; background: var(--color-white); border-radius: 14px; border-end-start-radius: 3px; width: fit-content; box-shadow: 0 1px 2px rgba(11,9,7,.08); }
.kkr-ai__typing span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--color-muted); animation: kkrAiTyping 1.1s infinite; }
.kkr-ai__typing span:nth-child(2) { animation-delay: .15s; }
.kkr-ai__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes kkrAiTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* ---- welcome message options (inline, inside the greeting bubble) */
.kkr-ai__welcome-options { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-block-start: .7rem; max-width: 88%; }
.kkr-ai__welcome-option {
  font: inherit; font-size: .82rem; font-weight: 700; text-align: start; line-height: 1.3;
  background: var(--color-white); color: var(--color-dark); border: 1.5px solid var(--color-gold);
  border-radius: 12px; padding: .65rem .75rem; cursor: pointer;
  transition: background-color .18s, transform .18s;
}
.kkr-ai__welcome-option:hover { background: var(--color-gold); transform: translateY(-1px); }

/* ---- persistent back-to-main-menu button, on every assistant reply */
.kkr-ai__back-btn {
  display: block; width: fit-content; margin-block-start: .55rem; max-width: 82%;
  font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .01em;
  background: transparent; color: var(--color-gold-deep, #B04C10); border: none;
  padding: .3rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.kkr-ai__back-btn:hover { color: var(--color-dark); }
@media (max-width: 26rem) {
  .kkr-ai__welcome-options { max-width: 96%; }
}

/* ---- menu item cards, with images pulled from the real menu (spec: bigger item detail text, small icons, images) */
.kkr-ai__item-list { display: flex; flex-direction: column; gap: .5rem; margin-block-start: .65rem; max-width: 92%; }
.kkr-ai__item-card {
  display: flex; align-items: center; gap: .65rem; background: var(--color-white);
  border: 1px solid rgba(11,9,7,.1); border-radius: 12px; padding: .5rem .65rem;
}
.kkr-ai__item-img { width: 3rem; height: 3rem; border-radius: 9px; object-fit: cover; flex: none; background: var(--color-cream); }
.kkr-ai__item-img--placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.kkr-ai__item-info { min-width: 0; }
.kkr-ai__item-name { font-size: .9rem; font-weight: 700; color: var(--color-dark); line-height: 1.25; }
.kkr-ai__item-price { font-size: .82rem; color: var(--color-gold-deep, #B04C10); font-weight: 600; margin-block-start: .1rem; }

/* ---- location map (Google Maps embed) */
.kkr-ai__map { margin-block-start: .65rem; max-width: 92%; border-radius: 12px; overflow: hidden; border: 1px solid rgba(11,9,7,.1); }
.kkr-ai__map iframe { display: block; width: 100%; height: 9rem; border: 0; }
.kkr-ai__map-link {
  display: block; text-align: center; padding: .5rem; font-size: .8rem; font-weight: 700;
  background: var(--color-white); color: var(--color-gold-deep, #B04C10); text-decoration: none;
}
.kkr-ai__map-link:hover { background: var(--color-cream); }

/* ---- input area */
.kkr-ai__input-area { flex: none; padding: .7rem .8rem; background: var(--color-white); border-block-start: 1px solid rgba(11,9,7,.1); display: flex; align-items: flex-end; gap: .5rem; }
.kkr-ai__input {
  flex: 1 1 auto; resize: none; border: 1px solid rgba(11,9,7,.16); border-radius: 20px;
  padding: .55rem .9rem; font: inherit; font-size: .86rem; max-height: 6rem; background: var(--color-cream);
}
.kkr-ai__input:focus { outline: 2px solid var(--color-gold); outline-offset: 1px; }
.kkr-ai__icon-btn {
  flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background-color .2s;
}
.kkr-ai__icon-btn svg { width: 1.15rem; height: 1.15rem; }
.kkr-ai__mic-btn { background: var(--color-cream); color: var(--color-dark); }
.kkr-ai__mic-btn:hover { background: var(--color-gold-light, var(--color-gold)); }
.kkr-ai__mic-btn.is-recording { background: #B33A2E; color: #fff; animation: kkrAiPulse 1.4s infinite; }
@keyframes kkrAiPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(179,58,46,.4); } 50% { box-shadow: 0 0 0 8px rgba(179,58,46,0); } }
.kkr-ai__send-btn { background: var(--color-gold); color: var(--color-dark); }
.kkr-ai__send-btn:hover { background: var(--color-gold-deep, var(--color-gold)); color: #fff; }
.kkr-ai__send-btn:disabled { opacity: .4; cursor: default; }

/* ---- voice recording UI */
.kkr-ai__recording-bar[hidden], .kkr-ai__voice-preview[hidden] { display: none; }
.kkr-ai__recording-bar { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; background: var(--color-white); border-block-start: 1px solid rgba(11,9,7,.1); }
.kkr-ai__recording-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #B33A2E; animation: kkrAiPulse 1s infinite; flex: none; }
.kkr-ai__recording-time { font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kkr-ai__recording-actions { margin-inline-start: auto; display: flex; gap: .4rem; }
.kkr-ai__recording-actions button { font: inherit; font-size: .76rem; font-weight: 700; border: none; border-radius: 999px; padding: .35rem .8rem; cursor: pointer; }
.kkr-ai__recording-cancel { background: transparent; color: var(--color-muted); }
.kkr-ai__recording-stop { background: #B33A2E; color: #fff; }

.kkr-ai__voice-preview { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; background: var(--color-white); border-block-start: 1px solid rgba(11,9,7,.1); }
.kkr-ai__voice-preview button { font: inherit; font-size: .76rem; font-weight: 700; border: none; border-radius: 999px; padding: .35rem .8rem; cursor: pointer; }
.kkr-ai__voice-preview-delete { background: transparent; color: var(--color-muted); }
.kkr-ai__voice-preview-send { background: var(--color-gold); color: var(--color-dark); margin-inline-start: auto; }

/* ---- voice reply toggle + product cards + order/reservation summaries (inside bubbles) */
.kkr-ai__voice-toggle { display: flex; align-items: center; gap: .4rem; padding: .4rem .9rem; font-size: .74rem; color: var(--color-muted); background: var(--color-cream); flex: none; }
.kkr-ai__voice-toggle button { margin-inline-start: auto; font: inherit; font-size: .72rem; font-weight: 700; color: var(--color-dark); background: var(--color-white); border: 1px solid rgba(11,9,7,.14); border-radius: 999px; padding: .25rem .6rem; cursor: pointer; }
.kkr-ai__voice-toggle button.is-on { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-dark); }

.kkr-ai__audio-play { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; }
.kkr-ai__audio-play button { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: none; background: var(--color-gold); color: var(--color-dark); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
.kkr-ai__audio-play button svg { width: .8rem; height: .8rem; }
.kkr-ai__avatar { background: #0B0907; object-fit: contain; }

/* Chat button: AI avatar that pops in small and grows slowly to full
   size, then "breathes" gently with a soft gold glow so it's noticed
   without being distracting. Reduced-motion users get a plain fade. */
.kkr-ai__fab-icon { background: #0B0907; box-shadow: 0 0 0 1.5px rgba(245, 154, 74,.6); overflow: visible; position: relative; }
.kkr-ai__fab-icon img { width: 100%; height: 100%; border-radius: 50%; display: block; animation: kkrAiBreathe 3.2s ease-in-out 2.4s infinite; }
.kkr-ai__fab-icon::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(245, 154, 74,.7); opacity: 0;
  animation: kkrAiRing 3.2s ease-out 2.4s infinite;
}
.kkr-ai__fab { transform-origin: 100% 100%; animation: kkrAiPop 1.6s cubic-bezier(.2,.9,.3,1.15) .6s both; }
@keyframes kkrAiPop {
  0%   { opacity: 0; transform: scale(.25); }
  35%  { opacity: 1; transform: scale(.55); }
  75%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes kkrAiBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes kkrAiRing { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.45); } }
.kkr-ai__fab:hover { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .kkr-ai__fab { animation: kkrAiFade .6s ease .4s both; }
  .kkr-ai__fab-icon img, .kkr-ai__fab-icon::after { animation: none; }
  @keyframes kkrAiFade { from { opacity: 0; } to { opacity: 1; } }
}

/* Compact launcher: just the round avatar; slides open to show the name
   on mouse-over / keyboard focus (and once, briefly, after page load). */
.kkr-ai__fab {
  gap: 0; padding: .4rem;
  transition: padding .45s cubic-bezier(.2,.8,.2,1), gap .45s cubic-bezier(.2,.8,.2,1),
              transform .3s ease, box-shadow .3s ease;
}
.kkr-ai__fab-label {
  display: inline-block; max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease .05s;
}
.kkr-ai__fab:hover, .kkr-ai__fab:focus-visible, .kkr-ai__fab.is-peek {
  gap: .6rem; padding: .4rem 1.15rem .4rem .4rem;
}
.kkr-ai__fab:hover .kkr-ai__fab-label, .kkr-ai__fab:focus-visible .kkr-ai__fab-label, .kkr-ai__fab.is-peek .kkr-ai__fab-label {
  max-width: 16rem; opacity: 1;
}
/* Touch screens have no hover: stay a compact icon (tap opens the chat). */
@media (hover: none) {
  .kkr-ai__fab:hover { gap: 0; padding: .4rem; }
  .kkr-ai__fab:hover .kkr-ai__fab-label { max-width: 0; opacity: 0; }
}
/* Phones: sit just above the bottom action bar (Reserve a Table) instead
   of covering its buttons. */
@media (max-width: 48rem) {
  body:has(.actionbar) .kkr-ai { inset-block-end: calc(5.1rem + env(safe-area-inset-bottom, 0px)); inset-inline-end: .9rem; }
}
.kkr-ai__privacy {
  margin: 0; padding: .4rem .9rem; font-size: .68rem; line-height: 1.35; text-align: center;
  color: #7a6f63; background: rgba(255,255,255,.55); border-block-start: 1px solid rgba(184, 72, 0,.15);
}

/* 3D launcher: glossy dark-gold pill with depth; slides open slowly to
   the left on hover with a slight 3D tilt. */
.kkr-ai__fab {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(ellipse 120% 90% at 30% 0%, #2d2216 0%, #0B0907 70%);
  box-shadow:
    0 14px 28px -8px rgba(0,0,0,.55),
    0 4px 10px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,244,210,.35),
    inset 0 -3px 6px rgba(0,0,0,.45);
  transform-style: preserve-3d;
  transition: padding .9s cubic-bezier(.22,.8,.2,1), gap .9s cubic-bezier(.22,.8,.2,1),
              transform .6s cubic-bezier(.22,.8,.2,1), box-shadow .6s ease;
}
.kkr-ai__fab-label { transition: max-width .9s cubic-bezier(.22,.8,.2,1), opacity .6s ease .15s; }
.kkr-ai__fab:hover, .kkr-ai__fab:focus-visible {
  transform: perspective(600px) rotateY(-8deg) translateY(-3px);
  box-shadow:
    0 22px 38px -10px rgba(0,0,0,.6),
    0 6px 14px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,244,210,.45),
    inset 0 -3px 6px rgba(0,0,0,.45);
}
.kkr-ai__fab-icon {
  width: 2.9rem; height: 2.9rem;
  box-shadow: 0 0 0 1.5px rgba(245, 154, 74,.7), 0 6px 12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.4);
}
/* The avatar animates itself (waving/blinking), so no extra breathing. */
.kkr-ai__fab-icon img { animation: none; }
.kkr-ai__avatar { background: transparent; border: 0; box-shadow: 0 0 0 1.5px rgba(245, 154, 74,.7); }
@media (hover: none) {
  .kkr-ai__fab:hover { transform: none; }
}

/* Pop-in plays once; after that the launcher only slides open/closed. */
.kkr-ai__fab.is-popped, .kkr-ai__fab.is-popped:hover { animation: none; opacity: 1; }
.kkr-ai__fab:not(.is-popped):hover { animation: kkrAiPop 1.6s cubic-bezier(.2,.9,.3,1.15) .6s both; }
/* Closing: the name fades quickly while the pill glides back to the right. */
.kkr-ai__fab-label { transition: max-width .8s cubic-bezier(.22,.8,.2,1), opacity .35s ease 0s; }
.kkr-ai__fab:hover .kkr-ai__fab-label, .kkr-ai__fab:focus-visible .kkr-ai__fab-label, .kkr-ai__fab.is-peek .kkr-ai__fab-label {
  transition: max-width .9s cubic-bezier(.22,.8,.2,1), opacity .6s ease .15s;
}
/* Open width close to the name's real width, so the whole close is a
   visible, even slide (no dead time), and a slower close. */
.kkr-ai__fab:hover .kkr-ai__fab-label, .kkr-ai__fab:focus-visible .kkr-ai__fab-label, .kkr-ai__fab.is-peek .kkr-ai__fab-label { max-width: 11rem; }
.kkr-ai__fab { transition: padding 1s cubic-bezier(.45,0,.25,1), gap 1s cubic-bezier(.45,0,.25,1), transform .7s cubic-bezier(.22,.8,.2,1), box-shadow .6s ease; }
.kkr-ai__fab-label { transition: max-width 1s cubic-bezier(.45,0,.25,1), opacity .5s ease .15s; }
.kkr-ai__fab:hover .kkr-ai__fab-label, .kkr-ai__fab:focus-visible .kkr-ai__fab-label, .kkr-ai__fab.is-peek .kkr-ai__fab-label {
  transition: max-width 1s cubic-bezier(.45,0,.25,1), opacity .6s ease .25s;
}

/* Assistant button: white circle with an orange sparkle icon (the slide-open
   label on hover is unchanged). */
.kkr-ai__fab-icon {
  background: #fff !important; border-radius: 50%; display: grid !important; place-items: center;
  box-shadow: 0 10px 24px -8px rgba(30,20,60,.35), 0 0 0 1px rgba(208,88,0,.12) !important;
  color: #D05800;
}
.kkr-ai__sparkle { width: 60%; height: 60%; }
.kkr-ai__fab:hover .kkr-ai__sparkle { animation: kkr-sparkle 1.6s ease-in-out infinite; }
@keyframes kkr-sparkle { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .kkr-ai__fab:hover .kkr-ai__sparkle { animation: none; } }
/* Resting: only the white circle with the orange sparkle (no dark ring).
   Hover / keyboard focus / the one-time peek: the dark pill with the label,
   as before. */
.kkr-ai__fab:not(:hover):not(:focus-visible):not(.is-peek) {
  background: transparent !important; box-shadow: none !important; border-color: transparent !important;
}
.kkr-ai__fab-icon svg.kkr-ai__sparkle { width: 62% !important; height: 62% !important; color: #D05800 !important; }
.kkr-ai__fab-icon svg.kkr-ai__sparkle { width: 88% !important; height: 88% !important; stroke-width: 2.1; }

/* Small disclaimer at the very end of the chat window. */
.kkr-ai__disclaimer {
  margin: 0; padding: .45rem 1rem .6rem; text-align: center;
  font-size: .68rem; line-height: 1.45; color: #8a8076; background: inherit;
  border-top: 1px solid rgba(184,72,0,.08);
}
.kkr-ai__disclaimer a { color: #B84800; text-decoration: underline; text-underline-offset: 2px; }
.kkr-ai__turnstile { display: flex; justify-content: center; padding: .4rem .75rem 0; }
.kkr-ai__turnstile[hidden] { display: none; }