/* ==========================================================================
   PARLEVA MOBILE UX - CLEAN STAGE ARCHITECTURE
   ==========================================================================

   Design Philosophy:
   - User is the STAR, AI is supporting actor
   - Voice-first, thumb-zone optimized
   - Minimal chrome - focus on the conversation exchange
   - Show: AI message → User's response → Feedback → Next input

   Breakpoint: 768px and below
   ========================================================================== */

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Mobile Overrides)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --mobile-header-height: 40px;
    --mobile-input-height: 105px;
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --android-status-bar-height: 0px;
    --android-nav-bar-height: 0px;
    --pulse-glow: rgba(102, 126, 234, 0.4);
  }

  /* Android Capacitor app - add nav bar padding only (status bar uses env() ) */
  body.capacitor-android {
    --android-status-bar-height: 0px;
    --android-nav-bar-height: 20px;
  }

  /* Faded status bar overlay for Android */
  body.capacitor-android::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--android-status-bar-height, 28px);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    z-index: 9999;
    pointer-events: none;
  }

  :root {
    /* Label typography - consistent across mobile */
    --label-font-size: 0.85rem;
    --label-font-size-lg: 0.95rem;
    --label-font-weight: 600;
    --label-letter-spacing: 0.5px;
    --label-color: #94a3b8;
    --label-color-light: rgba(255, 255, 255, 0.85);
    --color-persona-label: var(--brand-primary);
  }

  /* Use interactive-widget=resizes-content for keyboard handling */
  html {
    height: 100%;
    height: 100dvh;
  }

  body {
    height: 100%;
    height: 100dvh;
    /* Note: overflow is controlled per-section, not globally */
  }

  /* Remove tap highlight from all interactive elements on mobile */
  button,
  a,
  input,
  textarea,
  select,
  [role="button"],
  .btn,
  .clickable {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    outline: none;
  }

  /* Profile name edit - hide buttons on mobile, save on blur instead */
  .profile-name-save,
  .profile-name-cancel {
    display: none !important;
  }

}

/* ==========================================================================
   CONVERSATION SECTION - CLEAN STAGE LAYOUT
   ========================================================================== */
@media (max-width: 768px) {

  /* Hide desktop brand bar on mobile conversation */
  .app-brand-fixed {
    display: none;
  }

  /* Reset app card wrapper for mobile - remove padding/margin */
  .app-card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    max-width: 100%;
  }

  .app-main {
    padding: 0 !important;
  }

  /* Full viewport conversation container */
  .conversation-section {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--bg-hover);
    z-index: 100;
    overflow: hidden;
  }

  /* CRITICAL: Override display flex when hidden */
  .conversation-section.hidden {
    display: none !important;
  }

  /* Main conversation area - scrollable middle */
  .conversation-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0; /* Critical for flex scroll */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0;
    /* Bottom padding for fixed input area */
    padding-bottom: calc(var(--mobile-input-height, 120px) + 20px);
    gap: 0;
  }

  /* ==========================================================================
     PREMIUM TOP BAR - Clean, balanced, modern
     ========================================================================== */
  .controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    width: 100% !important;
    padding: 0px 16px 8px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px) + var(--android-status-bar-height, 0px));
    background: var(--bg-white);
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border-light);
    gap: 0;
    flex-wrap: nowrap !important;
    min-height: var(--mobile-header-height);
    flex-shrink: 0;
    margin-bottom: 0px;
    height: auto;
    min-height: 5rem;
  }

  /* Back button - icon only on mobile */
  .controls .back-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-md);
    min-width: unset;
    background: transparent;
    border: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
    touch-action: manipulation;
    position: relative;
    z-index: 5;
    gap: 0;
  }

  .controls .back-btn:active {
    background: var(--bg-subtle);
    transform: scale(0.95);
  }

  /* Hide text on mobile, show only arrow */
  .controls .back-btn .back-btn-text {
    display: none;
  }

  .controls .back-btn .back-arrow {
    width: 1.5rem;
    height: 1.5rem;
    stroke: var(--text-primary);
  }

  /* Legacy secondary-btn support */
  .controls .secondary-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 0;
    border-radius: var(--radius-md);
    min-width: unset;
    background: transparent;
    border: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
    touch-action: manipulation;
    position: relative;
    z-index: 5;
  }

  .controls .secondary-btn:active {
    background: var(--bg-subtle);
    transform: scale(0.95);
  }

  /* Back arrow icon - darker, bolder */
  .controls .secondary-btn::before {
    content: "";
    width: 2rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; /* Ensure clicks pass through to button */
  }

  /* Session context - centered title area, tappable to reopen banner */
  .session-context {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: transparent;
    border: none;
    border-radius: 0;
    max-width: none;
    min-width: 0;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Disable desktop tooltips on mobile - tap opens banner instead */
  .session-context::after,
  .session-context::before,
  .mic-btn::after {
    display: none !important;
  }

  /* Language indicator - flag emoji (small) above scenario */
  .context-lang {
    font-size: 1.3rem;
    font-weight: 400;
    color: inherit;
    line-height: 1;
    letter-spacing: normal;
    transition: font-size 0.3s ease;
  }

  /* Hide scenario initially when banner is showing */
  .session-context.banner-active .context-scenario {
    display: none;
  }

  .session-context:hover {
  background: none !important;
}

  /* When banner is active, disable tap interaction (nothing to show) */
  .session-context.banner-active {
    cursor: default;
    pointer-events: none;
    border-color: transparent !important;
  }

  /* Language code style when banner active (before switching to flag) */
  .session-context.banner-active .context-lang {
    font-size: 1.9rem;
    font-weight: 700;
    color: #6366f1;
    letter-spacing: 0.05em;
  }

  .context-scenario {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4f46e5;
    max-width: 180px;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    padding: 6px 10px 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .context-scenario-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-size: .8rem;
  }

  .session-context:active .context-scenario {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(139, 92, 246, 0.18) 100%);
  }

  /* Chevron icon indicating tappable - expands banner (points down) */
  .context-scenario::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-left: 1.5px solid #6366f1;
    border-bottom: 1.5px solid #6366f1;
    transform: rotate(-45deg) translateY(-1px);
    flex-shrink: 0;
    opacity: 0.7;
  }

  /* Hide old flag element */
  .context-flag {
    display: none;
  }

  /* ==========================================================================
     SCENARIO BANNER - Info card style, matches desktop
     ========================================================================== */
  .scenario-banner {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%), var(--bg-white);
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 9;
    animation: bannerSlideIn 0.3s ease-out;
    border-radius: 0px;
    cursor: pointer;
    margin-bottom: 0px;
  }

  .scenario-banner.hiding {
    animation: bannerSlideOut 0.3s ease-in forwards;
    overflow: hidden;
  }

  .scenario-banner.hidden {
    display: none !important;
  }

  .scenario-banner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .scenario-banner-lang {
    font-size: .8rem;
    font-weight: 600;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
  }

  /* Close button - hidden by default, shown when manually opened */
  .scenario-banner-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(99, 102, 241, 0.1);
    border: none;
    border-radius: 50%;
    color: #6366f1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
  }

  .scenario-banner-close svg {
    width: 16px;
    height: 16px;
  }

  .scenario-banner-close:active {
    background: rgba(99, 102, 241, 0.2);
  }

  /* Show close button when banner is manually opened */
  .scenario-banner[data-manual-open="true"] .scenario-banner-close {
    display: flex;
  }

  .scenario-banner-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
  }

  .scenario-banner-goals {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.3;
  }

  .scenario-banner-goals.loading {
    position: relative;
    color: rgba(99, 102, 241, 0.3);
  }

  .scenario-banner-goals.loading::after {
    content: 'Adapting to you...';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent 20%,
      rgba(99, 102, 241, 0.8) 50%,
      transparent 80%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goalsShimmer 2s linear infinite;
  }

  @keyframes goalsShimmer {
    0% {
      background-position: 100% 0;
    }
    100% {
      background-position: -100% 0;
    }
  }

  @keyframes bannerSlideIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes bannerSlideOut {
    from {
      opacity: 1;
      max-height: 100px;
      padding: 12px 16px;
      margin-bottom: 0;
    }
    to {
      opacity: 0;
      max-height: 0;
      padding: 0 16px;
      margin-bottom: 0;
    }
  }

  /* Tooltip on mobile - allow wrapping */
  .session-context::after {
    white-space: normal;
    max-width: min(280px, 85vw);
    line-height: 1.4;
  }

  /* Hide speak toggle on mobile - available in overflow menu */
  .toggle-label {
    display: none !important;
  }

  /* Hide old mobile history trigger - now in overflow menu */
  .mobile-history-trigger {
    display: none !important;
  }

  /* ==========================================================================
     OVERFLOW MENU - Premium dropdown
     ========================================================================== */
  .mobile-overflow-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: #475569;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    order: 10; /* Push to end of flex container */
  }

  .mobile-overflow-btn svg {
    width: 2rem;
    height: 2rem;
  }

  .mobile-overflow-btn:active {
    background: var(--bg-subtle);
    color: var(--text-primary);
    transform: scale(0.95);
  }

  .mobile-overflow-menu {
    display: block !important;
    position: absolute;
    top: 100%;
    right: 4px;
    margin-top: 8px;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.12),
      0 2px 8px rgba(0, 0, 0, 0.08),
      0 0 0 1px rgba(0, 0, 0, 0.04);
    min-width: 200px;
    padding: 6px;
    z-index: 100;
    animation: menuSlideIn 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  }

  @keyframes menuSlideIn {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .mobile-overflow-menu.hidden {
    display: none !important;
  }

  .overflow-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .overflow-menu-item:active {
    background: var(--bg-subtle);
  }

  .overflow-menu-item svg {
    color: var(--brand-primary);
    flex-shrink: 0;
    width: 20px;
    height: 20px;
  }

  .overflow-menu-text {
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
  }

  /* Toggle switch in overflow menu */
  .overflow-toggle {
    flex-shrink: 0;
  }

  .overflow-toggle-track {
    width: 46px;
    height: 28px;
    background: var(--border-medium);
    border-radius: 99px;
    position: relative;
    transition: background 0.2s ease;
  }

  .overflow-toggle-track.active {
    background: var(--brand-primary);
  }

  .overflow-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: var(--bg-white);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .overflow-toggle-track.active .overflow-toggle-thumb {
    transform: translateX(18px);
  }

  /* Divider between menu items */
  .overflow-menu-item + .overflow-menu-item {
    border-top: 1px solid var(--bg-subtle);
  }

  /* Sound waves visibility based on toggle state */
  .overflow-toggle-track:not(.active) ~ svg .sound-waves,
  #overflowSpeakToggle:has(.overflow-toggle-track:not(.active)) svg .sound-waves {
    opacity: 0.3;
  }

  /* Audio Group - Speak toggle + Speed slider */
  .overflow-audio-group {
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    margin: 4px;
    overflow: hidden;
  }
  

  .overflow-speak-row {
    border-radius: 10px 10px 0 0;
  }

  .overflow-speed-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    transition: opacity 0.2s ease;
  }

  /* Disabled state when speak is off */
  .overflow-audio-group.speak-disabled .overflow-speed-row {
    opacity: 0.4;
    pointer-events: none;
  }

  .overflow-speed-slider {
    flex: 1;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-light);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    width: 100%;
  }

  .overflow-speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--brand-gradient);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
  }

  .overflow-speed-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--brand-gradient);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
  }

  .overflow-speed-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-primary);
    min-width: 42px;
    text-align: right;
  }

  /* Right side icons container */
  .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* ==========================================================================
     CONVERSATION STAGE - The exchange area
     ========================================================================== */

  /* Scrollable content area between header and input */
  .conversation-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    padding-bottom: calc(var(--mobile-input-height) + 40px);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  /* ==========================================================================
     MOBILE MESSAGE STACK - 2-position alternating display
     ========================================================================== */
  .mobile-message-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 1.5rem 16px;
    padding-bottom: 64px;
  }

  .stack-position {
    display: flex;
    flex-direction: column;
  }

  /* Hide original elements on mobile - we use the stack instead */
  .ai-message-bubble,
  .user-message-display,
  .feedback-card {
    display: none !important;
  }

  /* User message in stack - right-aligned with sharp bottom-right corner */
  .stack-user-message {
    align-self: flex-end;
    max-width: 90%;
    padding: 6px 10px;
    border-radius: 12px 12px 3px 12px;
    background: #f1f5f9;
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    animation: slideInRight 0.3s ease;
  }

  .stack-user-message .stack-label {
    font-size: .8rem;
    letter-spacing: var(--label-letter-spacing);
    margin-bottom: 1px;
    text-transform: uppercase;
    color: var(--label-color);
    font-weight: var(--label-font-weight);
  }

  .stack-user-message .stack-text {
    font-size: 1.2rem;
    line-height: 1.35;
    color: var(--text-secondary);
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(12px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .feedback-text .correction-from {
    font-size: 1rem;
    color: black;
  }

  /* AI message in stack - refined partner bubble */
  .stack-ai-message {
    align-self: flex-start;
    max-width: 90%;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border-bottom-left-radius: 3px;
    background: var(--brand-gradient);
    color: white;
    box-shadow:
      0 2px 8px rgba(102, 126, 234, 0.25),
      0 4px 16px rgba(102, 126, 234, 0.15);
    animation: slideInLeft 0.3s ease;
    cursor: pointer; /* Indicate tappable for translation */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Stack AI message header - label and play button */
  .stack-ai-message .stack-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }

  .stack-ai-message .stack-label {
    font-size: .8rem;
    letter-spacing: var(--label-letter-spacing);
    color: var(--label-color-light);
    text-transform: uppercase;
    font-weight: var(--label-font-weight);
  }

  /* Mobile play button in stack */
  .stack-play-btn {
 
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: none !important;
    max-width: none !important;
    width: 40px !important;
    height: 40px !important;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .stack-play-btn:active {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0.95);
  }

  .stack-play-btn.playing {
    background: rgba(255, 255, 255, 0.35);
  }

  .stack-play-btn.loading {
    pointer-events: none;
  }

  .stack-play-btn svg {
    width: 16px;
    height: 16px;
  }

  .stack-play-btn .hidden {
    display: none;
  }

  /* Stack actions container */
  .stack-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* Mobile translate button in stack */
  .stack-translate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    opacity: 0.8;
    -webkit-tap-highlight-color: transparent;
    margin-left: 24px;
  }

  .stack-translate-btn:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
  }

  .stack-translate-btn.active {
    background: rgba(255, 255, 255, 0.35);
    opacity: 1;
  }

  .stack-translate-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Translation display in mobile stack */
  .stack-translation {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.85rem;
    opacity: 0.9;
    font-style: italic;
    animation: fadeIn 0.3s ease;
  }

  /* Hide actions while typing */
  .stack-ai-message.stack-typing .stack-actions {
    display: none;
  }

  /* Loading skeleton for partner label */
  .label-skeleton {
    display: inline-block;
    width: 50px;
    height: 0.5rem;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0.3) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 3px;
    vertical-align: middle;
  }

  @keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .stack-ai-message .stack-text {
    font-size: 1.4rem;
    line-height: 1.35;
    font-weight: 600;
  }

  /* Feedback in stack - premium minimal card */
  .stack-feedback {
    background: var(--bg-white);
    border-radius: 12px;
    border: none;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 0;
    animation: feedbackAppear 0.35s ease-out;
    padding: 16px;
  }

  @keyframes feedbackAppear {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Premium minimal feedback design for mobile */
  .stack-feedback .feedback-section {
    display: flex !important;
    padding: 8px 12px !important;
    gap: 10px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .stack-feedback .feedback-section:not(:last-child) {
    margin-bottom: 8px;
  }

  .stack-feedback .feedback-section:last-child {
    margin-bottom: 0;
  }

  /* Solid background colors with matching border */
  .stack-feedback .feedback-positive {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
  }

  .stack-feedback .feedback-improve {
    background: #fffbeb;
    border: 1px solid #fde68a;
  }

  .stack-feedback .feedback-why {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
  }

  .stack-feedback .feedback-encourage {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
  }

.feedback-collapse-toggle {
  opacity: .8;
}

.feedback-collapse-content {
  padding-left: 32px;
}



  .stack-feedback .feedback-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
  }

  .stack-feedback .feedback-content {
    flex: 1;
    min-width: 0;
  }

  .stack-feedback .feedback-title {
    font-size: 0.65rem;
    font-weight: 600;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.75;
  }

  .stack-feedback .feedback-positive .feedback-title {
    color: #16a34a;
  }

  .stack-feedback .feedback-improve .feedback-title {
    color: #d97706;
  }

  .stack-feedback .feedback-why .feedback-title {
    color: #64748b;
  }

  .stack-feedback .feedback-encourage .feedback-title {
    color: #7c3aed;
  }

  .stack-feedback .feedback-text {
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.4;
  }

  /* "You said" at bottom - right-aligned user bubble style */
  .stack-user-said {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 6px;
    margin-top: 8px;
    border-top: 1px solid var(--bg-subtle);
  }

  .stack-user-said-label {
    font-size: .8rem;
    color: #64748b;
    font-weight: var(--label-font-weight);
    letter-spacing: var(--label-letter-spacing);
    text-transform: uppercase;
    margin-bottom: 2px;
  }

  .stack-user-said-text {
    font-size: 1rem;
    color: var(--text-secondary);
    padding: 6px 10px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px 10px 3px 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    max-width: 85%;
  }

  /* Stack typing indicator */
  .stack-typing {
    animation: fadeIn 0.2s ease;
    margin-top: 16px;
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-12px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Typing indicator (used in stack) */
  .typing-indicator {
    display: flex;
    gap: 4px;
    padding: 8px 0;
  }

  .typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    animation: typingBounce 1.4s ease-in-out infinite;
  }

  .typing-dot:nth-child(2) { animation-delay: 0.2s; }
  .typing-dot:nth-child(3) { animation-delay: 0.4s; }

  @keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
  }

  /* ==========================================================================
     FEEDBACK CARD - Tips primary, user message at bottom (truncated)
     ========================================================================== */
  .feedback-card {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 0;
  }

  .feedback-body {
    max-height: none !important;
  }

  .feedback-body-content {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
  }

  /* Feedback sections - clean, no heavy backgrounds */
  .feedback-section {
    padding: 8px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    gap: 10px;
    border-radius: 10 !important;
    order: 0; /* Explicit order so user-said with order:99 always appears last */
  }



  .feedback-section .feedback-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
  }

