/* =========================================================
   overrides.css - Persuasion Sim Styles (Avery Reason V2)
   =========================================================

   Version: 20260114a
   Last Updated: 2026-01-14

   WHAT THIS FILE DOES:
   Single source of truth for ALL persuasion simulation styling.
   Applies ONLY when body has class "is-persuasion".
   Does NOT affect Morgan sim or other scenarios.

   HISTORY:
   - Phase 2 cleanup consolidated inline styles from index.html
   - Fixed cross-browser alignment issues (Chrome/Edge/Safari)
   - Compacted sidebar cards for proper vertical fit

   =========================================================
   TABLE OF CONTENTS
   =========================================================

   SECTION 1:  BASE THEME + BODY
               CSS variables (--ps-*), background gradients

   SECTION 2:  FLOATING PARTICLES
               Decorative animated background dots

   SECTION 3:  HEADER
               Dark header bar, Avery avatar, title styling

   SECTION 4:  MAIN CONTENT + GRID LAYOUT
               Two-column grid: chat (1fr) + sidebar (260px)

   SECTION 5:  CHAT CARD
               White card containing the conversation

   SECTION 6:  CHAT FORM
               Input field + Send button at bottom of chat

   SECTION 7:  MESSAGE ROWS + BUBBLES
               Bot/user message alignment, avatars, bubble styles

   SECTION 8:  TYPING INDICATOR
               "Avery is typing..." animation

   SECTION 9:  SIDEBAR
               Container for Tips, Progress, and Badges cards

   SECTION 10: TIPS LIST
               5 tips with emoji bullets

   SECTION 11: PROGRESS BAR
               Exchange counter (0/5) with animated fill

   SECTION 12: BADGES CARD + GRID
               8 badges in 2x4 grid, earned state styling

   SECTION 13: BADGE IMAGE BLOCKING
               Prevents emoji-to-image replacement (nuclear rules)

   SECTION 14: BADGE TOOLTIPS
               Hover tooltips showing badge descriptions

   SECTION 15: BADGE EMOJI FALLBACKS
               CSS fallback if emoji text is stripped

   SECTION 16: FOOTER CONTROLS
               Floating timer + End/Restart buttons

   SECTION 17: RESPONSIVE (Mobile < 900px)
               Stacked layout for narrow screens

   =========================================================
   VERSIONING CONVENTION
   =========================================================

   Format: YYYYMMDD + letter (e.g., 20260113a)

   Update the version in TWO places when making changes:
   1. This file header (above)
   2. index.html cache-bust query strings:
      - style.css?v=20260113a
      - overrides.css?v=20260113a

   Increment the letter (a→b→c) for same-day changes.

   =========================================================
   KEY MEASUREMENTS (for alignment debugging)
   =========================================================

   Header height:     ~60px (padding: 12px + content)
   Main padding:      8px top, 16px sides/bottom
   Grid height:       calc(100vh - 140px)
   Grid gap:          12px
   Sidebar width:     260px
   Sidebar card gap:  6px

   Chat + Sidebar should align at bottom. If misaligned:
   - Check Tips/Progress card heights (should be compact)
   - Verify sidebar gap is 6px
   - Both columns use same height calc

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

/* =========================================================
   SECTION 1: BASE THEME + BODY
========================================================= */

* { box-sizing: border-box; }

body.is-persuasion {
  /* --ps-* = persuasion sim design tokens */
  --ps-bg: #f6f8ff;                           /* Page background base */
  --ps-panel: rgba(255, 255, 255, 0.92);      /* Card backgrounds */
  --ps-border: rgba(17, 24, 39, 0.12);        /* Card borders */
  --ps-shadow: 0 18px 50px rgba(17, 24, 39, 0.10);  /* Card shadows */
  --ps-text: #111827;                         /* Primary text color */
  --ps-bot-bg: rgba(255, 255, 255, 0.96);     /* Avery's message bubbles */
  --ps-user-bg: rgba(37, 99, 235, 0.10);      /* User's message bubbles */
  --ps-user-border: rgba(37, 99, 235, 0.45);  /* User bubble border */
  --ps-radius: 22px;                          /* Default border radius */
  --ps-avatar: 48px;                          /* User "YOU" badge size */
  --ps-avatar-bot: 56px;                      /* Avery avatar size */
  --ps-gap: 12px;                             /* Message row gap */

  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  position: relative;
  overflow-x: hidden;

  background:
    radial-gradient(900px 500px at 15% 20%, rgba(37, 99, 235, 0.10), transparent 60%),
    radial-gradient(700px 450px at 85% 35%, rgba(99, 102, 241, 0.10), transparent 55%),
    linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #e0e7ff 100%) !important;
}

