/* ============================================================
   Sales Upgrade – Lila widget

   VIEW adopted from the lila-chatbot reference widget: round icon
   launcher, pop-in panel of fixed proportions, scrolling message
   column with side-anchored bubbles, pill starter chips, blinking
   typing dots, textarea + round send button, centred note line and
   a teaser bubble with a tail.

   The PALETTE and the FONTS stay the Sales Upgrade ones (purple
   #8355f4 / lavender #dab4ff / Mulish + Inter), declared as custom
   properties on #sua-root. Every rule is scoped to #sua-root so the
   widget renders identically on the theme-bypassing landing canvas
   and inside ordinary Avada pages, and never inherits theme button
   or input styling. No color-mix() – older Safari drops the whole
   declaration; brand tints are written as rgba()/pre-computed hex.
   ============================================================ */

#sua-root{
  /* palette – extracted from liftcreative.de (Avada colour slots) */
  --ink:#0e0e15;
  --surface:#1e1f2e;
  --surface-2:#282a3c;
  --line:#343751;
  --paper:#f7f8fc;
  --white:#ffffff;
  --aqua:#8355f4;
  --aqua-soft:#7845ee;
  --purple:#8355f4;
  --lavender:#dab4ff;
  --lavender-soft:#f3e8ff;
  --blue:#639af9;
  --dim:#a7abc4;
  --dim-2:#8b91b0;
  --ink-dim:#5a5f78;
  --line-i:#6a7094;
  /* derived, pre-computed (no color-mix) */
  /* gleicher Winkel wie die Seiten-Buttons; bewusst im dunklen Teil der
     Markenfarbe, damit weisse Schrift/Symbole darauf lesbar bleiben
     (Weiss auf Lavendel waere nur 1.8:1) */
  --accent-grad:linear-gradient(96deg,#8355f4,#6f43e0);
  --accent-lift:#9a74f6;
  --scroll-thumb:#3c3f5c;
  --disp:Mulish,"Segoe UI",Arial,sans-serif;
  --ui:Inter,"Segoe UI",Arial,sans-serif;
  color:var(--white);
  font:400 14.5px/1.6 var(--ui);
  text-align:left;
  -webkit-font-smoothing:antialiased;
}
#sua-root,#sua-root *{box-sizing:border-box}
#sua-root p{margin:0}
#sua-root [hidden]{display:none!important}
#sua-root :focus-visible{outline:2px solid var(--lavender);outline-offset:3px}
#sua-root button{font-family:var(--ui);-webkit-appearance:none;appearance:none;margin:0;
  text-transform:none;letter-spacing:normal;text-shadow:none;box-shadow:none}
#sua-root svg{display:block;flex:0 0 auto}
#sua-root .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ BUTTONS (page rules the footer button relies on) ============ */
#sua-root .btn{
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none;
  font:600 15px var(--ui);letter-spacing:.005em;padding:14px 24px;border-radius:99px;
  /* Verlauf wie die Buttons auf liftcreative.de: 96 Grad, awb-color6 ->
     awb-color3 (Lavendel -> Markenviolett). Die Beschriftung steht dunkel
     darauf, wie dort auch – auf dem hellen Verlauf traegt weisse Schrift
     nicht. */
  background:linear-gradient(96deg,var(--lavender),var(--purple));color:var(--ink);line-height:normal;
}
#sua-root .btn:hover{background:linear-gradient(96deg,var(--lavender-soft),#9068f6)}
#sua-root .btn.sm{padding:10px 18px;font-size:14px}
#sua-root .btn.ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px var(--line-i)}
#sua-root .btn.ghost:hover{background:rgba(255,255,255,.06);color:var(--white)}

/* ============================================================
   ROOT / LAUNCHER
   The root is a fixed box the size of the launcher; panel and
   teaser are absolutely positioned against its corner, exactly
   like the reference widget.
   ============================================================ */
