.chat-media{width:min(100%,420px);max-width:100%;margin:10px 0;color:#f4f3fa}.cm-card{box-sizing:border-box;border:1px solid #505268;border-radius:16px;overflow:hidden;background:#202333;box-shadow:0 6px 22px #0003;color:#f4f3fa}.cm-header{display:flex;align-items:center;gap:10px;padding:12px 14px}.cm-brand{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fe485822;color:#ff7988;font-size:20px;flex-shrink:0}.cm-spotify .cm-brand{background:#45df8522;color:#6ae5a0}.cm-labels{min-width:0}.cm-title{font-weight:750;font-size:14px}.cm-subtitle{display:block;color:#b9bfd1;font-size:12px;margin-top:2px}.cm-stage{height:var(--cm-height,auto);background:#10121b}.cm-youtube .cm-stage{aspect-ratio:16/9;min-height:200px}.cm-frame,.cm-poster{display:block;width:100%;height:100%;border:0}.cm-frame{min-height:inherit}.cm-poster{min-height:200px;background:#172e2a;background-position:center;background-size:cover;cursor:pointer;display:grid;place-items:center;padding:24px;color:white}.cm-spotify .cm-poster{min-height:100%}.cm-play-label{padding:12px 20px;background:#13151de8;border:1px solid #ffffff70;border-radius:30px;font-size:14px;font-weight:700;box-shadow:0 4px 20px #0005}.cm-poster:hover .cm-play-label{background:#7650b9}.cm-actions{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 4px}.cm-button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 10px;box-sizing:border-box;border:1px solid #575b73;border-radius:8px;background:#303447;color:#f4f3fa;font:inherit;font-size:12px;line-height:1.3;text-decoration:none;cursor:pointer}.cm-button:hover{background:#44465f;border-color:#b99bea}.cm-button[hidden]{display:none}.cm-button:focus-visible,.cm-poster:focus-visible{outline:3px solid #c6a5ff;outline-offset:-3px}.cm-status{display:block;min-height:14px;padding:4px 14px 10px;font-size:11px;color:#b9bfd1}.chat-media.cm-expanded{width:min(100%,680px)}.cm-card.cm-floating{position:fixed;inset:auto 20px 20px auto;margin:0;width:min(420px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;z-index:10000;box-shadow:0 16px 64px #0009;border-color:#b99bea}.cm-card.cm-floating.cm-expanded{width:min(680px,calc(100vw - 24px))}.cm-card::backdrop{background:transparent;pointer-events:none}@media(max-width:540px){.cm-card.cm-floating{right:12px;bottom:12px}.cm-button{min-height:40px}.cm-header{padding:10px 12px}}
.cm-youtube .cm-stage{position:relative}.cm-youtube .cm-frame,.cm-youtube .cm-poster{position:absolute;inset:0}

.cm-preference{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 12px 2px;color:#b9bfd1;font-size:12px}.cm-popout-pref{font:inherit;color:#f4f3fa;background:#303447;border:1px solid #575b73;border-radius:8px;padding:8px;min-height:36px;max-width:100%}.cm-popout-pref:focus-visible{outline:3px solid #c6a5ff;outline-offset:2px}

.cm-volume{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #ffffff18;background:#24283a}.cm-volume[hidden]{display:none}.cm-volume-label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:12px}.cm-volume-range{display:block;width:100%;min-width:60px;height:32px;margin:0;accent-color:#c6a5ff;cursor:pointer;touch-action:pan-y}.cm-volume-output{font-size:12px;min-width:42px;max-width:95px;font-variant-numeric:tabular-nums}.cm-volume .cm-button:disabled{opacity:.5;cursor:default}

/* Pointer capture keeps movement reliable over the cross-origin video on mouse and touch. */
.cm-floating .cm-header{cursor:grab;touch-action:none;user-select:none;flex:none}.cm-floating .cm-header:active{cursor:grabbing}.cm-floating .cm-header:focus-visible,.cm-resize-grip:focus-visible{outline:3px solid #c6a5ff;outline-offset:-3px}
.cm-card.cm-floating{display:flex;flex-direction:column;min-width:0;min-height:0;max-width:calc(100vw - 16px)}.cm-floating .cm-stage{flex:1 1 auto;min-height:88px;aspect-ratio:auto}.cm-floating .cm-frame{min-height:88px}.cm-floating :is(.cm-header,.cm-actions,.cm-volume,.cm-preference,.cm-status){flex-shrink:0}.cm-floating .cm-status{padding-right:48px}.cm-manipulating .cm-frame{pointer-events:none}.cm-resize-grip{display:none}.cm-floating .cm-resize-grip{display:block;position:absolute;right:2px;bottom:2px;width:42px;height:34px;border:0;border-radius:9px;background:#303447;color:#e5c7ff;font-size:24px;cursor:nwse-resize;touch-action:none;user-select:none;z-index:2}.cm-resize-grip[hidden]{display:none!important}

.cm-sidebar-slot{flex:0 0 min(480px,65%);height:min(480px,65%);min-height:240px;margin:4px;position:relative}.cm-card.cm-sidebar{border-radius:10px;max-width:none;box-shadow:0 5px 20px #0005}.cm-sidebar .cm-header{padding:8px}.cm-sidebar .cm-actions{gap:4px;padding:6px}.cm-sidebar .cm-button{font-size:11px;padding:5px 7px}.cm-sidebar .cm-preference{padding:6px;gap:5px;flex-wrap:wrap}.cm-sidebar .cm-volume{padding:6px;gap:5px}.cm-dock-select{max-width:100%;min-height:36px;border:1px solid #575b73;border-radius:7px;background:#303447;color:#f4f3fa;padding:6px;font:inherit;font-size:12px}

/* Frames cannot swallow the release of a drag. Removed synchronously on every gesture exit. */
html.cb-window-gesture iframe{pointer-events:none!important}
.cb-window-moving{user-select:none!important}
.cm-card.cm-floating{box-sizing:border-box}
.cm-floating .cm-header{position:sticky;top:0;z-index:3;background:#222638}

/* ---- player redesign: video fills, buttons overlay on hover, preferences collapse ---- */
.cm-stagewrap{position:relative;overflow:hidden;background:#10121b;min-width:0}
.cm-youtube:not(.cm-floating) .cm-stagewrap{aspect-ratio:16/9;min-height:200px}
.cm-spotify .cm-stagewrap{min-height:var(--cm-height,152px)}
.cm-floating .cm-stagewrap{flex:1 1 auto;min-height:88px}
.cm-stagewrap>.cm-stage{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;min-height:0}
/* action buttons overlay the bottom of the video — hidden until you hover/focus the player */
.cm-stagewrap .cm-actions{position:absolute;left:0;right:0;bottom:0;margin:0;padding:10px 10px 11px;display:flex;flex-wrap:wrap;gap:6px;background:linear-gradient(transparent,rgba(0,0,0,.8));opacity:0;transform:translateY(8px);transition:opacity .15s ease,transform .15s ease;pointer-events:none;z-index:4}
.cm-card:hover .cm-stagewrap .cm-actions,.cm-card:focus-within .cm-stagewrap .cm-actions{opacity:1;transform:none;pointer-events:auto}
@media (hover:none){ .cm-stagewrap .cm-actions{opacity:1;transform:none;pointer-events:auto} }  /* touch: no hover → keep the overlay visible (static would be clipped by overflow:hidden) */
/* collapsible preferences menu */
.cm-settings{border-top:1px solid #ffffff18}
.cm-settings>summary{cursor:pointer;list-style:none;padding:8px 12px;font-size:12px;font-weight:600;color:#b9bfd1;user-select:none;display:flex;align-items:center;gap:6px}
.cm-settings>summary::-webkit-details-marker{display:none}
.cm-settings>summary::after{content:'\25be';margin-left:auto;transition:transform .15s ease;opacity:.8}
.cm-settings[open]>summary::after{transform:rotate(180deg)}
.cm-settings[open]{padding-bottom:6px}
.cm-settings:hover>summary{color:#f4f3fa}