/* assets/css/frontend.css 

/* ==========================================================================
   BeeSpoke Pronunciation - Frontend Styles
   ========================================================================== */

/* ==========================================================================
   1. Pronunciation Practice Widget (Inline)
   ========================================================================== */

.bsp-pronunciation-container {
    display: inline-flex;
    align-items: baseline !important; 
    gap: 0.3em;
    margin-bottom: 0em;
    font-family: inherit !important;
    vertical-align: baseline !important; 
    line-height: inherit !important;
}

/* 1.1. Microphone Record Button (within widget)
   -------------------------------------------------------------------------- */
.bsp-record-button-adhoc {
    background: transparent !important; /* Important to override theme button styles if any */
    border: none;
    padding: 0;
    margin: 0 0.2em 0 0; /* Use margin for spacing instead of padding */
    cursor: pointer;
    font-size: 1em; /* Relative to parent text */
    align-self: center; /* Explicitly center with parent flex if needed */
    line-height: inherit;
    vertical-align: middle;
    outline: none;
    flex-shrink: 0; /* Prevents shrinking if container is too small */
    
    /* Fixed width to prevent jumping when switching between Mic and Stop icons */
    width: 1.5em; 
    text-align: center;
}

.bsp-record-button-adhoc i {
    opacity: 1;
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Hover/focus for normal state */
.bsp-record-button-adhoc.bsp-mic-status-normal:hover i.fa-microphone,
.bsp-record-button-adhoc.bsp-mic-status-normal:focus i.fa-microphone {
    opacity: 1; /* No need to fade, but leave it here if I change my mind */
}

/* Ensure full opacity for active states, overriding hover if class changes mid-hover */
.bsp-record-button-adhoc.bsp-mic-status-waiting i,
.bsp-record-button-adhoc.bsp-mic-status-recording i,
.bsp-record-button-adhoc.bsp-mic-status-processing i,
.bsp-record-button-adhoc.bsp-mic-status-error i {
    opacity: 1;
}

/* Microphone Icon States & Colors */
.bsp-record-button-adhoc.bsp-mic-status-normal i.fa-microphone {
    color: #fbc014; /* Yellow - Practice Mic Color */
}
.bsp-record-button-adhoc.bsp-mic-status-waiting i.fa-microphone {
    color: #cccccc; /* Gray - Waiting/Ready */
}
/* Recording State: Red Icon with Pulsing Ring */
.bsp-record-button-adhoc.bsp-mic-status-recording i.fa-microphone {
    color: #e74c3c !important; /* Red */
    border-radius: 50%; /* Circular pulse for mic */
    animation: bspPulseRed 1.5s infinite;
}

.bsp-record-button-adhoc.bsp-mic-status-recording i.fa-stop {
    color: #e74c3c !important; /* Red */
    border-radius: 4px; /* Square pulse for stop button */
    animation: bspPulseRed 1.5s infinite;
    padding: 1px; /* Slight padding to clear icon edges */
}

@keyframes bspPulseRed {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

/* Floating Status Tooltip (Smoke Rising Effect) */
.bsp-pronunciation-container {
    position: relative; /* Ensure positioning context */
    white-space: nowrap; /* Prevent line breaks when badge appears */
    display: inline-flex; /* Keep items aligned on one line */
    align-items: center;
}
.bsp-floating-status {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #999; /* Subtle text color */
    font-size: 0.85em;
    font-style: italic;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    background: none; /* No background */
    padding: 0;
    box-shadow: none;
    /* Animation definition */
    animation: bspSmokeRise 2s forwards;
    opacity: 0; /* Start hidden, animation handles opacity */
    top: -20px; /* Start position */
}

@keyframes bspSmokeRise {
    0% { opacity: 0; top: -20px; transform: translateX(-50%) scale(0.9); }
    20% { opacity: 1; top: -30px; transform: translateX(-50%) scale(1); }
    100% { opacity: 0; top: -50px; transform: translateX(-50%) scale(1.1); }
}

.bsp-record-button-adhoc.bsp-mic-status-processing i.fa-spinner {
    color: #fbc014; /* Yellow - Processing */
    display: none !important; /* Force hide default spinner */
}
.bsp-record-button-adhoc.bsp-mic-status-error i.fa-exclamation-circle {
    color: #d9534f; /* Reddish - Error */
}

/* HIDE OLD FEEDBACK SPINNER */
.bsp-status-processing {
    display: none !important;
}

/* Dancing Bars for Processing State */
.bsp-processing-bars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
    width: 1em;
    gap: 2px;
    vertical-align: middle;
}
.bsp-processing-bars span {
    width: 3px;
    height: 100%;
    background-color: #fbc014;
    border-radius: 1px;
    animation: bspBarDance 0.6s infinite ease-in-out;
}
.bsp-processing-bars span:nth-child(1) { animation-delay: 0s; }
.bsp-processing-bars span:nth-child(2) { animation-delay: 0.15s; }
.bsp-processing-bars span:nth-child(3) { animation-delay: 0.3s; }

@keyframes bspBarDance {
    0%, 100% { height: 30%; }
    50% { height: 100%; }
}

/* Large Bars for Modal */
.bsp-processing-bars.bsp-modal-bars {
    width: 60px;
    height: 60px;
    gap: 6px;
    margin-bottom: 15px;
}
.bsp-processing-bars.bsp-modal-bars span {
    width: 8px;
    border-radius: 4px;
}

/* Floating Processing Messages */
.bsp-floating-message, .bsp-floating-status {
    position: absolute; /* Default relative to container */
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.85em;
    font-style: italic;
    color: #555;
    background: rgba(255,255,255,0.98);
    padding: 4px 10px;
    border-radius: 12px;
    pointer-events: none;
    animation: bspSmokeRise 1.5s ease-out forwards; /* Smoother animation */
    opacity: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 1px solid #eee;
    z-index: 100;
    margin-bottom: 8px;
}

/* Fixed Mode (Flies out of cards/containers) */
.bsp-floating-message.fixed-mode, .bsp-floating-status.fixed-mode {
    position: fixed;
    bottom: auto; /* Top/Left set by JS */
    margin-bottom: 0;
    z-index: 999999; /* Above everything */
    transform: translateX(-50%); /* Keep horizontal centering logic */
}

/* Smoother Smoke Rise Animation */
@keyframes bspSmokeRise {
    0% { opacity: 0; transform: translate(-50%, 10px) scale(0.9); }
    15% { opacity: 1; transform: translate(-50%, 0px) scale(1); }
    85% { opacity: 1; transform: translate(-50%, -15px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -25px) scale(1.05); }
}

/* 1.2. Phrase Text & Feedback Area (within widget)
   -------------------------------------------------------------------------- */
.bsp-pronunciation-widget-adhoc {
    display: inline; /* Changed from inline-flex to allow natural text flow */
    vertical-align: middle;
    /* gap property removed as it doesn't apply to inline elements */
}

.bsp-phrase-text-adhoc {
    font-weight: normal;
    cursor: pointer;
    vertical-align: middle;
    padding: 1px 2px;
    border-radius: 3px;
    line-height: inherit;
    position: relative; /* For potential relative positioning of pseudo-elements or JS-added elements */
    z-index: 1; /* Ensures it's clickable above any underlying layers */
}
.bsp-phrase-text-adhoc:hover {
    background-color: #f0f0f0; /* Subtle hover feedback */
}

/* Feedback placeholder (for icons or transcript) */
.bsp-feedback-placeholder-adhoc {
    display: inline-block; /* Allow sizing */
    vertical-align: middle;
    font-size: 0.9em;
    line-height: 1;
    min-width: 3.5em; /* Reserve space for "100%" badge */
}
.bsp-feedback-placeholder-adhoc .bsp-feedback-content {
    cursor: pointer; /* To replay audio */
}

/* Feedback Icons */
.bsp-feedback-placeholder-adhoc .fa-check.correct { color: green; }
.bsp-feedback-placeholder-adhoc .fa-times.incorrect { color: red; }
.bsp-feedback-placeholder-adhoc .fa-comment-slash.neutral,
.bsp-feedback-placeholder-adhoc .fa-exclamation-triangle.error-icon { color: #777; }

/* "No Speech Detected" Specific Feedback */
.bsp-feedback-placeholder-adhoc .bsp-feedback-content.bsp-no-speech i.fa-comment-slash {
    color: #CCCCCC !important;
    cursor: default !important;
}
.bsp-feedback-placeholder-adhoc .bsp-feedback-content.bsp-no-speech {
    cursor: default !important;
}

/* Transcript Result Style Feedback */
.bsp-feedback-placeholder-adhoc .bsp-feedback-content.transcript-result {
    font-style: italic;
    font-size: 0.9em;
    margin-left: 5px;
    padding: 2px 5px;
    border-radius: 3px;
}
.bsp-feedback-placeholder-adhoc .bsp-feedback-content.transcript-result.correct {
    color: green;
    background-color: #e6ffe6;
}
.bsp-feedback-placeholder-adhoc .bsp-feedback-content.transcript-result.incorrect {
    color: red;
    background-color: #ffeeee;
    text-decoration: line-through;
}
.bsp-feedback-placeholder-adhoc .bsp-feedback-content.transcript-result.error-text {
    color: #555;
    background-color: #f0f0f0;
}

/* Playback Spinner Icon (when replaying audio) */
.bsp-feedback-placeholder-adhoc .bsp-feedback-content .bsp-playback-spinner {
    color: #0073aa; /* WordPress blue */
    font-size: 0.9em;
    margin-left: 3px;
}

/* ==========================================================================
   2. Info Icon & Phrase Details Bubble (Popups)
   ========================================================================== */

/* 2.1. Small Info Icon Popup (appears on phrase hover)
   -------------------------------------------------------------------------- */
.bsp-info-icon-popup {
    position: absolute; /* Positioned by JS */
    /* background-color: rgba(255, 255, 255, 0.9); */ /* Removed - icon provides its own background */
    /* border: 1px solid #ccc; */ /* Removed */
    /* border-radius: 50%; */ /* Removed */
    padding: 0; /* Span itself has no padding, icon will provide size */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.15); */ /* Optional: can add shadow to icon if desired */
    z-index: 10002;
    cursor: pointer;
    display: none; /* Shown by JS */
    font-size: 1.2em; /* Adjust overall size of the icon container if needed - icon will scale with this */
    line-height: 1; /* Important for consistent vertical alignment */
    /* transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; */ /* Fade-in controlled by JS */
}

.bsp-info-icon-popup i.fas.fa-circle-info { /* Target 'fas fa-circle-info' */
    color: #fbc014; /* Your desired color */
    /* vertical-align: middle; /* Good for inline-block context */
    display: block; /* Or inline-block, helps with consistent sizing */
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; /* Smooth hover transition */
    /* Add a subtle shadow to the icon itself if desired */
    /* text-shadow: 0 1px 2px rgba(0,0,0,0.2); */
}

.bsp-info-icon-popup:hover i.fas.fa-circle-info {
    color: #e0ac02; /* Darker shade for hover */
    transform: scale(1.1); /* Slight zoom on hover */
}

/* 2.2. Main Phrase Details Bubble (shows on info icon click)
   -------------------------------------------------------------------------- */
.bsp-phrase-details-bubble {
    position: absolute; /* Positioned by JS */
    background-color: #333; /* Dark background */
    color: #ddd; /* Light text for general content */
    padding: 10px 15px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 10001; /* High z-index */
    font-size: 0.95em;
    line-height: 1.4;
    min-width: 220px;
    max-width: 450px; /* INCREASED: Make the bubble wider */
    border: 1px solid #444; /* Slightly darker border */
}

/* Arrow for the bubble (points down by default) */
.bsp-phrase-details-bubble::after {
    content: "";
    position: absolute;
    top: 100%; /* Arrow at the bottom of the bubble */
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: #333 transparent transparent transparent; /* Arrow color matches bubble BG */
}

/* Arrow adjustment if bubble is positioned below the phrase */
.bsp-phrase-details-bubble.bsp-bubble-below::after {
    top: auto;
    bottom: 100%; /* Arrow at the top of the bubble */
    border-color: transparent transparent #333 transparent; /* Arrow points up */
}

/* Bubble Header: Now a column layout */
.bsp-phrase-details-bubble .bsp-bubble-header {
    display: flex;
    flex-direction: column; /* KEY CHANGE: Stack items vertically */
    align-items: flex-start; /* KEY CHANGE: Align items to the left */
    gap: 4px; /* Add a small gap between the phrase and the new IPA row */
    margin-bottom: 6px;
    width: 100%;
}
.bsp-phrase-details-bubble .bsp-bubble-phrase-text {
    font-weight: bold;
    font-size: 1.15em;
    color: #fff;
    margin-right: 0; /* No longer needed */
    width: 100%; /* Take full width of the new column layout */
    word-break: normal; /* Let long text wrap naturally */
    white-space: normal;
}

/* NEW: Wrapper for the second line (IPA and actions) */
.bsp-ipa-and-actions {
    display: flex;
    justify-content: space-between; /* Pushes IPA left, button right */
    align-items: center;
    width: 100%;
    gap: 10px;
}

.bsp-phrase-details-bubble .bsp-ipa {
    font-size: 0.95em;
    color: #bbb;
    font-family: "Lucida Sans Unicode", Arial, sans-serif;
    font-style: italic;
    margin-left: 0; /* REMOVED: No longer needed */
    padding-left: 0; /* REMOVED: No longer needed */
    flex-grow: 1; /* Allow it to take available space */
}


/* Separator line in bubble */
.bsp-phrase-details-bubble hr.bsp-bubble-separator {
    border: none;
    border-top: 1px solid #555; /* Darker separator for dark bubble */
    margin: 8px 0;
}

/* Meaning Lines in Bubble */
.bsp-phrase-details-bubble .bsp-bubble-meaning-line {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 0.9em;
}
.bsp-phrase-details-bubble .bsp-lang-label { /* For "EN:", "VI:" text labels */
    font-weight: bold;
    color: #7cc5f8; /* A light blue accent */
    margin-right: 4px;
}
.bsp-phrase-details-bubble .bsp-flag-icon { /* For flag images */
    width: 16px;
    height: auto;
    margin-right: 7px;
    flex-shrink: 0; /* Prevent flag from shrinking */
    vertical-align: middle; /* If not using flex on parent */
}
.bsp-phrase-details-bubble i { /* General icons in bubble, if any */
    color: #aaa;
}

/* User Stats Section in Bubble */
.bsp-phrase-details-bubble .bsp-user-stats-section {
    font-size: 0.9em;
    /* Spacing handled by <hr class="bsp-bubble-separator"> */
}
.bsp-phrase-details-bubble .bsp-user-stats-section .bsp-stats-title { /* "Your Practice Stats:" */
    font-weight: bold;
    color: #fff; /* Brighter title */
    display: block;
    margin-bottom: 5px;
}
.bsp-phrase-details-bubble .bsp-user-stats-section .bsp-stat-line {
    margin-bottom: 3px;
    line-height: 1.4;
}
.bsp-phrase-details-bubble .bsp-user-stats-section .bsp-stat-line:last-child {
    margin-bottom: 0;
}
.bsp-phrase-details-bubble .bsp-user-stats-section .bsp-streak-icon {
    color: #ffac33; /* Gold/orange for streak icons */
    margin-left: 4px;
    font-size: 0.9em;
}
/* .bsp-user-stats-section .fa-fire { } */ /* Specific color for current streak if needed */
/* .bsp-user-stats-section .fa-star { } */ /* Specific color for longest streak if needed */

/* New Report Error Button in Bubble Header */
.bsp-bubble-report-error-button {
    background: none !important; 
    border: none;
    /* color: inherit; REMOVED - let icon color directly from its own rule */
    cursor: pointer;
    padding: 0 0 0 10px; /* Only left padding for spacing from IPA/phrase */
    font-size: 0.9em; 
    line-height: 1;
    margin-left: auto; 
    flex-shrink: 0;
    outline: none; /* Remove default focus outline if any */
}

/* Default state for the flag icon INSIDE the button */
.bsp-bubble-report-error-button i.fa-flag {
    font-size: 1em; /* Make icon a bit more prominent than button text (if any text was there) */
    color: #fbc014; /* Amber/Yellow - Default active color */
    transition: color 0.2s ease-in-out, transform 0.15s ease-in-out; /* Added transform transition */
}

.bsp-bubble-report-error-button:not([disabled]) i.fa-flag {
    color: #fbc014; /* Amber/Yellow */
    /* ... other styles ... */
}
.bsp-bubble-report-error-button:not([disabled]):hover i.fa-flag {
    color: #FFD700; 
    transform: scale(1.1); 
}

/* Style for a phrase ALREADY USER-REPORTED (button will be disabled) */
.bsp-bubble-report-error-button.bsp-is-user-reported i.fa-flag { /* Targets the icon when button has this class */
    color: #03A9F4; /* Blue to indicate it's already actioned/logged */
}
.bsp-bubble-report-error-button.bsp-is-user-reported:hover i.fa-flag {
    color: #03A9F4; /* No color change on hover if disabled/already reported */
    transform: none;
}

/* After successful report IN THIS SESSION (icon changes to check) */
.bsp-bubble-report-error-button:disabled i.fa-check-circle { 
    color: #4CAF50; 
}
.bsp-bubble-report-error-button:disabled {
    cursor: default;
    opacity: 0.7; 
}

/* The message style */
.bsp-phrase-details-bubble p.bsp-bubble-user-reported-message { /* Renamed class */
    font-style: italic;
    color: #03A9F4; /* Blue, to match the user-reported flag */
    text-align: center;
    font-size: 0.9em;
    margin-top: 5px;
    padding: 0 5px; /* Add some horizontal padding */
    word-break: break-word;
}

/* If we wanted a specific color for a flag on a disabled button (e.g. already reported but not yet a check) */
.bsp-bubble-report-error-button:disabled i.fa-flag {
    color: #03A9F4; /* Blue - if you want to show it was reported and is now static */
}

.bsp-phrase-details-bubble p.bsp-bubble-under-review-message {
    font-style: italic;
    color: #fbc014; /* Amber/Yellow to draw attention */
    text-align: center;
    font-size: 0.9em;
    margin-top: 5px;
}

.bsp-bubble-report-error-button.bsp-needs-admin-review i.fa-flag {
    color: #B0BEC5; /* A different shade, e.g., blue-grey */
}


/* ==========================================================================
   3. Floating Toolbar
   ========================================================================== */
#bsp-floating-toolbar {
    position: fixed;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 10000;
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out, padding 0.2s ease-in-out;
    display: flex; /* Keep as flex */
    /* For collapsed state, center its direct child (the header, which will contain only the toggle button) */
    align-items: center;     /* Vertical centering for the header */
    justify-content: center; /* Horizontal centering for the header */
    width: 40px; 
    height: 40px; 
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}