#sua-root.lilafab{
  --fab-bottom:calc(clamp(14px,3vw,22px) + env(safe-area-inset-bottom,0px));
  --fab-size:60px;
  position:fixed;right:clamp(14px,3vw,26px);left:auto;
  /* Zwischen zwei Grenzen: ueber dem Theme (Avada-Kopfzeile, Nach-oben-Knopf,
     alles fuenfstellig; die Landingpage stapelt nur bis 200) und UNTER dem
     Cookie-Banner. Der Banner muss den Chat ueberdecken, sonst verdeckt der
     Chat-Knopf "Ablehnen". WPConsent liegt bei 900000, Cookiebot, Usercentrics
     und Borlabs noch hoeher. Ueber --sua-z laesst sich der Wert ohne Code
     anpassen, etwa per "Zusaetzliches CSS" am Element #sua-root mit --sua-z:9990 */
  bottom:var(--fab-bottom);z-index:var(--sua-z,800000);
  width:var(--fab-size);height:var(--fab-size);
  transition:bottom .32s cubic-bezier(.22,.61,.36,1)}
/* the landing's sticky bar sets --sticky-h + body.sticky-on; the widget lifts itself above it */
body.sticky-on #sua-root.lilafab{--fab-bottom:calc(var(--sticky-h,83px) + 12px)}

/* Der Starter traegt den Verlauf der Buttons von liftcreative.de: 96 Grad,
   Lavendel -> Markenviolett. Das Symbol steht dunkel darauf, wie die
   Beschriftung dort auch – auf dem hellen Ende des Verlaufs kaeme Weiss auf
   1.8:1, dunkel sind es selbst am violetten Ende noch 4.2:1. Kopf und
   Sendeknopf behalten den dunklen --accent-grad, dort traegt Weiss. */
#sua-root .lilafab-btn{
  position:absolute;right:0;bottom:0;
  width:var(--fab-size);height:var(--fab-size);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;padding:0;
  background:linear-gradient(96deg,var(--lavender),var(--purple));color:var(--ink);line-height:0;
  box-shadow:0 16px 38px -14px rgba(131,85,244,.9),0 2px 8px rgba(0,0,0,.35);
  -webkit-tap-highlight-color:transparent}
#sua-root .lilafab-btn:hover{background:linear-gradient(96deg,var(--lavender-soft),#9068f6)}
#sua-root .lilafab-btn svg{width:26px;height:26px}
#sua-root.is-open .lilafab-btn{display:none}

/* ============ TEASER BUBBLE ============ */
#sua-root .lilafab-teaser{
  position:absolute;bottom:calc(var(--fab-size) + 14px);right:4px;
  width:max-content;max-width:min(270px,calc(100vw - 40px));
  background:var(--surface);border:1px solid rgba(218,180,255,.34);border-radius:14px;
  padding:13px 30px 13px 15px;font:400 14px/1.5 var(--ui);color:var(--dim);cursor:pointer;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.8),0 4px 10px -6px rgba(0,0,0,.45);
  transform-origin:bottom right;
  opacity:0;transform:translateY(8px) scale(.96);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  -webkit-tap-highlight-color:transparent}
#sua-root .lilafab-teaser.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
#sua-root.is-open .lilafab-teaser{display:none}
#sua-root .lilafab-teaser b{color:var(--lavender);font-weight:600}
/* Das Kreuz war 19px klein – auch mit der Maus schwer zu treffen. */
#sua-root .lilafab-teaser button{position:absolute;top:2px;right:2px;background:none;border:0;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;
  color:var(--dim-2);font:400 17px var(--ui);line-height:1;padding:2px 4px}
#sua-root .lilafab-teaser button:hover{color:var(--white)}
#sua-root .lilafab-teaser[hidden]{display:none}
/* little rotated-square tail pointing down at the launcher */
#sua-root .lilafab-teaser::after{
  content:"";position:absolute;bottom:-7px;right:20px;width:13px;height:13px;
  background:var(--surface);
  border-right:1px solid rgba(218,180,255,.34);border-bottom:1px solid rgba(218,180,255,.34);
  transform:rotate(45deg)}