/* =========================================================
   SECTION 2: FLOATING PARTICLES
========================================================= */

body.is-persuasion .particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

body.is-persuasion .particle {
  position: absolute;
  border-radius: 50%;
  animation: float-particle 15s ease-in-out infinite;
}

@keyframes float-particle {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.4; }
  50% { transform: translateY(-30px) translateX(20px); opacity: 0.8; }
}

/* =========================================================
   SECTION 3: HEADER
========================================================= */

body.is-persuasion .app-header {
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  border-bottom: 3px solid #f97316 !important;
  padding: 12px 0 !important;
  position: relative;
  z-index: 10;
}

body.is-persuasion .app-header .container {
  max-width: 100% !important;
  padding: 0 24px !important;
}

body.is-persuasion .app-header-inner,
body.is-persuasion .app-header-inner--clean {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start !important;
}

body.is-persuasion .sim-header-copy {
  text-align: left !important;
}

body.is-persuasion .sim-hero {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(249, 115, 22, 0.4);
  border: 2px solid #fbbf24;
  flex-shrink: 0;
}

body.is-persuasion .sim-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.is-persuasion .sim-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 1px 0 !important;
}

body.is-persuasion .sim-subtitle {
  font-size: 11px !important;
  color: rgba(255,255,255,0.6) !important;
  margin: 0 !important;
}

/* =========================================================
   SECTION 4: MAIN CONTENT + GRID LAYOUT

   CRITICAL FOR ALIGNMENT:
   - Grid height calc(100vh - 140px) = viewport minus header/padding
   - Both columns (chat + sidebar) stretch to this height
   - If badges card overflows, reduce Tips/Progress card sizes
========================================================= */

body.is-persuasion .app-main {
  padding: 8px 16px 16px 16px !important;
  position: relative;
  z-index: 1;
}

body.is-persuasion .sim-grid {
  display: grid !important;
  grid-template-columns: 1fr 260px !important;  /* Chat flexible, sidebar fixed */
  gap: 12px !important;
  height: calc(100vh - 140px) !important;       /* KEY: Sets both column heights */
  min-height: 400px !important;
  align-items: stretch !important;              /* Both columns same height */
}

/* =========================================================
   SECTION 5: CHAT CARD
========================================================= */

body.is-persuasion .chat-card,
body.is-persuasion .side-card {
  background: var(--ps-panel) !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--ps-shadow) !important;
}

body.is-persuasion .chat-card {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 140px) !important;  /* Match sidebar height exactly */
  min-height: 400px !important;
  overflow: hidden !important;
}

body.is-persuasion .chat-card,
body.is-persuasion .chat-container,
body.is-persuasion .chat-log,
body.is-persuasion .chat-log * {
  background-image: none !important;
}

body.is-persuasion .chat-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.is-persuasion .chat-log {
  flex: 1 1 auto !important;
  min-height: 100px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* =========================================================
   SECTION 6: CHAT FORM
========================================================= */

body.is-persuasion .chat-form {
  flex: 0 0 auto !important;
  display: flex !important;
  gap: 10px !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-top: 1px solid rgba(17, 24, 39, 0.08) !important;
  position: relative !important;
  z-index: 10 !important;
}

body.is-persuasion .chat-form input[type="text"],
body.is-persuasion .chat-form input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
}

body.is-persuasion .chat-form input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

body.is-persuasion .chat-form button,
body.is-persuasion .chat-form input[type="submit"],
body.is-persuasion .chat-form .btn-primary {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.95), rgba(29, 78, 216, 0.95)) !important;
  color: #fff !important;
  border: 1px solid rgba(29, 78, 216, 0.5) !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body.is-persuasion .chat-form button:hover,
body.is-persuasion .chat-form input[type="submit"]:hover,
body.is-persuasion .chat-form .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important;
}

/* =========================================================
   SECTION 7: MESSAGE ROWS + BUBBLES
========================================================= */

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

body.is-persuasion .msg-row {
  animation: message-in 0.3s ease-out forwards;
}

body.is-persuasion #chat-log .msg-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--ps-gap) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
  margin: 10px 0 !important;
  position: relative !important;
}

