/* ============================================================
   NAFAS COMPLETE REDESIGN v3.0 — World-Class Mental Health UI
   Inspired by: Calm, Headspace, Woebot, BetterHelp
   Designer: AI Design Agent — NAFAS FOR ARTIFICIAL INTELLIGENCE
   ============================================================ */

/* ── RESET & BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Palette — Serene Night */
  --bg-deep:    #0B1120;
  --bg-surface: #111B2E;
  --bg-card:    rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.07);
  
  /* Accent — Therapeutic Teal */
  --accent:     #4ECDC4;
  --accent-soft:#3BA99F;
  --accent-glow: rgba(78,205,196,0.15);
  --accent-glow-strong: rgba(78,205,196,0.3);
  
  /* Text */
  --text-primary:   #E8E4DE;
  --text-secondary:  rgba(232,228,222,0.6);
  --text-muted:      rgba(232,228,222,0.35);
  
  /* Chat Bubbles */
  --bubble-bot:  rgba(78,205,196,0.08);
  --bubble-bot-border: rgba(78,205,196,0.15);
  --bubble-user: rgba(78,205,196,0.18);
  --bubble-user-border: rgba(78,205,196,0.25);
  
  /* Glass */
  --glass: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.06);
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 30px rgba(78,205,196,0.1);
  
  /* Spacing */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  
  /* Typography */
  --font: 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  
  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.3s;
  
  /* Z-index layers */
  --z-base: 1;
  --z-header: 100;
  --z-fab: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-crisis: 500;
  --z-splash: 600;
  
  /* OLD variable mappings for JS compatibility */
  --primary: #4ECDC4;
  --surface: #111B2E;
}

html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  font-family:var(--font);
  background:var(--bg-deep);
  color:var(--text-primary);
  line-height:1.7;
  overflow-x:hidden;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  direction:rtl;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(78,205,196,0.2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(78,205,196,0.35)}

/* ── SELECTION ── */
::selection{background:rgba(78,205,196,0.25);color:#fff}

/* ── SKIP LINK ── */
.skip-link{position:absolute;top:-100%;left:0;background:var(--accent);color:#000;padding:8px 16px;z-index:9999;border-radius:0 0 8px 8px;font-weight:700;transition:top .2s}
.skip-link:focus{top:0}

/* ══════════════════════════════════════════════════════════════
   BACKGROUND EFFECTS — Subtle, ambient
   ══════════════════════════════════════════════════════════════ */

.bg-blobs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.06;animation:blobDrift 30s ease-in-out infinite alternate;will-change:transform}
.blob:nth-child(1){width:600px;height:600px;background:radial-gradient(circle,rgba(92,224,214,0.5),rgba(92,224,214,0.1));top:-15%;right:-10%;animation-delay:0s}
.blob:nth-child(2){width:500px;height:500px;background:radial-gradient(circle,rgba(129,140,248,0.5),rgba(129,140,248,0.1));bottom:-10%;left:-15%;animation-delay:-10s}
.blob:nth-child(3){width:450px;height:450px;background:radial-gradient(circle,rgba(167,139,250,0.4),rgba(167,139,250,0.1));top:35%;right:25%;animation-delay:-20s}

@keyframes blobDrift{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-40px) scale(1.05)}
  66%{transform:translate(-20px,30px) scale(0.95)}
  100%{transform:translate(10px,-10px) scale(1)}
}

/* Stars — more subtle */
.stars-container{position:fixed;inset:0;pointer-events:none;z-index:0}
.star{position:absolute;width:1.5px;height:1.5px;background:rgba(255,255,255,0.8);border-radius:50%;opacity:0;animation:starTwinkle 5s ease-in-out infinite}
@keyframes starTwinkle{0%,100%{opacity:0}50%{opacity:0.4}}

/* ══════════════════════════════════════════════════════════════
   SPLASH SCREEN — Minimal, elegant
   ══════════════════════════════════════════════════════════════ */

.splash-screen{
  position:fixed;inset:0;
  background:var(--bg-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:var(--z-splash);
  animation:splashIn 0.5s var(--ease);
}
.splash-screen.fade-out{animation:splashOut 0.8s var(--ease) forwards}
@keyframes splashIn{from{opacity:0}to{opacity:1}}
@keyframes splashOut{to{opacity:0;visibility:hidden}}

.splash-content{text-align:center}
.splash-logo-container{position:relative;margin-bottom:16px}
.splash-logo{width:80px;height:auto;opacity:0.9}
.splash-glow{
  position:absolute;inset:-40px;
  background:radial-gradient(circle,rgba(78,205,196,0.12) 0%,transparent 70%);
  border-radius:50%;
  animation:splashGlow 3s ease-in-out infinite alternate;
}
@keyframes splashGlow{from{opacity:0.5;transform:scale(0.9)}to{opacity:1;transform:scale(1.1)}}

.splash-tagline{
  font-size:0.75rem;
  letter-spacing:0.3em;
  color:var(--accent);
  opacity:0.6;
  text-transform:uppercase;
  margin-top:8px;
}

/* ══════════════════════════════════════════════════════════════
   CONSENT OVERLAY — Clean card
   ══════════════════════════════════════════════════════════════ */

.consent-overlay{
  position:fixed;inset:0;
  background:rgba(11,17,32,0.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;
  z-index:var(--z-modal);
  padding:20px;
}
.consent-box{
  background:var(--bg-surface);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  max-width:440px;
  width:100%;
  max-height:85vh;
  overflow-y:auto;
  box-shadow:var(--shadow-lg);
}
.consent-box h2{
  font-size:1.3rem;
  font-weight:var(--fw-bold);
  color:var(--text-primary);
  margin-bottom:20px;
  text-align:center;
}
.consent-subtitle{
  color:var(--text-secondary);
  font-size:0.9rem;
  text-align:center;
  margin-bottom:24px;
}
.consent-section{
  margin-bottom:20px;
  padding:16px;
  background:var(--bg-card);
  border-radius:var(--radius-md);
  border:1px solid var(--glass-border);
}
.consent-section h3{
  font-size:0.95rem;
  font-weight:var(--fw-bold);
  color:var(--accent);
  margin-bottom:8px;
}
.consent-section p,
.consent-section li{
  font-size:0.85rem;
  color:var(--text-secondary);
  line-height:1.8;
}
.consent-section ul{list-style:none;padding:0}
.consent-section li{padding:4px 0}
.consent-section li::before{content:"✓ ";color:var(--accent);font-weight:bold}
.consent-section a{color:var(--accent);text-decoration:underline}

.consent-accept{
  display:block;
  width:100%;
  padding:14px 24px;
  margin-top:24px;
  background:linear-gradient(135deg,var(--accent),var(--accent-soft));
  color:#0B1120;
  font-family:var(--font);
  font-size:1rem;
  font-weight:var(--fw-bold);
  border:none;
  border-radius:var(--radius-full);
  cursor:pointer;
  transition:all var(--duration) var(--ease);
  box-shadow:0 4px 20px rgba(78,205,196,0.25);
}
.consent-accept:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 30px rgba(78,205,196,0.35);
}
.consent-accept:active{transform:scale(0.98)}

.consent-links{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-top:16px;
}
.consent-links a{
  color:var(--text-muted);
  font-size:0.8rem;
  cursor:pointer;
  transition:color var(--duration);
}
.consent-links a:hover{color:var(--accent)}

/* ══════════════════════════════════════════════════════════════
   WELCOME / HOME SCREEN — Premium, breathing, peaceful
   ══════════════════════════════════════════════════════════════ */

.screen.welcome{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px 20px;
  position:relative;
  z-index:var(--z-base);
  gap:0;
}

.welcome-header{height:0!important;margin:0!important;padding:0!important}

/* Logo */
.nafas-logo-container{
  position:relative;
  margin-bottom:8px;
}
.logo-breathing-glow{
  position:absolute;
  inset:-60px;
  background:radial-gradient(circle,rgba(92,224,214,0.08) 0%,rgba(129,140,248,0.03) 50%,transparent 70%);
  border-radius:50%;
  animation:logoBreath 6s ease-in-out infinite;
}
@keyframes logoBreath{
  0%,100%{opacity:0.4;transform:scale(0.85)}
  50%{opacity:0.8;transform:scale(1.15)}
}
.nafas-logo-img{
  width:64px;
  height:auto;
  position:relative;
  z-index:2;
  filter:brightness(1.15) drop-shadow(0 0 20px rgba(92,224,214,0.15));
}

/* App Name */
.app-name{
  font-size:2.6rem!important;
  font-weight:800!important;
  color:var(--text-primary)!important;
  letter-spacing:0.06em;
  margin-bottom:4px;
  background:none!important;
  -webkit-text-fill-color:var(--text-primary)!important;
  text-shadow:0 0 40px rgba(92,224,214,0.1);
}
.text-gold-shimmer{background:none!important;-webkit-background-clip:unset!important;-webkit-text-fill-color:var(--text-primary)!important}

/* Slogan */
.app-slogan{
  font-size:0.6rem;
  letter-spacing:0.4em;
  color:var(--accent);
  opacity:0.4;
  text-transform:uppercase;
  margin-bottom:16px;
  font-weight:var(--fw-medium);
}

/* Tagline */
.tagline{
  font-size:1rem;
  color:var(--text-secondary);
  margin-bottom:28px;
  font-weight:var(--fw-regular);
}

/* Returning user welcome */
.returning-welcome{
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  padding:12px 20px;
  margin-bottom:20px;
  font-size:0.9rem;
  color:var(--text-secondary);
}

/* ── Breathing Hero ── */
.breath-hero{
  margin-bottom:32px;
  position:relative;
}
.breath-hero-circle{
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(92,224,214,0.1), rgba(92,224,214,0.02));
  border:1px solid rgba(92,224,214,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  animation:breathCircle 6s ease-in-out infinite;
  position:relative;
  backdrop-filter:blur(8px);
  box-shadow:0 0 60px rgba(92,224,214,0.06),inset 0 0 30px rgba(92,224,214,0.03);
}
.breath-hero-circle::before{
  content:'';
  position:absolute;
  inset:-20px;
  border-radius:50%;
  border:1px solid rgba(92,224,214,0.04);
  animation:breathCircle 6s ease-in-out infinite;
  animation-delay:-1.5s;
}
.breath-hero-circle::after{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:1px solid rgba(92,224,214,0.07);
  animation:breathCircle 6s ease-in-out infinite;
  animation-delay:-3s;
}
@keyframes breathCircle{
  0%,100%{transform:scale(0.9);border-color:rgba(92,224,214,0.08)}
  50%{transform:scale(1.1);border-color:rgba(92,224,214,0.2)}
}
.breath-hero-text{
  font-size:0.95rem;
  color:var(--accent);
  opacity:0.8;
  font-weight:var(--fw-medium);
}
.breath-hero-subtitle{
  font-size:0.8rem;
  color:var(--text-muted);
  animation:breathFade 5s ease-in-out infinite;
}
@keyframes breathFade{0%,100%{opacity:0.3}50%{opacity:0.6}}

/* ── CTA Buttons ── */
.cta-primary{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:100%;
  max-width:300px;
  padding:18px 32px;
  background:linear-gradient(135deg,#5CE0D6 0%,#45C4BA 40%,#38B2AC 100%);
  color:#060b16;
  font-family:var(--font);
  font-size:1.05rem;
  font-weight:var(--fw-bold);
  border:none;
  border-radius:var(--radius-xl);
  cursor:pointer;
  transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 4px 20px rgba(92,224,214,0.2),0 0 60px rgba(92,224,214,0.06);
  margin:0 auto 14px;
  position:relative;
  overflow:hidden;
}
.cta-primary::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
  transform:translateX(-100%);
  transition:transform 0.6s;
}
.cta-primary:hover::before{transform:translateX(100%)}
.cta-primary:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 8px 36px rgba(92,224,214,0.3),0 0 80px rgba(92,224,214,0.08);
}
.cta-primary:active{transform:scale(0.97)}
.cta-icon{font-size:1.1rem}

.cta-row{
  display:flex;
  gap:10px;
  width:100%;
  max-width:320px;
  margin:0 auto 20px;
}
.cta-secondary{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:14px 12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text-primary);
  font-family:var(--font);
  font-size:0.85rem;
  font-weight:var(--fw-medium);
  border-radius:var(--radius-lg);
  cursor:pointer;
  transition:all 0.35s var(--ease);
  backdrop-filter:blur(12px);
}
.cta-secondary:hover{
  background:var(--bg-card-hover);
  border-color:rgba(78,205,196,0.2);
  transform:translateY(-1px);
}
.cta-secondary:active{transform:scale(0.97)}

/* ── Quick actions row ── */
.welcome-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  max-width:340px;
  margin:0 auto;
}

/* Hug, Journey Code, Tour buttons */
.welcome-actions button,
.screen.welcome > button:not(.cta-primary):not(.cta-secondary),
button[onclick="showHugAnimation()"],
button[onclick="showJourneyInput()"],
button[onclick="startTour()"] {
  background:transparent;
  border:1px solid var(--glass-border);
  color:var(--text-secondary);
  font-family:var(--font);
  font-size:0.82rem;
  padding:8px 16px;
  border-radius:var(--radius-full);
  cursor:pointer;
  transition:all var(--duration) var(--ease);
  white-space:nowrap;
}
.welcome-actions button:hover,
button[onclick="showHugAnimation()"]:hover,
button[onclick="showJourneyInput()"]:hover,
button[onclick="startTour()"]:hover{
  border-color:rgba(78,205,196,0.25);
  color:var(--accent);
  background:var(--bg-card);
}

/* Bottom links */
.screen.welcome a[onclick]{
  color:var(--text-muted);
  font-size:0.78rem;
  cursor:pointer;
  transition:color var(--duration);
  text-decoration:none;
}
.screen.welcome a[onclick]:hover{color:var(--accent)}

/* Modes grid — hidden by default, but styled if shown */
.modes-grid{display:none!important}

/* ══════════════════════════════════════════════════════════════
   MOOD CHECK (Emoji Screen)
   ══════════════════════════════════════════════════════════════ */

.mood-check,.mood-overlay,.screen.mood{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
}
.mood-check h2,.mood-overlay h2,[id*="mood"] h2{
  font-size:1.2rem;
  color:var(--text-primary);
  margin-bottom:24px;
}
/* Emoji buttons */
.mood-buttons,.mood-emojis{
  display:flex;
  gap:16px;
  justify-content:center;
  margin-bottom:20px;
}

/* ══════════════════════════════════════════════════════════════
   CHAT SCREEN — The heart of Nafas
   ══════════════════════════════════════════════════════════════ */

.screen.chat{
  display:flex;
  flex-direction:column;
  height:100dvh;
  position:relative;
  z-index:var(--z-base);
}

