/* 透明状态栏 · 媒体播放 · 小狸对话英雄区 */

/* ── 状态栏透明叠加 ── */
#app {
  position: relative;
}

.ios-status-bar {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 320;
  background: transparent !important;
  pointer-events: none;
  flex-shrink: 0;
  height: max(var(--status-h), var(--safe-t));
  min-height: var(--status-h);
}

.ios-status-bar__left,
.ios-status-bar__right {
  pointer-events: auto;
}

.ios-status-time,
.ios-status-bar__right svg {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95));
}

/* 阅历 XP 仅用于首页 Tab 行，状态栏内隐藏 */
.ios-status-bar .ios-status-xp-pill,
.ios-status-bar .home-xp-pill {
  display: none !important;
}

html.is-desktop .phone-screen > .ios-status-bar {
  position: absolute !important;
  transform: translateY(-50%);
}

html.is-desktop .phone-screen #app {
  padding-top: 0 !important;
}

.app-main {
  position: relative;
  z-index: 1;
  padding-top: max(var(--safe-t), var(--status-h));
}

/* 滚动时内容可穿过透明状态栏；初始位置已在状态栏下方 */
.app-main.app-main--stack {
  padding-top: max(var(--safe-t), var(--status-h));
}

/* ── 阅读讲解入口 · 双图标（与页面左右边距对齐） ── */
.reader-narrate-entry {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 var(--page-x) 12px;
  padding: 0;
  width: auto;
  box-sizing: border-box;
}

.reader-narrate-action {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 2px 4px;
  border: none;
  background: transparent;
  color: #86868b;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.reader-narrate-action svg {
  width: 28px;
  height: 28px;
  display: block;
}

.reader-narrate-action.is-rec {
  color: #2563eb;
}

.reader-narrate-action-label {
  font-size: 11px;
  font-weight: 600;
}

.reader-narrate-entry-btn {
  display: none;
}

/* ── 讲解播放页 · 小狸舞台（对齐学习空间站 narrate-tutor） ── */
.reader-narrate-stage {
  padding: 4px var(--page-x) 10px;
}

.reader-narrate-tutor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  width: 100%;
}

.reader-narrate-caption {
  display: none !important;
}

.reader-narrate-board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--page-x) 6px;
  overflow: hidden;
}

.reader-narrate-board.reader-narrate-board--top {
  flex: 1 1 auto;
  max-height: none;
}

.reader-narrate-card {
  flex: 1;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.reader-narrate-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.reader-narrate-card-index {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
}

.reader-narrate-card-kicker {
  font-size: 11px;
  font-weight: 600;
  color: #86868b;
}

.reader-narrate-steps {
  display: none;
}

.reader-narrate-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 0 4px;
}

.reader-narrate-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(74, 144, 226, 0.22);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.reader-narrate-dot.is-active {
  width: 18px;
  border-radius: 999px;
  background: #4a90e2;
}

.reader-narrate-dot.is-done {
  background: rgba(74, 144, 226, 0.55);
}

.reader-narrate-stage {
  padding: 4px var(--page-x) 8px;
}

.reader-narrate-tutor-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 96px;
  margin: 0 auto;
}

.reader-narrate-eq {
  position: static;
  top: auto;
  transform: none;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  opacity: 0.35;
  transition: opacity 0.25s ease;
}

.reader-narrate-eq--left,
.reader-narrate-eq--right {
  left: auto;
  right: auto;
}

.reader-narrate-eq.reader-narrate-eq--left {
  transform: translateX(-23px);
}

.reader-narrate-eq.reader-narrate-eq--right {
  transform: translateX(23px);
}

.reader-narrate-eq span {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #7eb8f0, #4a90e2);
  height: 8px;
}

.reader-narrate-view.is-speaking .reader-narrate-eq {
  opacity: 1;
}

