:root{
  --radio-bg:#060c12;
  --radio-panel:#0d1721;
  --radio-panel-2:#121f2b;
  --radio-line:rgba(134,162,184,.18);
  --radio-copy:#d7e5f0;
  --radio-copy-soft:#9eb0bf;
  --radio-green:#31c77b;
  --radio-red:#e05555;
  --radio-blue:#1ba6ff;
  --radio-yellow:#f4c542;
}

html,body{
  background:var(--radio-bg);
}

body.radio-body{
  margin:0;
  min-height:100vh;
  font-family:"DM Sans",sans-serif;
  color:var(--radio-copy);
  background:
    radial-gradient(circle at top, rgba(31,68,102,.45), transparent 34%),
    linear-gradient(180deg, #09111a, #05090e 58%);
}

.talkie-radio-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:
    max(14px, env(safe-area-inset-top))
    14px
    max(14px, env(safe-area-inset-bottom))
    14px;
}

.talkie-radio-app{
  width:min(100%, 460px);
  display:grid;
  gap:10px;
}

.talkie-radio-page{
  display:none;
}

.talkie-radio-page.is-active{
  display:block;
}

.talkie-radio-card{
  padding:16px;
  border:1px solid var(--radio-line);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(19,31,43,.96), rgba(8,14,20,.98));
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}

.talkie-radio-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.talkie-radio-header-side{
  display:flex;
  align-items:center;
  gap:8px;
}

.talkie-radio-header h1,
.talkie-radio-header h2{
  margin:0;
  font-family:"Manrope",sans-serif;
  letter-spacing:-.04em;
}

.talkie-radio-header h1{
  font-size:1.5rem;
}

.talkie-radio-header h2{
  font-size:1.1rem;
}

.talkie-radio-header p,
.talkie-radio-display span,
.talkie-radio-display em,
.talkie-radio-channel span,
.talkie-radio-user-list li{
  color:var(--radio-copy-soft);
}

.talkie-radio-status-chip,
.talkie-radio-count{
  min-width:36px;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--radio-line);
  background:#132131;
  color:var(--radio-copy);
  font-size:.84rem;
  font-weight:800;
}

.talkie-radio-link{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--radio-line);
  background:#132131;
  color:var(--radio-copy);
  font-size:.84rem;
  font-weight:800;
  text-decoration:none;
}

