/* Use site theme variables where possible */
/* Leverage existing site variables: --bg, --card, --muted, --accent */
body .debate-room{ display:flex; gap:1rem; align-items:flex-start; }
.debate-stage{ flex:1; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.04)); padding:16px; border-radius:14px; border:1px solid rgba(255,255,255,0.03); box-shadow:0 12px 30px rgba(2,6,23,0.45); }
.video-grid{ display:grid; grid-template-columns:1fr; gap:12px; align-items:stretch; }
.video-tile{ position:relative; background:var(--card); border-radius:12px; overflow:hidden; min-height:180px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.03); }
.video-tile video{ width:100%; height:100%; object-fit:cover; display:block; background:#000 }
.video-label{ position:absolute; left:10px; bottom:10px; background:linear-gradient(90deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25)); padding:6px 10px; border-radius:8px; font-size:13px; color:#fff; backdrop-filter:blur(4px) }
.debate-chat{ width:340px; background:var(--card); border-radius:12px; padding:14px; color:var(--muted); border:1px solid rgba(255,255,255,0.03); }
.debate-sources{ background:var(--card); border-radius:12px; color:var(--muted); padding:12px; border:1px solid rgba(255,255,255,0.03); }
.studio-controls .btn{ margin-right:8px }
.muted{ color:var(--muted) }

/* Make controls match site buttons */
.studio-controls .btn{ padding:10px 14px; border-radius:10px }

/* Responsive */
@media (max-width:900px){ .debate-room{ flex-direction:column } .debate-chat{ width:100%; order:2 } .debate-sources{ width:100%; order:3 } }

/* Grid sizing based on number of tiles (keeps site card look) */
.video-grid[data-count="1"],
.video-grid[data-count="2"],
.video-grid[data-count="3"],
.video-grid[data-count="4"],
.video-grid[data-count="5"],
.video-grid[data-count="6"]{
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
}

/* Small helpers */
.source-row{ transition:background .12s ease,transform .12s ease }
.source-row:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.02) }

/* Minimal grid styles for Agora video conferencing */
.debate-room { display:flex; gap:16px; align-items:flex-start; }
.debate-stage { flex:2; }
.debate-chat { width:360px; }
.studio-controls { margin-bottom:12px; display:flex; gap:8px; align-items:center; }

/* video grid that expands/shrinks based on participants */
.video-grid { display:grid; gap:8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); width:100%; }
.video-tile { background:#111; border-radius:6px; overflow:hidden; position:relative; min-height:260px; display:flex; align-items:center; justify-content:center; }
.video-tile video { width:100%; height:100%; object-fit:cover; display:block; }
.video-label { position:absolute; left:56px; bottom:8px; color:#fff; font-weight:600; text-shadow:0 1px 0 rgba(0,0,0,0.6); }

/* avatar thumb overlay for video tiles */
.video-tile .avatar-thumb { position:absolute; left:10px; top:10px; width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.08); box-shadow:0 2px 6px rgba(0,0,0,0.6); }

@media (max-width:700px){ .video-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }

/* Larger layout tweaks so debate view fills more of the page */
.videos-content .container { max-width:1400px; padding-left:32px; padding-right:32px; }
.debate-room{ gap:24px; }
.debate-stage{ flex:1 1 0; min-width:0; }
.debate-chat{ width:360px; flex:0 0 360px; }
.video-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); min-height:380px; }

@media (max-width:1000px){
	.videos-content .container { padding-left:18px; padding-right:18px; }
	.debate-chat{ width:100%; flex:1 1 0; }
}

/* Fixed right, toggleable chat */
.debate-chat.fixed-right{
	position:fixed;
	right:18px;
	top:48px;
	width:360px;
	max-width:calc(100vw - 36px);
	height:calc(100vh - 72px);
	z-index:1200;
	transform:translateX(110%);
	transition:transform .28s cubic-bezier(.2,.9,.2,1), opacity .2s ease;
	opacity:0;
	box-shadow:0 18px 40px rgba(0,0,0,0.6);
}
.debate-chat.fixed-right.open{ transform:translateX(0); opacity:1; }
.debate-chat .chat-close-btn{ float:right; background:transparent; border:0; color:var(--muted); font-size:16px; cursor:pointer; margin-left:8px }

/* Floating toggle button */
@media (max-width:1000px){
	.debate-chat.fixed-right{ position:static; transform:none; opacity:1; width:100%; height:auto; box-shadow:none }
 	/* no floating toggle */
}

/* When chat is open, give the content area room so chat behaves like a sidebar */
.videos-layout.chat-open .videos-content { margin-right:420px; transition:margin .28s cubic-bezier(.2,.9,.2,1); }
@media (max-width:1200px){ .videos-layout.chat-open .videos-content { margin-right:380px; } }
@media (max-width:1000px){ .videos-layout.chat-open .videos-content { margin-right:0; } }

