/* Lumio chat widget: launcher bubble + conversation panel.
   Every colour is a variable so a casino can re-skin it to its brand. */

.lw {
  --lw-accent: #3FD0A4;
  --lw-accent-ink: #06231A;
  --lw-launcher-ink: #06231A;
  --lw-human: #E9A23B;
  --lw-radius: 22px;
  font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.lw[data-theme="dark"] {
  --lw-bg: #121620;
  --lw-surface: #1A1F2B;
  --lw-raised: #222838;
  --lw-text: #EDF0F6;
  --lw-muted: #98A1B3;
  --lw-line: #2A3142;
  --lw-line-strong: #3A4357;
  --lw-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}

.lw[data-theme="light"] {
  --lw-bg: #FFFFFF;
  --lw-surface: #F5F6FA;
  --lw-raised: #EEF0F6;
  --lw-text: #121A33;
  --lw-muted: #5E6681;
  --lw-line: #E3E6EE;
  --lw-line-strong: #CBD0DD;
  --lw-shadow: 0 30px 70px rgba(16, 25, 53, .18), 0 0 0 1px rgba(16, 25, 53, .06);
}

.lw * { box-sizing: border-box; }
.lw [hidden] { display: none !important; }

.lw {
  --lc-surface: var(--lw-surface);
  --lc-text: var(--lw-text);
  --lc-muted: var(--lw-muted);
  --lc-line: var(--lw-line);
  --lc-line-strong: var(--lw-line-strong);
  --lc-track: var(--lw-raised);
  --lc-accent: var(--lw-accent);
  --lc-accent-ink: var(--lw-accent-ink);
  --lc-human: var(--lw-human);
  --lc-ok: #3CCB8B;
  --lc-ok-bg: rgba(60, 203, 139, .14);
  --lc-wait: #E9A23B;
  --lc-wait-bg: rgba(233, 162, 59, .15);
  --lc-bad: #F0606F;
  --lc-bad-bg: rgba(240, 96, 111, .14);
}

.lw[data-theme="light"] {
  --lc-ok: #178A57;
  --lc-ok-bg: #E2F5EB;
  --lc-wait: #B36B00;
  --lc-wait-bg: #FBEFD9;
  --lc-bad: #C93545;
  --lc-bad-bg: #FBE5E8;
}

/* ---------- launcher ---------- */

.lw-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2147483000;
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 50%;
  background: var(--lw-accent);
  color: var(--lw-launcher-ink);
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35), inset 0 -2px 0 rgba(0, 0, 0, .12);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}

.lw-launcher:hover { transform: scale(1.06); }
.lw-launcher:active { transform: scale(.96); }
.lw-launcher:focus-visible { outline: 3px solid var(--lw-text); outline-offset: 3px; }

.lw-launcher-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}

.lw-launcher-icon svg { width: 30px; height: 30px; }
.lw-i-chat svg path { fill: var(--lw-launcher-ink); }
.lw-i-chat svg circle { fill: var(--lw-accent); }
.lw-i-down { opacity: 0; transform: rotate(-90deg) scale(.6); }
.lw.is-open .lw-i-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.lw.is-open .lw-i-down { opacity: 1; transform: none; }

.lw-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 99px;
  background: #F0475A;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  box-shadow: 0 0 0 3px var(--lw-bg);
}

/* ---------- proactive teaser ---------- */

.lw-teaser {
  position: fixed;
  right: 24px;
  bottom: 100px;
  z-index: 2147483000;
  display: flex;
  gap: 10px;
  max-width: 300px;
  padding: 14px 16px 14px 14px;
  border-radius: 18px 18px 6px 18px;
  background: var(--lw-bg);
  color: var(--lw-text);
  box-shadow: var(--lw-shadow);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s cubic-bezier(.2, .8, .2, 1);
}

.lw-teaser.is-on { opacity: 1; transform: none; }
.lw-teaser p { margin: 0; font-size: 13.5px; }

.lw-teaser-av {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lw-accent);
  color: var(--lw-accent-ink);
}

.lw-teaser-av svg { width: 16px; height: 16px; }
.lw-teaser-av { font-size: 11px; font-weight: 750; }

