/* ============================================================================
 * css/tutor.css — AI Tutor view styles
 *
 * Loaded AFTER css/styles.css and css/themes.css. Rules here override the
 * shared sheet for anything visible inside the AI Tutor view (#view-aitutor).
 *
 * Scoping rules:
 *   - Prefer scoping new selectors under #view-aitutor or body.view-aitutor-active
 *     so they cannot bleed into Profe, Lesson Studio, Chat, or the games.
 *   - DO NOT redefine the shared TTS contract classes at a level that would
 *     change Profe's rendering: .tutor-speak-group, .tutor-bubble, .tutor-es
 *     are walked by tutorSpeak() via .closest() and are shared with the Profe
 *     curriculum tutor. If you need a tutor-only variant, add a new wrapper
 *     class (e.g. .tutor-bubble-v2) rather than restyling the base.
 *   - Animations must have a matching reset under
 *     @media (prefers-reduced-motion: reduce) near the bottom of this file.
 *
 * When to add here vs. css/styles.css:
 *   - HERE: anything only visible inside #view-aitutor, new wrapper classes,
 *     new animation keyframes named tutor-* that only the tutor uses.
 *   - styles.css: cross-view primitives (buttons, cards, typography), anything
 *     Profe / Lesson Studio / games also consume.
 *
 * Cache: changes here require a CACHE_NAME bump in sw.js before deploy.
 * ========================================================================== */

/* Speak/pause/stop control buttons inside tutor bubbles.
 * Base opacity of 0.5 in styles.css is too dim against dark themes —
 * on the Deep Space / Midnight palettes the speaker + pause icons
 * were nearly invisible. These scoped rules boost default opacity
 * and add a themeable color so the icons read on any background.
 * Scoped to #view-aitutor so Profe and other consumers of
 * .tutor-speak-btn keep their current appearance. */
#view-aitutor .tutor-bubble .tutor-speak-btn {
  opacity: 0.85;
  color: var(--text-muted, #8892a6);
  transition: opacity 0.15s ease, color 0.15s ease;
}
#view-aitutor .tutor-bubble .tutor-speak-btn:hover {
  opacity: 1;
  color: var(--blue, #4A90D9);
}
#view-aitutor .tutor-bubble .tutor-stop-btn {
  opacity: 0.9;
}
#view-aitutor .tutor-bubble .tutor-stop-btn:hover {
  opacity: 1;
}