.feedback-collapse-toggle {
  padding: 0px;
}

  .feedback-section .feedback-content {
    flex: 1;
    min-width: 0;
  }

  .feedback-section .feedback-title {
    font-size: .9rem;
    font-weight: var(--label-font-weight);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: var(--label-letter-spacing);
  }

  .feedback-section .feedback-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    font-weight: 400;
  }

  /* Color coding for feedback type titles */
  .feedback-section.feedback-positive .feedback-title {
    color: var(--color-success);
  }

  .feedback-section.feedback-improve .feedback-title {
    color: var(--color-warning);
  }

  .feedback-section.feedback-why .feedback-title {
    color: #6366f1;
  }

  .feedback-section.feedback-encourage .feedback-title {
    color: #7c3aed;
  }

  /* Hide mobile-only class visibility toggle */
  .mobile-only {
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }

  /* ==========================================================================
     INPUT AREA - ChatGPT-style integrated input
     ========================================================================== */

  /* Input container - fixed at bottom of viewport */
  .input-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--android-nav-bar-height, 0px));
    margin: 0;
    border-radius: 0;
    border: none;
    background: var(--bg-light);
    z-index: 100; /* Above conversation content */
    touch-action: pan-x pinch-zoom; /* Prevent vertical scroll pass-through */
  }

  /* "Your Turn" indicator - removed for cleaner UI */
  .input-area::before {
    display: none;
  }

  /* Input wrapper - pill-shaped container with everything inside */
  .input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 16px;
    background: var(--bg-white);
    border: 1.5px solid var(--border-light);
    border-radius: 35px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 56px;
    margin-bottom: 0px;
    justify-content: center;
  }

  .input-wrapper:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.15);
  }

  /* Container fills height and centers the textarea */
  .input-field-container {
    flex: 1;
    min-height: 40px;
    display: flex;
    align-items: center;
    height: 100%;
    max-width: unset;
    max-height: unset !important;
  }

  .input-field {
    width: 100%;
    min-height: 24px;
    max-height: 120px;
    height: auto;
    padding: 4px 0 4px 4px;
    font-size: 1.1rem;
    line-height: 22px;
    border-radius: 0;
    border: none;
    background: transparent;
    resize: none;
    outline: none;
    overflow-y: auto;
    box-shadow: none;
  }

  .input-field:focus {
    border: none;
    box-shadow: none;
    background: transparent;
  }

  .input-field::placeholder {
    color: var(--text-light);
    font-size: 1rem;
  }

  /* ==========================================================================
     ACTION BUTTONS - Inside input wrapper
     ========================================================================== */

  /* Mic button - inside the pill */
  .mic-btn {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;
    max-height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--bg-subtle);
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    z-index: 5;
    flex-shrink: 0;
    font-size: 1.2rem;
    margin-bottom: 0;
    align-self: flex-end;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    outline: none;
  }

  .mic-btn:hover,
  .mic-btn:active {
    transform: scale(1.05);
    background: var(--border-light);
    box-shadow: none;
  }

  .mic-icon {
    font-size: 1.1rem;
    filter: none;
  }

  .mic-btn.listening {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    animation: micPulse 1s ease-in-out infinite;
  }

  .mic-btn.listening .mic-icon {
    filter: grayscale(1) brightness(10);
  }

  @keyframes micPulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    }
    50% {
      transform: scale(1.05);
      box-shadow: 0 2px 16px rgba(239, 68, 68, 0.5);
    }
  }

  /* Voice judgment - sits above the input wrapper on mobile */
  .voice-judgment {
    margin-bottom: 8px;
    font-size: 0.8rem;
    padding: 8px 12px;
  }

  .voice-judgment.recovery {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .voice-judgment.recovery .vj-actions {
    display: flex;
    gap: 8px;
    margin-left: 0;
  }

  .voice-judgment.recovery .vj-btn {
    flex: 1;
    justify-content: center;
    padding: 10px 14px;
    font-size: 0.85rem;
    min-height: 44px;
  }

  /* Hide the separate input actions row */
  .input-actions {
    display: none !important;
  }

  /* Hide status message on mobile to save space */
  .status-message {
    display: none !important;
  }

  /* Send button - circular, inside the pill, hidden by default */
  #sendBtn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    font-size: 0;
    font-weight: 600;
    border-radius: 50%;
    border: none;
    background: var(--brand-gradient);
    color: #ffffff;
    cursor: pointer;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    order: 2; /* Send button on the right */
    align-self: flex-end;
  }

  /* Show send button when input has content */
  .input-wrapper.has-content #sendBtn {
    display: flex;
  }

  /* Fade mic button when input has content */
  .input-wrapper.has-content .mic-btn {
    opacity: 0.4;
  }

  /* Keep mic at full opacity when actively listening */
  .input-wrapper.has-content .mic-btn.listening {
    opacity: 1;
  }

  /* Mic button shifts left when send is visible */
  .mic-btn {
    order: 1; /* Mic button on the left when both visible */
    transition: opacity 0.2s ease;
  }

  #sendBtn::before {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  #sendBtn:active {
    transform: scale(0.95);
  }

  #sendBtn:disabled {
    background: var(--border-light);
    box-shadow: none;
    cursor: not-allowed;
  }

  #sendBtn:disabled::before {
    opacity: 0.4;
  }

  /* ==========================================================================
     DISABLED STATE - When AI is responding
     ========================================================================== */

  /* Disabled input wrapper - entire pill looks disabled */
  .input-wrapper:has(.input-disabled) {
    background: #f3f4f6;
    border-color: #e5e7eb;
    box-shadow: none;
    opacity: 0.7;
  }

  .input-wrapper:has(.input-disabled) .mic-btn {
    background: var(--border-light);
    opacity: 0.5;
    pointer-events: none;
  }

  .input-wrapper:has(.input-disabled) #sendBtn {
    background: var(--border-light);
    box-shadow: none;
    opacity: 0.5;
    pointer-events: none;
  }

  .input-wrapper:has(.input-disabled) #sendBtn::before {
    opacity: 0.3;
  }

  /* ==========================================================================
     FEEDBACK - Clean card with slide-in animation
     ========================================================================== */

  .feedback-section {
    /* Slide in animation */
    animation: feedbackSlideIn 0.3s ease;
  }

  @keyframes feedbackSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ==========================================================================
     HINTS - Inside input area on mobile
     ========================================================================== */

  /* Mobile hints panel - inside input area */
  .input-area .hints-panel.mobile-only {
    margin-bottom: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--bg-light);
    overflow: hidden;
  }

  .hints-toggle {
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    gap: 2px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    border: none;
    cursor: pointer;
    min-height: 46px;
  }

  .hints-toggle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .hints-toggle-icon {
    font-size: 0.9rem;
  }

  .hints-toggle-text {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
  }




  .hints-reassurance {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: left;
    font-weight: 400;
    display: none;
    margin-bottom: 4px;
    margin-top: 0px;
  }

  .hints-panel.expanded .hints-reassurance {
    display: block;
  }

  .hints-toggle-arrow {
    font-size: 1.6rem;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
    width: 32px !important;
    height: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hints-panel.expanded .hints-toggle-arrow {
    transform: rotate(180deg);
  }

  .hints-content {
    padding: 0 10px 10px;
    touch-action: pan-y; /* Allow scrolling hints list but contain it */
    overscroll-behavior: contain;
  }

  .hints-title {
    font-size: 0.65rem;
    margin-bottom: 6px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .hints-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
  }

  .hints-list li {
    padding: 8px 10px;
    font-size: 1rem;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--bg-white);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition-fast);
    font-weight: 600;
  }

  .hints-list li:active {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-color: #c7d2fe;
    transform: scale(0.98);
  }

  /* ==========================================================================
     HISTORY - Hidden by Default, Swipe to Reveal
     ========================================================================== */
  .history {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-white);
    border-radius: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 200;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    max-height: 100dvh;
  }

  .history.mobile-open {
    right: 0;
  }

  /* History overlay backdrop */
  .history-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-slow);
    z-index: 199;
  }

  .history-backdrop.visible {
    opacity: 1;
    visibility: visible;
  }

  .history-header {
    position: relative;
    padding: 16px;
    padding-top: calc(16px + var(--mobile-safe-top));
    padding-right: 56px; /* Make room for close button */
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-light);
    cursor: default; /* Not clickable on mobile */
  }

  .history-header:hover {
    background: var(--bg-light); /* No hover effect on mobile */
  }

  .history h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .history-toggle {
    display: none; /* Hide on mobile, use gesture instead */
  }

  /* Close button for history drawer */
  .history-close-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--border-light);
    color: var(--text-secondary);
    font-size: 1.5rem;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    line-height: 1;
  }

  .history-close-btn:active {
    background: var(--border-medium);
    transform: translateY(-50%) scale(0.95);
  }

  .history-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: 24px;
  }

  /* History message styling */
  .history-turn {
    margin-bottom: 8px;
  }

  .history-turn-message {
    padding: 8px 12px;
    font-size: 12pxm;
    border-radius: var(--radius-md);
  }

  /* ==========================================================================
     FLOATING STATS - Repositioned for Mobile
     ========================================================================== */
  /* ==========================================================================
     FLOATING STATS - Hide on mobile for cleaner conversation UI
     ========================================================================== */
  .floating-stats {
    display: none !important;
  }

  /* ==========================================================================
     TRIAL BADGE - Hide on mobile (too cluttered), show in history drawer instead
     ========================================================================== */
  .trial-badge {
    display: none !important;
  }

  .trial-count {
    font-size: 0.75rem;
    color: var(--brand-primary);
    font-weight: 600;
  }

  .trial-progress {
    display: none;
  }

  /* ==========================================================================
     HISTORY TRIGGER BUTTON - Minimal icon in header
     ========================================================================== */
  .mobile-history-trigger {
    display: flex !important;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-base);
  }

  .mobile-history-trigger:active {
    background: #f3f4f6;
    transform: scale(0.95);
  }

  .mobile-history-trigger svg {
    width: 20px;
    height: 20px;
    color: var(--brand-primary);
  }

  /* Show mobile-only elements */
  .history-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 199;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-slow);
  }

  .history-backdrop.visible {
    opacity: 1;
    visibility: visible;
  }

  .history-close-btn {
    display: flex;
  }

  /* ==========================================================================
     GESTURE HINTS - Onboarding
     ========================================================================== */
  .mobile-gesture-hint {
    position: fixed;
    bottom: calc(var(--mobile-input-height) + 60px + var(--mobile-safe-bottom));
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 0.75rem;
    border-radius: var(--radius-xl);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-slow);
    z-index: 100;
    white-space: nowrap;
  }

  .mobile-gesture-hint.visible {
    opacity: 1;
    visibility: visible;
    animation: hintBounce 0.5s ease;
  }

  @keyframes hintBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
  }

  /* ==========================================================================
     TURN INDICATOR - Visual Rhythm
     ========================================================================== */
  .mobile-turn-indicator {
    position: fixed;
    top: calc(var(--mobile-header-height) + var(--mobile-safe-top) + 60px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 30;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .mobile-turn-indicator.visible {
    opacity: 1;
  }

  .turn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-medium);
    transition: all var(--transition-slow);
  }

  .turn-dot.active {
    background: var(--brand-gradient);
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
  }

  .turn-dot.completed {
    background: var(--color-success);
  }

  /* ==========================================================================
     ACCESSIBILITY & TOUCH IMPROVEMENTS
     ========================================================================== */

  /* Larger touch targets */
 
  .hints-list li,
  .toggle-label {
    min-height: 44px;
    min-width: 44px;
  }

  #hintsToggle {
    height: fit-content;
    padding: 8px 16px;
  }

  /* Prevent text selection during interactions */
  .conversation-section {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Allow text selection in input */
  .input-field {
    -webkit-user-select: text;
    user-select: text;
  }

  /* Disable hover states on touch */
  @media (hover: none) {
    .mic-btn:hover,
    .hints-list li:hover,
    .history-turn:hover .history-turn-message {
      transform: none;
    }
  }

  /* Smooth momentum scrolling */
  .mobile-stage-area,
  .history-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }



  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ==========================================================================
     LANDSCAPE ORIENTATION ADJUSTMENTS
     ========================================================================== */
  @media (max-height: 500px) and (orientation: landscape) {
    .controls {
      padding: 6px 16px;
      min-height: 40px;
    }

    .ai-message-bubble {
      padding: 10px 14px;
    }

    .ai-text {
      font-size: 0.95rem;
    }

    .input-area {
      padding: 8px 16px;
    }

    .input-field {
      min-height: 40px;
      max-height: 60px;
    }

    .input-area::before {
      display: none;
    }

    .feedback-section {
      padding: 8px 12px;
    }
  }
}