.lw-teaser-x {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 24px;
  height: 24px;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: var(--lw-raised);
  color: var(--lw-muted);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.lw-teaser-x svg { width: 100%; height: 100%; }

/* ---------- panel ---------- */

.lw-panel {
  position: fixed;
  right: 24px;
  bottom: 100px;
  z-index: 2147483001;
  width: 392px;
  height: min(690px, calc(100vh - 124px));
  display: flex;
  flex-direction: column;
  border-radius: var(--lw-radius);
  background: var(--lw-bg);
  color: var(--lw-text);
  box-shadow: var(--lw-shadow);
  overflow: hidden;
  transform-origin: calc(100% - 30px) calc(100% + 40px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.94);
  transition: opacity .22s, transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s .32s;
}

.lw.is-open .lw-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .22s, transform .32s cubic-bezier(.2, .8, .2, 1);
}

.lw-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px 14px 18px;
  border-bottom: 1px solid var(--lw-line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--lw-accent) 12%, var(--lw-bg)), var(--lw-bg));
}

.lw-head-av { position: relative; flex: none; }
.lw-head-av .lw-av { width: 40px; height: 40px; font-size: 14px; }

.lw-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3CCB8B;
  box-shadow: 0 0 0 2.5px var(--lw-bg);
}

.lw[data-status="queue"] .lw-dot { background: var(--lw-human); animation: lw-blink 1s ease-in-out infinite; }

@keyframes lw-blink { 50% { opacity: .35; } }

.lw-head-text { flex: 1; min-width: 0; }
.lw-title { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.lw-sub { display: block; color: var(--lw-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lw-icon-btn {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lw-muted);
  cursor: pointer;
}

.lw-icon-btn:hover { background: var(--lw-raised); color: var(--lw-text); }
.lw-icon-btn:focus-visible, .lw-chip:focus-visible, .lw-send:focus-visible { outline: 2px solid var(--lw-accent); outline-offset: 2px; }
.lw-icon-btn svg { width: 100%; height: 100%; }

.lw-av {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

.lw-av svg { width: 52%; height: 52%; }
.lw-av-brand { background: var(--lw-accent); color: var(--lw-accent-ink); }
.lw-av-agent { background: var(--lw-human); color: #2A1A02; }
.lw-av-t1 { background: #E9A23B; color: #2A1A02; }
.lw-av-t2 { background: #8A93F0; color: #10153A; }

.lw-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--lw-line-strong) transparent;
}

.lw-intro h3 {
  margin: 10px 0 16px;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 750;
}

.lw-team {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--lw-surface);
}

.lw-team .lw-av { box-shadow: 0 0 0 2.5px var(--lw-surface); }
.lw-team .lw-av + .lw-av { margin-left: -8px; }
.lw-team small { margin-left: 12px; color: var(--lw-muted); font-size: 12.5px; }

.lw-log { display: flex; flex-direction: column; gap: 14px; }

.lw-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 100%; }
.lw-msg > .lw-av { margin-top: 19px; }
.lw-col { display: flex; flex-direction: column; min-width: 0; max-width: 84%; }
.lw-who { color: var(--lw-muted); font-size: 11.5px; margin: 0 0 3px 4px; }
.lw-time { color: var(--lw-muted); font-size: 10.5px; margin: 4px 4px 0; opacity: .8; }

.lw-bubble {
  padding: 10px 14px;
  border-radius: 18px 18px 18px 6px;
  background: var(--lw-surface);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lw-from-agent .lw-bubble { box-shadow: inset 3px 0 0 var(--lw-human); }

.lw-from-player { justify-content: flex-end; }
.lw-from-player .lw-col { align-items: flex-end; }
.lw-from-player .lw-bubble {
  border-radius: 18px 18px 6px 18px;
  background: var(--lw-accent);
  color: var(--lw-accent-ink);
}

.lw-from-player .lc-file { background: color-mix(in srgb, var(--lw-accent) 22%, var(--lw-surface)); color: var(--lw-text); }
.lw-from-player .lw-col .lc-card { width: 100%; }
.lw-col .lc-card { min-width: 240px; }

.lw-sys { text-align: center; color: var(--lw-muted); font-size: 12px; }
.lw-sys p { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.lw-sys p::before, .lw-sys p::after { content: ""; width: 26px; height: 1px; background: var(--lw-line-strong); }
.lw-sys .lc-card { margin: 0 4px; }

.lw-typing .lw-bubble { display: flex; gap: 4px; padding: 14px 16px; }
.lw-typing { align-items: flex-end; }
.lw-typing .lw-av { margin-top: 0; }
.lw-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--lw-muted); animation: lw-dot 1.2s infinite ease-in-out; }
.lw-typing i:nth-child(2) { animation-delay: .15s; }
.lw-typing i:nth-child(3) { animation-delay: .3s; }

@keyframes lw-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.lw-chips {
  display: flex;
  gap: 8px;
  padding: 8px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}

.lw-chips::-webkit-scrollbar { display: none; }
.lw-chips[hidden] { display: none; }

.lw-chip {
  flex: none;
  padding: 8px 13px;
  border: 1px solid color-mix(in srgb, var(--lw-accent) 45%, var(--lw-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--lw-accent) 8%, transparent);
  color: var(--lw-text);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: background .15s;
}

.lw-chip:hover { background: color-mix(in srgb, var(--lw-accent) 20%, transparent); }

.lw-composer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 8px 12px 6px;
  padding: 6px;
  border: 1px solid var(--lw-line);
  border-radius: 16px;
  background: var(--lw-surface);
}

.lw-composer:focus-within { border-color: color-mix(in srgb, var(--lw-accent) 70%, var(--lw-line)); }

.lw-composer textarea {
  flex: 1;
  min-height: 36px;
  max-height: 110px;
  padding: 8px 4px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--lw-text);
  font: inherit;
  font-size: 14.5px;
}

