/**
 * Premium Fixes CSS
 * Fixes for integration issues
 * 
 * @package SENNA_Launcher
 * @since 4.0.0
 */

/* ===========================================
   QUERY PANEL FIXES - WORKING VERSION
   =========================================== */

.query-panel {
  display: block !important;
  background: linear-gradient(
    135deg,
    var(--premium-ivory, #fffef9) 0%,
    rgba(251, 247, 240, 0.7) 100%
  ) !important;
  padding: 32px !important;
  border-radius: 16px !important;
  margin: 40px auto !important;
  max-width: 900px !important;
  border: 1px solid rgba(113, 142, 104, 0.08) !important;
  box-shadow: 0 4px 12px rgba(13, 53, 62, 0.04),
    0 8px 24px rgba(13, 53, 62, 0.02) !important;
  position: relative !important;
  overflow: visible !important;
}

.query-panel-header {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  margin-bottom: 20px !important;
}

.query-label {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 1.25rem !important;
  color: var(--premium-espresso, #0d353e) !important;
  font-weight: 600 !important;
}

.query-badge {
  background: var(--premium-sage, #718e68) !important;
  color: var(--premium-cream, #fbf7f0) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.query-input-wrapper {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

.query-input {
  flex: 1 !important;
  padding: 14px 20px !important;
  background: var(--premium-cream, #fbf7f0) !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 1rem !important;
  color: var(--premium-espresso, #0d353e) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.query-input:focus {
  outline: none !important;
  border-color: var(--premium-sage, #718e68) !important;
  background: white !important;
  box-shadow: 0 0 0 3px rgba(113, 142, 104, 0.1) !important;
}

.query-submit {
  padding: 14px 28px !important;
  background: linear-gradient(
    135deg,
    var(--premium-sage, #718e68) 0%,
    var(--premium-muted-sage, #8fa688) 100%
  ) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.query-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(113, 142, 104, 0.3) !important;
}

.quick-questions {
  display: flex !important;
  gap: 12px !important;
  margin-top: 20px !important;
  flex-wrap: wrap !important;
}

.quick-question {
  padding: 10px 16px !important;
  background: var(--premium-cream, #fbf7f0) !important;
  border: 1px solid rgba(113, 142, 104, 0.2) !important;
  border-radius: 6px !important;
  font-size: 0.9rem !important;
  color: var(--premium-charcoal, #3a3633) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.quick-question:hover {
  background: var(--premium-sage, #718e68) !important;
  color: white !important;
  border-color: var(--premium-sage, #718e68) !important;
}

/* ===========================================
   FULL PAGE VIEWPORT CONTAINER
   =========================================== */

/* Full viewport container */
.skillfarm-launcher-container,
.opportunities-launcher-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: linear-gradient(
    180deg,
    var(--premium-ivory, #fffef9) 0%,
    var(--premium-cream, #fbf7f0) 100%
  ) !important;
  overflow: hidden !important;
  z-index: 999999 !important;
}

.main-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: white !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ===========================================
   COMPACT 2x2 PREMIUM VISUAL CARDS
   =========================================== */

.visual-cards-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin: 24px auto !important;
  max-width: 600px !important;
  padding: 0 20px !important;
}

.visual-card {
  background: white !important;
  border: 1px solid rgba(13, 53, 62, 0.06) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 140px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.visual-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(
    90deg,
    var(--premium-sage, #718e68) 0%,
    var(--premium-muted-sage, #8fa688) 100%
  ) !important;
  transform: translateY(-100%) !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.visual-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 40px rgba(13, 53, 62, 0.08),
    0 20px 60px rgba(13, 53, 62, 0.04) !important;
  border-color: var(--premium-sage, #718e68) !important;
}

.visual-card:hover::before {
  transform: translateY(0) !important;
}

.visual-card.selected {
  background: linear-gradient(
    135deg,
    white 0%,
    rgba(113, 142, 104, 0.03) 100%
  ) !important;
  border-color: var(--premium-sage, #718e68) !important;
  border-width: 2px !important;
}

.visual-card.selected::before {
  transform: translateY(0) !important;
}

.visual-card-icon {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 12px !important;
  background: linear-gradient(
    135deg,
    rgba(13, 53, 62, 0.04) 0%,
    rgba(13, 53, 62, 0.02) 100%
  ) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  color: var(--premium-sage, #718e68) !important;
  transition: all 0.3s ease !important;
}

.visual-card:hover .visual-card-icon {
  transform: scale(1.1) rotate(5deg) !important;
  background: linear-gradient(
    135deg,
    var(--premium-sage, #718e68) 0%,
    var(--premium-muted-sage, #8fa688) 100%
  ) !important;
  color: white !important;
}

.visual-card-title {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--premium-espresso, #0d353e) !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.2px !important;
  line-height: 1.2 !important;
}

.visual-card-description {
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 0.875rem !important;
  color: var(--premium-charcoal, #3a3633) !important;
  line-height: 1.3 !important;
  opacity: 0.7 !important;
}

/* ===========================================
   NUMBERED DOTS PREMIUM HEADER
   =========================================== */

.header-container {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 6px 20px !important;
  border-bottom: 1px solid rgba(13, 53, 62, 0.03) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  flex-shrink: 0 !important;
  height: 44px !important;
  max-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.header-content {
  max-width: 1400px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.logo-section {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  cursor: pointer !important;
}

.leaf-icon {
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--premium-espresso, #0d353e) !important;
  border-radius: 3px !important;
  color: white !important;
  font-size: 12px !important;
}

.logo-text {
  display: inline-block !important; /* Show Skill Farm branding */
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--premium-espresso, #0d353e) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-left: 8px !important;
}

.user-welcome {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

.welcome-text {
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 0.9rem !important;
  color: var(--premium-charcoal, #3a3633) !important;
  opacity: 0.8 !important;
}

/* ===========================================
   PREMIUM WELCOME PAGE & ONBOARDING
   =========================================== */

.content-area {
  flex: 1 !important;
  overflow-y: auto !important;
  background: linear-gradient(
    180deg,
    white 0%,
    var(--premium-ivory, #fffef9) 100%
  ) !important;
  padding-top: 20px !important;
}

.onboarding-step {
  display: none; /* Removed !important to allow preloader to work */
  padding: 40px 40px 60px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.focus-content {
  padding-top: 0 !important;
  margin-top: -10px !important;
}

.onboarding-step.active {
  display: block !important;
  animation: elegantFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Fix for preloader display */
.premium-preloader,
.dynamic-preloader-overlay {
  display: flex !important;
  opacity: 1 !important;
  z-index: 10000000 !important;
}

/* Welcome Step Premium Styling */
.onboarding-step:first-child.active {
  padding: 80px 40px !important;
}

.focus-content {
  text-align: center !important;
  max-width: 800px !important;
  margin: 0 auto 60px !important;
}

.emma-avatar {
  width: 120px !important;
  height: 120px !important;
  margin: 0 auto 30px !important;
  background: linear-gradient(
    135deg,
    var(--premium-sage, #718e68) 0%,
    var(--premium-muted-sage, #8fa688) 100%
  ) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 40px rgba(113, 142, 104, 0.2),
    0 20px 60px rgba(113, 142, 104, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.emma-avatar::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  ) !important;
  animation: shimmer 3s infinite !important;
}

.emma-avatar img,
.emma-avatar svg {
  width: 60px !important;
  height: 60px !important;
  position: relative !important;
  z-index: 1 !important;
  filter: brightness(0) invert(1) !important;
}

@keyframes shimmer {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

/* ===========================================
   PREMIUM MESSAGE CONTENT - MATCHED SIZING
   =========================================== */

.sfs-message-content {
  font-family: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif !important;
  font-size: 1.875rem !important;
  line-height: 1.5 !important;
  color: var(--premium-espresso, #0d353e) !important;
  padding: 0 !important;
  background: transparent !important;
  margin: 0 0 35px !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  position: relative !important;
  text-align: center !important;
}

.welcome-message {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 2.5rem !important;
  line-height: 1.3 !important;
  color: var(--premium-espresso, #0d353e) !important;
  font-weight: 400 !important;
  margin-bottom: 20px !important;
  letter-spacing: -1px !important;
}

.welcome-message strong {
  font-weight: 600 !important;
  background: linear-gradient(
    135deg,
    var(--premium-sage, #718e68) 0%,
    var(--premium-muted-sage, #8fa688) 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.senna-intro {
  font-size: 1.25rem !important;
  line-height: 1.7 !important;
  color: var(--premium-charcoal, #3a3633) !important;
  opacity: 0.9 !important;
  font-weight: 300 !important;
}

.main-question {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 2rem !important;
  font-weight: 500 !important;
  color: var(--premium-espresso, #0d353e) !important;
  margin: 30px 0 30px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

.sfs-message-content.main-question {
  font-size: 2rem !important;
}

/* ===========================================
   NUMBERED DOTS PROGRESS INDICATOR
   =========================================== */

.journey-progress {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  position: relative !important;
  padding: 0 !important;
  flex: 1 !important;
  max-width: 280px !important;
  margin: 0 auto !important;
}

/* Connecting line between dots */
.journey-progress::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 28px !important;
  right: 28px !important;
  height: 1px !important;
  background: rgba(13, 53, 62, 0.08) !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
}

.journey-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
  z-index: 2 !important;
  flex: 1 !important;
  cursor: default !important; /* Remove pointer cursor */
  pointer-events: none !important; /* Disable clicking */
  opacity: 0.5 !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Only active and completed steps are clickable */
.journey-step.active,
.journey-step.completed {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

.journey-step.active {
  transform: scale(1.1) !important;
}

.journey-step.completed {
  opacity: 0.8 !important;
}

/* Numbered dot indicators */
.step-circle {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: white !important;
  border: 1.5px solid rgba(13, 53, 62, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--premium-warm-gray, #8b8680) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Active dot - larger and prominent */
.journey-step.active .step-circle {
  width: 32px !important;
  height: 32px !important;
  background: var(--premium-espresso, #0d353e) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 0 0 6px rgba(13, 53, 62, 0.08), 0 3px 8px rgba(13, 53, 62, 0.15) !important;
  font-size: 0.875rem !important;
}

/* Completed step - checkmark */
.journey-step.completed .step-circle {
  background: var(--premium-light-sage, #e8f0e3) !important;
  color: var(--premium-sage, #718e68) !important;
  border-color: var(--premium-sage, #718e68) !important;
}

.journey-step.completed .step-circle::after {
  content: "✓" !important;
  position: absolute !important;
  font-size: 1.5rem !important;
  color: var(--premium-sage, #718e68) !important;
}

/* Stage indicator text */
.stage-indicator {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

.stage-text {
  display: none !important; /* Hide text for cleaner elevator look */
}

.journey-step.active .stage-text {
  color: var(--premium-sage, #718e68) !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

.journey-step.completed .stage-text {
  color: var(--premium-sage, #718e68) !important;
  opacity: 0.9 !important;
}

/* Pulse animation for active step */
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(113, 142, 104, 0.1),
      0 4px 12px rgba(113, 142, 104, 0.3), 0 8px 24px rgba(113, 142, 104, 0.15);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(113, 142, 104, 0.1),
      0 4px 16px rgba(113, 142, 104, 0.4), 0 12px 32px rgba(113, 142, 104, 0.2);
  }
}

/* ===========================================
   BUTTON STYLE FIXES - ALL #0D353E
   =========================================== */

/* All submit buttons should use espresso color */
button,
.btn,
.action-btn,
.apply-btn,
.query-submit,
input[type="submit"],
button[type="submit"],
.button-primary {
  background: var(--premium-espresso, #0d353e) !important;
  color: white !important;
  border: none !important;
  padding: 14px 32px !important;
  border-radius: 8px !important;
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
}

button:hover,
.btn:hover,
.action-btn:hover,
.apply-btn:hover,
.query-submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.button-primary:hover {
  background: linear-gradient(
    135deg,
    var(--premium-espresso, #0d353e) 0%,
    var(--premium-deep-teal, #2c5f5d) 100%
  ) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(13, 53, 62, 0.2), 0 8px 24px rgba(13, 53, 62, 0.1) !important;
}

button:active,
.btn:active,
.action-btn:active,
.apply-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(13, 53, 62, 0.2) !important;
}

/* Premium Continue/Submit buttons */
#generate-plan-btn,
button[onclick*="submitNameAndEmail"],
button[onclick*="nextStep"],
button[onclick*="continue"],
.generate-plan-btn,
.continue-btn {
  background: linear-gradient(
    135deg,
    var(--premium-espresso, #0d353e) 0%,
    #154249 100%
  ) !important;
  color: white !important;
  min-width: 220px !important;
  padding: 18px 48px !important;
  font-size: 1.125rem !important;
  margin: 40px auto 20px !important;
  display: block !important;
  border-radius: 50px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  position: relative !important;
  overflow: hidden !important;
}

#generate-plan-btn::before,
button[onclick*="submitNameAndEmail"]::before,
button[onclick*="nextStep"]::before,
.continue-btn::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.6s, height 0.6s !important;
}

#generate-plan-btn:hover::before,
button[onclick*="submitNameAndEmail"]:hover::before,
button[onclick*="nextStep"]:hover::before,
.continue-btn:hover::before {
  width: 300px !important;
  height: 300px !important;
}

#generate-plan-btn:hover,
button[onclick*="submitNameAndEmail"]:hover,
button[onclick*="nextStep"]:hover,
.continue-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(13, 53, 62, 0.3),
    0 15px 40px rgba(13, 53, 62, 0.15) !important;
}

/* Secondary buttons */
.btn-secondary,
.button-secondary {
  background: transparent !important;
  color: var(--premium-espresso, #0d353e) !important;
  border: 2px solid var(--premium-espresso, #0d353e) !important;
}

.btn-secondary:hover,
.button-secondary:hover {
  background: var(--premium-espresso, #0d353e) !important;
  color: white !important;
}

/* Disabled state */
button:disabled,
.btn:disabled,
button[disabled] {
  background: var(--premium-warm-gray, #8b8680) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  transform: none !important;
}

button:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Loading state */
.loading-spinner {
  border-color: rgba(255, 255, 255, 0.3) !important;
  border-top-color: white !important;
}

/* ===========================================
   FORM INPUT FIXES
   =========================================== */

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  padding: 14px 18px !important;
  background: var(--premium-ivory, #fffef9) !important;
  border: 2px solid var(--premium-cream, #fbf7f0) !important;
  border-radius: 8px !important;
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 1rem !important;
  color: var(--premium-espresso, #0d353e) !important;
  transition: all 0.3s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--premium-sage, #718e68) !important;
  background: white !important;
  box-shadow: 0 0 0 4px rgba(113, 142, 104, 0.1) !important;
}

/* Labels */
label {
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--premium-charcoal, #3a3633) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* ===========================================
   EXCLUSIVE PREMIUM PLAN CARD
   =========================================== */

.report-section {
  display: block !important;
  background: white !important;
  border-radius: 20px !important;
  padding: 40px !important;
  margin-bottom: 32px !important;
  border: 1px solid rgba(13, 53, 62, 0.06) !important;
  box-shadow: 0 4px 20px rgba(13, 53, 62, 0.03),
    0 8px 40px rgba(13, 53, 62, 0.02) !important;
}

.report-section.premium-plan-card {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #fafbfc 50%,
    var(--premium-ivory, #fffef9) 100%
  ) !important;
  border: none !important;
  position: relative !important;
  overflow: visible !important;
  min-height: 400px !important;
  box-shadow: 0 10px 40px rgba(13, 53, 62, 0.08),
    0 20px 80px rgba(13, 53, 62, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.report-section.premium-plan-card::before {
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  left: 20% !important;
  right: 20% !important;
  height: 2px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--premium-soft-gold, #d4af37) 20%,
    var(--premium-soft-gold, #d4af37) 80%,
    transparent 100%
  ) !important;
  opacity: 0.6 !important;
}

.section-title {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  color: var(--premium-espresso, #0d353e) !important;
  margin-bottom: 24px !important;
  letter-spacing: -0.5px !important;
}

/* Premium Plan Card Header */
.premium-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 30px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(113, 142, 104, 0.1) !important;
}

.premium-header-content {
  flex: 1 !important;
}

.premium-title {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
  color: var(--premium-espresso, #0d353e) !important;
  margin-bottom: 8px !important;
}

.expiry-text {
  font-size: 0.9rem !important;
  color: var(--premium-warm-gray, #8b8680) !important;
  opacity: 0.8 !important;
}

.unlock-premium-btn {
  background: linear-gradient(
    135deg,
    var(--premium-sage, #718e68) 0%,
    var(--premium-muted-sage, #8fa688) 100%
  ) !important;
  color: white !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}

.unlock-premium-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(113, 142, 104, 0.3) !important;
}

/* ===========================================
   SENNA MESSAGE LINE - PERSONALIZED
   =========================================== */

.senna-message-line {
  display: block !important;
  text-align: center !important;
  margin: 30px auto !important;
  padding: 20px !important;
  max-width: 800px !important;
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 1.5rem !important;
  line-height: 1.6 !important;
  color: var(--premium-espresso, #0d353e) !important;
  font-style: italic !important;
  position: relative !important;
}

.senna-message-line::before,
.senna-message-line::after {
  content: '"' !important;
  font-size: 2rem !important;
  color: var(--premium-sage, #718e68) !important;
  opacity: 0.3 !important;
  position: absolute !important;
}

.senna-message-line::before {
  top: 10px !important;
  left: -10px !important;
}

.senna-message-line::after {
  bottom: 10px !important;
  right: -10px !important;
}

.typing-cursor {
  display: inline-block !important;
  width: 2px !important;
  height: 1.2em !important;
  background: var(--premium-sage, #718e68) !important;
  margin-left: 2px !important;
  animation: blink 1s infinite !important;
  vertical-align: text-bottom !important;
}

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

/* ===========================================
   PREMIUM PHASE CARDS & OPPORTUNITIES
   =========================================== */

.roadmap-phases {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  margin: 40px 0 !important;
}

.phase-card.premium-phase {
  background: white !important;
  border: 1px solid rgba(13, 53, 62, 0.06) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

.phase-card.premium-phase:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(13, 53, 62, 0.08) !important;
}

.phase-number {
  display: inline-block !important;
  background: var(--premium-espresso, #0d353e) !important;
  color: white !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 16px !important;
}

.phase-content h4 {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 1.25rem !important;
  color: var(--premium-espresso, #0d353e) !important;
  margin-bottom: 12px !important;
}

.phase-content ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.phase-content li {
  position: relative !important;
  padding-left: 20px !important;
  margin-bottom: 8px !important;
  color: var(--premium-charcoal, #3a3633) !important;
  font-size: 0.95rem !important;
}

.phase-content li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--premium-sage, #718e68) !important;
  font-weight: bold !important;
}

.immediate-actions {
  background: linear-gradient(
    135deg,
    var(--premium-ivory, #fffef9) 0%,
    white 100%
  ) !important;
  padding: 32px !important;
  border-radius: 16px !important;
  margin: 32px 0 !important;
}

.immediate-actions h3 {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 1.5rem !important;
  color: var(--premium-espresso, #0d353e) !important;
  margin-bottom: 24px !important;
}

.action-item.premium-action {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px !important;
  background: white !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  border: 1px solid rgba(13, 53, 62, 0.06) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.action-item.premium-action:hover {
  background: var(--premium-ivory, #fffef9) !important;
  transform: translateX(4px) !important;
}

.action-icon {
  font-size: 1.5rem !important;
}

.opportunities-preview {
  margin-top: 32px !important;
}

.opportunities-preview h3 {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 1.5rem !important;
  color: var(--premium-espresso, #0d353e) !important;
  margin-bottom: 24px !important;
}

.opportunity-card.premium-opportunity {
  background: white !important;
  border-left: 4px solid var(--premium-soft-gold, #d4af37) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(13, 53, 62, 0.04) !important;
}

.opportunity-card h4 {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 1.125rem !important;
  color: var(--premium-espresso, #0d353e) !important;
  margin-bottom: 8px !important;
}

.opportunity-card p {
  color: var(--premium-charcoal, #3a3633) !important;
  font-size: 0.9rem !important;
  margin-bottom: 8px !important;
}

.deadline {
  display: inline-block !important;
  background: rgba(212, 175, 55, 0.1) !important;
  color: var(--premium-soft-gold, #d4af37) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.unlock-prompt {
  text-align: center !important;
  padding: 24px !important;
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.05) 0%,
    rgba(212, 175, 55, 0.02) 100%
  ) !important;
  border-radius: 12px !important;
  margin-top: 24px !important;
}

.unlock-prompt p {
  color: var(--premium-charcoal, #3a3633) !important;
  margin-bottom: 16px !important;
}

/* ===========================================
   PREMIUM Q&A STEP DESIGN
   =========================================== */

.onboarding-step.qa-step {
  background: linear-gradient(
    180deg,
    white 0%,
    var(--premium-ivory, #fffef9) 100%
  ) !important;
  min-height: calc(100vh - 100px) !important;
}

.qa-step .focus-content {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 40px !important;
}

/* Premium Q&A Header */
.qa-header {
  text-align: center !important;
  margin-bottom: 40px !important;
  position: relative !important;
}

.qa-header::after {
  content: "" !important;
  position: absolute !important;
  bottom: -20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80px !important;
  height: 2px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--premium-soft-gold, #d4af37) 50%,
    transparent 100%
  ) !important;
}

.qa-question-title {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 2.5rem !important;
  font-weight: 400 !important;
  color: var(--premium-espresso, #0d353e) !important;
  line-height: 1.3 !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.5px !important;
}

.qa-timestamp {
  font-size: 0.875rem !important;
  color: var(--premium-warm-gray, #8b8680) !important;
  opacity: 0.7 !important;
  font-style: italic !important;
}

/* Premium Response Container */
.qa-response-container {
  background: white !important;
  border-radius: 24px !important;
  padding: 48px !important;
  margin: 40px 0 !important;
  box-shadow: 0 10px 40px rgba(13, 53, 62, 0.06),
    0 20px 80px rgba(13, 53, 62, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  position: relative !important;
  overflow: hidden !important;
}

.qa-response-container::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(
    90deg,
    var(--premium-sage, #718e68) 0%,
    var(--premium-soft-gold, #d4af37) 50%,
    var(--premium-sage, #718e68) 100%
  ) !important;
}

/* SENNA Avatar in Q&A */
.qa-emma-avatar {
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 24px !important;
  background: linear-gradient(
    135deg,
    var(--premium-sage, #718e68) 0%,
    var(--premium-muted-sage, #8fa688) 100%
  ) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 32px rgba(113, 142, 104, 0.15),
    0 16px 48px rgba(113, 142, 104, 0.1) !important;
  position: relative !important;
}

.qa-emma-avatar img {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  filter: brightness(1.1) !important;
}

/* Premium Response Text */
.qa-response-text {
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 1.25rem !important;
  line-height: 1.8 !important;
  color: var(--premium-charcoal, #3a3633) !important;
  margin-bottom: 32px !important;
}

.qa-response-text p {
  margin-bottom: 20px !important;
}

.qa-response-text p:first-child {
  font-size: 1.375rem !important;
  font-weight: 500 !important;
  color: var(--premium-espresso, #0d353e) !important;
}

/* Premium Insight Cards */
.qa-insights {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 20px !important;
  margin: 32px 0 !important;
}

.insight-card {
  background: linear-gradient(
    135deg,
    var(--premium-ivory, #fffef9) 0%,
    white 100%
  ) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  border: 1px solid rgba(113, 142, 104, 0.08) !important;
  transition: all 0.3s ease !important;
}

.insight-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(13, 53, 62, 0.08) !important;
}

.insight-icon {
  width: 40px !important;
  height: 40px !important;
  background: var(--premium-sage, #718e68) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-size: 1.25rem !important;
  margin-bottom: 16px !important;
}

.insight-title {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 1.125rem !important;
  color: var(--premium-espresso, #0d353e) !important;
  margin-bottom: 8px !important;
}

.insight-text {
  font-size: 0.95rem !important;
  color: var(--premium-charcoal, #3a3633) !important;
  line-height: 1.5 !important;
}

/* Premium Action Buttons in Q&A */
.qa-actions {
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  margin-top: 40px !important;
}

.qa-action-btn {
  padding: 16px 40px !important;
  background: var(--premium-espresso, #0d353e) !important;
  color: white !important;
  border: none !important;
  border-radius: 50px !important;
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.qa-action-btn::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.6s, height 0.6s !important;
}

.qa-action-btn:hover::before {
  width: 300px !important;
  height: 300px !important;
}

.qa-action-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(13, 53, 62, 0.2),
    0 12px 32px rgba(13, 53, 62, 0.1) !important;
}

.qa-action-btn.secondary {
  background: transparent !important;
  color: var(--premium-espresso, #0d353e) !important;
  border: 2px solid var(--premium-espresso, #0d353e) !important;
}

.qa-action-btn.secondary:hover {
  background: var(--premium-espresso, #0d353e) !important;
  color: white !important;
}

/* Premium Related Questions */
.qa-related {
  margin-top: 48px !important;
  padding-top: 48px !important;
  border-top: 1px solid rgba(13, 53, 62, 0.06) !important;
}

.qa-related-title {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 1.5rem !important;
  color: var(--premium-espresso, #0d353e) !important;
  text-align: center !important;
  margin-bottom: 32px !important;
}

.related-questions-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 16px !important;
}

.related-question-card {
  background: white !important;
  border: 1px solid rgba(13, 53, 62, 0.06) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  padding-left: 40px !important;
}

.related-question-card::before {
  content: "→" !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--premium-sage, #718e68) !important;
  font-size: 1.25rem !important;
  transition: all 0.3s ease !important;
}

.related-question-card:hover {
  background: var(--premium-ivory, #fffef9) !important;
  transform: translateX(8px) !important;
  box-shadow: 0 4px 16px rgba(13, 53, 62, 0.08) !important;
}

.related-question-card:hover::before {
  transform: translateY(-50%) translateX(4px) !important;
}

.related-question-text {
  font-size: 1rem !important;
  color: var(--premium-charcoal, #3a3633) !important;
  line-height: 1.5 !important;
}

/* Premium Loading State for Q&A */
.qa-loading {
  text-align: center !important;
  padding: 80px 40px !important;
}

.qa-loading-spinner {
  width: 60px !important;
  height: 60px !important;
  margin: 0 auto 24px !important;
  border: 3px solid var(--premium-cream, #fbf7f0) !important;
  border-top-color: var(--premium-sage, #718e68) !important;
  border-radius: 50% !important;
  animation: premium-spin 1s linear infinite !important;
}

.qa-loading-text {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-size: 1.25rem !important;
  color: var(--premium-espresso, #0d353e) !important;
  font-style: italic !important;
}

/* Premium Reply Box */
.qa-reply-box {
  background: linear-gradient(
    135deg,
    var(--premium-ivory, #fffef9) 0%,
    white 100%
  ) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  margin-top: 32px !important;
  border: 1px solid rgba(113, 142, 104, 0.08) !important;
}

.qa-reply-input {
  width: 100% !important;
  padding: 16px 20px !important;
  background: white !important;
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 1.125rem !important;
  color: var(--premium-espresso, #0d353e) !important;
  transition: all 0.3s ease !important;
  resize: vertical !important;
  min-height: 120px !important;
}

.qa-reply-input:focus {
  outline: none !important;
  border-color: var(--premium-sage, #718e68) !important;
  box-shadow: 0 0 0 4px rgba(113, 142, 104, 0.1) !important;
}

.qa-reply-input::placeholder {
  color: var(--premium-warm-gray, #8b8680) !important;
  opacity: 0.6 !important;
  font-style: italic !important;
}

/* Premium Q&A Step Default Styling */
.qa-step h2,
.qa-step h3 {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  color: var(--premium-espresso, #0d353e) !important;
}

.qa-step p {
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 1.125rem !important;
  line-height: 1.7 !important;
  color: var(--premium-charcoal, #3a3633) !important;
}

.qa-step .senna-response,
.qa-step .user-question {
  background: white !important;
  border-radius: 16px !important;
  padding: 32px !important;
  margin: 24px 0 !important;
  box-shadow: 0 4px 20px rgba(13, 53, 62, 0.04) !important;
}

.qa-step .senna-response {
  border-left: 3px solid var(--premium-sage, #718e68) !important;
}

.qa-step .user-question {
  border-left: 3px solid var(--premium-soft-gold, #d4af37) !important;
  background: linear-gradient(
    135deg,
    white 0%,
    var(--premium-ivory, #fffef9) 100%
  ) !important;
}

/* Premium conversation thread */
.qa-conversation {
  max-width: 800px !important;
  margin: 0 auto !important;
}

.qa-message {
  display: flex !important;
  gap: 20px !important;
  margin-bottom: 32px !important;
  animation: fadeInUp 0.5s ease !important;
}

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

.qa-message-avatar {
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.qa-message.senna .qa-message-avatar {
  background: linear-gradient(
    135deg,
    var(--premium-sage, #718e68) 0%,
    var(--premium-muted-sage, #8fa688) 100%
  ) !important;
  color: white !important;
}

.qa-message.user .qa-message-avatar {
  background: var(--premium-espresso, #0d353e) !important;
  color: white !important;
}

.qa-sfs-message-content {
  flex: 1 !important;
  background: white !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 2px 12px rgba(13, 53, 62, 0.04) !important;
}

.qa-message.senna .qa-sfs-message-content {
  border-top: 2px solid var(--premium-sage, #718e68) !important;
}

.qa-message.user .qa-sfs-message-content {
  background: linear-gradient(
    135deg,
    var(--premium-ivory, #fffef9) 0%,
    white 100%
  ) !important;
}

/* Premium typing indicator */
.qa-typing {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 16px !important;
  color: var(--premium-warm-gray, #8b8680) !important;
  font-style: italic !important;
}

.qa-typing-dots {
  display: flex !important;
  gap: 4px !important;
}

.qa-typing-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--premium-sage, #718e68) !important;
  animation: typing-bounce 1.4s infinite !important;
}

.qa-typing-dot:nth-child(2) {
  animation-delay: 0.2s !important;
}

.qa-typing-dot:nth-child(3) {
  animation-delay: 0.4s !important;
}

@keyframes typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

/* ===========================================
   PREMIUM LAUNCHER OVERLAY
   =========================================== */

.launcher-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(251, 247, 240, 0.98) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 999998 !important;
  display: none !important;
}

.launcher-overlay.active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.premium-loader {
  text-align: center !important;
}

.premium-loader-icon {
  width: 60px !important;
  height: 60px !important;
  margin: 0 auto 20px !important;
  border: 3px solid var(--premium-cream, #fbf7f0) !important;
  border-top-color: var(--premium-sage, #718e68) !important;
  border-radius: 50% !important;
  animation: premium-spin 1s linear infinite !important;
}

@keyframes premium-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.premium-loader-text {
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 0.9rem !important;
  color: var(--premium-charcoal, #3a3633) !important;
  opacity: 0.7 !important;
  letter-spacing: 0.5px !important;
}

/* ===========================================
   MOBILE RESPONSIVE PREMIUM DESIGN
   =========================================== */

/* Tablet view (768px - 1024px) */
@media screen and (max-width: 1024px) {
  .visual-cards-container {
    max-width: 500px !important;
    gap: 14px !important;
  }

  .visual-card {
    padding: 18px !important;
    min-height: 130px !important;
  }
}

/* Mobile view (max-width: 767px) */
@media screen and (max-width: 767px) {
  /* Header adjustments */
  .header-container {
    padding: 6px 12px !important;
    height: 42px !important;
  }

  .journey-progress {
    gap: 16px !important;
    max-width: 240px !important;
  }

  .journey-progress::before {
    left: 24px !important;
    right: 24px !important;
  }

  .step-circle {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.7rem !important;
  }

  .journey-step.active .step-circle {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
  }

  .user-welcome {
    display: flex !important; /* Show login button on mobile */
    padding: 8px 12px !important;
    font-size: 14px !important;
  }

  .user-welcome .login-link {
    padding: 8px 16px !important;
    background: var(--premium-soft-gold, #d4af37) !important;
    color: var(--premium-espresso, #0d353e) !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }

  /* Visual cards mobile layout */
  .visual-cards-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 12px !important;
    max-width: 100% !important;
    margin: 20px auto !important;
  }

  .visual-card {
    padding: 20px 16px !important; /* Increased padding for better touch targets */
    min-height: 150px !important; /* Increased minimum height */
    border-radius: 12px !important; /* Slightly larger radius */
  }

  .visual-card-icon {
    width: 48px !important; /* Increased icon size */
    height: 48px !important;
    margin-bottom: 12px !important;
    font-size: 1.5rem !important; /* Larger icon */
  }

  .visual-card-title {
    font-size: 1.1rem !important; /* Slightly larger text */
    margin-bottom: 6px !important;
    font-weight: 600 !important;
  }

  .visual-card-description {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
  }

  /* Ensure cards don't get too small on very small screens */
  @media screen and (max-width: 360px) {
    .visual-card-title {
      font-size: 0.95rem !important;
    }

    .visual-card-description {
      font-size: 0.75rem !important;
    }
  }

  /* Content area adjustments */
  .onboarding-step {
    padding: 20px 16px 40px !important;
  }

  .focus-content {
    margin-top: 0 !important;
  }

  .sfs-message-content {
    font-size: 1.25rem !important;
    margin-bottom: 20px !important;
  }

  .main-question {
    font-size: 1.5rem !important;
    margin: 20px 0 !important;
  }

  /* Query panel mobile */
  .query-panel {
    padding: 20px !important;
    margin: 20px 0 !important;
  }

  .query-label {
    font-size: 1rem !important;
  }

  .query-input {
    font-size: 0.95rem !important;
    padding: 12px 16px !important;
  }

  .query-submit {
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
  }

  .quick-questions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .quick-question {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 0.875rem !important;
  }
}

/* Small mobile (max-width: 374px) - iPhone SE, etc */
@media screen and (max-width: 374px) {
  .visual-cards-container {
    gap: 10px !important;
    padding: 0 10px !important;
  }

  .visual-card {
    padding: 14px 10px !important;
    min-height: 110px !important;
  }

  .visual-card-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.125rem !important;
  }
}

/* Premium touch for mobile - maintain quality */
@media (hover: none) and (pointer: coarse) {
  /* Touch-friendly sizes */
  .visual-card {
    min-height: 130px !important;
  }

  .query-submit,
  .qa-action-btn,
  button {
    min-height: 44px !important; /* Apple's recommended touch target */
  }

  /* Remove hover effects on touch devices */
  .visual-card:hover {
    transform: none !important;
  }

  /* Add touch feedback */
  .visual-card:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s !important;
  }
}

/* Landscape mobile adjustments */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .header-container {
    height: 40px !important;
  }

  .visual-cards-container {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    margin: 16px auto !important;
  }

  .visual-card {
    min-height: 100px !important;
    padding: 12px !important;
  }

  .visual-card-icon {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 6px !important;
  }

  .visual-card-title {
    font-size: 0.875rem !important;
  }

  .visual-card-description {
    display: none !important; /* Hide description in landscape */
  }
}

/* ===========================================
   PREMIUM COLORS FALLBACK
   =========================================== */

:root {
  /* Premium Color System */
  --premium-cream: #fbf7f0;
  --premium-ivory: #fffef9;
  --premium-espresso: #0d353e;
  --premium-charcoal: #3a3633;
  --premium-sage: #718e68;
  --premium-muted-sage: #8fa688;
  --premium-soft-gold: #d4af37;
  --premium-champagne: #f7e7ce;
  --premium-warm-gray: #8b8680;
  --premium-dusty-rose: #c4a69f;
  --premium-deep-teal: #2c5f5d;
  --premium-light-sage: #e8f0e3;

  /* Font Stacks */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}