@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* Force English numerals and premium Outfit + Cairo typography globally */
*:not(code):not(pre):not(.clc-phone):not(.monospace) {
  font-family: 'Outfit', 'Cairo', sans-serif !important;
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "lnum" 1, "locl" 0 !important;
}

/*
  ╔══════════════════════════════════════════════════════╗
  ║   Ydora — UI/UX Enhancement Layer                   ║
  ║   Premium upgrades on top of the base design system  ║
  ╚══════════════════════════════════════════════════════╝
*/


/* ── LOGO: White-background PNG — use multiply on dark, normal on light ── */
:root,
[data-theme="zid-dark"],
[data-theme="zid-midnight"] {
  /* على الداكن: نعكس الشعار تماماً ليصبح أبيض متوهج ومناسب للخلفية الداكنة */
  --logo-filter: var(--logo-filter);
  --logo-bg: transparent;
}

[data-theme="zid-light"] {
  /* على الفاتح: نعرض الشعار بألوانه الأصلية الداكنة ليتباين مع الخلفية البيضاء */
  --logo-filter: none;
  --logo-bg: transparent;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BRAND BANNER — Wide sidebar header with glow
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.brand-banner {
  width: 100%;
  padding: 22px 16px 14px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: default;
}

/* طبقة الـ glow خلف البنر */
.banner-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--glow), transparent 70%);
  opacity: 0.35;
}

/* Shimmer sweep */
.brand-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  transform: skewX(-12deg);
  animation: bannerShimmer 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes bannerShimmer {
  0% {
    left: -80%;
  }

  40% {
    left: 130%;
  }

  100% {
    left: 130%;
  }
}

/* الشعار */
.banner-logo-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 6px;
}

.banner-logo {
  max-width: 148px;
  height: auto;
  display: block;
  transition: filter 0.4s ease, transform 0.3s ease;
}

.banner-logo:hover {
  transform: scale(1.03);
}

/* السلوجان */
.banner-slogan {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 8px 12px 6px;
}

.slogan-text {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: 1.7;
  color: var(--text2);
  display: block;
}

/* الخط الفاصل */
.banner-divider {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 1px;
  margin-top: 4px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
  opacity: 0.4;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GLOW THEME 1 — PULSE (النبض الهادئ) — افتراضي
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-glow="pulse"] .banner-logo,
.banner-logo {
  animation: glowPulse 4s ease-in-out infinite;
}

[data-glow="pulse"] .banner-slogan,
.banner-slogan {
  animation: sloganPulse 4s ease-in-out infinite;
}

[data-glow="pulse"] .banner-divider,
.banner-divider {
  animation: dividerPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {

  0%,
  100% {
    filter: var(--logo-filter) drop-shadow(0 0 0px transparent);
    opacity: 0.85;
  }

  50% {
    filter: var(--logo-filter) drop-shadow(0 0 16px var(--accent)) drop-shadow(0 0 30px var(--glow));
    opacity: 1;
  }
}

@keyframes sloganPulse {

  0%,
  100% {
    opacity: 0.5;
    text-shadow: none;
  }

  50% {
    opacity: 0.85;
    text-shadow: 0 0 12px var(--accent);
  }
}

@keyframes dividerPulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.8;
    box-shadow: 0 0 8px var(--accent);
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GLOW THEME 2 — ELECTRIC (البرق)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-glow="electric"] .banner-logo {
  animation: glowElectric 2.5s ease-in-out infinite;
}

[data-glow="electric"] .banner-slogan {
  animation: sloganElectric 2.5s ease-in-out infinite;
}

[data-glow="electric"] .banner-divider {
  animation: dividerElectric 2.5s ease-in-out infinite;
}