#view-aitutor .tutor-presence {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 14px;
  padding: 14px;
  color: var(--text, #111827);
  border: 1px solid var(--border-med, var(--border, rgba(148, 163, 184, 0.28)));
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--accent, #4A90D9) 10%, transparent), transparent 38%),
    var(--card-bg, #ffffff);
  box-shadow: var(--card-shadow, 0 18px 42px rgba(15, 23, 42, 0.10));
}

#view-aitutor .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#view-aitutor .tutor-presence-avatar {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 18px;
  padding: 3px;
  background: linear-gradient(135deg, var(--accent, #4A90D9), color-mix(in srgb, var(--accent, #4A90D9) 28%, #ffffff));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

#view-aitutor .tutor-presence-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  display: block;
}

#view-aitutor .tutor-presence-speaking .tutor-presence-avatar::after,
#view-aitutor .tutor-presence-listening .tutor-presence-avatar::after,
#view-aitutor .tutor-presence-thinking .tutor-presence-avatar::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 22px;
  border: 2px solid color-mix(in srgb, var(--accent, #4A90D9) 62%, transparent);
  animation: tutor-presence-ring 1.35s ease-in-out infinite;
}

#view-aitutor .tutor-presence-copy {
  min-width: 0;
  flex: 1;
}

#view-aitutor .tutor-presence-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#view-aitutor .tutor-presence-name {
  font-size: 17px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--heading, var(--text, #111827));
}

#view-aitutor .tutor-presence-detail,
#view-aitutor .tutor-presence-desc {
  color: var(--text-muted, var(--text-dim, #64748b));
}

#view-aitutor .tutor-presence-detail {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
}

#view-aitutor .tutor-presence-desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
}

#view-aitutor .tutor-presence-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--pill-border, color-mix(in srgb, var(--accent, #4A90D9) 38%, transparent));
  background: var(--pill-bg, color-mix(in srgb, var(--accent, #4A90D9) 18%, var(--card-bg, transparent)));
  color: var(--pill-text, var(--text, #111827));
  font-size: 12px;
  font-weight: 800;
}

#view-aitutor .tutor-presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent, #4A90D9);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #4A90D9) 18%, transparent);
}

#view-aitutor .tutor-presence-listening .tutor-presence-dot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
  animation: tutor-presence-pulse 1s ease-in-out infinite;
}

#view-aitutor .tutor-presence-speaking .tutor-presence-dot,
#view-aitutor .tutor-presence-thinking .tutor-presence-dot {
  animation: tutor-presence-pulse 1.15s ease-in-out infinite;
}

#view-aitutor .tutor-presence-roleplay .tutor-presence-pill {
  background: color-mix(in srgb, #8b5cf6 14%, transparent);
  border-color: color-mix(in srgb, #8b5cf6 28%, transparent);
}

#view-aitutor .tutor-welcome {
  position: relative;
}

#view-aitutor .tutor-welcome .tw-avatar {
  position: relative;
}

#view-aitutor .tutor-welcome.tutor-presence-speaking .tw-avatar::after,
#view-aitutor .tutor-welcome.tutor-presence-listening .tw-avatar::after,
#view-aitutor .tutor-welcome.tutor-presence-thinking .tw-avatar::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--accent, #4A90D9) 62%, transparent);
  animation: tutor-presence-ring 1.35s ease-in-out infinite;
}

#view-aitutor .tutor-welcome-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--text-muted, #64748b);
  font-size: 13px;
  font-weight: 800;
}

#view-aitutor .tutor-welcome-meta .tutor-presence-pill {
  min-height: 26px;
  padding: 4px 9px;
}

#view-aitutor .tutor-welcome-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 8px 10px;
  border: 1px dashed color-mix(in srgb, var(--accent, #4A90D9) 28%, var(--border, rgba(148, 163, 184, 0.28)));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #4A90D9) 7%, transparent);
  color: var(--text-muted, #64748b);
  font-size: 12px;
  line-height: 1.35;
}

#view-aitutor .tutor-welcome-live strong {
  color: var(--accent, #4A90D9);
  text-transform: uppercase;
  font-size: 11px;
}

#view-aitutor .tutor-welcome-live button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--accent, #4A90D9) 28%, transparent);
  border-radius: 10px;
  background: var(--card-bg, var(--bg, #ffffff));
  color: var(--text, #111827);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

#view-aitutor .tutor-live-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -4px 0 12px;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent, #4A90D9) 28%, var(--border, rgba(148, 163, 184, 0.28)));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent, #4A90D9) 7%, transparent);
}

#view-aitutor .tutor-live-copy {
  min-width: 0;
}

#view-aitutor .tutor-live-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--accent, #4A90D9);
}

#view-aitutor .tutor-live-title {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted, #64748b);
}

#view-aitutor .tutor-live-btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent, #4A90D9) 28%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-bg, #ffffff) 76%, var(--bg, transparent));
  color: var(--text, #111827);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

#view-aitutor .tutor-live-state-connected .tutor-live-btn,
#view-aitutor .tutor-live-state-speaking .tutor-live-btn,
#view-aitutor .tutor-live-state-connecting .tutor-live-btn {
  background: color-mix(in srgb, var(--accent, #4A90D9) 16%, transparent);
}

#view-aitutor .tutor-live-btn[disabled] {
  opacity: 0.66;
  cursor: wait;
}

#view-aitutor .tutor-live-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

#view-aitutor .tutor-live-link {
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

#view-aitutor .tutor-live-btn:hover,
#view-aitutor .tutor-live-link:hover,
#view-aitutor .tutor-suggestion-chip:hover,
#view-aitutor .tutor-welcome-live button:hover {
  border-color: var(--accent, #4A90D9);
  color: var(--accent, #4A90D9);
}

#view-aitutor .tutor-live-stage {
  display: none;
  margin: 0 0 12px;
}

#view-aitutor .tutor-live-stage.active {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  pointer-events: none;
}

#view-aitutor .tutor-welcome .tutor-live-stage.active {
  justify-content: center;
  margin-top: 14px;
}

