/* ═══════════════════════════════════════════════════════════════════
   Digital Human Companion — Video-first, full-screen digital human
   Route: /companion
   The digital-human VIDEO is the protagonist; a graceful figure serves
   as the poster while the video generates.
   ═══════════════════════════════════════════════════════════════════ */

/* Legacy mobile-poster primitives. The consultation workspace below owns the
   final layout and deliberately overrides this isolated compatibility layer. */
@layer fy-legacy-companion {
/* ── Shell ── */
.fy-companion-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--fluid-shell-pad) * 2 - 40px);
  max-width: 460px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3) var(--space-3);
  text-align: center;
}

#app .fy-companion-shell {
  max-width: 460px;
}

/* ── Header ── */
.fy-companion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
}

.fy-companion-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fy-companion-logo {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--color-brand-500), var(--color-brand-800));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: var(--weight-black);
  font-size: 17px;
}

.fy-companion-name {
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--color-ink);
}

/* Risk chip */
.fy-risk-chip {
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  background: var(--color-risk-low-bg);
  color: var(--color-risk-low);
}

.fy-risk-chip.medium { background: var(--color-risk-medium-bg); color: var(--color-risk-medium); }
.fy-risk-chip.high,
.fy-risk-chip.critical { background: var(--color-risk-high-bg); color: var(--color-risk-high); }

/* ── Stage ── */
.fy-companion-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 0;
  padding: var(--space-2) 0;
}
}

/* ═══════════════════════════════════════════════════════════════════
   UI 2.0 — 快速沟通页：结果解释工作台 (Issue 05)
   双栏：左=数字人 Panel(320~360px)，右=解释区。保留全部 bind DOM 钩子。
   ═══════════════════════════════════════════════════════════════════ */

.fy-companion-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--shell-header-h) - 96px);
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

#app .fy-companion-shell {
  max-width: 1120px;
}

.fy-companion-head {
  display: none; /* 页头由统一 fy-page-header 承担 */
}

.fy-companion-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.36fr) minmax(0, 0.64fr);
  gap: var(--sp-6);
  align-items: start;
  flex: 1;
  min-height: 0;
  padding: var(--sp-6) 0;
}

/* 数字人 Panel：控制高度，不再占满页面 */
.fy-companion-left {
  position: sticky;
  top: calc(var(--shell-header-h) + var(--sp-4));
}

.fy-video-stage {
  max-width: 340px;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 420px;
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, var(--brand-800) 0%, var(--brand-900) 100%);
  box-shadow: var(--shadow-card);
  margin: 0 auto;
}

/* 解释区：当前判断 / 为什么 / 建议先做 */
.fy-companion-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
  max-height: 460px;
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.fy-explanation {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.fy-explanation-block {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--primary-600, #2F62BE);
  border-radius: var(--radius-m);
  background: var(--primary-050, var(--surface-soft));
}

.fy-explanation-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.fy-explanation-main {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--text-primary);
}

.fy-explanation-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.fy-explanation-steps li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--border-default);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

.fy-ex-step-num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-700);
  color: var(--text-inverse);
  font-size: var(--fs-caption);
  font-weight: 600;
}

/* 字幕区靠左，克制 */
.fy-companion-subtitle {
  text-align: left;
}

.fy-companion-subtitle-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

/* 行动卡（旧钩子）保持工作台风格 */
.fy-companion-action-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.fy-companion-steps li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 48px;
}

.fy-step-badge {
  width: 28px;
  height: 28px;
  background: var(--brand-700);
  color: var(--text-inverse);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-caption);
  font-weight: 600;
}

/* 底部动作：主次分明 (方案 §8.6) */
.fy-companion-controls {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-default);
}

.fy-companion-post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.fy-companion-action-btn {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text-primary);
  font-size: var(--fs-body);
  cursor: pointer;
}

.fy-companion-action-btn.primary {
  background: var(--accent-600);
  border-color: var(--accent-600);
  color: var(--text-inverse);
  font-weight: 600;
}

.fy-companion-action-btn.primary:hover { background: var(--accent-700); }

.fy-companion-action-btn:hover { background: var(--bg-subtle); }

/* 按住说话主按钮 — #UI 克制蓝，64px */
.fy-companion-speak-btn {
  width: 100%;
  max-width: 340px;
  min-height: 64px;
  border: none;
  border-radius: var(--radius-m);
  background: #365FB9;
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--ease-out);
}

.fy-companion-speak-btn:hover { background: #3157A9; }
.fy-companion-speak-btn:active { background: #294B95; }

/* ── 响应式 (方案 §14) ── */
@media (min-width: 1024px) and (max-width: 1279px) {
  .fy-companion-layout {
    grid-template-columns: minmax(280px, 300px) minmax(0, 1fr);
    gap: var(--sp-5);
  }
}

@media (max-width: 1023px) {
  .fy-companion-layout {
    grid-template-columns: 1fr;
  }
  .fy-companion-left {
    position: static;
    order: -1;
  }
  .fy-video-stage {
    max-width: 300px;
  }
}

/* ── Video stage (AI 数字人面板：Deep Navy + 极弱蓝色光) ── */
.fy-video-stage {
  position: relative;
  width: 100%;
  max-width: 400px;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(71, 121, 212, 0.10) 0, rgba(71, 121, 212, 0.035) 36%, transparent 68%),
    linear-gradient(180deg, var(--nav-800, #17314B) 0%, var(--nav-900, #10243A) 100%);
  box-shadow: var(--shadow-float);
}

.fy-video-ratio {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
}

/* The video covers the stage when ready */
.fy-companion-avatar-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  background: #132622;
}

/* ── Figure (poster while the video generates) ── */
.fy-video-figure {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
  transition: opacity 0.4s ease;
}

.fy-video-figure.is-hidden { opacity: 0; pointer-events: none; }

.fy-video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fy-dh-figure {
  position: relative;
  width: 46%;
  max-width: 168px;
}

.fy-dh-halo {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(71, 121, 212, 0.18), transparent 70%);
  animation: dh-halo 4s ease-in-out infinite;
}

@keyframes dh-halo {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.04); opacity: 0.85; }
}

.fy-dh-body {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 70% 82%, rgba(255, 186, 120, 0.5), rgba(255, 186, 120, 0) 48%),
    linear-gradient(145deg, #ffd3a7 0%, #ff9d5c 44%, #e2683a 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4), inset 0 3px 8px rgba(255, 255, 255, 0.5);
}

.fy-dh-eye {
  position: absolute;
  top: 38%;
  width: 9%;
  height: 13%;
  border-radius: 50%;
  background: #4a2812;
  animation: dh-blink 4.4s ease-in-out infinite;
}

.fy-dh-eye-l { left: 28%; }
.fy-dh-eye-r { right: 28%; }

@keyframes dh-blink {
  0%, 88%, 94%, 100% { transform: scaleY(1); }
  91% { transform: scaleY(0.12); }
}

.fy-dh-mouth {
  position: absolute;
  bottom: 29%;
  left: 42.5%;
  width: 15%;
  height: 7%;
  border-bottom: 3px solid #6e341a;
  border-radius: 0 0 50% 50%;
  transform-origin: center;
}

.fy-dh-orbit {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffb056;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fy-dh-orbit-a { top: 5%; left: 50%; margin-left: -7px; }
.fy-dh-orbit-b { bottom: 10%; left: 12%; }
.fy-dh-orbit-c { bottom: 10%; right: 12%; }

@keyframes dh-float {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-14px); opacity: 1; }
}

/* Idle: gentle breathing */
.fy-companion-shell[data-state="idle"] .fy-dh-body,
.fy-companion-shell[data-state="showing_card"] .fy-dh-body {
  animation: dh-breathe 3.6s ease-in-out infinite;
}

@keyframes dh-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Listening: ring pulse + orbits */
.fy-companion-shell[data-state="listening"] .fy-dh-body {
  animation: dh-breathe 1.6s ease-in-out infinite;
}

/* Processing: orbiting dots float */
.fy-companion-shell[data-state="processing"] .fy-dh-orbit,
.fy-companion-shell[data-state="confirming"] .fy-dh-orbit {
  opacity: 1;
  animation: dh-float 1.6s ease-in-out infinite;
}

.fy-companion-shell[data-state="processing"] .fy-dh-orbit-b,
.fy-companion-shell[data-state="confirming"] .fy-dh-orbit-b { animation-delay: 0.3s; }
.fy-companion-shell[data-state="processing"] .fy-dh-orbit-c,
.fy-companion-shell[data-state="confirming"] .fy-dh-orbit-c { animation-delay: 0.6s; }