/* ============================================================
   PANEL
   ============================================================ */
#sua-root .lilafab-panel{
  position:absolute;right:0;bottom:0;
  width:min(380px,calc(100vw - 32px));
  height:min(580px,calc(100vh - var(--fab-bottom) - 24px));
  height:min(580px,calc(100dvh - var(--fab-bottom) - 24px));
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 26px 60px -18px rgba(0,0,0,.85),0 8px 16px -8px rgba(0,0,0,.5);
  display:flex;flex-direction:column;overflow:hidden;min-height:0;
  transform-origin:bottom right}
#sua-root .lilafab-panel[hidden]{display:none}

/* ============ HEADER ============ */
#sua-root .lfp-head{display:flex;flex:0 0 auto;align-items:center;gap:11px;min-width:0;
  padding:14px 14px 14px 16px;background:var(--accent-grad);color:#fff}
#sua-root .lfp-head>div{min-width:0;flex:1}
#sua-root .lfp-head b{font:800 15px/1.2 var(--disp);color:#fff;display:block}
/* no opacity here: white at 85% drops to 3.79:1 on #8355f4 and fails AA */
#sua-root .lfp-head span{font:400 12.5px/1.35 var(--ui);color:#fff;display:block;margin-top:2px}
@media (max-width:380px){#sua-root .lfp-head span{font-size:12px}}
#sua-root .lfp-head .x{margin-left:auto;background:rgba(255,255,255,.14);border:0;cursor:pointer;color:#fff;
  width:32px;height:32px;border-radius:50%;padding:0;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
#sua-root .lfp-head .x:hover{background:rgba(255,255,255,.26)}
#sua-root .lfp-head .x svg{width:18px;height:18px}

/* ============ MESSAGE AREA ============ */
#sua-root .lfp-body{
  flex:1 1 auto;min-height:0;padding:16px;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;
  display:flex;flex-direction:column;align-items:stretch;gap:10px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
#sua-root .lfp-body::-webkit-scrollbar{width:8px}
#sua-root .lfp-body::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:4px}
#sua-root .lfp-body::-webkit-scrollbar-track{background:transparent}

#sua-root .msg{max-width:85%;font:400 14.5px/1.55 var(--ui);word-wrap:break-word;overflow-wrap:break-word}
#sua-root .msg.bot{background:var(--surface-2);border:1px solid var(--line);border-radius:14px 14px 14px 4px;
  padding:10px 14px;color:var(--dim);align-self:flex-start}
#sua-root .msg.bot b{color:var(--white);font-weight:600}
#sua-root .msg.me{background:rgba(131,85,244,.24);border:1px solid rgba(218,180,255,.3);border-radius:14px 14px 4px 14px;
  padding:10px 14px;color:#e2daf7;align-self:flex-end;white-space:pre-wrap}

/* ============ STARTER CHIPS ============ */
#sua-root .lfp-chips{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:100%;margin-top:2px}
#sua-root .lfp-chips button{
  border:1px solid rgba(131,85,244,.55);background:rgba(131,85,244,.12);color:var(--lavender);
  font:500 13px/1.3 var(--ui);padding:8px 13px;border-radius:99px;cursor:pointer;text-align:left;
  -webkit-tap-highlight-color:transparent}
#sua-root .lfp-chips button:hover{background:rgba(131,85,244,.24);border-color:var(--purple);color:var(--white)}
#sua-root .lfp-chips button:active{transform:scale(.97)}
/* Themen-Chip: fuehrt zu den Fragen, deshalb der Pfeil */
#sua-root .lfp-chips button.is-topic{font-weight:600}
#sua-root .lfp-chips button.is-topic::after{content:" ›";opacity:.65}
/* Zurueck-Chip bleibt zurueckhaltend und nicht volle Breite */
#sua-root .lfp-chips.is-stacked button.is-back{width:auto;align-self:flex-start;
  background:transparent;border-color:var(--line-i);color:var(--dim);font-weight:600}