#view-aitutor .tutor-live-video-shell {
  position: relative;
  width: clamp(150px, 24vw, 220px);
  min-height: 0;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent, #4A90D9) 18%, var(--border, rgba(148, 163, 184, 0.28)));
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--accent, #4A90D9) 20%, transparent), transparent 42%),
    color-mix(in srgb, var(--card-bg, #ffffff) 82%, var(--bg, transparent));
  pointer-events: auto;
}

#view-aitutor .tutor-live-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--text-muted, #64748b);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

#view-aitutor .tutor-live-video,
#view-aitutor .tutor-live-audio {
  width: 100%;
}

#view-aitutor .tutor-live-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

#view-aitutor .tutor-live-audio {
  display: none;
}

#view-aitutor .tutor-input-bar {
  position: relative;
  z-index: 3;
  background: color-mix(in srgb, var(--card-bg, var(--bg, #ffffff)) 92%, var(--bg, transparent));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

#view-aitutor .tutor-suggestion-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 0 9px;
  overflow-x: auto;
  scrollbar-width: thin;
}

#view-aitutor .tutor-suggestion-chip {
  flex: 0 0 auto;
  max-width: min(260px, 72vw);
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.32));
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-bg, #ffffff) 72%, var(--bg, transparent));
  color: var(--text, #111827);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
}

#view-aitutor .tutor-input-row {
  align-items: flex-end;
}

#view-aitutor .tutor-img-btn,
#view-aitutor .tutor-mic-btn,
#view-aitutor .tutor-send-btn {
  min-width: 44px;
  min-height: 44px;
}

