/* ==========================================================================
   Athenian LiveChat Popup — token-native (“Amazon-like” widget)
   - Prefers Athenian Site Tokens (ctl/text/surface/line/shadow/radius)
   - Falls back to AWCAI theme bridge vars when tokens are not present

   NOTE (FIX):
   Your JS sets --awcai-user-bubble / --awcai-ai-bubble inline, so they always exist.
   If you reference those first, they *always win*.
   This revision makes TOKENS win by default, while still allowing explicit overrides
   by setting --lc-user / --lc-ai directly (if you ever want that).
   ========================================================================== */

.awcai-chat-widget.awcai-lc{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483646;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;

  /* -----------------------------------------------------------------------
     Token bridge (prefer site tokens; AWCAI vars are fallback)
     --------------------------------------------------------------------- */

  /* accents (site tokens first) */
  --lc-accent:  var(--ctl-c1, var(--awcai-accent, #fe841b));
  --lc-accent2: var(--ctl-c2, var(--awcai-accent-alt, #ff9900));
  --lc-accent3: var(--ctl-c3, #63b3ed);

  /* text tiers */
  --lc-fg:  var(--text-high, #f2f3f5);
  --lc-mid: var(--text-mid,  #b7bcc7);
  --lc-low: var(--text-low,  #8a90a0);

  /* surfaces (site surfaces first) */
  --lc-surface:  var(--surface-1, rgba(15,18,26,.72));
  --lc-surface2: var(--surface-2, rgba(15,18,26,.90));

  /* bg gradient inputs: prefer site surfaces; fallback to AWCAI; then raw fallback */
  --lc-bg1: var(--surface-1, var(--awcai-bg-start, rgba(15,18,26,.72)));
  --lc-bg2: var(--surface-2, var(--awcai-bg-end,   rgba(15,18,26,.90)));

  /* lines */
  --lc-line:  var(--line-1, rgba(255,255,255,.10));
  --lc-line2: var(--line-2, rgba(255,255,255,.07));

  /* radii / shadows */
  --lc-r:  var(--radius-lg, 16px);
  --lc-r2: calc(var(--lc-r) + 6px);

  --lc-shadow-lg: var(--shadow-lg, 0 18px 64px rgba(0,0,0,.58));
  --lc-shadow-md: var(--shadow-md, 0 12px 30px rgba(0,0,0,.45));

  /* -----------------------------------------------------------------------
     BUBBLES (FIXED PRECEDENCE)
     - Tokens win by default.
     - AWCAI bridge vars fill gaps only.
     - If you want to override intentionally, set --lc-user / --lc-ai explicitly.
     --------------------------------------------------------------------- */

  /* User bubble: token accent first, then bridge var, then hard fallback */
  --lc-user: var(--lc-accent, var(--awcai-user-bubble, #fe841b));

  /* AI bubble: prefer surface tokens, then bridge var, then hard fallback */
  --lc-ai:   var(--lc-surface, var(--awcai-ai-bubble, rgba(255,255,255,.10)));

  /* computed (set solid fallbacks first; enhanced versions below) */
  --lc-bd: var(--lc-line);
  --lc-card: linear-gradient(180deg, rgba(255,255,255,.04), transparent 58%), rgba(0,0,0,.35);
  --lc-panel-shadow: var(--lc-shadow-lg), 0 0 0 1px rgba(255,255,255,.06) inset;

  /* minor knobs */
  --lc-blur: 12px;
}

/* Enhanced computed colors when supported */
@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-chat-widget.awcai-lc{
    /* AI bubble should also be token-native (surface-based) */
    --lc-ai: color-mix(in oklch, var(--lc-surface) 58%, transparent);

    --lc-bd: color-mix(in oklch, var(--lc-accent) 18%, var(--lc-line));

    --lc-card:
      linear-gradient(180deg,
        color-mix(in oklch, var(--lc-accent) 7%, transparent),
        transparent 58%),
      color-mix(in oklch, var(--lc-surface2) 92%, transparent);

    --lc-panel-shadow:
      var(--lc-shadow-lg),
      0 0 0 1px color-mix(in oklch, var(--lc-accent) 12%, transparent) inset;
  }
}

/* FAB (token-native like AB pills) */
.awcai-lc__fab{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;

  padding: 10px 12px;
  cursor: pointer;
  user-select: none;

  color: var(--lc-fg);

  background:
    radial-gradient(130% 140% at 20% 0%,
      rgba(255,255,255,.06) 0%,
      transparent 58%),
    rgba(0,0,0,.22);

  box-shadow: var(--lc-shadow-md);
  -webkit-backdrop-filter: blur(var(--lc-blur)) saturate(140%);
  backdrop-filter: blur(var(--lc-blur)) saturate(140%);

  transition:
    transform .12s ease,
    background .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__fab{
    border-color: color-mix(in oklch, var(--lc-line) 85%, transparent);
    background:
      radial-gradient(130% 140% at 20% 0%,
        color-mix(in oklch, var(--lc-accent) 18%, transparent) 0%,
        transparent 58%
      ),
      color-mix(in oklch, var(--lc-surface) 42%, transparent);
  }
}

.awcai-lc__fab:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.14);
  background:
    radial-gradient(130% 140% at 20% 0%,
      rgba(255,255,255,.08) 0%,
      transparent 58%),
    rgba(0,0,0,.28);
  box-shadow: 0 10px 26px rgba(0,0,0,.22), var(--lc-shadow-md);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__fab:hover{
    background:
      radial-gradient(130% 140% at 20% 0%,
        color-mix(in oklch, var(--lc-accent) 24%, transparent) 0%,
        transparent 58%
      ),
      color-mix(in oklch, var(--lc-surface) 62%, transparent);
    border-color: color-mix(in oklch, var(--lc-accent) 45%, var(--lc-line));
  }
}

.awcai-lc__fab:active{ transform: translateY(1px); }

.awcai-lc__fab:focus-visible{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 2px;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__fab:focus-visible{
    outline-color: color-mix(in oklch, var(--lc-accent) 60%, transparent);
  }
}

/* --------------------------------------------------------------------------
 * FAB Icon — Spinner-like mini puck + rotating rim + inline SVG
 * Replaces .awcai-lc__fabDot
 * -------------------------------------------------------------------------- */

.awcai-lc__fabIcon{
  --fab-puck: 34px;   /* size */
  --fab-ring: 3px;    /* rim thickness */
  --fab-glow: 14px;   /* glow blur */
  --fab-speed: 1.6s;  /* rim spin */
  --fab-owl-speed: 6s;/* owl rotateY */

  width: var(--fab-puck);
  height: var(--fab-puck);
  border-radius: 999px;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;

  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.10), transparent 55%),
    rgba(0,0,0,.20);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 10px 22px rgba(0,0,0,.25);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__fabIcon{
    background:
      radial-gradient(120% 120% at 30% 20%,
        color-mix(in oklch, var(--lc-accent) 14%, transparent),
        transparent 55%
      ),
      color-mix(in oklch, var(--lc-surface) 44%, transparent);

    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--lc-line) 80%, transparent) inset,
      0 10px 22px rgba(0,0,0,.25);
  }
}

/* conic rim */
.awcai-lc__fabIcon::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  padding: var(--fab-ring);

  background: conic-gradient(from var(--fab-rot,0deg),
    var(--lc-accent),
    var(--lc-accent2),
    var(--lc-accent)
  );

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  mix-blend-mode: screen;
  animation: awcaiFabSpin var(--fab-speed) linear infinite;
}

/* outer glow */
.awcai-lc__fabIcon::after{
  content:"";
  position:absolute;
  inset:-18%;
  border-radius:999px;

  background:
    conic-gradient(from var(--fab-rot,0deg),
      var(--lc-accent),
      var(--lc-accent2),
      var(--lc-accent)
    ),
    radial-gradient(120% 120% at 50% 50%, rgba(255,255,255,.08), transparent 62%);

  filter: blur(var(--fab-glow));
  opacity: .85;
  mix-blend-mode: screen;
  animation: awcaiFabSpin var(--fab-speed) linear infinite;
}

@keyframes awcaiFabSpin{
  to { --fab-rot: 360deg; }
}

/* SVG holder */
.awcai-lc__fabSvg{
  width: 62%;
  height: 62%;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;

  perspective: 900px;
  -webkit-perspective: 900px;
}

/* Inline svg/object/img */
.awcai-lc__fabSvg > svg,
.awcai-lc__fabSvg > object,
.awcai-lc__fabSvg > img{
  width: 100%;
  height: auto;
  display: block;

  transform-style: preserve-3d;
  transform-origin: 50% 50%;

  /* Inline SVG will use currentColor if you normalize it in JS */
  color: var(--lc-fg);

  animation: awcaiFabOwlRotateY var(--fab-owl-speed) linear infinite;

  filter:
    drop-shadow(0 0 10px rgba(0,0,0,.35))
    drop-shadow(0 0 16px rgba(255,255,255,.10));
}

@keyframes awcaiFabOwlRotateY{
  0%   { transform: rotateY(0); }
  50%  { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .awcai-lc__fabIcon::before,
  .awcai-lc__fabIcon::after,
  .awcai-lc__fabSvg > svg,
  .awcai-lc__fabSvg > object,
  .awcai-lc__fabSvg > img{
    animation: none !important;
  }
}

.awcai-lc__fabTxt{
  font-weight: 750;
  letter-spacing: .1px;
  font-size: 13px;
  color: var(--lc-fg);
}

/* Panel */
.awcai-lc__panel{
  position: absolute;
  right: 0;
  bottom: 58px;

  width: min(380px, calc(100vw - 32px));
  height: min(520px, calc(100vh - 130px));

  display: grid;
  grid-template-rows: auto 1fr auto auto;

  border-radius: var(--lc-r2);
  overflow: clip;

  background: var(--lc-card);
  border: 1px solid var(--lc-line);
  box-shadow: var(--lc-panel-shadow);

  -webkit-backdrop-filter: blur(calc(var(--lc-blur) + 2px)) saturate(150%);
  backdrop-filter: blur(calc(var(--lc-blur) + 2px)) saturate(150%);

  transform: translateY(8px) scale(.94);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}

.awcai-chat-widget.is-open .awcai-lc__panel{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Head */
.awcai-lc__head{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;

  padding: 10px 12px;

  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__head{
    border-bottom-color: color-mix(in oklch, var(--lc-accent) 16%, transparent);
  }
}

.awcai-lc__title{
  font-size: 13px;
  font-weight: 850;
  color: var(--lc-fg);
}

.awcai-lc__mode{
  font-size: 11px;
  color: rgba(255,255,255,.72);
  padding: 4px 8px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__mode{
    color: color-mix(in oklch, var(--lc-fg) 72%, transparent);
    border-color: color-mix(in oklch, var(--lc-accent) 18%, transparent);
    background: color-mix(in oklch, rgba(0,0,0,.28) 70%, transparent);
  }
}

.awcai-chat-widget.is-agent .awcai-lc__mode{
  border-color: rgba(88,214,141,.25);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-chat-widget.is-agent .awcai-lc__mode{
    border-color: color-mix(in oklch, #58d68d 28%, transparent);
  }
}

.awcai-lc__close{
  appearance: none;
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  cursor: pointer;

  color: var(--lc-fg);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);

  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__close{
    background: color-mix(in oklch, var(--lc-surface) 40%, transparent);
    border-color: color-mix(in oklch, var(--lc-line) 85%, transparent);
  }
}

.awcai-lc__close:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.14);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__close:hover{
    background: color-mix(in oklch, var(--lc-surface) 60%, transparent);
    border-color: color-mix(in oklch, var(--lc-accent) 35%, var(--lc-line));
  }
}

/* Messages */
.awcai-lc__msgs{
  padding: 12px;
  overflow: auto;
  display: grid;
  gap: 10px;
}

.awcai-lc__msg{ display:flex; }
.awcai-lc__msg.is-user{ justify-content:flex-end; }
.awcai-lc__msg.is-assistant,
.awcai-lc__msg.is-agent{ justify-content:flex-start; }

.awcai-lc__bubble{
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.35;

  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);

  word-wrap: break-word;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__bubble{
    border-color: color-mix(in oklch, var(--lc-line) 85%, transparent);
  }
}

.awcai-lc__msg.is-user .awcai-lc__bubble{
  background: linear-gradient(135deg, var(--lc-user), var(--lc-accent2));
  color: #111;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__msg.is-user .awcai-lc__bubble{
    background: linear-gradient(135deg,
      color-mix(in oklch, var(--lc-user) 92%, transparent),
      color-mix(in oklch, var(--lc-accent2) 70%, transparent)
    );
  }
}