/* ==========================================================================
   MOBILE DASHBOARD - "Premium Calm" Design
   ==========================================================================

   Design Philosophy:
   - Luxury minimalism — Every element earns its place
   - Depth through subtlety — Layered shadows, not flat
   - Confident typography — Strong hierarchy, refined spacing
   - Ambient polish — Micro-interactions that delight

   ========================================================================== */

@media (max-width: 768px) {

  /* ==========================================================================
     DASHBOARD CONTAINER - Rich Layered Background
     ========================================================================== */
  .dashboard-section {
    padding: 0 !important;
    max-width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg-subtle);
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ==========================================================================
     HEADER - Premium with Solid Background
     ========================================================================== */
  .dash-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px) + var(--android-status-bar-height, 0px));
    margin-bottom: 0;
    gap: 16px;
    position: relative;
    z-index: 1;
    background: var(--bg-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .dash-greeting {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 0;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
  }

  .greeting-text {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
    flex-shrink: 0;
  }

  .greeting-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* ==========================================================================
     ACCOUNT - Hide desktop, show mobile overflow button
     ========================================================================== */
  .dash-account-desktop {
    display: none !important;
  }

  .dash-account.dash-account-mobile {
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
    width: auto !important; /* Override dashboard.css width: 100% */
  }

  /* Mobile overflow button (avatar + badge) */
  .dash-overflow-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .dash-overflow-btn:active {
    transform: scale(0.97);
    background: var(--bg-subtle);
  }

  .dash-overflow-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dash-overflow-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  /* ==========================================================================
     DASHBOARD OVERFLOW DRAWER - Bottom sheet style
     ========================================================================== */
  .dash-overflow-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 299;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-slow);
  }

  .dash-overflow-backdrop.visible {
    opacity: 1;
    visibility: visible;
  }

  .dash-overflow-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border-radius: 24px 24px 0 0;
    z-index: 300;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom, 20px);
    box-shadow:
      0 -10px 40px rgba(0, 0, 0, 0.15),
      0 -4px 16px rgba(0, 0, 0, 0.08);
  }

  .dash-overflow-drawer.visible {
    transform: translateY(0);
  }

  .dash-overflow-drawer.hidden {
    display: block !important; /* Override .hidden for animation */
  }

  /* Drawer handle */
  .drawer-handle {
    width: 36px;
    height: 4px;
    background: var(--border-light);
    border-radius: var(--radius-full);
    margin: 12px auto 0;
  }

  /* Drawer header with user info */
  .drawer-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 16px;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
    margin: 0 8px;
    width: calc(100% - 16px);
  }

  .drawer-header:active {
    background: var(--bg-hover);
  }

  .drawer-profile-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: auto;
  }

  .drawer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .drawer-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .drawer-user-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .drawer-user-email {
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .drawer-status-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 5px 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--border-light);
    color: var(--text-muted);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }

  .drawer-status-badge.subscribed {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border-color: #bbf7d0;
  }

  .drawer-status-badge.canceling {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border-color: #fde68a;
  }

  /* Drawer divider */
  .drawer-divider {
    height: 1px;
    background: var(--bg-subtle);
    margin: 0 20px;
  }

  /* Drawer menu */
  .drawer-menu {
    padding: 8px 12px 12px;
  }

  .drawer-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
  }

  .drawer-menu-item:active {
    background: var(--bg-hover);
  }

  .drawer-menu-item svg {
    color: var(--brand-primary);
    flex-shrink: 0;
  }

  .drawer-menu-text {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
  }

  /* Logout item styling */
  .drawer-logout svg {
    color: #ef4444;
  }

  .drawer-logout .drawer-menu-text {
    color: #ef4444;
  }

  /* Toggle switch in drawer */
  .drawer-toggle {
    flex-shrink: 0;
  }

  .drawer-toggle-track {
    width: 50px;
    height: 30px;
    background: var(--border-medium);
    border-radius: 15px;
    position: relative;
    transition: background 0.2s ease;
    cursor: pointer;
  }

  .drawer-toggle-track.active {
    background: var(--brand-primary);
  }

  .drawer-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: var(--bg-white);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .drawer-toggle-track.active .drawer-toggle-thumb {
    transform: translateX(20px);
  }

  /* Sound waves visibility based on toggle state */
  .drawer-toggle-track:not(.active) ~ svg .sound-waves,
  #drawerSpeakToggle:has(.drawer-toggle-track:not(.active)) svg .sound-waves {
    opacity: 0.3;
  }

  /* Audio Group - Dashboard Drawer */
  .drawer-audio-group {
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    margin: 0 0 8px 0;
    overflow: hidden;
  }

  .drawer-speak-row {
    border-radius: 12px 12px 0 0;
  }

  .drawer-speed-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 16px 56px;
    transition: opacity 0.2s ease;
  }

  /* Disabled state when speak is off */
  .drawer-audio-group.speak-disabled .drawer-speed-row {
    opacity: 0.4;
    pointer-events: none;
  }

  .drawer-speed-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-light);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
  }

  .drawer-speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: var(--brand-gradient);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
  }

  .drawer-speed-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--brand-gradient);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
  }

  .drawer-speed-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-primary);
    min-width: 45px;
    text-align: right;
  }

  /* ==========================================================================
     MOBILE LANGUAGE DRAWER - Bottom Sheet
     ========================================================================== */
  .mobile-lang-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 299;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-slow);
  }

  .mobile-lang-backdrop.visible {
    opacity: 1;
    visibility: visible;
  }

  .mobile-lang-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border-radius: 24px 24px 0 0;
    z-index: 300;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom, 20px);
    box-shadow:
      0 -10px 40px rgba(0, 0, 0, 0.15),
      0 -4px 16px rgba(0, 0, 0, 0.08);
    max-height: 70vh;
    overflow-y: auto;
  }

  .mobile-lang-drawer.visible {
    transform: translateY(0);
  }

  .mobile-lang-drawer.hidden {
    display: block !important;
  }

  .mobile-lang-drawer-handle {
    width: 36px;
    height: 4px;
    background: var(--border-light);
    border-radius: var(--radius-full);
    margin: 12px auto 0;
  }

  .mobile-lang-drawer-header {
    padding: 16px 20px 12px;
  }

  .mobile-lang-drawer-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
  }

  .mobile-lang-drawer-content {
    padding: 0 16px 20px;
  }

  .mobile-lang-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .mobile-lang-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-hover);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .mobile-lang-option:active {
    transform: scale(0.97);
    background: var(--bg-subtle);
  }

  .mobile-lang-option.selected {
    background: #ede9fe;
    border-color: var(--brand-primary);
  }

  .mobile-lang-option-flag {
    font-size: 1.5rem;
    line-height: 1;
  }

  .mobile-lang-option-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .mobile-lang-option.selected .mobile-lang-option-name {
    color: var(--brand-primary);
  }

  .mobile-lang-more {
    margin-top: 16px;
    text-align: center;
  }

  .mobile-lang-more-btn {
    padding: 12px 24px;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .mobile-lang-more-btn:active {
    background: var(--bg-hover);
  }

  /* Extra languages (hidden initially, shown on expand) */
  .mobile-lang-extra {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
  }

  .mobile-lang-extra.hidden {
    display: none;
  }

  .mobile-lang-extra-label {
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    color: var(--label-color);
    text-transform: uppercase;
    letter-spacing: var(--label-letter-spacing);
    margin-bottom: 12px;
    padding-left: 4px;
  }

  .mobile-lang-more.hidden {
    display: none;
  }

  /* ==========================================================================
     HERO SECTION - White Card Background
     ========================================================================== */
  .dash-main-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 20px;
    background: var(--bg-white);
    position: relative;
    z-index: 1;
  }

  .dash-hero {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    border-radius: var(--radius-xl);
    padding: 32px 24px;
    min-height: auto;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow:
      0 10px 40px -10px rgba(99, 102, 241, 0.5),
      0 4px 12px -4px rgba(139, 92, 246, 0.3);
  }

  /* Subtle shimmer overlay */
  .dash-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 100%);
    border-radius: 20px 20px 0 0;
    pointer-events: none;
  }

  /* Ambient orb decoration */
  .dash-hero::after {
    content: "";
    position: absolute;
    top: -30%;
    right: -20%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
    pointer-events: none;
  }

  .hero-content {
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .hero-context {
    margin-bottom: 16px !important;
  }

  .hero-context {
    display: none; /* Hide "Ready for more practice?" on mobile - redundant with motivator pill */
  }

  .on-timer .hero-context {
    display: block; /* Show label pill on upgrade hero */
  }

  .hero-label {
    font-size: var(--label-font-size);
    letter-spacing: var(--label-letter-spacing);
    font-weight: var(--label-font-weight);
    color: var(--label-color-light);
  }

  .hero-insight {
    margin-bottom: auto !important;
  }

  .hero-title {
    font-size: 1.5rem;
    margin: 0 0 6px 0;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .hero-subtitle {
    font-size: 0.9rem;
    margin: 0 0 24px 0;
    opacity: 0.85;
    font-weight: 500;
  }

  .hero-scenario {
    font-size: 1.75rem;
  }

  /* CTA Button */
  .hero-cta {
    width: 100%;
    padding: 16px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    gap: 10px;
    background: var(--bg-white);
    color: #6366f1;
    border: none;
    box-shadow:
      0 4px 14px -2px rgba(0, 0, 0, 0.12),
      0 2px 6px -1px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-base);
  }

  .hero-cta:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
  }

  .hero-cta .cta-icon {
    font-size: 1.1rem;
  }

  .hero-alt {
    display: inline-flex;
    align-items: center;
    margin: 6px auto 0;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 10px 18px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
  }

  .hero-alt:active {
    background: rgba(255, 255, 255, 0.25);
  }

  /* Plain text style for timer info on on-timer hero */
  .dash-hero.on-timer .hero-alt {
    background: none;
    border: none;
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.7);
    cursor: default;
  }

  .dash-hero.on-timer .hero-alt:active {
    background: none;
  }

  /* ==========================================================================
     MOTIVATOR - Sidebar hidden, but show inline in hero
     ========================================================================== */
  .dash-motivator {
    display: none !important;
  }

  /* Mobile motivator - shown inside hero on mobile */
  .hero-motivator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 16px auto;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    width: fit-content;
  }

  .hero-motivator-icon {
    font-size: 1rem;
  }

  .hero-motivator-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
  }

  /* ==========================================================================
     QUICK PRACTICE - White Section with Cards
     ========================================================================== */
  .dash-actions {
    padding: 20px;
    margin: 0;
    background: var(--bg-white);
    border-top: 1px solid var(--bg-subtle);
    position: relative;
    z-index: 1;
  }

  /* Remove any ::after pseudo-element (no horizontal scroll fade needed) */
  .dash-actions::after {
    display: none;
  }

  .dash-actions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0;
  }

  .dash-actions-header .section-label {
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    letter-spacing: var(--label-letter-spacing);
    color: var(--label-color);
    text-transform: uppercase;
    margin: 0;
  }

  /* Language Switch Pill */
  .language-switch-btn {
    padding: 6px 12px 6px 10px;
    height: 36px;
    gap: 6px;
    border-radius: var(--radius-full);
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    transition: all var(--transition-fast);
  }

  .language-switch-btn:active {
    transform: scale(0.97);
    background: var(--bg-subtle);
  }

  .current-lang-flag {
    font-size: 1rem;
  }

  .current-lang-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .switch-arrow {
    width: 10px;
    height: 10px;
    opacity: 0.4;
  }

  /* Language Dropdown - Premium Bottom Sheet */
  .language-dropdown-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 70vh;
    border-radius: 28px 28px 0 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow:
      0 -20px 60px rgba(0, 0, 0, 0.15),
      0 -8px 24px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 1);
    animation: slideUpSheet 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 200;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 24px);
  }

  /* Sheet handle indicator */
  .language-dropdown-menu::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--border-light);
    border-radius: var(--radius-full);
  }

  @keyframes slideUpSheet {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .dropdown-section {
    padding: 16px 20px;
    margin-top: 8px;
  }

  .dropdown-label {
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    letter-spacing: var(--label-letter-spacing);
    color: var(--label-color);
    text-transform: uppercase;
    padding: 12px 16px 8px;
  }

  .dropdown-lang-btn {
    padding: 16px 18px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
  }

  .dropdown-lang-btn:active {
    background: var(--bg-subtle);
  }

  .dropdown-more-btn {
    padding: 18px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6366f1;
  }

  /* Language dropdown backdrop */
  .language-dropdown-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 199;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-slow);
  }

  .language-dropdown-backdrop.visible {
    opacity: 1;
    visibility: visible;
  }

  /* Action Grid - Collapsible rows */
  .action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 4px 0 8px;
  }

  /* Hide cards beyond first row when collapsed */
  .dash-actions:not(.expanded) .action-card:nth-child(n+5) {
    display: none;
  }

  /* Scenario Cards - Clean with subtle border */
  .action-card {
    flex: 0 0 auto;
    width: auto;
    min-width: unset;
    padding: 14px 8px 12px;
    border-radius: var(--radius-md);
    gap: 6px;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    transition: all var(--transition-fast);
  }

  .action-card:active {
    transform: scale(0.96);
    background: var(--bg-subtle);
    border-color: #cbd5e1;
  }

  .action-emoji {
    font-size: 1.5rem;
  }

  .action-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.2;
  }

  /* Special cards with accent - Random first */
  .action-card-random {
    order: -1; /* Move random to first position */
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: #ddd6fe;
  }

  .action-card-custom {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: #ddd6fe;
  }

  .action-card-random:active,
  .action-card-custom:active {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  }

  /* More scenarios button - mobile */
  .more-scenarios-btn {
    margin-top: 12px;
    padding: 10px 14px;
    font-size: 12px;
  }

  /* Expand/collapse button for scenarios */
  .action-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    background: none;
    border: none;
    color: var(--brand-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .action-expand-btn:active {
    opacity: 0.7;
  }

  .action-expand-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
  }

  .dash-actions.expanded .action-expand-btn svg {
    transform: rotate(180deg);
  }

  .dash-actions.expanded .action-expand-btn .expand-text {
    display: none;
  }

  .dash-actions:not(.expanded) .action-expand-btn .collapse-text {
    display: none;
  }

  /* ==========================================================================
     LANGUAGE BAR - Hidden (using inline pill)
     ========================================================================== */
  .mobile-language-bar {
    display: none;
  }

  /* ==========================================================================
     RECENT SESSIONS - Inline Section (Mobile)
     ========================================================================== */

  /* Hide legacy element */
  .dash-recent {
    display: none !important;
  }

  /* Hide the desktop Quick Practice section on mobile */
  .dash-actions {
    display: none !important;
  }

  /* But allow the language dropdown to show (it's position:fixed so it works independently) */
  .dash-actions .language-dropdown-menu:not(.hidden) {
    display: block !important;
  }

  /* Show inline Recent Sessions (mobile) - override desktop hide */
  .dashboard-section .dash-recent-inline {
    display: block !important;
    margin-top: 24px;
    padding: 0px 16px 76px;
  }

  .dash-recent-inline .section-label {
    font-size: 14px;
    font-weight: 500;
    color: #b0b8c4;
    text-transform: uppercase;
    letter-spacing: var(--label-letter-spacing);
    margin-bottom: 12px;
  }

  .recent-inline-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .recent-inline-list .empty-message {
    font-size: 0.85rem;
    color: #94a3b8;
    text-align: center;
    padding: 24px 16px;
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    border: 1px dashed #e2e8f0;
  }

  /* Session items inline */
  .recent-inline-list .session-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    gap: 14px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .recent-inline-list .session-item:active {
    background: var(--bg-hover);
    border-color: #cbd5e1;
  }

  .session-flag {
    font-size: 1.4rem;
    flex-shrink: 0;
  }

  .session-info {
    flex: 1;
    min-width: 0;
  }

  .session-language {
    display: none;
  }

  .session-scenario {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
  }

  .session-goals {
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .session-time {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
    flex-shrink: 0;
  }

  .session-stats {
    display: none;
  }

  /* ==========================================================================
     QUICK PRACTICE - Bottom Tray + Drawer (Mobile)
     ========================================================================== */

  /* Show mobile elements (override desktop hide) */
  .dashboard-section .quick-practice-tray,
  .dashboard-section .quick-practice-backdrop,
  .dashboard-section .quick-practice-drawer {
    display: flex !important;
  }

  /* Bottom tray - fixed at bottom with preview cards */
  .quick-practice-tray {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-top: 2px solid var(--color-primary);
    box-shadow: 0 -8px 24px rgba(102, 126, 234, 0.15);
    z-index: 50;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* Tray header - tappable to expand */
  .practice-tray-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px 16px;
    cursor: default;
  }

  .practice-tray-label {
    font-size: .9rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: var(--label-letter-spacing);
  }

  .practice-tray-arrow {
    color: #cbd5e1;
    transition: transform 0.2s ease;
  }

  .practice-tray-header:active .practice-tray-arrow {
    transform: translateY(-2px);
  }

  /* Mobile language switch button */
  .mobile-lang-switch-btn {
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition-fast);
    height: 36px !important;
    min-height: 36px !important;
    display: block;
  }

  .mobile-lang-switch-btn:active {
    background: var(--border-light);
    transform: scale(0.97);
  }

  .mobile-lang-flag {
    font-size: 0.9rem;
    line-height: 1;
    margin-right: 6px;
  }

  .mobile-lang-name {
    margin-right: 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .mobile-lang-arrow {
    color: #94a3b8;
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
  }

  .mobile-lang-switch-btn[aria-expanded="true"] .mobile-lang-arrow {
    transform: rotate(180deg);
  }

  /* Tray preview - grid of square cards that fill width */
  .practice-tray-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 16px 14px;
  }

  /* Tray cards - square style */
  .practice-tray-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 6px;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    aspect-ratio: 1;
    min-width: 0; /* Allow card to shrink */
    overflow: hidden;
  }

  .practice-tray-card:active {
    transform: scale(0.95);
    background: var(--bg-subtle);
    border-color: #cbd5e1;
  }

  .tray-card-icon {
    font-size: 1.8rem;
    line-height: 1;
  }

  .tray-card-title {
    margin-top: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* More button styling */
  .practice-tray-more {
    background: var(--brand-gradient);
    border-color: transparent;
  }

  .practice-tray-more .tray-card-icon {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
  }

  

  .practice-tray-more .tray-card-title {
    color: rgba(255, 255, 255, 0.95);
  }

  .practice-tray-more:active {
    opacity: 0.9;
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4292 100%);
  }

  /* Backdrop */
  .quick-practice-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 299;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-slow);
  }

  .quick-practice-backdrop.visible {
    opacity: 1;
    visibility: visible;
  }

  /* Drawer - slides up from bottom */
  .quick-practice-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 60px;
    background: var(--bg-hover);
    border-radius: 24px 24px 0 0;
    z-index: 300;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .quick-practice-drawer.visible {
    transform: translateY(0);
  }

  .quick-practice-drawer.hidden {
    display: flex !important; /* Override .hidden for animation */
  }

  /* Drawer header */
  .practice-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    background: var(--bg-white);
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
  }

  .practice-drawer-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .practice-drawer-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
  }

  .practice-drawer-lang-badge {
    font-size: 1.1rem;
    line-height: 1;
  }

  .practice-drawer-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border: none;
    border-radius: 50%;
    color: #64748b;
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .practice-drawer-close:active {
    background: var(--border-light);
    transform: scale(0.95);
  }

  /* Drawer content - scrollable */
  .practice-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }

  /* Drawer grid - 2 columns */
  .practice-drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Drawer cards - larger with descriptions */
  .practice-drawer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    gap: 8px;
  }

  .practice-drawer-card:active {
    transform: scale(0.97);
    background: var(--bg-hover);
    border-color: #cbd5e1;
  }

  .practice-card-emoji {
    font-size: 2rem;
  }

  .practice-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
  }

  .practice-card-desc {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.3;
  }

  /* Special cards */
  .practice-card-random {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: #ddd6fe;
  }

  .practice-card-random:active {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  }

  .practice-card-custom {
    background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
    border-color: #f5d0fe;
  }

  .practice-card-custom:active {
    background: linear-gradient(135deg, #fae8ff 0%, #f5d0fe 100%);
  }

  /* All scenarios section in drawer (grouped by difficulty) */
  .practice-drawer-all-section {
    margin-top: 20px;
    padding-top: 32px;
    border-top: 1px solid var(--border-light);
  }

  .practice-drawer-all-section .scenario-difficulty-section {
    margin-bottom: 20px;
  }

  .practice-drawer-all-section .scenario-difficulty-section:last-child {
    margin-bottom: 0;
  }

  .practice-drawer-all-section .scenario-difficulty-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  .practice-drawer-all-section .scenario-difficulty-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .practice-drawer-all-section .scenario-difficulty-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--bg-light);
    color: var(--text-secondary);
  }

  .practice-drawer-all-section .scenario-difficulty-section[data-level="1"] .scenario-difficulty-badge {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.08) 100%);
    color: #16a34a;
  }

  .practice-drawer-all-section .scenario-difficulty-section[data-level="2"] .scenario-difficulty-badge {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
    color: #2563eb;
  }

  .practice-drawer-all-section .scenario-difficulty-section[data-level="3"] .scenario-difficulty-badge {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    color: #d97706;
  }

  .practice-drawer-all-section .scenario-difficulty-section[data-level="4"] .scenario-difficulty-badge {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%);
    color: #dc2626;
  }

  .practice-drawer-all-section .scenario-difficulty-section[data-level="5"] .scenario-difficulty-badge {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%);
    color: #7c3aed;
  }

  .practice-drawer-all-section .scenario-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .practice-drawer-all-section .scenario-modal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 8px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    gap: 6px;
  }

  .practice-drawer-all-section .scenario-modal-card:active {
    transform: scale(0.97);
    background: var(--bg-hover);
    border-color: #cbd5e1;
  }

  .practice-drawer-all-section .scenario-modal-card .card-emoji {
    font-size: 1.5rem;
  }

  .practice-drawer-all-section .scenario-modal-card .card-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
  }

  /* ==========================================================================
     GENTLE ENCOURAGEMENT - Hidden (keeping it minimal)
     ========================================================================== */
  .mobile-encouragement {
    display: none;
  }

  /* ==========================================================================
     BOTTOM SPACER - Space for fixed bottom tray
     ========================================================================== */
  .dashboard-section::after {
    content: "";
    display: block;
    height: calc(120px + env(safe-area-inset-bottom, 0px));
    background: transparent;
  }

  /* ==========================================================================
     SETUP SECTION - Mobile Friendly Language & Scenario Selection
     ========================================================================== */

  .setup-section {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    background: var(--bg-hover);
    display: flex;
    flex-direction: column;
  }

  .setup-subhead {
    padding: 0px 16px;
  } 


  .setup-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow-y: auto;
  }

  /* Step Header - Fixed at top like conversation header */
  .step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px) + var(--android-status-bar-height, 0px));
    background: var(--bg-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: 24px;
    height: auto;
    min-height: 80px;
  }

  .step-header h2 {
    flex: 1;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #667eea !important;
    margin: 0 !important;
  }

  .history-user-grouped .feedback-collapse-content .feedback-text {
    font-size: 14px;
  }

  /* Back button in setup - icon only on mobile */
  .step-header .back-btn,
  #backToDashboardBtn,
  #backToLanguageBtn {
    padding: 0;
    width: 44px;
    height: 44px;
    min-width: unset;
    background: transparent;
    border: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step-header .back-btn .back-btn-text,
  #backToDashboardBtn .back-btn-text,
  #backToLanguageBtn .back-btn-text {
    display: none;
  }

  .step-header .back-btn .back-arrow,
  #backToDashboardBtn .back-arrow,
  #backToLanguageBtn .back-arrow {
    width: 24px;
    height: 24px;
    stroke: var(--text-primary);
  }

  .step-header .back-btn:active,
  #backToDashboardBtn:active,
  #backToLanguageBtn:active {
    background: var(--bg-subtle);
    border-radius: 50%;
    transform: scale(0.95);
  }

  /* Step badge in scenario step */
  .step-badge {
    padding: 6px 12px;
    font-size: 0.7rem;
    border-radius: var(--radius-full);
  }

  /* Subtitle */
  .setup-section .subtitle-2 {
    padding: 0px 16px 0;
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: #64748b;
  }

  /* Language Grid - 2 column compact grid */
  .language-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 8px 16px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    margin: 0;
  }

  /* Language Cards - Taller touch targets */
  .language-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 16px;
    min-height: 56px;
    border-radius: var(--radius-md);
    gap: 12px;
    background: var(--bg-white);
    border: 1.5px solid var(--border-light);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.1s ease-out;
  }

  /* Show flag icon on mobile */
  .language-card .lang-flag-icon {
    display: flex !important;
    font-size: 1.4rem;
    flex-shrink: 0;
  }

  /* Hide the language code badge on mobile */
  .language-card::before {
    display: none;
  }

  .language-card .lang-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .language-card:hover {
    transform: none;
    box-shadow: none;
  }

  .language-card:active {
    transform: scale(0.96);
    background: linear-gradient(135deg, #f0f4ff 0%, #e8edff 100%);
    border-color: var(--brand-primary);
    box-shadow: inset 0 1px 3px rgba(102, 126, 234, 0.15);
    transition: all 0.06s ease-out;
  }

  /* Selected language card */
  .language-card.selected {
    background: var(--brand-gradient);
    border-color: transparent;
    transform: none;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }

  .language-card.selected .lang-name {
    color: #ffffff;
  }

  .language-card.selected::after {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    animation: none;
  }

  .language-card.selected .lang-flag-icon {
    transform: none;
    filter: none;
  }

 

  /* More languages dropdown */
  .language-dropdown {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 0px !important;
        gap: 0px !important;

  }

  .language-dropdown .dropdown-label {
    display: flex;
    align-items: center;
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    color: var(--label-color);
    text-transform: uppercase;
    letter-spacing: var(--label-letter-spacing);
    padding: 8px;
  }

  .language-select {
    width: 100%;
    padding: 14px 16px;
    font-size: 0.95rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--bg-white);
    color: var(--text-secondary);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
  }

  .language-select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  }

  /* Setup Footer - Fixed at bottom */
  #languageStep .setup-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px;
    background: var(--bg-white);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    z-index: 10;
  }

  .selected-pill {
    flex: 1;
    padding: 10px 14px;
    font-size: 0.8rem;
    text-align: left;
    background: var(--bg-subtle);
    border-color: #e2e8f0;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .selected-pill.has-selection {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-color: rgba(102, 126, 234, 0.3);
    color: #5b21b6;
  }

  .setup-footer .primary-btn,
  #continueBtn,
  #startBtn {
    padding: 16px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 28px;
    flex-shrink: 0;
    min-width: 120px;
    background: var(--brand-gradient);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35);
  }

  .setup-footer .primary-btn:disabled,
  #continueBtn:disabled,
  #startBtn:disabled {
    opacity: 0.5;
  }

  /* ==========================================================================
     SCENARIO STEP - Mobile Styles
     ========================================================================== */

  #scenarioStep {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-white);
  }

  /* Scenario step title */
  #scenarioStep .step-header + h2,
  #scenarioStep > h2 {
    padding: 0px 16px 0px;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
  }

  /* Quick scenario preset buttons - 2x2 grid */
  #scenarioStep .preset-scenarios {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 20px;
    margin-bottom: 16px;
    margin-top: 0px !important;
    padding-top: 16px !important;
  }

  