@keyframes glowElectric {

  0%,
  90%,
  100% {
    filter: var(--logo-filter) drop-shadow(0 0 2px var(--accent));
    opacity: 0.7;
  }

  92% {
    filter: var(--logo-filter) drop-shadow(0 0 30px var(--accent)) drop-shadow(0 0 50px #fff);
    opacity: 1;
  }

  94% {
    filter: var(--logo-filter) drop-shadow(0 0 5px var(--accent));
    opacity: 0.75;
  }

  96% {
    filter: var(--logo-filter) drop-shadow(0 0 28px var(--accent2)) drop-shadow(0 0 45px #fff);
    opacity: 1;
  }
}

@keyframes sloganElectric {

  0%,
  90%,
  100% {
    opacity: 0.45;
    text-shadow: none;
  }

  92%,
  96% {
    opacity: 1;
    text-shadow: 0 0 15px var(--accent), 0 0 25px var(--accent2);
  }
}

@keyframes dividerElectric {

  0%,
  90%,
  100% {
    opacity: 0.2;
  }

  92%,
  96% {
    opacity: 1;
    box-shadow: 0 0 12px var(--accent), 0 0 20px var(--accent2);
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GLOW THEME 3 — GOLDEN (ذهبي)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-glow="golden"] .banner-logo {
  animation: glowGolden 5s ease-in-out infinite;
}

[data-glow="golden"] .banner-slogan {
  animation: sloganGolden 5s ease-in-out infinite;
}

[data-glow="golden"] .banner-divider {
  background: linear-gradient(90deg, transparent, #CDAE75, #f5d48a, transparent);
  animation: dividerGolden 5s ease-in-out infinite;
}

@keyframes glowGolden {

  0%,
  100% {
    filter: var(--logo-filter) sepia(1) saturate(3) hue-rotate(10deg) brightness(1.0) drop-shadow(0 0 2px #CDAE75);
    opacity: 0.85;
  }

  50% {
    filter: var(--logo-filter) sepia(1) saturate(4) hue-rotate(10deg) brightness(1.1) drop-shadow(0 0 20px #CDAE75) drop-shadow(0 0 35px #f5d48a);
    opacity: 1;
  }
}

@keyframes sloganGolden {

  0%,
  100% {
    opacity: 0.5;
    color: #CDAE75;
    text-shadow: none;
  }

  50% {
    opacity: 1;
    color: #f5d48a;
    text-shadow: 0 0 14px #CDAE75;
  }
}

@keyframes dividerGolden {

  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 10px #CDAE75;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GLOW THEME 4 — RAINBOW (قوس قزح)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-glow="rainbow"] .banner-logo {
  animation: glowRainbow 6s linear infinite;
}

[data-glow="rainbow"] .banner-slogan {
  animation: sloganRainbow 6s linear infinite;
}

[data-glow="rainbow"] .banner-divider {
  animation: dividerRainbow 6s linear infinite;
}

[data-glow="rainbow"] .banner-glow {
  animation: bannerBgRainbow 6s linear infinite;
}

@keyframes glowRainbow {
  0% {
    filter: var(--logo-filter) drop-shadow(0 0 14px #f00);
  }

  16% {
    filter: var(--logo-filter) drop-shadow(0 0 14px #ff8800);
  }

  33% {
    filter: var(--logo-filter) drop-shadow(0 0 14px #CDAE75);
  }

  50% {
    filter: var(--logo-filter) drop-shadow(0 0 14px #0f0);
  }

  66% {
    filter: var(--logo-filter) drop-shadow(0 0 14px #00f);
  }

  83% {
    filter: var(--logo-filter) drop-shadow(0 0 14px #f0f);
  }

  100% {
    filter: var(--logo-filter) drop-shadow(0 0 14px #f00);
  }
}

@keyframes sloganRainbow {
  0% {
    color: #f87171;
    text-shadow: 0 0 10px #f00;
  }

  16% {
    color: #fb923c;
    text-shadow: 0 0 10px #f80;
  }

  33% {
    color: #CDAE75;
    text-shadow: 0 0 10px #CDAE75;
  }

  50% {
    color: #4ade80;
    text-shadow: 0 0 10px #0f0;
  }

  66% {
    color: #60a5fa;
    text-shadow: 0 0 10px #00f;
  }

  83% {
    color: #e879f9;
    text-shadow: 0 0 10px #f0f;
  }

  100% {
    color: #f87171;
    text-shadow: 0 0 10px #f00;
  }
}

@keyframes dividerRainbow {
  0% {
    background: linear-gradient(90deg, transparent, #f00, #ff8800, transparent);
    opacity: 0.7;
  }

  33% {
    background: linear-gradient(90deg, transparent, #CDAE75, #0f0, transparent);
    opacity: 0.7;
  }

  66% {
    background: linear-gradient(90deg, transparent, #00f, #f0f, transparent);
    opacity: 0.7;
  }

  100% {
    background: linear-gradient(90deg, transparent, #f00, #ff8800, transparent);
    opacity: 0.7;
  }
}

@keyframes bannerBgRainbow {
  0% {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 0, 0, 0.12), transparent 70%);
  }

  33% {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(205, 174, 117, 0.12), transparent 70%);
  }

  66% {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 0, 255, 0.1), transparent 70%);
  }

  100% {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 0, 0, 0.12), transparent 70%);
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GLOW THEME 5 — NEON (نيون)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-glow="neon"] .banner-logo {
  animation: glowNeon 3s ease-in-out infinite;
}

[data-glow="neon"] .banner-slogan {
  animation: sloganNeon 3s ease-in-out infinite;
}

[data-glow="neon"] .banner-divider {
  background: linear-gradient(90deg, transparent, #00e5ff, #f000ff, transparent);
  animation: dividerNeon 3s ease-in-out infinite;
}

@keyframes glowNeon {

  0%,
  100% {
    filter: var(--logo-filter) drop-shadow(0 0 8px #00e5ff) drop-shadow(0 0 2px #f000ff);
    opacity: 0.85;
  }

  50% {
    filter: var(--logo-filter) drop-shadow(0 0 22px #00e5ff) drop-shadow(0 0 15px #f000ff);
    opacity: 1;
  }
}

@keyframes sloganNeon {

  0%,
  100% {
    color: #00e5ff;
    text-shadow: 0 0 8px #00e5ff;
    opacity: 0.7;
  }

  50% {
    color: #f000ff;
    text-shadow: 0 0 14px #f000ff, 0 0 25px #00e5ff;
    opacity: 1;
  }
}

@keyframes dividerNeon {

  0%,
  100% {
    opacity: 0.5;
    box-shadow: 0 0 6px #00e5ff;
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 12px #f000ff, 0 0 20px #00e5ff;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GLOW THEME 6 — NONE (بلا إضاءة)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-glow="none"] .banner-logo {
  animation: none !important;
  filter: var(--logo-filter);
  opacity: 0.85;
}

[data-glow="none"] .banner-slogan {
  animation: none !important;
  opacity: 0.5;
}

[data-glow="none"] .banner-glow {
  display: none;
}

[data-glow="none"] .banner-divider {
  opacity: 0.2;
  animation: none !important;
}

[data-glow="none"] .brand-banner::after {
  display: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOGO ANIMATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Sidebar logo: glow pulse breathing */
#brandLogo {
  opacity: 0.88;
  transition: opacity 0.3s, filter 0.3s;
  animation: logoGlow 4s ease-in-out infinite;
  position: relative;
}

@keyframes logoGlow {
  0% {
    filter: var(--logo-filter) drop-shadow(0 0 0px transparent);
    opacity: 0.88;
  }

  40% {
    filter: var(--logo-filter) drop-shadow(0 0 14px var(--accent)) drop-shadow(0 0 28px var(--glow));
    opacity: 1;
  }

  60% {
    filter: var(--logo-filter) drop-shadow(0 0 10px var(--accent2));
    opacity: 0.96;
  }

  100% {
    filter: var(--logo-filter) drop-shadow(0 0 0px transparent);
    opacity: 0.88;
  }
}

/* Sidebar logo: shimmer sweep on hover */
#sidebarLogo {
  position: relative;
  overflow: hidden;
  cursor: default;
}

#sidebarLogo::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.18),
      transparent);
  transform: skewX(-15deg);
  animation: logoShimmer 5s ease-in-out infinite;
  pointer-events: none;
}

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

  35% {
    left: 140%;
  }

  100% {
    left: 140%;
  }
}

#brandSlogan {
  font-size: 10px;
  opacity: 0.55;
  padding: 6px 8px 0;
  line-height: 1.6;
  border-top: 1px solid var(--border2);
  margin-top: 6px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOPBAR BRAND (مركز الـ topbar)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.topbar {
  position: relative;
}

.topbar-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  height: 100%;
  top: 0;
}

.topbar-logo {
  height: 30px;
  width: auto;
  filter: var(--logo-filter);
  opacity: 0.7;
  transition: opacity 0.2s;
  animation: topbarLogoPulse 6s ease-in-out infinite;
}

@keyframes topbarLogoPulse {

  0%,
  100% {
    opacity: 0.65;
  }

  50% {
    opacity: 0.9;
  }
}

.topbar-brand-text {
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE WATERMARK (خلفية كل صفحة)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.page-watermark {
  position: fixed;
  bottom: 24px;
  left: calc(50% - var(--sidebar-w) / 2 + 24px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.watermark-img {
  width: 220px;
  height: auto;
  filter: var(--logo-filter);
  opacity: 0.04;
  animation: watermarkFloat 8s ease-in-out infinite;
}

@keyframes watermarkFloat {

  0%,
  100% {
    opacity: 0.04;
    transform: translateY(0px);
  }

  50% {
    opacity: 0.06;
    transform: translateY(-8px);
  }
}

/* تأكد من أن محتوى الصفحة فوق الـ watermark */
.page>*:not(.page-watermark) {
  position: relative;
  z-index: 1;
}


.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  position: relative;
}

.logo-icon::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  z-index: -1;
  opacity: 0.5;
  filter: blur(6px);
}

/* Ydora brand text */
.logo-title {
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-sub {
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--text2) !important;
  opacity: 0.6;
}

/* ── NAV: Active item improvement ── */
.nav-item {
  border-radius: 10px;
  margin-bottom: 2px;
  font-size: 13.5px;
  transition: all 0.18s ease;
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(var(--accent-rgb, 124, 92, 252), 0.15), rgba(var(--accent-rgb, 124, 92, 252), 0.05)) !important;
  color: var(--accent) !important;
}

.nav-item.active::before {
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  box-shadow: 2px 0 12px var(--glow);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--text) !important;
  transform: translateX(-2px);
}

/* ── TOPBAR: Subtle divider + title polish ── */
.topbar {
  height: 54px;
  padding: 0 20px;
  gap: 12px;
}

.topbar-title {
  font-size: 15px;
  font-weight: 700;
}

/* ── STAT CARDS: Elevated glow effect ── */
.stat-card {
  border-radius: 16px;
  padding: 18px 20px;
  transition: all 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
  border: 1px solid var(--border2);
  background: linear-gradient(145deg, var(--surface), rgba(255, 255, 255, 0.01));
}

.stat-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border);
}

.stat-value {
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}

/* ── SECTION CARDS: Consistent polish ── */
.section-card {
  border-radius: 16px;
  border: 1px solid var(--border2);
  overflow: hidden;
  background: var(--surface);
  transition: box-shadow 0.2s;
}

.section-card:focus-within {
  box-shadow: 0 0 0 1px var(--accent);
}

/* ── CONV LIST: Cleaner items ── */
.conv-preview-item {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.12s;
  position: relative;
}

.conv-preview-item:hover {
  background: rgba(255, 255, 255, 0.025) !important;
}

.conv-preview-item.active {
  background: linear-gradient(90deg, rgba(var(--accent-rgb, 124, 92, 252), 0.1), transparent) !important;
}

.conv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ── CHAT BUBBLES: WhatsApp-like refinement ── */
.msg-bubble {
  font-size: 13.5px;
  line-height: 1.65;
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 100%;
}

.msg-wrapper.user .msg-bubble {
  border-bottom-right-radius: 3px;
  box-shadow: 0 2px 12px var(--glow);
}

.msg-wrapper.bot .msg-bubble {
  border-bottom-left-radius: 3px;
}

/* ── BUTTONS: Micro-interactions ── */
.btn {
  border-radius: 9px;
  font-size: 12.5px;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background 0.15s;
  border-radius: inherit;
}

.btn:hover::after {
  background: rgba(255, 255, 255, 0.05);
}

.btn-primary {
  border-radius: 9px;
  letter-spacing: 0.2px;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--glow);
}

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

/* ── SEND BUTTON: Gradient + shine ── */
.send-btn {
  border-radius: 10px;
  letter-spacing: 0.2px;
  position: relative;
  overflow: hidden;
}

.send-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.4s;
}

.send-btn:hover::before {
  left: 150%;
}

/* ── SEARCH INPUT: Focus ring ── */
.search-input {
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.12);
}

/* ── TOAST: Improved visual ── */
.toast {
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 12.5px;
  backdrop-filter: blur(12px);
  background: rgba(var(--surface-rgb, 13, 14, 20), 0.92);
  border-left: 3px solid var(--border);
}

.toast.success {
  border-left-color: var(--green);
}

.toast.error {
  border-left-color: #ef5350;
}

.toast.info {
  border-left-color: var(--accent);
}

/* ── PAGE HEADER: Cleaner ── */
.page-header h1 {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.page-subtitle {
  font-size: 12.5px;
  margin-top: 3px;
}

.page {
  padding: 24px;
}

/* ── WELCOME BANNER: Gradient border ── */
.welcome-banner {
  border-radius: 18px;
  padding: 20px 24px;
  position: relative;
}

.welcome-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), var(--accent2), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.4;
}

/* ── CRM TABLE: Premium rows ── */
#crmTable th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text2);
  font-weight: 700;
  padding: 10px 12px;
}

#crmTable td {
  vertical-align: middle;
}

#crmTable tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

/* CRM Query Filter Select */
#crmQueryFilter {
  transition: border-color 0.2s, box-shadow 0.2s;
}