/* ── Chat Header ── */
.chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background:rgba(11,17,32,0.8);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
  position:sticky;
  top:0;
  z-index:var(--z-header);
  min-height:56px;
}
.chat-header-right{
  display:flex;
  align-items:center;
  gap:12px;
}
.chat-back{
  background:none;
  border:none;
  color:var(--text-secondary);
  font-size:1.3rem;
  cursor:pointer;
  padding:6px;
  border-radius:var(--radius-sm);
  transition:all var(--duration);
  display:flex;
  align-items:center;
}
.chat-back:hover{color:var(--accent);background:var(--bg-card)}

.chat-mode-label{
  font-size:0.9rem;
  font-weight:var(--fw-bold);
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:6px;
}
.chat-mode-label .mode-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{opacity:0.5}50%{opacity:1}}

.chat-header-left{display:flex;align-items:center;gap:8px}
.chat-settings-btn{
  background:none;
  border:none;
  color:var(--text-muted);
  font-size:1.1rem;
  cursor:pointer;
  padding:6px;
  border-radius:var(--radius-sm);
  transition:all var(--duration);
}
.chat-settings-btn:hover{color:var(--text-primary);background:var(--bg-card)}

/* Settings panel */
.settings-panel{
  display:none;
  position:absolute;
  top:56px;
  left:16px;
  right:16px;
  background:var(--bg-surface);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  padding:16px;
  z-index:var(--z-overlay);
  box-shadow:var(--shadow-lg);
  flex-direction:column;
  gap:8px;
  max-width:300px;
}
.settings-panel.open{display:flex}

.settings-panel button,
.settings-panel select{
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  color:var(--text-primary);
  font-family:var(--font);
  font-size:0.85rem;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  text-align:right;
  transition:all var(--duration);
  width:100%;
}
.settings-panel button:hover{
  background:var(--bg-card-hover);
  border-color:rgba(78,205,196,0.2);
}
.settings-panel button[style*="color"]{color:oklch(62% .18 22)!important}

.voice-select-wrap{display:flex;flex-direction:column;gap:6px}
.voice-select-wrap label{font-size:0.8rem;color:var(--text-muted)}
.voice-select-wrap select{
  background:var(--bg-card);
  color:var(--text-primary);
  border:1px solid var(--glass-border);
  padding:8px 12px;
  border-radius:var(--radius-sm);
  font-family:var(--font);
}
.tts-badge{
  display:inline-block;
  font-size:0.7rem;
  padding:2px 8px;
  background:var(--accent-glow);
  color:var(--accent);
  border-radius:var(--radius-full);
  margin-top:4px;
}

/* ── Burnout Progress Bar ── */
.burnout-bar{
  height:3px;
  background:var(--glass);
  position:relative;
  overflow:hidden;
}
.burnout-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--accent),#38B2AC);
  border-radius:0 4px 4px 0;
  transition:width 1s var(--ease);
  position:relative;
}
.burnout-bar-fill::after{
  content:'';
  position:absolute;
  right:0;top:0;bottom:0;
  width:20px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3));
}

/* ── Messages Area ── */
.messages{
  flex:1;
  overflow-y:auto;
  padding:20px 16px 12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  scroll-behavior:smooth;
}

/* ── Message Bubbles ── */
.message{
  max-width:82%;
  padding:14px 18px;
  border-radius:var(--radius-lg);
  font-size:0.92rem;
  line-height:1.8;
  animation:msgIn 0.4s var(--ease);
  position:relative;
  word-wrap:break-word;
}
@keyframes msgIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

.message.bot{
  align-self:flex-start;
  background:var(--bubble-bot);
  border:1px solid var(--bubble-bot-border);
  border-bottom-right-radius:6px;
  color:var(--text-primary);
}
.message.user{
  align-self:flex-end;
  background:var(--bubble-user);
  border:1px solid var(--bubble-user-border);
  border-bottom-left-radius:6px;
  color:var(--text-primary);
}

/* Typing indicator */
.message.typing .dot-typing{
  display:inline-flex;
  gap:4px;
  align-items:center;
}
.dot-typing span{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  opacity:0.4;
  animation:dotBounce 1.2s ease-in-out infinite;
}
.dot-typing span:nth-child(2){animation-delay:0.15s}
.dot-typing span:nth-child(3){animation-delay:0.3s}
@keyframes dotBounce{0%,60%,100%{opacity:0.3;transform:translateY(0)}30%{opacity:0.8;transform:translateY(-4px)}}

/* Message timestamp */
.msg-time{
  font-size:0.7rem;
  color:var(--text-muted);
  margin-top:6px;
  display:block;
}

/* Session divider */
.session-divider{
  text-align:center;
  color:var(--text-muted);
  font-size:0.78rem;
  padding:8px 0;
  position:relative;
}
.session-divider::before{
  content:'';
  position:absolute;
  left:0;right:0;top:50%;
  height:1px;
  background:var(--glass-border);
}
.session-divider span{
  position:relative;
  background:var(--bg-deep);
  padding:0 12px;
}

/* ── Input Area ── */
.input-area{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:12px 16px 16px;
  background:rgba(11,17,32,0.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--glass-border);
  position:relative;
}

.input-area textarea{
  flex:1;
  background:var(--bg-card);
  border:1.5px solid var(--glass-border);
  color:var(--text-primary);
  font-family:var(--font);
  font-size:0.92rem;
  padding:12px 16px;
  border-radius:var(--radius-lg);
  resize:none;
  min-height:44px;
  max-height:120px;
  line-height:1.6;
  transition:border-color var(--duration) var(--ease);
  outline:none;
}
.input-area textarea::placeholder{
  color:var(--text-muted);
  font-family:var(--font);
}
.input-area textarea:focus{
  border-color:rgba(78,205,196,0.3);
  box-shadow:0 0 0 3px rgba(78,205,196,0.06);
}

/* Action buttons in input area */
.voice-toggle-btn,
.mic-btn,
.send-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all var(--duration) var(--ease);
  flex-shrink:0;
  font-size:1rem;
}

.voice-toggle-btn{
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  color:var(--text-secondary);
}
.voice-toggle-btn:hover{
  color:var(--accent);
  border-color:rgba(78,205,196,0.2);
}

.mic-btn{
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  color:var(--text-secondary);
}
.mic-btn:hover{
  color:var(--accent);
  border-color:rgba(78,205,196,0.2);
}
.mic-btn.recording{
  background:rgba(239,68,68,0.15);
  border-color:rgba(239,68,68,0.3);
  color:#ef4444;
  animation:recPulse 1.2s ease-in-out infinite;
}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.2)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}

.send-btn{
  background:linear-gradient(135deg,var(--accent),#38B2AC);
  color:#0B1120;
  font-size:1.1rem;
  box-shadow:0 2px 12px rgba(78,205,196,0.2);
}
.send-btn:hover{
  transform:scale(1.05);
  box-shadow:0 4px 20px rgba(78,205,196,0.3);
}
.send-btn:active{transform:scale(0.95)}

/* ══════════════════════════════════════════════════════════════
   SOS / HELP FAB
   ══════════════════════════════════════════════════════════════ */

.help-fab{
  position:fixed;
  bottom:80px;
  left:16px;
  background:rgba(239,68,68,0.12);
  border:1px solid rgba(239,68,68,0.25);
  color:#ef4444;
  font-family:var(--font);
  font-size:0.8rem;
  font-weight:var(--fw-bold);
  padding:8px 14px;
  border-radius:var(--radius-full);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  z-index:var(--z-fab);
  transition:all var(--duration);
  backdrop-filter:blur(10px);
}
.help-fab:hover{
  background:rgba(239,68,68,0.2);
  transform:translateY(-2px);
}
.help-fab svg{width:14px;height:14px;stroke:#ef4444}
.help-fab:not(.visible){display:none}

/* ══════════════════════════════════════════════════════════════
   SOUND CONTROLS — Floating panel
   ══════════════════════════════════════════════════════════════ */

.sound-fab{
  position:fixed;
  bottom:80px;
  right:16px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:var(--z-fab);
  transition:all var(--duration);
  backdrop-filter:blur(10px);
  font-size:1rem;
}
.sound-fab:hover{
  border-color:rgba(78,205,196,0.2);
  color:var(--accent);
  transform:scale(1.05);
}

.sound-panel{
  position:fixed;
  bottom:130px;
  right:16px;
  width:260px;
  background:var(--bg-surface);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  padding:16px;
  z-index:var(--z-overlay);
  box-shadow:var(--shadow-lg);
  display:none;
}
.sound-panel.open{display:block}
.sound-panel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.sound-panel-header h3{font-size:0.9rem;color:var(--text-primary)}
.sound-panel-close{
  background:none;border:none;
  color:var(--text-muted);font-size:1.2rem;
  cursor:pointer;
}
.sound-options{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.sound-option{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background var(--duration);
  background:transparent;
  border:none;
  color:var(--text-primary);
  font-family:var(--font);
  font-size:0.85rem;
  width:100%;
  text-align:right;
}
.sound-option:hover,.sound-option.active{background:var(--bg-card)}
.sound-option.active{border:1px solid rgba(78,205,196,0.15)}
.sound-volume{padding-top:8px;border-top:1px solid var(--glass-border)}
.sound-volume label{font-size:0.8rem;color:var(--text-muted);display:block;margin-bottom:6px}
.sound-volume input[type="range"]{
  width:100%;
  accent-color:var(--accent);
  height:4px;
}

/* ══════════════════════════════════════════════════════════════
   PROGRESS / STATS BUTTON
   ══════════════════════════════════════════════════════════════ */

.progress-btn,
button[onclick*="taqaddumi"],
#progressBtn{
  position:fixed;
  top:16px;
  left:16px;
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  color:var(--text-secondary);
  font-family:var(--font);
  font-size:0.8rem;
  padding:6px 12px;
  border-radius:var(--radius-full);
  cursor:pointer;
  z-index:var(--z-fab);
  transition:all var(--duration);
  backdrop-filter:blur(10px);
}
.progress-btn:hover,
button[onclick*="taqaddumi"]:hover{
  border-color:rgba(78,205,196,0.2);
  color:var(--accent);
}

/* ══════════════════════════════════════════════════════════════
   CRISIS BANNER
   ══════════════════════════════════════════════════════════════ */

.crisis-banner{
  position:fixed;
  top:0;left:0;right:0;
  background:rgba(239,68,68,0.95);
  color:#fff;
  padding:16px 20px;
  z-index:var(--z-crisis);
  display:none;
  text-align:center;
  font-size:0.9rem;
  box-shadow:0 4px 20px rgba(239,68,68,0.3);
}
.crisis-banner.show{display:block}
.crisis-close{
  position:absolute;top:8px;right:12px;
  background:none;border:none;color:#fff;
  font-size:1.5rem;cursor:pointer;
}
.crisis-msg{font-weight:var(--fw-bold);margin-bottom:8px}
.crisis-numbers{font-size:0.85rem;opacity:0.9}
.crisis-location-btn,.loc-share-btn{
  background:rgba(255,255,255,0.2);
  border:1px solid rgba(255,255,255,0.3);
  color:#fff;
  padding:8px 16px;
  border-radius:var(--radius-full);
  font-family:var(--font);
  font-size:0.82rem;
  cursor:pointer;
  transition:background var(--duration);
}
.crisis-location-btn:hover,.loc-share-btn:hover{background:rgba(255,255,255,0.3)}

/* ══════════════════════════════════════════════════════════════
   DRAWER / RESOURCE PANEL
   ══════════════════════════════════════════════════════════════ */

.drawer-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.5);
  z-index:var(--z-overlay);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--duration);
}
.drawer-overlay.open{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;
  top:0;left:0;bottom:0;
  width:320px;
  max-width:85vw;
  background:var(--bg-surface);
  border-right:1px solid var(--glass-border);
  z-index:calc(var(--z-overlay) + 1);
  transform:translateX(-100%);
  transition:transform var(--duration) var(--ease);
  overflow-y:auto;
  padding:24px 20px;
}
.drawer.open{transform:translateX(0)}

.drawer-close{
  position:absolute;top:16px;left:16px;
  background:none;border:none;
  color:var(--text-muted);font-size:1.5rem;
  cursor:pointer;transition:color var(--duration);
}
.drawer-close:hover{color:var(--text-primary)}

.drawer h2{
  font-size:1.1rem;
  margin-bottom:20px;
  color:var(--text-primary);
}

/* ══════════════════════════════════════════════════════════════
   OVERLAYS — Export, Tour, Breathing, QR, Survey, Privacy
   ══════════════════════════════════════════════════════════════ */

/* Shared overlay base */
.export-overlay,
.tour-overlay,
.breath-overlay,
.qr-overlay,
.survey-overlay,
.privacy-overlay{
  position:fixed;inset:0;
  background:rgba(11,17,32,0.85);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;
  z-index:var(--z-modal);
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity var(--duration);
}
.export-overlay.active,
.tour-overlay.active,
.breath-overlay.active,
.qr-overlay.active,
.survey-overlay.active,
.privacy-overlay.active{
  opacity:1;pointer-events:auto;
}

/* Shared box base */
.export-box,
.tour-box,
.qr-box,
.survey-box,
.privacy-box{
  background:var(--bg-surface);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  max-width:440px;
  width:100%;
  max-height:85vh;
  overflow-y:auto;
  box-shadow:var(--shadow-lg);
  text-align:center;
}
.export-box h3,
.tour-box h3,
.qr-box h2,
.survey-box h3,
.privacy-box h2{
  font-size:1.2rem;
  margin-bottom:16px;
  color:var(--text-primary);
}

/* Export */
.export-content{
  text-align:right;
  font-size:0.85rem;
  color:var(--text-secondary);
  margin-bottom:16px;
  max-height:300px;
  overflow-y:auto;
  line-height:1.8;
}
.export-actions{display:flex;gap:10px;justify-content:center}
.exp-copy,.exp-close{
  padding:10px 20px;
  border-radius:var(--radius-full);
  border:none;
  font-family:var(--font);
  font-size:0.88rem;
  cursor:pointer;
  transition:all var(--duration);
}
.exp-copy{
  background:var(--accent);
  color:#0B1120;
  font-weight:var(--fw-bold);
}
.exp-copy:hover{box-shadow:0 4px 16px rgba(78,205,196,0.3)}
.exp-close{
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  color:var(--text-secondary);
}

