/* Voice Agent Quality Tracker page (quality-tracker.html): the widget
   frame over the whole viewport, the studio menu over its top bar. The
   page is the widget's dark ground from the first paint. */
@font-face {
  font-family: "ABC Areal";
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ABCAreal.woff2") format("woff2");
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: rgb(20, 20, 25);
}

.embed-frame {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgb(20, 20, 25);
  color-scheme: normal;
}

/* The studio menu: the DS icon menu button (components/menu-button.css,
   m__menu-button-icon — no outline, the plate shows only on hover or
   while open) and its list (m__menu-button-list / -item), compact, in the
   widget's dark theme and pixel scale. Hovers
   are the widget's own — the transcript bubble's: the ground lifts toward
   the border grey, the content turns white. Top right over the widget's
   top bar: right edge flush with the player, centered on the title
   (tracker.js sets both). */
.embed-studio {
  --embed-studio-right: 17.6px;
  --embed-studio-top: 12px;
  --embed-studio-hover: color-mix(in srgb, rgb(68, 68, 86) 55%, rgb(30, 30, 40));
  display: block;
  position: fixed;
  top: var(--embed-studio-top);
  right: var(--embed-studio-right);
  z-index: 1;
}
.embed-studio__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 5.5px;
  background-color: transparent;
  color: rgb(126, 126, 144); /* the widget's secondary text (--m__text-caption) */
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.embed-studio__toggle svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.embed-studio__toggle:hover,
.embed-studio:has(.embed-studio__menu:popover-open) .embed-studio__toggle {
  background-color: var(--embed-studio-hover);
  color: rgb(255, 255, 255);
  transition-duration: 0s;
}
.embed-studio__menu {
  position: fixed;
  inset: calc(var(--embed-studio-top) + 32px + 4px) var(--embed-studio-right) auto auto;
  margin: 0;
  min-width: 150px;
  padding: 4px;
  border: 1px solid rgb(68, 68, 86);
  border-radius: 9.6px;
  background-color: rgb(30, 30, 40);
  box-shadow: 0 4px 20px color-mix(in srgb, #000 22%, transparent);
  color: rgb(176, 176, 190);
  font-family: "ABC Areal", sans-serif;
  font-size: 15px;
  line-height: 1.3;
}
.embed-studio__menu fieldset { display: contents; }
.embed-studio__menu button {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.embed-studio__menu button:hover {
  background-color: var(--embed-studio-hover);
  color: rgb(255, 255, 255);
  transition-duration: 0s;
}