/* Speaking (no video yet): mouth moves */
.fy-companion-shell[data-state="speaking"] .fy-dh-mouth {
  height: 10%;
  animation: dh-mouth 0.45s ease-in-out infinite;
}

@keyframes dh-mouth {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1.5); }
}

/* ── Video stage chrome ── */
.fy-v-label {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 3;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.35);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.fy-v-badge {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.fy-v-badge.waiting { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); }
.fy-v-badge.listening { background: rgba(197, 48, 48, 0.85); color: #fff; }
.fy-v-badge.generating { background: rgba(255, 176, 86, 0.25); color: #ffcf8f; }
.fy-v-badge.playing { background: rgba(64, 170, 120, 0.85); color: #fff; }
.fy-v-badge.done { background: rgba(64, 196, 130, 0.25); color: #7fe0ad; }

.fy-v-chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
}

.fy-v-chrome.is-hidden { display: none; }
.fy-video-ratio:not(:has(.fy-companion-avatar-video)) .fy-v-chrome { display: none; }

.fy-v-playpill {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
  color: var(--color-brand-800);
  font-size: 15px;
}

.fy-v-bar {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.fy-v-bar i { display: block; width: 55%; height: 100%; background: #fff; }

.fy-v-time {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-xs);
}

/* ── Subtitle ── */
.fy-companion-subtitle {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(25, 38, 43, 0.1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fy-companion-subtitle-text {
  font-family: var(--font-display);
  font-size: clamp(20px, 4.6vw, 26px);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin: 0;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
}

/* ── Action card ── */
.fy-companion-action-card {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--color-brand-200);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(254, 247, 240, 0.92), rgba(255, 255, 255, 0.85));
  text-align: left;
  animation: fy-rise 0.35s ease both;
}

.fy-companion-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.fy-companion-card-header strong {
  font-size: var(--text-base);
  color: var(--color-brand-800);
}

.fy-companion-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.fy-companion-steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.7);
}

.fy-step-badge {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--color-brand-700);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
}

.fy-companion-steps li span:last-child {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  padding-top: 1px;
}

/* ── Controls ── */
.fy-companion-controls {
  flex-shrink: 0;
  width: 100%;
  padding: var(--space-3) 0 var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.fy-companion-idle-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}

/* 语音主操作：横向 Voice Action (UI 2.1，方案 §10 P0)
   替代原巨大圆形按钮。Brand Green 主色，Mic 少量 Accent。 */
.fy-companion-speak-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: min(320px, 100%);
  height: 68px;
  padding: 0 var(--sp-6);
  border: none;
  border-radius: var(--radius-m);
  background: var(--primary-600, #2F62BE);
  color: var(--text-inverse);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--ease-out), box-shadow var(--ease-out);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.fy-companion-speak-btn:hover {
  background: var(--primary-700, #244F9E);
}

.fy-companion-speak-btn:active,
.fy-companion-speak-btn.is-pressed {
  background: var(--brand-900);
}

.fy-companion-speak-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.fy-companion-speak-btn .fy-speak-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-500);
}

.fy-companion-speak-btn .fy-speak-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fy-speak-label {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
}

.fy-speak-hint {
  font-size: var(--fs-body-s);
  color: rgba(255, 255, 255, 0.78);
}

.fy-companion-alt-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: flex-start;
}

.fy-companion-alt-btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(25, 38, 43, 0.1);
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--ease-out), color var(--ease-out);
}

.fy-companion-alt-btn:hover { background: var(--color-paper); color: var(--color-ink); }
.fy-companion-alt-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ── Processing ── */
.fy-companion-processing {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.fy-companion-progress-bar {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(25, 38, 43, 0.06);
  overflow: hidden;
}

.fy-companion-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-brand-500), var(--color-brand-700));
  width: 0%;
  transition: width 0.4s ease;
}

.fy-companion-progress-text { font-size: var(--text-base); color: var(--color-ink-soft); margin: 0; }

/* ── Post-speech actions ── */
.fy-companion-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
  width: 100%;
}

.fy-companion-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-3) var(--space-5);
  border: 1.5px solid rgba(25, 38, 43, 0.1);
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--color-ink);
  font-size: var(--text-base);
  font-family: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--ease-out), border-color var(--ease-out), transform var(--ease-out);
  min-height: 54px;
}

.fy-companion-action-btn:hover {
  background: var(--color-paper-light);
  border-color: var(--color-brand-300);
  transform: translateY(-1px);
}

.fy-companion-action-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.fy-companion-action-btn.primary {
  background: var(--color-brand-700);
  color: #fff;
  border-color: var(--color-brand-700);
}

.fy-companion-action-btn.primary:hover { background: var(--color-brand-800); }

.fy-companion-action-print {
  border-color: transparent;
  background: transparent;
  color: var(--color-ink-muted);
  font-weight: var(--weight-regular);
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* ── State: Listening (record pulse) ── */
.fy-companion-shell[data-state="listening"] .fy-companion-speak-btn {
  background: var(--danger, #B34747);
  animation: pulse-record 1.5s ease-in-out infinite;
}

@keyframes pulse-record {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179, 71, 71, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(179, 71, 71, 0); }
}

.fy-companion-shell[data-state="listening"] .fy-speak-icon {
  animation: mic-pulse 1s ease-in-out infinite;
}

/* ── 录音波形 (UI 2.2)：低振幅圆角竖线，仅 listening 显示 ── */
.fy-waveform {
  display: none;
  align-items: center;
  gap: 3px;
  height: 22px;
  margin-left: auto;
}

.fy-waveform i {
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  height: 6px;
  animation: fy-wave 1s ease-in-out infinite;
}
.fy-waveform i:nth-child(2) { animation-delay: 0.12s; }
.fy-waveform i:nth-child(3) { animation-delay: 0.24s; }
.fy-waveform i:nth-child(4) { animation-delay: 0.36s; }
.fy-waveform i:nth-child(5) { animation-delay: 0.48s; }
.fy-waveform i:nth-child(6) { animation-delay: 0.6s; }
.fy-waveform i:nth-child(7) { animation-delay: 0.72s; }

@keyframes fy-wave {
  0%, 100% { height: 6px; }
  50% { height: 20px; }
}

.fy-companion-shell[data-state="listening"] .fy-waveform { display: inline-flex; }

/* Reduce Motion：波形静态（方案 §12） */
@media (prefers-reduced-motion: reduce) {
  .fy-waveform i { animation: none; height: 10px; }
}
body.fy-reduced-motion .fy-waveform i { animation: none; height: 10px; }

.fy-companion-shell[data-state="listening"] .fy-speak-hint { font-size: 0; }
.fy-companion-shell[data-state="listening"] .fy-speak-hint::after {
  content: "正在听…";
  font-size: var(--fs-body-s);
  color: rgba(255, 255, 255, 0.85);
}

@keyframes mic-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

/* ── Voice recorder hidden (internal controller) ── */
.fy-companion-shell #senior-voice-recorder {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ── Responsive ── */
@media (max-width: 940px) {
  .fy-companion-shell {
    padding: var(--space-2);
    min-height: calc(100dvh - 200px);
    max-width: 100%;
  }
}

/* UI 3.0: the companion is a calm guide, not a decorative AI demo. */
.fy-dh-halo,
.fy-dh-orbit { display: none; }
.fy-video-stage {
  background: linear-gradient(155deg, var(--nav-900), var(--nav-950));
  border: 1px solid rgba(255,255,255,.12);
}
.fy-companion-progress-fill { background: var(--primary-500); }
.fy-companion-action-btn.primary { background: var(--primary-600); border-color: var(--primary-600); }
.fy-companion-action-btn.primary:hover { background: var(--primary-700); }
html[data-font-scale="large"] .fy-companion-shell { min-height: auto; }
html[data-font-scale="large"] .fy-companion-speak-btn { height: auto; min-height: 76px; }

/* UI 3.1: consultation workspace inspired by a studio console, adapted for
   one clear job: listen, explain, and take the next safe step. */
.fy-companion-shell,
#app .fy-companion-shell {
  max-width: 1440px;
}

.fy-companion-layout {
  grid-template-columns: minmax(0, 1fr) 318px;
  gap: 0;
  padding: var(--sp-4) 0 var(--sp-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-l);
  background-color: var(--surface);
  background-image: radial-gradient(var(--border-strong) 1px, transparent 1px);
  background-size: 30px 30px;
  overflow: hidden;
}

.fy-companion-main {
  display: grid;
  grid-template-columns: minmax(290px, .72fr) minmax(360px, 1.28fr);
  gap: var(--sp-6);
  align-items: start;
  min-width: 0;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
}

.fy-companion-left {
  position: sticky;
  top: calc(var(--shell-header-h) + var(--sp-4));
}