/* Tour */
.tour-dots{display:flex;gap:6px;justify-content:center;margin-bottom:16px}
.tour-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--glass-border);
  transition:all var(--duration);
}
.tour-dot.active{background:var(--accent);transform:scale(1.3)}
.tour-box p{color:var(--text-secondary);font-size:0.9rem;margin-bottom:20px;line-height:1.8}
.tour-nav{display:flex;gap:10px;justify-content:center}
.tour-skip,.tour-back,.tour-next{
  padding:8px 20px;
  border-radius:var(--radius-full);
  border:none;
  font-family:var(--font);
  font-size:0.85rem;
  cursor:pointer;
  transition:all var(--duration);
}
.tour-skip{background:transparent;color:var(--text-muted);border:1px solid var(--glass-border)}
.tour-back{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--glass-border)}
.tour-next{background:var(--accent);color:#0B1120;font-weight:var(--fw-bold)}

/* Breathing overlay */
.breath-canvas-container{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.breath-canvas{border-radius:50%}
.breath-wave-bg,.breath-glow-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.breath-phase-text{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:1.2rem;
  font-weight:var(--fw-bold);
  color:var(--accent);
}
.breath-timer-text{
  position:absolute;
  top:60%;left:50%;
  transform:translate(-50%,-50%);
  font-size:2rem;
  font-weight:var(--fw-bold);
  color:var(--text-primary);
}
.breath-label{
  font-size:0.9rem;
  color:var(--text-secondary);
  margin-top:12px;
}
.breath-close{
  margin-top:20px;
  padding:10px 28px;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  color:var(--text-primary);
  border-radius:var(--radius-full);
  font-family:var(--font);
  cursor:pointer;
  transition:all var(--duration);
}
.breath-close:hover{border-color:rgba(78,205,196,0.2)}

/* QR */
.qr-code{margin:16px auto;width:180px;height:180px}
.qr-code img{width:100%;height:100%;border-radius:var(--radius-sm)}
.qr-link{color:var(--accent);font-size:0.9rem;margin-bottom:8px}
.qr-stats{color:var(--text-muted);font-size:0.8rem;margin-bottom:12px}
.qr-share-btn{
  padding:10px 24px;
  background:var(--accent);
  color:#0B1120;
  border:none;
  border-radius:var(--radius-full);
  font-family:var(--font);
  font-weight:var(--fw-bold);
  cursor:pointer;
  transition:all var(--duration);
}
.qr-share-btn:hover{box-shadow:0 4px 16px rgba(78,205,196,0.3)}
.qr-copyright{color:var(--text-muted);font-size:0.75rem;margin-top:12px}
.qr-close{
  position:absolute;top:12px;right:12px;
  background:none;border:none;
  color:var(--text-muted);font-size:1.3rem;
  cursor:pointer;
}

/* Survey */
.survey-stars{display:flex;gap:12px;justify-content:center;margin-bottom:12px}
.survey-star{
  font-size:2rem;
  background:none;border:none;
  cursor:pointer;transition:transform var(--duration);
  filter:grayscale(0.5);
}
.survey-star:hover,.survey-star.active{transform:scale(1.2);filter:grayscale(0)}
.survey-labels{
  display:flex;justify-content:space-between;
  color:var(--text-muted);font-size:0.78rem;
  margin-bottom:16px;
}
.survey-skip{
  background:transparent;
  border:1px solid var(--glass-border);
  color:var(--text-muted);
  padding:8px 20px;
  border-radius:var(--radius-full);
  font-family:var(--font);
  cursor:pointer;
}

/* Privacy / Methodology */
.privacy-box{text-align:right}
.privacy-box h2{text-align:center}
.privacy-box h3{color:var(--accent);font-size:0.95rem;margin:16px 0 8px}
.privacy-box p,.privacy-box li{color:var(--text-secondary);font-size:0.85rem;line-height:1.8}
.privacy-box ul{list-style:none;padding:0}
.privacy-box li::before{content:"• ";color:var(--accent)}
.privacy-close{
  display:block;
  margin:20px auto 0;
  padding:10px 28px;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  color:var(--text-primary);
  border-radius:var(--radius-full);
  font-family:var(--font);
  cursor:pointer;
  transition:all var(--duration);
}
.privacy-close:hover{border-color:rgba(78,205,196,0.2)}

/* ══════════════════════════════════════════════════════════════
   EXHIBITION BANNER
   ══════════════════════════════════════════════════════════════ */

.exhibition-banner{
  position:fixed;top:0;left:0;right:0;
  background:linear-gradient(90deg,var(--accent),#38B2AC);
  color:#0B1120;
  padding:10px 40px 10px 16px;
  text-align:center;
  z-index:var(--z-crisis);
  font-size:0.85rem;
  font-weight:var(--fw-bold);
}
.exhibition-close{
  position:absolute;right:8px;top:50%;
  transform:translateY(-50%);
  background:none;border:none;
  color:#0B1120;font-size:1.3rem;
  cursor:pointer;
}

/* ══════════════════════════════════════════════════════════════
   COPYRIGHT
   ══════════════════════════════════════════════════════════════ */

.copyright,.chat-copy{
  text-align:center;
  color:var(--text-muted);
  font-size:0.72rem;
  padding:8px 16px;
  opacity:0.7;
}

/* ══════════════════════════════════════════════════════════════
   PWA INSTALL PROMPT
   ══════════════════════════════════════════════════════════════ */

.pwa-install-prompt{
  position:fixed;
  bottom:0;left:0;right:0;
  background:var(--bg-surface);
  border-top:1px solid var(--glass-border);
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  z-index:var(--z-overlay);
  box-shadow:var(--shadow-md);
}
.pwa-install-prompt .pwa-text{
  font-size:0.85rem;
  color:var(--text-primary);
}
.pwa-install-prompt .pwa-subtitle{
  font-size:0.75rem;
  color:var(--text-muted);
}
.pwa-install-prompt button{
  padding:8px 20px;
  border-radius:var(--radius-full);
  border:none;
  font-family:var(--font);
  font-size:0.85rem;
  cursor:pointer;
  font-weight:var(--fw-bold);
}

/* ══════════════════════════════════════════════════════════════
   EMOJI REACTIONS / CHIPS
   ══════════════════════════════════════════════════════════════ */

.emotion-tag,.emotion-chip,.burnout-chip{
  display:inline-block;
  padding:4px 10px;
  border-radius:var(--radius-full);
  font-size:0.75rem;
  background:var(--accent-glow);
  color:var(--accent);
  border:1px solid rgba(78,205,196,0.15);
  margin:4px 2px;
}

/* Suggestion chips */
.suggestion-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.suggestion-chip{
  padding:8px 14px;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  color:var(--text-secondary);
  font-family:var(--font);
  font-size:0.82rem;
  border-radius:var(--radius-full);
  cursor:pointer;
  transition:all var(--duration);
}
.suggestion-chip:hover{
  border-color:rgba(78,205,196,0.25);
  color:var(--accent);
  background:var(--bg-card-hover);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile First
   ══════════════════════════════════════════════════════════════ */

@media(max-width:480px){
  .consent-box{padding:24px 18px;border-radius:var(--radius-md)}
  .cta-primary{font-size:0.95rem;padding:14px 24px}
  .cta-secondary{font-size:0.82rem;padding:11px 10px}
  .message{max-width:88%;font-size:0.88rem;padding:12px 14px}
  .breath-hero-circle{width:110px;height:110px}
  .drawer{width:280px}
  .sound-panel{width:240px;right:12px}
  .help-fab{bottom:72px;left:12px;font-size:0.75rem;padding:6px 12px}
  .sound-fab{bottom:72px;right:12px;width:38px;height:38px}
}

@media(min-width:768px){
  .consent-box{max-width:500px}
  .screen.welcome{padding:40px}
  .messages{padding:24px 24px 16px}
  .input-area{padding:14px 24px 20px}
  .cta-primary{max-width:360px}
  .cta-row{max-width:360px}
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE TOGGLE (if applicable)
   ══════════════════════════════════════════════════════════════ */

.theme-toggle{
  background:var(--glass);
  border:1px solid var(--glass-border);
  color:var(--text-secondary);
  padding:4px 10px;
  border-radius:var(--radius-full);
  font-size:0.8rem;
  cursor:pointer;
  transition:all var(--duration);
}
.theme-toggle:hover{border-color:rgba(78,205,196,0.2);color:var(--accent)}

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS — Entrance effects
   ══════════════════════════════════════════════════════════════ */

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

.screen.welcome .nafas-logo-container{animation:scaleIn 0.8s var(--ease)}
.screen.welcome .app-name{animation:fadeIn 1s var(--ease) 0.2s both}
.screen.welcome .app-slogan{animation:fadeIn 1s var(--ease) 0.4s both}
.screen.welcome .tagline{animation:fadeIn 1s var(--ease) 0.5s both}
.screen.welcome .breath-hero{animation:fadeIn 1.2s var(--ease) 0.6s both}
.screen.welcome .cta-primary{animation:fadeInUp 0.8s var(--ease) 0.8s both}
.screen.welcome .cta-row{animation:fadeInUp 0.8s var(--ease) 1s both}

/* ══════════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════════ */

@media print{
  .bg-blobs,.stars-container,.help-fab,.sound-fab,.sound-panel,.pwa-install-prompt{display:none!important}
  body{background:#fff;color:#000}
  .message{border:1px solid #ddd}
}

/* ══════════════════════════════════════════════════════════════
   MISC LEGACY COMPATIBILITY
   ══════════════════════════════════════════════════════════════ */

/* Ensure old gold references don't bleed through */
[style*="oklch(78%"],[style*="gold"]{color:var(--accent)!important}

/* Fix any inline color vars */
.clear-chat-btn{color:oklch(62% .18 22)!important}

/* Methodology content styling */
#methodologyContent{text-align:right}
#methodologyContent h3{color:var(--accent);margin:14px 0 8px;font-size:0.95rem}
#methodologyContent p{color:var(--text-secondary);font-size:0.85rem;line-height:1.8}
#methodologyContent ul{list-style:none;padding:0}
#methodologyContent li{color:var(--text-secondary);font-size:0.85rem;line-height:1.8;padding:2px 0}
#methodologyContent li::before{content:"• ";color:var(--accent)}

/* Journey input */
.journey-input-wrap{
  display:flex;gap:8px;
  margin:12px auto;
  max-width:280px;
}
.journey-input-wrap input{
  flex:1;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  color:var(--text-primary);
  padding:10px 14px;
  border-radius:var(--radius-full);
  font-family:var(--font);
  font-size:0.9rem;
  outline:none;
}
.journey-input-wrap input:focus{border-color:rgba(78,205,196,0.3)}
.journey-input-wrap button{
  padding:10px 16px;
  background:var(--accent);
  color:#0B1120;
  border:none;
  border-radius:var(--radius-full);
  font-family:var(--font);
  font-weight:var(--fw-bold);
  cursor:pointer;
}

/* Hug animation */
.hug-overlay{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,17,32,0.7);
  z-index:var(--z-modal);
  animation:fadeIn 0.3s;
}
.hug-emoji{font-size:6rem;animation:hugPulse 1.5s ease-in-out infinite}
@keyframes hugPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}


/* ══════════════════════════════════════════════════════════════
   FIX PATCH v3.1 — Layout fixes
   ══════════════════════════════════════════════════════════════ */

/* ── Fix welcome screen — ensure it fills viewport properly ── */
.screen.welcome{
  min-height:100dvh;
  overflow-x:hidden;
  padding-bottom:40px;
}

/* ── Chat screen hidden when welcome is shown ── */
.screen.chat{display:none}
.screen.chat.active,.screen.chat[style*="block"],.screen.chat[style*="flex"]{display:flex}

/* ── Fix secondary buttons area ── */
/* Group hug, journey code, tour into a nice row */
.screen.welcome > button[onclick*="Hug"],
.screen.welcome > button[onclick*="hug"],
button[onclick="showHugAnimation()"] {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:8px 18px;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  color:var(--text-secondary);
  font-family:var(--font);
  font-size:0.82rem;
  border-radius:var(--radius-full);
  cursor:pointer;
  transition:all var(--duration) var(--ease);
  margin:3px;
}

/* Journey code section — cleaner styling */
.screen.welcome .journey-code-section,
.screen.welcome [id*="journey"],
#journeySection,
.journey-input-container{
  max-width:300px;
  margin:8px auto;
  text-align:center;
}

/* Fix journey input to look integrated */
button[onclick="showJourneyInput()"],
button[onclick*="journey"],
button[onclick*="Journey"]{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:8px 18px;
  background:var(--bg-card)!important;
  border:1px solid var(--glass-border)!important;
  color:var(--text-secondary)!important;
  font-family:var(--font);
  font-size:0.82rem;
  border-radius:var(--radius-full);
  cursor:pointer;
  transition:all var(--duration) var(--ease);
}

/* Journey code input field */
input[placeholder*="ABC"],
input[id*="journey"],
input[aria-label*="Journey"]{
  background:var(--bg-card)!important;
  border:1px solid var(--glass-border)!important;
  color:var(--text-primary)!important;
  padding:10px 14px!important;
  border-radius:var(--radius-full)!important;
  font-family:var(--font)!important;
  font-size:0.85rem;
  outline:none;
  width:auto;
  max-width:180px;
}
input[placeholder*="ABC"]:focus,
input[id*="journey"]:focus{
  border-color:rgba(78,205,196,0.3)!important;
  box-shadow:0 0 0 3px rgba(78,205,196,0.06);
}

/* Search/load journey button */
button[onclick*="loadJourney"],
button[onclick*="searchJourney"],
button[aria-label*="Load journey"]{
  background:var(--accent)!important;
  color:#0B1120!important;
  border:none!important;
  padding:10px 16px!important;
  border-radius:var(--radius-full)!important;
  font-family:var(--font);
  font-weight:var(--fw-bold);
  cursor:pointer;
}

/* "لا جلسات سابقة" text — subtle */
.no-sessions,.no-history,
.screen.welcome [class*="session"]{
  color:var(--text-muted)!important;
  font-size:0.82rem;
  margin:8px 0;
}

/* Tour button */
button[onclick="startTour()"],
button[onclick*="Tour"],
button[onclick*="tour"]{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:8px 18px;
  background:var(--bg-card)!important;
  border:1px solid var(--glass-border)!important;
  color:var(--text-secondary)!important;
  font-family:var(--font);
  font-size:0.82rem;
  border-radius:var(--radius-full);
  cursor:pointer;
}

/* ── Fix Taqaddumi / Progress panel overflow ── */
.taqaddumi-panel,
#taqaddumiPanel,
[id*="progress"],
[class*="progress-panel"]{
  position:fixed!important;
  top:0;right:0;bottom:0;
  width:320px;
  max-width:85vw;
  background:var(--bg-surface);
  border-left:1px solid var(--glass-border);
  z-index:var(--z-overlay);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform var(--duration) var(--ease);
  padding:24px 20px;
}
.taqaddumi-panel.open,
#taqaddumiPanel.open,
[id*="progress"].open,
[class*="progress-panel"].open{
  transform:translateX(0);
}

/* Fix progress button */
button[onclick*="taqaddumi"],
#progressBtn,
.progress-btn,
button:has(> .taqaddumi){
  position:fixed!important;
  top:16px;
  left:16px;
  z-index:var(--z-fab);
  background:var(--glass-strong)!important;
  border:1px solid var(--glass-border)!important;
  color:var(--text-secondary)!important;
  padding:6px 14px!important;
  border-radius:var(--radius-full)!important;
  font-family:var(--font);
  font-size:0.78rem;
  backdrop-filter:blur(10px);
}

/* ── Mood check styling ── */
.mood-screen,.mood-check-screen,
[class*="mood"]:not(button){
  background:var(--bg-surface);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:32px 24px;
  max-width:400px;
  margin:0 auto;
  text-align:center;
}

/* Mood emoji buttons */
button[onclick*="rateMood"],
button[onclick*="selectMood"],
.mood-btn,.mood-emoji{
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--bg-card);
  border:2px solid var(--glass-border);
  font-size:1.8rem;
  cursor:pointer;
  transition:all var(--duration) var(--ease);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
button[onclick*="rateMood"]:hover,
button[onclick*="selectMood"]:hover,
.mood-btn:hover,.mood-emoji:hover{
  border-color:var(--accent);
  transform:scale(1.15);
  box-shadow:0 0 20px rgba(78,205,196,0.15);
}

/* Skip mood button */
button[onclick*="skipMood"],
.mood-skip{
  background:transparent;
  border:none;
  color:var(--text-muted);
  font-family:var(--font);
  font-size:0.85rem;
  cursor:pointer;
  margin-top:12px;
  transition:color var(--duration);
}
button[onclick*="skipMood"]:hover{color:var(--accent)}

/* ── PWA install prompt fix ── */
.pwa-install-prompt,
[class*="pwa"],
[id*="pwa"],
[id*="install"]{
  position:fixed!important;
  bottom:0;left:0;right:0;
  z-index:var(--z-overlay);
  background:var(--bg-surface)!important;
  border-top:1px solid var(--glass-border)!important;
  padding:12px 20px!important;
  box-shadow:var(--shadow-md)!important;
}

/* ── Fix the welcome screen having a bubble message ── */
.returning-welcome,
.welcome-greeting{
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:14px 20px;
  max-width:320px;
  margin:0 auto 16px;
  font-size:0.9rem;
  color:var(--text-secondary);
}

/* ── Fix welcome screen becoming too tall ── */
/* .screen.welcome > * max-width removed — was breaking CTA buttons */

/* ── New session button ── */
button[onclick*="newSession"],
button[onclick*="startNewSession"],
.new-session-btn{
  padding:8px 18px;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  color:var(--text-secondary);
  font-family:var(--font);
  font-size:0.82rem;
  border-radius:var(--radius-full);
  cursor:pointer;
  transition:all var(--duration);
}

/* ── Theme/mode label in header ── */
.mode-label,
#modeLabel,
[class*="mode-label"]{
  font-size:0.8rem;
  color:var(--accent);
  padding:4px 10px;
  border-radius:var(--radius-full);
  background:var(--accent-glow);
  font-weight:var(--fw-medium);
}

/* ── Fix "ابدأ جلسة جديدة" overflow ── */
.screen.welcome{overflow:hidden!important}


/* ══════════════════════════════════════════════════════════════
   CRITICAL FIX v3.2 — Screen management + hidden state
   ══════════════════════════════════════════════════════════════ */

/* Hidden utility — MUST be defined */
.hidden{display:none!important}
.screen.hidden{display:none!important}
[hidden]{display:none!important}

/* Screen management — each screen is full viewport */
.screen{
  min-height:100dvh;
  position:relative;
}

/* Chat screen — full viewport with flexbox */
.screen.chat-screen{
  display:flex;
  flex-direction:column;
  height:100dvh;
  min-height:100dvh;
  position:relative;
  z-index:var(--z-base);
  overflow:hidden;
}
.screen.chat-screen.hidden{display:none!important}

/* Journey screen */
.screen.journey-screen{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.screen.journey-screen.hidden{display:none!important}

/* ── Taqaddumi / NFT progress button fix ── */
.nft-progress-btn{
  position:fixed!important;
  top:14px;
  left:14px;
  z-index:var(--z-fab);
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  color:var(--text-secondary);
  padding:6px 14px;
  border-radius:var(--radius-full);
  font-family:var(--font);
  font-size:0.78rem;
  cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:all var(--duration) var(--ease);
  white-space:nowrap;
}
.nft-progress-btn:hover{
  border-color:rgba(78,205,196,0.2);
  color:var(--accent);
}

/* ── Chat screen header ── */
.chat-screen .chat-header,
.chat-screen > header,
.chat-screen > .header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background:rgba(11,17,32,0.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
  position:sticky;
  top:0;
  z-index:var(--z-header);
  min-height:54px;
  flex-shrink:0;
}

/* Chat screen messages area */
.chat-screen .messages,
.chat-screen #messages{
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Chat screen input area */
.chat-screen .input-area{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:12px 16px 16px;
  background:rgba(11,17,32,0.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--glass-border);
  flex-shrink:0;
}

/* ── Mood check overlay — should be OVER the welcome screen ── */
.mood-overlay,
.mood-screen,
.mood-check{
  position:fixed!important;
  inset:0;
  background:rgba(11,17,32,0.9);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:var(--z-modal);
}
.mood-overlay.hidden,.mood-screen.hidden,.mood-check.hidden{display:none!important}

.mood-card,.mood-content,.mood-box{
  background:var(--bg-surface);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  max-width:400px;
  width:90%;
  text-align:center;
  box-shadow:var(--shadow-lg);
}

.mood-card h2,.mood-content h2,.mood-box h2,
.mood-card h3,.mood-content h3{
  font-size:1.2rem;
  color:var(--accent);
  margin-bottom:8px;
}
.mood-card p{
  color:var(--text-secondary);
  font-size:0.88rem;
  margin-bottom:20px;
}
.mood-emojis,.mood-buttons{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-bottom:16px;
}

/* ── Back button in chat ── */
.chat-screen .back-btn,
button[onclick*="goBack"],
button[onclick*="backToWelcome"],
button[aria-label*="Back"]{
  background:none;
  border:none;
  color:var(--text-secondary);
  font-size:1.3rem;
  cursor:pointer;
  padding:6px 8px;
  border-radius:var(--radius-sm);
  transition:all var(--duration);
  display:flex;
  align-items:center;
}
button[aria-label*="Back"]:hover{color:var(--accent);background:var(--bg-card)}

/* Settings button */
button[aria-label*="Settings"],
button[onclick*="settings"],
button[onclick*="Settings"]{
  background:none!important;
  border:none!important;
  color:var(--text-muted)!important;
  font-size:1.1rem;
  cursor:pointer;
  padding:6px 8px;
  border-radius:var(--radius-sm);
  transition:all var(--duration);
}
button[aria-label*="Settings"]:hover{color:var(--text-primary)!important;background:var(--bg-card)!important}

/* ── Sound icon at welcome screen (bottom left) ── */
.sound-fab,.sound-toggle{
  position:fixed!important;
  bottom:20px;
  right:20px;
  width:42px;height:42px;
  border-radius:50%;
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  z-index:var(--z-fab);
  transition:all var(--duration);
  backdrop-filter:blur(10px);
  font-size:1rem;
}

/* ── "ابدأ جلسة جديدة" button overflow fix ── */
button[onclick*="newSession"],
button[onclick*="startNew"],
.new-session-btn{
  background:var(--bg-card)!important;
  border:1px solid var(--glass-border)!important;
  color:var(--text-secondary)!important;
  padding:8px 18px!important;
  border-radius:var(--radius-full)!important;
  font-family:var(--font);
  font-size:0.82rem;
  cursor:pointer;
  max-width:100%!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ══════════════════════════════════════════════════════════════
   v4.0 — CLEAN FIX (replaces all previous patches)
   ══════════════════════════════════════════════════════════════ */

/* ── CTA Buttons — proper width constraints ── */
.screen.welcome .cta-primary{
  max-width:340px!important;
  width:100%;
  margin-left:auto!important;
  margin-right:auto!important;
  align-self:center!important;
}

.screen.welcome .cta-row{
  max-width:340px!important;
  width:100%;
  margin-left:auto!important;
  margin-right:auto!important;
  align-self:center!important;
}

/* ── PWA Install Toast — top slide-down ── */
@keyframes pwaSlideDown{
  from{transform:translateY(-100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@keyframes pwaSlideUp{
  from{transform:translateY(0);opacity:1}
  to{transform:translateY(-100%);opacity:0}
}

#installBanner{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:auto!important;
  transform:none!important;
  background:linear-gradient(135deg, rgba(20,35,45,0.97), rgba(30,55,65,0.97))!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  border:none!important;
  border-bottom:1px solid rgba(94,204,199,0.2)!important;
  border-radius:0!important;
  padding:14px 20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  z-index:9999!important;
  box-shadow:0 4px 24px rgba(0,0,0,0.3)!important;
  animation:pwaSlideDown 0.5s cubic-bezier(0.16,1,0.3,1)!important;
  max-width:100%!important;
}

#installBanner.pwa-hiding{
  animation:pwaSlideUp 0.4s cubic-bezier(0.7,0,0.84,0) forwards!important;
}

#installBanner .pwa-icon{
  font-size:1.4rem;
  flex-shrink:0;
}

#installBanner .pwa-text{
  flex:1;
  min-width:0;
}

#installBanner .pwa-text strong{
  color:var(--accent-primary)!important;
  font-size:0.88rem!important;
  display:block;
}

#installBanner .pwa-text p{
  font-size:0.72rem!important;
  color:rgba(255,255,255,0.6)!important;
  margin-top:2px!important;
}

#installBanner .pwa-install-btn{
  padding:8px 20px!important;
  border-radius:20px!important;
  border:none!important;
  background:var(--accent-primary)!important;
  color:#fff!important;
  font-weight:700!important;
  cursor:pointer!important;
  white-space:nowrap!important;
  font-family:var(--font)!important;
  font-size:0.85rem!important;
  transition:all 0.2s!important;
  flex-shrink:0;
}

#installBanner .pwa-install-btn:hover{
  background:var(--accent)!important;
  transform:scale(1.05);
}

#installBanner .pwa-close-btn{
  background:none!important;
  border:none!important;
  color:rgba(255,255,255,0.4)!important;
  cursor:pointer!important;
  font-size:1.1rem!important;
  padding:4px 8px!important;
  transition:color 0.2s!important;
  flex-shrink:0;
}

#installBanner .pwa-close-btn:hover{
  color:#fff!important;
}

