/**
 * Rezder — Cinematic Glassmorphic Design System v2
 * 
 * Applies premium glass effects in BOTH light and dark mode.
 * Overrides existing Rezder classes with enhanced glass styling.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   AMBIENT BACKGROUND (always active)
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: -10%;
  left: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(83, 74, 183, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: rz-orbA 20s infinite alternate ease-in-out;
}

body::after {
  content: '';
  position: fixed;
  bottom: -10%;
  right: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: rz-orbB 25s infinite alternate ease-in-out;
}

body.dark-mode::before {
  background: radial-gradient(circle, rgba(83, 74, 183, 0.18) 0%, transparent 70%);
}

body.dark-mode::after {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%);
}

@keyframes rz-orbA {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, 40px) scale(1.15); }
}

@keyframes rz-orbB {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-40px, -60px) scale(1.1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENHANCED GLASS TOKENS (override rezder-design-system.css)
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
body:not(.dark-mode) {
  --rz-glass-bg: rgba(255, 255, 255, 0.72);
  --rz-glass-border: rgba(255, 255, 255, 0.5);
  --rz-glass-inner: rgba(255, 255, 255, 0.8);
  --rz-glass-blur: blur(24px) saturate(180%);
  --rz-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --rz-glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
  --rz-glass-top-edge: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  --rz-glass-hover-bg: rgba(255, 255, 255, 0.85);
  --rz-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode {
  --rz-glass-bg: rgba(15, 14, 28, 0.78);
  --rz-glass-border: rgba(83, 74, 183, 0.22);
  --rz-glass-inner: rgba(255, 255, 255, 0.05);
  --rz-glass-blur: blur(40px) saturate(190%);
  --rz-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
  --rz-glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
  --rz-glass-top-edge: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  --rz-glass-hover-bg: rgba(25, 24, 42, 0.85);
  --rz-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOPBAR — Heavy glass with inner-glow top edge
   ═══════════════════════════════════════════════════════════════════════════ */

.ev-topbar,
.navbar,
.topbar {
  background: var(--rz-glass-bg) !important;
  backdrop-filter: var(--rz-glass-blur) !important;
  -webkit-backdrop-filter: var(--rz-glass-blur) !important;
  border-bottom: 1px solid var(--rz-glass-border) !important;
  position: relative;
  z-index: 100;
}

.ev-topbar::before,
.navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rz-glass-top-edge);
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR — Glass panel with right glow edge
   ═══════════════════════════════════════════════════════════════════════════ */

.ev-sidebar,
.sidebar,
.side-panel {
  background: var(--rz-glass-bg) !important;
  backdrop-filter: var(--rz-glass-blur) !important;
  -webkit-backdrop-filter: var(--rz-glass-blur) !important;
  border-right: 1px solid var(--rz-glass-border) !important;
  position: relative;
}

.ev-sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(83, 74, 183, 0.3), transparent);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAT CARDS — Glass with hover lift
   ═══════════════════════════════════════════════════════════════════════════ */

.stat-card,
.dash-stat,
.rz-stat-card {
  background: var(--rz-glass-bg) !important;
  backdrop-filter: var(--rz-glass-blur) !important;
  -webkit-backdrop-filter: var(--rz-glass-blur) !important;
  border: 1px solid var(--rz-glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--rz-glass-shadow) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--rz-ease) !important;
}

.stat-card::before,
.dash-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rz-glass-top-edge);
  pointer-events: none;
}

.stat-card:hover,
.dash-stat:hover {
  transform: translateY(-4px) scale(1.02) !important;
  background: var(--rz-glass-hover-bg) !important;
  box-shadow: var(--rz-glass-shadow-hover) !important;
  border-color: rgba(83, 74, 183, 0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESUME CARDS — Glass with double-ring active state
   ═══════════════════════════════════════════════════════════════════════════ */

.resume-card,
.resume-card-new,
.rz-resume-card {
  background: var(--rz-glass-bg) !important;
  backdrop-filter: var(--rz-glass-blur) !important;
  -webkit-backdrop-filter: var(--rz-glass-blur) !important;
  border: 1px solid var(--rz-glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--rz-glass-shadow) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--rz-ease) !important;
}

.resume-card::before,
.resume-card-new::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rz-glass-top-edge);
  pointer-events: none;
}

.resume-card:hover,
.resume-card-new:hover {
  transform: translateY(-4px) !important;
  background: var(--rz-glass-hover-bg) !important;
  box-shadow: var(--rz-glass-shadow-hover) !important;
  border-color: rgba(83, 74, 183, 0.4) !important;
}

