html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: system-ui, sans-serif;
}

#stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #000;
}

video {
  background: #000;
  object-fit: cover;
}

#programVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.local-preview {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 220px;
  height: 130px;
  z-index: 30;
  border: 1px solid rgba(255,255,255,.5);
  background: #000;
}

.speaker-slot {
  position: absolute;
  bottom: 64px;
  width: 220px;
  height: 150px;
  z-index: 32;
  border: 1px solid rgba(255,255,255,.5);
  background: #000;
}

.speaker-slot video {
  width: 100%;
  height: 100%;
}

.slot-a {
  left: 24px;
}

.slot-b {
  right: 24px;
}

.status-line {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 40;
  color: #fff;
  font-size: 15px;
  text-shadow: 0 2px 6px #000;
}

.role-controls {
  position: absolute;
  top: 168px;
  right: 24px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

button {
  color: #fff;
  background: rgba(0,0,0,.58);
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 14px;
  cursor: pointer;
}

button:disabled {
  opacity: .45;
  cursor: default;
}

.ticker-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  color: #fff;
  background: rgba(0,0,0,.72);
}

#tickerText {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#questionInput {
  width: 180px;
  color: #fff;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.45);
  padding: 6px;
}

.hidden {
  display: none !important;
}

/* RECEIVER SINGLE-TOGGLE PRIVATE QA */
#tickerBand #privateQaInput {
  height: 32px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 6px;
  padding: 0 10px;
  color: #fff;
  background: rgba(0,0,0,.42);
}

#tickerBand #privateQaAction {
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 6px;
  color: #fff;
  background: rgba(0,0,0,.55);
  white-space: nowrap;
}

html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;overscroll-behavior-x:none!important;margin:0!important;padding:0!important;}body>*{max-width:100vw;}video,canvas{max-width:100%;}


/* GPTUBE_QUESTION_COMPOSER_LAYOUT */
html.role-host #questionInput,html.role-host #btnSendQuestion,html.role-host #btnAskQuestion,html.role-host #privateQaInput,html.role-host #privateQaAction{display:none!important;}
#tickerBand #questionInput{width:clamp(220px,34vw,520px);flex:0 0 clamp(220px,34vw,520px);box-sizing:border-box;}

/* GPTUBE_CLEAN_PRESENTATION_CONTRACT_V1_BEGIN */
#speakerBubbleA,#speakerBubbleB{position:fixed;z-index:1010;bottom:clamp(92px,14vh,155px);width:clamp(180px,24vw,360px);max-width:36vw;margin:0;color:#fff;font-size:clamp(14px,1.35vw,20px);font-weight:700;line-height:1.3;text-align:left;white-space:normal;overflow:hidden;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 5px rgba(0,0,0,.65);-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:2.6em;background:transparent!important;background-image:none!important;border:none!important;border-radius:0!important;box-shadow:none!important;padding:0!important;white-space:pre-line!important;line-height:1.25!important;}#speakerBubbleA:not([hidden]),#speakerBubbleB:not([hidden]){display:-webkit-box;background:transparent!important;background-image:none!important;border:none!important;border-radius:0!important;box-shadow:none!important;padding:0!important;white-space:pre-line!important;line-height:1.25!important;}#speakerBubbleA{left:clamp(205px,20vw,330px);background:transparent!important;background-image:none!important;border:none!important;border-radius:0!important;box-shadow:none!important;padding:0!important;white-space:pre-line!important;line-height:1.25!important;}#speakerBubbleB{right:clamp(205px,20vw,330px);background:transparent!important;background-image:none!important;border:none!important;border-radius:0!important;box-shadow:none!important;padding:0!important;white-space:pre-line!important;line-height:1.25!important;}#speakerBubbleA:before,#speakerBubbleB:before{display:none!important;content:none!important;background:transparent!important;background-image:none!important;border:none!important;border-radius:0!important;box-shadow:none!important;padding:0!important;white-space:pre-line!important;line-height:1.25!important;}

/* GPTUBE_CLEAN_PRESENTATION_CONTRACT_V1_END */

/* GPTUBE_3233_PORTRAIT_FULL_COVER */
#privateSpeakerSlotA,
#privateSpeakerSlotB,
.speaker-slot {
  width:115px !important;
  height:170px !important;
  overflow:hidden !important;
  background:transparent !important;
}

#speakerVideoA,
#speakerVideoB,
#privateSpeakerSlotA video,
#privateSpeakerSlotB video,
.speaker-slot video {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  background:transparent !important;
}

/* GPTUBE_3233_SINGLE_BUBBLE_PRESENTATION_OWNER
   DOM speakerBubble = text data source only
   ProgramOut Canvas = only visible bubble renderer
*/
#speakerBubbleA,
#speakerBubbleB {
  display:none !important;
  visibility:hidden !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

#speakerBubbleA::before,
#speakerBubbleA::after,
#speakerBubbleB::before,
#speakerBubbleB::after {
  display:none !important;
  content:none !important;
}