/* Watch page layout */
.watch-body { margin: 0; }
.top { padding: 10px 14px; background:#0f0f12; position: sticky; top: 0; z-index: 10; }
.top .left { display:flex; align-items:center; gap:12px; }
.top .title { margin:0; font-size:18px; font-weight:700; }
.modes { display:flex; gap:8px; align-items:center; }
.mode.active { outline: 2px solid #ffffff33; }

.split {
  display: flex;
  width: 100%;
  height: calc(100vh - 56px);
}

.pane { height: 100%; border: 0; }

.gutter {
  width: 10px;
  cursor: col-resize;
  background: #222;
}
.gutter:hover { background:#333; }

/* Make the top bar more compact on small screens */
@media (max-width: 900px) {
  .split { height: calc(100vh - 110px); }
  .top { flex-wrap: wrap; }
}

/* Watch page: no scroll, topbar single-line */
html, body { height: 100%; }
.watch-body { margin: 0; height: 100vh; overflow: hidden; }

.topbar{
  height: 48px;
  box-sizing: border-box;
  padding: 6px 10px;
  background:#0f0f12;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom: 1px solid #222;
  white-space: nowrap; /* do not wrap */
}

.tb-left{ display:flex; align-items:center; gap:10px; min-width: 0; }
.tb-title{
  font-weight: 700;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 38vw;
}

.tb-center{ display:flex; gap:8px; align-items:center; }
.tb-right{ display:flex; align-items:center; }

.mode.active { outline: 2px solid #ffffff33; }

.split{
  display:flex;
  width:100%;
  height: calc(100vh - 48px); /* exactly the rest of viewport */
}

.pane{ height:100%; border:0; }

.gutter{
  width:10px;
  cursor:col-resize;
  background:#222;
}
.gutter:hover{ background:#333; }

/* optional: slightly smaller buttons on small screens */
@media (max-width: 700px){
  .topbar{ height: 44px; }
  .split{ height: calc(100vh - 44px); }
  button, .btn{ padding:8px 10px; }
  .tb-title{ max-width: 28vw; }
}

/* Watch page: fixed topbar, no scroll */
html, body { height: 100%; }
.watch-body { margin:0; height:100vh; overflow:hidden; background:#0f0f12; }

.topbar{
  height:48px;
  box-sizing:border-box;
  padding:6px 10px;
  background:#0f0f12;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid #222;
  white-space:nowrap;
}

.tb-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.tb-title{
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:40vw;
}
.tb-center{ display:flex; gap:8px; align-items:center; }
.tb-right{ display:flex; align-items:center; }

.btn.active{ outline:2px solid #ffffff33; }

.layout{
  height: calc(100vh - 48px);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 380px; /* player + chat */
}

.player{ width:100%; height:100%; border:0; }
.chat{ width:100%; height:100%; border:0; background:#fff; }

/* When chat is off => player takes all space */
.layout[data-chat="off"]{
  grid-template-columns: 1fr;
}
.layout[data-chat="off"] .chat{
  display:none;
}

/* small screens: make chat narrower */
@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr 320px; }
}