:root {
  /* =========================================
     THEME VARIABLES (DEFAULT = DARK)
     ========================================= */

  /* Backgrounds */
  --bg-body: #030308;
  --bg-deep: #000000;
  --bg-card: #13131f;
  --bg-header: rgba(15, 15, 25, 0.65);
  --bg-sidebar: rgba(10, 10, 20, 0.6);
  --bg-input: rgba(255, 255, 255, 0.03);
  --bg-hover: rgba(255, 255, 255, 0.05);

  /* Text */
  --text-main: #ffffff;
  --text-muted: #94a3b8;
  --text-invert: #000000;
  /* Text color that contrasts with main */

  /* Borders & Glass */
  --border-color: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-bg: rgba(20, 20, 30, 0.4);
  --shadow-color: rgba(0, 0, 0, 0.5);

  /* Accents (Shared across themes mostly) */
  --primary: #8b5cf6;
  --primary-light: #a78bfa;
  --primary-glow: rgba(139, 92, 246, 0.6);
  --secondary: #06b6d4;
  --secondary-glow: rgba(6, 182, 212, 0.6);
  --accent: #cb11ab;
  /* WB Magenta */

  --gradient-primary: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%);

  /* Sizes */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 100px;
  --header-height: 80px;
}

/* =========================================
   LIGHT THEME OVERRIDES
   ========================================= */
[data-theme="light"] {
  /* WB / Matrixe Light Palette */
  --bg-body: #fdf2fa;
  /* Very subtle pinkish white */
  --bg-deep: #ffffff;
  --bg-card: #ffffff;
  --bg-header: rgba(255, 255, 255, 0.85);
  --bg-sidebar: rgba(250, 245, 255, 0.85);
  --bg-input: #f3f4f6;
  --bg-hover: #fce7f3;

  --text-main: #1f2937;
  /* Dark Gray */
  --text-muted: #64748b;
  --text-invert: #ffffff;

  --border-color: rgba(203, 17, 171, 0.15);
  /* WB Pink/Purple tint */
  --glass-border: rgba(203, 17, 171, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.6);
  --shadow-color: rgba(203, 17, 171, 0.08);

  /* Light Mode Specific Overrides */
  --gradient-hero-title: linear-gradient(135deg, #2d2d2d 0%, #4a2b69 100%);
  /* Sharper dark text gradient */
}

/* Specific Light Theme Component Overrides */
[data-theme="light"] .hero-title {
  text-shadow: none !important;
  /* Remove muddy shadow */
}

[data-theme="light"] .glass-input-large,
[data-theme="light"] .glass-input,
[data-theme="light"] .glass-textarea,
[data-theme="light"] .search-wrapper-premium input {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}

[data-theme="light"] .glass-input-large:focus,
[data-theme="light"] .glass-input:focus,
[data-theme="light"] .glass-textarea:focus,
[data-theme="light"] .search-wrapper-premium input:focus {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  box-shadow: none !important;
}

[data-theme="light"] .input-group label {
  color: #4b5563 !important;
}

[data-theme="light"] .action-card {
  background: #ffffff;
  border: 1px solid rgba(203, 17, 171, 0.15);
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .action-card:hover {
  background: #fdf2fa;
  border-color: var(--accent);
  transform: translateY(-2px);
}

[data-theme="light"] .composer-input-row {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .recording-timer {
  text-shadow: none;
  color: var(--accent);
}

/* Make orbs very subtle in light mode */
/* Remove orbs and noise in light mode for clean look */
[data-theme="light"] .orb,
[data-theme="light"] .noise-overlay {
  display: none !important;
}

/* Enhanced Hero Text for Light Mode */
[data-theme="light"] .hero-title span {
  background: linear-gradient(to right, #4c1d95, #d946ef, #8b5cf6, #4c1d95) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 10px rgba(217, 70, 239, 0.2)) !important;
  filter: drop-shadow(0 2px 10px rgba(217, 70, 239, 0.2)) !important;
  animation: shineText 6s linear infinite !important;
}

/* Light Mode Overrides for Chat Bubbles */
[data-theme="light"] .bubble em,
[data-theme="light"] .bubble blockquote {
  color: var(--text-main) !important;
}

/* =========================================
   LIGHT THEME: CONSISTENCY FIXES
   ========================================= */

/* 1. Sidebar & Chat History */
[data-theme="light"] .sidebar-container,
[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(25px) !important;
  border-right: 1px solid rgba(203, 17, 171, 0.15) !important;
}

[data-theme="light"] .chat-history-item,
[data-theme="light"] .chat-item {
  background: #ffffff !important;
  border: 1px solid rgba(203, 17, 171, 0.1) !important;
  color: #4b5563 !important;
}

[data-theme="light"] .chat-item-title {
  color: #1f2937 !important;
}

[data-theme="light"] .chat-history-item:hover,
[data-theme="light"] .chat-history-item.active,
[data-theme="light"] .chat-item:hover,
[data-theme="light"] .chat-item.active {
  background: linear-gradient(90deg, rgba(203, 17, 171, 0.05), transparent) !important;
  color: #cb11ab !important;
  border-color: #cb11ab !important;
}

[data-theme="light"] .new-chat-btn,
[data-theme="light"] .btn-new-chat {
  background: linear-gradient(135deg, #cb11ab 0%, #d946ef 100%) !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(203, 17, 171, 0.3) !important;
}

/* 2. Logo Visibility */
[data-theme="light"] .brand-logo-text,
[data-theme="light"] .brand-logo-header {
  background: linear-gradient(135deg, #1f2937 0%, #4a2b69 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* 3. Dropdowns & Store Selector */
[data-theme="light"] .store-selector-container button {
  background: #ffffff !important;
  border: 1px solid rgba(203, 17, 171, 0.2) !important;
  color: #1f2937 !important;
}

[data-theme="light"] .store-selector-container button span {
  color: #1f2937 !important;
}

[data-theme="light"] .dropdown-menu,
[data-theme="light"] .profile-dropdown,
[data-theme="light"] .store-dropdown {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(203, 17, 171, 0.15) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .dropdown-item,
[data-theme="light"] .profile-info-row,
[data-theme="light"] .dropdown-item-logout {
  color: #1f2937 !important;
  background: #f9fafb !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .dropdown-item-logout:hover {
  background: #fdf2fa !important;
  color: #cb11ab !important;
}

[data-theme="light"] .dh-name {
  color: #1f2937 !important;
}

/* 4. Bot Cards (White Glass) & Editor Modal */
[data-theme="light"] .bot-card-glass,
[data-theme="light"] .bot-card,
[data-theme="light"] .editor-modal {
  background: #ffffff !important;
  border: 1px solid rgba(203, 17, 171, 0.15) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .editor-header,
[data-theme="light"] .editor-footer {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .editor-header h3 {
  color: #1f2937 !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

/* Specific fix for Edit Bot Modal (ID based to prevent override issues) */
[data-theme="light"] #editBotModalTitle {
  color: #1f2937 !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
}

[data-theme="light"] #editBotModal .btn.ghost {
  color: #1f2937 !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] #editBotModal .modal-close {
  color: #1f2937 !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .btn.ghost {
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  color: #64748b !important;
}

[data-theme="light"] .btn.ghost:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #1f2937 !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .btn-close {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #64748b !important;
}

[data-theme="light"] .btn-close:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
}

[data-theme="light"] .editor-panel {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  background: #ffffff !important;
}

[data-theme="light"] .bot-card-header h3,
[data-theme="light"] .bot-card-title,
[data-theme="light"] .empty-state-title {
  color: #1f2937 !important;
}

[data-theme="light"] .section-header h2 {
  background: linear-gradient(135deg, #1f2937 0%, #4a2b69 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

[data-theme="light"] .section-header p {
  color: #4b5563 !important;
}

/* Unified Bot Info Icons */
.bot-info-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #7c3aed;
}

.bot-info-icon svg {
  width: 100%;
  height: 100%;
}

/* Premium Status Toggle */
.bot-status-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  /* Prevent shrinking */
  margin-left: 12px;
  /* Ensure spacing from title */
}

.bot-status-toggle.active {
  background: #7c3aed;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
}

.bot-status-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.bot-status-toggle.active::after {
  transform: translateX(20px);
}

[data-theme="light"] .bot-status-toggle {
  background: #e2e8f0;
  border-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .bot-status-toggle.active {
  background: #7c3aed;
}

[data-theme="light"] #botsView .section-header h2 {
  background: linear-gradient(135deg, #1f2937 0%, #4a2b69 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

[data-theme="light"] #botsView .section-header p {
  color: #4b5563 !important;
}

[data-theme="light"] .premium-table-section {
  background: #ffffff !important;
  border: 1px solid rgba(203, 17, 171, 0.1) !important;
}

[data-theme="light"] .bot-token-box,
[data-theme="light"] .bot-key-box,
[data-theme="light"] .file-upload-trigger {
  background: #f3f4f6 !important;
  color: #4b5563 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .file-upload-trigger div>div:first-child {
  color: #1f2937 !important;
  /* File upload text */
}

[data-theme="light"] .stats-box {
  background: #f8fafc !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .stat-value,
[data-theme="light"] .stat-val-premium {
  color: #cb11ab !important;
}

[data-theme="light"] .bot-info-item,
[data-theme="light"] .stat-label {
  color: #64748b !important;
}

[data-theme="light"] .bot-info-item svg {
  color: #94a3b8 !important;
}

/* 5. Admin Stats & Charts */
[data-theme="light"] .stat-card-premium,
[data-theme="light"] .chart-card-premium {
  background: #ffffff !important;
  border: 1px solid rgba(203, 17, 171, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .scp-value,
[data-theme="light"] .chart-header h3 {
  color: #1f2937 !important;
}

[data-theme="light"] .scp-label,
[data-theme="light"] .chart-header p {
  color: #64748b !important;
}

[data-theme="light"] .users-table-container {
  background: #ffffff !important;
  border: 1px solid rgba(203, 17, 171, 0.1) !important;
}

[data-theme="light"] .premium-table th {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .premium-table td {
  color: #1f2937 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* LIGHT THEME TABLE OVERRIDES (Generic & Markdown) */
[data-theme="light"] table,
[data-theme="light"] .markdown-body table {
  background-color: #ffffff !important;
  color: var(--text-main) !important;
}

[data-theme="light"] table th,
[data-theme="light"] .markdown-body table th {
  background-color: #f8fafc !important;
  /* Very light cool grey for headers */
  color: #1e293b !important;
  /* Dark slate for text */
  border-bottom: 2px solid #e2e8f0 !important;
}

[data-theme="light"] table td,
[data-theme="light"] .markdown-body table td {
  background-color: #ffffff !important;
  color: #334155 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] table tr:hover td,
[data-theme="light"] .markdown-body table tr:hover td {
  background-color: #f8fafc !important;
  /* Hover effect */
}

/* 6. Settings Page */
[data-theme="light"] .settings-card,
[data-theme="light"] .settings-premium-container {
  background: transparent !important;
}

/* Ensure settings cards themselves are white if they exist, or the container is compatible */

[data-theme="light"] .settings-header h2 {
  color: #1f2937 !important;
  background: none !important;
  -webkit-text-fill-color: #1f2937 !important;
}

/* 7. Request Counter / Badges */
[data-theme="light"] .profile-value,
[data-theme="light"] .bot-pill {
  background: rgba(203, 17, 171, 0.1) !important;
  color: #cb11ab !important;
  /* Make sure text is visible */
  border: 1px solid rgba(203, 17, 171, 0.2) !important;
}


/* =========================================
   EXTENDED COPY MENU (PREMIUM 2026)
   ========================================= */
.copy-menu-wrapper {
  position: relative;
  display: inline-block;
}

.copy-btn-unified {
  /* Existing style override if needed, or ensure it matches */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

.copy-btn-unified:hover,
.copy-btn-unified.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.2);
}

.copy-menu-dropdown {
  position: absolute;
  bottom: 100%;
  /* Opens upwards by default */
  right: 0;
  margin-bottom: 8px;
  width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
  padding: 4px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.copy-menu-dropdown.show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.copy-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-main);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
  width: 100%;
}

.copy-menu-item:hover {
  background: var(--bg-hover);
}

.copy-menu-item svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: color 0.2s;
}

.copy-menu-item:hover svg {
  color: var(--primary);
}

/* Light Theme Overrides for Menu */
[data-theme="light"] .copy-btn-unified {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(203, 17, 171, 0.15);
  color: #64748b;
}

[data-theme="light"] .copy-btn-unified:hover,
[data-theme="light"] .copy-btn-unified.active {
  background: #ffffff;
  color: #cb11ab;
  border-color: #cb11ab;
  box-shadow: 0 4px 12px rgba(203, 17, 171, 0.1);
}

[data-theme="light"] .copy-menu-dropdown {
  background: #ffffff;
  border-color: rgba(203, 17, 171, 0.15);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .copy-menu-item {
  color: #1f2937;
}

[data-theme="light"] .copy-menu-item:hover {
  background: #fdf2fa;
  color: #cb11ab;
}

[data-theme="light"] .copy-menu-item svg {
  color: #94a3b8;
}

[data-theme="light"] .copy-menu-item:hover svg {
  color: #cb11ab;
}

[data-theme="light"] .sp-btn-upgrade {
  background: #ffffff !important;
  color: #cb11ab !important;
  border: 1px solid rgba(203, 17, 171, 0.2) !important;
  box-shadow: 0 4px 12px rgba(203, 17, 171, 0.1) !important;
}

[data-theme="light"] .sp-btn-upgrade:hover {
  background: #fdf2fa !important;
  box-shadow: 0 6px 16px rgba(203, 17, 171, 0.2) !important;
  transform: translateY(-1px);
}

/* 8. Modals (Global & Topup) */
[data-theme="light"] .modal-content {
  background: #ffffff !important;
  border: 1px solid rgba(203, 17, 171, 0.15) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
  color: var(--text-main) !important;
}

[data-theme="light"] .modal-header h2 {
  color: #1f2937 !important;
  background: none !important;
  -webkit-text-fill-color: #1f2937 !important;
}

/* Specific fix for topup modal title */
[data-theme="light"] #topupModal .modal-header h2,
[data-theme="light"] #addStoreModal .modal-header h3 {
  color: #1f2937 !important;
  background: none !important;
  -webkit-text-fill-color: #1f2937 !important;
}

[data-theme="light"] .modal-close {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #64748b !important;
}

[data-theme="light"] .modal-close:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
}

[data-theme="light"] .modal-body p {
  color: #4b5563 !important;
}

/* Topup Packages */
[data-theme="light"] .topup-amount-btn {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  color: #1f2937 !important;
}

[data-theme="light"] .topup-amount-btn:hover {
  background: #f8fafc !important;
  border-color: #cb11ab !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(203, 17, 171, 0.1) !important;
}

[data-theme="light"] .topup-amount-btn.active,
[data-theme="light"] .topup-amount-btn.selected {
  background: linear-gradient(135deg, rgba(203, 17, 171, 0.08), rgba(203, 17, 171, 0.05)) !important;
  border: 1px solid #cb11ab !important;
}

[data-theme="light"] .pkg-name {
  color: #1f2937 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .pkg-price {
  color: #cb11ab !important;
}

[data-theme="light"] .pkg-requests {
  color: #64748b !important;
}

[data-theme="light"] .topup-amount-btn.active .pkg-name,
[data-theme="light"] .topup-amount-btn.selected .pkg-name,
[data-theme="light"] .topup-amount-btn.active .pkg-price,
[data-theme="light"] .topup-amount-btn.selected .pkg-price {
  color: #cb11ab !important;
}

[data-theme="light"] .topup-info {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .info-row span {
  color: #4b5563 !important;
}

[data-theme="light"] .info-row span:last-child {
  color: #1f2937 !important;
}

/* 9. Hero Section Extras */
[data-theme="light"] .hero-mic-btn,
[data-theme="light"] .input-submit-btn {
  background: #ffffff !important;
  color: #64748b !important;
  border: 1px solid rgba(203, 17, 171, 0.2) !important;
}

[data-theme="light"] .hero-mic-btn:hover,
[data-theme="light"] .input-submit-btn:hover {
  background: #fdf2fa !important;
  color: #cb11ab !important;
}

[data-theme="light"] .sp-free,
[data-theme="light"] .sp-free span {
  color: #6b7280 !important;
  /* Muted gray for 'faded' look */
  opacity: 1 !important;
  /* Ensure visibility but use color for hierarchy */
  font-weight: 600;
}

[data-theme="light"] .sp-balance span {
  color: #1f2937 !important;
}

/* 6. Settings Page & Components - Comprehensive Fixes */
[data-theme="light"] .settings-premium-container {
  background: transparent !important;
}

/* Base Card Style for Settings */
[data-theme="light"] .settings-card,
[data-theme="light"] .glass-panel {
  background: #ffffff !important;
  border: none !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .panel-header-premium {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  padding: 12px 16px !important;
  min-height: 48px !important;
}

[data-theme="light"] .panel-body-premium {
  background: transparent !important;
  padding: 16px !important;
}

/* Page Title & Header */
[data-theme="light"] .page-title-premium {
  background: linear-gradient(135deg, #2d2d2d 0%, #4a2b69 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

[data-theme="light"] .page-subtitle {
  color: #94a3b8 !important;
}

/* Quick Stats Row (Top of Settings) */
[data-theme="light"] .stat-glass-card {
  background: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .stat-glass-label {
  color: #94a3b8 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
}

[data-theme="light"] .stat-glass-value {
  color: #cb11ab !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Inputs & Forms in Settings */
[data-theme="light"] .input-wrapper-premium input,
[data-theme="light"] .glass-input-time,
[data-theme="light"] .glass-select {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #1f2937 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

[data-theme="light"] .input-wrapper-premium input:focus,
[data-theme="light"] .glass-input-time:focus,
[data-theme="light"] .glass-select:focus {
  border-color: #cb11ab !important;
  box-shadow: 0 0 0 4px rgba(203, 17, 171, 0.1) !important;
  background: #ffffff !important;
}

[data-theme="light"] .input-group-premium label {
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  margin-bottom: 8px !important;
}

[data-theme="light"] .suffix {
  color: #94a3b8 !important;
}

/* Headers inside cards */
[data-theme="light"] .panel-header-premium h3 {
  color: #1f2937 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

[data-theme="light"] .header-icon {
  background: #fdf2fa !important;
  color: #cb11ab !important;
  border-radius: 12px !important;
}

/* Buttons */
[data-theme="light"] .btn-premium-primary {
  background: linear-gradient(135deg, #a855f7 0%, #cb11ab 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px -5px rgba(203, 17, 171, 0.4) !important;
  border-radius: 14px !important;
  border: none !important;
  font-weight: 600 !important;
}

[data-theme="light"] .btn-premium-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px -5px rgba(203, 17, 171, 0.5) !important;
}

[data-theme="light"] .btn-premium-secondary {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
}

[data-theme="light"] .btn-premium-secondary:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

[data-theme="light"] .btn-premium-icon-text {
  background: #f8fafc !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 30px !important;
}

/* Toggles */
[data-theme="light"] .toggle-switch-premium .slider {
  background-color: #cbd5e1 !important;
}

[data-theme="light"] .toggle-switch-premium input:checked+.slider {
  background-color: #a855f7 !important;
}

[data-theme="light"] .status-badge-mini {
  background: #f0fdf4 !important;
  border: 1px solid #dcfce7 !important;
  color: #15803d !important;
}

/* =========================================
   TOPIC SELECTION MODAL - Global Styles
   ========================================= */
.topic-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.topic-item:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
}

.topic-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-main);
}

.topic-id {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
}

[data-theme="light"] .topic-item {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .topic-item:hover {
  background: #fdf2fa;
  border-color: rgba(203, 17, 171, 0.3);
}

[data-theme="light"] .topic-title {
  color: #1f2937;
}

[data-theme="light"] .topic-id {
  color: #64748b;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-body);
  color: var(--text-main);
  /* overflow: hidden; REMOVED for Global Scroll */
  overflow-y: auto;
  /* Enable global scroll */
  overflow-x: hidden;
  position: relative;
}

/* Ambient Background & Orbs - Premium Motion */
.ambient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  /* Moved back for noise overlay */
  overflow: hidden;
  background: var(--bg-deep);
}

.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.07;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
  animation: floatOrb 20s infinite ease-in-out alternate;
}

@keyframes floatOrb {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(50px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-30px, 20px) scale(0.9);
  }

  100% {
    transform: translate(20px, 40px) scale(1.05);
  }
}

.orb-1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
  top: -150px;
  left: -150px;
  animation-duration: 25s;
}

.orb-2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
  bottom: -100px;
  right: -100px;
  animation-duration: 30s;
  animation-delay: -5s;
}

.orb-3 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Initial center */
  animation-name: floatCenterOrb;
  animation-duration: 35s;
}

@keyframes floatCenterOrb {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-40%, -60%) scale(1.2);
  }

  100% {
    transform: translate(-60%, -40%) scale(0.9);
  }
}

@keyframes breathe {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }

  50% {
    transform: translate(30px, -30px) scale(1.1);
    opacity: 0.7;
  }

  100% {
    transform: translate(-20px, 20px) scale(0.95);
    opacity: 0.5;
  }
}


/* Enable body scroll when users view is active */
body:has(#usersView.active) {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Enable body scroll when admin users section is visible */
body:has(#usersSection:not([style*="display: none"])) {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Enable body scroll when bots view is visible */
body:has(#botsView:not([style*="display: none"])) {
  overflow-y: auto;
  overflow-x: hidden;
}

.dashboard {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  overflow: visible;
  background: var(--bg-body);
}

/* Fix dashboard height when users view is active */
body:has(#usersView.active) .dashboard {
  min-height: 100vh;
  overflow: visible;
}

/* Fix dashboard height when chat view is active (Prevent Body Scroll) */
/* Fix dashboard height when chat view is active (Allow Body Scroll) */
body:has(#chatView.active) .dashboard {
  min-height: 100vh;
  height: auto;
  overflow: visible;
}

body:has(#usersView.active) .main {
  padding: 0;
  overflow: visible;
}

/* Fix dashboard height when bots view is visible */
body:has(#botsView:not([style*="display: none"])) .dashboard {
  min-height: 100vh;
  overflow: visible;
}

body:has(#botsView:not([style*="display: none"])) .main {
  padding: 0;
  overflow: visible;
}

/* Fix dashboard height when admin users section is visible */
body:has(#usersSection:not([style*="display: none"])) .dashboard {
  min-height: 100vh;
  overflow: visible;
}

body:has(#usersSection:not([style*="display: none"])) .main {
  padding: 0;
  min-height: calc(100vh - 85px);
  overflow: visible;
}

body:has(#usersSection:not([style*="display: none"])) .admin-container {
  min-height: 100%;
}

/* Glassmorphism Utilities */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

.glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%);
  opacity: 0.5;
}

/* Accent Top Border */
.feedback-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(203, 17, 171, 0.5) 50%,
      rgba(255, 255, 255, 0) 100%);
  opacity: 0.5;
}

/* =========================================
   PREMIUM FEEDBACK THREAD STYLES (New)
   ========================================= */

.feedback-item-premium {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px;
  /* Compact padding for less space usage */
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
}

.feedback-item-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: rgba(203, 17, 171, 0.3);
}

.feedback-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
}

.feedback-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feedback-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #cb11ab 0%, #481173 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.feedback-meta-text {
  display: flex;
  flex-direction: column;
}

.feedback-username {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.feedback-date {
  font-size: 12px;
  color: var(--text-muted);
}

.feedback-content {
  padding: 20px;
}

.feedback-message-bubble {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px 12px 12px 0;
  padding: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-main);
  white-space: pre-wrap;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.feedback-admin-reply {
  margin-top: 16px;
  padding-left: 16px;
  border-left: 2px solid #cb11ab;
  background: linear-gradient(90deg, rgba(203, 17, 171, 0.05) 0%, transparent 100%);
  border-radius: 0 12px 12px 0;
  padding: 16px;
}

.admin-reply-label {
  font-size: 12px;
  font-weight: 700;
  color: #cb11ab;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-reply-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.feedback-actions {
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

.btn-reply-action {
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-reply-action:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.feedback-reply-form {
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--border-color);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

.status-badge {
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-new {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.status-replied {
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-viewed {
  background: rgba(255, 255, 255, 0.05);
  color: #9ca3af;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Force light theme colors for feedback */
[data-theme="light"] .feedback-item-premium {
  background: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .feedback-message-bubble {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #1e293b;
}

[data-theme="light"] .feedback-admin-reply {
  background: linear-gradient(90deg, rgba(203, 17, 171, 0.03) 0%, transparent 100%);
}

[data-theme="light"] .feedback-actions {
  background: #f8fafc;
}

/* Updated Top Header (Floating Pill) */
.top-header {
  background: var(--bg-deep);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 20px -5px var(--shadow-color);

  /* Full Width Bar */
  margin: 0;
  width: 100%;
  min-width: unset;
  padding: 12px 24px;
  border-radius: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;

  position: relative;
  /* top: 0; removed for relative positioning */
  z-index: 10;
  /* Lower z-index since it's not sticky/fixed */
  transition: all 0.3s ease;
}

.top-header:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 15px 50px -10px rgba(0, 0, 0, 0.6);
}

/* Header Text & Elements */
.brand-logo-header {
  color: var(--text-main);
  font-weight: 700;
  font-size: 18px;
  padding-left: 12px;
  letter-spacing: -0.02em;
  background: linear-gradient(to right, #fff, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: max-content;
  max-width: 140px;
  /* Prevent overflow on tiny screens */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-menu {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg-input);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-menu:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}



/* Admin Badge */
.admin-badge {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Tabs in Header */
.tabs {
  background: transparent;
  padding: 0;
  gap: 2px;
  display: flex;
  align-items: center;
}

.tab {
  color: var(--text-muted);
  padding: 8px 16px;
  /* Compact */
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
}

.tab:hover {
  color: var(--text-main);
  background: var(--bg-hover);
}

.tab.active {
  background: var(--bg-hover);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  box-shadow: none;
  /* Cleaner look */
  text-shadow: none;
}

.tab.active svg {
  color: #c084fc;
}

/* User Info & Icons */
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 4px;
}

/* Status Pill: Balance + Tariffs */
.status-pill {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
  gap: 12px;
  height: 40px;
}

.sp-btn-upgrade {
  /* Gradient Pill Button */
  background: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
  position: relative;
  overflow: hidden;
  color: white;
  border: none;
  border-radius: 9999px;
  height: 36px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
  transition: all 0.3s ease;
}

.sp-btn-upgrade:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(217, 70, 239, 0.4);
  filter: brightness(1.1);
  border-color: transparent;
}

/* User Avatar */
.user-profile-trigger {
  position: relative;
  cursor: pointer;
}

.user-avatar {
  width: 40px;
  /* Smaller, cleaner */
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 16px;
  position: relative;
  border: 2px solid var(--border-color);
  /* Subtle border */
  transition: all 0.3s ease;
  box-shadow: none;
}

.user-avatar:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Avatar Ring Animation */
.avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(139, 92, 246, 0.5);
  border-right-color: rgba(59, 130, 246, 0.5);
  opacity: 0;
  transition: all 0.3s ease;
  animation: spin 3s linear infinite paused;
}

.user-profile-trigger:hover .avatar-ring {
  opacity: 1;
  animation-play-state: running;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Updated Dropdown */
.profile-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  /* Slightly more gap */
  right: 0;
  /* Shifted right as requested to avoid overlap */
  width: 300px;
  /* Slightly narrower */
  background: var(--bg-card);
  /* Solid dark color to prevent overlapping text readability issues */
  border: 1px solid var(--border-color);
  /* Subtle border */
  border-radius: 20px;
  box-shadow: 0 16px 40px -10px var(--shadow-color),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  padding: 20px;
  z-index: 200;
  transform-origin: top right;
  animation: dropdownPop 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  overflow: hidden;
}

/* Remove the rainbow border to clean up */
/* .profile-dropdown::before removed */

@keyframes dropdownPop {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dropdown-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.dh-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(236, 72, 153, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d8b4fe;
  border: 2px solid rgba(124, 58, 237, 0.3);
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.2);
}

.dh-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dh-name {
  font-weight: 700;
  color: var(--text-main);
  font-size: 16px;
  letter-spacing: 0.01em;
}

.dh-email {
  font-size: 13px;
  color: #9ca3af;
}

.dropdown-divider {
  display: none;
  /* Removed in favor of gap/padding */
}

/* Stats Row as a "Card" */
.profile-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  padding: 12px 16px;
  border-radius: 16px;
  margin-bottom: 20px;
  transition: all 0.2s ease;
}

.profile-info-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.profile-value {
  color: var(--text-main);
  font-weight: 600;
  font-family: monospace;
  font-size: 15px;
  background: rgba(124, 58, 237, 0.2);
  padding: 2px 8px;
  border-radius: 6px;
  color: #d8b4fe;
}

/* Logout Button */
.dropdown-item-logout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;

  /* Gradient Border Trick or nice background */
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), rgba(153, 27, 27, 0.2));
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.dropdown-item-logout:hover {
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.3));
  border-color: rgba(239, 68, 68, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(220, 38, 38, 0.15);
  color: var(--text-main);
}

.dropdown-item-logout svg {
  transition: transform 0.3s ease;
}

.dropdown-item-logout:hover svg {
  transform: translateX(-3px);
}



/* Sidebar Styles - Premium Redesign */
.sidebar {
  position: fixed;
  left: -340px;
  /* Slightly wider */
  top: 0;
  width: 340px;
  height: 100vh;

  /* Deep Glass Sidebar */
  /* Deep Glass Sidebar */
  background: var(--bg-sidebar);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-right: 1px solid var(--border-color);
  box-shadow: 20px 0 50px var(--shadow-color);

  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 110;
  display: flex;
  flex-direction: column;
}

.sidebar.open {
  left: 0;
}

/* Header Area */
.sidebar-header {
  padding: 24px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-header h2 {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-main);
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-header h2::before {
  content: '';
  display: block;
  width: 4px;
  height: 24px;
  background: linear-gradient(to bottom, #7c3aed, #d946ef);
  border-radius: 4px;
}

/* Premium 'New Chat' Button - Full Width */
.btn-new-chat {
  width: 100%;
  height: 52px;
  border: none;
  /* Gradient: Indigo -> Pink/Purple */
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  color: white;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  text-transform: none;
}

/* Add text to the button via pseudo-element if empty, or expect inner HTML change */
/* Assuming the button currently only has an SVG, we might want to add text in HTML or cleaner css content */
/* But since I cannot change HTML easily in this step (CSS only first), I will rely on the SVG centered or add text if I change JS. 
   WAIT, the user said "design and implement improvements for the + button".
   I will make it a big circle if I can't add text, OR I will assume I can edit HTML next. 
   Let's make it a nice big button with the icon. */

.btn-new-chat svg {
  width: 24px;
  height: 24px;
  transition: transform 0.4s ease;
}

.btn-new-chat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.btn-new-chat:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 15px 35px -5px rgba(124, 58, 237, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}



.btn-new-chat:hover::before {
  opacity: 1;
}

.btn-new-chat:active {
  transform: scale(0.96);
  box-shadow: 0 4px 15px -4px rgba(124, 58, 237, 0.4);
}


/* Chat List Container */
.chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-list::-webkit-scrollbar {
  width: 5px;
}

.chat-list::-webkit-scrollbar-track {
  background: transparent;
}

.chat-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.chat-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Premium Chat Item */
.chat-item {
  padding: 14px 18px;
  min-height: 64px;

  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 16px;

  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

/* Hover State */
.chat-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Active State */
.chat-item.active {
  /* Gradient Background */
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.2) 0%, rgba(124, 58, 237, 0.05) 100%);
  border-color: #7c3aed;
  box-shadow: 0 8px 30px -5px rgba(124, 58, 237, 0.25), inset 0 0 20px rgba(124, 58, 237, 0.1);
}

/* Active Indicator Line */
.chat-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  background: #d946ef;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 12px #d946ef;
}

/* Typography */
.chat-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.chat-item-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #e5e7eb;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}

.chat-item.active .chat-item-title {
  color: var(--text-main);
  font-weight: 600;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Optional: Date/Preview line if we decide to add it later, for now ensure current structure fits */
/* The JS generates .chat-item-title inside .chat-item-content. */

/* Action Buttons (Edit/Delete) - Only show on hover or active */
.chat-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;
}

.chat-item:hover .chat-item-actions,
.chat-item.active .chat-item-actions {
  opacity: 1;
  transform: translateX(0);
}

.chat-item-action-btn,
.chat-item-delete,
.chat-item-edit {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.chat-item-edit:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}

.chat-item-delete:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}



.chat-item-edit:hover {
  background: rgba(124, 58, 237, 0.15);
  color: #c4b5fd;
  opacity: 1 !important;
  transform: scale(1.1);
}

.chat-item-delete svg,
.chat-item-edit svg {
  width: 14px;
  height: 14px;
}

/* Chat item actions container */
.chat-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Hero Section */
/* Hero Section - Premium Redesign */
.hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  /* Slightly less vertical space to push content up */
  width: 100%;
  max-width: 1000px;
  margin: 80px auto 40px auto;
  /* Reduced from 200px to 80px */
  text-align: center;
  position: relative;
  z-index: 10;
  animation: heroFadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.hero-title {
  font-size: 56px;
  /* Larger */
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 48px;
  color: var(--text);
  letter-spacing: -0.03em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* Shimmer on Text */
.hero-title span {
  display: block;
  /* Break line naturally or force if needed */
  font-weight: 800;
  background: linear-gradient(to right, #ffffff, #c084fc, #8b5cf6, #ffffff);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shineText 8s linear infinite;
  filter: drop-shadow(0 0 20px rgba(192, 132, 252, 0.4));
}

@keyframes shineText {
  to {
    background-position: 300% center;
  }
}

.hero-mic-btn {
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: rgba(148, 163, 184, 0.7);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  z-index: 2;
}

.hero-mic-btn:hover {
  background: transparent;
  color: var(--text-main);
  transform: translateY(-50%);
}

.hero-mic-btn.recording {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  animation: pulse-red 1.5s infinite;
}

/* Global Audio Overlay */
.audio-recording-container-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  animation: fadeIn 0.2s ease-out;
}

.arc-content {
  background: #181824;
  padding: 30px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  min-width: 340px;
}

.audio-visualizer-canvas {
  width: 100%;
  height: 80px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
}

.recording-timer {
  font-size: 32px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-main);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.recording-status {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ==========================================
   INLINE VOICE RECORDING BAR
   Modern inline recording bar that replaces 
   the textarea when recording voice messages
   ========================================== */

/* ==========================================
   INLINE VOICE RECORDING BAR
   Modern inline recording bar that replaces 
   the textarea when recording voice messages
   ========================================== */

.inline-recording-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  animation: fadeIn 0.2s ease-out;
  /* Default: transparent to blend with composer row container */
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

/* Cancel button (X) */
.recording-cancel-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: transparent;
  padding: 0 4px;
}

/* Red Pulsing Dot */
.recording-dot {
  width: 8px;
  height: 8px;
  background-color: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
  animation: pulseDot 1.5s infinite;
  margin-right: -4px;
  /* Slight adjustment closer to timer */
}

@keyframes pulseDot {
  0% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }

  70% {
    transform: scale(1.1);
    opacity: 0.8;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Layout Items */
.recording-cancel-btn,
.recording-confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  /* Default dark mode bg */
  border: none;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.recording-cancel-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.recording-confirm-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Light Theme Overrides for Buttons */
[data-theme="light"] .recording-cancel-btn,
[data-theme="light"] .recording-confirm-btn {
  background: #f3f4f6;
  /* Light mode bg */
  color: #4b5563;
}

[data-theme="light"] .recording-cancel-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

[data-theme="light"] .recording-confirm-btn:hover {
  background: #e5e7eb;
  color: #1f2937;
}


/* Timer */
.recording-timer-inline {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  /* Default dark mode */
  min-width: 45px;
  text-align: center;
}

[data-theme="light"] .recording-timer-inline {
  color: #1f2937;
}

/* Visualizer Container */
.voice-visualizer-container {
  flex: 1;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  padding: 0 8px;
  /* Breathing room */
}

/* Canvas */
.voice-visualizer-canvas {
  width: 100%;
  height: 100%;
}

/* Hide all normal inputs and buttons when parent has .recording class */

/* Composer adjustments */
.composer-input-row.recording {
  /* Keep layout stable - no padding/border changes */
  background: rgba(255, 255, 255, 0.04);
}

.composer-input-row.recording .textarea,
.composer-input-row.recording .btn-attach,
.composer-input-row.recording .btn-mic,
.composer-input-row.recording .btn-send {
  display: none !important;
}

.composer-input-row.recording .inline-recording-bar {
  display: flex !important;
}

/* Hero adjustments */
.main-input-wrapper.recording .glass-input-large,
.main-input-wrapper.recording .hero-mic-btn,
.main-input-wrapper.recording .input-submit-btn {
  display: none !important;
}

/* Hero bar needs its own background since wrapper is transparent */
.main-input-wrapper.recording .inline-recording-bar {
  display: flex !important;
  position: relative;
  width: 100%;
  height: 72px;
  /* Match properties of glass-input-large */
  margin: 0;
  padding: 0 16px;
  z-index: 10;
  background: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Light theme adjustments */
[data-theme="light"] .recording-cancel-btn {
  background: rgba(0, 0, 0, 0.06);
  color: #64748b;
}

[data-theme="light"] .recording-cancel-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}



[data-theme="light"] .main-input-wrapper.recording .inline-recording-bar {
  background: #ffffff;
  border-color: rgba(203, 17, 171, 0.3);
}

/* Action Cards */
.action-cards-row {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Model Dropdown (inside input) */
.model-dropdown-wrapper {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.model-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  height: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.model-dropdown-trigger:hover,
.model-dropdown-wrapper.open .model-dropdown-trigger {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.model-dropdown-trigger .model-icon {
  width: 16px;
  height: 16px;
  color: rgba(148, 163, 184, 0.8);
  filter: none;
}

.model-dropdown-trigger .model-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.model-dropdown-trigger .chevron {
  width: 14px;
  height: 14px;
  opacity: 0.5;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: 2px;
}

.model-dropdown-wrapper.open .model-dropdown-trigger .chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.model-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 160px;
  background: rgba(18, 18, 27, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.98);
  transform-origin: top left;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 100;
}

.model-dropdown-wrapper.open .model-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.model-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  position: relative;
}

.model-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transform: translateX(2px);
}

.model-dropdown-item.active {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.model-dropdown-item svg:first-child {
  width: 20px;
  height: 20px;
  color: rgba(148, 163, 184, 0.8);
  flex-shrink: 0;
  filter: none;
}

.model-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.model-item-name {
  font-weight: 500;
  font-size: 13px;
}

.model-item-desc {
  display: none;
}

.model-dropdown-item .check-icon {
  width: 18px;
  height: 18px;
  color: #10b981;
  opacity: 0;
  flex-shrink: 0;
  transform: scale(0.5);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.model-dropdown-item.active .check-icon {
  opacity: 1;
  transform: scale(1);
}

/* Adjust hero input padding for model selector */
.main-input-wrapper .glass-input-large {
  padding-left: 120px;
}

/* Light theme */
[data-theme="light"] .model-dropdown-trigger {
  background: #f3f4f6;
  border-color: transparent;
  color: #4b5563;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .model-dropdown-trigger:hover,
[data-theme="light"] .model-dropdown-wrapper.open .model-dropdown-trigger {
  background: #e5e7eb;
  color: #111827;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .model-dropdown-menu {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .model-dropdown-item {
  color: #4b5563;
}

[data-theme="light"] .model-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #111827;
}

[data-theme="light"] .model-dropdown-item.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(217, 70, 239, 0.05) 100%);
  border-color: rgba(124, 58, 237, 0.1);
  color: #111827;
}

[data-theme="light"] .model-item-desc {
  color: #9ca3af;
}

[data-theme="light"] .model-dropdown-trigger .model-icon {
  filter: none;
}


/* Spotlight Cards */
.action-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.action-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
}

.action-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-main);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.4), 0 0 15px rgba(124, 58, 237, 0.2);
}

.action-card:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* Main Input Field - Hyper Glass */
.main-input-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 4px;
  /* Space for animated border */
  border-radius: 28px;
  background: transparent;
  transition: transform 0.3s ease;
}