#bsp-floating-toolbar.bsp-toolbar-expanded {
    /* When expanded, revert alignment to allow normal flow */
    align-items: flex-start;  /* Or 'stretch' if header/content should take full width */
    justify-content: flex-start;
    width: 280px;
    height: auto;
    min-height: 40px;
    padding: 5px;
    flex-direction: column; /* Ensure column direction when expanded */
}

/* 3.1. Toolbar Header (Toggle Icon, Title, Close Button)
   -------------------------------------------------------------------------- */
#bsp-toolbar-header {
    display: flex;
    align-items: center;
    width: 100%; /* Header always takes full width of its parent toolbar */
    height: 30px; /* Consistent height for the header area when expanded */
    box-sizing: border-box;
    flex-shrink: 0;
}

/* When toolbar is expanded, header height reverts to its content or a fixed value if needed */
#bsp-floating-toolbar.bsp-toolbar-collapsed #bsp-toolbar-header {
    height: 40px; /* Ensure header can fill the collapsed toolbar height for the button */
    padding: 0; /* No padding in header when collapsed */
    justify-content: center; /* Center the toggle button within the header */
}

#bsp-toolbar-toggle {
    background: none; border: none; outline: none;
    font-size: 1.4em;
    padding: 0;
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 30px; /* Default width for expanded state & defines clickable area */
    height: 30px; /* Default height for expanded state */
    color: inherit; 
    transition: transform 0.2s ease-in-out;
    /* Remove margin-right from previous attempts if any */
}

/* When toolbar is expanded, toggle button reverts to its fixed size */
#bsp-floating-toolbar.bsp-toolbar-collapsed #bsp-toolbar-toggle {
    width: 40px;  /* Fill the collapsed header width */
    height: 40px; /* Fill the collapsed header height */
    /* The icon inside will be centered due to its own flex properties */
}

#bsp-toolbar-title-text { /* "Pronunciation Checker" */
    font-weight: bold;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    display: none; /* Shown by JS when expanded */
    line-height: 30px; /* Align with button height */
}

#bsp-toolbar-close { /* 'X' button */
    background: none; border: none; outline: none;
    color: #cc0000;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0;
    margin-left: auto; /* Pushes to the right */
    display: none; /* Shown by JS when expanded */
    width: 30px; height: 30px;
    flex-shrink: 0;
    align-items: center; justify-content: center; /* Ensure these for flex display */
}
#bsp-toolbar-close:hover {
    color: #ff0000;
}

/* Toolbar Content Area (holds select, toggles, details display) */
#bsp-toolbar-content {
    padding: 10px 5px 5px 5px;
    display: none; /* Shown by JS when expanded */
    box-sizing: border-box;
    flex-direction: column;
    gap: 8px;
    width: 100%; /* Ensure content area takes full width inside expanded toolbar */
}

/* JS Controlled Display for Collapsed/Expanded States */
#bsp-floating-toolbar.bsp-toolbar-collapsed #bsp-toolbar-title-text,
#bsp-floating-toolbar.bsp-toolbar-collapsed #bsp-toolbar-close,
#bsp-floating-toolbar.bsp-toolbar-collapsed #bsp-toolbar-content {
    display: none;
}
#bsp-floating-toolbar.bsp-toolbar-expanded #bsp-toolbar-title-text,
#bsp-floating-toolbar.bsp-toolbar-expanded #bsp-toolbar-close,
#bsp-floating-toolbar.bsp-toolbar-expanded #bsp-toolbar-content {
    display: flex; /* Or 'block' for content if it's not a flex container itself */
}
/* Ensure content (which is a flex column) also displays as flex when toolbar expanded */
#bsp-floating-toolbar.bsp-toolbar-expanded #bsp-toolbar-content {
    display: flex;
}


/* 3.2. Elements within Toolbar Content
   -------------------------------------------------------------------------- */

/* Voice selector placeholder (Select2 will replace/enhance this) */
#bsp-toolbar-voice-selector {
    width: 100%;
    padding: 8px; /* Basic padding for native select */
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}

/* Phrase details display area (for hover details, if enabled) */
.bsp-toolbar-details-area {
    margin-top: 5px;
    padding: 8px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 3px;
    font-size: 0.9em;
    max-height: 100px;
    overflow-y: auto;
}

/* Toggles for bubble/stats */
.bsp-toolbar-setting-toggle {
    padding: 8px 0;
    margin-top: 8px;
    border-top: 1px solid #e0e0e0;
    font-size: 0.9em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bsp-toolbar-setting-toggle label {
    margin-right: 10px;
    color: #444;
    flex-grow: 1;
}
.bsp-toolbar-bubble-toggle-checkbox, /* Covers both checkboxes */
.bsp-toolbar-user-stats-toggle-checkbox {
    transform: scale(1.1); /* Slightly larger checkbox */
    accent-color: #0073aa; /* WP blue for check */
    cursor: pointer;
}

/* Message for disabled mobile recording in toolbar */
.bsp-mobile-disabled-message-toolbar {
    font-size: 0.9em;
    color: #757575;
    margin-top: 5px;
    padding: 5px;
    background-color: #efefef;
    border-radius: 3px;
}

/* ==========================================================================
   4. Heteronym Warning Popup
   ========================================================================== */
.bsp-heteronym-warning-popup {
    display: inline-block; /* Or block if you want it on its own line */
    padding: 10px 15px;
    background-color: #ffebee; /* Light red */
    color: #c62828; /* Darker red text */
    border: 1px solid #ef9a9a; /* Red border */
    border-radius: 4px;
    font-size: 0.9em;
    margin: 5px 0;
    line-height: 1.5;
}
.bsp-heteronym-warning-popup strong {
    color: #b71c1c; /* Even darker red for emphasis */
    display: block;
    margin-bottom: 5px;
}
.bsp-heteronym-warning-popup code {
    background-color: #ffcdd2; /* Slightly darker red for code background */
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
}
.bsp-heteronym-warning-popup i { /* For italics in the message */
    font-style: italic;
}

/* ==========================================================================
   5. Animations
   ========================================================================== */

/* Flashing animation for recording mic icon */
@keyframes bspRecordFlash {
    from { opacity: 1; }
    to { opacity: 0.4; }
}

/* Flashing animation for phrase text when playing audio */
.bsp-phrase-text-adhoc.bsp-flashing,
.bsp-feedback-placeholder-adhoc .bsp-feedback-content.bsp-flashing i {
    animation: bspTextFlash 0.4s 3 ease-in-out; /* Play 3 times */
}
@keyframes bspTextFlash {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.05); }
}


/* ==========================================================================
   6. Error Styling (for shortcode issues, etc.)
   ========================================================================== */
.bsp-error {
    color: red;
    border: 1px dashed red;
    padding: 5px;
    background-color: #ffeeee;
    font-size: 0.9em;
    display: block; /* Ensure it takes up its own line */
    margin: 5px 0;
}

/* ==========================================================================
   NEW: 7. Self-Assessment Elements
   ========================================================================== */
.bsp-feedback-icons-wrapper {
    display: flex;
    flex-direction: column; /* Stack self-assessment trigger above feedback icon */
    align-items: center;
    justify-content: center;
    margin-left: 0.3em; /* Space from phrase text */
}

.bsp-self-assessment-trigger-placeholder {
    display: inline-flex; /* To align with other icons */
    align-items: center;
    line-height: 1; /* Compact */
    min-height: 1em; /* Ensure it takes space even if empty */
    /* margin-bottom: 3px; /* Space between trigger and feedback icon */
}

.bsp-self-assessment-trigger-icon {
    cursor: pointer;
    font-size: 1.1em; /* Or adjust as needed */
    display: inline-block; /* Allow click and proper rendering */
    transition: transform 0.2s ease-out;
    color: #777; /* Default color for the star or prompt icon if not emoji based */
}
.bsp-self-assessment-trigger-icon:hover i.fa-star {
    transform: scale(1.2);
    color: #FFC400;
}