#sua-root .lfp-chips button.is-back:hover{background:rgba(255,255,255,.05);
  border-color:var(--dim-2);color:var(--white)}
/* long starter questions read better stacked full-width, like the reference's question list */
#sua-root .lfp-chips.is-stacked{flex-direction:column;align-items:stretch;width:100%}
#sua-root .lfp-chips.is-stacked button{width:100%;border-radius:12px}

/* ============ TYPING INDICATOR ============ */
#sua-root .lila-typing{display:inline-flex;align-items:center;gap:4px;padding:2px 0;vertical-align:middle}
#sua-root .lila-typing span{display:block;width:6px;height:6px;border-radius:50%;background:var(--dim-2);opacity:.35}

/* ============ TOOL STATUS LINE ("Lila prüft Termine …") ============ */
#sua-root .sua-tool{display:flex;align-items:center;gap:7px;align-self:flex-start;margin:-4px 0 0 6px;
  font:400 12.5px/1.4 var(--ui);color:var(--dim-2);font-style:italic}
#sua-root .sua-tool::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lavender);flex:0 0 auto;opacity:.8}

/* ============ ERROR LINE ============ */
#sua-root .lfp-err{padding:0 16px 10px;flex:0 0 auto;font:400 12.5px var(--ui);color:#ffa3a3}
#sua-root .lfp-err[hidden]{display:none}

/* ============ COMPOSER ============ */
#sua-root .lfp-composer{display:flex;flex:0 0 auto;align-items:flex-end;gap:8px;padding:10px 12px;
  border-top:1px solid var(--line);background:rgba(10,10,18,.55)}
#sua-root .lfp-composer[hidden]{display:none}
#sua-root .lfp-composer input,
#sua-root .lfp-composer textarea{flex:1;min-width:0;background:var(--ink);border:1px solid var(--line-i);border-radius:12px;
  color:var(--white);font:400 14px/1.4 var(--ui);padding:10px 12px}
#sua-root .lfp-composer input:focus,
#sua-root .lfp-composer textarea:focus{border-color:var(--lavender)}
/* only the pointer-focus case loses the ring; keyboard focus keeps #sua-root :focus-visible */
#sua-root .lfp-composer input:focus:not(:focus-visible),
#sua-root .lfp-composer textarea:focus:not(:focus-visible){outline:none}
#sua-root .lfp-composer input::placeholder,
#sua-root .lfp-composer textarea::placeholder{color:#73799c}
/* the textarea replaces the page's single-line input: grows from 40px to 120px (JS sets the height) */
#sua-root .lfp-composer textarea{display:block;width:100%;height:auto;min-height:40px;max-height:120px;margin:0;
  resize:none;overflow-y:auto;box-shadow:none;-webkit-appearance:none;appearance:none}
/* round icon send button */
#sua-root .lfp-composer button{flex:0 0 auto;width:40px;height:40px;padding:0;border:0;border-radius:50%;
  background:var(--accent-grad);color:#fff;cursor:pointer;line-height:0;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
#sua-root .lfp-composer button svg{width:18px;height:18px}
#sua-root .lfp-composer button:hover{background:var(--accent-lift)}
#sua-root .lfp-composer button:active{transform:scale(.95)}
#sua-root .lfp-composer button:disabled{background:#3b3d55;color:var(--dim-2);cursor:not-allowed}
#sua-root .lfp-composer button:disabled:hover{background:#3b3d55}
#sua-root .lfp-composer button:disabled:active{transform:none}
/* 16px keeps iOS from zooming the page when the textarea takes focus */
@media (max-width:768px){#sua-root .lfp-composer input,#sua-root .lfp-composer textarea{font-size:16px}}

/* ============ FOOTER ACTION + NOTE ============ */
#sua-root .lfp-foot{padding:10px 12px;border-top:1px solid var(--line);display:flex;flex:0 0 auto;gap:8px}
#sua-root .lfp-foot .btn{flex:1;justify-content:center;white-space:nowrap}
#sua-root .lfp-note{padding:8px 14px 12px;flex:0 0 auto;text-align:center;
  font:400 12.5px/1.45 var(--ui);color:var(--dim-2);border-top:1px solid var(--line)}