/* Rotating gradient border pseudo-element */
/* Rotating gradient border pseudo-element removed to fix glare */
.main-input-wrapper::before {
  content: none;
}

.main-input-wrapper:focus-within {
  transform: scale(1.02);
}

.main-input-wrapper:focus-within::before {
  content: none;
}

@keyframes borderRotate {
  to {
    background-position: 200% center;
  }
}

.glass-input-large {
  width: 100%;
  height: 60px;
  /* Slightly taller than composer but minimal */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  padding: 0 120px 0 24px;
  /* Space for buttons */
  font-size: 16px;
  font-weight: 500;
  color: var(--text-main);
  transition: all 0.2s ease;
  backdrop-filter: blur(12px);
  box-shadow: none;
}

.glass-input-large:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.glass-input-large::placeholder {
  color: rgba(255, 255, 255, 0.2);
  font-weight: 300;
}

.input-submit-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(148, 163, 184, 0.8);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: none;
  z-index: 2;
}

.input-submit-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  transform: translateY(-50%);
  box-shadow: none;
  filter: none;
}

.input-submit-btn svg {
  color: var(--text-main);
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
  transition: transform 0.3s ease;
}

.input-submit-btn:hover svg {
  transform: translateX(2px);
}


/* Inline chat title input */
.chat-item-title-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 6px 0;
  border: none;
  border-bottom: 1.5px solid #6366f1;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #1f2937;
  background: transparent !important;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.chat-item-title-input:focus {
  border-bottom-color: #8b5cf6;
}

.chat-item-title-input::placeholder {
  color: #9ca3af;
}

/* Hide browser autofill/autocomplete icons */
.chat-item-title-input::-webkit-contacts-auto-fill-button,
.chat-item-title-input::-webkit-credentials-auto-fill-button,
.chat-item-title-input::-webkit-calendar-picker-indicator,
.chat-item-title-input::-webkit-inner-spin-button,
.chat-item-title-input::-webkit-outer-spin-button,
.chat-item-title-input::-webkit-search-cancel-button,
.chat-item-title-input::-webkit-clear-button {
  display: none !important;
  -webkit-appearance: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.chat-item-title-input::-ms-reveal,
.chat-item-title-input::-ms-clear {
  display: none !important;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 105;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Main Content */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  gap: 32px;
  overflow: visible;
  background: transparent;
}

.view {
  display: none;
  flex: 1 1 auto;
  overflow: visible;
}

.view.active {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Chat View - Specific containment for scrolling */
#chatView.view.active {
  overflow: visible;
  height: auto;
  /* Fill remaining space in flex container */
  padding: 0 !important;
  margin: 0 !important;
}

.chat-container {
  flex: 1;
  min-height: calc(100vh - var(--header-height, 80px));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: 0;
  gap: 0;
  position: relative;
  overflow: visible !important;
  /* Allow container content to expand for global scroll */
  height: auto;
  max-height: none;
}

/* Prompts Panel */
@keyframes promptFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.prompts-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 247, 255, 0.98));
  border: 2px solid rgba(124, 92, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(124, 92, 255, 0.12), 0 0 0 1px rgba(124, 92, 255, 0.06);
  overflow: hidden;
  transition: all 0.3s ease;
  max-width: var(--chat-max-width);
  margin: 0 auto;
  width: min(var(--chat-max-width), calc(100% - var(--chat-side-padding) * 2));
}

.prompts-panel.collapsed .prompts-list {
  display: none;
}

.prompts-panel.collapsed .btn-collapse svg {
  transform: rotate(180deg);
}

.prompts-header {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid rgba(124, 92, 255, 0.15);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.05), rgba(149, 117, 255, 0.04));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.prompts-header h3 {
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, #7c5cff, #9575ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(124, 92, 255, 0.1);
}

.btn-collapse {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(124, 92, 255, 0.2);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.08), rgba(149, 117, 255, 0.08));
  color: rgba(124, 92, 255, 0.7);
  cursor: pointer;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(124, 92, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-collapse:hover {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.18), rgba(149, 117, 255, 0.18));
  border-color: rgba(124, 92, 255, 0.4);
  color: #7c5cff;
  transform: scale(1.08);
  box-shadow: 0 5px 16px rgba(124, 92, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-collapse:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(124, 92, 255, 0.15);
}

.btn-collapse svg {
  transition: transform 0.3s ease;
}

.prompts-list {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  max-height: 180px;
  overflow-y: auto;
  background: linear-gradient(135deg, rgba(249, 247, 255, 0.8), rgba(255, 255, 255, 0.6));
}

.prompt-chip {
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.12) 0%, rgba(149, 117, 255, 0.12) 100%);
  border: 2px solid rgba(124, 92, 255, 0.25);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 14px;
  font-weight: 600;
  color: #5940cc;
  text-align: left;
  box-shadow: 0 3px 12px rgba(124, 92, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.2px;
  animation: promptFadeIn 0.4s ease-out backwards;
}

.prompt-chip:nth-child(1) {
  animation-delay: 0.05s;
}

.prompt-chip:nth-child(2) {
  animation-delay: 0.1s;
}

.prompt-chip:nth-child(3) {
  animation-delay: 0.15s;
}

.prompt-chip:nth-child(4) {
  animation-delay: 0.2s;
}

.prompt-chip:nth-child(5) {
  animation-delay: 0.25s;
}

.prompt-chip:nth-child(6) {
  animation-delay: 0.3s;
}

.prompt-chip:nth-child(7) {
  animation-delay: 0.35s;
}

.prompt-chip:nth-child(8) {
  animation-delay: 0.4s;
}

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

.prompt-chip::after {
  content: '✨';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: 0;
  transition: all 0.3s ease;
}


/* Users Statistics Redesign */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.stat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 4px;
}

.stat-subtext {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Specific Card Styles */
.stat-card.paid .stat-icon {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.stat-card.paid .stat-value {
  color: var(--text);
}

.stat-card.free .stat-icon {
  background: rgba(245, 158, 11, 0.1);
  color: var(--accent);
}

.stat-card.revenue .stat-icon {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
}

/* Modern Table Styles */
.table-container {
  background: white;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.table-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
}

.table-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.table-actions {
  display: flex;
  gap: 12px;
}

.modern-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.modern-table th {
  padding: 16px 24px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #f9fafb;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.modern-table td {
  padding: 16px 24px;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.modern-table tr:last-child td {
  border-bottom: none;
}

.modern-table tr:hover td {
  background: #f9fafb;
}

.user-cell {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.user-email {
  font-size: 12px;
  color: var(--text-muted);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.status-badge.active {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.status-badge.new {
  background: rgba(245, 158, 11, 0.1);
  color: var(--accent);
}

.money-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.money-value.positive {
  color: var(--success);
}

.money-value.neutral {
  color: var(--text);
}

.prompt-chip:hover::before {
  left: 100%;
}

.prompt-chip:hover::after {
  opacity: 1;
  right: 14px;
}

.prompt-chip:hover {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.22) 0%, rgba(149, 117, 255, 0.22) 100%);
  border-color: rgba(124, 92, 255, 0.5);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(124, 92, 255, 0.25), 0 0 0 4px rgba(124, 92, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #7c5cff;
  padding-right: 42px;
}

.prompt-chip:active {
  transform: translateY(-2px) scale(0.98);
  box-shadow: 0 4px 16px rgba(124, 92, 255, 0.18), 0 0 0 3px rgba(124, 92, 255, 0.1);
}

.prompts-list:empty::after {
  content: '✨ Нет сохранённых промптов. Добавьте в разделе "Промпты".';
  display: block;
  padding: 32px 24px;
  text-align: center;
  color: rgba(124, 92, 255, 0.65);
  font-size: 14px;
  font-weight: 600;
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.06), rgba(149, 117, 255, 0.06));
  border-radius: 10px;
  border: 2px dashed rgba(124, 92, 255, 0.25);
  letter-spacing: 0.2px;
}

.prompts-list::-webkit-scrollbar {
  width: 10px;
}

.prompts-list::-webkit-scrollbar-track {
  background: rgba(124, 92, 255, 0.08);
  border-radius: 5px;
  margin: 4px 0;
}

.prompts-list::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.4), rgba(149, 117, 255, 0.4));
  border-radius: 5px;
  border: 2px solid rgba(249, 247, 255, 0.5);
  transition: all 0.3s ease;
}

.prompts-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.7), rgba(149, 117, 255, 0.7));
  box-shadow: 0 0 10px rgba(124, 92, 255, 0.4);
  border-color: rgba(249, 247, 255, 0.8);
}

.messages {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  /* Stack vertically */
  gap: 24px;
  /* More breathing room */
  padding: 24px;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  position: relative;
  /* Allow children to position themselves */
  align-items: stretch;
  overflow-y: visible !important;
  /* Ensure messages area handles the scrolling */
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Add space after all messages so composer doesn't cover them */
/* Note: Actual padding is now calculated dynamically via JavaScript (updateMessagesBottomPadding) */
.messages::after {
  content: '';
  display: block;
  height: 60px;
  width: 100%;
  flex-shrink: 0;
}

/* Extra space after last message */
.messages .msg:last-child {
  margin-bottom: 0 !important;
}

/* Date separator between messages - Premium 2026 */
.date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  margin: 8px 0;
  position: relative;
  z-index: 5;
}

.date-separator-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: all 0.3s ease;
}

.date-separator-text:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  color: var(--text-main);
}

.scroll-down {
  display: none;
}

.scroll-down.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-down:hover {
  box-shadow: 0 24px 40px rgba(99, 102, 241, 0.4);
  transform: translateY(-2px) scale(1.05);
}

.scroll-down svg {
  stroke: currentColor;
}

.scroll-up {
  display: none;
}

.scroll-up.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-up:hover {
  box-shadow: 0 18px 34px rgba(99, 102, 241, 0.3);
  transform: translateY(-2px) scale(1.05);
}

.scroll-up svg {
  stroke: currentColor;
}

