/* ---------------------------------------------------------------------------
   The webinar room: video on the left, the context panel on the right.

   The page this replaces put the Zoom client view in a full-page iframe and
   pushed the host, panelists and notes into fixed-height coloured strips. Here
   the video is a component-view widget inside our own layout, so the panel can
   sit beside it and scroll independently.
   --------------------------------------------------------------------------- */

body.room {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.room-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.4rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.room-title { font-size: 1rem; font-weight: 600; }
.room-when { font-size: .78rem; color: var(--ink-muted); }

.room-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  min-height: 0;                 /* lets both columns scroll rather than grow */
}

.room-main {
  position: relative;
  background: var(--bg-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: auto;
}
#zoom-root { width: 100%; height: 100%; display: none; }
#zoom-root.live { display: block; }

.room-status { text-align: center; padding: 2rem 1.4rem; max-width: 460px; }
.room-status h1 { font-size: 1.25rem; margin: 0 0 .5rem; }
.room-note { font-size: .87rem; color: var(--ink-muted); line-height: 1.55; margin: 0; }
.room-actions { margin-top: 1.3rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* .spinner itself comes from dashboard.css, which this page also loads. Only
   the centred placement on the joining screen is specific to the room. */
.room-status .spinner { margin: 0 auto 1rem; }

/* ---------- side panel ---------- */
.room-side {
  border-left: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* A grid item defaults to min-height:auto, which floors it at its content
     height and stops overflow-y from ever engaging. */
  min-height: 0;
}

/* Flex children shrink by default. Combined with the cards' own
   overflow:hidden that clipped their contents — a long panelist list lost its
   last entries and the host blurb under the logo vanished — instead of making
   this column scroll. Cards keep their natural height; the column scrolls. */
.room-side > .side-card { flex-shrink: 0; }

/* Host running the webinar: the notes panel is what they came here to use, so
   it leads. Attendees keep the reading order host → speakers → notes. */
.room-side.host-mode > #notes-card { order: -1; }

.side-card { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.side-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .6rem .85rem;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
  font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-muted);
}
.side-hint { font-size: .66rem; font-weight: 500; letter-spacing: normal; text-transform: none; }
.side-empty { font-size: .82rem; color: var(--ink-muted); margin: 0; padding: .85rem; }

.host-body { padding: .85rem; text-align: center; }
.host-body img { max-width: 70%; max-height: 90px; object-fit: contain; margin-bottom: .6rem; }
/* The card clips its own corners with overflow:hidden, so a long word or a
   pasted URL with no spaces must be forced to wrap rather than run past the
   edge and disappear. */
.host-blurb { font-size: .82rem; line-height: 1.5; margin: 0; text-align: left; overflow-wrap: anywhere; }

.panelist { display: flex; gap: .7rem; padding: .8rem .85rem; border-bottom: 1px solid var(--border); }
.panelist:last-child { border-bottom: none; }
.panelist-pic {
  width: 54px; height: 54px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
}
.panelist-pic.placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-inset); color: var(--ink-muted);
  font-size: .82rem; font-weight: 700;
}
.panelist-body { min-width: 0; }
.panelist-name { font-size: .87rem; font-weight: 600; overflow-wrap: anywhere; }
.panelist-role { font-size: .74rem; color: var(--ink-muted); margin-top: .1rem; overflow-wrap: anywhere; }
.panelist-bio { font-size: .78rem; line-height: 1.45; margin: .4rem 0 0; color: var(--ink-muted); overflow-wrap: anywhere; }

.note { padding: .7rem .85rem; border-bottom: 1px solid var(--border); }
.note:last-child { border-bottom: none; }
.note-agenda { font-size: .76rem; font-weight: 600; margin-bottom: .2rem; }
.note-text { font-size: .81rem; line-height: 1.5; color: var(--ink-muted); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Live notes, staff/editable variant. */
.capture-item { padding: .7rem .85rem; border-bottom: 1px solid var(--border); }
.capture-item:last-child { border-bottom: none; }
.capture-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.capture-name { font-size: .82rem; font-weight: 600; }
.capture-item textarea {
  width: 100%; font: inherit; font-size: .81rem; padding: .5rem .6rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  resize: vertical; min-height: 2.4rem; background: var(--surface); color: var(--ink);
}
.capture-foot { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .4rem; }
.capture-add { padding: .7rem .85rem; border-top: 1px solid var(--border); }
.capture-add label {
  display: block; margin-bottom: .3rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.capture-add-row { display: flex; gap: .5rem; }
.capture-add .input { flex: 1; font-size: .82rem; }

/* Empty state: explains the heading/notes structure and offers a way straight
   in, instead of a dead sentence above a box whose purpose is unclear. */
.capture-start { padding: .85rem; }
.capture-start p { margin: 0 0 .6rem; font-size: .81rem; line-height: 1.5; color: var(--ink-muted); }

/* Below this the two columns cannot both be useful, so the panel goes under
   the video and the page scrolls as one. */
@media (max-width: 900px) {
  body.room { height: auto; overflow: auto; }
  .room-layout { grid-template-columns: 1fr; }
  .room-main { min-height: 60vh; }
  .room-side { border-left: none; border-top: 1px solid var(--border); }
}