.preset-hint {
  font-size: 11px;
  bottom: -8px;
}

.setup-subhead {
  margin-bottom: 24px;
}
  
  .preset-btn {
    padding: 16px 12px;
    font-size: 1.3rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-align: center;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

 
  .preset-btn:hover {
    transform: none;
    box-shadow: none;
  }

  .preset-btn:active {
    background: var(--bg-subtle);
    border-color: var(--brand-primary);
    transform: scale(0.97);
  }

  

  /* Generate scenario button - above start button */
  #scenarioStep .generate-scenario-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 0 20px;
    margin-bottom: 24px;
    margin-top: auto;
  }

.generated-scenario {
  margin: 16px 16px;
}

  /* Scenario alternatives - inline text links on mobile */
  .scenario-alternatives {
    margin: 0px 0 16px;
  }

  #generateScenarioBtn:active {
    opacity: 0.7;
  }

  #startBtn {
  margin-top: 0px;
}



.history-turn.user .feedback-text .correction-from {

  color: black !important;
  font-size: 14px };


  /* Form container - keep grouped */
  #scenarioStep > .scenario-form-container {
    width: 100%;
    padding: 0 20px;
    margin-top: 0px;
  }

  /* Form section */
  #scenarioStep .scenario-form-container .form-group {
    margin-bottom: 8px;
    padding: 0px;
  }

  .setup-cta-group {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: white;
    gap: 16px;
    z-index: 100;
  }

  .setup-reassurance {
    order: -1;
    margin: 0;
    text-align: center;
    margin-bottom: 80px;
  }

  .setup-step .form-group label {
    display: block;
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    color: var(--label-color);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: var(--label-letter-spacing);
  }

  .setup-step .form-group input,
  .setup-step .form-group textarea {
    padding: 14px 16px;
    font-size: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--bg-hover);
    transition: all var(--transition-fast);
    width: 100%;
    box-sizing: border-box;
  }

  /* Scenario textarea - auto-grow */
  .setup-step .form-group textarea#scenario {
    min-height: 48px;
    max-height: 120px;
    resize: none;
    overflow-y: hidden;
    line-height: 1.4;
  }

  /* Character count for scenario */
  .form-group .char-count {
    display: block;
    text-align: right;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .form-group .char-count.visible {
    opacity: 1;
  }

  .form-group .char-count.limit-reached {
    color: #ef4444;
  }

  .setup-step .form-group input::placeholder,
  .setup-step .form-group textarea::placeholder {
    color: #94a3b8;
  }

  .setup-step .form-group input:focus,
  .setup-step .form-group textarea:focus {
    background: var(--bg-white);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  }
  

  /* Start button - fixed at bottom, matching Continue button style */
  #scenarioStep #startBtn,
  #scenarioStep .btn-block {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 16px 16px;
    margin-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    padding: 16px 16px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 28px;
    background: var(--brand-gradient);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35);
    z-index: 10;
    width: calc(100% - 32px);
  }

  #scenarioStep #startBtn:active {
    opacity: 0.95;
    transform: scale(0.98);
  }

  /* Add bottom padding to scenario step for fixed button */
  #scenarioStep::after {
    content: "";
    display: block;
    height: calc(72px + env(safe-area-inset-bottom, 0px));
    order: 99;
  }

}

