/* style.css - Full Version using CSS Custom Properties */

/* Define default theme variables — Dialogiq brand: deep navy, carmine, ivory */
:root {
    /* ---- Brand primitives: the four-color identity ----
       Navy (structure), pine green (action), gray-green (quiet accent), ox blood (every red).
       Defined here as the always-available base; the active palette in
       /colors/colors-classic.css maps the semantic tokens onto these. */
    --brand-navy: #1a2a3b;
    --brand-pine: #106b0a;   /* Evergreen/pine — mic, send, active state, outgoing speech */
    --brand-sage: #74806c;
    --brand-oxblood: #86243a;

    /* Semantic roles derived from the brand */
    --action-icon-color: #133548;   /* Mic + send — the two icons that should stand out */
    --caution-color: #b45309;                   /* Sober amber: the ONE non-brand semantic (active "please wait / don't close" banners) */
    --text-pre-scenario: var(--brand-navy);     /* Opening screens: navy text + borders */
    --text-in-scenario: #15191d;                /* Once the scenario loads: near-black */

    /* One easing curve for anything that marks a change of state rather than a
       hover: slow out of the gate, long settle. Linear and `ease` are the two
       curves that read as cheap, and the exam card's motion is the main place a
       student registers whether this is a considered piece of software. */
    --ease-scene: cubic-bezier(0.32, 0.72, 0.24, 1);
    --dur-scene: 820ms;

    --primary-color: #1a2a3b;
    --secondary-color: #101d2a;
    --accent-color: var(--brand-oxblood);
    --text-color-primary: #26313d;
    --text-color-secondary: #5c6873;
    --background-main: #e1e1db; /* Site background behind the cards */
    --background-card: #f2f2ea; /* Warm parchment ivory — only the cards carry the ivory (see colors-classic.css) */
    --background-input: #ffffff;
    --border-color: #dcdad4;
    --border-color-input: #c9ccd1;
    --border-color-input-focus: var(--primary-color);
    --button-text-color: #ffffff;
    --link-color: var(--accent-color);
    --link-color-hover: color-mix(in srgb, var(--brand-oxblood) 80%, black);

    --progress-bar-fill-color: var(--accent-color);

    --auth-logo-opacity-hover: 0.85;
    --auth-button-gradient-start: var(--primary-color);
    --auth-button-gradient-end: var(--secondary-color);
    --auth-button-hover-gradient-start: color-mix(in srgb, var(--primary-color) 90%, black);
    --auth-button-hover-gradient-end: color-mix(in srgb, var(--secondary-color) 90%, black);
    --chat-student-message-bg: #e8edf3;
    --chat-interlocutor-message-bg: #f6f4ee;
    --chat-message-hover-bg: #efe8d8;
    --chat-input-border: var(--primary-color);
    --chat-input-border-focus: var(--primary-color);
    --word-count-color: var(--brand-pine);
    --icon-button-svg-fill: #333a41;
    --icon-button-svg-fill-hover: var(--accent-color);
    --icon-button-mic-recording-fill: var(--brand-oxblood);
    --tooltip-bg: rgba(26,42,59,0.9);
    --tooltip-text-color: #ffffff;
    --error-message-color: var(--brand-oxblood);
    --error-input-border: var(--error-message-color);
    --consent-invalid-border: var(--error-message-color);
    --consent-invalid-bg: color-mix(in srgb, var(--brand-oxblood) 6%, #ffffff);
    /* Resource affordances use a deep, desaturated evergreen (see colors-classic.css) */
    --resource-accent: #2f5233;
    --activity-link-color: var(--resource-accent);
    --activity-link-hover-color: color-mix(in srgb, var(--resource-accent) 78%, black);
    --activity-link-hover-bg: color-mix(in srgb, var(--resource-accent) 8%, #ffffff);
    --activity-gate-bg: color-mix(in srgb, var(--resource-accent) 8%, #ffffff);
    --activity-gate-border: var(--resource-accent);
    --activity-gate-text-color: var(--text-color-primary);
    --spinner-border-top-color: var(--primary-color);
    --spinner-border-color: #ece9e2;
    --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-technical: 'Roboto Mono', 'SF Mono', monospace;
    --font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif; /* Serif for large headers — academic register */

    --text-spacing-wide: 0.05em; /* For labels to look technical */
    --primary-color-dark: #101d2a;

    /* Quiet secondary-button colors */
    --btn-border: #b9bec4;
    --btn-bg-hover: #f1f2f4;
}

body {
  /* Changed from Manrope priority to Inter priority */
  font-family: var(--font-primary);
  min-height: 100vh;
  background: var(--background-main);
  margin: 0;
  padding: 0;
  color: var(--text-color-primary);
  -webkit-font-smoothing: antialiased; /* Makes text look crisper on Mac/iOS */
  -moz-osx-font-smoothing: grayscale;
}

.container {
  width: 95%;
  max-width: 1600px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 10px;
  background-color: var(--background-main); /* White ground — only the cards inside carry the ivory */
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
}

.container.auth-phase {
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* ---- Text & border context ----
   Opening screens (login, landing, scenario picker) read in inky navy —
   text and borders. Once the scenario loads, in-scenario copy switches to
   near-black for maximum legibility during the task. Done by re-scoping the
   text/border tokens so every descendant that reads them adapts. */
#loginContent,
#landingPageContainer,
#authContainer {
  --text-color-primary: var(--text-pre-scenario);
  --text-color-secondary: color-mix(in srgb, var(--brand-navy) 60%, #ffffff);
  --border-color: color-mix(in srgb, var(--brand-navy) 26%, #ffffff);
  --border-color-input: var(--brand-navy);
  color: var(--text-pre-scenario);
}

#chatContainer {
  --text-color-primary: var(--text-in-scenario);
}

.container.desktop-view {
  width: 95%;
}

#authContainer {
  flex: 1;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-container {
  width: 100%;
  max-width: 480px;
  padding: 2rem;
  z-index: 100;
  pointer-events: auto;
  margin: 0 auto;
  box-sizing: border-box;
}

.auth-card {
    background: var(--background-card);
    border-radius: 16px;
    padding: 2.5rem 2rem; /* Slightly increased padding for breathing room */
    width: 100%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 520px; /* <--- KEY FIX: Prevents vertical jitter */
    transition: min-height 0.3s ease;
}

.auth-card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the inputs within the available space */
    position: relative;
    width: 100%;
}

/* Ensure the header logo stays fixed */
.auth-header {
    flex-shrink: 0;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Style for the steps to ensure they take up full width */
.auth-step {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    animation: fadeStepIn 0.4s ease-out; /* Smooth fade when switching steps */
}

/* Simple fade in animation */
@keyframes fadeStepIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 2rem auto;
  display: block;
  border-radius: 20%; /* The logo is a solid navy tile — round it into a seal */
  box-shadow: 0 2px 8px rgba(26, 42, 59, 0.18);
  transition: all 0.3s ease;
}
.auth-logo:hover {
  opacity: var(--auth-logo-opacity-hover);
}

.auth-form { display: flex; flex-direction: column; gap: 1.5rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color-primary);
  word-break: break-word;
}
.form-hint {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-color-secondary, #5c6b73);
  line-height: 1.4;
  margin-top: -0.15rem;
}
.form-input {
  width: 100%;
  padding: 0.875rem;
  border: 1px solid var(--border-color-input);
  background-color: var(--background-input);
  color: var(--text-color-primary);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.3s ease;
  box-sizing: border-box;
}
.form-input:focus {
  outline: none;
  border-color: var(--border-color-input-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 10%, transparent);
}
.form-input.error { border-color: var(--error-input-border); }
.error-message { color: var(--error-message-color); font-size: 0.75rem; margin-top: 0.25rem; text-align: center; }
.captcha-input { width: 80px !important; max-width: 100%; text-align: center; flex-shrink: 0; }

.landing-button,
.auth-button,
.close-button,
.voice-action-btn {
  appearance: none;
  background-color: #ffffff;
  border: 1px solid var(--border-color); /* Subtle grey border */
  border-radius: 999px; /* Full Pill Shape */
  box-sizing: border-box;
  color: var(--primary-color); /* Blue text */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-size: 0.95rem; /* Slightly smaller, more refined font */
  font-weight: 500;
  line-height: 20px;
  min-height: 40px;
  padding: 0 24px; /* Wider horizontal padding */
  text-align: center;
  text-decoration: none;
  user-select: none;
  transition: background-color 0.2s cubic-bezier(0.05, 0.7, 0.1, 1), 
              border-color 0.2s, 
              color 0.2s, 
              box-shadow 0.2s;
  gap: 8px; /* Space between icon and text */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Very subtle depth */
  width: auto; /* Allow auto width based on content */
  min-width: 120px; /* Ensure buttons don't get too small */
}

/* Hover State */
.landing-button:hover,
.auth-button:hover,
.close-button:hover,
.voice-action-btn:hover {
  background-color: var(--btn-bg-hover);
  border-color: var(--primary-color);
  color: var(--primary-color-dark);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
  transform: translateY(0); /* Remove the old lift effect for a grounded feel */
}

/* Active/Press State */
.landing-button:active,
.auth-button:active,
.close-button:active,
.voice-action-btn:active {
  background-color: #e0f0ff;
  box-shadow: none;
  transform: scale(0.98);
}

/* Specific Tweak for the "Auth" button to ensure it fills the card width if needed */
.auth-button {
    width: 100%; 
    margin-top: 1rem;
    height: 48px; /* Slightly taller for main login actions */
    font-size: 1rem;
}

/* Specific Tweak for Landing button size */
.landing-button {
    height: 48px;
    font-size: 1.05rem;
}

/* SVG Icon handling within buttons */
.landing-button svg,
.auth-button svg,
.close-button svg {
    width: 20px;
    height: 20px;
    fill: currentColor; /* Inherits the blue text color */
}

/* Ensure privacy footer stays fixed at bottom */
.privacy-message {
    flex-shrink: 0;
    margin-top: auto; 
    padding-top: 1.5rem;
    font-size: 0.8rem; /* Slightly bumped up for readability */
}
.privacy-link { color: var(--link-color); text-decoration: none; transition: color 0.3s ease; }
.privacy-link:hover { color: var(--link-color-hover); text-decoration: underline; }

.consent-container { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-color-primary); margin-top: 0.5rem; }
.consent-container.invalid { border: 1px solid var(--consent-invalid-border); padding: 0.5rem; border-radius: 4px; animation: highlight 0.5s; background-color: var(--consent-invalid-bg); }
.consent-container input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--accent-color); }
.consent-container label span[style*="cursor: pointer"] { color: var(--link-color); }
.consent-container label span[style*="cursor: pointer"]:hover { color: var(--link-color-hover); }

.content-container { display: flex; flex-direction: row; gap: 1rem; padding: 1rem 0; width: 100%; box-sizing: border-box; }

#scenarioInfo {
  background: var(--background-card);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: max-height 0.35s ease-in-out, padding 0.35s ease-in-out, margin-bottom 0.35s ease-in-out, opacity 0.3s ease-in-out, border-width 0.35s ease-in-out, box-shadow 0.3s ease-in-out;
  border: 1px solid transparent;
  /* REMOVED: display: flex; flex-direction: column; */
  /* Default display: block will apply, or you can explicitly set it if needed. */
}
/* Keep the clearfix for containing floats */
#scenarioInfo::after {
    content: "";
    display: table;
    clear: both;
}

#scenarioNameDisplay {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-color-primary);
    margin-bottom: 0.35rem;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

#scenario {
    font-family: var(--font-primary);
    font-size: 0.95rem; /* Increased for better readability */
    font-style: normal;
    color: var(--text-color-secondary);
    margin-bottom: 1.25rem;
    line-height: 1.55;
}

.details-row {
    margin-bottom: 0.85rem;
    display: flex;
    align-items: flex-start;
    font-size: 0.9rem;
}

.details-label {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-right: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width: 55px;
    flex-shrink: 0;
    white-space: nowrap;
    padding-top: 0.1em;
}

.details-value {
    font-family: var(--font-primary);
    font-size: 0.9rem;
    color: var(--text-color-primary);
    font-weight: 500;
    line-height: 1.45;
    flex: 1;
    min-width: 0;
}

/* Specific override for Skills to look like tags */
#skills.details-value {
    font-size: 0.9rem;
    line-height: 1.5;
}

.chat-container { display: flex; flex-direction: column; gap: 0.5rem; box-sizing: border-box; }

#avatarContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0.5rem;
    position: relative;
    width: 100%;
}

.avatar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    min-width: 0; /* Allow the group to shrink so a long name truncates instead of pushing the timer off-screen */
}

.container:not(.desktop-view) .avatar-group {
    flex-grow: 1; /* Make the group take up all available horizontal space */
}

#interlocutorAvatar {
  width: 40px;  /* MODIFIED: Was 50px */
  height: 40px; /* MODIFIED: Was 50px */
  flex-shrink: 0; /* Never let the avatar squish when the group shrinks */
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--border-color) 50%, transparent);
  transition: transform 0.2s ease;
  z-index: 1;
  flex-shrink: 0;
}
#interlocutorAvatar:hover { transform: scale(1.05); cursor: pointer; }

.interlocutor-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.interlocutor-name {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-color-primary);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Keep the classic chat header on one line: a long interlocutor name/tagline
   truncates with an ellipsis so it can never push the timer off-screen.
   Scoped to .avatar-group so the centered voice-skin tagline is unaffected. */
.avatar-group .interlocutor-identity { min-width: 0; overflow: hidden; }
.avatar-group .interlocutor-name,
.avatar-group .interlocutor-tagline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.info-toggle-button {
    display: none; background: none; border: none; padding: 4px; cursor: pointer;
    align-self: center; line-height: 0; flex-shrink: 0;
}
.info-toggle-button svg { width: 24px; height: 24px; fill: var(--text-color-secondary); transition: fill 0.2s ease; }
.info-toggle-button:hover svg { fill: var(--accent-color); }
.container:not(.desktop-view) .avatar-group .info-toggle-button {
    display: inline-flex !important;
    margin-left: auto; /* ADD THIS LINE: Pushes the button to the far right */
}

/* Show voice info toggle in voice-card when split pane is active */
body.skin-voice-only .container.resource-pane-active .voice-card .info-toggle-button.voice-info-toggle {
    display: inline-flex !important;
}

#audioAnimation {
  position: absolute; top: 50%; left: 60px; transform: translateY(-50%); z-index: 0;
  width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; display: none;
}
#audioAnimation svg circle[fill] { fill: var(--accent-color); }
#audioAnimation svg circle[stroke] { stroke: var(--accent-color); }

.chat-banner {
    display: none; /* MODIFIED: Hide banner by default (covers mobile-first and no-image cases) */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    height: 50px;
    margin-right: 5px;
    flex-grow: 1;
    min-width: 100px;
}

/* NEW: Only show the banner if it has an image AND is in desktop view */
.container.desktop-view .chat-banner.has-banner-image {
    display: block; 
}

.sidebar-decoration {
    display: none;
    background-size: contain;
    background-repeat: no-repeat;
    width: 60px;
    height: 80px;
}

.sidebar-decoration.top-decoration {
    /* height: 80px; */ /* Now on base .sidebar-decoration */
    float: right; /* Float to the right */
    margin-bottom: 0.5rem; /* Space below the decoration */
    margin-left: 1rem;   /* Space between decoration and text wrapping on its left */
    background-position: top right;
}

.sidebar-decoration.bottom-decoration {
    /* height: 80px; */ /* Now on base .sidebar-decoration */
    float: left; /* Float to the left */
    margin-top: 0.5rem;    /* Space above the decoration */
    margin-right: 1rem;  /* Space between decoration and text wrapping on its right */
    background-position: bottom left;
    clear: both; /* Ensures it drops below any content floated above it, which is usually desired for a bottom element. */
}

#chatWindow {
  width: 100%; height: 420px; border: 1px solid var(--border-color); border-radius: 12px;
  padding: 1.5rem; overflow-y: auto; background: var(--background-card); resize: both;
  min-height: 200px; max-height: 800px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  box-sizing: border-box; margin-top: 0; position: relative; z-index: 0;
}
.interlocutor-message, .student-message { 
    margin-bottom: 1rem; 
    padding: 1rem 1.25rem; /* More breathing room */
    border-radius: 8px; /* Sharper corners = more technical/office feel */
    line-height: 1.6; 
    word-wrap: break-word; 
    box-sizing: border-box; 
    color: var(--text-color-primary);
    white-space: pre-wrap; 
    font-size: 1.1rem; /* Larger size for language learners */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Subtle depth */
}

/* Sender Names -> Transformed into Technical Labels */
.message .sender-label {
    display: block;
    font-family: var(--font-primary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    color: var(--text-color-secondary);
    opacity: 0.8;
}

/* Inline bold text within messages (from LLM markdown) */
.message strong:not(.sender-label) {
    font-weight: 600;
}

.interlocutor-message { width: 92%; max-width: 92%; background-color: var(--chat-interlocutor-message-bg); }
.student-message { width: 80%; max-width: 90%; margin-left: auto; background-color: var(--chat-student-message-bg); }
body:not(.autoplay-disabled) #chatWindow .interlocutor-message:hover, 
body:not(.autoplay-disabled) #chatWindow .student-message:hover { 
    background-color: var(--chat-message-hover-bg); 
    cursor: pointer; 
    transition: background-color 0.2s ease; 
}