.fy-video-stage {
  max-width: 390px;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-float);
}

.fy-companion-right {
  max-height: none;
  min-height: 580px;
  padding: var(--sp-5);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-card);
}

.fy-companion-workspace {
  min-height: 100%;
  border-left: 1px solid var(--border-default);
  background: var(--surface);
}

.fy-workspace-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 52px;
  border-bottom: 1px solid var(--border-default);
}

.fy-workspace-tabs span {
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  font-size: var(--fs-label);
  font-weight: 600;
}

.fy-workspace-tabs .is-active {
  color: var(--primary-700);
  box-shadow: inset 0 -2px var(--primary-600);
}

.fy-workspace-section {
  padding: var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
}

.fy-workspace-kicker {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--text-primary);
}

.fy-workspace-avatar,
.fy-workspace-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 66px;
  padding: var(--sp-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--text-primary);
  text-align: left;
}

.fy-workspace-avatar-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-100);
  color: var(--primary-700);
}

.fy-workspace-avatar strong,
.fy-workspace-option strong { display: block; font-size: var(--fs-body-s); }
.fy-workspace-avatar small,
.fy-workspace-option small { display: block; margin-top: 2px; color: var(--text-secondary); font-size: var(--fs-caption); line-height: 1.4; }
.fy-workspace-ready { margin-left: auto; color: var(--success); font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; }

.fy-workspace-option { margin-top: var(--sp-2); font: inherit; cursor: pointer; }
.fy-workspace-option.is-selected { border-color: var(--primary-600); background: var(--primary-050); }
.fy-workspace-option.is-selected > span:first-child { color: var(--primary-700); }
.fy-workspace-link { transition: border-color var(--ease-out), background var(--ease-out); }
.fy-workspace-link:hover { border-color: var(--primary-500); background: var(--surface-soft); }
.fy-workspace-link:focus-visible,
.fy-workspace-history-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.fy-workspace-history p { margin: 0 0 var(--sp-3); color: var(--text-secondary); font-size: var(--fs-body-s); line-height: var(--lh-body); }
.fy-workspace-history-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: var(--primary-700); font: inherit; font-size: var(--fs-body-s); font-weight: 600; cursor: pointer; }

@media (max-width: 1180px) {
  .fy-companion-layout { grid-template-columns: 1fr; }
  .fy-companion-workspace { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-default); border-left: 0; }
  .fy-workspace-tabs { display: none; }
  .fy-workspace-section { border-right: 1px solid var(--border-subtle); border-bottom: 0; }
  .fy-workspace-section:last-child { border-right: 0; }
}

@media (max-width: 760px) {
  .fy-companion-layout { border-radius: var(--radius-m); background-image: none; }
  .fy-companion-main { grid-template-columns: 1fr; padding: var(--sp-4); }
  .fy-companion-left { position: static; }
  .fy-video-stage { max-width: 340px; }
  .fy-companion-right { min-height: 0; }
  .fy-companion-workspace { grid-template-columns: 1fr; }
  .fy-workspace-section { border-right: 0; border-bottom: 1px solid var(--border-subtle); }
}

@media (max-width: 540px) {
  .fy-companion-shell {
    min-height: calc(100dvh - 170px);
  }

  .fy-companion-stage { gap: var(--space-3); }

  .fy-companion-subtitle { padding: var(--space-3) var(--space-4); min-height: 56px; }
  .fy-companion-subtitle-text { font-size: 18px; }

  .fy-companion-post-actions { flex-direction: column; align-items: stretch; }
  .fy-companion-action-btn { justify-content: center; min-height: 50px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .fy-dh-halo,
  .fy-dh-eye,
  .fy-dh-body,
  .fy-dh-orbit,
  .fy-dh-mouth,
  .fy-companion-shell[data-state="listening"] .fy-companion-speak-btn,
  .fy-companion-shell[data-state="listening"] .fy-speak-icon {
    animation: none;
  }
}

/* UI 3.2: the reference's essential composition is a centred stage, not a
   dashboard of equal panels. Keep the stage visually dominant. */
.fy-companion-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) clamp(var(--sp-5), 4vw, var(--sp-8)) var(--sp-6);
}

.fy-companion-mode-switch {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.fy-companion-mode-switch > * {
  min-width: 104px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--fs-body-s);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.fy-companion-mode-switch .is-active {
  background: var(--primary-600);
  color: var(--text-inverse);
}

.fy-companion-mode-switch a:hover { background: var(--surface-soft); color: var(--primary-700); }
.fy-companion-mode-switch a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.fy-companion-left {
  position: static;
  width: 100%;
}

.fy-video-stage { max-width: 386px; }

.fy-companion-right {
  width: min(800px, 100%);
  min-height: 0;
  max-height: none;
  padding: var(--sp-5);
}

.fy-companion-controls {
  align-items: stretch;
}

.fy-companion-idle-area { align-items: stretch; }
.fy-companion-speak-btn { width: 100%; }
.fy-companion-alt-actions { justify-content: center; }

.fy-workspace-tabs span,
.fy-workspace-tabs a {
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  font-size: var(--fs-label);
  font-weight: 600;
  text-decoration: none;
}

.fy-workspace-tabs a:hover { color: var(--primary-700); background: var(--surface-soft); }
.fy-workspace-tabs a:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--focus-ring-color); }

@media (max-width: 760px) {
  .fy-companion-main { padding: var(--sp-4); }
  .fy-companion-mode-switch > * { min-width: 96px; }
  .fy-companion-right { padding: var(--sp-4); }
}

/* UI 3.3: isolated avatar console. These selectors intentionally do not
   inherit the previous companion grid, so the desktop composition stays
   stable at ordinary laptop widths. */
