/* ░░ Małpka — dolny dock bota głosowego (custom, ElevenLabs SDK) ░░ */

.malpka{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  z-index:70;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  max-width:calc(100vw - 24px);
}

/* wspólny „kapsuł" */
.malpka__launch,
.malpka__live{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.45rem .55rem;
  border-radius:999px;
  border:1px solid rgba(63,176,204,.35);
  background:rgba(9,7,16,.86);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 10px 44px rgba(207,77,146,.28), 0 2px 14px rgba(0,0,0,.5);
  color:#fff;
}

/* ── stan zwinięty: pigułka „Pogadaj z Małpką" ── */
.malpka__launch{
  cursor:pointer;
  padding-right:1rem;
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.malpka__launch:hover{
  transform:translateY(-2px);
  border-color:rgba(207,77,146,.6);
  box-shadow:0 14px 50px rgba(207,77,146,.42), 0 2px 14px rgba(0,0,0,.5);
}
.malpka__launch:active{ transform:translateY(0); }

.malpka__label{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.malpka__title{ font-weight:600; font-size:.92rem; letter-spacing:.01em; }
.malpka__sub{ opacity:.62; font-size:.66rem; }

.malpka__mic{
  display:grid; place-items:center;
  width:34px; height:34px; flex:none;
  border-radius:50%;
  background:linear-gradient(135deg,#CF4D92,#3FB0CC);
  color:#07060d;
}
.malpka__mic svg{ width:17px; height:17px; }

/* ── avatar (małpka) ── */
.malpka__avatar{
  width:48px; height:48px; flex:none;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  box-shadow:0 0 0 2px rgba(207,77,146,.65), 0 0 20px rgba(63,176,204,.5);
}
.malpka__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── stan aktywny ── */
.malpka__live{ padding-right:.55rem; }
/* tylko JEDEN element na raz: gdy panel live ma [hidden] → naprawdę znika
   (wspólna reguła wyżej ustawia display:flex i sama by zignorowała atrybut hidden) */
.malpka__live[hidden]{ display:none; }
.malpka.is-active .malpka__launch{ display:none; }

.malpka__avatar--live{
  transition:box-shadow .2s ease, transform .2s ease;
}
.malpka.is-speaking .malpka__avatar--live{
  animation:malpkaPulse 1.05s ease-in-out infinite;
  box-shadow:0 0 0 2px rgba(207,77,146,.9), 0 0 26px rgba(207,77,146,.65);
}
@keyframes malpkaPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}

.malpka__wave{
  display:block;
  width:200px; height:42px;
  max-width:42vw;
}

.malpka__status{
  min-width:64px;
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.78;
  white-space:nowrap;
}
.malpka.is-connecting .malpka__status{ animation:malpkaBlink 1s steps(2,start) infinite; }
@keyframes malpkaBlink{ 50%{ opacity:.3; } }

.malpka__end{
  display:grid; place-items:center;
  width:34px; height:34px; flex:none;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff; cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.malpka__end:hover{ background:rgba(207,77,146,.22); border-color:rgba(207,77,146,.6); }
.malpka__end svg{ width:16px; height:16px; }

@media (max-width:560px){
  .malpka{ bottom:14px; }
  .malpka__sub{ display:none; }
  .malpka__title{ font-size:.85rem; }
  .malpka__wave{ width:130px; }
  .malpka__status{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .malpka.is-speaking .malpka__avatar--live{ animation:none; }
  .malpka__launch{ transition:none; }
}