#sua-root .lfp-note a{color:var(--lavender);text-decoration:underline;text-underline-offset:2px}
#sua-root .lfp-note a:hover,#sua-root .lfp-note a:focus-visible{color:var(--lavender-soft)}

/* ============ BOT MARKDOWN SUBSET ============ */
#sua-root .msg.bot strong{color:var(--white);font-weight:600}
#sua-root .msg.bot em{font-style:italic;color:#c9cde3}
#sua-root .msg.bot code{font:400 13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:rgba(255,255,255,.08);color:var(--lavender);padding:1px 6px;border-radius:6px;word-break:break-word}
#sua-root .msg.bot ul{margin:6px 0 4px;padding:0 0 0 18px;list-style:disc}
#sua-root .msg.bot li{margin:3px 0;padding:0}
#sua-root .msg.bot li::marker{color:var(--lavender)}

/* ============ IN-CHAT FLOW CARDS (summary / cancel) ============ */
#sua-root .sumcard{background:rgba(131,85,244,.09);border:1px solid var(--aqua);border-radius:12px;padding:14px 16px}
#sua-root .sumcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font:400 13.5px var(--ui)}
#sua-root .sumcard dt{color:var(--dim-2)}
#sua-root .sumcard dd{margin:0;color:var(--white);word-break:break-word}
#sua-root .sumact{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
#sua-root .sumact button{cursor:pointer;border-radius:99px;font:600 13.5px var(--ui);padding:10px 16px;border:0}
#sua-root .sumact .go{background:var(--aqua);color:#fff}
#sua-root .sumact .edit{background:transparent;color:var(--dim);border:1px solid var(--line)}
#sua-root .flowcancel{margin-top:10px}
#sua-root .flowcancel button{background:none;border:0;cursor:pointer;color:var(--dim-2);font:400 12.5px var(--ui);
  text-decoration:underline;text-underline-offset:3px;padding:0}

/* ============ POSITION VARIANT ============ */
#sua-root[data-position="bottom-left"]{right:auto;left:clamp(14px,3vw,26px)}
#sua-root[data-position="bottom-left"] .lilafab-btn{right:auto;left:0}
#sua-root[data-position="bottom-left"] .lilafab-panel{right:auto;left:0;transform-origin:bottom left}
#sua-root[data-position="bottom-left"] .lilafab-teaser{right:auto;left:4px;transform-origin:bottom left}
#sua-root[data-position="bottom-left"] .lilafab-teaser::after{right:auto;left:20px}

/* ============ PHONES ============ */
@media (max-width:480px){
  #sua-root.lilafab{--fab-size:48px;left:14px;right:14px;width:auto;height:48px;
    /* the root spans the viewport here only so the panel can stretch; the empty
       strip beside the launcher must stay click-through */
    pointer-events:none}
  #sua-root .lilafab-btn,#sua-root .lilafab-panel{pointer-events:auto}
  #sua-root .lilafab-btn svg{width:24px;height:24px}
  #sua-root .lilafab-panel{
    left:0;right:0;width:auto;border-radius:14px;
    height:calc(100vh - var(--fab-bottom) - 12px);
    height:calc(100dvh - var(--fab-bottom) - 12px)}
  /* the [data-position] variant rule outranks this block, so re-assert both
     anchors or the panel falls back to shrink-to-fit width */
  #sua-root[data-position="bottom-left"] .lilafab-panel{left:0;right:0;width:auto}
  #sua-root .lilafab-teaser{max-width:min(260px,calc(100vw - 48px))}
  #sua-root .lilafab-teaser::after{right:16px}
  #sua-root[data-position="bottom-left"] .lilafab-teaser::after{right:auto;left:16px}
}

