/* SenpaiLive – Empezar transmisión (sala de control de la cosplayer). Se carga al final y reemplaza el estilo anterior. */
:root{
  --primary:#e61973; --primary-700:#ff3d95; --accent:#e61973;
  --paper:#1f0f33; --paper-2:#1a0b2e; --chat-bg:#14081f; --chat-bubble:#27103f; --chat-border:rgba(190,140,255,.22);
  --ink:#fff; --ink-muted:#cdb8e6;
}
body.tr{
  display:flex!important; flex-direction:column; min-height:100vh; height:auto!important; margin:0;
  font-family:'Poppins',sans-serif!important; color:#fff;
  background-color:#14081f!important;
  background-image:radial-gradient(900px 420px at 85% -80px, rgba(90,25,168,.55), transparent 70%), radial-gradient(700px 380px at 5% 30%, rgba(230,25,115,.14), transparent 70%)!important;
  background-repeat:no-repeat!important; background-attachment:scroll!important;
}
body.tr button, body.tr input, body.tr select, body.tr textarea{font-family:'Poppins',sans-serif}

/* Cabecera */
body.tr > header{
  position:sticky!important; top:0; z-index:50; height:68px!important; padding:0 28px!important; display:flex!important; align-items:center; justify-content:space-between; gap:14px;
  background:linear-gradient(180deg,#240e3d,#1a0b2e)!important; border-bottom:1px solid rgba(230,25,115,.35)!important; box-shadow:0 6px 24px rgba(90,25,168,.35);
}
body.tr #logo{display:flex!important; align-items:center}
body.tr #logo img{display:block!important; height:40px; width:auto}
body.tr .acciones-sesion{display:flex!important; align-items:center; gap:10px; margin-left:auto}
body.tr .tokens-badge{
  display:inline-flex!important; align-items:center; gap:8px; padding:7px 14px!important; border-radius:999px!important; font-size:13px!important; font-weight:600!important;
  color:#fff!important; background:rgba(255,255,255,.08)!important; border:1px solid rgba(190,140,255,.4)!important; box-shadow:none!important; flex-wrap:wrap;
}
body.tr .tokens-badge:empty{display:none!important}
body.tr .tokens-badge i{color:#eac518}
body.tr .tokens-badge div{display:inline!important; margin:0!important; font-size:11.5px!important; color:#cdb8e6}
body.tr #cerrarSesionBtn{
  height:40px; padding:0 18px!important; border-radius:12px!important; border:2px solid rgba(255,255,255,.45)!important; background:transparent!important; color:#fff!important;
  font-size:13px; font-weight:600; cursor:pointer; box-shadow:none!important;
}
body.tr #cerrarSesionBtn:hover{background:rgba(255,255,255,.12)!important}

/* Estructura */
body.tr .box{
  flex:1; width:100%!important; max-width:1380px!important; height:auto!important; margin:0 auto!important; padding:22px 28px 10px!important;
  background:none!important; border:0!important; box-shadow:none!important; display:block!important; border-radius:0!important;
}
body.tr .grid-stream{
  display:grid!important; grid-template-columns:minmax(380px,460px) 1fr!important; gap:22px!important; align-items:start!important; height:auto!important; min-height:0!important; padding:0!important; background:none!important;
}
body.tr .grid-stream > aside{
  position:static!important; display:block!important; overflow:visible!important; height:auto!important; width:auto!important; max-width:none!important; margin:0!important; padding:0!important;
  border-radius:24px!important; background:linear-gradient(180deg,#27103f,#1a0b2e)!important; border:1.5px solid rgba(230,25,115,.4)!important; box-shadow:0 0 28px rgba(90,25,168,.3)!important;
}
body.tr .stream-tabs{
  position:static!important; display:flex!important; gap:8px!important; padding:16px 16px 0!important; width:auto!important; background:none!important; border:0!important; transform:none!important; margin:0!important;
}
body.tr .stream-tab{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; height:40px; padding:0 8px!important; border-radius:999px!important; cursor:pointer;
  font-size:12.5px!important; font-weight:600!important; color:#e8dcf7!important; background:rgba(255,255,255,.06)!important; border:1.5px solid rgba(190,140,255,.35)!important; box-shadow:none!important; white-space:nowrap;
}
body.tr .stream-tab.active{background:linear-gradient(135deg,#e61973,#ff3d95)!important; border-color:#e61973!important; color:#fff!important; box-shadow:0 0 16px rgba(230,25,115,.5)!important}
body.tr .stream-box{position:static!important; overflow:visible!important; height:auto!important; max-height:none!important; width:auto!important; margin:0!important; padding:14px 16px 18px!important; background:none!important; border:0!important; box-shadow:none!important; display:block!important}
body.tr .stream-content{
  display:grid!important; grid-template-columns:1fr 1fr!important; gap:12px!important; width:auto!important; height:auto!important; padding:0!important; margin:0!important; overflow:visible!important; background:none!important;
}
body.tr .stream-content > *{margin:0!important; min-width:0}
body.tr .preview{
  position:relative!important; inset:auto!important; grid-column:1/-1; order:0; width:100%!important; height:auto!important; aspect-ratio:16/9; z-index:auto!important; overflow:hidden;
  border-radius:18px!important; background:#000!important; border:2px solid rgba(230,25,115,.55)!important; box-shadow:0 0 24px rgba(230,25,115,.25);
}
body.tr .preview video{width:100%!important; height:100%!important; object-fit:cover; background:#000}
body.tr #boxPrivReq{grid-column:1/-1; order:1}
body.tr .camera-box{order:2}
body.tr .mic-box{order:3}
body.tr #boxPrivStatus{grid-column:1/-1; order:4}
body.tr .web-actions{grid-column:1/-1; order:5; display:grid!important; gap:8px; width:auto!important; position:static!important; padding:0!important; background:none!important}
body.tr .control-group{
  position:static!important; width:auto!important; height:auto!important; padding:14px!important; border-radius:18px!important; text-align:left!important;
  background:rgba(255,255,255,.05)!important; border:1px solid rgba(190,140,255,.25)!important; box-shadow:none!important;
}
body.tr .control-group h3{display:flex; align-items:center; gap:8px; margin:0 0 10px!important; font-size:14px!important; font-weight:700!important; color:#fff!important; text-align:left!important}
body.tr .control-group h3 i{color:#eac518}
body.tr .form-group{margin:0 0 10px!important}
body.tr .form-group label{display:block; margin:0 0 5px!important; font-size:12px!important; font-weight:600!important; color:#cdb8e6!important; text-align:left!important}
body.tr select, body.tr .chat input[type=text], body.tr .input-chat input, body.tr .input-chat textarea, body.tr .info-box input, body.tr #muteReason{
  width:100%!important; height:42px; padding:0 12px!important; border-radius:12px!important; font-size:13.5px!important; color:#fff!important;
  background:rgba(255,255,255,.07)!important; border:1.5px solid rgba(190,140,255,.35)!important; outline:0;
}
body.tr select option{background:#1a0b2e; color:#fff}
body.tr select:focus, body.tr .input-chat input:focus, body.tr .input-chat textarea:focus, body.tr .info-box input:focus{border-color:#e61973!important; box-shadow:0 0 0 3px rgba(230,25,115,.25)}

/* Botón principal: Salir en vivo */
body.tr #btnEmitir{
  display:flex!important; align-items:center; justify-content:center; gap:10px; width:100%!important; height:58px!important; border:0!important; border-radius:16px!important; cursor:pointer;
  font-size:17px!important; font-weight:800!important; color:#fff!important; background:linear-gradient(135deg,#e61973,#ff3d95)!important; box-shadow:0 0 28px rgba(230,25,115,.6)!important; transition:.15s;
}
body.tr #btnEmitir:hover{filter:brightness(1.1); transform:translateY(-1px)}
body.tr #btnEmitir:disabled{opacity:.5; cursor:not-allowed; box-shadow:none!important; transform:none}
body.tr #btnEmitir.is-live, body.tr .is-live#btnEmitir{background:linear-gradient(135deg,#6b21a8,#3b0f6e)!important; box-shadow:0 0 0 2px #e61973!important}
body.tr #toggleMic{
  width:100%; height:40px; border-radius:12px!important; cursor:pointer; font-weight:600; font-size:13px; color:#fff!important; background:transparent!important; border:2px solid rgba(255,255,255,.4)!important;
}
body.tr #toggleMic:hover{background:rgba(255,255,255,.1)!important}
body.tr .mic-level-container{height:8px!important; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.1)!important; margin-top:6px}
body.tr #micLevelBar{background:linear-gradient(90deg,#25b866,#eac518)!important; height:100%}
body.tr .btn-rojo{border:0!important; border-radius:12px!important; background:linear-gradient(135deg,#e61973,#ff3d95)!important; color:#fff!important; font-weight:700; cursor:pointer}
body.tr .btn-gris{border:2px solid rgba(255,255,255,.4)!important; border-radius:12px!important; background:transparent!important; color:#fff!important; font-weight:600; cursor:pointer}

/* RTMP */
body.tr .info-box{grid-column:1/-1; padding:14px!important; border-radius:18px!important; background:rgba(255,255,255,.05)!important; border:1px solid rgba(190,140,255,.25)!important; display:grid; gap:8px; color:#fff!important}
body.tr .info-box strong{font-size:14px; color:#fff}
body.tr .info-box button{height:40px; border-radius:12px!important; border:0; cursor:pointer; font-weight:700; color:#fff!important; background:linear-gradient(135deg,#e61973,#ff3d95)!important}
body.tr .info-box p{font-size:12.5px!important; color:#cdb8e6!important}
body.tr .guide-placeholder{padding:14px 16px 20px!important; color:#fff!important}
body.tr .guide-download-btn{display:inline-flex; margin-top:12px; height:44px; align-items:center; padding:0 22px; border-radius:12px; text-decoration:none; font-weight:700; color:#fff!important; background:linear-gradient(135deg,#e61973,#ff3d95)!important}
body.tr #rtmpRecommendedModal .modal-inner{background:linear-gradient(180deg,#27103f,#1a0b2e)!important; border:1.5px solid rgba(230,25,115,.5)!important; border-radius:22px!important; color:#fff!important}
body.tr #rtmpRecommendedModal .modal-actions button{background:linear-gradient(135deg,#e61973,#ff3d95)!important; border:0!important; border-radius:12px!important; color:#fff!important}

/* Chat */
body.tr .grid-stream > section.chat{
  display:flex!important; flex-direction:column; position:relative!important; width:auto!important; max-width:none!important; margin:0!important; padding:16px!important;
  height:min(78vh,760px)!important; min-height:520px; overflow:hidden!important; border-radius:24px!important;
  background:linear-gradient(180deg,#27103f,#1a0b2e)!important; border:1.5px solid rgba(190,140,255,.28)!important; box-shadow:none!important;
}
body.tr .chat-tabs-header{display:flex!important; gap:8px!important; padding:0!important; margin:0 0 12px!important; background:none!important; border:0!important; flex:0 0 auto}
body.tr .chat-tab-btn{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px!important; border-radius:999px!important; font-size:13px!important; font-weight:600!important; cursor:pointer;
  color:#e8dcf7!important; background:rgba(255,255,255,.06)!important; border:1.5px solid rgba(190,140,255,.35)!important; box-shadow:none!important;
}
body.tr .chat-tab-btn.is-active{background:linear-gradient(135deg,#e61973,#ff3d95)!important; border-color:#e61973!important; color:#fff!important}
body.tr .chat-tab-badge{background:#eac518!important; color:#1a0b2e!important; border-radius:999px; padding:1px 8px; font-size:11px; font-weight:800}
body.tr .chat-tab-panel{display:none!important; flex:1; min-height:0}
body.tr .chat-tab-panel.is-active{display:flex!important; flex-direction:column}
body.tr .chat-tab-panel > h2{display:none}
body.tr .chat-box{flex:1!important; min-height:0; height:auto!important; overflow-y:auto!important; padding:12px!important; border-radius:16px!important; background:#14081f!important; border:1px solid rgba(190,140,255,.2)!important}
body.tr .input-chat{display:flex!important; gap:10px; margin-top:12px!important; padding:0!important; background:none!important; flex:0 0 auto}
body.tr .input-chat input, body.tr .input-chat textarea{flex:1}
body.tr .input-chat button{height:42px; padding:0 20px; border-radius:12px!important; border:0!important; font-weight:700; cursor:pointer; color:#fff!important; background:linear-gradient(135deg,#e61973,#ff3d95)!important; white-space:nowrap}
body.tr .viewers-list{flex:1; overflow:auto; padding:12px; border-radius:16px; background:#14081f; border:1px solid rgba(190,140,255,.2)}
body.tr #tabPanelMessages > div{flex:1; min-height:0}
body.tr #tabPanelMessages [style*="background:#fff"]{background:rgba(255,255,255,.06)!important; color:#fff!important; border:1px solid rgba(190,140,255,.25)}
body.tr #tabPanelMessages button[style*="ff2600"]{background:linear-gradient(135deg,#e61973,#ff3d95)!important}
body.tr #btnDmMute{background:transparent!important; color:#fff!important; border:1.5px solid rgba(255,255,255,.4)!important}
body.tr #dmInboxList button{background:rgba(255,255,255,.06)!important; color:#fff!important; border:1px solid rgba(190,140,255,.3)!important}
body.tr #dmModelInput{background:rgba(255,255,255,.07)!important; color:#fff!important; border:1.5px solid rgba(190,140,255,.35)!important}

/* Moderación */
body.tr #muteModal{background:linear-gradient(180deg,#27103f,#1a0b2e)!important; border:1.5px solid rgba(230,25,115,.5)!important; border-radius:22px!important; color:#fff!important}
body.tr #muteModalClose{background:transparent!important; border:1.5px solid rgba(255,255,255,.4)!important; color:#fff!important; border-radius:10px!important}

/* Accesos rápidos */
.tr-links{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 6px}
.tr-links a{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border-radius:999px; font-size:13px; font-weight:600; text-decoration:none; color:#fff; background:rgba(255,255,255,.06); border:1.5px solid rgba(190,140,255,.35)}
.tr-links a:hover{border-color:#e61973}
.tr-links i{color:#eac518}

@media(max-width:1000px){
  body.tr .box{padding:14px 14px 6px!important}
  body.tr .grid-stream{grid-template-columns:1fr!important}
  body.tr .grid-stream > section.chat{height:70vh!important; min-height:420px}
}
@media(max-width:600px){
  body.tr > header{padding:0 14px!important; height:60px!important}
  body.tr #logo img{height:32px}
  body.tr .tokens-badge{padding:6px 10px!important; font-size:12px!important}
  body.tr .tokens-badge div{display:none!important}
  body.tr #cerrarSesionBtn{padding:0 12px!important; font-size:0}
  body.tr #cerrarSesionBtn i{font-size:14px}
  body.tr .stream-tab{font-size:11.5px!important; padding:0 4px!important}
  body.tr .stream-content{grid-template-columns:1fr!important}
  body.tr .camera-box, body.tr .mic-box{grid-column:1/-1}
  body.tr .tr-links a{flex:1 1 100%; justify-content:center}
}

/* Ajustes finos */
body.tr .web-actions{justify-items:stretch}
body.tr .web-actions #btnEmitir{width:100%!important; max-width:none!important}
body.tr .preview video{background:transparent!important; position:relative; z-index:1}
body.tr .preview::before{
  content:'\f030'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:44px; color:rgba(205,184,230,.35); background:radial-gradient(circle at 50% 40%,#2d1250,#0e0618);
}
body.tr .preview::after{
  content:'Vista previa de tu cámara'; position:absolute; left:0; right:0; bottom:16%; text-align:center; font-size:12.5px; color:rgba(205,184,230,.6);
}
body.tr .preview .obs-overlay, body.tr .preview .obs-placeholder{z-index:2}
body.tr .chat-message{border-radius:14px!important; margin:0 0 8px!important; background:rgba(255,255,255,.07)!important; color:#fff!important; border:1px solid rgba(190,140,255,.18)!important}
body.tr .chat-message.system{background:rgba(234,197,24,.1)!important; border-color:rgba(234,197,24,.4)!important; color:#f3e7b0!important}
body.tr .chat-message.mine{background:rgba(230,25,115,.2)!important; border-color:rgba(230,25,115,.5)!important}
body.tr .chat-message.pinned{background:rgba(90,25,168,.35)!important; border-color:rgba(190,140,255,.5)!important}
body.tr .pin-badge{background:#e61973!important; color:#fff!important; border-radius:999px}
body.tr .chat-user{font-weight:700}

/* Móvil / tablet: una sola columna apilada (reemplaza el modo pantalla completa anterior) */
@media(max-width:1024px), (max-height:500px){
  html, body.tr{overflow:auto!important; height:auto!important}
  body.tr .grid-stream > aside{order:1}
  body.tr .grid-stream > section.chat{order:2; position:relative!important; top:auto!important; right:auto!important; width:auto!important; max-width:none!important; height:70vh!important; backdrop-filter:none!important; background:linear-gradient(180deg,#27103f,#1a0b2e)!important}
  body.tr .chat--hidden{display:flex!important}
  body.tr #mobileChatBtn{display:none!important}
  body.tr .camera-box, body.tr .mic-box{display:block!important}
  body.tr .preview{display:block!important; height:auto!important; min-height:0!important; max-height:none!important; aspect-ratio:16/9; padding:0!important; border-radius:18px!important}
  body.tr .preview video{position:absolute!important; inset:0; width:100%!important; height:100%!important; max-height:none!important; object-fit:cover!important}
  body.tr #btnEmitir{position:static!important; inset:auto!important; left:auto!important; right:auto!important; bottom:auto!important; width:100%!important; border-radius:16px!important}
  body.tr .web-actions{height:auto!important}
  body.tr .chat-box{max-height:none!important}
}

@media(max-width:1024px), (max-height:500px){
  body.tr .stream-box *:not(.preview):not(.preview *){position:static!important; transform:none!important; inset:auto!important; float:none!important}
  body.tr .stream-tabs{height:auto!important; max-height:none!important}
  body.tr .stream-tab{height:40px!important; min-height:40px!important; line-height:1!important}
  body.tr .stream-box, body.tr .stream-content{height:auto!important; min-height:0!important; max-height:none!important}
  body.tr .preview{position:relative!important}
  body.tr .web-actions, body.tr #btnEmitir{margin:0!important; left:auto!important; right:auto!important; bottom:auto!important; width:100%!important; max-width:none!important}
  body.tr .mic-box .form-group{width:auto!important}
  body.tr #toggleMic{width:100%!important; margin:0!important}
}

@media(max-width:1024px), (max-height:500px){
  body.tr .stream-tab{display:inline-flex!important}
  body.tr .stream-tabs{padding-bottom:0!important; overflow:visible!important}
  body.tr .stream-box .stream-content{grid-template-columns:1fr 1fr!important}
  body.tr .stream-box .preview, body.tr .stream-box .web-actions, body.tr .stream-box #boxPrivReq, body.tr .stream-box #boxPrivStatus, body.tr .stream-box .info-box{grid-column:1/-1!important}
  body.tr .stream-box #btnEmitir{transform:none!important; translate:none!important; left:auto!important; margin:0!important}
}
@media(max-width:600px){
  body.tr .stream-box .stream-content{grid-template-columns:1fr!important}
}

@media(max-width:1024px), (max-height:500px){
  body.tr .stream-box .preview{aspect-ratio:16/9!important; height:auto!important; grid-row:auto!important}
  body.tr .stream-box .stream-content > *{grid-row:auto!important}
  body.tr .stream-box .camera-box, body.tr .stream-box .mic-box{grid-column:auto!important}
}
@media(max-width:600px){
  body.tr .stream-box .stream-content > *{grid-column:1/-1!important}
}

body.tr .stream-tabs{margin:0!important; width:100%!important; box-sizing:border-box!important; overflow:visible!important}
body.tr .stream-tab{margin:0!important; min-width:0!important; flex:1 1 0!important; font-size:12px!important; padding:0 6px!important}
@media(max-width:480px){ body.tr .stream-tab{font-size:11px!important; gap:5px!important} body.tr .stream-tab i{display:none} }
body.tr .stream-box .info-box{width:100%!important; max-width:none!important; margin:0!important; box-sizing:border-box!important}
body.tr .info-box input{font-size:12.5px!important}
body.tr .chat-row{display:block!important}
body.tr .chat-row > span{display:inline!important; width:auto!important; max-width:none!important}
body.tr .chat-user{display:inline!important; white-space:nowrap!important; width:auto!important; min-width:0!important; margin-right:4px}
body.tr .chat-message-body{display:inline!important}
body.tr .chat-text{display:inline!important; word-break:break-word}

#mensajeInput{ resize: none; overflow: hidden; font-family: inherit; }