/* TuneTune 24/7 channel UX v2.
   UI-only. Existing settings/API remain authoritative:
   music.mode_247 + channels_logs.permanent_voice_channel_id. */

/* ---- 24/7 row: isolate from generic Premium/toggle layouts ---- */
body[data-account-page="bots"] #tunetune-music-panel [data-music-panel="settings"] .tt-247-setting{
  display:grid!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
body[data-account-page="bots"] #tunetune-music-panel [data-music-panel="settings"] .tt-247-toggle-row{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 52px!important;
  align-items:center!important;
  gap:16px!important;
  width:100%!important;
  min-width:0!important;
  min-height:74px!important;
  margin:0!important;
  padding:14px 16px!important;
  overflow:visible!important;
}
body[data-account-page="bots"] #tunetune-music-panel [data-music-panel="settings"] .tt-247-toggle-row>.tt-247-toggle-copy{
  display:grid!important;
  gap:6px!important;
  min-width:0!important;
  padding:0!important;
}
body[data-account-page="bots"] #tunetune-music-panel [data-music-panel="settings"] .tt-247-title-line{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  min-width:0!important;
}
body[data-account-page="bots"] #tunetune-music-panel [data-music-panel="settings"] .tt-247-title-line>strong{
  display:inline!important;
  flex:0 1 auto!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  line-height:1.28!important;
}
body[data-account-page="bots"] #tunetune-music-panel [data-music-panel="settings"] .tt-247-premium-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:max-content!important;
  max-width:max-content!important;
  min-width:0!important;
  min-height:22px!important;
  margin:0!important;
  padding:2px 9px!important;
  border:1px solid #e3ad19!important;
  border-radius:999px!important;
  background:#fff4c2!important;
  color:#9a6500!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
}
body[data-account-page="bots"] #tunetune-music-panel [data-music-panel="settings"] .tt-247-toggle-copy>small{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  color:var(--account-muted,#667085)!important;
  line-height:1.45!important;
}
/* The switch remains in the established TuneTune switch system. */
body[data-account-page="bots"] #tunetune-music-panel [data-music-panel="settings"] .tt-247-toggle-row>input[type="checkbox"],
body[data-account-page="bots"] #tunetune-music-panel [data-music-panel="settings"] .tt-247-toggle-row>i{
  grid-column:2!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:end!important;
  margin:0!important;
}
body[data-account-page="bots"] #tunetune-music-panel [data-music-panel="settings"] .tt-247-toggle-row>input[type="checkbox"]{
  right:16px!important;
}

/* ---- Saved 24/7 channel summary ---- */
.tt-247-current{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:11px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:11px 12px!important;
  border:1px solid color-mix(in srgb,var(--account-accent,#1597ff) 28%,var(--account-border,#d0d7de))!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--account-accent,#1597ff) 5%,var(--account-surface,#fff))!important;
  box-sizing:border-box!important;
}
.tt-247-current[hidden]{display:none!important}
.tt-247-current-icon{
  display:grid!important;
  place-items:center!important;
  width:34px!important;height:34px!important;
  border-radius:10px!important;
  background:color-mix(in srgb,var(--account-accent,#1597ff) 11%,transparent)!important;
}
.tt-247-current>div{display:grid!important;gap:2px!important;min-width:0!important}
.tt-247-current small{color:var(--account-muted,#667085)!important}
.tt-247-current strong{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.tt-247-current button{width:auto!important;min-width:0!important;white-space:nowrap!important}

/* ---- Channel choice shown only when enabling/editing 24/7 ---- */
.tt-247-channel-panel{
  display:grid!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:12px 0 0!important;
  padding:14px!important;
  border:1px solid color-mix(in srgb,var(--account-accent,#1597ff) 34%,var(--account-border,#d0d7de))!important;
  border-radius:13px!important;
  background:color-mix(in srgb,var(--account-accent,#1597ff) 4%,var(--account-surface,#fff))!important;
  box-sizing:border-box!important;
}
.tt-247-channel-panel[hidden]{display:none!important}
.tt-247-channel-panel-head>div{display:grid!important;gap:3px!important}
.tt-247-channel-panel-head strong{font-size:14px!important}
.tt-247-channel-panel-head small{color:var(--account-muted,#667085)!important;line-height:1.4!important}
.tt-247-channel-picker-field{width:100%!important;min-width:0!important;margin:0!important}
.tt-247-channel-picker-field>.jj-channel-picker-b4d02929f{width:100%!important;min-width:0!important;max-width:100%!important}
.tt-247-channel-actions{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  flex-wrap:wrap!important;
  width:100%!important;
  min-width:0!important;
}
.tt-247-channel-actions .api-form-message{
  flex:1 1 220px!important;
  min-width:0!important;
  margin:0!important;
  overflow-wrap:anywhere!important;
}

/* ---- Player channel: temporary target only when 24/7 is OFF ---- */
.tt-player-247-lock{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  grid-column:1/-1!important;
  width:100%!important;
  min-width:0!important;
  margin-top:8px!important;
  padding:10px 11px!important;
  border:1px solid color-mix(in srgb,var(--account-accent,#1597ff) 24%,var(--account-border,#d0d7de))!important;
  border-radius:11px!important;
  background:color-mix(in srgb,var(--account-accent,#1597ff) 5%,var(--account-surface,#fff))!important;
  box-sizing:border-box!important;
}
.tt-player-247-lock[hidden]{display:none!important}
.tt-player-247-lock>div{display:grid!important;gap:2px!important;min-width:0!important}
.tt-player-247-lock strong,.tt-player-247-lock small{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.tt-player-247-lock small{color:var(--account-muted,#667085)!important}
#tunetune-player-voice-channel-row.is-247-active > :is(.jj-channel-picker-b4d02929f,#tunetune-voice-channel-id,#tunetune-player-voice-channel-help){display:none!important}

/* No second permanent-channel control is rendered in Channels. The authoritative
   hidden input remains inside its original channels_logs form and is still saved
   through the unchanged network path. */
#bot-permanent-voice-channel-id[type="hidden"]{display:none!important}

html[data-theme="dark"] .tt-247-premium-badge{
  background:#3a2d08!important;border-color:#8f6b00!important;color:#ffd45f!important;
}
html[data-theme="dark"] :is(.tt-247-current,.tt-247-channel-panel,.tt-player-247-lock){
  background:color-mix(in srgb,#1597ff 8%,#101b2d)!important;
  border-color:#40536c!important;
}

@media(max-width:760px){
  body[data-account-page="bots"] #tunetune-music-panel [data-music-panel="settings"] .tt-247-toggle-row{
    grid-template-columns:minmax(0,1fr) 50px!important;
    gap:12px!important;
    padding:12px 14px!important;
  }
  body[data-account-page="bots"] #tunetune-music-panel [data-music-panel="settings"] .tt-247-toggle-row>input[type="checkbox"]{right:14px!important}
  .tt-247-current,.tt-player-247-lock{grid-template-columns:auto minmax(0,1fr)!important}
  .tt-247-current button,.tt-player-247-lock button{grid-column:1/-1!important;width:100%!important}
  .tt-247-channel-actions{display:grid!important;grid-template-columns:1fr!important}
  .tt-247-channel-actions>*{width:100%!important}
}