#view-aitutor .tutor-img-btn,
#view-aitutor .tutor-mic-btn {
  background: var(--input-bg, var(--card-bg, var(--bg, #ffffff)));
  color: var(--text, #111827);
  border-color: var(--border-med, var(--border, rgba(148, 163, 184, 0.32)));
}

body.dark #view-aitutor .tutor-input-bar,
body.theme-ocean #view-aitutor .tutor-input-bar,
body.theme-sunset-dark #view-aitutor .tutor-input-bar,
body.theme-teal-dark #view-aitutor .tutor-input-bar,
body.theme-turquoise-dark #view-aitutor .tutor-input-bar,
body.theme-forest #view-aitutor .tutor-input-bar,
body.theme-nord #view-aitutor .tutor-input-bar,
body.theme-midnight #view-aitutor .tutor-input-bar,
body.theme-contrast #view-aitutor .tutor-input-bar,
body.theme-aurora #view-aitutor .tutor-input-bar,
body.theme-cherry #view-aitutor .tutor-input-bar,
body.theme-mocha #view-aitutor .tutor-input-bar {
  background: var(--bg, #09090b);
}

body.dark #view-aitutor .tutor-live-btn,
body.dark #view-aitutor .tutor-welcome-live button,
body.dark #view-aitutor .tutor-suggestion-chip,
body.dark #view-aitutor .tutor-img-btn,
body.dark #view-aitutor .tutor-mic-btn,
body.theme-ocean #view-aitutor .tutor-live-btn,
body.theme-ocean #view-aitutor .tutor-welcome-live button,
body.theme-ocean #view-aitutor .tutor-suggestion-chip,
body.theme-ocean #view-aitutor .tutor-img-btn,
body.theme-ocean #view-aitutor .tutor-mic-btn,
body.theme-sunset-dark #view-aitutor .tutor-live-btn,
body.theme-sunset-dark #view-aitutor .tutor-welcome-live button,
body.theme-sunset-dark #view-aitutor .tutor-suggestion-chip,
body.theme-sunset-dark #view-aitutor .tutor-img-btn,
body.theme-sunset-dark #view-aitutor .tutor-mic-btn,
body.theme-teal-dark #view-aitutor .tutor-live-btn,
body.theme-teal-dark #view-aitutor .tutor-welcome-live button,
body.theme-teal-dark #view-aitutor .tutor-suggestion-chip,
body.theme-teal-dark #view-aitutor .tutor-img-btn,
body.theme-teal-dark #view-aitutor .tutor-mic-btn,
body.theme-turquoise-dark #view-aitutor .tutor-live-btn,
body.theme-turquoise-dark #view-aitutor .tutor-welcome-live button,
body.theme-turquoise-dark #view-aitutor .tutor-suggestion-chip,
body.theme-turquoise-dark #view-aitutor .tutor-img-btn,
body.theme-turquoise-dark #view-aitutor .tutor-mic-btn,
body.theme-forest #view-aitutor .tutor-live-btn,
body.theme-forest #view-aitutor .tutor-welcome-live button,
body.theme-forest #view-aitutor .tutor-suggestion-chip,
body.theme-forest #view-aitutor .tutor-img-btn,
body.theme-forest #view-aitutor .tutor-mic-btn,
body.theme-nord #view-aitutor .tutor-live-btn,
body.theme-nord #view-aitutor .tutor-welcome-live button,
body.theme-nord #view-aitutor .tutor-suggestion-chip,
body.theme-nord #view-aitutor .tutor-img-btn,
body.theme-nord #view-aitutor .tutor-mic-btn,
body.theme-midnight #view-aitutor .tutor-live-btn,
body.theme-midnight #view-aitutor .tutor-welcome-live button,
body.theme-midnight #view-aitutor .tutor-suggestion-chip,
body.theme-midnight #view-aitutor .tutor-img-btn,
body.theme-midnight #view-aitutor .tutor-mic-btn,
body.theme-contrast #view-aitutor .tutor-live-btn,
body.theme-contrast #view-aitutor .tutor-welcome-live button,
body.theme-contrast #view-aitutor .tutor-suggestion-chip,
body.theme-contrast #view-aitutor .tutor-img-btn,
body.theme-contrast #view-aitutor .tutor-mic-btn,
body.theme-aurora #view-aitutor .tutor-live-btn,
body.theme-aurora #view-aitutor .tutor-welcome-live button,
body.theme-aurora #view-aitutor .tutor-suggestion-chip,
body.theme-aurora #view-aitutor .tutor-img-btn,
body.theme-aurora #view-aitutor .tutor-mic-btn,
body.theme-cherry #view-aitutor .tutor-live-btn,
body.theme-cherry #view-aitutor .tutor-welcome-live button,
body.theme-cherry #view-aitutor .tutor-suggestion-chip,
body.theme-cherry #view-aitutor .tutor-img-btn,
body.theme-cherry #view-aitutor .tutor-mic-btn,
body.theme-mocha #view-aitutor .tutor-live-btn,
body.theme-mocha #view-aitutor .tutor-welcome-live button,
body.theme-mocha #view-aitutor .tutor-suggestion-chip,
body.theme-mocha #view-aitutor .tutor-img-btn,
body.theme-mocha #view-aitutor .tutor-mic-btn {
  background: color-mix(in srgb, var(--input-bg, var(--card-bg, #18181b)) 78%, var(--bg, #09090b));
  border-color: color-mix(in srgb, var(--border-med, #3f3f46) 80%, var(--text, #ffffff) 10%);
  color: var(--text, #f8fafc);
}

body.dark #view-aitutor .tutor-live-state-connected .tutor-live-btn,
body.dark #view-aitutor .tutor-live-state-speaking .tutor-live-btn,
body.dark #view-aitutor .tutor-live-state-connecting .tutor-live-btn,
body.theme-ocean #view-aitutor .tutor-live-state-connected .tutor-live-btn,
body.theme-ocean #view-aitutor .tutor-live-state-speaking .tutor-live-btn,
body.theme-ocean #view-aitutor .tutor-live-state-connecting .tutor-live-btn,
body.theme-sunset-dark #view-aitutor .tutor-live-state-connected .tutor-live-btn,
body.theme-sunset-dark #view-aitutor .tutor-live-state-speaking .tutor-live-btn,
body.theme-sunset-dark #view-aitutor .tutor-live-state-connecting .tutor-live-btn,
body.theme-teal-dark #view-aitutor .tutor-live-state-connected .tutor-live-btn,
body.theme-teal-dark #view-aitutor .tutor-live-state-speaking .tutor-live-btn,
body.theme-teal-dark #view-aitutor .tutor-live-state-connecting .tutor-live-btn,
body.theme-turquoise-dark #view-aitutor .tutor-live-state-connected .tutor-live-btn,
body.theme-turquoise-dark #view-aitutor .tutor-live-state-speaking .tutor-live-btn,
body.theme-turquoise-dark #view-aitutor .tutor-live-state-connecting .tutor-live-btn,
body.theme-forest #view-aitutor .tutor-live-state-connected .tutor-live-btn,
body.theme-forest #view-aitutor .tutor-live-state-speaking .tutor-live-btn,
body.theme-forest #view-aitutor .tutor-live-state-connecting .tutor-live-btn,
body.theme-nord #view-aitutor .tutor-live-state-connected .tutor-live-btn,
body.theme-nord #view-aitutor .tutor-live-state-speaking .tutor-live-btn,
body.theme-nord #view-aitutor .tutor-live-state-connecting .tutor-live-btn,
body.theme-midnight #view-aitutor .tutor-live-state-connected .tutor-live-btn,
body.theme-midnight #view-aitutor .tutor-live-state-speaking .tutor-live-btn,
body.theme-midnight #view-aitutor .tutor-live-state-connecting .tutor-live-btn,
body.theme-contrast #view-aitutor .tutor-live-state-connected .tutor-live-btn,
body.theme-contrast #view-aitutor .tutor-live-state-speaking .tutor-live-btn,
body.theme-contrast #view-aitutor .tutor-live-state-connecting .tutor-live-btn,
body.theme-aurora #view-aitutor .tutor-live-state-connected .tutor-live-btn,
body.theme-aurora #view-aitutor .tutor-live-state-speaking .tutor-live-btn,
body.theme-aurora #view-aitutor .tutor-live-state-connecting .tutor-live-btn,
body.theme-cherry #view-aitutor .tutor-live-state-connected .tutor-live-btn,
body.theme-cherry #view-aitutor .tutor-live-state-speaking .tutor-live-btn,
body.theme-cherry #view-aitutor .tutor-live-state-connecting .tutor-live-btn,
body.theme-mocha #view-aitutor .tutor-live-state-connected .tutor-live-btn,
body.theme-mocha #view-aitutor .tutor-live-state-speaking .tutor-live-btn,
body.theme-mocha #view-aitutor .tutor-live-state-connecting .tutor-live-btn {
  background: color-mix(in srgb, var(--accent, #4A90D9) 22%, var(--input-bg, var(--card-bg, #18181b)));
}

#view-aitutor .tutor-mic-btn.recording {
  background: #ef4444;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16);
}

#view-aitutor .tutor-send-btn[disabled] {
  opacity: 0.6;
  cursor: wait;
}

@keyframes tutor-presence-ring {
  0% { transform: scale(0.96); opacity: 0.78; }
  70% { transform: scale(1.08); opacity: 0.12; }
  100% { transform: scale(1.1); opacity: 0; }
}

@keyframes tutor-presence-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.28); opacity: 0.62; }
}

@media (max-width: 640px) {
  #view-aitutor .tutor-presence {
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 12px;
    padding: 12px;
    border-radius: 16px;
  }

  #view-aitutor .tutor-presence-avatar {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 15px;
  }

  #view-aitutor .tutor-presence-avatar img {
    border-radius: 12px;
  }

  #view-aitutor .tutor-presence-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  #view-aitutor .tutor-presence-name {
    font-size: 15px;
  }

  #view-aitutor .tutor-presence-desc {
    display: none;
  }

  #view-aitutor .tutor-welcome-meta {
    flex-direction: column;
    gap: 8px;
  }

  #view-aitutor .tutor-live-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  #view-aitutor .tutor-welcome-live {
    align-items: flex-start;
    flex-direction: column;
  }

  #view-aitutor .tutor-live-title {
    font-size: 11px;
  }

  #view-aitutor .tutor-live-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  #view-aitutor .tutor-live-video-shell,
  #view-aitutor .tutor-live-placeholder {
    width: clamp(128px, 48vw, 168px);
  }

  #view-aitutor .tutor-suggestion-row {
    justify-content: flex-start;
    margin: 0 -2px;
    padding-bottom: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-aitutor .tutor-presence-avatar::after,
  #view-aitutor .tutor-welcome .tw-avatar::after,
  #view-aitutor .tutor-presence-dot {
    animation: none !important;
  }
}