.reader-narrate-view.is-speaking .reader-narrate-eq span:nth-child(1) { animation: narrateEq1 0.55s ease-in-out infinite; }
.reader-narrate-view.is-speaking .reader-narrate-eq span:nth-child(2) { animation: narrateEq2 0.55s ease-in-out infinite 0.08s; }
.reader-narrate-view.is-speaking .reader-narrate-eq span:nth-child(3) { animation: narrateEq3 0.55s ease-in-out infinite 0.16s; }
.reader-narrate-view.is-speaking .reader-narrate-eq span:nth-child(4) { animation: narrateEq2 0.55s ease-in-out infinite 0.1s; }
.reader-narrate-view.is-speaking .reader-narrate-eq span:nth-child(5) { animation: narrateEq1 0.55s ease-in-out infinite 0.18s; }

@keyframes narrateEq1 {
  0%, 100% { height: 8px; }
  50% { height: 22px; }
}
@keyframes narrateEq2 {
  0%, 100% { height: 12px; }
  50% { height: 26px; }
}
@keyframes narrateEq3 {
  0%, 100% { height: 6px; }
  50% { height: 18px; }
}

.reader-narrate-avatar-wrap {
  /* legacy — narrate 已改用 ari-hero-stage */
  display: none;
}

.reader-narrate-ripple {
  display: none;
}

.reader-narrate-caption {
  display: none !important;
}

.reader-narrate-tutor-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 96px;
  margin: 0 auto;
}

.reader-narrate-hero-stage {
  width: 96px !important;
  height: 96px !important;
  margin: 0;
}

.reader-narrate-hero-stage .ari-avatar-core,
.reader-narrate-hero-stage .ari-avatar-img {
  width: 72px;
  height: 72px;
}

.reader-narrate-hero-stage .ari-avatar-pulse-rings {
  width: 72px;
  height: 72px;
  margin-left: -36px;
  margin-top: -36px;
}

.reader-narrate-hero-stage .ari-avatar-glow-ring {
  width: 72px;
  height: 72px;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}

.reader-narrate-board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0 var(--page-x) 6px;
  overflow: hidden;
}

.reader-narrate-board.reader-narrate-board--top {
  flex: 1 1 auto;
  max-height: none;
}

.reader-narrate-classroom .reader-narrate-card,
.reader-narrate-blackboard .reader-narrate-card {
  flex: 1;
  min-height: 0;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
}

.reader-narrate-card.is-beat-enter {
  animation: narrateCardIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes narrateCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.reader-narrate-card-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a90e2;
  margin-bottom: 6px;
}

.reader-narrate-h1 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #1d1d1f;
  letter-spacing: -0.02em;
}