#crmQueryFilter:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.12);
}

#crmQueryFilter option {
  background: var(--surface);
  color: var(--text);
  padding: 6px;
}

/* ── BADGE: Pulse animation for new ── */
.badge {
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: 20px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* ── STATUS DOT: Bigger glow ── */
.status-dot.connected {
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2), 0 0 12px var(--green);
}

/* ── CONNECTION CARD: Subtle glass ── */
.connection-card {
  margin: 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  backdrop-filter: blur(6px);
}

/* ── BTN-CONNECT: Shimmer effect ── */
.btn-connect {
  border-radius: 10px;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}

.btn-connect::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  animation: shimmer 2.5s infinite;
}

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

  60% {
    left: 130%;
  }

  100% {
    left: 130%;
  }
}

/* ── MODALS: Cleaner ── */
.modal {
  border-radius: 20px;
  border: 1px solid var(--border);
}

/* ── SCROLLBAR: Thinner & subtle ── */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border);
}

/* ── TRANSITIONS: Smooth page switches ── */
.page.active {
  animation: ydoraFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ydoraFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── EMPTY STATES: More expressive ── */
.chat-empty-icon {
  font-size: 48px;
  opacity: 0.5;
}

.chat-empty h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text2);
}

.chat-empty p {
  font-size: 12px;
  color: var(--text3);
}

/* ── INLINE SECTION CARD PADDING ── */
.section-card>*:first-child {
  padding: 16px 20px;
}

/* ── TAKEOVER BUTTON ── */
.takeover-btn {
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 8px;
  letter-spacing: 0.2px;
}

/* ── STATS SECTION CARD: Lead gen panel ── */
#leadGenLog {
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.9;
  border: 1px solid var(--border2);
}