.msg {
  display: flex;
  gap: 16px;
  /* Increased gap */
  max-width: 85%;
  width: fit-content;
  /* Allow natural sizing for proper align-self positioning */
  /* Slightly narrower for better readability */
  margin-right: auto !important;
  margin-left: 0 !important;
  /* Align to left by default (AI/assistant) */
  align-self: flex-start !important;
  position: relative;
  animation: msgSlideIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.msg.assistant {
  align-self: flex-start !important;
  margin-right: auto !important;
  margin-left: 0 !important;
  flex-direction: row !important;
}


@keyframes msgSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.msg.msg-active-dropdown {
  position: relative;
  z-index: 100;
}

.msg.user {
  align-self: flex-end !important;
  flex-direction: row-reverse !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: left;
}

.avatar {
  width: 40px;
  min-width: 40px;
  /* Prevent squashing */
  height: 40px;
  flex-shrink: 0;
  /* Prevent squashing in flexbox */
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-main);
  background: linear-gradient(135deg, #7b5bff, #9575ff);
  box-shadow: 0 8px 16px rgba(123, 91, 255, 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border: none;
  /* Reset border */
}

.avatar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.avatar.user {
  /* Premium Warm Gradient for User */
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(253, 160, 133, 0.4);
}

.avatar.user svg {
  color: var(--text-main);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.avatar.user:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 25px rgba(253, 160, 133, 0.5);
  border-color: rgba(255, 255, 255, 0.4);
}

.bubble {
  background: rgba(18, 18, 28, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 16px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  line-height: 1.6;
  font-size: 15px;
  color: var(--text);
  transition: all 0.3s ease;
}

.bubble:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(124, 92, 255, 0.4);
  background: rgba(30, 30, 45, 0.8);
}

.msg.user .bubble {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  color: white;
}

.msg.user .bubble:hover {
  box-shadow: 0 12px 32px rgba(99, 102, 241, 0.45);
  background: var(--gradient-primary);
  /* Keep gradient on hover */
}

.bubble p {
  margin-bottom: 8px;
}

.bubble p:last-child {
  margin-bottom: 0;
}

/* =========================================
   PREMIUM MARKDOWN STYLES (Inside Bubble)
   ========================================= */

.bubble h1,
.bubble h2,
.bubble h3,
.bubble h4,
.bubble h5,
.bubble h6 {
  color: var(--text-main);
  font-weight: 700;
  margin-top: 16px;
  margin-bottom: 8px;
  line-height: 1.3;
}

.bubble h1 {
  font-size: 1.6em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.bubble h2 {
  font-size: 1.4em;
}

.bubble h3 {
  font-size: 1.25em;
}

.bubble ul,
.bubble ol {
  margin: 12px 0;
  padding-left: 24px;
}

.bubble li {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.9);
}

.bubble li::marker {
  color: var(--primary-light);
}

.bubble strong {
  font-weight: 700;
  color: var(--primary-light);
}

.bubble em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
}

.bubble blockquote {
  border-left: 4px solid var(--primary);
  background: rgba(139, 92, 246, 0.1);
  margin: 16px 0;
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
}

.bubble code {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.9em;
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.bubble pre {
  background: #0f0f13;
  /* Darker bg for code blocks */
  padding: 16px;
  border-radius: 12px;
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--border-color);
  position: relative;
}

.bubble pre code {
  background: transparent;
  padding: 0;
  border: none;
  font-size: 13px;
  color: #cbd5e1;
}

/* =========================================
   PREMIUM TABLE STYLES
   ========================================= */

.bubble table {
  width: 100%;
  border-collapse: separate;
  /* Required for border-radius */
  border-spacing: 0;
  margin: 20px 0;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
  /* Clips corners */
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bubble th {
  background: rgba(139, 92, 246, 0.15);
  /* Tinted header */
  font-weight: 600;
  color: var(--text-main);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 14px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}

.bubble td {
  padding: 12px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.2s;
}

.bubble tr:last-child td {
  border-bottom: none;
}

.bubble tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

.bubble tr:hover td {
  background: rgba(139, 92, 246, 0.05);
  color: var(--text-main);
}

/* Product thumbnails in tables */
.product-thumb-header {
  width: 80px;
  min-width: 80px;
  text-align: center !important;
}

.product-thumb-cell {
  width: 80px;
  min-width: 80px;
  padding: 4px 8px !important;
  text-align: center;
  vertical-align: middle;
}

.product-thumb {
  width: 70px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: zoom-in;
}

.product-thumb:hover {
  transform: none !important;
  width: 70px !important;
  height: 90px !important;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  filter: brightness(1.05);
}

.product-thumb-cell a {
  display: inline-block;
  text-decoration: none;
}

/* Dark mode support for thumbnails */
[data-theme="dark"] .product-thumb {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .product-thumb:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Product image lightbox overlay */
.product-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: zoom-out;
  animation: fadeIn 0.2s ease;
}

.product-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* Message files */
.message-files {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.message-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  cursor: pointer;
  max-width: 280px;
}

.message-file-item:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.message-file-item.image-preview {
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  overflow: hidden;
  max-width: 280px;
}

.message-file-item.image-preview img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.message-file-item .file-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 12px;
}

.message-file-item.image-preview .file-info {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.9);
}

.message-file-item .icon {
  font-size: 24px;
  flex-shrink: 0;
}

.message-file-item .file-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-file-item .file-size {
  font-size: 11px;
  color: var(--text-muted);
}

.msg.user .message-file-item {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.msg.user .message-file-item:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.msg.user .message-file-item .file-name {
  color: white;
}

.msg.user .message-file-item .file-size {
  color: rgba(255, 255, 255, 0.8);
}

.msg.user .bubble table th {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.msg.user .bubble table td {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Lists */
.bubble ul,
.bubble ol {
  margin: 12px 0;
  padding-left: 24px;
  line-height: 1.6;
}

.bubble li {
  margin-bottom: 6px;
}

.bubble ol {
  list-style-type: decimal;
}

.bubble ul {
  list-style-type: disc;
}

/* Copy button for assistant messages */
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 12px;
  background: rgba(123, 91, 255, 0.08);
  border: 1px solid rgba(123, 91, 255, 0.2);
  border-radius: 6px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  background: rgba(123, 91, 255, 0.15);
  border-color: rgba(123, 91, 255, 0.3);
  transform: translateY(-1px);
}

.copy-btn:active {
  transform: translateY(0);
}

.copy-btn svg {
  flex-shrink: 0;
}

.copy-btn-text {
  white-space: nowrap;
}

/* Composer - ChatGPT-style but compact */
.composer {
  position: relative;
  bottom: auto;
  left: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  backdrop-filter: none;
  border-top: none;
  box-shadow: none;
  z-index: 50;
  padding: 0 20px 48px 20px;
  /* Reduced from 100px to 48px (~2x lower position relative to screen bottom spacing) */
  flex-shrink: 0;
  margin-top: auto;
}



.composer-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  padding: 8px 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
  transition: all 0.2s ease;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.composer-input-row:focus-within {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  transform: none;
}

.attached-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 8px;
  min-height: 0;
}

.attached-files:empty {
  display: none;
}

.attached-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 172, 249, 0.08) 100%);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  max-width: 300px;
  position: relative;
}

.attached-file-item img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.attached-file-info {
  flex: 1;
  overflow: hidden;
}

.attached-file-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.attached-file-size {
  font-size: 11px;
  color: var(--text-muted);
}

.attached-file-remove {
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.attached-file-remove:hover {
  background: rgba(239, 68, 68, 0.2);
}

.btn-attach {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: rgba(148, 163, 184, 0.7);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.btn-attach svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5px;
}

.btn-attach:hover {
  color: var(--text-main);
  background: transparent;
  transform: none;
}

.btn-attach:active {
  transform: none;
}



.textarea {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  resize: none;
  min-height: 24px;
  max-height: 200px;
  padding: 0 8px;
  outline: none;
}

.textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.btn-mic {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: rgba(148, 163, 184, 0.7);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  flex-shrink: 0;
  margin-right: 0;
}

.btn-mic svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5px;
}

.btn-mic:hover {
  background: transparent;
  color: var(--text-main);
  transform: none;
}

.btn-mic.recording {
  background: rgba(239, 68, 68, 0.15);
  /* Red tint */
  color: #ef4444;
  /* Red icon */
  animation: micPulse 1.5s infinite;
}

@keyframes micPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Audio Visualizer Overlay (Inside input row when recording) */
.audio-recording-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 20, 30, 0.95);
  /* Cover input */
  backdrop-filter: blur(10px);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  z-index: 10;
  animation: fadeIn 0.2s ease;
}

.audio-visualizer-canvas {
  flex: 1;
  height: 18px;
  /* width is automatic via flex */
}

.recording-timer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #ef4444;
  font-weight: 600;
  min-width: 45px;
}

.btn-send {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(148, 163, 184, 0.8);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.btn-send svg {
  width: 18px;
  height: 18px;
}

.btn-send::before {
  display: none;
}

.btn-send:hover::before {
  display: none;
}

.btn-send:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  transform: none;
  box-shadow: none;
}

.btn-send:active {
  transform: none;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.btn-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.arrow-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(0deg);
}

.btn-send.has-text .arrow-icon {
  transform: rotate(-90deg);
}


.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
  flex: 1 1 auto;
  overflow: visible;
}

.settings-card .form-grid {
  margin-bottom: 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}


.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--surface);
  color: var(--text);
}

.form-group input:hover {
  border-color: var(--primary);
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(139, 158, 255, 0.1);
  transform: translateY(-1px);
}

.btn.primary {
  padding: 14px 28px;
  border: none;
  border-radius: 16px;
  background: #4f46e5;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.22);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn.primary:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(79, 70, 229, 0.24);
}

.btn.primary:active {
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(79, 70, 229, 0.18);
}

.btn.primary.full {
  width: 100%;
  justify-content: center;
}

.results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5vh;
  margin-top: 2vh;
  flex: 1 1 auto;
  overflow-y: auto;
}


/* Scrollbar */
.chat-container::-webkit-scrollbar {
  width: 8px;
}

.chat-container::-webkit-scrollbar-track {
  background: rgba(99, 102, 241, 0.05);
}

.chat-container::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(107, 110, 242, 0.35) 100%);
  border-radius: 4px;
}

.chat-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5) 0%, rgba(107, 110, 242, 0.55) 100%);
}

/* Loading */
.loader {
  width: 200px;
  height: 6px;
  background: rgba(124, 92, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin: 8px 0;
}

.loader-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  width: 0%;
  border-radius: 4px;
  transition: width 0.5s ease;
  animation: progress 15s cubic-bezier(0.1, 0.7, 1.0, 0.1) forwards;
}

@keyframes progress {
  0% {
    width: 0%;
  }

  20% {
    width: 30%;
  }

  50% {
    width: 60%;
  }

  80% {
    width: 85%;
  }

  100% {
    width: 92%;
  }
}

/* Admin Panel Styles */
.admin-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1;
  overflow: visible;
  height: auto;
  min-height: 0;
}


.prompts-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: visible;
  padding-bottom: 20px;
  height: auto;
}

.prompts-grid:empty::after {
  content: '📝 Нет промптов\AНажмите "Новый промпт" чтобы создать первый';
  white-space: pre-line;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(107, 110, 242, 0.06) 100%);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  min-height: 300px;
  grid-column: 1 / -1;
}

/* Scrollbar styles */
.prompts-section::-webkit-scrollbar,
.prompts-grid::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.prompts-section::-webkit-scrollbar-track,
.prompts-grid::-webkit-scrollbar-track {
  background: rgba(99, 102, 241, 0.05);
  border-radius: 10px;
}

.prompts-section::-webkit-scrollbar-thumb,
.prompts-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(107, 110, 242, 0.35) 100%);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.prompts-section::-webkit-scrollbar-thumb:hover,
.prompts-grid::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5) 0%, rgba(107, 110, 242, 0.55) 100%);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 16px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 20px 24px 16px;
  margin-top: 0;
  z-index: 40;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.section-header>div {
  flex: 1;
}

.section-header h2 {
  font-size: 24px;
  font-weight: 700;
  background: var(--gradient-text-bright);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 6px 0;
  letter-spacing: -0.4px;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(124, 58, 237, 0.2);
}

.section-header p {
  margin: 0;
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.prompts-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
  align-items: start;
  grid-auto-rows: min-content;
}

@media (min-width: 1600px) {
  .prompts-grid {
    grid-template-columns: repeat(auto-fill, minmax(700px, 1fr));
  }
}

.prompt-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100px;
  max-height: 160px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);
  animation: fadeInUp 0.4s ease-out backwards;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.prompt-card:nth-child(1) {
  animation-delay: 0.05s;
}

.prompt-card:nth-child(2) {
  animation-delay: 0.1s;
}

.prompt-card:nth-child(3) {
  animation-delay: 0.15s;
}

.prompt-card:nth-child(4) {
  animation-delay: 0.2s;
}

.prompt-card:nth-child(5) {
  animation-delay: 0.25s;
}

.prompt-card:nth-child(6) {
  animation-delay: 0.3s;
}

.prompt-card:nth-child(n+7) {
  animation-delay: 0.35s;
}

.prompt-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease, width 0.3s ease;
  pointer-events: none;
}

.prompt-card:hover:not(:active) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.35);
}

.prompt-card:hover:not(:active)::before {
  opacity: 1;
}

.prompt-card.active {
  border-color: var(--primary);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.2);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 242, 255, 0.96) 100%);
}

.prompt-card.active::before {
  opacity: 1;
  width: 5px;
}

.prompt-card:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06) !important;
  border-color: var(--border) !important;
  transition: none !important;
}

.prompt-card:active::before {
  opacity: 0 !important;
  transition: none !important;
}

.prompt-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.prompt-card p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  flex: 1;
  word-break: break-word;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 4.5em;
}

.prompt-tags {
  display: flex;
  gap: 5px;
  margin-top: auto;
  padding-top: 8px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(99, 102, 241, 0.08);
  min-height: 24px;
  max-height: 48px;
  overflow: hidden;
}

.tag {
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(107, 110, 242, 0.12) 100%);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
}

.tag:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(107, 110, 242, 0.18) 100%);
  transform: scale(1.05);
}

.editor-panel {
  position: relative;
  width: 100%;
  height: auto;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(30px);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(99, 102, 241, 0.25);
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-height: 500px;
  max-height: calc(100vh - 160px);
}

.editor-panel[style*="display: none"] {
  display: none !important;
}

@media (min-width: 1401px) {
  .editor-panel {
    max-height: calc(100vh - 140px);
  }
}

.editor-form {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 20px;
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 246, 255, 0.9) 100%);
}

.editor-content {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  flex: 1;
  min-height: 0;
}

.editor-content::-webkit-scrollbar {
  width: 6px;
}

.editor-content::-webkit-scrollbar-track {
  background: rgba(99, 102, 241, 0.05);
  border-radius: 3px;
}

.editor-content::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.25);
  border-radius: 3px;
  transition: background 0.2s ease;
}

.editor-content::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.4);
}

.editor-form .editor-actions {
  padding: 16px 20px;
  margin-top: 0;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(248, 246, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-top: 1.5px solid var(--border);
}


.editor-header h3 {
  font-size: 18px;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.btn-close {
  width: 36px;
  height: 36px;
  border: none;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.12) 100%);
  color: #ef4444;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

.btn-close::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-close:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.22) 100%);
  transform: scale(1.08) rotate(90deg);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.btn-close:hover::before {
  opacity: 1;
}

.btn-close:active {
  transform: scale(0.95) rotate(90deg);
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.2);
}

.btn-close svg {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.form-group {
  margin-bottom: 14px;
}

.form-group:last-of-type {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  transition: all 0.25s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.form-group textarea {
  resize: vertical;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  line-height: 1.6;
  min-height: 140px;
  max-height: 320px;
}

.file-upload {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-name {
  font-size: 13px;
  color: var(--text-muted);
}

.btn.ghost {
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn.ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text-main);
  transform: translateY(-1px);
}

.btn.ghost:active {
  transform: translateY(0);
}

.btn.danger {
  padding: 12px 20px;
  border: 1.5px solid rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.btn.danger:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

.editor-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1.5px solid var(--border);
  align-items: center;
}

.editor-actions .btn {
  white-space: nowrap;
  justify-content: center;
}

.editor-actions .btn.primary {
  grid-column: 1;
}

.editor-actions .btn.danger {
  grid-column: 2;
  min-width: 120px;
}

.toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  padding: 16px 24px;
  background: var(--gradient-primary);
  color: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1000;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.toast.warning {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
}

.toast.error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}

/* Tablet landscape to desktop */
@media (max-width: 1200px) {
  .top-header {
    padding: 16px 24px;
  }

  .header-left h1 {
    font-size: 19px;
  }

  .logo {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }

  .tabs {
    gap: 8px;
    padding: 6px;
  }

  .tab {
    padding: 11px 18px;
    font-size: 13.5px;
  }
}

@media (max-width: 1400px) {
  .prompts-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

@media (max-width: 900px) {

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    margin-bottom: 16px;
  }

  .section-header .btn.primary {
    width: 100%;
  }

  .prompts-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .prompt-card {
    min-height: 80px;
    max-height: 130px;
    padding: 12px 14px;
  }

  .prompt-card h3 {
    font-size: 15px;
  }

  .prompt-card p {
    font-size: 12.5px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .editor-form {
    padding: 20px;
  }

  .editor-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .editor-actions .btn.primary,
  .editor-actions .btn.danger {
    grid-column: 1;
  }
}

/* Medium screens - tablets */
@media (max-width: 900px) {
  .top-header {
    padding: 14px 16px;
    flex-wrap: wrap;
  }

  .header-left {
    gap: 12px;
  }

  .header-left h1 {
    font-size: 18px;
  }

  .logo {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }

  .header-right {
    gap: 16px;
    flex-wrap: wrap;
  }

  .tabs {
    gap: 6px;
    padding: 6px;
  }

  .tab {
    padding: 10px 16px;
    font-size: 13px;
  }

  .tab svg {
    width: 16px;
    height: 16px;
  }

  .btn-logout {
    padding: 8px 16px;
    font-size: 13px;
  }

  .user-info {
    font-size: 13px;
    gap: 12px;
  }

  /* Better Sidebar for Mobile */
  .sidebar {
    width: 85vw;
    max-width: 320px;
  }
}

/* Small screens - mobile landscape */
@media (max-width: 768px) {
  .top-header {
    padding: 12px 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .header-left {
    justify-content: flex-start;
    width: 100%;
  }

  .header-right {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .tabs {
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    padding: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    padding: 10px 12px;
    font-size: 12px;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .tab .tab-text {
    display: inline;
  }

  .user-info {
    width: 100%;
    justify-content: space-between;
    padding: 8px 4px;
  }
}

/* Extra small screens - mobile portrait */
@media (max-width: 600px) {
  .top-header {
    padding: 10px 12px;
  }

  .header-left h1 {
    font-size: 16px;
  }

  .logo {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .btn-menu {
    width: 36px;
    height: 36px;
  }

  .header-right {
    gap: 10px;
  }

  .tabs {
    gap: 3px;
    padding: 4px;
  }

  .tab {
    padding: 8px 10px;
    font-size: 11px;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    border-radius: 12px;
    /* Slightly softer corners for touch */
  }

  /* Hide tab text on very small screens, keep only icons */
  .tab .tab-text {
    display: none;
  }

  .tab svg {
    width: 18px;
    height: 18px;
    margin: 0;
  }

  .user-info {
    font-size: 12px;
    gap: 10px;
    padding: 6px 0;
  }

  #userBadge {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
  }

  .btn-logout {
    padding: 6px 12px;
    font-size: 12px;
    flex-shrink: 0;
  }

  .section-header {
    padding: 12px 0;
  }

  .section-header h2 {
    font-size: 20px;
  }

  .prompt-card {
    min-height: 75px;
    max-height: 120px;
    padding: 12px 14px;
  }

  .prompt-card h3 {
    font-size: 14.5px;
  }

  .prompt-card p {
    font-size: 12px;
  }

  .tag {
    font-size: 10px;
    padding: 3px 8px;
  }

  .editor-form {
    padding: 16px;
  }

  .editor-header h3 {
    font-size: 18px;
  }

  .form-group label {
    font-size: 12px;
  }

  .form-group input,
  .form-group textarea {
    font-size: 13px;
    padding: 10px 14px;
  }

  .editor-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .editor-actions .btn {
    width: 100%;
    grid-column: 1 !important;
  }

  .editor-actions .btn.primary {
    order: 1;
  }

  .editor-actions .btn.danger {
    order: 2;
  }
}

/* Very small screens - small phones */
@media (max-width: 400px) {
  .top-header {
    padding: 8px 10px;
  }

  .header-left {
    gap: 8px;
  }

  .header-left h1 {
    font-size: 14px;
  }

  .logo {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .btn-menu {
    width: 32px;
    height: 32px;
  }

  .tabs {
    padding: 3px;
    gap: 2px;
  }

  .tab {
    padding: 8px;
    border-radius: 10px;
  }

  .tab svg {
    width: 20px;
    height: 20px;
  }

  #userBadge {
    max-width: 100px;
    font-size: 11px;
  }

  .btn-logout {
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* Admin sections */
.admin-section {
  display: none;
  width: 100%;
  gap: 40px;
  padding: 48px 0 104px;
  position: relative;
}

.admin-section.active {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-items: center;
}

.admin-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f5f6fb;
  z-index: -1;
}

.settings-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
}

.settings-card {
  position: relative;
  background: #ffffff;
  border-radius: 22px;
  padding: 28px 26px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  flex: 1 1 340px;
  max-width: 400px;
}

.settings-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
  border-color: rgba(15, 23, 42, 0.1);
}

/* Settings Banner */
.settings-banner {
  width: 100%;
  padding: 14px 22px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  flex: 1 1 100%;
}

.banner-heading {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.3px;
}

.banner-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.banner-label {
  font-size: 13px;
  letter-spacing: 0.14em;
  font-weight: 600;
  text-transform: uppercase;
  color: #6366f1;
}

.banner-status-text {
  font-size: 16px;
  color: #0f172a;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.banner-status-text strong {
  font-size: 17px;
}

.banner-status-text .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 12px;
  color: #1f2937;
  background: rgba(59, 130, 246, 0.12);
}

.banner-status-text .status-badge.on {
  background: rgba(16, 185, 129, 0.16);
  color: #047857;
}

.banner-status-text .status-badge.off {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.banner-status-text .status-desc {
  font-size: 13px;
  color: #475569;
}

.banner-divider {
  display: none;
}

.banner-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
  width: 100%;
}

.banner-metric {
  background: #f8fafc;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 14px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.metric-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.metric-value {
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.2px;
}

.settings-card h2 {
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px 0;
  letter-spacing: -0.4px;
  line-height: 1.25;
}

.settings-card p {
  font-size: clamp(13px, 1.1vw, 17px);
  margin-bottom: 0;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 90%;
}

.settings-card form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


/* Premium Groups List */
.groups-list-premium {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.groups-list-premium .group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.groups-list-premium .group-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.empty-state-small {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

/* Text Accent Button (for instructions) */
.btn-text-accent {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-text-accent:hover {
  color: var(--primary-light);
  text-decoration: underline;
}

/* Editor Modal Adjustments */
.editor-modal {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  /* Prevent overflow on tall screens */
}

.editor-body {
  overflow-y: auto;
  flex: 1;
  /* Allow body to scroll */
}

.settings-card .form-group {
  margin: 0;
  flex: 0 0 auto;

  gap: 12px;
  display: flex;
  flex-direction: column;
}

.settings-card .form-group label {
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
  display: block;
}

.settings-card .form-group input {
  padding: 14px 16px;
  font-size: clamp(14px, 1.1vw, 18px);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
  width: 100%;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.settings-card .form-group input:focus {
  border-color: rgba(99, 102, 241, 0.55);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
  outline: none;
}

.settings-card .form-group span {
  font-size: clamp(11px, 0.9vw, 14px);
  display: block;
  margin-top: 8px;
  color: var(--text-muted);
  line-height: 1.4;
}

.settings-card .btn {
  padding: 16px 20px;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 700;
  flex: 0 0 auto;
}

/* Pricing Display Styles */
.pricing-display .pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.pricing-item {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  padding: 20px;
  border: 2px solid rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pricing-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #6366f1, #8b5cf6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pricing-item:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 12px 24px rgba(99, 102, 241, 0.12);
}

.pricing-item:hover::before {
  opacity: 1;
}

.pricing-item.basic .pricing-icon {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.pricing-item.tools .pricing-icon {
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
}

.pricing-item.free .pricing-icon {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.pricing-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.pricing-item:hover .pricing-icon {
  transform: scale(1.1);
}

.pricing-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pricing-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-value {
  font-size: 36px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -1px;
  line-height: 1;
}

@media (max-width: 768px) {
  .pricing-display .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-item {
    padding: 16px;
  }

  .pricing-value {
    font-size: 24px;
  }
}

@media (max-width: 1400px) {
  .main {
    padding: 28px 32px 52px;
  }

  .settings-container {
    padding: 0 32px;
  }
}

@media (max-width: 1024px) {
  .settings-container {
    padding: 0 32px;
    gap: 28px;
  }

  .settings-banner {
    padding: 18px;
    gap: 12px;
  }

  .banner-metrics {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .daily-free-requests-card {
    flex: 1 1 100%;
    padding: 28px !important;
  }
}

@media (max-width: 900px) {
  .main {
    padding: 24px;
    gap: 28px;
  }

  .settings-container {
    padding: 0 16px;
    gap: 24px;
  }

  .settings-banner {
    padding: 22px;
  }

  .settings-card {
    padding: 24px;
    border-radius: 22px;
    flex: 1 1 100%;
    max-width: none;
  }

  .daily-free-requests-card {
    padding: 26px 22px !important;
    flex: 1 1 100%;
  }
}

@media (max-width: 600px) {
  .main {
    padding: 20px 16px 32px;
    gap: 24px;
  }

  .settings-card {
    padding: 20px;
    border-radius: 20px;
    flex: 1 1 100%;
  }

  .settings-banner {
    padding: 20px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    margin-bottom: 20px;
  }

  .settings-card:last-child {
    padding: 20px;
    gap: 16px;
    flex: 1 1 100%;
  }

  .daily-free-requests-card {
    padding: 22px !important;
    flex: 1 1 100%;
  }
}

/* Daily Free Requests Card - Glassmorphism Style */
.daily-free-requests-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
  position: relative;
  overflow: hidden;
  flex: 1 1 340px;
  max-width: 400px;
  padding: 28px 26px !important;
}

.daily-free-requests-card:hover {
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.07);
  transform: translateY(-3px);
}

/* Checkbox Group */
.checkbox-group {
  background: #f8fafc;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  margin-bottom: 16px !important;
  box-shadow: none;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 8px;
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #4f46e5;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  margin-top: 6px;
}

.checkbox-label .checkbox-text {
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
}

.form-hint {
  font-size: clamp(11px, 0.9vw, 13px) !important;
  display: block;
  margin-top: 6px !important;
  color: var(--text-muted) !important;
  line-height: 1.4;
}

/* Form Select and Time */
.form-select,
.form-time {
  padding: 14px 16px;
  font-size: clamp(14px, 1.1vw, 18px);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
  width: 100%;
  transition: all 0.2s ease;
  box-sizing: border-box;
  color: #1f2937;
}

.form-select:focus,
.form-time:focus {
  border-color: rgba(99, 102, 241, 0.55);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
  outline: none;
}

.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Button Group */
.button-group {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.button-group .btn {
  margin-top: 0 !important;
  flex: 1 1 220px;
}

.flex-1 {
  flex: 1;
}

.btn.secondary {
  background: #e5e7eb;
  color: #1f2937;
  border: none;
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(148, 163, 184, 0.18);
}

.btn.secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(148, 163, 184, 0.2);
}

.btn.secondary:active {
  transform: translateY(0);
}

/* Status Display */
.status-display {
  margin-top: 20px;
  padding: 18px 20px;
  background: #f8fafc;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.status-label {
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.status-content {
  font-size: clamp(13px, 1.05vw, 15px);
  color: #1f2937;
  line-height: 1.6;
}

.status-content strong {
  font-weight: 700;
  font-size: clamp(14px, 1.15vw, 16px);
}

/* Enhanced Form Grid for Daily Requests */
.daily-free-requests-card .form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 0;
}

button,
.btn,
.tab,
.orb,
.user-avatar,
.status-pill,
.btn-menu,
.btn-new-chat,
.btn-tariffs,
.sp-btn-upgrade,
.nav-item,
.brand-logo-header,
.send-btn,
.attachment-btn,
.chat-item,
.profile-dropdown,
.dropdown-item-logout {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none !important;
  caret-color: transparent;
}

/* Animations for glassmorphism card */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.daily-free-requests-card.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%);
  animation: shimmer 2s infinite;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .button-group {
    flex-direction: column;
    gap: 1vh;
  }

  .checkbox-group {
    padding: 1.5vh 1.5vw;
  }

  .status-display {
    padding: 1.5vh 1.5vw;
  }
}

/* Top-up Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
}

.modal-content {
  position: relative;
  background: rgba(18, 18, 28, 0.9) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 28px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 40px rgba(124, 92, 255, 0.15);
  /* Premium purple glow */
  max-width: 500px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 64px);
  overflow: hidden;
  /* Changed to hidden to clip children */
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: white !important;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.modal-header h2 {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, #fff 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  letter-spacing: -0.4px;
}

.modal-close {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  cursor: pointer;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: all 0.2s ease;
  color: var(--text-muted);
}

.modal-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  transform: scale(1.05);
}

.modal-body {
  padding: 28px;
  overflow-y: auto;
  flex: 1;
}

.modal-body p {
  color: rgba(255, 255, 255, 0.6) !important;
}

.modal-footer {
  display: flex;
  gap: 12px;
  padding: 20px 28px;
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
  flex-shrink: 0;
}

.topup-amounts {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px 16px !important;
  margin-bottom: 20px;
  width: 100%;
}

/* Package wrapper - contains button + subtitle */
.topup-package-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  /* Fill grid cell */
  position: relative;
}

.topup-package-wrapper:hover .pkg-description {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.pkg-description {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
  background: rgba(31, 41, 55, 0.95);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  width: max-content;
  max-width: 180px;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.pkg-description::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 4px 4px 4px;
  border-style: solid;
  border-color: transparent transparent rgba(31, 41, 55, 0.95) transparent;
}

/* Compact horizontal button */
/* Compact horizontal button - Premium Style */
.topup-amount-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.topup-amount-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(167, 139, 250, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.topup-amount-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.topup-amount-btn:hover::before {
  opacity: 1;
}

.topup-amount-btn.active,
.topup-amount-btn.selected {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.25), inset 0 0 0 1px rgba(139, 92, 246, 0.2);
}

.topup-amount-btn.active .pkg-name,
.topup-amount-btn.selected .pkg-name {
  color: white;
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.5);
}

.topup-amount-btn.active .pkg-price,
.topup-amount-btn.selected .pkg-price {
  color: #c4b5fd;
}

/* Package name in button */
.pkg-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.2s ease;
}

/* Price in button */
.pkg-price {
  font-size: 13px;
  font-weight: 700;
  color: #a78bfa;
  transition: color 0.2s ease;
}

/* Requests subtitle under button */
.pkg-requests {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.topup-amount-btn.selected .pkg-name,
.topup-amount-btn.active .pkg-name,
.topup-amount-btn.selected .pkg-price,
.topup-amount-btn.active .pkg-price {
  color: white;
}

/* Popular package button styling - more prominent */
.topup-amount-btn.popular {
  border: 2px solid rgba(236, 72, 153, 0.7) !important;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(167, 139, 250, 0.12)) !important;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.25), 0 4px 12px rgba(0, 0, 0, 0.1);
}

.topup-amount-btn.popular:hover {
  border-color: rgba(236, 72, 153, 0.9) !important;
  box-shadow: 0 0 25px rgba(236, 72, 153, 0.4), 0 10px 20px rgba(236, 72, 153, 0.2);
  transform: translateY(-3px) scale(1.02);
}

.topup-amount-btn.popular.selected {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(167, 139, 250, 0.2)) !important;
  border-color: #ec4899 !important;
  box-shadow: 0 0 30px rgba(236, 72, 153, 0.5), inset 0 0 0 1px rgba(236, 72, 153, 0.4);
}