/* Chat internal layout */
.debate-chat{ display:flex; flex-direction:column; padding:12px; box-sizing:border-box; min-height:320px; }
.debate-chat .chat-header{ display:flex; align-items:center; justify-content:space-between; padding-bottom:8px; }
.debate-chat .chat-header h3{ margin:0; font-size:16px; font-weight:700; color:var(--muted); }
.debate-chat .chat-messages{ flex:1 1 auto; min-height:0; overflow:auto; padding:8px; gap:8px; display:flex; flex-direction:column; }
.debate-chat .chat-footer{ display:flex; gap:8px; align-items:center; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.02); flex-shrink:0 }
.debate-chat .chat-input{ flex:1; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:rgba(255,255,255,0.02); color:var(--muted); outline:none }
.debate-chat .chat-input::placeholder{ color:rgba(255,255,255,0.35); }
.debate-chat .chat-send{ padding:10px 14px; border-radius:8px; }
.debate-chat .chat-guest-note{ font-size:12px; margin-top:8px }

/* Message bubbles */
.chat-message{ max-width:100%; padding:8px 10px; border-radius:8px; background:rgba(255,255,255,0.02); color:var(--muted); font-size:14px; line-height:1.25; word-break:break-word }
.chat-message.me{ background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); align-self:flex-end }
.chat-message .username{ display:block; font-weight:700; color:#fff; font-size:13px; margin-bottom:4px }
.chat-message .text{ display:block }

/* Emoji tweaks: larger and aligned */
.chat-message .emoji{ font-size:20px; line-height:1; vertical-align:middle }

/* Ensure footer is visible above bottom edge when chat is fixed */
.debate-chat.fixed-right{ display:flex; flex-direction:column; }
.debate-chat.fixed-right .chat-footer{ position:sticky; bottom:12px; background:transparent; z-index:2 }

/* Audio-only tile avatar */
.video-tile.audio-only { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px; min-height:140px }
.video-tile.audio-only .avatar-img { width:96px; height:96px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.06); margin-bottom:8px }
.video-tile.audio-only .video-label { position:static; margin-top:6px; background:transparent; color:var(--muted); font-weight:600 }

/* Force 4:3 aspect ratio for debate video tiles */
.video-grid .video-tile { aspect-ratio: 4/3; min-height: unset; height: auto; }
.video-grid .video-tile video { width:100%; height:100%; object-fit:cover; display:block }
.video-grid .video-tile.audio-only { aspect-ratio: auto; min-height:140px }

/* Fullscreen grid tweaks */
/* Make the grid fill the fullscreen viewport and ensure tiles size correctly */
#videoGridWrap:-webkit-full-screen, #videoGridWrap:-moz-full-screen, #videoGridWrap:fullscreen, #videoGridWrap:-ms-fullscreen { width:100vw; height:100vh; max-width:none; max-height:none; padding:12px; box-sizing:border-box; }
#videoGridWrap:-webkit-full-screen .video-grid, #videoGridWrap:-moz-full-screen .video-grid, #videoGridWrap:fullscreen .video-grid, #videoGridWrap:-ms-fullscreen .video-grid { height:100%; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows:1fr; gap:8px; }
#videoGridWrap:-webkit-full-screen .video-tile, #videoGridWrap:-moz-full-screen .video-tile, #videoGridWrap:fullscreen .video-tile, #videoGridWrap:-ms-fullscreen .video-tile { height:100%; aspect-ratio:4/3; }
#videoGridWrap .video-tile video { width:100%; height:100%; object-fit:cover }

/* Fallback full-viewport mode when Fullscreen API is limited on some browsers */
body.grid-fullscreen { overflow:hidden; }
body.grid-fullscreen .videos-layout, body.grid-fullscreen .videos-content { margin:0; padding:0; }
body.grid-fullscreen #videoGridWrap { position:fixed !important; top:0; left:0; width:100vw; height:100vh; z-index:1400; max-width:none; max-height:none; padding:12px; box-sizing:border-box; background:var(--bg); }
body.grid-fullscreen #videoGridWrap .video-grid { height:100%; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows:1fr; gap:8px; }
body.grid-fullscreen #videoGridWrap .video-tile { height:100%; aspect-ratio:4/3 }


/* Prevent tile overlap: apply stronger rules only for 3-6 participants (3x2 grid)
	 For 1-2 participants let the grid use 1fr/2fr columns to avoid oversized rows. */
.video-grid[data-count="3"],
.video-grid[data-count="4"],
.video-grid[data-count="5"],
.video-grid[data-count="6"] {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	grid-auto-rows: minmax(0, 1fr) !important;
	gap: 12px !important;
	align-items: stretch !important;
}
.video-grid[data-count] .video-tile {
	box-sizing: border-box !important;
	min-height: 0 !important;
	height: auto !important;
}
.video-grid[data-count] .video-tile video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Extra safety for exactly 3 tiles to avoid overlap/overflow */
.video-grid[data-count="3"] {
	grid-template-columns: repeat(3, 1fr) !important;
	grid-auto-rows: minmax(160px, 1fr) !important;
	gap: 12px !important;
	align-items: stretch !important;
	align-content: start !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
}
.video-grid[data-count="3"] .video-tile {
	aspect-ratio: auto !important;
	min-height: 0 !important;
	height: 100% !important;
	box-sizing: border-box !important;
}
.video-grid[data-count="3"] .video-tile video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* Prevent horizontal overflow from the grid wrapper */
#videoGridWrap { overflow-x: hidden; }