.resume-card.active,
.resume-card-new.active {
  border-color: rgba(83, 74, 183, 0.5) !important;
  box-shadow: 
    var(--rz-glass-shadow-hover),
    0 0 0 1px rgba(83, 74, 183, 0.3),
    0 0 20px rgba(83, 74, 183, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMPLATE CARDS — Hover lift + double-ring
   ═══════════════════════════════════════════════════════════════════════════ */

.template-card,
.rz-template-card {
  background: var(--rz-glass-bg) !important;
  backdrop-filter: var(--rz-glass-blur) !important;
  -webkit-backdrop-filter: var(--rz-glass-blur) !important;
  border: 1px solid var(--rz-glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--rz-glass-shadow) !important;
  transition: all 0.3s var(--rz-ease) !important;
}

.template-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  background: var(--rz-glass-hover-bg) !important;
  box-shadow: var(--rz-glass-shadow-hover) !important;
  border-color: rgba(83, 74, 183, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE CARDS (landing page)
   ═══════════════════════════════════════════════════════════════════════════ */

.feature-card,
.rz-feature-card {
  background: var(--rz-glass-bg) !important;
  backdrop-filter: var(--rz-glass-blur) !important;
  -webkit-backdrop-filter: var(--rz-glass-blur) !important;
  border: 1px solid var(--rz-glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--rz-glass-shadow) !important;
  transition: all 0.3s var(--rz-ease) !important;
}

.feature-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  background: var(--rz-glass-hover-bg) !important;
  box-shadow: var(--rz-glass-shadow-hover) !important;
  border-color: rgba(83, 74, 183, 0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS — Primary with violet gradient + lift
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-primary,
.rz-btn-primary,
.primary-btn {
  background: linear-gradient(135deg, #534AB7, #3d3690) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(83, 74, 183, 0.35) !important;
  transition: all 0.2s var(--rz-ease) !important;
  position: relative;
  overflow: hidden;
}

.btn-primary::after,
.rz-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.btn-primary:hover::after,
.rz-btn-primary:hover::after {
  opacity: 1;
}

.btn-primary:hover,
.rz-btn-primary:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 24px rgba(83, 74, 183, 0.5) !important;
  background: linear-gradient(135deg, #7F77DD, #534AB7) !important;
}

.btn-primary:active,
.rz-btn-primary:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Ghost buttons */
.btn-ghost,
.rz-btn-ghost {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  border-radius: 10px !important;
  transition: all 0.2s var(--rz-ease) !important;
}

body.dark-mode .btn-ghost,
body.dark-mode .rz-btn-ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(83, 74, 183, 0.2) !important;
}

.btn-ghost:hover,
.rz-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(83, 74, 183, 0.35) !important;
}

body.dark-mode .btn-ghost:hover,
body.dark-mode .rz-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(127, 119, 221, 0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INPUTS — Glass with violet focus ring
   ═══════════════════════════════════════════════════════════════════════════ */

.form-input,
.form-textarea,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: var(--rz-glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--rz-glass-border) !important;
  border-radius: 10px !important;
  transition: all 0.2s var(--rz-ease) !important;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: #534AB7 !important;
  box-shadow: 
    0 0 0 3px rgba(83, 74, 183, 0.2),
    inset 0 1px 0 var(--rz-glass-inner) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS — Heavy glass with reveal animation
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-overlay,
.ev-modal-overlay,
.rz-modal-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px) !important;
}

body.dark-mode .modal-overlay,
body.dark-mode .ev-modal-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
}

.modal-box,
.ev-modal-box,
.rz-modal-box {
  background: var(--rz-glass-bg) !important;
  backdrop-filter: var(--rz-glass-blur) !important;
  -webkit-backdrop-filter: var(--rz-glass-blur) !important;
  border: 1px solid var(--rz-glass-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3) !important;
  animation: rz-modalReveal 0.4s var(--rz-ease) forwards;
  position: relative;
  overflow: hidden;
}

.modal-box::before,
.ev-modal-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rz-glass-top-edge);
  pointer-events: none;
}