/* ============================================================================
 * Tutor font + reading-mode controls (PR-G).
 *
 * Per-user font choice and reading mode are stored in
 * _tutorSettings.tutorFont / _tutorSettings.readingMode (localStorage).
 * On settings change, the JS handler updates these CSS variables on
 * #view-aitutor — already-rendered bubbles inherit instantly via CSS.
 * No DOM rebuild, no flicker.
 *
 * Variables default to the app's existing system stack, so if a user
 * hasn't picked anything yet (or readingMode is off), the appearance
 * matches the prior default exactly.
 * ========================================================================== */
#view-aitutor {
  --tutor-font-stack: 'Segoe UI', -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Noto Sans SC", "Noto Sans KR", Arial, sans-serif;
  --tutor-font-size: 15px;
  --tutor-line-height: 1.6;
  --tutor-letter-spacing: 0;
  --tutor-bold-weight: 600;
}

/* Apply only inside the bubble content. Header / settings / chrome stay in
 * the app's default font for visual consistency with the rest of the UI. */
#view-aitutor .tutor-bubble .tutor-es,
#view-aitutor .tutor-bubble .tutor-en {
  font-family: var(--tutor-font-stack);
  font-size: var(--tutor-font-size);
  line-height: var(--tutor-line-height);
  letter-spacing: var(--tutor-letter-spacing);
}

