@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#08162a;
  --panel:rgba(8,24,45,.96);
  --stroke:rgba(255,255,255,.16);
  --green:#16a34a;
  --red:#dc2626;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--bg);
  color:#fff;
  font-family:'Cairo', Arial, Helvetica, sans-serif
}
.app-frame{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:var(--bg);
  display:block
}
.radio-dock{
  position:fixed;
  left:50%;
  bottom:18px;
  z-index:20;
  transform:translateX(-50%);
  width:min(760px,calc(100% - 28px));
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--stroke);
  background:var(--panel);
  box-shadow:0 22px 54px rgba(0,0,0,.42);
  backdrop-filter:blur(14px)
}
.radio-dock.is-hidden{display:none}
.radio-dock-toggle,
.radio-dock-collapse,
.radio-dock-restore{
  border:0;
  color:#fff;
  cursor:pointer;
  font-weight:900
}
.radio-dock-toggle{
  width:52px;
  height:52px;
  background:var(--green);
  font-size:21px
}
.radio-dock.is-playing .radio-dock-toggle{background:var(--red)}
.radio-dock-copy{min-width:0}
.radio-dock-kicker{
  display:flex;
  align-items:center;
  gap:7px;
  color:#86efac;
  font-size:12px;
  font-weight:900;
  margin-bottom:4px
}
.radio-dock-kicker span{
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--red)
}
.radio-dock-copy strong,
.radio-dock-copy small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}
.radio-dock-copy strong{font-size:19px}
.radio-dock-copy small{
  margin-top:3px;
  color:rgba(255,255,255,.66)
}
.radio-dock-link{
  color:#bbf7d0;
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(187,247,208,.3);
  padding:10px 12px
}
.radio-dock-collapse{
  width:38px;
  height:38px;
  background:rgba(255,255,255,.1);
  font-size:20px
}
.radio-dock-restore{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:21;
  display:none;
  padding:12px 14px;
  background:var(--green);
  box-shadow:0 18px 42px rgba(0,0,0,.35)
}
.radio-dock-restore.is-visible{display:block}
.chat-open-button{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:22;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(8,24,45,.96);
  color:#bbf7d0;
  padding:13px 16px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 18px 42px rgba(0,0,0,.35)
}
.live-chat-panel{
  position:fixed;
  top:16px;
  right:16px;
  bottom:96px;
  z-index:24;
  width:min(370px,calc(100% - 32px));
  display:none;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  border:1px solid var(--stroke);
  background:rgba(8,24,45,.98);
  box-shadow:0 26px 64px rgba(0,0,0,.48);
  backdrop-filter:blur(14px)
}
.live-chat-panel.is-open{display:grid}
.live-chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.1)
}
.live-chat-header span{
  display:block;
  color:#86efac;
  font-size:12px;
  font-weight:900;
  margin-bottom:3px
}
.live-chat-header strong{font-size:18px}
.live-chat-header button{
  width:36px;
  height:36px;
  border:0;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:24px;
  cursor:pointer
}
.live-chat-status{
  padding:10px 14px;
  color:rgba(255,255,255,.68);
  font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.08)
}
.live-chat-messages{
  min-height:0;
  overflow:auto;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  scrollbar-width:thin
}
.chat-message{
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045)
}
.chat-message-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
  color:rgba(255,255,255,.55);
  font-size:12px
}
.chat-message-name{
  color:#86efac;
  font-weight:900
}
.chat-message-text{
  overflow-wrap:anywhere;
  line-height:1.55
}
.live-chat-form{
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.1);
  display:grid;
  gap:9px
}
.live-chat-form input{
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:11px 12px;
  font:inherit
}
.live-chat-form input::placeholder{color:rgba(255,255,255,.45)}
.live-chat-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px
}
.live-chat-row button{
  border:0;
  background:var(--green);
  color:#fff;
  padding:0 14px;
  font-weight:900;
  cursor:pointer
}
.live-chat-row button:disabled{
  opacity:.55;
  cursor:not-allowed
}
.chat-honeypot{
  position:absolute;
  left:-9999px;
  opacity:0
}
@media (max-width:720px){
  .radio-dock{
    bottom:10px;
    width:calc(100% - 20px);
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:9px;
    padding:10px
  }
  .radio-dock-link{display:none}
  .radio-dock-toggle{width:46px;height:46px}
  .radio-dock-copy strong{font-size:15px}
  .radio-dock-copy small{font-size:12px}
  .chat-open-button{
    right:10px;
    bottom:74px;
    padding:11px 13px
  }
  .live-chat-panel{
    top:auto;
    left:10px;
    right:10px;
    bottom:76px;
    width:auto;
    height:min(560px,calc(100% - 92px))
  }
}