#userChat {
  width: 100%; 
  height: 120px; 
  padding: 1rem; 
  border: 1px solid var(--border-color); /* Thinner border */
  border-radius: 8px; /* Match message radius */
  font-family: var(--font-primary); /* Keep Inter for readability */
  font-size: 1rem; 
  line-height: 1.5;
  resize: vertical;
  min-height: 80px; 
  max-height: 300px; 
  background: var(--background-input); 
  color: var(--text-color-primary);
  transition: all 0.2s ease; 
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03); /* Inner shadow for depth */
  box-sizing: border-box;
}

#userChat::placeholder {
    color: #aaa;
    font-style: italic;
}

#userChat:focus { outline: none; border-color: var(--chat-input-border-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 10%, transparent); }
.word-count { 
    font-family: var(--font-technical); /* Roboto Mono */
    font-size: 0.7rem; 
    color: var(--word-count-color); 
    text-align: right; /* Move to right for dashboard feel */
    margin-top: 4px; 
    margin-bottom: 8px; 
    height: 1.2em; 
    padding-right: 4px;
    letter-spacing: -0.02em;
}

.control-buttons { 
    display: flex; 
    align-items: center; 
    justify-content: flex-start; /* Align left to match text */
    gap: 8px; /* Tighter gap (was 0.5rem/8px, kept tight) */
    margin: 12px 0; /* Reduced vertical margin */
    flex-wrap: wrap; 
}

.container.desktop-view .action-buttons { justify-content: flex-start; }
.right-controls { display: flex; align-items: center; gap: 0.25rem; flex-direction: row; }

/* Align the buttons in a row with spacing */
.control-buttons.action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0.5rem 0 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

/* style.css - Button Refinement */

.icon-button {
  width: 42px; /* Reduced from 65px for a precise tool feel */
  height: 42px; 
  padding: 0; 
  border: 1px solid var(--border-color); /* Standard thin border */
  border-radius: 6px; /* Sharper, more technical radius */
  background: var(--background-card);
  cursor: pointer; 
  transition: all 0.2s ease; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Very subtle depth */
}

.icon-button:hover { 
  background: #f4f6f8; /* Subtle gray hover */
  border-color: #d1d5db; /* Darker border on hover */
  transform: translateY(-1px); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); 
}

/* Make the icons inside significantly smaller and crisper */
.icon-button svg { 
  width: 20px; /* Reduced from 35px */
  height: 20px; 
  fill: var(--text-color-secondary); /* Default to dark gray, not black */
  opacity: 1; 
  transition: fill 0.2s ease; 
}

.icon-button:hover svg { 
  fill: var(--primary-color); /* Brand color on hover */
}

/* Specific overrides for status colors */
button#emailButton.icon-button svg { 
    fill: var(--text-color-secondary); 
    width: 20px; 
    height: 20px; 
}
button#emailButton.icon-button:hover svg {
    fill: var(--accent-color); /* Ox blood on share hover */
}

/* Send + mic icons — deep navy, so they stand out from the neutral toolbar */
#sendMessageButton svg,
.icon-button#micButton svg {
    fill: var(--action-icon-color);
}
#sendMessageButton:hover svg,
.icon-button#micButton:hover svg {
    fill: color-mix(in srgb, var(--action-icon-color) 82%, black);
}

/* Recording State - Pulse ox blood */
.icon-button#micButton.is-recording {
    border-color: var(--brand-oxblood);
    background-color: color-mix(in srgb, var(--brand-oxblood) 7%, #ffffff);
}
.icon-button#micButton.is-recording svg {
    fill: var(--brand-oxblood) !important;
}

#loadingOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.6); z-index: 1999; }
#loadingOverlay .spinner { border: 4px solid var(--spinner-border-color); border-top: 4px solid var(--spinner-border-top-color); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
.global-loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--background-card); display: flex; justify-content: center; align-items: center; z-index: 2000; opacity: 1; transition: opacity 0.5s ease; }
.global-loading.fade-out { opacity: 0 !important; pointer-events: none; }
.spinner { width: 50px; height: 50px; border: 4px solid var(--spinner-border-color); border-top: 4px solid var(--spinner-border-top-color); border-radius: 50%; animation: spin 1s linear infinite; }
.transition-spinner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1500; display: none; }
.transition-spinner.show { display: block; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.dialog-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 998; display: none; background-color: rgba(0, 0, 0, 0.3); }
.dialog-box { position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; min-width: 300px; max-width: 90%; display: none; border-radius: 20px; /* More rounded corners */
    box-shadow: 0 20px 60px rgba(0,0,0,0.2); /* Deeper, softer shadow */
    overflow: hidden; /* Ensures content respects rounded corners */
    border: 1px solid rgba(255,255,255,0.5); /* Subtle rim light */}
.dialog-box.login-stage { top: 40%; }
.dialog-content {
    background: #ffffff;
    color: var(--text-color-primary);
    padding: 2rem; /* More breathing room */
    border-radius: 20px;
    box-shadow: none; /* Shadow handled by container */
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dialog-content h2, 
.dialog-content h3 {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-display);
    color: var(--text-color-primary);
}

.dialog-content p#dialogMessage {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color-secondary);
    margin: 0;
}

.dialog-box.chat-stage { top: 35%; }

#dialogInput {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid #c7c7c7;
    border-radius: 24px; /* Rounded inputs to match buttons */
    background-color: #f9f9f9;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s;
}

#dialogInput:focus {
    background-color: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(16, 107, 10, 0.15);
}

/* Dialog Button Container */
#dialogButtons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
    padding-top: 0;
    background: transparent;
    border: none;
}

/* Secondary Action (Cancel) - styling override */
#dialogCancelButton {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--text-color-secondary);
    box-shadow: none;
}

#dialogCancelButton:hover {
    background-color: #f5f5f5;
    border-color: transparent;
    color: #333;
    box-shadow: none;
}

.tooltip-text { visibility: hidden; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background-color: var(--tooltip-bg); color: var(--tooltip-text-color); text-align: center; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; white-space: nowrap; opacity: 0; transition: opacity 0.2s ease; z-index: 1001; }
.tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--tooltip-bg) transparent transparent transparent; }
.icon-button:hover .tooltip-text, .info-toggle-button:hover .tooltip-text { visibility: visible; opacity: 1; }

.footer { width: 100%; margin-top: auto; padding: 2rem 0; position: relative; z-index: 1; background: var(--background-main); }
.footer hr { display: none; }
.footer-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; color: var(--text-color-secondary); }
#toggleViewButton { margin-bottom: 1rem; }
.rectangular-button { background: var(--background-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.5rem 1rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.rectangular-button:hover { background: color-mix(in srgb, var(--background-card) 95%, black); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.rectangular-button svg.toggle-icon { height: 22px; width: 22px; fill: var(--icon-button-svg-fill); opacity: 0.9; transition: fill 0.2s ease, opacity 0.2s ease; }
.rectangular-button:hover svg.toggle-icon { opacity: 1; fill: var(--icon-button-svg-fill-hover); }
.dialogiq-link, .license-link { color: var(--link-color); text-decoration: none; transition: color 0.2s ease; }
.dialogiq-link { font-weight: 500; }
.dialogiq-link:hover, .license-link:hover { color: var(--link-color-hover); text-decoration: underline; }
.footer-copyright { margin: 0.5rem 0; }
.footer-license { font-size: 0.75rem; max-width: 600px; margin: 0.5rem auto; }

/* EXAM MODE FOOTER
   During a sitting the student is inside the product, so the marketing chrome —
   our own URL, the copyright line, the beta notice — is addressed to nobody. It
   is also the single most reliable tell that an app is still wearing its
   website's clothes. The view toggle is a control the student may actually
   need, so it stays and the footer shrinks to just that. */
body.exam-mode .footer-brand,
body.exam-mode .footer-copyright,
body.exam-mode .footer-beta,
body.exam-mode .footer-license {
    display: none;
}

body.exam-mode .footer {
    padding: 0.75rem 0 1.75rem;
}
@keyframes highlight { from { background-color: color-mix(in srgb, var(--error-message-color) 20%, transparent); } to { background-color: transparent; } }

.container.desktop-view #scenarioInfo { width: 33%; min-width: 280px; position: sticky; top: 5.5rem; align-self: flex-start; padding: 1.5rem; max-height: calc(100vh - 7rem); opacity: 1; overflow-x: hidden; overflow-y: auto; margin-bottom: 1rem; border-color: var(--border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }
.container:not(.desktop-view) #scenarioInfo { width: 100%; position: static; box-sizing: border-box; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; opacity: 0; overflow: hidden; border-color: transparent; box-shadow: none; }
.container:not(.desktop-view) #scenarioInfo.info-expanded { max-height: 75vh; padding: 1rem 1rem 1.5rem; margin-bottom: 1rem; opacity: 1; overflow-x: hidden; overflow-y: auto; border-color: var(--border-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }

/* Scrollability indicators for metadata panel */
#scenarioInfo { position: relative; }

/* Fade gradient at bottom to indicate more content */
#scenarioInfo::before {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--background-card));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 1;
}

#scenarioInfo.has-overflow::before {
  opacity: 1;
}

/* Styled scrollbar for desktop */
.container.desktop-view #scenarioInfo::-webkit-scrollbar {
  width: 8px;
}

.container.desktop-view #scenarioInfo::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--background-card) 95%, var(--text-color-secondary));
  border-radius: 4px;
}

.container.desktop-view #scenarioInfo::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
  transition: background 0.2s;
}

.container.desktop-view #scenarioInfo::-webkit-scrollbar-thumb:hover {
  background: var(--text-color-secondary);
}

/* Mobile scrollbar styling */
.container:not(.desktop-view) #scenarioInfo.info-expanded::-webkit-scrollbar {
  width: 6px;
}

.container:not(.desktop-view) #scenarioInfo.info-expanded::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--background-card) 95%, var(--text-color-secondary));
  border-radius: 4px;
}

.container:not(.desktop-view) #scenarioInfo.info-expanded::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.container.desktop-view .content-container { flex-direction: row; align-items: flex-start; gap: 2rem; }
.container:not(.desktop-view) .content-container { flex-direction: column; padding: 0.5rem 0; gap: 1rem; }
.container.desktop-view .chat-container { width: 67%; padding-right: 0.5rem; }
.container:not(.desktop-view) .chat-container { width: 100%; padding-right: 0; max-width: 100%; }