/* Specific colors for assessed FA icons if desired */
.bsp-self-assessment-trigger-icon i.fa-face-smile { color: #4CAF50; } /* Green */
.bsp-self-assessment-trigger-icon i.fa-face-meh { color: #FFC107; }   /* Amber */
.bsp-self-assessment-trigger-icon i.fa-face-sad-tear { color: #F44336; } /* Red */
.bsp-self-assessment-trigger-icon i.fa-flag { color: #03A9F4; } /* Blue for reported */

.bsp-self-assessment-trigger-icon i.fa-star { /* For FA icons inside */
    color: #FFD700; /* Default color for FA icons if needed */
}

/* Self-Assessment Popup - Dark Theme */
.bsp-self-assessment-popup {
    position: absolute;
    background-color: #333;
    color: #ddd;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 10px; /* Reduced padding slightly for compactness */
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 10020;
    
    display: none; /* JS changes to display: flex */
    flex-direction: column;
    align-items: center;
    
    width: 200px; /* Try a slightly smaller, fixed width */
    max-width: 200px; /* Enforce this max-width */
    box-sizing: border-box;
    overflow: hidden; /* CRITICAL: Prevent content from visually overflowing if it's too wide */
}

.bsp-self-assessment-popup::after { /* Arrow for dark bubble */
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}
.bsp-self-assessment-popup.bsp-bubble-below::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent #333 transparent;
}

.bsp-self-assessment-popup p.bsp-sa-title {
    margin: 0 0 10px 0;
    font-size: 0.95em; /* Slightly smaller */
    color: #fff;
    font-weight: normal;
    text-align: center;
    width: 100%; /* Take full width of parent's constrained width */
    box-sizing: border-box;
    word-wrap: break-word; /* Ensure title wraps */
}

.bsp-self-assessment-popup .bsp-sa-options {
    display: flex;
    justify-content: center;
    gap: 10px; /* Reduced gap slightly */
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap; /* Allow buttons to wrap if they don't fit */
}

.bsp-self-assessment-popup .bsp-sa-options button {
    background: none;
    border: none;
    padding: 4px; /* Reduced padding */
    cursor: pointer;
    font-size: 1.6em; /* Slightly smaller icons */
    line-height: 1;
    transition: transform 0.1s ease-out, color 0.2s;
    color: #ccc;
}

.bsp-self-assessment-popup .bsp-sa-options button:hover {
    transform: scale(1.2);
}

.bsp-self-assessment-popup .bsp-sa-options button[data-value="confident"]:hover { color: #4CAF50; }
.bsp-self-assessment-popup .bsp-sa-options button[data-value="so-so"]:hover { color: #FFC107; }
.bsp-self-assessment-popup .bsp-sa-options button[data-value="needs-work"]:hover { color: #F44336; }

.bsp-self-assessment-popup .bsp-sa-options button:focus {
    outline: 1px dotted #7cc5f8; /* Light blue focus outline for dark bg */
}

.bsp-self-assessment-popup hr.bsp-sa-separator {
    border: none;
    border-top: 1px solid #555;
    margin: 5px auto 8px auto; /* Reduced margins */
    width: 90%; /* Make HR take most of the constrained width */
}

.bsp-self-assessment-popup .bsp-sa-report-error-button {
    background: none;
    border: none;
    color: #FFC107;
    padding: 5px 8px; /* Reduced padding */
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em; /* Smaller text */
    transition: color 0.2s, background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Reduced gap */
    text-align: center; /* Center text */
    max-width: 100%; /* Ensure it cannot be wider than the popup */
    box-sizing: border-box;
    white-space: normal; /* Explicitly allow wrapping */
    word-break: break-word; /* Break long words if any */
}
.bsp-self-assessment-popup .bsp-sa-report-error-button i {
    font-size: 1em; /* Icon relative to button text */
}
.bsp-self-assessment-popup .bsp-sa-report-error-button:hover {
    color: #fff;
    /* background-color: #4e4e4e; */
}

/* ===========================================================================================
   NEW: 8. Playback Speed Controls in Toolbar - HIDDEN FOR NOW, OPTION DISABLED TEMPORARILY
   =========================================================================================== */
/* --- HIDE Playback Speed Controls --- */
.bsp-playback-speed-controls {
    display: none !important; /* Force hide */
}

   .bsp-playback-speed-controls {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between "Speed:" label and buttons */
    padding: 8px 0;
    border-top: 1px solid #e0e0e0;
    font-size: 0.9em;
}
.bsp-playback-speed-controls label {
    margin-right: auto; /* Push buttons to the right if desired, or remove for left align */
    font-weight: normal;
    color: #444;
}
.bsp-speed-buttons {
    display: flex;
    gap: 5px; /* Space between speed buttons */
}
.bsp-speed-button {
    padding: 4px 8px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.95em;
    color: #333;
    transition: background-color 0.2s, border-color 0.2s;
}
.bsp-speed-button:hover {
    background-color: #e9e9e9;
    border-color: #bbb;
}
.bsp-speed-button.active {
    background-color: #0073aa; /* WordPress blue */
    color: white;
    border-color: #0073aa;
    font-weight: bold;
}
.bsp-speed-button:focus {
    outline: 1px dotted #0073aa;
    outline-offset: 1px;
}
/* This groups the label and buttons together visually if needed */
.bsp-toolbar-setting-group { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* ==========================================================================
   NEW: Practice List Styles
   ========================================================================== */
.bsp-practice-list-container {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.bsp-practice-list-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4em;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.bsp-practice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bsp-practice-list-item {
    padding: 10px 0;
    border-bottom: 1px dashed #e0e0e0;
    display: flex; /* Helps align items if phrase is short */
    align-items: center; /* Vertically align items in the list item */
}

.bsp-practice-list-item:last-child {
    border-bottom: none;
}

/* Ensure the pronunciation container within the list item behaves well */
.bsp-practice-list-item .bsp-pronunciation-container {
    margin-bottom: 0; /* Remove bottom margin if it's redundant in list context */
    width: 100%; /* Make the practice widget take full width of the list item */
}

.bsp-practice-list-item .bsp-pronunciation-widget-adhoc {
    flex-grow: 1; /* Allow the widget part (text + feedback) to take available space */
}


.bsp-practice-list-empty {
    padding: 15px;
    background-color: #fffde7; /* Light yellow */
    border: 1px solid #fff59d; /* Yellow border */
    color: #5d4037; /* Brownish text */
    border-radius: 4px;
    text-align: center;
}

/* ==========================================================================
   NEW: Toolbar Tabs and Progress Pane Styles
   ========================================================================== */
#bsp-toolbar-header {
    /* Ensure it can contain the tabs next to the title */
    justify-content: flex-start; /* Align items to the start */
}

#bsp-toolbar-tabs-nav {
    display: flex; /* Will be set to flex by JS when toolbar expanded */
    align-items: center;
    /* margin-left: auto; /* Pushes tabs to the right of the title/toggle icon */
    /* margin-right: 5px; /* Space before close button */
    gap: 5px;
}

.bsp-toolbar-tab-button {
    background: transparent;
    border: 1px solid transparent; /* No border by default */
    border-bottom: none; /* No bottom border to merge with content area */
    padding: 5px 8px;
    cursor: pointer;
    font-size: 0.9em;
    color: #555;
    border-radius: 4px 4px 0 0; /* Rounded top corners */
    transition: background-color 0.2s, color 0.2s;
}
.bsp-toolbar-tab-button i {
    font-size: 1.1em;
}

.bsp-toolbar-tab-button:hover {
    background-color: #f0f0f0;
    color: #0073aa;
}

.bsp-toolbar-tab-button.active {
    background-color: #fff; /* Match content pane background */
    border-color: #ccc; /* Border to match content pane */
    border-bottom-color: #fff; /* Makes it look connected to the pane below */
    color: #0073aa;
    font-weight: bold;
    position: relative;
    top: 1px; /* Slightly shift up to overlap border */
}

#bsp-toolbar-content-panes {
    width: 100%;
    /* border-top: 1px solid #ccc; /* Separator from header/tabs */
}

.bsp-toolbar-content-pane {
    padding: 10px 5px 5px 5px;
    box-sizing: border-box;
    flex-direction: column; /* Already set in existing #bsp-toolbar-content */
    gap: 8px;              /* Already set in existing #bsp-toolbar-content */
    display: none; /* Only active pane is shown by JS */
    width: 100%;
}
.bsp-toolbar-content-pane.active {
    display: flex; /* Or block if content isn't flex */
}

/* Specific to progress pane */
#bsp-toolbar-content-progress h4 {
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}
#bsp-toolbar-content-progress .bsp-toolbar-setting-group {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
#bsp-toolbar-content-progress .bsp-toolbar-setting-group label {
    margin-right: 8px;
    white-space: nowrap;
}
#bsp-toolbar-content-progress select {
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: white;
}
#bsp-progress-chart-container {
    background-color: #fdfdfd;
    border: 1px solid #e9e9e9;
    padding: 5px;
    border-radius: 3px;
}
#bsp-progress-chart-message.bsp-chart-loading .spinner {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

/* NEW: Mastery Display in Bubble */
.bsp-bubble-mastery-info {
    display: flex;
    align-items: center;
    padding: 6px 0; /* Add some vertical padding */
    font-size: 0.9em;
    /* border-top: 1px solid #555; /* Optional separator */
    /* margin-top: 8px; /* Optional margin */
}

.bsp-mastery-label {
    font-weight: bold;
    color: #fff; /* Brighter for dark bubble */
    margin-right: 8px;
}

.bsp-mastery-level-display { /* Wrapper for current level icon and name */
    display: inline-flex;
    align-items: center;
    flex-grow: 1; /* Allow it to take available space */
}

.bsp-mastery-level-display .bsp-mastery-icon { /* Renamed for clarity if needed, or use existing */
    /* Styles for the main level icon if you want to differentiate from details icon */
    font-size: 1.1em;
    vertical-align: middle;
}

.bsp-mastery-level-display .bsp-mastery-name {
    color: #e0e0e0;
    margin-left: 5px;
    font-style: italic;
}

/* Mastery Display in Bubble */
.bsp-bubble-mastery-info {
    display: flex;
    align-items: center;
    padding: 6px 0;
    font-size: 0.9em;
}

.bsp-mastery-label {
    font-weight: bold;
    color: #fff; 
    margin-right: 10px; /* Increased space to icon bar */
}

.bsp-mastery-icon-bar { /* The container for the stars/icons */
    display: inline-flex;
    align-items: center;
    gap: 1px; /* Reduced gap for mini version */
    cursor: pointer; 
    padding: 2px; /* Minimal padding */
    border-radius: 3px;
    transition: background-color 0.2s;
    outline: none; 
}
.bsp-mastery-icon-bar:hover,
.bsp-mastery-icon-bar:focus {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle hover/focus background */
}
.bsp-mastery-icon-bar.bsp-tooltip-is-open:hover { /* Override hover when tooltip is open */
    background-color: transparent; 
}
.bsp-mastery-icon-bar:focus {
    background-color: rgba(255, 255, 255, 0.1); 
}
.bsp-mastery-icon-bar.bsp-tooltip-is-open:focus { /* Override focus when tooltip is open */
    background-color: transparent;
}

.bsp-mastery-individual-icon { /* Style for each icon in the bar */
    font-size: 1.1em; 
    transition: color 0.3s ease-in-out, transform 0.15s ease-out;
}

/* Specific styles for the mini version used in the collapsed toolbar */
.bsp-mastery-stars-display.bsp-mastery-mini {
    display: inline-flex; /* Crucial for horizontal layout */
    align-items: center;
    line-height: 1; /* Keep it compact vertically */
}

.bsp-mastery-stars-display.bsp-mastery-mini i {
    font-size: 0.6em; /* Make stars significantly smaller */
    margin: 0 0.5px;   /* Minimal horizontal margin, no vertical */
    padding: 0;      /* No padding on the icon itself */
    line-height: 1;  /* Ensure icon itself is compact */
}

/* Ensure the container for the mini stat value in collapsed tab also behaves */
.bsp-toolbar-mini-stat .bsp-mini-stat-value {
    font-weight: 600;
    font-size: 0.9em;
    line-height: 1; /* Make sure the text part is also compact */
    white-space: nowrap; /* Prevent wrapping if stars make it too wide */
}

/* Remove styles for .bsp-mastery-level-display, .bsp-mastery-name, .bsp-mastery-details-icon
   as they are replaced by the icon bar logic.
   If you still have a separate name display, keep its styles.
*/
.bsp-mastery-name { /* If you still want to show the name next to the bar */
    color: #e0e0e0;
    margin-left: 8px; /* Space from icon bar to name */
    font-style: italic;
}

/* Mastery Tooltip Content (Overall container) */
.bsp-mastery-tooltip-content {
    position: absolute;
    display: none; 
    background-color: #2a2a2a; 
    color: #ccc;
    border: 1px solid #4a4a4a;
    border-radius: 6px; /* Slightly more rounded */
    padding: 10px 12px; /* Adjust padding */
    box-shadow: 0 4px 15px rgba(0,0,0,0.4); /* Deeper shadow */
    z-index: 10030; 
    min-width: fit-content; /* Adjust as needed for content */
    max-width: 320px;
    font-size: 0.9em;
}

/* Individual Mastery Item within the Tooltip */
.bsp-mastery-tooltip-item {
    padding: 5px 0; /* Reduced vertical padding for closer levels */
    border-bottom: 1px dotted #404040; 
    cursor: default; /* Indicate it's not individually clickable if description is gone */
}
.bsp-mastery-tooltip-item:last-child {
    border-bottom: none;
}

/* Highlight for the user's current mastery level item */
.bsp-mastery-tooltip-item.current-mastery-item {
    background-color: #4a4a4a; /* Darker, more distinct highlight */
    margin-left: -12px; 
    margin-right: -12px;
    padding-left: 9px; 
    padding-right: 12px;
    border-left: 3px solid #fbc014; /* Bright gold accent border */
    border-radius: 3px; /* Slight rounding for the highlighted item */
}

.bsp-mastery-tooltip-item.current-mastery-item .bsp-mastery-tooltip-description { /* Make description slightly brighter */
    color: #f5f5f5 !important; /* Brighter text for current item, if needed. Be careful with !important */
}

/* Container for stars and level name on one line */
.bsp-mastery-tooltip-item {
    padding: 5px 0; /* Reduced vertical padding for closer levels */
    border-bottom: 1px dotted #404040; 
    cursor: default; /* Indicate it's not individually clickable if description is gone */
}

.bsp-mastery-tooltip-item .bsp-mastery-tooltip-stars {
    display: inline-flex;
    gap: 0px; /* Tighter spacing - no gap, icons will touch or have their natural spacing */
    margin-right: 6px; /* Slightly reduced space to label */
    font-size: 1.05em; /* Slightly smaller stars in tooltip if needed */
}
.bsp-mastery-tooltip-item .bsp-mastery-tooltip-stars i {
    padding: 0 0.5px; /* Tiny horizontal padding if gap is 0 and they look too cramped */
}

.bsp-mastery-tooltip-item .bsp-mastery-tooltip-level-name {
    font-weight: bold;
    /* color is set inline based on levelDetails.color */
}

/* Description/Criteria text below the stars/label */
.bsp-mastery-tooltip-item .bsp-mastery-tooltip-description {
    font-size: 0.85em; /* Slightly smaller description */
    color: #a0a0a0; 
    padding-left: 27px; /* Indent based on new star size/spacing */
    font-style: italic;
    line-height: 1.3;
}

/* Muted style for "Not Practiced" text if needed (as per your example) */
.bsp-mastery-tooltip-item .text-muted strong,
.bsp-mastery-tooltip-item .text-muted .bsp-mastery-tooltip-description {
    color: #777 !important; /* Override other color settings for muted text */
}


/* Styles for Phrase Practice Summary in Mastery Tooltip */
.bsp-mastery-tooltip-content hr.bsp-mastery-tooltip-separator {
    border: none;
    border-top: 1px dotted #404040; /* Consistent separator style */
    margin: 8px 0;
}

.bsp-mastery-tooltip-phrase-summary {
    padding-top: 6px;
    font-size: 0.9em; /* Slightly smaller than main tooltip text if desired */
    color: #b0b0b0; /* Lighter gray for these stats */
}

.bsp-mastery-tooltip-phrase-summary .bsp-summary-title {
    display: block;
    font-weight: bold;
    color: #d0d0d0; /* Slightly brighter title for the summary section */
    margin-bottom: 6px;
}

.bsp-mastery-tooltip-phrase-summary .bsp-summary-line {
    margin-bottom: 4px;
    line-height: 1.4;
}

.bsp-mastery-tooltip-phrase-summary .bsp-summary-detail {
    font-size: 0.9em;
    color: #999; /* Even lighter for sub-details like (X passes / Y fails) */
}

.bsp-mastery-tooltip-phrase-summary .bsp-summary-log-icon {
    display: inline-block;
    margin-right: 3px;
    font-weight: bold;
    font-size: 1.1em; /* Make icons slightly larger */
}

.bsp-mastery-tooltip-phrase-summary .bsp-log-pass {
    color: #4CAF50; /* Green for pass */
}

.bsp-mastery-tooltip-phrase-summary .bsp-log-fail {
    color: #F44336; /* Red for fail */
}

.bsp-mastery-tooltip-phrase-summary .bsp-log-other {
    color: #FFC107; /* Amber for other (e.g., no speech if logged as '?') */
}

/* ==========================================================================
   9. Level Up Notification
   ========================================================================== */
.bsp-levelup-notification {
    /* Styles are applied via JS, but you can add defaults or !important overrides here if needed */
    /* Example: ensure text shadow for better readability on various backgrounds */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.bsp-levelup-notification .bsp-levelup-star-bar i.bsp-levelup-star {
    transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bounce effect for transform */
    margin: 0 2px; /* Spacing between stars */
}

.bsp-levelup-notification .bsp-levelup-message strong {
    /* color is set inline by JS based on settings, but can have a fallback */
    color: #fbc014; 
    font-weight: bold;
}

/* ==========================================================================
   10. NEW TOP FLOATING STATS TOOLBAR
   ========================================================================== */

#bsp-top-stats-toolbar {
    position: fixed;
    z-index: 10010;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #3c434a;
    background-color: #f0f0f1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    /* transition for width, height, and potentially left/right if they change */
    /* Smooth transitions */
    /* transition: width 0.3s ease-out, 
                height 0.3s ease-out, 
                padding 0.3s ease-out, 
                border-radius 0.3s ease-out, 
                left 0.3s ease-out,
                right 0.3s ease-out;
    */
    display: flex;
    /* right: [value_from_js]; /* JS will set this */
    /* top: [value_from_js];   /* JS will set this */
    right: 0; /* Will be overridden by JS with specific offset */
    left: auto; /* Default, right will take precedence for collapsed */
}

/* Default for expanded toolbar (non-fullscreen, non-LearnPress) */
#bsp-top-stats-toolbar.bsp-top-toolbar-expanded:not(.bsp-learnpress-context):not(.bsp-fullscreen-mode) {
    left: auto; /* Will be positioned by 'right' */
    /* width: 380px; /* Example default width if JS doesn't set one */
    /* The 'right' value will be applied by JS based on settings */
}

