/* Talking-avatar player. All selectors scoped to .yc-talk. */

.yc-talk {
  --yc-talk-fs-bg: Canvas;
  --yc-talk-fs-fg: CanvasText;
  box-sizing: border-box;
  width: min(100%, 360px);
  margin-inline: auto;
  direction: rtl;
  text-align: start;
  background: none;
  border: 0;
  box-shadow: none;
}

.yc-talk *,
.yc-talk *::before,
.yc-talk *::after {
  box-sizing: inherit;
}

.yc-talk [hidden] {
  display: none !important;
}

/* ---------- figure (always 3:4, never crops) ---------- */

.yc-talk-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
}

.yc-talk-figure img,
.yc-talk-figure canvas,
.yc-talk-figure video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}

/* Enhanced (JS) packed mode: the video only feeds the canvas. */
.yc-talk-ready:not(.yc-talk-fallback) .yc-talk-figure video {
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.yc-talk-has-frame .yc-talk-figure img[data-poster] {
  visibility: hidden;
}

/* Fallback: no canvas; with a native video the poster moves to video[poster]. */
.yc-talk-fallback .yc-talk-figure canvas,
.yc-talk-native .yc-talk-figure img[data-poster] {
  display: none;
}

/* ---------- controls ---------- */

.yc-talk-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.75rem;
}

.yc-talk button {
  flex: 1 1 auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0.5rem 0.875rem;
  font: inherit;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  color: inherit;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 0.5rem;
  cursor: pointer;
}

.yc-talk button:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.yc-talk button:focus-visible,
.yc-talk video:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.yc-talk button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px currentColor;
  font-weight: 700;
}

.yc-talk [data-restore] {
  width: 100%;
}

.yc-talk [data-status] {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
}

.yc-talk [data-status]:empty {
  margin: 0;
}

.yc-talk-note {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ---------- dark card context ---------- */

.card .yc-talk {
  --yc-talk-fs-bg: #121212;
  --yc-talk-fs-fg: #f5f5f5;
  color: #f5f5f5;
}

/* ---------- fullscreen: video + controls fit the viewport ---------- */

.yc-talk:fullscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  overflow: auto;
  background-color: var(--yc-talk-fs-bg);
  color: var(--yc-talk-fs-fg);
}

.yc-talk:fullscreen .yc-talk-panel {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.yc-talk:fullscreen .yc-talk-figure {
  flex: 1 1 0;
  aspect-ratio: auto;
  min-height: 12rem;
}

.yc-talk:fullscreen .yc-talk-controls,
.yc-talk:fullscreen [data-status],
.yc-talk:fullscreen .yc-talk-note {
  flex: 0 0 auto;
  width: min(100%, 40rem);
  margin-inline: auto;
}

/* ---------- forced colors ---------- */

@media (forced-colors: active) {
  .yc-talk button {
    border-color: ButtonText;
  }

  .yc-talk button:focus-visible,
  .yc-talk video:focus-visible {
    outline-color: Highlight;
  }
}