body.is-persuasion #chat-log .msg-row.is-bot { justify-content: flex-start !important; }
body.is-persuasion #chat-log .msg-row.is-user { justify-content: flex-end !important; }

body.is-persuasion #chat-log .avatar,
body.is-persuasion #chat-log .msg-avatar,
body.is-persuasion #chat-log .chat-avatar,
body.is-persuasion #chat-log .bubble-avatar,
body.is-persuasion #chat-log .message-avatar,
body.is-persuasion #chat-log .user-avatar,
body.is-persuasion #chat-log .bot-avatar {
  display: none !important;
}

body.is-persuasion #chat-log .msg-row.is-bot::before {
  content: "" !important;
  width: var(--ps-avatar-bot) !important;
  height: var(--ps-avatar-bot) !important;
  border-radius: 999px !important;
  background-color: transparent !important;
  background-image: var(--assistant-avatar-url) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 0 solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12) !important;
  flex: 0 0 auto !important;
  margin-top: 2px !important;
}

body.is-persuasion #chat-log .msg-row.is-bot.no-avatar::before {
  display: none !important;
}

body.is-persuasion #chat-log .msg-row.is-user::after {
  content: "YOU" !important;
  width: var(--ps-avatar) !important;
  height: var(--ps-avatar) !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.95), rgba(29, 78, 216, 0.95)) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  font-size: 12px !important;
  border: 5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.14) !important;
  flex: 0 0 auto !important;
  margin-top: 2px !important;
}

body.is-persuasion #chat-log .msg-bubble,
body.is-persuasion #chat-log .msg {
  max-width: min(680px, 72%) !important;
  padding: 14px 16px !important;
  border-radius: var(--ps-radius) !important;
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.10) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

body.is-persuasion #chat-log .msg-row.is-bot .msg-bubble,
body.is-persuasion #chat-log .msg-bot {
  background: var(--ps-bot-bg) !important;
  color: var(--ps-text) !important;
  border: 1px solid rgba(17, 24, 39, 0.10) !important;
  border-top-left-radius: 14px !important;
}

body.is-persuasion #chat-log .msg-row.is-user .msg-bubble,
body.is-persuasion #chat-log .msg-user {
  background: var(--ps-user-bg) !important;
  color: #0f172a !important;
  border: 1px solid var(--ps-user-border) !important;
  border-top-right-radius: 14px !important;
}

/* =========================================================
   SECTION 8: TYPING INDICATOR
========================================================= */

body.is-persuasion #typing-indicator {
  font-size: 0 !important;
}

body.is-persuasion #typing-indicator::before {
  content: "Avery is typing..." !important;
  font-size: 13px !important;
  color: rgba(17, 24, 39, 0.70) !important;
}

/* =========================================================
   SECTION 9: SIDEBAR

   Layout: Flex column with 3 cards (Tips, Progress, Badges)
   - Tips + Progress: flex: 0 0 auto (fixed height based on content)
   - Badges: flex: 1 1 0 (fills remaining space)

   ALIGNMENT FIX: Sidebar height MUST match grid height.
   If badges card overflows, make Tips/Progress more compact.
========================================================= */

/* Hide the default side-card from base template */
body.is-persuasion .side-card.side-card--fullheight {
  display: none !important;
}

body.is-persuasion .side-card {
  display: block !important;
}

/* Sidebar container - MUST match grid height for alignment */
body.is-persuasion .persuasion-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;                          /* Compact gap between cards */
  height: calc(100vh - 140px) !important;       /* SAME as grid height */
  overflow: visible !important;                 /* Allow tooltips to overflow */
}

/* Base card styling (Tips + Progress cards) */
body.is-persuasion .persuasion-sidebar .sidebar-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.08);
  flex: 0 0 auto !important;                    /* Don't grow, don't shrink */
  padding: 8px 10px !important;                 /* Compact padding */
  overflow: visible !important;
}