@keyframes rz-modalReveal {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOASTS — Semantic glass (green/red/amber tinted)
   ═══════════════════════════════════════════════════════════════════════════ */

.rz-toast,
.toast {
  background: var(--rz-glass-bg) !important;
  backdrop-filter: var(--rz-glass-blur) !important;
  -webkit-backdrop-filter: var(--rz-glass-blur) !important;
  border: 1px solid var(--rz-glass-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--rz-glass-shadow) !important;
}

.rz-toast.show,
.toast.show {
  animation: rz-modalReveal 0.3s var(--rz-ease) forwards;
}

.rz-toast.success,
.toast.success {
  border-color: rgba(34, 197, 94, 0.35) !important;
  box-shadow: 
    var(--rz-glass-shadow),
    inset 0 1px 0 rgba(34, 197, 94, 0.1) !important;
}

.rz-toast.error,
.toast.error {
  border-color: rgba(239, 68, 68, 0.35) !important;
  box-shadow: 
    var(--rz-glass-shadow),
    inset 0 1px 0 rgba(239, 68, 68, 0.1) !important;
}

.rz-toast.warning,
.toast.warning {
  border-color: rgba(245, 158, 11, 0.35) !important;
  box-shadow: 
    var(--rz-glass-shadow),
    inset 0 1px 0 rgba(245, 158, 11, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREVIEW AREA — Deep space canvas with violet ambient
   ═══════════════════════════════════════════════════════════════════════════ */

.ev-preview-area,
.preview-area,
.canvas-area {
  background: var(--rz-glass-bg) !important;
  backdrop-filter: var(--rz-glass-blur) !important;
  -webkit-backdrop-filter: var(--rz-glass-blur) !important;
  border: 1px solid var(--rz-glass-border) !important;
  position: relative;
}

body.dark-mode .ev-preview-area {
  background: radial-gradient(ellipse at center, rgba(83, 74, 183, 0.08) 0%, rgba(15, 14, 28, 0.85) 70%) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREVIEW PAGE — Multi-shadow floating paper
   ═══════════════════════════════════════════════════════════════════════════ */

.ev-preview-page,
.preview-page,
.resume-page {
  background: #ffffff !important;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  border-radius: 4px !important;
  transition: all 0.4s var(--rz-ease) !important;
}

body.dark-mode .ev-preview-page,
body.dark-mode .preview-page {
  background: #ffffff !important;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.15),
    0 24px 48px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 0 60px rgba(83, 74, 183, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION HOVER — Violet outline ring
   ═══════════════════════════════════════════════════════════════════════════ */

.tr-section:hover,
.tr-experience:hover,
.tr-education:hover,
.tr-skills:hover,
.tr-projects:hover,
.tr-summary:hover {
  outline: 2px solid rgba(83, 74, 183, 0.3) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

body.dark-mode .tr-section:hover,
body.dark-mode .tr-experience:hover,
body.dark-mode .tr-education:hover,
body.dark-mode .tr-skills:hover {
  outline-color: rgba(127, 119, 221, 0.4) !important;
  box-shadow: 0 0 20px rgba(83, 74, 183, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLBAR / TABS — Pill-shaped with violet active
   ═══════════════════════════════════════════════════════════════════════════ */

.ev-toolbar,
.toolbar,
.tab-group {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 999px !important;
  padding: 4px !important;
}

body.dark-mode .ev-toolbar,
body.dark-mode .toolbar {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(83, 74, 183, 0.2) !important;
}

.ev-tool-btn.active,
.tab-btn.active {
  background: linear-gradient(135deg, #534AB7, #3d3690) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(83, 74, 183, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING TOOLBAR — Collapsed glass pill
   ═══════════════════════════════════════════════════════════════════════════ */

.ev-floating-toolbar,
.floating-toolbar,
.rz-float-bar {
  background: var(--rz-glass-bg) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid var(--rz-glass-border) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
  padding: 8px 16px !important;
}

body.dark-mode .ev-floating-toolbar {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI INLINE POPUP — Heavy glass card
   ═══════════════════════════════════════════════════════════════════════════ */

.ai-inline-popup,
.rz-ai-popup {
  background: var(--rz-glass-bg) !important;
  backdrop-filter: var(--rz-glass-blur) !important;
  -webkit-backdrop-filter: var(--rz-glass-blur) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), 0 0 20px rgba(139, 92, 246, 0.1) !important;
  animation: rz-modalReveal 0.3s var(--rz-ease) forwards;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT MESSAGES — AI/user bubble differentiation
   ═══════════════════════════════════════════════════════════════════════════ */

.ai-msg,
.chat-ai-msg,
.rz-ai-msg {
  background: var(--rz-glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--rz-glass-border) !important;
  border-radius: 16px 16px 16px 4px !important;
  box-shadow: var(--rz-glass-shadow) !important;
}

.user-msg,
.chat-user-msg,
.rz-user-msg {
  background: linear-gradient(135deg, rgba(83, 74, 183, 0.15), rgba(83, 74, 183, 0.08)) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(83, 74, 183, 0.25) !important;
  border-radius: 16px 16px 4px 16px !important;
}

body.dark-mode .user-msg,
body.dark-mode .chat-user-msg {
  background: linear-gradient(135deg, rgba(83, 74, 183, 0.25), rgba(83, 74, 183, 0.12)) !important;
  border-color: rgba(127, 119, 221, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HISTORY ITEMS — Slide-right hover
   ═══════════════════════════════════════════════════════════════════════════ */

.history-item,
.rz-history-item {
  transition: all 0.2s var(--rz-ease) !important;
  border-radius: 10px !important;
}

.history-item:hover,
.rz-history-item:hover {
  transform: translateX(4px) !important;
  background: rgba(83, 74, 183, 0.08) !important;
}

body.dark-mode .history-item:hover {
  background: rgba(83, 74, 183, 0.14) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS / ATS BARS — Gradient fill with glow
   ═══════════════════════════════════════════════════════════════════════════ */

.progress-bar,
.ats-bar,
.rz-progress {
  background: rgba(148, 163, 184, 0.15) !important;
  border-radius: 999px !important;
  overflow: hidden;
  height: 6px !important;
}

.progress-fill,
.ats-fill,
.rz-progress-fill {
  background: linear-gradient(90deg, #534AB7, #8B5CF6) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.4) !important;
  transition: width 0.6s var(--rz-ease) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL CONTENT — Staggered entrance
   ═══════════════════════════════════════════════════════════════════════════ */

.panel-content > *,
.rz-panel > * {
  animation: rz-contentIn 0.5s var(--rz-ease) backwards;
}

.panel-content > *:nth-child(1),
.rz-panel > *:nth-child(1) { animation-delay: 0.05s; }
.panel-content > *:nth-child(2),
.rz-panel > *:nth-child(2) { animation-delay: 0.1s; }
.panel-content > *:nth-child(3),
.rz-panel > *:nth-child(3) { animation-delay: 0.15s; }
.panel-content > *:nth-child(4),
.rz-panel > *:nth-child(4) { animation-delay: 0.2s; }
.panel-content > *:nth-child(5),
.rz-panel > *:nth-child(5) { animation-delay: 0.25s; }
.panel-content > *:nth-child(6),
.rz-panel > *:nth-child(6) { animation-delay: 0.3s; }

@keyframes rz-contentIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ICON BUTTONS — Glass fill
   ═══════════════════════════════════════════════════════════════════════════ */

.ev-icon-btn,
.rz-icon-btn,
.icon-btn {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 10px !important;
  transition: all 0.2s var(--rz-ease) !important;
}

body.dark-mode .ev-icon-btn,
body.dark-mode .rz-icon-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(83, 74, 183, 0.18) !important;
}

.ev-icon-btn:hover,
.rz-icon-btn:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

body.dark-mode .ev-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR — Slim glass
   ═══════════════════════════════════════════════════════════════════════════ */

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

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

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.35);
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING PAGE SPECIFIC
   ═══════════════════════════════════════════════════════════════════════════ */

body.dark-mode .navbar {
  background: rgba(7, 7, 14, 0.78) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  border-bottom-color: rgba(83, 74, 183, 0.2) !important;
}

body.dark-mode .navbar.scrolled {
  background: rgba(7, 7, 14, 0.92) !important;
  box-shadow: 0 1px 32px rgba(0, 0, 0, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DROPDOWNS / SELECTS
   ═══════════════════════════════════════════════════════════════════════════ */

.ev-select,
.rz-select,
select {
  background: var(--rz-glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--rz-glass-border) !important;
  border-radius: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOGGLE BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.ev-toggle-btn,
.rz-toggle {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 999px !important;
  transition: all 0.2s var(--rz-ease) !important;
}

body.dark-mode .ev-toggle-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(83, 74, 183, 0.18) !important;
}

.ev-toggle-btn.active {
  background: linear-gradient(135deg, #534AB7, #3d3690) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(83, 74, 183, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING AI ASSISTANT CHAT OVERRIDES (Frosted glass, glow backgrounds, centering collapsed robot)
   ═══════════════════════════════════════════════════════════════════════════ */



/* ── MERGED FROM rezder-chat-expansion-patch.css ── */
/* ── 0. DESIGN TOKENS ────────────────────────────────────────────────────── */
:root {
  --rz-topbar-glass-bg:  rgba(255, 255, 255, 0.08);
  --rz-topbar-glass-border: rgba(255, 255, 255, 0.14);
  --rz-topbar-glass-blur: blur(28px) saturate(200%);
}

body.dark-mode {
  --rz-topbar-glass-bg: rgba(10, 9, 22, 0.72);
  --rz-topbar-glass-border: rgba(83, 74, 183, 0.22);
}


/* ── 2. AI CHAT GLASS — IDENTICAL TO TOP NAV BAR ────────────────────────── */

#evSidebar > div.bg-glass-fill {
  background:  var(--rz-topbar-glass-bg) !important;
  backdrop-filter: var(--rz-topbar-glass-blur) !important;
  -webkit-backdrop-filter: var(--rz-topbar-glass-blur) !important;
  border: 1px solid var(--rz-topbar-glass-border) !important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.07),
    0 24px 64px rgba(0,0,0,0.35) !important;
}

/* ── 2a. Chat messages readability ── */
#aiChatMessages {
  scroll-behavior: smooth;
}
#aiChatMessages::-webkit-scrollbar { width: 4px; }
#aiChatMessages::-webkit-scrollbar-track { background: transparent; }
#aiChatMessages::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); border-radius: 999px; }
.ai-chat-msg {
  padding: 10px 14px;
  font-size: 13px !important;
  line-height: 1.6 !important;
  animation: msg-in 0.3s ease-out;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-chat-ai {
  color: rgba(255,255,255,0.88) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px 12px 12px 2px !important;
}
.ai-chat-user {
  color: rgba(255,255,255,0.92) !important;
  background: linear-gradient(135deg,
    rgba(83,74,183,0.35),
    rgba(139,92,246,0.25)) !important;
  border: 1px solid rgba(139,92,246,0.25) !important;
  border-radius: 12px 12px 2px 12px !important;
}

body:not(.dark-mode) .ai-chat-ai {
  color: #1e1b3a !important;
  background: rgba(83,74,183,0.06) !important;
  border-color: rgba(83,74,183,0.15) !important;
}
body:not(.dark-mode) .ai-chat-user {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(83,74,183,0.85), rgba(108,92,231,0.85)) !important;
  border-color: transparent !important;
}

/* ── 2b. Chat composer readability ── */
#aiComposer {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 24px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#aiComposer:focus-within {
  border-color: rgba(139,92,246,0.6) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.12), 0 0 24px rgba(139,92,246,0.15) !important;
}
#aiChatInput {
  font-size: 13px !important;
  line-height: 1.5 !important;
}
body:not(.dark-mode) #aiComposer {
  background: rgba(83,74,183,0.05) !important;
  border-color: rgba(83,74,183,0.2) !important;
}
body:not(.dark-mode) #aiChatInput {
  color: #1e1b3a !important;
}
body:not(.dark-mode) #aiChatInput::placeholder {
  color: #8b83c8 !important;
}

/* ── 2c. Quick action chips ── */
.ai-quick-btn {
  font-size: 11px !important;
  padding: 5px 12px !important;
  border-radius: 99px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.65) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
}
.ai-quick-btn:hover {
  border-color: rgba(139,92,246,0.5) !important;
  color: #c5c0ff !important;
  background: rgba(139,92,246,0.12) !important;
  transform: translateY(-1px) !important;
}
body:not(.dark-mode) .ai-quick-btn {
  border-color: rgba(83,74,183,0.25) !important;
  color: #534ab7 !important;
}
body:not(.dark-mode) .ai-quick-btn:hover {
  background: rgba(83,74,183,0.08) !important;
}

/* ── 2d. Sidebar header / title readability ── */
#sidebarTitle, #sidebarSubtitle {
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
body:not(.dark-mode) #sidebarTitle {
  color: #1e1b3a !important;
}
body:not(.dark-mode) #sidebarSubtitle {
  color: #534ab7 !important;
  opacity: 0.85;
}


/* ── 5. BOTTOM DOCK FORMAT BUTTONS — WORKING VISUAL STATES ──────────────── */
#bottomDock button {
  position: relative;
  transition: all 0.15s ease !important;
}

#formatBold.active,
#formatItalic.active,
#formatList.active,
#formatAlignLeft.active,
#formatAlignCenter.active {
  background: rgba(197,192,255,0.18) !important;
  color: #c5c0ff !important;
  box-shadow: inset 0 0 0 1px rgba(197,192,255,0.3) !important;
}

#bottomDock button:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #e5e2e1 !important;
  transform: translateY(-1px) !important;
}

#bottomDock button::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(15,14,28,0.95);
  color: #e5e2e1;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  border: 1px solid rgba(255,255,255,0.08);
}
#bottomDock button:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

body:not(.dark-mode) #bottomDock > div {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(24px) !important;
  border-color: rgba(83,74,183,0.15) !important;
}
body:not(.dark-mode) #bottomDock button:not(#aiRephraseBtn):not(#manualSaveBtn) {
  color: #534ab7 !important;
}
body:not(.dark-mode) #bottomDock button:not(#aiRephraseBtn):not(#manualSaveBtn):hover {
  background: rgba(83,74,183,0.08) !important;
  color: #3f35a3 !important;
}
body:not(.dark-mode) #formatBold.active,
body:not(.dark-mode) #formatItalic.active,
body:not(.dark-mode) #formatList.active,
body:not(.dark-mode) #formatAlignLeft.active,
body:not(.dark-mode) #formatAlignCenter.active {
  background: rgba(83,74,183,0.12) !important;
  color: #3f35a3 !important;
}


