/* Lets Crooz — theme toggle, robot mascot (assistant), WhatsApp button. Site-wide (incl /login,
 * except the mascot which /login already renders beside its card). All chrome uses --lc-* theme
 * tokens from brand.css; the robot keeps its own character colours (the same mascot as the login).
 */

/* ---------------- Theme toggle ---------------- */
.lc-theme-toggle {
  --sz: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sz); height: var(--sz); flex: 0 0 auto; padding: 0;
  border-radius: 999px; cursor: pointer;
  background: var(--lc-bg-card, transparent); border: 1px solid var(--lc-line);
  color: var(--lc-muted);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lc-theme-toggle:hover { color: var(--lc-brand); border-color: var(--lc-brand); transform: translateY(-1px); }
.lc-theme-toggle:focus-visible { outline: 2px solid var(--lc-focus); outline-offset: 2px; }
.lc-theme-toggle svg { width: 18px; height: 18px; display: block; }
/* The icon shows what a click switches TO: a SUN in dark mode (tap for day), a MOON in light
   mode (tap for night). Dark is the default, so the sun shows unless data-theme is light. */
.lc-theme-toggle .lc-ic-sun { display: block; }
.lc-theme-toggle .lc-ic-moon { display: none; }
:root[data-theme="light"] .lc-theme-toggle .lc-ic-sun { display: none; }
:root[data-theme="light"] .lc-theme-toggle .lc-ic-moon { display: block; }
.lc-theme-toggle.lc-float {
  position: fixed; top: 16px; right: 16px; z-index: 2147483000; --sz: 40px;
  background: var(--lc-surface); box-shadow: 0 8px 24px -10px var(--lc-shadow);
}

/* ---------------- WhatsApp button (bottom-right) ---------------- */
.lc-wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer; border: 0;
  display: grid; place-items: center; text-decoration: none;
  background: var(--lc-wa); color: #fff;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,.5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.lc-wa-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 38px -8px rgba(37,211,102,.62); }
.lc-wa-fab:focus-visible { outline: 3px solid rgba(37,211,102,.4); outline-offset: 3px; }
.lc-wa-fab svg { width: 30px; height: 30px; display: block; fill: #fff; }
.lc-wa-fab .lc-wa-pop {
  position: absolute; right: 68px; bottom: 8px; white-space: nowrap;
  background: var(--lc-surface); color: var(--lc-ink); border: 1px solid var(--lc-line);
  border-radius: 12px; padding: 8px 13px; font: 600 13px/1 var(--lc-sans);
  box-shadow: 0 14px 34px -16px var(--lc-shadow);
  opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .18s, transform .18s;
}
.lc-wa-fab:hover .lc-wa-pop { opacity: 1; transform: none; }
@media (max-width: 560px) { .lc-wa-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; } .lc-wa-fab .lc-wa-pop { display: none; } }

/* ---------------- Robot mascot (bottom-left) ---------------- */
.lc-mascot { position: fixed; left: 16px; bottom: 6px; z-index: 2147483000; font-family: var(--lc-sans); }
.lc-mascot .lc-avatar {
  width: 132px; position: relative; cursor: pointer;
  opacity: 0; transform: scale(.4) translateY(26px);
}
.lc-mascot .lc-avatar.is-in { opacity: 1; transform: none; transition: transform .7s cubic-bezier(.2,1.15,.3,1), opacity .5s ease; }
.lc-mascot .lc-avatar::before {
  content: ""; position: absolute; inset: 10% 10% 20% 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lc-brand) 30%, transparent), transparent 70%); filter: blur(22px);
}
.lc-mascot .lc-bot-svg { display: block; width: 96px; height: auto; overflow: visible; }

/* part transform-boxes / origins (ported from the login robot) */
.lc-mascot #lc-antenna { transform-box: view-box; transform-origin: 110px 46px; }
.lc-mascot #lc-head-group { transform-box: view-box; transform-origin: 110px 156px; }
.lc-mascot #lc-bot { transform-box: view-box; transform-origin: 110px 234px; }
.lc-mascot #lc-eyes { transform-box: view-box; transform-origin: 110px 100px; transition: transform .13s ease-in-out; }
.lc-mascot #lc-pupils { transition: transform .5s cubic-bezier(.3,.7,.3,1); transform: translate(var(--lc-px,0px), var(--lc-py,0px)); }
.lc-mascot .lc-mouth { transition: opacity .25s ease-in-out; }
.lc-mascot .lc-hand { transition: transform .62s cubic-bezier(.34,1.28,.44,1); }
.lc-mascot #lc-cheeks circle { transition: opacity .35s ease-in-out; }
.lc-mascot #lc-hand-left { transform: translate(50px,192px); }
.lc-mascot #lc-hand-right { transform: translate(170px,192px); }