/* ── Mood check overlay (ensure it's a proper overlay) ── */
#moodOverlay,.mood-check-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:200!important;
  background:rgba(10,20,25,0.85)!important;
  backdrop-filter:blur(12px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* ── Welcome screen overflow control ── */
.screen.welcome{
  overflow-x:hidden!important;
  overflow-y:auto!important;
}


/* ══════════════════════════════════════════════════════════════
   v4.1 — LAYOUT POLISH (Welcome Screen)
   ══════════════════════════════════════════════════════════════ */

/* ── Welcome screen spacing ── */
.screen.welcome{
  padding:30px 20px 20px!important;
  gap:8px!important;
  min-height:100dvh;
  justify-content:center!important;
}

/* ── Logo section — tighter ── */
.nafas-logo-container{
  margin-bottom:0!important;
}
.app-name{
  margin-bottom:0!important;
  font-size:2.6rem!important;
}
.app-slogan{
  margin-bottom:4px!important;
  font-size:0.72rem!important;
  letter-spacing:0.25em!important;
}

/* ── Tagline ── */
.tagline{
  font-size:0.95rem!important;
  max-width:320px!important;
  margin:4px auto 8px!important;
  line-height:1.6!important;
}

/* ── Returning welcome bubble ── */
.returning-welcome{
  max-width:300px!important;
  padding:12px 18px!important;
  margin:0 auto 8px!important;
  font-size:0.88rem!important;
}

/* ── Breathing circle — slightly smaller ── */
.breath-hero{
  margin:8px auto!important;
}
.breath-circle{
  width:110px!important;
  height:110px!important;
}
.breath-text{
  font-size:0.88rem!important;
}
.breath-label{
  font-size:0.75rem!important;
  margin-top:6px!important;
}

/* ── CTA buttons ── */
.screen.welcome .cta-primary{
  margin-top:12px!important;
  margin-bottom:6px!important;
  font-size:1.05rem!important;
  padding:15px 28px!important;
}
.screen.welcome .cta-row{
  margin-bottom:12px!important;
}
.cta-secondary{
  font-size:0.82rem!important;
  padding:11px 16px!important;
}

/* ── Hug button — subtle and integrated ── */
.hug-trigger-btn,
#hugBtn,
button[onclick*="Hug"],
button[onclick*="hug"]{
  background:transparent!important;
  border:1px solid rgba(94,204,199,0.15)!important;
  color:var(--text-secondary)!important;
  padding:6px 16px!important;
  border-radius:20px!important;
  font-size:0.78rem!important;
  cursor:pointer;
  transition:all 0.3s!important;
  margin:0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
}
.hug-trigger-btn:hover,
#hugBtn:hover{
  border-color:rgba(94,204,199,0.4)!important;
  background:rgba(94,204,199,0.08)!important;
  color:var(--accent-primary)!important;
}

/* ── Welcome bottom — clean and minimal ── */
.welcome-bottom{
  max-width:280px!important;
  margin:0 auto!important;
  padding-top:8px!important;
}

/* ── Session count and history — subtle ── */
.welcome-bottom .session-history,
.welcome-bottom [class*="session"]{
  font-size:0.72rem!important;
  color:rgba(255,255,255,0.3)!important;
  margin:4px 0!important;
}

/* ── "لا جلسات سابقة" — make it less prominent ── */
.welcome-bottom p,
.no-sessions{
  font-size:0.72rem!important;
  color:rgba(255,255,255,0.25)!important;
  margin:2px 0!important;
}

/* ── Journey code section — compact ── */
.journey-code-section,
.journey-input-container,
#journeySection,
.welcome-bottom div[class*="journey"]{
  margin:6px auto!important;
}

/* ── Journey buttons — small and subtle ── */
button[onclick*="journey"],
button[onclick*="Journey"],
.journey-btn{
  font-size:0.75rem!important;
  padding:5px 14px!important;
  border-radius:16px!important;
  background:transparent!important;
  border:1px solid rgba(94,204,199,0.12)!important;
  color:var(--text-secondary)!important;
}

/* ── Journey input — compact ── */
input[placeholder*="ABC"],
input[placeholder*="journey"],
input[placeholder*="رمز"]{
  padding:6px 14px!important;
  font-size:0.78rem!important;
  border-radius:16px!important;
  max-width:160px!important;
}