/* ── THEME BUTTONS: Premium round swatches with glow on active state ── */
.theme-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.theme-btn.active {
  transform: scale(1.18) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 16px var(--accent), 0 0 4px #ffffff !important;
}

.theme-btn:hover {
  transform: scale(1.12) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* ── CREATOR BADGE — Bold & Visible ── */
.creator-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 8px;
  gap: 1px;
  border-bottom: 1px solid var(--border2);
  margin-bottom: 6px;
}

.creator-line {
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text2);
  font-weight: 600;
  opacity: 0.6;
}

.creator-name {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: creatorShine 3s linear infinite;
}

@keyframes creatorShine {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* ── INPUT FOCUS GLOBAL ── */
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* ── UPSELL CARD HOVER ── */
.section-card[style*="border-right"] {
  transition: box-shadow 0.2s, transform 0.2s;
}

.section-card[style*="border-right"]:hover {
  transform: translateX(2px);
}

/* ── HUMAN BADGE ── */
.human-badge {
  font-size: 9px;
  padding: 2px 7px;
  letter-spacing: 0.3px;
  border-radius: 20px;
}

/* ── TABLE HEADERS UPPERCASE ── */
thead tr th {
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-size: 10.5px;
}

/* ══════════════════════════════════════════════════════
   💎 PREMIUM OVERHAULED TOAST SYSTEM (NO STRETCH)
   ══════════════════════════════════════════════════════ */
.toast-container {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  top: auto !important;
  right: auto !important;
  width: 340px !important;
  max-width: 90vw !important;
  height: auto !important;
  max-height: calc(100vh - 48px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  z-index: 99999 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  
  /* Flex overrides to prevent parent flex layout stretching */
  flex: none !important;
  align-self: flex-end !important;
}

.toast-container .toast {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(18, 20, 27, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-right: 4px solid var(--accent, #7c5cfc) !important;
  border-left: none !important;
  border-radius: 14px !important;
  padding: 14px 20px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text, #ededf0) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
  width: 100% !important;
  max-width: 340px !important;
  height: auto !important;
  min-height: unset !important;
  max-height: unset !important;
  flex: none !important;
  align-self: flex-start !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  opacity: 0 !important;
  transform: translateY(20px) scale(0.95) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: none !important; /* Disable style.css keyframe animation */
}

.toast-container .toast.show {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.toast-container .toast.success {
  border-right-color: var(--green, #34d399) !important;
  color: var(--green, #34d399) !important;
}

.toast-container .toast.error {
  border-right-color: #ef5350 !important;
  color: #ef5350 !important;
}

.toast-container .toast.info {
  border-right-color: var(--accent, #7c5cfc) !important;
  color: var(--accent, #7c5cfc) !important;
}

/* 🔔 Premium Notification Count Pulse Animation */
@keyframes notifPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 0 10px var(--glow); }
  100% { transform: scale(1); }
}
.notif-count {
  animation: notifPulse 2s infinite ease-in-out !important;
}

/* ══════════════════════════════════════════════════════
   💬 PREMIUM OVERHAULED CHAT & CONVERSATIONS
   ══════════════════════════════════════════════════════ */

/* Conversations Page Wrapper Overhaul */
#page-conversations {
  display: none !important;
  flex-direction: column !important;
  height: calc(100vh - 58px) !important; /* Exactly fill viewport height minus topbar */
  overflow: hidden !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

#page-conversations.active {
  display: flex !important;
}

/* Fix for new Customer Service Hub */
#cs-panel-conversations {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px); /* Adjust for CS header */
}
#cs-panel-conversations.active {
  display: flex !important;
}

/* Conversations Flex Layout */
.conversations-layout {
  display: flex !important;
  flex-direction: row !important; /* naturally RTL on Arabic locale */
  gap: 20px !important;
  flex: 1 !important;
  min-height: 0 !important; /* CRITICAL: allows children to shrink and scroll inside flex */
  margin-top: 10px !important;
  overflow: hidden !important;
  height: auto !important; /* rely on parent flex container */
}

/* Conversations List Panel */
.conv-list-panel {
  width: 360px !important;
  flex-shrink: 0 !important;
  background: var(--surface) !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
}

.conv-list {
  flex: 1 !important;
  overflow-y: auto !important;
}

/* Responsive Overrides for Tablets / Mobile Screens (Single View Pattern) */
@media (max-width: 960px) {
  #page-conversations, #cs-panel-conversations {
    height: calc(100vh - 180px) !important;
    overflow: hidden !important;
  }
  .conversations-layout {
    flex-direction: row !important;
    position: relative !important;
    height: 100% !important;
    overflow: hidden !important;
    margin-top: 0 !important;
  }
  .conv-list-panel {
    width: 100% !important;
    height: 100% !important;
    flex-shrink: 0 !important;
  }
  .conversations-layout > div:nth-child(2) {
    display: none !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 100;
    background: var(--surface);
  }
  .chat-panel {
    height: 100% !important;
    flex: 1 !important;
  }
  
  /* When Chat is Active */
  .conversations-layout.mobile-chat-active .conv-list-panel {
    display: none !important;
  }
  .conversations-layout.mobile-chat-active > div:nth-child(2) {
    display: flex !important;
  }
  .mobile-back-btn {
    display: inline-block !important;
  }
}

/* Individual Conversation Item */
.conv-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border2) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}

.conv-item:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

.conv-item.active {
  background: var(--surface2) !important;
  border-right: 3px solid var(--accent) !important;
  border-left: none !important;
}

/* Conversation Item Details */
.conv-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}

.conv-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.conv-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.conv-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text1) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.conv-time {
  font-size: 11px !important;
  color: var(--text3) !important;
  flex-shrink: 0 !important;
}

.conv-body-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.conv-msg {
  font-size: 12.5px !important;
  color: var(--text2) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
}

.conv-badge {
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 10px !important;
  min-width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 8px var(--glow) !important;
}

.conv-status-badge {
  font-size: 9px !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-weight: bold !important;
  flex-shrink: 0 !important;
}

.conv-status-badge.ai {
  background: rgba(0, 230, 118, 0.1) !important;
  color: #00e676 !important;
}

.conv-status-badge.human {
  background: rgba(255, 145, 0, 0.1) !important;
  color: #ff9100 !important;
}

/* Chat Panel Area */
.chat-panel {
  flex: 1 !important;
  background: var(--surface) !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
  position: relative !important;
}

/* Active Chat Header */
.chat-header {
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--border2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--surface2) !important;
  flex-shrink: 0 !important;
}