/* --- Collapsed State (Tab on the Right Edge) --- */
#bsp-top-stats-toolbar.bsp-top-toolbar-collapsed {
    width: 45px; /* Fixed width for collapsed tab */
    height: auto; /* Or a fixed height if you prefer e.g., 120px */
    padding: 5px 0;
    align-items: center;
    border-radius: 6px 0 0 6px;
    overflow: hidden;
    flex-direction: column;
    /* right property is set by JS */
    left: auto !important; /* Ensure left doesn't interfere */
    box-shadow: -2px 2px 8px rgba(0,0,0,0.1);
}

#bsp-toolbar-collapsed-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 4px;
    cursor: pointer;
    width: 100%;
}

#bsp-toolbar-collapsed-tab #bsp-toolbar-main-toggle-icon {
    font-size: 2.0em; /* This is for the large icon when collapsed */
    color: #fbc014;
    margin-bottom: 3px;
}

.bsp-toolbar-mini-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.78em;
    color: #50575e;
    line-height: 1.1;
}
.bsp-toolbar-mini-stat i {
    font-size: 1.15em;
    margin-bottom: 1px;
}
.bsp-toolbar-mini-stat .bsp-mini-stat-value {
    font-weight: 600;
    font-size: 0.95em;
    min-width: 20px;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
}
.bsp-toolbar-mini-stat .bsp-mini-stat-value .bsp-mini-spinner {
    font-size: 1em;
    color: #fbc014;
}
.bsp-toolbar-mini-stat .bsp-mastery-stars-display.bsp-mastery-mini i {
    font-size: 0.6em;
    margin: 0;
    line-height: 2;
}
.bsp-toolbar-mini-stat .bsp-mastery-stars-display.bsp-mastery-mini {
    line-height: 1;
    white-space: nowrap;
}

#bsp-top-stats-toolbar.bsp-top-toolbar-collapsed #bsp-toolbar-expanded-bar {
    display: none;
}

/* --- Expanded State (Horizontal Bar with Internal Panels) --- */
#bsp-top-stats-toolbar.bsp-top-toolbar-expanded {
    /* Width and Height will be set by JS or specific context classes like fullscreen/learnpress */
    /* Default width for non-LP/non-fullscreen if JS sets it, e.g. 380px */
    /* Default height 'auto' to grow with content */
    min-height: 42px;
    border-radius: 6px; /* Can have rounded corners when expanded too */
    box-shadow: 0 2px 15px rgba(0,0,0,0.2); /* Slightly more prominent shadow */
    flex-direction: row; /* Main axis is row: [ContentWrapper | TogglesColumn] */
    align-items: flex-start; /* Align children to the top */
    /* left and right positioning are handled by JS via updateExpandedToolbarLeftOffset */
}

#bsp-top-stats-toolbar.bsp-top-toolbar-expanded #bsp-toolbar-collapsed-tab {
    display: none;
}

#bsp-toolbar-expanded-bar {
    display: flex;
    flex-direction: row; 
    align-items: flex-start; /* CHANGE: Vertically center children of expanded bar */
    width: 100%;
    padding: 0 8px;    /* REMOVE vertical padding, height will be set by content + button */
    box-sizing: border-box;
    position: relative; 
    min-height: 38px; /* Set a new minimum height for the slimmer bar */
}

/* This wrapper now ONLY contains the stats display area.
   The internal panels (like settings) are siblings to this and the panel-toggles column. */
/* Wrapper for Stats Display Area (the part that's always visible when expanded) */
#bsp-toolbar-main-content-and-panels-wrapper { 
    display: flex;
    flex-direction: column; 
    flex-grow: 1; /* This is key */
    min-width: 0; 
    order: 1; /* Place it first in the flex row */
}

/* The actual stats area (lesson block and phrase block) */
#bsp-toolbar-main-content-area { /* This is the part that should have a consistent height */
    display: flex;
    flex-direction: row; 
    width: 100%;
    box-sizing: border-box;
    /* margin-bottom: 5px; /* Space before settings panel if it appears below */
    padding: 4px 0; /* Minimal vertical padding for this top row of stats */
    align-items: center; /* Vertically center contents of THIS row (lesson/phrase blocks) */
    min-height: 30px; /* Give the stats row a minimum height to align the collapse button against */
}

/* NEW: Container for all controls on the right side of the expanded toolbar */
#bsp-toolbar-right-controls-column {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items in this column */
    gap: 5px; /* Space between main collapse, group toggle, and panel toggles div */
    flex-shrink: 0; /* Don't let this column shrink */
    margin-left: 10px; /* Space from the main content/stats area */
    padding-top: 3px; /* Align with top of stats area slightly */
}

#bsp-toolbar-collapse-button { /* This is the main icon that also collapses the bar */
    background: none; border: none;
    font-size: 2.0em; /* Adjusted size for better balance */
    color: #fbc014;
    cursor: pointer;
    padding: 0;      /* Remove padding, rely on line-height and font-size for centering */
    width: 36px;     /* Fixed width */
    height: 36px;    /* Fixed height, should match min-height of bar for easy centering */
    display: flex;     /* Use flex to center icon inside button */
    align-items: center;
    justify-content: center;
    /* No more absolute positioning needed if parent is flex and aligns items center */
    /* position: absolute; 
    top: 7px;       
    right: 6px;     
    z-index: 10;  */   
    margin-left: auto; /* Push it to the far right */
    margin-top: 7px;
    order: 3; /* Make sure it's the last item in the flex row */
}
#bsp-toolbar-collapse-button:hover {
    /* background-color: rgba(0,0,0,0.07); */
    transform: scale(1.05);
}

/* Styling for the Settings Panel (now a direct child of expanded-bar) */
#bsp-internal-settings-panel {
    display: none; /* Hidden by default, shown by JS */
    position: absolute; /* Position it relative to the expanded bar */
    top: 42px; /* Height of the main stats bar area, adjust as needed */
    left: 0;  /* Or 'auto' if you want it positioned from right */
    right: 0; /* Stretches to full width of expanded bar, or specific width */
    width: 100%; /* Or a fixed width like 300px if you prefer */
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-top: none; /* Assuming top border is part of the main bar or not needed */
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    z-index: 5; /* Below main collapse button but above page content */
    border-radius: 0 0 4px 4px;
    box-sizing: border-box;
}

.bsp-toolbar-panel-toggle-btn {
    background: transparent;
    border: 1px solid transparent;
    font-size: 1.0em; /* SMALLER icon size */
    padding: 6px;     /* Keep padding reasonable for touch */
    cursor: pointer;
    color: #6c757d;   /* MORE SUBDUED default color */
    border-radius: 4px;
    line-height: 1;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
    width: 32px;      /* Make button itself a bit smaller */
    height: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Area for the two stats blocks (Lesson & Phrase) */
#bsp-toolbar-stats-display-area {
    display: flex;
    flex-direction: row; 
    flex-grow: 1;
    overflow: hidden; 
    min-width: 0; 
}

/* Styles for each main block (Lesson Stats, Phrase Stats) */
.bsp-toolbar-main-block {
    display: flex;
    flex-direction: column; 
    flex-grow: 1;
    flex-basis: 0; 
    min-width: 0;  
    padding: 2px 8px; /* Reduce vertical padding, keep horizontal */
    gap: 2px; /* Reduce gap between title row and stats row */
}

#bsp-lesson-stats-block {
    border-right: 1px solid #dcdcdc; 
}

.bsp-main-block-title-row {
    display: flex;
    align-items: baseline; 
    gap: 5px; /* Slightly reduce gap */
    width: 100%;
    overflow: hidden; 
    margin-bottom: 1px; /* Tighter spacing to stats row */
}

.bsp-main-block-title-row .bsp-title-label {
    font-weight: 500; 
    font-size: 1.0em; /* Slightly smaller */
    color: #485058; 
    flex-shrink: 0; 
    white-space: nowrap;
}

.bsp-main-block-title-row .bsp-dynamic-title { 
    font-weight: 600; 
    color: #0073aa; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.0em; /* Slightly smaller */
    line-height: 1.2; /* Adjust line height */
    flex-grow: 1;
    min-width: 0; 
}

.bsp-main-block-stats-row { 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    align-items: center;
    gap: 2px 8px; /* Reduce vertical gap, keep horizontal */
    width: 100%;
    padding-top: 0; /* Remove top padding */
    min-height: 18px;
}