/* ── Tour button — very subtle ── */
button[onclick*="tour"],
button[onclick*="Tour"],
.tour-btn{
  font-size:0.72rem!important;
  padding:5px 14px!important;
  border-radius:16px!important;
  background:transparent!important;
  border:1px solid rgba(94,204,199,0.08)!important;
  color:rgba(255,255,255,0.3)!important;
}

button[onclick*="tour"]:hover,
button[onclick*="Tour"]:hover{
  border-color:rgba(94,204,199,0.2)!important;
  color:var(--text-secondary)!important;
}

/* ── Live counter — very subtle ── */
.live-counter,
[class*="liveCount"],
.welcome-bottom span[class*="live"]{
  font-size:0.7rem!important;
  color:rgba(255,255,255,0.2)!important;
}

/* ── Footer ── */
.welcome-footer,
.welcome-bottom .footer-area,
.screen.welcome footer{
  font-size:0.68rem!important;
  color:rgba(255,255,255,0.2)!important;
  margin-top:8px!important;
}

/* ── Progress button (top left) — compact ── */
#progressBtn,
button[onclick*="progress"],
button[onclick*="Progress"]{
  padding:5px 12px!important;
  font-size:0.72rem!important;
  border-radius:16px!important;
  backdrop-filter:blur(10px)!important;
}

/* ── Dark mode toggle (top right) — subtle ── */
#darkModeToggle,
button[onclick*="dark"],
button[onclick*="Dark"]{
  width:32px!important;
  height:32px!important;
  font-size:1rem!important;
  opacity:0.4;
  transition:opacity 0.3s;
}
#darkModeToggle:hover{
  opacity:0.8;
}

/* ── Wave button (bottom right) — clean ── */
.wave-btn,
button[class*="wave"]{
  width:40px!important;
  height:40px!important;
  border-radius:50%!important;
  opacity:0.6;
  transition:opacity 0.3s;
}
.wave-btn:hover{
  opacity:1;
}

/* ── Mood check — proper overlay ── */
[class*="mood-check"],
.mood-section{
  position:fixed!important;
  inset:0!important;
  z-index:300!important;
  background:rgba(10,20,25,0.92)!important;
  backdrop-filter:blur(16px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-direction:column!important;
}

/* ── Emoji buttons in mood check ── */
.mood-emoji-btn,
button[class*="emoji"]{
  width:52px!important;
  height:52px!important;
  font-size:1.8rem!important;
  border-radius:50%!important;
  background:rgba(94,204,199,0.08)!important;
  border:1px solid rgba(94,204,199,0.15)!important;
  transition:all 0.2s!important;
}
.mood-emoji-btn:hover,
button[class*="emoji"]:hover{
  background:rgba(94,204,199,0.15)!important;
  border-color:rgba(94,204,199,0.3)!important;
  transform:scale(1.15);
}

/* ══════════════════════════════════════════════════════════════
   v4.1 — CHAT SCREEN POLISH
   ══════════════════════════════════════════════════════════════ */

/* ── Messages — proper glass cards ── */
.message{
  border-radius:18px!important;
  padding:14px 18px!important;
  max-width:82%!important;
  font-size:0.9rem!important;
  line-height:1.65!important;
  animation:fadeInUp 0.3s ease!important;
}

.message.bot{
  background:rgba(94,204,199,0.06)!important;
  border:1px solid rgba(94,204,199,0.12)!important;
  border-bottom-right:4px!important;
}

.message.user{
  background:rgba(94,204,199,0.12)!important;
  border:1px solid rgba(94,204,199,0.18)!important;
  border-bottom-left:4px!important;
}

/* ── Chat input area ── */
.chat-input-area,
.input-area{
  padding:12px 16px!important;
  background:rgba(15,25,35,0.95)!important;
  backdrop-filter:blur(20px)!important;
  border-top:1px solid rgba(94,204,199,0.08)!important;
}

#chatInput,
.chat-input,
textarea[id*="chat"]{
  background:rgba(94,204,199,0.04)!important;
  border:1px solid rgba(94,204,199,0.12)!important;
  border-radius:20px!important;
  padding:10px 18px!important;
  font-size:0.9rem!important;
  color:var(--text-primary)!important;
  transition:border-color 0.3s!important;
  resize:none!important;
}

#chatInput:focus,
.chat-input:focus{
  border-color:rgba(94,204,199,0.4)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(94,204,199,0.08)!important;
}

/* ── Send button ── */
#sendBtn,
button[onclick*="send"],
.send-btn{
  background:var(--accent-primary)!important;
  border:none!important;
  border-radius:50%!important;
  width:40px!important;
  height:40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer;
  transition:all 0.2s!important;
  flex-shrink:0!important;
}

#sendBtn:hover{
  transform:scale(1.08)!important;
  box-shadow:0 4px 16px rgba(94,204,199,0.3)!important;
}

/* ── Voice panel — must NOT cover send button ── */
.voice-panel,
#voicePanel,
[class*="voice-panel"]{
  bottom:70px!important;
  z-index:100!important;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   ══════════════════════════════════════════════════════════════ */

@media(max-width:480px){
  .screen.welcome{
    padding:20px 16px 16px!important;
    gap:6px!important;
  }
  .app-name{
    font-size:2.2rem!important;
  }
  .tagline{
    font-size:0.85rem!important;
  }
  .breath-circle{
    width:100px!important;
    height:100px!important;
  }
  .screen.welcome .cta-primary{
    max-width:100%!important;
    font-size:1rem!important;
    padding:14px 24px!important;
  }
  .screen.welcome .cta-row{
    max-width:100%!important;
  }
  .cta-secondary{
    font-size:0.78rem!important;
    padding:10px 12px!important;
  }
  .message{
    max-width:88%!important;
    font-size:0.88rem!important;
  }
}

@media(min-width:768px){
  .screen.welcome .cta-primary{
    max-width:320px!important;
  }
  .screen.welcome .cta-row{
    max-width:320px!important;
  }
}

/* ══════════════════════════════════════════════════════════════
   v4.2 — MOOD CHECK CARD (nft-card) — PROPER OVERLAY
   ══════════════════════════════════════════════════════════════ */

/* ── Card container — fixed overlay ── */
.nft-card{
  position:fixed!important;
  bottom:0!important;
  left:0!important;
  right:0!important;
  z-index:500!important;
  background:linear-gradient(170deg, rgba(15,30,40,0.99) 0%, rgba(10,22,30,0.99) 100%)!important;
  backdrop-filter:blur(24px)!important;
  -webkit-backdrop-filter:blur(24px)!important;
  border-top:1px solid rgba(94,204,199,0.2)!important;
  border-radius:24px 24px 0 0!important;
  padding:32px 24px 36px!important;
  text-align:center!important;
  box-shadow:0 -16px 64px rgba(0,0,0,0.5)!important;
  animation:nftSlideUp 0.5s cubic-bezier(0.16,1,0.3,1)!important;
  font-family:var(--font)!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
}

@keyframes nftSlideUp{
  from{transform:translateY(100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

@keyframes nftSlideDown{
  from{transform:translateY(0);opacity:1}
  to{transform:translateY(100%);opacity:0}
}

.nft-card.closing{
  animation:nftSlideDown 0.4s cubic-bezier(0.7,0,0.84,0) forwards!important;
}

/* ── Title ── */
.nft-card h3{
  color:var(--accent-primary)!important;
  font-size:1.15rem!important;
  font-weight:700!important;
  margin:0 0 6px!important;
  font-family:var(--font)!important;
}

/* ── Subtitle ── */
.nft-sub{
  color:rgba(255,255,255,0.45)!important;
  font-size:0.82rem!important;
  margin-bottom:20px!important;
  font-family:var(--font)!important;
}

/* ── Emoji row ── */
.nft-emojis{
  display:flex!important;
  justify-content:center!important;
  gap:12px!important;
  margin-bottom:18px!important;
}

/* ── Individual emoji buttons ── */
.nft-emojis button{
  width:54px!important;
  height:54px!important;
  font-size:1.8rem!important;
  border-radius:50%!important;
  background:rgba(94,204,199,0.06)!important;
  border:2px solid rgba(94,204,199,0.12)!important;
  cursor:pointer!important;
  transition:all 0.25s cubic-bezier(0.16,1,0.3,1)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
}

.nft-emojis button:hover{
  background:rgba(94,204,199,0.12)!important;
  border-color:rgba(94,204,199,0.35)!important;
  transform:scale(1.18)!important;
}

.nft-emojis button:active{
  transform:scale(0.95)!important;
}

/* ── Selected emoji ── */
.nft-emojis button.sel{
  background:rgba(94,204,199,0.18)!important;
  border-color:var(--accent-primary)!important;
  transform:scale(1.2)!important;
  box-shadow:0 0 20px rgba(94,204,199,0.25)!important;
}

/* ── Skip button ── */
.nft-skip{
  background:none!important;
  border:none!important;
  color:rgba(255,255,255,0.3)!important;
  font-size:0.78rem!important;
  cursor:pointer!important;
  padding:8px 16px!important;
  font-family:var(--font)!important;
  transition:color 0.2s!important;
}

.nft-skip:hover{
  color:rgba(255,255,255,0.6)!important;
}

/* ── Registration section ── */
.nft-reg{
  margin-top:16px!important;
  padding-top:16px!important;
  border-top:1px solid rgba(94,204,199,0.08)!important;
}

.nft-reg input{
  display:block!important;
  width:100%!important;
  max-width:260px!important;
  margin:8px auto!important;
  padding:10px 16px!important;
  border-radius:16px!important;
  border:1px solid rgba(94,204,199,0.15)!important;
  background:rgba(94,204,199,0.04)!important;
  color:var(--text-primary)!important;
  font-size:0.85rem!important;
  font-family:var(--font)!important;
  transition:border-color 0.3s!important;
}

.nft-reg input:focus{
  border-color:rgba(94,204,199,0.4)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(94,204,199,0.08)!important;
}

.nft-btn{
  display:inline-block!important;
  margin-top:10px!important;
  padding:10px 28px!important;
  border-radius:20px!important;
  border:none!important;
  background:var(--accent-primary)!important;
  color:#fff!important;
  font-weight:700!important;
  font-size:0.85rem!important;
  cursor:pointer!important;
  font-family:var(--font)!important;
  transition:all 0.2s!important;
}

.nft-btn:hover{
  transform:scale(1.05)!important;
  box-shadow:0 4px 16px rgba(94,204,199,0.3)!important;
}

/* ── Backdrop overlay behind mood card ── */
.nft-card::before{
  content:''!important;
  position:fixed!important;
  inset:0!important;
  background:rgba(0,0,0,0.5)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  z-index:-1!important;
}

/* ── Mobile adjustments ── */
@media(max-width:480px){
  .nft-card{
    padding:24px 20px 28px!important;
    border-radius:20px 20px 0 0!important;
  }
  .nft-emojis button{
    width:48px!important;
    height:48px!important;
    font-size:1.5rem!important;
  }
  .nft-emojis{
    gap:8px!important;
  }
}


/* ══════════════════════════════════════════════════════════════
   v4.4 — CHAT BUBBLES + MESSAGE STYLING
   ══════════════════════════════════════════════════════════════ */

/* Messages container */
#messages, .messages {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    direction: rtl !important;
    scroll-behavior: smooth !important;
}

/* Base message */
.msg {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    max-width: 85% !important;
    animation: msgFadeIn 0.4s ease !important;
}

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

/* Bot message — aligned right (RTL) */
.msg.bot {
    align-self: flex-start !important;
    flex-direction: row !important;
}

.msg.bot > span:not(.avatar) {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px 4px 20px 20px !important;
    padding: 14px 18px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    word-wrap: break-word !important;
    direction: rtl !important;
    text-align: right !important;
}

/* Bot avatar */
.msg.bot .avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--teal-primary, #2dd4bf), var(--teal-deep, #0f766e)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(45, 212, 191, 0.3) !important;
    flex-shrink: 0 !important;
}

/* User message — aligned left (RTL = left side) */
.msg.user {
    align-self: flex-end !important;
    flex-direction: row-reverse !important;
}

.msg.user > span {
    background: linear-gradient(135deg, var(--teal-primary, #2dd4bf), var(--teal-deep, #0f766e)) !important;
    border-radius: 4px 20px 20px 20px !important;
    padding: 14px 18px !important;
    color: white !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    word-wrap: break-word !important;
    direction: rtl !important;
    text-align: right !important;
    box-shadow: 0 2px 12px rgba(45, 212, 191, 0.2) !important;
}

/* Typing indicator */
.msg.bot.typing > span:not(.avatar),
.msg.typing > span:not(.avatar) {
    background: rgba(255, 255, 255, 0.05) !important;
    min-width: 80px !important;
}

/* Date separator */
.date-separator, .msg-date, .session-date {
    text-align: center !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 12px !important;
    padding: 8px 16px !important;
    position: relative !important;
    align-self: center !important;
}

.date-separator::before, .date-separator::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Message time */
.msg-time {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.35) !important;
    margin-top: 4px !important;
    display: block !important;
}

/* ══════════════════════════════════════════════════════════════
   v4.4 — CHAT INPUT AREA IMPROVEMENTS
   ══════════════════════════════════════════════════════════════ */

/* Chat input container */
.chat-input, .input-area, #inputArea {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Text input */
.chat-input textarea,
.chat-input input[type="text"],
#userInput {
    flex: 1 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(45, 212, 191, 0.3) !important;
    border-radius: 24px !important;
    padding: 12px 20px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 15px !important;
    font-family: 'Tajawal', sans-serif !important;
    direction: rtl !important;
    resize: none !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    min-height: 48px !important;
    max-height: 120px !important;
}

.chat-input textarea:focus,
.chat-input input[type="text"]:focus,
#userInput:focus {
    border-color: var(--teal-primary, #2dd4bf) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1) !important;
}

/* Send button */
.chat-input button[onclick*="send"],
#sendBtn,
button.send-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--teal-primary, #2dd4bf), var(--teal-deep, #0f766e)) !important;
    border: none !important;
    color: white !important;
    font-size: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
}

/* Voice buttons */
.chat-input button[aria-label*="voice"],
.chat-input button[aria-label*="Voice"],
#voiceBtn, #toggleVoiceBtn, .voice-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
}

.chat-input button[aria-label*="voice"]:hover,
.chat-input button[aria-label*="Voice"]:hover,
#voiceBtn:hover, #toggleVoiceBtn:hover, .voice-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--teal-primary, #2dd4bf) !important;
}

/* SOS button */
.sos-btn, #sosBtn, [class*="sos"] {
    position: fixed !important;
    bottom: 80px !important;
    left: 16px !important;
    z-index: 100 !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #ef4444 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.sos-btn:hover, #sosBtn:hover, [class*="sos"]:hover {
    background: rgba(239, 68, 68, 0.25) !important;
}