#landingPageContainer { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 80vh; text-align: center; padding: 2rem; box-sizing: border-box; width: 100%; }
.landing-content-wrapper { max-width: 650px; width: 100%; background-color: var(--background-card); padding: 2.5rem 2rem; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.landing-header { display: flex; align-items: center; justify-content: flex-start; gap: 15px; max-width: 450px; margin-left: auto; margin-right: auto; width: 100%; margin-bottom: 1.5rem; }
.landing-logo { width: 60px; height: 60px; margin: 0; display: block; flex-shrink: 0; border-radius: 20%; box-shadow: 0 2px 6px rgba(26, 42, 59, 0.18); }
#landingPageContainer h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--text-color-primary); margin: 0; text-align: left; }
.landing-subtext { font-size: 1.05rem; color: var(--text-color-secondary); margin-bottom: 2.5rem; line-height: 1.6; }
.landing-form { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; max-width: 450px; margin-left: auto; margin-right: auto; }
.landing-input { flex-grow: 1; padding: 0.9rem 1rem; border: 1px solid var(--border-color-input); background-color: var(--background-input); color: var(--text-color-primary); border-radius: 8px; font-size: 1rem; font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.landing-input:focus { outline: none; border-color: var(--border-color-input-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent); }

.landing-privacy { font-size: 0.8rem; color: var(--text-color-secondary); margin-top: 2rem; }

@media (min-width: 480px) { .landing-form { flex-direction: row; } }
@media (max-width: 400px) { .landing-header { flex-direction: column; gap: 10px; align-items: center; } #landingPageContainer h1 { font-size: 1.8rem; text-align: center; } .landing-logo { width: 70px; height: 70px; } .landing-content-wrapper { padding: 2rem 1.5rem; } }
@media (max-width: 768px) { .auth-card { padding: 1.5rem; } .form-input { padding: 0.75rem; } .form-label { font-size: 1rem; } .auth-button { padding: 0.875rem; font-size: 1.1rem; } .dialog-content { padding: 1rem; } .footer { padding: 1.5rem 0; margin-top: 2rem; } .footer-license { padding: 0 1rem; } }
@media (max-width: 480px) { .container { padding: 5px; } .auth-container { padding: 1rem; } .auth-card { padding: 1.5rem 1rem; } #scenarioNameDisplay { font-size: 1.25rem; } #scenario { font-size: 0.9rem; margin-bottom: 1rem; } .details-row { font-size: 0.85rem; } .student-message { width: 85%; } .interlocutor-message { width: 95%; } .intro-avatar { width: 60px; height: 60px; margin: 0 1rem 0.5rem 0; shape-outside: rectangle(0 0 80px 80px); } .intro-title { font-size: 1.25rem; } .intro-text { font-size: 0.9rem; } body[dir="rtl"] .intro-avatar { margin: 0 0 0.5rem 1rem; } }

body[dir="rtl"] { direction: rtl; }
body[dir="rtl"] .dialog-close { right: auto; left: 1rem; }
body[dir="rtl"] .form-label, body[dir="rtl"] .privacy-message { text-align: right; }
body[dir="rtl"] .student-message { margin-left: 0; margin-right: auto; }
body[dir="rtl"] .interlocutor-message { margin-right: 0; margin-left: auto; }
body[dir="rtl"] .avatar-group { flex-direction: row-reverse; }
body[dir="rtl"] #audioAnimation { left: auto; right: 60px; }
body[dir="rtl"] .autoplay-label svg.autoplay-icon { margin-left: 0; margin-right: 5px; }
body[dir="rtl"] .intro-avatar { float: right; margin: 0 0 1rem 1.5rem; }
body[dir="rtl"] .modal-close { right: auto; left: 25px; }
body[dir="rtl"] .chat-banner { background-position: center left; }
body[dir="rtl"] .sidebar-decoration.top-decoration {
    background-position: top left;
    float: left; /* Switched from right */
    margin-left: 0;
    margin-right: 1rem; /* Added margin on the other side */
}

body[dir="rtl"] .sidebar-decoration.bottom-decoration {
    background-position: bottom right;
    float: right; /* Switched from left */
    margin-right: 0;
    margin-left: 1rem; /* Added margin on the other side */
}

.autoplay-label { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    cursor: pointer; 
    color: var(--text-color-secondary); 
    font-family: var(--font-primary);
    font-size: 0.85rem; /* Smaller text */
    font-weight: 600;
    user-select: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.autoplay-label:hover {
    background-color: #f9fafb;
}

.autoplay-label svg.autoplay-icon { 
    width: 18px; /* Smaller icon */
    height: 18px; 
    fill: var(--text-color-secondary); 
    margin: 0; /* Remove old margin */
    opacity: 1; 
}

.autoplay-label:hover svg.autoplay-icon { 
    fill: var(--primary-color); 
}

/* Hide the actual checkbox, style via the SVG/Label state if desired, 
   or keep default checkbox behavior but align it perfectly */
.autoplay-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.message-controls { 
    display: flex;
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 0.5rem; 
    margin-top: 0.75rem; /* Precise spacing from textarea */
    min-height: 42px; /* Match button height for alignment */
}

.message-controls .right-controls { 
    display: flex; 
    align-items: center; 
    gap: 8px; /* Consistent gap */
    flex-direction: row; 
}

.message-controls .left-controls {
    display: flex;
    align-items: center;
}

.modal {
    display: none; 
    position: fixed; 
    z-index: 2000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow-y: auto; 
    background-color: rgba(0, 0, 0, 0.6); /* Slightly lighter, blurred backdrop */
    backdrop-filter: blur(5px); /* Modern blur effect */
    padding: 20px;
    box-sizing: border-box;
    /* Flex to center the card */
    align-items: center;
    justify-content: center;
}
.modal-content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;}
#modalImage {
    max-width: 150px; /* MODIFIED: Was 90% */
    max-height: 150px;/* MODIFIED: Was 80vh */
    margin-bottom: 20px;
    border-radius: 50%; /* MODIFIED: Make it circular to match the main UI */
    border: 4px solid white; /* NEW: Add a border */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#modalCaption {
    color: #fff;
    font-size: 1.5em; /* MODIFIED: Was 1.2em */
    font-weight: 600; /* NEW: Make it bolder */
    text-align: center;
    padding: 0 10px;
    margin-top: 0; /* MODIFIED: Removed top margin */
    margin-bottom: 10px; /* NEW: Added bottom margin */
}

.modal-close { position: absolute; right: 25px; top: 15px; color: #f1f1f1; font-size: 35px; font-weight: bold; cursor: pointer; transition: color 0.2s; }
.modal-close:hover { color: #bbb; }

.typing-dot { display: inline-block; vertical-align: middle; width: 8px; height: 8px; margin: 0 2px; background-color: var(--text-color-secondary); border-radius: 50%; opacity: 0.4; animation: typingAnimation 1.4s infinite ease-in-out; }
.typing-indicator { display: inline-flex; align-items: center; margin: 0.5rem 0; padding: 1rem; background-color: var(--chat-interlocutor-message-bg); border-radius: 12px; width: auto; }
.typing-dot:nth-child(1) { animation-delay: 0s; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingAnimation { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }

.dialog-box.introduction-dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* Force fixed dimensions relative to viewport */
    width: 95vw !important;
    max-width: 1600px !important;
    height: 90vh !important;
    max-height: 90vh !important;
    
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.dialog-box.introduction-dialog.has-presentation {
    max-width: 960px; /* Increased from 800px */
}

/* --- FIX: Constrain slides presentation within intro dialog on desktop --- */
@media (min-width: 901px) {
    .dialog-box.introduction-dialog {
        max-height: 90vh;
    }

    .introduction-dialog .intro-standard-view {
        max-height: calc(90vh - 140px); /* Viewport minus nav bar and padding */
        overflow-y: auto; /* Allow scroll for long content */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Constrain presentation wrapper within dialog - override inline width:100% */
    .introduction-dialog .intro-presentation-wrapper {
        max-width: 100%;
        max-height: calc(90vh - 220px);
        width: auto !important; /* Override inline width: 100% */
        height: calc(90vh - 220px); /* Set explicit height, aspect-ratio calculates width */
        margin: 0 auto;
    }

    .introduction-dialog .intro-presentation-wrapper iframe {
        width: 100%;
        height: 100%;
    }
}
/* --- END FIX --- */

.intro-dialog-padded-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
    box-sizing: border-box;
    min-height: auto; /* Allow natural height based on content */
}

.introduction-dialog .dialog-content {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    width: 100%;
    max-width: none;
    padding: 0;
    background: var(--background-card);
    border-radius: 16px;
    overflow: visible;
    flex: 1;
    min-height: 0;
}

/* Allow intro content to scroll on all viewport sizes when content is long */
.introduction-dialog .intro-standard-view {
    max-height: calc(90vh - 140px);
    overflow-y: auto;
}

.intro-dialog-content { display: flex; flex-direction: column; gap: 1.5rem; }
.intro-title { font-size: 1.5rem; font-weight: bold; text-align: center; margin-bottom: 0; color: var(--text-color-primary);}
.intro-body { position: relative; }
.intro-avatar { float: left; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 1.5rem 1rem 0; shape-outside: rectangle(0 0 120px 120px); border: 2px solid var(--border-color); }
.intro-text { text-align: justify; line-height: 1.6; color: var(--text-color-secondary); font-size: 1rem; }
.intro-nav { display: flex; justify-content: center; margin-top: 1.5rem; clear: both; }

.class-selection-dialog .dialog-content { padding: 2rem; max-width: 480px; }
.class-selection-container { display: flex; flex-direction: column; gap: 1.5rem; }
.class-selection-container .form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.class-selection-container .form-label { font-size: 1.25rem; font-weight: 600; color: var(--text-color-primary); }
.class-selection-container .form-input { width: 100%; padding: 0.875rem; border: 1px solid var(--border-color-input); background-color: var(--background-input); color: var(--text-color-primary); border-radius: 8px; font-size: 1rem; font-family: inherit; transition: all 0.3s ease; box-sizing: border-box; }
.class-selection-container .form-input:focus { outline: none; border-color: var(--border-color-input-focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 10%, transparent); }
.class-selection-container .dialog-actions { display: flex; justify-content: center; margin-top: 1rem; }

.scaffolding-link { color: var(--link-color); text-decoration: underline; cursor: pointer; font-weight: bold; }
.scaffolding-link:hover, .scaffolding-link:focus { color: var(--link-color-hover); text-decoration: none; }
.scaffolding-link:focus { outline: 2px solid var(--link-color); outline-offset: 2px; }

#hintButton svg { 
    width: 20px; /* Aligned with other buttons */
    height: 20px; 
    stroke: var(--text-color-secondary); 
    fill: none; /* Ensure no fill since this is a line icon */
    stroke-width: 2; /* Make lines slightly bolder to match filled icons visually */
    transition: stroke 0.2s ease;
}

#hintButton:hover svg { 
    stroke: var(--primary-color); 
}

.activity-gate-container { 
    margin-top: 12px; 
    margin-bottom: 12px; 
    padding: 10px 12px; 
    background-color: var(--activity-gate-bg); 
    border: 1px solid var(--activity-gate-border); 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 0.95em; 
    transition: opacity 0.3s ease, max-height 0.3s ease, background-color 0.2s ease, border-color 0.2s ease; /* Added transition for hover effects */
    overflow: hidden; 
    max-height: 100px; 
    cursor: pointer; /* MODIFIED: Make whole container show pointer cursor */
    
    /* Existing pulse animation */
    animation: gatePulse 2s infinite ease-in-out;
}

.activity-gate-container:hover {
    background-color: var(--activity-link-hover-bg); 
    border-color: var(--accent-color);
}

.activity-gate-container input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent-color); flex-shrink: 0; cursor: pointer; margin-top: 1px; }
.activity-gate-container label { color: var(--activity-gate-text-color); cursor: pointer; line-height: 1.5; font-weight: 500; }
.activity-gate-container.gate-completed { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-width: 0; pointer-events: none; }

.activity-link { color: var(--activity-link-color); text-decoration: underline; cursor: pointer; font-weight: 600; padding: 2px 4px; border-radius: 3px; transition: background-color 0.2s ease, color 0.2s ease; }
.activity-link:hover, .activity-link:focus { color: var(--activity-link-hover-color); background-color: var(--activity-link-hover-bg); text-decoration: none; }
.activity-link:focus { outline: 2px solid var(--activity-link-color); outline-offset: 1px; }

.activity-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.82); box-sizing: border-box; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease; z-index: 2500; }
.activity-overlay.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.activity-overlay-content { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: color-mix(in srgb, var(--text-color-primary) 80%, black); width: 90%; max-width: 1280px; height: 90vh; border-radius: 10px; box-shadow: 0 8px 25px rgba(0,0,0,0.4); display: flex; flex-direction: column; overflow: hidden; padding: 10px; box-sizing: border-box; }
#activityResourceIframe { width: 100%; flex-grow: 1; min-height: 0; border: 1px solid color-mix(in srgb, var(--background-card) 50%, black); border-radius: 6px; background-color: var(--background-card); }
.activity-overlay-close-button { position: absolute; top: 10px; right: 10px; z-index: 2503; background-color: rgba(0,0,0,0.5); color: white; border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 20px; line-height: 30px; text-align: center; cursor: pointer; transition: background-color 0.2s; }
.activity-overlay-close-button:hover { background-color: rgba(0,0,0,0.7); }
.activity-resource-loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #ffffff; z-index: 2502; }
.activity-resource-loading-spinner .spinner { width: 45px; height: 45px; border: 5px solid rgba(255,255,255,0.3); border-top: 5px solid #fff; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 15px auto; }
.activity-resource-loading-spinner p { font-size: 1.1em; font-weight: 500; }

#userChat:disabled, .message-controls .icon-button:disabled { opacity: 0.6; cursor: not-allowed !important; }
#userChat:disabled { background-color: color-mix(in srgb, var(--background-input) 90%, #ccc); }
.message-controls .icon-button:disabled:hover { background: var(--background-card); transform: none; box-shadow: none; }
.message.system-message.chat-notice strong { color: var(--text-color-primary); }

/* Phase-name divider dropped into the chat stream on phase transitions */
.message.system-message.phase-notice {
    align-self: center;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-color-secondary);
    background: none;
    box-shadow: none;
    border: none;
    padding: 4px 12px;
    margin: 10px auto;
}
.message.system-message.phase-notice::before,
.message.system-message.phase-notice::after {
    content: "—";
    color: var(--border-color);
    margin: 0 8px;
}
/* Two-tier divider (part above, phase name below), mirroring the voice plate. */
.message.system-message.phase-notice .phase-notice-part {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--text-color-primary);
}
.message.system-message.phase-notice .phase-notice-name {
    display: block;
    font-weight: 400;
    letter-spacing: 0.01em;
}
.form-input:disabled { background-color: color-mix(in srgb, var(--background-input) 90%, #ccc); color: var(--text-color-secondary); cursor: not-allowed; opacity: 0.7; }
.form-input:disabled:focus { outline: none; border-color: var(--border-color-input); box-shadow: none; }

/* --- Voice-Only Skin Styles --- */
#voiceInterfaceContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 0 1rem;
    height: auto;
    box-sizing: border-box;
    width: 100%;
    /* Cap the flex-basis to the card's real max size (500px + this padding)
       instead of an unbounded 100%, and don't let it shrink at all in the
       desktop row layout — it's the primary task surface, so the resources
       panel and metadata panel should absorb narrowing first (see the
       "Desktop Responsive Priority" block below). */
    max-width: 532px;
    flex-shrink: 0;
}

.voice-card {
    background: var(--background-card);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}

.voice-avatar-wrapper #voiceInterlocutorAvatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.visualizer-box {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#audioVisualizerCanvas {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

#recordingStatus {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(0,0,0,0.6);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    pointer-events: none;
}

.recording-dot {
    width: 10px;
    height: 10px;
    background-color: var(--brand-oxblood);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* --- Speaking-duration cue -------------------------------------------------
   At the teacher's soft ceiling the recording pill takes ONE held hue step to
   goldenrod — the same vocabulary as the idle pacing line's `.filled` state.
   Deliberately NOT a ladder and NOT a blink: this fires while the student is
   mid-sentence, where an attention-capturing signal would cost them the thought
   they were building. A hue shift is available on a glance; a blink compels one.
   Like the idle line, it is purely advisory — it never ends the answer, stops
   the recording, or affects the score. #recordingLongCopy states the meaning in
   words so nothing depends on colour perception. */
#recordingStatus.running-long .recording-dot {
    background-color: goldenrod;
}
#recordingStatus.running-long {
    color: color-mix(in srgb, goldenrod 80%, #ffffff);
}
.recording-long-copy {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    opacity: 0.95;
}

.voice-controls .large-mic-button {
    position: relative; /* anchor for the tap-ripple demo overlay */
    width: 68px; /* Reduced from 80px */
    height: 68px;
    border-radius: 50%;
    border: 1px solid var(--border-color); /* Thinner border (was implicit or thicker) */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Subtle depth */
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.voice-controls .large-mic-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    border-color: #d1d5db;
}

.large-mic-button svg {
    width: 32px; /* Reduced icon size for precision look */
    height: 32px;
}

/* --- Skin Toggling Logic --- */
/* Hide standard chat UI when voice-only is active */
/* STRICTLY hide the Classic Resources Panel when in Voice-Only mode */
/* This prevents the double-panel issue during integrated scenario transitions */
body.skin-voice-only #classicResourcesPanel {
    display: none !important;
}
body.skin-voice-only #avatarContainer,
body.skin-voice-only #chatWindow,
body.skin-voice-only #userChat,
body.skin-voice-only #wordCountDisplay,
body.skin-voice-only .message-controls {
    display: none;
}

/* Show voice UI only when voice-only is active */
body:not(.skin-voice-only) #voiceInterfaceContainer {
    display: none;
}
body.skin-voice-only #voiceInterfaceContainer {
    display: flex;
}

/* --- Voice-Only Icon Toggling --- */
#voiceMicButton .mic-icon {
    display: block;
    fill: var(--action-icon-color); /* Deep navy — make the mic stand out */
}
#voiceMicButton .checkmark-icon {
    display: none;
    fill: var(--action-icon-color); /* Deep navy confirm checkmark */
}

/* Recording State: Hide mic, show blinking checkmark */
#voiceMicButton.is-recording .mic-icon {
    display: none;
}
#voiceMicButton.is-recording .checkmark-icon {
    display: block;
    animation: blink-animation 1.5s infinite;
}

/* --- Blinking Animation Keyframes (ensure this is present) --- */
@keyframes blink-animation {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.voice-controls .large-mic-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #e0e0e0; /* A neutral gray background */
    box-shadow: none;
}

/* Ensure hover effects are also removed when disabled */
.voice-controls .large-mic-button:disabled:hover {
    transform: none;
    background-color: #e0e0e0; /* Keep the same disabled background */
}

/* Ensure the SVG icon inside is also grayed out */
.voice-controls .large-mic-button:disabled svg {
    fill: #888888;
}

/* --- Voice-only "press me" mic affordance (wordless) --- */

/* Baseline: a soft ring pulses outward whenever it's the student's turn. Only
   while genuinely ready — never when disabled (AI's turn) or already recording. */
.voice-controls .large-mic-button.mic-awaiting:not(:disabled):not(.is-recording) {
    animation: micAwaitPulse 2.4s ease-in-out infinite;
}
/* The nudge: after 8s of no press, the same pulse quickens to draw the eye. */
.voice-controls .large-mic-button.mic-awaiting.mic-nudge:not(:disabled):not(.is-recording) {
    animation-duration: 1.1s;
}
@keyframes micAwaitPulse {
    0%   { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 0 0 0   color-mix(in srgb, var(--action-icon-color) 38%, transparent); }
    70%  { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 0 0 12px color-mix(in srgb, var(--action-icon-color) 0%, transparent); }
    100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 0 0 0   color-mix(in srgb, var(--action-icon-color) 0%, transparent); }
}

/* One-time tap-ripple demo: a ring "presses" down onto the mic, then a second
   ring radiates outward — the universal wordless "tap here" gesture. */
.mic-tap-demo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}
.mic-tap-demo .mic-tap-press,
.mic-tap-demo .mic-tap-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--action-icon-color);
    transform: translate(-50%, -50%);
}
/* The "finger" ring: starts large + faint, shrinks onto the mic, then fades. */
.mic-tap-demo .mic-tap-press { animation: micTapPress 1.7s ease-out 3; }
/* The ripple: fires as the press lands and expands outward. */
.mic-tap-demo .mic-tap-ripple { opacity: 0; animation: micTapRipple 1.7s ease-out 3; }
@keyframes micTapPress {
    0%        { transform: translate(-50%, -50%) scale(1.85); opacity: 0; }
    35%       { opacity: 0.9; }
    55%       { transform: translate(-50%, -50%) scale(1);    opacity: 0.9; }
    70%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0; }
}
@keyframes micTapRipple {
    0%, 55% { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
    60%     { opacity: 0.55; }
    100%    { transform: translate(-50%, -50%) scale(2.1); opacity: 0; }
}

/* Respect reduced-motion: swap the looping pulse for a steady ring, and let the
   tap-demo rings sit static (still shown briefly, just not animated). */
@media (prefers-reduced-motion: reduce) {
    .voice-controls .large-mic-button.mic-awaiting:not(:disabled):not(.is-recording) {
        animation: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05),
                    0 0 0 3px color-mix(in srgb, var(--action-icon-color) 30%, transparent);
    }
    .mic-tap-demo .mic-tap-press,
    .mic-tap-demo .mic-tap-ripple { animation: none; opacity: 0.5; }
}

/* --- Exam idle-timer display (§B6) ---------------------------------------- */

/* The pacing line occupies the idle slot — vertically centred in the visualizer
   box, where the resting waveform / speech animation sits — not pinned low. It
   is purely informational: it never opens the mic, ends the answer, or scores. */
.voice-idle-timer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 62%;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    z-index: 3;
}
.voice-idle-track {
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--action-icon-color) 18%, transparent);
    overflow: hidden;
}
/* Width is driven from JS (transition tuned to the teacher's duration) so the
   line fills smoothly over exactly the chosen seconds. */
.voice-idle-fill {
    width: 0%;
    height: 100%;
    border-radius: 3px;
    background: var(--action-icon-color);
}
/* At fill, the line turns goldenrod (hue only) — in unison with the mic pulse,
   which is what makes the "the examiner is waiting" signal legible. */
.voice-idle-timer.filled .voice-idle-track {
    background: color-mix(in srgb, goldenrod 22%, transparent);
}
.voice-idle-timer.filled .voice-idle-fill {
    background: goldenrod;
}
/* Held micro-copy: quiet, honest, and carries the meaning for colour-blind
   students so the signal isn't hue-dependent. */
.voice-idle-held-copy {
    font-size: 12.5px;
    line-height: 1.35;
    text-align: center;
    color: color-mix(in srgb, goldenrod 82%, #5c4a12);
    max-width: 260px;
}

/* Mic pulse goldenrod override at idle-fill. Hue only — the animation NAME
   swaps to an identical-timing goldenrod keyframe, so duration/rhythm (base or
   nudge) is untouched. The mic icon and affordance are unchanged. */
.voice-controls .large-mic-button.mic-awaiting.idle-filled:not(:disabled):not(.is-recording) {
    animation-name: micAwaitPulseGold;
}
@keyframes micAwaitPulseGold {
    0%   { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 0 0 0   color-mix(in srgb, goldenrod 55%, transparent); }
    70%  { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 0 0 12px color-mix(in srgb, goldenrod 0%, transparent); }
    100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 0 0 0   color-mix(in srgb, goldenrod 0%, transparent); }
}