.bsp-main-block-stats-row .bsp-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 3px; 
    font-size: 0.85em; /* Slightly smaller stats text */
    white-space: nowrap;
    padding: 1px 3px; /* Reduce padding */
    border-radius: 3px; 
}
.bsp-main-block-stats-row .bsp-stat-item i {
    color: #50575e;
    font-size: 1em; 
    opacity: 0.85;
}
.bsp-main-block-stats-row .bsp-stat-item .bsp-stat-value {
    font-weight: 500; 
    color: #1d2327;
}
.bsp-main-block-stats-row .bsp-stat-item .bsp-mastery-stars-display i {
    font-size: 0.9em; 
    margin:0;
    padding: 0 0.5px; 
}
.bsp-main-block-stats-row .bsp-phrase-recent-log .bsp-summary-log-icon {
    font-size: 0.9em;
    margin-right: 0px;
    padding: 0 1px;
}
.bsp-main-block-stats-row .bsp-phrase-recent-log .bsp-log-pass { color: #28a745; }
.bsp-main-block-stats-row .bsp-phrase-recent-log .bsp-log-fail { color: #dc3545; }
.bsp-main-block-stats-row .bsp-phrase-recent-log .bsp-log-other { color: #ffc107; }

/* Optional Separator for Iconified Stats Row */
.bsp-stats-row-separator {
    align-self: center;
    color: #d0d0d0;
    font-size: 0.9em;
    padding: 0 5px; /* Space around the separator */
    /* display: none; /* Uncomment if you don't want it initially */
}

/* NEW: Floating Menu for Toolbar Actions (Graphs/Settings Toggles) */
.bsp-toolbar-action-menu {
    position: absolute;
    /* background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); */
    z-index: 10015;
    padding: 5px;
    display: none; /* Shown by JS */
    /* min-width: 40px; /* Make it compact if only icons */
    width: auto; /* Let content (buttons) define width */
}

.bsp-toolbar-action-menu button {
    display: flex; 
    align-items: center;
    background: none;
    border: none;
    padding: 6px; /* Adjust for icon-only */
    width: 100%; /* Buttons take full width of menu */
    text-align: center; /* Center icon if no text */
    cursor: pointer;
    font-size: 0.95em; 
    /*color: #3c434a;*/
    color: #fbc014;
    border-radius: 3px;
    margin-bottom: 3px;
    background-color: #f0f0f1;
    color: #0073aa;
}
.bsp-toolbar-action-menu button:last-child { margin-bottom: 0; }
.bsp-toolbar-action-menu button:hover { background-color: #f0f0f1; color: #0073aa; }
.bsp-toolbar-action-menu button i {
    margin-right: 0; /* No margin if icon-only */
    font-size: 0.8em; /* Icon size */
    width: auto;   /* Let icon define its width */
    /* color: #50575e; */
    color: #50575e;
}
.bsp-toolbar-action-menu button:hover i { color: #0073aa; }
.bsp-toolbar-action-menu button.active { background-color: #e9ecef; }
.bsp-toolbar-action-menu button.active i { color: #0073aa; }


/* Internal Toolbar Panels (Graphs & Settings Content) */
.bsp-internal-toolbar-panel {
    display: none; 
    width: 100%;   
    background-color: #f8f9fa; 
    border-top: 1px solid #dee2e6; 
    margin-top: 8px; 
    padding: 0; 
    box-sizing: border-box;
    border-radius: 0 0 4px 4px; 
}

.bsp-internal-toolbar-panel .bsp-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px; 
    background-color: #e9ecef; 
    border-bottom: 1px solid #ced4da;
}

.bsp-internal-toolbar-panel .bsp-panel-header h4 {
    margin: 0;
    font-size: 1.05em; 
    color: #343a40;
    font-weight: 600;
}

.bsp-internal-toolbar-panel .bsp-panel-content-close { 
    background: none;
    border: none;
    font-size: 1.2em; 
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    margin-right: 30px;
    line-height: 1;
}
.bsp-internal-toolbar-panel .bsp-panel-content-close:hover {
    color: #dc3545; 
}

.bsp-internal-toolbar-panel .bsp-panel-content-area {
    padding: 15px;
    max-height: 50vh; /* Increased max-height */
    overflow-y: auto;
}

/* --- Styles for Embedded Charts in Toolbar Main Blocks --- */
.bsp-toolbar-main-block .bsp-chart-container {
    margin-top: 12px; /* Space between iconified stats and the chart */
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #dcdcdc; /* Light border around chart area */
    border-radius: 3px;
    /* display: none; /* JS handles display via slideDown/Up */
}

.bsp-toolbar-main-block .bsp-chart-container h5 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 0.95em; /* Slightly smaller than main block titles */
    color: #3c434a;
    text-align: center;
    font-weight: 500;
}

.bsp-toolbar-main-block .bsp-chart-container canvas {
    max-width: 100%;
    height: 200px !important; /* Adjust fixed height as needed for compact display */
}

/* Styling for content within the internal panels */
#bsp-internal-graphs-panel .bsp-chart-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#bsp-internal-graphs-panel .bsp-chart-container {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 12px;
    min-height: 230px; 
}
#bsp-internal-graphs-panel .bsp-chart-container h5 {
    margin-top: 0; margin-bottom: 12px; text-align: center;
    font-size: 1em; color: #333; font-weight: 500;
}
#bsp-internal-graphs-panel canvas {
    max-width: 100%; height: 200px !important; 
}
.bsp-panel-guest-prompt { /* Used in internal panels */
    padding: 20px; text-align: center;
    background-color: #f1f3f5; border: 1px dashed #adb5bd; border-radius: 4px;
}
.bsp-panel-guest-prompt p { font-size: 1.1em; margin-bottom: 10px; color: #0073aa; font-weight: 600; }
.bsp-toolbar-login-btn, .bsp-toolbar-register-btn { /* Reused from old guest prompt */
    display: inline-block; margin: 5px; padding: 8px 15px; text-decoration: none;
    border-radius: 4px; font-weight: 500;
}
.bsp-toolbar-login-btn { background-color: #0073aa; color: white; border: 1px solid #006699; }
.bsp-toolbar-login-btn:hover { background-color: #005a87; }
.bsp-toolbar-register-btn { background-color: #f0f0f1; color: #0073aa; border: 1px solid #0073aa; }
.bsp-toolbar-register-btn:hover { background-color: #e0e0e1; border-color: #005a87; }


#bsp-internal-settings-panel .bsp-toolbar-setting {
    border-bottom-color: #e0e0e0; padding-bottom: 10px; margin-bottom: 10px;
}
#bsp-internal-settings-panel .bsp-toolbar-setting:last-child { border-bottom: none; }
#bsp-internal-settings-panel .bsp-toolbar-setting label { color: #212529; font-weight: 500; display: block; margin-bottom: 5px;}
#bsp-internal-settings-panel .bsp-toolbar-setting-toggle { display: flex; align-items: center; justify-content: space-between; }
#bsp-internal-settings-panel .bsp-toolbar-setting-toggle label { margin-bottom: 0; flex-grow: 1; }
#bsp-internal-settings-panel .bsp-toolbar-setting select,
#bsp-internal-settings-panel .bsp-toolbar-setting input[type="checkbox"] { margin-right: 5px; }
#bsp-internal-settings-panel .bsp-toolbar-setting input[type="checkbox"] { transform: scale(1.1); accent-color: #0073aa; }

#bsp-toolbar-panel-toggles { /* This div is NOT used if menu comes from main icon hover */
    display: none; /* Ensure it's hidden if we are not using it as a docked column */
}

/* Responsive Adjustments */
@media (max-width: 700px) {
    #bsp-toolbar-stats-display-area {
        flex-direction: column; 
        gap: 8px; 
    }
    #bsp-lesson-stats-block {
        border-right: none; 
        padding-bottom: 8px; 
        border-bottom: 1px solid #dcdcdc; 
    }
    .bsp-main-block-stats-row {
       justify-content: flex-start; 
    }
    #bsp-toolbar-main-content-area {
        padding-left: 30px; /* Adjust for smaller collapse button */
    }
    #bsp-toolbar-collapse-button {
        padding: 4px; /* Smaller touch target */
        font-size: 1.1em;
    }
}

@media (max-width: 480px) { /* Further adjustments */
    .bsp-main-block-title-row .bsp-title-label,
    .bsp-main-block-title-row .bsp-dynamic-title {
        font-size: 0.9em; 
    }
    .bsp-main-block-stats-row .bsp-stat-item {
        font-size: 0.75em; 
        padding: 1px 3px;
    }
    .bsp-main-block-stats-row {
        gap: 3px 6px; 
    }
    #bsp-toolbar-panel-toggles {
        margin-left: 5px; /* Reduce space */
    }
    .bsp-toolbar-panel-toggle-btn {
        font-size: 1.1em; padding: 5px 6px;
    }
     #bsp-toolbar-main-content-area {
        padding-left: 28px; 
    }
}

/* --- NEW: Toolbar Initial/Loading States --- */
.bsp-toolbar-main-block .bsp-initial-state-text {
    font-size: 0.9em;
    color: #757575; /* Medium gray */
    font-style: italic;
    text-align: center; /* Center if it's the only thing in the block */
    width: 100%;
    padding: 10px 0; /* Some padding if it's the only content */
}

/* For faint icons in initial state */
#bsp-phrase-stats-block.bsp-initial-state .bsp-stat-item i,
#bsp-phrase-stats-block.bsp-initial-state .bsp-mastery-stars-display i {
    color: #dddddd !important; /* Very light gray, !important to override specific icon colors */
    opacity: 0.6; /* Further fade them */
}
#bsp-phrase-stats-block.bsp-initial-state .bsp-stat-item .bsp-stat-value {
    display: none; /* Hide the value part completely in initial state */
}


/* Subtle inline spinner for text */
.bsp-inline-text-spinner {
    font-size: 0.9em; /* Smaller than main text */
    margin-left: 5px;
    color: #0073aa; /* WP blue or your accent */
    vertical-align: middle;
}

/* Animated loading dots for stats values */
.bsp-loading-dots span {
    display: inline-block;
    opacity: 0;
    animation: bspLoadingDotsPulse 1.4s infinite;
    margin: 0 0.5px; /* Minimal spacing between dots */
}
.bsp-loading-dots span:nth-child(1) { animation-delay: 0s; }
.bsp-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.bsp-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bspLoadingDotsPulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Styling for Mastery Stars during loading (subtle pulse) */
#bsp-phrase-stats-block.bsp-loading-state .bsp-mastery-stars-display i {
    animation: bspMasteryStarPulse 1.5s infinite ease-in-out alternate;
    color: #cccccc !important; /* During loading, make them a consistent slightly darker gray */
}
@keyframes bspMasteryStarPulse {
    from { opacity: 0.7; }
    to { opacity: 1; }
}

#bsp-phrase-stats-block.bsp-loading-state .bsp-stat-item i {
    color: #50575e; /* Normal icon color during loading */
    opacity: 1;
}

/* --- NEW: Top Toolbar Responsive Positioning (LearnPress Aware) --- */


/* Fullscreen Override (takes precedence) */
#bsp-top-stats-toolbar.bsp-top-toolbar-expanded.bsp-fullscreen-mode {
    left: 0px !important;
    right: 0px !important; /* Ensure it spans full width */
    width: 100vw !important; /* Or 100% if parent is body */
    /* Override any other positioning attempts */
}

/* --- LearnPress Context Specific Styles (only when NOT fullscreen) --- */

/* Default Expanded in LearnPress Context (for wide sidebar > 1280px) */
/* These values will be overridden by JS if custom values are set in admin */
#bsp-top-stats-toolbar.bsp-top-toolbar-expanded.bsp-learnpress-context:not(.bsp-fullscreen-mode) {
    left: 485px; /* Default wide sidebar offset from PHP (e.g., 475 + 10) */
    right: 16px; /* Default right offset from PHP */
    width: calc(100vw - 485px - 16px); /* Default calculation */
    /* JavaScript will override these with actual settings values */
}

/* Narrow Sidebar in LearnPress Context (< 1280px) */
@media (max-width: 1279.98px) {
    #bsp-top-stats-toolbar.bsp-top-toolbar-expanded.bsp-learnpress-context:not(.bsp-fullscreen-mode) {
        left: 310px; /* Default narrow sidebar offset from PHP (e.g., 300 + 10) */
        /* right: 16px; /* Right offset remains same */
        width: calc(100vw - 310px - 16px); /* Default calculation for narrow */
        /* JavaScript will override these with actual settings values */
    }
}

/* Styles for Headers within Embedded Chart Containers */
.bsp-toolbar-main-block .bsp-chart-container .bsp-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* Space between header and canvas */
    padding-bottom: 5px; /* Optional: if you want a line or more space */
    border-bottom: 1px solid #e9ecef; /* Light separator */
}

.bsp-toolbar-main-block .bsp-chart-container .bsp-chart-header h5 {
    margin: 0; /* Remove default h5 margin */
    font-size: 0.95em;
    color: #3c434a;
    font-weight: 500;
    flex-grow: 1; /* Allow title to take space */
    text-align: left; /* Align title to the left */
}

.bsp-toolbar-main-block .bsp-chart-container .bsp-chart-content-close {
    background: none;
    border: none;
    font-size: 1.1em; /* Adjust size as needed */
    color: #888; /* Subdued color for the 'x' */
    cursor: pointer;
    padding: 2px 4px; /* Small padding for click area */
    line-height: 1;
    flex-shrink: 0; /* Don't let it shrink */
}

.bsp-toolbar-main-block .bsp-chart-container .bsp-chart-content-close:hover {
    color: #dc3545; /* Red on hover, like other close buttons */
}

/* ==========================================================================
   12. Inline Mastery Display (Placeholder - refine as needed) - UNCHANGED
   ========================================================================== */
.bsp-inline-mastery-stars {
    display: block; /* Stars above the phrase */
    text-align: center; /* Or left/right as preferred */
    margin-bottom: 3px;
    font-size: 0.8em; /* Smaller stars */
}
.bsp-inline-mastery-stars i {
    margin: 0 1px;
}

/* For color-coding, you'll need classes based on mastery level key */
/* Example: (These colors should come from your bspData.settings.mastery_levels_config) */
/* .bsp-mastery-color-not_attempted .bsp-phrase-text-adhoc { /* Default text color } */ 
.bsp-mastery-color-attempted .bsp-phrase-text-adhoc { color: #FFC107; /* Amber */ }
.bsp-mastery-color-familiar .bsp-phrase-text-adhoc { color: #FF9800; /* Orange */ }
.bsp-mastery-color-consistent .bsp-phrase-text-adhoc { color: #8BC34A; /* Light Green */ }
.bsp-mastery-color-proficient .bsp-phrase-text-adhoc { color: #4CAF50; /* Green */ }
.bsp-mastery-color-master .bsp-phrase-text-adhoc { color: #2E7D32; /* Dark Green */ font-weight: bold; }

/* ==========================================================================
   13. DEMO & SETUP WIZARD
   ========================================================================== */
.bsp-demo-wizard-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999998; /* INCREASED: Extremely high z-index to overlay everything */
    display: none; /* Shown by JS */
}

.bsp-demo-wizard-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    height: 90%;
    max-height: 600px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    z-index: 9999999; /* INCREASED: Must be higher than the overlay */
    display: none; /* Shown by JS */
    flex-direction: row;
    overflow: hidden;
}

.bsp-demo-progress-sidebar {
    width: 220px; /* Slightly wider */
    background-color: #f0f2f5;
    padding: 20px;
    border-right: 1px solid #d9d9d9;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.bsp-demo-progress-sidebar h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.2em;
    color: #333;
}

.bsp-demo-progress-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bsp-demo-progress-sidebar li {
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 5px;
    font-weight: 500;
    color: #555;
    transition: background-color 0.2s, color 0.2s, opacity 0.2s;
    position: relative;
    padding-left: 35px; /* Space for icon */
}

.bsp-demo-progress-sidebar li .bsp-step-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.3s;
}
.bsp-demo-progress-sidebar li .fa-check {
    color: #4CAF50;
    opacity: 0;
}
.bsp-demo-progress-sidebar li .fa-circle-notch {
    color: #0073aa;
    opacity: 0;
}

.bsp-demo-progress-sidebar li.bsp-demo-step-active {
    background-color: #e6f7ff;
    color: #0073aa;
    font-weight: bold;
}
.bsp-demo-progress-sidebar li.bsp-demo-step-active .fa-circle-notch {
    opacity: 1;
}

.bsp-demo-progress-sidebar li.bsp-demo-step-completed {
    background-color: transparent;
    color: #3f6600;
    font-weight: normal;
    text-decoration: line-through;
    opacity: 0.7;
}
.bsp-demo-progress-sidebar li.bsp-demo-step-completed .fa-check {
    opacity: 1;
}
.bsp-demo-progress-sidebar li.bsp-demo-step-completed .fa-circle-notch {
    opacity: 0;
}


.bsp-demo-content-area {
    flex-grow: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
}

.bsp-demo-step-content {
    display: none; /* JS shows the active one */
}
.bsp-demo-step-content.active {
    display: block;
}

.bsp-demo-step-content h2 {
    margin-top: 0;
    color: #0073aa;
}
.bsp-demo-step-content p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #333;
    max-width: 60ch;
}
.bsp-demo-step-content .bsp-demo-image-wrapper {
    text-align: center;
    margin: 20px 0;
    padding: 10px;
    background: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 4px;
}
.bsp-demo-step-content .bsp-demo-image-wrapper img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
}