/* ==========================================================================
   MOBILE DASHBOARD - LARGE PHONE ADJUSTMENTS (375px - 430px)
   Slightly larger dimensions for Pro Max, Plus, and large Android phones
   ========================================================================== */
@media (min-width: 376px) and (max-width: 430px) {

  /* Header - Larger */
  .dash-header {
    padding: 10px 24px 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px) + var(--android-status-bar-height, 0px));
  }

  .greeting-text {
    font-size: 1rem;
  }

  .greeting-name {
    font-size: 1.35rem;
  }

  .account-avatar-sm {
    width: 36px;
    height: 36px;
  }

  .icon-btn {
    width: 42px;
    height: 42px;
  }

  /* Hero - More spacious */
  .dash-main-grid {
    padding: 28px 24px;
  }

  .dash-hero {
    padding: 40px 32px;
    border-radius: 24px;
  }

  .hero-context {
    font-size: 0.95rem;
  }

  .hero-motivator-pill {
    padding: 10px 18px;
  }

  .hero-motivator-text {
    font-size: 0.9rem;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 28px;
  }

  .hero-cta {
    padding: 20px 32px;
    font-size: 1.15rem;
    border-radius: var(--radius-lg);
  }

  .hero-alt {
    font-size: 0.95rem;
    padding: 12px 20px;
  }

  /* Recent sessions section */
  .recent-section-title {
    font-size: 0.85rem;
  }

  /* Scenario cards - Larger */
  .dash-actions {
    padding: 24px;
  }

  .section-title {
    font-size: 0.85rem;
  }

  .action-grid {
    gap: 16px;
  }

  .action-card {
    padding: 18px 12px 16px;
    border-radius: var(--radius-lg);
  }

  .action-emoji {
    font-size: 1.8rem;
  }

  .action-title {
    font-size: 0.85rem;
  }

  /* Recent sessions drawer - Larger */
  .recent-drawer-content .session-item {
    padding: 20px;
    border-radius: var(--radius-lg);
  }

  .session-flag {
    font-size: 1.8rem;
  }

  .session-scenario {
    font-size: 1.1rem;
  }

  .session-goal {
    font-size: 0.9rem;
  }

  .session-time {
    font-size: 0.85rem;
  }

  /* Conversation input */
  .input-container {
    padding: 16px 20px;
  }

  .user-input {
    font-size: 1.1rem;
  }