/* While the idle line is up, de-emphasise the global exam timer so the student
   sees one waiting signal, not two competing live ticks (§B6). */
body.exam-idle-line-active .scenario-timer {
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    /* Steady goldenrod ring at fill instead of a pulse. */
    .voice-controls .large-mic-button.mic-awaiting.idle-filled:not(:disabled):not(.is-recording) {
        animation: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05),
                    0 0 0 3px color-mix(in srgb, goldenrod 55%, transparent);
    }
    .voice-idle-fill { transition: none !important; }
}

/* Adjust toolbar container for better spacing */
.resources-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px; /* Increased separation from the resource list */
    padding-left: 0; 
    align-items: center;
}

/* style.css - Presentation/Guide Button Fix */

.presentation-button {
    width: auto !important;
    height: 36px; /* Slightly taller */
    padding: 0 16px;
    margin: 0;
    
    /* The Google Drive "Filled Tonal" look */
    background-color: #e8edf3; /* Light Blue Fill */
    color: #1a2a3b; /* Dark Blue Text */
    border: none; /* No outline */
    
    border-radius: 12px; /* Matching the new pills */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.0, 0, 1.0);
    box-shadow: none; /* Flat look */
    flex-shrink: 0;
}

/* Ensure hover state matches technical aesthetic */
.presentation-button:hover {
    background-color: color-mix(in srgb, var(--primary-color) 14%, #ffffff); /* Deeper navy wash on hover */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle lift */
    transform: translateY(-1px);
    color: #1a2a3b;
}

.presentation-button:active {
    background-color: color-mix(in srgb, var(--primary-color) 20%, #ffffff);
    transform: scale(0.98);
}

/* Icon Color */
.presentation-button svg {
    width: 18px; /* Slightly larger icon */
    height: 18px;
    fill: currentColor; /* Inherits the Dark Blue text color */
    flex-shrink: 0;
}

.presentation-button .button-label {
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.intro-presentation-container {
    width: 100%;
    /* Use aspect-ratio for responsive height based on 16:9 */
    aspect-ratio: 16 / 9; 
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden; /* Clips the iframe to the border-radius */
    border: 1px solid var(--border-color);
}

.intro-presentation-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Add these new rules to your style.css file */

/* Style for the new presentation-only dialog */
.dialog-box.presentation-dialog .dialog-content {
    max-width: 900px; /* Wider for presentations */
    width: 90vw;
    padding: 1rem; /* Minimal padding */
    background-color: #333; /* Dark background for focus */
}

.presentation-dialog .intro-presentation-container {
    margin-bottom: 1rem; /* Space between iframe and button */
}

.presentation-dialog .intro-nav {
    margin-top: 0; /* No top margin for the button container */
    clear: none;
}

/* Slider Mechanics */
.intro-slider-viewport {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    position: relative;
    height: auto;
}

.intro-slider-track {
    display: flex;
    width: 100%;
    height: auto;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.intro-slide {
    min-width: 100%;
    height: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.intro-slide.active {
    opacity: 1;
}

/* The Right Panel (Presentation) */
.intro-presentation-wrapper {
    width: 100%;
    /* Note: aspect-ratio is handled inline by JS, but this ensures it fills the new width */
    max-width: 1400px; 
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    background-color: #000;
    border: 1px solid var(--border-color);
    margin: 0 auto;
}

.intro-presentation-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.intro-briefing-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

/* Fallback Layout (No Presentation) */
.intro-standard-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 2rem 0;
    width: 100%;
    height: auto;
    min-height: auto;
}

.intro-centered-wrapper {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
}

/* Slide 2: Hint Layout */

.intro-hint-text {
    margin: 0 auto;
    max-width: 450px; /* Prevent text from stretching too wide */
    font-size: 1.1rem;
    color: #333;
    line-height: 1.5;
}

/* 6. Navigation Bar */
.intro-nav-bar {
    display: flex;
    justify-content: flex-end; /* Align button to right */
    padding-top: 1.5rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .intro-briefing-title {
        font-size: 1.4rem;
    }

    .intro-nav-bar {
        justify-content: center;
    }

    .dialog-box.introduction-dialog {
        top: 50%;
        max-height: 95vh;
    }

    .intro-dialog-padded-content {
        overflow: visible;
        max-height: none;
    }
}

/* --- Rule to hide autoplay controls when globally disabled --- */
body.autoplay-disabled .autoplay-label {
    display: none !important;
}

/* --- Styles for Auto-Scaffold Scenario Transition --- */
#scenarioTransitionOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.75); /* Light, semi-transparent overlay */
    backdrop-filter: blur(2px); /* Soft blur effect for modern browsers */
    z-index: 10; /* Ensure it's above the chat window but below dialogs */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    border-radius: 12px; /* Match the chat window's border-radius */
}

#scenarioTransitionOverlay.visible {
    opacity: 1;
    visibility: visible;
}

/* This class is added to the chat window during transition to fade it out */
#chatWindow.chat-in-transition {
    opacity: 0.5;
    transition: opacity 0.4s ease;
}
/* --- Integrated Scenario Progress Bar (Compact Version) --- */
#integratedScenarioContainer {
    width: 100%;
    padding: 0.75rem 1.25rem; /* Reduced padding */
    margin-bottom: 1rem;     /* Reduced margin */
    background-color: var(--background-card);
    border-bottom: 1px solid var(--border-color); /* Subtle bottom border instead of full border */
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); /* Softer shadow */
    
        /* --- ADD THESE 3 LINES --- */
    position: sticky;
    top: 10px; /* Sits 10px from the top of the viewport */
    z-index: 100; /* Ensures it stays above the scrolling chat content */
    /* --- END OF ADDITIONS --- */
}

.integrated-scenario-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
}

#integratedScenarioTitle {
    font-size: 1.2rem; /* Reduced font size */
    font-weight: 600;
    color: var(--text-color-primary);
    margin: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1rem;
}

#progressLabel {
    font-size: 0.8rem; /* Slightly smaller font */
    font-weight: 600;
    color: var(--text-color-secondary);
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0; /* Prevents the label from shrinking */
}

.progress-bar-container {
    width: 100%;
    height: 8px; /* Made the bar thinner */
    background-color: #e9ecef;
    border-radius: 4px;
    position: relative; /* Crucial for positioning markers */
}

.progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--progress-bar-fill-color); /* <-- CHANGE THIS LINE */
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
}

.progress-markers {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none; /* Allows clicks to pass through */
}

.progress-marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #e9ecef; /* Default state matches the track */
    border: 2px solid #ffffff; /* White border to lift it off the track */
    box-shadow: 0 0 3px rgba(0,0,0,0.15);
    transition: background-color 0.5s ease-in-out;
}

.progress-marker.active {
    background-color: var(--progress-bar-fill-color); /* <-- CHANGE THIS LINE */
}

/* --- Resources Panel for Voice-Only Skin --- */

/* Hide the container by default */
#resourcesContainer {
    display: none;
}

/* Show and style the container ONLY when the voice-only skin is active */
body.skin-voice-only #resourcesContainer {
    display: flex;
    flex-direction: column;
    background: var(--background-card);
    border-radius: 16px; /* Match voice card radius */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* Match voice card shadow */
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    box-sizing: border-box; /* Like .voice-card: keep padding + border INSIDE the width, not added to it */

    /* Desktop Default Styles.
       An exam carries one to three resources, so the rail is sized to a short
       list rather than to a content pane: a narrow column reads as a deliberate
       rail, where a wide one holding two pills reads as a box someone forgot to
       fill. The resource viewer opens in the split pane, not in here. */
    width: 30%;
    max-width: 340px;
    align-self: flex-start; /* Aligns to the top in row view */
    margin-left: 1rem;
    margin-top: 0;
}

/* RESPONSIVE FIX: Stack and Align on Mobile.
   The voice card is inset 1rem each side by #voiceInterfaceContainer's
   padding; match that gutter here (calc 100% - 2rem) + the same 500px cap so
   the two stacked cards share identical left/right edges. */
body.skin-voice-only .container:not(.desktop-view) #resourcesContainer {
    width: calc(100% - 2rem);
    max-width: 500px; /* Match the voice-card max-width */
    margin: 1rem auto 0; /* Center + spacing between card and panel */
    align-self: center; /* Center horizontally in the column */
}

/* EMPTY-STATE HANDLING FOR THE VOICE RESOURCES RAIL
   The rail's width stays reserved (desktop) so the voice card never shifts, but
   when there is no content we strip all card chrome so the column reads as blank
   space rather than an empty card with a lingering header. */
body.skin-voice-only .container.desktop-view #resourcesContainer.resources-empty {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 0;
    /* width / margin-left preserved from the base rule → column still reserved */
}
body.skin-voice-only #resourcesContainer.resources-empty > * {
    display: none !important;
}
/* On mobile the rail stacks below the card, so a reserved-but-blank column would
   just be dead vertical space — collapse it entirely instead. */
body.skin-voice-only .container:not(.desktop-view) #resourcesContainer.resources-empty {
    display: none;
}

body.skin-voice-only .container.desktop-view #scenarioInfo {
    top: 0; /* Remove the 5.5rem offset used in Classic mode */
    margin-top: 0; /* Ensure flush alignment with the top */
    align-self: flex-start; /* Ensure flexbox aligns it to the top line */
    height: auto;
    max-height: calc(100vh - 40px); /* Ensure sticky scrolling works cleanly */
}

.sidebar-heading,
#resourcesTitle,
#classicResourcesTitle {
    display: flex;
    align-items: center;
    gap: 8px;

    font-family: var(--font-primary);
    font-size: 0.9rem; /* Closer to scenario title size */
    font-weight: 800; /* Match scenario title weight */
    color: var(--text-color-primary); /* Match scenario title color */
    margin: 1.5rem 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.02em; /* Match scenario title spacing */
    border-bottom: none;
}

/* Adjust the icon size in the header */
.resource-icon {
    width: 18px; 
    height: 18px;
    flex-shrink: 0;
}

/* Voice-only title specifics */
#resourcesTitle {
    font-size: 1.0rem;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
    white-space: nowrap; /* Prevent title from wrapping */
}

#resourcesContent {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between each resource */
}

#noResourcesMessage {
    color: var(--text-color-secondary);
    font-style: italic;
    margin: 0;
}

/* Use existing activity-link styles for the links themselves */
#resourcesContent .activity-link,
#resourcesContent .scaffolding-link {
    display: flex; 
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 14px; /* Matches standard .resource-pill padding */
    margin: 0;
}

/* Style the gate specifically for the voice view */
#voiceActivityGateContainer .activity-gate-container {
    margin-top: 1.5rem; /* Space it from the resources list */
    width: 100%;
    box-sizing: border-box;
}

/* Ensure the standard chat container doesn't take up space in voice-only mode */
body.skin-voice-only .chat-container {
    display: none;
}

/* Adjust the main content layout for voice-only skin */
body.skin-voice-only .content-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* RESPONSIVE FIX: Switch to Column on Mobile */
body.skin-voice-only .container:not(.desktop-view) .content-container {
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically if height allows */
}

/* --- Desktop Responsive Priority (Voice-Only Skin) ---
   Between full width and the existing 1024px mobile-stack breakpoint, the
   voice card must be the LAST thing to visibly shrink (it's the primary
   task surface). #voiceInterfaceContainer already has flex-shrink:0 and a
   realistic max-width (see its base rule), so by default the row's
   flex-shrink math falls to #resourcesContainer and #scenarioInfo instead.
   Priority order as the window narrows:
     1) resources panel shrinks (up to 30% narrower than its 450px cap)
     2) metadata panel collapses entirely — mirrors the mobile default
        (hidden, accessible via the voice card's (i) info toggle instead)
     3) full mobile stack (existing 1024px breakpoint, unchanged)
   Step 1 needs no explicit breakpoint: giving #resourcesContainer a
   min-width floor lets flexbox's own shrink math narrow it smoothly and
   continuously as the row gets tight, and — because #scenarioInfo and
   #voiceInterfaceContainer are flex-shrink:0 — it's the ONLY thing that
   shrinks, until it bottoms out at the floor. */
body.skin-voice-only .container.desktop-view #scenarioInfo {
    /* 30% narrower than the shared classic-skin default (33% / 280px) — the
       voice-only metadata panel doesn't need as much width as the classic
       chat sidebar, and the narrower floor also delays the point at which
       the row can no longer fit all three columns (see the breakpoint
       below, retuned to match). */
    width: 23%;
    min-width: 196px;
    flex-shrink: 0;
}

body.skin-voice-only .container.desktop-view #resourcesContainer {
    min-width: 240px; /* floor = 30% narrower than the default 340px cap */
}

@media (max-width: 1240px) {
    body.skin-voice-only .container.desktop-view #scenarioInfo {
        display: none;
    }
    body.skin-voice-only .container.desktop-view #voiceInfoToggle {
        display: flex !important;
    }
}

/* --- Scenario Timer Styles --- */
.scenario-timer {
    padding: 4px 10px;
    border: 1px solid #e0e0e0; /* Thinner border */
    border-radius: 4px; /* Sharper corners */
    background-color: #ffffff;
    color: #333333; 
    font-weight: 500;
    font-size: 0.9rem; /* Slightly smaller */
    font-family: var(--font-technical); /* Force Roboto Mono */
    letter-spacing: -0.05em; /* Tight tabular feel */
    transition: color 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Warning state: under 2 minutes — amber caution (a heads-up, not alarm) */
.scenario-timer.timer-warning {
    color: var(--caution-color);
    border-color: var(--caution-color);
}

/* Critical state: under 1 minute — ox blood, pulsing */
.scenario-timer.timer-critical {
    color: var(--brand-oxblood);
    border-color: var(--brand-oxblood);
    animation: pulse-border 1.5s infinite;
}

@keyframes pulse-border {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-oxblood) 40%, transparent); }
    70% { box-shadow: 0 0 0 5px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- Scenario/Exam Status Indicator --- */
.scenario-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: var(--font-primary);
    transition: all 0.4s ease;
    width: fit-content;
    white-space: nowrap; /* Prevent status text from wrapping */
    flex-shrink: 0; /* Don't allow pill to shrink */
}

/* Active/In Progress State — olive */
.scenario-status-active {
    background: color-mix(in srgb, var(--brand-pine) 11%, transparent);
    border: 1px solid var(--brand-pine);
    color: var(--brand-pine);
}

.scenario-status-active .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: goldenrod;
    box-shadow: 0 0 8px color-mix(in srgb, goldenrod 60%, transparent);
    animation: status-glow 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes status-glow {
    0%, 100% { box-shadow: 0 0 4px color-mix(in srgb, goldenrod 40%, transparent); }
    50% { box-shadow: 0 0 12px color-mix(in srgb, goldenrod 85%, transparent); }
}

/* Unified theme (exam / scenario / encounter): navy pill — goldenrod text/dot
   on a #133548 fill for legible contrast. The body theme class drives the color
   so v1/legacy scenarios keep the default olive active pill. */
body.unified-theme .scenario-status-active {
    background: #133548;
    border-color: color-mix(in srgb, #f6f5f1 45%, transparent);
    color: #f6f5f1;
}

body.unified-theme .scenario-status-active .status-dot {
    background: goldenrod;
    animation-name: status-glow-ivory;
}

@keyframes status-glow-ivory {
    0%, 100% { box-shadow: 0 0 4px color-mix(in srgb, goldenrod 45%, transparent); }
    50% { box-shadow: 0 0 12px color-mix(in srgb, goldenrod 90%, transparent); }
}

/* =====================================================================
   UNIFIED THEME — shared by exam / scenario / encounter modes
   (body.unified-theme, toggled in 02-init.js). This is the ivory/navy/oxblood
   voice-card system, originally built for exam mode and now the source of
   truth for all three scenario types. Mode-specific differences live under
   body.exam-mode (examiner framing) or the interlocutor media-zone rules
   (scenario / encounter avatar) further below.
   ===================================================================== */

/* Warm parchment card so the banner / avatar ivory ground blends into it */
body.unified-theme .voice-card {
    background: #f2f2ea;
}

/* On the warmer card the pale default track washes out — give it a navy-tinted
   base for definition while the oxblood fill stays. */
body.unified-theme .voice-phase-track {
    background: color-mix(in srgb, var(--brand-navy) 18%, #f2f2ea);
}

/* On the warm parchment card the neutral grey rules read as a stray box edge;
   navy-tinted hairlines read as an engraved band instead. */
body.unified-theme .voice-phase-caption {
    border-top-color: color-mix(in srgb, var(--brand-navy) 28%, #f2f2ea);
    border-bottom-color: color-mix(in srgb, var(--brand-navy) 28%, #f2f2ea);
}

body.unified-theme .voice-phase-part {
    color: var(--brand-navy);
}

/* Phase-name flash (and other voice overlays) cover the visualizer — on the
   ivory exam card the default white cover reads as a clashing square, so tint
   it to the card ivory instead. */
body.unified-theme #voiceSystemMessageContainer {
    background-color: rgba(242, 242, 234, 0.95);
}

/* Exam mode: ivory-on-navy mic + replay buttons (same #133548 as the status
   pill), replacing the pine-green mic / gray replay so the card stays sober
   and avoids a green/red clash with the oxblood interlocutor voice.
   Scoped to :not(:disabled) so the existing disabled/greyed states still show. */
body.unified-theme .voice-controls .large-mic-button:not(:disabled),
body.unified-theme .large-replay-button:not(:disabled) {
    background-color: #133548;
    border-color: var(--brand-navy);
}

body.unified-theme .voice-controls .large-mic-button:not(:disabled):hover,
body.unified-theme .large-replay-button:not(:disabled):hover {
    background-color: color-mix(in srgb, #133548 82%, black);
    border-color: var(--brand-navy);
}

body.unified-theme #voiceMicButton:not(:disabled) .mic-icon,
body.unified-theme #voiceMicButton:not(:disabled) .checkmark-icon,
body.unified-theme .large-replay-button:not(:disabled) svg {
    fill: #f6f5f1;
}

/* Disabled (ghosted) mic in exam mode: a faded navy circle rather than the
   default grey — and an ivory icon. The base #voiceMicButton .mic-icon rule
   carries an ID, so the ghost needs ID-level specificity to override the pine
   green; the :disabled rule's opacity:0.4 supplies the "deactivated" fade. */
body.unified-theme .voice-controls .large-mic-button:disabled,
body.unified-theme .voice-controls .large-mic-button:disabled:hover {
    background-color: #133548;
}

body.unified-theme #voiceMicButton:disabled .mic-icon,
body.unified-theme #voiceMicButton:disabled .checkmark-icon {
    fill: #f6f5f1;
}

/* Exam mode: keep every card on the ivory ground, not just the voice card */
body.unified-theme #scenarioInfo,
body.unified-theme.skin-voice-only #resourcesContainer {
    background: #f2f2ea;
}

/* The left meta card hugs the viewport edge in the wide exam layout — inset it
   a little so it doesn't read as floating against the edge. */
body.unified-theme .container.desktop-view #scenarioInfo {
    margin-left: 2rem;
}

/* Recording timer pill (shown while the student records) — deep wine in exam
   mode instead of the default black, with an ivory pulse dot for contrast. */
body.unified-theme #recordingStatus {
    background-color: #6E2639;
}