/* Popular badge inside topup button */
.topup-amount-btn .popular-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4);
  z-index: 1;
}

/* Popular wrapper styling */
.topup-package-wrapper.popular {
  position: relative;
}

.topup-info {
  margin-top: 32px;
  padding: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.info-row span:last-child {
  font-size: 20px;
  color: white;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

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

@media (max-width: 768px) {
  .topup-amounts {
    grid-template-columns: repeat(3, 1fr) !important;
    /* 3 columns on mobile as requested */
    gap: 12px;
  }

  .topup-package-wrapper {
    min-width: 85px;
    max-width: 110px;
  }

  .topup-amount-btn {
    padding: 8px 10px;
    gap: 4px;
  }

  .pkg-name,
  .pkg-price {
    font-size: 11px;
  }

  .pkg-requests {
    font-size: 10px;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 20px;
  }

  .modal-content {
    max-width: calc(100% - 24px);
    max-height: calc(100vh - 48px);
  }
}

/* ============================================
   GROUP CARD & TOPIC TAG STYLES (Global)
   ============================================ */

/* Group Card (Rich List) */
.group-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  transition: all 0.2s ease;
  animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.group-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

.group-card.success {
  border-left: 3px solid #10B981;
}

.group-card.error {
  border-left: 3px solid #EF4444;
  background: rgba(239, 68, 68, 0.05);
}

.group-card.loading {
  border-left: 3px solid var(--accent);
}

.group-status-icon {
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.group-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.group-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: monospace;
  margin-top: 2px;
}

.group-error {
  font-size: 12px;
  color: var(--text-danger);
  margin-top: 2px;
}

.btn-icon-remove {
  padding: 6px;
  color: var(--text-muted);
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.6;
  flex-shrink: 0;
}

.btn-icon-remove:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  opacity: 1;
}

/* Forum Topics UI inside card */
.group-forum-topics {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: rgba(124, 58, 237, 0.06);
  border-radius: 10px;
  padding: 8px 12px;
}

.forum-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: white;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* Topic tags container */
.topic-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
}

/* Topic tag pill */
.topic-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(124, 58, 237, 0.15);
  color: #c4b5fd;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid rgba(124, 58, 237, 0.25);
  transition: all 0.2s ease;
}

.topic-tag:hover {
  background: rgba(124, 58, 237, 0.25);
}

/* Hint for when no topics selected */
.topic-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* Small edit button for topics */
.glass-btn-xs {
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.glass-btn-xs:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.4);
  color: #a78bfa;
}

/* Mobile optimization for users statistics table */
@media (max-width: 768px) {

  /* Fix users view margins and padding on mobile */
  #usersView {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Fix admin users section */
  #usersSection {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Fix main container height - account for header */
  #usersView>div,
  #usersSection>div {
    height: calc(100vh - 64px) !important;
    max-height: calc(100vh - 64px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Header section with statistics */
  #usersView>div>div:first-child,
  #usersSection>div>div:first-child {
    flex-shrink: 0 !important;
    padding: 12px !important;
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  /* Group Card (Rich List) */
  .group-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.2s ease;
  }

  .group-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
  }

  .group-card.success {
    border-left: 3px solid #10B981;
  }

  .group-card.error {
    border-left: 3px solid #EF4444;
    background: rgba(239, 68, 68, 0.05);
  }

  .group-card.loading {
    border-left: 3px solid var(--accent);
  }

  .group-status-icon {
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
  }

  .group-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
  }

  .group-meta {
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
    margin-top: 2px;
  }

  .group-error {
    font-size: 12px;
    color: var(--text-danger);
    margin-top: 2px;
  }

  .btn-icon-remove {
    padding: 6px;
    color: var(--text-muted);
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
  }

  .btn-icon-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
    opacity: 1;
  }

  /* Forum Topics UI inside card */
  .group-forum-topics {
    margin-top: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: rgba(124, 58, 237, 0.05);
    border-radius: 8px;
    padding: 6px 10px;
  }

  .forum-badge {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    background: #7c3aed;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
  }

  .topic-status {
    font-size: 11px;
    color: var(--text-primary);
    flex: 1;
  }

  /* Topic tags container */
  .topic-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
  }

  /* Topic tag pill */
  .topic-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid rgba(124, 58, 237, 0.3);
  }

  /* Hint for when no topics selected */
  .topic-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
  }

  /* Smaller edit button for topics */
  .glass-btn-xs {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }

  .glass-btn-xs:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.4);
    color: #a78bfa;
  }

  /* Forum Detected Card (Premium) */
  .forum-detected-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 14px;
    margin-bottom: 8px;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  }

  .forum-info {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .forum-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .forum-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
  }

  .forum-status {
    font-size: 11px;
    color: var(--text-muted);
  }

  .glass-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .glass-btn-sm:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.3);
    color: #7c3aed;
    transform: translateY(-1px);
  }

  /* Topic Items - Premium 2026 Redesign */
  .topic-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  .topic-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .topic-item:active {
    transform: scale(0.99) translateX(4px);
  }

  /* Custom Checkbox within Topic Item */
  .topic-item .custom-checkbox {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  .topic-item .custom-checkbox .checkmark {
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
  }

  .topic-item:hover .custom-checkbox .checkmark {
    border-color: var(--accent);
  }

  /* Topic Info Container */
  .topic-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
  }

  /* Premium Icon Style */
  .topic-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .topic-item:hover .topic-icon {
    transform: scale(1.05) rotate(-5deg);
  }

  /* Typography */
  .topic-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .topic-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-main);
    letter-spacing: -0.01em;
  }

  .topic-id {
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    opacity: 0.7;
  }

  /* Selected State */
  .topic-item:has(input:checked) {
    background: linear-gradient(90deg, rgba(203, 17, 171, 0.08) 0%, rgba(203, 17, 171, 0.02) 100%);
    border-color: rgba(203, 17, 171, 0.3);
  }

  .topic-item:has(input:checked) .topic-title {
    color: var(--accent);
  }

  /* Light Theme Overrides for Topic Items */
  [data-theme="light"] .topic-item {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  }

  [data-theme="light"] .topic-item:hover {
    background: #fdf2fa;
    border-color: rgba(203, 17, 171, 0.2);
    box-shadow: 0 8px 16px rgba(203, 17, 171, 0.06);
  }

  [data-theme="light"] .topic-item .custom-checkbox .checkmark {
    border-color: rgba(0, 0, 0, 0.15);
  }

  [data-theme="light"] .topic-item:has(input:checked) {
    background: #fff5fa;
    border-color: rgba(203, 17, 171, 0.4);
  }

  [data-theme="light"] .topic-title {
    color: #1f2937 !important;
  }

  [data-theme="light"] .topic-id {
    color: #64748b !important;
  }

  [data-theme="light"] .loader-spinner {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-bottom-color: #7c3aed;
  }

  .loader-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-bottom-color: #7c3aed;
    border-radius: 50%;
    animation: rotation 1s linear infinite;
  }

  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(5px);
    }

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

  /* Title and button row */
  #usersView>div>div:first-child>div:first-child,
  #usersSection>div>div:first-child>div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  #usersView h2,
  #usersSection h2 {
    font-size: 18px !important;
    text-align: center !important;
  }

  #usersView button,
  #usersSection button {
    padding: 10px 14px !important;
    /* Larger touch target */
    font-size: 13px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  #usersView button svg,
  #usersSection button svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Make statistics grid 1 column (vertical stack) for better mobile layout */
  #usersView>div>div:first-child>div:last-child,
  #usersSection>div>div:first-child>div:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    /* Stack vertically */
    gap: 12px !important;
  }

  #usersView>div>div:first-child>div:last-child>div,
  #usersSection>div>div:first-child>div:last-child>div {
    min-width: auto !important;
    padding: 12px 10px !important;
    border-radius: 8px !important;
  }

  #usersView>div>div:first-child>div:last-child>div>div:first-child,
  #usersSection>div>div:first-child>div:last-child>div>div:first-child {
    font-size: 9px !important;
    margin-bottom: 6px !important;
    font-weight: 700 !important;
  }

  #usersView>div>div:first-child>div:last-child>div>div:last-child,
  #usersSection>div>div:first-child>div:last-child>div>div:last-child {
    font-size: 20px !important;
    font-weight: 800 !important;
  }

  /* Table section */
  #usersView table thead,
  #usersSection table thead {
    display: none !important;
  }

  #usersView table,
  #usersSection table {
    display: block !important;
    border: none !important;
    background: transparent !important;
  }

  /* Table container - scrollable area */
  #usersView>div>div:last-child,
  #usersSection>div>div:last-child {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px !important;
    background: #f5f5f5 !important;
  }

  #usersView>div>div:last-child>div,
  #usersSection>div>div:last-child>div {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  /* Mobile card view for users */
  #usersTableBody,
  #usersTableBodyDash {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  #usersTableBody tr,
  #usersTableBodyDash tr {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    padding: 16px !important;
    gap: 10px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  }

  #usersTableBody td,
  #usersTableBodyDash td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    gap: 12px !important;
  }

  #usersTableBody td:first-child,
  #usersTableBodyDash td:first-child {
    border-bottom: 2px solid #e0e0e0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 6px !important;
  }

  #usersTableBody td:last-child,
  #usersTableBodyDash td:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  #usersTableBody td::before,
  #usersTableBodyDash td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    width: 120px;
  }

  #usersTableBody td>div,
  #usersTableBodyDash td>div {
    text-align: right !important;
    flex: 1 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    word-break: break-word !important;
  }
}

@media (max-width: 480px) {

  /* Adjust container height for smaller header */
  #usersView>div,
  #usersSection>div {
    height: calc(100vh - 140px) !important;
    max-height: calc(100vh - 140px) !important;
  }

  /* More compact header on small screens */
  #usersView>div>div:first-child,
  #usersSection>div>div:first-child {
    padding: 10px !important;
  }

  #usersView h2,
  #usersSection h2 {
    font-size: 16px !important;
  }

  #usersView button,
  #usersSection button {
    padding: 8px 12px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }

  #usersView button svg,
  #usersSection button svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Smaller statistics cards */
  #usersView>div>div:first-child>div:last-child,
  #usersSection>div>div:first-child>div:last-child {
    gap: 6px !important;
  }

  #usersView>div>div:first-child>div:last-child>div,
  #usersSection>div>div:first-child>div:last-child>div {
    padding: 10px 8px !important;
  }

  #usersView>div>div:first-child>div:last-child>div>div:first-child,
  #usersSection>div>div:first-child>div:last-child>div>div:first-child {
    font-size: 8px !important;
    margin-bottom: 4px !important;
  }

  #usersView>div>div:first-child>div:last-child>div>div:last-child,
  #usersSection>div>div:first-child>div:last-child>div>div:last-child {
    font-size: 18px !important;
  }

  /* More compact table container */
  #usersView>div>div:last-child,
  #usersSection>div>div:last-child {
    padding: 10px !important;
  }

  /* Smaller user cards */
  #usersTableBody,
  #usersTableBodyDash {
    gap: 10px !important;
  }

  #usersTableBody tr,
  #usersTableBodyDash tr {
    padding: 12px !important;
    gap: 8px !important;
  }

  #usersTableBody td,
  #usersTableBodyDash td {
    padding: 6px 0 !important;
    gap: 8px !important;
  }

  #usersTableBody td::before,
  #usersTableBodyDash td::before {
    font-size: 10px !important;
    width: 100px !important;
  }

  #usersTableBody td>div,
  #usersTableBodyDash td>div {
    font-size: 12px !important;
  }
}

/* Extra small screens optimization */
@media (max-width: 360px) {

  /* Adjust for very small screens */
  #usersView>div,
  #usersSection>div {
    height: calc(100vh - 160px) !important;
    max-height: calc(100vh - 160px) !important;
  }

  #usersView>div>div:first-child,
  #usersSection>div>div:first-child {
    padding: 8px !important;
  }

  #usersView h2,
  #usersSection h2 {
    font-size: 15px !important;
  }

  #usersView button,
  #usersSection button {
    padding: 7px 10px !important;
    font-size: 10px !important;
  }

  /* Even smaller statistics cards */
  #usersView>div>div:first-child>div:last-child,
  #usersSection>div>div:first-child>div:last-child {
    gap: 5px !important;
  }

  #usersView>div>div:first-child>div:last-child>div,
  #usersSection>div>div:first-child>div:last-child>div {
    padding: 8px 6px !important;
  }

  #usersView>div>div:first-child>div:last-child>div>div:first-child,
  #usersSection>div>div:first-child>div:last-child>div>div:first-child {
    font-size: 7px !important;
    margin-bottom: 3px !important;
  }

  #usersView>div>div:first-child>div:last-child>div>div:last-child,
  #usersSection>div>div:first-child>div:last-child>div>div:last-child {
    font-size: 16px !important;
  }

  /* More compact cards */
  #usersView>div>div:last-child,
  #usersSection>div>div:last-child {
    padding: 8px !important;
  }

  #usersTableBody,
  #usersTableBodyDash {
    gap: 8px !important;
  }

  #usersTableBody tr,
  #usersTableBodyDash tr {
    padding: 10px !important;
  }

  #usersTableBody td::before,
  #usersTableBodyDash td::before {
    font-size: 9px !important;
    width: 90px !important;
  }

  #usersTableBody td>div,
  #usersTableBodyDash td>div {
    font-size: 11px !important;
  }
}

/* =========================================
   SETTINGS REDESIGN (Bubbly & Auto-save)
   ========================================= */

/* Settings Layout */
.settings-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Compact Header */
.settings-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 16px 24px;
  border-radius: 24px;
  /* Bubbly */
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  letter-spacing: -0.02em;
}

/* Mini Status Badge (New) */
.header-actions-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-badge-mini {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  color: #6b7280;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* When active (JS will need to add a class or we style based on content if possible, 
   but since JS injects text/HTML, we might need to rely on the JS adding a class 
   OR just style the default look to be nice and let the text change) 
   
   Actually, the JS replaces the whole content. 
   Let's make the default look "pretty" regardless of content, 
   or use a generic gradient that looks good for both states.
*/

.status-badge-mini span {
  /* Target the span injected by JS if any */
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Toggle Switch Improved */
.toggle-switch.small {
  width: 44px;
  height: 26px;
  position: relative;
  display: inline-block;
}

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

.toggle-switch.small .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e5e7eb;
  transition: .3s;
  border-radius: 34px;
  border: 1px solid #d1d5db;
}

.toggle-switch.small .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.toggle-switch.small input:checked+.slider {
  background-color: #111827;
  /* Black */
  border-color: #000000;
}

.toggle-switch.small input:checked+.slider:before {
  transform: translateX(18px);
}

/* Compact Stats */
.settings-stats-compact {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.stat-label {
  font-size: 10px;
  color: #9ca3af;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.stat-divider {
  width: 1px;
  height: 24px;
  background: #e5e7eb;
}

/* Bubbly Grid Layout */
.settings-bubbly-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bubbly-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
}

.bubbly-row.full-width-row {
  grid-template-columns: 1fr;
}

/* Bubbly Cards */
.settings-panel.bubbly-card {
  background: #ffffff;
  border: none;
  border-radius: 28px;
  /* Extra rounded for bubbly feel */
  overflow: visible;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.settings-panel.bubbly-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.panel-header {
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.panel-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #ffffff;
  border-radius: 0 0 28px 28px;
  flex-grow: 1;
}

.panel-body.row-body {
  flex-direction: row;
  align-items: flex-end;
  gap: 16px;
}

/* Inputs */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-group label {
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  margin-left: 4px;
}

.input-wrapper input,
.custom-select,
.time-input,
.text-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #f3f4f6;
  /* Softer border */
  background: #f9fafb;
  border-radius: 16px;
  /* Rounded inputs */
  font-size: 14px;
  color: #1f2937;
  font-weight: 600;
  transition: all 0.2s ease;
}

.input-wrapper input:focus,
.custom-select:focus,
.time-input:focus,
.text-input:focus {
  background: #ffffff;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
  outline: none;
}

.currency-suffix,
.unit-suffix {
  position: absolute;
  right: 16px;
  font-size: 13px;
  color: #9ca3af;
  font-weight: 600;
  pointer-events: none;
}

/* Toggle Switch Small */
.toggle-switch.small {
  width: 40px;
  height: 24px;
}

.toggle-switch.small .slider:before {
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
}

.toggle-switch.small input:checked+.slider:before {
  transform: translateX(16px);
}

/* Buttons */
.panel-footer-actions {
  margin-top: auto;
  padding-top: 16px;
}

.btn-secondary-action {
  background: #f3f4f6;
  color: #4b5563;
  border: none;
  padding: 12px 20px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.btn-secondary-action:hover {
  background: #e5e7eb;
  color: #111827;
}

.btn-primary-action {
  background: #111827;
  /* Dark button for contrast */
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 46px;
  /* Match input height */
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary-action:hover {
  background: #000000;
  transform: translateY(-1px);
}

/* Utilities */
.full-width {
  width: 100%;
}

.flex-1 {
  flex: 1;
}

.flex-grow {
  flex-grow: 1;
}

.w-100 {
  width: 100px;
}

/* Fixed width for count input */

.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.action-wrapper {
  display: flex;
  align-items: flex-end;
}

@media (max-width: 768px) {

  /* Grid Layout - Single Column */
  .bubbly-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .grid-2-col {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Panel Adjustments - More Compact */
  .settings-panel.bubbly-card {
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .panel-body.row-body {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .panel-header {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .header-actions-group {
    width: 100%;
    justify-content: space-between;
  }

  .panel-body {
    padding: 16px;
  }

  /* Inputs - Compact but Touch-Friendly */
  .input-group {
    margin-bottom: 12px;
  }

  .input-group input,
  .input-group select,
  .text-input {
    font-size: 15px !important;
    /* Prevents iOS zoom */
    min-height: 42px;
    padding: 10px 14px;
  }

  .input-group label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
  }

  /* Buttons - Compact Touch Targets */
  .btn-primary-action,
  .small-btn {
    min-height: 42px;
    padding: 10px 20px;
    font-size: 14px;
  }

  /* Widths */
  .w-100 {
    width: 100%;
  }

  .action-wrapper {
    width: 100%;
  }

  .action-wrapper button {
    width: 100%;
  }

  /* Headers - Compact */
  .panel-header h3 {
    font-size: 15px;
    font-weight: 600;
  }

  .settings-view-header {
    padding: 12px 16px;
    margin-bottom: 12px;
  }

  .settings-view-header h2 {
    font-size: 20px;
    font-weight: 700;
  }

  /* Pricing Display in Header - Compact Single Line */
  .pricing-display {
    font-size: 10px !important;
    gap: 8px;
  }

  .pricing-display .pricing-item {
    padding: 4px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .pricing-display .pricing-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
  }

  .pricing-display .pricing-value {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }


  /* Settings Header Stats - Prevent Wrapping */
  .settings-stats-compact {
    gap: 8px;
  }

  .stat-item {
    min-width: auto;
  }

  .stat-label {
    font-size: 9px !important;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .stat-value {
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    line-height: 1;
  }

  .stat-divider {
    opacity: 0.3;
  }

  /* Status Badge - Smaller */
  .status-badge-mini {
    font-size: 10px;
    padding: 4px 8px;
  }

  /* Toggle Switch - Slightly Smaller */
  .toggle-switch.small {
    transform: scale(1.1);
  }

  /* Unit Suffix */
  .unit-suffix {
    font-size: 12px;
    padding-right: 10px;
  }

  /* Settings Container Padding */
  .settings-container {
    padding: 12px;
  }

  /* Bubbly Grid - Tighter */
  .bubbly-grid {
    gap: 12px;
  }

  /* Form Grid - Compact */
  .form-grid {
    gap: 12px;
  }
}

/* Hidden attribution text (visible for copying but hidden visually) */
.hidden-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Styled content divider */
.content-divider {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(124, 92, 255, 0.3) 20%, rgba(124, 92, 255, 0.6) 50%, rgba(124, 92, 255, 0.3) 80%, transparent 100%);
  margin: 24px 0;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(124, 92, 255, 0.1);
  position: relative;
}

.content-divider::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #7c5cff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.2);
}

/* User badge container */
.user-badge-container {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

.user-badge-container svg {
  color: #9ca3af;
  flex-shrink: 0;
}

.user-badge-container #userBadge {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.user-badge-container:hover {
  opacity: 0.8;
}

/* Profile Dropdown */
.user-badge-container {
  position: relative;
}


/* Legacy profile styles removed */


/* Unified Copy Button Styles - Premium 2026 */
.copy-btn-unified {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 14px;
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  height: 34px;
}

.copy-btn-unified:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary);
  color: var(--text-main);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
  transform: translateY(-1px);
}

.copy-btn-unified:active {
  transform: translateY(0);
}

.copy-btn-unified svg {
  color: var(--primary);
  opacity: 0.8;
}

.copy-btn-unified:hover svg {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
}

[data-theme="light"] .copy-btn-unified {
  background: #ffffff;
  border-color: rgba(203, 17, 171, 0.15);
  color: #4b5563;
  box-shadow: 0 2px 8px rgba(203, 17, 171, 0.05);
}

[data-theme="light"] .copy-btn-unified:hover {
  border-color: #cb11ab;
  color: #cb11ab;
  background: #ffffff;
}

[data-theme="light"] .copy-btn-unified svg {
  color: #cb11ab;
}

.copy-btn-dropdown:hover {
  background: var(--bg-hover);
  color: var(--primary);
}

/* Premium Dropdown Menu */
.copy-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;

  /* Deep Dark Glass Theme */
  background: rgba(15, 15, 25, 0.95);
  /* Much darker */
  backdrop-filter: blur(24px);
  /* Heavy blur */
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(124, 92, 255, 0.2);
  /* Violet tint border */

  border-radius: 16px;
  box-shadow:
    0 20px 50px -10px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 20px rgba(124, 92, 255, 0.15);
  /* Violet glow */

  min-width: 250px;
  padding: 8px;

  display: flex;
  flex-direction: column;
  gap: 4px;

  z-index: 1000;

  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: top left;
  /* Changed origin */
}

.copy-dropdown-menu.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.copy-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.copy-dropdown-item:hover {
  background: linear-gradient(90deg, rgba(124, 92, 255, 0.15), rgba(124, 92, 255, 0.05));
  color: var(--text-main);
  padding-left: 18px;
  /* Slide text */
}

/* Active/shine effect on hover */
.copy-dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: #7c3aed;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.copy-dropdown-item:hover::before {
  opacity: 1;
}

