/* Masse dieses Panels kommen aus specs/DESIGN-ASSISTANT-PANEL.md - der EINEN
 * Referenz fuer Landing-Widget (.aw-*) und App-Guide (.ag-*). Aufgabe darf
 * abweichen, das UI nicht: wer eine Zahl aendert, aendert sie dort und dann in
 * beiden Dateien (Iman 2026-08-03). */
/* ============ AIOOS Widget — the embeddable widget itself ============ */
/* Scoped under .aw — styled as it would ship on a customer's site. */

.aw{
  --acc:#0084FF;
  --pri:#0084FF;
  --aw-r:24px;
  --acc-soft:color-mix(in oklab, var(--acc), #fff 18%);
  --acc-grad:linear-gradient(150deg, var(--acc-soft), var(--acc));
  --acc-dim:color-mix(in oklab, var(--acc), transparent 86%);
  --acc-line:color-mix(in oklab, var(--acc), transparent 74%);
  --pri-soft:color-mix(in oklab, var(--pri), #fff 18%);
  --pri-grad:linear-gradient(150deg, var(--pri-soft), var(--pri));
  position:absolute; bottom:22px; right:22px; z-index:40;
  font-family:var(--font-body); display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}
.aw[data-pos="left"]{right:auto; left:22px; align-items:flex-start}

/* ---------- launcher ---------- */
.aw-launch{
  display:inline-flex; align-items:center; gap:11px; padding:10px 20px 10px 11px; border-radius:100px;
  border:1px solid rgba(255,255,255,.95); cursor:pointer;
  background:rgba(255,255,255,.68); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.6), 0 22px 44px -18px rgba(20,50,110,.5);
  font-family:var(--font-head); font-size:14.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.aw-launch:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.6), 0 28px 54px -20px rgba(20,50,110,.55)}