body.unified-theme #recordingStatus .recording-dot {
    background-color: #f6f5f1;
}

/* Goldenrod reads well on the wine pill; lift the text slightly so the running-
   long state clears contrast against #6E2639 as well as against the default. */
body.unified-theme #recordingStatus.running-long .recording-dot {
    background-color: goldenrod;
}

body.unified-theme #recordingStatus.running-long {
    color: color-mix(in srgb, goldenrod 75%, #ffffff);
}

/* Utility buttons (hints, copy, reload, share…) and the floating mobile (i)
   toggle sit on the ivory cards now, so give them the ivory ground too. */
body.unified-theme #scenarioInfo .icon-button,
body.unified-theme .voice-info-toggle {
    background: #f2f2ea;
}

body.unified-theme #scenarioInfo .icon-button:hover,
body.unified-theme .voice-info-toggle:hover {
    background: color-mix(in srgb, var(--brand-navy) 8%, #f2f2ea);
}

/* =====================================================================
   TEXT-BASED (classic chat) scenarios — unified theme + exam specifics
   Section 1 below is EXAM-ONLY (the header collapses to the navy pill and the
   interlocutor is hidden / reads as "Examiner"). Sections 2–3 are UNIFIED:
   scenario / encounter keep their interlocutor avatar + name + tagline but
   pick up the same navy/ivory bubbles and controls.
   ===================================================================== */

/* 1. EXAM ONLY — drop the interlocutor avatar + identity from the chat header;
   the status pill stands alone in their place. The (i) info toggle is kept.
   Scenario / encounter deliberately keep the avatar + identity. */
body.exam-mode #interlocutorAvatar,
body.exam-mode .avatar-group .interlocutor-identity {
    display: none;
}
/* The now-empty avatar group must not stretch, or it would shove the pill
   across the header. Collapse it and let the pill sit at the left. */
body.exam-mode .avatar-group {
    flex-grow: 0;
    gap: 0;
}
body.exam-mode #avatarContainer .scenario-status {
    order: -1; /* pill first; the (i) toggle/timer follow to the right */
}

/* 2. Inbound (examiner / interlocutor) bubbles: the default #f6f4ee sits almost
   on top of the ivory card — a deeper warm parchment separates them clearly and
   still reads distinctly from the cool student bubbles. */
body.unified-theme #chatWindow .interlocutor-message {
    background-color: #e8e2d2;
}
body.unified-theme:not(.autoplay-disabled) #chatWindow .interlocutor-message:hover {
    background-color: #ddd6c3;
}

/* 3. Send + mic buttons: same deep navy as the voice-only exam mic (ivory
   icon on #133548) rather than the pine-green icons. Recording keeps its
   oxblood cue; disabled keeps the greyed state. */
body.unified-theme #sendMessageButton:not(:disabled),
body.unified-theme .icon-button#micButton:not(:disabled):not(.is-recording) {
    background-color: #133548;
    border-color: var(--brand-navy);
}
body.unified-theme #sendMessageButton:not(:disabled):hover,
body.unified-theme .icon-button#micButton:not(:disabled):not(.is-recording):hover {
    background-color: color-mix(in srgb, #133548 82%, black);
    border-color: var(--brand-navy);
}
body.unified-theme #sendMessageButton:not(:disabled) svg,
body.unified-theme .icon-button#micButton:not(:disabled):not(.is-recording) svg {
    fill: #f6f5f1;
}

/* =====================================================================
   INTERLOCUTOR AVATAR MEDIA ZONE — scenario / encounter only
   The teacher supplies this avatar, so we do NOT control its colors. Goal is
   NON-COLLISION, not harmony: sandbox it in a dedicated media zone (rounded
   corners, near-neutral backing, quiet border + soft inset) so even a loud,
   saturated avatar reads as "an image placed inside our app," never bleeding
   edge-to-edge into our chrome. Exam mode uses its own banner and hides these
   elements, so both rules are effectively scoped to scenario / encounter.
   ===================================================================== */

/* Backing a hair lighter than the #f2f2ea parchment card so the avatar reads
   as an inset. object-fit:contain letterboxes any aspect ratio onto the
   backing rather than cropping/bleeding. */
body.unified-theme .voice-avatar-wrapper #voiceInterlocutorAvatar {
    width: 100%;
    max-width: 280px;          /* match the exam banner footprint it replaces */
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 14px;       /* rounded media card, not a circle */
    object-fit: contain;
    background: #fbfaf7;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55),
                0 2px 10px rgba(26, 42, 59, 0.06);
}

/* Classic-chat header avatar: same non-collision treatment at header scale —
   whole avatar shown on a near-neutral backing ring, no edge-to-edge bleed. */
body.unified-theme #interlocutorAvatar {
    object-fit: contain;
    background: #fbfaf7;
    padding: 3px;
    border-color: var(--border-color);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Layout parity with exam mode: the "in progress" pill + timer sit ABOVE the
   media (banner in exam, avatar in scenario/encounter). Exam already renders
   this way because its avatar wrapper is hidden and the status row precedes the
   banner in the DOM; scenario/encounter show the avatar wrapper first, so lift
   the status row above it. order:-1 only outranks the avatar wrapper (order 0);
   the phase display, visualizer and controls stay below, and the corner toggle
   buttons are out of flow. */
body.unified-theme .voice-card .voice-status-timer-row {
    order: -1;
}

/* Concluded State — ox blood */
.scenario-status-concluded {
    background: color-mix(in srgb, var(--brand-oxblood) 10%, transparent);
    border: 1px solid var(--brand-oxblood);
    color: var(--brand-oxblood);
}

.scenario-status-concluded .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-oxblood);
    box-shadow: none;
    animation: none;
    flex-shrink: 0;
}

/* Status and Timer Row Container */
.status-timer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 1.25rem; /* Extra breathing room below the status pill, above the resources title */
    gap: 0.5rem; /* Add gap for when content is tight */
}

/* Voice-Only Skin: status pill + timer share one centered row inside the voice
   card, sitting just above the exam banner / visualizer. */
.voice-card .voice-status-timer-row {
    display: flex;
    align-items: center;      /* vertically centre the pill and timer */
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: -0.25rem;
    /* .voice-exam-logo (top-left, exam mode) and .voice-info-toggle (top-right
       "(i)" icon) are both position:absolute and corner-pinned on .voice-card,
       out of this row's flow — so this row has no natural awareness of them.
       Pad its own box (rather than capping max-width, which fights flex's
       default min-width:auto content floor) so the centered badge/timer
       content always keeps a clear ~32px margin on each side — enough to
       clear the logo's ~28px reach and the toggle's ~12px reach past the
       card's own padding — instead of letting flex-wrap fill the full card
       width and collide with the corners. */
    min-width: 0;
    box-sizing: border-box;
    padding-left: 32px;
    padding-right: 32px;
}

/* Timer sits to the RIGHT of the "in progress" pill and mirrors its pill
   silhouette + height so the two read as a matched pair. */
.voice-card .voice-status-timer-row .scenario-timer {
    margin: 0;
    padding: 6px 12px;        /* match the status pill's 6px vertical padding */
    border-radius: 20px;      /* match the status pill's rounded shape */
    font-size: 0.8rem;        /* match the status pill's text size */
}

/* Classic Skin: status pill sits in the chat header, immediately right of the
   avatar. margin-right:auto keeps it hugging the avatar while the timer/banner
   are pushed to the far right; it may shrink (with ellipsis) on tight screens. */
#avatarContainer .scenario-status {
    margin-right: auto;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
}
#avatarContainer .scenario-status .status-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Positioning Logic --- */

/* 1. Default Skin Position */
/* Ensure banner doesn't interfere */
#avatarContainer .chat-banner {
    order: -1; /* Puts banner before avatar group visually if needed, adjust as per layout */
}
/* 2. Voice-Only Skin: the voice-only timer now lives in the voice card's
   status/timer row (see .voice-status-timer-row). Hide the classic-skin timer
   that sits in the chat header when the voice skin is active. */
body.skin-voice-only #avatarContainer .scenario-timer {
    display: none !important; /* Hide the default timer */
}

/* Tagline Styling */
.interlocutor-tagline {
    font-family: var(--font-primary);
    font-size: 0.75rem;     
    font-style: normal; /* Remove italic */
    color: var(--text-color-secondary);
    margin: 2px 0 0 0;      
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1.3;
}

.interlocutor-tagline:hover {
    color: var(--accent-color);
}
/* Center the tagline in the voice UI */
.voice-avatar-wrapper {
    cursor: pointer; /* Make the whole area clickable to open the modal */
    /* NEW: Flex properties to ensure image stays centered above text */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Ensure the name/tagline in voice UI are centered */
.voice-avatar-wrapper .interlocutor-identity {
    margin-top: 1rem;
    text-align: center;
    width: 100%; /* Ensure identity container spans width for centering */
}

#voiceInterlocutorNameDisplay {
    font-family: var(--font-primary);
    font-size: 1.1rem; 
    font-weight: 800; /* Extra bold */
    color: var(--text-color-primary);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

#voiceInterlocutorTagline {
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-style: normal;
    color: var(--text-color-secondary);
    margin-top: 4px;
    /* NEW: Ensure multi-line text centers on itself */
    text-align: center;
    width: 100%;
}

/* Exam Mode Voice Interface Layout */
.voice-exam-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: -16px;
}

.voice-exam-logo {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 50%;
    border: 2px solid var(--border-color, #e0e0e0);
    background: #fff;
    padding: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.voice-exam-banner {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    position: relative; /* above the plate's ruling */
    z-index: 1;
}

/* THE EXAM PLATE
   The banner used to float directly on the card with no ground of its own,
   which is part of why it read as pasted-on decoration. Sitting it on a plate
   gives it a reason to be the size it is — and gives us a surface that can
   carry state without adding a widget.

   The ruling shifts its offset and lifts its tone by one step at each part
   boundary, and settles back down at the closing message. It is deliberately
   near the threshold of noticeability: the student should not be able to say
   what changed, only that the exam moved on. Everything here transitions at
   part boundaries only — never while anyone is speaking. */
.voice-exam-plate {
    position: relative;
    width: 100%;
    max-width: 280px;
    padding: 12px 14px;
    box-sizing: border-box;
    border-radius: 12px;
    overflow: hidden;
    background-color: transparent;
    transition: background-color var(--dur-scene) var(--ease-scene);
}

/* The masking box. Sized to the plate, so the fade is measured against the
   edge the candidate can actually see. */
.voice-exam-grid {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
    /* The ruling has no business meeting the plate's edge — a hard boundary
       would draw a box around the artwork, which is the opposite of a ground.
       It reaches full strength over the middle and is gone before the corners. */
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 28%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 28%, transparent 100%);
}

/* The ruling itself: a diagonal GRID — both directions, like grid paper turned
   45° — not a single set of hatches.

   The two directions are separate layers, each oversized so rotation never
   swings a bare corner into the masked area. They are separate because the part
   transition moves them AGAINST each other (see _examPlateWeave in
   09-prompts.js): the grid briefly stops being square and then re-locks a few
   degrees over. Nothing translates — an infinitely repeating grid shifted by one
   period looks exactly like where it started, so travel is the one thing this
   material cannot express reliably.

   Resting transform and opacity are owned by JS, not by this stylesheet. A CSS
   transition can only interpolate between two endpoints, and the weave needs a
   mid-path excursion, so the Web Animations API drives it and holds the result. */
.voice-exam-ruling {
    position: absolute;
    inset: -60%;
    transform-origin: center;
    /* Opening values only. Once a run starts, JS owns both of these. */
    transform: rotate(0deg);
    opacity: 0.18;
}

/* 16px period with 1.5px lines: wide enough that the diagonals don't moire
   against the display grid at fractional scale factors. */
.voice-exam-ruling.is-a {
    background-image: repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--brand-navy) 22%, transparent) 0px,
        color-mix(in srgb, var(--brand-navy) 22%, transparent) 1.5px,
        transparent 1.5px,
        transparent 16px
    );
}

.voice-exam-ruling.is-b {
    background-image: repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, var(--brand-navy) 22%, transparent) 0px,
        color-mix(in srgb, var(--brand-navy) 22%, transparent) 1.5px,
        transparent 1.5px,
        transparent 16px
    );
}

/* Only the plate's own wash still steps in CSS — it has no mid-path to travel,
   so a plain transition says everything it needs to. Hue is left alone on
   purpose: oxblood is the alert colour in this palette, so tinting Part 3
   toward it would make a later part feel like a warning. */
.voice-exam-plate[data-part-step="1"] { background-color: color-mix(in srgb, var(--brand-navy) 2%, transparent); }
.voice-exam-plate[data-part-step="2"] { background-color: color-mix(in srgb, var(--brand-navy) 3%, transparent); }
.voice-exam-plate[data-part-step="3"] { background-color: color-mix(in srgb, var(--brand-navy) 4%, transparent); }
.voice-exam-plate[data-part-step="4"] { background-color: color-mix(in srgb, var(--brand-navy) 5%, transparent); }
.voice-exam-plate[data-part-step="5"] { background-color: color-mix(in srgb, var(--brand-navy) 6%, transparent); }

/* Closing message: the ruling fades out and the plate goes flat. The exam
   stops signalling forward motion because there isn't any left. */
.voice-exam-plate.is-final { background-color: transparent; }

/* The state changes still land under a reduced-motion preference; they just
   don't travel to get there. */
@media (prefers-reduced-motion: reduce) {
    .voice-exam-plate,
    .voice-phase-fill {
        transition: none;
    }
}

/* Phase display (teacher-toggled): phase-name caption + rough progress bar.
   Sits between the banner (exam) or tagline (regular) and the visualizer. */
.voice-phase-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 280px; /* align with the exam banner */
}

/* The exam wrapper pulls the next element up 16px; restore breathing room when
   the phase display is that element. The plate's top rule needs more clearance
   under the banner than the old bare caption did, or it reads as an underline
   of the artwork rather than the top edge of its own sign. */
.voice-phase-display.exam-offset {
    margin-top: 16px;
}

/* The caption plate. Two hairline rules and a little breathing room turn the
   caption from a stray line into a fixed instrument the eye files once —
   the "you are on this road" signal, not a warning. Both lines keep their box
   even while empty (min-height on each), so a caption change never nudges the
   card. */
.voice-phase-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
    padding: 7px 10px 8px;
    box-sizing: border-box;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* Part label — superordinate. Smaller in point size than the phase name, but
   given every other signal of primacy: caps, letterspacing, full-strength text
   colour, and ownership of the plate. Reads like a running head over a chapter
   title: unmistakably above, without shouting. */
.voice-phase-part {
    font-family: var(--font-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--text-color-primary);
    margin: 0;
    text-align: center;
    line-height: 1.35;
    min-height: 1.35em;
}

/* Phase name — the changing detail, set quietly beneath the part it belongs to. */
.voice-phase-name {
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-color-secondary);
    letter-spacing: 0.01em;
    margin: 0;
    text-align: center;
    line-height: 1.3;
    min-height: 1.3em;
}

