/**
 * SL Lime Gate – Styles
 * superliebe GmbH · The askwhole agency
 *
 * Design: nachgebaut nach dem echten Lime Connect Widget-Verhalten
 * Farbe: konfigurierbar via --slg-primary (Standard: BLÄK-Blau #003D7D)
 */

/* ── Custom Properties ───────────────────────────────────────────────────── */
#sl-lime-gate-wrapper {
  --slg-primary:      #003D7D;
  /* Fallback für Browser ohne color-mix(): Hover-Farbe = Primärfarbe
     (statt „invalid at computed-value time" → transparenter Button) */
  --slg-primary-dark: var(--slg-primary);
  --slg-white:        #ffffff;
  --slg-shadow:       0 4px 24px rgba(0,0,0,0.18);
  --slg-radius:       16px;
  --slg-font:         inherit; /* erbt Corporate-Typo aus dem Theme (dieGuteMed) statt System-Font zu erzwingen */
  --slg-z:            9999;
  --slg-bubble-size:  56px;
  --slg-avatar-size:  40px;
  --slg-dialog-w:     320px;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  #sl-lime-gate-wrapper {
    --slg-primary-dark: color-mix(in srgb, var(--slg-primary) 80%, #000);
  }
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
#sl-lime-gate-wrapper {
  position:   fixed;
  z-index:    var(--slg-z);
  bottom:     24px;
  font-family: var(--slg-font);
  display:    flex;
  flex-direction: column;
  align-items: flex-end;
  gap:         12px;
  opacity:    0;
  transform:  translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

#sl-lime-gate-wrapper[data-position="bottom-right"] { right: 24px; }
#sl-lime-gate-wrapper[data-position="bottom-left"]  { left: 24px; align-items: flex-start; }

#sl-lime-gate-wrapper.slg-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Button-Reset gegen Theme-Styles ─────────────────────────────────────── */
/* Themes stylen häufig `button`, `button[type=…]`, `.content button` o. ä. mit
   Rahmen/Hintergrund/Padding. Das Widget ist eine geschlossene Oberfläche;
   deshalb ID-Spezifität + !important auf genau den Eigenschaften, die Themes
   typischerweise setzen. Eigene Button-Regeln weiter unten sind ebenfalls
   ID-scoped und stehen später im Cascade → gewinnen gegen diesen Reset. */
#sl-lime-gate-wrapper button {
  -webkit-appearance: none !important;
  appearance:      none !important;
  background:      transparent !important;
  border:          0 !important;
  border-radius:   0 !important;
  box-shadow:      none !important;
  margin:          0 !important;
  padding:         0 !important;
  min-width:       0 !important;
  min-height:      0 !important;
  width:           auto;
  height:          auto;
  font:            inherit !important;
  color:           inherit !important;
  line-height:     inherit !important;
  letter-spacing:  normal !important;
  text-transform:  none !important;
  text-decoration: none !important;
  text-shadow:     none !important;
  text-indent:     0 !important;
  outline:         none;
  cursor:          pointer;
  transition:      none;
  transform:       none;
}

/* ── Bubble (Pille) ──────────────────────────────────────────────────────── */
/* Die Pille ist reines Layout; der eigentliche Öffnen-Button (.slg-bubble-main)
   und der Schließen-Button liegen als Geschwister darin (kein Nesting
   interaktiver Elemente – a11y). Optik entspricht der bisherigen Pille. */
#sl-lime-gate-bubble {
  display:         flex;
  align-items:     center;
  gap:             10px;
  background:      var(--slg-white);
  border-radius:   var(--slg-bubble-size);
  padding:         8px 14px 8px 8px;
  box-shadow:      var(--slg-shadow);
  cursor:          pointer;
  border:          none;
  outline:         none;
  min-width:       220px;
  max-width:       280px;
  transition:      box-shadow 0.2s, transform 0.15s;
  user-select:     none;
}

#sl-lime-gate-bubble:hover {
  box-shadow: 0 6px 32px rgba(0,0,0,0.22);
  transform:  translateY(-2px);
}

#sl-lime-gate-wrapper .slg-bubble-main {
  display:      flex;
  align-items:  center;
  gap:          10px;
  flex:         1 1 auto;
  min-width:    0 !important;
  text-align:   left;
}

/* Fokus-Ring wie bisher um die ganze Pille */
#sl-lime-gate-bubble:has(> .slg-bubble-main:focus-visible) {
  outline: 3px solid var(--slg-primary);
  outline-offset: 2px;
}

@supports not selector(:has(a)) {
  #sl-lime-gate-wrapper .slg-bubble-main:focus-visible {
    outline: 3px solid var(--slg-primary);
    outline-offset: 6px;
    border-radius: var(--slg-bubble-size) !important;
  }
}

#sl-lime-gate-wrapper .slg-bubble-close:focus-visible {
  outline: 2px solid var(--slg-primary);
  outline-offset: 2px;
  border-radius: 4px !important;
}

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.slg-avatar-wrap {
  position:      relative;
  flex-shrink:   0;
  width:         var(--slg-avatar-size);
  height:        var(--slg-avatar-size);
  border-radius: 50%;
  overflow:      visible;
  background:    var(--slg-primary);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--slg-white);
}

.slg-avatar {
  width:         100%;
  height:        100%;
  border-radius: 50%;
  object-fit:    cover;
  display:       block;
}

