/* In index.html, inside the main <style> tag */
    /* In index.html, inside the main <style> tag, BEFORE any other rules */

    /* ==========================================================================
   THEME SYSTEM (CSS VARIABLES)
   ========================================================================== */

    /* Default Theme: DARK */
    .app-container {
      --bg-primary: #18191A;
      /* Main app background */
      --bg-secondary: #242526;
      /* Panel backgrounds (chat, etc.) */
      --bg-tertiary: #3A3B3C;
      /* Input fields, hover states */
      --bg-quaternary: #4a4b4d;
      /* Active buttons, sliders */
      --bg-accent: rgba(167, 139, 250, 0.2);
      /* Accent color for selections */
      --bg-accent-solid: #A78BFA;
      --text-primary: #E4E6EB;
      /* Main text */
      --text-secondary: #B0B3B8;
      /* Subdued text, placeholders */
      --text-accent: #c5affd;
      /* Accent text color */
      --border-color: rgba(255, 255, 255, 0.15);
      --shadow-color: rgba(0, 0, 0, 0.5);
      --modal-glass-bg: rgba(40, 42, 58, 0.65);
      --modal-sidebar-bg: rgba(28, 27, 34, 0.4);

      background-color: var(--bg-primary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
    }







    /* In index.html, inside the main <style> tag */


    .slider-container {
      display: flex;
      align-items: center;
      gap: 15px;
      color: #b0a8c9;
      font-size: 0.9rem;
    }





    .styled-slider::-moz-range-thumb {
      width: 22px;
      height: 22px;
      background: #fbc2eb;
      cursor: pointer;
      border-radius: 50%;
      border: 3px solid #1d1832;
      box-shadow: 0 0 5px rgba(251, 194, 235, 0.5);
      transition: transform 0.2s ease;
    }

    .styled-slider:hover::-webkit-slider-thumb,
    .styled-slider:hover::-moz-range-thumb {
      transform: scale(1.1);
    }




    /* Responsive styles for 3-col toggle */
    @media (max-width: 600px) {
      .thinking-style-toggle.three-col {
        grid-template-columns: 1fr;
        /* Stack vertically on small screens */
      }
    }

    .secondary-cta {
      background: rgba(255, 255, 255, 0.12) !important;
      color: #D0D0D8 !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      box-shadow: none !important;
    }

    .secondary-cta:hover {
      background: rgba(255, 255, 255, 0.2) !important;
      color: #FFFFFF !important;
      transform: translateY(-2px) !important;
    }

    .modal-backdrop:not(.hidden) .settings-modal {
      transform: scale(1);
      opacity: 1;
    }


    .settings-category-btn {
      width: 100%;
      padding: 0 16px;
      height: 38px;
      /* Consistent, taller height */
      display: flex;
      align-items: center;
      gap: 14px;
      border: none;
      background-color: transparent;
      color: #b5b5bc;
      /* Default text color */
      border-radius: 10px;
      /* Softer radius */
      font-size: 15px;
      font-weight: 500;
      text-align: left;
      cursor: pointer;
      outline: none;
      /* Remove default focus outline */
      /* Smooth transitions for hover and active states */
      transition: background-color 0.1s ease-out, color 0.1s ease-out;
    }


    /* Theme-agnostic data attributes for easy JS/CSS interaction */
    .app-container[data-theme='light'] {
      /* Define light theme variables or direct styles here */
      background-color: #f0f2f5;
      color: #1c1e21;
    }

    .app-container[data-theme='dark'] {
      /* Define dark theme variables or direct styles here */
      background-color: #121212;
      color: #f0f0f0;
    }


    @keyframes ripple {
      0% {
        transform: scale(1);
        opacity: 0.8;
      }

      100% {
        transform: scale(1.6);
        opacity: 0;
      }
    }

    @keyframes orbit-lights {
      0% {
        transform: rotate(0deg);
        opacity: 0;
      }

      20% {
        opacity: 0.7;
      }

      /* Fade in */
      80% {
        opacity: 0.7;
      }

      /* Hold */
      100% {
        transform: rotate(360deg);
        opacity: 0;
      }

      /* Rotate and fade out */
    }


    /* --- START: Corrected Responsive styles for PFP Animation --- */
    @media (max-width: 480px) {
      #pfp-animation-container {
        width: 100px;
        height: 100px;
      }

      #welcomeUserPfp {
        width: 85px;
        height: 85px;
      }

      /* Adjusts the orbiting lights for the smaller PFP size on mobile */
      #pfp-animation-container::after {
        box-shadow:
          50px 0px 8px -6px white,
          /* Right satellite */
          -35px 38px 8px -6px white,
          /* Bottom-left satellite */
          23px -46px 8px -6px white;
        /* Top-right satellite */
      }
    }

    /* --- END: Corrected Responsive styles for PFP Animation --- */


    @media (max-width: 768px) {

      /*
       * This is the fix. On smaller screens, when the tools pane is hidden
       * (which adds the 'centered-chat' class), we override the default 50%
       * width to make the input area much wider and more usable, as requested.
       */
      .chat-container.centered-chat .chat-input-area {
        width: 90%;
        max-width: none;
        /* Allows the input to use the full 90% width */
      }
    }





    @media (max-width: 480px) {
      #pfp-animation-container {
        width: 100px;
        height: 100px;
      }

      #welcomeUserPfp {
        width: 85px;
        height: 85px;
      }

      .personalized-greeting {
        font-size: 2rem;
      }
    }



    .gradient-text {
      font-size: clamp(1.8rem, 5vw, 2.5rem);
      margin-bottom: 5px;
      text-align: center;
    }


    .gradient-text {
      font-size: clamp(1.8rem, 5vw, 2.5rem);
      margin-bottom: 5px;
      text-align: center;
    }

    .subtitle {
      font-size: clamp(0.95rem, 2.5vw, 1.1rem);
      margin-bottom: 15px;
      max-width: 550px;
      text-align: center;
      color: #c5c5c5;
    }

    @keyframes fadeInUp {
      from {
        transform: translateY(30px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .fade-in-up {
      animation: fadeInUp 0.7s ease-out forwards;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(192, 162, 247, 0.5);
      }

      70% {
        transform: scale(1.1);
        box-shadow: 0 0 20px 30px rgba(192, 162, 247, 0);
      }

      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(192, 162, 247, 0);
      }
    }


    .cta-button {
      background: linear-gradient(145deg, #2A273D 0%, #3D3953 100%);
      color: #EFEBF5;
      border: 1px solid rgba(179, 157, 219, 0.1);
      border-radius: 20px;

      padding: 13px 32px;
      font-size: 1.05rem;
      font-weight: 500;
      letter-spacing: 0.2px;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 10px;

      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0px rgba(255, 255, 255, 0.05);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      cursor: pointer;
    }

    .cta-button:not(:disabled):hover {
      background: linear-gradient(145deg, #35314D 0%, #4A4565 100%);
      border-color: rgba(179, 157, 219, 0.25);
      color: #FFFFFF;

      transform: translateY(-3px) scale(1.01);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(179, 157, 219, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .cta-button:disabled {
      background: #3D3F4C;
      color: rgba(232, 234, 237, 0.4);
      border-color: rgba(255, 255, 255, 0.08);
      cursor: not-allowed;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
      transform: none;
      text-shadow: none;
    }

    .cta-button i {
      font-size: 1.3rem;
      transition: transform 0.3s ease, color 0.3s ease;
      color: inherit;
    }

    .cta-button:not(:disabled):hover i:last-child {
      transform: translateX(4px);
    }


    .modal-backdrop {
      z-index: 5500;
    }



    #googleSignInBtnWelcome.google-button span {
      position: relative;
      z-index: 2;
    }

    #googleSignInBtnWelcome.google-button i {
      position: relative;
      z-index: 2;
    }

    #googleSignInBtnWelcome.google-button i.bx-loader-alt {
      color: #f0f0f0;
    }

    @media (max-width: 768px) {
      .gradient-text {
        font-size: 2.3rem;
      }

      .subtitle {
        font-size: 1.1rem;
        margin-bottom: 25px;
      }

      .step-content {
        padding: 30px 30px;
        width: 95%;
      }

      .cta-button {
        padding: 12px 30px;
        font-size: 1rem;
      }

      .fancy-checkbox {
        gap: 12px;
      }

      .checkbox-label-text {
        font-size: 0.95rem;
      }
    }

    @media (max-width: 480px) {
      .gradient-text {
        font-size: 2rem;
      }

      .subtitle {
        font-size: 1rem;
        margin-bottom: 20px;
      }

      .step-content {
        padding: 25px 20px;
      }

      .agreement-checkboxes {
        margin-bottom: 25px;
        gap: 15px;
      }

      .fancy-checkbox {
        gap: 10px;
      }

      .checkbox-label-text {
        font-size: 0.9rem;
      }

      .cta-button {
        padding: 11px 25px;
        font-size: 0.95rem;
      }

      .pulse-icon {
        font-size: 4rem;
      }

      .interlude-text {
        font-size: 1.3rem;
      }
    }

    .close-preview-button {
      position: absolute;
      top: -40px;
      right: -10px;
      background: #fff;
      border: 1px solid #fff;
      border-radius: 50%;
      width: 35px;
      height: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 20px;
      color: #000;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }

    #pdfViewerTool {
      display: none;
      width: 100%;
      height: 100%;
      background-color: #282c34;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    #pdfAnnotationCanvas {
      z-index: 10;
      cursor: crosshair;
    }


    #pdfAnnotationCanvas {
      touch-action: none;
    }


    math-field[read-only] {
      border: none;
      background-color: transparent;
      color: white;
    }


    html,
    body {
      margin: 0;
      padding: 0;
      font-family: "Segoe UI", Roboto, Arial, sans-serif;
      background-color: #121212;
      color: #f0f0f0;
      font-size: 16px;
      /* --- ADD THESE TWO LINES --- */
      height: 100%;
      overflow: hidden;
    }


    ::selection {
      background-color: rgba(167, 139, 250, 0.45);
      color: #FFFFFF;
    }

    ::-moz-selection {
      background-color: rgba(167, 139, 250, 0.45);
      color: #FFFFFF;
    }

    .insert-selection-icon {
      position: absolute;
      background: linear-gradient(145deg, rgba(55, 50, 80, 0.97), rgba(40, 35, 60, 0.97));
      color: #d1c4e9;
      padding: 8px;
      border-radius: 50%;
      cursor: pointer;
      z-index: 10000;
      font-size: 18px;
      border: 1px solid rgba(170, 150, 200, 0.5);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
      transition: opacity 0.2s ease-out, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      opacity: 0;
      transform: translateY(8px) scale(0.9);
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .insert-selection-icon.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .insert-selection-icon:hover {
      background: linear-gradient(145deg, rgba(65, 60, 90, 0.98), rgba(50, 45, 70, 0.98));
      transform: translateY(-3px) scale(1.15);
      color: #f0eaff;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
    }


    .app-container {
      display: flex;
      height: 100vh;
      width: 100%;
    }


    .chat-container {
      padding: 20px 0px 20px 20px;
      position: relative;
      /* FIX: Add these two properties */
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      /* This prevents padding from adding to the width */
    }

    .tools-container {
      padding: 20px;
      border-left: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
    }

    @media (max-width: 600px) {
      .tools-container {
        display: none;
      }

      .chat-container {
        width: 100%;
        /* Ensure padding is consistent on mobile */
        padding: 20px;
        box-sizing: border-box;
      }



      /* This ensures the chat messages also align with the wider input area */
      .chat-container.centered-chat .chat-messages {
        display: grid;
        /* --- THE FIX --- */
        /* This changes the grid from 65% to 90% to match the input bar */
        grid-template-columns: minmax(0, 5%) minmax(0, 90%) minmax(0, 5%);
        padding-left: 0;
        padding-right: 0;
      }

      .chat-container.centered-chat .chat-messages>* {
        grid-column: 2;
      }
    }

    .chat-message {
      position: relative;
    }

    .icon-container {
      position: absolute;
      left: 9%;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .modal-backdrop:not(.hidden) .file-upload-modal-content {
      transform: scale(1) translateY(0px);
      opacity: 1;
    }

    .icon-container:hover .response-timer {
      display: inline-block;
    }


    #annotationToolbarPreview input[type="color"]::-moz-color-swatch {
      border: none;
      border-radius: 50%;
    }

    .flashcard-front {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      overflow: hidden;
    }


    .flashcard-face .inline-math {
      display: inline;
      vertical-align: baseline;
    }



    .flashcard-back {
      background: linear-gradient(145deg, #423e5d, #302d49);
      color: #e0dcea;
      transform: rotateY(180deg);
    }


    .chat-message.ai .message-content {
      font-family: "Rubik", sans-serif;
      margin-bottom: 5px;

      font-size: 17px;
      line-height: 1.65;
      color: #e1e1e6;
      font-weight: 400;
      letter-spacing: 0.2px;

      padding-left: 10px;
    }


    .chat-message.ai .icon-container {
      display: flex;
      align-items: center;
      gap: 4px;
      width: fit-content;

      position: absolute;
      bottom: 5px;
      left: 60px;

      opacity: 0;
      visibility: hidden;
      transform: translateY(5px);

      transition: opacity 0.2s ease-in-out,
        transform 0.2s ease-in-out,
        visibility 0s linear 0.2s;
    }

    .chat-message:hover .icon-container {
      opacity: 1;
    }

    .hidden {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translate(-50%, -60%) !important;
    }

    @keyframes fadeInWrapper {
      0% {
        opacity: 0;
        transform: translate(-50%, -60%);
      }

      100% {
        opacity: 1;
        transform: translate(-50%, -50%);
      }
    }

    @media (max-width: 600px) {
      #welcomeHeader {
        font-size: 26px;
      }

      .welcome-modal {
        max-width: 340px;
        padding: 16px;
      }

      .welcome-modal h2 {
        font-size: 20px;
      }
    }

    .chat-message.ai {
      flex-direction: row;
      align-items: flex-start;
    }

    .open-grading-view-button-container {
      background-color: rgba(60, 60, 75, 0.7);
      border: 1px solid rgba(90, 90, 110, 0.5);
      border-radius: 8px;
      padding: 12px 18px;
      margin-top: 12px;
      max-width: 300px;
      width: fit-content;
      display: flex;
      justify-content: center;
      animation: fadeInGradingLoader 0.3s ease-out;
    }

    .chat-message.ai .message-content {
      font-family: "Rubik", sans-serif;

      font-size: 17px;
      line-height: 1.65;
      color: #e1e1e6;
      font-weight: 400;
      letter-spacing: 0.2px;

      padding-left: 10px;
    }

    .icon-container {
      position: absolute;
      display: flex;
      gap: 8px;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .user .icon-container {
      top: 50%;
      left: -30px;
      transform: translateY(-50%);
    }

    .icon-container i {
      cursor: pointer;
      font-size: 20px;
      color: #f0f0f0;
    }


    @keyframes purpleSparkle {
      0% {
        box-shadow: 0 0 8px 2px rgba(106, 13, 173, 0.8);
        transform: scale(1);
      }

      40% {
        box-shadow: 0 0 16px 4px rgba(179, 157, 219, 0.4);
        transform: scale(1);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(179, 157, 219, 0);
        transform: scale(1);
      }
    }



































    @keyframes shake {

      0%,
      100% {
        transform: translateX(0);
      }

      25% {
        transform: translateX(-5px);
      }

      50% {
        transform: translateX(5px);
      }

      75% {
        transform: translateX(-3px);
      }
    }













    .app-container {
      position: relative;
    }
























    /* --- START: CORRECTED CHAT MESSAGE LAYOUT --- */





    /* This media query now correctly OVERRIDES the base rule on smaller screens */
    @media (max-width: 768px) {
      .chat-container.centered-chat .chat-messages {
        /* This 90% width will now apply correctly */
        grid-template-columns: minmax(0, 5%) minmax(0, 90%) minmax(0, 5%);
        padding-left: 0;
        padding-right: 0;
      }

      /* --- START: Hide AI Avatar on Small Screens --- */

      /* On screens 600px or less, hide the AI avatar */
      .chat-message.ai .avatar {
        display: none;
      }

      /* Adjust message content padding to align to the left edge */
      .chat-message.ai .message-content {
        padding-left: 0;
        max-width: 100%;
        /* Allow the message bubble to take the full width */
      }

      /* --- END: Hide AI Avatar on Small Screens --- */
      /* --- START: Responsive Input Icons for Extended Pane --- */
      .app-container.tools-extended .input-buttons {
        gap: 4px;
        /* Reduce space between left-side icons */
      }

      .app-container.tools-extended .chat-icon-btn {
        font-size: 22px;
        /* Shrink all icons slightly */
      }

      .app-container.tools-extended .chat-mode-toggle .chat-mode-option {
        padding: 6px 10px;
        /* Reduce padding inside the learn/answer toggle */
        font-size: 20px;
        /* Shrink the icons inside the toggle */
      }

      /* --- END: Responsive Input Icons for Extended Pane --- */
      /* --- START: Align Icons on Small Screens --- */



      /* --- END: Align Icons on Small Screens --- */
    }

    /* --- END: CORRECTED CHAT MESSAGE LAYOUT --- */

    /* --- START: Hide AI Avatar on Pane Extend (Corrected) --- */
    .app-container.tools-extended .chat-message.ai .avatar {
      display: none;
    }

    .app-container.tools-extended .chat-message.ai .message-content {
      padding-left: 0;
      /* Removes the space left by the avatar */
      margin-left: 5%;
      /* Indents the message bubble from the left edge */
      max-width: 90%;
      /* Overrides the default width, allowing it to be much wider */
    }

    .app-container.tools-extended .chat-message.ai .icon-container {
      left: 5%;
      /* Aligns the icons with the new indented position of the message */
    }

    /* --- END: Hide AI Avatar on Pane Extend (Corrected) --- */

    .chat-container.centered-chat .chat-messages>* {
      grid-column: 2;
    }

    .chat-container.centered-chat .chat-input-area {
      width: 90%;
      max-width: none;
      /* Let it use the full 90% */
      margin: 0 auto;
    }

    /* On larger screens, revert to the centered 50% width layout */
    @media (min-width: 769px) {
      .chat-container.centered-chat .chat-input-area {
        width: 50%;
        max-width: 750px;
        /* Re-apply the max-width for very wide screens */
      }
    }

    /* --- END: THE DEFINITIVE FIX --- */


    .fullscreen-preview-modal {
      position: fixed;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }

    .fullscreen-preview-modal.hide {
      display: none;
    }

    .preview-content {
      position: relative;
      max-width: 95vw;
      max-height: 90vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      border: 2px solid transparent;
      background-clip: content-box;
      transition: background-color 0.2s ease-in-out;
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.55);
    }

    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    .chat-message.ai .message-content {
      padding-left: 10px;
    }

    @keyframes cycleMessages {
      0% {
        opacity: 0;
      }

      10% {
        opacity: 1;
      }

      33% {
        opacity: 1;
      }

      43% {
        opacity: 0;
      }

      100% {
        opacity: 0;
      }
    }

    @keyframes shimmerText {
      0% {
        background-position: 150% 0;
      }

      100% {
        background-position: -150% 0;
      }
    }

    #checkWorkTool.zoomed-view {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    #checkWorkTool.zoomed-view .crop-canvas-zoomed {
      display: block;
      max-width: 90%;
      max-height: calc(100% - 120px);
      object-fit: contain;
      border: 2px solid #504a70;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      margin-bottom: 20px;
    }

    .inline-math math-field[read-only]::-webkit-scrollbar {
      display: none !important;
    }

    #fullscreenPreview .preview-content {
      position: relative;
      background: #0a0a0c;
      max-width: 92vw;
      max-height: 92vh;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
    }

    @keyframes fadeInGradingLoader {
      from {
        opacity: 0;
        transform: translateY(5px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes gradingProgressAnimation {
      0% {
        transform: translateX(-100%);
        opacity: 0.7;
      }

      50% {
        transform: translateX(150%);
        opacity: 1;
      }

      100% {
        transform: translateX(-100%);
        opacity: 0.7;
      }
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background-color: rgba(10, 10, 20, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5500;
      opacity: 0;
      transition: opacity 0.3s ease;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    .modal-backdrop:not(.hidden) {
      opacity: 1;
    }

    .modal-backdrop.hidden {
      pointer-events: none;
      transition: opacity 0.3s ease, visibility 0s linear 0.3s;
      visibility: hidden;
    }

    .modal-backdrop:not(.hidden) .schedule-modal {
      transform: scale(1);
      opacity: 1;
    }

    #scheduleSetupModal .modal-progress-container {
      width: auto;
      /* Let margins define the width */
      margin: 15px 40px 40px 0;
      /* top | right | bottom | left */
    }

    /* --- General Modal Styles --- */
    .modal-backdrop.hidden {
      /* Ensure this is defined if not already to hide backdrops */
      opacity: 0 !important;
      pointer-events: none !important;
      visibility: hidden !important;
      transition: opacity 0.3s ease-out, visibility 0s linear 0.3s !important;
    }

    .modal-backdrop:not(.hidden) {
      /* Ensure this is defined */
      opacity: 1 !important;
      transition: opacity 0.3s ease-out !important;
    }

    .schedule-modal {
      background: rgba(30, 28, 48, 0.85);
      /* Dark, slightly transparent base */
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
      border-radius: 18px;
      /* Softer radius */
      color: #E0E0E5;
      /* Light primary text */
      text-align: left;
      position: relative;
      transform: scale(0.95);
      opacity: 0;
      transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.05), opacity 0.3s ease-out;
      overflow: hidden;
      /* Important for consistent rounded corners */
      display: flex;
      /* Make modals flex containers */
      flex-direction: column;
    }

    .modal-backdrop:not(.hidden) .schedule-modal {
      transform: scale(1);
      opacity: 1;
    }

    .schedule-modal-close {
      position: absolute;
      top: 20px;
      right: 25px;
      background: transparent;
      border: none;
      color: #A0A0B0;
      /* Initial subtle color */

      /* Remove sizing to get rid of the circle */
      width: auto;
      height: auto;
      border-radius: 0;

      /* Make the X icon itself larger and the main clickable area */
      font-size: 28px;
      padding: 5px;
      /* Add padding to increase clickable area */

      cursor: pointer;
      transition: color 0.2s ease;
      /* Only transition the color for a subtle effect */
      z-index: 10;
    }

    .schedule-modal-close:hover {
      color: #FFFFFF;
      /* Slightly brighten the X on hover */

      /* Remove background and transform effects from the old hover state */
      background: transparent;
      transform: none;
    }

    /* Center the content within ALL steps */
    .schedule-step-content {
      text-align: center;
    }

    /* Initially hide the main video card grid */
    #schedule-playlist-recommendations.scrollable-playlist-grid {
      display: none;
      /* Hidden until a suggestion is clicked */
    }

    /* Center the H2 title block and nav buttons */
    .schedule-step-content h2 {
      justify-content: center;
    }

    /* --- For Custom Instructions (Step 4) --- */
    .custom-instructions-section {
      margin-top: 25px;
      margin-bottom: 15px;
    }


    .scrollable-playlist-grid::-webkit-scrollbar {
      width: 6px;
    }

    .scrollable-playlist-grid::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.03);
      border-radius: 3px;
    }

    .scrollable-playlist-grid::-webkit-scrollbar-thumb {
      background-color: rgba(167, 139, 250, 0.4);
      border-radius: 3px;
    }

    .schedule-secondary-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      color: #FFFFFF;
    }

    /* 1. Improve Button Interactivity and "Pop" */
    .path-choice-btn {
      background: rgba(255, 255, 255, 0.04);
      /* Lighter than the original 0.05 */
      border: 1px solid rgba(255, 255, 255, 0.1);
      /* Add subtle border */
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      /* Add a base shadow */
    }

    .path-choice-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      /* Lighten on hover */
      border-color: rgba(167, 139, 250, 0.6);
      /* Purple border glow */
      transform: translateY(-4px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(167, 139, 250, 0.2);
      /* Lift shadow + glow */
    }

    /* 2. Enhance Internal Hierarchy */
    .path-choice-btn i {
      font-size: 2.8em;
      /* Make icon bigger */
      color: #A78BFA;
      /* Brand purple */
      margin-bottom: 5px;
    }

    .path-choice-btn span {
      font-size: 1.2em;
      /* Make title bigger */
      font-weight: 600;
      /* Make title bolder */
      color: #EAEAEA;
    }

    .path-choice-btn small {
      font-size: 0.95rem;
      color: #A0A0B0;
      /* Lighter description text */
    }

    .styled-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 8px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      outline: none;
      transition: opacity .2s;
    }

    .styled-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 22px;
      height: 22px;
      background: #fbc2eb;
      cursor: pointer;
      border-radius: 50%;
      border: 3px solid #1d1832;
      box-shadow: 0 0 5px rgba(251, 194, 235, 0.5);
      transition: transform 0.2s ease;
    }

    .styled-slider::-moz-range-thumb {
      width: 22px;
      height: 22px;
      background: #fbc2eb;
      cursor: pointer;
      border-radius: 50%;
      border: 3px solid #1d1832;
      box-shadow: 0 0 5px rgba(251, 194, 235, 0.5);
      transition: transform 0.2s ease;
    }

    .styled-slider:hover::-webkit-slider-thumb,
    .styled-slider:hover::-moz-range-thumb {
      transform: scale(1.1);
    }

    .schedule-view-header-bar {
      display: flex;
      flex-direction: column;
      /* Stack title and new controls row */
      align-items: stretch;
      /* Make children full width initially */
      padding: 18px 25px 15px 25px;
      /* Adjusted padding, slightly less bottom padding */
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(20, 18, 38, 0.7);
      backdrop-filter: blur(15px);
      /* <-- ADD THIS LINE */
      -webkit-backdrop-filter: blur(15px);
      /* <-- AND THIS LINE */
      flex-shrink: 0;
      gap: 10px;
      /* Vertical gap between title and controls row */
    }

    .course-title-display {
      font-size: 1.5rem;
      font-weight: 600;
      color: #FFFFFF;
      margin: 0 0 5px 0;
      /* Add a little bottom margin */
      text-align: center;
      /* Center the title text */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      /* Ensure it spans to allow text-align to work */
    }

    .toggle-view-btn.active {
      color: #1C1B22;
      /* THE FIX: Keep dark text for contrast against the new purple slider */
      transition-delay: 0.05s;
      /* Delay color change slightly to feel more natural */
    }

    .toggle-view-btn {
      background: transparent;
      border: none;
      color: #A0A0B0;
      padding: 7px 18px;
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.25s ease;
      border-radius: 16px;
      /* Rounded individual buttons */
    }

    .toggle-view-btn:hover:not(.active) {
      color: #FFFFFF;
    }

    .course-content-pane {
      flex-grow: 1;
      padding: 30px 35px;
      overflow-y: auto;
      box-sizing: border-box;
      scrollbar-width: thin;
      scrollbar-color: rgba(167, 139, 250, 0.3) rgba(255, 255, 255, 0.05);

      /* --- THE FIX: Changed align-items to flex-start --- */
      display: flex;
      justify-content: center;
      /* Horizontally centers the content */
      align-items: flex-start;
      /* Vertically aligns content to the TOP */
    }

    /* Responsive Adjustments */
    @media (max-width: 1024px) {
      .course-nav-pane {
        width: 280px;
      }

      .course-content-pane {
        padding: 25px 30px;
      }

      .schedule-view-header-bar {
        padding: 15px 20px;
      }

      .course-title-display {
        font-size: 1.3rem;
      }

      .current-date-month-display {
        font-size: 1rem;
        min-width: 130px;
      }

      .toggle-view-btn {
        padding: 6px 15px;
        font-size: 0.85rem;
      }
    }

    @media (max-width: 768px) {
      #scheduleSetupModal {
        max-width: 95%;
      }

      .date-day-picker-container {
        flex-direction: column;
      }

      #scheduleViewModal {
        height: 90vh;
        /* Allow more height on mobile */
      }

      .schedule-view-header-bar {
        flex-direction: column;
        align-items: stretch;
        /* Stretch items */
        gap: 12px;
      }

      .course-title-display {
        text-align: center;
        margin-bottom: 5px;
      }

      .date-nav-controls {
        justify-content: center;
        margin: 5px 0;
      }

      .view-mode-toggle {
        justify-content: center;
      }

      .course-view-container {
        flex-direction: column;
      }

      .course-nav-pane {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        max-height: 40vh;
        /* Limit height for nav on mobile */
        padding: 20px;
      }

      .course-content-pane {
        padding: 20px;
      }

      .calendar-day-cell {
        min-height: 70px;
        padding: 6px;
      }

      .calendar-day-number {
        font-size: 0.75rem;
      }

      .calendar-day-topic {
        font-size: 0.65rem;
        padding: 3px 5px;
      }

      .activity-content-display .activity-title-lg {
        font-size: 1.3rem;
      }

      .activity-content-display .activity-icon-lg {
        font-size: 2rem;
      }
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background-color: rgba(10, 10, 20, 0.65);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5500;
      opacity: 0;
      transition: opacity 0.3s ease-out;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .modal-backdrop:not(.hidden) {
      opacity: 1;
    }

    .modal-backdrop.hidden {
      pointer-events: none;
      transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
      visibility: hidden;
    }

    /* Modal Open Animation */
    .modal-backdrop:not(.hidden) .apps-overview-modal {
      transform: translateY(0px) scale(1);
      opacity: 1;
    }

    .send-section-to-chat-btn {
      background: linear-gradient(145deg, #4b476b 0%, #5e5a80 100%);
      color: #EFEBF5;
      border: 1px solid rgba(179, 157, 219, 0.15);
      border-radius: 25px;

      padding: 11px 28px;
      font-size: 1.0rem;
      font-weight: 500;
      letter-spacing: 0.1px;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 10px;
      margin-left: auto;
      margin-right: auto;

      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 1px 0px rgba(255, 255, 255, 0.04);
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

      transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
      cursor: pointer;
    }

    .send-section-to-chat-btn i {
      font-size: 1.2em;
    }

    .loading-spinner {
      border: 4px solid rgba(255, 255, 255, 0.3);
      margin-top: 13px;
      border-top: 4px solid #fff;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      animation: spin 1s linear infinite;
    }

    /* When the math column is less than 300px wide... */
    @container math-col (max-width: 300px) {
      .notebook-math .katex-display {
        font-size: 0.8em;
        /* ...make the math smaller. */
      }
    }

    /* When the math column gets very narrow (less than 220px)... */
    @container math-col (max-width: 220px) {
      .notebook-math .katex-display {
        font-size: 0.7em;
        /* ...make it even smaller to fit. */
      }
    }

    .spoiler {
      cursor: pointer;
      background: #222;
      border-radius: 8px;
      padding: 8px;
      display: inline-block;
      margin: 4px 0;
    }

    .spoiler:hover {
      background: #333;
    }

    .regenerate-btn {
      margin-left: 8px;
      background: transparent;
      border: none;
      cursor: pointer;
      color: #f0f0f0;
      font-size: 20px;
      pointer-events: auto;
      position: relative;
      z-index: 9999;
    }

    :root {
      --purple: #54519d;
      --overlay-bg: rgba(20, 20, 20, 0.95);
    }

    #loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--overlay-bg);
      backdrop-filter: blur(25px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      opacity: 1;
      transition: opacity 0.5s ease-out;
    }

    .loading-logo {
      width: 120px;
      height: 120px;
      margin-bottom: 25px;
      /* This now plays the intro animation ONCE and holds the final state */
      animation: logo-intro-spin 2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
    }

    /* The original animation for the one-time entrance */
    @keyframes logo-intro-spin {
      0% {
        transform: rotate(-90deg) scale(0.8);
        opacity: 0;
      }

      30% {
        opacity: 1;
      }

      100% {
        /* Ends at a full 360 spin and full size */
        transform: rotate(360deg) scale(1);
        opacity: 1;
      }
    }

    /* NEW: A separate keyframe just for the looping spin */
    @keyframes logo-spin-loop {
      from {
        /* Starts from where the previous one left off (360deg is same as 0deg) */
        transform: rotate(0deg) scale(1);
      }

      to {
        transform: rotate(360deg) scale(1);
      }
    }

    /* NEW: A class to apply the looping animation via JavaScript */
    .loading-logo.spinning-loop {
      /* Overrides the initial animation with the infinite loop */
      animation: logo-spin-loop 2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    }


    .loading-text {
      color: #E4E6EB;
      /* High-contrast off-white */
      font-size: 1.6em;
      font-family: 'Raleway', sans-serif;
      /* Using a project font */
      font-weight: 500;
      letter-spacing: 1px;
      text-shadow: 0 0 10px rgba(228, 230, 235, 0.2);
      /* Subtle glow */
      opacity: 0;
      animation: fadeInText 1.5s 0.5s ease-out forwards;
      /* Delayed fade-in */
    }

    @keyframes fadeInText {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }


    .mini-loader {
      width: 14px;
      height: 14px;
      border: 2px solid rgba(255, 255, 255, 0.2);
      border-top-color: #A0A0B0;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    /* 5. The navigation buttons at the very bottom. */
    #schedule-step-3 .schedule-step-nav {
      margin-top: 20px;
      padding-top: 20px;
    }

    /* --- END: NEW FINAL Playlist Step Layout --- */

    /* 5. The sticky input bar CSS. This remains correct. */
    .custom-playlist-section {
      position: sticky;
      bottom: 20px;
      left: 20px;
      right: 20px;
      z-index: 5;
      background: rgba(45, 43, 68, 0.65);
      backdrop-filter: blur(16px) saturate(180%);
      -webkit-backdrop-filter: blur(16px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      padding: 20px 25px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
      transition: all 0.3s ease;
    }

    .suggestions-container {
      position: absolute;
      top: 51%;
      left: 50%;
      transform: translate(-50%, 0);
      display: flex;
      justify-content: center;
      align-items: stretch;
      gap: 20px;
      width: 90%;
      max-width: 680px;
      padding: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
      z-index: 1;
    }

    .suggestions-container.hidden {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translate(-50%, -15px);
    }

    .suggestions-container.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, 0);
    }

    .suggested-prompt-box {
      width: 190px;
      height: 145px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      padding: 20px;
      background: linear-gradient(145deg, #2a2a2e 0%, #1f1f23 100%);
      border: 1px solid #3c3c41;
      border-radius: 12px;
      color: #c5c5ce;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      box-shadow: 0 5px 12px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
      overflow: hidden;
      position: relative;
    }

    .suggested-prompt-box::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(138, 115, 181, 0.04) 0%, rgba(138, 115, 181, 0) 70%);
      transition: opacity 0.3s ease;
      opacity: 0;
      pointer-events: none;
      z-index: 0;
    }

    .suggested-prompt-box:hover::before {
      opacity: 1;
    }


    .suggested-prompt-box:hover {
      background: linear-gradient(145deg, #313136 0%, #252529 100%);
      border-color: #5a5a63;
      transform: translateY(-6px) scale(1.02);
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.55),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
      color: #e0e0e6;
    }

    .suggested-prompt-box i,
    .suggested-prompt-box span {
      position: relative;
      z-index: 1;
    }

    .suggested-prompt-box i {
      font-size: 26px;
      color: #9d8fba;
      margin-bottom: 0;
      transition: color 0.3s ease, transform 0.3s ease;
    }

    .suggested-prompt-box:hover i {
      color: #b5a7d8;
      transform: scale(1.05) rotate(-3deg);
    }

    /* Base style for the SVG overlay */
    .generating-border-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      /* Allows clicks to pass through to the icon */
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    /* The path element that will be animated */
    .generating-border-path {
      fill: none;
      stroke: #4CAF50;
      /* A nice, satisfying green */
      stroke-width: 2.5;
      /* Subtle but visible line width */
      stroke-linecap: round;
      /* Makes the ends of the line round */

      /* Get the path length from a CSS variable set by JS */
      stroke-dasharray: var(--path-length);
      stroke-dashoffset: var(--path-length);

      /* REMOVED: transform: rotate(-90deg); We don't need this for a rectangle path */
    }


    @keyframes draw-border {
      to {
        stroke-dashoffset: 0;
      }
    }

    .suggested-prompt-box span {
      font-size: 14.5px;
      line-height: 1.5;
      color: inherit;
      margin-top: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      max-height: calc(1.5 * 14.5px * 3);
    }

    .tts-button {
      cursor: pointer;
    }

    .tts-button.speaking {
      color: #68a4ff;
    }

    .tts-button.speaking::before {
      content: "\ea5a";
      font-family: 'Boxicons';
    }


    .chat-message.ai .icon-container {
      gap: 10px;
    }

    .chat-message.ai .icon-container {
      gap: 10px;
    }


    @keyframes pulseVisualizer {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.7);
      }

      70% {
        transform: scale(1);
        box-shadow: 0 0 0 25px rgba(167, 139, 250, 0);
      }

      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(167, 139, 250, 0);
      }
    }

    /* --- Subscription Verification Overlay --- */
    #verification-overlay {
      position: fixed;
      inset: 0;
      background-color: var(--bg-primary, #121212);
      /* Use theme variable with fallback */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9998;
      /* Just below main loading overlay */
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    #verification-overlay.visible {
      opacity: 1;
    }

    .verification-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      text-align: center;
    }

    .verification-content h3 {
      font-size: 1.4rem;
      font-weight: 500;
      color: var(--text-primary, #E4E6EB);
    }

    .modal-backdrop:not(.hidden) .upgrade-modal {
      transform: scale(1);
      opacity: 1;
    }

    @keyframes shimmerFlash {
      0% {
        background-position: 200% center;
      }

      100% {
        background-position: -200% center;
      }
    }

    @keyframes fadeInContent {
      from {
        opacity: 0;
        transform: translateY(-5px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }





    /* --- Voice Mode & Pending Updates Styles --- */

    /* 1. Voice Mode Wrapper Styles */
    .chat-container.voice-mode-active .chat-messages {
      display: none !important;
    }

    .chat-container.voice-mode-active #welcomeWrapper {
      display: none !important;
    }

    .chat-container.voice-mode-active {
      /* Ensure the container fills the height so centering works */
      height: 100vh;
      justify-content: flex-start;
      /* Let children determine position */
      overflow: hidden;
      position: relative;
      padding: 0 !important;
      /* Remove padding to allow full-screen visuals */
    }

    /* 2. Voice Input Area (Bottom Controls) */
    .voice-input-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      padding-bottom: 40px; /* Keeps the buttons in the same spot */
      z-index: 300; /* Must be higher than the scrolling cards */

      /* Stylish blur zone at the bottom */
      background: linear-gradient(to top,
        rgba(10, 10, 12, 1) 0%,
        rgba(10, 10, 12, 0.9) 40%,
        rgba(10, 10, 12, 0) 100%);
      pointer-events: none; /* Allows scrolling cards beneath the blur */
    }

    .voice-controls-wrapper {
      pointer-events: auto; /* Re-enable for the actual buttons */
      display: flex;
      align-items: center;
      gap: 30px;
      background: rgba(40, 40, 55, 0.4);
      padding: 15px 30px;
      border-radius: 50px;
      backdrop-filter: blur(25px) saturate(180%);
      -webkit-backdrop-filter: blur(25px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    }

    .voice-controls-wrapper {
      display: flex;
      align-items: center;
      gap: 30px;
      background: rgba(30, 30, 40, 0.6);
      padding: 15px 30px;
      border-radius: 50px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .voice-action-btn {
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
    }

    .voice-action-btn.secondary {
      width: 50px;
      height: 50px;
      background: rgba(255, 255, 255, 0.1);
      color: #E0E0E5;
      font-size: 22px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .voice-action-btn.secondary:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: scale(1.1);
    }

    .voice-action-btn.primary {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #6a5acd, #443C8B);
      color: white;
      font-size: 36px;
      box-shadow: 0 5px 20px rgba(106, 90, 205, 0.4);
    }

    .voice-action-btn.primary:hover {
      transform: scale(1.05);
    }

    .voice-action-btn.primary.listening {
      background: #ff4b4b;
      animation: pulse-red 2s infinite;
    }

    @keyframes pulse-red {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 75, 75, 0.7);
      }

      70% {
        box-shadow: 0 0 0 15px rgba(255, 75, 75, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(255, 75, 75, 0);
      }
    }

    .voice-status-text {
      color: #A0A0B0;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.5px;
      min-height: 20px;
    }

    /* 3. Main Voice Visuals Container */
    #voiceModeVisuals {
      flex-grow: 1;
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      z-index: 1;
    }




    /* 
       MAIN VISUALS CONTAINER 
       Overlay for voice mode. Indented 20px on both sides to match chat content.
    */
    .voice-mode-visuals {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 20px;
        right: 20px;
        display: flex;
        flex-direction: column; 
        align-items: center; /* Robust Flex Centering */
        padding-bottom: 90px;
        z-index: 50;
        transition: opacity 0.3s ease;
        background: transparent;
        pointer-events: none;
    }

    /* 
       ORB ZONE (Float Animation + Flex Positioning)
    */
    #voice-orb-zone {
        position: relative;
        margin-top: auto;
        margin-bottom: auto;
        width: 140px;
        height: 140px;
        flex-shrink: 0;
        animation: float 6s ease-in-out infinite;
        will-change: transform;
        z-index: 200;
        transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        pointer-events: auto; /* Required for hover/click */
    }

    /* Minimized position when content (cards) is active */
    #voiceModeVisuals.content-active #voice-orb-zone {
        margin-top: 15vh;
        width: 85px;
        height: 85px;
    }

    /* 
       INTERACTION TARGET (JS Volume Scaling)
    */
    .voice-orb {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.15s ease-out; /* Smoother, more organic volume response */
        pointer-events: none;
    }

    .voice-orb.loading .orb-geometry {
        animation: breathe-load 1.2s ease-in-out infinite alternate;
        box-shadow: 
            inset 10px 10px 40px rgba(255, 255, 255, 0.9),
            inset -10px -10px 30px rgba(167, 139, 250, 0.4),
            0 0 60px rgba(167, 139, 250, 0.6);
    }
    
    .voice-orb.loading .light-shifter {
         animation: spin-load 1s linear infinite;
    }

    .voice-orb.listening .orb-geometry {
        box-shadow: 
            inset 10px 10px 40px rgba(255, 255, 255, 0.9),
            inset -10px -10px 30px rgba(167, 139, 250, 0.4),
            0 0 80px rgba(167, 139, 250, 0.8);
        transform: scale(1.05);
    }

    .voice-status-text {
        margin-top: 30px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 20px;
        font-weight: 500;
        text-align: center;
        max-width: 85%;
        min-height: 1.4em;
        opacity: 0;
        transform: translateY(15px);
        transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;
        letter-spacing: -0.015em;
        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        z-index: 210;
    }

    .voice-status-text.active {
        opacity: 1;
        transform: translateY(0);
    }

    .pulse-ring {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: rgba(167, 139, 250, 0.3);
        opacity: 0;
        pointer-events: none;
        z-index: -1;
    }

    .pulse-ring.active {
        animation: orb-pulse 2.5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    }

    @keyframes orb-pulse {
        0% { transform: scale(1); opacity: 0.6; }
        100% { transform: scale(2.8); opacity: 0; }
    }

    /* 
       THE ORB GEOMETRY
       The masking container & Glass Shell.
    */
    .orb-geometry {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        background: #F8F7FF; /* Ultra-pale lavender base */
        
        /* 
           GLASS SHELL SHADOWS (Pure Purple/Lavender):
        */
        box-shadow: 
            inset 10px 10px 40px rgba(255, 255, 255, 0.9),
            inset -10px -10px 30px rgba(196, 181, 253, 0.25), 
            inset -2px -2px 6px rgba(167, 139, 250, 0.4), 
            0px 20px 60px rgba(139, 92, 246, 0.25);
        
        transform: translateZ(0);
        cursor: pointer;
        pointer-events: auto;
        /* EXACT REFERENCE TRANSITION FOR BOUNCE */
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* EXACT REFERENCE CLICK EFFECT */
    .orb-geometry:active {
        transform: scale(0.98);
    }

    .orb-geometry:hover {
        transform: scale(1.02);
    }

    /* 
       INTERACTION LAYER (Parallax)
    */
    .light-shifter-container {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        transition: transform 0.1s ease-out;
        will-change: transform;
    }

    /* 
       CORE LIGHT ENGINE (Ridge)
    */
    .light-shifter {
        width: 100%;
        height: 100%;
        
        /* COLOR MAP (Pure Lavender/Purple - NO PINK) */
        background: conic-gradient(
            from 0deg at 50% 55%,
            #FFFFFF 0deg,
            #FFFFFF 15deg,
            #E0CCFF 40deg,     /* Light Lavender */
            #B9A0EE 90deg,     /* Soft Violet-Blue */
            #A78BFA 150deg,    /* Rich Lavender */
            #B4E4FF 240deg,    /* Ethereal Blue */
            #E0CCFF 330deg,
            #FFFFFF 360deg
        );
        
        filter: blur(50px);
        opacity: 0.9;
        animation: spin-idle 10s linear infinite;
    }

    /* 
       SECONDARY GLOW
    */
    .deep-glow {
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        background: radial-gradient(circle, #A78BFA 0%, transparent 80%);
        filter: blur(40px);
        mix-blend-mode: overlay; /* Prevent muddy/pinkish hues */
        opacity: 0.5;
        animation: pulse-soul 5s ease-in-out infinite alternate;
    }

    /* 
       SURFACE REFLECTION (Gloss)
    */
    .surface-sheen {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: radial-gradient(
            circle at 30% 30%, 
            rgba(255, 255, 255, 0.9) 0%, 
            rgba(255, 255, 255, 0.2) 20%, 
            transparent 60%
        );
        z-index: 10;
        pointer-events: none;
    }

    /* 
       THE RIM LIGHT
    */
    .rim-light {
        position: absolute;
        inset: 2px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-right-color: rgba(255, 255, 255, 0.6); 
        border-bottom-color: rgba(167, 139, 250, 0.4); 
        filter: blur(1px);
        z-index: 11;
        transform: rotate(-15deg);
        pointer-events: none;
    }

    @keyframes spin-idle {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    @keyframes spin-load {
        0% { transform: rotate(0deg) scale(1.1); }
        100% { transform: rotate(360deg) scale(1.1); }
    }

    @keyframes pulse-soul {
        0% { transform: scale(0.9); opacity: 0.5; }
        100% { transform: scale(1.1); opacity: 0.6; }
    }
    
    @keyframes breathe-load {
        0% { transform: scale(0.95); }
        100% { transform: scale(1.05); }
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-15px); }
    }

    /* THE FULL-SCREEN CARD VERSION: No double borders, no inset margins */
    #voice-content-stage > * {
      position: relative; /* CRITICAL: Contrains absolute headers */
      flex-shrink: 0;
      width: 88vw !important;
      max-width: 360px !important;
      height: 420px !important;
      border-radius: 32px; /* Smooth card rounding */
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
      background: #FFFFFF !important; /* Pure white base for Apple look */
      border: none !important;
      pointer-events: auto;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 0 !important; /* REMOVED: Cards take full space */
      box-sizing: border-box;
      scroll-snap-align: center;
      animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Overlay Header: Integrated title that floats over the content */
    #voice-content-stage .mcq-quiz-header-title {
      position: absolute;
      top: 25px;
      left: 25px;
      z-index: 20;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 6px 14px;
      border-radius: 100px;
      font-size: 10px;
      letter-spacing: 0.05em;
      font-weight: 800;
      color: #FFFFFF;
      text-transform: uppercase;
      border: none;
      pointer-events: none;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    /* Tools now fill the card entirely */
    #voice-content-stage .desmos-graph,
    #voice-content-stage .desmos-3d-graph,
    #voice-content-stage .desmos-geometry,
    #voice-content-stage .mcq-quiz-content-area,
    #voice-content-stage .notebook-paper,
    #voice-content-stage .styled-action-container {
      width: 100% !important;
      height: 100% !important;
      border-radius: 0 !important; /* They inherit the parent card's shape */
      border: none !important;
      background: #FFFFFF !important;
      margin: 0 !important; /* Remove any default margins */
    }

    /* YouTube specific styling for voice mode to prevent stretching */
    #voice-content-stage .youtube-embed {
      width: 100% !important;
      height: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: #000 !important; /* Cinematic black bars */
      margin: 0 !important;
      border-radius: 0 !important;
    }

    #voice-content-stage .youtube-embed iframe {
      width: 100% !important;
      height: auto !important;
      aspect-ratio: 16 / 9;
      border: none !important;
    }

    /* Remove padding/borders from the container wrapper in voice mode */
    #voice-content-stage .styled-action-container {
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    /* Dark mode tools override (Optional - makes them look cooler in voice mode) */
    #voice-content-stage .mcq-quiz-content-area,
    #voice-content-stage .mcq-quiz-footer {
      background: #1C1B22 !important;
      color: white !important;
    }

    #voice-content-stage .mcq-quiz-question-text {
      color: white !important;
      padding-top: 50px; /* Space for the overlay title */
    }

    #voice-content-stage .mcq-quiz-option {
      background: rgba(255, 255, 255, 0.05) !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
      color: white !important;
    }

    /* Ensure notebooks fill the space elegantly */
    #voice-content-stage .notebook-paper {
      padding: 60px 24px 24px 24px !important;
      background: #fff !important;
      color: #111 !important;
      overflow-y: auto;
    }

    #voice-content-stage .mcq-quiz-question-wrapper {
      flex-grow: 1;
      overflow-y: auto;
      padding: 0 20px;
    }

    @keyframes slideUpFade {
      from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }







    #voice-content-stage img {
      object-fit: contain;
      padding: 20px;
    }

    /* 6. Pending Updates Bar (Whiteboard-Matched Aesthetic) */
    .pending-updates-bar {
      position: absolute;
      bottom: 32px; /* Matched to Whiteboard UI spacing */
      right: 32px;
      
      /* Match Excalidraw Panel Style */
      background: #F1F0FF;
      border: 1px solid #DCD9F7;
      border-radius: 12px;
      padding: 4px;
      
      display: flex;
      align-items: center;
      gap: 6px;
      
      /* Clean, professional shadow */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        
      z-index: 500;
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    }

    .pending-updates-bar.hidden {
      transform: translateY(30px) scale(0.8);
      opacity: 0;
      pointer-events: none;
    }

    .pending-previews {
      display: flex;
      align-items: center;
      gap: 4px; /* Non-overlapping for better definition */
      padding: 0 4px;
    }

    /* Refined Squircle Preview */
    .preview-mini-chip {
      width: 36px;
      height: 36px;
      border-radius: 8px; /* Matched to Whiteboard buttons */
      border: 1px solid #DCD9F7;
      background-size: cover;
      background-position: center;
      background-color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #A78BFA;
      position: relative;
      
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: all 0.2s ease;
    }
    
    .preview-mini-chip:hover {
        transform: translateY(-2px);
        background-color: #FFFFFF;
        border-color: #A78BFA;
    }

    .mini-expand-btn {
      position: absolute;
      top: -10px;
      right: -10px;
      width: 22px;
      height: 22px;
      background: #A78BFA;
      color: white;
      border: 1px solid white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      opacity: 0;
      transform: scale(0.8);
      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      z-index: 10;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .preview-mini-chip:hover .mini-expand-btn {
      opacity: 1;
      transform: scale(1);
    }

    .mini-expand-btn:hover {
      background: #9061F9;
      transform: scale(1.1);
    }

    .mini-remove-btn {
      position: absolute;
      top: -10px;
      left: -10px;
      width: 22px;
      height: 22px;
      background: #ff5f56;
      color: white;
      border: 1px solid white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      opacity: 0;
      transform: scale(0.8);
      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      z-index: 11; /* Slightly above expand btn if they overlap */
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .preview-mini-chip:hover .mini-remove-btn {
      opacity: 1;
      transform: scale(1);
    }

    .mini-remove-btn:hover {
      background: #ff3b30;
      transform: scale(1.1);
    }

    /* Refined Send Button - Matched to tool button vibe */
    .voice-send-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px; /* Consistent Squircle */
      border: none;
      /* Brand Purple Accent */
      background: #A78BFA;
      color: white;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      
      box-shadow: 0 2px 6px rgba(167, 139, 250, 0.3);
      transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .voice-send-btn:hover {
      background: #9061F9;
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(167, 139, 250, 0.4);
    }
    
    .voice-send-btn:active {
        transform: scale(0.92);
    }

    .voice-send-btn.pulsating {
      animation: pulse-matched 2s ease-in-out infinite;
    }

    .voice-send-btn.loading {
        background: #DCD9F7;
        color: #A78BFA;
        cursor: not-allowed;
        pointer-events: none;
    }

    .voice-send-btn.loading i {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    @keyframes pulse-matched {
      0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.4); }
      70% { box-shadow: 0 0 0 8px rgba(167, 139, 250, 0); }
      100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
    }

          .hidden {
            opacity: 0 !important;
            pointer-events: none !important;
            z-index: -9999 !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 0 !important;
            height: 0 !important;
            clip-path: circle(0px at 0 0);
            transform: translate(-50%, -60%) !important;
          }



          @keyframes spin {
            0% {
              transform: rotate(0deg);
            }

            100% {
              transform: rotate(360deg);
            }
          }

          @keyframes pulse-bg {
            0% {
              background-color: rgba(255, 255, 255, 0.06);
            }

            50% {
              background-color: rgba(167, 139, 250, 0.1);
            }

            100% {
              background-color: rgba(255, 255, 255, 0.06);
            }
          }


          @keyframes subtleRotate {
            from {
              transform: rotate(0deg) scale(1.4);
            }

            to {
              transform: rotate(360deg) scale(1.4);
            }
          }


          /* --- START: AI Generated Image Button --- */

          /* This is the parent container for the image and the button.
   Making it relative is KEY to positioning the button inside it. */





          /* --- END: AI Generated Image Button --- */

























          .input-buttons {
            align-items: center;
          }

          /*
 * WITH this new, refined block:
 */
          /* In index.html, inside the main <style> tag */

          /*
 * WITH this new, refined block:
 */

          /* In index.html, inside the main <style> tag */

          /*
 * WITH this new, refined block:
 */










          /* ADD THIS ENTIRE NEW CSS BLOCK */

          /* --- In-Chat Upgrade Prompt --- */










          /* Ensure the hidden class works correctly */
          .chat-lockout-overlay.hidden {
            display: none !important;
          }


          /* Carousel Snap Logic - Horizontal Swiping with Midpoint Alignment */
          #voice-content-stage {
            z-index: 50;
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: flex-end; /* Align to bottom padding */
            justify-content: flex-start;
            gap: 25px;

            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;

            /* UPDATED: Cards are 380px tall. Bar is 148px. 
               10% tuck = 38px. 
               Padding bottom = 148 - 38 = 110px.
            */
            padding: 0 20px 110px 20px;
            box-sizing: border-box;
          }

          /* Hide scrollbar */
          #voice-content-stage::-webkit-scrollbar {
            display: none;
          }

          #voice-content-stage>* {
            position: relative; /* CRITICAL: Contrains absolute headers */
            flex-shrink: 0;
            width: 95% !important; /* Fit whatever width is available */
            max-width: 360px !important;
            height: 380px !important; /* Reduced height */
            border-radius: 32px; /* Smooth card rounding */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
            background: #18191A; /* Solid base for tools */
            border: 1px solid rgba(255, 255, 255, 0.15);
            pointer-events: auto;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 0 !important; /* REMOVED: Cards take full space */
            box-sizing: border-box;
            scroll-snap-align: center;
            animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1);
          }

          /* Pagination Dots: Updated Position */
          .voice-pagination-dots {
            position: absolute;
            /* bottom: 110px (padding) + 380px (card) + 20px (gap) = 510px */
            bottom: 510px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 250;
            transition: opacity 0.3s ease;
            pointer-events: auto; /* ENABLE CLICKS */
          }

          .voice-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
          }

          .voice-dot.active {
            background: #A78BFA;
            /* Matches brand purple */
            transform: scale(1.3);
            box-shadow: 0 0 10px rgba(167, 139, 250, 0.5);
          }

          .voice-pagination-dots.hidden {
            display: none;
          }

            #ti84Tool {
              display: none;
              position: relative;
              width: 100%;
              height: 100%;
              overflow: hidden;
            }

            /*#ti84Tool iframe {
              position: absolute;
              top: -12%;
              left: 0;
              width: 100%;
              height: calc(105.5%);
              border: none;
              overflow: hidden;
              scrollbar-width: none;
            }*/

            #ti84Tool iframe::-webkit-scrollbar {
              width: 0;
              height: 0;
              display: none;
            }

            #ti84Tool * {
              overflow: hidden !important;
            }