/* With no part above it — a scenario that uses none, or a run that hasn't
   reached its first declared part — the phase name is alone on the plate and
   carries it. It takes back the weight it otherwise cedes to the part label and
   centres in the plate rather than sitting under a blank line. Case is left
   alone: the caps treatment belongs to the part label. */
.voice-phase-caption.name-only {
    justify-content: center;
}

.voice-phase-caption.name-only .voice-phase-name {
    font-weight: 600;
    color: var(--text-color-primary);
}

.voice-phase-track {
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: var(--border-color);
    overflow: hidden;
}

.voice-phase-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: var(--accent-color);
    transition: width var(--dur-scene) var(--ease-scene);
}

/* Modal Bio Styling */
.modal-bio {
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
    padding: 10px 20px;
    max-width: 500px; /* MODIFIED: Constrain width for readability */
    white-space: pre-wrap;
}

/* Replay Button Styling */
.voice-controls {
    display: flex;
    align-items: center;
    gap: 1rem; /* Tighter gap */
}

.large-replay-button {
    width: 48px; /* Reduced from 56px */
    height: 48px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.large-replay-button:hover {
    background-color: rgba(0, 0, 0, 0.04);
    border-color: color-mix(in srgb, var(--border-color) 70%, black);
}

.large-replay-button:active {
    background-color: rgba(0, 0, 0, 0.08);
    transform: scale(0.96);
}

.large-replay-button svg {
    width: 22px; /* Smaller icon */
    height: 22px;
    fill: var(--text-color-secondary);
}

.large-replay-button:hover svg {
    fill: var(--text-color-primary);
}

/* Disabled state */
.large-replay-button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background-color: transparent;
    border-color: var(--border-color);
}

.large-replay-button:disabled:hover {
    transform: none;
    background-color: transparent;
    border-color: var(--border-color);
}

.large-replay-button:disabled svg {
    fill: var(--text-color-secondary);
}

/* Replay Counter Badge */
.replay-counter {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--background-card);
    display: none;
}

/* style.css */

/* Base Bubble Style */
.emoji-reaction-bubble {
    position: absolute;
    bottom: 0;
    left: 45px; /* Classic skin default */
    z-index: 10;
    background-color: var(--background-card);
    border-radius: 50%;
    padding: 6px;
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 2px solid white;
    transform-origin: bottom left;
    animation: pop-and-fade 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Adjustment for Voice-Only Avatar (larger 100px avatar) */
.voice-avatar-wrapper .emoji-reaction-bubble {
    left: 75px; /* Push further right because the avatar is wider */
    bottom: 5px;
    font-size: 32px; /* Slightly larger emoji to match the larger avatar scale */
}

/* --- NEW: Voice-Only Disappearing Sticker --- */

#voiceEmojiStickerContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none; /* Let clicks pass through to visualizer/mic */
    z-index: 5; /* Sit above visualizer canvas */
    display: flex;
    justify-content: center;
    align-items: center;
}

.voice-emoji-sticker {
    font-size: 6rem; /* Large visibility */
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
    opacity: 0;
    /* 5 Second Animation Cycle */
    animation: voiceStickerFade 5s ease-in-out forwards;
}

@keyframes voiceStickerFade {
    0% { 
        opacity: 0; 
        transform: scale(0.5) translateY(20px); 
    }
    10% { 
        opacity: 1; 
        transform: scale(1.1) translateY(0); /* Pop in */
    }
    20% { 
        transform: scale(1); /* Bounce settle */
    }
    80% { 
        opacity: 1; 
        transform: scale(1); /* Hold */
    }
    100% { 
        opacity: 0; 
        transform: scale(1.2); /* Fade out growing slightly */
    }
}

/* NEW: In-chat emoji sticker style */
.message.emoji-sticker {
    background: none;
    padding: 0.5rem 1rem; /* Provides vertical spacing in the chat log */
    display: flex;
    align-items: center;
    justify-content: center; /* Horizontally centers the sticker in the chat flow */
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.message.emoji-sticker span {
    font-size: 4.5rem; /* INCREASED: Makes the emoji significantly larger */
    line-height: 1;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.2)); /* A slightly deeper shadow */
    
    /* NEW STYLES for the circular "sticker" look */
    border: 1px solid var(--border-color); /* The 1px grey border */
    border-radius: 50%;                    /* Makes it perfectly round */
    padding: 0.75rem;                      /* Adds the internal padding */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;  /* Defines a consistent width */
    height: 80px; /* Defines a consistent height */
    background-color: var(--background-card); /* Ensures it sits on a clean background */
}

@keyframes pop-and-fade {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    15% { /* Faster pop */
        transform: scale(1.1);
        opacity: 1;
    }
    30% { /* Settle */
        transform: scale(1);
        opacity: 1;
    }
    85% { /* Linger much longer */
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.5);
        opacity: 0;
    }
}

/* --- V2 Assessment Button & Dialog Styles --- */

/* Dialog Box Container Override */
.dialog-box.assessment-dialog {
    max-height: 90vh; 
    display: flex;
    flex-direction: column;
    top: 50%; 
    width: 95%;
    max-width: 850px;
}

.dialog-box.assessment-dialog .dialog-content {
    width: 100%; 
    max-width: none;
    text-align: left;
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    min-height: 0; 
    overflow: hidden; 
    padding: 0; 
    background-color: #fdfbf7; 
}

/* FIX: Reset white-space to normal to collapse HTML structure gaps */
.assessment-dialog #dialogMessage {
    white-space: normal; 
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
    overflow-y: auto; 
    flex-grow: 1;
    padding: 1rem 1.5rem; /* Increased horizontal padding for readability */
    margin-bottom: 0; 
}

.assessment-dialog #dialogButtons {
    padding: 0.75rem 1.5rem;
    background-color: #fff;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0; 
}

/* --- Assessment Report Internal Styling (Tighter "Doctor's Notepad" Look) --- */

.assessment-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Tight gap between cards */
}

.assessment-item {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0.6rem 0.8rem; /* Compact padding */
    border-left: 4px solid var(--secondary-color); /* Thicker accent line */
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.assessment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align to top in case text wraps */
    margin-bottom: 0.25rem;
    gap: 1rem;
}

.assessment-criterion {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary-color);
    line-height: 1.3;
}

.assessment-score {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-color-primary);
    background-color: #f0f2f5;
    border: 1px solid #d1d9e6;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    align-self: flex-start;
}

/* Apply pre-wrap here so actual comments preserve line breaks */
.assessment-comment {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
    margin-top: 4px;
    white-space: pre-wrap; 
}

/* Summary & Intelligibility Containers */
.assessment-summary, 
.assessment-intelligibility {
    background-color: #f4f6f8;
    border: 1px solid #dce2e8;
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.assessment-summary strong, 
.assessment-intelligibility strong {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--secondary-color);
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 2px;
}

.assessment-summary p, 
.assessment-intelligibility p {
    margin: 0;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.5;
    white-space: pre-wrap; /* Preserve formatting in summary */
}

/* Total Score Footer */
.assessment-total {
    margin-top: 0.5rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    text-align: right;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

@keyframes fade-in-and-scale {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- Speed Selector Styles --- */
.speed-control-container {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid #e0e0e0;
    height: 24px;
}

.speed-select {
    background-color: var(--background-input);
    border: 1px solid var(--border-color-input);
    border-radius: 4px;
    color: var(--text-color-primary);
    font-size: 0.85rem;
    padding: 2px 4px;
    cursor: pointer;
    font-family: inherit;
}

.speed-select:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* --- Speed Selector Modifications for Voice Skin --- */
/* When inside the voice card, remove the divider border */
.voice-controls .speed-control-container {
    border-left: none;
    margin-left: 0;
    
    padding-left: 0;
    margin-right: 12px;
    height: 32px; /* Match height of smaller buttons */
}

.voice-controls .speed-select {
    padding: 0 8px;
    height: 100%;
    border-radius: 6px; /* Match global button radius */
    border: 1px solid var(--border-color);
    background-color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
}

/* --- Classic Skin Resources Panel --- */
.sidebar-resources-panel {
    display: none; /* Hidden by default */
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden; /* Required for smooth height animation */
    opacity: 0;
    transition: opacity 0.5s ease;
}

.sidebar-resources-panel.visible {
    display: block;
    /* ADDED: Explicitly set opacity to 1 as a fallback/final state */
    opacity: 1; 
    animation: slideDownFade 0.5s forwards;
}

.sidebar-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 1rem 0;
}

.sidebar-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color-primary);
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Unified Resource Item Styling (Classic & Voice) --- */

#classicResourcesContent .activity-link,
#resourcesContent .activity-link {
    font-size: 0.95rem;
    line-height: 1.4;
}

@keyframes slideDownFade {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#classicResourcesContent,
#resourcesContent {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Increased vertical space between pills */
    padding-top: 8px;
    width: 100%;
}

/* --- Activity Gate Glow Animation --- */
@keyframes gatePulse {
    0% {
        border-color: var(--activity-gate-border); /* Starts evergreen */
        box-shadow: 0 0 0 0 rgba(47, 82, 51, 0);
    }
    50% {
        border-color: var(--accent-color); /* Pulses to ox-blood accent */
        box-shadow: 0 0 10px 2px rgba(47, 82, 51, 0.35); /* Soft evergreen glow */
    }
    100% {
        border-color: var(--activity-gate-border); /* Returns to evergreen */
        box-shadow: 0 0 0 0 rgba(47, 82, 51, 0);
    }
}

@keyframes resourceBlink {
    0%, 20%, 40%, 60%, 80% { opacity: 1; }
    10%, 30%, 50%, 70%, 90% { opacity: 0; }
    100% { opacity: 0; }
}

/* --- Resource Split Pane Styles --- */

/* Default: Hidden */
.resource-split-pane {
    width: 0;
    opacity: 0;
    overflow: hidden;
    background: var(--background-card);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
    flex-shrink: 0; 
}

/* Active State: Visible - Now takes more space */
.container.resource-pane-active .resource-split-pane {
    width: 50%;
    opacity: 1;
    border-left: 1px solid var(--border-color);
    /* FIX: Explicit height required so the internal iframe has vertical space to fill */
    height: calc(100vh - 120px);
    min-height: 500px; /* Safety minimum */
}

/* === CLASSIC SKIN: Hide sidebar and show info toggle when pane is active === */
.container.resource-pane-active.desktop-view #scenarioInfo {
    display: none !important;
}

/* Show the desktop info toggle button when resource pane is active */
.container.resource-pane-active.desktop-view .desktop-info-toggle {
    display: inline-flex !important;
}

/* Chat container takes full remaining width when pane is active */
.container.resource-pane-active.desktop-view .chat-container {
    width: 50%;
}

/* Adjust content container to be two-column */
.container.resource-pane-active.desktop-view .content-container {
    flex-direction: row;
    gap: 0;
}

/* === Desktop Info Toggle Button Styling === */
.desktop-info-toggle {
    display: none;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    padding: 6px;
    cursor: pointer;
    border-radius: 50%;
    line-height: 0;
    flex-shrink: 0;
    margin-left: auto;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.desktop-info-toggle svg {
    width: 24px;
    height: 24px;
    fill: var(--text-color-secondary);
    transition: fill 0.2s ease;
}

.desktop-info-toggle:hover {
    background: color-mix(in srgb, var(--background-card) 95%, black);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.desktop-info-toggle:hover svg {
    fill: var(--accent-color);
}

/* === Floating Scenario Info Panel (for collapsed state) === */
.scenario-info-floating {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 200;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 1.25rem;
    width: 320px;
    max-width: 90vw;
    max-height: 400px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.scenario-info-floating.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(5px);
}

.scenario-info-floating .floating-info-title {
    font-size: 1.1rem;
    font-weight: 650;
    color: var(--text-color-primary);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.scenario-info-floating .floating-info-description {
    font-style: italic;
    color: var(--text-color-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.5;
    font-size: 0.95rem;
}

.scenario-info-floating .floating-info-row {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.scenario-info-floating .floating-info-label {
    font-weight: 500;
    color: var(--text-color-primary);
    margin-right: 0.5rem;
}

.scenario-info-floating .floating-info-value {
    color: var(--text-color-secondary);
}

/* Header Styles */
.resource-pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
}

.resource-pane-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-color-secondary);
    text-transform: uppercase;
}

.resource-pane-controls {
    display: flex;
    gap: 5px;
}

.icon-button.small-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}
.icon-button.small-icon svg {
    width: 20px;
    height: 20px;
}

/* Content Area */
.resource-pane-content {
    flex-grow: 1;
    position: relative;
    background-color: #000;
}

#resourceSplitFrame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.spinner-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* --- Responsive Logic --- */
@media (max-width: 1024px) {
    .resource-split-pane {
        display: none !important;
    }
    .container.resource-pane-active .chat-container {
        width: 100%;
    }
    .container.resource-pane-active.desktop-view #scenarioInfo {
        display: block !important;
    }
    .desktop-info-toggle {
        display: none !important;
    }
}

/* === VOICE-ONLY SKIN: Split Pane Support === */

/* Voice Info Toggle Button */
.voice-info-toggle {
    display: none; /* Hidden by default on desktop unless logic overrides */
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    padding: 6px;
    cursor: pointer;
    border-radius: 50%;
    line-height: 0;
    z-index: 10;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.voice-info-toggle svg {
    width: 22px;
    height: 22px;
    fill: var(--text-color-secondary);
    transition: fill 0.2s ease;
}

.voice-info-toggle:hover {
    background: color-mix(in srgb, var(--background-card) 95%, black);
}

.voice-info-toggle:hover svg {
    fill: var(--accent-color);
}

/* Show voice info toggle when resource pane is active in voice mode */
body.skin-voice-only .container.resource-pane-active .voice-info-toggle,
body.skin-voice-only .container.resource-pane-active .info-toggle-button.voice-info-toggle,
body.skin-voice-only .container.resource-pane-active #voiceInfoToggle {
    display: inline-flex !important;
}

/* Show voice info toggle on desktop when split pane is active */
body.skin-voice-only .container.resource-pane-active.desktop-view .voice-info-toggle,
body.skin-voice-only .container.resource-pane-active.desktop-view .info-toggle-button.voice-info-toggle,
body.skin-voice-only .container.resource-pane-active.desktop-view #voiceInfoToggle {
    display: inline-flex !important;
}

.container:not(.desktop-view) .voice-info-toggle {
    display: inline-flex !important;
}

/* Voice card needs relative positioning for the toggle */
.voice-card {
    position: relative;
}

/* Position resources container in voice mode when pane is active - keep timer visible */
body.skin-voice-only .container.resource-pane-active.desktop-view #resourcesContainer {
    grid-area: voice;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    background: transparent;
    box-shadow: none;
    border: none;
    z-index: 100;
    padding: 0;
    margin: 0;
    display: flex !important;
    justify-content: center;
}

/* Hide all children of resources container except the status-timer-row when split pane is active */
body.skin-voice-only .container.resource-pane-active.desktop-view #resourcesContainer > *:not(.status-timer-row) {
    display: none !important;
}

/* In split view, hide status but keep timer visible in the row */
body.skin-voice-only .container.resource-pane-active.desktop-view .status-timer-row .scenario-status {
    display: none !important;
}

/* Style the timer in split view for voice mode */
body.skin-voice-only .container.resource-pane-active.desktop-view #resourcesContainer .scenario-timer {
    margin: 0;
}

/* Floating info panel for voice mode */
/* 1. Container Styling (Technical Look) */
.voice-info-floating {
    position: absolute;
    top: 45px;
    right: 10px;
    z-index: 200;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 8px; /* New sharper corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* New cleaner shadow */
    padding: 1.25rem;
    width: 280px;
    max-width: calc(100% - 20px);
    max-height: 350px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.voice-info-floating.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 2. Shared Typography - TITLE (Technical/Uppercased) */
.voice-info-floating .floating-info-title,
.scenario-info-floating .floating-info-title {
    font-family: var(--font-primary);
    font-size: 1.0rem; 
    font-weight: 800; /* Extra Bold */
    color: var(--text-color-primary);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase; /* The "Mission Parameter" look */
    letter-spacing: 0.02em;
    line-height: 1.3;
}

/* 3. Shared Typography - DESCRIPTION (Clean/Normal) */
.voice-info-floating .floating-info-description,
.scenario-info-floating .floating-info-description {
    font-family: var(--font-primary);
    font-style: normal; /* No Italic */
    color: var(--text-color-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
    font-size: 0.85rem;
}

/* 4. Shared Typography - LABELS (Data Tags) */
.voice-info-floating .floating-info-label,
.scenario-info-floating .floating-info-label {
    font-weight: 700;
    font-size: 0.75rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 5. Values & Layout Rows */
.voice-info-floating .floating-info-row,
.scenario-info-floating .floating-info-row {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.voice-info-floating .floating-info-value,
.scenario-info-floating .floating-info-value {
    color: var(--text-color-secondary);
}

/* 6. Close Button Positioning */
.voice-info-floating .floating-info-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-color-secondary);
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.voice-info-floating .floating-info-close:hover {
    background: rgba(0,0,0,0.05);
    color: var(--text-color-primary);
} 

/* 1. Activate CSS Grid Layout when Pane is Open in Voice Mode */
body.skin-voice-only .container.resource-pane-active .content-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "voice pane";
    gap: 1rem;
    align-items: start;
    justify-content: stretch;
    width: 100%;
    box-sizing: border-box;
    position: relative; /* Positioning context for timer overlay */
}

/* 2. Assign Voice Interface to Left */
body.skin-voice-only .container.resource-pane-active #voiceInterfaceContainer {
    grid-area: voice;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* 3. Assign Split Pane to Right */
body.skin-voice-only .container.resource-pane-active #resourceSplitPane {
    grid-area: pane;
    width: 100% !important;
    height: calc(100vh - 150px);
    opacity: 1;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
    background: var(--background-card);
    min-width: 0;
}

/* 4. Adjust Voice Card for narrower space */
body.skin-voice-only .container.resource-pane-active .voice-card {
    padding: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

body.skin-voice-only .container.resource-pane-active .visualizer-box {
    width: 150px;
    height: 150px;
}

body.skin-voice-only .container.resource-pane-active .voice-avatar-wrapper #voiceInterlocutorAvatar {
    width: 80px;
    height: 80px;
}

/* 5. Responsive Fallback */
@media (max-width: 1200px) {
    body.skin-voice-only .container.resource-pane-active .content-container {
        grid-template-columns: 350px 1fr;
    }
}

@media (max-width: 1024px) {
    body.skin-voice-only .container.resource-pane-active #resourcesContainer {
        display: flex !important;
    }
    .voice-info-toggle {
        display: none !important;
    }
    /* Show info toggle when split pane is active even on smaller screens */
    body.skin-voice-only .container.resource-pane-active .voice-info-toggle {
        display: inline-flex !important;
    }
}