/* ══════════════════════════════════════════════════════════════
   v4.4 — CHAT HEADER IMPROVEMENTS
   ══════════════════════════════════════════════════════════════ */

/* Chat header / tabs */
.chat-header, #chatHeader, .mode-tabs {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 12px 16px !important;
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.mode-tabs .tab, .mode-tab, .chat-tab {
    padding: 8px 24px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: rgba(255, 255, 255, 0.5) !important;
    background: transparent !important;
    border: none !important;
}

.mode-tabs .tab.active, .mode-tab.active, .chat-tab.active {
    background: rgba(45, 212, 191, 0.15) !important;
    color: var(--teal-primary, #2dd4bf) !important;
}

/* Back button in chat */
#backBtn, .back-btn, button[aria-label*="back"], button[aria-label*="Back"] {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

#backBtn:hover, .back-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* ══════════════════════════════════════════════════════════════
   v4.4 — VOICE PANEL FIX (covers send button bug)
   ══════════════════════════════════════════════════════════════ */

/* Voice selection panel - must NOT cover input */
.voice-panel, #voicePanel, .voice-selector {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(15, 23, 42, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    z-index: 200 !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* ══════════════════════════════════════════════════════════════
   v4.4 — WELCOME SCREEN BUTTON REFINEMENTS
   ══════════════════════════════════════════════════════════════ */

/* CTA primary - ensure max-width */
.cta-primary {
    max-width: 340px !important;
    width: 100% !important;
    align-self: center !important;
    margin: 0 auto !important;
}

/* CTA row */
.cta-row {
    max-width: 380px !important;
    margin: 0 auto !important;
    display: flex !important;
    gap: 10px !important;
}

.cta-row .cta-secondary {
    flex: 1 !important;
    max-width: none !important;
}

/* Footer copyright in chat */
.chat-footer, footer {
    text-align: center !important;
    padding: 8px !important;
    color: rgba(255, 255, 255, 0.25) !important;
    font-size: 11px !important;
    background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   v4.4 — DESKTOP CHAT MAX-WIDTH CONTAINER
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    .msg {
        max-width: 65% !important;
    }
    
    #messages, .messages {
        max-width: 800px !important;
        margin: 0 auto !important;
        padding: 24px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   v4.4 — JOURNEY SCREEN STYLES
   ══════════════════════════════════════════════════════════════ */

#journeyScreen {
    padding: 24px !important;
}

/* Summary card */
.summary-card, .session-summary {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin: 12px 0 !important;
}

/* Post-session feedback overlay */
.post-session, .feedback-overlay, .session-feedback {
    background: rgba(15, 23, 42, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    padding: 32px 24px !important;
    border-radius: 24px !important;
    text-align: center !important;
}


/* ══════════════════════════════════════════════════════════════
   v4.5 — WELCOME SCREEN FINAL POLISH
   ══════════════════════════════════════════════════════════════ */

/* Constrain welcome content width on desktop */
@media (min-width: 768px) {
    .screen.welcome {
        max-width: 100% !important;
    }
    
    .screen.welcome .welcome-content,
    .screen.welcome .welcome-main,
    .screen.welcome .cta-primary,
    .screen.welcome .cta-row,
    .screen.welcome .welcome-bottom {
        max-width: 440px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .screen.welcome .cta-primary {
        max-width: 380px !important;
    }
    
    .screen.welcome .cta-row {
        max-width: 380px !important;
    }
}

/* Welcome bottom section cleanup */
.welcome-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 0 8px !important;
}

/* "احضني" button — pill style */
.hug-btn, button[onclick*="hugMe"], [class*="hug"] {
    padding: 8px 24px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* "No previous sessions" text */
.no-sessions, .session-info {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
}

/* Journey code section */
.journey-code-section, .journey-input-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 300px !important;
}

/* Journey code input */
.journey-code-section input,
#journeyCodeInput {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px !important;
    text-align: center !important;
    width: 160px !important;
    transition: all 0.3s ease !important;
}

.journey-code-section input:focus,
#journeyCodeInput:focus {
    border-color: var(--teal-primary, #2dd4bf) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
}

/* Journey code button */
.journey-code-section button,
#loadJourneyBtn {
    padding: 10px 16px !important;
    border-radius: 12px !important;
    background: rgba(45, 212, 191, 0.15) !important;
    border: 1px solid rgba(45, 212, 191, 0.3) !important;
    color: var(--teal-primary, #2dd4bf) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

/* "Tour" button */
.tour-btn, button[onclick*="tour"], [class*="tour"] {
    padding: 8px 20px !important;
    border-radius: 20px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.tour-btn:hover, button[onclick*="tour"]:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* "لديّ رمز رحلة" toggle */
.journey-toggle {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    background: none !important;
    padding: 4px 12px !important;
}

.journey-toggle:hover {
    color: var(--teal-primary, #2dd4bf) !important;
}

/* Footer */
.welcome-footer, .app-footer {
    padding: 16px 0 8px !important;
    text-align: center !important;
}

.welcome-footer p, .app-footer p,
.welcome-footer small, .app-footer small {
    color: rgba(255, 255, 255, 0.25) !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
}

.welcome-footer a, .app-footer a {
    color: rgba(45, 212, 191, 0.5) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.welcome-footer a:hover, .app-footer a:hover {
    color: var(--teal-primary, #2dd4bf) !important;
}

/* ══════════════════════════════════════════════════════════════
   v4.5 — WELCOME GREETING TEXT
   ══════════════════════════════════════════════════════════════ */

/* Greeting text — the dynamic "يا هلا..." message */
.greeting, .welcome-greeting, #greeting {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 12px 24px !important;
    margin: 8px auto !important;
    max-width: 380px !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

/* ══════════════════════════════════════════════════════════════
   v4.5 — PROGRESS DASHBOARD BUTTON REFINEMENT
   ══════════════════════════════════════════════════════════════ */

.progress-btn, #progressBtn, [class*="progress-btn"] {
    position: fixed !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 100 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.progress-btn:hover, #progressBtn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* ══════════════════════════════════════════════════════════════
   v4.5 — DARK/LIGHT MODE TOGGLE
   ══════════════════════════════════════════════════════════════ */

.theme-toggle, #themeToggle, [class*="theme-toggle"] {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 100 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.theme-toggle:hover, #themeToggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ══════════════════════════════════════════════════════════════
   v4.5 — WAVE / MASCOT BUTTON
   ══════════════════════════════════════════════════════════════ */

.wave-btn, #waveBtn, .mascot-btn {
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
    z-index: 100 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--teal-primary, #2dd4bf), var(--teal-deep, #0f766e)) !important;
    border: none !important;
    color: white !important;
    font-size: 24px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 20px rgba(45, 212, 191, 0.3) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.wave-btn:hover, #waveBtn:hover, .mascot-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 28px rgba(45, 212, 191, 0.4) !important;
}

.wave-btn img, #waveBtn img, .mascot-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* ══════════════════════════════════════════════════════════════
   v4.5 — SCROLLBAR STYLING
   ══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 6px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* ══════════════════════════════════════════════════════════════
   v4.5 — ANIMATIONS AND MICRO-INTERACTIONS
   ══════════════════════════════════════════════════════════════ */

/* Pulse animation for breathing circle */
@keyframes breathePulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.05); opacity: 1; }
}

.breathing-circle, #breathingCircle {
    animation: breathePulse 4s ease-in-out infinite !important;
}

/* Shimmer effect for CTA */
.cta-primary::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent) !important;
    animation: shimmer 3s infinite !important;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}


/* ══════════════════════════════════════════════════════════════
   v4.6 — WELCOME SCREEN COMPACT + SCROLLABLE
   ══════════════════════════════════════════════════════════════ */

/* Welcome screen scrollable */
.screen.welcome {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}

/* Compact breathing hero */
.breath-hero {
    margin: 8px auto !important;
    padding: 8px 0 !important;
}

.breath-hero .breathing-circle,
.breath-hero #breathingCircle {
    width: 120px !important;
    height: 120px !important;
}

/* Compact bottom section */
.welcome-bottom {
    padding: 8px 0 4px !important;
    gap: 6px !important;
    max-width: 380px !important;
    margin: 0 auto !important;
}

/* Session info ultra compact */
.session-info, .no-sessions,
.welcome-bottom .session-text,
.welcome-bottom > p {
    font-size: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* Journey toggle minimal */
.journey-link, #journeyLink {
    font-size: 12px !important;
    padding: 4px 10px !important;
    margin: 0 !important;
}

/* Journey entry compact */
.journey-entry {
    display: flex !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.journey-entry input {
    height: 32px !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
}

.journey-entry button {
    height: 32px !important;
    min-width: 32px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
}

/* Tour button minimal */
.tour-btn, #tourBtn {
    font-size: 11px !important;
    padding: 4px 12px !important;
    margin: 0 !important;
}

/* Hug button compact */
.hug-trigger-btn, #hugBtn {
    padding: 6px 16px !important;
    font-size: 13px !important;
    margin: 4px auto !important;
    display: block !important;
}

/* Footer compact */
.welcome-footer, .app-footer, 
.welcome-bottom .footer,
.welcome-bottom > footer {
    padding: 4px 0 !important;
    margin: 0 !important;
}

/* Reduce tagline spacing */
.tagline, #tagline {
    margin: 4px 0 !important;
    font-size: 14px !important;
}

/* Reduce returning welcome */
.returning-welcome, #returningWelcome {
    margin: 4px auto !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
}

/* Reduce CTA spacing */
.cta-primary {
    margin: 8px auto !important;
}

.cta-row {
    margin: 6px auto !important;
    gap: 8px !important;
}

/* Session counter compact */
.session-counter, .session-stats,
.welcome-bottom > div:first-child {
    font-size: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   v4.6 — RATING/SHARE OVERLAYS
   ══════════════════════════════════════════════════════════════ */

/* Share overlay */
.share-overlay, #shareOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3000 !important;
    background: rgba(0,0,0,0.7) !important;
    backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.share-overlay .share-card, #shareOverlay > div {
    background: linear-gradient(145deg, rgba(30,41,59,0.95), rgba(15,23,42,0.95)) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    max-width: 360px !important;
    width: 90% !important;
    text-align: center !important;
}

/* Rating overlay */
.rating-overlay, #ratingOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3000 !important;
    background: rgba(0,0,0,0.7) !important;
    backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Onboarding overlay */
.onboarding-overlay, #onboardingOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4000 !important;
    background: rgba(0,0,0,0.8) !important;
    backdrop-filter: blur(12px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.onboarding-card {
    background: linear-gradient(145deg, rgba(30,41,59,0.95), rgba(15,23,42,0.95)) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 24px !important;
    padding: 32px !important;
    max-width: 400px !important;
    width: 90% !important;
    text-align: center !important;
}

/* ══════════════════════════════════════════════════════════════
   v4.6 — VOICE PANEL FIX (old bug)
   ══════════════════════════════════════════════════════════════ */

/* Voice panel should not cover send button */
.voice-panel, #voicePanel, .voice-selector, #voiceSelector {
    position: fixed !important;
    bottom: 70px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 900 !important;
    background: linear-gradient(145deg, rgba(30,41,59,0.98), rgba(15,23,42,0.98)) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    max-width: 340px !important;
    width: 90% !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5) !important;
}

/* ══════════════════════════════════════════════════════════════
   v4.6 — GLOBAL POLISH
   ══════════════════════════════════════════════════════════════ */

