/* Painel de som — visual moderno + busca do YouTube (som-pro.js). */
#som-panel.som-panel,
.som-panel{
  --sp-bg:#0f1012f5;--sp-card:#ffffff08;--sp-card2:#ffffff0f;--sp-line:#ffffff12;--sp-text:#f4f5f2;--sp-mute:#8e928f;--sp-yt:#ff2d55;
  width:360px;padding:16px;border:1px solid var(--sp-line);border-radius:22px;background:var(--sp-bg);
  backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 30px 80px -20px #000000d9,inset 0 1px #ffffff0d;
  max-height:min(78vh,calc(100svh - 180px));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;pointer-events:auto;touch-action:pan-y;
  scrollbar-width:thin;scrollbar-color:#ffffff22 transparent;
}
body.som-panel-open #som-panel:not([hidden]){z-index:100002}
.side-left .som-panel{background:var(--sp-bg)}
.som-panel .picker-head b{font-size:17px;font-weight:800;letter-spacing:-.3px}
.som-close{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#ffffff0d!important;transition:background .15s,transform .2s}
.som-close:hover{background:#ffffff1f!important;transform:rotate(90deg)}
.som-close svg{width:16px;height:16px}
.som-lead{margin:2px 0 14px;font-size:12px;color:var(--sp-mute)}

/* Itens: caixa, carro, caminhão, carreta */
.som-items{gap:8px}
.som-item{grid-template-columns:40px 1fr auto;gap:12px;padding:10px 10px 10px 10px;border:1px solid transparent;border-radius:16px;background:var(--sp-card);transition:background .15s,border-color .15s}
.som-item:hover{background:var(--sp-card2)}
.som-item>svg{box-sizing:border-box;width:40px;height:40px;padding:9px;border-radius:12px;background:#f5d56514;color:var(--gold)}
.som-item.on{border-color:#f5d56559;background:linear-gradient(135deg,#f5d5651a,#f5d56508)}
.som-item.on>svg{background:var(--gold);color:#16130a}
.som-item b{font-size:13.5px;font-weight:700}
.som-item span{font-size:11px;color:var(--sp-mute)}
.som-item button,.som-player button,.som-mini button,.som-mute{border:1px solid var(--sp-line);border-radius:999px;background:var(--sp-card2);color:var(--sp-text);
  font-size:12px;font-weight:700;padding:8px 14px;transition:background .15s,transform .1s,border-color .15s;cursor:pointer}
.som-item button:hover,.som-player button:hover,.som-mute:hover{background:#ffffff1f}
.som-item button:active,.som-player button:active{transform:scale(.96)}
.som-item button.gold{background:var(--gold);border-color:var(--gold);color:#16130a}
.som-item button.gold:hover{filter:brightness(1.08);background:var(--gold)}
.som-item button.ghost{background:transparent}

/* Tocando agora */
.som-player{margin-top:14px;padding:14px;border:1px solid var(--sp-line);border-radius:18px;background:linear-gradient(160deg,#ffffff0a,#ffffff03)}
.som-now{grid-template-columns:44px 1fr auto auto;gap:10px}
.som-note{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;font-size:20px;color:#16130a;
  background:conic-gradient(from 200deg,var(--gold),#ffb347,var(--gold));animation:sp-spin 6s linear infinite}
@keyframes sp-spin{to{filter:hue-rotate(25deg)}}
.som-now b{font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.som-now>div{min-width:0}
.som-now span{display:block;font-size:11px;color:var(--sp-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.som-now button{display:grid;place-items:center;width:40px;height:40px;padding:0}
.som-now button[data-som="play"]{background:var(--gold);border-color:var(--gold);color:#16130a}
.som-tracks{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:12px}
.som-tracks button{border-radius:12px!important;padding:9px 11px!important;font-size:12px!important;font-weight:600!important;background:var(--sp-card)!important}
.som-tracks button.on{color:#16130a!important;background:var(--gold)!important;border-color:var(--gold)!important}

/* Volumes */
.som-volume{gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--sp-line);font-size:12px;color:#c9ccc8}
.som-volume input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--gold),#ffb347);outline:none}
.som-volume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 8px #0008;cursor:pointer}
.som-volume input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px #0008;cursor:pointer}
.som-mute{padding:7px 12px!important;font-size:11.5px!important}

/* Bloco YouTube */
.som-yt{gap:10px;margin-top:14px;padding:14px;border:1px solid #ff2d5533;border-radius:18px;background:linear-gradient(160deg,#ff2d5514,#ff2d5505)}
.som-yt>label{display:flex;align-items:center;font-size:13px;font-weight:800;color:#fff;letter-spacing:0}
.som-yt>label:before{width:26px;height:18px;margin-right:8px;border-radius:6px;background:var(--sp-yt);font-size:9px}
.som-yt-row input,.somp-field{border:1px solid var(--sp-line)!important;border-radius:12px!important;background:#0a0b0c!important}
.som-yt-row input{padding:10px 12px;font-size:13px!important}
.som-yt-row input:focus{outline:none;border-color:#ff2d5599!important;box-shadow:0 0 0 3px #ff2d551f}
.som-yt button{border-radius:12px;min-height:40px;padding:9px 14px;background:var(--sp-card2)}
.som-yt button.gold{background:var(--sp-yt);border-color:var(--sp-yt);color:#fff}
.som-yt-card{grid-template-columns:104px 1fr;gap:10px;padding:8px;border-radius:14px;background:#0000004d}
.som-yt-card img,.som-yt-thumb{width:104px;height:58px;border-radius:10px}
.som-yt-card b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px}
.som-yt-card span{font-size:11px;color:var(--sp-mute)}
.som-yt-actions{display:flex;gap:6px}
.som-yt-actions button{flex:1}
.som-yt-error{border-radius:12px}
.som-yt-cooldown{border:0!important;border-radius:12px;background:#f5d56512;font-size:11.5px!important}
.som-yt-note{margin:0;font-size:10.5px;line-height:1.5;color:#7c807d}

/* Busca */
.som-yt,.som-yt>*,.somp-search,.somp-search>*{min-width:0}
.som-yt-row>button{flex:none}
.somp-search{display:grid;gap:8px}
.somp-field{position:relative;display:flex;align-items:center;gap:8px;padding:0 6px 0 12px;transition:border-color .15s,box-shadow .15s}
.somp-field:focus-within{border-color:#ff2d5599!important;box-shadow:0 0 0 3px #ff2d551f}
.somp-field>svg{flex:none;width:17px;height:17px;color:var(--sp-mute)}
.somp-q{flex:1;min-width:0;height:44px;border:0;background:transparent;color:var(--sp-text);font:inherit;font-size:14px;outline:none}
.somp-q::placeholder{color:#7c807d}
.somp-q::-webkit-search-cancel-button{display:none}
.somp-clear{display:none!important;place-items:center;width:30px!important;height:30px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:#ffffff12!important;color:var(--sp-mute)!important}
.somp-search.has-q .somp-clear{display:grid!important}
.somp-clear svg{width:14px;height:14px}
.somp-results{display:grid;gap:4px;max-height:252px;overflow:auto;scrollbar-width:thin}
.somp-results:empty{display:none}
.somp-row{display:grid;grid-template-columns:72px 1fr 36px;align-items:center;gap:10px;padding:6px;border-radius:12px;transition:background .15s}
.somp-row:hover{background:#ffffff0d}
.somp-row img{width:72px;height:40px;object-fit:cover;border-radius:8px;background:#000}
.somp-row>div{min-width:0}
.somp-row b{display:block;font-size:12px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.somp-row span{display:block;font-size:10.5px;color:var(--sp-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.somp-row button{display:grid;place-items:center;width:36px!important;height:36px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:50%!important;
  background:var(--sp-yt)!important;color:#fff!important;opacity:.9;transition:transform .12s,opacity .15s}
.somp-row:hover button{opacity:1;transform:scale(1.06)}
.somp-row button svg{width:14px;height:14px;margin-left:2px}
.somp-empty{margin:4px 2px;font-size:12px;color:var(--sp-mute)}
.somp-skel i{display:block;width:72px;height:40px;border-radius:8px}
.somp-skel b,.somp-skel span{height:10px;border-radius:6px;margin:4px 0}
.somp-skel b{width:80%}.somp-skel span{width:50%}
.somp-skel i,.somp-skel b,.somp-skel span{background:linear-gradient(90deg,#ffffff0a 25%,#ffffff1a 50%,#ffffff0a 75%);background-size:200% 100%;animation:sp-shim 1.1s linear infinite}
@keyframes sp-shim{to{background-position:-200% 0}}
.somp-or{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;color:#7c807d;text-transform:uppercase;letter-spacing:.8px}
.somp-or::before,.somp-or::after{content:"";flex:1;height:1px;background:var(--sp-line)}

/* Mini player */
.som-mini{border-color:var(--sp-line,#ffffff12);background:#0f1012f0;backdrop-filter:blur(14px);box-shadow:0 12px 30px #0008}

@media (max-width:760px),(pointer:coarse){.som-panel{width:340px}}
@media (prefers-reduced-motion:reduce){.som-note,.somp-skel *{animation:none!important}}