body.is-persuasion .persuasion-sidebar .sidebar-card h3 {
  color: #f97316;
  font-weight: 700;
  font-size: 12px !important;
  margin: 0 0 4px 0 !important;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* =========================================================
   SECTION 10: TIPS LIST
========================================================= */

body.is-persuasion .tips-list {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

body.is-persuasion .tips-list li {
  padding: 2px 0 !important;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px !important;
  color: #475569;
  line-height: 1.3;
}

body.is-persuasion .tip-emoji {
  flex-shrink: 0;
  font-size: 13px;
}

/* =========================================================
   SECTION 11: PROGRESS BAR
========================================================= */

body.is-persuasion .progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

body.is-persuasion .progress-label {
  font-size: 11px;
  color: #475569;
}

body.is-persuasion .progress-count {
  font-size: 11px;
  font-weight: 700;
  color: #f97316;
}

body.is-persuasion .progress-bar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

body.is-persuasion .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 999px;
  transition: width 0.5s ease-out;
}

/* =========================================================
   SECTION 12: BADGES CARD + GRID (GAME-STYLE!)
   
   5/5 Design for Grade 7-8 Students
   - Warm locked badges (friendly, not cold)
   - Epic animated earned badges
   - Rainbow glow + gold gradient
========================================================= */

/* Badges card - fills remaining sidebar space */
body.is-persuasion .persuasion-sidebar .sidebar-card:last-child,
body.is-persuasion .persuasion-sidebar .sidebar-card.badges-card {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-top: 10px !important;
  padding-bottom: 12px !important;
  box-sizing: border-box !important;
}

/* 2-column badge grid */
body.is-persuasion #badges-grid,
body.is-persuasion .badges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Base badge item - LOCKED state (warm & friendly) */
body.is-persuasion .badge-item,
body.is-persuasion [data-badge] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  opacity: 0.55;
  transition: all 0.3s ease;
  position: relative !important;
  cursor: help;
  background-image: none !important;
}

body.is-persuasion .badge-item:hover {
  z-index: 10000 !important;
  opacity: 0.75;
  background: #f1f5f9;
}

/* ===== EARNED BADGE - MAXIMUM HYPE! ===== */
body.is-persuasion .badge-item.earned {
  opacity: 1 !important;
  transform: scale(1.03) !important;
  background: linear-gradient(145deg, #fbbf24, #f59e0b, #d97706) !important;
  border: none !important;
  border-radius: 12px !important;
  position: relative !important;
  z-index: 5 !important;
  animation: 
    badge-unlock 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    badge-glow-pulse 2s ease-in-out infinite !important;
  box-shadow: 
    0 0 20px rgba(251, 191, 36, 0.6),
    0 0 40px rgba(245, 158, 11, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.3) !important;
}

/* Rainbow animated border */
body.is-persuasion .badge-item.earned::before {
  content: "" !important;
  position: absolute !important;
  top: -3px !important;
  left: -3px !important;
  right: -3px !important;
  bottom: -3px !important;
  background: linear-gradient(
    45deg,
    #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd, #ff6b6b
  ) !important;
  background-size: 300% !important;
  border-radius: 14px !important;
  z-index: -1 !important;
  animation: rainbow-spin 4s linear infinite !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
}

/* Inner background */
body.is-persuasion .badge-item.earned::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(145deg, #fbbf24, #f59e0b, #d97706) !important;
  border-radius: 12px !important;
  z-index: -1 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
}

@keyframes rainbow-spin {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes badge-unlock {
  0% { 
    transform: scale(0.5) rotate(-10deg); 
    opacity: 0;
  }
  50% { 
    transform: scale(1.15) rotate(3deg); 
  }
  100% { 
    transform: scale(1.03) rotate(0deg); 
    opacity: 1;
  }
}

@keyframes badge-glow-pulse {
  0%, 100% { 
    box-shadow: 
      0 0 20px rgba(251, 191, 36, 0.6),
      0 0 40px rgba(245, 158, 11, 0.4),
      inset 0 2px 4px rgba(255, 255, 255, 0.3);
  }
  50% { 
    box-shadow: 
      0 0 30px rgba(251, 191, 36, 0.8),
      0 0 60px rgba(245, 158, 11, 0.5),
      inset 0 2px 4px rgba(255, 255, 255, 0.4);
  }
}

/* Earned hover */
body.is-persuasion .badge-item.earned:hover {
  transform: scale(1.1) !important;
  box-shadow: 
    0 0 35px rgba(251, 191, 36, 0.9),
    0 0 70px rgba(245, 158, 11, 0.6),
    inset 0 2px 6px rgba(255, 255, 255, 0.4) !important;
}

/* Earned emoji - bigger with glow */
body.is-persuasion .badge-item.earned .badge-emoji {
  font-size: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2)) !important;
  animation: emoji-bounce 2s ease-in-out infinite !important;
}