.reader-narrate-h1-cn {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

.reader-narrate-h2 {
  margin: 12px 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #2563eb;
}

.reader-narrate-h2-cn {
  margin: 0 0 8px;
  font-size: 12px;
  color: #86868b;
}

.reader-narrate-pair {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(74, 144, 226, 0.06);
  border: 1px solid rgba(74, 144, 226, 0.1);
}

.reader-narrate-en {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: #1e3a5f;
  font-family: "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

.reader-narrate-cn {
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}

.reader-narrate-p,
.reader-narrate-note {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.65;
  color: #4b5563;
}

.reader-narrate-note {
  color: #15803d;
  font-weight: 600;
}

.reader-narrate-list {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: #4b5563;
}

.reader-narrate-list li {
  margin-bottom: 6px;
}

.reader-narrate-stage {
  padding: 4px var(--page-x) 10px;
  min-height: auto;
}

.reader-narrate-caption {
  display: none !important;
}

/* ── 朗读 · 动态渐变背景（对齐 AI 学习空间站通话 aurora） ── */
#view-reader {
  isolation: isolate;
}

.reader-tts-aurora {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.78;
  background:
    radial-gradient(ellipse 70% 50% at 28% 32%, color-mix(in srgb, #22d3ee 32%, transparent), transparent 58%),
    radial-gradient(ellipse 75% 50% at 82% 78%, color-mix(in srgb, #a78bfa 34%, transparent), transparent 55%),
    radial-gradient(ellipse 60% 45% at 52% 48%, color-mix(in srgb, #4a90e2 24%, transparent), transparent 52%),
    radial-gradient(ellipse 50% 40% at 70% 18%, color-mix(in srgb, #f472b6 20%, transparent), transparent 48%);
  animation: readerTtsAuroraDrift 11s ease-in-out infinite alternate;
}

#view-reader.is-reader-tts-live .reader-tts-aurora {
  display: block;
}

#view-reader.is-reader-tts-live {
  background: rgba(255, 255, 255, 0.42);
}

#view-reader.reader-theme-dark.is-reader-tts-live {
  background: rgba(28, 28, 30, 0.38);
}

#view-reader.reader-theme-sepia.is-reader-tts-live {
  background: rgba(244, 236, 216, 0.36);
}

@keyframes readerTtsAuroraDrift {
  0% {
    transform: scale(1) translate(0, 0);
    filter: hue-rotate(0deg) saturate(1.05);
  }
  50% {
    transform: scale(1.06) translate(-2%, 1%);
    filter: hue-rotate(18deg) saturate(1.28);
  }
  100% {
    transform: scale(1.02) translate(2%, -1%);
    filter: hue-rotate(-12deg) saturate(1.18);
  }
}

#view-wordbook {
  position: relative;
}

#view-wordbook.is-reader-tts-live .reader-tts-aurora {
  display: block;
}

#view-wordbook.is-reader-tts-live {
  background: rgba(255, 255, 255, 0.42);
}

#view-wordbook .reader-sent--tts-active,
#view-wordbook .wb-story-sent.reader-sent--tts-active {
  background: rgba(74, 144, 226, 0.06);
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#view-wordbook .wb-story-para.reader-para--tts-active {
  background: rgba(74, 144, 226, 0.03);
  border-radius: 8px;
}

#view-wordbook .wb-story-mark.reader-tts-word--read {
  color: rgba(74, 144, 226, 0.88);
  transition: color 0.18s ease;
}

#view-wordbook .wb-story-mark.reader-tts-word--active {
  color: rgba(37, 99, 235, 0.98);
  background: rgba(74, 144, 226, 0.14);
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: color 0.18s ease, background-color 0.18s ease;
}

/* ── 朗读 · 旋转唱片 ── */
.reader-tts-widget {
  position: relative;
  width: 64px;
  height: 64px;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.reader-tts-widget-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(74, 144, 226, 0.28);
  pointer-events: none;
}

.reader-tts-widget-orbit--a {
  inset: -4px;
  animation: readerOrbitSpin 12s linear infinite;
}

.reader-tts-widget-orbit--b {
  inset: -10px;
  border-color: rgba(74, 144, 226, 0.2);
  animation: readerOrbitSpin 18s linear infinite reverse;
}

.reader-tts-widget-orbit--c {
  inset: -16px;
  border-color: rgba(74, 144, 226, 0.14);
  animation: readerOrbitPulse 2.8s ease-out infinite;
}

.reader-tts-widget.is-playing .reader-tts-widget-orbit--a {
  border-color: rgba(74, 144, 226, 0.52);
}

.reader-tts-widget.is-playing .reader-tts-widget-orbit--b {
  border-color: rgba(74, 144, 226, 0.34);
}

.reader-tts-widget.is-playing .reader-tts-widget-orbit--c {
  border-color: rgba(74, 144, 226, 0.24);
}

@keyframes readerOrbitSpin {
  to { transform: rotate(360deg); }
}

@keyframes readerOrbitPulse {
  0% { transform: scale(0.94); opacity: 0.55; }
  70% { transform: scale(1.06); opacity: 0.18; }
  100% { transform: scale(1.1); opacity: 0; }
}