/* ── 6. SIDEBAR CONTENT PANELS — ALWAYS READABLE ────────────────────────── */
#sidebarContent .ai-result-card,
#sidebarContent .ev-ai-btn,
#sidebarContent > div {
  color: var(--rz-text, #e5e2e1);
}
body:not(.dark-mode) #sidebarContent .ai-result-card {
  background: rgba(255,255,255,0.75) !important;
  color: #1e1b3a !important;
  border-color: rgba(83,74,183,0.18) !important;
}
body:not(.dark-mode) #sidebarContent .ai-badge-spell  { color: #b91c1c !important; }
body:not(.dark-mode) #sidebarContent .ai-badge-grammar { color: #b45309 !important; }
body:not(.dark-mode) #sidebarContent .ai-badge-suggest { color: #1d4ed8 !important; }


/* ── 7. GENERAL GLASS PANEL READABILITY ─────────────────────────────────── */




/* ── 9. AI CHAT PANEL INNER LAYOUT IMPROVEMENTS ─────────────────────────── */
.ai-chat-root {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  gap: 0 !important;
}

#aiChatMessages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 0 !important;
}

.typing-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  display: inline-block !important;
}

.ai-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c5c0ff, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(139,92,246,0.35);
}

/* ── AI Resume Builder Form Readability & Styling ── */
#ai-resume-builder-form {
  margin-top: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#ai-resume-builder-form div {
  padding: 12px !important;
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  transition: all 0.2s ease !important;
}