.talkie-radio-channel-list,
.talkie-radio-user-list{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.talkie-radio-channel{
  width:100%;
  min-height:64px;
  display:grid;
  gap:3px;
  padding:12px 14px;
  border:1px solid var(--radio-line);
  border-radius:14px;
  background:#0b141d;
  color:var(--radio-copy);
  text-align:left;
}

.talkie-radio-channel strong,
.talkie-radio-channel span{
  display:block;
  overflow-wrap:anywhere;
}

.talkie-radio-empty{
  display:grid;
  gap:6px;
  padding:14px;
  border:1px dashed var(--radio-line);
  border-radius:14px;
  background:#0b141d;
}

.talkie-radio-empty strong{
  font-family:"Manrope",sans-serif;
}

.talkie-radio-channel strong{
  font-family:"Manrope",sans-serif;
  font-size:1rem;
}

.talkie-radio-channel.is-active{
  border-color:var(--radio-blue);
  background:#10283a;
}

.talkie-radio-channel:focus-visible,
.talkie-radio-ptt:focus-visible,
.talkie-radio-action:focus-visible,
.talkie-radio-link:focus-visible{
  outline:3px solid var(--radio-yellow);
  outline-offset:3px;
}

.talkie-radio-console{
  min-height:calc(100vh - 28px);
  display:grid;
  align-content:start;
  gap:16px;
  padding-top:max(22px, env(safe-area-inset-top));
  padding-bottom:max(34px, env(safe-area-inset-bottom));
}

.talkie-radio-display{
  display:grid;
  gap:6px;
  padding:14px;
  border:1px solid var(--radio-line);
  border-radius:16px;
  background:linear-gradient(180deg, #081018, #0d1824);
}

.talkie-radio-display strong{
  font-family:"Manrope",sans-serif;
  font-size:clamp(1.5rem, 7vw, 2rem);
  line-height:1.02;
  letter-spacing:-.04em;
}

.talkie-radio-speaker{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  width:fit-content;
  max-width:100%;
  padding:4px 10px;
  border-radius:999px;
  background:#172532;
  color:#c7d7e2;
  font-size:.88rem;
  overflow-wrap:anywhere;
}

.talkie-radio-speaker.is-active{
  background:var(--radio-blue);
  color:#fff;
}

.talkie-radio-ptt{
  width:min(74vw, 310px);
  aspect-ratio:1;
  justify-self:center;
  border:0;
  border-radius:50%;
  background:var(--radio-green);
  color:#04120b;
  font-family:"Manrope",sans-serif;
  font-size:clamp(1.1rem, 5vw, 1.55rem);
  font-weight:900;
  box-shadow:0 24px 70px rgba(49,199,123,.28);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

.talkie-radio-ptt:disabled{
  cursor:not-allowed;
  background:#566875;
  color:#cfd8de;
  box-shadow:none;
}

.talkie-radio-ptt.is-transmitting{
  background:var(--radio-red);
  color:#fff;
  box-shadow:0 24px 70px rgba(224,85,85,.3);
}

.talkie-radio-ptt.is-receiving{
  background:var(--radio-blue);
  color:#fff;
  box-shadow:0 24px 70px rgba(27,166,255,.32);
}

.talkie-radio-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:4px;
}

.talkie-radio-action{
  min-height:46px;
  border:1px solid var(--radio-line);
  border-radius:14px;
  background:#132131;
  color:var(--radio-copy);
  font-weight:800;
}

.talkie-radio-action:disabled{
  opacity:.56;
}

.talkie-radio-modal[hidden]{
  display:none;
}

.talkie-radio-modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  align-items:end;
  padding:10px;
  background:rgba(2,8,13,.82);
}

.talkie-radio-modal-panel{
  width:min(100%,460px);
  margin:0 auto;
  max-height:72vh;
  overflow:auto;
  padding:14px;
  border:1px solid var(--radio-line);
  border-radius:18px;
  background:#14202a;
  color:var(--radio-copy);
}

.talkie-radio-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.talkie-radio-modal-head h2{
  margin:0;
  font-family:"Manrope",sans-serif;
  font-size:1rem;
}

.talkie-radio-app.is-ptt-view .talkie-radio-page-channels{
  display:none;
}

.talkie-radio-app.is-channels-view .talkie-radio-page-ptt{
  display:none;
}

@media (max-width:520px){
  .talkie-radio-screen{
    padding:
      max(10px, env(safe-area-inset-top))
      6px
      max(18px, env(safe-area-inset-bottom))
      6px;
  }

  .talkie-radio-card{
    border-radius:18px;
    padding:12px;
  }

  .talkie-radio-console{
    min-height:calc(100vh - 12px);
    gap:14px;
    padding-top:max(34px, env(safe-area-inset-top));
    padding-bottom:max(64px, env(safe-area-inset-bottom));
  }

  .talkie-radio-header h1{
    font-size:1.3rem;
  }

  .talkie-radio-header h2{
    font-size:1rem;
  }

  .talkie-radio-status-chip,
  .talkie-radio-count{
    min-width:32px;
    min-height:32px;
    padding:0 10px;
    font-size:.78rem;
  }

  .talkie-radio-link{
    min-height:32px;
    padding:0 10px;
    font-size:.78rem;
  }

  .talkie-radio-ptt{
    width:230px;
    height:230px;
    max-width:72vw;
    max-height:72vw;
    font-size:1rem;
  }

  .talkie-radio-action{
    min-height:42px;
    font-size:.86rem;
  }
}