/* --- Voice Mode Tool Prompt Redesign (Apple Style) --- */

#voice-content-stage .mcq-quiz-prompt-container,
#voice-content-stage .flashcard-prompt-container,
#voice-content-stage .demo-prompt-container,
#voice-content-stage .styled-action-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 40px 30px;
    text-align: center;
    background: #FFFFFF !important; /* Pure white base for Apple look */
    border: none !important;
    box-sizing: border-box;
    margin: 0 !important;
}

/* MCQ Specifics */
#voice-content-stage .mcq-quiz-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

#voice-content-stage .mcq-quiz-icon-wrapper {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #F3F0FF 0%, #E9D5FF 100%);
    border-radius: 22px; /* Apple squircle vibe */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(167, 139, 250, 0.15);
}

#voice-content-stage .mcq-quiz-icon-wrapper i {
    font-size: 42px;
    color: #A78BFA; /* Rich Lavender */
}

#voice-content-stage .mcq-quiz-card-header h3 {
    font-size: 24px;
    color: #1C1C1E;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.5px;
}

#voice-content-stage .mcq-quiz-card-meta {
    color: #8E8E93;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 35px;
    max-width: 260px;
    font-weight: 400;
}

#voice-content-stage .mcq-quiz-open-btn,
#voice-content-stage .flashcard-button,
#voice-content-stage .practice-test-button {
    width: 100%;
    max-width: 240px;
    height: 56px;
    border-radius: 18px;
    border: none;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    background: #A78BFA; /* Lavender Main Action */
    color: white;
    box-shadow: 0 8px 20px rgba(167, 139, 250, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#voice-content-stage .mcq-quiz-open-btn:hover,
#voice-content-stage .flashcard-button:hover,
#voice-content-stage .practice-test-button:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 25px rgba(167, 139, 250, 0.4);
    background: #9061F9;
}