.input-wrapper #sendBtn {  width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;}
  .mic-btn {
      width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    font-size: 1.4rem;
  }

  .send-btn {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    

  }

  #sendBtn {
      width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;
    max-height: 48px;
  }

  /* Messages - Larger text */
  .message-bubble {
    padding: 16px 20px;
    font-size: 1.1rem;
  }

  /* Suggestions */
  .suggestion-btn {
    padding: 14px 20px;
    font-size: 1rem;
    border-radius: var(--radius-lg);
  }

   .setup-cta-group {
    padding-bottom: 0px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
 
  }

  /* Language picker pill */
  .lang-picker-pill {
    padding: 10px 16px;
    font-size: 0.95rem;
  }

 

  /* Scenario pills in picker */
  .scenario-pill {
    padding: 10px 14px;
    font-size: 0.9rem;
  }

  /* More button */
  .more-btn {
    width: 72px;
    height: 72px;
    font-size: 1.1rem;
  }

  /* Coach feedback elements */
  .coach-tip {
    font-size: 0.95rem;
    padding: 14px 18px;
  }

  .correction-box {
    padding: 14px 18px;
    font-size: 0.95rem;
  }
  

  .input-wrapper {
    border-radius: 33px;
  }

    #sendBtn {
    width: 48px;
    height: 48px;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: unset;
    max-height: unset;
    padding: 0;
    font-size: 0;
    font-weight: 600;
    border-radius: 50%;
    border: none;
    background: var(--brand-gradient);
    color: #ffffff;
    cursor: pointer;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    order: 2; /* Send button on the right */
    align-self: flex-end;
  }

  /* Listening indicator */
  .listening-indicator {
    font-size: 0.95rem;
    padding: 12px 20px;
  }

  /* Session context pill */
  .session-context {
    padding: 0px 16px;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   MOBILE DASHBOARD - SMALL SCREEN ADJUSTMENTS (< 375px)
   ========================================================================== */
@media (max-width: 375px) {

  /* Header - Tighter spacing */
  .dash-header {
    padding: 10px 16px 10px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px) + var(--android-status-bar-height, 0px));
  }

  .input-wrapper #sendBtn {  width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;}
  .mic-btn {
      width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    font-size: 1.4rem;
  }

  .greeting-name {
    font-size: 1.05rem;
  }

  .account-avatar-sm {
    width: 26px;
    height: 26px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  /* Hero - Compact */
  .dash-main-grid {
    padding: 24px 16px;
  }

  .dash-hero {
    padding: 28px 20px;
    border-radius: 18px;
  }

  .hero-title {
    font-size: 1.35rem;
  }

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

  .hero-cta {
    padding: 14px 20px;
    font-size: 0.95rem;
    border-radius: var(--radius-md);
  }

  .hero-alt {
    font-size: 0.8rem;
    padding: 8px 14px;
  }

  /* Scenario cards - Compact */
  .dash-actions {
    padding: 16px;
  }

     .setup-reassurance {

    margin-bottom: 56px;
  }

  .action-grid {
    gap: 8px;
  }

  .action-card {
    padding: 12px 6px 10px;
    border-radius: var(--radius-md);
  }

  .action-emoji {
    font-size: 1.3rem;
  }

  .action-title {
    font-size: 0.65rem;
  }

  /* Recent sessions drawer - Compact */
  .recent-drawer-content .session-item {
    padding: 14px;
    border-radius: var(--radius-md);
  }

  .session-flag {
    font-size: 1.35rem;
  }

  /* Conversation section small screen adjustments */
  .ai-text {
    font-size: 0.95rem;
  }

  .session-context {
    max-width: 140px;
  }

  .context-scenario {
    font-size: 0.9rem;
  }

  .feedback-text {
    font-size: 0.75rem;
  }

  .hints-list li {
    font-size: 0.8rem;
    padding: 8px 10px;
  }

  /* Setup section small screen adjustments */
  .step-header h2 {
    font-size: 1rem !important;
  }

  .language-card {
    padding: 16px 14px;
    gap: 10px;
    min-height: 52px;
  }

  .language-card {
    height: 80px;
  }

  .language-card .lang-flag-icon {
    font-size: 1.3rem;
  }

  .language-card .lang-name {
    font-size: 0.95rem;
  }

  .setup-footer {
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }

  .selected-pill {
    padding: 8px 12px;
    font-size: 0.75rem;
  }

  .setup-footer .primary-btn,
  #continueBtn {
    padding: 14px 20px;
    font-size: 0.95rem;
    min-width: 100px;
    border-radius: 28px;
  }

  /* Scenario step small screen */
  #scenarioStep > h2 {
    padding: 20px 16px 12px;
    font-size: 1.1rem !important;
  }

  #scenarioStep .quick-scenarios:nth-of-type(2)::before {
    font-size: 0.65rem;
    margin-bottom: 10px;
  }

  #scenarioStep .quick-scenarios:first-of-type,
  #scenarioStep .quick-scenarios:nth-of-type(2) {
    padding: 16px 16px;
  }

  #scenarioStep .quick-scenarios:nth-of-type(2) {
    gap: 12px;
    margin-bottom: 20px;
  }

  .preset-btn {
    padding: 14px 10px;
    font-size: 1.1rem;
  }

  #generateScenarioBtn {
    padding: 12px 16px;
    font-size: 0.85rem;
  }

  #scenarioStep .quick-scenarios:first-of-type {
    margin-bottom: 24px;
  }

  #scenarioStep .quick-scenarios:first-of-type::before {
    font-size: 0.7rem;
    margin-bottom: 12px;
  }

  #scenarioStep .form-group {
    padding: 0 16px;
    margin-bottom: 14px;
  }

  .quick-scenarios {
    margin-top: auto !important;
  }

  .setup-step .form-group label {
    font-size: var(--label-font-size);
  }

  #scenarioStep #startBtn {
    padding: 14px 20px;
    margin: 16px 16px;
    font-size: 0.95rem;
    width: calc(100% - 32px);
    margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* ==========================================================================
     CONVERSATION SCREEN - Small Screen Density (iPhone SE)
     ========================================================================== */

  /* Tighter message stack spacing */
  .mobile-message-stack {
    gap: 12px;
    padding: 1rem 12px;
    padding-bottom: 48px;
  }

  /* AI message - more compact */
  .stack-ai-message {
    padding: 6px 10px;
    max-width: 92%;
  }

  .stack-ai-message .stack-header {
    margin-bottom: 4px;
  }

  .stack-ai-message .stack-label {
    font-size: 0.7rem;
  }

  .stack-ai-message .stack-text {
    font-size: 1.2rem;
    line-height: 1.35;
  }

  .feedback-section .feedback-text {
    font-size: 1rem;
  }

  

  /* AI message text clamping - expandable */
  .stack-ai-message .stack-text.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .stack-ai-message .stack-text.expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  /* Expand affordance */
  .stack-ai-message .expand-hint {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
    cursor: pointer;
  }

  /* User message - compact */
  .stack-user-message {
    padding: 5px 8px;
    max-width: 88%;
  }

  .stack-user-message .stack-label {
    font-size: 0.7rem;
  }

  .stack-user-message .stack-text {
    font-size: 0.9rem;
  }

  /* Feedback - compact */
  .stack-feedback {
    padding: 8px 10px;
  }

  .stack-feedback .correction-header,
  .stack-feedback .tip-header {
    font-size: 0.65rem;
  }

  /* Input area - tighter on small screens */
  .input-area {
    padding: 8px 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--android-nav-bar-height, 0px));
  }

  .input-wrapper {
    min-height: 48px;
    padding: 6px 6px 6px 12px;
  }

  /* Hints panel - compact */
  .hints-toggle {
    padding: 0.75rem 1rem;
    min-height: 40px;
  }

  .hints-toggle-text {
    font-size: 0.9rem;
  }

  .hints-content {
    padding: 0 8px 8px;
  }

  .hints-reassurance {
    font-size: 0.7rem;
  }

  .hints-list {
    gap: 3px;
  }

  .hints-list li {
    padding: 8px 10px;
    font-size: 0.88rem;
    border-radius: 8px;
  }

  .hint-text {
    line-height: 1.3;
  }

  .hint-translation {
    font-size: 0.72rem;
    margin-top: 2px;
  }

  /* Controls header - tighter */
  .controls {
    padding: 0px 12px 6px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px) + var(--android-status-bar-height, 0px));
    min-height: 4rem;
  }

  .context-scenario {
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   MOBILE LANDING PAGE - Conversion-Optimized Design
   ==========================================================================

   Design Principles:
   - Single clear goal: Get user to start their first conversation
   - Trust signals prominent but not overwhelming
   - Thumb-zone optimized CTA placement
   - Reduced cognitive load - one message at a time
   - Premium feel through white space and typography
   ========================================================================== */

@media (max-width: 768px) {

  /* ---------- LANDING CONTAINER ---------- */
  .landing {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .landing-wrap {
    min-height: 300px;
  }

  .landing-bg {
    opacity: 0.7;
  }

  .landing-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 56px 16px 40px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* ---------- HEADER - Minimal, login accessible but not prominent ---------- */
  .landing-top {
    height: auto;
    padding: 12px 0;
    padding-top: calc(12px + env(safe-area-inset-top, 0px) + var(--android-status-bar-height, 0px));
    position: relative;
    z-index: 10;
  }

  .landing-top-inner {
    padding: 0 16px;
  }

  /* Landing brand on mobile */
  .landing-brand {
    padding: 6px 10px;
  }

  .landing-brand .app-brand-tagline {
    display: none;
  }

  /* Logged-in indicator - subtle */
  .logged-in-indicator {
    display: none !important;
  }

  /* Hide login link on mobile - Sign up is priority */
  .landing-login-link {
    display: none;
  }

  /* Sign up button - minimal, top right */
  .landing-login-btn {
    padding: 12px 16px;
    font-size: 0.85rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
  }

  /* ---------- MAIN CONTENT ---------- */
 

  main {
    padding: 20px !important;
  }

   .landing-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: unset !important;
    padding: 0 !important;
    gap: 0;
  }

  /* ---------- HERO ROW - Mobile reordering ---------- */
  /* On mobile: Hero (1) → Preview (2) → Pricing (3) */
  .landing-hero-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0px;
    text-align: start;
  }

  /* Hero section: headline + subtitle + CTA + helper */
  .landing-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 0;
    width: 100%;
    order: 1;
  }

  /* Preview appears after hero */
  .landing-preview {
    order: 2;
  }

  /* Pricing link appears last on mobile */
  .landing-upgrade-link {
    order: 3;
  }

  .landing-title {
    font-size: 2.8rem !important;
    line-height: 1.3;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    padding: 0 8px;
    margin-top: 0;
    order: 1;
  }

  /* Keep the br visible on mobile for line separation */
  .landing-title br {
    display: block;
    content: "";
    margin-bottom: 8px;
  }

  /* Second line: bold and bright */
  .landing-title span {
    display: block;
    font-weight: 900;
    color: #ffffff;
    margin-top: 4px;
  }

  .landing-subtitle {
    font-size: 0.95rem;
    margin-bottom: 0;
    max-width: 100%;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
    padding: 0 8px;
    order: 2;
  }

  /* ---------- STEPS - Hidden on mobile ---------- */
  .landing-steps {
    display: none !important;
  }

  .landing .primary-btn {
    width: 100%;
    max-width: none;
  }

  /* ---------- ACTIONS - Primary CTA ---------- */
  .landing-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 8px;
    margin: 24px 0 0;
    order: 3;
  }

  #startSpeakingBtn {
    height: 56px;
    width: 100%;
        height: fit-content;

  }

  /* Hero CTA - Full width, prominent */
  .primary-btn--hero,
  button.landing-btn.primary-btn--hero {
    width: 100%;
    min-width: unset;
    max-width: none;
    padding: 18px 24px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 14px;
    gap: 8px;
    height: fit-content;
  }

  #trialBackToDashboard { 
    width: 100%;
    align-items: center;
    text-align: center;
    margin-top: 16px !important;
  }

  .cta-icon {
    font-size: 1rem;
  }

  /* Helper text under CTA */
  .landing-helper {
    font-size: 12px;
    margin-top: 4px;
    color: rgba(255,255,255,0.8);
    text-align: center;
  }

  .decision-section {
  margin-bottom: 12px;
  animation: textReveal 0.5s ease-out 0.6s both;
}

  /* Meta text under CTA (legacy) */
  .landing-meta {
    font-size: 0.8rem;
    margin-top: 8px;
    color: rgba(255,255,255,0.7);
    text-align: center;
  }

  /* ---------- PREVIEW - Styling for mobile ---------- */
  .landing-preview {
    width: 100%;
    max-width: 340px;
    margin: 96px auto 0px;
  }

  /* ---------- PRICING LINK - Tap target + mobile copy ---------- */
  .landing-upgrade-link {
    margin-top: 16px;
    padding: 12px 0;
    font-size: .9rem;
    text-align: center;
    width: 100%;
    padding-bottom: 0px;
  }

  /* Mobile: show short text, hide full */
  .upgrade-text-full { display: none !important; }
  .upgrade-text-short { display: inline !important; }

  /* ---------- PREVIEW CARD - Compressed for mobile ---------- */
  .preview-card {
    border-radius: 16px;
  }


  .preview-header {
    padding: 10px 14px;
  }

  .preview-lang-badge {
    font-size: 0.7rem;
    padding: 3px 8px;
  }

  .preview-scenario-pill {
    font-size: 0.8rem;
    padding: 5px 10px;
  }

  .preview-partner-bubble {
    margin: 12px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .preview-role-label {
    font-size: 0.6rem;
    margin-bottom: 6px;
  }

  .preview-partner-text {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .preview-inline-feedback {
    margin: 0 12px 12px;
    padding: 10px 12px;
    border-radius: 8px;
  }

  .preview-feedback-check {
    font-size: 0.85rem;
  }


  .preview-feedback-label {
    font-size: 0.65rem;
  }

  .preview-inline-feedback .preview-feedback-text {
    font-size: 0.82rem;
  }

.preview-user-bubble {
  margin: 12px 12px;
  padding: 12px 14px;
  margin-left: auto;
}

  .preview-user-msg {
    margin: 0 12px 12px;
  }

  .preview-user-label {
    font-size: 0.6rem;
  }

  .preview-user-text {
    font-size: 0.88rem;
    border-radius: 12px;
  }

  /* ---------- BENEFITS - Hidden on mobile for minimal landing ---------- */
  .landing-benefits {
    display: none !important;
  }

  /* ---------- LEGAL FOOTER - Anchored to bottom ---------- */
  .landing-footer {
    padding: 20px 16px;
    margin-top: 40px;
  }

  .footer-links {
    font-size: 12px;
    margin-bottom: 4px;
    opacity: 0.6;
  }

  .footer-divider {
    margin: 0 6px;
  }

  .footer-copyright {
    font-size: 10px;
    opacity: 0.4;
  }

  /* ---------- COOKIE BANNER - Mobile adjustments ---------- */
  .cookie-consent-banner {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .cookie-consent-text p {
    font-size: 12px;
    line-height: 1.4;
  }

  .cookie-btn {
    padding: 8px 14px;
    font-size: 13px;
  }

  #subscribeCloseX {

    top: 32px;
  }

  /* ---------- SUBSCRIBE / UPSELL LINK ---------- */
  .subscribe-link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ---------- RETURNING USER - Continue button styling ---------- */
  .landing .primary-btn--hero[id="continueConversationBtn"] {
    background: linear-gradient(135deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.12) 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.30);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  }

  .landing .primary-btn--hero[id="continueConversationBtn"]:hover,
  .landing .primary-btn--hero[id="continueConversationBtn"]:active {
    background: rgba(255,255,255,0.25);
  }

  /* ---------- BOTTOM SAFE AREA ---------- */
  .landing::after {
    display: none;
  }

  /* ---------- TOUCH INTERACTION POLISH ---------- */
  .landing .primary-btn--hero {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .landing .primary-btn--hero:active {
    transform: scale(0.98);
  }

  .landing-login-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .landing-login-btn:active {
    background: rgba(255,255,255,0.15);
    transform: scale(0.97);
  }

  .benefit-card {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ---------- LARGE PHONES (iPhone Plus/Pro Max, large Android) ---------- */
@media (min-width: 376px) and (max-width: 430px) {
  .landing-title {
    font-size: 1.55rem;
  }

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

  .primary-btn--hero {
    padding: 16px 28px;
    font-size: 1.05rem;
  }

  .benefit-card {
    padding: 14px 12px;
  }

  .benefit-icon {
    font-size: 1.4rem;
    margin-bottom: 8px;
  }

  .benefit-title {
    font-size: 0.85rem;
  }

  .landing-footer {
    padding: 14px 18px;
  }

  .footer-links {
    font-size: 12px;
  }

  .landing-login-link,
  .landing-login-btn {
    font-size: .9rem;
  }
}

/* ---------- EXTRA SMALL SCREENS (iPhone SE, etc) ---------- */
@media (max-width: 375px) {
  .landing-title {
    font-size: 1.2rem;
  }

  .tray-card-icon {
    font-size: 1.2rem;
  }
    .practice-tray-label {
      font-size: .8rem;
    }
    .practice-tray-card {
      padding: 0px;
    }

  .landing-subtitle {
    font-size: 0.85rem;
  }

  .primary-btn--hero {
    padding: 12px 18px;
    font-size: 0.9rem;
  }

  .benefit-card {
    padding: 10px 8px;
  }

  .benefit-icon {
    font-size: 1.1rem;
    margin-bottom: 4px;
  }

  .benefit-title {
    font-size: 0.7rem;
  }

  .landing-footer {
    padding: 10px 12px;
  }

  .footer-links {
    font-size: 10px;
  }

  .footer-divider {
    margin: 0 4px;
  }

   .landing-title {
    font-size: 2.2rem !important;
    margin-bottom: 6px;
  }
}

/* ---------- LANDSCAPE MOBILE ---------- */
@media (max-width: 768px) and (orientation: landscape) {
  .landing-wrap {
    padding-top: 8px;
    padding-bottom: 40px;
  }

  .landing-main {
    padding-top: 8px;
  }

  .landing-title {
    font-size: 1.4rem;
    margin-bottom: 6px;
  }

  .landing-title br {
    display: block;
  }

  .landing-title span {
    display: block;
  }

  .landing-subtitle {
    font-size: 0.8rem;
    margin-bottom: 10px;
  }

  .landing-hero {
    margin-bottom: 12px;
  }

  .landing-benefits {
    flex-direction: row;
    overflow-x: visible;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
  }

  .benefit-card {
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
  }

  .benefit-icon {
    font-size: 1rem;
    margin-bottom: 4px;
  }

  .benefit-title {
    font-size: 0.7rem;
  }

  .benefit-desc {
    display: none;
  }

  .landing-footer {
    padding: 8px 12px;
    margin-top: 8px;
  }
}

/* ==========================================================================
   FULL-SCREEN MODALS (Trial/Subscribe) - Page-like on mobile
   ========================================================================== */
@media (max-width: 768px) {
  .trial-modal {
    /* Remove modal overlay - make it a solid page with gradient */
    background:
      linear-gradient(180deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.12) 25%, rgba(245, 243, 255, 0.4) 50%, rgba(255, 255, 255, 1) 75%),
      #fff;
    backdrop-filter: none;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
  }

  .trial-modal-content,
  .subscribe-modal-content {
    border-radius: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    padding: 80px 24px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    animation: none;
    box-shadow: none;
    padding-top: 96px;
    background: transparent;
  }

.subscribe-tagline {
  opacity: .6;
}

  /* Center the content vertically in remaining space */
  .trial-modal-content > *,
  .subscribe-modal-content > * {
    max-width: 400px;
    width: 100%;
  }

  .trial-modal-content h2,
  .subscribe-modal-content h2 {
    font-size: 2.2rem;
    text-align: center;
  }

   .trial-modal-content p {
    font-size: 14px;
    font-weight: 400;
  }

  #subscribeTrialBtn {
    margin-top: auto;
  }

  .trial-modal-content .subscribe-subtitle,
  .subscribe-modal-content .subscribe-subtitle {
    text-align: center;
  }

  /* Style close button as back navigation - match conversation UI */
  .trial-modal .modal-close-btn,
  .subscribe-modal-content .modal-close-btn {
    position: fixed;
    top: 16px;
    left: 16px;
    right: auto;
    z-index: 10;
    background: transparent;
    border: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0; /* Hide the × text */
    color: transparent;
  }

  /* Hide any SVG icons */
  .trial-modal .modal-close-btn svg,
  .subscribe-modal-content .modal-close-btn svg {
    display: none;
  }

  /* Show back arrow SVG - matches conversation UI exactly */
  .trial-modal .modal-close-btn::before,
  .subscribe-modal-content .modal-close-btn::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .trial-modal .modal-close-btn:active,
  .subscribe-modal-content .modal-close-btn:active {
    background: var(--bg-subtle, #f1f5f9);
    border-radius: 50%;
    transform: scale(0.95);
  }

  .pricing-card {
    margin: 24px 0;
  }

  .trial-note {
    margin-top: 12px;
    text-align: center !important;
    margin-bottom: 0px;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
  }

  .trial-wait-note {
    text-align: center;
    margin-top: 8px;
  }

  .subscribe-btn {
    width: 100%;
  }

  /* ==========================================================================
     AUTH MODAL - Action sheet style on mobile (like ChatGPT)
     ========================================================================== */
  .auth-modal {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(4px);
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0;
    overflow: hidden;
    transition: background 0.3s ease;
  }

  .auth-modal.show {
    background: rgba(0, 0, 0, 0.5);
  }

  .auth-modal-content {
    border-radius: 20px 20px 0 0;
    max-width: 100%;
    width: 100%;
    max-height: 90dvh;
    padding: 12px 24px 32px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .auth-modal.show .auth-modal-content {
    transform: translateY(0);
  }

  /* Drag handle indicator at top */
  .auth-modal-content::before {
    content: "";
    width: 36px;
    height: 5px;
    background: #d1d5db;
    border-radius: 3px;
    margin: 0 auto 16px;
    flex-shrink: 0;
  }

  .auth-modal-content > * {
    max-width: 100%;
    width: 100%;
  }

  .auth-header {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 0;
  }

  #authTitle {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0;
  }

  #authSubtitle {
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 16px;
  }

  /* Hide the X close button - user taps backdrop or swipes down */
  .auth-modal .modal-close-btn {
    display: none;
  }

  /* Adjust auth options spacing for action sheet */
  .auth-main-options {
    gap: 12px;
  }

  .google-signin-btn,
  .auth-method-btn {
    padding: 14px 16px;
  }

  .auth-divider {
    margin: 4px 0;
  }

  /* Phone/email input adjustments */
  .phone-number-input,
  .auth-input-field {
    padding: 0;
  }

  #sendCodeBtn {
    margin-top: 8px;
  }

  .password-toggle-btn {
  right: 38px;
}

  /* Password step adjustments for action sheet */
  .password-step {
    padding: 0;
  }

  /* Hide main auth header when password step is visible */
  .auth-modal-content:has(.password-step:not(.hidden)) > .auth-header {
    display: none;
  }

  .password-step-header {
    margin-bottom: 16px;
  }

  .password-step-title {
    font-size: 1.5rem;
    margin-bottom: 0;
  }

  .credential-display {
    margin-bottom: 0px;
  }

  .password-step-footer {
    margin-top: 16px;
    padding-top: 16px;
  }

  /* Verification step adjustments */
  .verification-step {
    padding: 0;
  }

  .back-link {
    margin-bottom: 12px;
  }

  /* Name step adjustments for action sheet */
  .name-step {
    padding: 0;
  }

  /* Hide main auth header when name step is visible */
  .auth-modal-content:has(.name-step:not(.hidden)) > .auth-header {
    display: none;
  }

  .name-step-header {
    margin-bottom: 16px;
  }

  .name-step-title {
    font-size: 1.25rem;
    margin-bottom: 0;
  }

  .name-field-wrapper {
    margin-bottom: 8px;
  }

  .skip-link {
    margin-top: 4px;
  }
}