.reader-tts-widget-disc {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #9ecbf5 0%, #7eb8f0 38%, #5a9de8 68%, #4a90e2 100%);
  box-shadow:
    0 10px 22px -8px rgba(90, 157, 232, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  overflow: hidden;
  transform-origin: center center;
}

.reader-tts-widget-disc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.09) 0px,
    rgba(255, 255, 255, 0.09) 1px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
}

.reader-tts-widget-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 20%, rgba(186, 230, 253, 0.42) 0%, transparent 50%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.reader-tts-widget-disc.is-spinning {
  animation: readerDiscSpin 10s linear infinite;
}

@keyframes readerDiscSpin {
  to { transform: rotate(360deg); }
}

.reader-tts-widget-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64%;
  height: 64%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(186, 230, 253, 0.65) 0%, rgba(147, 197, 253, 0.65) 100%) center/cover no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 2px 10px rgba(74, 144, 226, 0.18);
  z-index: 1;
}

.reader-tts-widget-spindle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #d0d0d0, #808080 60%, #505050);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  z-index: 2;
  pointer-events: none;
}

/* 句级 / 逐词朗读高亮（只向前，不回退） */
.reader-sent--tts-active {
  background: rgba(74, 144, 226, 0.06);
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.reader-tts-word--read {
  color: rgba(74, 144, 226, 0.88);
  transition: color 0.18s ease;
}

.reader-tts-word--active {
  color: rgba(37, 99, 235, 0.98);
  background: rgba(74, 144, 226, 0.14);
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: color 0.18s ease, background-color 0.18s ease;
}

#view-reader.reader-theme-dark .reader-sent--tts-active {
  background: rgba(122, 184, 255, 0.1);
}

#view-reader.reader-theme-dark .reader-tts-word--read {
  color: rgba(122, 184, 255, 0.92);
}

#view-reader.reader-theme-dark .reader-tts-word--active {
  color: rgba(186, 230, 253, 1);
  background: rgba(122, 184, 255, 0.18);
}

.reader-tts-letter--read,
.reader-tts-letter--current {
  /* 逐字母模式已停用，保留规则避免旧 span 残留样式异常 */
  color: inherit;
  background: transparent;
}

/* ── 小狸对话 · 居中英雄区（对齐 AI 学习空间站震光波） ── */
.meet-chat-view--ari-hero {
  --ari-chat-inset-x: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.meet-chat-view--ari-hero .chat-feed-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 0;
  padding-left: var(--ari-chat-inset-x) !important;
  padding-right: var(--ari-chat-inset-x) !important;
}

.meet-chat-view--ari-hero .ari-chat-hero--in-feed {
  padding-top: 4px;
  padding-bottom: 12px;
}

.meet-chat-view--ari-hero .chat-feed {
  padding: 0;
}

.meet-chat-view--ari-hero .chat-header--ari-minimal,
.meet-chat-view--ari-hero .chat-header--ari-toolbar {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 var(--ari-chat-inset-x);
  background: transparent !important;
  flex-shrink: 0;
  display: block;
  gap: 0;
}

.chat-header-ari-toolbar-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-rows: 44px;
  align-items: center;
  width: 100%;
  column-gap: 2px;
}

.chat-header--ari-toolbar .top-back {
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  justify-self: start;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.chat-header--ari-toolbar .icon-chevron-left {
  width: 22px;
  height: 22px;
  display: block;
}

.chat-header--ari-toolbar .chat-header-ari-label {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #1d1d1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header--ari-toolbar .ari-chat-mode-switch--toolbar {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.ari-chat-mode-switch--toolbar .ari-chat-mode-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 4px 8px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--tab-inactive, #d4d8de);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.ari-chat-mode-switch--toolbar .ari-chat-mode-btn.active {
  background: rgba(255, 255, 255, 0.52);
  border: none;
  color: #4a90e2;
  box-shadow: none;
}

.ari-chat-hero--in-feed {
  flex-shrink: 0;
}

.ari-chat-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px var(--page-x) 16px;
}

.ari-hero-stage {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 12px;
  display: grid;
  place-items: center;
}