@keyframes emoji-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* Earned name - white and bold */
body.is-persuasion .badge-item.earned .badge-name {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Base emoji styling */
body.is-persuasion .badge-emoji,
body.is-persuasion .badge-item .badge-emoji,
body.is-persuasion #badges-grid .badge-emoji,
body.is-persuasion [data-badge] .badge-emoji,
body.is-persuasion .sidebar-card .badge-emoji {
  background: none !important;
  background-image: none !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 
               "Noto Color Emoji", "Android Emoji", "EmojiSymbols", 
               "Twemoji Mozilla", sans-serif !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: inherit !important;
  -webkit-text-fill-color: initial !important;
  display: inline-block !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 18px !important;
  min-height: 18px !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  clip: auto !important;
  clip-path: none !important;
}

body.is-persuasion .badge-emoji::before,
body.is-persuasion .badge-emoji::after,
body.is-persuasion .badge-item .badge-emoji::before,
body.is-persuasion .badge-item .badge-emoji::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
  display: none !important;
}

/* Badge name styling (locked) */
body.is-persuasion .badge-name {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
  line-height: 1.2;
}



/* =========================================================
   SECTION 13: BADGE IMAGE BLOCKING (NUCLEAR OPTION)

   WHY THIS EXISTS:
   Something in the Replit environment or browser extensions
   replaces emoji text with image tags. This breaks our badge
   display by showing "brain image" instead of 🧠.

   SOLUTION:
   Aggressively hide ALL img/svg elements inside badges and
   block ::before pseudo-elements that might inject images.

   WARNING: Don't remove these rules without testing in Replit.
========================================================= */

