/* Modo widget (?widget=1): os dois fones flutuando sem fundo sobre a mesa do hub, com o player compacto */
/* o esquema de cores precisa ser igual ao do iframe no hub (normal); se diferir, o navegador pinta um fundo opaco atrás */
html.widget,html.widget body{background:transparent!important;color-scheme:normal!important}
html.widget .app{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
html.widget .view{min-height:230px}
html.widget .brand,html.widget #themeBtn,html.widget .hint{display:none}
html.widget .top{left:0;right:0;top:4px;justify-content:center}
html.widget .seg{transform:scale(.82);transform-origin:top center}
html.widget .toast{top:46px;font-size:12px;padding:7px 12px}
html.widget .panel{margin:0 6px 6px;border:0;border-radius:24px;padding:12px 14px 12px;
  background:color-mix(in srgb,var(--panel) 78%,transparent);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.3),0 14px 40px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);scrollbar-width:none}
html.widget .panel::-webkit-scrollbar{display:none}
html.widget .panel>.sec:nth-of-type(n+3){display:none}
html.widget .sec{padding:0;border:0}
html.widget .sec+.sec{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
html.widget .sec h2{display:none}
html.widget .cover{width:42px;height:42px;border-radius:11px;font-size:15px}
html.widget .now{gap:10px}
html.widget .now-t b{font-size:14.5px}
html.widget .now-t span{font-size:12px}
html.widget .ctrls{gap:10px;margin-top:2px}
html.widget .cb{width:38px;height:38px}
html.widget .cb.big{width:48px;height:48px}
html.widget .vol{font-size:12px}
html.widget .out{display:none}
html.widget .list{max-height:0;overflow:hidden}
html.widget .vol{display:none}
html.widget .bar{margin-top:6px}
html.widget .msg{display:none}
html.widget .yt{margin-top:8px}
html.widget .ytbox{margin-top:8px;min-height:200px}

/* cartão compacto: capa, título e controles na mesma linha; barra de tempo; link do YouTube; vídeo */
html.widget .panel{padding:10px 12px;overflow:hidden}
html.widget #playerSec{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"now ctrls" "bar bar";align-items:center;column-gap:6px}
html.widget .now{grid-area:now;min-width:0}
html.widget .ctrls{grid-area:ctrls;margin:0;gap:4px}
html.widget .cb{width:32px;height:32px}
html.widget .cb svg{width:15px;height:15px}
html.widget .cb.big{width:40px;height:40px}
html.widget .cb.big svg{width:18px;height:18px}
html.widget .cover{width:38px;height:38px;border-radius:10px}
html.widget .cover svg{width:18px;height:18px}
html.widget .now-t b{font-size:13.5px}
html.widget .bar{grid-area:bar;margin-top:8px}
html.widget .times{font-size:10.5px;margin-top:2px}
html.widget .yt{display:flex;gap:6px;margin-top:0}
html.widget .yt input{height:34px;font-size:13px;padding:0 10px;min-width:0;flex:1}
html.widget .yt .btn{height:34px;padding:0 12px;font-size:13px}
html.widget .ytbox{margin-top:8px;aspect-ratio:auto;height:200px;min-height:0;border-radius:14px}

/* botão Só 3D: só no widget */
.so3d-bt{display:none}
html.widget .so3d-bt{display:grid;width:30px;height:30px;transform:scale(.9)}
html.widget .so3d-bt svg{width:15px;height:15px}
html.widget .so3d-bt[aria-pressed="true"]{background:var(--ink);color:var(--card)}
html.widget .top{gap:6px}
/* modo Só 3D: sem cartão; os fones são o player. O vídeo do YouTube continua visível (regra do YouTube) sem moldura */
html.widget.so3d .panel{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 4px}
html.widget.so3d #playerSec,html.widget.so3d .yt,html.widget.so3d .list{display:none}
html.widget.so3d .sec+.sec{margin:0;padding:0;border:0}
html.widget.so3d.semgl .ytbox{margin:0 0 4px;height:170px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
html.widget.so3d .toast{white-space:normal;text-align:center;width:88%}

/* botão recolher no cartão */
html.widget .panel{position:relative}
html.widget .panel{padding-top:16px}
html.widget .recolhe{display:grid;place-items:center;position:absolute;left:50%;top:2px;transform:translateX(-50%);z-index:2;width:44px;height:15px;border:0;border-radius:8px;cursor:pointer;
  background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35),0 4px 12px rgba(0,0,0,.3)}
html.widget .recolhe svg{width:14px;height:14px}
html.widget #histSec,html.widget .sugl{display:none}

/* widget aberto em tela cheia no celular (folha do Player) */
html.movel .view{min-height:44vh}
html.movel .panel{margin:0 10px 10px}

/* a tela do estojo do intra-auricular, em tamanho grande: o player fica dentro dela */
.tela-est{display:none}
html.widget.so3d.semgl .tela-est{display:grid;gap:8px;margin:0 2px 4px;padding:10px 12px 12px;border-radius:22px;background:#0F1014;color:#F2F3F5;
  box-shadow:0 0 0 6px #2B2D33,0 0 0 7px rgba(255,255,255,.08),0 16px 36px rgba(0,0,0,.4)}
html.widget.so3d.semgl .ytbox{margin:0;height:200px;border-radius:12px;box-shadow:none}
.te-st{display:flex;align-items:center;gap:10px;font:600 11.5px/1 system-ui,-apple-system,sans-serif}
.te-st span{display:flex;align-items:center;gap:4px}
.te-st b{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;font-size:8.5px;color:#0F1014;background:#4FD39A}
.te-st .te-c{border-radius:2px;width:11px;height:9px;font-size:0;background:#4FD39A}
.te-st em{font-style:normal}
.te-bt{width:7px;height:7px;border-radius:50%;background:#7EA0FF}
.te-h{margin-left:auto}
.tela-est:not(.com-video) .te-v{display:none}
.te-t{font:700 15px/1.25 system-ui,-apple-system,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.te-ct{display:flex;justify-content:center;gap:14px}
.te-ct button{width:38px;height:38px;border:0;border-radius:50%;background:#2A2C33;color:#F2F3F5;display:grid;place-items:center;cursor:pointer;padding:0}
.te-ct button svg{width:16px;height:16px;fill:currentColor}
.te-ct .pp{width:46px;height:46px;background:#2F5BD3}
.te-ct .pp svg{width:20px;height:20px}
.te-pr{height:3px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.te-pr i{display:block;height:100%;width:0;background:#F2F3F5;border-radius:2px}

/* a tela projetada dentro do estojo 3D (Só 3D): status em cima, vídeo à esquerda, título e controles à direita */
.tela-est.na3d{position:absolute;left:0;top:0;z-index:3;width:600px;height:270px;transform-origin:0 0;margin:0;padding:12px 16px 14px;border-radius:22px;box-shadow:none;
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:24px minmax(0,1fr) auto auto;grid-template-areas:"st st" "v t" "v ct" "v pr";gap:8px 18px;align-items:center}
.tela-est.na3d .te-st{grid-area:st;font-size:17px;gap:16px}
.tela-est.na3d .te-st b{width:20px;height:20px;font-size:12px}.tela-est.na3d .te-st .te-c{width:16px;height:13px}.tela-est.na3d .te-bt{width:10px;height:10px}
.tela-est.na3d .te-v{grid-area:v;height:100%;aspect-ratio:16/9;min-height:0}
.tela-est.na3d .ytbox{height:100%;border-radius:12px}
.tela-est.na3d .te-t{grid-area:t;align-self:end;font-size:26px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tela-est.na3d .te-ct{grid-area:ct;justify-content:flex-start;gap:18px}
.tela-est.na3d .te-ct button{width:58px;height:58px}.tela-est.na3d .te-ct .pp{width:70px;height:70px}
.tela-est.na3d .te-ct button svg{width:24px;height:24px}.tela-est.na3d .te-ct .pp svg{width:30px;height:30px}
.tela-est.na3d .te-pr{grid-area:pr;height:5px;margin-bottom:6px}
.tela-est.na3d:not(.com-video){grid-template-columns:0 minmax(0,1fr);column-gap:0}
.tela-est.na3d:not(.com-video) .te-t{font-size:34px;text-align:center}
.tela-est.na3d:not(.com-video) .te-ct{justify-content:center}

/* controles do widget só aparecem ao passar o mouse (em tela de toque ficam sempre visíveis) */
@media (hover:hover){
  html.widget .top{opacity:0;transition:opacity .2s}
  html.widget body:hover .top,html.widget .top:focus-within{opacity:1}
}

/* a tela do estojo também no Áudio 3D completo; fora do 3D mostra só o vídeo, no lugar de sempre */
.tela-est.na3d{background:#0F1014;color:#F2F3F5;box-shadow:0 0 0 6px #2B2D33,0 0 0 7px rgba(255,255,255,.08)}
.tela-est:not(.na3d){display:block;margin:0;padding:0;background:none;box-shadow:none}
.tela-est:not(.na3d) .te-st,.tela-est:not(.na3d) .te-t,.tela-est:not(.na3d) .te-ct,.tela-est:not(.na3d) .te-pr{display:none}
html.widget.so3d.semgl .tela-est:not(.na3d){display:grid;gap:8px;padding:10px 12px 12px;border-radius:22px;background:#0F1014;color:#F2F3F5}
html.widget.so3d.semgl .tela-est:not(.na3d) .te-st{display:flex}html.widget.so3d.semgl .tela-est:not(.na3d) .te-t{display:block}html.widget.so3d.semgl .tela-est:not(.na3d) .te-ct{display:flex}html.widget.so3d.semgl .tela-est:not(.na3d) .te-pr{display:block}