/* Light/Dark mode backgrounds & borders for the form section cards */
body.dark-mode #ai-resume-builder-form div {
  background: rgba(30, 27, 75, 0.4) !important; /* Translucent indigo */
  border-color: rgba(139, 92, 246, 0.25) !important;
}
body:not(.dark-mode) #ai-resume-builder-form div {
  background: rgba(243, 244, 246, 0.8) !important;
  border-color: rgba(209, 213, 219, 0.6) !important;
}

/* Specific section card styles */
/* Personal Details card */
body.dark-mode #ai-resume-builder-form div[style*="rgba(245,158,11"] {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
/* Experience card */
body.dark-mode #ai-resume-builder-form div[style*="rgba(99,102,241"] {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}
/* Education card */
body.dark-mode #ai-resume-builder-form div[style*="rgba(16,185,129"] {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}
/* Projects card */
body.dark-mode #ai-resume-builder-form div[style*="rgba(236,72,153"] {
  background: rgba(236, 72, 153, 0.08) !important;
  border-color: rgba(236, 72, 153, 0.3) !important;
}
/* Certifications card */
body.dark-mode #ai-resume-builder-form div[style*="rgba(59,130,246"] {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

/* Text visibility inside cards */
#ai-resume-builder-form div div {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

#ai-resume-builder-form .section-title {
  font-weight: 600 !important;
  font-size: 12px !important;
  margin-bottom: 6px !important;
}

body.dark-mode #ai-resume-builder-form .section-title {
  color: #c5c0ff !important;
}
body:not(.dark-mode) #ai-resume-builder-form .section-title {
  color: #4f46e5 !important;
}

/* Card description texts */
#ai-resume-builder-form .section-desc {
  font-size: 11px !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}
body.dark-mode #ai-resume-builder-form .section-desc {
  color: #94a3b8 !important; /* slate-400 */
}
body:not(.dark-mode) #ai-resume-builder-form .section-desc {
  color: #64748b !important; /* slate-500 */
}

/* Intro and outer text visibility */
body.dark-mode .builder-form-intro,
body.dark-mode #ai-resume-builder-form + p,
body.dark-mode #ai-resume-builder-form - div,
body.dark-mode .ai-chat-ai div[style*="color:#374151"] {
  color: #e2e8f0 !important; /* slate-200 instead of dark gray */
}