.bsp-demo-wizard-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.bsp-demo-wizard-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    background-color: #0073aa;
    color: white;
    font-weight: bold;
    transition: background-color 0.2s;
}

.bsp-demo-wizard-button:hover {
    background-color: #005a87;
}
.bsp-demo-wizard-button[disabled] {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Red alert on toolbar icon */
#bsp-toolbar-main-toggle-icon.bsp-needs-setup::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    border: 2px solid white;
    animation: bspPulseRed 1.5s infinite;
}

@keyframes bspPulseRed {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

/* Mic visualizer */
.bsp-demo-mic-visualizer {
    height: 50px;
    width: 100%;
    max-width: 300px;
    border: 1px solid #ccc;
    background: #f9f9f9;
    margin-top: 15px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1%;
}
.bsp-demo-mic-visualizer .bsp-visualizer-bar {
    width: 5%;
    background: #0073aa;
    height: 0%; /* JS will update this */
    transition: height 0.05s linear;
}

/* Mini-widget inside wizard */
.bsp-demo-practice-widget {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fafafa;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Share existing widget styles for consistency */
.bsp-demo-practice-widget .bsp-record-button-adhoc,
.bsp-demo-practice-widget .bsp-pronunciation-widget-adhoc,
.bsp-demo-practice-widget .bsp-phrase-text-adhoc,
.bsp-demo-practice-widget .bsp-feedback-placeholder-adhoc {
    font-size: 1.2em; /* Make it a bit bigger for the demo */
}

.bsp-demo-feedback-text {
    margin-top: 10px;
    font-style: italic;
    color: #0073aa;
}

/* --- Styles for Demo Wizard Close Button --- */
.bsp-demo-wizard-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8em;
    color: #999;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    z-index: 10; /* Above content, below modal */
    transition: color 0.2s, transform 0.2s;
}

.bsp-demo-wizard-close-btn:hover {
    color: #333;
    transform: scale(1.1);
}

/* --- Styles for Admin Clear Settings Button in Toolbar --- */
#bsp-clear-local-settings-btn {
    width: 100%;
    background-color: #fce8e6 !important; /* Light red */
    border-color: #f7b7b2 !important;
    color: #a50e04 !important; /* Dark red text */
    margin-top: 10px;
    text-align: center;
    justify-content: center;
}

#bsp-clear-local-settings-btn:hover {
    background-color: #f9d3cf !important;
    border-color: #f0928a !important;
    color: #790800 !important;
}

#bsp-clear-local-settings-btn i {
    margin-right: 8px;
}

/* ==========================================================================
   14. API Feedback UI (Badge + Modal)
   ========================================================================== */

/* Inline percentage badge (small circle next to phrase) */

.bsp-acc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 2em;
  padding: 1px 6px; /* Compact padding */
  border-radius: 12px; /* Pill shape */
  font-size: 0.75em; /* Smaller font to fit in text line */
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  
  /* Ghost Style */
  background-color: transparent !important; 
  border: 1px solid currentColor; /* Border matches the text color */
  color: #2e7d32; /* Default Green */
  
  cursor: pointer;
  margin-left: 0.35em;
  user-select: none;
  vertical-align: middle; /* Aligns perfectly with text */
}