.chat-header-info {
  flex: 1 !important;
}

.chat-header-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text1) !important;
}

.chat-header-status {
  margin-top: 2px !important;
}

.status-pill {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.status-pill.ai {
  background: rgba(0, 230, 118, 0.1) !important;
  color: #00e676 !important;
}

.status-pill.human {
  background: rgba(255, 145, 0, 0.1) !important;
  color: #ff9100 !important;
}

/* Takeover Button Styles */
.takeover-btn {
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.takeover-btn.ai {
  background: rgba(0, 230, 118, 0.1) !important;
  color: #00e676 !important;
  border: 1px solid rgba(0, 230, 118, 0.2) !important;
}

.takeover-btn.human {
  background: rgba(255, 145, 0, 0.1) !important;
  color: #ff9100 !important;
  border: 1px solid rgba(255, 145, 0, 0.2) !important;
}

/* Chat Messages Viewport */
.chat-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  background: radial-gradient(circle at center, rgba(255,255,255,0.01) 0%, transparent 80%) !important;
}

/* Message Bubble Alignment & Premium Styling */
.msg-wrapper {
  display: flex !important;
  flex-direction: column !important;
  max-width: 75% !important;
  width: fit-content !important;
}

/* Incoming (Customer): ALIGN LEFT in RTL */
.msg-wrapper.incoming {
  align-self: flex-end !important; /* In RTL, end is left */
  align-items: flex-start !important;
}

.msg-wrapper.incoming .msg-bubble {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 16px !important;
}

/* Outgoing AI: ALIGN RIGHT in RTL */
.msg-wrapper.outgoing-ai {
  align-self: flex-start !important; /* In RTL, start is right */
  align-items: flex-end !important;
}

.msg-wrapper.outgoing-ai .msg-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #fff !important;
  border-bottom-right-radius: 4px !important;
  border-bottom-left-radius: 16px !important;
  box-shadow: 0 4px 15px rgba(var(--accent-rgb, 124, 92, 252), 0.25) !important;
}

/* Outgoing Human Agent: ALIGN RIGHT in RTL */
.msg-wrapper.outgoing-human {
  align-self: flex-start !important; /* In RTL, start is right */
  align-items: flex-end !important;
}

.msg-wrapper.outgoing-human .msg-bubble {
  background: linear-gradient(135deg, #ff9100, #ff6d00) !important;
  color: #fff !important;
  border-bottom-right-radius: 4px !important;
  border-bottom-left-radius: 16px !important;
  box-shadow: 0 4px 15px rgba(255, 145, 0, 0.25) !important;
}

/* Bubble Inner Content */
.msg-bubble {
  max-width: 100% !important;
  width: fit-content !important;
  padding: 10px 14px !important;
  border-radius: 16px !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  word-break: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.msg-sender {
  font-size: 11px !important;
  color: var(--text3) !important;
  margin-bottom: 3px !important;
  padding: 0 4px !important;
  font-weight: 700 !important;
}

.msg-time {
  font-size: 10px !important;
  color: var(--text3) !important;
  margin-top: 4px !important;
  padding: 0 4px !important;
}

/* Chat Input Area Overhaul */
.chat-input-area {
  padding: 14px 20px !important;
  border-top: 1px solid var(--border2) !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-end !important; /* Bottom align buttons for growing textarea */
  background: var(--surface2) !important;
  flex-shrink: 0 !important;
}

.chat-input {
  flex: 1 !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  color: var(--text) !important;
  font-family: inherit !important;
  font-size: 14.5px !important; /* Premium roomy font size for readable Arabic */
  resize: none !important;
  min-height: 48px !important;
  max-height: 150px !important;
  line-height: 1.6 !important; /* Breathable line-height for multi-line business templates */
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.chat-input:focus {
  border-color: var(--accent) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 124, 92, 252), 0.1) !important;
}

.send-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  height: 44px !important;
  padding: 0 20px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px var(--glow) !important;
  flex-shrink: 0 !important;
}

.send-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px var(--glow) !important;
}

.send-btn:active {
  transform: translateY(1px) !important;
}

/* Chat Paperclip / Attachment button hover */
.chat-attach-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--text1) !important;
  border-color: var(--accent) !important;
}

/* Sidebar Mobile/Tablet Drawer Fix for RTL */
@media (max-width: 960px) {
  .sidebar {
    right: calc(-1 * var(--sidebar-w)) !important;
    transform: none !important;
    left: auto !important;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .sidebar.active {
    right: 0 !important;
    transform: none !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PREMIUM SETTINGS PAGE REDESIGN — YDORA LUXURY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Settings Page Main Wrapper */
#page-settings {
  position: relative;
  overflow-x: hidden;
}

/* Glassmorphic settings grid */
#page-settings .settings-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  position: relative;
  z-index: 2;
}

#page-settings .settings-card {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 26px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  position: relative;
  overflow: hidden;
}

/* Accent top border lines for premium feel */
#page-settings .settings-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  opacity: 0;
  transition: opacity 0.4s ease;
}

#page-settings .settings-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 15px 35px rgba(124, 92, 252, 0.1) !important;
}

#page-settings .settings-card:hover::before {
  opacity: 1;
}

/* Header style in card */
#page-settings .settings-card h3 {
  font-family: 'Cairo', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin-bottom: 20px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 12px;
}

/* Logo Color Buttons styling */
.logo-color-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  position: relative;
  outline: none !important;
}

.logo-color-btn:hover {
  transform: scale(1.15) translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.logo-color-btn.active {
  transform: scale(1.1) !important;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent) !important;
  border: 3px solid var(--accent) !important;
}

/* Glow Theme Button styling */
.glow-theme-btn {
  flex: 1;
  min-width: 140px;
  padding: 18px 12px !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  color: var(--text) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.glow-theme-btn:hover {
  transform: translateY(-4px) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.glow-theme-btn.active {
  border: 1.5px solid var(--accent) !important;
  background: rgba(124, 92, 252, 0.08) !important;
  box-shadow: 0 0 20px rgba(124, 92, 252, 0.15) !important;
}

.glow-theme-btn span:first-child {
  font-size: 26px !important;
  transition: transform 0.3s ease;
}

.glow-theme-btn:hover span:first-child {
  transform: scale(1.18);
}

/* Tech stack elements */
.tech-item {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 12px 16px;
  border-radius: 14px;
  transition: all 0.3s ease;
}
.tech-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Password Locking Grid */
#sectionLockGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#sectionLockGrid > div {
  background: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  transition: all 0.3s ease !important;
}

#sectionLockGrid > div:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Inputs on settings */
#page-settings input.search-input {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  padding: 10px 16px !important;
  transition: all 0.3s ease;
  font-family: inherit;
}

