/* Meeting mode (/?meeting=<token>, app.js): the page is a Recall.ai bot's
   camera in a Zoom / Meet call. Recall renders it at a fixed 1280x720, and
   the call shows it letterboxed on a phone (small) or cropped to the centre
   in grid tiles. So everything sits in one centre column, no wider than the
   frame is tall: the mascot's photo as big as the height allows, its name and
   the "recording" notice on a strip across the top of the photo, the reply
   being spoken as a subtitle across its lower part, and the status under it.
   No controls, no telemetry, no chat history. Scoped to :root[data-meeting]. */

:root[data-meeting] body { padding-right: 0 !important; }
:root[data-meeting] .tele,
:root[data-meeting] .dock,
:root[data-meeting] .model-switch,
:root[data-meeting] .sheet,
:root[data-meeting] .hint-start,
:root[data-meeting] .brand { display: none !important; }
:root[data-meeting] .rules { right: 0 !important; }
:root[data-meeting] .rules::before { display: none; }

:root[data-meeting] .stage {
  max-width: none; height: 100vh; margin: 0; padding: 0;
  display: grid; grid-template: 1fr / 1fr; place-items: center;
}
:root[data-meeting] .stage > * { grid-area: 1 / 1; }

/* the photo: the subject of the frame */
:root[data-meeting] .orb-wrap { width: auto; height: auto; padding: 0; }
:root[data-meeting] .photo { padding: 12px 12px 0; transform: rotate(-1deg); }
:root[data-meeting] .stage[data-phase="speaking"] .photo { transform: rotate(-.4deg); }
:root[data-meeting] .photo::before, :root[data-meeting] .photo::after { width: 110px; height: 30px; }
:root[data-meeting] .photo figcaption { height: 52px; font-size: 32px; }
:root[data-meeting] .doodle { transform: scale(1.6); }
:root[data-meeting] .doodle.search { right: -80px; }
:root[data-meeting] .doodle.talk, :root[data-meeting] .doodle.listen { left: -72px; }

/* name + recording notice: a strip across the top of the photo */
.meet-head, .meet-hint { display: none; }
:root[data-meeting] .meet-head {
  display: flex; align-items: center; gap: 14px; z-index: 3;
  align-self: start; margin-top: calc(50vh - var(--photo-h) / 2 + 12px);
  max-width: calc(var(--orb-box) - 24px); padding: 8px 18px 9px;
  background: rgba(255, 255, 255, .92); border-radius: 0 0 16px 16px;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .35); white-space: nowrap;
}
:root[data-meeting] .meet-name { font: 400 44px/1 var(--hand); color: var(--ink); }
:root[data-meeting] .meet-role { font: 500 19px/1.2 var(--stack, Inter, sans-serif); color: #222; }
:root[data-meeting] .meet-rec {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px 6px; border-radius: 16px; background: #fdecea;
  font: 600 16px/1 var(--stack, Inter, sans-serif); color: #b42318;
}
:root[data-meeting] .meet-rec i {
  width: 10px; height: 10px; border-radius: 50%; background: #e0261b;
  animation: rec-blink 1.6s ease-in-out infinite;
}
@keyframes rec-blink { 50% { opacity: .25; } }

/* the reply being spoken: a subtitle across the lower part of the photo,
   newest lines kept in view */
:root[data-meeting] .captions {
  z-index: 3; align-self: end; contain: none; overflow: hidden;
  margin-bottom: calc(50vh - var(--photo-h) / 2 + 66px);
  width: calc(var(--orb-box) - 40px); max-height: 152px; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  -webkit-mask-image: none; mask-image: none;
  font: 500 28px/1.3 var(--stack, Inter, sans-serif);
}
:root[data-meeting] .chat-list { justify-content: flex-end; min-height: 0; }
:root[data-meeting] .captions .say { display: none; }
:root[data-meeting] .captions .say.assistant.live {
  display: block; max-width: 100%; margin: 0; padding: 10px 18px 12px; border-radius: 18px;
  background: rgba(255, 255, 255, .94); color: #111; border: 0;
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .45);
}
:root[data-meeting] .captions .say.live::after { content: none; }
:root[data-meeting] .captions .say[data-emo]::before { font-size: 26px; top: -14px; left: -10px; }

/* nothing being said: how to talk to it, in the same spot */
:root[data-meeting] .meet-hint {
  display: block; z-index: 3; align-self: end;
  margin-bottom: calc(50vh - var(--photo-h) / 2 + 70px);
  padding: 4px 16px 6px; border-radius: 12px; background: rgba(255, 255, 255, .88);
  font: 400 34px/1.2 var(--hand); color: var(--ink); white-space: nowrap;
  transition: opacity .3s ease;
}
:root[data-meeting] .stage:has(.captions .say.assistant.live) .meet-hint { opacity: 0; }

/* the notebook's margin line runs down the left edge, away from the subject */
:root[data-meeting] .rules {
  background:
    linear-gradient(var(--margin-line), var(--margin-line)) 22px 0 / 1.5px 100% no-repeat,
    linear-gradient(var(--margin-line), var(--margin-line)) 27px 0 / 1px 100% no-repeat,
    repeating-linear-gradient(transparent 0 calc(var(--line-h) - 1px), var(--rule-line) calc(var(--line-h) - 1px) var(--line-h));
}