/* ==========================================================================
   DARK MODE SUPPORT (Disabled for now - uncomment when ready)
   ========================================================================== */
/*
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  .conversation-section {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  }

  .controls {
    background: #1f2937;
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .session-context {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.3);
  }

  .context-scenario {
    color: #a5b4fc;
  }

  .input-area {
    background: #1f2937;
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .input-field {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
  }

  .input-field::placeholder {
    color: var(--text-light);
  }

  .hints-panel {
    background: #1f2937;
    border-color: var(--text-secondary);
  }

  .hints-toggle {
    background: #1f2937;
  }

  .hints-toggle-text {
    color: #d1d5db;
  }

  .hints-list li {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
  }

  .feedback-section {
    border-color: rgba(255, 255, 255, 0.1);
  }

  .history {
    background: #1f2937;
    border-left-color: rgba(255, 255, 255, 0.1);
  }

  .history-header {
    background: #111827;
    border-bottom-color: var(--text-secondary);
  }

  .history h3 {
    color: #d1d5db;
  }

  .history-turn-message {
    color: #f9fafb;
  }

  .history-turn.assistant .history-turn-message {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    border-color: rgba(16, 185, 129, 0.3);
  }
}
*/

/* ========================================
   PROFILE PAGE - Mobile Optimizations
   ======================================== */
