/* Lightweight music controls — no separate page or room-wide autoplay. */
.st-stream-launch {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: fit-content; max-width: 100%; min-height: 39px; margin: 12px 0 0;
  padding: 8px 14px; border-radius: 12px; cursor: pointer;
  font: 600 13px/1.35 Inter,system-ui,sans-serif;
  border: 1px solid var(--sc-button-border,#b4c9bd);
  background: var(--sc-button-bg,#e9f5ee);
  color: var(--sc-button-text,#245b45);
}
.st-stream-launch:hover { filter: brightness(.97); }
.st-stream-launch[aria-pressed="true"] {
  border-color: var(--sc-accent-strong,#4f9e7a);
  box-shadow: inset 0 -2px var(--sc-accent-strong,#4f9e7a);
}
.st-stream-launch:focus-visible,
.st-stream-dialog button:focus-visible,
.st-stream-dialog input:focus-visible,
.st-stream-dock button:focus-visible { outline: 2px solid #58ae8a; outline-offset: 3px; }
body.group-timer-page .group-clock-card > .st-stream-launch {
  margin: 12px auto 0;
}
.st-stream-dialog {
  box-sizing: border-box; width: min(430px,calc(100vw - 28px));
  max-height: calc(100dvh - 40px); overflow-y: auto;
  padding: 28px 25px 22px;
  border: 1px solid #485b50; border-radius: 22px;
  background: #16211e; color: #f2f5f0; text-align: center;
  box-shadow: 0 28px 90px #0008;
  font: 14px/1.55 Inter,system-ui,sans-serif;
}
.st-stream-dialog::backdrop { background: rgb(9 17 15 / .67); backdrop-filter: blur(5px); }
.st-stream-dialog form { margin: 0; }
.st-stream-dialog h2 { font: 650 23px/1.2 Inter,system-ui,sans-serif; margin: 11px 0 8px; color: inherit; }
.st-stream-dialog p { color: #d0dbd3; margin: 0 0 15px; }
.st-stream-dialog .st-stream-dismiss {
  position: absolute; right: 15px; top: 10px; border: 0; background: transparent;
  font-size: 27px; line-height: 1; color: #d2ded6; cursor: pointer;
}
.st-stream-brand-row { display: flex; justify-content: center; gap: 13px; align-items: center; font-size: 22px; }
.st-stream-spotify,.st-stream-youtube { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
.st-stream-spotify { background: #1ed760; color: #082513; }
.st-stream-youtube { background: #ef2929; color: white; font-size: 18px; border-radius: 12px; }
.st-stream-dialog label { display: block; font-size: 12px; text-align: left; font-weight: 650; margin-bottom: 6px; }
.st-stream-dialog input {
  box-sizing: border-box; display: block; width: 100%; min-height: 47px;
  border-radius: 11px; border: 1px solid #729e8c; padding: 10px 12px;
  background: #202f2a; color: #f4fcf7; outline: none; font: inherit;
}
.st-stream-dialog input::placeholder { color: #a8bdb0; opacity: 1; font-size: 12px; }
.st-stream-dialog input[aria-invalid="true"] { border-color: #ec9587; }
.st-stream-dialog .st-stream-supported { font-size: 11px; color: #abbfb4; text-align: left; margin: 9px 0 14px; line-height: 1.6; }
.st-stream-dialog .st-stream-error { color: #ffc0b5; font-size: 12px; text-align: left; margin: 0 0 12px; }
.st-stream-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; }
.st-stream-actions button {
  border: 1px solid #587466; border-radius: 10px; padding: 9px 18px;
  min-height: 40px; background: transparent; color: inherit; font: 600 13px Inter,system-ui,sans-serif; cursor: pointer;
}
.st-stream-actions .st-stream-primary { background: #b1e6c6; color: #163b2c; border-color: #b1e6c6; }
.st-stream-dock[hidden] { display: none !important; }
.st-stream-dock {
  position: fixed; z-index: 2147483000; inset: auto 18px 18px auto;
  box-sizing: border-box; width: min(370px,calc(100vw - 28px));
  padding: 12px; border: 1px solid var(--sc-border,#7d9d8b);
  border-radius: 17px; background: #18231f; color: #f5f8f3;
  box-shadow: 0 13px 42px #0007; font: 13px/1.4 Inter,system-ui,sans-serif;
}
.st-stream-dock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 10px; }
.st-stream-dock-head > div:first-child { display: grid; gap: 3px; min-width: 0; }
.st-stream-dock-head strong { font-size: 13px; color: #f5f8f3; }
.st-stream-dock-head small { font-size: 11px; color: #b9cabc; }
.st-stream-dock-actions { display: flex; gap: 6px; }
.st-stream-dock-actions button {
  background: #30473a; color: #f5f8f3; border: 1px solid #5a7b65;
  border-radius: 9px; min-height: 34px; padding: 6px 9px;
  font: 600 12px Inter,system-ui,sans-serif; cursor: pointer;
}
.st-stream-frame-slot iframe {
  display: block; box-sizing: border-box; width: 100%; min-height: 152px;
  border: 0; border-radius: 10px; background: #0e1813;
}
.st-stream-dock[data-provider="youtube"] .st-stream-frame-slot iframe { min-height: 220px; }
.st-stream-note { font-size: 10px; line-height: 1.45; color: #b2c4b7; margin: 9px 2px 0; }
@media(max-width:640px) {
  .st-stream-dock { left: 10px; right: 10px; bottom: max(10px,env(safe-area-inset-bottom)); width: auto; max-height: 70dvh; overflow-y: auto; }
  .st-stream-dialog { padding: 26px 17px 20px; }
}
@media(prefers-reduced-motion:reduce) { .st-stream-dialog::backdrop { backdrop-filter: none; } }


/* Search-first interface: genuine vector provider marks, never placeholder glyphs. */
.st-stream-brand-row svg {display:block;width:31px;height:31px}
.st-stream-brand-row .st-stream-youtube svg {width:24px;height:24px}
.st-stream-brand-row .st-stream-spotify {background:#1ed760;width:41px;height:41px}
.st-stream-brand-row .st-stream-youtube {background:#f32828;width:43px;height:32px;border-radius:10px}
.st-stream-brand-row .st-stream-plus {color:#d1ddd4;font-weight:500;font-size:20px}
.st-stream-search {margin-top:16px;text-align:left}
.st-stream-search-row {display:flex;gap:7px;min-width:0}
.st-stream-dialog .st-stream-search-row input {flex:1;min-width:0}
.st-stream-dialog .st-stream-search-row button {
  min-height:46px;border-radius:10px;border:1px solid #a7d8bc;
  padding:8px 13px;background:#b1e6c6;color:#153927;
  font:650 13px Inter,system-ui,sans-serif;cursor:pointer
}
.st-stream-source-filter {display:flex;gap:5px;flex-wrap:wrap;margin:9px 0 4px}
.st-stream-dialog .st-stream-source-filter button {
  min-height:32px;border:1px solid #476655;border-radius:8px;
  padding:4px 11px;background:transparent;color:#c5d8cb;
  font:600 12px Inter,system-ui,sans-serif;cursor:pointer
}
.st-stream-dialog .st-stream-source-filter button[aria-pressed=true] {
  background:#345543;border-color:#9cdbb3;color:#fff
}
.st-stream-dialog .st-stream-search-status {min-height:14px;font-size:12px;color:#c2d1c6;margin:9px 0 5px}
.st-stream-results {max-height:min(32dvh,260px);overflow-y:auto;overscroll-behavior:contain}
.st-stream-dialog .st-stream-result {
  width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 8px;
  text-align:left;border:1px solid #466052;border-radius:10px;padding:9px 11px;
  background:#23352c;color:#f5f9f6;cursor:pointer;margin:0 0 6px;
  font:inherit
}
.st-stream-result:hover,.st-stream-result:focus-visible {border-color:#9ed3ad;background:#2f4939}
.st-stream-result-provider {grid-column:1;grid-row:1;font-size:10px;color:#afd4ba}
.st-stream-result strong {grid-column:1;grid-row:2;font-weight:650;font-size:13px;overflow-wrap:anywhere}
.st-stream-result small {grid-column:1;grid-row:3;font-size:11px;color:#bccdc1;overflow-wrap:anywhere}
.st-stream-result-play {grid-column:2;grid-row:1 / span 3;align-self:center;color:#b4ecc9;font-size:12px;font-weight:650}
.st-stream-external-search {display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0}
.st-stream-external-search small {flex-basis:100%;color:#c6d3c8;font-size:11px}
.st-stream-external-search a {display:inline-flex;padding:7px 9px;border:1px solid #78a88d;border-radius:8px;color:#d3f6df;text-decoration:none;font:600 12px Inter,system-ui,sans-serif}
.st-stream-external-search a:hover {background:#2f4939}
.st-stream-link-details {text-align:left;margin-top:14px;border-top:1px solid #466255;padding-top:12px}
.st-stream-link-details summary {cursor:pointer;list-style:revert;color:#c0d8c8;font-size:12px}
.st-stream-link-details label {margin-top:12px}
.st-stream-dialog .st-stream-actions {margin-top:18px}
@media(max-width:390px){
 .st-stream-search-row{flex-wrap:wrap}
 .st-stream-dialog .st-stream-search-row button{width:100%}
}