.lw-composer textarea::placeholder { color: var(--lw-muted); }

.lw-send {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 0;
  border-radius: 11px;
  background: var(--lw-accent);
  color: var(--lw-accent-ink);
  cursor: pointer;
}

.lw-send svg { width: 100%; height: 100%; }

.lw-foot {
  padding: 2px 0 10px;
  text-align: center;
  color: var(--lw-muted);
  font-size: 11px;
  opacity: .8;
}

.lw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- phone ---------- */

@media (max-width: 520px) {
  .lw-panel {
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    border-radius: 0;
    transform-origin: 50% 100%;
  }

  .lw.is-open .lw-launcher, .lw.is-open .lw-teaser { opacity: 0; pointer-events: none; transform: scale(.5); }
  .lw-launcher { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .lw-teaser { right: 16px; bottom: 84px; max-width: calc(100vw - 32px); }
  .lw-head { padding-top: max(14px, env(safe-area-inset-top)); }
  .lw-composer { margin-bottom: max(6px, env(safe-area-inset-bottom)); }
  .lw-col { max-width: 88%; }
  .lw-col .lc-card { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lw-panel, .lw-launcher, .lw-launcher-icon, .lw-teaser { transition: none; }
  .lw-typing i, .lw[data-status="queue"] .lw-dot { animation: none; }
}

/* ---------- theming from the bubble designer ---------- */

.lw-launcher-label { display: none; }
.lw[data-launcher="pill"] .lw-launcher { width: auto; height: 54px; padding: 0 20px 0 14px; border-radius: 27px; display: flex; align-items: center; gap: 8px; }
.lw[data-launcher="pill"] .lw-launcher-icon { position: static; display: grid; }
.lw[data-launcher="pill"] .lw-launcher-icon svg { width: 26px; height: 26px; }
.lw[data-launcher="pill"] .lw-i-down { display: none; }
.lw[data-launcher="pill"].is-open .lw-i-chat { opacity: 1; transform: none; }
.lw[data-launcher="pill"] .lw-launcher-label { display: block; font-weight: 750; font-size: 15px; color: var(--lw-launcher-ink); }
.lw[data-launcher="pill"] .lw-teaser, .lw[data-launcher="pill"] .lw-panel { bottom: 92px; }

.lw[data-pos="left"] .lw-launcher, .lw[data-pos="left"] .lw-teaser, .lw[data-pos="left"] .lw-panel { left: 24px; right: auto; }
.lw[data-pos="left"] .lw-panel { transform-origin: 30px calc(100% + 40px); }
.lw[data-pos="left"] .lw-teaser { border-radius: 18px 18px 18px 6px; }
.lw[data-pos="left"] .lw-teaser-x { left: auto; right: -10px; }
.lw.no-team .lw-team { display: none; }

@media (max-width: 520px) {
  .lw[data-pos="left"] .lw-launcher, .lw[data-pos="left"] .lw-teaser { left: 16px; }
  .lw[data-pos="left"] .lw-panel { left: 0; }
}