/* ==========================================================================
   babyphone.io – CYBA Widgets Theme Override
   Ziel:
   - Topic Buttons (marquee) in BLUE #6d8cb8 (white text)
   - Chat Widget Header + Send Button in PINK #9a849e (white text)
   - Keine Funktion/JS Logik anfassen
   ========================================================================== */

:root{
  /* BLUE for floating topic buttons */
  --bp-blue: #6d8cb8;
  --bp-blue-top: rgba(133, 163, 206, 0.98);
  --bp-blue-mid: rgba(109, 140, 184, 0.98);
  --bp-blue-bot: rgba(83, 110, 150, 0.98);

  /* PINK for widget header + send button */
  --bp-pink: #9a849e;
  --bp-pink-top: rgba(185, 164, 189, 0.98);
  --bp-pink-mid: rgba(154, 132, 158, 0.98);
  --bp-pink-bot: rgba(126, 108, 129, 0.98);

  /* glossy highlight */
  --bp-shine: rgba(255,255,255,0.42);
}

/* -----------------------------
   Topic Buttons (rotierende Topics)
   Farbe: BLUE (#6d8cb8)
   ----------------------------- */
button.cyba-topic-btn{
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.55) !important;

  background: linear-gradient(
    180deg,
    var(--bp-blue-top) 0%,
    var(--bp-blue-mid) 55%,
    var(--bp-blue-bot) 100%
  ) !important;

  color: #fff !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,0.22),
    inset 0 2px 0 rgba(255,255,255,0.30) !important;

  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

button.cyba-topic-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(120px 40px at 25% 20%, var(--bp-shine), transparent 65%);
}

button.cyba-topic-btn:hover{
  transform: translateY(-1px);
  filter: saturate(1.02);
  box-shadow:
    0 18px 42px rgba(0,0,0,0.24),
    inset 0 2px 0 rgba(255,255,255,0.30) !important;
}

/* Open state: keep same color, only slightly emphasize */
button.cyba-topic-btn.cyba-topic-btn--open{
  filter: saturate(1.05);
}

/* Ensure icons/text stay white */
button.cyba-topic-btn svg,
button.cyba-topic-btn .cyba-topic-label,
button.cyba-topic-btn .cyba-topic-x{
  color: #fff !important;
  fill: #fff !important;
}

/* -----------------------------
   Chat Widget Header
   Farbe: PINK (#9a849e)
   ----------------------------- */
.cyba-chat-widget__header{
  position: relative;
  overflow: hidden;

  background: linear-gradient(
    180deg,
    var(--bp-pink-top) 0%,
    var(--bp-pink-mid) 70%
  ) !important;

  color: #fff !important;

  border-bottom: 1px solid rgba(255,255,255,0.35) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,0.18),
    inset 0 2px 0 rgba(255,255,255,0.22);
}

.cyba-chat-widget__header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(160px 60px at 20% 15%, var(--bp-shine), transparent 65%);
}

.cyba-chat-widget__title,
.cyba-chat-widget__close{
  color: #fff !important;
}

/* Input focus border in PINK (optional, looks consistent) */
.cyba-chat-widget__input:focus{
  border-color: var(--bp-pink) !important;
}

/* -----------------------------
   Send Button
   Farbe: PINK (#9a849e)
   ----------------------------- */
.cyba-chat-widget__send{
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.55) !important;

  background: linear-gradient(
    180deg,
    var(--bp-pink-top) 0%,
    var(--bp-pink-mid) 55%,
    var(--bp-pink-bot) 100%
  ) !important;

  color: #fff !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,0.22),
    inset 0 2px 0 rgba(255,255,255,0.26) !important;

  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.cyba-chat-widget__send::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(120px 40px at 25% 20%, var(--bp-shine), transparent 65%);
}

.cyba-chat-widget__send:hover{
  transform: translateY(-1px);
  filter: saturate(1.02);
  box-shadow:
    0 18px 42px rgba(0,0,0,0.24),
    inset 0 2px 0 rgba(255,255,255,0.26) !important;
}