/* Smooth fade-in for all screens */
.screen {
    animation: fadeIn 0.4s ease !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Focus styles */
textarea:focus, input:focus, button:focus-visible {
    outline: 2px solid rgba(45, 212, 191, 0.4) !important;
    outline-offset: 2px !important;
}

/* Remove default button outline */
button:focus:not(:focus-visible) {
    outline: none !important;
}


/* ══════════════════════════════════════════════════════════════
   NAFAS V7 PRO — Professional Design System Override
   ══════════════════════════════════════════════════════════════ */

/* Ambient mesh gradient overlay */
body::after{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 15% 5%, rgba(92,224,214,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 85% 85%, rgba(129,140,248,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 40%, rgba(167,139,250,0.025) 0%, transparent 50%);
  pointer-events:none;
  z-index:0;
}

/* Remove old V7 overlays */
.v7-aurora,.v7-breath-particle,.v7-nafas-status .dot{display:none!important}

/* ── Pro Status Badge ── */
.v7-nafas-status{
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  background:rgba(92,224,214,0.06);
  border:1px solid rgba(92,224,214,0.1);
  backdrop-filter:blur(16px);
  padding:6px 18px;
  border-radius:var(--radius-full);
  font-size:0.78rem;
  color:rgba(92,224,214,0.9);
  margin-bottom:16px;
  letter-spacing:0.03em;
  animation:statusFadeIn 1.5s ease forwards;
}
.v7-nafas-status::before{
  content:'';
  width:6px;
  height:6px;
  background:#5CE0D6;
  border-radius:50%;
  box-shadow:0 0 8px rgba(92,224,214,0.5);
  animation:statusPulse 3s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes statusPulse{
  0%,100%{opacity:0.6;box-shadow:0 0 6px rgba(92,224,214,0.3)}
  50%{opacity:1;box-shadow:0 0 12px rgba(92,224,214,0.6)}
}
@keyframes statusFadeIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Pro Tagline (greeting) ── */
.tagline{
  font-size:0.95rem!important;
  color:var(--text-secondary)!important;
  margin-bottom:24px!important;
  font-weight:var(--fw-regular)!important;
  max-width:280px;
  line-height:1.6;
}

/* ── Pro Returning Welcome ── */
.returning-welcome{
  background:rgba(92,224,214,0.04)!important;
  border:1px solid rgba(92,224,214,0.08)!important;
  border-radius:var(--radius-lg)!important;
  padding:10px 20px!important;
  font-size:0.82rem!important;
  color:var(--text-secondary)!important;
  backdrop-filter:blur(10px);
  max-width:300px;
}

/* ── CTA labels ── */
.cta-label-main{
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:0.02em;
}
.cta-sub{
  font-size:0.72rem;
  opacity:0.7;
  letter-spacing:0.01em;
}
.cta-label-sec{
  font-size:0.82rem;
  font-weight:600;
}
.cta-hint-sec{
  font-size:0.65rem;
  opacity:0.5;
}
.cta-icon{font-size:1.2rem!important}

/* ── More toggle ── */
.more-toggle-btn{
  background:transparent!important;
  border:1px solid rgba(255,255,255,0.05)!important;
  color:var(--text-muted)!important;
  font-size:0.78rem!important;
  padding:7px 20px!important;
  border-radius:var(--radius-full)!important;
  transition:all 0.3s var(--ease)!important;
  margin-bottom:12px!important;
}
.more-toggle-btn:hover{
  border-color:rgba(92,224,214,0.15)!important;
  color:var(--accent)!important;
}

/* ── More options panel ── */
.more-options-panel{
  display:flex;
  gap:10px;
  width:100%;
  max-width:300px;
  margin:0 auto 16px;
}

/* ── Bottom section ── */
.welcome-bottom{
  margin-top:auto;
  padding-top:24px;
}
.session-count{
  font-size:0.72rem!important;
  color:var(--text-muted)!important;
  margin-bottom:8px;
}
.journey-link,.tour-btn{
  background:transparent!important;
  border:1px solid rgba(255,255,255,0.04)!important;
  color:var(--text-muted)!important;
  font-size:0.75rem!important;
  padding:6px 14px!important;
  border-radius:var(--radius-full)!important;
  transition:all 0.3s!important;
  margin:3px!important;
}
.journey-link:hover,.tour-btn:hover{
  border-color:rgba(92,224,214,0.12)!important;
  color:var(--text-secondary)!important;
}
.hug-btn{
  background:rgba(255,255,255,0.03)!important;
  border:1px solid rgba(255,255,255,0.06)!important;
  border-radius:var(--radius-lg)!important;
  padding:10px 20px!important;
  color:var(--text-secondary)!important;
  font-size:0.82rem!important;
  transition:all 0.3s!important;
  backdrop-filter:blur(8px);
}
.hug-btn:hover{
  border-color:rgba(92,224,214,0.15)!important;
  background:rgba(92,224,214,0.05)!important;
}

/* ── Copyright ── */
.copyright{
  font-size:0.68rem!important;
  color:var(--text-muted)!important;
  margin-top:16px;
  line-height:1.5;
  letter-spacing:0.01em;
}

/* ── Chat Header Pro ── */
.chat-header{
  backdrop-filter:blur(20px)!important;
  background:rgba(6,11,22,0.85)!important;
  border-bottom:1px solid rgba(255,255,255,0.04)!important;
}

/* ── Chat Messages Pro ── */
.msg.bot .bubble{
  background:rgba(92,224,214,0.05)!important;
  border:1px solid rgba(92,224,214,0.08)!important;
  border-radius:18px 18px 18px 4px!important;
  backdrop-filter:blur(6px);
}
.msg.user .bubble{
  background:rgba(92,224,214,0.1)!important;
  border:1px solid rgba(92,224,214,0.15)!important;
  border-radius:18px 18px 4px 18px!important;
}

/* ── Input Area Pro ── */
.input-area{
  backdrop-filter:blur(20px)!important;
  background:rgba(6,11,22,0.85)!important;
  border-top:1px solid rgba(255,255,255,0.04)!important;
}
.input-area textarea{
  background:rgba(255,255,255,0.04)!important;
  border:1px solid rgba(255,255,255,0.06)!important;
  border-radius:var(--radius-lg)!important;
  color:var(--text-primary)!important;
  transition:border-color 0.3s!important;
}
.input-area textarea:focus{
  border-color:rgba(92,224,214,0.2)!important;
  box-shadow:0 0 20px rgba(92,224,214,0.05)!important;
}
.send-btn{
  background:linear-gradient(135deg,#5CE0D6,#45C4BA)!important;
  color:#060b16!important;
  border-radius:var(--radius-md)!important;
  transition:all 0.3s!important;
}
.send-btn:hover{
  box-shadow:0 0 20px rgba(92,224,214,0.2)!important;
  transform:scale(1.05);
}

/* ── SOS Button Pro ── */
.help-fab{
  background:rgba(255,107,107,0.12)!important;
  border:1px solid rgba(255,107,107,0.2)!important;
  backdrop-filter:blur(12px)!important;
  border-radius:var(--radius-full)!important;
  color:#FF6B6B!important;
  transition:all 0.3s!important;
}
.help-fab:hover{
  background:rgba(255,107,107,0.2)!important;
  box-shadow:0 0 20px rgba(255,107,107,0.15)!important;
}

/* ── Consent/Privacy Pro ── */
.consent-box,.privacy-box{
  background:rgba(12,20,36,0.95)!important;
  border:1px solid rgba(255,255,255,0.06)!important;
  backdrop-filter:blur(24px)!important;
  border-radius:var(--radius-xl)!important;
}
.consent-accept{
  background:linear-gradient(135deg,#5CE0D6,#45C4BA)!important;
  color:#060b16!important;
  border-radius:var(--radius-lg)!important;
  font-weight:700!important;
  letter-spacing:0.02em;
}

/* ── Smooth page transitions ── */
.screen{
  animation:screenIn 0.6s ease forwards;
}
@keyframes screenIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Burnout bar Pro ── */
.burnout-bar{
  background:rgba(255,255,255,0.03)!important;
  height:3px!important;
}
.burnout-bar-fill{
  background:linear-gradient(90deg,#5CE0D6,#818cf8)!important;
  height:3px!important;
  border-radius:3px!important;
  transition:width 0.8s cubic-bezier(0.4,0,0.2,1)!important;
}

/* ── Progress button ── */
.progress-fab,.progress-btn,#progressToggle,[onclick*="progress"]{
  background:rgba(92,224,214,0.06)!important;
  border:1px solid rgba(92,224,214,0.1)!important;
  backdrop-filter:blur(12px)!important;
  border-radius:var(--radius-md)!important;
  color:var(--text-secondary)!important;
  font-size:0.78rem!important;
}

/* ── Responsive refinements ── */
@media(max-width:380px){
  .app-name{font-size:2.2rem!important}
  .breath-hero-circle{width:120px!important;height:120px!important}
  .cta-primary{max-width:280px!important;padding:16px 24px!important}
}
@media(min-width:768px){
  .screen.welcome{gap:4px}
  .app-name{font-size:3rem!important}
  .breath-hero-circle{width:160px!important;height:160px!important}
  .cta-primary{max-width:340px!important}
}


/* ══════════════════════════════════════════════════════════════
   NAFAS V7 BOLD — Dramatic Visual Transformation
   ══════════════════════════════════════════════════════════════ */

/* ── ANIMATED AURORA BACKGROUND ── */
body{
  background:#050a12!important;
}
.screen.welcome::before{
  content:'';
  position:fixed;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:
    conic-gradient(from 0deg at 30% 20%,
      transparent 0deg,
      rgba(92,224,214,0.06) 60deg,
      transparent 120deg,
      rgba(129,140,248,0.05) 200deg,
      transparent 260deg,
      rgba(167,139,250,0.04) 320deg,
      transparent 360deg);
  animation:auroraRotate 40s linear infinite;
  pointer-events:none;
  z-index:-1;
}
@keyframes auroraRotate{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

/* ── GLASS CONTENT CARD ── */
.screen.welcome{
  position:relative!important;
  z-index:1!important;
}
.screen.welcome>.nafas-logo-container,
.screen.welcome>.app-name,
.screen.welcome>.app-slogan,
.screen.welcome>.v7-nafas-status,
.screen.welcome>.tagline,
.screen.welcome>.returning-welcome,
.screen.welcome>.breath-hero,
.screen.welcome>.cta-primary,
.screen.welcome>.more-toggle-btn,
.screen.welcome>.more-options-panel{
  position:relative;
  z-index:2;
}

/* ── BIGGER BOLDER APP NAME ── */
.app-name{
  font-size:3.2rem!important;
  font-weight:800!important;
  letter-spacing:0.08em!important;
  margin-bottom:6px!important;
  text-shadow:0 0 60px rgba(92,224,214,0.12),0 2px 4px rgba(0,0,0,0.3)!important;
}

/* ── DRAMATIC BREATHING CIRCLE ── */
.breath-hero{
  margin-bottom:28px!important;
  margin-top:4px!important;
}
.breath-hero-circle{
  width:160px!important;
  height:160px!important;
  background:
    radial-gradient(circle at 35% 30%, rgba(92,224,214,0.15), rgba(92,224,214,0.02) 70%)!important;
  border:1.5px solid rgba(92,224,214,0.15)!important;
  box-shadow:
    0 0 80px rgba(92,224,214,0.08),
    0 0 40px rgba(92,224,214,0.04),
    inset 0 0 40px rgba(92,224,214,0.04)!important;
  backdrop-filter:blur(12px)!important;
}
.breath-hero-text{
  font-size:1.05rem!important;
  font-weight:600!important;
  letter-spacing:0.04em!important;
}

/* ── COMPLETELY NEW CTA BUTTON ── */
.cta-primary.cta-hero-main{
  max-width:260px!important;
  padding:20px 36px!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,#5CE0D6 0%,#4DCEC5 50%,#3CB8B0 100%)!important;
  box-shadow:
    0 8px 32px rgba(92,224,214,0.2),
    0 2px 8px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.15)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
}
.cta-primary.cta-hero-main:hover{
  transform:translateY(-4px) scale(1.03)!important;
  box-shadow:
    0 16px 48px rgba(92,224,214,0.25),
    0 4px 12px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.2)!important;
}
.cta-label-main{
  font-size:1.15rem!important;
  font-weight:700!important;
}
.cta-sub{
  font-size:0.68rem!important;
  opacity:0.6!important;
  font-weight:400!important;
}

/* ── HUG BUTTON — Glass Morphism ── */
.hug-btn,[onclick*="showHugAnimation"]{
  background:rgba(255,255,255,0.04)!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  border-radius:16px!important;
  padding:12px 24px!important;
  backdrop-filter:blur(16px)!important;
  transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1)!important;
}
.hug-btn:hover,[onclick*="showHugAnimation"]:hover{
  background:rgba(92,224,214,0.06)!important;
  border-color:rgba(92,224,214,0.15)!important;
  transform:translateY(-2px)!important;
  box-shadow:0 8px 24px rgba(92,224,214,0.08)!important;
}

/* ── STATUS BADGE — More Visible ── */
.v7-nafas-status{
  background:rgba(92,224,214,0.08)!important;
  border:1px solid rgba(92,224,214,0.15)!important;
  padding:8px 20px!important;
  font-size:0.8rem!important;
  letter-spacing:0.04em!important;
  box-shadow:0 4px 16px rgba(92,224,214,0.06)!important;
}

/* ── SECONDARY BUTTONS — Glass Cards ── */
.more-options-panel .cta-secondary{
  background:rgba(255,255,255,0.03)!important;
  border:1px solid rgba(255,255,255,0.07)!important;
  border-radius:16px!important;
  padding:16px 12px!important;
  backdrop-filter:blur(16px)!important;
  transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1)!important;
}
.more-options-panel .cta-secondary:hover{
  background:rgba(92,224,214,0.05)!important;
  border-color:rgba(92,224,214,0.15)!important;
  transform:translateY(-3px)!important;
  box-shadow:0 8px 24px rgba(92,224,214,0.08)!important;
}

/* ── MORE TOGGLE ── */
.more-toggle-btn{
  margin-top:4px!important;
}

/* ── BOTTOM LINKS — Refined ── */
.journey-link,.tour-btn{
  font-size:0.72rem!important;
  padding:5px 12px!important;
  border:1px solid rgba(255,255,255,0.04)!important;
  border-radius:20px!important;
}

/* ── FOOTER ── */
.copyright{
  opacity:0.6!important;
  font-size:0.65rem!important;
}

/* ── INSTALL BANNER — Hide or Style ── */
[style*="position: fixed"][style*="z-index"]{
  backdrop-filter:blur(16px)!important;
  background:rgba(6,10,18,0.9)!important;
}

/* ── AMBIENT FLOATING ORBS ── */
.bg-blobs .blob{
  filter:blur(120px)!important;
  opacity:0.05!important;
}

/* ── RESPONSIVE ── */
@media(max-width:380px){
  .app-name{font-size:2.5rem!important}
  .breath-hero-circle{width:130px!important;height:130px!important}
  .cta-primary.cta-hero-main{max-width:240px!important;padding:16px 28px!important}
}
@media(min-width:768px){
  .app-name{font-size:3.8rem!important}
  .breath-hero-circle{width:180px!important;height:180px!important}
  .cta-primary.cta-hero-main{max-width:300px!important}
}


/* ══════════════════════════════════════════════════════════════
   NAFAS V7 DRAMATIC — Glass Card Layout
   ══════════════════════════════════════════════════════════════ */

/* ── Welcome screen as floating glass card ── */
.screen.welcome{
  min-height:100dvh!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  padding:40px 24px!important;
  gap:0!important;
}

/* Glass container - wraps main content */
.nafas-logo-container,
.app-name,
.app-slogan,
.v7-nafas-status,
.tagline,
.returning-welcome,
.breath-hero,
.cta-primary.cta-hero-main,
.more-toggle-btn,
.more-options-panel,
.welcome-bottom{
  position:relative;
  z-index:3;
}

/* ── LIVING BACKGROUND — Multi-layer animated ── */
body{
  background:#040810!important;
  overflow-x:hidden;
}

/* Layer 1: Deep space gradient */
body::before{
  content:''!important;
  position:fixed!important;
  inset:0!important;
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(20,30,60,0.8) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(92,224,214,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 20%, rgba(129,140,248,0.03) 0%, transparent 50%)!important;
  pointer-events:none!important;
  z-index:0!important;
}

/* Layer 2: Animated aurora glow */
.screen.welcome::before{
  content:''!important;
  position:fixed!important;
  width:600px!important;
  height:600px!important;
  top:-200px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  background:radial-gradient(circle, rgba(92,224,214,0.08) 0%, rgba(129,140,248,0.04) 40%, transparent 70%)!important;
  filter:blur(60px)!important;
  animation:auroraFloat 12s ease-in-out infinite!important;
  pointer-events:none!important;
  z-index:0!important;
}
@keyframes auroraFloat{
  0%,100%{transform:translateX(-50%) translateY(0);opacity:0.7}
  50%{transform:translateX(-50%) translateY(30px);opacity:1}
}

/* ── LOGO — Elegant glow ── */
.nafas-logo-container{
  margin-bottom:12px!important;
}
.logo-breathing-glow{
  inset:-70px!important;
  background:radial-gradient(circle,rgba(92,224,214,0.06) 0%,transparent 65%)!important;
}
.nafas-logo-img{
  width:56px!important;
  filter:brightness(1.2) drop-shadow(0 0 24px rgba(92,224,214,0.2))!important;
}

/* ── APP NAME — Large + Subtle ── */
.app-name{
  font-size:3rem!important;
  font-weight:800!important;
  letter-spacing:0.06em!important;
  margin-bottom:4px!important;
  text-shadow:0 0 50px rgba(92,224,214,0.08)!important;
  color:#f0ede8!important;
  -webkit-text-fill-color:#f0ede8!important;
}

/* ── SLOGAN — Refined ── */
.app-slogan{
  font-size:0.55rem!important;
  letter-spacing:0.5em!important;
  opacity:0.35!important;
  margin-bottom:20px!important;
  color:#5CE0D6!important;
}

/* ── STATUS BADGE — Pill ── */
.v7-nafas-status{
  background:rgba(92,224,214,0.05)!important;
  border:1px solid rgba(92,224,214,0.1)!important;
  padding:6px 16px!important;
  border-radius:100px!important;
  font-size:0.75rem!important;
  color:rgba(92,224,214,0.85)!important;
  margin-bottom:12px!important;
  backdrop-filter:blur(12px)!important;
}

/* ── TAGLINE + GREETING ── */
.tagline{
  font-size:0.88rem!important;
  color:rgba(240,237,232,0.5)!important;
  margin-bottom:8px!important;
  line-height:1.7!important;
}
.returning-welcome{
  background:rgba(92,224,214,0.03)!important;
  border:1px solid rgba(92,224,214,0.06)!important;
  border-radius:14px!important;
  padding:8px 16px!important;
  font-size:0.78rem!important;
  max-width:280px!important;
  backdrop-filter:blur(8px)!important;
  margin-bottom:16px!important;
}

/* ── BREATHING CIRCLE — Ethereal rings ── */
.breath-hero{
  margin:8px 0 24px!important;
}
.breath-hero-circle{
  width:150px!important;
  height:150px!important;
  background:transparent!important;
  border:1px solid rgba(92,224,214,0.12)!important;
  box-shadow:
    0 0 60px rgba(92,224,214,0.05),
    inset 0 0 60px rgba(92,224,214,0.03)!important;
  backdrop-filter:blur(4px)!important;
  animation:breathFloat 6s ease-in-out infinite!important;
}
.breath-hero-circle::before{
  inset:-16px!important;
  border:1px solid rgba(92,224,214,0.05)!important;
  animation:breathFloat 6s ease-in-out infinite!important;
  animation-delay:-2s!important;
}
.breath-hero-circle::after{
  inset:-8px!important;
  border:1px solid rgba(92,224,214,0.08)!important;
  animation:breathFloat 6s ease-in-out infinite!important;
  animation-delay:-4s!important;
}
@keyframes breathFloat{
  0%,100%{transform:scale(0.92);opacity:0.7}
  50%{transform:scale(1.08);opacity:1}
}
.breath-hero-text{
  font-size:0.95rem!important;
  color:rgba(92,224,214,0.7)!important;
  font-weight:500!important;
  letter-spacing:0.06em!important;
}
.breath-hero-subtitle{
  font-size:0.72rem!important;
  color:rgba(240,237,232,0.2)!important;
  letter-spacing:0.04em!important;
}

/* ── CTA MAIN — Premium gradient ── */
.cta-primary.cta-hero-main{
  max-width:240px!important;
  padding:18px 32px!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#5CE0D6 0%,#4DCEC5 60%,#3CB8B0 100%)!important;
  color:#040810!important;
  box-shadow:
    0 4px 20px rgba(92,224,214,0.15),
    0 1px 3px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.12)!important;
  border:none!important;
  font-family:'Tajawal',sans-serif!important;
  transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1)!important;
}
.cta-primary.cta-hero-main:hover{
  transform:translateY(-3px)!important;
  box-shadow:
    0 12px 40px rgba(92,224,214,0.2),
    0 2px 8px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.15)!important;
}
.cta-primary.cta-hero-main .cta-icon{
  font-size:1.1rem!important;
  margin-bottom:2px!important;
}
.cta-primary.cta-hero-main .cta-label-main{
  font-size:1.1rem!important;
  font-weight:700!important;
  letter-spacing:0.02em!important;
}
.cta-primary.cta-hero-main .cta-sub{
  font-size:0.65rem!important;
  opacity:0.55!important;
}