.awcai-lc__msg.is-assistant .awcai-lc__bubble{
  background: rgba(255,255,255,.06);
  color: var(--lc-fg);
  border-color: rgba(255,255,255,.07);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__msg.is-assistant .awcai-lc__bubble{
    background: color-mix(in oklch, var(--lc-surface) 58%, transparent);
    border-color: color-mix(in oklch, var(--lc-line2) 90%, transparent);
  }
}

.awcai-lc__msg.is-agent .awcai-lc__bubble{
  background: rgba(88,214,141,.12);
  border-color: rgba(88,214,141,.25);
  color: var(--lc-fg);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__msg.is-agent .awcai-lc__bubble{
    background: color-mix(in oklch, rgba(88,214,141,.12) 65%, transparent);
    border-color: color-mix(in oklch, #58d68d 25%, transparent);
  }
}

.awcai-lc__bubble a{ color: inherit; text-decoration: underline; }

/* Compose */
.awcai-lc__form{
  display:flex;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__form{
    border-top-color: color-mix(in oklch, var(--lc-line) 85%, transparent);
  }
}

.awcai-lc__input{
  flex:1;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  padding: 10px 12px;

  background: rgba(0,0,0,.22);
  color: var(--lc-fg);
  outline: none;

  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__input{
    border-color: color-mix(in oklch, var(--lc-line) 85%, transparent);
    background: color-mix(in oklch, var(--lc-surface) 42%, transparent);
  }
}

.awcai-lc__input:focus{
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__input:focus{
    border-color: color-mix(in oklch, var(--lc-accent) 38%, var(--lc-line));
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--lc-accent) 22%, transparent);
    background: color-mix(in oklch, var(--lc-surface) 55%, transparent);
  }
}

.awcai-lc__send{
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;

  font-weight: 850;
  cursor: pointer;

  color: #111;
  background: linear-gradient(135deg, var(--lc-accent), var(--lc-accent2));

  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.awcai-lc__send:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  filter: saturate(1.05);
}

.awcai-lc__form.is-busy .awcai-lc__send{ opacity:.7; cursor: progress; }

.awcai-lc__hint{
  padding: 0 12px 10px 12px;
  font-size: 11px;
  color: rgba(255,255,255,.62);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-lc__hint{
    color: color-mix(in oklch, var(--lc-mid) 88%, transparent);
  }
}

/* Mobile */
@media (max-width: 520px){
  .awcai-chat-widget.awcai-lc{ right: 12px; bottom: 12px; }
  .awcai-lc__fabTxt{ display: none; }
  .awcai-lc__panel{ bottom: 54px; width: min(420px, calc(100vw - 24px)); }
}