.copy-dropdown-item svg {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  width: 18px;
  height: 18px;
  transition: all 0.2s ease;
}

.copy-dropdown-item:hover svg {
  color: #a78bfa;
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.4));
}

/* Light Theme Overrides for Copy Dropdown */
[data-theme="light"] .copy-dropdown-menu {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(203, 17, 171, 0.2);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.1), 0 0 20px rgba(203, 17, 171, 0.1);
}

[data-theme="light"] .copy-dropdown-item {
  color: #4b5563;
}

[data-theme="light"] .copy-dropdown-item:hover {
  background: linear-gradient(90deg, rgba(203, 17, 171, 0.1), rgba(203, 17, 171, 0.02));
  color: #cb11ab;
}

[data-theme="light"] .copy-dropdown-item svg {
  color: #9ca3af;
}

[data-theme="light"] .copy-dropdown-item:hover svg {
  color: #cb11ab;
  filter: drop-shadow(0 0 8px rgba(203, 17, 171, 0.3));
}

/* =========================================
   Users View Redesign (Premium & Minimalistic)
   ========================================= */

.users-view-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #f8f9fa;
  /* Very light gray background for the whole view */
}

/* --- Stats Section --- */
.users-stats-section {
  flex: 1;
  overflow-y: auto;
  padding: 24px 40px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  z-index: 20;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.5px;
}

.btn-export {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #374151;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.btn-export:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.btn-export svg {
  color: #6b7280;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.stat-card {
  padding: 20px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border-color: #e5e7eb;
}

.stat-label {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.stat-value.text-primary {
  color: #6366f1;
}

.stat-value.text-success {
  color: #10b981;
}

.stat-value.text-info {
  color: #0ea5e9;
}

.stat-value.text-warning {
  color: #f59e0b;
}

/* --- Table Section --- */
.users-table-section {
  flex: 1;
  overflow-y: auto;
  padding: 24px 40px;
  min-height: 0;
  /* Important for flex scrolling */
}

.table-container {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.users-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.users-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f9fafb;
}

.users-table th {
  padding: 16px 20px;
  text-align: left;
  font-weight: 600;
  color: #6b7280;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.users-table th.th-right {
  text-align: right;
}

.users-table th.th-center {
  text-align: center;
}

.users-table tbody tr {
  transition: all 0.2s ease;
}

.users-table tbody tr:hover {
  background-color: #f9fafb;
}

.users-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.users-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table Cells */
.td-user {
  min-width: 200px;
}

.user-name {
  font-weight: 600;
  color: #111827;
  font-size: 14px;
  margin-bottom: 4px;
}

.user-sub {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.status-badge.active {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.status-badge.new {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.td-email {
  color: #6b7280;
  font-family: 'Inter', monospace;
  /* Monospace for better alignment */
  font-size: 12px;
}

.td-right {
  text-align: right;
}

.user-balance {
  font-weight: 600;
  font-size: 14px;
}

.user-free {
  font-weight: 600;
  font-size: 13px;
  display: inline-block;
  padding: 2px 8px;
  background: #f3f4f6;
  border-radius: 6px;
}

.user-free.text-warning {
  background: rgba(255, 251, 235, 1);
  color: #b45309;
}

.payment-count {
  font-weight: 600;
  font-size: 13px;
}

.payment-count.success {
  color: #10b981;
}

.payment-count.empty {
  color: #d1d5db;
  font-weight: 400;
}

.payment-sum {
  font-weight: 600;
  font-size: 14px;
}

.pending-payment {
  font-size: 10px;
  color: #f59e0b;
  font-weight: 500;
  margin-top: 4px;
}

.small-date {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
}

/* Loading & Empty States */
.loading-cell,
.empty-cell {
  padding: 60px !important;
  text-align: center;
}

.loading-text {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.loading-subtext {
  font-size: 12px;
  color: #9ca3af;
}

/* Scrollbar for table */
.users-table-section::-webkit-scrollbar {
  width: 8px;
}

.users-table-section::-webkit-scrollbar-track {
  background: transparent;
}

.users-table-section::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.users-table-section::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Fix layout for Users View to be full width/height */
#usersView {
  margin: -32px -40px -56px;
  /* Compensate for .main padding */
  gap: 0;
  min-height: calc(100vh - 85px);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Scrollbar styles for users view */
#usersView::-webkit-scrollbar {
  width: 8px;
}

#usersView::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

#usersView::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.4);
  border-radius: 4px;
}

#usersView::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.6);
}

/* Improved Table Column Widths & Styling */
.users-table {
  min-width: 1200px;
  /* Ensure table doesn't squeeze on small screens */
}

.th-user,
.td-user {
  width: 18%;
  min-width: 180px;
}

.th-email,
.td-email {
  width: 18%;
  min-width: 180px;
}

.th-right,
.td-right {
  width: 8%;
  min-width: 100px;
  text-align: right;
}

.th-left,
.td-left {
  width: 10%;
  min-width: 140px;
  text-align: left;
}

/* Specific adjustments for date columns */
.td-left.small-date {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}

/* Ensure headers don't wrap awkwardly */
.users-table th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Add horizontal scroll to container if needed */
.users-table-section {
  overflow-x: auto;
  overflow-y: auto;
}

/* Filter Buttons */
.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.filter-buttons-container {
  display: flex;
  align-items: center;
}

.filter-group {
  display: flex;
  background: #f3f4f6;
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
}

.btn-filter {
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-filter:hover {
  color: #111827;
  background: rgba(0, 0, 0, 0.03);
}

.btn-filter.active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

.btn-filter .count {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  color: #4b5563;
}

.btn-filter.active .count {
  background: #f3f4f6;
  color: #111827;
}

/* Advanced Analytics Dashboard */
#advancedAnalyticsGrid {
  flex: none;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 10px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.analytics-card {
  padding: 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.analytics-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Card Variants */
.card-green {
  background: #e6f4ea;
  /* Light Green */
  border: 1px solid #ceead6;
}

.card-green .main-value {
  color: #137333;
}

.card-green .card-title {
  color: #0d652d;
}

.card-blue {
  background: #e8f0fe;
  /* Light Blue */
  border: 1px solid #d2e3fc;
}

.card-blue .main-value {
  color: #1967d2;
}

.card-blue .card-title {
  color: #174ea6;
}

.card-purple {
  background: #f3e8fd;
  /* Light Purple */
  border: 1px solid #e9d2fd;
}

.card-purple .main-value {
  color: #8430ce;
}

.card-purple .card-title {
  color: #681da8;
}

.card-orange {
  background: #fef7e0;
  /* Light Orange */
  border: 1px solid #feefc3;
}

.card-orange .main-value {
  color: #ea8600;
}

.card-orange .card-title {
  color: #b06000;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-header svg {
  opacity: 0.6;
}

.card-value-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.main-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}

.sub-value {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
}

/* Analytics Toggle Button */
.btn.secondary {
  background: #ffffff;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.btn.secondary:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
}

/* Ensure grids transition smoothly if possible, though display:none prevents simple transitions */
.stats-grid,
.analytics-grid {
  animation: fadeIn 0.3s ease-out;
}

/* Expanded Analytics Grid */
.expanded-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Cohorts Section */
.cohorts-section {
  margin-top: 32px;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.section-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cohorts-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  padding: 12px 16px;
  background: #f9fafb;
}

.cohorts-table td {
  font-size: 13px;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
}

.cohorts-table tr:last-child td {
  border-bottom: none;
}

.cohorts-table tr:hover {
  background: #f9fafb;
}

/* Dynamic Chart Section */
.chart-section {
  margin-top: 32px;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.chart-controls {
  display: flex;
  background: #f3f4f6;
  padding: 4px;
  border-radius: 10px;
  gap: 4px;
}

.btn-chart-control {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-chart-control:hover {
  color: #111827;
  background: rgba(0, 0, 0, 0.03);
}

.btn-chart-control.active {
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-weight: 600;
}

.chart-container {
  position: relative;
  height: 300px;
  width: 100%;
  margin-top: 16px;
}

/* Chart Metric Selector */
.chart-select {
  background: #f3f4f6;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: #374151;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  margin-right: 12px;
}

.chart-select:hover {
  background: #e5e7eb;
}

.chart-period-buttons {
  display: flex;
  gap: 4px;
}

/* Chart Controls */
.chart-controls {
  display: flex;
  gap: 8px;
}

.btn-chart {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-chart:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.btn-chart.active {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
  color: #3b82f6;
}

.btn-chart-period {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-chart-period:hover {
  color: #111827;
  background: rgba(0, 0, 0, 0.03);
}

.btn-chart-period.active {
  background: #ffffff;
  color: #7c3aed;
  /* Different color for period to distinguish */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-weight: 600;
}

/* Scrollable Table View */
.table-scroll-view {
  max-height: 750px;
  overflow-y: auto;
  overflow-x: auto;
  border-radius: 0 0 16px 16px;
  position: relative;
}

/* Sticky Header */
.table-scroll-view .modern-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8f9fa;
  /* Light gray to match view bg */
  box-shadow: 0 1px 0 var(--border);
}

/* Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  gap: 8px;
  text-decoration: none;
}

.btn.primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}

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

.btn.secondary {
  background: white;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn.secondary:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.btn.danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.btn.danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* Align header-right content to the end in section headers */
.section-header .header-right {
  justify-content: flex-end;
}

/* Pricing Tiers Styles */
.tiers-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.tier-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(99, 102, 241, 0.1);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.tier-item:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateX(2px);
}

.tier-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tier-amount {
  font-weight: 700;
  color: var(--primary);
  font-size: 15px;
}

.tier-rates {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.tier-rates span {
  background: rgba(99, 102, 241, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

.btn-icon-delete {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-icon-delete:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: scale(1.1);
}

.empty-tiers {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-style: italic;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
}

.tier-add-form {
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Top-up Packages Styling - REMOVED duplicate, see line ~3508 */

.topup-package-card {
  background: var(--bg-secondary);
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.topup-package-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  border-color: rgba(99, 102, 241, 0.3);
}

.topup-package-card.selected {
  background: rgba(99, 102, 241, 0.05);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.topup-package-card.popular {
  border-color: rgba(16, 185, 129, 0.5);
  background: linear-gradient(to bottom right, rgba(16, 185, 129, 0.05), transparent);
}

.topup-package-card.popular.selected {
  border-color: var(--success);
  background: rgba(16, 185, 129, 0.1);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.popular-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--success);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.package-header {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.package-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.package-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 4px;
}

.topup-package-card.popular .package-price {
  color: var(--success);
}

.package-requests {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.package-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.package-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.select-package-btn {
  margin-top: 8px;
  border-radius: 10px;
  font-weight: 600;
}

.topup-package-card:not(.selected) .select-package-btn {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.topup-package-card:hover .select-package-btn {
  border-color: var(--primary);
  color: var(--primary);
}

.topup-package-card.popular:hover .select-package-btn {
  border-color: var(--success);
  color: var(--success);
}

/* Admin Tariff Cards */
.admin-tariff-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: all 0.2s ease;
  cursor: grab;
  position: relative;
}

.admin-tariff-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.admin-tariff-card.dragging {
  opacity: 0.5;
  background: #f9fafb;
  border-style: dashed;
  cursor: grabbing;
}

.admin-tariff-card.drag-over {
  border-color: var(--primary);
  border-width: 2px;
  background: rgba(102, 126, 234, 0.05);
}

.atc-drag-handle {
  color: var(--text-muted);
  cursor: grab;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.admin-tariff-card:hover .atc-drag-handle {
  opacity: 1;
}

.atc-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.atc-price-badge {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  min-width: 80px;
  text-align: center;
}

.atc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.atc-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.atc-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

.atc-badge-hit {
  background: #6366f1;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
}

.atc-actions {
  display: flex;
  gap: 8px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.admin-tariff-card:hover .atc-actions {
  opacity: 1;
}

.atc-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.atc-btn:hover {
  background: #f3f4f6;
  color: var(--primary);
}

.atc-btn.delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* ========================================
   Admin Package Cards (Grid with Drag & Drop)
   ======================================== */

/* Container - 3 columns grid */
#packagesListSettings {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  padding: 16px;
}

/* Wrapper for card + requests subtitle */
.admin-package-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  cursor: grab;
  flex: 0 0 auto;
}

.admin-package-wrapper.dragging {
  opacity: 0.5;
}

.admin-package-wrapper.dragging .admin-package-card {
  border-style: dashed;
}

.admin-package-wrapper.drag-over .admin-package-card {
  border-color: var(--primary);
  border-width: 2px;
  background: rgba(99, 102, 241, 0.05);
}

/* Compact horizontal card like client buttons */
.admin-package-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: grab;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.admin-package-card:hover {
  border-color: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
}

.admin-package-card.popular {
  border-color: #7c5cff;
  background: linear-gradient(145deg, #ffffff 0%, #f8f7ff 100%);
}


/* Name in card */
.apc-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

/* Price in card */
.apc-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}

/* Requests subtitle under card */
.apc-requests {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
}

/* HIT Badge */
.apc-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  margin-left: 4px;
}

/* Action buttons - show on hover */
.apc-actions {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.admin-package-wrapper:hover .apc-actions {
  opacity: 1;
}

.apc-actions button {
  width: 20px;
  height: 20px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: var(--text-muted);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.apc-actions button:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.apc-actions button.delete-pkg-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
}

/* Empty state */
.empty-packages {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  width: 100%;
}

/* ========================================
   Mobile Responsive - All Settings Sections
   ======================================== */

@media (max-width: 768px) {

  /* All grid rows become single column */
  .bubbly-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* All 2-column grids become single column */
  .grid-2-col {
    grid-template-columns: 1fr !important;
  }

  /* Settings panels full width */
  .settings-panel,
  .bubbly-card {
    width: 100% !important;
  }

  /* Row body forms stack vertically */
  .row-body {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .row-body .input-group,
  .row-body .action-wrapper {
    width: 100% !important;
  }

  .row-body button {
    width: 100% !important;
  }

  /* Packages - keep 3 columns */
  #packagesListSettings {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 480px) {

  /* Package cards smaller */
  .admin-package-card {
    padding: 8px 10px;
    min-width: 70px;
  }

  .apc-name,
  .apc-price {
    font-size: 11px;
  }

  .apc-requests {
    font-size: 10px;
  }

  .apc-badge {
    font-size: 8px;
    padding: 2px 4px;
  }

  /* Panel headers stack */
  .panel-header.with-toggle {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .panel-header.with-toggle button {
    width: 100% !important;
  }

  /* Smaller text */
  .panel-header h3 {
    font-size: 14px !important;
  }

  .settings-panel .panel-body {
    padding: 12px !important;
  }

  /* Form inputs full width */
  .text-input {
    width: 100% !important;
  }
}

/* Message Timestamp */
.message-timestamp {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
  text-align: right;
  opacity: 0.8;
}

/* =========================================
   Markdown Content Styling 
   ========================================= */

.message-content {
  line-height: 1.6;
  font-size: 15px;
  color: var(--text);
}

.message-content>*:first-child {
  margin-top: 0;
}

.message-content>*:last-child {
  margin-bottom: 0;
}

/* Headings */
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
  font-weight: 600;
  margin: 1.5em 0 0.8em;
  color: var(--text);
  line-height: 1.3;
}

.message-content h1 {
  font-size: 1.6em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3em;
}

.message-content h2 {
  font-size: 1.4em;
}

.message-content h3 {
  font-size: 1.25em;
}

.message-content h4 {
  font-size: 1.1em;
}

/* Paragraphs & Lists */
.message-content p {
  margin-bottom: 1em;
}

.message-content ul,
.message-content ol {
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.message-content li {
  margin-bottom: 0.4em;
}

.message-content li>ul,
.message-content li>ol {
  margin-top: 0.4em;
  margin-bottom: 0;
}

/* Links */
.message-content a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.message-content a:hover {
  border-bottom-color: var(--primary);
}

/* Blockquotes */
.message-content blockquote {
  margin: 1.2em 0;
  padding: 0.8em 1.2em;
  border-left: 4px solid var(--primary-light);
  background: rgba(99, 102, 241, 0.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted);
  font-style: italic;
}

.message-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Code Blocks & Inline Code */
.message-content code {
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.06);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  color: #c026d3;
  /* Fuchias/Purple tone */
}

.message-content pre {
  margin: 1.2em 0;
  padding: 1.2em;
  background: #1e1e1e;
  border-radius: var(--radius);
  overflow-x: auto;
  color: #f3f4f6;
  position: relative;
}

.message-content pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: 0.85em;
  border-radius: 0;
}

/* Tables - Premium 2026 (Dual Theme Support) */
/* Tables - Ultrawide & Minimalist (Reference Site Style) */
.message-content table {
  width: 100%;
  border-collapse: collapse;
  /* Cleaner than separate */
  margin: 1.5em 0;
  font-size: 0.95em;
  background: transparent;
  border: none;
  box-shadow: none;
  /* Removed heavy shadow for flat look */
  display: table;
  /* Reset from block to full width */
}

.message-content th,
.message-content td {
  padding: 12px 16px;
  /* Reduced vertical padding */
  text-align: left;
  /* Default to left as in screenshot, specifically for headers */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* Very subtle separator */
  color: var(--text-main);
  vertical-align: middle;
}

/* Specific alignment - align numbers right if needed, but screenshot shows mostly left/mixed */
/* Let's keep general left/center for now unless specified */

.message-content th {
  background: transparent;
  /* No header background */
  font-weight: 600;
  /* Regular bold */
  color: rgba(255, 255, 255, 0.6);
  /* Muted header color like 'Показатель' in screenshot */
  font-size: 0.85em;
  text-transform: none;
  /* Screenshot isn't uppercase */
  letter-spacing: normal;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  /* Slightly clearer separator for header */
}

/* Remove striping for cleaner look */
.message-content tr:nth-child(even) {
  background: transparent;
}

.message-content tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  /* Extremely subtle hover */
}

/* =========================================
   LIGHT THEME TABLE OVERRIDES
   ========================================= */
[data-theme="light"] .message-content table {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .message-content th {
  background: #f8fafc;
  /* Light grey header */
  color: #111827;
  /* Dark text */
  border-bottom: 2px solid #e2e8f0;
}

[data-theme="light"] .message-content td {
  color: #1f2937;
  /* Dark text */
  border-bottom: 1px solid #f1f5f9;
}

[data-theme="light"] .message-content tr:nth-child(even) {
  background: #f8fafc;
}

[data-theme="light"] .message-content tr:hover {
  background: #f1f5f9 !important;
}

/* Numeric columns alignment */
.message-content td:is([align="right"], .numeric) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: monospace;
}

/* Links inside tables */
/* Links inside tables */
.message-content table a {
  color: #7c3aed;
  /* Primary Purple */
  font-weight: 500;
}

.message-content table a:hover {
  color: #5b21b6;
  /* darker purple */
  border-bottom-color: #7c3aed;
}

/* Horizontal Rule */
.message-content hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 2em 0;
}

/* Images */
.message-content img {
  max-width: 100%;
  border-radius: var(--radius);
  margin: 1em 0;
  box-shadow: var(--shadow-sm);
}

/* Twemoji */
/* Twemoji - Space Mod Glow */
/* Twemoji - Clean Style (User Request) */
img.emoji {
  height: 1.3em;
  width: 1.3em;
  margin: 0 .05em;
  vertical-align: -0.25em;
  display: inline-block;
  /* Removed heavy glow filter per user request */
  transition: transform 0.2s ease;
  will-change: transform;
}

img.emoji:hover {
  transform: scale(1.15);
}

.preloader-text {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  animation: pulse 2s infinite ease-in-out;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

/* New Bot Card Design (Glassmorphism) */
.bot-card-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--glass-shadow);
}

.bot-card-glass:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.bot-card-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  opacity: 0.8;
}

.bot-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.bot-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Truncation properties */
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bot-card-status {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-active {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.status-active .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
}

.status-inactive {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.status-inactive .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
}

.bot-info-grid {
  display: grid;
  gap: 12px;
}

.bot-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-muted);
}

.bot-info-item svg {
  width: 18px;
  height: 18px;
  color: var(--primary-light);
  opacity: 0.8;
}

.bot-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2px 10px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text);
}

.bot-stats-row {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.btn-bot-action {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-bot-action:hover {
  background: #ef4444;
  color: white;
  transform: scale(1.1);
}

/* Empty State Styling */
.bots-empty-state {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: var(--glass-bg);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-lg);
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  background: var(--primary-glow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-light);
  margin-bottom: 8px;
}

.empty-state-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.empty-state-desc {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 400px;
  line-height: 1.6;
}

/* Premium Form Inputs (Added for Modal) */
.glass-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-input);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 14px;
  transition: all 0.3s ease;
}

.glass-input:focus {
  outline: none;
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.2);
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

textarea.glass-input {
  resize: vertical;
  min-height: 80px;
}

.input-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-group label {
  font-size: 13px;
  font-weight: 600;
  color: #d1d5db;
  margin-left: 4px;
}

.input-hint {
  font-size: 12px;
  color: #6b7280;
  margin-left: 4px;
  margin-top: 4px;
}

.password-wrapper {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.toggle-password:hover {
  color: var(--text-main);
}

/* =========================================
   2026 PREMIUM BOTS SECTION STYLES
   ========================================= */

/* Wrapper Reset */
#botsView .prompts-section {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  overflow: visible;
}

#botsView .section-header {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  padding: 24px 32px;
  margin-bottom: 32px;
  box-shadow: var(--glass-shadow);
  border-radius: 24px;
}

/* Header Typography */
#botsView .section-header h2 {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  background: linear-gradient(to right, #fff, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(167, 139, 250, 0.3);
}

#botsView .section-header p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 15px !important;
  font-weight: 400;
}

/* Add Bot Button Premium */
#addBotBtn {
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: var(--text-main);
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.15);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  backdrop-filter: blur(10px);
}

#addBotBtn:hover {
  background: rgba(124, 58, 237, 0.4);
  border-color: rgba(139, 92, 246, 0.8);
  box-shadow: 0 0 30px rgba(124, 58, 237, 0.3);
  transform: translateY(-2px);
}

/* Empty State Premium */
.bots-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  text-align: center;
  margin-top: 20px;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(217, 70, 239, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: #d8b4fe;
  box-shadow: 0 0 40px rgba(124, 58, 237, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: floatIcon 6s ease-in-out infinite;
}

@keyframes floatIcon {

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

  50% {
    transform: translateY(-10px);
  }
}

.empty-state-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
}

.empty-state-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
  max-width: 400px;
  line-height: 1.5;
}

/* Bot Card Premium (Glassmorphism) */
.bot-card-glass {
  background: rgba(30, 30, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 24px;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .bot-card-glass {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(203, 17, 171, 0.1);
  box-shadow: 0 4px 24px -1px rgba(203, 17, 171, 0.05);
}

.bot-card-glass:hover {
  transform: translateY(-4px);
  background: rgba(40, 40, 55, 0.8);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
}

.bot-card-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #7c3aed, #d946ef);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bot-card-glass:hover::before {
  opacity: 1;
}

.bot-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.bot-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.bot-card-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: fit-content;
}

.bot-card-status .dot {
  display: none;
}

.bot-card-status.status-active {
  background: rgba(16, 185, 129, 0.08);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.2);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.2),
    inset 0 0 10px rgba(16, 185, 129, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9px;
  font-weight: 900;
  padding: 4px 10px;
  height: 22px;
  position: relative;
  overflow: hidden;
  margin-left: 12px;
  flex-shrink: 0;
}

.bot-card-status.status-active::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
  margin-right: 0;
  animation: statusBreath 2.5s infinite ease-in-out;
}

@keyframes statusBreath {

  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.4);
    filter: brightness(1.2);
  }
}

.bot-card-status.status-inactive {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 12px;
  height: 24px;
}

.bot-info-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.bot-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 14px;
}

.bot-info-item svg {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.4);
}

.bot-pill {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: monospace;
  color: #a78bfa;
}

.bot-stats-row {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}