.slg-fallback-icon {
  width:  22px;
  height: 22px;
  color:  var(--slg-white);
}

.slg-online-indicator {
  position:      absolute;
  bottom:        0;
  right:         0;
  width:         11px;
  height:        11px;
  border-radius: 50%;
  background:    #ccc;
  border:        2px solid var(--slg-white);
}

.slg-online-indicator.slg-online {
  background: #2ecc71;
}

/* ── Bubble-Text ─────────────────────────────────────────────────────────── */
.slg-bubble-text {
  flex:        1;
  min-width:   0;
  display:     flex;
  flex-direction: column;
  gap:         1px;
}

.slg-bubble-label {
  font-size:   13px;
  font-weight: 600;
  color:       #1a1a1a;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.slg-bubble-subtitle {
  font-size:   11px;
  color:       #666;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* ── Close-Button im Bubble ──────────────────────────────────────────────── */
#sl-lime-gate-wrapper .slg-bubble-close {
  flex-shrink:  0;
  font-size:    13px !important;
  color:        #999 !important;
  padding:      2px 0 2px 6px !important;
  line-height:  1 !important;
  transition:   color 0.15s;
}

#sl-lime-gate-wrapper .slg-bubble-close:hover { color: #333 !important; }

/* ── Consent-Dialog ──────────────────────────────────────────────────────── */
#sl-lime-gate-dialog {
  display:        none;
  flex-direction: column;
  background:     var(--slg-white);
  border-radius:  var(--slg-radius);
  box-shadow:     var(--slg-shadow);
  width:          var(--slg-dialog-w);
  max-width:      calc(100vw - 48px);
  overflow:       hidden;
  animation:      slg-dialog-in 0.2s ease;
}

@keyframes slg-dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dialog-Header */
.slg-dialog-header {
  background:      var(--slg-primary);
  padding:         16px 16px 20px;
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
}

.slg-dialog-avatar {
  width:         48px;
  height:        48px;
  border-radius: 50%;
  overflow:      hidden;
  background:    rgba(255,255,255,0.2);
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}

.slg-dialog-avatar img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.slg-dialog-avatar .slg-fallback-icon {
  width:  26px;
  height: 26px;
}

#sl-lime-gate-wrapper .slg-dialog-close {
  color:       rgba(255,255,255,0.7) !important;
  font-size:   18px !important;
  line-height: 1 !important;
  transition:  color 0.15s;
}

#sl-lime-gate-wrapper .slg-dialog-close:hover { color: var(--slg-white) !important; }

/* Dialog-Body */
.slg-dialog-body {
  padding: 20px 20px 24px;
}

.slg-dialog-title {
  font-size:   22px;
  font-weight: 700;
  color:       var(--slg-primary);
  margin:      0 0 10px;
  line-height: 1.3;
  font-family: inherit; /* Corporate-Headline-Typo (dieGuteMed) */
}

.slg-dialog-text {
  font-size:   14px;
  color:       #444;
  line-height: 1.6;
  margin:      0 0 20px;
  font-family: inherit; /* Corporate-Typo aus Theme */
}

.slg-dialog-text a {
  color:               var(--slg-primary) !important;
  text-decoration:     underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  font-size:           1em !important;      /* exakt Fließtextgröße, gegen Theme-Override */
  font-family:         inherit !important;
  font-weight:         inherit !important;
  line-height:         inherit !important;  /* keine größere Zeilenhöhe bei Umbruch */
  letter-spacing:      inherit !important;
  border-bottom:       none !important;
  box-shadow:          none !important;
  background:          none !important;
  padding:             0 !important;
  margin:              0 !important;
  display:             inline !important;
}

/* Accept-Button */
#sl-lime-gate-wrapper .slg-dialog-accept {
  display:          block;
  width:            100% !important;
  padding:          12px 16px !important;
  background:       var(--slg-primary) !important;
  color:            var(--slg-white) !important;
  border-radius:    8px !important;
  font-size:        14px !important;
  font-weight:      600 !important;
  font-family:      var(--slg-font) !important;
  line-height:      normal !important; /* wie UA-Default für <button> in 1.6.1 */
  text-align:       center;
  transition:       background 0.15s, transform 0.1s;
}

#sl-lime-gate-wrapper .slg-dialog-accept:hover {
  background: var(--slg-primary-dark) !important;
  transform:  translateY(-1px);
}

#sl-lime-gate-wrapper .slg-dialog-accept:active {
  transform: translateY(0);
}

#sl-lime-gate-wrapper .slg-dialog-accept:focus-visible {
  outline:        3px solid var(--slg-primary);
  outline-offset: 2px;
}

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #sl-lime-gate-wrapper,
  #sl-lime-gate-bubble,
  #sl-lime-gate-dialog,
  #sl-lime-gate-wrapper .slg-dialog-accept,
  #sl-lime-gate-wrapper .slg-bubble-close,
  #sl-lime-gate-wrapper .slg-dialog-close {
    transition: none;
    animation:  none;
  }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #sl-lime-gate-wrapper {
    bottom: 16px;
  }

  #sl-lime-gate-wrapper[data-position="bottom-right"] { right: 16px; }
  #sl-lime-gate-wrapper[data-position="bottom-left"]  { left:  16px; }

  #sl-lime-gate-dialog {
    width: calc(100vw - 32px);
  }
}