/* The White Card */

.profile-card {
    background-color: #ffffff;
    width: 100%;
    max-width: 800px; /* Wider card */
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    animation: slideUpFade 0.4s ease-out;
    margin: auto; /* Centers in flex container */
    display: flex;
    flex-direction: column;
}

/* Close Button (Top Right) */
.profile-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s;
    color: #999;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-close-btn svg {
    width: 24px;
    height: 24px;
}

.profile-close-btn:hover {
    background-color: #f0f0f0;
    color: #333;
}

/* Layout Grid */
.profile-layout {
    display: grid;
    grid-template-columns: 300px 1fr; /* Fixed sidebar, flexible content */
    min-height: 400px;
}

/* --- Left Column: Sidebar --- */
.profile-sidebar {
    background-color: #f8f9fa; /* Very light grey for sidebar */
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 1px solid #e0e0e0;
}

.profile-avatar-container {
    width: 180px;
    height: 180px;
    margin-bottom: 24px;
    position: relative;
}

#modalImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; /* Circle */
    border: 4px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background-color: #fff;
    margin-bottom: 0; /* Reset legacy margin */
}

.profile-identity {
    width: 100%;
}

#modalCaption.profile-name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800; /* Strong bold */
    color: #000000;   /* Force Black */
    line-height: 1.2;
    font-family: 'Manrope', sans-serif;
}

.profile-tagline {
    margin: 8px 0 0 0;
    font-size: 0.95rem;
    color: var(--text-color-secondary);
    font-weight: 500;
    line-height: 1.4;
}

/* --- Right Column: Content --- */
.profile-main {
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.profile-section-header {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    margin: 0 0 15px 0;
    font-weight: 700;
}

.profile-bio {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444;
    white-space: pre-wrap; /* Preserve paragraphs */
    font-family: 'Inter', sans-serif;
}

/* Animation */
@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .profile-layout {
        grid-template-columns: 1fr; /* Stack vertically */
    }

    .profile-sidebar {
        padding: 30px 20px;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .profile-avatar-container {
        width: 120px;
        height: 120px;
        margin-bottom: 15px;
    }

    .profile-main {
        padding: 25px;
    }
}

/* --- Voice System Message Overlay --- */
#voiceSystemMessageContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent cover */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20; /* Above stickers and visualizer */
    border-radius: 8px;
    padding: 1rem;
    box-sizing: border-box;
    text-align: center;
    backdrop-filter: blur(2px);
}

#voiceSystemMessageContent {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color-primary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

#voiceSystemMessageContent .system-note {
    font-size: 0.9rem;
    color: var(--text-color-secondary);
    margin-top: 0.5rem;
    display: block;
}

#voiceSystemControls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.voice-action-btn {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.voice-action-btn.voice-assessment-btn {
    /* Match the "Exam concluded" pill's red surround so the identical oxblood
       reads the same: full oxblood border + translucent oxblood wash (was a
       near-invisible pale-pink border, which let the bold text read brighter). */
    background-color: color-mix(in srgb, var(--brand-oxblood) 10%, transparent);
    border: 1px solid var(--brand-oxblood);
    border-radius: 12px;
    color: var(--brand-oxblood);
    padding: 14px 24px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.voice-action-btn.voice-assessment-btn:hover {
    background-color: color-mix(in srgb, var(--brand-oxblood) 18%, transparent);
    border-color: var(--brand-oxblood);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-oxblood) 14%, transparent);
}

.voice-action-btn.voice-assessment-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.voice-action-btn.voice-assessment-btn svg {
    width: 20px;
    height: 20px;
    fill: none !important;
    stroke: var(--brand-oxblood);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.voice-action-btn:hover {
    background-color: var(--secondary-color);
}

.voice-action-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Assessment icon - stroked style with soft background */
#assessmentButton {
}

#assessmentButton:hover {
     /* background-color: #f6e4e6;
    border-color: #ad2337; */
}

#assessmentButton svg {
    fill: color-mix(in srgb, var(--brand-oxblood) 6%, #ffffff); /* Soft ox-blood wash for the document shape */
    stroke: #000;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#assessmentButton:hover svg {
    fill: color-mix(in srgb, var(--brand-oxblood) 12%, #ffffff);
    stroke: var(--brand-oxblood); /* Ox blood on hover */
}

/* --- Phrase Bank Styles --- */
.phrase-bank-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem;
}

.phrase-category-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.phrase-category-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.25rem;
}

.phrase-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.phrase-chip {
    background-color: var(--background-input);
    border: 1px solid var(--border-color-input);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.95rem;
    color: var(--text-color-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.phrase-chip:hover {
    border-color: var(--accent-color);
    background-color: color-mix(in srgb, var(--accent-color) 5%, white);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.phrase-chip:active {
    transform: translateY(0);
}

.phrase-chip.playing {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

/* Small speaker icon inside chip */
.phrase-chip svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    opacity: 0.7;
}

.phrase-chip.playing svg {
    opacity: 1;
    animation: pulse 1s infinite;
}

/* --- New Styles for V2 Assessment UX --- */

/* Inline Chat Button (Classic Skin) */
.inline-assessment-btn {
    /* Match the "Exam concluded" pill's oxblood surround exactly (see
       .scenario-status-concluded) so the two read as the same color. */
    background-color: color-mix(in srgb, var(--brand-oxblood) 10%, transparent);
    border: 1px solid var(--brand-oxblood);
    color: var(--brand-oxblood);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: 10px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.inline-assessment-btn:hover {
    background-color: color-mix(in srgb, var(--brand-oxblood) 18%, transparent);
    border-color: var(--brand-oxblood);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--brand-oxblood) 12%, transparent);
}

.inline-assessment-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.inline-assessment-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Generating Animation Container */
.generating-container {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color-secondary);
    font-style: italic;
    font-size: 0.95rem;
}

/* Small inline spinner */
.generating-container .spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-color: #ccc;
    border-top-color: var(--primary-color);
}

/* --- Activity Gate Styles (Refactored) --- */

/* Wrapper to hold the swapping gates */
.activity-gate-wrapper {
    margin-top: 12px;
    margin-bottom: 12px;
    width: 100%;
}

/* GATE 1: The "Open Resource" Button style */
.activity-gate-open {
    padding: 12px 16px;
    background-color: #e8edf3; /* Light Blue background */
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.95em;
    font-weight: 700;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s ease;
    animation: gatePulseBlue 2s infinite ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.activity-gate-open:hover {
    background-color: var(--primary-color);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.activity-gate-open svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* GATE 2: The "Ready" Checkbox style (Existing class, slightly tweaked) */
.activity-gate-container { 
    /* Inherits mostly from your existing CSS, ensuring it looks like the confirmation step */
    margin-top: 0; /* Reset margin as wrapper handles it */
    margin-bottom: 0;
    padding: 10px 12px;
    background-color: var(--activity-gate-bg); /* Pale evergreen wash */
    border: 1px solid var(--activity-gate-border); /* Deep evergreen border */
    border-radius: 8px;
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 0.95em; 
    cursor: pointer;
    animation: gatePulseGreen 2s infinite ease-in-out;
}

.activity-gate-container label {
    font-weight: 700;
    color: var(--text-color-primary);
}

/* Animations */
@keyframes gatePulseBlue {
    0% { box-shadow: 0 0 0 0 rgba(47, 82, 51, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(47, 82, 51, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 82, 51, 0); }
}

@keyframes gatePulseGreen {
    0% { box-shadow: 0 0 0 0 rgba(47, 82, 51, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(47, 82, 51, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 82, 51, 0); }
}

/* --- Nickname Selection Modal Styles --- */
.nickname-selection-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 1.5rem;
}

.nickname-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.nickname-option-btn {
    flex: 1;
    background-color: var(--background-input);
    border: 1px solid var(--border-color);
    color: var(--text-color-primary);
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: center;
}

.nickname-option-btn:hover {
    background-color: var(--background-main);
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* --- New Utilities for Disabling UI Elements --- */
.hidden-control {
    display: none !important;
}

/* --- Voice Transcript UI --- */
.voice-transcript-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.voice-transcript-toggle {
    background: #f0f0f0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    margin-bottom: 5px;
}

.voice-transcript-toggle:hover {
    background: #e0e0e0;
    transform: translateY(-1px);
}

.voice-transcript-toggle svg {
    width: 24px;
    height: 24px;
    fill: #555; /* Gray/Black icon */
}

.voice-transcript-content {
    display: none; /* Closed by default */
    width: 100%;
    background: #fff;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-top: 10px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    box-sizing: border-box;
    text-align: left;
    white-space: pre-wrap;
    animation: slideDownFade 0.3s ease;
}

.voice-transcript-container.expanded .voice-transcript-content {
    display: block;
}

.voice-transcript-container.expanded .voice-transcript-toggle {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.voice-transcript-container.expanded .voice-transcript-toggle svg {
    fill: #fff;
}

/* ============================================================
   PERFORMANCE BAND HEADER - Reduced margins
   ============================================================ */

.assessment-perf-header {
    margin-bottom: 0.75rem;  /* Was 1rem */
    padding: 0.5rem 0.75rem; /* Was 0.6rem 0.9rem */
    border: 1px solid #ccc;
    border-left: 3px solid #333;
    background: linear-gradient(to right, #f8f8f8, #ffffff);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 0 4px 4px 0;
}

.perf-band-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.perf-band-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
}

.perf-band-name {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    background-color: #333;
    color: #fff;
    border-radius: 3px;
}

.perf-meter {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-grow: 1;
    justify-content: center;
}

.perf-pip {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1.5px solid #555;
    background-color: transparent;
    box-sizing: border-box;
}

.perf-pip.filled {
    background-color: #333;
    border-color: #333;
}

.perf-pip.half-filled {
    background: linear-gradient(90deg, #333 50%, transparent 50%);
    border-color: #333;
}

.perf-score-section {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-shrink: 0;
}

.perf-score-value {
    font-family: 'Roboto Mono', 'SF Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #222;
}

.perf-score-pct {
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
}

.dialog-box.assessment-dialog #dialogMessage {
    padding-top: 1.5rem; 
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .assessment-perf-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .perf-meter {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        margin-top: 0.25rem;
    }
}

/* --- Scaffolding Link Differentiation in Resource Panels --- */

/* Ensure the link itself (which is a <span>) looks clickable */
#classicResourcesContent .resource-item.is-scaffolding .scaffolding-link,
#resourcesContent .resource-item.is-scaffolding .scaffolding-link {
    display: inline-block;
    color: var(--text-color-primary);
    text-decoration: none;
    border-bottom: 1px dotted #d97706;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

#classicResourcesContent .resource-item.is-scaffolding .scaffolding-link:hover,
#resourcesContent .resource-item.is-scaffolding .scaffolding-link:hover {
    color: #d97706;
    border-bottom-style: solid;
    background-color: transparent; /* Override standard hover bg */
}

/* --- Styles for Gate inside Voice Card Overlay --- */

/* When the gate is moved into the Voice System Overlay */
.activity-gate-container.in-voice-overlay {
    background-color: transparent; /* Blend with overlay */
    border: 2px solid var(--activity-gate-border); /* Deep evergreen, thicker for visibility */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: auto;
    min-width: 200px;
    justify-content: center;
    padding: 15px 20px;
    margin: 0;
    font-size: 1.1em; /* Larger text */
}

/* Ensure the overlay container allows pointer events for the button */
#voiceSystemMessageContainer {
    pointer-events: auto; /* Ensure clicks pass to the button */
}

/* Ensure the checkbox inside the overlay is large enough */
.activity-gate-container.in-voice-overlay input[type="checkbox"] {
    width: 24px;
    height: 24px;
}

/* --- Voice Menu / Tools Toggle --- */
.voice-menu-toggle {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    padding: 6px;
    cursor: pointer;
    border-radius: 50%;
    line-height: 0;
    z-index: 10;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    
    /* MODIFIED: Hidden by default (Desktop behavior) */
    display: none; 
}

/* NEW: Show only on mobile (when desktop-view class is missing) */
.container:not(.desktop-view) .voice-menu-toggle {
    display: flex;
}

.voice-menu-toggle svg {
    width: 22px;
    height: 22px;
    fill: var(--text-color-secondary);
    transition: fill 0.2s ease;
}

.voice-menu-toggle:hover {
    background: color-mix(in srgb, var(--background-card) 95%, black);
}

.voice-menu-toggle:hover svg {
    fill: var(--accent-color);
}

/* --- Floating Menu Container --- */
.voice-menu-container {
    /* Base logic shared with .voice-info-floating in JS/HTML classes, 
       but we override positioning here */
    left: 10px; 
    right: auto;
    top: 45px;
    width: 220px; /* Slightly narrower than info panel */
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 201; /* Above info panel if both open */
}

/* --- Menu Items --- */
.voice-menu-item {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background-color 0.2s ease;
    color: var(--text-color-primary);
    font-weight: 500;
    font-size: 0.95rem;
    font-family: inherit;
}

.voice-menu-item:hover {
    background-color: #f0f2f5;
}

.voice-menu-item svg {
    width: 20px;
    height: 20px;
    fill: var(--text-color-secondary);
    flex-shrink: 0;
}

.voice-menu-item:hover svg {
    fill: var(--primary-color);
}

/* RTL Support for the Menu */
body[dir="rtl"] .voice-menu-toggle {
    left: auto;
    right: 10px;
}
body[dir="rtl"] .voice-menu-container {
    left: auto;
    right: 10px;
}
body[dir="rtl"] .voice-info-toggle {
    right: auto;
    left: 10px;
}
body[dir="rtl"] .voice-info-floating {
    right: auto;
    left: 10px;
}

/* --- Heuristic Analysis Animation (Assessment Generation) --- */

.heuristic-processing-container {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* The Visual Loader (Radar/Scanner effect) */
.heuristic-visual {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.h-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: var(--primary-color); /* Blue */
    border-right-color: var(--word-count-color); /* Green */
    border-radius: 50%;
    animation: h-spin 1.5s linear infinite;
}

.h-ring::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px; right: 3px; bottom: 3px;
    border: 3px solid transparent;
    border-top-color: var(--accent-color); /* Ox blood */
    border-radius: 50%;
    animation: h-spin 2s linear infinite reverse;
}

.h-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: var(--text-color-secondary);
    border-radius: 50%;
    animation: h-pulse 1s ease-in-out infinite alternate;
}

/* Text Container */
.heuristic-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.heuristic-label {
    font-family: var(--font-primary); /* Quiet, engraved-caps register */
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 6px;
    min-width: 180px; /* Prevent jitter when text changes */
}

/* Analysis Progress Bar */
.heuristic-bar-bg {
    width: 100%;
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

.heuristic-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color), var(--word-count-color));
    border-radius: 2px;
    animation: h-progress 3s ease-in-out infinite;
}

