/* In-chat media player — minimal overlay design. The video fills the card; chrome floats over it and reveals
   on hover/focus (CSS :hover reaches across the cross-origin iframe); on touch it stays visible. Rare settings
   collapse into one ⋯ menu. The player surface is deliberately dark (it is video chrome) in any site theme. */
.chat-media{width:min(100%,440px);max-width:100%;margin:10px 0;color:#f4f3fa}
.cm-card{position:relative;box-sizing:border-box;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 6px 22px #0004}
.cm-youtube .cm-card{aspect-ratio:16/9}
.cm-spotify .cm-card{min-height:var(--cm-height,152px)}

.cm-stage{position:absolute;inset:0;width:100%;height:100%;background:radial-gradient(130% 120% at 72% 18%,#241f36 0%,#121019 55%,#0a0a10 100%);display:grid;place-items:center}
.cm-frame{display:block;width:100%;height:100%;border:0}
.cm-poster{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:#172e2a;background-position:center;background-size:cover;cursor:pointer;display:grid;place-items:center}
.cm-poster-play{width:60px;height:60px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;color:#fff;backdrop-filter:blur(2px);transition:background .15s ease}
.cm-poster-play svg{width:24px;height:24px;margin-left:3px}
.cm-poster:hover .cm-poster-play,.cm-poster:focus-visible .cm-poster-play{background:#7650b9}
.cm-poster:focus-visible{outline:3px solid #c6a5ff;outline-offset:-3px}

/* overlay bars — shown only while playing (or floating) */
.cm-bar{position:absolute;left:0;right:0;display:none;align-items:center;gap:8px;padding:8px;z-index:4}
.cm-card.cm-playing .cm-bar,.cm-card.cm-floating .cm-bar{display:flex}
.cm-top{top:0;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent)}
.cm-bot{bottom:0;padding-top:20px;background:linear-gradient(0deg,rgba(0,0,0,.62),transparent)}
.cm-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2;padding-left:4px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cm-title-text{font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-src{font-size:10px;font-weight:500;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.05em}
.cm-tools{display:flex;gap:8px;flex:none}

.cm-ic{appearance:none;border:0;background:transparent;color:#fff;cursor:pointer;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;padding:0}
.cm-ic:hover{background:rgba(255,255,255,.18)}
.cm-ic:focus-visible{outline:2px solid #fff;outline-offset:1px}
.cm-ic svg{width:19px;height:19px;pointer-events:none}

.cm-vol{display:flex;align-items:center;gap:4px}
.cm-vol[hidden]{display:none}
.cm-vol-range{width:0;opacity:0;height:3px;accent-color:#ff2b4e;cursor:pointer;transition:width .16s ease,opacity .16s ease;touch-action:pan-y}
.cm-vol:hover .cm-vol-range,.cm-vol:focus-within .cm-vol-range{width:76px;opacity:1}
.cm-vol-range:disabled{cursor:default}
.cm-spacer{flex:1}
@media (pointer:coarse){.cm-ic{width:40px;height:40px}.cm-tools{gap:12px}.cm-vol-range{width:64px;opacity:1}}

/* overflow menu */
.cm-menu{position:absolute;right:8px;bottom:48px;z-index:6;min-width:210px;max-width:calc(100% - 16px);background:#15161c;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.5);font-size:13px}
.cm-menu[hidden]{display:none}
.cm-mh{margin:8px 9px 3px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:600}
.cm-mi{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;color:inherit;font:inherit;padding:8px 9px;border-radius:8px;cursor:pointer;text-align:left;text-decoration:none}
.cm-mi:hover{background:rgba(255,255,255,.08)}
.cm-mi:focus-visible{outline:2px solid #c6a5ff;outline-offset:-2px}
.cm-mi svg{width:16px;height:16px;flex:none;opacity:.85}
.cm-mi .k{flex:1}
.cm-dot{width:7px;height:7px;border-radius:50%;background:#ff2b4e;flex:none;opacity:0}
.cm-pref-opt[aria-checked="true"] .cm-dot{opacity:1}
.cm-segrow{display:flex;gap:3px;padding:3px 7px 7px}
.cm-segrow button{flex:1;border:0;background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);font:inherit;font-size:11px;padding:6px 4px;border-radius:7px;cursor:pointer}
.cm-segrow button[aria-pressed="true"]{background:#ff2b4e;color:#fff}

.cm-grip{display:none;position:absolute;right:2px;bottom:2px;width:18px;height:18px;z-index:5;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 52%,rgba(255,255,255,.7) 52% 60%,transparent 60% 70%,rgba(255,255,255,.7) 70% 78%,transparent 78%)}
.cm-card.cm-floating .cm-grip{display:block}
.cm-card.cm-fullscreen .cm-grip{display:none}

.cm-toast{position:absolute;left:50%;bottom:50px;transform:translateX(-50%);z-index:7;background:rgba(0,0,0,.82);color:#fff;font-size:12px;padding:5px 11px;border-radius:999px;opacity:0;transition:opacity .2s ease;pointer-events:none;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.cm-toast.show{opacity:1}

/* floating window */
.cm-card.cm-floating{position:fixed;inset:auto 20px 20px auto;margin:0;width:min(440px,calc(100vw - 16px));aspect-ratio:auto;z-index:10000;box-shadow:0 16px 64px #0009;border:1px solid #b99bea}
.cm-card.cm-floating .cm-stage{position:absolute;inset:0}
.cm-card::backdrop{background:transparent;pointer-events:none}
.cm-card.cm-fullscreen{width:100vw;height:100vh;border-radius:0;border:0}
.cm-floating .cm-top{cursor:grab;touch-action:none;user-select:none}
.cm-floating .cm-top:active{cursor:grabbing}
@media (max-width:540px){.cm-card.cm-floating{right:12px;bottom:12px}}

/* auto-hide chrome where a real pointer can reveal it; on touch keep it visible (can't hover over the iframe) */
@media (hover:hover) and (pointer:fine){
  .cm-card.cm-playing .cm-bar,.cm-card.cm-floating .cm-bar{opacity:0;pointer-events:none;transition:opacity .18s ease}
  .cm-card.cm-floating .cm-grip{opacity:0;transition:opacity .18s ease}
  .cm-card:hover .cm-bar,.cm-card:focus-within .cm-bar,.cm-card.cm-menu-open .cm-bar,
  .cm-card:hover .cm-grip,.cm-card:focus-within .cm-grip{opacity:1;pointer-events:auto}
}

/* sidebar dock */
.cm-sidebar-slot{flex:0 0 min(480px,65%);height:min(480px,65%);min-height:240px;margin:4px;position:relative}
.cm-card.cm-sidebar{position:absolute;border-radius:10px;aspect-ratio:auto;box-shadow:0 5px 20px #0005;border-color:#505268}

/* gesture safety: a cross-origin frame must not swallow the release of a drag/resize */
html.cb-window-gesture iframe{pointer-events:none!important}
.cb-window-moving{user-select:none!important}