.fy-avatar-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  max-width: 1120px;
  min-height: 620px;
  margin: 0 auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.fy-console-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: var(--sp-5) clamp(var(--sp-5), 4vw, 64px) var(--sp-6);
  background-color: var(--surface);
  background-image: radial-gradient(color-mix(in srgb, var(--primary-100) 22%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
}

.fy-console-stage {
  display: grid;
  width: 100%;
  min-height: 380px;
  place-items: center;
  padding: var(--sp-5) 0 var(--sp-4);
}

.fy-console-stage .fy-video-stage {
  width: min(100%, 386px);
  max-width: 386px;
  margin: 0;
}

.fy-console-dialogue {
  width: min(100%, 800px);
  padding: var(--sp-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: none;
}

.fy-console-dialogue .fy-explanation { gap: var(--sp-3); }
.fy-console-dialogue .fy-explanation-block { padding: var(--sp-3) var(--sp-4); }
.fy-console-dialogue .fy-companion-subtitle { margin-top: var(--sp-3); }
.fy-console-dialogue .fy-companion-controls { padding-bottom: 0; }

.fy-avatar-console > .fy-companion-workspace {
  display: block;
  min-width: 0;
  border-top: 0;
  border-left: 1px solid var(--border-default);
  background: var(--surface);
}

.fy-avatar-console .fy-workspace-tabs { display: grid; }

/* Keep the voice-first choice focused without hiding the text alternative.
   A user who cannot or does not want to use a microphone needs to be able to
   find the fallback from the same workspace. */
.fy-avatar-console .fy-workspace-section:nth-of-type(2) { display: block; }
.fy-video-stage { background: radial-gradient(circle at 50% 42%, rgba(86,118,230,.12), transparent 46%), #102036; box-shadow: none; }
.fy-console-stage .fy-video-stage { max-width: 340px; }
.fy-companion-subtitle-text { font-family: var(--font-body); font-size: 20px; line-height: 1.6; font-weight: 500; }
.fy-companion-speak-btn { width: min(320px, 100%); height: 64px; border-radius: 12px; background: var(--primary-600); }
.fy-companion-speak-btn:hover { background: var(--primary-700); }
.fy-explanation-block { background: var(--surface-soft); border-left: 3px solid var(--primary-600); }
html[data-font-scale="large"] .fy-companion-subtitle-text { font-size: 23px; line-height: 1.56; }

@media (max-width: 920px) {
  .fy-avatar-console { grid-template-columns: 1fr; min-height: 0; }
  .fy-avatar-console > .fy-companion-workspace { border-top: 1px solid var(--border-default); border-left: 0; }
  .fy-avatar-console .fy-workspace-tabs { display: grid; }
  .fy-avatar-console .fy-workspace-section { border-right: 0; border-bottom: 1px solid var(--border-subtle); }
}

@media (max-width: 600px) {
  .fy-avatar-console { border-radius: var(--radius-m); }
  .fy-console-center { padding: var(--sp-4); background-image: none; }
  .fy-console-stage { min-height: 0; padding: var(--sp-4) 0; }
  .fy-console-stage .fy-video-stage { width: min(100%, 340px); }
  .fy-console-dialogue { padding: var(--sp-4); border-radius: var(--radius-m); }
}

/* Application-scale companion workspace. The recorder is an internal
   controller on this route, never a second visible page below the console. */
#app:has(.fy-companion-shell) > * { max-width: none; margin-inline: 0; }
.fy-companion-shell, #app .fy-companion-shell { width: 100%; max-width: none; min-height: calc(100dvh - 118px); }
.fy-companion-recorder-host { display: none !important; }
.fy-avatar-console {
  width: 100%;
  max-width: none;
  /* Keep the working surface substantial on a laptop without reserving a
     mostly empty full viewport below the first actionable state. */
  min-height: min(780px, calc(100dvh - 150px));
  grid-template-columns: minmax(0, 1fr) 310px;
  border-radius: 10px;
}
.fy-console-center { padding: 20px clamp(28px, 4vw, 64px) 24px; }
/* Keep the active workspace compact enough for the primary action to remain
   in the first viewport. */
/* The route does not rely on a body class, so keep the functional overrides
   scoped to the rendered companion shell as well. */
.fy-companion-shell .fy-console-center { padding: 18px clamp(28px, 4vw, 64px) 22px; }
.fy-companion-shell .fy-console-stage { min-height: 320px; padding: 12px 0 16px; }
.fy-companion-shell .fy-console-stage .fy-video-stage {
  width: min(100%, 500px);
  max-width: 500px;
  max-height: none;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
}
.fy-companion-shell .fy-console-stage .fy-video-ratio { width: 100%; height: 100%; aspect-ratio: auto; }
.fy-companion-shell .fy-video-figure .fy-video-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100% !important;
  max-height: 100%;
  object-fit: cover;
  object-position: 38% 22%;
  /* The source is a character design board, not a customer-facing poster.
     Crop into its primary portrait so the idle state reads as one available
     digital human instead of an internal asset sheet. */
  transform: translateY(-10%) scale(2.8);
  transform-origin: 25% 0;
}
.fy-companion-shell .fy-video-figure::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40px;
  background: linear-gradient(90deg, #071a2d 52%, rgba(7, 26, 45, 0));
  pointer-events: none;
}
.fy-companion-shell .fy-console-dialogue { width: min(100%, 920px); padding: 14px 18px; border-radius: 14px; }
.fy-console-dialogue .fy-explanation-block { padding: 12px 16px; }
.fy-console-dialogue .fy-companion-controls { padding-top: 8px; }
.fy-companion-shell[data-state="idle"] .fy-companion-subtitle { display: none; }
.fy-explanation-label { font-size: 14px; }.fy-explanation-main { font-size: 18px; line-height: 1.6; }
.fy-companion-subtitle-text { font-size: 18px; line-height: 1.7; }
.fy-companion-shell .fy-companion-speak-btn { width: min(500px, 100%); min-height: 58px; font-size: 16px; }
.fy-workspace-privacy { display: flex; align-items: flex-start; gap: 8px; margin: auto 20px 20px; padding: 12px; border: 1px solid #dbe5f4; border-radius: 10px; background: #f7faff; color: #52657f; font-size: 12px; line-height: 1.5; }
.fy-workspace-privacy svg { flex: 0 0 auto; margin-top: 1px; color: #2f62be; }
.fy-speak-label { font-size: 16px; }.fy-speak-hint { font-size: 13px; }
.fy-companion-alt-btn { min-height: 40px; padding: 8px 14px; font-size: 13px; }
.fy-avatar-console > .fy-companion-workspace { padding-bottom: 16px; }
.fy-workspace-tabs { min-height: 56px; }.fy-workspace-section { padding: 22px 24px; }
.fy-workspace-kicker { font-size: 14px; }.fy-workspace-avatar strong, .fy-workspace-option strong { font-size: 15px; }.fy-workspace-avatar small, .fy-workspace-option small, .fy-workspace-history p { font-size: 13px; line-height: 1.6; }
@media (max-width: 1100px) { .fy-avatar-console { grid-template-columns: minmax(0, 1fr) 320px; }.fy-console-center { padding-inline: 32px; } }
@media (max-width: 860px) { .fy-avatar-console { grid-template-columns: 1fr; min-height: 0; }.fy-avatar-console > .fy-companion-workspace { border-top: 1px solid var(--border-default); border-left: 0; }.fy-console-stage { min-height: 340px; }.fy-console-dialogue { width: 100%; } }
@media (max-width: 640px) {
  .fy-companion-shell { min-height: auto; }
  .fy-console-center { padding: 16px; }
  .fy-console-stage { min-height: 280px; }
  .fy-console-stage .fy-video-stage { width: min(100%, 350px); }
  .fy-console-dialogue { padding: 16px; }
  .fy-companion-subtitle-text { font-size: 16px; }
  .fy-companion-speak-btn { width: 100%; }
  .fy-companion-idle-area { gap: var(--sp-2); }
  .fy-companion-alt-btn { min-height: 44px; }
  .fy-workspace-section { padding: 18px; }
}

/* ── UI 5.1: quiet companion view ────────────────────────────── */
#app:has(.fy-companion-shell) {
  padding-top: 18px;
}

.fy-companion-shell .fy-avatar-console {
  min-height: min(740px, calc(100dvh - 36px));
}

.fy-companion-shell .fy-console-toolbar {
  padding-block: 10px;
}

.fy-companion-shell .fy-console-realtime button,
.fy-companion-shell .fy-console-session-status {
  white-space: nowrap;
}

.fy-companion-shell .fy-console-session-status {
  min-width: 0;
  overflow: hidden;
}

.fy-companion-shell .fy-console-session-status > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.fy-companion-shell .fy-console-stage {
  min-height: 0;
}

.fy-console-toolbar > .fy-risk-chip {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(55, 188, 151, .26);
  border-radius: 999px;
  background: rgba(55, 188, 151, .08);
  color: #24735e;
  font-size: var(--fs-caption);
}

.fy-companion-workspace {
  justify-content: flex-start;
}

.fy-companion-workspace .fy-workspace-section {
  padding: 20px;
}

.fy-companion-workspace .fy-workspace-privacy {
  margin-top: auto;
}

@media (max-width: 1100px) {
  .fy-console-toolbar > .fy-risk-chip { display: none; }
}

/* Workspace selector — a restrained avatar studio inspired by creator tools. */
.fy-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  flex: 0 0 auto;
  border-bottom: 1px solid #d7e0e9;
  background: #fbfcfe;
}

.fy-workspace-tabs button {
  min-height: 48px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #526174;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.fy-workspace-tabs button.is-active {
  border-bottom-color: #1976df;
  color: #1265c2;
}

.fy-workspace-heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
}

.fy-workspace-heading strong { color: #142235; font-size: 15px; }
.fy-workspace-heading span { color: #6b7889; font-size: 12px; }
.fy-voice-heading { margin-top: 22px; }

.fy-avatar-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.fy-avatar-choice {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 13px;
  background: #eef3f7;
  color: white;
  cursor: pointer;
  aspect-ratio: .82;
}

.fy-avatar-choice img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}

.fy-avatar-choice > span {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 8px 8px;
  background: linear-gradient(transparent, rgba(8, 22, 38, .84));
  text-align: left;
}

.fy-avatar-choice strong { font-size: 13px; }
.fy-avatar-choice small { font-size: 10px; color: rgba(255,255,255,.8); }
.fy-avatar-choice > i {
  position: absolute;
  top: 7px;
  right: 7px;
  display: none;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #1976df;
  color: white;
  font-style: normal;
  font-weight: 800;
}

.fy-avatar-choice:is(:hover, :focus-visible) img { transform: scale(1.035); }
.fy-avatar-choice.is-selected { border-color: #1976df; box-shadow: 0 0 0 2px rgba(25,118,223,.12); }
.fy-avatar-choice.is-selected > i { display: grid; }

.fy-voice-picker { display: grid; gap: 8px; }
.fy-voice-loading { padding: 16px; color: #6b7889; text-align: center; }
.fy-voice-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  min-height: 64px;
  border: 1px solid #d6dee7;
  border-radius: 13px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.fy-voice-choice.is-selected {
  border-color: #1976df;
  background: #f2f7fe;
  box-shadow: 0 0 0 1px #1976df;
}

.fy-voice-select-btn {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 5px 9px 12px;
  border: 0;
  background: transparent;
  color: #172436;
  text-align: left;
  cursor: pointer;
}

.fy-voice-select-btn > span:last-child { display: grid; grid-template-columns: auto 1fr; gap: 1px 7px; min-width: 0; }
.fy-voice-select-btn strong { font-size: 13px; }
.fy-voice-select-btn small { align-self: center; width: fit-content; padding: 2px 6px; border-radius: 999px; background: #f0f3f7; color: #687587; font-size: 9px; }
.fy-voice-select-btn em { grid-column: 1 / -1; color: #6c7989; font-size: 10px; font-style: normal; }
.fy-voice-bars { display: flex; align-items: center; justify-content: center; gap: 3px; height: 30px; color: #647285; }
.fy-voice-bars i { width: 3px; height: 12px; border-radius: 3px; background: currentColor; }
.fy-voice-bars i:nth-child(2), .fy-voice-bars i:nth-child(4) { height: 22px; }
.fy-voice-bars i:nth-child(3) { height: 29px; }
.fy-voice-choice.is-selected .fy-voice-bars { color: #1976df; }
.fy-voice-preview {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f1f4f8;
  color: #35465a;
  cursor: pointer;
}
.fy-voice-choice.is-selected .fy-voice-preview { background: #1976df; color: white; }
.fy-voice-choice.has-error { border-color: #e3aaaa; background: #fffafa; }
.fy-voice-choice.has-error .fy-voice-select-btn em { color: #a63b3b; }
.fy-voice-preview[aria-pressed="true"] { opacity: .65; cursor: progress; }

.fy-workspace-history { padding: 22px; }
.fy-history-open { width: 100%; min-height: 46px; border: 1px solid #d3dce6; border-radius: 11px; background: white; color: #22334a; cursor: pointer; }

.fy-live-transcript {
  display: grid;
  gap: 8px;
  padding: 13px 15px;
  border: 1px solid #d4dfea;
  border-radius: 13px;
  background: #fff;
}

.fy-live-transcript-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #536275;
  font-size: 11px;
  font-weight: 700;
}

.fy-live-transcript-head span:last-child {
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef3f7;
  color: #66768a;
  font-weight: 600;
}

.fy-live-transcript p {
  min-height: 22px;
  margin: 0;
  color: #17283d;
  font-size: 13px;
  line-height: 1.65;
}

.fy-live-transcript[data-phase="listening"] { border-color: #75a8ed; box-shadow: 0 0 0 2px rgba(25,118,223,.08); }
.fy-live-transcript[data-phase="listening"] .fy-live-transcript-head span:last-child { background: #e8f2ff; color: #1265c2; }
.fy-live-transcript[data-phase="processing"] .fy-live-transcript-head span:last-child { background: #fff4db; color: #95620b; }
.fy-live-transcript[data-phase="complete"] { border-color: #a8d8cb; background: #fbfffd; }
.fy-live-transcript[data-phase="complete"] .fy-live-transcript-head span:last-child { background: #e7f7f1; color: #14765f; }
.fy-live-transcript[data-phase="error"] { border-color: #e7b7b7; background: #fffafa; }
.fy-live-transcript[data-phase="error"] .fy-live-transcript-head span:last-child { background: #fdecec; color: #a63b3b; }

/* Keep the primary voice action reachable while the selector content scrolls. */
.fy-companion-workspace .fy-workspace-dialogue .fy-companion-controls {
  position: sticky;
  bottom: 0;
  z-index: 12;
  border-color: #cbd9e7;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -12px 28px rgba(16, 45, 75, .12);
  backdrop-filter: blur(16px);
}

.fy-companion-workspace .fy-companion-controls .fy-workspace-privacy {
  justify-content: center;
  margin: 8px 0 0;
  padding: 6px 8px 0;
  border: 0;
  background: transparent;
  font-size: 10px;
  line-height: 1.35;
}

@media (min-width: 1101px) {
  .fy-companion-shell .fy-avatar-console { grid-template-columns: minmax(0, 1fr) clamp(470px, 29vw, 540px); }
  .fy-companion-workspace .fy-workspace-section { padding: 20px 24px; }
  .fy-companion-workspace .fy-workspace-dialogue,
  .fy-companion-shell[data-state="idle"] .fy-workspace-dialogue { padding: 18px 24px; }
}

@media (max-width: 560px) {
  .fy-avatar-picker { gap: 7px; }
  .fy-avatar-choice { border-radius: 11px; }
  .fy-companion-workspace .fy-workspace-section { padding: 18px 14px; }
  .fy-companion-workspace .fy-workspace-dialogue .fy-companion-controls {
    position: fixed;
    right: 12px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    width: auto;
    margin: 0;
    padding: 10px;
    border-radius: 14px;
    box-shadow: 0 -10px 30px rgba(10, 35, 65, .2);
  }
  .fy-companion-workspace .fy-companion-controls .fy-workspace-privacy { display: none; }
  .fy-companion-workspace { padding-bottom: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .fy-avatar-choice img { transition: none; }
}

@media (max-width: 640px) {
  #app:has(.fy-companion-shell) { padding-top: 10px; }
  .fy-companion-shell .fy-avatar-console { min-height: 0; }
}

/* ── UI 5.0: living avatar studio ─────────────────────────────── */
.fy-console-visual-head > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8eeaf0;
  font-weight: 750;
  letter-spacing: .11em;
}

.fy-console-visual-head > span:first-child i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #51e2c1;
  box-shadow: 0 0 0 4px rgba(81, 226, 193, .12), 0 0 18px rgba(81, 226, 193, .72);
  animation: fy-live-beacon 1.8s ease-in-out infinite;
}

.fy-video-figure-live {
  opacity: 1;
  background:
    radial-gradient(circle at 50% 42%, rgba(61, 185, 218, .18), transparent 34%),
    linear-gradient(180deg, #071723 0%, #0a2638 100%);
}

.fy-video-poster-live {
  transform-origin: 50% 78%;
  animation: fy-avatar-idle 5.5s cubic-bezier(.45, 0, .55, 1) infinite;
}

.fy-companion-live-avatar,
.fy-companion-live-avatar.fy-digital-human {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.fy-companion-live-avatar .fy-dh-stage {
  position: absolute;
  inset: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.fy-companion-live-avatar .fy-dh-copy { display: none; }
.fy-companion-live-avatar .fy-dh-glow {
  inset: auto 12% -10%;
  height: 38%;
  background: rgba(45, 198, 214, .24);
  filter: blur(32px);
}

.fy-companion-live-avatar .fy-dh-fallback {
  transform-origin: 50% 78%;
  animation: fy-avatar-idle 5.5s cubic-bezier(.45, 0, .55, 1) infinite;
}

.fy-companion-live-avatar .fy-dh-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  filter: saturate(.92) contrast(1.04);
}

.fy-companion-live-avatar .fy-dh-fallback::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 57%, rgba(3, 17, 28, .55));
  content: "";
}

.fy-avatar-presence {
  position: absolute;
  right: 18px;
  bottom: 54px;
  z-index: 5;
  display: flex;
  align-items: end;
  gap: 3px;
  height: 23px;
  padding: 5px 8px;
  border: 1px solid rgba(130, 230, 238, .18);
  border-radius: 999px;
  background: rgba(4, 19, 30, .62);
  backdrop-filter: blur(10px);
}

.fy-avatar-presence i {
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: #73e4ea;
  animation: fy-presence-wave 1.35s ease-in-out infinite;
}
.fy-avatar-presence i:nth-child(2) { animation-delay: -.9s; }
.fy-avatar-presence i:nth-child(3) { animation-delay: -.55s; }
.fy-avatar-presence i:nth-child(4) { animation-delay: -.2s; }
.fy-avatar-presence i:nth-child(5) { animation-delay: -.75s; }

.fy-companion-shell[data-state="speaking"] .fy-avatar-presence i,
.fy-companion-shell[data-state="listening"] .fy-avatar-presence i {
  animation-duration: .46s;
}

.fy-companion-shell[data-state="speaking"] .fy-companion-live-avatar .fy-dh-fallback {
  animation: fy-avatar-speaking 1.15s ease-in-out infinite;
}

.fy-companion-shell[data-state="speaking"] .fy-video-poster-live {
  animation: fy-avatar-speaking 1.15s ease-in-out infinite;
}

.fy-workspace-face {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #c8d9e7;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 3px 0 #2cc7d6;
}

.fy-workspace-face img {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  object-fit: cover;
  object-position: center 22%;
}

.fy-workspace-face > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.fy-workspace-face strong { color: #132b42; font-size: var(--fs-body-s); }
.fy-workspace-face small { color: #71859a; font-size: var(--fs-caption); }
.fy-workspace-selected {
  padding: 3px 7px;
  border-radius: 999px;
  background: #e7f8f5;
  color: #167363;
  font-size: var(--fs-caption);
  font-weight: 700;
}

@keyframes fy-avatar-idle {
  0%, 100% { transform: scale(1.015) translate3d(0, 0, 0); }
  45% { transform: scale(1.035) translate3d(0, -4px, 0); }
  70% { transform: scale(1.025) translate3d(2px, -2px, 0); }
}

@keyframes fy-avatar-speaking {
  0%, 100% { transform: scale(1.025) translateY(0); }
  50% { transform: scale(1.045) translateY(-4px); }
}

@keyframes fy-live-beacon {
  0%, 100% { opacity: .65; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes fy-presence-wave {
  0%, 100% { height: 5px; opacity: .55; }
  50% { height: 15px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fy-companion-live-avatar .fy-dh-fallback,
  .fy-video-poster-live,
  .fy-console-visual-head > span:first-child i,
  .fy-avatar-presence i { animation: none !important; }
}

body.fy-reduced-motion .fy-companion-live-avatar .fy-dh-fallback,
body.fy-reduced-motion .fy-video-poster-live,
body.fy-reduced-motion .fy-console-visual-head > span:first-child i,
body.fy-reduced-motion .fy-avatar-presence i { animation: none !important; }

/* A full-width console becomes visually sparse on ultrawide displays. Keep
   the application frame generous, while scaling the active digital-human
   stage and explanation panel as one coherent workspace. */
@media (min-width: 1600px) {
  #app:has(.fy-companion-shell) > .fy-page-header,
  #app:has(.fy-companion-shell) > .fy-companion-shell { max-width: 1680px; margin-inline: auto; }
  .fy-avatar-console {
    grid-template-columns: minmax(0, 1fr) 340px;
    /* An ultrawide monitor should give the work area room, not turn its idle
       state into a viewport-tall empty panel. */
    min-height: min(820px, calc(100dvh - 150px));
  }
  .fy-companion-shell .fy-console-stage .fy-video-stage { width: min(100%, 580px); max-width: 580px; }
  .fy-companion-shell .fy-console-dialogue { width: min(100%, 1120px); }
  .fy-companion-shell .fy-companion-speak-btn { width: min(580px, 100%); }
}

/* ── UI 4.0: digital-human command deck ──
   One restrained technical surface: a deep-ocean visual channel, a clear
   response console, and a narrow factual session rail. */
#app:has(.fy-companion-shell) > .fy-page-header,
#app:has(.fy-companion-shell) > .fy-companion-shell {
  width: min(100%, 1920px);
  max-width: 1920px;
  margin-inline: auto;
}

.fy-companion-shell,
#app .fy-companion-shell {
  min-height: 0;
}

.fy-companion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 58px;
  margin-bottom: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(122, 175, 211, 0.26);
  border-radius: 14px;
  background:
    linear-gradient(112deg, rgba(45, 199, 214, 0.08), transparent 42%),
    #081c31;
  color: #f5fbff;
  box-shadow: 0 14px 34px rgba(7, 25, 45, 0.10);
}

.fy-companion-brand {
  min-width: 0;
}

.fy-companion-logo {
  background: linear-gradient(145deg, #2cc7d6, #4b67df);
  box-shadow: 0 0 0 5px rgba(44, 199, 214, 0.10);
}

.fy-companion-name {
  display: grid;
  gap: 1px;
  min-width: 0;
  color: #f5fbff;
}

.fy-companion-name strong {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}

.fy-companion-name small {
  overflow: hidden;
  color: #a9bfd4;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fy-companion-head-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.fy-companion-head .fy-risk-chip {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: #dce9f5;
}

.fy-companion-head .fy-risk-chip.low {
  border-color: rgba(66, 210, 155, 0.28);
  background: rgba(66, 210, 155, 0.13);
  color: #9ce8c7;
}

.fy-companion-head .fy-risk-chip.medium {
  border-color: rgba(240, 164, 59, 0.30);
  background: rgba(240, 164, 59, 0.14);
  color: #ffd18e;
}

.fy-companion-head .fy-risk-chip.high,
.fy-companion-head .fy-risk-chip.critical {
  border-color: rgba(255, 125, 116, 0.30);
  background: rgba(255, 125, 116, 0.14);
  color: #ffb5ae;
}

.fy-companion-safe {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #c5d8e9;
  font-size: var(--fs-caption);
  font-weight: 600;
}

.fy-companion-safe i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2cc7d6;
  box-shadow: 0 0 0 4px rgba(44, 199, 214, 0.12), 0 0 16px rgba(44, 199, 214, 0.52);
}

.fy-avatar-console {
  width: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 290px;
  border-color: #ccd9e7;
  border-radius: 16px;
  background: #f7fafd;
  box-shadow: 0 18px 48px rgba(12, 42, 69, 0.10);
}

.fy-console-center,
.fy-companion-shell .fy-console-center {
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: clamp(18px, 2vw, 28px);
  background:
    radial-gradient(circle at 18% 12%, rgba(44, 199, 214, 0.08), transparent 28%),
    linear-gradient(rgba(56, 100, 137, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 100, 137, 0.035) 1px, transparent 1px),
    #f8fbfe;
  background-size: auto, 28px 28px, 28px 28px, auto;
}

.fy-console-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-width: 0;
}

.fy-console-realtime {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #c7d7e8;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 22px rgba(21, 57, 88, 0.07);
}

.fy-console-realtime button {
  min-height: var(--touch-min);
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #526b82;
  font-size: var(--fs-body-s);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.fy-console-realtime button:hover { background: var(--surface-soft); color: var(--primary-700); }
.fy-console-realtime button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.fy-console-realtime button.is-active {
  background: #4b67df;
  color: #fff;
  box-shadow: 0 6px 18px rgba(75, 103, 223, 0.24);
}

.fy-companion-mode-switch {
  flex: 0 0 auto;
  padding: 3px;
  border-color: #c7d7e8;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 22px rgba(21, 57, 88, 0.07);
}

.fy-companion-mode-switch > * {
  min-height: var(--touch-min);
  padding-block: 10px;
  font-size: var(--fs-body-s);
}

.fy-companion-mode-switch .is-active {
  background: #4b67df;
  box-shadow: 0 6px 18px rgba(75, 103, 223, 0.24);
}

.fy-console-session-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
  margin: 0;
  color: #526b82;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  text-align: right;
}

.fy-console-session-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2cc7d6;
  box-shadow: 0 0 0 4px rgba(44, 199, 214, 0.12);
}

.fy-console-operating {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(340px, 1.06fr) minmax(320px, 0.94fr);
  align-items: stretch;
  gap: clamp(16px, 1.7vw, 26px);
  min-width: 0;
}

.fy-console-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(124, 178, 211, 0.27);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 34%, rgba(44, 199, 214, 0.14), transparent 40%),
    linear-gradient(145deg, #0b2239, #071827 74%);
  box-shadow: 0 18px 42px rgba(4, 24, 42, 0.18);
}

.fy-console-visual::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(122, 175, 211, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 175, 211, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  content: "";
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000, transparent 76%);
}

.fy-console-visual-head,
.fy-stage-telemetry,
.fy-console-stage {
  position: relative;
  z-index: 1;
}

.fy-console-visual-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 42px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(145, 191, 219, 0.14);
  color: #91abc2;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: 0.04em;
}

.fy-companion-shell .fy-console-stage {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  place-items: stretch;
}

.fy-companion-shell .fy-console-stage .fy-video-stage {
  width: 100%;
  max-width: none;
  min-height: 0;
  aspect-ratio: 16 / 10;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.fy-companion-shell .fy-console-stage .fy-video-ratio {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.fy-console-visual .fy-v-label,
.fy-console-visual .fy-v-badge {
  top: 14px;
  min-height: 26px;
  padding: 4px 10px;
  font-size: var(--fs-caption);
  line-height: 1.25;
  backdrop-filter: blur(8px);
}

.fy-console-visual .fy-v-label {
  left: 14px;
  border: 1px solid rgba(173, 211, 232, 0.16);
  background: rgba(4, 20, 34, 0.58);
}

.fy-console-visual .fy-v-badge {
  right: 14px;
}

.fy-stage-telemetry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(145, 191, 219, 0.15);
  background: rgba(3, 18, 31, 0.70);
}

.fy-stage-telemetry > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid rgba(145, 191, 219, 0.12);
}

.fy-stage-telemetry > span:last-child {
  border-right: 0;
}

.fy-stage-telemetry strong {
  color: #e8f6ff;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.fy-stage-telemetry small {
  overflow: hidden;
  color: #8eaac1;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fy-companion-shell .fy-console-dialogue {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: clamp(16px, 1.7vw, 24px);
  border: 1px solid #cbd9e7;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(75, 103, 223, 0.045), transparent 38%),
    rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 36px rgba(20, 52, 80, 0.08);
}

.fy-dialogue-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid #d7e2ed;
}

.fy-dialogue-seq {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(44, 199, 214, 0.34);
  border-radius: 10px;
  background: #0b2740;
  color: #72e2ec;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--fs-caption);
  font-weight: 700;
  place-items: center;
}

.fy-dialogue-head > span:last-child {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.fy-dialogue-head strong {
  color: var(--text-primary);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}

.fy-dialogue-head small {
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.fy-console-dialogue .fy-explanation {
  gap: var(--sp-3);
}

.fy-console-dialogue .fy-explanation-block {
  padding: clamp(13px, 1.4vw, 18px);
  border-color: #d6e1ec;
  border-left: 3px solid #4b67df;
  border-radius: 12px;
  background:
    linear-gradient(110deg, rgba(75, 103, 223, 0.085), rgba(44, 199, 214, 0.035)),
    #f7faff;
}

.fy-explanation-label {
  margin-bottom: var(--sp-2);
  color: #526b82;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

.fy-explanation-main {
  color: #10243a;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.fy-explanation-steps li {
  min-height: var(--touch-min);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}

.fy-companion-shell[data-state="idle"] .fy-companion-subtitle {
  display: none;
}

.fy-console-dialogue .fy-companion-subtitle {
  min-height: 0;
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-color: #d3e0ec;
  border-radius: 12px;
  background: #f8fbfe;
  box-shadow: none;
}

.fy-companion-subtitle-text {
  font-family: var(--font-body);
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
}

.fy-console-dialogue .fy-companion-controls {
  align-items: stretch;
  margin-top: auto;
  padding-top: var(--sp-4);
}

.fy-companion-shell .fy-companion-speak-btn {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 66px;
  padding: 10px clamp(18px, 2vw, 26px);
  border: 1px solid rgba(117, 219, 229, 0.28);
  border-radius: 12px;
  background: linear-gradient(105deg, #405bd2, #315eb7 72%, #217e9d);
  color: #fff;
  box-shadow: 0 12px 26px rgba(49, 94, 183, 0.22);
}

.fy-companion-shell .fy-companion-speak-btn:hover {
  background: linear-gradient(105deg, #3651c7, #2854aa 72%, #1e718e);
}

.fy-speak-label {
  font-size: var(--fs-body);
  line-height: 1.3;
}

.fy-speak-hint {
  color: rgba(255, 255, 255, 0.80);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.fy-companion-alt-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.fy-companion-alt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--touch-min);
  padding: 8px 10px;
  border-color: #cfdae6;
  border-radius: 10px;
  color: #52657a;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}

.fy-avatar-console > .fy-companion-workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 0;
  border-top: 0;
  border-left: 1px solid #cbd9e7;
  background:
    linear-gradient(180deg, rgba(44, 199, 214, 0.045), transparent 32%),
    #f4f8fc;
}

.fy-workspace-tabs {
  min-height: 54px;
  border-bottom-color: #d3dfeb;
  background: rgba(255, 255, 255, 0.70);
}

.fy-workspace-tabs span,
.fy-workspace-tabs a {
  min-height: var(--touch-min);
  color: #5b7086;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

.fy-workspace-tabs .is-active {
  color: #314fc3;
  box-shadow: inset 0 -2px #2cc7d6;
}

.fy-workspace-section {
  padding: 14px;
  border-bottom-color: #d8e3ed;
}

.fy-workspace-kicker {
  margin-bottom: 8px;
  color: #263c52;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

.fy-workspace-avatar {
  min-height: 60px;
  padding: 9px;
  border-color: #cfdae6;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 22px rgba(20, 52, 80, 0.05);
}

.fy-workspace-avatar-mark {
  background: linear-gradient(145deg, rgba(75, 103, 223, 0.14), rgba(44, 199, 214, 0.12));
  color: #3655ca;
}

.fy-workspace-avatar strong,
.fy-workspace-option strong {
  color: var(--text-primary);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}

.fy-workspace-avatar small,
.fy-workspace-option small,
.fy-workspace-history p {
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.fy-workspace-ready {
  padding: 3px 7px;
  border: 1px solid rgba(44, 199, 214, 0.26);
  border-radius: var(--radius-full);
  background: rgba(44, 199, 214, 0.08);
  color: #166c75;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.fy-workspace-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 0;
}

.fy-workspace-facts > div {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #d4e0eb;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.64);
}

.fy-workspace-facts dt,
.fy-workspace-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.fy-workspace-facts dt {
  color: #71859a;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.fy-workspace-facts dd {
  margin-top: 2px;
  color: #183149;
  font-size: var(--fs-body-s);
  font-weight: 700;
  line-height: var(--lh-body-s);
}

.fy-workspace-guide {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fy-workspace-guide::before {
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 13px;
  width: 1px;
  background: linear-gradient(#2cc7d6, rgba(75, 103, 223, 0.24));
  content: "";
}

.fy-workspace-guide li {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.fy-workspace-guide li > span {
  z-index: 1;
  display: grid;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(44, 199, 214, 0.34);
  border-radius: 9px;
  background: #0c2a44;
  color: #71dce6;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--fs-caption);
  font-weight: 700;
  place-items: center;
}

.fy-workspace-guide p {
  display: grid;
  gap: 1px;
  margin: 0;
}

.fy-workspace-guide strong {
  color: #263c52;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}

.fy-workspace-guide small {
  display: none;
}

.fy-workspace-actions {
  display: grid;
  gap: 8px;
}

.fy-workspace-actions .fy-workspace-kicker {
  margin-bottom: 2px;
}

.fy-workspace-option {
  min-height: 52px;
  margin-top: 0;
  padding: 8px 10px;
  border-color: #d0dce7;
  background: rgba(255, 255, 255, 0.74);
}

.fy-workspace-option small {
  display: none;
}

.fy-workspace-privacy {
  margin: 8px 14px 14px;
  padding: 9px 10px;
  border-color: #cfe0ed;
  background: rgba(237, 247, 253, 0.88);
  color: #526b82;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.fy-companion-shell[data-state="listening"] .fy-console-session-dot,
.fy-companion-shell[data-state="listening"] .fy-companion-safe i {
  background: #ff7d74;
  box-shadow: 0 0 0 4px rgba(255, 125, 116, 0.12), 0 0 18px rgba(255, 125, 116, 0.42);
}

.fy-companion-shell[data-state="processing"] .fy-console-session-dot,
.fy-companion-shell[data-state="confirming"] .fy-console-session-dot {
  animation: fy-console-signal 1.5s ease-in-out infinite;
}

.fy-companion-shell[data-state="speaking"] .fy-console-visual,
.fy-companion-shell[data-state="showing_card"] .fy-console-visual {
  border-color: rgba(44, 199, 214, 0.42);
  box-shadow: 0 18px 46px rgba(6, 56, 78, 0.22);
}

@keyframes fy-console-signal {
  0%, 100% { opacity: 0.58; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .fy-companion-shell[data-state="processing"] .fy-console-session-dot,
  .fy-companion-shell[data-state="confirming"] .fy-console-session-dot {
    animation: none;
  }
}

body.fy-reduced-motion .fy-console-session-dot {
  animation: none !important;
}

@media (max-width: 1180px) {
  .fy-avatar-console {
    grid-template-columns: minmax(0, 1fr) 270px;
  }

  .fy-console-center,
  .fy-companion-shell .fy-console-center {
    padding: 18px;
  }

  .fy-console-operating {
    grid-template-columns: minmax(300px, 1fr) minmax(285px, 0.92fr);
    gap: 16px;
  }

  .fy-workspace-section {
    padding: 16px;
  }
}

@media (max-width: 1100px) {
  .fy-avatar-console {
    grid-template-columns: minmax(0, 1fr);
  }

  .fy-avatar-console > .fy-companion-workspace {
    display: none !important;
  }
}

@media (max-width: 860px) {
  #app:has(.fy-companion-shell) {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .fy-avatar-console {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .fy-avatar-console > .fy-companion-workspace {
    display: none !important;
  }

  .fy-console-operating {
    grid-template-columns: minmax(300px, 1.04fr) minmax(285px, 0.96fr);
  }
}

@media (max-width: 700px) {
  .fy-console-operating {
    grid-template-columns: 1fr;
  }

  .fy-console-visual {
    width: min(100%, 620px);
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .fy-companion-shell,
  #app .fy-companion-shell {
    min-height: 0;
  }

  .fy-companion-head {
    min-height: 42px;
    margin-bottom: 6px;
    padding: 6px 10px;
    border-radius: 11px;
  }

  .fy-companion-head .fy-companion-brand {
    display: none;
  }

  .fy-companion-head-status {
    width: 100%;
    justify-content: space-between;
  }

  .fy-avatar-console {
    border-radius: 12px;
  }

  .fy-console-center,
  .fy-companion-shell .fy-console-center {
    gap: 10px;
    padding: 10px;
    background: #f8fbfe;
  }

  .fy-console-toolbar {
    justify-content: center;
    min-height: 44px;
  }

  .fy-console-session-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .fy-companion-mode-switch {
    width: min(100%, 226px);
  }

  .fy-companion-mode-switch > * {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--touch-min);
    padding: 7px 10px;
  }

  .fy-console-operating {
    gap: 10px;
  }

  .fy-console-visual {
    border-radius: 12px;
  }

  .fy-console-visual-head,
  .fy-stage-telemetry {
    display: none;
  }

  .fy-companion-shell .fy-console-stage {
    min-height: 0;
    padding: 0;
  }

  .fy-companion-shell .fy-console-stage .fy-video-stage {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 10;
    border-radius: 0;
  }

  .fy-console-visual .fy-v-label,
  .fy-console-visual .fy-v-badge {
    top: 10px;
    min-height: 26px;
    font-size: var(--fs-caption);
  }

  .fy-console-visual .fy-v-label { left: 10px; }
  .fy-console-visual .fy-v-badge { right: 10px; }

  .fy-companion-shell .fy-console-dialogue {
    min-height: 0;
    padding: 12px;
    border-radius: 12px;
  }

  .fy-dialogue-head {
    gap: 9px;
    margin-bottom: 9px;
    padding-bottom: 9px;
  }

  .fy-dialogue-seq {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .fy-console-dialogue .fy-explanation-block {
    padding: 10px 12px;
  }

  .fy-explanation-label {
    margin-bottom: 4px;
  }

  .fy-console-dialogue .fy-companion-controls {
    padding-top: 9px;
  }

  .fy-companion-shell .fy-companion-speak-btn {
    min-height: 62px;
    padding: 8px 14px;
  }

  .fy-companion-idle-area {
    gap: 8px;
  }

  .fy-companion-alt-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .fy-companion-alt-btn {
    min-height: var(--touch-min);
    padding: 7px 8px;
    white-space: normal;
  }

  .fy-companion-post-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .fy-companion-action-btn,
  .fy-companion-action-print {
    justify-content: center;
    min-height: var(--touch-min);
    padding: 8px 10px;
    border-radius: 10px;
    font-size: var(--fs-caption);
  }

  .fy-console-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .fy-companion-mode-switch,
  .fy-console-realtime {
    width: 100%;
    max-width: none;
  }

  .fy-console-realtime {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fy-console-realtime button {
    width: auto;
    min-width: 0;
    white-space: nowrap;
  }
}

/* Final viewport-fit pass: the companion is a workspace, so on desktop it
   should occupy the available screen instead of collapsing to content height. */
@media (min-width: 1101px) and (min-height: 760px) {
  #app:has(.fy-companion-shell) {
    height: 100dvh;
    padding-block: 18px;
    overflow: hidden;
  }

  .fy-companion-shell,
  .fy-companion-shell .fy-avatar-console {
    height: 100%;
    min-height: 0;
  }

  .fy-companion-shell .fy-console-center {
    height: 100%;
    min-height: 0;
  }

  .fy-companion-shell .fy-console-operating {
    flex: 1 1 auto;
    min-height: 0;
  }

  .fy-companion-shell .fy-console-visual,
  .fy-companion-shell .fy-console-dialogue,
  .fy-companion-shell .fy-console-stage,
  .fy-companion-shell .fy-console-stage .fy-video-stage,
  .fy-companion-shell .fy-console-stage .fy-video-ratio {
    height: 100%;
    min-height: 0;
  }

  .fy-companion-shell .fy-console-stage .fy-video-stage {
    width: 100%;
    max-width: none;
  }

  .fy-companion-shell[data-state="idle"] .fy-console-dialogue {
    align-self: center;
    height: auto;
    min-height: clamp(440px, 52dvh, 620px);
    justify-content: center;
  }

  .fy-companion-shell[data-state="idle"] .fy-console-dialogue .fy-companion-controls {
    margin-top: 28px;
  }
}

/* Figma voice-assistant pattern: the avatar stays visually dominant while
   transcript and controls float as compact functional surfaces. */
.fy-companion-shell .fy-console-dialogue {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.fy-companion-shell .fy-console-dialogue .fy-explanation-block {
  border: 1px solid #ccdaea;
  border-left: 3px solid #4b67df;
  background: rgba(247, 250, 255, .94);
  box-shadow: 0 16px 38px rgba(19, 50, 79, .10);
  backdrop-filter: blur(14px);
}

.fy-companion-shell .fy-console-dialogue .fy-companion-controls {
  padding: 14px;
  border: 1px solid #d2deea;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 16px 38px rgba(19, 50, 79, .09);
  backdrop-filter: blur(14px);
}

@media (min-width: 1101px) and (min-height: 760px) {
  .fy-companion-shell[data-state="idle"] .fy-console-dialogue {
    height: auto;
    min-height: 0;
    padding: 0 24px;
  }
}

/* Final studio composition: one continuous stage. Transcript and microphone
   controls belong directly below the avatar instead of floating in a vacant
   middle column. */
@media (min-width: 1101px) {
  .fy-companion-shell .fy-console-center {
    overflow: auto;
  }

  .fy-companion-shell .fy-console-operating {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 0;
  }

  .fy-companion-shell .fy-console-visual {
    flex: 1 1 auto;
    width: min(100%, 760px);
    min-height: 0;
  }

  .fy-companion-shell .fy-console-stage,
  .fy-companion-shell .fy-console-stage .fy-video-stage,
  .fy-companion-shell .fy-console-stage .fy-video-ratio {
    width: 100%;
    height: 100%;
    min-height: 360px;
  }

  .fy-companion-shell .fy-console-dialogue,
  .fy-companion-shell[data-state="idle"] .fy-console-dialogue {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: stretch;
    gap: 12px;
    flex: 0 0 auto;
    width: min(100%, 760px);
    height: auto;
    min-height: 0;
    padding: 0;
    transform: none;
  }

  .fy-companion-shell .fy-console-dialogue .fy-explanation,
  .fy-companion-shell .fy-console-dialogue .fy-explanation-block,
  .fy-companion-shell .fy-console-dialogue .fy-companion-controls {
    height: 100%;
    margin: 0;
  }

  .fy-companion-shell .fy-console-dialogue .fy-explanation-block,
  .fy-companion-shell .fy-console-dialogue .fy-companion-controls {
    min-height: 132px;
  }

  .fy-companion-shell .fy-console-dialogue .fy-companion-controls {
    padding: 12px;
  }

  .fy-companion-shell .fy-companion-speak-btn {
    min-height: 58px;
  }
}

/* Interaction rail: voice configuration, transcript and recording controls
   form one coherent right-side surface. */
@media (min-width: 1101px) {
  .fy-companion-shell .fy-avatar-console {
    grid-template-columns: minmax(0, 1fr) clamp(400px, 25vw, 460px);
  }

  .fy-companion-shell .fy-console-operating {
    display: block;
    min-height: 0;
  }

  .fy-companion-shell .fy-console-visual {
    width: min(100%, 920px);
    height: 100%;
    margin-inline: auto;
  }

  .fy-avatar-console > .fy-companion-workspace {
    display: flex !important;
    gap: 0;
    padding: 0;
    overflow-y: auto;
  }

  .fy-companion-workspace .fy-workspace-section {
    padding: 22px;
  }

  .fy-companion-workspace .fy-workspace-dialogue,
  .fy-companion-shell[data-state="idle"] .fy-workspace-dialogue {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 20px 22px;
    border-top: 1px solid #d5e1ec;
    transform: none;
  }

  .fy-companion-workspace .fy-workspace-dialogue .fy-explanation,
  .fy-companion-workspace .fy-workspace-dialogue .fy-explanation-block,
  .fy-companion-workspace .fy-workspace-dialogue .fy-companion-controls {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .fy-companion-workspace .fy-workspace-dialogue .fy-companion-controls {
    margin: 0;
  }

  .fy-companion-workspace .fy-workspace-privacy {
    margin-top: auto;
  }
}

@media (max-width: 1100px) {
  .fy-avatar-console > .fy-companion-workspace {
    display: flex !important;
    border-top: 1px solid var(--border-default);
    border-left: 0;
  }

  .fy-companion-workspace .fy-workspace-dialogue {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
  }
}