/* 1.  Reset & basic typography */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height: 100vh; }
body { font-family:system-ui, sans-serif; color:#fff; background-color:#000; }
a { color:#0ff; text-decoration:none; }

/* 2.  Layout */
#cfstream { position:relative; z-index:10; }
nav { position:fixed; top:1rem; right:1rem; z-index:20; }
nav a { margin-left:1rem; font-weight:700; }

/* 3.  Canvas grid background */
.canvas-wrapper { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); }
.canvas-wrapper canvas { width:100%; height:100%; }

/* 4. Component-specific */

#main-content-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem; /* Space between video and commentary */
  margin: 2rem; /* Overall margin for the content wrapper */
  /* background-color: red; Removed for body background debug */
  /* height: calc(100vh - 4rem); Removed for initial debug */
}

#commentary-container {
  width: 28%; /* Adjust width for side-by-side layout */
  height: 500px; /* Make height dynamic or adjusted as needed */
  padding: 1rem;
  border: 1px solid #333;
  background-color: #111;
  overflow-y: scroll;
  font-family: monospace;
}

.stream-aspect-ratio-box {
  position: relative;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  width: 100%; /* Take full width of its parent flex item */
  overflow: hidden;
}

.stream-aspect-ratio-box iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.commentary-line {
  margin-bottom: 0.5rem;
}

.speaker {
  font-weight: bold;
}

.speaker.gemma {
  color: #ff8a80; /* A reddish color for Gemma */
}

.speaker.llama {
  color: #80d8ff; /* A blueish color for Llama */
}

#stream-embed-wrapper {
  width: 68%; /* Adjust width for side-by-side layout */
}