/* INPUT FIELDS - HIGHLY CONTRASTED & READABLE */
#ai-resume-builder-form input[type="text"],
#ai-resume-builder-form input[type="email"],
#ai-resume-builder-form input[type="tel"] {
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-family: 'DM Sans', sans-serif !important;
  margin-bottom: 6px !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

/* Clean contrast: white background with dark slate text in light mode, and dark slate input in dark mode */
body.dark-mode #ai-resume-builder-form input[type="text"],
body.dark-mode #ai-resume-builder-form input[type="email"],
body.dark-mode #ai-resume-builder-form input[type="tel"] {
  background: rgba(15, 23, 42, 0.8) !important; /* slate-900 */
  border: 1.5px solid rgba(139, 92, 246, 0.4) !important;
  color: #f8fafc !important; /* white/slate-50 */
}

body.dark-mode #ai-resume-builder-form input::placeholder {
  color: #64748b !important; /* slate-500 */
}

body:not(.dark-mode) #ai-resume-builder-form input[type="text"],
body:not(.dark-mode) #ai-resume-builder-form input[type="email"],
body:not(.dark-mode) #ai-resume-builder-form input[type="tel"] {
  background: #ffffff !important;
  border: 1.5px solid #d1d5db !important;
  color: #0f172a !important; /* slate-900 */
}

body:not(.dark-mode) #ai-resume-builder-form input::placeholder {
  color: #9ca3af !important;
}

/* Focus states */
#ai-resume-builder-form input:focus {
  border-color: #8b5cf6 !important; /* violet-500 */
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
}

/* Build button styles */
#ai-resume-builder-form .ai-build-resume-btn {
  margin-top: 10px !important;
  padding: 12px 24px !important;
  background: #534ab7 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(83, 74, 183, 0.3) !important;
}

#ai-resume-builder-form .ai-build-resume-btn:hover {
  background: #4338ca !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(83, 74, 183, 0.4) !important;
}

#ai-resume-builder-form .ai-build-resume-btn:active {
  transform: translateY(0) !important;
}

/* ── AI CHAT BUBBLE & EXPANDED PANEL GLASS OVERRIDES ── */

/* Base chat container styling (Frosted Glass Blur background) */
#dashboardAIChat {
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(30px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 16px 48px rgba(15, 14, 28, 0.12) !important;
  border-radius: 24px !important;
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
              height 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
              background-color 0.5s ease, 
              box-shadow 0.5s ease !important;
}

body.dark-mode #dashboardAIChat {
  background: rgba(10, 9, 22, 0.28) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45) !important;
}

/* Ensure border radius is consistently inherited/synchronized */
#dashboardAIChat,
#dashboardAIChat .border-glow-wrapper {
  /* Let it be overridden by state selectors */
}

#dashboardAIChat .border-glow-wrapper,
body #dashboardAIChat[data-open="false"] > div:first-child.border-glow-wrapper {
  border-radius: inherit !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: opacity 0.5s ease !important;
  padding: 2px !important;
  width: auto !important;
  height: auto !important;
}

#dashboardAIChat::before {
  display: none !important;
  content: none !important;
}
#dashboardAIChat[data-open="true"]::after {
  display: none !important;
  content: none !important;
}

@keyframes morph {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* ── 1. EXPANDED STATE (data-open="true") ── */
body #dashboardAIChat[data-open="true"] {
  border-radius: 24px !important;
}

/* ── 2. COLLAPSED STATE (data-open="false") ── */
#chat-squiggly-svg {
  display: none !important;
}
#dashboardAIChat[data-open="false"] #chat-squiggly-svg {
  display: block !important;
}
.glass-fill-path {
  fill: rgba(255, 255, 255, 0.45) !important;
  transition: fill 0.5s ease !important;
}
body.dark-mode .glass-fill-path {
  fill: rgba(15, 14, 28, 0.72) !important;
}
.squiggly-stroke-path {
  stroke: url(#border-glow-grad) !important;
  filter: drop-shadow(0 0 3px rgba(167, 139, 250, 0.45)) !important;
  transition: filter 0.5s ease !important;
}
body.dark-mode .squiggly-stroke-path {
  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.65)) !important;
}

body #dashboardAIChat[data-open="false"] {
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  overflow: visible !important;
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
              height 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
              background-color 0.5s ease, 
              box-shadow 0.5s ease,
              transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              filter 0.4s ease !important;
}

body.dark-mode #dashboardAIChat[data-open="false"] {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
}

body #dashboardAIChat[data-open="false"]::after {
  display: none !important;
  content: none !important;
}

body #dashboardAIChat[data-open="false"] .border-glow-wrapper {
  display: none !important;
}

/* Keep the body visible but fade it out smoothly as it collapses */
body #dashboardAIChat #dashboardAIChatBody {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}

body #dashboardAIChat[data-open="false"] #dashboardAIChatBody {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(15px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Fix header positioning and animations */
#dashboardAIChat > div.h-12 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 0 16px !important;
  margin: 0 !important;
  width: 100% !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
  position: relative !important;
  z-index: 10 !important;
  transition: border-bottom-color 0.5s ease !important;
}

body.dark-mode #dashboardAIChat > div.h-12 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body #dashboardAIChat[data-open="false"] > div.h-12,
body #dashboardAIChat[data-open="false"] > div.h-12.flex-shrink-0 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: absolute !important;
  inset: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border-bottom-color: transparent !important;
  border-bottom: none !important;
  border-bottom-width: 0px !important;
  z-index: 10 !important;
}