.aw-launch:active{transform:scale(.97)}
.aw-mk{position:relative; width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; color:#fff; background:var(--pri-grad); overflow:hidden;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.4), 0 10px 20px -8px color-mix(in oklab, var(--pri), transparent 45%)}
.aw-mk svg{width:17px; height:14px; display:block}
.aw-mk .ring{position:absolute; inset:-3px; border-radius:50%;
  border:2px solid color-mix(in oklab, var(--acc), transparent 50%)}
@media (prefers-reduced-motion:no-preference){
  .aw[data-open="false"] .aw-mk .ring{animation:awRing 2.6s ease-out infinite}
}
@keyframes awRing{0%,55%{transform:scale(1); opacity:.9}100%{transform:scale(1.5); opacity:0}}
.aw-pip{width:8px; height:8px; border-radius:50%; background:#12A14A; flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(18,161,74,.18)}
.aw[data-launch="icon"] .aw-label,
.aw[data-launch="icon"] .aw-pip{display:none}
.aw[data-launch="icon"] .aw-launch{padding:10px}
/* open state: launcher becomes a close chip */
.aw .aw-x{display:none}
.aw[data-open="true"] .aw-label,.aw[data-open="true"] .aw-pip{display:none}
.aw[data-open="true"] .aw-launch{padding:10px}
.aw[data-open="true"] .aw-mk svg.wv{display:none}
.aw[data-open="true"] .aw-x{display:block}
.aw[data-open="true"] .aw-mk .ring{display:none}

/* ---------- panel ---------- */
.aw-panel{
  width:380px; max-width:calc(100vw - 24px); border-radius:var(--aw-r); overflow:hidden;
  /* The panel used to be 416px tall on ANY screen (head + a hard-coded 316px
     body + foot), which left the thread 192px — barely two bubbles — while
     ~480px of the window went unused (Iman 2026-08-02: "ye alame padding …
     text kuchike"). It grows with the conversation now, up to whatever the
     window allows: snug on the greeting, roomy once you are talking. */
  /* ONE size, always (Iman 2026-08-02: it must not grow from the top as the
     conversation gets longer — a panel that changes height on every message
     makes the page jump under the reader). The launcher hides while the panel
     is open, so it can reach almost to the bottom of the window. */
  height:min(620px, calc(100dvh - 44px));
  background:rgba(255,255,255,.72); backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 3px 4px rgba(255,255,255,.5), 0 36px 80px -30px rgba(20,50,110,.55);
  display:none; flex-direction:column; transform-origin:bottom right;
}
.aw[data-pos="left"] .aw-panel{transform-origin:bottom left}
.aw[data-open="true"] .aw-panel{display:flex}
@media (prefers-reduced-motion:no-preference){
  .aw[data-open="true"] .aw-panel{animation:awPop .42s cubic-bezier(.2,.9,.3,1.04)}
}
@keyframes awPop{from{transform:scale(.86) translateY(12px)}to{transform:none}}

.aw-head{display:flex; align-items:center; gap:11px; padding:15px 17px 13px;
  border-bottom:1px solid rgba(24,54,120,.08)}
.aw-head .am{width:36px; height:36px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center;
  color:#fff; background:var(--pri-grad); overflow:hidden;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.4), 0 8px 18px -8px color-mix(in oklab, var(--pri), transparent 45%)}
.aw-head .am img{width:100%; height:100%; object-fit:cover; display:block}
.aw-head .am svg{width:16px; height:13px}
.aw-head b{display:block; font-family:var(--font-head); font-size:15px; font-weight:800;
  letter-spacing:-.02em; color:var(--ink); line-height:1.2}
.aw-head em{display:inline-flex; align-items:center; gap:5px; font-style:normal;
  font-size:11.5px; font-weight:600; color:#12A14A; margin-top:2px}
.aw-head em i{width:6px; height:6px; border-radius:50%; background:#12A14A}
/* Close lives in the header, top right, where a panel's close belongs — it used
   to be the launcher BELOW the panel, which is where you look last (Iman
   2026-08-02). The launcher is hidden while the panel is open, so there is
   exactly one way to close and the panel inherits that space. */
.aw-close{margin-left:auto; width:32px; height:32px; border-radius:10px; flex:0 0 auto;
  display:grid; place-items:center; border:none; cursor:pointer; background:transparent;
  color:var(--ink-2); transition:background .2s, color .2s, transform .2s}
.aw-close:hover{background:rgba(24,54,120,.07); color:var(--ink)}
.aw-close:active{transform:scale(.92)}
.aw-close:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
.aw[data-open="true"] .aw-launch{display:none}
@media (prefers-reduced-motion:no-preference){.aw-head em i{animation:awPip 1.5s ease-in-out infinite}}
@keyframes awPip{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- mode tabs ---------- */
.aw-tabs{display:flex; gap:6px; padding:11px 14px 0}
.aw-tab{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 10px; border-radius:11px; border:1px solid transparent; cursor:pointer; background:transparent;
  font-family:var(--font-head); font-size:13px; font-weight:700; color:var(--ink-2);
  transition:background .25s, color .25s, border-color .25s}
.aw-tab svg{flex:0 0 auto}
.aw-tab:hover{background:rgba(255,255,255,.55); color:var(--ink)}
.aw-tab.on{background:rgba(255,255,255,.9); color:var(--ink); border-color:rgba(0,0,0,.07);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.6), 0 8px 18px -12px rgba(20,50,110,.4)}
.aw-tab.on svg{color:var(--acc)}

/* ---------- body ---------- */
.aw-body{flex:1; min-height:0; display:flex; flex-direction:column}
.aw-view{flex:1; min-height:0; display:none; flex-direction:column}
.aw-view.on{display:flex}

/* voice — idle */
.aw-vidle{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; padding:18px}
.aw-callbtn{position:relative; width:74px; height:74px; border-radius:50%; border:none; cursor:pointer;
  display:grid; place-items:center; color:#fff; background:var(--pri-grad);
  box-shadow:inset 0 3px 4px rgba(255,255,255,.4), 0 20px 40px -14px color-mix(in oklab, var(--pri), transparent 35%);
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.aw-callbtn:hover{transform:scale(1.06)}
.aw-callbtn:active{transform:scale(.95)}
.aw-callbtn .halo{position:absolute; inset:-5px; border-radius:50%;
  border:2px solid color-mix(in oklab, var(--acc), transparent 55%)}
@media (prefers-reduced-motion:no-preference){.aw-callbtn .halo{animation:awRing 2.2s ease-out infinite}}
.aw-vidle b{font-family:var(--font-head); font-size:15.5px; font-weight:800; letter-spacing:-.01em; color:var(--ink)}
.aw-vidle p{font-size:12.5px; font-weight:500; color:var(--ink-2); text-align:center; line-height:1.55; max-width:230px; margin:-6px 0 0}

/* voice — live */
.aw-vlive{flex:1; min-height:0; display:none; flex-direction:column}
.aw-view.calling .aw-vidle{display:none}
.aw-view.calling .aw-vlive{display:flex}
.aw-vtop{display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid rgba(24,54,120,.07)}
.aw-vtop .eq{display:flex; align-items:center; gap:2.5px; height:20px}
.aw-vtop .eq i{width:3px; height:5px; border-radius:2px; background:#C9D6E8; transition:background .3s}
.aw-view.talk .aw-vtop .eq i{background:var(--acc-grad)}
@media (prefers-reduced-motion:no-preference){
  .aw-view.calling .aw-vtop .eq i{animation:bar 1s ease-in-out infinite}
}
.aw-vtop em{font-style:normal; font-size:12px; font-weight:700; color:var(--ink-2);
  font-variant-numeric:tabular-nums; margin-left:auto}
.aw-hang{width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; flex:0 0 auto;
  display:grid; place-items:center; background:linear-gradient(150deg,#F4736B,#E5484D);
  box-shadow:0 8px 16px -7px rgba(229,72,77,.6); transition:transform .2s}
.aw-hang:hover{transform:scale(1.08)}
.aw-caps{flex:1; min-height:0; padding:13px 15px; display:flex; flex-direction:column; gap:8px;
  justify-content:flex-end; overflow:hidden}
.aw-cap{max-width:88%; padding:8px 12px; border-radius:14px; font-size:13px; line-height:1.5;
  font-weight:500; color:var(--ink-soft); transition:opacity .4s, transform .4s;
  background:rgba(255,255,255,.9); border:1px solid rgba(24,54,120,.08); border-bottom-left-radius:5px;
  align-self:flex-start; box-shadow:0 8px 18px -14px rgba(20,50,110,.4)}
.aw-cap.cu{align-self:flex-end; border-bottom-left-radius:14px; border-bottom-right-radius:5px;
  background:var(--acc-dim); border-color:var(--acc-line)}
.aw-cap.dim{opacity:.45; transform:scale(.985)}
@media (prefers-reduced-motion:no-preference){.aw-cap{animation:msgIn .35s cubic-bezier(.2,.7,.3,1)}}

/* result ribbon (mini) */
.aw-result{align-self:center; display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:100px; font-size:12px; font-weight:700; color:#0E7A3D;
  background:rgba(37,211,102,.13); border:1px solid rgba(18,161,74,.3)}
@media (prefers-reduced-motion:no-preference){.aw-result{animation:msgIn .45s cubic-bezier(.2,.7,.3,1)}}
.aw-result .rk{width:16px; height:16px; border-radius:50%; background:#12A14A; color:#fff;
  display:grid; place-items:center; flex:0 0 auto}

/* chat */
.aw-msgs{flex:1; min-height:0; padding:14px 15px 8px; display:flex; flex-direction:column; gap:8px;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch}
/* the thread starts at the TOP of the fixed panel. Bottom-anchored (the old
   margin-top:auto) left a lap of empty glass above the greeting on first open —
   the "alame padding" from the same report. */
.aw-bub{max-width:86%; padding:10px 13px; border-radius:15px; font-size:15px; line-height:1.55; font-weight:500}
/* Antwortblasen duerfen die volle Breite nehmen - eine Aufzaehlung bricht sonst
   in jeder Zeile um (DESIGN-ASSISTANT-PANEL.md §3). */
.aw-bub.bot{max-width:100%}
@media (prefers-reduced-motion:no-preference){.aw-bub,.aw-typing{animation:msgIn .35s cubic-bezier(.2,.7,.3,1)}}
.aw-bub.bot{align-self:flex-start; border-bottom-left-radius:5px; color:var(--ink-soft);
  background:rgba(255,255,255,.92); border:1px solid rgba(24,54,120,.08);
  box-shadow:0 8px 18px -14px rgba(20,50,110,.4)}
.aw-bub.me{align-self:flex-end; border-bottom-right-radius:5px; color:#fff; background:var(--pri-grad);
  box-shadow:0 10px 20px -10px color-mix(in oklab, var(--pri), transparent 45%)}
.aw-typing{align-self:flex-start; display:inline-flex; gap:4px; padding:10px 14px; border-radius:15px;
  border-bottom-left-radius:5px; background:rgba(255,255,255,.92); border:1px solid rgba(24,54,120,.08)}
.aw-typing i{width:5px; height:5px; border-radius:50%; background:#9FB0C8}
@media (prefers-reduced-motion:no-preference){
  .aw-typing i{animation:typdot 1.1s ease-in-out infinite}
  .aw-typing i:nth-child(2){animation-delay:.15s}
  .aw-typing i:nth-child(3){animation-delay:.3s}
}
/* quick-reply chips — they WRAP now. As one nowrap scroll-row, 849px of chips
   sat in a 341px box: 508px of them were simply off-screen with only a mask
   hinting at it, so question two onwards was invisible (Iman 2026-08-02).
   The script also caps how many are offered at once. */
.aw-chips-hint{padding:8px 16px 0; font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2); opacity:.75}
/* Eine Zeile mit weicher Kante statt Umbruch (Iman 2026-08-03: die scrollende
   Reihe ist gut, nur die Pillen waren zu gross). Die Kante ist ein HINWEIS,
   kein Versteck - widget-embed.js bietet hoechstens CHIPS_AT_ONCE gleichzeitig
   an, sonst wiederholt sich 2026-08-02 (849px Chips in einer 341px-Box). */
.aw-chips{display:flex; flex-wrap:nowrap; gap:6px; padding:6px 15px 10px;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  transition:opacity .3s, transform .3s}
.aw-chips::-webkit-scrollbar{display:none}
.aw-chips.off, .aw-chips:empty{opacity:0; transform:translateY(5px); pointer-events:none}
.aw-chip{flex:0 0 auto; max-width:100%; display:inline-flex; align-items:center; min-height:32px;
  scroll-snap-align:start; white-space:nowrap;
  padding:6px 11px; border-radius:100px; cursor:pointer; font-size:12.5px; font-weight:600;
  color:var(--acc); background:var(--acc-dim); border:1px solid var(--acc-line);
  transition:background .2s, transform .2s}
.aw-chip:hover{background:color-mix(in oklab, var(--acc), transparent 78%)}
.aw-chip:active{transform:scale(.95)}

/* in-thread jump button. The assistant used to answer "ich bringe Sie zur
   Übersicht" and then SHUT ITSELF and scroll the page 7.783px — the visitor
   lost both the answer and their place (Iman 2026-08-02: "mire, collapse
   mishe, baste mishe yoho"). Now the jump is an offer they can take. */
.aw-go{align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  margin-top:-2px; padding:9px 15px; border-radius:12px; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:12.5px; font-weight:700; color:#fff;
  background:var(--pri-grad); box-shadow:0 12px 22px -12px color-mix(in oklab, var(--pri), transparent 40%);
  transition:transform .2s, box-shadow .2s}
.aw-go:hover{transform:translateY(-1px)}
.aw-go:active{transform:scale(.96)}
.aw-go svg{flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){.aw-go{animation:msgIn .35s cubic-bezier(.2,.7,.3,1)}}
.aw[data-theme="dark"] .aw-go{color:#fff}
.aw-inrow{display:flex; gap:8px; padding:0 14px 14px}
.aw-in{flex:1; min-width:0; padding:11px 14px; border-radius:12px; border:1px solid rgba(24,54,120,.12);
  background:rgba(255,255,255,.85); font-family:var(--font-body); font-size:15.5px; font-weight:500; color:var(--ink);
  outline:none; transition:border-color .2s, box-shadow .2s}
.aw-in:focus{border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-dim)}
.aw-in::placeholder{color:#9FB0C8}
.aw-send{width:42px; height:42px; border-radius:12px; border:none; cursor:pointer; flex:0 0 auto;
  display:grid; place-items:center; color:#fff; background:var(--pri-grad);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.4), 0 10px 20px -9px color-mix(in oklab, var(--pri), transparent 40%);
  transition:transform .2s}
.aw-send:hover{transform:scale(1.06)}
.aw-send:active{transform:scale(.94)}

/* footer */
.aw-foot{display:flex; align-items:center; justify-content:center; gap:6px; padding:9px;
  border-top:1px solid rgba(24,54,120,.07); font-size:10.5px; font-weight:700;
  letter-spacing:.04em; color:#8395AE}
.aw-foot svg{opacity:.75}
.aw-foot b{color:var(--ink-2); font-weight:800; letter-spacing:-.01em}

@keyframes msgIn{from{transform:translateY(9px) scale(.97)}to{transform:none}}
@keyframes bar{0%,100%{height:5px}50%{height:16px}}
@keyframes typdot{0%,100%{transform:translateY(0); opacity:.5}40%{transform:translateY(-3px); opacity:1}}

/* ---------- smart action card (per-branche quick actions) ---------- */
.aw-smart{align-self:flex-start; max-width:92%; border-radius:15px; overflow:hidden;
  background:rgba(255,255,255,.92); border:1px solid var(--acc-line);
  box-shadow:0 10px 24px -14px color-mix(in oklab, var(--acc), transparent 50%)}
@media (prefers-reduced-motion:no-preference){.aw-smart{animation:msgIn .4s cubic-bezier(.2,.7,.3,1)}}
.aw-smart .sm-top{display:flex; align-items:center; gap:8px; padding:9px 13px 8px;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--acc);
  background:var(--acc-dim)}
.aw-smart .sm-body{padding:10px 13px 12px}
.aw-smart .sm-body b{display:block; font-family:var(--font-head); font-size:13.5px; font-weight:800;
  color:var(--ink); letter-spacing:-.01em}
.aw-smart .sm-body em{display:block; font-style:normal; font-size:11.5px; font-weight:600;
  color:#7E8EA6; margin-top:2px}
.aw-smart .sm-acts{display:flex; gap:7px; margin-top:10px; flex-wrap:wrap}
.aw-smart .sm-acts button{padding:8px 14px; border-radius:10px; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:12.5px; font-weight:700; color:#fff; background:var(--acc-grad);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.3), 0 8px 18px -8px color-mix(in oklab, var(--acc), transparent 45%);
  transition:transform .2s}
.aw-smart .sm-acts button:hover{transform:translateY(-1px)}
.aw-smart .sm-acts button:active{transform:scale(.95)}
.aw-smart .sm-acts button.ghost{color:var(--acc); background:var(--acc-dim); box-shadow:none;
  border:1px solid var(--acc-line)}
.aw[data-theme="dark"] .aw-smart{background:rgba(255,255,255,.07); border-color:var(--acc-line)}
.aw[data-theme="dark"] .aw-smart .sm-body b{color:#EAF2FF}
.aw[data-theme="dark"] .aw-smart .sm-body em{color:#8FA3C2}

/* ============ orb launcher ============ */
.aw-mk .orbbars{display:none; align-items:center; justify-content:center; gap:2.5px; height:14px}
.aw-mk .orbbars i{width:2.5px; height:5px; border-radius:2px; background:rgba(255,255,255,.95);
  box-shadow:0 0 8px rgba(255,255,255,.6)}
.aw[data-launch="orb"] .aw-mk{width:44px; height:44px;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.95), transparent 28%),
    radial-gradient(circle at 36% 32%, color-mix(in oklab, var(--acc), #fff 35%) 0%, var(--acc) 55%, color-mix(in oklab, var(--acc), #04101F 62%) 100%);
  box-shadow:inset 0 -8px 16px color-mix(in oklab, var(--acc), #02060F 60%),
    inset 0 4px 8px rgba(255,255,255,.3),
    0 14px 30px -10px color-mix(in oklab, var(--acc), transparent 35%)}
.aw[data-launch="orb"] .aw-mk svg.wv{display:none}
.aw[data-launch="orb"][data-open="false"] .aw-mk .orbbars{display:flex}
@media (prefers-reduced-motion:no-preference){
  .aw[data-launch="orb"][data-open="false"] .aw-mk{animation:awOrbBreath 3.4s ease-in-out infinite}
  .aw[data-launch="orb"][data-open="false"] .orbbars i{animation:bar 1.15s ease-in-out infinite}
  .aw[data-launch="orb"][data-open="false"] .orbbars i:nth-child(2){animation-delay:.16s}
  .aw[data-launch="orb"][data-open="false"] .orbbars i:nth-child(3){animation-delay:.32s}
  .aw[data-launch="orb"][data-open="false"] .orbbars i:nth-child(4){animation-delay:.08s}
}
@keyframes awOrbBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.aw[data-launch="orb"][data-open="true"] .aw-mk{width:38px; height:38px; background:var(--acc-grad);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.4), 0 10px 20px -8px color-mix(in oklab, var(--acc), transparent 45%)}

/* ============ dark material ============ */
.aw[data-theme="dark"] .aw-panel{background:rgba(12,20,40,.88); border-color:rgba(139,178,255,.28);
  box-shadow:inset 0 1px 0 rgba(196,220,255,.14), 0 36px 80px -30px rgba(2,8,26,.85)}
.aw[data-theme="dark"] .aw-head{border-bottom-color:rgba(139,178,255,.16)}
.aw[data-theme="dark"] .aw-head b{color:#EAF2FF}
.aw[data-theme="dark"] .aw-close{color:#8FA3C2}
.aw[data-theme="dark"] .aw-close:hover{background:rgba(255,255,255,.09); color:#EAF2FF}
.aw[data-theme="dark"] .aw-tab{color:#8FA3C2}
.aw[data-theme="dark"] .aw-tab:hover{background:rgba(255,255,255,.07); color:#EAF2FF}
.aw[data-theme="dark"] .aw-tab.on{background:rgba(255,255,255,.1); color:#fff;
  border-color:rgba(139,178,255,.28); box-shadow:inset 0 1px 0 rgba(196,220,255,.12)}
.aw[data-theme="dark"] .aw-vidle b{color:#EAF2FF}
.aw[data-theme="dark"] .aw-vidle p{color:#7E90AC}
.aw[data-theme="dark"] .aw-vtop{border-bottom-color:rgba(139,178,255,.14)}
.aw[data-theme="dark"] .aw-vtop .eq i{background:#33476B}
.aw[data-theme="dark"] .aw-vtop em{color:#8FA3C2}
.aw[data-theme="dark"] .aw-cap,
.aw[data-theme="dark"] .aw-bub.bot,
.aw[data-theme="dark"] .aw-typing{background:rgba(255,255,255,.08); border-color:rgba(139,178,255,.2); color:#C9D6EC}
.aw[data-theme="dark"] .aw-typing i{background:#7E90AC}
.aw[data-theme="dark"] .aw-in{background:rgba(255,255,255,.06); border-color:rgba(139,178,255,.22); color:#EAF2FF}
.aw[data-theme="dark"] .aw-in::placeholder{color:#5E7194}
.aw[data-theme="dark"] .aw-foot{border-top-color:rgba(139,178,255,.14); color:#5E7194}
.aw[data-theme="dark"] .aw-foot b{color:#C3D2EA}
.aw[data-theme="dark"] .aw-launch{background:rgba(12,20,40,.85); border-color:rgba(139,178,255,.3); color:#EAF2FF;
  box-shadow:inset 0 1px 0 rgba(196,220,255,.15), 0 22px 44px -18px rgba(2,8,26,.8)}
.aw[data-theme="dark"] .aw-result{background:rgba(37,211,102,.14); color:#7BEFB6}

/* ============ v3 options ============ */

/* ---------- header styles ---------- */
.aw[data-header="verlauf"] .aw-head{background:var(--pri-grad); border-bottom-color:transparent}
.aw[data-header="einfarbig"] .aw-head{background:var(--pri); border-bottom-color:transparent}
.aw[data-header="verlauf"] .aw-head b,
.aw[data-header="einfarbig"] .aw-head b{color:#fff}
.aw[data-header="verlauf"] .aw-head em,
.aw[data-header="einfarbig"] .aw-head em{color:rgba(255,255,255,.88)}
.aw[data-header="verlauf"] .aw-head em i,
.aw[data-header="einfarbig"] .aw-head em i{background:#9FF5C3}
.aw[data-header="verlauf"] .aw-close,
.aw[data-header="einfarbig"] .aw-close{color:rgba(255,255,255,.85)}
.aw[data-header="verlauf"] .aw-close:hover,
.aw[data-header="einfarbig"] .aw-close:hover{background:rgba(255,255,255,.18); color:#fff}
.aw[data-header="verlauf"] .aw-head .am,
.aw[data-header="einfarbig"] .aw-head .am{background:rgba(255,255,255,.18); box-shadow:none}

/* ---------- status ---------- */
.aw .aw-head em.away{color:#B45309}
.aw .aw-head em.away i{background:#F5A524}
.aw[data-header="verlauf"] .aw-head em.away,
.aw[data-header="einfarbig"] .aw-head em.away{color:#FFE3B3}
.aw[data-header="verlauf"] .aw-head em.away i,
.aw[data-header="einfarbig"] .aw-head em.away i{background:#FFC95E}

/* ---------- logo on the launcher ---------- */
.aw-mk .lgi{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; display:none}
.aw.has-logo[data-open="false"] .aw-mk .lgi{display:block}
.aw.has-logo[data-open="false"] .aw-mk .wv,
.aw.has-logo[data-open="false"] .aw-mk .lic,
.aw.has-logo[data-open="false"] .aw-mk .orbbars{display:none}

/* ---------- launcher icon variants (Stil "Symbol") ---------- */
.aw-mk .lic{display:none; width:17px; height:17px}
.aw[data-launch="icon"][data-open="false"] .aw-mk .wv{display:none}
.aw[data-launch="icon"][data-open="false"]:not(.has-logo) .aw-mk .lic.show{display:block}

/* ---------- pulse toggle ---------- */
.aw[data-pulse="false"] .aw-mk .ring{display:none}

/* ---------- button size ---------- */
.aw[data-size="klein"] .aw-mk{width:32px; height:32px}
.aw[data-size="klein"] .aw-launch{font-size:13px; gap:9px}
.aw[data-size="klein"][data-launch="orb"][data-open="false"] .aw-mk{width:38px; height:38px}
.aw[data-size="gross"] .aw-mk{width:46px; height:46px}
.aw[data-size="gross"] .aw-launch{font-size:15.5px; gap:12px}
.aw[data-size="gross"][data-launch="orb"][data-open="false"] .aw-mk{width:54px; height:54px}

/* ---------- surface ---------- */
.aw[data-surface="solide"] .aw-panel{background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-color:rgba(24,54,120,.12); box-shadow:0 24px 60px -28px rgba(20,50,110,.4)}
.aw[data-surface="solide"] .aw-launch{background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-color:rgba(24,54,120,.12)}
.aw[data-surface="soft"] .aw-panel{background:rgba(255,255,255,.97); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-color:#fff; box-shadow:0 34px 90px -32px rgba(20,50,110,.36), 0 8px 22px -10px rgba(20,50,110,.16)}
.aw[data-theme="dark"][data-surface="solide"] .aw-panel{background:#0E1730}
.aw[data-theme="dark"][data-surface="solide"] .aw-launch{background:#0E1730}
.aw[data-theme="dark"][data-surface="soft"] .aw-panel{background:rgba(13,21,42,.97)}

/* ---------- density ---------- */
.aw[data-density="kompakt"] .aw-head{padding:11px 14px 10px}
.aw[data-density="kompakt"] .aw-head .am{width:30px; height:30px; border-radius:10px}
.aw[data-density="kompakt"] .aw-tabs{padding:8px 11px 0}
.aw[data-density="kompakt"] .aw-tab{padding:7px 8px; font-size:12px}
.aw[data-density="kompakt"] .aw-panel{height:min(560px, calc(100dvh - 56px))}
.aw[data-density="kompakt"] .aw-bub{padding:7px 11px}
.aw[data-density="kompakt"] .aw-chip{min-height:30px; padding:5px 10px; font-size:12px}
.aw[data-density="kompakt"] .aw-inrow{padding:0 11px 11px}
.aw[data-density="kompakt"] .aw-in{padding:8px 12px}
.aw[data-density="kompakt"] .aw-send,.aw[data-density="kompakt"] .aw-attach{width:36px; height:36px}
.aw[data-density="kompakt"] .aw-foot{padding:7px}

/* ---------- font style ---------- */
.aw[data-fontstyle="serif"] .aw-panel,.aw[data-fontstyle="serif"] .aw-launch,
.aw[data-fontstyle="serif"] .aw-head b,.aw[data-fontstyle="serif"] .aw-tab,
.aw[data-fontstyle="serif"] .aw-vidle b,.aw[data-fontstyle="serif"] .aw-teaser{font-family:Georgia,'Times New Roman',serif}
.aw[data-fontstyle="rund"] .aw-panel,.aw[data-fontstyle="rund"] .aw-launch,
.aw[data-fontstyle="rund"] .aw-head b,.aw[data-fontstyle="rund"] .aw-tab,
.aw[data-fontstyle="rund"] .aw-vidle b,.aw[data-fontstyle="rund"] .aw-teaser{font-family:ui-rounded,'SF Pro Rounded','Trebuchet MS','Segoe UI',sans-serif}

/* ---------- text size ---------- */
.aw[data-textsize="klein"] .aw-bub,.aw[data-textsize="klein"] .aw-cap,.aw[data-textsize="klein"] .aw-in{font-size:12px}
.aw[data-textsize="klein"] .aw-chip{font-size:11px}
.aw[data-textsize="gross"] .aw-bub,.aw[data-textsize="gross"] .aw-cap,.aw[data-textsize="gross"] .aw-in{font-size:14.5px}
.aw[data-textsize="gross"] .aw-chip{font-size:13px}

/* ---------- RTL ---------- */
.aw .aw-panel[dir="rtl"] .aw-bub.bot{align-self:flex-end; border-bottom-left-radius:15px; border-bottom-right-radius:5px}
.aw .aw-panel[dir="rtl"] .aw-bub.me{align-self:flex-start; border-bottom-right-radius:15px; border-bottom-left-radius:5px}
.aw .aw-panel[dir="rtl"] .aw-typing{align-self:flex-end}
.aw .aw-panel[dir="rtl"] .aw-smart{align-self:flex-end}

/* ---------- attachment button ---------- */
.aw-attach{display:none; width:40px; height:40px; border-radius:13px; flex:0 0 auto; border:1px solid rgba(24,54,120,.12);
  background:rgba(255,255,255,.85); color:#7E8EA6; cursor:pointer; place-items:center; transition:color .2s, transform .2s}
.aw-attach:hover{color:var(--acc)}
.aw-attach:active{transform:scale(.92)}
.aw[data-attach="true"] .aw-attach{display:grid}
.aw[data-theme="dark"] .aw-attach{background:rgba(255,255,255,.06); border-color:rgba(139,178,255,.22); color:#7E90AC}

/* ---------- image card ---------- */
.aw-imgcard{align-self:flex-start; max-width:82%; padding:5px; border-radius:15px; border-bottom-left-radius:5px;
  background:rgba(255,255,255,.92); border:1px solid rgba(24,54,120,.08); box-shadow:0 10px 22px -14px rgba(20,50,110,.4)}
@media (prefers-reduced-motion:no-preference){.aw-imgcard{animation:msgIn .4s cubic-bezier(.2,.7,.3,1)}}
.aw-imgcard img{display:block; width:100%; max-height:118px; object-fit:cover; border-radius:11px}
.aw-imgcard span{display:block; padding:7px 9px 4px; font-size:12px; font-weight:600; color:var(--ink-soft)}
.aw[data-theme="dark"] .aw-imgcard{background:rgba(255,255,255,.08); border-color:rgba(139,178,255,.2)}
.aw[data-theme="dark"] .aw-imgcard span{color:#C9D6EC}

/* ---------- teaser bubble ---------- */
.aw-teaser{display:none; max-width:240px; padding:11px 15px; border-radius:15px; border-bottom-right-radius:5px;
  background:rgba(255,255,255,.95); border:1px solid rgba(24,54,120,.1); cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--ink-soft); line-height:1.45;
  box-shadow:0 18px 40px -18px rgba(20,50,110,.45)}
.aw[data-pos="left"] .aw-teaser{border-bottom-right-radius:15px; border-bottom-left-radius:5px}
.aw[data-open="false"] .aw-teaser.show{display:block}
@media (prefers-reduced-motion:no-preference){.aw-teaser.show{animation:msgIn .45s cubic-bezier(.2,.7,.3,1)}}
.aw[data-theme="dark"] .aw-teaser{background:rgba(12,20,40,.94); border-color:rgba(139,178,255,.28); color:#C9D6EC}

/* ---------- footer toggle ---------- */
.aw[data-footer="false"] .aw-foot{display:none}