#page-settings input.search-input:focus {
  border-color: var(--accent) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  box-shadow: 0 0 15px rgba(124, 92, 252, 0.15);
}

#page-settings select.search-input {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  padding: 8px 16px !important;
  cursor: pointer;
  transition: all 0.3s ease;
}

#page-settings select.search-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 15px rgba(124, 92, 252, 0.15);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  #page-settings .settings-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  #sectionLockGrid {
    grid-template-columns: 1fr !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PREMIUM CUSTOM TOGGLE SWITCHES (GLASS & NEON)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.premium-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  flex-shrink: 0;
}

.premium-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.premium-switch .switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 22px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.premium-switch .switch-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: #a0aec0;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.premium-switch input:checked + .switch-slider {
  background-color: rgba(124, 92, 252, 0.15);
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(124, 92, 252, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.premium-switch input:checked + .switch-slider:before {
  transform: translateX(22px);
  background-color: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* Enhancing settings inputs */
#page-settings .btn {
  border-radius: 12px !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

#page-settings .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
}

#page-settings .btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: none !important;
  color: #fff !important;
}

#page-settings .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  border: none !important;
  color: #fff !important;
}

#page-settings .btn-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: none !important;
  color: #fff !important;
}

.setting-status {
  padding: 6px 14px;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(239, 68, 68, 0.15);
  display: inline-block;
  transition: all 0.3s ease;
}

.setting-status.connected {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #10b981 !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WORLD-CLASS SETTINGS UI OVERHAUL (YDORA EXTREME)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Connection Status Card Enhancements */
.connection-status-panel, .auth-security-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.connection-indicator-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 14px 20px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.connection-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
  position: relative;
  transition: all 0.4s ease;
}

.connection-status-dot.connected {
  background: #10b981;
  box-shadow: 0 0 12px #10b981, 0 0 20px rgba(16, 185, 129, 0.4);
}

.connection-status-dot.connecting {
  background: #f59e0b;
  box-shadow: 0 0 10px #f59e0b;
  animation: connectionPulse 1.5s infinite ease-in-out;
}

.connection-status-dot.qr {
  background: #3b82f6;
  box-shadow: 0 0 10px #3b82f6;
  animation: connectionPulse 1.5s infinite ease-in-out;
}

@keyframes connectionPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

.connection-status-text {
  font-family: 'Cairo', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.connection-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.15);
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.02);
}

.details-label {
  font-size: 13px;
  color: var(--text3);
  font-weight: 600;
}

.details-value {
  font-size: 13px;
  font-weight: 700;
}

.secured-badge {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10b981 !important;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  font-weight: 700;
}

.inactive-badge {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  font-weight: 700;
}

/* Auth Path Security Panel */
.security-badge-glow {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.05), rgba(16, 185, 129, 0.02));
  border: 1px solid rgba(0, 212, 170, 0.12);
  padding: 12px 16px;
  border-radius: 16px;
  box-shadow: 0 0 15px rgba(0, 212, 170, 0.03);
}

.secure-icon {
  font-size: 20px;
}

.secure-status-text {
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #10b981;
  letter-spacing: 0.5px;
}

.security-details {
  background: rgba(0, 0, 0, 0.12);
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.row-title {
  font-size: 13px;
  color: var(--text2);
  font-weight: 600;
}

.setting-note {
  font-size: 12px;
  color: var(--text3) !important;
  line-height: 1.6;
  margin: 0;
}

/* Button & Action Overhauls */
.btn-reconnect, .btn-reset-conn {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.btn-reset-conn {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text2) !important;
}

.btn-reset-conn:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--text) !important;
  transform: translateY(-2px);
}

/* Secure Dashboard Lock Panel */
.lock-dashboard-panel {
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.02);
  transition: all 0.3s ease;
}

.lock-dashboard-panel:hover {
  background: rgba(239, 68, 68, 0.05) !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
  box-shadow: 0 4px 25px rgba(239, 68, 68, 0.06);
}

.btn-lock-now {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15) !important;
  font-family: 'Cairo', sans-serif !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1) !important;
}

.btn-lock-now:hover {
  transform: scale(1.03) translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35) !important;
  background: linear-gradient(135deg, #f87171, #ef4444) !important;
}

.btn-lock-now:active {
  transform: scale(0.98) translateY(0) !important;
}

/* Subtitle header helper */
.page-subtitle {
  font-size: 13px;
  color: var(--text3) !important;
  margin-top: 4px;
  letter-spacing: 0.3px;
}

/* ──────────────────────────────────────────────────
   PREMIUM AI MODEL BADGE BUTTONS (Interactive Cards)
   ────────────────────────────────────────────────── */
.model-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 10px 18px !important;
  color: var(--text2) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  position: relative;
  overflow: hidden;
  user-select: none;
  font-family: 'Cairo', sans-serif !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

.model-badge-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--text) !important;
  transform: translateY(-2px) scale(1.02);
}

.model-badge-btn .active-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  color: var(--text);
  font-weight: bold;
  opacity: 0;
  transform: scale(0.5);
  margin-right: auto;
  margin-left: -4px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.model-badge-btn.active .active-indicator {
  opacity: 1;
  transform: scale(1);
}

/* Active brand colors and glowing effects */
.model-badge-btn.gemini.active {
  background: rgba(79, 195, 247, 0.1) !important;
  border-color: rgba(79, 195, 247, 0.4) !important;
  color: #4fc3f7 !important;
  box-shadow: 0 0 20px rgba(79, 195, 247, 0.3) !important;
}
.model-badge-btn.gemini.active .active-indicator {
  background: #4fc3f7 !important;
  color: #0f172a !important;
}

.model-badge-btn.gpt.active {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #22c55e !important;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3) !important;
}
.model-badge-btn.gpt.active .active-indicator {
  background: #22c55e !important;
  color: #0f172a !important;
}

.model-badge-btn.claude.active {
  background: rgba(249, 115, 22, 0.1) !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
  color: #f97316 !important;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.3) !important;
}
.model-badge-btn.claude.active .active-indicator {
  background: #f97316 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   ✨ PREMIUM SETTINGS PAGE & CONFIRMATION DIALOG ENHANCEMENTS
   ========================================================================== */

/* Logo Color Buttons Base Style */
.logo-color-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px transparent;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-color-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(255, 255, 255, 0.2);
}

.logo-color-btn.active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent), 0 0 15px var(--accent) !important;
}

