/* VeloSchweiz Kaufbegleitung — Chat-Widget (MVP, DE). Vanilla, kein Framework. */
/* Launcher: Button oben, Label darunter — als Spalte rechtsbündig in der Ecke. Der Button sass
   20px über dem Rand, darunter war kein Platz; darum stapeln Button + Label in diesem Container,
   der die Ecke hält. Rechtsbündig, damit das nowrap-Label nie nach links über den Seiteninhalt
   läuft (vorher überlappte es den TCS-Text). */
.vskb-launch{position:fixed;right:20px;bottom:20px;z-index:2147483647;
  display:flex;flex-direction:column;align-items:flex-end;gap:0}
/* Runder Button, gegen Theme-Overrides gehärtet (padding/min-width/box-sizing) */
.vskb-btn{width:60px;height:60px;min-width:0;order:1;
  padding:0;box-sizing:border-box;border:none;border-radius:50%;background:#fb2056;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:0;
  box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .15s}
.vskb-btn:hover{transform:scale(1.06)}
.vskb-btn svg{display:block}
/* Label ÜBERLAPPT die unteren ~20% des Buttons (integrierter Look). margin-top:-12px zieht das
   Label 12px (≈20% von 60px) auf den Button hoch — da der bottom-verankerte Launcher dadurch kürzer
   wird, rutscht der Button zugleich nach unten. Label liegt oben (order:2 + z-index gegen den
   Hover-Transform des Buttons). pointer-events:none: der Button bleibt im Überlappungsbereich voll
   klickbar, Klicks gehen durch das Label hindurch. */
.vskb-tip{order:2;position:relative;z-index:1;margin-top:-12px;pointer-events:none;
  background:#fff;color:#191919;
  padding:7px 12px;border-radius:16px;font-size:14px;font-weight:600;white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.18)}
.vskb-launch.vskb-chatopen .vskb-tip{display:none} /* Label aus, solange der Chat offen ist */
.vskb-panel{position:fixed;right:20px;bottom:90px;z-index:2147483647;width:360px;max-width:calc(100vw - 40px);
  height:520px;max-height:calc(100vh - 120px);background:#fff;border-radius:16px;overflow:hidden;
  display:none;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.28);font-family:inherit}
.vskb-panel.vskb-open{display:flex}
.vskb-head{background:#191919;color:#fff;padding:14px 16px;font-weight:600;display:flex;
  justify-content:space-between;align-items:center}
.vskb-head small{display:block;font-weight:400;opacity:.75;font-size:12px;margin-top:2px}
.vskb-close{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1}
.vskb-body{flex:1;overflow-y:auto;padding:16px;background:#f7f7f7;display:flex;flex-direction:column;gap:10px}
.vskb-msg{max-width:82%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.4;white-space:pre-wrap}
.vskb-bot{align-self:flex-start;background:#fff;border:1px solid #ececec;border-bottom-left-radius:4px}
.vskb-user{align-self:flex-end;background:#fb2056;color:#fff;border-bottom-right-radius:4px}
.vskb-typing{align-self:flex-start;color:#888;font-size:13px;font-style:italic}
.vskb-foot{display:flex;gap:8px;padding:10px;border-top:1px solid #ececec;background:#fff}
/* font-size:16px ist Pflicht: iOS Safari zoomt beim Fokus automatisch rein, wenn ein Input < 16px
   hat. 16px verhindert den Zoom-Sprung, ohne maximum-scale am Viewport (das würde die Accessibility
   der ganzen Seite killen). */
.vskb-foot input{flex:1;border:1px solid #ddd;border-radius:20px;padding:10px 14px;font-size:16px;outline:none}
.vskb-foot input:focus{border-color:#fb2056}
.vskb-foot button{border:none;background:#fb2056;color:#fff;border-radius:20px;padding:0 16px;
  font-size:14px;cursor:pointer}
.vskb-foot button:disabled{opacity:.5;cursor:default}
.vskb-action{align-self:flex-start;margin-top:2px}
.vskb-action a,.vskb-action button{display:inline-block;background:#191919;color:#fff;text-decoration:none;
  border:none;border-radius:20px;padding:8px 14px;font-size:13px;cursor:pointer}
.vskb-link{color:#fb2056;text-decoration:underline;text-underline-offset:2px}
.vskb-link:hover{text-decoration-thickness:2px}