/* Robot icon animation */
#dashboardAIChat > div.h-12 > .material-symbols-outlined {
  position: absolute !important;
  top: 50% !important;
  left: 16px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 20 !important;
  color: #534ab7 !important;
  transition: left 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              font-size 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              color 0.5s ease !important;
}

body.dark-mode #dashboardAIChat > div.h-12 > .material-symbols-outlined {
  color: #a78bfa !important;
}

body #dashboardAIChat[data-open="false"] > div.h-12 > .material-symbols-outlined {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  animation: face-color-cycle 8s linear infinite !important;
}

body.dark-mode #dashboardAIChat[data-open="false"] > div.h-12 > .material-symbols-outlined {
  animation: face-color-cycle-dark 8s linear infinite !important;
}

/* Header Text / Title Animation */
#dashboardAIChatTitle {
  margin-left: 28px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.4s ease, margin-left 0.4s ease !important;
}

body #dashboardAIChat[data-open="false"] #dashboardAIChatTitle {
  opacity: 0 !important;
  margin-left: 12px !important;
  pointer-events: none !important;
}

/* Header Actions Animation */
#dashboardAIChatHeaderActions {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.4s ease !important;
}

body #dashboardAIChat[data-open="false"] #dashboardAIChatHeaderActions {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── 8. SOUL MIC BUTTON DARK GLASS OVERRIDES ── */
body #floatingMicBtn,
body.dark-mode #floatingMicBtn {
  background: rgba(15, 14, 28, 0.75) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 1px 1px 0 rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

body #floatingMicBtn:hover,
body.dark-mode #floatingMicBtn:hover {
  background: rgba(20, 18, 38, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.5), inset 1px 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: scale(1.1) translateY(-2px) !important;
}

body #floatingMicBtn:hover .material-symbols-outlined,
body.dark-mode #floatingMicBtn:hover .material-symbols-outlined {
  color: #ef4444 !important;
  transition: color 0.3s ease !important;
}

/* Active voice states (overriding normal and dark mode defaults) */
body #floatingMicBtn[data-state="LISTENING"],
body.dark-mode #floatingMicBtn[data-state="LISTENING"],
body #floatingMicBtn[data-state="LISTENING_FOR_BARGE_IN"],
body.dark-mode #floatingMicBtn[data-state="LISTENING_FOR_BARGE_IN"],
body #floatingMicBtn[data-state="ERROR"],
body.dark-mode #floatingMicBtn[data-state="ERROR"] {
  background: #ef4444 !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.6) !important;
}

body #floatingMicBtn[data-state="THINKING"],
body.dark-mode #floatingMicBtn[data-state="THINKING"] {
  background: #8b5cf6 !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.6) !important;
}

body #floatingMicBtn[data-state="SPEAKING"],
body.dark-mode #floatingMicBtn[data-state="SPEAKING"] {
  background: #10b981 !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. MOBILE WEB & RESPONSIVE OPTIMIZATIONS (iOS & Android)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix onboarding template selection grid layout */
#onboardingTemplateGrid {
  display: block !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  height: auto !important;
  max-height: 480px !important;
  overflow-y: auto !important;
}

#onboardingTemplateGrid .ttn-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  padding: 8px !important;
  justify-content: center !important;
}

@media (min-width: 640px) {
  #onboardingTemplateGrid .ttn-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
}

@media (min-width: 1024px) {
  #onboardingTemplateGrid .ttn-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
  }
}

/* Bottom tab navigation (hidden on desktop, visible on mobile) */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--rz-glass-bg);
  backdrop-filter: var(--rz-glass-blur);
  -webkit-backdrop-filter: var(--rz-glass-blur);
  border-top: 1px solid var(--rz-glass-border);
  z-index: 100;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}

.mobile-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--rz-text-2, #94a3b8);
  font-size: 10px;
  font-weight: 600;
  gap: 2px;
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 8px 12px;
  min-width: 60px;
  min-height: 48px; /* Touch target minimum height */
  cursor: pointer;
  transition: color 0.2s;
}

.mobile-nav-link.active,
.mobile-nav-link:active {
  color: var(--primary, #8b5cf6) !important;
}

.mobile-nav-link .material-symbols-outlined {
  font-size: 22px !important;
  font-variation-settings: 'FILL' 0;
}

.mobile-nav-link.active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
}

/* Mobile slide-out drawer navigation */
.mobile-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 28, 0.6);
  backdrop-filter: blur(8px);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.mobile-drawer-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer {
  position: absolute;
  top: 0;
  right: -280px;
  width: 280px;
  height: 100%;
  background: var(--rz-glass-bg);
  backdrop-filter: var(--rz-glass-blur);
  -webkit-backdrop-filter: var(--rz-glass-blur);
  border-left: 1px solid var(--rz-glass-border);
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-drawer-overlay.active .mobile-drawer {
  right: 0;
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rz-glass-border);
}

.mobile-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  color: var(--rz-text, #e5e2e1);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
  min-height: 44px; /* Touch target minimum height */
  cursor: pointer;
}