.stat-val-premium {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

/* ========================================= */
/* MOBILE RESPONSIVE IMPROVEMENTS (New)      */
/* ========================================= */

/* Tablet / Mobile Landscape (max-width: 768px) */
@media (max-width: 768px) {
  .hero-container {
    min-height: auto;
    margin: 20px auto;
    padding: 0 16px;
  }

  .hero-title {
    font-size: 32px;
    /* Reduced from 56px */
    margin-bottom: 32px;
    line-height: 1.2;
  }

  .action-cards-row {
    gap: 10px;
    margin-bottom: 32px;
  }

  .action-card {
    padding: 10px 20px;
    font-size: 13px;
  }

  .glass-input-large {
    height: 56px;
    font-size: 16px;
    padding: 0 60px 0 20px;
    border-radius: 18px;
  }

  .main-input-wrapper {
    border-radius: 20px;
  }

  .main-input-wrapper::before {
    border-radius: 20px;
  }

  .input-submit-btn {
    width: 44px;
    height: 44px;
    right: 6px;
  }

  .dashboard {
    padding-top: 10px;
    /* Less top spacing */
  }
}

/* Mobile Portrait (max-width: 480px) */
@media (max-width: 480px) {

  .dashboard {
    padding-top: 0;
    padding-bottom: 80px;
  }

  /* ---------------------------------------------------------
     COMPACT MOBILE HEADER SYSTEM
     Structure:
     Row 1: [Burger] [Logo] [Profile]
     Row 2: [Scrolled Tabs]
     Row 3: [Store Selector] (Compact)
     --------------------------------------------------------- */

  .top-header {
    margin: 0;
    width: 100%;
    border-radius: 0 0 24px 24px;
    background: rgba(15, 15, 25, 0.85);
    /* Darker, more contrast */
    padding: 12px 16px 16px;
    /* Added bottom padding for spacing */
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  /* ROW 1: Controls & Brand */
  .header-left {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: 0;
  }

  .btn-menu {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    /* Softer square */
  }

  .brand-logo-header {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    padding: 0;
    margin: 0;
    letter-spacing: -0.01em;
  }

  /* Move User Info to Row 1 Right Side */
  .user-info {
    position: absolute;
    top: 12px;
    right: 16px;
    width: auto;
    justify-content: flex-end;
    padding-right: 0;
    gap: 12px;
  }

  #themeToggleBtn {
    margin-right: 0 !important;
  }

  /* Hide Tariff Pill on Mobile Header to save space (can be in menu) */
  .status-pill {
    display: none;
  }

  .user-profile-trigger {
    margin: 0;
  }

  .user-avatar {
    width: 40px;
    height: 40px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
  }

  /* Profile Dropdown fix */
  .profile-dropdown {
    top: 50px;
    right: 0;
    width: 280px;
  }

  /* ROW 2: Header Right controls moved below */
  .header-right {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    align-items: stretch;
  }

  /* TABS - Horizontal Scroll Stream */
  .tabs {
    margin: 0;
    /* Remove top margin */
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    display: flex;
    /* Ensure flex layout */
    justify-content: flex-start;
    /* Align left for scroll */
    background: transparent;
    padding: 0 4px 8px 4px;
    /* Space for shadow */
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    gap: 8px;

    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex: 0 0 auto;
    /* Don't shrink/grow */
    width: auto;
    /* Natural width */
    height: 38px;
    padding: 0 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }

  .tab.active {
    background: var(--primary);
    /* Solid accent for clear active state */
    color: var(--text-main);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
  }

  .tab svg {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }

  /* STORE SELECTOR - Full Width Integrated */
  .store-selector-container {
    width: 100%;
    margin: 0 !important;
  }

  .btn-store-select {
    width: 100% !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }

  /* Store dropdown adjustment */
  .store-dropdown {
    width: 100% !important;
    left: 0 !important;
    top: 50px !important;
    border-radius: 16px !important;
  }

  /* ---------------------------------------------------------
     CONTENT AREA
     --------------------------------------------------------- */

  .hero-container {
    margin-top: 10px;
    padding: 0 16px;
  }

  .hero-title {
    font-size: 26px;
    margin-bottom: 24px;
  }

  .hero-title span {
    font-size: 26px;
    /* Consistency */
  }

  .action-cards-row {
    grid-template-columns: 1fr;
    /* Single column */
    display: grid;
    gap: 10px;
  }

  .action-card {
    padding: 16px;
    height: auto;
    min-height: 60px;
    justify-content: flex-start;
    /* Left align text */
    text-align: left;
    background: var(--bg-input);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* ---------------------------------------------------------
     BOTTOM INPUT AREA
     --------------------------------------------------------- */

  /* Make standard text input sit at bottom cleanly */
  /* Make standard text input sit at bottom cleanly */
  .composer {
    padding: 12px 10px;
    background: transparent;
    /* Changed from dark bg */
    backdrop-filter: none;
    /* Removed blur */
    border-top: none;
    /* Removed border */
    margin-bottom: 0;
    border-radius: 0;
    position: fixed;
    bottom: 0px;
    /* On mobile, keep it fixed to ensure keyboard handling works better */
    left: 0;
    right: 0;
    z-index: 100;
  }

  .composer-input-row {
    gap: 8px;
  }

  .textarea {
    font-size: 15px;
    padding: 12px;
  }

  /* Hero Input Adjustment */
  /* Hero Input Adjustment - HIDDEN NOW, using unified composer */
  .main-input-wrapper {
    display: none !important;
  }

  /* Add padding to chat view so content isn't hidden behind fixed composer */
  .chat-container {
    padding-bottom: 120px !important;
  }

  .glass-input-large {
    height: 54px;
    font-size: 15px;
    padding-left: 16px;
    background: transparent;
    border: none;
  }

  .input-submit-btn {
    width: 44px;
    height: 44px;
    top: 5px;
    right: 5px;
  }

  /* Hide Hero cards if input is fixed at bottom to avoid clutter? 
     No, keep them but add padding to body so they aren't covered */
  .view.active {
    padding-bottom: 90px;
  }

  /* Bots List Grid Mobile */
  #botsList {
    display: grid;
    grid-template-columns: 1fr !important;
    /* Force 1 column */
    gap: 16px;
  }

}

/* =========================================
   FIX: Request Counter Contrast
   ========================================= */
.sp-balance {
  color: var(--text-main);
  font-weight: 700;
  font-size: 14px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.sp-balance span {
  color: inherit;
}

.sp-free {
  color: rgba(255, 255, 255, 0.9);
  /* High contrast */
  font-weight: 600;
  font-size: 13px;
}

.sp-free.faded {
  opacity: 1 !important;
  /* Force visibility */
  color: rgba(255, 255, 255, 0.7) !important;
}

.sp-free span {
  color: inherit;
}

/* =========================================
   SETTINGS PREMIUM 2026 STYLES
   ========================================= */

/* Container & Grid */
.settings-premium-container {
  padding: 0;
  max-width: 1400px;
  margin: 0 auto;
  animation: fadeIn 0.4s ease-out;
  padding-bottom: 32px;
}

/* Prevent scrolling on settings view */
#settingsView {
  overflow-y: auto;
  height: 100%;
  scrollbar-width: thin;
}

.settings-header-premium {
  margin-bottom: 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-title-group {
  flex-shrink: 0;
}

.page-title-premium {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: 4px;
  background: linear-gradient(135deg, #fff 0%, #e9d5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(139, 92, 246, 0.3);
}

.page-subtitle {
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
}

/* Quick Stats Row */
/* Quick Stats Row (Compact) */
.settings-stats-row {
  display: flex;
  gap: 12px;
}

.stat-glass-card {
  background: var(--bg-input);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  backdrop-filter: blur(10px);
  min-width: 140px;
}

.stat-glass-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.stat-glass-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

.stat-glass-value {
  font-size: 14px;
  font-weight: 700;
  color: #c084fc;
  font-family: monospace;
  line-height: 1;
}

.settings-stats-row {
  display: flex;
  gap: 8px;
}

.stat-glass-card {
  padding: 8px 12px;
  min-width: unset;
  border-radius: 10px;
}

/* Main Grid Layout */
/* Main Grid Layout - 2 Columns for Equal Size */
.settings-grid-premium {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-bottom: 12px;
  align-items: stretch;
}

/* Responsive: 1 Column on smaller screens */
@media (max-width: 1000px) {
  .settings-grid-premium {
    grid-template-columns: 1fr;
  }
}

/* Cards */
/* Cards */
.settings-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 24px;
  /* Glass panel styles inherited, adding specific overrides */
  background: rgba(20, 20, 30, 0.4);
  background: linear-gradient(165deg, rgba(30, 30, 45, 0.5) 0%, rgba(20, 20, 30, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

.settings-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

.panel-header-premium {
  padding: 12px 16px;
  min-height: 48px;
}

.panel-header-premium h3 {
  font-size: 16px;
}

.header-icon {
  width: 32px;
  height: 32px;
}

.wide-card {
  grid-column: 1 / -1;
}

.panel-header-premium {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  min-height: 48px;
}

.panel-header-premium h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a78bfa;
}

.panel-body-premium {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Form Styles */
.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.input-group-premium {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-group-premium label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 2px;
}

.input-wrapper-premium {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper-premium input {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  /* Dark glass border */
  border-radius: 12px;
  padding: 8px 12px;
  height: 40px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.input-wrapper-premium input:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.25);
}

.input-wrapper-premium input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.3);
}

.suffix {
  position: absolute;
  right: 16px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  pointer-events: none;
}

/* Time Input & Select */
.glass-input-time {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 12px;
  height: 40px;
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  color-scheme: dark;
}

.select-wrapper-premium {
  position: relative;
}

.glass-select {
  width: 100%;
  appearance: none;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 12px;
  padding-right: 40px;
  height: 40px;
  color: var(--text-main);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.glass-select:focus {
  outline: none;
  border-color: var(--primary);
}

.select-wrapper-premium .chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

/* Toggles - Neon */
.toggle-switch-premium {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}

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

.toggle-switch-premium .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.1);
  transition: .4s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.toggle-switch-premium .slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: .4s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch-premium input:checked+.slider {
  background-color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

.toggle-switch-premium input:checked+.slider:before {
  transform: translateX(20px);
}

/* Status Text */
.text-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-badge-mini span {
  font-size: 12px;
  color: var(--secondary);
  font-weight: 500;
}

/* Input with Icon Support */
.input-wrapper-premium.with-icon {
  position: relative;
}

.input-wrapper-premium.with-icon .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
  transition: color 0.2s;
}

.input-wrapper-premium.with-icon input {
  padding-left: 42px;
  /* Space for icon */
}

.input-wrapper-premium.with-icon input:focus~.input-icon {
  color: var(--primary);
}

/* Buttons */
.btn-premium-secondary {
  /* width: 100%; Remove full width forced */
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-premium-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-premium-secondary:active {
  transform: translateY(0);
}

.btn-premium-primary {
  width: 100%;
  padding: 10px 16px;
  /* Thinner */
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(168, 85, 247, 0.8) 100%);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-premium-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(168, 85, 247, 0.9) 100%);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}

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

.btn-premium-ghost {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 12px;
  cursor: pointer;
}

.btn-premium-ghost:hover {
  color: var(--text-main);
  text-decoration: underline;
}

.btn-premium-icon-text {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(139, 92, 246, 0.1);
  color: #d8b4fe;
  border: 1px solid rgba(139, 92, 246, 0.2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-premium-icon-text:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.4);
  color: var(--text-main);
}

/* Package List & Groups List */
.packages-list-premium,
.groups-list-premium {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  padding: 4px;
}

/* Groups List Specific */
.groups-list-premium .group-card {
  /* Using existing group-card styles but refining spacing if needed */
  margin: 0;
  /* Remove potential margins defined elsewhere */
}

/* Empty States */
.empty-groups-hint {
  text-align: center;
  padding: 24px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  color: var(--text-muted);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.2s;
}

.empty-groups-hint:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
}



/* Admin Package Card (Legacy override or new) */
.admin-package-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  transition: all 0.2s;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-package-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
}

.pkg-info-col h5 {
  color: #fff !important;
  font-size: 14px;
  margin-bottom: 2px;
}

.pkg-info-col p {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12px;
}

.pkg-price-badge {
  background: rgba(139, 92, 246, 0.15);
  color: #d8b4fe;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
}

/* Package Editor Inline */
.package-editor-premium {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  animation: slideDown 0.3s ease-out;
}

.editor-title {
  color: var(--text-main);
  font-size: 16px;
  margin-bottom: 16px;
}

/* Custom Checkbox */
.checkbox-group-premium {
  margin: 16px 0;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  height: 20px;
  width: 20px;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  position: relative;
  transition: all 0.2s;
}

.custom-checkbox:hover input~.checkmark {
  background-color: rgba(255, 255, 255, 0.05);
}

.custom-checkbox input:checked~.checkmark {
  background-color: var(--primary);
  border-color: var(--primary);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox input:checked~.checkmark:after {
  display: block;
}

.label-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.editor-actions-row {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .settings-stats-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .grid-2-col {
    grid-template-columns: 1fr;
  }

  .panel-body-premium {
    padding: 16px;
  }
}

/* AUTOMATICALLY ADDED: PREMIUM PROMPTS STYLES */

.prompts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 20px 0;
}

.prompt-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
}

.prompt-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.prompt-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

.prompt-card:hover::before {
  opacity: 1;
}

.prompt-card h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
  background: linear-gradient(to right, #fff, #e2e8f0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease;
}

.prompt-card:hover h3 {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.prompt-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  flex-grow: 1;
}

.prompt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.prompt-tags .tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(139, 92, 246, 0.15);
  color: #d8b4fe;
  border: 1px solid rgba(139, 92, 246, 0.2);
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.prompt-card:hover .tag {
  background: rgba(139, 92, 246, 0.25);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}

.prompt-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3), 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* =========================================
   PREMIUM 2026 DASHBOARD STYLES (USERS VIEW FIX)
   ========================================= */

/* Section Headers */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  padding-top: 10px;
}

.section-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.premium-header {
  margin-bottom: 40px;
}

/* Metrics Grid - Premium */
.premium-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card-premium {
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card-premium:hover {
  transform: translateY(-4px);
  background: rgba(30, 30, 45, 0.7);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Icon Wrappers */
.scp-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.scp-icon-wrapper.i-violet {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
}

.scp-icon-wrapper.i-emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
}

.scp-icon-wrapper.i-pink {
  background: rgba(236, 72, 153, 0.15);
  color: #f472b6;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.1);
}

.scp-icon-wrapper.i-cyan {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.1);
}

/* Content Typography */
.scp-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.scp-label {
  font-size: 14px;
  color: #94a3b8;
  /* Muted slate */
  margin-bottom: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.scp-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-main);
  /* Bright White */
  letter-spacing: -0.5px;
  margin-bottom: 4px;
  line-height: 1.1;
}

.scp-trend {
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Utils */
.text-success {
  color: #34d399 !important;
}

.text-danger {
  color: #f87171 !important;
}

.text-muted {
  color: #94a3b8 !important;
}

/* Charts Layout */
.premium-charts-row {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 32px;
}

.chart-card-premium {
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 24px;
  height: 450px;
  display: flex;
  flex-direction: column;
}

.chart-card-premium.large {
  grid-column: span 1;
}

.ccp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.ccp-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
}

/* Chart Tabs */
.chart-tabs {
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  border-radius: 12px;
  display: flex;
  gap: 4px;
}

.chart-tab {
  padding: 8px 16px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.chart-tab:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

.chart-tab.active {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-main);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ccp-body {
  flex: 1;
  position: relative;
  min-height: 0;
  width: 100%;
}

/* Table Section */
.premium-table-section {
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 400px;
  margin-bottom: 80px;
  /* Space at bottom */
}

.table-scroll-container {
  overflow-x: auto;
  margin-top: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.premium-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 800px;
  /* Prevent crunching on small screens */
}

.premium-table th {
  text-align: left;
  padding: 18px 20px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(30, 30, 45, 0.7);
  border-bottom: 1px solid var(--border-color);
}

.premium-table td {
  padding: 16px 20px;
  color: #e2e8f0;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.01);
  transition: all 0.2s;
}

.premium-table tr:hover td {
  background: rgba(255, 255, 255, 0.05);
}

.premium-table tr:last-child td {
  border-bottom: none;
}

/* Action Buttons */
.header-actions {
  display: flex;
  gap: 12px;
}

.btn.glass-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn.glass-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.btn.primary-gradient-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%);
  border: none;
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
  transition: all 0.2s;
}

.btn.primary-gradient-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.5);
}


/* =========================================
   FIXES: HEADER OVERLAP & PREMIUM TOASTS
   ========================================= */

/* Fix Header Overlap */
.view {
  padding-top: 100px;
  /* Space for the floating header */
}

/* Premium Toast Container */
#toastContainer {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
  pointer-events: none;
  /* Let clicks pass through container */
}

/* Premium Toast Style */
.toast {
  pointer-events: auto;
  min-width: 300px;
  max-width: 400px;
  background: rgba(15, 15, 25, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 20px;
  border-radius: 16px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);

  display: flex;
  align-items: center;
  gap: 12px;

  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Toast Variants */
.toast.success {
  border-left: 3px solid #34d399;
  /* Emerald */
  background: linear-gradient(to right, rgba(52, 211, 153, 0.1), rgba(15, 15, 25, 0.8) 30%);
}

.toast.error {
  border-left: 3px solid #f87171;
  /* Red */
  background: linear-gradient(to right, rgba(248, 113, 113, 0.1), rgba(15, 15, 25, 0.8) 30%);
}

.toast.info {
  border-left: 3px solid #60a5fa;
  /* Blue */
  background: linear-gradient(to right, rgba(96, 165, 250, 0.1), rgba(15, 15, 25, 0.8) 30%);
}

/* Toast Icon Wrapper via CSS or JS inserted HTML */
.toast-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.toast.success .toast-icon {
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
}

.toast.error .toast-icon {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

.toast.info .toast-icon {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.1);
}

/* --- LIGHT THEME TOAST OVERRIDES --- */
[data-theme="light"] .toast {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-color: rgba(203, 17, 171, 0.15) !important;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .toast.success {
  border-left-color: #34d399 !important;
  background: linear-gradient(to right, rgba(52, 211, 153, 0.1), #ffffff 30%) !important;
}

[data-theme="light"] .toast.error {
  border-left-color: #f87171 !important;
  background: linear-gradient(to right, rgba(248, 113, 113, 0.1), #ffffff 30%) !important;
}

[data-theme="light"] .toast.info {
  border-left-color: #60a5fa !important;
  background: linear-gradient(to right, rgba(96, 165, 250, 0.1), #ffffff 30%) !important;
}

/* --- PROMPTS VIEW STYLES --- */
.prompts-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.prompts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.prompt-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 220px;
  position: relative;
  overflow: hidden;
}

.prompt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.prompt-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}

.prompt-card:hover::before {
  opacity: 1;
}

.prompt-card.active {
  border-color: var(--primary);
  background: rgba(139, 92, 246, 0.1);
}

/* Card Header */
.pc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pc-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pc-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Card Content Preview */
.pc-preview {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: auto;
  /* Push footer down */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.8;
}

/* Card Footer with Tags */
.pc-footer {
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
}

.prompt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 52px;
  overflow: hidden;
  position: relative;
}

.prompt-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 100px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* --- PROMPT EDITOR MODAL (Refined Premium) --- */
.editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  /* Toggled via JS */
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.editor-overlay.open {
  display: flex;
  opacity: 1;
}

.editor-modal {
  width: 90%;
  max-width: 800px;
  background: #0f0f13;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  overflow: hidden;
}

.editor-overlay.open .editor-modal {
  transform: scale(1);
}

.editor-header {
  padding: 20px 32px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.editor-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
}

.btn-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}

.editor-body {
  padding: 32px;
  overflow-y: auto !important;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  min-height: 0;
  /* Ensure scrolling works */
  -webkit-overflow-scrolling: touch;
}

#editBotForm {
  height: 100%;
  max-height: 100%;
}

/* Premium Form Elements */
.form-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}

.glass-input,
.glass-textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--text-main);
  transition: all 0.2s;
  font-family: inherit;
}

.glass-input:focus,
.glass-textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.glass-textarea {
  resize: vertical;
  min-height: 300px;
  line-height: 1.6;
  font-family: 'JetBrains Mono', monospace;
  /* Better for code/prompts */
  font-size: 14px;
}

/* File Upload Button */
.file-upload-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-input);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-muted);
  font-size: 13px;
}

.file-upload-trigger:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text-main);
}

.editor-footer {
  padding: 24px 32px;
  border-top: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.btn-ghost {
  padding: 10px 20px;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
}

.btn-danger-glass {
  padding: 10px 20px;
  background: rgba(239, 68, 68, 0.08);
  /* Subtle red tint */
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  margin-right: auto;
  /* Push to left */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.btn-danger-glass:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
  transform: translateY(-1px);
}

.btn-danger-glass:active {
  transform: translateY(0);
}

.btn-danger-glass:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Light theme danger button */
[data-theme="light"] .btn-danger-glass {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="light"] .btn-danger-glass:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12);
}

/* Fix Layout Cropping */
.admin-container {
  max-width: 1300px;
  width: 95%;
  margin: 0 auto;
  padding: 0 20px;
}

/* Detailed Stats Grid */
#detailedStatsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

#detailedStatsContainer .stat-card-premium.small {
  padding: 16px;
  background: var(--bg-input);
}

#detailedStatsContainer .scp-value {
  font-size: 20px;
}

/* Search Input Premium */
.search-wrapper-premium {
  position: relative;
  display: flex;
  align-items: center;
  width: 300px;
}

.search-wrapper-premium svg {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-wrapper-premium input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 14px;
  transition: all 0.2s;
}

.search-wrapper-premium input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}

/* Fix Table Scrolling */
.table-scroll-container {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: auto;
}

.table-scroll-container thead th {
  position: sticky;
  top: 0;
  background: var(--bg-dark);
  /* Fallback */
  background: rgba(18, 18, 20, 0.95);
  /* Match card bg */
  backdrop-filter: blur(10px);
  z-index: 10;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Loading Message Alignment Fixes */
.msg[data-loading="true"] {
  align-self: flex-start !important;
  margin-right: auto !important;
  margin-left: 0 !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}

.msg[data-loading="true"] .avatar {
  display: grid !important;
  place-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
}

/* Loading Content Styling */
.loading-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}

