/* RTCOM dialogue bubble captions. Scoped to .rtcom-bubble.
 *
 * The bubble always sits BELOW the video frame, at every viewport width.
 * The video can live in a narrow sidebar on desktop, so an overlay would
 * cover faces. .rtcom-bubble-layer reserves a stable block of space so the
 * rest of the page does not jump as cues appear and disappear.
 */
.rtcom-bubble{
  margin:0;
  min-width:0;
  color:var(--paper,#f5f0e6);
  font-family:var(--sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
}
.rtcom-bubble-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.rtcom-bubble-stage video{
  display:block;
  order:1;
  width:100%;
  height:auto;
  border-radius:10px;
  background:#0c1e29;
}
.rtcom-bubble-layer{
  position:relative;
  order:2;
  z-index:1;
  display:flex;
  align-items:flex-start;
  min-height:7rem;
  margin-top:12px;
  padding:0;
}
.rtcom-bubble-bubble[hidden]{display:none}
.rtcom-bubble-bubble{
  position:relative;
  max-width:92%;
  padding:10px 14px 11px;
  border-radius:14px;
  background:var(--paper,#f5f0e6);
  color:var(--ink,#132a3a);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  font-size:clamp(15px,1.5vw,16.5px);
  line-height:1.45;
}
.rtcom-bubble-bubble.is-her{
  margin-right:auto;
  border-top-left-radius:5px;
}
.rtcom-bubble-bubble.is-him{
  margin-left:auto;
  border-top-right-radius:5px;
  background:#ffd9c9;
}
/* Small tail on top of the bubble, pointing up at the video frame. */
.rtcom-bubble-bubble::after{
  content:"";
  position:absolute;
  top:-8px;
  width:0;
  height:0;
  border:8px solid transparent;
  border-top:0;
  border-bottom-color:var(--paper,#f5f0e6);
}
.rtcom-bubble-bubble.is-her::after{left:22px}
.rtcom-bubble-bubble.is-him::after{right:22px;border-bottom-color:#ffd9c9}
.rtcom-bubble-speaker{
  display:block;
  margin-bottom:2px;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8b3c25;
}
.rtcom-bubble-text{margin:0;overflow-wrap:break-word}
.rtcom-bubble-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  min-height:34px;
  margin-top:6px;
}
.rtcom-bubble-label{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#e8d9c2;
}
.rtcom-bubble-audio{
  margin:0;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:9.5px;
  letter-spacing:.06em;
  color:#e8d9c2;
  opacity:.8;
}
.rtcom-bubble-audio[hidden]{display:none}
.rtcom-bubble-select{
  min-height:34px;
  max-width:100%;
  padding:5px 30px 5px 10px;
  border:1px solid rgba(245,240,230,.45);
  border-radius:8px;
  background:var(--ink,#132a3a);
  color:var(--paper,#f5f0e6);
  font:inherit;
  font-size:13.5px;
}
.rtcom-bubble-select:focus-visible{outline:3px solid var(--coral-soft,#e2643f);outline-offset:3px}
.rtcom-bubble-fullscreen{
  min-height:34px;
  padding:5px 12px;
  border:1px solid rgba(245,240,230,.45);
  border-radius:8px;
  background:transparent;
  color:var(--paper,#f5f0e6);
  font:inherit;
  font-size:13px;
  cursor:pointer;
}
.rtcom-bubble-fullscreen[hidden]{display:none}
.rtcom-bubble-fullscreen:hover{background:rgba(255,255,255,.08)}
.rtcom-bubble-fullscreen:focus-visible{outline:3px solid var(--coral-soft,#e2643f);outline-offset:3px}
.rtcom-bubble-status{
  flex:1 1 16rem;
  margin:0;
  font-size:12.5px;
  line-height:1.5;
  color:#f1b39f;
}
.rtcom-bubble-status[hidden]{display:none}
.rtcom-bubble-transcript{
  margin-top:10px;
  border:1px solid rgba(245,240,230,.24);
  border-radius:10px;
  background:rgba(255,255,255,.05);
  font-size:13px;
  line-height:1.55;
}
.rtcom-bubble-transcript[hidden]{display:none}
.rtcom-bubble-transcript summary{
  cursor:pointer;
  padding:8px 11px;
  color:#e8d9c2;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.rtcom-bubble-transcript summary:focus-visible{outline:3px solid var(--coral-soft,#e2643f);outline-offset:-3px;border-radius:8px}
.rtcom-bubble-transcript-list{
  margin:0;
  padding:0 11px 10px 28px;
  color:#e9e2d6;
  max-height:17rem;
  overflow:auto;
}
.rtcom-bubble-transcript-item{margin:0 0 6px}
.rtcom-bubble-transcript-speaker{
  display:inline-block;
  min-width:2.9em;
  margin-right:.45em;
  color:#f1b39f;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.rtcom-bubble-transcript-text{color:#e9e2d6}

/* Fullscreen is requested on the wrapper (not the video) so the bubble,
 * language selector and transcript stay visible over a dark background. */
.rtcom-bubble:fullscreen{
  display:flex;
  flex-direction:column;
  justify-content:center;
  justify-content:safe center;
  gap:10px;
  width:100%;
  height:100%;
  margin:0;
  padding:clamp(12px,2.4vw,28px);
  box-sizing:border-box;
  background:#07151e;
  overflow:auto;
}
.rtcom-bubble:fullscreen .rtcom-bubble-stage{
  flex:0 1 auto;
  width:100%;
  min-height:0;
  align-items:center;
}
.rtcom-bubble:fullscreen .rtcom-bubble-stage video{
  width:min(100%,calc((100vh - 18rem) * 16 / 9));
  max-height:calc(100vh - 18rem);
  margin:0 auto;
  object-fit:contain;
  border-radius:8px;
}
.rtcom-bubble:fullscreen .rtcom-bubble-layer{
  flex:0 0 auto;
  width:min(100%,64rem);
  min-height:6rem;
  margin:12px auto 0;
}
.rtcom-bubble:fullscreen .rtcom-bubble-bubble{
  font-size:clamp(18px,1.8vw,28px);
}
.rtcom-bubble:fullscreen .rtcom-bubble-speaker,
.rtcom-bubble:fullscreen .rtcom-bubble-label,
.rtcom-bubble:fullscreen .rtcom-bubble-audio{
  font-size:11px;
}
.rtcom-bubble:fullscreen .rtcom-bubble-select,
.rtcom-bubble:fullscreen .rtcom-bubble-fullscreen{
  font-size:15px;
}
.rtcom-bubble:fullscreen .rtcom-bubble-transcript{
  font-size:14px;
}
.rtcom-bubble:fullscreen .rtcom-bubble-transcript summary{
  font-size:11px;
}
.rtcom-bubble:fullscreen .rtcom-bubble-tools,
.rtcom-bubble:fullscreen .rtcom-bubble-transcript{
  flex:0 0 auto;
  width:min(100%,64rem);
  margin-left:auto;
  margin-right:auto;
}
/* In portrait the width-limited video would shrink to a thumbnail; keep the
 * frame tall enough to read while the bubbles, tools and closed transcript
 * remain below it. */
@media (max-width:640px) and (orientation:portrait){
  .rtcom-bubble:fullscreen .rtcom-bubble-stage video{
    width:100%;
    min-height:min(42vh,16rem);
    max-height:60vh;
  }
}