.mobile-drawer-item:hover,
.mobile-drawer-item:active {
  background: var(--rz-glass-hover-bg);
  color: var(--primary, #8b5cf6);
}

.mobile-drawer-item .material-symbols-outlined {
  font-size: 18px !important;
}

@media (max-width: 1024px) {
  /* Hide sidebars */
  aside.fixed.left-6,
  aside.fixed.right-4 {
    display: none !important;
  }

  /* Slide-out zoom/action toolbar on mobile/tablets */
  #rightToolbar {
    display: flex !important;
    position: fixed !important;
    right: -48px !important; /* Hide 48px off-screen (leaves 16px of the button margins + handle visible) */
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2000 !important;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 64px !important;
    height: auto !important;
    bottom: auto !important;
  }

  #rightToolbar.mobile-expanded {
    right: 16px !important;
  }

  #rightToolbarHandle {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 60px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    background: rgba(15, 14, 28, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-right: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--rz-text, #e5e2e1) !important;
    cursor: pointer;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
    z-index: 10;
    outline: none;
  }

  body:not(.dark-mode) #rightToolbarHandle {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(83, 74, 183, 0.15) !important;
    color: #534ab7 !important;
  }

  /* Dashboard logo container remains visible, builder logo container gets hidden */
  #cinLogoContainer {
    display: flex !important;
  }
  .cinematic-builder #cinLogoContainer {
    display: none !important;
  }

  /* Position floating AI Chat wrapper above the bottom dock to avoid overlapping */
  #dashboardAIChatContainer {
    bottom: 110px !important;
    right: 12px !important;
  }

  #evSidebar {
    display: none !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2100 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    bottom: 0 !important;
  }

  #evSidebar.mobile-active {
    display: flex !important;
  }

  #evSidebar.mobile-active > div {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
  }

  header.fixed {
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
    scrollbar-width: none !important; /* Hide scrollbar for Firefox */
  }

  header.fixed::-webkit-scrollbar {
    display: none !important; /* Hide scrollbar for Chrome/Safari */
  }

  header.fixed > div,
  header.fixed > nav {
    flex-shrink: 0 !important;
  }

  header.fixed > div:first-child {
    display: none !important;
  }

  main,
  main.pl-\[calc\(16rem\+1\.5rem\)\] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important; /* Spacing for bottom tab bar */
    height: auto !important;
    overflow-y: auto !important;
  }
  
  main.pl-\[18rem\].pr-\[18\.5rem\] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    height: auto !important;
    overflow-y: auto !important;
  }

  /* Show bottom tab navigation */
  .mobile-bottom-nav {
    display: flex;
  }

  /* Simplify Header and prevent overflow/overlapping on mobile */
  #cinLogoContainer {
    left: 16px !important;
    top: 12px !important;
    height: 40px !important;
    padding: 0 16px !important;
  }

  #cinButtonsContainer {
    right: 16px !important;
    top: 12px !important;
    padding: 4px 10px !important;
    gap: 8px !important;
  }
  
  #uploadResumeBtn,
  #linkedinResumeBtn,
  #createResumeBtn {
    font-size: 10px !important;
    padding: 6px 12px !important;
    min-height: 36px;
  }

  /* Fix modals for small viewports */
  .modal-box2,
  #templateModal .modal-box2 {
    max-width: 95vw !important;
    max-height: 90vh !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .template-picker-body {
    padding: 72px 16px 24px !important;
  }
  
  .mclose,
  #templateModal .mclose {
    top: 16px !important;
    right: 16px !important;
    font-size: 24px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Touch targets minimum sizes */
  button, 
  a.btn,
  .btn,
  input[type="button"],
  input[type="submit"] {
    min-height: 44px; /* Ensure 44x44px tap target */
  }

  /* Expand active assistant card (AI chat panel) layout on mobile */
  #rezderAssistantCard.expanded-active {
    top: 5vh !important;
    left: 4vw !important;
    width: 92vw !important;
    height: 90vh !important;
    z-index: 1000 !important;
    border-radius: 24px !important;
  }
}

/* Extra optimization for smaller viewports (phones <= 480px) */
@media (max-width: 480px) {
  #uploadResumeBtn span:not(.material-symbols-outlined),
  #linkedinResumeBtn span:not(.material-symbols-outlined),
  #createResumeBtn span:not(.material-symbols-outlined) {
    display: none !important;
  }
  
  #uploadResumeBtn,
  #linkedinResumeBtn,
  #createResumeBtn {
    padding: 6px !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    justify-content: center !important;
  }
  
  #cinLogoContainer .nb-name {
    display: none !important;
  }
  
  #cinLogoContainer {
    width: 40px !important;
    padding: 0 !important;
  }

  /* Template card sizes in picker for mobile (2 columns) */
  #onboardingTemplateGrid .ttn-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  #templateModal .ttn-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Safe areas on iOS notch screens */
  body {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }


}

#rightToolbarHandle {
  display: none;
}

@media (max-width: 1200px) {
  .cinematic-builder #cinLogoContainer {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR BUTTONS / ARROWS — Light & Dark Mode
   ═══════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  border-radius: 99px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}
body.dark-mode ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}

::-webkit-scrollbar-button:single-button {
  display: block !important;
  background-size: 6px 6px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  height: 10px !important;
  width: 10px !important;
}
::-webkit-scrollbar-button:single-button:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
body.dark-mode ::-webkit-scrollbar-button:single-button {
  background-color: rgba(255, 255, 255, 0.04);
}
body.dark-mode ::-webkit-scrollbar-button:single-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Vertical Up Arrow */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
}
body.dark-mode ::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Vertical Down Arrow */
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
body.dark-mode ::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Horizontal Left Arrow */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
}
body.dark-mode ::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Horizontal Right Arrow */
::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}
body.dark-mode ::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}