/* ============================================================
   AMBIENT.CSS — Strefa Wyciszenia (Wersja Ultra High-Contrast)
   Luksusowe gniazdo 3D + soczysty, świetlisty gradient glow
   ============================================================ */

/* ------------------------------------------------------------------ */
/* WRAPPER                                                             */
/* ------------------------------------------------------------------ */
.ambient-widget {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* GŁÓWNY PRZYCISK — Luksusowy Soft-Emboss z miękkim złotym rantem     */
/* ------------------------------------------------------------------ */
.ambient-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.70rem;
  padding: 0.40rem 1.05rem 0.40rem 0.45rem;
  background: linear-gradient(155deg, #24201c 0%, #141210 100%);
  border: 1px solid rgba(179, 146, 104, 0.35);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  overflow: visible;

  /* Wielowarstwowy cień wydobywający przycisk z tła */
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.90),
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    inset 0 -1px 2px rgba(0, 0, 0, 0.60);

  transition:
    transform 0.28s cubic-bezier(0.34, 1.45, 0.64, 1),
    box-shadow 0.3s ease,
    border-color 0.4s ease;

  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

/* Hover — sprężystość i złoto-szmaragdowa poświata */
.ambient-pill-btn:hover {
  transform: translateY(-2px) scale(1.025);
  border-color: rgba(52, 211, 153, 0.50);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.80),
    0 0 18px rgba(52, 211, 153, 0.20),
    0 0 35px rgba(179, 146, 104, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.18);
}

.ambient-pill-btn:active {
  transform: translateY(1px) scale(0.975);
  box-shadow:
    inset 1px 2px 8px rgba(0, 0, 0, 0.85),
    inset -1px -1px 2px rgba(255, 255, 255, 0.04);
}

/* ------------------------------------------------------------------ */
/* WYRAŹNE GNIAZDO 3D NA IKONĘ (UWIEŃCZONE SUBTELNYM RIM-LIGHT)       */
/* ------------------------------------------------------------------ */
.ambient-icon-cradle {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a2520 0%, #100e0c 100%);
  border: 1px solid rgba(179, 146, 104, 0.40); /* Wyraźna złota krawędź */
  box-shadow:
    inset 2px 3px 6px rgba(0, 0, 0, 0.95),
    inset -1px -1px 3px rgba(255, 255, 255, 0.10),
    0 1px 4px rgba(0, 0, 0, 0.60);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* ------------------------------------------------------------------ */
/* IKONA SŁUCHAWEK — ŻYWA, ŚWIETLISTA ZIELEŃ + JASNY DROP-SHADOW       */
/* ------------------------------------------------------------------ */
.ambient-headphone-svg {
  width: 20px;
  height: 20px;
  stroke: #34d399;     /* Jasna, świeża leśna zieleń / szmaragd */
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  position: relative;
  z-index: 2;
  transform-origin: center center;
  will-change: transform, filter;

  /* Wyraźny, jasny drop shadow widoczny na czerni */
  filter:
    drop-shadow(0 0 5px rgba(52, 211, 153, 0.85))
    drop-shadow(0 0 12px rgba(16, 185, 129, 0.45));
  transition: stroke 0.35s ease, filter 0.35s ease;
}

/* ------------------------------------------------------------------ */
/* PROMIENNY PIERŚCIEŃ AURY RMS (SZMARAGD -> ZŁOTY BURSZTYN)          */
/* ------------------------------------------------------------------ */
.ambient-rms-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(52, 211, 153, 0.70) 0%,
    rgba(16, 185, 129, 0.45) 40%,
    rgba(234, 179, 8, 0.25) 75%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, opacity;
  filter: blur(3px);
  z-index: 1;
}

/* ------------------------------------------------------------------ */
/* TEKST DWULINIOWY                                                    */
/* ------------------------------------------------------------------ */
.ambient-text-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.18;
  text-align: left;
  gap: 1px;
}