/* Individual Logo Color classes */
.logo-color-btn.white { background: #ffffff; }
.logo-color-btn.gold { background: #CDAE75; }
.logo-color-btn.original { background: #0F2639; }
.logo-color-btn.purple { background: linear-gradient(135deg, #7c5cfc, #c084fc); }
.logo-color-btn.sky { background: #60a5fa; }
.logo-color-btn.emerald { background: #34d399; }
.logo-color-btn.pink { background: #f472b6; }


/* Glow Theme Buttons Base Style */
.glow-theme-btn {
  flex: 1;
  min-width: 130px;
  padding: 14px 10px;
  border-radius: 14px;
  cursor: pointer;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-family: 'Cairo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.glow-theme-btn .sub-label {
  font-size: 10px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.glow-theme-btn .glow-icon {
  font-size: 22px;
}

.glow-theme-btn.golden .sub-label {
  color: #CDAE75;
}

.glow-theme-btn.neon .sub-label {
  color: #00e5ff;
}

.glow-theme-btn.glitch .sub-label {
  color: #f000ff;
}

.glow-theme-btn:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.glow-theme-btn.active {
  border-color: var(--accent) !important;
  background: rgba(124, 92, 252, 0.08) !important;
  box-shadow: 0 0 15px rgba(124, 92, 252, 0.2) !important;
}

/* Glow Theme Individual classes */
.glow-theme-btn.pulse { background: rgba(124, 92, 252, 0.04); }
.glow-theme-btn.electric { background: rgba(255, 255, 255, 0.02); }
.glow-theme-btn.golden { background: rgba(205, 174, 117, 0.04); }
.glow-theme-btn.rainbow { background: linear-gradient(135deg, rgba(255, 0, 0, 0.03), rgba(0, 0, 255, 0.03)); }
.glow-theme-btn.neon { background: rgba(0, 229, 255, 0.03); }
.glow-theme-btn.none { background: rgba(255, 255, 255, 0.01); }
.glow-theme-btn.stroke { background: rgba(255, 255, 255, 0.02); }
.glow-theme-btn.float { background: rgba(255, 255, 255, 0.02); }
.glow-theme-btn.scan { background: rgba(255, 255, 255, 0.02); }
.glow-theme-btn.glitch { background: rgba(240, 0, 255, 0.03); }

/* Premium Active glow borders for themes */
.glow-theme-btn.pulse.active {
  border-color: var(--accent) !important;
  background: rgba(124, 92, 252, 0.08) !important;
  box-shadow: 0 0 15px rgba(124, 92, 252, 0.2) !important;
}
.glow-theme-btn.golden.active {
  border-color: #CDAE75 !important;
  background: rgba(205, 174, 117, 0.1) !important;
  box-shadow: 0 0 15px rgba(205, 174, 117, 0.3) !important;
}
.glow-theme-btn.neon.active {
  border-color: #00e5ff !important;
  background: rgba(0, 229, 255, 0.08) !important;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.3) !important;
}
.glow-theme-btn.glitch.active {
  border-color: #f000ff !important;
  background: rgba(240, 0, 255, 0.08) !important;
  box-shadow: 0 0 15px rgba(240, 0, 255, 0.3) !important;
}


/* Premium Confirmation Modal Overlay */
.confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(8, 10, 18, 0.85);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.confirm-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Modal Content Card */
.confirm-modal-card {
  width: 420px;
  max-width: 90%;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 
              0 0 40px rgba(124, 92, 252, 0.1);
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-modal-overlay.active .confirm-modal-card {
  transform: scale(1) translateY(0);
}

.confirm-modal-body {
  text-align: center;
  padding: 36px 28px 24px 28px;
}

/* Icon with Neon Pulse */
.confirm-icon-outer {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.1);
  transition: all 0.3s ease;
}

.confirm-icon-outer.dangerous {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.15);
}

.confirm-icon-inner {
  font-size: 38px;
  animation: modalIconPulse 2s infinite ease-in-out;
}

@keyframes modalIconPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.confirm-modal-card h3 {
  font-family: 'Cairo', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.confirm-modal-card p {
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  color: var(--text3);
  line-height: 1.6;
  margin-bottom: 28px;
}

/* Buttons System */
.confirm-btn-group {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.confirm-btn {
  flex: 1;
  padding: 12px 18px;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.confirm-btn-cancel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text2);
}

.confirm-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.confirm-btn-ok {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 92, 252, 0.3);
}

.confirm-btn-ok:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(124, 92, 252, 0.4);
}

.confirm-btn-ok.btn-dangerous {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.confirm-btn-ok.btn-dangerous:hover {
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📈 INTEGRATED PERFORMANCE ADVISOR — PREMIUM GRID & ALIGNMENT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.perf-grid-toolbar {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 16px !important;
  align-items: end !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 1200px) {
  .perf-grid-toolbar {
    grid-template-columns: 1.2fr 0.8fr 1.2fr 1.2fr 2fr auto !important;
  }
}

/* Overriding inputs inside the Integrated Performance Advisor to prevent vertical/horizontal squeezing */
.perf-filter-input, .perf-filter-select {
  height: 42px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  font-family: 'Cairo', sans-serif !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.perf-filter-select {
  padding-left: 35px !important; /* Premium spacing for the dropdown arrow */
  cursor: pointer !important;
}

.perf-filter-input:focus, .perf-filter-select:focus {
  border-color: var(--accent) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  box-shadow: 0 0 15px rgba(124, 92, 252, 0.2) !important;
  outline: none !important;
}

/* Premium Search wrapper to make the search look exceptionally glowing and elegant */
.perf-search-wrap-grid {
  position: relative !important;
  width: 100% !important;
}

.perf-search-wrap-grid .search-icon {
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  color: var(--text3) !important;
  pointer-events: none !important;
  transition: color 0.3s !important;
}

.perf-search-wrap-grid .luxury-search {
  padding: 8px 40px 8px 16px !important; /* Perfect padding to leave space for right icon in RTL */
  height: 42px !important;
  font-size: 13px !important;
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  font-family: 'Cairo', sans-serif !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.perf-search-wrap-grid .luxury-search:focus {
  border-color: var(--accent) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  box-shadow: 0 0 15px rgba(124, 92, 252, 0.2) !important;
  outline: none !important;
}

.perf-search-wrap-grid .luxury-search:focus + .search-icon {
  color: var(--accent) !important;
}

/* Elegant pulse indicator for silent background sync */
@keyframes syncPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124, 92, 252, 0.4); }
  70% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(124, 92, 252, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124, 92, 252, 0); }
}

.silent-sync-pulse {
  animation: syncPulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🚀 SMART CAMPAIGNS — INTERACTIVE STATUSES & LEAD CARD ACTIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.clc-status-selector {
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  background: rgba(0, 0, 0, 0.25) !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  margin-top: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-sizing: border-box !important;
}

.status-pill-btn {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: var(--text3) !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
}

.status-pill-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text1) !important;
  transform: translateY(-1px) !important;
}

.status-pill-btn:active {
  transform: translateY(0px) !important;
}

/* Color-coded active states for the sentiment selector */
.status-pill-btn.new.active {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.05) !important;
}

.status-pill-btn.contacted.active {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: #60a5fa !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.2) !important;
}

.status-pill-btn.interested.active {
  background: rgba(52, 211, 153, 0.16) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  color: #34d399 !important;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.3) !important;
}

.status-pill-btn.not-interested.active {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2) !important;
}

.status-pill-btn.no-reply.active {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fcd34d !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

/* Colorful glowing borders for lead cards based on interest sentiment */
.camp-lead-card.card-interested {
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  box-shadow: 0 10px 30px rgba(52, 211, 153, 0.03) !important;
}

.camp-lead-card.card-not-interested {
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
}

.camp-lead-card.card-no-reply {
  border: 1px solid rgba(245, 158, 11, 0.15) !important;
}

/* Beautiful color styles for lead card header badges */
.clc-badge.interested {
  background: rgba(52, 211, 153, 0.1) !important;
  color: #34d399 !important;
  border: 1px solid rgba(52, 211, 153, 0.2) !important;
}

.clc-badge.not-interested {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
}

.clc-badge.no-reply {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #fcd34d !important;
  border: 1px solid rgba(245, 158, 11, 0.18) !important;
}

/* Quick delete button style & hover micro-animation */
.clc-btn-delete {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  font-size: 15px !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.clc-btn-delete:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.6) !important;
  transform: scale(1.15) rotate(5deg) !important;
}

/* ── ZID SIGNATURE CLASSIC LIGHT THEME OVERRIDES (True Premium Zid Identity) ── */
[data-theme="zid-light"] .sidebar {
  background: #ffffff !important; /* Pure elegant white sidebar */
  border-left: 1px solid rgba(119, 35, 226, 0.08) !important;
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="zid-light"] .sidebar-section-title {
  color: #8C94A5 !important;
  opacity: 0.85 !important;
  border-top-color: rgba(119, 35, 226, 0.05) !important;
}

[data-theme="zid-light"] .nav-item {
  color: #4A3E6D !important; /* Elegant dark purple-gray text for high-contrast readability */
}

[data-theme="zid-light"] .nav-item svg {
  color: #7723E2 !important; /* Sharp royal purple icons */
  opacity: 0.8;
}

[data-theme="zid-light"] .nav-item:hover {
  background: rgba(119, 35, 226, 0.04) !important;
  color: #7723E2 !important;
  transform: translateX(-4px) !important;
}

[data-theme="zid-light"] .nav-item:hover svg {
  opacity: 1;
}

[data-theme="zid-light"] .nav-item.active {
  background: rgba(119, 35, 226, 0.07) !important; /* Soft premium lavender background */
  color: #7723E2 !important; /* High contrast active Zid purple */
  border: 1px solid rgba(119, 35, 226, 0.08) !important;
  box-shadow: inset 0 2px 8px rgba(119, 35, 226, 0.02) !important;
}

[data-theme="zid-light"] .nav-item.active svg {
  color: #7723E2 !important;
  opacity: 1;
}

[data-theme="zid-light"] .nav-item.active::before {
  background: #7723E2 !important; /* Royal purple active bar */
  box-shadow: -2px 0 10px rgba(119, 35, 226, 0.4) !important;
}

[data-theme="zid-light"] .creator-badge {
  background: rgba(119, 35, 226, 0.03) !important;
  border-radius: 12px;
  padding: 12px !important;
}

[data-theme="zid-light"] .creator-badge .creator-line {
  color: #8C94A5 !important;
}

[data-theme="zid-light"] .creator-badge .creator-name {
  color: #7723E2 !important;
}

[data-theme="zid-light"] .theme-label {
  color: #8C94A5 !important;
}

[data-theme="zid-light"] #themeNameLabel {
  color: #7723E2 !important;
}

[data-theme="zid-light"] .version-badge {
  color: #8C94A5 !important;
}

[data-theme="zid-light"] .sidebar-footer {
  border-top-color: rgba(119, 35, 226, 0.05) !important;
}

/* Sidebar Logo must be the gorgeous ORIGINAL dark blue calligraphic artwork (Zero filter!) */
[data-theme="zid-light"] .banner-logo,
[data-theme="zid-light"] #brandLogo {
  filter: none !important; /* Pure natural high-contrast logo */
  animation: none !important;
  opacity: 0.95;
}

/* Slogan text inside the white sidebar - customized to match the natural dark slate logo */
[data-theme="zid-light"] .banner-slogan .slogan-text {
  animation: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

[data-theme="zid-light"] .slogan-line {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #0F2639 !important;
  color: #0F2639 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  display: block;
}

[data-theme="zid-light"] .slogan-sub {
  color: rgba(15, 38, 57, 0.6) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  display: block;
  margin-top: 2px !important;
}

/* Content Area logo & watermark must be original dark silhouettes */
[data-theme="zid-light"] .topbar-logo {
  filter: none !important;
  animation: none !important;
  opacity: 0.8;
}
[data-theme="zid-light"] .watermark-img {
  filter: none !important;
  animation: none !important;
  opacity: 0.04 !important;
}

/* Customizer styles for theme selection buttons inside white sidebar */
[data-theme="zid-light"] .theme-btn {
  border-color: rgba(119, 35, 226, 0.15) !important;
}
[data-theme="zid-light"] .theme-btn.active {
  border-color: #7723E2 !important;
  box-shadow: 0 0 12px rgba(119, 35, 226, 0.3) !important;
}
/* ── Global Input Styles (Fixed) ── */
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #e5e7eb !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
  border-color: #7c5cfc !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.15) !important;
}
input::placeholder, textarea::placeholder {
  color: #9ca3af !important;
}
/* Ensure dark mode works */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), 
[data-theme="dark"] textarea, 
[data-theme="dark"] select,
body.dark-mode input:not([type="checkbox"]):not([type="radio"]),
body.dark-mode textarea,
body.dark-mode select {
  background-color: #1a1a1f !important;
  color: #ffffff !important;
  border-color: #333 !important;
}