/* ============================================================
   neon-shell.css — تم دارک-نئون برای شلِ چت/تنظیمات (base_shell)
   با کلاس body.neon-shell فعال می‌شود. آخر از همه لود شود.
   ============================================================ */

.neon-shell {
  /* بازتعریف متغیرهای شل به مقادیر دارک-نئون (chat.css از این‌ها استفاده می‌کند) */
  --cafe-shell-bg: #070a16;
  --cafe-surface: #0c1226;
  --cafe-panel-bg: rgba(18, 24, 48, 0.66);
  --cafe-panel-border: rgba(120, 160, 255, 0.18);
  --cafe-panel-text: #eaf2ff;
  --cafe-panel-muted: #8ea2c0;
  --cafe-panel-hover: rgba(120, 160, 255, 0.10);
  --cafe-primary-hex: #22d3ee;
  --cafe-primary-soft: rgba(34, 211, 238, 0.10);
  --cafe-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  --neon-grad: linear-gradient(110deg, #22d3ee 0%, #6366f1 45%, #ec4899 100%);
  color: #eaf2ff;
  background:
    radial-gradient(900px 500px at 88% -8%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(800px 520px at 4% 8%, rgba(168,85,247,.18), transparent 58%),
    linear-gradient(180deg, rgba(7,10,22,.86), rgba(7,10,22,.92)),
    url("/static/images/bg.jpg") center center / cover no-repeat,
    #070a16 !important;
  background-attachment: fixed;
}

/* پنل‌های اصلی → شفاف/دارک */
.neon-shell .chat-main-wrapper,
.neon-shell .cafe-main-panel,
.neon-shell .chat-viewport,
.neon-shell #conversation,
.neon-shell #mainContainer,
.neon-shell #mainContainer > div:last-child { background: transparent !important; }
.neon-shell .shell-main-panel {
  background: rgba(10, 14, 30, 0.55) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255,255,255,.05) !important;
  border: 1px solid var(--cafe-panel-border);
}

/* ابزارهای روشنِ Tailwind داخل شل → دارک */
.neon-shell .bg-white { background: rgba(18, 24, 48, 0.62) !important; }
.neon-shell .bg-slate-50 { background: rgba(255, 255, 255, 0.03) !important; }
.neon-shell .bg-slate-100 { background: rgba(255, 255, 255, 0.06) !important; }
.neon-shell .bg-teal-50 { background: rgba(34, 211, 238, 0.12) !important; }
.neon-shell .bg-teal-100 { background: rgba(34, 211, 238, 0.18) !important; }
.neon-shell .bg-amber-50 { background: rgba(245, 158, 11, 0.14) !important; }
.neon-shell .bg-rose-50 { background: rgba(244, 63, 94, 0.14) !important; }

.neon-shell .border-slate-100,
.neon-shell .border-slate-200,
.neon-shell .border { border-color: rgba(120, 160, 255, 0.18) !important; }
.neon-shell .border-teal-300 { border-color: rgba(34, 211, 238, 0.5) !important; }

.neon-shell .text-slate-800,
.neon-shell .text-slate-700,
.neon-shell .text-primary-color { color: #eaf2ff !important; }
.neon-shell .text-slate-600,
.neon-shell .text-slate-500,
.neon-shell .text-slate-400 { color: #8ea2c0 !important; }
.neon-shell .text-teal-700,
.neon-shell .text-teal-600 { color: #22d3ee !important; }

.neon-shell .hover\:bg-slate-50:hover { background: rgba(255, 255, 255, 0.05) !important; }
.neon-shell .hover\:bg-teal-50:hover { background: rgba(34, 211, 238, 0.10) !important; }
.neon-shell .hover\:border-teal-300:hover,
.neon-shell .hover\:border-teal-400:hover { border-color: rgba(34, 211, 238, 0.5) !important; }

/* ورودی‌ها و کامپوزر */
.neon-shell input,
.neon-shell textarea,
.neon-shell select {
  background: rgba(8, 12, 28, 0.7) !important;
  color: #fff !important;
  border-color: rgba(120, 160, 255, 0.18) !important;
}
.neon-shell input.bg-transparent,
.neon-shell textarea.bg-transparent {
  background: transparent !important;
}
.neon-shell input::placeholder,
.neon-shell textarea::placeholder { color: #5e6f8e !important; }
.neon-shell input:focus,
.neon-shell textarea:focus { border-color: #22d3ee !important; box-shadow: 0 0 0 3px rgba(34,211,238,.16) !important; }

/* حباب پیام کاربر و دکمهٔ ارسال → گرادیان نئون */
.neon-shell .cafe-header-primary-button,
.neon-shell .cafe-main-selector,
.neon-shell button[type="submit"].bg-secondary-color,
.neon-shell .bg-secondary-color {
  background-image: var(--neon-grad) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 8px 22px rgba(99,102,241,.35), 0 0 16px rgba(34,211,238,.22) !important;
  border: 0 !important;
}

/* دیوایدرها */
.neon-shell .bg-slate-100.h-px,
.neon-shell .h-px { background: rgba(120,160,255,.14) !important; }

/* برندِ نامِ جی‌پی‌تی‌کافه داخل شل */
.neon-shell [style*="color:#084B5E"],
.neon-shell [style*="color: #084B5E"] { color: #22d3ee !important; }

/* اسکرول‌بار */
.neon-shell ::-webkit-scrollbar { width: 5px; height: 5px; }
.neon-shell ::-webkit-scrollbar-thumb { background: #2590B8; border-radius: 8px; }
.neon-shell ::-webkit-scrollbar-track { background: transparent; }

/* آیتم فعال ناوبری */
.neon-shell .left-bar-active,
.neon-shell .cafe-nav-active,
.neon-shell .shell-nav-active {
  background: rgba(34,211,238,.12) !important;
  box-shadow: 0 0 0 1px rgba(34,211,238,.35), 0 0 26px rgba(34,211,238,.28) !important;
}
.neon-shell .shell-nav-item.shell-nav-active {
  box-shadow: 0 0 0 1px rgba(34,211,238,.35), 0 0 26px rgba(34,211,238,.28) !important;
}
.neon-shell .left-bar-btn img { filter: brightness(0) invert(1) opacity(.8); }

/* ── لیکوئید‌گلس: شیشه‌ای‌ترکردن پنل‌ها و شل ── */
.neon-shell .bg-glass-panel,
.neon-shell #rightSidebar,
.neon-shell .cafe-shell-header {
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}
.neon-shell .shell-main-panel {
  background: linear-gradient(135deg, rgba(30,40,70,.5), rgba(10,14,30,.5)) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}
.neon-shell .bg-white { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }

/* Override for main panels to remove blur and set 50% opacity on the outermost wrapper only */
body.neon-shell div.chat-main-wrapper {
  background: rgba(18, 24, 48, 0.50) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Inner panels must be transparent without blur to prevent compounding effects */
body.neon-shell div.cafe-main-panel,
body.neon-shell div#conversation {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* ── حالت عملکرد سریع (گوشی‌های ضعیف): خاموش‌کردن شیشه/انیمیشن ── */
html.perf-mode .neon-shell *,
html.perf-mode .neon-shell *::before,
html.perf-mode .neon-shell *::after {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: none !important;
}
html.perf-mode .neon-shell,
html.perf-mode .neon-shell .shell-main-panel { background-color: #070a16 !important; }
html.perf-mode .neon-shell .bg-white { background: rgba(18,24,48,.96) !important; }
html.perf-mode .neon-shell .chat-main-wrapper,
html.perf-mode .neon-shell .sidebar-chat-section { background: rgba(18,24,48,.70) !important; }
html.perf-mode .neon-shell .chat-topbar { background: rgba(18,24,48,.16) !important; }
html.perf-mode .neon-shell #conversation { background: transparent !important; }
html.perf-mode .neon-shell #rightSidebar,
html.perf-mode .neon-shell .cafe-shell-header,
html.perf-mode .neon-shell .bg-glass-panel { background: rgba(12,16,34,.97) !important; }
html.perf-mode .neon-shell .animate-pulse,
html.perf-mode .neon-shell .animate-spin { animation-duration: 1.4s !important; }
html.perf-mode .neon-shell #mobileDrawer { transition: transform 0.3s ease-in-out, translate 0.3s ease-in-out !important; }
html.perf-mode .neon-shell #mobileDrawerOverlay { transition: opacity 0.25s ease !important; }
/* -- Neon Global Classes (Copied from base_minimal.html) -- */
.neon-link { color: #9fb3d4; transition: color .15s, text-shadow .15s; }
.neon-link:hover { color: var(--neon-cyan); text-shadow: 0 0 12px rgba(34,211,238,.5); }
.neon-card {
  position: relative;
  background: linear-gradient(135deg, rgba(20, 26, 48, 0.92), rgba(10, 12, 24, 0.88));
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(150,180,255,.16); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.09);
  overflow: hidden;
}
.neon-card::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%);
}
.neon-card > * { position: relative; }
.neon-input {
  background: rgba(8,12,28,.7); color:#fff; border:1.5px solid var(--neon-border);
  border-radius: 12px; outline: none; transition: border-color .15s, box-shadow .2s;
}
.neon-input::placeholder { color:#5e6f8e; }
.neon-input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(34,211,238,.18), 0 0 16px rgba(34,211,238,.22); }
.neon-btn {
  color:#fff; font-weight:800; border:0; border-radius:9999px; cursor:pointer;
  background: var(--neon-grad); background-size:200% 100%;
  box-shadow: 0 10px 28px rgba(99,102,241,.4), 0 0 16px rgba(34,211,238,.25);
  transition: background-position .4s, transform .1s, filter .2s, box-shadow .2s;
}
.neon-btn:hover { background-position:100% 0; transform: translateY(-1px); filter: brightness(1.08); box-shadow:0 14px 34px rgba(236,72,153,.4),0 0 24px rgba(34,211,238,.35); }
.neon-btn:disabled { opacity:.5; cursor:not-allowed; filter:grayscale(.3); transform:none; }
.neon-btn-outline {
  color: #22d3ee; font-weight: 800; border: 1.5px solid #22d3ee; border-radius: 9999px; cursor: pointer;
  background: transparent;
  box-shadow: 0 0 16px rgba(34,211,238,.15);
  transition: background .2s, transform .1s, box-shadow .2s;
}
.neon-btn-outline:hover { background: rgba(34,211,238,.1); transform: translateY(-1px); box-shadow: 0 0 24px rgba(34,211,238,.25); }
.neon-chip { background: rgba(34,211,238,.10); border:1px solid rgba(34,211,238,.25); color:#bfeefc; border-radius:9999px; }
.neon-muted { color:#8ea2c0; }