.ari-avatar-pulse-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 88px;
  margin-left: -44px;
  margin-top: -44px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.ari-avatar-pulse-rings.is-live {
  opacity: 1;
}

.ari-avatar-pulse-rings span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, #4a90e2 58%, transparent);
  box-shadow:
    0 0 10px color-mix(in srgb, #4a90e2 44%, transparent),
    inset 0 0 8px color-mix(in srgb, #4a90e2 16%, transparent);
  opacity: 0;
  transform: scale(1);
  animation: ariPulseRing 3.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.ari-avatar-pulse-rings span:nth-child(1) {
  animation-delay: 0s;
  border-color: color-mix(in srgb, #4a90e2 62%, transparent);
}

.ari-avatar-pulse-rings span:nth-child(3) {
  animation-delay: 1.7s;
  border-color: color-mix(in srgb, #4a90e2 55%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, #4a90e2 36%, transparent);
}

.ari-avatar-pulse-rings span:nth-child(4) {
  animation-delay: 2.55s;
  border-color: color-mix(in srgb, #34d399 52%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, #34d399 38%, transparent);
}

@property --ari-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.ari-avatar-glow-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: ariGlowAngleFlow 5.8s linear infinite;
}

.ari-avatar-glow-ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(
    from var(--ari-glow-angle),
    transparent 0deg,
    color-mix(in srgb, #4a90e2 82%, transparent) 14deg,
    color-mix(in srgb, #4a90e2 28%, transparent) 32deg,
    transparent 52deg,
    color-mix(in srgb, #a78bfa 78%, transparent) 88deg,
    color-mix(in srgb, #a78bfa 24%, transparent) 106deg,
    transparent 126deg,
    color-mix(in srgb, #6366f1 72%, transparent) 158deg,
    color-mix(in srgb, #6366f1 22%, transparent) 176deg,
    transparent 196deg,
    color-mix(in srgb, #34d399 68%, transparent) 228deg,
    color-mix(in srgb, #34d399 20%, transparent) 246deg,
    transparent 266deg,
    color-mix(in srgb, #60a5fa 66%, transparent) 298deg,
    color-mix(in srgb, #f472b6 18%, transparent) 316deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.ari-avatar-glow-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 4px;
  opacity: 0.55;
  background: conic-gradient(
    from calc(var(--ari-glow-angle) + 48deg),
    transparent 0deg,
    color-mix(in srgb, #4a90e2 45%, transparent) 28deg,
    transparent 72deg,
    color-mix(in srgb, #e879f9 40%, transparent) 128deg,
    transparent 168deg,
    color-mix(in srgb, #fbbf24 38%, transparent) 220deg,
    transparent 260deg,
    color-mix(in srgb, #60a5fa 42%, transparent) 312deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: blur(6px);
}

@keyframes ariGlowAngleFlow {
  to { --ari-glow-angle: 360deg; }
}

.ari-avatar-orbit-ring {
  display: none;
}

.ari-avatar-core {
  position: relative;
  z-index: 2;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #6ba3e8, #4a90e2);
  box-shadow: 0 10px 32px rgba(74, 144, 226, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.ari-vector-avatar {
  width: 72px;
  height: 72px;
  display: block;
}

.ari-chat-hero-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 对齐 AI 学习空间站 · 纯图标语音播报 */
.chat-voice-out-btn {
  all: unset;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.ari-voice-icon-btn svg {
  display: block;
}

.chat-row--ari-peer {
  align-items: flex-end;
}

.meet-chat-view--ari-hero .chat-bubble {
  max-width: min(calc(100% - 48px), 340px);
}

/* 语音输入 · 输入框内频谱波纹 */
.chat-voice-canvas-infield {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 28px;
  display: block;
  pointer-events: none;
  z-index: 2;
}

.chat-voice-canvas-infield[hidden] {
  display: none !important;
}

.chat-compose-foot.is-asr-live .chat-input {
  color: transparent;
  caret-color: transparent;
}

.chat-compose-foot.is-asr-live .chat-input::placeholder {
  color: transparent;
}

.chat-compose-icon.is-recording {
  color: #6366f1 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: chatMicPulse 0.85s ease-in-out infinite;
}

@keyframes chatMicPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.chat-row--ari-plain {
  justify-content: center;
}

.chat-row--ari-plain .chat-bubble {
  max-width: 92%;
}

/* 英文对话 · 消息翻译按钮（「中」字） */
.meet-chat-view--en .chat-row--peer-en {
  align-items: flex-start;
}

.meet-chat-view--en .chat-row--peer-en.chat-row--ari-peer {
  align-items: flex-start;
}

.meet-chat-view--en .chat-peer-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.meet-chat-view--en .chat-peer-head {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  max-width: 100%;
}

.meet-chat-view--en .chat-bubble-line {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.meet-chat-view--en .chat-bubble-line .chat-bubble {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(calc(100% - 32px), 340px);
}

.meet-chat-view--en .chat-bubble-cn {
  margin-left: 46px;
}

.chat-msg-trans-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  color: #8e9299;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.chat-msg-trans-btn .chat-msg-trans-glyph {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  color: inherit;
}

.chat-msg-trans-btn:active {
  transform: scale(0.94);
}

.chat-msg-trans-btn.active {
  color: #4a90e2;
  background: rgba(74, 144, 226, 0.14);
}

.chat-msg-trans-btn.loading {
  opacity: 0.55;
  pointer-events: none;
}

.chat-bubble-cn {
  font-size: 13px;
  line-height: 1.55;
  color: #4b5563;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(74, 144, 226, 0.06);
  border: 1px dashed rgba(74, 144, 226, 0.18);
  max-width: 100%;
  word-break: break-word;
  white-space: pre-wrap;
}

.chat-bubble-cn--loading {
  min-width: 52px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.is-desktop #view-reader .reader-chrome-top {
  padding-top: calc(max(var(--safe-t), var(--status-h)) + 4px) !important;
}

.reader-narrate-header {
  padding-top: 8px;
}

.ari-chat-hero-sub {
  margin-top: 4px;
  font-size: 13px;
  color: #86868b;
  line-height: 1.5;
  max-width: 280px;
}

.meet-chat-view--ari-hero .ari-chat-mode-switch:not(.ari-chat-mode-switch--inline):not(.ari-chat-mode-switch--toolbar) {
  margin: 0 var(--page-x) 12px;
  width: calc(100% - 2 * var(--page-x));
}

.chat-avatar--ari {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.16);
  background: #fff;
}

.chat-avatar--ari img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes ariPulseRing {
  0% { transform: scale(1); opacity: 0; }
  14% { opacity: 0.78; }
  58% { opacity: 0.22; }
  100% { transform: scale(1.92); opacity: 0; }
}

.ari-avatar-pulse-rings span:nth-child(2) {
  animation-delay: 0.85s;
  border-color: color-mix(in srgb, #a78bfa 58%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, #a78bfa 40%, transparent);
}

.ari-char-glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* 部分页头额外留白（app-main 已含状态栏高度） */
#view-profile .profile-toolbar {
  padding-top: 6px;
}

.ari-avatar-core {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(74, 144, 226, 0.18);
  background: #fff;
}

.ari-avatar-core .ari-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .reader-tts-aurora {
    animation: none !important;
    opacity: 0.55;
  }
  .reader-tts-widget-orbit,
  .reader-tts-widget-orbit--a,
  .reader-tts-widget-orbit--b,
  .reader-tts-widget-orbit--c,
  .reader-tts-widget-disc.is-spinning,
  .ari-avatar-glow-ring,
  .ari-avatar-pulse-rings span,
  .reader-narrate-eq span,
  .reader-narrate-ripple,
  .chat-compose-icon.voice-in-holding {
    animation: none !important;
  }
}