.loading-text {
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Ensure bubble background for loading is correct */
.msg[data-loading="true"] .bubble {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  box-shadow: none;
}

/* =========================================
   LIGHT THEME CHAT FIXES
   ========================================= */

/* AI Message Bubble - White on Light */
[data-theme="light"] .bubble {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid rgba(203, 17, 171, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .bubble p,
[data-theme="light"] .bubble span,
[data-theme="light"] .bubble li {
  color: #1f2937 !important;
}

/* User Message Bubble - Purple Gradient on Light */
[data-theme="light"] .msg.user .bubble {
  background: linear-gradient(135deg, #a855f7 0%, #cb11ab 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(203, 17, 171, 0.3) !important;
}

[data-theme="light"] .msg.user .bubble p {
  color: #ffffff !important;
}

/* Code blocks in light mode */
[data-theme="light"] .bubble code {
  background: #f1f5f9 !important;
  color: #d946ef !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .bubble pre {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

/* ==================== MOBILE CHAT FIXES ==================== */
@media (max-width: 600px) {

  /* Chat messages - more compact */
  .msg {
    max-width: 95%;
    gap: 8px;
  }

  /* Smaller avatars on mobile */
  .avatar {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  /* Compact bubbles */
  .bubble {
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 16px;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Tables inside messages - horizontal scroll */
  .bubble table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    font-size: 12px;
    white-space: nowrap;
  }

  .bubble table th,
  .bubble table td {
    padding: 6px 8px;
  }

  /* Pre blocks - horizontal scroll */
  .bubble pre {
    overflow-x: auto;
    max-width: 100%;
    font-size: 12px;
  }

  /* Messages container - full width */
  #messages {
    padding: 12px;
  }
}

/* Extra small screens (<=400px) */
@media (max-width: 400px) {
  .msg {
    gap: 6px;
  }

  .avatar {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .bubble {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* ==================== LIGHT THEME MOBILE FIXES ==================== */
@media (max-width: 768px) {

  /* Header - Light Theme */
  [data-theme="light"] .top-header {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(203, 17, 171, 0.15) !important;
    box-shadow: 0 4px 20px rgba(203, 17, 171, 0.08) !important;
  }

  /* Tabs - Light Theme */
  [data-theme="light"] .tabs {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(203, 17, 171, 0.1) !important;
  }

  [data-theme="light"] .tab {
    color: #64748b !important;
  }

  [data-theme="light"] .tab.active {
    background: linear-gradient(135deg, #cb11ab 0%, #d946ef 100%) !important;
    color: white !important;
  }

  [data-theme="light"] .tab:not(.active):hover {
    background: rgba(203, 17, 171, 0.1) !important;
    color: #cb11ab !important;
  }

  /* Menu Button - Light Theme */
  [data-theme="light"] .btn-menu {
    background: rgba(203, 17, 171, 0.1) !important;
    color: #cb11ab !important;
  }

  /* Composer - Light Theme */
  [data-theme="light"] .composer {
    background: transparent !important;
    border-top: none !important;
  }

  [data-theme="light"] .composer-input-row {
    background: #ffffff !important;
    border: 1px solid #e1e4ea !important;
    /* Slightly more defined border */
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02) inset !important;
    /* Better shadow for white */
  }

  [data-theme="light"] .composer-input-row .textarea {
    color: #1f2937 !important;
    /* Dark text for light mode */
  }

  [data-theme="light"] .composer-input-row .textarea::placeholder {
    color: #9ca3af !important;
    /* Visible gray placeholder */
  }

  /* Make buttons visible in light mode too */
  [data-theme="light"] .btn-attach,
  [data-theme="light"] .btn-mic {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #6b7280 !important;
  }

  [data-theme="light"] .btn-attach:hover,
  [data-theme="light"] .btn-mic:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #111827 !important;
  }

  [data-theme="light"] .model-dropdown-wrapper-composer .model-dropdown-trigger {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #374151 !important;
  }

  [data-theme="light"] .model-dropdown-wrapper-composer .model-dropdown-trigger:hover {
    background: rgba(0, 0, 0, 0.08) !important;
  }

  /* Logo - Light Theme */
  [data-theme="light"] .brand-logo-header {
    background: linear-gradient(135deg, #1f2937 0%, #cb11ab 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  /* Theme Toggle - Light Theme */
  [data-theme="light"] .theme-toggle {
    background: rgba(203, 17, 171, 0.1) !important;
    color: #cb11ab !important;
  }

  /* User Avatar Container - Light Theme */
  [data-theme="light"] .user-info {
    color: #1f2937 !important;
  }
}

/* =========================================
   MARKDOWN TABLE IMAGE & ANIMATION STYLES
   ========================================= */

/* Table Images (Product Thumbnails) - EXCLUDE emojis */
.messages table img:not(.emoji),
.markdown-body table img:not(.emoji) {
  width: 40px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: zoom-in;
  display: block;
  /* Remove bottom space */
  margin: 0 auto;
}

.messages table img:not(.emoji):hover,
.markdown-body table img:not(.emoji):hover {
  /* DISABLED: No zoom on hover per user request */
  /* transform: scale(3.5); */
  /* z-index: 100; */
  /* position: relative; */
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); */
  border-color: var(--accent);
}

/* Table Row Animation (Staggered Fade In) */
.messages table tbody tr,
.markdown-body table tbody tr {
  opacity: 0;
  animation: tableRowSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes tableRowSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* Stagger delays for up to 20 rows */
/* Stagger delays for up to 20 rows */
.messages table tbody tr:nth-child(1) {
  animation-delay: 0.05s;
}

.messages table tbody tr:nth-child(2) {
  animation-delay: 0.1s;
}

.messages table tbody tr:nth-child(3) {
  animation-delay: 0.15s;
}

.messages table tbody tr:nth-child(4) {
  animation-delay: 0.2s;
}

.messages table tbody tr:nth-child(5) {
  animation-delay: 0.25s;
}

.messages table tbody tr:nth-child(6) {
  animation-delay: 0.3s;
}

.messages table tbody tr:nth-child(7) {
  animation-delay: 0.35s;
}

.messages table tbody tr:nth-child(8) {
  animation-delay: 0.4s;
}

.messages table tbody tr:nth-child(9) {
  animation-delay: 0.45s;
}

.messages table tbody tr:nth-child(10) {
  animation-delay: 0.5s;
}

.messages table tbody tr:nth-child(n+11) {
  animation-delay: 0.55s;
}

/* Table styling tweaks for images */
.messages table th,
.messages table td {
  vertical-align: middle;
  text-align: center;
}

/* Left align specific text columns */
.messages table td:nth-child(2),
.messages table td:nth-child(3) {
  text-align: center;
}

/* Right align numbers - CHANGED TO CENTER per user request */
.messages table td:nth-child(n+4) {
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* =========================================
   ULTRA-COMPACT SETTINGS (Fit on One Screen)
   ========================================= */

/* Settings View - Scrollable */
#settingsView {
  overflow-y: auto !important;
  overflow-x: hidden;
  height: calc(100vh - 65px);
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

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

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

#settingsView::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}

#settingsView::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.5);
}

.settings-premium-container {
  padding: 0;
  max-width: 1400px;
  margin: 0 auto;
  animation: fadeIn 0.4s ease-out;
  padding-bottom: 32px;
}

.settings-header-premium {
  margin-bottom: 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-title-group {
  flex-shrink: 0;
}

.page-title-premium {
  font-size: 24px !important;
  margin-bottom: 2px !important;
  background: linear-gradient(135deg, #ffffff 0%, #a78bfa 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 700 !important;
}

.page-subtitle {
  display: block !important;
  font-size: 13px !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  opacity: 0.8;
}

/* Compact Stats Row */
.settings-stats-row {
  display: flex;
  gap: 12px !important;
  flex-shrink: 0;
  align-items: center;
}

.stat-glass-card {
  padding: 8px 16px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 120px;
}

.stat-glass-label {
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-bottom: 2px;
}

.stat-glass-value {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
}

.settings-grid-premium {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  flex: 1;
  padding-bottom: 40px;
}

/* Base Card Style for Settings */
.settings-grid-premium>.glass-panel.settings-card {
  min-height: auto;
  height: auto;
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  background: rgba(19, 19, 31, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}

.settings-grid-premium>.glass-panel.settings-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* Header Styles */
.panel-header-premium {
  padding: 20px 24px;
  min-height: auto;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-title-group h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.header-subtitle {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.header-icon-premium {
  color: var(--accent);
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(203, 17, 171, 0.1);
  padding: 8px;
  border-radius: 12px;
}

/* Body Styles */
.panel-body-premium {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-body-premium.no-padding {
  padding: 0;
}

/* Form Elements */
.input-group-premium {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-group-premium label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.input-wrapper-premium {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper-premium.with-icon input {
  padding-left: 36px;
}

.input-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.7;
}

.input-wrapper-premium input {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--text-main);
  font-size: 14px;
  transition: all 0.2s;
}

.input-wrapper-premium input:focus {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 3px rgba(203, 17, 171, 0.1);
}

.suffix {
  position: absolute;
  right: 12px;
  font-size: 12px;
  color: var(--text-muted);
  pointer-events: none;
}

/* =========================================
   ROBUST MOBILE LAYOUT RESET (Library-like Behavior)
   ========================================= */

@media (max-width: 900px) {

  /* 1. Global Scroll Reset - Force Native Scrolling */
  html,
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 2. Unlock Containers */
  .dashboard,
  .content,
  .settings-premium-container {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    /* Prevent flex locking */
  }

  /* 3. Settings Specifics */
  .settings-premium-container {
    padding: 16px !important;
    padding-bottom: 120px !important;
    /* Huge padding to prevent cutoff */
    padding-top: 20px !important;
  }

  /* 4. Grid System - Force Single Column */
  .settings-grid-premium {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .settings-grid-premium>.glass-panel.settings-card {
    width: 100% !important;
    min-height: auto !important;
    margin-bottom: 0 !important;
  }

  /* 5. Header Adaptation */
  .settings-header-premium {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 24px !important;
  }

  .settings-title-group {
    margin-bottom: 12px !important;
  }

  .settings-stats-row {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 12px !important;
    gap: 12px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hide scrollbar for cleaner look */
  }

  .settings-stats-row::-webkit-scrollbar {
    display: none;
  }

  .stat-glass-card {
    flex: 0 0 auto !important;
    min-width: 120px !important;
  }

  /* 6. Inputs & Forms */
  .grid-2-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* 7. Packages Grid Mobile */
  .packages-grid-premium {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    /* 3 columns as requested */
    gap: 12px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  @media (max-width: 380px) {
    .packages-grid-premium {
      grid-template-columns: 1fr !important;
    }
  }

  /* 8. Ensure no content is hidden */
  /* 8. Ensure no content is hidden - REMOVED BRITTLE OVERRIDE */
  /* .view override removed to allow JS toggling */
}

/* Package Grid - Always 3 columns */
.packages-grid-premium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
}

.package-card-mini {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.package-card-mini:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(139, 92, 246, 0.1);
}

.package-card-mini.popular {
  border-color: rgba(203, 17, 171, 0.3);
  background: linear-gradient(165deg, rgba(203, 17, 171, 0.05) 0%, rgba(203, 17, 171, 0.1) 100%);
  box-shadow: 0 4px 15px rgba(203, 17, 171, 0.1);
}

.package-card-mini.popular:hover {
  border-color: rgba(203, 17, 171, 0.5);
  box-shadow: 0 10px 30px rgba(203, 17, 171, 0.15);
  background: linear-gradient(165deg, rgba(203, 17, 171, 0.08) 0%, rgba(203, 17, 171, 0.15) 100%);
}

.package-card-mini .popular-badge {
  display: none;
  /* User requested to hide HIT badge */
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #cb11ab 0%, #d946ef 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(203, 17, 171, 0.3);
}

.pkg-mini-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center align */
  gap: 8px;
  margin-bottom: 8px;
}

.pkg-name-mini {
  font-weight: 700;
  font-size: 13px;
  /* Slightly smaller */
  color: var(--text-main);
  text-align: center;
  line-height: 1.2;
}

.pkg-price-mini {
  font-weight: 800;
  font-size: 15px;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.pkg-desc-mini {
  display: none;
}

.pkg-requests-badge {
  display: inline-flex;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: auto;
  align-self: center;
  opacity: 0.8;
}



/* Edit Overlay on Hover */
/* Edit Overlay - Minimalist Bottom Row */
.pkg-edit-overlay {
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(5px);
  z-index: 10;
}

.package-card-mini:hover .pkg-edit-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Hide requests badge on hover to make room for buttons */
.package-card-mini:hover .pkg-requests-badge {
  opacity: 0;
  transform: translateY(-5px);
}

.pkg-edit-btn {
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .pkg-edit-btn {
  background: #ffffff;
  color: #64748b;
  border-color: rgba(0, 0, 0, 0.1);
}

.pkg-edit-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.pkg-edit-btn.delete:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Button & Toggle Styles */
.btn-premium-icon-only {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-premium-icon-only:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--accent);
}



/* Status Badge Mini */
.status-badge-mini {
  font-size: 8px !important;
  padding: 1px 4px !important;
}

/* Compact Buttons - Relaxed */
.btn-premium-secondary,
.btn-premium-primary {
  padding: 10px 16px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
}

/* Panel Footer */
.panel-footer-premium {
  margin-top: auto !important;
  padding-top: 4px !important;
  flex-shrink: 0;
}

/* Packages List - Super Compact */
.packages-list-premium {
  flex: 1;
  min-height: 0;
  overflow-y: auto !important;
  gap: 4px !important;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
}

.admin-package-item {
  padding: 4px 6px !important;
  border-radius: 6px !important;
}

.pkg-info-col h5 {
  font-size: 10px !important;
}

/* Fix for Table Badge Alignment - prevents floating icon issues */
.premium-table td .status-badge-mini {
  display: inline-flex !important;
  vertical-align: middle !important;
  float: none !important;
  position: static !important;
  margin-left: 8px;
  transform: none !important;
}

.pkg-info-col p {
  display: none !important;
}

.pkg-price-badge {
  padding: 2px 4px !important;
  font-size: 9px !important;
}

/* Package Editor - Compact */
.package-editor-premium {
  margin-top: 6px !important;
  padding-top: 6px !important;
}

.editor-title {
  font-size: 11px !important;
  margin-bottom: 6px !important;
}

/* Modern Card Checkbox */
.checkbox-group-premium {
  margin-top: 24px !important;
}

.custom-checkbox {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  user-select: none;
}

.custom-checkbox:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  height: 20px !important;
  width: 20px !important;
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s;
}

.custom-checkbox input:checked~.checkmark {
  background-color: var(--accent);
  border-color: var(--accent);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px !important;
  top: 2px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox input:checked~.checkmark:after {
  display: block;
}

.custom-checkbox input:checked~.label-text {
  color: #fff;
}

.custom-checkbox input:checked {
  border-color: var(--accent);
  background: rgba(203, 17, 171, 0.05);
}

.label-text {
  font-size: 14px !important;
  font-weight: 500;
  color: var(--text-main);
  /* Better visibility */
  transition: color 0.2s;
}

/* Light Mode Overrides */
[data-theme="light"] .custom-checkbox {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .custom-checkbox:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

[data-theme="light"] .checkmark {
  border-color: #cbd5e1;
}

[data-theme="light"] .custom-checkbox input:checked~.label-text {
  color: var(--accent);
}

[data-theme="light"] .custom-checkbox input:checked {
  background: rgba(203, 17, 171, 0.1);
  border-color: var(--accent);
}

.editor-actions-row {
  margin-top: 6px !important;
  gap: 4px !important;
}

/* Hide New Package button text */
.btn-premium-icon-text {
  padding: 4px 8px !important;
  font-size: 10px !important;
}

/* Text Group Compact */
.text-group {
  gap: 1px !important;
}

.text-group h3 {
  font-size: 12px !important;
}

/* Select Wrapper */
.select-wrapper-premium .chevron {
  right: 8px !important;
  width: 10px !important;
  height: 10px !important;
}

/* =========================================
   ROBUST MOBILE LAYOUT RESET (Library-like Behavior)
   ========================================= */

@media (max-width: 900px) {

  /* 1. Global Scroll Reset - Force Native Scrolling */
  html,
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 1.a Navigation Tabs Mobile - Buttons at the Top */
  .tabs {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    overflow-x: auto !important;
    padding: 8px 16px !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
  }

  /* Ensure individual tabs are visible and styled as buttons */
  .tab {
    display: flex !important;
    /* Force flex to maintain icon+text alignment, JS toggles act on visibility but usually we want all main tabs visible on mobile if logic permits */
    /* Note: If JS hides them with inline style display:none, this won't override it. 
       We assume JS is handling permission-based visibility correctly. */
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
  }

  .tab.active {
    background: #cb11ab !important;
    color: white !important;
    border-color: #cb11ab !important;
  }

  .header-right {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .top-header {
    flex-direction: column !important;
    height: auto !important;
    padding-bottom: 8px !important;
    gap: 8px !important;
  }

  /* 2. Unlock Containers */
  .dashboard,
  .content,
  .settings-premium-container {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    /* Prevent flex locking */
  }

  /* 3. Settings Specifics */
  .settings-premium-container {
    padding: 16px !important;
    padding-bottom: 120px !important;
    /* Huge padding to prevent cutoff */
    padding-top: 20px !important;
  }

  /* 4. Grid System - Adapted for Mobile (2 Columns) */
  .settings-grid-premium {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .settings-grid-premium>.glass-panel.settings-card {
    width: 100% !important;
    min-height: auto !important;
    margin-bottom: 0 !important;
  }

  /* 5. Header Adaptation */
  .settings-header-premium {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 24px !important;
  }

  .settings-title-group {
    margin-bottom: 12px !important;
  }

  .settings-stats-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
  }

  .stat-glass-card {
    min-width: 0 !important;
    width: 100% !important;
    padding: 8px 4px !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .stat-glass-label {
    font-size: 9px !important;
    white-space: nowrap;
  }

  .stat-glass-value {
    font-size: 13px !important;
  }

  /* 6. Inputs & Forms */
  .grid-2-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* 7. Packages Grid Mobile */
  .packages-grid-premium {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    /* 2 columns on mobile looks better for small cards */
    gap: 12px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  @media (max-width: 380px) {
    .packages-grid-premium {
      grid-template-columns: 1fr !important;
    }
  }

  /* 8. Ensure no content is hidden */
  /* 8. Ensure no content is hidden - REMOVED BRITTLE OVERRIDE */
  /* .view override removed to allow JS toggling */
}

/* Store Delete Button */
.store-delete-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.store-delete-btn:hover {
  color: #ef4444;
  /* Red color on hover */
  background: rgba(239, 68, 68, 0.1);
}

/* =========================================
   WB API INSTRUCTION MODAL STYLE
   ========================================= */

.instruction-step {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
  position: relative;
}

.instruction-step:last-child {
  margin-bottom: 0;
}

.step-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--accent) 0%, #d946ef 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(203, 17, 171, 0.3);
  z-index: 2;
}

.instruction-step::after {
  content: '';
  position: absolute;
  top: 32px;
  left: 15px;
  bottom: -32px;
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
}

.instruction-step:last-child::after {
  display: none;
}

.step-content {
  flex: 1;
}

.step-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
  margin-top: 4px;
}

.step-content p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.step-content p b {
  color: var(--accent);
  font-weight: 500;
}

/* Visual Aids (Fake UI) */
.step-visual {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
}

[data-theme="light"] .step-visual {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.05);
}

.fake-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fake-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
  opacity: 0.6;
}

.fake-radio.checked {
  background: rgba(203, 17, 171, 0.15);
  color: var(--text-main);
  font-weight: 500;
  opacity: 1;
  border: 1px solid rgba(203, 17, 171, 0.3);
}

[data-theme="light"] .fake-radio.checked {
  color: #1f2937;
}

.fake-radio .fr-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  position: relative;
}

.fake-radio.checked .fr-dot::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

.grid-visual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.fake-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-main);
  padding: 4px;
}

[data-theme="light"] .fake-checkbox {
  color: #1f2937;
}

.fake-checkbox::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--accent);
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}

.fake-radio-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(203, 17, 171, 0.1);
  border: 1px solid rgba(203, 17, 171, 0.3);
  align-items: flex-start;
}

.fake-radio-card .fr-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}

.fake-radio-card .fr-dot::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

.frc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 2px;
}

[data-theme="light"] .frc-title {
  color: #1f2937;
}

.frc-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.instruction-footer-note {
  margin-top: 24px;
  padding: 12px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: #fbbf24;
  /* Amber */
  text-align: center;
}

[data-theme="light"] .instruction-footer-note {
  color: #d97706;
  background: #fffbeb;
  border-color: #fcd34d;
}

/* =========================================
   MOBILE LAYOUT FIXES (System 2026)
   ========================================= */

@media (max-width: 900px) {

  /* 1. Header & Navigation */
  .top-header {
    padding: 0 16px;
    height: 60px;
    /* Smaller header */
    justify-content: space-between;
  }

  .header-left {
    gap: 12px;
  }

  #menuToggle {
    display: flex !important;
    /* Force visible */
    z-index: 1001;
    /* Above sidebar overlay */
  }

  .brand-logo-header {
    font-size: 18px;
  }

  /* Compact User Info */
  .user-info {
    gap: 8px;
  }

  .status-pill {
    display: none !important;
    /* Hide balance on mobile header to save space */
  }

  .btn-menu#themeToggleBtn {
    display: none !important;
    /* Move to sidebar later if needed, hide for space now */
  }

  /* 2. Sidebar (Off-Canvas) */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* Overlay */
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* 3. Main Content */
  .dashboard {
    flex-direction: column;
    /* Stack changes */
    height: auto;
    /* Allow scroll */
    min-height: 100vh;
  }

  .main {
    margin-left: 0 !important;
    /* Remove sidebar shift */
    width: 100%;
    padding: 0;
    /* Reset padding if any */
    padding-top: 60px;
    /* Header height offset */
    height: auto;
    overflow-x: hidden;
  }

  /* 4. Chat View Adjustments */
  .chat-container {
    height: calc(100vh - 60px);
    /* Full height minus header */
  }

  .messages {
    padding-bottom: 80px;
    /* Space for composer */
  }

  .composer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 10px;
    background: var(--bg-card);
    /* Ensure background */
    z-index: 100;
    border-top: 1px solid var(--border-color);
  }

  .composer-input-row {
    max-width: 100%;
    padding: 8px;
  }

  /* 5. Modals */
  .modal-content {
    width: 95% !important;
    max-height: 85vh;
    margin: auto;
  }
}

/* =========================================
   DASHBOARD / HERO VIEW FIXES
   ========================================= */

@media (max-width: 900px) {

  /* Hero Section */
  .hero-container {
    padding: 24px 16px;
    height: auto;
    min-height: 50vh;
    justify-content: center;
  }

  .hero-title {
    font-size: 28px !important;
    line-height: 1.2;
    margin-bottom: 32px;
  }

  .hero-title span {
    background-size: 200% auto !important;
  }

  /* Action Cards Row - Scrollable horizontal list or Stacked */
  .action-cards-row {
    flex-direction: column !important;
    width: 100%;
    gap: 12px;
    margin-bottom: 32px;
  }

  .action-card {
    width: 100% !important;
    text-align: center;
    justify-content: center;
    padding: 16px;
  }

  /* Main Input wrapper */
  .main-input-wrapper {
    max-width: 100%;
    width: 100%;
  }

  .glass-input-large {
    font-size: 16px !important;
    /* Prevent iOS zoom */
    padding: 12px 16px;
  }
}

/* =========================================
   BOTS & USERS VIEW FIXES
   ========================================= */

@media (max-width: 900px) {

  /* Section Headers */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
  }

  .section-header>div {
    width: 100%;
  }

  /* Force Grid to Single Column */
  #botsList,
  .prompts-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Bots Cards */
  .bot-card {
    width: 100% !important;
    min-width: 0;
  }

  /* Admin Container Padding */
  .admin-container {
    padding: 16px;
    width: 100%;
  }

  /* Users View Stats Grid */
  .premium-stats-grid {
    grid-template-columns: 1fr !important;
    /* Stack stats */
    gap: 12px;
  }

  /* Users Table */
  .premium-table-section {
    padding: 16px;
    height: auto !important;
    overflow: visible;
  }

  .table-scroll-container {
    margin-top: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Compact Table Cells on Mobile */
  .premium-table th,
  .premium-table td {
    padding: 12px 10px;
    font-size: 13px;
  }
}

/* =========================================
   SETTINGS VIEW FIXES
   ========================================= */

@media (max-width: 900px) {

  /* Settings Grid */
  .settings-grid-premium {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .settings-premium-container {
    padding: 16px !important;
    display: block !important;
  }

  /* Cards */
  .settings-card,
  .glass-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
    /* Reasonable min height */
    padding: 16px !important;
  }

  /* Inputs Width */
  .input-wrapper-premium,
  .input-group-premium {
    width: 100% !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Header in Settings */
  .settings-header-premium {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 24px;
  }

  /* Stats Row in Settings */
  .settings-stats-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    /* Scrollbar space */
    width: 100%;
    margin-bottom: 20px;
    gap: 12px;
  }

  .stat-glass-card {
    min-width: 140px;
    /* ensure items don't shrink too much */
    flex-shrink: 0;
  }
}

/* Premium Group List & Cards */
.groups-list-premium {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.group-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.group-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateX(4px);
}

.group-card.success {
  border-left: none;
}

.group-card.error {
  border-left: none;
}

.group-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

.group-status-icon svg {
  width: 16px;
  height: 16px;
}

.group-card.success .group-status-icon {
  background: transparent;
  color: #10b981;
}

.group-card.error .group-status-icon {
  background: transparent;
  color: #ef4444;
}

.group-card.loading .group-status-icon {
  background: transparent;
}

.group-content-wrapper {
  flex: 1;
  min-width: 0;
}

.group-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-error {
  font-size: 12px;
  color: #ef4444;
  margin-top: 2px;
}

.btn-icon-remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0;
}

.group-card:hover .btn-icon-remove {
  opacity: 1;
}

.btn-icon-remove:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Forum UI in List */
.group-forum-topics {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.forum-badge {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.topic-tags-container {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.topic-tag {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-muted);
}

.topic-hint {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}

.glass-btn-xs {
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text-muted);
}

.glass-btn-xs:hover {
  background: var(--bg-hover);
  color: var(--text-main);
  border-color: var(--border-color);
}

/* =========================================
   PREMIUM FILE ICONS
   ========================================= */
.message-file-item.file-icon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  transition: all 0.2s ease;
  min-width: 200px;
  max-width: 320px;
}

.message-file-item.file-icon:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.file-icon-wrapper {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.file-icon-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.file-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.file-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Light Theme overrides for files */
[data-theme="light"] .message-file-item.file-icon {
  background: #ffffff !important;
  border: 1px solid rgba(203, 17, 171, 0.15) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .message-file-item.file-icon:hover {
  background: #fdf2fa !important;
  border-color: #cb11ab !important;
}

[data-theme="light"] .file-name {
  color: #1f2937 !important;
}

/* Specific SVG overrides if needed */
.file-icon-svg.xlsx path[fill="#107C41"],
.file-icon-svg.xls path[fill="#107C41"] {
  fill: #107C41;
  /* Keep original Excel green */
}

/* Premium Microphone Icon */
.mic-icon-premium {
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.hero-mic-btn:hover .mic-icon-premium,
.btn-mic:hover .mic-icon-premium {
  color: #cb11ab;
  filter: drop-shadow(0 0 5px rgba(203, 17, 171, 0.4));
  transform: scale(1.1);
}

/* =========================================
   FILE ICON SVGS
   ========================================= */
.file-icon-svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Specific colors backup (SVG has inline strokes but this reinforces) */
.file-icon-svg.excel path {
  stroke: #10b981;
}

.file-icon-svg.pdf path {
  stroke: #ef4444;
}

.file-icon-svg.doc path {
  stroke: #3b82f6;
}

.file-icon-svg.image rect,
.file-icon-svg.image circle,
.file-icon-svg.image polyline {
  stroke: #f59e0b;
  fill: none;
}

.file-icon-svg.image circle {
  fill: #f59e0b;
  stroke: none;
}

/* File Preview Placeholder in Composer */
.file-preview-placeholder {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-preview-placeholder svg {
  width: 20px;
  height: 20px;
}

/* Chat Message Icon Wrapper */
.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  /* Dark theme default */
  border-radius: 10px;
  margin-right: 12px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.icon-wrapper svg {
  width: 20px;
  height: 20px;
}

/* Light Theme Overrides for Icons */
[data-theme="light"] .icon-wrapper {
  background: #f1f5f9;
  border-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .file-preview-placeholder {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

/* =========================================
   PREMIUM GROUP CARD (MINIMALIST 2026)
   ========================================= */

.group-card {
  display: flex;
  align-items: flex-start;
  /* Changed from center to allow multiline */
  gap: 12px;
  padding: 12px;
  background: var(--bg-card);
  /* Fallback */
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
  position: relative;
}

[data-theme="dark"] .group-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .group-card {
  background: #f8fafc;
  /* Very light grey */
  border-color: rgba(0, 0, 0, 0.05);
}

.group-card:hover {
  background: var(--bg-hover);
  border-color: var(--primary-glow);
  transform: translateY(-1px);
}

/* Status Icon (Checkmark) */
.group-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #10b981;
  /* Success Green */
  margin-top: 2px;
  /* Align with title */
  flex-shrink: 0;
}

.group-card.error .group-status-icon {
  color: #ef4444;
}

.group-card.loading .group-status-icon {
  color: #fbbf24;
}

/* Premium 'Generated' Product Image Style */
.message-content img[alt="Product Image"] {
  display: block;
  max-width: 300px;
  max-height: 300px;
  width: auto;
  height: auto;
  border-radius: 16px;
  /* Cyber-punk / Premium Glass Effect */
  border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.05);
  margin: 12px 0 16px 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  /* Subtle float animation init */
  animation: imgFloat 6s ease-in-out infinite;
}

.message-content img[alt="Product Image"]:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.25), 0 0 0 1px rgba(139, 92, 246, 0.4);
  filter: brightness(1.05);
  cursor: zoom-in;
}

@keyframes imgFloat {

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

  50% {
    transform: translateY(-6px);
  }
}

/* Content Wrapper */
.group-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  /* Prevent overflow */
}

/* Title & Meta Row */
.group-header-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.group-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-meta {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  opacity: 0.8;
}

/* Forum Topics Strip (The "Purple Bar") */
.group-forum-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  /* Slightly taller for breathing room */
  background: rgba(139, 92, 246, 0.08);
  /* Soft purple tint */
  border-radius: 8px;
  margin-top: 4px;
  width: 100%;
}

[data-theme="light"] .group-forum-row {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.1);
}

.forum-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8b5cf6;
  /* Violet */
  background: rgba(139, 92, 246, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.topic-tags-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(to right, black 90%, transparent 100%);
}

.topic-hint {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.topic-tag {
  font-size: 11px;
  color: var(--text-main);
  background: var(--bg-card);
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid var(--border-color);
}

/* Edit Button inside Forum Row */
.btn-forum-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.btn-forum-edit:hover {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}

/* Remove Button (Top Right Absolute) */
.btn-icon-remove {
  /* Using absolute positioning */
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  opacity: 0.0;
  /* Hidden by default for clean look */
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.group-card:hover .btn-icon-remove {
  opacity: 0.5;
}

.btn-icon-remove:hover {
  opacity: 1 !important;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* =========================================
   FIXED: Bot Cards Equal Height
   ========================================= */
#botsList {
  align-items: stretch !important;
  grid-auto-rows: auto !important;
}

/* Ensure inner content expands if needed */
#botsList .bot-card-glass {
  height: 100%;
}

/* =========================================
   FIXED: Add Store Modal Light Theme Visibility
   ========================================= */
[data-theme="light"] #addStoreModal input {
  color: #1f2937 !important;
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] #addStoreModal input::placeholder {
  color: #9ca3af !important;
}

[data-theme="light"] #addStoreModal label {
  color: #4b5563 !important;
}

