#livePreview {
  position: fixed;
  width: 260px;
  background: #111;
  border-radius: 14px;
  overflow: hidden;
  z-index: 9999;
  box-shadow: 0 14px 32px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  min-height: 0;
  backdrop-filter: blur(8px);
  transition: transform .18s ease, width .18s ease, height .18s ease;
}

.live-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: #111;
  border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: grab;
}

.live-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .4px;
}

.live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff2b2b;
  animation: livePulse 1.5s infinite;
}

@keyframes livePulse{

0%{box-shadow:0 0 0 0 rgba(255,43,43,.7);}
70%{box-shadow:0 0 0 8px rgba(255,43,43,0);}
100%{box-shadow:0 0 0 0 rgba(255,43,43,0);}

}

.live-controls {
  display: flex;
  gap: 6px;
}

.live-controls button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #bdbdbd;
  font-size: 18px;
  cursor: pointer;
  transition: all .18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-controls button:hover {
  background: rgba(255,255,255,.08);
  color: #d4af37;
}

.live-controls button.active {
  color: #d4af37;
  text-shadow: 0 0 6px rgba(212,175,55,.55);
}

.live-controls button:active {
  transform: scale(.92);
}

.live-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

#livePreview video,
#livePreviewVideo {
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  flex: 1;
  object-fit: cover;
  background: #000;
  display: block;
}

.live-flip-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.live-flip-btn svg {
  width: 22px;
  height: 22px;
  color: #fff;
  display: block;
}

.live-flip-btn:active {
  transform: scale(.92);
}

.live-settings {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: #151515;
  border-top: 1px solid rgba(255,255,255,.05);
  flex-shrink: 0;
}

.live-settings.open {
  display: flex;
}

.live-settings label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #aaa;
  gap: 4px;
}

.live-settings select {
  background: #0f0f0f;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  color: #fff;
  padding: 6px;
  font-size: 13px;
}

.live-lobby {
  padding: 10px;
  background: #111;
  border-top: 1px solid rgba(255,255,255,.05);
  flex-shrink: 0;
}

.live-lobby-title {
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
  margin-bottom: 6px;
}

.live-client {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.live-client-name {
  font-size: 13px;
  color: #fff;
}

.live-client-actions {
  display: flex;
  gap: 6px;
}

.live-client-actions button {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.live-client-actions .approve {
  background: #2e7d32;
  color: #fff;
}

.live-client-actions .reject {
  background: #8b1d1d;
  color: #fff;
}

.live-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  background: linear-gradient(135deg,transparent 50%,#999 50%);
  opacity: .6;
}

#livePreview.dragging,
#livePreview.resizing {
  border: 1px solid rgba(212,175,55,.7);
  box-shadow: 0 18px 45px rgba(0,0,0,.65),
0 0 0 1px rgba(212,175,55,.8),
0 0 22px rgba(212,175,55,.45);
}

#livePreview.resizing .live-resize {
  background: linear-gradient(135deg,transparent 50%,#d4af37 50%);
}

#livePreview.settings-open {
  height: auto;
}

#livePreview.min {
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0;
  display: flex;
  align-items: center;
  border-radius: 12px;
  overflow: hidden;
}

#livePreview.min video,
#livePreview.min .live-settings,
#livePreview.min .live-lobby,
#livePreview.min .live-resize,
#livePreview.min #liveSettings,
#livePreview.min .live-flip-btn {
  display: none !important;
}

#livePreview.min .live-header {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  padding: 0 12px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
}

#livePreview.min .live-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

#livePreview.min .live-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

#livePreview.min .live-controls button {
  width: 26px;
  height: 26px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width:500px) {
  #livePreview {
    width: 240px;
  }
}
/* =====================================================
LIVE PREVIEW FIX OVERRIDE (CLIP + SETTINGS + LAYOUT)
===================================================== */

/* =========================
CONTAINER FIX
========================= */

#livePreview{
  overflow: visible !important; /* 🔥 allow UI elements to escape */
  
  display:flex;
  flex-direction:column;
}

/* =========================
VIDEO CLIPPING (ONLY VIDEO)
========================= */

.live-video-wrap{
  position:relative;
  flex:1;
  min-height:0;

  overflow:hidden; /* 👈 clip video ONLY */
  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
}

/* =========================
VIDEO ELEMENT SAFETY
========================= */

#livePreview video,
#livePreviewVideo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================
FLIP BUTTON FIX
========================= */

.live-flip-btn{
  position:absolute;

  bottom:16px; /* 🔥 moved away from edge */
  right:16px;

  width:44px;
  height:44px;

  border-radius:50%;
  background:rgba(0,0,0,0.55);

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:5;

  box-shadow:0 6px 16px rgba(0,0,0,.45);
}

/* =========================
SETTINGS EXPANSION FIX
========================= */

#livePreview.settings-open{
  height:auto !important; /* 🔥 allow expansion */
  max-height:80vh;        /* safety cap */
}

/* =========================
SETTINGS PANEL
========================= */

.live-settings{
  display:none;
  flex-direction:column;

  gap:10px;
  padding:10px;

  background:var(--bg-surface);
  border-top:1px solid var(--border-subtle);

  flex-shrink:0;
}

.live-settings.open{
  display:flex;
}

/* =========================
LOBBY FIX (same issue)
========================= */

.live-lobby{
  flex-shrink:0;
}

/* =========================
DRAG/RESIZE VISUAL (THEME)
========================= */

#livePreview.dragging,
#livePreview.resizing{
  border:1px solid rgba(var(--accent-rgb), .7);

  box-shadow:
    0 18px 45px rgba(0,0,0,.65),
    0 0 0 1px rgba(var(--accent-rgb), .8),
    0 0 22px rgba(var(--accent-rgb), .45);
}

#livePreview.resizing .live-resize{
  background:linear-gradient(
    135deg,
    transparent 50%,
    rgb(var(--accent-rgb)) 50%
  );
}
/* === FULL ROUNDING FIX === */

#livePreview{
  border-radius:14px;
  overflow:visible; /* keep this for controls */
}

/* top corners (header) */
.live-header{
  border-top-left-radius:14px;
  border-top-right-radius:14px;
}

/* middle video section */
.live-video-wrap{
  overflow:hidden;
}

/* actual video */
#livePreview video,
#livePreviewVideo{
  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
}

/* lobby (if visible under video) */
.live-lobby{
  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
  overflow:hidden;
}

/* settings panel also needs rounding if opened */
.live-settings{
  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
}