/* Hide any injected images in badge area */
body.is-persuasion #badges-grid img,
body.is-persuasion #badges-grid svg,
body.is-persuasion #badges-grid picture,
body.is-persuasion .badges-grid img,
body.is-persuasion .badges-grid svg,
body.is-persuasion .badges-grid picture,
body.is-persuasion .badge-item img,
body.is-persuasion .badge-item svg,
body.is-persuasion .badge-emoji img,
body.is-persuasion .badge-emoji svg,
body.is-persuasion [data-badge] img,
body.is-persuasion [data-badge] svg {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

body.is-persuasion .badge-item::before,
body.is-persuasion .sidebar-card .badge-item::before,
body.is-persuasion #badges-grid .badge-item::before,
body.is-persuasion .badges-grid .badge-item::before,
body.is-persuasion [data-badge]::before,
body.is-persuasion .sidebar-card [data-badge]::before,
body.is-persuasion #badges-grid [data-badge]::before,
body.is-persuasion div.badge-item::before,
body.is-persuasion div[data-badge]::before,
body.is-persuasion .persuasion-sidebar .badge-item::before,
body.is-persuasion .persuasion-sidebar [data-badge]::before,
body.is-persuasion [data-badge="logic_legend"]::before,
body.is-persuasion [data-badge="respect_rocket"]::before,
body.is-persuasion [data-badge="evidence_explorer"]::before,
body.is-persuasion [data-badge="listener_legend"]::before,
body.is-persuasion [data-badge="counterpoint_pro"]::before,
body.is-persuasion [data-badge="question_master"]::before,
body.is-persuasion [data-badge="bridge_builder"]::before,
body.is-persuasion [data-badge="level_up_thinker"]::before,
body.is-persuasion [data-badge="perspective_ninja"]::before,
body.is-persuasion [data-badge="comeback_champion"]::before {
  background: transparent !important;
  background-image: none !important;
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

body.is-persuasion .badge-item::after,
body.is-persuasion [data-badge]::after {
  background: transparent !important;
  background-image: none !important;
}

/* =========================================================
   SECTION 14: BADGE TOOLTIPS
========================================================= */

body.is-persuasion .badge-item:hover::after {
  content: attr(data-tooltip) !important;
  display: block !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  background: #0f172a !important;
  background-image: none !important;
  color: #fff !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.2) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

body.is-persuasion .badge-item:hover::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: calc(100% + 2px) !important;
  bottom: auto !important;
  left: 20px !important;
  right: auto !important;
  transform: none !important;
  border: 6px solid transparent !important;
  border-bottom-color: #0f172a !important;
  border-top-color: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 99999 !important;
  background: none !important;
  background-image: none !important;
  width: auto !important;
  height: auto !important;
}

body.is-persuasion .badge-item:nth-child(even):hover::after {
  left: auto !important;
  right: 0 !important;
  transform: translateX(0) !important;
}

body.is-persuasion .badge-item:nth-child(even):hover::before {
  left: auto !important;
  right: 20px !important;
  transform: translateX(0) !important;
}



/* EARNED BADGE TOOLTIP FIX - show ABOVE badge to avoid clipping */
body.is-persuasion .badge-item.earned:hover::before {
  content: "" !important;
  position: absolute !important;
  bottom: calc(100% + 2px) !important;
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 6px solid transparent !important;
  border-top-color: #0f172a !important;
  border-bottom-color: transparent !important;
  border-radius: 0 !important;
  animation: none !important;
  z-index: 100001 !important;
}

body.is-persuasion .badge-item.earned:hover::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  background: #0f172a !important;
  background-image: none !important;
  color: #fff !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  animation: none !important;
  z-index: 100001 !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important;
}

body.is-persuasion .badge-item.earned:nth-child(even):hover::after,
body.is-persuasion .badge-item.earned:nth-child(even):hover::before {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* =========================================================
   SECTION 15: BADGE EMOJI FALLBACKS
========================================================= */

body.is-persuasion [data-badge="logic_legend"] .badge-emoji:empty::before { content: "🧠" !important; display: inline !important; }
body.is-persuasion [data-badge="respect_rocket"] .badge-emoji:empty::before { content: "🚀" !important; display: inline !important; }
body.is-persuasion [data-badge="evidence_explorer"] .badge-emoji:empty::before { content: "🔍" !important; display: inline !important; }
body.is-persuasion [data-badge="listener_legend"] .badge-emoji:empty::before { content: "👂" !important; display: inline !important; }
body.is-persuasion [data-badge="counterpoint_pro"] .badge-emoji:empty::before { content: "⚔️" !important; display: inline !important; }
body.is-persuasion [data-badge="question_master"] .badge-emoji:empty::before { content: "❓" !important; display: inline !important; }
body.is-persuasion [data-badge="bridge_builder"] .badge-emoji:empty::before { content: "🌉" !important; display: inline !important; }
body.is-persuasion [data-badge="level_up_thinker"] .badge-emoji:empty::before { content: "📈" !important; display: inline !important; }

/* =========================================================
   SECTION 16: FOOTER CONTROLS
========================================================= */

body.is-persuasion .sim-footer {
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  left: auto !important;
  top: auto !important;
  width: 200px !important;
  z-index: 100 !important;
}

body.is-persuasion .sim-footer .container {
  padding: 0 !important;
  max-width: 100% !important;
}

body.is-persuasion .sim-footer-inner {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(17, 24, 39, 0.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(17, 24, 39, 0.12) !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body.is-persuasion .sim-footer .kpi {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 13px !important;
  color: #475569 !important;
}

body.is-persuasion .sim-footer .kpi span {
  font-weight: 700;
  color: #1e293b;
}

body.is-persuasion .sim-footer-actions {
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

body.is-persuasion .sim-footer-actions .btn {
  font-size: 13px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
}

body.is-persuasion .sim-footer-actions .btn:last-child,
body.is-persuasion .sim-footer-actions button:last-child {
  font-size: 0 !important;
  position: relative !important;
}

body.is-persuasion .sim-footer-actions .btn:last-child::after,
body.is-persuasion .sim-footer-actions button:last-child::after {
  content: "Restart" !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

/* =========================================================
   SECTION 17: RESPONSIVE (Mobile < 900px)

   MOBILE LAYOUT:
   - Grid switches from 2-column to single column
   - Chat card stacks above sidebar
   - Sidebar cards wrap horizontally (flex-wrap)
   - Height constraints removed (content determines height)

   BREAKPOINT: 900px chosen to accommodate tablets in portrait
========================================================= */

@media (max-width: 900px) {
  /* Single column layout */
  body.is-persuasion .sim-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Chat card: limited height so sidebar is visible */
  body.is-persuasion .chat-card {
    height: auto !important;
    min-height: 350px !important;
    max-height: 55vh !important;           /* Don't take more than half the screen */
  }

  /* Sidebar: horizontal wrap layout */
  body.is-persuasion .persuasion-sidebar {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Cards can grow and wrap */
  body.is-persuasion .persuasion-sidebar .sidebar-card {
    flex: 1 1 auto !important;
    min-width: 200px;
  }

  /* Badges card: no height constraint on mobile (stacked layout) */
  body.is-persuasion .persuasion-sidebar .sidebar-card:last-child,
  body.is-persuasion .persuasion-sidebar .sidebar-card.badges-card {
    min-height: 200px !important;
    max-height: none !important;
  }

  body.is-persuasion .sim-footer {
    bottom: 16px !important;
  }
}

/* =========================================================
   SECTION 18: MORGAN SCENARIO STYLES

   Styles for the Morgan landlord negotiation simulation.
   Applied when body has class "is-morgan".

   Design: Professional, clean, business-like feel
   Color scheme: Slate/gray tones with teal accents
========================================================= */

/* Morgan theme variables */
body.is-morgan {
  --morgan-bg: #f8fafc;
  --morgan-panel: rgba(255, 255, 255, 0.95);
  --morgan-border: rgba(71, 85, 105, 0.15);
  --morgan-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
  --morgan-text: #1e293b;
  --morgan-accent: #0d9488;          /* Teal */
  --morgan-accent-light: #ccfbf1;
  --morgan-bot-bg: #f1f5f9;
  --morgan-user-bg: #0d9488;
  --morgan-user-text: #ffffff;

  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Morgan header */
body.is-morgan .app-header {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  padding: 12px 0 !important;
}

body.is-morgan .app-header-inner {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

body.is-morgan .sim-hero.morgan-hero {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

body.is-morgan .morgan-avatar-placeholder {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--morgan-accent), #14b8a6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: white;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}

body.is-morgan .sim-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 2px 0 !important;
}

body.is-morgan .sim-subtitle {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
}

/* Morgan main layout */
body.is-morgan .app-main {
  padding: 16px !important;
}

body.is-morgan .sim-grid {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 16px !important;
  height: calc(100vh - 140px) !important;
  min-height: 400px !important;
}

/* Morgan chat card */
body.is-morgan .chat-card {
  background: var(--morgan-panel) !important;
  border: 1px solid var(--morgan-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--morgan-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.is-morgan .chat-container {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

body.is-morgan .chat-log {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 20px !important;
}

/* Morgan message bubbles */
body.is-morgan .msg-row {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  align-items: flex-start !important;
}

body.is-morgan .msg-row.from-bot {
  flex-direction: row !important;
}

body.is-morgan .msg-row.from-user {
  flex-direction: row-reverse !important;
}

/* Morgan avatar in messages */
body.is-morgan .msg-row .msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

body.is-morgan .msg-row.from-bot .msg-avatar {
  background: linear-gradient(135deg, var(--morgan-accent), #14b8a6);
  color: white;
}

body.is-morgan .msg-row.from-user .msg-avatar {
  background: #64748b;
  color: white;
}

/* Morgan message bubbles */
body.is-morgan .msg-row .bubble {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 16px;
  line-height: 1.5;
  font-size: 14px;
}

body.is-morgan .msg-row.from-bot .bubble {
  background: var(--morgan-bot-bg);
  color: var(--morgan-text);
  border-bottom-left-radius: 4px;
}

body.is-morgan .msg-row.from-user .bubble {
  background: var(--morgan-user-bg);
  color: var(--morgan-user-text);
  border-bottom-right-radius: 4px;
}

/* Morgan chat form */
body.is-morgan .chat-form {
  display: flex !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-top: 1px solid var(--morgan-border) !important;
  background: #fafbfc !important;
}

body.is-morgan .chat-form input {
  flex: 1 !important;
  padding: 12px 16px !important;
  border: 1px solid var(--morgan-border) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

body.is-morgan .chat-form input:focus {
  border-color: var(--morgan-accent) !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1) !important;
}

body.is-morgan .chat-form button {
  padding: 12px 24px !important;
  background: var(--morgan-accent) !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.1s !important;
}

body.is-morgan .chat-form button:hover {
  background: #0f766e !important;
}

body.is-morgan .chat-form button:active {
  transform: scale(0.98) !important;
}

/* Morgan sidebar */
body.is-morgan .morgan-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.is-morgan .morgan-sidebar-card {
  background: var(--morgan-panel);
  border: 1px solid var(--morgan-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--morgan-shadow);
}

body.is-morgan .morgan-sidebar-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--morgan-accent);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.is-morgan .morgan-info-text {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 12px 0;
}

body.is-morgan .morgan-info-list {
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.8;
}

body.is-morgan .morgan-info-list li {
  margin-bottom: 4px;
}

/* Morgan footer */
body.is-morgan .sim-footer {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--morgan-border) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  box-shadow: var(--morgan-shadow) !important;
}

body.is-morgan .sim-footer-inner {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

body.is-morgan .sim-footer .kpi {
  font-size: 13px !important;
  color: #64748b !important;
}

body.is-morgan .sim-footer .btn {
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.is-morgan .sim-footer .btn-secondary {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid var(--morgan-border) !important;
}

body.is-morgan .sim-footer .btn-secondary:hover {
  background: #e2e8f0 !important;
}

/* Morgan typing indicator */
body.is-morgan .typing-indicator {
  padding: 8px 20px;
}

body.is-morgan .typing-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--morgan-bot-bg);
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 13px;
  color: #64748b;
}

/* Morgan message rows - avatar via ::before like persuasion */
body.is-morgan .msg-row {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  align-items: flex-start !important;
  position: relative !important;
  padding-left: 52px !important;
}

body.is-morgan .msg-row.is-bot {
  flex-direction: row !important;
}

body.is-morgan .msg-row.is-user {
  flex-direction: row-reverse !important;
  padding-left: 0 !important;
  padding-right: 52px !important;
}

/* Morgan avatar via ::before pseudo-element */
body.is-morgan .msg-row.is-bot::before {
  content: "M";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--morgan-accent), #14b8a6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

body.is-morgan .msg-row.is-user::before {
  content: "You";
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #64748b;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11px;
}

/* Hide avatar on continuation bubbles */
body.is-morgan .msg-row.no-avatar::before {
  display: none !important;
}

body.is-morgan .msg-row.no-avatar {
  padding-left: 52px !important;
}

body.is-morgan .msg-row.is-user.no-avatar {
  padding-left: 0 !important;
  padding-right: 52px !important;
}

/* Morgan message bubbles */
body.is-morgan .msg-row .msg-bubble,
body.is-morgan .msg-row .msg {
  max-width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  line-height: 1.5 !important;
  font-size: 14px !important;
}

body.is-morgan .msg-row.is-bot .msg-bubble,
body.is-morgan .msg-row.is-bot .msg {
  background: var(--morgan-bot-bg) !important;
  color: var(--morgan-text) !important;
  border: none !important;
  border-bottom-left-radius: 4px !important;
}

body.is-morgan .msg-row.is-user .msg-bubble,
body.is-morgan .msg-row.is-user .msg {
  background: var(--morgan-user-bg) !important;
  color: var(--morgan-user-text) !important;
  border: none !important;
  border-bottom-right-radius: 4px !important;
}

/* Morgan responsive */
@media (max-width: 900px) {
  body.is-morgan .app-main {
    padding: 12px !important;
  }

  body.is-morgan .sim-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: auto !important;
    min-height: auto !important;
  }

  body.is-morgan .chat-card {
    order: 1 !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
  }

  body.is-morgan .chat-container {
    height: auto !important;
    min-height: 400px !important;
    max-height: 60vh !important;
  }

  body.is-morgan .chat-log {
    min-height: 250px !important;
    max-height: 45vh !important;
  }

  body.is-morgan .chat-form {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background: #fafbfc !important;
  }

  body.is-morgan .morgan-sidebar {
    order: 2 !important;
    flex-direction: column !important;
  }

  body.is-morgan .morgan-sidebar-card {
    flex: none !important;
    width: 100% !important;
  }

  body.is-morgan .sim-footer {
    order: 3 !important;
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 12px !important;
  }
}

@media (max-width: 600px) {
  body.is-morgan .app-header {
    padding: 10px 0 !important;
  }

  body.is-morgan .app-header-inner {
    gap: 12px !important;
  }

  body.is-morgan .sim-hero.morgan-hero {
    width: 40px !important;
    height: 40px !important;
  }

  body.is-morgan .morgan-avatar-placeholder {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }

  body.is-morgan .sim-title {
    font-size: 16px !important;
  }

  body.is-morgan .sim-subtitle {
    font-size: 11px !important;
  }

  body.is-morgan .status-banner {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  body.is-morgan .msg-row {
    padding-left: 44px !important;
  }

  body.is-morgan .msg-row.is-user {
    padding-left: 0 !important;
    padding-right: 44px !important;
  }

  body.is-morgan .msg-row.is-bot::before,
  body.is-morgan .msg-row.is-user::before {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
  }

  body.is-morgan .msg-row.is-user::before {
    font-size: 9px !important;
  }

  body.is-morgan .chat-form {
    padding: 10px !important;
    gap: 8px !important;
  }

  body.is-morgan .chat-form input {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  body.is-morgan .chat-form button {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  body.is-morgan .sim-footer-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  body.is-morgan .sim-footer .kpi {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}