.avatar-mode-toolbar { max-width:900px; margin:20px auto 0; display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:inherit; }
.avatar-mode-switch { display:inline-flex; border:1px solid #dce2df; border-radius:12px; padding:4px; background:#f0f3f1; gap:4px; }
.avatar-mode-switch button { display:flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:9px; padding:9px 16px; background:transparent; color:#717b76; font-size:13px; font-weight:600; cursor:pointer; transition:background .2s,color .2s; }
.avatar-mode-switch button[aria-pressed="true"] { color:#22554b; background:#fff; box-shadow:0 1px 5px #223c3510; }
.avatar-mode-switch svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.avatar-mode-hint { color:#84908a; font-size:11px; letter-spacing:.04em; }
.avatar-panel { --avatar-scene-height:clamp(300px,43vh,470px); max-width:900px; margin:14px auto 0; color:#293f38; font-weight:400; }
.avatar-panel[hidden], .avatar-panel [hidden] { display:none !important; }
.avatar-stage { position:relative; overflow:hidden; border:1px solid #e0e4db; border-radius:20px; background:radial-gradient(ellipse at 45% 35%,#fffaf0 0%,#eeeae0 65%,#dedfd3 100%); }
.avatar-scene-frame { position:relative; height:calc(var(--avatar-scene-height) - 2px); }
.avatar-canvas { position:absolute; inset:0; }
.avatar-canvas canvas { display:block; width:100%; height:100%; }
.avatar-stage-heading { position:absolute; top:22px; left:25px; right:22px; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; pointer-events:none; }
.avatar-eyebrow { display:block; font-size:9px; letter-spacing:.2em; color:#7a897f; font-weight:700; }
.avatar-stage-heading h2 { margin:7px 0 0; font-size:16px; font-weight:500; letter-spacing:.09em; color:#40554a; }
.avatar-status { display:inline-flex; align-items:center; gap:7px; color:#4f7163; padding:7px 10px; background:#ffffffb8; border:1px solid #ffffffbb; border-radius:20px; font-size:10px; white-space:nowrap; }
.avatar-status > span:first-child { width:6px; height:6px; background:#6f9982; border-radius:50%; }
.avatar-panel[data-state="speaking"] .avatar-status > span:first-child { animation:avatar-pulse 1.1s infinite; background:#398871; }
.avatar-panel[data-state="waiting"] .avatar-status > span:first-child { background:#bc9961; animation:avatar-pulse 1.8s infinite; }
.avatar-stage-footer { position:absolute; bottom:18px; left:22px; right:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; z-index:2; pointer-events:none; }
.avatar-client-card { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#ffffffdc; border:1px solid #ffffff; border-radius:12px; backdrop-filter:blur(12px); box-shadow:0 4px 20px #334e3710; }
.avatar-client-card strong { display:block; font-size:13px; font-weight:600; color:#354c41; }
.avatar-client-card div > span { display:block; margin-top:2px; font-size:9px; color:#839087; letter-spacing:.03em; }
.avatar-client-dot { width:7px; height:7px; border-radius:50%; background:#7c9e89; }
.avatar-render-notice { position:absolute; top:43%; left:10%; right:10%; text-align:center; color:#687a6d; font-size:13px; padding:16px; background:#fffcf1e8; border-radius:12px; z-index:3; }
.avatar-dialogue { position:relative; margin:18px 3px 0; border:1px solid #e0e7e1; border-radius:16px; background:#fff; padding:19px 24px 12px; box-shadow:0 6px 24px #263c3310; }
.avatar-dialogue::before { content:""; width:15px; height:15px; position:absolute; top:-8px; left:calc(50% - 8px); background:#fff; border-left:1px solid #e0e7e1; border-top:1px solid #e0e7e1; transform:rotate(45deg); }
.avatar-dialogue-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.avatar-dialogue-heading > span:first-child { font-size:9px; color:#658978; letter-spacing:.18em; font-weight:700; }
.avatar-dialogue-heading > span:last-child { font-size:10px; color:#93a098; }
#avatar-caption { color:#33483e; font-size:16px; line-height:1.95; letter-spacing:.025em; margin:10px 0 14px; min-height:34px; white-space:pre-wrap; overflow-wrap:anywhere; max-height:190px; overflow-y:auto; }
.avatar-dialogue-controls { display:flex; align-items:center; gap:10px; border-top:1px solid #eff2ed; padding-top:10px; }
.avatar-dialogue-controls button { display:inline-flex; align-items:center; gap:8px; color:#728178; background:transparent; border:0; padding:5px 2px; font-size:11px; cursor:pointer; }
.avatar-dialogue-controls button:hover:not(:disabled) { color:#245c47; }
.avatar-dialogue-controls button:disabled { opacity:.4; cursor:default; }
#avatar-voice { padding:5px 10px; border-radius:15px; background:#f1f4f0; }
#avatar-voice[aria-pressed="true"] { background:#e5f1e9; color:#2d7556; }
.avatar-control-spacer { flex:1; }
.avatar-voice-notice { margin:8px 0 0; color:#896c44; font-size:11px; }
.avatar-voice-settings { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding-top:10px; font-size:12px; color:#667c6f; }
.avatar-voice-settings select { max-width:100%; min-height:36px; font:inherit; font-size:13px; color:#355c49; background:#f5f8f4; border:1px solid #dce5dc; border-radius:8px; padding:6px; }
.avatar-voice-settings select:focus-visible { outline:2px solid #407d66; outline-offset:2px; }
.avatar-ai-disclosure { margin:8px 0 0; color:#6b7b70; font-size:12px; line-height:1.6; }
.avatar-panel[data-state="preparing"] .avatar-status > span:first-child { background:#bc9961; animation:avatar-pulse 1.8s infinite; }
.avatar-history-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 5px 5px; color:#7b8a80; font-size:11px; background:none; border:0; cursor:pointer; }
.avatar-mode-toolbar button:focus-visible, .avatar-panel button:focus-visible { outline:2px solid #407d66; outline-offset:3px; }
#chat-container.avatar-active #chatbox { display:none; }
#chat-container.avatar-active.avatar-history-open #chatbox { display:block; height:260px; margin:14px auto; font-size:13px; border-color:#e0e7e1; border-radius:12px; }
#chat-container.avatar-active .input-wrapper { margin-top:14px; margin-bottom:22px; padding:6px; border:1px solid #dbe3dc; border-radius:14px; background:#fff; box-shadow:0 3px 12px #334e3707; }
#chat-container.avatar-active #message-input { border:0; background:none; height:78px; min-height:64px; padding:10px 12px; font-size:14px; box-shadow:none; resize:vertical; }
#chat-container.avatar-active #send-button, #chat-container.avatar-active #disable-button { height:78px; width:95px; flex-shrink:0; border-radius:10px; background:#365f50; font-size:12px; }
#chat-container.avatar-active #send-button:disabled { opacity:.5; cursor:wait; }
#chat-container.avatar-active #advice-container { position:static; width:auto; max-height:none; margin:14px 3px 0; }
.avatar-page-active #waiting-message { display:none !important; }
.roleplay-page .navbar-brand { margin-left:12px !important; }
/* Distinct action colors remain readable in the collapsed and desktop menus. */
#navbarNav :is(#reset-button-mobile,#reset-button-desktop) { background:#a65050; color:#fff; }
#navbarNav :is(#order-button-mobile,#order-button-desktop) { background:#34765b; color:#fff; }
#navbarNav :is(#param-button-mobile,#param-button-desktop) { background:#89632f; color:#fff; }
#navbarNav :is(#reset-button-mobile,#reset-button-desktop):hover { background:#8e4242; color:#fff; }
#navbarNav :is(#order-button-mobile,#order-button-desktop):hover { background:#285f48; color:#fff; }
#navbarNav :is(#param-button-mobile,#param-button-desktop):hover { background:#725123; color:#fff; }
#navbarNav :is(#reset-button-mobile,#reset-button-desktop,#order-button-mobile,#order-button-desktop,#param-button-mobile,#param-button-desktop):focus-visible { outline:3px solid #fff; outline-offset:3px; }
/* The legacy desktop navigation is wider than a tablet. Keep its existing
   mobile actions reachable without widening the entire conversation page. */
@media (max-width:1399px) {
  .roleplay-page .navbar { flex-wrap:wrap; justify-content:space-between; }
  .roleplay-page .navbar .navbar-toggler { display:block; }
  .roleplay-page .navbar .navbar-collapse { flex-basis:100%; flex-grow:1; }
  .roleplay-page .navbar .navbar-collapse:not(.show) { display:none !important; }
  .roleplay-page .navbar .navbar-collapse.show { display:block !important; }
  .roleplay-page #navbarNav .navbar-nav { flex-direction:column !important; align-items:stretch !important; width:100%; }
  .roleplay-page #navbarNav .d-sm-none { display:block !important; }
  .roleplay-page #navbarNav .desktop-nav-structure,
  .roleplay-page #navbarNav .d-sm-block { display:none !important; }
  .roleplay-page #navbarNav .mobile-nav-section { border-bottom:1px solid #495057; padding:8px 0; margin:0; }
  .roleplay-page #navbarNav .mobile-nav-section button { width:100% !important; margin:0 !important; padding:12px 16px !important; text-align:left !important; border:1px solid #ffffff26; border-radius:9px; }
  .roleplay-page #navbarNav .mobile-nav-section:first-child { display:grid; gap:8px; padding:12px 0; }
  .roleplay-page #navbarNav .switch-container { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; padding:10px 16px; }
  .roleplay-page #navbarNav .switch-item { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .roleplay-page #navbarNav .switch-label { color:#fff; font-size:12px; font-weight:400; }
  .roleplay-page #navbarNav .nav-link { overflow-wrap:anywhere; white-space:normal; }
}
@media (max-width:575px) {
  .roleplay-page #navbarNav .switch-container { grid-template-columns:1fr; }
}
@keyframes avatar-pulse { 50% { opacity:.3; } }
@media (min-width:576px) and (max-width:991px) {
  .avatar-page-active #chat-column { flex:0 0 70%; max-width:70%; }
  .avatar-page-active #sidebar-container { flex:0 0 30%; max-width:30%; }
  .avatar-page-active #right-sidebar-container { flex:0 0 70%; max-width:70%; margin-left:30%; }
  .avatar-mode-hint { display:none; }
}
@media (max-width:575px) {
  .avatar-mode-toolbar { margin-top:8px; }
  .avatar-mode-switch { width:100%; }
  .avatar-mode-switch button { flex:1; font-size:12px; }
  .avatar-mode-hint { display:none; }
  .avatar-panel { --avatar-scene-height:340px; }
  .avatar-stage { border-radius:16px; }
  .avatar-stage-heading { top:17px; left:17px; right:14px; }
  .avatar-stage-heading h2 { font-size:13px; letter-spacing:.02em; }
  .avatar-stage-footer { bottom:13px; left:14px; right:14px; }
  .avatar-client-card { padding:8px 10px; }
  .avatar-dialogue { padding:16px 17px 11px; }
  #avatar-caption { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) {
  .avatar-panel *, .avatar-mode-toolbar * { animation:none !important; transition:none !important; }
}

/* Both modes keep an identical scene viewport. Latest turns overlap its lower edge. */
.avatar-panel { container-type:inline-size; }
.dialogue-turns { display:none; }
.avatar-panel[data-view="dialogue"] .avatar-stage { background:#e9e8df; }
.avatar-panel[data-view="dialogue"] .dialogue-turns {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:16px;
  margin-top:-18px; padding:0 24px 24px;
}
.dialogue-turn {
  position:relative; min-width:0; width:82%; max-width:640px; padding:19px 21px 15px; border-radius:21px; z-index:2;
  border:1px solid #ffffffed; box-shadow:0 10px 35px #354c3810,0 2px 6px #354c3805;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.dialogue-turn-client { justify-self:start; background:#fffef9ed; border-top-left-radius:7px; }
.dialogue-turn-counselor { justify-self:end; background:#edf5f0ee; border-color:#ffffffbd; border-top-right-radius:7px; }
.dialogue-turn::after { content:""; position:absolute; top:19px; width:11px; height:11px; transform:rotate(45deg); }
.dialogue-turn-client::after { left:-6px; background:#fffef9; border-left:1px solid #fff; border-bottom:1px solid #fff; }
.dialogue-turn-counselor::after { right:-6px; background:#edf5f0; border-top:1px solid #ffffffbd; border-right:1px solid #ffffffbd; }
.dialogue-turn-heading { display:flex; align-items:center; gap:7px; color:#486052; font-size:10px; font-weight:600; letter-spacing:.03em; }
.dialogue-role-dot { width:5px; height:5px; flex:none; border-radius:50%; background:#b09368; }
.dialogue-turn-counselor .dialogue-role-dot { background:#56876e; }
.dialogue-role-en { margin-left:auto; color:#85958a; font-size:8px; letter-spacing:.15em; }
.dialogue-turn-counselor .dialogue-turn-heading { flex-direction:row-reverse; }
.dialogue-turn-counselor .dialogue-role-en { margin-left:0; margin-right:auto; }
.dialogue-turn p {
  margin:13px 0 14px; max-height:174px; overflow-y:auto; overscroll-behavior:contain;
  white-space:pre-wrap; overflow-wrap:anywhere; color:#30493c; font-size:15px; line-height:1.95;
  letter-spacing:.025em; scrollbar-width:thin; scrollbar-color:#b6c8bb transparent;
}
.dialogue-turn p:focus-visible { outline:2px solid #648875; outline-offset:4px; border-radius:3px; }
.dialogue-turn[data-empty="true"] p { color:#7a887f; }
.dialogue-turn-meta { display:block; border-top:1px solid #59745f12; padding-top:9px; font-size:9px; color:#7a897e; line-height:1.5; }
.avatar-panel[data-state="speaking"] .dialogue-turn-client { border-color:#9fbead; box-shadow:0 10px 35px #354c3810,0 0 0 3px #b4cdbc24; }
.avatar-panel[data-state="waiting"] .dialogue-turn-client .dialogue-role-dot { animation:avatar-pulse 1.8s infinite; }
.avatar-panel[data-view="dialogue"] .avatar-dialogue { margin:12px 0 0; padding:13px 18px; border-radius:16px; box-shadow:none; background:#fbfcf9; border-color:#e5eae3; }
.avatar-panel[data-view="dialogue"] .avatar-dialogue::before,
.avatar-panel[data-view="dialogue"] .avatar-dialogue-heading,
.avatar-panel[data-view="dialogue"] #avatar-caption { display:none; }
.avatar-panel[data-view="dialogue"] .avatar-dialogue-controls { padding-top:0; border:0; }
.avatar-panel[data-view="dialogue"] .avatar-history-toggle { padding:15px 5px 4px; font-size:12px; }

/* Record, review in the existing editor, then explicitly send. */
#dictation-panel { max-width:900px; margin:18px auto 0; color:#425c4e; }
.dictation-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.dictation-toggle { display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:9px 14px; border:1px solid #cbdcd1; border-radius:24px; background:#f3f7f3; color:#365f4b; font-size:13px; font-weight:600; cursor:pointer; }
.dictation-toggle svg { width:15px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.dictation-toggle:hover:not(:disabled) { background:#e7f0e8; border-color:#95b19e; }
.dictation-toggle:disabled { opacity:.55; cursor:default; }
.dictation-toggle:focus-visible, .dictation-secondary:focus-visible { outline:2px solid #407d66; outline-offset:3px; }
.dictation-flow { margin-left:auto; font-size:11px; color:#748579; }
.dictation-flow span { padding:0 7px; color:#adb8ae; }
.dictation-status { font-size:12px; margin:9px 0 0; line-height:1.6; }
.dictation-disclosure { font-size:10px; line-height:1.6; color:#7c8a80; margin:4px 0 0; }
.dictation-secondary { border:0; background:transparent; color:#687e6d; text-decoration:underline; text-underline-offset:3px; font-size:12px; min-height:42px; padding:6px; cursor:pointer; }
.dictation-timer { font-variant-numeric:tabular-nums; font-size:13px; color:#a2584e; }
#dictation-panel [hidden] { display:none !important; }
#dictation-panel[data-state="recording"] .dictation-toggle { color:#9c4d43; background:#fff0ed; border-color:#e8bcb2; }
#dictation-panel[data-state="recording"] .dictation-toggle svg { animation:avatar-pulse 1.3s infinite; }
#dictation-panel[data-state="review"] .dictation-status { color:#2e7954; }
#dictation-panel[data-state="error"] .dictation-status { color:#9a5546; }
#chat-container.avatar-active #message-input { font-size:16px; }
#chat-container.avatar-active .input-wrapper:focus-within { border-color:#749881; box-shadow:0 0 0 3px #73968014; }
@container (max-width:640px) {
  .avatar-panel[data-view="dialogue"] .dialogue-turns { gap:13px; padding:0 16px 19px; }
  .dialogue-turn { width:90%; padding:15px 17px 12px; border-radius:18px; }
  .dialogue-turn-client { justify-self:start; border-top-left-radius:6px; }
  .dialogue-turn-counselor { justify-self:end; border-top-right-radius:6px; }
  .dialogue-turn p { margin:10px 0; max-height:142px; font-size:14px; line-height:1.85; }
  .dialogue-turn-meta { padding-top:8px; }
  .avatar-panel[data-view="dialogue"] .avatar-dialogue { padding:12px 14px; }
}
@media (max-width:575px) {
  .avatar-mode-switch button { padding:10px 7px; gap:4px; font-size:11px; white-space:nowrap; }
  .avatar-mode-switch svg { width:14px; height:14px; }
  .dictation-flow { font-size:10px; }
  .dictation-flow span { padding:0 3px; }
  #dictation-panel { margin-top:16px; }
  .dictation-disclosure { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { #dictation-panel * { animation:none !important; } }

/* Compact mobile action cards with consistent icons, alignment and tap targets. */
@media (max-width:1399px) {
  .roleplay-page #navbarNav .mobile-nav-structure { width:100%; }
  .roleplay-page #navbarNav .conversation-actions { display:grid; gap:8px; padding:14px 0; }
  .roleplay-page #navbarNav .conversation-actions .conversation-action {
    display:flex !important; align-items:center; gap:12px; width:100% !important; min-width:0;
    min-height:58px; padding:10px 14px !important; margin:0 !important;
    border:1px solid #ffffff20; border-radius:12px; text-align:left !important;
    font:inherit; font-size:14px !important; font-weight:600; line-height:1.5;
  }
  .roleplay-page #navbarNav #reset-button-mobile { background:#f8eeed; color:#854343; }
  .roleplay-page #navbarNav #order-button-mobile { background:#eaf4ed; color:#315d48; }
  .roleplay-page #navbarNav #param-button-mobile { background:#f6f0e5; color:#795b31; }
  .roleplay-page #navbarNav .conversation-action:hover { filter:brightness(.96); }
  .conversation-action-icon { display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none; border-radius:9px; background:#ffffffb0; }
  .conversation-action-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .conversation-action-label { flex:1; }
  .conversation-action-arrow { font-size:23px; font-weight:400; opacity:.55; }
}