[data-theme="light"] #addStoreModal .modal-header h3 {
  color: #1f2937 !important;
}

[data-theme="light"] #addStoreModal .modal-close,
[data-theme="light"] #addStoreModal .btn-close {
  color: #64748b !important;
}

/* Cancel button fix */
[data-theme="light"] #addStoreModal button[id="cancelAddStore"] {
  background: #f3f4f6 !important;
  color: #4b5563 !important;
  border: 1px solid #e5e7eb !important;
}

[data-theme="light"] #addStoreModal button[id="cancelAddStore"]:hover {
  background: #e5e7eb !important;
  color: #1f2937 !important;
}

/* =========================================
   VOICE RECORDING UI - PREMIUM 2026
   ========================================= */

/* Voice Toggle Button (Microphone ON/OFF) */
.btn-mic {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

/* Hero mic button - keep absolute positioning */
.hero-mic-btn {
  position: absolute;
  right: 76px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.btn-mic:hover,
.hero-mic-btn:hover {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
  transform: scale(1.05);
}

.btn-mic.recording,
.hero-mic-btn.recording {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  color: white;
  animation: pulse-recording 1.5s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

@keyframes pulse-recording {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.8);
    transform: scale(1.05);
  }
}

/* Inline Recording Bar */
.inline-recording-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  background: transparent;
  border: none;
  padding: 0;
  animation: fadeIn 0.3s ease;
  height: 100%;
  min-height: 36px;
  /* Match button height to prevent jump */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Recording Dot (Pulsing Red Indicator) */
.recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  animation: blink 1s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* Recording Timer */
.recording-timer-inline {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: #ef4444;
  min-width: 45px;
  text-align: center;
}

/* Voice Visualizer Container */
.voice-visualizer-container {
  flex: 1;
  height: 32px;
  min-width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.voice-visualizer-canvas {
  width: 100%;
  height: 100%;
}

/* Cancel Recording Button */
.recording-cancel-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(239, 68, 68, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.recording-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: none;
  color: #ef4444;
}

/* Confirm/Stop Recording Button */
.recording-confirm-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.recording-confirm-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
}

/* Light Theme Overrides for Recording */
[data-theme="light"] .inline-recording-bar {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(249, 115, 22, 0.04) 100%);
  border-color: rgba(239, 68, 68, 0.25);
}

[data-theme="light"] .btn-mic,
[data-theme="light"] .hero-mic-btn {
  background: rgba(0, 0, 0, 0.03);
  color: #64748b;
}

[data-theme="light"] .btn-mic:hover {
  background: transparent;
  color: var(--text-main);
  transform: none;
}

[data-theme="light"] .hero-mic-btn:hover {
  background: transparent;
  color: var(--text-main);
  transform: translateY(-50%);
}

/* =========================================
   FILE TYPE ICONS - PREMIUM SVG
   ========================================= */

/* File Attachment Preview Container */
.attached-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}

.attached-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-main);
  animation: slideIn 0.2s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

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

.attached-file-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Excel Icon */
.attached-file-icon.excel {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

/* PDF Icon */
.attached-file-icon.pdf {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Image Icon */
.attached-file-icon.image {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

/* CSV Icon */
.attached-file-icon.csv {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* Text Icon */
.attached-file-icon.text {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

/* Audio Icon */
.attached-file-icon.audio {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.attached-file-icon svg {
  width: 16px;
  height: 16px;
  color: white;
}

.attached-file-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attached-file-remove {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-left: auto;
}

.attached-file-remove:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Light Theme File Attachments */
[data-theme="light"] .attached-file {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* =========================================
   AUDIO MESSAGE PLAYER (In Chat)
   ========================================= */

.audio-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  max-width: 300px;
}

.audio-play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.audio-play-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.audio-waveform {
  flex: 1;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.audio-waveform .bar {
  width: 3px;
  background: rgba(139, 92, 246, 0.4);
  border-radius: 2px;
  transition: height 0.1s ease;
}

.audio-waveform .bar.played {
  background: #8b5cf6;
}

.audio-duration {
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  min-width: 40px;
  text-align: right;
}

/* Light Theme Audio Message */
[data-theme="light"] .audio-message {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);
  border-color: rgba(139, 92, 246, 0.15);
}

/* =========================================
   ATTACH BUTTON STYLING
   ========================================= */

.btn-attach {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.btn-attach:hover {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  transform: rotate(-10deg);
}

.btn-attach.has-files {
  color: #22c55e;
}

[data-theme="light"] .btn-attach {
  color: #64748b;
}

[data-theme="light"] .btn-attach:hover {
  background: rgba(139, 92, 246, 0.08);
  color: #7c3aed;
}

/* Model Dropdown in Composer */
.model-dropdown-wrapper-composer {
  position: relative;
  /* It's in a flex row now */
  left: auto;
  top: auto;
  transform: none;
  margin-right: 4px;
}

.model-dropdown-wrapper-composer .model-dropdown-trigger {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  padding: 0 12px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.model-dropdown-wrapper-composer .model-dropdown-trigger:hover,
.model-dropdown-wrapper-composer.open .model-dropdown-trigger {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.model-dropdown-wrapper-composer .model-dropdown-menu {
  bottom: 100%;
  /* Open upwards */
  top: auto;
  /* Unset top */
  left: 0;
  margin-bottom: 8px;
  /* Gap from trigger */
  transform-origin: bottom left;
}

.model-dropdown-wrapper-composer.open .model-dropdown-menu {
  transform: translateY(0) scale(1);
}

/* Mobile hiding for text label in composer to save space */
@media (max-width: 640px) {
  .model-dropdown-wrapper-composer .mobile-hide {
    display: none;
  }

  .model-dropdown-wrapper-composer .model-dropdown-trigger {
    padding: 6px;
  }

  .model-dropdown-wrapper-composer .chevron {
    display: none;
  }
}

/* =========================================
   CUSTOM AUDIO PLAYER
   ========================================= */
.audio-player-custom {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  max-width: 320px;
  margin-top: 4px;
}

.audio-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.audio-play-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.audio-play-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.audio-progress-container {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}

.audio-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #a78bfa;
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}

.audio-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  min-width: 35px;
  text-align: right;
}

[data-theme="light"] .audio-player-custom {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .audio-play-btn {
  background: white;
  color: #1f2937;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .audio-play-btn:hover {
  background: #f3f4f6;
}

[data-theme="light"] .audio-progress-container {
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .audio-progress-bar {
  background: #7c3aed;
}

[data-theme="light"] .audio-time {
  color: #64748b;
}

/* =========================================
   SETTINGS MINIMALIST REDESIGN (Dec 2025)
   Target: #settingsView specific overrides
   ========================================= */

/* 1. Global Container & Grid */
#settingsView .settings-premium-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

#settingsView .settings-grid-premium {
  gap: 16px;
}

/* 2. Flattened Cards (Remove Glass/Glow) */
#settingsView .settings-card,
#settingsView .glass-panel {
  background: var(--bg-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
}

#settingsView .settings-card:hover {
  transform: none !important;
  border-color: var(--border-color) !important;
}

/* 3. Header Simplification */
#settingsView .panel-header-premium {
  border-bottom: 1px solid var(--border-color);
  padding: 16px 20px;
  background: transparent !important;
}

#settingsView .panel-header-premium h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#settingsView .header-icon,
#settingsView .header-icon-premium {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: var(--text-muted) !important;
  width: auto !important;
  height: auto !important;
}

#settingsView .header-icon svg,
#settingsView .header-icon-premium svg {
  width: 20px;
  height: 20px;
}

/* 4. Minimalist Inputs */
#settingsView .input-group-premium label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: normal;
}

#settingsView .input-wrapper-premium,
#settingsView .select-wrapper-premium {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease;
}

#settingsView .input-wrapper-premium:focus-within,
#settingsView .select-wrapper-premium:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1) !important;
}

#settingsView input,
#settingsView select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
}

#settingsView .suffix {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 14px;
  padding-right: 12px;
}

/* 5. Toggles */
#settingsView .toggle-switch-premium {
  width: 40px;
  height: 22px;
}

#settingsView .toggle-switch-premium .slider {
  border-radius: 99px;
}

#settingsView .toggle-switch-premium .slider:before {
  height: 18px;
  width: 18px;
  bottom: 2px;
  left: 2px;
}

#settingsView .toggle-switch-premium input:checked+.slider {
  background-color: var(--primary);
}

/* 6. Buttons & Top Stats */
#settingsView .btn-premium-secondary,
#settingsView .btn-premium-primary {
  border-radius: 8px !important;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 16px;
  box-shadow: none !important;
  text-transform: none;
  letter-spacing: normal;
  transition: all 0.2s ease;
}

#settingsView .btn-premium-primary {
  background: var(--primary) !important;
  color: white !important;
}

#settingsView .btn-premium-primary:hover {
  background: var(--primary-light) !important;
}

#settingsView .btn-premium-secondary {
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}

#settingsView .btn-premium-secondary:hover {
  border-color: var(--text-muted) !important;
  background: var(--bg-hover) !important;
}

#settingsView .settings-stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

#settingsView .stat-glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 16px;
  backdrop-filter: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#settingsView .stat-glass-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

#settingsView .stat-glass-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
  text-shadow: none !important;
}

/* 7. Packages List Grid */
#packagesListSettings {
  padding: 20px;
}

#packagesListSettings .admin-package-card {
  border-radius: 10px;
  border: 1px solid var(--border-color);
  box-shadow: none !important;
  background: var(--bg-card);
  padding: 12px 16px;
}

#packagesListSettings .admin-package-card:hover {
  border-color: var(--primary);
  background: var(--bg-hover);
}

#packagesListSettings .apc-name {
  font-size: 13px;
  font-weight: 500;
}

#packagesListSettings .apc-price {
  font-size: 13px;
  font-weight: 600;
}

/* =========================================
   SETTINGS LIGHT THEME FIXES (CRITICAL)
   Target: Fix white-on-white text in inputs/cards
   ========================================= */

/* Force correct text color for inputs in Settings */
#settingsView input,
#settingsView select {
  color: var(--text-main) !important;
  background: transparent !important;
  /* Wrapper handles bg */
}

/* Ensure Package Card text is visible */
#packagesListSettings .admin-package-card,
#packagesListSettings .apc-name {
  color: var(--text-main) !important;
}

#packagesListSettings .apc-price {
  color: var(--primary) !important;
}

/* Force light theme colors specifically if needed */
[data-theme="light"] #settingsView input,
[data-theme="light"] #settingsView select,
[data-theme="light"] #packagesListSettings .apc-name,
[data-theme="light"] .stat-glass-value {
  color: #1f2937 !important;
  /* Force Dark Gray */
}

[data-theme="light"] #settingsView .input-wrapper-premium,
[data-theme="light"] #settingsView .select-wrapper-premium {
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
}

/* =========================================
   SETTINGS VISUAL REFINEMENT (Rounder & Softer)
   Target: Fix "too square/ugly" feedback
   ========================================= */

/* 1. Softer Rounds for Cards */
#settingsView .settings-card,
#settingsView .glass-panel {
  border-radius: 24px !important;
  /* Much rounder */
  border: 1px solid var(--border-color);
  /* Maintain clean border */
  /* Add very subtle shadow for depth without "glow" */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

/* 2. Rounder Inputs */
#settingsView .input-wrapper-premium,
#settingsView .select-wrapper-premium {
  border-radius: 14px !important;
  padding: 2px 4px;
  /* Slight padding inside wrapper */
}

/* 3. Package Cards - Rounder */
#packagesListSettings .admin-package-card {
  border-radius: 18px !important;
}

/* 4. Buttons - Rounder */
#settingsView .btn-premium-secondary,
#settingsView .btn-premium-primary {
  border-radius: 14px !important;
}

/* 5. Header Visuals */
/* Add back a tiny bit of separation but keep it clean */
#settingsView .panel-header-premium {
  padding: 20px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

#settingsView .panel-body-premium {
  padding: 24px !important;
}

/* 6. Toggle Switch - Rounder Pill */
#settingsView .toggle-switch-premium .slider {
  border-radius: 50px;
}

/* FIX: Icon overlap in Settings Inputs */
#settingsView .input-wrapper-premium.with-icon input {
  padding-left: 44px !important;
  /* Ensure enough space for 24px icon + padding */
}

/* =========================================
   ONBOARDING MODAL STYLES (ADDED) 
   ========================================= */
.info-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 14px;
  color: var(--text-muted);
}

.info-box-important {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0;
}

.info-box-title {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.info-box-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 1.4;
}

.code-block {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 10px;
  font-family: monospace;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  word-break: break-all;
}

/* Light Theme Overrides */
[data-theme="light"] .info-box {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

[data-theme="light"] .info-box-important {
  background: rgba(139, 92, 246, 0.05);
  border-color: rgba(139, 92, 246, 0.2);
}

[data-theme="light"] .info-box-title {
  color: #7c3aed;
  /* Purple for title in light mode */
}

[data-theme="light"] .info-box-text {
  color: #334155;
}

[data-theme="light"] .code-block {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.instruction-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  margin-top: 12px;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* =========================================
   FEEDBACK VIEW STYLES (PREMIUM 2.0)
   ========================================= */

.feedback-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  align-items: start;
  /* Critical: Top alignment */
  /* Critical: Top alignment */
  padding-top: 20px;
  padding-bottom: 60px;
}

#feedbackView {
  /* display is handled by JS toggling (block/none) */
  position: absolute !important;
  top: 80px;
  /* Header height offset */
  left: 0;
  width: 100%;
  height: calc(100vh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 0 !important;
  margin-top: 0 !important;
  justify-content: start !important;
  z-index: 50;
  /* Ensure it sits above main content flow but below modals */
  background: var(--bg-body);
  /* Ensure opaque background covers anything underneath */
}

#adminFeedbackView {
  position: absolute !important;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100vh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px;
  box-sizing: border-box;
  z-index: 50;
  background: var(--bg-body);
}

#adminFeedbackView .admin-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px;
  /* Increased rim indent */
  height: calc(100vh - 80px);
  /* Full height minus top header */
  display: flex;
  flex-direction: column;
}

#adminFeedbackList {
  overflow-y: auto;
  flex: 1;
  /* Takes remaining height */
  padding-right: 8px;
  /* Scrollbar space */
  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

#adminFeedbackView .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

#adminFeedbackView .section-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Premium Glass Card */
.feedback-card {
  position: relative;
  background: var(--bg-card);
  /* Fallback */
  background: rgba(20, 20, 30, 0.6);
  /* Glass dark */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Light Theme Override for Card */
[data-theme="light"] .feedback-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(203, 17, 171, 0.15);
  box-shadow: 0 10px 40px -10px rgba(203, 17, 171, 0.1);
}

.feedback-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.4);
}

/* Accent Top Border */
.feedback-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  opacity: 0.8;
}

/* Typography */
.feedback-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 12px;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--text-main) 0%, var(--text-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .feedback-title {
  background: linear-gradient(135deg, #1f2937 0%, #4a2b69 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feedback-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 28px;
  line-height: 1.6;
}

/* Input Area */
.feedback-textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  color: var(--text-main);
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  min-height: 200px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
}

[data-theme="light"] .feedback-textarea {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  color: #1f2937;
}

.feedback-textarea:focus {
  outline: none;
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

[data-theme="light"] .feedback-textarea:focus {
  background: #ffffff;
  border-color: var(--primary);
}

/* History List */
.feedback-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(203, 17, 171, 0.3) transparent;
}

.feedback-history-list::-webkit-scrollbar {
  width: 6px;
}

.feedback-history-list::-webkit-scrollbar-track {
  background: transparent;
}

.feedback-history-list::-webkit-scrollbar-thumb {
  background: rgba(203, 17, 171, 0.3);
  border-radius: 3px;
}

.feedback-history-list::-webkit-scrollbar-thumb:hover {
  background: rgba(203, 17, 171, 0.5);
}

.feedback-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.2s ease;
}

[data-theme="light"] .feedback-item {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
}

.feedback-item:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(4px);
}

[data-theme="light"] .feedback-item:hover {
  background: #f8fafc;
}

/* Status Badges */
.feedback-status {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
  .feedback-container {
    grid-template-columns: 1fr;
    /* Single col */
    gap: 24px;
    padding: 0 16px;
    /* Outer padding */
    padding-top: 100px;
    /* ACCOUNT FOR HEADER HEIGHT ON MOBILE */
    padding-bottom: 100px;
  }

  /* Make sure header doesn't overlap */
  #feedbackView {
    padding-top: 0;
  }

  .feedback-card {
    padding: 24px;
    /* Smaller padding */
  }

  .feedback-title {
    font-size: 22px;
  }
}

/* =========================================
   ADMIN FEEDBACK 3.6 (COMPACT & SCROLL)
   ========================================= */

/* Main List Container (Scrollable) */
/* The ID #adminFeedbackList should be targeted if possible,
   or we wrap it. Assuming dashboard-v2.js renders directly into it. */
#adminFeedbackList {
  max-height: 60vh;
  /* Viewport based height */
  overflow-y: auto;
  padding: 4px 12px 20px 12px;
  /* Top, Right, Bottom, Left */
  /* "Rim a bit larger offset" -> Padding inside the scroll container */
  margin: 0 -12px;
  /* Negative margin to align scrollbar to edge if needed, or keep contained */
  /* Custom Scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(203, 17, 171, 0.3) transparent;
}

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

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

#adminFeedbackList::-webkit-scrollbar-thumb {
  background-color: rgba(203, 17, 171, 0.3);
  border-radius: 20px;
}

/* 1. Filter Tabs (Pill Style) */
.admin-tabs-row {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  /* Reduced from 32 */
  background: rgba(255, 255, 255, 0.02);
  padding: 3px;
  border-radius: 100px;
  width: fit-content;
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
}

.admin-tab-btn {
  padding: 6px 16px;
  /* Reduced from 8 20 */
  border-radius: 100px;
  font-size: 12px;
  /* Reduced */
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  background: transparent;
  border: none;
}

.admin-tab-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

.admin-tab-btn.active {
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-weight: 600;
  transform: scale(1.02);
}

[data-theme="light"] .admin-tabs-row {
  background: #f1f5f9;
  border-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .admin-tab-btn.active {
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.admin-tab-count {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.8;
  background: rgba(128, 128, 128, 0.15);
  padding: 1px 6px;
  border-radius: 100px;
}

[data-theme="light"] .admin-tab-count {
  background: rgba(0, 0, 0, 0.06);
  color: #4b5563;
}

/* 2. List Items (Deep Cards - COMPACTED) */
.feedback-item-admin {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  /* Slightly tighter radius */
  padding: 16px;
  /* Reduced from 28 */
  margin-bottom: 12px;
  /* Reduced from 24 */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}

/* Hover Effect: Lift */
.feedback-item-admin:hover {
  transform: translateY(-2px);
  /* Reduced lift */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(203, 17, 171, 0.15);
}

[data-theme="light"] .feedback-item-admin {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .feedback-item-admin:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  border-color: rgba(203, 17, 171, 0.1);
}

/* Header Layout */
.feedback-header-admin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  /* Compact */
  padding-bottom: 6px;
  /* Compact */
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.user-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Reduced */
}

/* Compact Rich Avatar */
.user-avatar-mini {
  width: 36px;
  /* Reduced from 42 */
  height: 36px;
  background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #6366f1;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
}

/* Dark mode avatar override */
body:not([data-theme="light"]) .user-avatar-mini {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(203, 17, 171, 0.2) 100%);
  color: #e0e7ff;
  border-color: rgba(255, 255, 255, 0.1);
}

.user-info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-name-admin {
  font-size: 14px;
  /* Reduced from 16 */
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

[data-theme="light"] .user-name-admin {
  color: #111827;
}

.msg-date-admin {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Refined Pill Badges (Compact) */
.badge-admin {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  /* Reduced */
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.2s;
}

.badge-new {
  background: rgba(203, 17, 171, 0.06);
  color: #cb11ab;
  border: 1px solid rgba(203, 17, 171, 0.1);
}

.badge-replied {
  background: rgba(139, 92, 246, 0.06);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.1);
}

[data-theme="light"] .badge-new {
  background: #fdf2fa;
  border-color: transparent;
}

[data-theme="light"] .badge-replied {
  background: #f5f3ff;
  border-color: transparent;
}

/* 3. Content Area: Clean Text (Compact) */
.msg-content-admin {
  font-size: 13px;
  /* Compact */
  line-height: 1.4;
  color: var(--text-main);
  margin-bottom: 10px;
  /* Compact */
  padding: 0 2px;
}

[data-theme="light"] .msg-content-admin {
  color: #374151;
}

/* 4. Reply Section: Compact Bubble */
.admin-reply-result {
  margin-top: 6px;
  /* Compact spacing */
  padding: 14px;
  /* Compact padding */
  border-radius: 12px;
  /* Distinct Bubble Background */
  background: var(--bg-secondary);
  border: 1px solid rgba(128, 128, 128, 0.05);
  position: relative;
}

/* Light mode bubble */
[data-theme="light"] .admin-reply-result {
  background: #f8fafc;
  /* Slate 50 */
  border-color: #f1f5f9;
}

/* Icon / Header for Reply */
.reply-header-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--primary);
  /* Use Primary color for label */
  font-weight: 700;
  margin-bottom: 8px;
  /* Reduced */
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.9;
  letter-spacing: 0.5px;
}

.reply-text-final {
  color: var(--text-main);
  font-size: 13.5px;
  /* Reduced */
  line-height: 1.5;
  font-weight: 400;
}

/* Remove the old left border style if present */
.admin-reply-result {
  border-left: none !important;
}

/* Specific fix for user history cards - closer reply placement */
.feedback-item-premium .admin-reply-result {
  margin-top: 8px !important;
}

/* 5. Reply Form (Embedded, No Grey Box) */
.feedback-reply-form {
  margin-top: 24px;
  animation: fadeIn 0.3s ease;
}

/* Minimal Textarea */
.input-minimal {
  width: 100%;
  min-height: 100px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-main);
  resize: vertical;
  transition: all 0.2s;
}

.input-minimal:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.01);
}

[data-theme="light"] .input-minimal {
  background: #f9fafb;
  /* Extremely subtle */
  border-color: #e5e7eb;
  color: #1f2937;
}

[data-theme="light"] .input-minimal:focus {
  background: #ffffff;
  border-color: #cb11ab;
  box-shadow: 0 0 0 4px rgba(203, 17, 171, 0.05);
}

/* Actions */
.form-actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

.btn-ghost-sm {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.2s;
}

.btn-ghost-sm:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
}

[data-theme="light"] .btn-ghost-sm:hover {
  background: #f1f5f9;
  color: #111827;
}

.btn-primary-sm {
  background: #cb11ab;
  color: white;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(203, 17, 171, 0.2);
  transition: all 0.2s;
}

.btn-primary-sm:hover {
  background: #d946ef;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(203, 17, 171, 0.3);
}

/* Action Bar (The 'Reply' button to open form) */
.action-bar-minimal {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Reply Link */
.btn-link-action {
  background: transparent;
  border: none;
  color: var(--primary);
  /* Accent color link */
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background 0.2s;
}

.btn-link-action:hover {
  background: rgba(139, 92, 246, 0.1);
}

[data-theme="light"] .btn-link-action {
  color: #cb11ab;
}

[data-theme="light"] .btn-link-action:hover {
  background: rgba(203, 17, 171, 0.05);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

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