/* ==========================================================================
   dogphone.io – CYBA Widgets Theme Override
   Ziel:
   - Topic Buttons (marquee) in Header-Farbe #c9cf86 (glossy/3D)
   - Chat Widget Header + Send Button in #c9cf86 (glossy/3D)
   - Keine Funktion/JS Logik anfassen
   ========================================================================== */

:root{
  --dp-accent: #c9cf86;
  --dp-accent-top: rgba(223,230,166,0.98);
  --dp-accent-mid: rgba(201,207,134,0.98);
  --dp-accent-bot: rgba(170,177,110,0.98);
  --dp-shine: rgba(255,255,255,0.42);
}

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

  border: 1px solid rgba(255,255,255,0.55) !important;
  background: linear-gradient(180deg, var(--dp-accent-top) 0%, var(--dp-accent-mid) 55%, var(--dp-accent-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(--dp-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 (requested), just 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
   ----------------------------- */
.cyba-chat-widget__header{
  position: relative;
  overflow: hidden;

  background: linear-gradient(180deg, var(--dp-accent-top) 0%, var(--dp-accent-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(--dp-shine), transparent 65%);
}

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

/* -----------------------------
   Send Button
   ----------------------------- */
.cyba-chat-widget__send{
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.55) !important;
  background: linear-gradient(180deg, var(--dp-accent-top) 0%, var(--dp-accent-mid) 55%, var(--dp-accent-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(--dp-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;
}