/* ---------------------------------------------------------------------------
   UneeQ Hosted SDK UI compatibility layer (boston-uni-maria)

   The in-call chrome (mic button, end button, indicator) matches the
   UneeQ Hosted Experience's own conventions, taken from
   https://cdn.uneeq.io/hosted-experience/ (build 91459c4b):

     - Icons: Material Icons Outlined woff2 served by the SDK from
       fonts.gstatic.com (the SDK's mat-icon uses 'mic' / 'mic_off'
       ligatures for the recording controls). We load the exact same
       font file and class so the glyphs are pixel-identical.
     - Font: Roboto, sans-serif (the SDK's app font), with the system
       stack as the mobile-friendly fallback.
     - Breakpoints: max-width 599px (SDK small-screen), orientation
       landscape, hover:none, prefers-reduced-motion — the four media
       queries the SDK bundle actually contains.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v109/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcel5euIg.woff2) format('woff2');
}

.mat-icon {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Mobile-friendly app font: SDK is Roboto; on iOS this resolves to
   Roboto if loaded, else SF Pro — both average-weight system faces. */
:root {
  --app-font: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body { font-family: var(--app-font); }

/* ---------- Top controls: edge-justified, clear of the face ---------- */
#micBtn {
  position: fixed;
  top: calc(var(--safe-top) + 12px);
  left: calc(var(--safe-left) + 12px);
  z-index: 100001;
}
#exitBtn {
  position: fixed;
  top: calc(var(--safe-top) + 12px);
  right: calc(var(--safe-right) + 12px);
  z-index: 100001;
}

/* Both top buttons share one visual weight (SDK mat-mini-fab sizing:
   ~40px circle, 24px icon on desktop). They sit in the corner margins,
   above the avatar's crown — the loose close-up keeps the face lower.
   Hidden until the call is active (body.call-active) so they fade in
   with the dock instead of popping in during the landing fade. */
#micBtn, #exitBtn {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  border: none;
  color: #fff;
  background: rgba(28, 28, 30, 0.68);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease, transform 150ms ease, background 200ms ease;
}
body.call-active #micBtn, body.call-active #exitBtn { opacity: 1; pointer-events: auto; }
#micBtn .mat-icon, #exitBtn .mat-icon { width: 24px; height: 24px; font-size: 24px; }
#micBtn:hover, #exitBtn:hover { background: rgba(28, 28, 30, 0.85); }
#micBtn:active, #exitBtn:active { transform: scale(0.93); }

#exitBtn { background: rgba(204, 0, 0, 0.92); }   /* BU maroon red */
#exitBtn:hover { background: #a30000; }

/* Muted state: swap to the SDK's mic_off glyph, dim the button. */
#micBtn .icon-mic-on { display: none; }
#micBtn .icon-mic-off { display: none; }
#micBtn .icon-x { display: none; }
#micBtn:not(.muted) .icon-mic-on { display: inline-block; }
#micBtn.muted .icon-mic-off { display: inline-block; }
#micBtn.muted { background: rgba(120, 18, 18, 0.85); }

/* ---------- Bottom center: indicator pill + transcript ---------- */
#talkDock {
  position: fixed;
  bottom: calc(var(--safe-bottom) + 24px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(560px, calc(100vw - 32px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
#talkDock.visible { opacity: 1; }

#captionBar {
  position: static;          /* lives inside #talkDock now */
  transform: none;
  width: 100%;
  text-align: center;
  max-width: 100%;
}

/* ---------- SDK breakpoints ---------- */
/* Small screens (SDK: max-width 599px): bigger touch targets, tighter fit. */
@media (max-width: 599px) {
  #micBtn, #exitBtn {
    width: 44px; height: 44px;
    top: calc(var(--safe-top) + 10px);
  }
  #micBtn { left: calc(var(--safe-left) + 10px); }
  #exitBtn { right: calc(var(--safe-right) + 10px); }
  #micBtn .mat-icon, #exitBtn .mat-icon { width: 22px; height: 22px; font-size: 22px; }
  #talkDock { bottom: calc(var(--safe-bottom) + 18px); }
}

/* Landscape: avatar shifts right in the SDK layout; keep controls
   clear of the face and the dock from the bottom glass edge. */
@media screen and (orientation: landscape) {
  #micBtn, #exitBtn { top: calc(var(--safe-top) + 8px); }
  #talkDock { bottom: calc(var(--safe-bottom) + 10px); }
}

/* Touch devices: no hover states. */
@media (hover: none) {
  #micBtn, #exitBtn { background: rgba(28, 28, 30, 0.78); }
  #exitBtn { background: rgba(204, 0, 0, 0.95); }
}

@media (prefers-reduced-motion: reduce) {
  #micBtn, #exitBtn, #talkDock, #talkPill .dot { transition: none; animation: none !important; }
}