.ambient-line-1 {
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ambient-line-2 {
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* STAN 1: NIEAKTYWNY — Wyraźna, soczysta zieleń zapraszająca          */
/* ------------------------------------------------------------------ */
.ambient-pill-btn:not(.is-active) .ambient-line-1 {
  color: #86efac; /* Bardzo jasna zieleń */
  text-shadow: 0 0 8px rgba(134, 239, 172, 0.45);
}

.ambient-pill-btn:not(.is-active) .ambient-line-2 {
  color: #22c55e; /* Wyrazista zieleń */
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.55);
}

/* ------------------------------------------------------------------ */
/* STAN 2: AKTYWNY — Wyciszona, perłowa szarość (bez ostrej bieli)     */
/* ------------------------------------------------------------------ */
.ambient-pill-btn.is-active {
  border-color: rgba(52, 211, 153, 0.60);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.80),
    0 0 20px rgba(52, 211, 153, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.ambient-pill-btn.is-active .ambient-icon-cradle {
  border-color: rgba(52, 211, 153, 0.70);
  box-shadow:
    inset 2px 3px 6px rgba(0, 0, 0, 0.95),
    0 0 12px rgba(52, 211, 153, 0.35);
}

.ambient-pill-btn.is-active .ambient-line-1 {
  color: #cbd5e1; /* Kojący perłowy szary */
  text-shadow: 0 0 6px rgba(203, 213, 225, 0.30);
}

.ambient-pill-btn.is-active .ambient-line-2 {
  color: #94a3b8; /* Głęboki, elegancki szary */
  text-shadow: 0 0 6px rgba(148, 163, 184, 0.25);
}

.ambient-pill-btn.is-active .ambient-headphone-svg {
  stroke: #4ade80;
}

/* ------------------------------------------------------------------ */
/* RESPONSYWNOŚĆ — PŁYNNE ZMNIEJSZANIE (TEKST ZAWSZE WIDOCZNY)         */
/* ------------------------------------------------------------------ */
@media (max-width: 1199px) {
  .ambient-pill-btn { padding: 0.36rem 0.90rem 0.36rem 0.40rem; gap: 0.60rem; }
  .ambient-icon-cradle { width: 32px; height: 32px; }
  .ambient-headphone-svg { width: 17px; height: 17px; }
  .ambient-line-1 { font-size: 0.48rem; letter-spacing: 0.19em; }
  .ambient-line-2 { font-size: 0.75rem; letter-spacing: 0.10em; }
}

@media (max-width: 991px) {
  .ambient-pill-btn { padding: 0.30rem 0.75rem 0.30rem 0.35rem; gap: 0.50rem; }
  .ambient-icon-cradle { width: 28px; height: 28px; }
  .ambient-headphone-svg { width: 15px; height: 15px; }
  .ambient-line-1 { font-size: 0.43rem; letter-spacing: 0.15em; }
  .ambient-line-2 { font-size: 0.68rem; letter-spacing: 0.08em; }
}

@media (max-width: 480px) {
  .ambient-pill-btn { padding: 0.26rem 0.58rem 0.26rem 0.30rem; gap: 0.38rem; }
  .ambient-icon-cradle { width: 25px; height: 25px; }
  .ambient-headphone-svg { width: 13px; height: 13px; stroke-width: 2.4; }
  .ambient-line-1 { font-size: 0.39rem; letter-spacing: 0.12em; }
  .ambient-line-2 { font-size: 0.60rem; letter-spacing: 0.06em; }
}

@media (max-width: 360px) {
  .ambient-pill-btn { padding: 0.22rem 0.48rem 0.22rem 0.26rem; gap: 0.30rem; }
  .ambient-icon-cradle { width: 22px; height: 22px; }
  .ambient-headphone-svg { width: 12px; height: 12px; }
  .ambient-line-1 { font-size: 0.35rem; letter-spacing: 0.08em; }
  .ambient-line-2 { font-size: 0.52rem; letter-spacing: 0.05em; }
}