/* ============ TELEFON: VOLLBILD ============
   Am Telefon ist der Chat kein Fenster ueber der Seite, sondern die ganze
   Flaeche: randlos von Kante zu Kante, ohne Ecken und ohne Rahmen. Die
   Sicherheitsabstaende (Notch oben, Home-Leiste unten) haengen an Kopf und
   Fusszeile, damit nichts darunter rutscht. */
@media (max-width:600px){
  #sua-root .lilafab-panel,
  #sua-root[data-position="bottom-left"] .lilafab-panel{
    position:fixed;left:0;right:0;top:0;bottom:0;width:auto;
    height:100vh;height:100dvh;max-height:none;
    border:0;border-radius:0}
  #sua-root .lfp-head{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  #sua-root .lfp-note{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  /* Tastatur offen: der Platz gehoert den Nachrichten und der Eingabe. Der
     Termin-Knopf und der Hinweis treten so lange weg – sonst schieben sie
     genau das aus dem Bild, was man gerade tippt. */
  #sua-root.kb-open .lfp-foot,
  #sua-root.kb-open .lfp-note{display:none}
}

/* ============ MOTION ============ */
@media (prefers-reduced-motion:no-preference){
  #sua-root .btn,#sua-root .lfp-chips button{
    transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}
  #sua-root .btn:hover{transform:translateY(-2px)}
  #sua-root .lilafab-btn{transition:transform .15s ease,box-shadow .15s ease}
  #sua-root .lilafab-btn:hover{transform:scale(1.05)}
  #sua-root .lilafab-btn:active{transform:scale(.96)}
  #sua-root .lfp-head .x,#sua-root .lfp-composer button{transition:background .15s ease,transform .15s ease}
  #sua-root .lilafab-panel{animation:sua-pop .2s cubic-bezier(.22,.61,.36,1)}
  @keyframes sua-pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
  #sua-root .lila-typing span{animation:sua-blink 1.2s ease-in-out infinite}
  #sua-root .lila-typing span:nth-child(2){animation-delay:.15s}
  #sua-root .lila-typing span:nth-child(3){animation-delay:.3s}
  @keyframes sua-blink{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
  #sua-root .sua-tool::before{animation:sua-pulse 1.1s ease-in-out infinite alternate}
  @keyframes sua-pulse{from{opacity:.35}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  #sua-root,#sua-root *{animation:none!important;transition:none!important}
  #sua-root .lfp-body{scroll-behavior:auto}
  #sua-root .lila-typing span{opacity:.8}
}

/* comfortable thumb targets on touch devices */
@media (pointer:coarse){
  #sua-root .btn.sm{padding:12px 20px;min-height:44px}
  #sua-root .lfp-head .x{width:44px;height:44px}
  #sua-root .lfp-composer button{width:44px;height:44px}
  #sua-root .lfp-chips button{min-height:44px}
  /* das Kreuz der Sprechblase sass bei 19-35px – zu klein zum Wegtippen */
  #sua-root .lilafab-teaser button{top:0;right:0;width:44px;height:44px;padding:0;
    display:flex;align-items:center;justify-content:center;font-size:20px}
  #sua-root .lfp-note a{display:inline-block;padding:4px 2px}
}

/* touch devices keep :hover applied after a tap – anything that moves must be reset */
@media (hover:none){
  #sua-root .btn:hover{transform:none}
  #sua-root .lilafab-btn:hover{transform:none}
  #sua-root .lfp-chips button:hover{background:rgba(131,85,244,.12);border-color:rgba(131,85,244,.55);color:var(--lavender)}
}