/* idle: breathe + blink + antenna sway */
@keyframes lc-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.lc-mascot .lc-avatar.is-in #lc-breathe { animation: lc-breathe 4.4s ease-in-out infinite; }
.lc-mascot .lc-avatar.is-blinking #lc-eyes { transform: scaleY(.12); }
@keyframes lc-antenna-idle { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
.lc-mascot .lc-avatar.is-in #lc-antenna { animation: lc-antenna-idle 5.2s ease-in-out infinite; }
@keyframes lc-tip { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.lc-mascot .lc-avatar.is-in #lc-antenna-tip { animation: lc-tip 3.2s ease-in-out infinite; }

/* expressions */
.lc-mascot .lc-avatar.is-smiling #lc-mouth-neutral { opacity: 0; }
.lc-mascot .lc-avatar.is-smiling #lc-mouth-smile { opacity: 1; }
.lc-mascot .lc-avatar.is-smiling #lc-cheeks circle { opacity: .55; }
.lc-mascot .lc-avatar.is-smiling #lc-eyes { transform: scaleY(.9); }
.lc-mascot .lc-avatar.is-covering #lc-hand-left { transform: translate(88px,101px); }
.lc-mascot .lc-avatar.is-covering #lc-hand-right { transform: translate(132px,101px); }
.lc-mascot .lc-avatar.is-peeking #lc-hand-left { transform: translate(85px,131px); }
.lc-mascot .lc-avatar.is-peeking #lc-hand-right { transform: translate(135px,131px); }

/* wave (right mitt) — used on load + on element hover */
@keyframes lc-wave {
  0% { transform: translate(170px,192px); } 8% { transform: translate(178px,205px); }
  26% { transform: translate(140px,120px); } 40% { transform: translate(152px,64px); }
  53% { transform: translate(187px,56px); } 66% { transform: translate(153px,64px); }
  79% { transform: translate(183px,58px); } 90% { transform: translate(150px,122px); }
  100% { transform: translate(170px,192px); }
}
.lc-mascot .lc-avatar.is-waving #lc-hand-right { animation: lc-wave 2.1s cubic-bezier(.4,.08,.3,1); }
@keyframes lc-antenna-wave { 0% { transform: rotate(0); } 22% { transform: rotate(-13deg); } 48% { transform: rotate(11deg); } 72% { transform: rotate(-6deg); } 100% { transform: rotate(0); } }
.lc-mascot .lc-avatar.is-waving #lc-antenna { animation: lc-antenna-wave 2.1s ease-in-out .14s; }
@keyframes lc-hop {
  0% { transform: translateY(0) scale(1,1); } 12% { transform: translateY(6px) scale(1.05,.94); }
  38% { transform: translateY(-30px) scale(.95,1.07); } 60% { transform: translateY(0) scale(1.07,.92); }
  76% { transform: translateY(-8px) scale(1,1); } 100% { transform: translateY(0) scale(1,1); }
}
.lc-mascot .lc-avatar.is-hop #lc-bot { animation: lc-hop 1s cubic-bezier(.3,.7,.3,1); }

/* speech bubble above the robot */
.lc-mascot-bubble {
  position: absolute; left: 8px; bottom: 120px; width: max-content; max-width: min(260px, 70vw);
  background: var(--lc-surface); color: var(--lc-ink); border: 1px solid var(--lc-line);
  border-radius: 16px 16px 16px 4px; padding: 11px 14px; font-size: 13px; line-height: 1.45;
  box-shadow: 0 20px 50px -22px var(--lc-shadow);
  opacity: 0; transform: translateY(8px) scale(.96); transform-origin: bottom left; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.lc-mascot.is-talking .lc-mascot-bubble { opacity: 1; transform: none; }
.lc-mascot-bubble b { color: var(--lc-brand); }
@media (max-width: 560px) { .lc-mascot { left: 8px; bottom: 2px; } .lc-mascot .lc-avatar, .lc-mascot .lc-bot-svg { width: 74px; } .lc-mascot-bubble { bottom: 96px; } }

@media (prefers-reduced-motion: reduce) {
  .lc-mascot .lc-avatar { opacity: 1 !important; transform: none !important; }
  .lc-mascot .lc-avatar.is-in #lc-breathe,
  .lc-mascot .lc-avatar.is-in #lc-antenna,
  .lc-mascot .lc-avatar.is-in #lc-antenna-tip,
  .lc-mascot .lc-avatar.is-waving #lc-hand-right,
  .lc-mascot .lc-avatar.is-waving #lc-antenna,
  .lc-mascot .lc-avatar.is-hop #lc-bot { animation: none !important; }
}


/* ===================== language switcher ===================== */
.lc-lang{
  margin-left:8px; padding:6px 12px; border-radius:100px; cursor:pointer;
  font:600 13px/1 inherit; white-space:nowrap;
  color:var(--lc-text); background:var(--lc-surface);
  border:1px solid color-mix(in srgb, var(--lc-muted) 35%, transparent);
  transition:transform .15s ease, border-color .2s;
}
.lc-lang:hover{ transform:translateY(-1px); border-color:var(--lc-brand); }
.lc-lang:disabled{ opacity:.6; cursor:default; transform:none; }

/* Urdu is right-to-left. Flip the page, and put the floating furniture on the
   other side so it does not sit on top of the content it is meant to help with. */
:root.lc-rtl body{ direction:rtl; text-align:right; }
:root.lc-rtl .lc-mascot{ left:auto; right:22px; }
:root.lc-rtl .lc-wa-fab{ right:auto; left:22px; }
:root.lc-rtl .lc-mascot-bubble{ left:auto; right:0; text-align:right; }