/* Color Variants (Applied to text/border via currentColor) */
.bsp-acc-badge.bsp-acc-yellow { color: #f9a825; }
.bsp-acc-badge.bsp-acc-red { color: #c62828; }

/* Reset font adjustments from old circular style */
.bsp-acc-badge[data-chars] { font-size: 0.75em; }

.bsp-api-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    z-index: 10050; display: none;
}
.bsp-api-modal {
    position: fixed; z-index:10051; 
    top: 8%; left: 50%; /* Fixed top position */
    transform: translateX(-50%); 
    width: min(680px, 95vw);
    
    height: auto;
    max-height: 85vh;
    min-height: 400px;  /* Don't get too small on tiny screens */
    
    background: #fff; color:#333; border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
    padding: 15px;
    
    display: flex !important; 
    flex-direction: column;
}

/* The Scrollable Middle Area */
.bsp-modal-main-content {
    flex: 0 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding-right: 5px;
    margin-bottom: 5px; /* Reduced margin */
}

/* Prevent Header/Footer from shrinking */
.bsp-modal-header, 
.bsp-modal-stats-bar, 
.bsp-modal-footer {
    flex-shrink: 0; 
}

.bsp-api-modal header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.bsp-api-modal header h3 { margin: 0; font-size: 1.1rem; }
.bsp-api-modal header button {
    background:none;border:none;color:#c00;font-size:1.1rem;cursor:pointer;
}
.bsp-api-modal .bsp-score {
    font-size: 1.6rem; font-weight: 800; margin: 4px 0 10px 0;
}
.bsp-api-modal .bsp-phoneme-line { margin: 8px 0; line-height: 1.8; }
.bsp-api-modal .bsp-phoneme-line .ok    { color: #2e7d32; }
.bsp-api-modal .bsp-phoneme-line .sub   { color: #f9a825; }
.bsp-api-modal .bsp-phoneme-line .bad   { color: #c62828; }
.bsp-api-modal footer {
    margin-top: 12px; display:flex; gap:8px; justify-content:flex-end;
}
.bsp-api-modal footer .button { padding: 6px 12px; border-radius: 4px; }

/* --- NEW MODAL STYLES (Brand Yellow #FBC014) --- */
.bsp-modal-header {
    display: flex;
    flex-wrap: wrap; 
    align-items: baseline;
    justify-content: flex-start !important; /* Force Left Alignment override */
    gap: 12px;
    margin-bottom: 10px;
    padding-right: 0;
    position: relative;
    z-index: 50; 
    background: #fff; 
}

.bsp-modal-header-left {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
}

.bsp-modal-header-right {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.bsp-modal-target-phrase {
    font-size: 1.6em;
    margin: 0;
    color: #222;
    font-weight: 700;
    line-height: 1.2;
}

#bsp-target-ipa-inline {
    font-family: "Lucida Sans Unicode", Arial, sans-serif;
    font-size: 1.1em;
    color: #888; /* Slightly lighter gray */
    font-weight: 400;
    margin-left: 0;
    margin-top: 0.4em; /* Align visually with target phrase */
}

/* Speaker Playing Animation */
.bsp-micro-btn.is-playing {
    color: #0073aa; /* Blue active state */
    background-color: #f0f8ff;
    border-color: #0073aa;
    animation: bspSpeakerPulse 0.8s infinite;
}
@keyframes bspSpeakerPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* The Top-Right X (Subtle) */
.bsp-header-close {
    position: absolute;
    top: -5px;
    right: -5px;
    color: #999; /* Gray by default, less aggressive */
    font-size: 1.4rem;
    line-height: 1;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}
.bsp-header-close:hover { color: #d32f2f; }

.bsp-modal-header-right .bsp-header-close {
    position: static;
    padding: 6px;
}

/* Lighter Brand Buttons */
.bsp-btn-brand {
    background-color: #FBC014;
    color: #000;
    border: none;
    border-radius: 4px;
    padding: 10px 24px;
    font-weight: 600; /* Reduced from 700 for lighter feel */
    font-size: 0.9em;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bsp-btn-brand:hover { background-color: #e0ac02; }

/* Horizontal Stats Bar */
.bsp-modal-stats-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
    color: #555;
}
.bsp-modal-stats-bar .bsp-modal-mastery-analytics,
.bsp-modal-stats-bar .mastery-stats-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Main Content Stack */
.bsp-modal-body-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 10px;
}

/* Top Row: Timeline + Score */
.bsp-modal-top-row {
    display: flex;
    gap: 15px;
    align-items: stretch; /* Same height */
}

/* Panels */
.bsp-modal-panel {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

/* Timeline Panel (Left, Grows) */
.bsp-modal-panel.timeline-panel {
    flex: 1;
    min-width: 0; /* Prevent flex overflow */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Score Panel (Right, Compact, Fixed Width) */
.bsp-modal-panel.score-panel {
    flex: 0 0 160px; /* Fixed width for stability */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fafafa;
    padding: 10px;
}

/* Full Width Inspector (Bottom) */
.bsp-word-inspector {
    width: 100%;
    margin-top: 0; /* Spacing handled by parent gap */
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #fafafa;
    padding: 12px;
    box-sizing: border-box;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .bsp-modal-top-row { flex-direction: column-reverse; } /* Score on top on mobile */
    .bsp-modal-panel.score-panel { flex: 0 0 auto; width: 100%; flex-direction: row; justify-content: space-around; }
    .bsp-score-ring { --ring-size: 60px; margin-bottom: 0; margin-right: 10px; }
}

/* Left Panel Content */
.bsp-wordchips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.bsp-heard-label {
    font-size: 0.8em;
    text-transform: uppercase;
    color: #999;
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
}
#bsp-modal-heard-text-detailed {
    font-size: 1.2em;
    line-height: 1.4;
    color: #333;
}
/* Heard word diff styling */
.bsp-word-diff.misheard {
    color: #c62828;
    text-decoration: line-through;
    text-decoration-color: rgba(198,40,40,0.4);
    margin-right: 4px;
}
.bsp-word-diff.correct {
    color: #2e7d32;
    margin-right: 4px;
}

/* Footer Controls (3-Column Layout) */
.bsp-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Left, Center, Right */
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
.bsp-footer-left { display: flex; gap: 10px; flex: 1; justify-content: flex-start; }
.bsp-footer-center { display: flex; justify-content: center; flex: 1; }
.bsp-footer-right { display: flex; justify-content: flex-end; flex: 1; }

/* Brand Buttons */
.bsp-btn-brand {
    background-color: #FBC014; /* Brand Yellow */
    color: #000;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.95em;
    cursor: pointer;
    text-transform: uppercase;
}
.bsp-btn-brand:hover { background-color: #e0ac02; }

.bsp-btn-square {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 6px;
    justify-content: center;
    font-size: 1.2em;
    background-color: #f0f0f0;
    color: #333;
    border: none;
    cursor: pointer;
    display: inline-flex; align-items: center;
}
.bsp-btn-square:hover { background-color: #e0e0e0; }
.bsp-btn-square.active-yellow { background-color: #FBC014; color: #000; }

/* Micro-Practice Zone */
.bsp-micro-practice {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px dashed #ddd;
}
.bsp-micro-label {
    font-size: 0.85em;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
}
.bsp-micro-controls { display: flex; align-items: center; gap: 10px; }
.bsp-micro-btn {
    width: 36px !important; 
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important; /* Force Circle */
    border: 2px solid #FBC014;
    background: #fff;
    color: #000;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1em;
    transition: all 0.2s;
}
.bsp-micro-btn:hover { background: #FBC014; }
.bsp-micro-record.recording { background: #d32f2f; border-color: #d32f2f; color: #fff; animation: bspRecordFlash 1s infinite; }
.bsp-micro-feedback { font-size: 0.9em; color: #555; font-style: italic; }
.bsp-micro-feedback.success { color: #2e7d32; font-weight: bold; font-style: normal; }
.bsp-micro-feedback.fail { color: #c62828; }

/* --- Language Toggle --- */
.bsp-lang-toggle {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.9em;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    margin-right: 15px;
    user-select: none;
}
/* Flag Toggle Styles */
.bsp-lang-flag {
    width: 22px; 
    height: auto; 
    cursor: pointer;
    opacity: 0.4; 
    filter: grayscale(80%);
    transition: all 0.2s ease;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 1px;
}
.bsp-lang-flag:hover {
    opacity: 0.8;
    filter: grayscale(0%);
}
.bsp-lang-flag.active {
    opacity: 1;
    filter: grayscale(0%);
    border-color: #0073aa;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Tips Toolbar (New) */
.bsp-tips-toolbar {
    display: flex; justify-content: flex-end; align-items: center;
    margin-bottom: 10px; font-size: 0.85em; color: #777;
}
.bsp-tips-label { margin-right: 8px; font-weight: normal; }

/* --- Phoneme Report Card --- */
.bsp-inspector-title {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: 10px;
}
.bsp-header-heard {
    font-size: 0.9em; color: #777; font-weight: normal;
    margin-left: 5px;
}
.bsp-header-heard strong { color: #555; font-weight: 600; }

.bsp-inspector-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }

/* Unified Row Style for All Sounds */
.bsp-sound-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 4px 8px 12px; /* Reduced right padding to 4px */
    border-radius: 6px; font-size: 1em;
    background-color: #fff; border: 1px solid #eee;
    min-height: 40px;
}

/* Status Colors */
.bsp-sound-row.correct { background-color: #e8f5e9; border-color: #c8e6c9; }
.bsp-sound-row.incorrect { background-color: #fff5f5; border-color: #ffcdd2; }
.bsp-sound-row.extra { background-color: #e3f2fd; border-color: #90caf9; }
.bsp-sound-row.bsp-v2-score-high {
    background: linear-gradient(90deg, #dff4e4 0%, #eefaf0 100%);
    border-color: #1f7a3a;
}
.bsp-sound-row.bsp-v2-score-mid {
    background: linear-gradient(90deg, #fff1c2 0%, hsl(calc(38 + ((var(--bsp-v2-score, 70) - 70) * 0.74)), 92%, 72%) 100%);
    border-color: hsl(calc(38 + ((var(--bsp-v2-score, 70) - 70) * 0.74)), 84%, 48%);
}
.bsp-sound-row.bsp-v2-score-low {
    background: linear-gradient(90deg, #ffe8e8 0%, #fff5f5 100%);
    border-color: #e38b8b;
}

/* Columns */
.bsp-sr-phoneme { 
    font-family: "Lucida Sans Unicode", Arial, sans-serif; 
    font-weight: 700; width: 40px; flex-shrink: 0;
}
.bsp-sound-row.correct .bsp-sr-phoneme { color: #2e7d32; }
.bsp-sound-row.incorrect .bsp-sr-phoneme { color: #c62828; }
.bsp-sound-row.extra .bsp-sr-phoneme { color: #0d47a1; }
.bsp-v2-sound-row .bsp-sr-phoneme {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    width: 112px;
}
.bsp-v2-score-high .bsp-sr-phoneme { color: #155f2b; }
.bsp-v2-score-mid .bsp-sr-phoneme { color: #8a5a00; }
.bsp-v2-score-low .bsp-sr-phoneme { color: #a32626; }
.bsp-sr-score {
    align-items: center;
    border: 2px solid currentColor;
    border-radius: 999px;
    display: inline-flex;
    font-family: Arial, sans-serif;
    font-size: 0.72em;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
    min-width: 38px;
    padding: 3px 7px;
}
.bsp-v2-score-icon {
    margin-right: 8px;
}

.bsp-sr-tip { flex: 1; font-size: 0.9em; color: #555; line-height: 1.3; }

.bsp-sr-action { flex-shrink: 0; }

/* Minimal Icon Button (Transparent) */
.bsp-icon-btn {
    width: 32px; height: 32px; 
    border-radius: 50%;
    border: 1px solid transparent !important; /* Remove default borders */
    background: transparent !important;       /* Remove yellow background */
    box-shadow: none !important;
    color: #888 !important;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.bsp-icon-btn:hover { 
    color: #fbc014 !important; /* Brand yellow icon */
    transform: scale(1.1);
}
.bsp-icon-btn i { font-size: 1.2em; }

/* --- Deep Dive Overlay --- */
.bsp-deep-dive-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: #fff; z-index: 100; display: flex; flex-direction: column;
    border-radius: 8px; /* Match modal radius */
    overflow: hidden;
    max-height: 100%; /* Ensure it doesn't exceed modal */
}
.bsp-dd-header {
    padding: 12px 20px; background: #f9f9f9; border-bottom: 1px solid #eee;
    display: flex; justify-content: space-between; align-items: center;
}
.bsp-dd-title { margin: 0; font-size: 1.2em; font-weight: 700; color: #333; }
.bsp-dd-close { cursor: pointer; font-size: 1.5em; color: #999; line-height: 1; }
.bsp-dd-close:hover { color: #d32f2f; }

.bsp-dd-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }

/* Media Stage (Video + Image Swap) */
.bsp-dd-media-stage {
    width: 100%; background: #000; border-radius: 8px; overflow: hidden; position: relative;
    aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
}
.bsp-dd-video-frame { width: 100%; height: 100%; object-fit: contain; }
.bsp-dd-image-thumb {
    position: absolute; bottom: 10px; right: 10px;
    width: 80px; height: 80px; border: 2px solid #fff; border-radius: 4px;
    background: #fff; cursor: pointer; object-fit: contain;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5); z-index: 20; transition: transform 0.2s;
}
.bsp-dd-image-thumb:hover { transform: scale(1.05); }

/* Swapped State (Image Big, Video Small) */
.bsp-dd-media-stage.swapped .bsp-dd-video-frame {
    position: absolute; bottom: 10px; right: 10px;
    width: 120px; height: auto; z-index: 20; border: 2px solid #fff; border-radius: 4px;
}
.bsp-dd-media-stage.swapped .bsp-dd-image-thumb {
    position: static; width: 100%; height: 100%; max-height: none;
    border: none; box-shadow: none; object-fit: contain;
}

.bsp-dd-text-content {
    background: #f0f8ff; border-left: 4px solid #0073aa; padding: 15px;
    font-size: 1.1em; line-height: 1.5; color: #333; border-radius: 4px;
}

/* Responsive */
@media (max-width: 700px) {
    .bsp-modal-body-grid { grid-template-columns: 1fr; gap: 15px; }
    
    /* Footer adjustments */
    .bsp-modal-footer { 
        flex-direction: row; /* Keep side-by-side */
        flex-wrap: wrap;     /* Allow wrapping */
        gap: 8px; 
        padding-top: 10px;
        justify-content: center;
    }
    
    .bsp-footer-left, .bsp-footer-center, .bsp-footer-right { 
        width: auto; 
        flex: 1 1 auto; /* Allow growing */
        justify-content: center;
    }

    /* Make main buttons easier to tap */
    .bsp-btn-brand {
        width: 100%; 
        padding: 12px 10px;
        display: flex; justify-content: center;
    }
    
    /* Ensure video overlay fits */
    .bsp-video-wrapper { width: 98%; max-height: 80vh; }
}

/* API-only UI states */
.bsp-mic-status-recording i.fa-stop { color: #c62828; }
.bsp-status-flash {
  font-size: .9em;
  margin-left: .4em;
  vertical-align: baseline;
  animation: bspBlink 1s linear infinite;
}
@keyframes bspBlink { 50% { opacity: .35; } }

/* Inline recording "Cancel" UI */
.bsp-inline-cancel-recording {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.85em;
  color: #555;
  text-decoration: underline;
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  text-transform: none !important;
  vertical-align: baseline;
}
.bsp-inline-cancel-recording:hover {
  color: #222;
}
.bsp-inline-cancelled-message {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.85em;
  color: #666;
  font-style: italic;
  opacity: 1;
  animation: bspFadeOut 2.5s ease-out forwards;
}

@keyframes bspFadeOut {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

.bsp-status-processing { opacity: .9; }


/* ===== BSP API modal (enhanced) ===== */
.bsp-api-modal { max-width: 720px; width: 92%; background: #fff; border-radius: 14px; padding: 18px 20px 16px; box-shadow: 0 18px 45px rgba(0,0,0,.25); }
.bsp-modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; position: relative; }
.bsp-modal-header h3 { margin:0; font-size:18px; }
.bsp-api-close { background: transparent; border: 0; font-size: 18px; cursor: pointer; }

.bsp-top { display:flex; gap:18px; align-items:center; margin: 8px 0 12px; }
.bsp-top-meta { display:flex; flex-direction:column; gap:6px; }
.bsp-headline { font-weight:600; font-size:16px; }

.bsp-score-ring { --size:96px; width:var(--size); height:var(--size); border-radius:50%; background: var(--bsp-ring-bg, conic-gradient(#2e7d32 0,#E6E9EF 0)); display:grid; place-items:center; }
.bsp-score-ring__inner { width: calc(var(--size) - 16px); height: calc(var(--size) - 16px); background:#fff; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:20px; }
.bsp-score-ring--empty .bsp-score-ring__inner { color:#777; }

/* Mini legend (now inside TARGET card) */
.bsp-mini-legend{ display:flex; gap:12px; align-items:center; font-size:12px; color:#4a5568; }
.bsp-modal-target-col .bsp-mini-legend{ margin-top:8px; justify-content:flex-end; }
.bsp-mini-legend .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; }
.bsp-mini-legend .ok{ background:#2e7d32; }
.bsp-mini-legend .mid{ background:#f9a825; }
.bsp-mini-legend .bad{ background:#c62828; }

/* Word inspector card */
.bsp-word-inspector{ margin-top:12px; border:1px solid #e9ecef; border-radius:6px; background:#fafafa; padding:12px; }
.bsp-inspector-title{ display:flex; align-items:center; gap:8px; margin:0 0 6px; font-weight:600; }

/* Color the full percentage chip in the inspector header */
.bsp-inspector-title .bsp-chip{
  display:inline-flex; align-items:center;
  border:1px solid #e2e8f0; border-radius:999px;
  background:#f1f5f9; padding:3px 8px; line-height:1;
}
.bsp-inspector-title .bsp-chip > span{ background:transparent; margin:0; padding:0; }
.bsp-inspector-title .bsp-chip.good{ background:#e0f2e9; border-color:#2e7d32; color:#1B5E20; }
.bsp-inspector-title .bsp-chip.mid{  background:#fff6df; border-color:#f9a825; color:#111; }
.bsp-inspector-title .bsp-chip.bad{  background:#fde8e8; border-color:#c62828; color:#7a1a1a; }

.bsp-inspector-compare{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; align-items:start; margin-bottom:6px; }
.bsp-inspector-compare label{ font-size:12px; color:#6c757d; text-transform:uppercase; letter-spacing:.5px; display:block; margin-bottom:2px; }
.bsp-inspector-col{ display:flex; flex-direction:column; gap:2px; }
.bsp-inspector-word{ font-weight:600; font-size:1.1em; }
.bsp-inspector-ipa{ font-family:"Lucida Sans Unicode", Arial, sans-serif; font-size:1.05em; line-height:1.6; }
.bsp-inspector-hint{ margin-top:8px; font-size:.95em; color:#444; }

.bsp-phoneme-line { font-size:22px; line-height:1.6; margin:0 0 8px; user-select:text; }
.bsp-phon { padding:0 1px; }
.bsp-phon.ok  { color:#2e7d32; text-decoration: underline solid rgba(46,125,50,0.35) 2px; text-underline-offset: 4px; }
.bsp-phon.sub { color:#f9a825; text-decoration: underline dashed rgba(249,168,37,0.55) 2px; text-underline-offset: 4px; }
.bsp-phon.bad { color:#c62828; text-decoration: underline wavy rgba(198,40,40,0.7) 2px; text-underline-offset: 4px; }
.bsp-phoneme-line.pulse { animation: bspPulse 0.35s ease-out 1; }
@keyframes bspPulse { from { transform: scale(1.01); } to { transform: scale(1); } }

.bsp-wordchips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.bsp-chip { border:1px solid #e2e8f0; background:#f8fafc; border-radius:999px; padding:6px 10px; font-size:12px; cursor:pointer; }
.bsp-chip span { background:#e2e8f0; padding:0 6px; border-radius:10px; margin-left:4px; font-weight:600; }
.bsp-chip.good span { background:#e0f2e9; }
.bsp-chip.mid  span { background:#fff6df; }
.bsp-chip.bad  span { background:#fde8e8; }
.bsp-chip.active { outline:2px solid #94a3b8; }

.bsp-heard { margin:10px 0 12px; }

/* Bottom controls: left tools, centered Try Again, right Close */
.bsp-controls{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:10px; margin-top:8px; }
.bsp-controls .left{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-self:start; }
.bsp-controls .center{ justify-self:center; }
.bsp-controls .right{ display:flex; gap:8px; justify-self:end; }
.bsp-api-modal.bsp-failed .bsp-try-again-focused{ animation: bspPulse 1.1s ease-in-out infinite; }
.bsp-controls .ctrl { font-size:12px; color:#4a5568; display:flex; align-items:center; gap:6px; }

.bsp-details { margin-top:10px; }
.bsp-metrics { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:#4a5568; }
.bsp-metrics b { color:#1f2937; }
.bsp-metrics .hint { color:#64748b; }

/* already used for flashing inline status text */
.bsp-status-flash { animation: bspBlink 1s linear infinite; }
@keyframes bspBlink { 50% { opacity: .35; } }

/* BSP API modal placement */
.bsp-api-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 100000;
}
.bsp-api-modal{
  position: fixed;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  z-index: 100001;
}

.bsp-details-title{ margin: 18px 0 8px; font-weight: 600; }
.bsp-metrics{ display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:8px 16px; }
.bsp-metrics .hint{ grid-column: 1/-1; color:#666; font-size:.9em; margin-top:4px; }

/* Modal text safety */
.bsp-api-modal{ color:#111; font:normal 16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.bsp-api-modal *{ color:inherit; }

/* Buttons in the modal */
.bsp-api-modal .button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .9rem;
  border: 0;
  border-radius: 8px;
  background: #f8b400;
  color: #111;
  cursor: pointer;
  font-weight: 600;
}
.bsp-api-modal .btn-plain { background: #eee; }
.bsp-api-modal .button:hover { filter: brightness(.95); }

/* Recording Overlay (Try Again) */
.bsp-modal-recording-state {
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; /* Cover entire modal */
    background: rgba(255, 255, 255, 0.98); 
    z-index: 10; /* Header is z-index 50, so it stays on top. Footer is default, so it gets covered. */
    display: none; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    border-radius: 14px; /* Match modal radius */
    text-align: center;
}

/* Force Flex centering when jQuery sets display: block */
.bsp-modal-recording-state[style*="display: block"] {
    display: flex !important;
}

/* Balanced Microphone */
.bsp-modal-recording-state .bsp-modal-mic-icon { 
    font-size: 4em; 
    margin-bottom: 15px; 
    color: #FBC014; 
    display: block;
    transition: transform 0.2s;
}
.bsp-modal-recording-state .bsp-modal-mic-icon.is-recording {
    color: #d32f2f;
    animation: bspPulseRed 1.5s infinite;
}

.bsp-modal-recording-state .bsp-modal-status-text {
    font-size: 1.3em;
    color: #333;
    margin-bottom: 25px;
    font-weight: 600;
}

.bsp-modal-stop-recording {
    background-color: #FBC014 !important; /* Brand Yellow */
    color: #000 !important;
    border: none !important;
    padding: 12px 30px !important;
    font-size: 1.1em !important;
    border-radius: 4px !important; /* Match other buttons */
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(251, 192, 20, 0.3);
    transition: transform 0.2s;
}
.bsp-modal-stop-recording:hover {
    transform: scale(1.05);
    background-color: #e0ac02 !important;
}

/* Cancel Link Style (Resetting button defaults) */
.bsp-modal-cancel-recording {
    margin-top: 20px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #888 !important;
    font-size: 0.9em !important;
    text-decoration: underline !important;
    cursor: pointer;
    padding: 5px !important;
    font-weight: normal !important;
}
.bsp-modal-cancel-recording:hover { color: #333 !important; }


/* --- Ignore Attempt Button --- */
.bsp-ignore-attempt-container {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
}

.bsp-ignore-attempt-button {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #495057;
    padding: 3px 8px;
    font-size: 0.8em;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.bsp-ignore-attempt-button:hover {
    background-color: #e9ecef;
    color: #212529;
}

.bsp-ignore-countdown {
    font-size: 0.8em;
    margin-left: 5px;
    color: #6c757d;
    font-weight: bold;
    min-width: 15px; /* Reserve space for the number */
}

.bsp-modal-main-content {
    flex: 0 1 auto;
    overflow-y: auto;
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    position: relative; /* CRITICAL: Confines the absolute overlay to this area */
}

/* Top Summary (Mastery Only) */
.bsp-modal-top-summary { display: flex; align-items: center; justify-content: center; padding: 10px; margin-bottom: 15px; border: 1px solid #e0e0e0; border-radius: 6px; background-color: #f9f9f9; }
.bsp-modal-mastery-analytics { display: flex; align-items: center; justify-content: center; gap: 15px; }
.bsp-modal-mastery-analytics .mastery-stars-container { cursor: help; }
.bsp-modal-mastery-analytics .mastery-stars-container .bsp-mastery-stars-display i { font-size: 1.4em; }
.bsp-modal-mastery-analytics .mastery-stats-container { display: flex; gap: 15px; align-items: center; }
.bsp-modal-mastery-analytics .stat-item { display: flex; align-items: center; gap: 5px; font-size: 0.9em; color: #555; cursor: help; }
.bsp-modal-mastery-analytics .stat-item .log-char { font-weight: bold; font-size: 1.2em; margin: 0 1px; }
.bsp-modal-mastery-analytics .stat-item .log-pass { color: #28a745; }
.bsp-modal-mastery-analytics .stat-item .log-fail { color: #dc3545; }
.bsp-modal-mastery-analytics .stat-item .log-other { color: #ffc107; }

.bsp-engine-version-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(80, 87, 94, 0.42);
    border: 1px solid rgba(80, 87, 94, 0.14);
    border-radius: 999px;
    padding: 3px 6px;
    background: rgba(255, 255, 255, 0.36);
    pointer-events: none;
}

/* Prevent stars from stacking vertically */
.bsp-mastery-stars-display {
    white-space: nowrap;
    display: inline-flex;
}

/* Mobile Stats Layout */
@media (max-width: 700px) {
    .bsp-modal-mastery-analytics {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px 12px; /* Vertical gap 6px, Horizontal gap 12px */
        width: 100%;
    }

    /* Unwrap the stats container so children participate in the main grid */
    .mastery-stats-container {
        display: contents;
    }

    /* Row 1 Items (Stars, Attempts, Success) */
    .mastery-stars-container, 
    .mastery-stats-container .stat-item {
        font-size: 0.85em; /* Slightly smaller text for fit */
    }

    /* Row 2 Item (Visual Log) - Force to new full-width row */
    .mastery-stats-container .stat-item:last-child {
        flex-basis: 100%; /* Force line break */
        justify-content: center;
        margin-top: 4px;
        padding-top: 6px;
        border-top: 1px dashed #eee; /* Visual separator */
    }
}

/* Comparison Area */
.bsp-modal-comparison-wrapper { position: relative; flex-grow: 1; }
.bsp-modal-comparison-area { display: flex; gap: 20px; width: 100%; }
.bsp-modal-column { flex: 1; min-width: 0; padding: 15px; border: 1px solid #e9ecef; border-radius: 6px; background-color: #fdfdfd; display: flex; flex-direction: column;}
/* Swap order: HEARD left, badge panel right */
.bsp-modal-heard-col{ order: 1; }
.bsp-result-summary-col{ order: 2; flex: 0 0 220px; max-width: 240px; align-items:center; gap:8px; }
/* Transcript first, larger */
.bsp-modal-heard-col .bsp-modal-phrase-text{ font-size:2em; color:#222; font-weight:500; line-height:1.55; }
/* IPA just below, similar emphasis */
.bsp-modal-heard-col .bsp-modal-ipa-text{ font-family:"Lucida Sans Unicode", Arial, sans-serif; font-size:1.2em; color:#1f1f1f; line-height:1.7; margin-top:4px; }
/* Capsules sit below transcript + IPA */
#bsp-wordchips, #bsp-modal-heard-text-detailed, .bsp-heard-label { display: none !important; }

/* --- NEW TIMELINE UI --- */
#bsp-timeline-container {
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 10px;
    max-height: 228px;
    padding: 10px 2px;
    margin-bottom: 0;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
    scrollbar-width: thin;
    align-content: flex-start;
}

.bsp-timeline-card {
    flex: 0 1 116px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 85px;
    max-width: 150px;
    min-height: 50px;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    position: relative;
}

.bsp-timeline-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: #b0b0b0;
}

.bsp-timeline-card.active {
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0,115,170,0.2);
    transform: translateY(-3px);
}

/* Card States */
.bsp-timeline-card.match {
    background-color: #e8f5e9;
    border-color: #c8e6c9;
    color: #2e7d32;
}
.bsp-timeline-card.match .bsp-card-main {
    font-weight: 700;
    font-size: 1.1em;
}

.bsp-timeline-card.mismatch {
    background-color: #fff;
    border-color: #ffcdd2;
}
.bsp-timeline-card.mismatch .bsp-card-top {
    font-size: 0.85em;
    color: #999;
    text-decoration: line-through;
    margin-bottom: 4px;
}
.bsp-timeline-card.mismatch .bsp-card-bottom {
    font-weight: 700;
    color: #c62828;
    font-size: 1.1em;
}

.bsp-timeline-card.missing {
    border-style: dashed;
    background-color: #f9f9f9;
    opacity: 0.8;
}
.bsp-timeline-card.missing .bsp-card-main {
    color: #aaa;
    font-style: italic;
}
.bsp-timeline-card.missing::after {
    content: "(Missing)";
    display: block;
    font-size: 0.7em;
    color: #c62828;
    margin-top: 4px;
}

.bsp-timeline-card.extra {
    background-color: #e3f2fd; /* Light Blue */
    border-color: #90caf9;
    color: #0d47a1;
}
.bsp-timeline-card.extra::after {
    content: "(Extra)";
    display: block;
    font-size: 0.7em;
    color: #1565c0;
    margin-top: 4px;
    font-weight: normal;
}
.bsp-v2-score-mid .bsp-learn-btn-contrast {
    background: rgba(255,255,255,0.78) !important;
    border-color: #5c3b00 !important;
    color: #3d2b00 !important;
}
.bsp-v2-score-mid .bsp-learn-btn-contrast .fa-graduation-cap {
    color: #3d2b00 !important;
}

.bsp-timeline-card.bsp-v2-card .bsp-card-main {
    display: inline-flex;
    gap: 1px;
}

.bsp-azure-letter {
    display: inline-block;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.bsp-azure-letter.ok {
    color: #2e7d32;
    text-decoration: underline solid rgba(46,125,50,0.45);
}

.bsp-azure-letter.sub {
    color: #b7791f;
    text-decoration: underline dashed rgba(183,121,31,0.65);
}

.bsp-azure-letter.bad {
    color: #c62828;
    text-decoration: underline wavy rgba(198,40,40,0.75);
}

.bsp-grapheme { border-bottom: 2px solid; padding-bottom: 0; font-size: .95em; }
/* Badge panel visuals */
.bsp-left-badge{ display:flex; align-items:center; justify-content:center; min-height:56px; }
.bsp-passfail-expl{ font-size:.75em; color:#444; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.bsp-passfail-label{ font-weight:700; }
.bsp-passfail-expl .bsp-passfail-text{ margin:0; }
.bsp-v2-metric-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}
.bsp-v2-metric-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border-radius: 999px;
    padding: 4px 8px;
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    box-sizing: border-box;
    width: 100%;
    cursor: pointer;
}
.bsp-v2-metric-badge.bsp-badge-centered {
    grid-column: span 2;
    justify-self: center;
    max-width: 120px;
}
.bsp-v2-metric-badge.good { color: #2e7d32; }
.bsp-v2-metric-badge.mid { color: #9a6700; }
.bsp-v2-metric-badge.bad { color: #c62828; }
.bsp-v2-snr-warning {
    color: #8a5a00;
    background: #fff8e5;
    border: 1px solid #f1d58a;
    border-radius: 6px;
    padding: 4px 7px;
    font-size: 11px;
    line-height: 1.3;
    max-width: 170px;
}
.bsp-v2-snr-warning::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    width: 13px;
    height: 13px;
    margin-right: 4px;
    border-radius: 50%;
    background: #f6b400;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}
.bsp-v2-syllable-card {
    gap: 5px;
    min-width: 76px;
}
.bsp-syllable-phonemes {
    display: flex;
    gap: 2px;
    justify-content: center;
    font-size: 0.86em;
}
/* Click affordance for sentence words */
.bsp-word-diff{ cursor: pointer; }

/* Donut Score Ring */
.bsp-score-ring { 
    --pct: 0; 
    --ring-size: 80px; 
    --track-color: #e6e6e6;
    position: relative;
    width: var(--ring-size); 
    height: var(--ring-size); 
    border-radius: 50%; 
    background: conic-gradient(currentColor calc(var(--pct)*1%), var(--track-color) 0); 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
/* The hollow center */
.bsp-score-ring::after {
    content: "";
    position: absolute;
    width: 82%; /* Thickness of ring determined by this */
    height: 82%;
    background-color: #fafafa; /* Matches panel background */
    border-radius: 50%;
    z-index: 1;
}
/* The Text inside */
.bsp-modal-score-badge {
    z-index: 2; /* Sit on top of the hollow center */
    position: relative;
    font-size: 1.8em;
    font-weight: 800;
    color: inherit; /* Inherit color from the ring container */
}

.bsp-score-ring.good{ color:#2e7d32; }
.bsp-score-ring.mid{ color:#f9a825; }
.bsp-score-ring.bad{ color:#c62828; }

/* Stronger Try Again pulse on fail, smoother */
@keyframes bspPulseStrong { 0%{ transform:scale(1.0); box-shadow:0 0 0 0 rgba(198,40,40,.00);} 50%{ transform:scale(1.07); box-shadow:0 0 18px 0 rgba(198,40,40,.30);} 100%{ transform:scale(1.0); box-shadow:0 0 0 0 rgba(198,40,40,.00);} }
.bsp-api-modal.bsp-failed .bsp-try-again-focused{ animation: bspPulseStrong 1.15s cubic-bezier(.22,.61,.36,1) infinite; will-change: transform; transform: translateZ(0); }

.bsp-result-tag{ margin-top:4px; font-weight:800; text-transform:uppercase; font-size:.9em; padding:2px 10px; border-radius:999px; }
.bsp-result-tag.good{ background:#eaf6ec; color:#2e7d32; border:2px solid #2e7d32; }
.bsp-result-tag.bad{ background:#fde8e8; color:#b71c1c; border:2px solid #c62828; }
.bsp-result-tag:not(.good):not(.bad){ background:#e8f1fb; color:#135e96; border:2px solid #2271b1; }

/* Word-level and Grapheme-level Feedback */
#bsp-modal-heard-text-detailed { display: flex; flex-wrap: wrap; gap: 0.32em; }
.bsp-word-diff { display: inline-block; cursor: pointer; }
.bsp-modal-heard-col .bsp-grapheme { border-bottom: 2px solid; padding-bottom: 0; font-size: .80em; }
.bsp-grapheme { border-bottom: 2px solid; padding-bottom: 0; font-size: 1em; }
.bsp-grapheme.diff-m { border-color: #4CAF50; color: #1B5E20; }
.bsp-grapheme.diff-s { border-color: #FFC107; color: #E65100; }
.bsp-grapheme.diff-d { border-color: #F44336; color: #B71C1C; }

/* Phoneme (IPA) Feedback */
#bsp-modal-heard-ipa .bsp-phon { padding: 0 1px; }
#bsp-modal-heard-ipa .bsp-phon.ok  { color:#2e7d32; text-decoration: underline solid rgba(46,125,50,0.35) 2px; text-underline-offset: 4px; }
#bsp-modal-heard-ipa .bsp-phon.sub { color:#f9a825; text-decoration: underline dashed rgba(249,168,37,0.55) 2px; text-underline-offset: 4px; }
#bsp-modal-heard-ipa .bsp-phon.bad { color:#c62828; text-decoration: underline wavy rgba(198,40,40,0.7) 2px; text-underline-offset: 4px; }
#bsp-modal-heard-ipa .bsp-phon.ins { color:#007bff; font-style: italic; }

/* Controls & Button Feedback */
.bsp-controls .left .button, .bsp-controls .left .btn-plain {
    width: 44px; height: 44px; /* Fixed size */
    padding: 0;
    font-size: 1.2em; /* Icon size */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bsp-controls .button.is-loading { opacity: 0.7; cursor: wait; }
.bsp-btn-spinner { font-size: 1em; } /* Spinner size relative to button font size */

.bsp-live-stat-icon { color: #777; margin-right: 4px; font-size: 0.9em; }
.bsp-live-stat-group { margin-right: 15px; display: inline-flex; align-items: center; color: #555; }
.bsp-live-hist-icon { margin: 0 2px; font-size: 1.1em; }
.bsp-live-hist-pass { color: #4CAF50; }
.bsp-live-hist-fail { color: #F44336; }
.bsp-phrase-text-adhoc.bsp-unscripted-prompt {
    cursor: default;
}