/* Animations */
@keyframes h-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes h-pulse {
    0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes h-progress {
    0% { width: 0%; transform: translateX(-100%); }
    50% { width: 100%; transform: translateX(0); }
    100% { width: 100%; transform: translateX(100%); }
}

/* Voice Skin Overrides to center the content */
.voice-transcript-content .heuristic-processing-container {
    flex-direction: column;
    text-align: center;
}
.voice-transcript-content .heuristic-text-wrapper {
    align-items: center;
}
.voice-transcript-content .heuristic-bar-bg {
    width: 120px;
}

/* --- Overrides for General Loading Spinner (Heuristic Style) --- */

#loadingOverlay .heuristic-processing-container.overlay-style,
.global-loading .heuristic-processing-container.overlay-style {
    width: auto;
    min-width: 280px;
    max-width: 90%;
    background-color: var(--background-card);
    padding: 1.5rem 2rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border: 1px solid var(--border-color);
    flex-direction: row; /* Ensure visual is left of text */
    gap: 20px;
}

#loadingOverlay .heuristic-text-wrapper,
.global-loading .heuristic-text-wrapper {
    align-items: flex-start; /* Left align text in the card */
}

/* Ensure the animations defined previously work correctly in this context */
#loadingOverlay .heuristic-visual,
.global-loading .heuristic-visual {
    flex-shrink: 0;
}

#loadingOverlay .spinner, .global-loading .spinner { display: none; } 

/* ============================================================
   FIX: Introduction Dialog Scrolling & Layout (Mobile Fix)
   ============================================================ */

/* 1. The Outer Modal Container */
.dialog-box.introduction-dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* Responsive sizing - auto height based on content */
    width: 95vw !important;
    max-width: 1600px !important;
    height: auto !important;
    max-height: 95vh !important;

    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow-y: auto; /* Scroll the entire dialog if needed, not internal elements */
}

/* The Message Container */
.dialog-box.introduction-dialog #dialogMessage {
    flex: 1;
    display: flex;
    flex-direction: column;

    /* Allow natural content flow without internal scrolling */
    min-height: 0;
    overflow: visible;

    margin: 0;
    padding: 0;
    white-space: normal;
}

/* The Buttons Area */
.dialog-box.introduction-dialog #dialogButtons {
    flex-shrink: 0;
    padding: 1rem 2rem;
    background-color: #fff;
    border-top: 1px solid var(--border-color);
    display: none; 
}

/* --- FIX for Introduction Dialog Hint Slide --- */

.intro-hint-view {
    /* 1. Activate Flexbox to control layout */
    display: flex;
    flex-direction: column;
    
    /* 2. Center content Vertically and Horizontally */
    align-items: center; 
    justify-content: center;
    
    /* 3. Ensure text inside is centered */
    text-align: center;
    
    /* 4. Force full width/height of the slide container */
    width: 100%;
    height: 100%;
    
    /* 5. Clear any artifacts (like that dark line) */
    border: none;
    box-shadow: none;
    padding: 0 2rem; /* Add breathing room on sides */
    box-sizing: border-box;
}

/* style.css - Add to the very bottom */

.hint-icon-large {
    width: 60px !important;  /* FORCE specific size to override 'auto' */
    height: 60px !important; /* FORCE specific size */
    margin: 0 auto 1.5rem auto !important; /* Center horizontally with bottom spacing */
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent it from being squashed */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.hint-icon-large svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 60px !important; /* Double safety */
    max-height: 60px !important; /* Double safety */
    stroke: var(--text-color-secondary);
    stroke-width: 1.5;
    fill: none;
}

.accordion-content.visible {
    display: block !important;
    animation: slideDownFade 0.3s ease;
}
/* ============================================================
   BRIEFING CARD V2 - FINAL POLISH
   ============================================================ */

/* --- Main Card Container --- */
.briefing-card-v2 {
    background-color: #ffffff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font-primary);
    color: var(--text-color-primary);
    width: 100%;
    height: 100%; 
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

/* --- Header Bar --- */
.briefing-header-v2 {
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f7f8f9;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.briefing-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.briefing-scenario-id {
    font-family: var(--font-technical);
    font-size: 13px;
    font-weight: 500;
    color: #7C838D;
    letter-spacing: 0.02em;
}

.briefing-scenario-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color-primary);
}

.briefing-header-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.briefing-level-badge {
    font-family: var(--font-technical);
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background: var(--primary-color);
    padding: 4px 10px;
    border-radius: 4px;
}

.briefing-duration {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-technical);
    font-size: 12px;
    color: #7C838D;
}

.briefing-duration svg {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

/* --- Main Content Grid --- */
.briefing-content-v2 {
    display: grid;
    /* Context Image (Left), Text Column (Right) */
    grid-template-columns: 240px 1fr;
    gap: 24px;
    padding: 24px;
    flex-grow: 1;
    min-height: 0;
    overflow: visible; /* Allow content to flow naturally */
}

/* --- Context Image Frame --- */
.briefing-context-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 200px; /* Ensure context image has reasonable minimum */
}

.briefing-context-label {
    position: absolute;
    top: -9px;
    left: 10px;
    font-family: var(--font-technical);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7C838D;
    background: #ffffff;
    padding: 0 6px;
    z-index: 1;
}

.briefing-context-image {
    width: 100%;
    flex-grow: 0;
    min-height: 150px;
    max-height: 300px; /* Reasonable max to prevent oversized images */
    border-radius: 8px;
    overflow: hidden;
    background: #ebedef;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.briefing-context-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.briefing-context-image .context-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f2f4 0%, #e4e7eb 100%);
}
.briefing-context-image .context-placeholder svg {
    width: 48px;
    height: 48px;
    color: #9ca3af;
    opacity: 0.5;
}

/* --- Task Section (Right Column) --- */
.briefing-task-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: auto;
    min-height: 0;
    overflow: visible; /* No internal scrolling */
    padding-right: 6px;
}

/* Task Block - Priority Visuals */
.briefing-task-block {
    position: relative;
    background: color-mix(in srgb, var(--brand-oxblood) 5%, transparent);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--brand-oxblood);
    border-radius: 4px;
    padding: 16px;
    /* Give Task more vertical weight than Skills */
    flex-grow: 2; 
    display: flex;
    flex-direction: column;
}

/* Updated Font Size: 12px */
.briefing-task-label {
    font-family: var(--font-technical);
    font-size: 12px; 
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-oxblood);
    margin-bottom: 8px;
    flex-shrink: 0;
}

/* Updated Font Size: 16px */
.briefing-task-text {
    font-size: 16px; 
    line-height: 1.6;
    color: var(--text-color-primary);
    margin: 0;
}

/* Skill Block */
.briefing-skill-block {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(16, 107, 10, 0.05);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 4px;
    /* Give Skills less weight, but still fill space */
    flex-grow: 1; 
    flex-shrink: 0;
}

.briefing-skill-block > svg {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
    flex-shrink: 0;
    margin-top: 2px;
}

.briefing-skill-content {
    flex: 1;
    min-width: 0;
}

/* Updated Font Size: 12px */
.briefing-skill-label {
    font-family: var(--font-technical);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 6px;
}

/* Updated Font Size: 16px + Bold */
.briefing-skill-text {
    font-size: 16px;
    font-weight: 700; /* Bold as requested */
    line-height: 1.5;
    color: var(--text-color-primary); /* Ensure contrast since it's bold */
    margin: 0;
}

/* --- Participants Strip - The Flow --- */
.briefing-participants-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #ffffff;
    border-top: 1px solid var(--border-color);
    /* Border requested: Green (Interaction/Flow color logic) */
    border-left: 6px solid var(--word-count-color); 
    flex-shrink: 0; 
    position: relative;
    z-index: 2;
}

.briefing-participant {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
    background: #fff;
    padding: 0 10px;
}

.briefing-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #ffffff;
    background: #ebedef;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.briefing-avatar.candidate {
    border-color: var(--word-count-color); /* Green */
}

.briefing-avatar.interlocutor {
    border-color: var(--primary-color); /* Blue */
}

.briefing-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.briefing-participant-info {
    display: flex;
    flex-direction: column;
}

.briefing-participant-role {
    font-family: var(--font-technical);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
}

.briefing-participant-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color-primary);
}

/* Channel Connector */
.briefing-channel-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 1;
    margin: 0;
}

/* The Line - Dashed */
.briefing-channel-line {
    position: absolute;
    width: 100%;
    height: 0;
    border-top: 2px dashed #d1d5db; /* Dashed */
    top: 50%;
    left: 0;
    z-index: 1;
}

.briefing-channel-badge {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
}

.briefing-channel-badge svg {
    width: 14px;
    height: 14px;
    color: #6b7280;
}

.briefing-channel-badge span {
    font-family: var(--font-technical);
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Footer --- */
.briefing-footer-v2 {
    padding: 12px 24px;
    background: #f7f8f9;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-shrink: 0;
}

.briefing-qindex {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Key Label size increased to 11px */
.briefing-qindex-label {
    font-family: var(--font-technical);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
}

.briefing-qindex-items {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Key Item size increased */
.briefing-qindex-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color-secondary);
}

/* Key Dot size increased to 12px */
.briefing-qindex-dot {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.briefing-qindex-dot.inference { background-color: var(--brand-sage); }
.briefing-qindex-dot.interaction { background-color: var(--primary-color); }
.briefing-qindex-dot.intelligibility { background-color: var(--word-count-color); }

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {
    /* Main Layout - Stack Vertically */
    .briefing-content-v2 {
        display: flex;
        flex-direction: column; /* Stack context above text */
        padding: 16px;
        gap: 16px;
        /* No internal scrolling - content flows naturally */
        overflow: visible;
    }

    /* Ensure Image doesn't dominate */
    .briefing-context-frame {
        height: auto;
        min-height: 200px;
        flex-shrink: 0;
    }
    
    .briefing-context-image {
        min-height: 200px;
    }

    /* Ensure text section expands */
    .briefing-task-section {
        height: auto; /* Remove fixed height constraint for mobile flow */
        overflow: visible; /* Let page/modal scroll handle it */
        padding-right: 0;
    }

    /* Stack participants vertically */
    .briefing-participants-v2 {
        flex-direction: column; 
        gap: 20px;
        padding: 24px;
        /* Maintain the green border on mobile too */
        border-left: 6px solid var(--word-count-color); 
    }

    .briefing-channel-connector {
        flex-direction: column;
        width: 100%;
        height: 60px; 
    }

    /* Transform horizontal dashed line to vertical */
    .briefing-channel-line {
        width: 0;
        height: 100%;
        border-top: none;
        border-left: 2px dashed #d1d5db;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .briefing-channel-badge {
        margin: auto; 
    }
}

@media (max-width: 480px) {
    .briefing-header-v2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .briefing-header-meta {
        width: 100%;
        justify-content: space-between;
    }

    .briefing-qindex {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ============================================================
   RTL SUPPORT
   ============================================================ */

body[dir="rtl"] .briefing-task-block,
body[dir="rtl"] .briefing-skill-block {
    border-left: 1px solid var(--border-color);
    border-right: 3px solid;
    border-radius: 6px 0 0 6px;
}

body[dir="rtl"] .briefing-task-block {
    border-right-color: var(--brand-oxblood);
}

body[dir="rtl"] .briefing-skill-block {
    border-right-color: var(--primary-color);
}

body[dir="rtl"] .briefing-participants-v2 {
    border-left: 1px solid var(--border-color);
    border-right: 3px solid var(--word-count-color);
}

body[dir="rtl"] .briefing-context-label {
    left: auto;
    right: 8px;
}

/* --- NEW MODERN RESOURCE PILLS --- */

/* 1. Base Pill Container */
.resource-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px; /* Reduced from 12px to 8px to shorten height */
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* Hover Effect: Lift and Brand Border */
.resource-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--primary-color);
}

.resource-pill:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* 2. Icon Container (Left side circle) */
.pill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #eef0f3; /* Very light tint of primary color */
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.pill-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--primary-color);
    transition: fill 0.2s ease;
}

/* 3. Text Styling */
.pill-text {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color-primary);
    line-height: 1.3;
    /* Wrap to two lines before truncating. A resource's name is how the student
       finds it mid-exam, and an ellipsis in a rail with room to spare reads as
       an unfinished layout; past two lines the clamp takes over. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
    overflow: hidden;
    flex-grow: 1;
}

/* --- Variant: Scaffolding / Suggestion Pills --- */
.resource-pill.scaffolding-pill {
    background-color: #fffbf0; /* Warm/Amber background tint */
    border-color: #fce7b3;
}

.resource-pill.scaffolding-pill:hover {
    border-color: #f59e0b; /* Amber hover border */
}

.resource-pill.scaffolding-pill .pill-icon {
    background-color: rgba(245, 158, 11, 0.15); /* Amber icon circle */
}

.resource-pill.scaffolding-pill .pill-icon svg {
    fill: #d97706; /* Dark amber icon */
}

.resource-pill.scaffolding-pill .pill-text {
    color: #92400e; /* Dark amber text */
}

/* --- Entrance Animation (Slide & Glow) --- */
@keyframes pillSlideIn {
    0% { opacity: 0; transform: translateX(-15px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes pillGlow {
    0% { box-shadow: 0 0 0 0 rgba(47, 82, 51, 0); }
    30% { box-shadow: 0 0 0 4px rgba(47, 82, 51, 0.2); border-color: var(--primary-color); }
    100% { box-shadow: 0 0 0 0 rgba(47, 82, 51, 0); }
}

.resource-pill.new-item {
    animation: 
        pillSlideIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
        pillGlow 2s ease-out 1; /* Runs glow once strongly, then stops */
}

/* --- RESPONSIVE VOICE UNIFICATION --- */

/* 1. Hide the old separate menu toggle permanently */

#voiceInfoToggle {
    display: none !important;
}

/* 2. Only show the (i) Toggle on Mobile when in Voice Mode */
body.skin-voice-only .container:not(.desktop-view) #voiceInfoToggle {
    display: flex !important;
}

/* 3. Style the buttons inside the floating panel to match the Classic Sidebar */
.voice-info-floating .control-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    justify-content: flex-start; /* Left align like sidebar */
}

#voiceMenuToggle {
    display: none !important;
}

.voice-info-floating .icon-button {
    position: relative;
}

/* 3. Style the Action Buttons Container inside the Info Panel */
.floating-info-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.floating-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.floating-action-btn:hover {
    background-color: #eef0f3;
    border-color: var(--primary-color);
    color: var(--primary-color-dark);
}

.floating-action-btn svg {
    width: 18px;
    height: 18px;
    fill: var(--text-color-secondary);
    transition: fill 0.2s ease;
}

.floating-action-btn:hover svg {
    fill: var(--primary-color);
}

/* --- Audio Introduction Button (Pulsing Speaker) --- */
.audio-intro-container {
    display: none; /* Hidden by default */
    width: 100%;
    margin-bottom: 10px;
}

.audio-intro-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    background-color: #e8edf3; /* Light blue */
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    color: var(--primary-color);
    font-weight: 700;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.audio-intro-btn:hover {
    background-color: #d1e9ff;
    transform: translateY(-1px);
}

.audio-intro-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    animation: speakerPulse 1.5s infinite ease-in-out;
}

@keyframes speakerPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}
/* ===== Self-assessment (metacognitive check before results) ===== */
.self-assessment-prompt {
    text-align: center;
    padding: 6px 0;
}

.self-assessment-prompt .sa-question {
    font-size: 1.05rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 18px 0;
}

.self-assessment-options {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.self-assessment-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 84px;
    padding: 12px 10px;
    background: #f8f9fa;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
    font-family: inherit;
}

.self-assessment-option:hover {
    border-color: #1a2a3b;
    background: #eef0f3;
    transform: translateY(-2px);
}

.self-assessment-option .sa-emoji {
    font-size: 1.8rem;
    line-height: 1;
}

.self-assessment-option .sa-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.sa-skip-link {
    margin-top: 16px;
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}

.sa-skip-link:hover {
    color: #6b7280;
}

/* --- Connection status chip (21-connection.js) ----------------------------
   A weak connection used to be invisible: an answer would sit uploading for
   half a minute and nothing on screen said so. This is where that gets said.

   Fixed to the top of the viewport rather than placed in the voice card, so it
   reads the same in every skin and can never collide with the card's own
   overlays (the phase plate, the idle timer, the system-message banner). It
   sits BELOW the dialog layer on purpose — when a dialog is up it is the thing
   being read, and the chip has already done its job. */
.connection-chip {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(-14px);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(92vw, 460px);
    padding: 7px 14px;
    border: 1px solid var(--caution-color);
    border-radius: 4px;
    background: var(--background-card);
    color: var(--caution-color);
    font-family: var(--font-technical);
    font-size: 0.8rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 8px rgba(26, 42, 59, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Purely informational — never in the way of the mic */
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.connection-chip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* The dot is redundant by design: the chip always spells the state out in
   words, so nothing here depends on telling amber from ox blood. */
.connection-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Unstable — amber, the app's one caution semantic. Something is wrong but the
   exam is still running, which is exactly what the pulse says. */
.connection-chip.is-unstable .connection-chip-dot {
    animation: connection-chip-breathe 1.8s ease-in-out infinite;
}

/* Offline — ox blood. Nothing is getting through; no pulse, because there is
   no activity to suggest. */
.connection-chip.is-offline {
    border-color: var(--brand-oxblood);
    color: var(--brand-oxblood);
}

@keyframes connection-chip-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .connection-chip { transition: opacity 0.25s ease, visibility 0.25s; }
    .connection-chip.is-visible { transform: translateX(-50%) translateY(0); }
    .connection-chip.is-unstable .connection-chip-dot { animation: none; }
}

@media (max-width: 600px) {
    .connection-chip {
        top: 8px;
        font-size: 0.74rem;
        padding: 6px 11px;
    }
}