/* ── MORE TOGGLE ── */
.more-toggle-btn{
  background:transparent!important;
  border:1px solid rgba(255,255,255,0.04)!important;
  color:rgba(240,237,232,0.25)!important;
  font-size:0.72rem!important;
  padding:5px 16px!important;
  border-radius:100px!important;
  margin-bottom:12px!important;
  transition:all 0.3s ease!important;
}
.more-toggle-btn:hover{
  border-color:rgba(92,224,214,0.1)!important;
  color:rgba(92,224,214,0.6)!important;
}

/* ── SECONDARY BUTTONS ── */
.more-options-panel{
  max-width:260px!important;
  gap:8px!important;
}
.more-options-panel .cta-secondary{
  background:rgba(255,255,255,0.02)!important;
  border:1px solid rgba(255,255,255,0.05)!important;
  border-radius:14px!important;
  padding:14px 10px!important;
  backdrop-filter:blur(12px)!important;
  transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1)!important;
}
.more-options-panel .cta-secondary:hover{
  background:rgba(92,224,214,0.04)!important;
  border-color:rgba(92,224,214,0.12)!important;
  transform:translateY(-2px)!important;
}

/* ── HUG BUTTON ROW ── */
.screen.welcome>[class*="hug"],
.screen.welcome>[onclick*="Hug"],
.screen.welcome>div:has(>[onclick*="Hug"]){
  margin-bottom:8px!important;
}

/* ── WELCOME BOTTOM ── */
.welcome-bottom{
  margin-top:auto!important;
  padding-top:16px!important;
}
.session-count{
  font-size:0.68rem!important;
  color:rgba(240,237,232,0.2)!important;
}
.journey-link,.tour-btn{
  font-size:0.7rem!important;
  padding:4px 12px!important;
  border-color:rgba(255,255,255,0.03)!important;
  color:rgba(240,237,232,0.2)!important;
}
.copyright{
  font-size:0.62rem!important;
  color:rgba(240,237,232,0.15)!important;
  margin-top:12px!important;
}

/* ── BLOBS — Ethereal ── */
.bg-blobs .blob{
  filter:blur(140px)!important;
  opacity:0.04!important;
}

/* ── STARS — More subtle ── */
.star{
  width:1px!important;
  height:1px!important;
  background:rgba(255,255,255,0.6)!important;
}

/* ── RESPONSIVE ── */
@media(max-width:380px){
  .app-name{font-size:2.4rem!important}
  .breath-hero-circle{width:120px!important;height:120px!important}
  .cta-primary.cta-hero-main{max-width:220px!important;padding:16px 24px!important}
}
@media(min-width:768px){
  .app-name{font-size:3.6rem!important}
  .breath-hero-circle{width:170px!important;height:170px!important}
  .cta-primary.cta-hero-main{max-width:280px!important}
}


/* ══════════════════════════════════════════════════════════════
   NAFAS GLASS CARD — Structural Design System
   ══════════════════════════════════════════════════════════════ */

/* ── The Glass Card ── */
.nafas-glass-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:100%;
  max-width:420px;
  margin:0 auto;
  padding:40px 32px 32px;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:32px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:
    0 24px 80px rgba(0,0,0,0.4),
    0 0 1px rgba(255,255,255,0.1),
    inset 0 1px 0 rgba(255,255,255,0.05);
  position:relative;
  z-index:2;
  overflow:hidden;
}

/* Card top light effect */
.nafas-glass-card::before{
  content:'';
  position:absolute;
  top:0;
  left:10%;
  right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(92,224,214,0.2),transparent);
}

/* Card ambient inner glow */
.nafas-glass-card::after{
  content:'';
  position:absolute;
  top:-100px;
  left:50%;
  transform:translateX(-50%);
  width:300px;
  height:200px;
  background:radial-gradient(circle,rgba(92,224,214,0.04) 0%,transparent 70%);
  pointer-events:none;
}

/* ── Divider line ── */
.nafas-divider{
  width:40px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(92,224,214,0.3),transparent);
  margin:8px auto 16px;
}

/* ── Override welcome screen for card layout ── */
.screen.welcome{
  background:transparent!important;
  padding:24px 16px!important;
  gap:0!important;
}

/* ── Card elements refinement ── */
.nafas-glass-card .nafas-logo-container{
  margin-bottom:12px;
}
.nafas-glass-card .nafas-logo-img{
  width:52px!important;
}
.nafas-glass-card .app-name{
  font-size:2.8rem!important;
  margin-bottom:4px!important;
}
.nafas-glass-card .app-slogan{
  font-size:0.52rem!important;
  letter-spacing:0.45em!important;
  margin-bottom:0!important;
  opacity:0.35!important;
}
.nafas-glass-card .v7-nafas-status{
  margin-bottom:8px!important;
  background:rgba(92,224,214,0.04)!important;
  border-color:rgba(92,224,214,0.08)!important;
  padding:5px 14px!important;
  font-size:0.72rem!important;
}
.nafas-glass-card .tagline{
  font-size:0.85rem!important;
  margin-bottom:4px!important;
  color:rgba(240,237,232,0.45)!important;
}
.nafas-glass-card .returning-welcome{
  margin-bottom:12px!important;
}
.nafas-glass-card .breath-hero{
  margin:4px 0 20px!important;
}
.nafas-glass-card .breath-hero-circle{
  width:130px!important;
  height:130px!important;
  background:transparent!important;
  border:1px solid rgba(92,224,214,0.1)!important;
  box-shadow:0 0 40px rgba(92,224,214,0.04),inset 0 0 30px rgba(92,224,214,0.02)!important;
}
.nafas-glass-card .breath-hero-text{
  font-size:0.88rem!important;
  color:rgba(92,224,214,0.65)!important;
  font-weight:500!important;
}
.nafas-glass-card .breath-hero-subtitle{
  font-size:0.7rem!important;
  color:rgba(240,237,232,0.18)!important;
}

/* ── CTA inside card ── */
.nafas-glass-card .cta-primary.cta-hero-main{
  max-width:220px!important;
  padding:16px 28px!important;
  border-radius:16px!important;
  margin-bottom:10px!important;
  background:linear-gradient(150deg,#5CE0D6 0%,#4DCEC5 50%,#3CB8B0 100%)!important;
  box-shadow:
    0 4px 16px rgba(92,224,214,0.15),
    inset 0 1px 0 rgba(255,255,255,0.1)!important;
}
.nafas-glass-card .cta-label-main{
  font-size:1rem!important;
}
.nafas-glass-card .cta-sub{
  font-size:0.6rem!important;
}

/* ── More options inside card ── */
.nafas-glass-card .more-toggle-btn{
  font-size:0.68rem!important;
  color:rgba(240,237,232,0.2)!important;
  border-color:transparent!important;
  margin-bottom:8px!important;
  padding:4px 12px!important;
}
.nafas-glass-card .more-options-panel{
  max-width:240px!important;
  gap:6px!important;
  margin-bottom:0!important;
}
.nafas-glass-card .cta-secondary{
  border-radius:12px!important;
  padding:12px 8px!important;
  background:rgba(255,255,255,0.02)!important;
  border:1px solid rgba(255,255,255,0.04)!important;
}

/* ── Welcome bottom (outside card) ── */
.welcome-bottom{
  margin-top:20px!important;
  text-align:center;
}
.welcome-bottom .session-count{
  font-size:0.65rem!important;
  color:rgba(240,237,232,0.15)!important;
}
.welcome-bottom .journey-link,
.welcome-bottom .tour-btn{
  font-size:0.68rem!important;
  color:rgba(240,237,232,0.18)!important;
  border-color:rgba(255,255,255,0.03)!important;
}
.welcome-bottom .copyright{
  font-size:0.58rem!important;
  color:rgba(240,237,232,0.12)!important;
}

/* ── Background enhancement ── */
body{background:#030712!important}

/* Aurora behind card */
.screen.welcome::before{
  content:''!important;
  position:fixed!important;
  width:500px!important;
  height:500px!important;
  top:-180px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  background:radial-gradient(circle, rgba(92,224,214,0.06) 0%, rgba(129,140,248,0.03) 40%, transparent 65%)!important;
  filter:blur(50px)!important;
  animation:auroraFloat 15s ease-in-out infinite!important;
  pointer-events:none!important;
  z-index:0!important;
}

/* ── Responsive ── */
@media(max-width:400px){
  .nafas-glass-card{
    padding:28px 20px 24px!important;
    border-radius:24px!important;
    margin:0 8px!important;
  }
  .nafas-glass-card .app-name{font-size:2.2rem!important}
  .nafas-glass-card .breath-hero-circle{width:110px!important;height:110px!important}
  .nafas-glass-card .cta-primary.cta-hero-main{max-width:200px!important}
}
@media(min-width:768px){
  .nafas-glass-card{
    max-width:460px!important;
    padding:48px 40px 36px!important;
  }
  .nafas-glass-card .app-name{font-size:3.2rem!important}
  .nafas-glass-card .breath-hero-circle{width:150px!important;height:150px!important}
}


/* ═══════════════════════════════════════
   V7 HERO ORB — LARGE breathing sphere at TOP
   ═══════════════════════════════════════ */
.breath-hero-top {
  margin-bottom: 16px !important;
  margin-top: 8px !important;
}
.breath-orb-large {
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 40% 40%,
    rgba(78,205,196,0.45),
    rgba(78,205,196,0.2) 45%,
    rgba(78,205,196,0.08) 70%,
    transparent) !important;
  border: 2px solid rgba(78,205,196,0.3) !important;
  box-shadow: 
    0 0 60px rgba(78,205,196,0.25),
    0 0 120px rgba(78,205,196,0.12),
    inset 0 0 50px rgba(78,205,196,0.1) !important;
  animation: v7-orb-breathe 6s ease-in-out infinite !important;
  position: relative;
}
.breath-orb-large::before {
  content: '';
  position: absolute; inset: -15px;
  border-radius: 50%;
  border: 1px solid rgba(78,205,196,0.1);
  animation: v7-orb-ring 6s ease-in-out infinite;
}
.breath-orb-large::after {
  content: '';
  position: absolute; inset: -30px;
  border-radius: 50%;
  border: 1px solid rgba(78,205,196,0.06);
  animation: v7-orb-ring 6s ease-in-out infinite 1s;
}
@keyframes v7-orb-breathe {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 0 60px rgba(78,205,196,0.2), inset 0 0 40px rgba(78,205,196,0.08);
  }
  30% { 
    transform: scale(1.1); 
    box-shadow: 0 0 100px rgba(78,205,196,0.35), inset 0 0 60px rgba(78,205,196,0.15);
  }
  50% { transform: scale(1.1); }
  80% { 
    transform: scale(1); 
  }
}
@keyframes v7-orb-ring {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  30% { transform: scale(1.15); opacity: 0.8; }
  50% { transform: scale(1.15); }
  80% { transform: scale(1); opacity: 0.5; }
}

/* Mobile: slightly smaller orb */
@media (max-width: 480px) {
  .breath-orb-large {
    width: 170px !important;
    height: 170px !important;
  }
}