@media (max-width: 768px) {
  .profile-section {
    padding: 0 16px 24px;
    background: var(--bg-white);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 100;
  }

  .profile-name-edit {
    width: 100%;
  }

   .profile-name-input {
    width: 100%;
  }
  .profile-header {
    padding: 16px 0 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    position: sticky;
    top: 0;
    background: var(--bg-white);
    z-index: 10;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .profile-back-btn {
    width: 40px;
    height: 40px;
  }

  .profile-title {
    font-size: 1.25rem;
  }

  .profile-user-card {
    padding: 16px;
    margin-bottom: 24px;
  }

  .profile-avatar {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
  }

  .profile-user-name {
    font-size: 1.1rem;
  }

  .profile-user-email {
    font-size: 0.85rem;
  }

  .profile-section-title {
    font-size: 1rem;
  }

  .profile-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .profile-stat-card {
    padding: 14px 10px;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }

  .profile-motivator {
    padding: 14px;
  }

  .profile-motivator .motivator-text {
    font-size: 0.9rem;
  }

  .language-chip {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .subscription-card {
    padding: 16px;
  }

  .subscription-badge {
    font-size: 0.8rem;
    padding: 6px 12px;
  }

  .subscription-manage-btn,
  .subscription-resubscribe-btn,
  .subscription-upgrade-btn {
    width: 100%;
  }

  .profile-signout-btn {
    padding: 12px 16px;
    font-size: 0.85rem;
  }

  /* Cancel Modal - Full Screen on Mobile */
  .cancel-modal {
    background: #fff;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
  }

  .trial-complete-inline .celebration-emoji {
    font-size: 4rem;
    padding: 0px;
    margin-top: 36px;
  }


   .trial-complete-inline .celebration {
    padding: 16px;
  }

  .trial-complete-close svg {
    width: 36px;
    height: 36px;
  }

  .trial-complete-close {
    width: 48px !important;   
    height: 48px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
  }

  .trial-complete-inline  {
    padding-bottom: 16px;
    padding: 16px;
  }

  .cancel-modal-content {
    border-radius: 0;
    max-width: 100%;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    padding: 96px 24px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: none;
  }

  .cancel-modal-close {
    position: fixed;
    top: 24px;
    left: 16px;
    right: auto;
    width: 44px;
    height: 44px;
    background: transparent;
    z-index: 10;
  }

  /* Back arrow instead of X */
  .cancel-modal-close svg {
    display: none;
  }

  .cancel-modal-close::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .cancel-modal-title {
    font-size: 1.5rem;
    text-align: center;
  }

  .cancel-modal-subtitle {
    text-align: center;
  }

  .cancel-modal-info {
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    padding: 16px;
  }

  .cancel-modal-actions {
    gap: 12px;
    margin-top: auto;
  }

  .cancel-confirm-btn,
  .cancel-keep-btn {
    padding: 16px 20px;
    font-size: 1rem;
  }

  /* Hide third example chip on mobile to reduce clutter */
  .example-chips .example-chip:nth-child(3) {
    display: none;
  }
}