#voice-content-stage .mcq-quiz-open-btn:active {
    transform: scale(0.96);
    box-shadow: 0 4px 10px rgba(167, 139, 250, 0.2);
}

#voice-content-stage .mcq-quiz-open-btn i {
    font-size: 20px;
    transition: transform 0.3s ease;
}

#voice-content-stage .mcq-quiz-open-btn:hover i {
    transform: translateX(4px);
}

/* Flashcard Specifics Override */
#voice-content-stage .flashcard-button {
    background: #FBBF24; /* Golden for Flashcards */
    box-shadow: 0 8px 20px rgba(251, 191, 36, 0.3);
}
#voice-content-stage .flashcard-button:hover {
    background: #F59E0B;
    box-shadow: 0 12px 25px rgba(251, 191, 36, 0.4);
}

/* Practice Test Specifics */
#voice-content-stage .practice-test-button {
    background: #34C759; /* Apple Green */
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
    border: none;
    color: white;
}
#voice-content-stage .practice-test-button:hover {
    background: #2DA84A;
    color: white;
}

/* Demo Specifics */
#voice-content-stage .demo-prompt-container .demo-prompt-text {
    font-size: 20px;
    color: #1C1C1E;
    font-weight: 600;
    margin-bottom: 25px;
}

#voice-content-stage .demo-prompt-buttons {
    display: flex;
    gap: 15px;
    width: 100%;
    justify-content: center;
}

#voice-content-stage .demo-prompt-btn {
    flex: 1;
    padding: 14px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

#voice-content-stage .demo-prompt-btn.yes {
    background: #007AFF;
    color: white;
}

#voice-content-stage .demo-prompt-btn.no {
    background: #F2F2F7;
    color: #1C1C1E;
}