#view-aitutor .tutor-bubble .tutor-es strong,
#view-aitutor .tutor-bubble .tutor-en strong {
  font-weight: var(--tutor-bold-weight);
}

/* Tighter paragraph rhythm inside the bubble (matches debate-synthesis specs). */
#view-aitutor .tutor-bubble .tutor-es p,
#view-aitutor .tutor-bubble .tutor-en p {
  margin: 0 0 0.85em;
}
#view-aitutor .tutor-bubble .tutor-es p:first-child,
#view-aitutor .tutor-bubble .tutor-en p:first-child {
  margin-top: 0;
}
#view-aitutor .tutor-bubble .tutor-es p:last-child,
#view-aitutor .tutor-bubble .tutor-en p:last-child {
  margin-bottom: 0;
}

/* Reading-mode bumps applied via #view-aitutor.tutor-reading-mode parent class. */
#view-aitutor.tutor-reading-mode {
  --tutor-font-size: 17px;
  --tutor-line-height: 1.75;
  --tutor-letter-spacing: 0.01em;
}

/* Ship one max-width cap so long lines don't sprawl on wide desktops.
 * Mobile + tablet keep full bubble width. */
@media (min-width: 1024px) {
  #view-aitutor .tutor-bubble .tutor-es,
  #view-aitutor .tutor-bubble .tutor-en {
    max-width: 640px;
  }
}