/* ===== แทนที่ไฟล์ styles.css ทั้งหมด ===== */

/* Google Fonts & Reset */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&family=Prompt:wght@300;400;500;600;700;800;900&display=swap');

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

html {
  height: auto;
  overflow-y: auto;
}

body {
  width: 100%;
  min-height: 100dvh;
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}

body {
  font-family: 'Noto Sans', sans-serif;
  line-height: 1.6;
  background-color: #ffffff;
  /* White background for Premium feel */
  color: #1e293b;
  /* Slate 800 */
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.user-name,
#business-name-header,
.tools-section h3,
.tools-section label,
.tools-section button,
.column-header,
#chat-status,
.qr-title,
.qr-message {
  font-family: 'Prompt', sans-serif;
  font-weight: 500;
  /* Default weight for headers */
}

h1,
h2,
h3 {
  font-weight: 600;
  /* Bolder for main headers */
  color: #1c1e21;
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

/* Header Navigation */
header {
  background-color: rgba(255, 255, 255, 0.4);
  /* Ultra-Glass (Very Transparent) */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px -2px rgba(139, 92, 246, 0.1);
  /* Soft Violet Shadow */
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: calc(50px + env(safe-area-inset-top, 0px));
  /* Explicitly 50px as requested */
  padding-top: 2px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  /* Subtle Violet Border */
  overflow: visible !important;
  /* DO NOT CLIP DROP-DOWN MENU */
}

nav .nav-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2px 1.5rem 0 1.5rem !important;
  /* Removed vertical padding, added 2px top offset per user request */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Ensure vertical centering */
  height: 100%;
  position: relative;
}

nav h1 {
  font-size: 3.2rem;
  /* Even larger */
  font-family: 'Prompt', sans-serif;
  /* Explicitly set font */
  margin: 0;
  background: linear-gradient(135deg, #8b5cf6, #06b6d4);
  /* Violet-Cyan */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  /* Extra bold */
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  letter-spacing: 2px;
  /* Wider spacing */
  line-height: 0.9;
  /* Tighter line height for large text */
  padding-bottom: 0;
  /* Visual balance */
}

nav ul {
  display: flex;
  align-items: center;
  gap: 1rem;
}

nav a,
nav button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  background: none;
  font-size: 0.9rem;
}

nav a:hover,
nav button:hover {
  background-color: #f0f2f5;
}

#logout-btn {
  color: #d93025;
}

/* Mobile Navigation */
#menu-toggle-btn {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: #333;
  padding: 0.5rem;
}

#nav-links {
  display: flex;
  flex-direction: row;
  position: static;
  background: none;
  box-shadow: none;
  width: auto;
  padding: 0;
}

#nav-links li {
  margin-left: 1rem;
}

@media (max-width: 768px) {
  #menu-toggle-btn {
    display: block;
    align-self: center;
    /* Force vertical centering */
    margin: 0;
    /* Remove any default margins */
    align-items: center;
    justify-content: center;
    display: flex;
    /* Ensure centering inside nav */
    height: 100%;
    /* Fill container */
  }

  #nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 200px;
    padding: 0.5rem;
    z-index: 1005;
  }

  #nav-links.active {
    display: flex;
  }

  #nav-links li {
    width: 100%;
    margin-left: 0;
  }

  #nav-links a,
  #nav-links button {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/* Login & Admin Container */
.container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ===== Main App Layout ===== */
.app-container {
  display: grid;
  grid-template-columns: 100%;
  height: calc(var(--vh, 1vh) * 100 - 60px - env(safe-area-inset-top, 0px));
  background-color: transparent;
  /* Make transparent for gradients */
  max-width: 100vw;
  overflow: hidden;
}

.app-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid rgba(139, 92, 246, 0.1);
  /* Soft violet border */
  background-color: transparent;
  /* CRITICAL: Transparent to show body gradient */
  backdrop-filter: none;
}

/* Chat Column - Solid Background for Readability */
/* Chat Column - Transparent to let Header be Glassy */
#chat-column {
  background-color: transparent;
  /* Removed Solid White to show gradient behind header */
  backdrop-filter: none;
}

.app-column:last-child {
  border-right: none;
}

/* Column Headers - ทุกอันสูงเท่ากัน */
.column-header {
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.1);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.4);
  /* Glassy Header (0.4) */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.column-header h2 {
  font-size: 1.1rem;
  margin: 0;
}

/* Mobile Buttons */
.mobile-only {
  display: flex;
  /* ★★★ เพิ่ม flex เพื่อจัดไอคอนให้อยู่กลางเป๊ะๆ ★★★ */
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #606770;
  padding: 0.8rem;
  /* ★★★ เพิ่ม padding ให้ใหญ่ขึ้น ★★★ */
  border-radius: 50%;
  width: 44px;
  /* ★★★ กำหนดขนาดปุ่มให้เหมาะสมกับการกดด้วยนิ้ว ★★★ */
  height: 44px;
}

.mobile-only:hover {
  background-color: #f0f2f5;
}

/* Chat Header Mobile Buttons */
#back-to-list-btn,
#tools-btn {
  color: #667eea;
  /* Brand Color - Purple */
  font-size: 1.2rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  /* Remove padding to align perfectly with container edge */
}

/* Remove special positioning */
#tools-btn {
  /* padding-right: 1.5rem;  <-- REMOVED */
}

.desktop-only {
  display: none;
}

/* ===== Column 1: User List ===== */
#user-list-column .column-header {
  justify-content: center;
  /* Center horizontally */
}

#user-list-column .column-header h2 {
  width: 100%;
  text-align: center;
}

#search-container .fa-search {
  position: absolute;
  left: 35px;
  /* Safely inside (16px padding + 19px offset) */
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  z-index: 2;
  /* Ensure on top */
}

#search-user {
  width: 100%;
  padding: 0.5rem 2.2rem 0.5rem 2.5rem;
  /* ★ Adjusted for clear button ★ */
  border-radius: 50px;
  border: 1px solid #e1e4e8;
  background-color: #f8fafc;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  height: 36px;
  /* ★ Reduced height ★ */
}

#search-user:focus {
  background-color: #fff;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  outline: none;
}

/* ✅ สไตล์ปุ่มล้างค้นหาในช่อง Search */
#search-container {
  position: relative;
  width: 100%;
  max-width: 320px;
  /* ★ Limit max width for cleaner look ★ */
  padding: 0 1rem;
  box-sizing: border-box;
  margin: 0.5rem auto;
  /* ★ Center and add spacing ★ */
}

.clear-search-btn {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  line-height: 1;
  z-index: 2;
  display: none;
  /* ★ Hidden by default, JS will show when needed ★ */
}

.clear-search-btn i {
  color: #999;
  font-size: 14px;
  transition: color 0.2s;
}

.clear-search-btn:hover i {
  color: #666;
}


#user-list-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Revert to original styles + Timestamp adjustment */
#user-list li {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(139, 92, 246, 0.1);
  background: rgba(255, 255, 255, 0.3);
  /* More transparent (Glass 30%) */
  backdrop-filter: blur(5px);
}

#user-list li:hover {
  background-color: rgba(139, 92, 246, 0.05);
  /* Very light violet */
  padding-left: 1.8rem;
}

#user-list li.active {
  background-color: rgba(139, 92, 246, 0.1);
  /* Light violet */
  border-left: 4px solid #7c3aed;
  /* Violet 600 */
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-grow: 1;
  min-width: 0;
  /* Important for truncation */
}

/* ===== REMOVED: Old PFP styles - See new styles at .user-pfp-wrapper section below ===== */

/* New: Helper class for name/time row */
.user-details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-grow: 1;
  /* Ensure parent container allows it to grow */
}

.user-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
  margin-right: auto;
  /* Push subsequent item (time) to the far right */
}

.last-active-time {
  font-size: 0.75rem;
  color: #999;
  white-space: nowrap;
  margin-left: 8px;
  /* space between name and time */
}

.unread-dot {
  width: 10px;
  height: 10px;
  background-color: #e43f5a;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px white;
}

#user-list li:hover {
  background-color: #f8faff;
  padding-left: 1.25rem;
  /* Adjusted hover slide */
  /* Subtle slide effect */
}

/* Active State for User List Item */
#user-list li.active {
  background-color: #eef2ff;
  /* Very light purple/blue */
  border-left: 4px solid #667eea;
}

#user-list .user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-grow: 1;
}

#user-list .user-info span {
  font-weight: 500;
}

#user-list .user-actions .toggle-id-btn {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  background-color: #e4e6eb;
  border-radius: 4px;
}

#user-list .fa-line {
  color: #00B900;
  /* font-size handled in platform-badge now */
}

#user-list .fa-facebook-messenger {
  color: #0078FF;
}

/* Load More Button */
.load-more-btn {
  display: block;
  width: calc(100% - 2rem);
  /* Match padding */
  margin: 1rem auto;
  padding: 0.8rem;
  background-color: #f7f9fc;
  color: #667eea;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  font-family: 'Prompt', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s ease;
}

.load-more-btn:hover {
  background-color: #eef2ff;
  border-color: #667eea;
  color: #5a67d8;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(102, 126, 234, 0.15);
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ===== NEW User List Item Layout (Variation A) ===== */
.user-list-item {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0.8rem 1.2rem !important;
  /* ★ Increased from 0.6rem 1rem ★ */
  border-bottom: 1px solid #f0f2f5;
  transition: all 0.2s ease;
}

.user-item-left {
  flex-shrink: 0;
  margin-right: 1rem;
}

.user-pfp-wrapper {
  position: relative !important;
  width: 52px !important;
  /* ★ Increased from 48px ★ */
  height: 52px !important;
  /* ★ Increased from 48px ★ */
  flex-shrink: 0;
}

.user-pfp {
  width: 100% !important;
  height: 100% !important;
  max-width: 52px;
  /* ★ Increased from 48px ★ */
  max-height: 52px;
  /* ★ Increased from 48px ★ */
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* ★★★ FIX: Prevent Facebook profile flicker ★★★ */
  /* Facebook CDN URLs have tokens that expire, causing browser to re-fetch */
  /* This creates a smooth fade-in instead of jarring flicker */
  opacity: 1;
  transition: opacity 0.15s ease-in-out;
  background-color: #e8e8e8;
  /* Placeholder color while loading */
}

.user-pfp-placeholder {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background-color: #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 1.5rem;
}

.platform-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  border: 2px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 11px;
  z-index: 2;
}

/* Color specific badges */
.platform-badge.channel-line .fab {
  color: #00B900;
}

.platform-badge.channel-facebook .fab {
  color: #0078FF;
}

.user-item-right {
  flex-grow: 1;
  min-width: 0;
  /* Enable truncation for flex children */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  /* Center vertically */
}

.user-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.user-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.05rem;
  /* ★ Increased from 1rem ★ */
  color: #1c1e21;
}

/* ★ UX: Skeleton Loader (Shimmer Effect) ★ */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

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

.skeleton {
  background: linear-gradient(90deg, #f0f2f5 25%, #e6e8eb 50%, #f0f2f5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-text {
  background: linear-gradient(90deg, #f0f2f5 25%, #e6e8eb 50%, #f0f2f5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  display: inline-block;
  border-radius: 4px;
}

.skeleton-item {
  display: flex;
  padding: 0.8rem 1.2rem;
  align-items: center;
  border-bottom: 1px solid #f0f2f5;
}

.skeleton-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 1rem;
}

.skeleton-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-line-short {
  height: 14px;
  width: 40%;
  border-radius: 4px;
}

.skeleton-line-long {
  height: 12px;
  width: 80%;
  border-radius: 4px;
}

.last-active-time {
  font-size: 0.8rem;
  /* ★ Increased from 0.75rem ★ */
  color: #999;
  white-space: nowrap;
  margin-left: 8px;
  flex-shrink: 0;
}

.user-item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20px;
  margin-top: 2px;
}

.last-message-preview {
  font-size: 0.85rem;
  /* ★ Increased from 0.8rem ★ */
  color: #8898aa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  margin-right: 8px;
}

/* Update active state text color */
#user-list li.active .user-name {
  color: #4a5568 !important;
}

.unread-dot {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  /* Brand Gradient */
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px white;
  /* Clean static style, no glow */
}

.hidden {
  display: none;
}

/* ===== Column 2: Chat ===== */
.chat-header {
  display: flex;
  /* Ensure flex behavior */
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.5rem;
  /* Match nav-container padding exactly */
}

#chat-title {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Center content horizontally */
  gap: 0.5rem;
  font-size: 1.1rem;
  flex-grow: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  /* Enforce bold on container */
}

.chat-user-name {
  font-weight: 700;
  /* Bold font */
  font-family: 'Prompt', sans-serif;
}

.clickable-title {
  cursor: pointer;
  transition: all 0.2s;
  padding: 2px 8px;
  border-radius: 4px;
}

.clickable-title:hover {
  background-color: #f0f2f5;
  color: #667eea;
}

#chat-box {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* ★ Prevent horizontal scroll from large images ★ */
  padding: 1rem;
  background-color: #f4f6f9;
  /* ★ Changed to Light Gray for contrast with white bubbles ★ */
  display: flex;
  flex-direction: column;
}

/* ★ UX Improved: Invisible Render & Fade-In classes ★ */
.chat-box-hidden {
  opacity: 0;
  visibility: hidden;
}

.chat-box-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease-out;
}

.message {
  padding: 0.8rem 1.2rem;
  border-radius: 18px;
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: 0.95rem;
  white-space: pre-wrap;
  max-width: 100%;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  /* Default shadow */
  font-family: 'Noto Sans', sans-serif;
}

.user {
  background-color: #374151;
  /* ★ Dark Slate Gray (High Contrast) ★ */
  border: none;
  color: #ffffff;
  /* ★ White Text ★ */
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  /* Stronger shadow */
}

.admin {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
  box-shadow: 0 2px 5px rgba(102, 126, 234, 0.3);
  /* ★ Added colored shadow ★ */
}

.ai {
  /* ★ Changed to Deep Tech Blue Gradient (Royal Blue -> Sky Blue) ★ */
  /* Old: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) - too neon */
  background: linear-gradient(135deg, #005bea 0%, #00c6fb 100%);
  color: white;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 91, 234, 0.3);
  /* ★ Added colored shadow ★ */
}

.system {
  background-color: #FFFDD0;
  /* ★ สีครีม ★ */
  color: #333;
  /* สีตัวอักษรเข้ม */
  border: 1px solid #f0e68c;
  /* เส้นขอบบางๆ (ถ้าต้องการ) */
}

/* Date Separator Pill Style */
.date-separator {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 1rem;
  width: 100%;
}

.date-separator span {
  background-color: rgba(0, 0, 0, 0.06);
  color: #65676b;
  font-size: 0.75rem;
  padding: 0.25rem 0.8rem;
  border-radius: 12px;
  font-weight: 500;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  user-select: none;
}

.chat-image-preview {
  max-width: 100%;
  /* ★ Responsive: Fit within bubble ★ */
  max-height: 200px;
  width: auto;
  height: auto;
  border-radius: 15px;
  /* ★ STABILITY FIX: Fixed Height & Crop ★ */
  height: 160px;
  /* Fixed height for absolute stability */
  width: 100%;
  /* Fill width */
  min-height: 160px;
  background-color: #f0f2f5;
  margin-top: 5px;
  display: block;
  object-fit: cover;
  /* Crop to fit box (clean look) */
}

#send-form {
  display: flex;
  padding: 1rem;
  gap: 0.8rem;
  border-top: 1px solid #eee;
  background-color: #fff;
  flex-shrink: 0;
  align-items: flex-end;
  /* Align icons with bottom of textarea */
}

#send-form.facebook-window-locked {
  opacity: 0.92;
}

.facebook-window-warning {
  display: none;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0.75rem 1rem 0;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid #ffd7a6;
  background: linear-gradient(135deg, #fff8ee 0%, #fff1d8 100%);
  color: #6b3e00;
  box-shadow: 0 10px 24px rgba(168, 101, 12, 0.08);
}

.facebook-window-warning.is-visible {
  display: flex;
}

.facebook-window-warning-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 12px;
  background: #fff;
  color: #0078ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: inset 0 0 0 1px rgba(0, 120, 255, 0.12);
}

.facebook-window-warning-body {
  min-width: 0;
}

.facebook-window-warning-title {
  font-family: 'Prompt', sans-serif;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.3;
}

.facebook-window-warning-text {
  margin-top: 0.2rem;
  font-size: 0.84rem;
  line-height: 1.45;
}

.facebook-window-warning-meta {
  margin-top: 0.35rem;
  font-size: 0.77rem;
  font-weight: 600;
  color: #9a5a00;
}

#upload-file-btn.is-disabled,
#quick-reply-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

#message-input {
  flex-grow: 1;
  border: 1px solid #e4e6eb;
  /* Cleaner border */
  background-color: #f8f9fa;
  padding: 0.8rem 1.2rem;
  border-radius: 24px;
  font-size: 0.95rem;
  resize: none;
  transition: all 0.2s;
  overflow-y: hidden;
  /* Hide vertical scrollbar */
  line-height: 1.4;
  /* Improve line height */
  max-height: 120px;
  /* Limit max height */
  font-family: 'Noto Sans', sans-serif;
  /* ★ Same font as chat messages ★ */
}

#message-input::placeholder {
  font-family: 'Noto Sans', sans-serif;
  color: #999;
  font-weight: 400;
}

#message-input:focus {
  outline: none;
  border-color: #667eea;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

#send-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform 0.2s;
}

/* Icon & Text Styles */
/* Icon & Text Styles - Transparent Background */
.menu-icon-bg {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: none;
  /* User requested to remove background */
  /* User complained about BG. Let's make it brand purple text on transparent bg to be safe/modern */
  /* Actually step 762 user asked for purple. Step 786 I reverted to blue bg.
     Now they want NO bg.
     If NO bg, I should probably use the Brand Purple for the icon itself to match the header. */
  color: #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  /* Slightly larger icon since no box */
  margin-right: 0.5rem;
  transition: all 0.3s ease;
}

#send-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

#send-btn:disabled {
  transform: none;
  box-shadow: none;
  background: linear-gradient(135deg, #c7cfdd 0%, #a7b0c2 100%);
  cursor: not-allowed;
}

/* ===== Column 3: Tools ===== */
#tools-column .column-header {
  position: relative;
  /* For absolute positioning of back button */
  justify-content: center;
  /* Center the text (h2) */
  gap: 1rem;
  padding: 0.8rem 1.5rem;
  /* Match chat-header padding exactly */
}

#back-to-chat-btn {
  position: absolute;
  left: 0.7rem;
  /* Fine-tuned position between 0 (too left) and 1.5rem (too right) */
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #667eea;
  padding: 0;
  /* Remove padding to align perfectly with guide */
  cursor: pointer;
  /* Ensure it looks like a simple icon, not a heavy button */
}

.tools-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  background-color: #fff;
  /* Ensure tools column is also white */
}

#chat-status-container {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e4e6eb;
}

.tools-section {
  margin-bottom: 2rem;
  background-color: rgba(255, 255, 255, 0.7);
  /* Glass Card */
  backdrop-filter: blur(10px);
  padding: 1rem;
  border-radius: 12px;
  /* Remove strong shadow since bg is same, use border or very subtle shadow */
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.tools-section h3 {
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tools-section label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.tools-section textarea {
  width: 100%;
  min-height: 80px;
  padding: 0.8rem;
  border-radius: 8px;
  border: 1px solid #e4e6eb;
  font-family: inherit;
  transition: border-color 0.2s;
  background-color: #f8f9fa;
  resize: vertical;
}

.tools-section textarea:focus {
  outline: none;
  border-color: #667eea;
  background-color: #fff;
}

.tools-section button,
#chat-controls button {
  width: 100%;
  padding: 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}

.tools-section button {
  background-color: #667eea;
  /* Primary Gradient base */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.tools-section button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Modern AI Status UI */
.ai-status-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8f9fa;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid #e9ecef;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  /* ★ FIX: Required for width/height on span */
  vertical-align: middle;
  /* ★ Align with text */
  margin-right: 8px;
  /* ★ Space between dot and text */
}

/* Remove pseudo-element glow entirely */

.status-dot.active {
  background: linear-gradient(135deg, #2dce89 0%, #26a069 100%);
  /* Green gradient */
}

.status-dot.paused {
  background: linear-gradient(135deg, #fb6340 0%, #f5365c 100%);
  /* Orange-red gradient */
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }

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

span#chat-status {
  font-weight: 700;
  font-size: 0.85rem;
  /* ★ Slightly smaller to fit */
  letter-spacing: 0.5px;
  color: #32325d;
  text-transform: uppercase;
  white-space: nowrap;
  /* ★ FIX: Prevent text wrapping */
  display: flex;
  align-items: center;
}

/* Toggle AI Button */
.ai-control-btn {
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  /* Space between buttons */
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ai-control-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

/* State: Pause (Normal operation, User wants to Pause) - Gradient Purple/Blue per User Preference for Desktop style */
.ai-control-btn.pause {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* State: Resume (AI Paused, User wants to Resume) - Gradient Orange/Red (Alerting) */
.ai-control-btn.resume {
  background: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%) !important;
}

/* Layout for Chat Controls (Vertical Stack) */
#chat-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Side-by-side buttons for Ban & Delete */
.control-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.control-row button {
  flex: 1;
  margin-bottom: 0 !important;
  /* Override any specific bottom margin */
}

#toggle-ban-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  /* Purple Gradient */
  color: #fff;
  border: none;
  font-weight: 600;
}

/* When user IS banned, show different style (Unban state) */
#toggle-ban-btn.secondary-btn {
  background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%) !important;
  /* Gold/Light Gradient for Unban */
  /* OR simpler yellow gradient if prefer vivid */
  background: linear-gradient(135deg, #ffd200 0%, #f7971e 100%) !important;
  color: white !important;
  border: none;
  box-shadow: 0 4px 6px rgba(247, 151, 30, 0.3);
}

.danger-btn {
  background-color: #e53e3e;
  color: white;
}

/* ทำให้ปุ่ม Disconnect มีสีแดงที่ชัดเจน */
.secondary-btn.danger-btn {
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}

.secondary-btn.danger-btn:hover {
  background-color: #f1b0b7;
  border-color: #ee9a9a;
}

/* Quoted Message Preview (Reply) */
.quoted-message-container {
  background: rgba(0, 0, 0, 0.04);
  border-left: 2px solid #667eea;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  flex-direction: column;
  gap: 2px;
  user-select: none;
  max-width: 100%;
  color: inherit;
}

.quoted-message-container:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.user .quoted-message-container {
  background: rgba(0, 0, 0, 0.12);
  border-left-color: #667eea;
}

.quoted-sender {
  font-weight: 700;
  font-size: 0.75rem;
  opacity: 0.9;
  margin-bottom: 2px;
}

.quoted-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}

/* Quote Highlight Flash Effect */
@keyframes highlight-flash {
  0% {
    background-color: rgba(102, 126, 234, 0.4);
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
  }

  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

.highlight-flash {
  animation: highlight-flash 1.5s ease-out;
  border-radius: 12px;
}

#edit-displayname-btn {
  background: none;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  color: #606770;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#edit-displayname-btn:hover {
  background-color: #f0f2f5;
}

/* ===== Responsive Layout ===== */

/* Mobile: Hide other columns initially */
#chat-column,
#tools-column {
  display: none;
}

/* Mobile View States */
.app-container.view-chat #user-list-column,
.app-container.view-chat #tools-column {
  display: none;
}

.app-container.view-chat #chat-column {
  display: flex;
}

.app-container.view-tools #user-list-column,
.app-container.view-tools #chat-column {
  display: none;
}

.app-container.view-tools #tools-column {
  display: flex;
}

/* Desktop Layout */
@media (min-width: 1024px) {
  .mobile-only {
    display: none;
  }

  .desktop-only {
    display: block;
  }

  .app-container {
    grid-template-columns: 300px 1fr 320px;
  }

  #user-list-column,
  #chat-column,
  #tools-column {
    display: flex !important;
  }

  #chat-title {
    text-align: left;
    justify-content: flex-start;
  }

  #user-list-column .column-header {
    justify-content: flex-start;
  }
}

/* ===== แก้ไข Mobile Layout  ===== */

/* Mobile Specific - */
@media (max-width: 768px) {

  /* ⚠️ CRITICAL: iOS PWA Safe Area - ห้ามลบ env(safe-area-inset-top) ออก!
     ถ้าลบ header จะชน status bar บน iPhone PWA mode
     ดูเพิ่มเติม: IOS_PWA_GUIDELINES.md */
  header {
    height: calc(50px + env(safe-area-inset-top, 0px));
    padding-top: calc(2px + env(safe-area-inset-top, 0px));
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    overflow: visible !important;
  }

  /* ปรับ viewport และ layout หลัก */
  html,
  body {
    height: 100vh;
    overflow: hidden;
  }

  body {
    padding-top: calc(50px + env(safe-area-inset-top, 0px));
    /* เพื่อไม่ให้ content ซ้อนกับ fixed header */
  }

  /* App container ใช้เต็มพื้นที่ที่เหลือ */
  .app-container {
    height: calc(100vh - 50px - env(safe-area-inset-top, 0px));
    max-height: calc(100vh - 50px - env(safe-area-inset-top, 0px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }


  /* Column headers ปรับขนาด */
  .column-header {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    flex-shrink: 0;
  }

  /* Chat header */
  .chat-header {
    padding: 0 0.5rem;
  }

  /* Chat title */
  #chat-title {
    font-size: 1rem;
    max-width: calc(100% - 120px);
    padding: 0 0.5rem;
  }

  /* ปรับ Chat Box ให้ไม่ตกขอบ */
  #chat-box {
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 160px);
    /* 50px header + 50px column-header + 60px send-form */
    overflow-y: auto;
    padding: 0.5rem;
    padding: 0.5rem;
    background-color: #ffffff;
    /* Reset to Solid White as requested */
    display: flex;
    flex-direction: column;
  }

  /* Send form ติดล่าง */
  #send-form {
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    display: flex;
    padding: 0.5rem;
    gap: 0.5rem;
    border-top: 1px solid #ddd;
    background-color: #fff;
    flex-shrink: 0;
  }

  .facebook-window-warning {
    margin: 0.5rem 0.5rem 0;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
  }

  .facebook-window-warning-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 10px;
  }

  .facebook-window-warning-title {
    font-size: 0.9rem;
  }

  .facebook-window-warning-text {
    font-size: 0.8rem;
  }

  .facebook-window-warning-meta {
    font-size: 0.73rem;
  }

  /* Message input responsive */
  #message-input {
    flex-grow: 1;
    border: none;
    background-color: #f0f2f5;
    padding: 0.6rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
  }

  /* Send button responsive - Keep desktop style (Purple Circle) */
  /* #send-btn styles removed to inherit desktop styles */

  /* User List responsive */
  #user-list-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* max-height: calc(100vh - 100px); <-- REMOVED THIS LINE */
  }

  /* Tools content responsive */
  .tools-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem;
    /* max-height: calc(100vh - 100px); <-- REMOVED THIS LINE */
  }

  /* Messages ปรับขนาด */
  .message {
    padding: 0.6rem 1rem;
    margin-bottom: 0.4rem;
    max-width: 100%;
    font-size: 0.9rem;
  }

  /* Navigation buttons responsive */
  .nav-btn span {
    display: none;
    /* ซ่อนข้อความบนมือถือ แสดงแค่ icon */
  }

  .nav-btn {
    padding: 0.5rem;
    min-width: 40px;
  }

  /* Login container responsive */
  .container {
    margin: 1rem;
    padding: 1rem;
  }

  /* Search container responsive */
  #search-container {
    padding: 0 0.5rem;
  }

  #search-container .fa-search {
    left: 20px;
    /* Adjusted for smaller container padding */
  }

  #search-user {
    padding: 0.5rem 2.5rem 0.5rem 2.5rem;
    /* More left padding to clear icon */
    font-size: 0.85rem;
  }

  .clear-search-btn {
    right: 20px;
    /* Adjusted for smaller container padding */
  }
}

/* เพิ่ม CSS สำหรับ Landscape mode บนมือถือ */
@media (max-width: 768px) and (orientation: landscape) {
  #chat-box {
    max-height: calc(100vh - 140px);
    /* ปรับสำหรับ landscape */
  }

  .tools-content {
    max-height: calc(100vh - 80px);
  }

  #user-list-container {
    max-height: calc(100vh - 80px);
  }
}

/* Modern Navigation Buttons */
/* Modern Navigation Buttons */
.nav-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.2rem;
  /* Reduced padding */
  border: none;
  border-radius: 50px;
  /* Pill shape */
  font-size: 0.85rem;
  /* Smaller font */
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: 'Prompt', sans-serif;
  letter-spacing: 0.3px;
}

/* Settings Button - Glass Style */
#open-admin-settings {
  background: rgba(255, 255, 255, 0.5);
  /* Glass */
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
  backdrop-filter: blur(5px);
}

#open-admin-settings:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

#open-admin-settings i {
  font-size: 1.1rem;
}

/* Logout Button - Glass Style */
.logout-btn {
  background: rgba(255, 255, 255, 0.5);
  /* Glass */
  backdrop-filter: blur(5px);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.2) !important;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.05);
}

.logout-btn:hover {
  background-color: #fff5f5;
  border-color: #dc3545 !important;
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.2);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .nav-btn {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    width: 100% !important;
    text-align: left !important;
  }

  .nav-btn span {
    display: inline-block !important;
    font-size: 0.9rem !important;
  }

  .nav-btn i {
    width: 20px !important;
    text-align: center !important;
  }
}

/* MOBILE FIX */
/* Force mobile viewport */
/* ===== Mobile Layout Overrides (ก้อนเดียวจบ) ===== */
@media (max-width: 768px) {

  /* --- 1. การตั้งค่าพื้นฐานสำหรับ Mobile View --- */
  html,
  body {
    height: 100vh;
    overflow: hidden;
    /* ป้องกันการเลื่อนทั้งหน้า */
  }

  body {
    padding-top: calc(50px + env(safe-area-inset-top, 0px));
    /* เว้นที่ให้ Header ที่จะ fixed ไว้ข้างบน */
  }

  header {
    height: calc(50px + env(safe-area-inset-top, 0px));
    padding-top: calc(2px + env(safe-area-inset-top, 0px));
    position: fixed;
    /* Header อยู่กับที่เสมอ */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    overflow: visible !important;
  }

  /* --- 2. โครงสร้างหลักของแอป --- */
  .app-container {
    height: calc(100dvh - 50px - env(safe-area-inset-top, 0px));
    /* ให้แอปใช้พื้นที่ทั้งหมดที่เหลือ */
    display: flex;
    /* ★★★ เปลี่ยนเป็น Flexbox เพื่อควบคุมแนวตั้ง ★★★ */
    flex-direction: column;
    /* ★★★ เรียงจากบนลงล่าง ★★★ */
  }

  /* --- 3. การแสดงผลคอลัมน์ Chat (เมื่อถูกเลือก) --- */
  .app-container.view-chat #chat-column {
    display: flex;
    flex-direction: column;
    /* ให้คอลัมน์แชทเรียงจากบนลงล่าง */
    height: 100%;
    /* ใช้ความสูงเต็มพื้นที่ของ .app-container */
  }

  /* --- 4. กล่องข้อความ (หัวใจของการแก้ปัญหา) --- */
  #chat-box {
    flex: 1;
    /* ★★★ ให้กล่องข้อความยืดขยายจนเต็มพื้นที่ที่เหลือ ★★★ */
    min-height: 0;
    /* ★★★ คำสั่งวิเศษเพื่อให้ flex: 1 ทำงานถูกต้อง ★★★ */
    overflow-y: auto;
    /* เปิดให้เลื่อนได้เฉพาะในกล่องนี้ */
    -webkit-overflow-scrolling: touch;
    /* ทำให้เลื่อนลื่นบน iOS */
    padding: 0.5rem;
  }

  /* --- 5. ฟอร์มส่งข้อความ (ส่วนที่จะขยายตัว) --- */
  #send-form {
    flex-shrink: 0;
    /* ป้องกันไม่ให้ฟอร์มหดตัวเมื่อเนื้อหาเยอะ */
    padding: 0.5rem;
    gap: 0.5rem;
    border-top: 1px solid #ddd;
    background-color: #fff;
  }

  /* --- 6. การปรับแต่งอื่นๆ ให้สวยงาม --- */
  .column-header {
    height: 50px;
    min-height: 50px;
  }

  #chat-title {
    font-size: 1rem;
    max-width: calc(100% - 120px);
  }

  .message {
    padding: 0.6rem 1rem;
    margin-bottom: 0.4rem;
    max-width: 100%;
    font-size: 0.9rem;
  }
}

/* ===== แก้ไข User List Item ===== */
.user-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  /* ดันไปทางขวา */
}

.unread-dot {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  /* Brand gradient */
  border-radius: 50%;
  flex-shrink: 0;
  /* ป้องกันการหดตัว */
  box-shadow: 0 0 0 2px white;
  /* Static white ring, no animation */
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

#user-list li {
  /* แก้ไขเล็กน้อยเพื่อให้ flex ทำงานได้ดีขึ้น */
  justify-content: space-between;
}

#user-list .user-info {
  /* ไม่ต้องโตเต็มความกว้างแล้ว เพราะ user-actions จะดันไปเอง */
  flex-grow: 0;
}

/* กรอบสำหรับครอบบับเบิ้ลและเวลาเข้าด้วยกัน */
/* กรอบสำหรับครอบบับเบิ้ลและเวลาเข้าด้วยกัน */
.message-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  /* Increased width significantly, but not touching the edge */
  margin-bottom: 0.2rem;
}

/* จัดกลุ่มข้อความที่ส่ง (admin/ai) ไปทางขวา */
.message-wrapper.sent {
  align-self: flex-end;
  align-items: flex-end;
}

/* จัดกลุ่มข้อความที่รับ (user) ไปทางซ้าย - เปลี่ยนเป็น Row เพื่อใส่รูป */
.message-wrapper.received {
  align-self: flex-start;
  flex-direction: row;
  /* ★ Change to Row for Avatar + Content ★ */
  align-items: flex-start;
  /* ★ Align avatar to TOP (LINE Style) ★ */
  gap: 8px;
  /* Space between avatar and bubble */
}

/* Container for Bubble + Timestamp inside received wrapper */
.message-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  flex: 1;
  min-width: 0;
}

/* ★ FIX: Align content to right for SENT messages ★ */
.message-wrapper.sent .message-content {
  align-items: flex-end;
}

/* スไตล์รูปโปรไฟล์ในแชท */
.chat-pfp {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.chat-pfp.invisible {
  visibility: hidden;
  /* Keep space but hide image */
}

.chat-pfp-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 12px;
  flex-shrink: 0;
}

.chat-pfp-placeholder.invisible {
  visibility: hidden;
}

/* สไตล์สำหรับ Sticker (แทนข้อความ Raw) */
.sticker-msg {
  font-style: italic;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sticker-msg-wrapper {
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.line-sticker-img {
  max-width: 150px;
  max-height: 150px;
  width: auto;
  height: auto;
  background-color: transparent;
  display: block;
  object-fit: contain;
}

.sticker-fallback {
  display: flex;
  align-items: center;
  gap: 6px;
  font-style: italic;
}

/* สไตล์ของตัวหนังสือเวลา */
.message-timestamp {
  font-size: 0.70rem;
  color: #999;
  margin-top: 2px;
  padding: 0 4px;
  /* Adjust padding */
  min-width: 60px;
  /* Ensure readability */
}

/* รูปโปรไฟล์ใน User List (เดิม) */
.user-pfp,
.user-pfp,
.user-pfp-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  /* ทำให้รูปไม่บิดเบี้ยว */
  background-color: #e0e0e0;
  flex-shrink: 0;
  /* ป้องกันการหดตัว */
}

/* กรณีไม่มีรูป (ใช้ไอคอนแทน) */
.user-pfp-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #888;
}

/* ปรับระยะห่างของ .user-info */
#user-list .user-info {
  gap: 0.75rem;
  /* ลดระยะห่างเล็กน้อย */
}

/* User ID ในคอลัมน์ Details */
#user-id-details-container h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

p.user-id-display {
  background-color: #f0f2f5;
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  font-family: monospace;
  /* ใช้ font ที่เหมาะกับการแสดง ID */
  font-size: 0.85rem;
  word-wrap: break-word;
  /* ตัดคำถ้า ID ยาว */
  user-select: all;
  /* ทำให้เลือกเพื่อ copy ได้ง่าย */
}

/* +++ CSS แก้ไขการจัดเรียงไอคอนและรูปโปรไฟล์ +++ */

/* ใช้ Flexbox จัดการการเรียงตัวในแนวตั้ง */
#user-list .user-info {
  align-items: center;
  /* ★★★ บรรทัดนี้คือหัวใจสำคัญ ★★★ */
}

/* ปรับขนาดไอคอนโซเชียลให้ใกล้เคียงกับรูปโปรไฟล์ */
#user-list .user-info .fab {
  font-size: 1.6rem;
  /* อาจจะต้องปรับค่านี้เล็กน้อยเพื่อให้ดูสมดุลที่สุด */
  width: 32px;
  /* กำหนดความกว้างให้เท่ากับรูปโปรไฟล์ */
  text-align: center;
  /* จัดไอคอนให้อยู่ตรงกลางพื้นที่ที่กำหนด */
}

/* +++ CSS เพิ่มเติมสำหรับจัดกลาง Chat Header บน PC +++ */

/* สไตล์สำหรับไอคอนแพลตฟอร์มใน Header */
.chat-header-icon {
  font-size: 1.5rem;
  margin-right: 0.75rem;
  /* สร้างระยะห่างระหว่างไอคอนกับชื่อ */
}

/* ★★★ ส่วนสำคัญ: จัดกลาง #chat-title เฉพาะบนจอ PC ★★★ */
@media (min-width: 1024px) {
  #chat-title {
    /* override สไตล์เดิมที่สั่งให้ชิดซ้าย */
    justify-content: center;
    text-align: center;

    /* ทำให้แน่ใจว่าเป็น flex container เพื่อจัดเรียงไอคอนกับชื่อ */
    display: flex;
    align-items: center;
  }
}

/* +++ CSS เพิ่มเติมสำหรับรูปโปรไฟล์ใน Chat Header +++ */

/* Wrapper สำหรับรูปโปรไฟล์และ badge ใน Header */
.chat-header-pfp-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin-right: 0.5rem;
}

/* สไตล์รูปโปรไฟล์ใน Header */
.chat-header-pfp,
.chat-header-pfp-placeholder {
  width: 100%;
  height: 100%;
  max-width: 36px;
  max-height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #e0e0e0;
  /* ★★★ FIX: Transition for smooth fade-in (prevent Facebook flicker) ★★★ */
  transition: opacity 0.15s ease-in-out;
}

/* สไตล์ Placeholder กรณีไม่มีรูป */
.chat-header-pfp-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #888;
}

/* Platform Badge ใน Chat Header */
.chat-header-platform-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  border: 2px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  font-size: 9px;
  z-index: 2;
}

/* สีไอคอน platform */
.chat-header-platform-badge.channel-line .fab {
  color: #00B900;
}

.chat-header-platform-badge.channel-facebook .fab {
  color: #0078FF;
}

/* +++ CSS แก้ไข Chat Header บนมือถือ +++ */

/* ทำให้ #chat-title เป็น flex container เพื่อจัดเรียงไอเท็มข้างใน */
#chat-title {
  display: flex;
  align-items: center;
  /* ★★★ จัดทุกอย่างให้อยู่กลางแนวตั้ง ★★★ */
  justify-content: center;
  /* ★★★ จัดกลางสำหรับทั้งมือถือและ PC ★★★ */
  gap: 0.5rem;
  /* ระยะห่างระหว่างไอเท็ม */
  flex-grow: 1;
  overflow: hidden;
  /* ป้องกันข้อความยาวเกิน */
}

/* ทำให้ชื่อยืดหยุ่นและตัดคำเมื่อยาวเกินไป */
#chat-title .chat-user-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ปรับขนาดไอคอนและรูปบนมือถือให้เล็กลงเล็กน้อย */
@media (max-width: 768px) {
  .chat-header-icon {
    font-size: 1.25rem;
    /* ลดขนาดไอคอนโซเชียล */
    margin-right: 0;
    /* เอาระยะห่างขวาออก เพราะใช้ gap แทน */
  }

  .chat-header-pfp,
  .chat-header-pfp-placeholder {
    width: 28px;
    /* ลดขนาดรูปโปรไฟล์ */
    height: 28px;
    margin-right: 0;
    /* เอาระยะห่างขวาออก */
  }
}

/* แก้ไขการจัดวางบน PC ให้กลับมาอยู่ตรงกลางเหมือนเดิม */
@media (min-width: 1024px) {
  #chat-title {
    justify-content: center;
    /* ★★★ ทำให้กลับมาอยู่กลางบน PC ★★★ */
  }
}

/* +++ CSS เพิ่มเติมสำหรับปุ่มแนบไฟล์ +++ */

/* สไตล์ของปุ่มไอคอนคลิปหนีบ */
.attach-file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  font-size: 1.3rem;
  color: #606770;
  /* สีเทา */
  cursor: pointer;
  transition: color 0.2s ease;
  background: none;
  border: none;
}

.chat-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  font-size: 1.3rem;
  color: #606770;
  cursor: pointer;
  transition: color 0.2s ease;
  background: none;
  border: none;
}

.chat-action-btn:hover {
  color: #0078FF;
}

.attach-file-btn:hover {
  color: #0078FF;
  /* เปลี่ยนเป็นสีฟ้าเมื่อ hover */
}

/* ปรับระยะห่างของฟอร์มส่งข้อความเล็กน้อย */
#send-form {
  gap: 0.5rem;
}

/* +++ CSS สำหรับ Drag & Drop Highlight +++ */

#chat-column.highlight {
  /* เพิ่มเส้นขอบสีฟ้าประๆ รอบคอลัมน์แชท */
  border: 3px dashed #0078FF;
  background-color: #f0f8ff;
  /* เพิ่มสีพื้นหลังอ่อนๆ */
}

/* +++ CSS เพิ่มเติมสำหรับ Custom Password Prompt Modal +++ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  /* โปร่งขึ้นเพื่อให้เห็นพื้นหลัง */
  backdrop-filter: blur(4px);
  /* เพิ่ม Blur ที่พื้นหลังใหญ่ */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: rgba(255, 255, 255, 0.85);
  /* Glass Effect */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 1.25rem;
  /* ลด Padding อีก */
  border-radius: 18px;
  /* ลด Radius ให้เข้ากับขนาด */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  /* Soft shadow */
  width: 85%;
  max-width: 300px;
  /* ลดขนาดเหลือ 300px (เล็กมาก) */
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-family: 'Prompt', sans-serif;
  text-align: center;
  animation: modalPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }

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

.modal-content h3 {
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: #1e293b;
  /* Dark Slate */
  font-size: 1.1rem;
  /* ลดขนาดฟอนต์หัวข้อ */
}

#prompt-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  margin-bottom: 1.25rem;
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
  font-family: 'Prompt', sans-serif;
  color: #333;
  text-align: center;
  /* พิมพ์ตรงกลาง */
}

#prompt-input:focus {
  outline: none;
  border-color: #8b5cf6;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.modal-actions button {
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  font-weight: 600;
  min-width: 90px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Prompt', sans-serif;
  font-size: 0.95rem;
  border: none;
}

/* ปุ่มยืนยัน (Gradient) */
#prompt-ok-btn {
  background: linear-gradient(135deg, #8b5cf6, #06b6d4);
  color: white;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

#prompt-ok-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35);
}

/* ปุ่มยกเลิก (Soft Gray) */
#prompt-cancel-btn {
  background: #f1f5f9;
  color: #64748b;
}

#prompt-cancel-btn:hover {
  background: #e2e8f0;
  color: #475569;
}

.modal-actions button:active {
  transform: scale(0.98);
}

#prompt-cancel-btn {
  background-color: #e2e8f0;
  color: #4a5568;
  border: none;
}

#prompt-cancel-btn:hover {
  background-color: #cbd5e0;
}

#prompt-ok-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

#prompt-ok-btn:hover {
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
  transform: translateY(-1px);
}

/* +++ CSS เพิ่มเติมสำหรับ Prompt Error และ Animation +++ */

/* สไตล์ข้อความ Error */
.error-message {
  color: #e53e3e;
  /* สีแดง */
  font-size: 0.9rem;
  margin-top: -1rem;
  /* ดึงขึ้นมาให้อยู่ใต้ input */
  margin-bottom: 1.5rem;
}

/* ★★★ Animation การสั่น (Shake) ★★★ */
.modal-content.shake {
  animation: shake 0.5s;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

/* +++ CSS ยกเครื่องหน้า Admin Settings +++ */

/* ทำให้ container ดูดีขึ้น */
#admin-container {
  max-width: 700px;
  /* จำกัดความกว้างเพื่อให้ดูสวยบนจอใหญ่ */
  padding: 1.5rem 2rem;
}

.admin-header h2 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: center;
  color: #333;
}

.admin-menu-group {
  margin-bottom: 2rem;
}

.admin-group-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-left: 0.5rem;
}

ul.admin-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.admin-menu-list li {
  margin-bottom: 0.5rem;
}

/* ★★★ สไตล์หลักของปุ่มเมนู "กล่องใหญ่ๆ สวยๆ" ★★★ */
ul.admin-menu-list li button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.2rem;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  /* ทำให้ขอบมนสวยงาม */
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

ul.admin-menu-list li button:hover {
  background-color: #e9ecef;
  border-color: #ced4da;
  transform: translateY(-2px);
  /* เพิ่ม animation ตอน hover */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

ul.admin-menu-list li button i {
  font-size: 1.2rem;
  margin-right: 0;
  color: #007bff;
}

.admin-footer {
  margin-top: 2rem;
  text-align: center;
}



/* ปรับสไตล์ของหน้าย่อยๆ ให้สวยขึ้นด้วย */
#admin-container form {
  margin-top: 1.5rem;
}

#admin-container form label {
  font-weight: 500;
}

#admin-container form input,
#admin-container form textarea {
  width: 100%;
  padding: 0.8rem;
  border-radius: 8px;
  border: 1px solid #ced4da;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

#admin-container form button[type="submit"] {
  width: 100%;
  padding: 0.8rem;
  border-radius: 8px;
  background-color: #007bff;
  color: white;
  font-size: 1rem;
  font-weight: 500;
}

#admin-container #back-admin {
  margin-top: 1rem;
  width: 100%;
}

/* +++ CSS ยกเครื่องหน้าย่อย Admin (FAQ, etc.) +++ */



/* สไตล์การ์ดสำหรับ Add/Edit */
.admin-card {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 2rem;
}

.admin-card h3 {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* ★★★ Admin Tabs Styling ★★★ */
.admin-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 0;
}

.admin-tab {
  padding: 0.75rem 1.5rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  color: #6c757d;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-tab:hover {
  color: #667eea;
  background-color: rgba(102, 126, 234, 0.05);
}

.admin-tab.active {
  color: #667eea;
  border-bottom-color: #667eea;
  font-weight: 600;
}

.admin-tab i {
  font-size: 1rem;
}

.admin-tab-panel {
  display: none;
}

.admin-tab-panel.active {
  display: block;
}

/* ★★★ Package Badge Styling ★★★ */
.package-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ★★★ Button Styles ★★★ */
.btn-small.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
}

.btn-small.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.primary-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.primary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ★★★ Package Cards Styling ★★★ */
.package-card {
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.package-card:hover {
  border-color: #667eea;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

.package-card-current {
  border-color: #667eea;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.package-card-selected {
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
}

.package-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.package-card-header h4 {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
}

.current-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  border-radius: 20px;
  font-weight: 600;
}

.package-card-price {
  margin-bottom: 1rem;
  text-align: center;
}

.package-card-price .price {
  font-size: 2rem;
  font-weight: 700;
  color: #667eea;
}

.package-card-price .period {
  color: #888;
  font-size: 0.9rem;
}

.package-card-limits {
  border-top: 1px solid #eee;
  padding-top: 1rem;
  margin-bottom: 1rem;
}

.package-card-limits p {
  margin: 0.4rem 0;
  font-size: 0.9rem;
  color: #666;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.package-card-limits i {
  color: #667eea;
  width: 20px;
}

.select-package-btn {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.select-package-btn:hover:not(.disabled) {
  opacity: 0.9;
  transform: translateY(-2px);
}

.select-package-btn.disabled {
  background: #e9ecef;
  color: #aaa;
  cursor: not-allowed;
}


/* หัวข้อของลิสต์ FAQ */
.faq-list-header {
  margin-bottom: 1rem;
}

.faq-list-header h3 {
  font-size: 1.2rem;
  color: #555;
}

/* สไตล์ของแต่ละไอเท็มในลิสต์ FAQ */
.faq-item {
  background-color: #ffffff;
  padding: 1.2rem;
  border-radius: 10px;
  border: 1px solid #e9ecef;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  /* ทำให้ Edit form ขึ้นบรรทัดใหม่ได้ */
}

.faq-content {
  flex-grow: 1;
}

.faq-content p {
  margin: 0 0 0.5rem 0;
  line-height: 1.5;
}

.faq-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: 1rem;
  /* ระยะห่างจากเนื้อหา */
}

.faq-actions button {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 6px;
  background-color: #e4e6eb;
}

.faq-actions button.danger-btn {
  background-color: #e53e3e;
  color: white;
}

/* ส่วนของฟอร์มแก้ไขที่ซ่อนอยู่ */
.edit-faq-container {
  width: 100%;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed #ddd;
}

.edit-faq-container textarea {
  min-height: 60px;
  margin-bottom: 1rem;
}

.edit-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.edit-form-actions button {
  width: auto;
}

/* +++ CSS เพิ่มเติมสำหรับหน้า Admin ย่อยๆ +++ */

/* จัดกลุ่มปุ่ม Upload ไฟล์ให้สวยงาม */
.upload-group {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.upload-group input[type="file"] {
  flex-grow: 1;
  margin-bottom: 0;
}

.upload-group button {
  width: auto;
  flex-shrink: 0;
}

/* รูป Thumbnail ในรายการ Image Library */
.admin-thumb-preview {
  max-width: 120px;
  max-height: 120px;
  border-radius: 8px;
  margin: 0.5rem 0;
  margin: 0.5rem 0;
  border: 1px solid #eee;
}

/* Background Gradients - Light & Soft */
.bg-gradient-1 {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
}

.bg-gradient-2 {
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
}

/* พื้นหลัง (เหมือนเดิม) */
/* พื้นหลัง (Gradient ม่วง/น้ำเงิน) */
.login-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  /* White background */
  display: flex;
  /* Removed align-items and justify-content to prevent top/bottom cropping */
  z-index: 3000;
  padding: 2rem 1rem;
  overflow-y: auto;
  overflow-x: hidden;
}

/* การ์ด Login (พื้นหลังขาว เงาฟุ้ง) */
/* การ์ด Login (Premium Glassmorphism Style) */
.login-card {
  background: rgba(255, 255, 255, 0.8);
  /* Glass effect */
  backdrop-filter: blur(12px);
  /* Glass effect */
  -webkit-backdrop-filter: blur(12px);
  padding: 2rem;
  /* Reduced padding */
  border-radius: 20px;
  /* Softer corners */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  /* Soft shadow */
  width: 100%;
  max-width: 400px;
  /* Slimmer */
  border: 1px solid rgba(139, 92, 246, 0.15);
  /* Soft violet border */
  margin: auto;
  /* Centers the card and allows it to start at the top if content overflows */
  position: relative;
  z-index: 1;
}

.login-card h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #1e293b;
  /* Slate 800 */
  font-weight: 700;
}

.login-subtitle {
  text-align: center;
  color: #475569;
  /* Slate 600 */
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* ★★★ แก้ไขตรงนี้เป็นต้นไป โดยการเพิ่ม #login-form เข้าไป ★★★ */

#login-form .input-group {
  margin-bottom: 1.2rem;
}

#login-form .input-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #1e293b;
  /* Slate 800 */
  font-size: 0.9rem;
}

#login-form .input-with-icon {
  position: relative;
}

#login-form .input-with-icon i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  transition: color 0.2s;
  z-index: 1;
}

#login-form .input-with-icon input {
  width: 100%;
  padding: 0.9rem 1rem 0.9rem 2.8rem;
  border: 2px solid #e4e6eb;
  border-radius: 10px;
  background-color: #fff;
  font-size: 1rem;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#login-form .input-with-icon input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

#login-form .input-with-icon input:focus~i {
  color: #667eea;
}

#login-form .login-btn {
  width: 100%;
  padding: 1rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  /* Violet-Indigo */
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

#login-form .login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
  /* Violet shadow */
}

/* Register Link Styles */
.register-link {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #666;
}

.register-link a {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
}

.register-link a:hover {
  text-decoration: underline;
}

/* ===== CSS สำหรับ Optimistic UI */

/* ทำให้ wrapper เป็นตัวกำหนดตำแหน่งของ status icon */
.message-wrapper.sent {
  position: relative;
  /* เพิ่มพื้นที่ด้านขวาเล็กน้อยสำหรับ status icon โดยไม่ทำให้ layout ขยับ */
}

/* สถานะของข้อความ (ไอคอน ⏱️, ✅, ⚠️) */
.message-status {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 0.8rem;
  color: #888;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: scale(0);
  /* เริ่มต้นด้วยการซ่อนไอคอน */
}

/* ทำให้ไอคอนปรากฏขึ้นเมื่อมีสถานะ */
.message-wrapper.sending .message-status,
.message-wrapper.success .message-status,
.message-wrapper.error .message-status {
  transform: scale(1);
}

/* ข้อความที่กำลังส่ง... */
.message.sending {
  opacity: 0.6;
  /* ทำให้จางลงเล็กน้อย */
}

/* ข้อความที่ส่งล้มเหลว */
.message-wrapper.error .message.admin {
  background-color: #ffcdd2;
  /* พื้นหลังสีแดงอ่อน */
  color: #c62828;
  /* ตัวหนังสือสีแดงเข้ม */
  border: 1px solid #ef5350;
}

/* ปุ่ม Retry */
.retry-btn {
  background: none;
  border: 1px solid #c62828;
  color: #c62828;
  padding: 2px 6px;
  font-size: 0.7rem;
  border-radius: 4px;
  margin-left: 5px;
  cursor: pointer;
  font-weight: bold;
}

.retry-btn:hover {
  background-color: rgba(198, 40, 40, 0.1);
}

/* ============================================== */
/* ===         สไตล์สำหรับไฟล์แนบในแชท         === */
/* ============================================== */

/* สไตล์ของลิงก์ที่ครอบกล่องไฟล์ */
.chat-file-link {
  text-decoration: none;
  /* ไม่มีขีดเส้นใต้ */
  color: inherit;
  /* ใช้สีตัวอักษรเดียวกับข้อความปกติในบับเบิ้ล */
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ ⚠️ FILE BUBBLE GUARD — ห้ามแก้ไขโดยไม่อ่าน                     ║
   ║ อ่าน: .agent/workflows/file-bubble-guard.md ก่อนแตะต้อง        ║
   ║ บัคเกิดซ้ำ 2 รอบ: กรอบสีเทาซ้อน 2 ชั้นในบับเบิ้ลไฟล์          ║
   ║ Invariant: base MUST be background: transparent                ║
   ║            สีจริงกำหนดโดย role-specific selectors เท่านั้น      ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.file-bubble-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 10px;
  border-radius: 12px;
  margin-top: 0;
  transition: all 0.2s ease;
  background-color: transparent;
  /* role-specific selector เป็นแหล่งเดียวที่กำหนดสี */
  color: inherit;
}

/* inner bubble เป็นตัวแสดงสีพื้นหลังจริงตาม role (Unified) */
.message.user.message-is-file .file-bubble-content {
  background-color: #374151;
  /* สีพื้นหลัง User */
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.message.admin.message-is-file .file-bubble-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  /* สี Admin */
  color: white;
  padding: 6px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(102, 126, 234, 0.3);
}

.message.ai.message-is-file .file-bubble-content {
  background: linear-gradient(135deg, #005bea 0%, #00c6fb 100%);
  /* สี AI */
  color: white;
  padding: 6px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 91, 234, 0.3);
}

/* Contrast adjustment for icons inside dark bubbles */
.message.message-is-file .file-bubble-content .file-icon {
  filter: brightness(1.2) saturate(1.2);
  /* Make icons a bit more vivid on dark bg */
}

/* ทำให้พื้นหลังเข้มขึ้นเมื่อผู้ใช้เอาเมาส์ไปชี้ */
.chat-file-link:hover .file-bubble-content {
  filter: brightness(0.9);
}

/* สไตล์ของชื่อไฟล์ */
.file-name-text {
  font-weight: 500;
  font-size: 0.9rem;
}

/* ★★★ Phase 5: PDF Analysis Details Popup Toggle ★★★ */
.detail-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #667eea;
  padding: 0 4px;
  font-size: 0.85rem;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-toggle-btn:hover {
  color: #5a67d8;
}

/* สไตล์ทั่วไปของไอคอนไฟล์ */
.file-icon {
  font-size: 1.6rem;
  /* ขนาดไอคอน (ลดจาก 2rem เพื่อให้สัดส่วนใกล้ text bubble) */
  width: 26px;
  /* กำหนดความกว้างคงที่ */
  text-align: center;
  /* จัดให้อยู่ตรงกลาง */
}

/* --- กำหนดสีสันให้ไอคอนแต่ละประเภท --- */
.pdf-icon {
  color: #D32F2F !important;
}

/* สีแดง (PDF) */
.word-icon {
  color: #1E88E5 !important;
}

/* สีน้ำเงิน (Word) */
.excel-icon {
  color: #43A047 !important;
}

/* สีเขียว (Excel) */
.ppt-icon {
  color: #F4511E !important;
}

/* สีส้ม (PowerPoint) */
.archive-icon {
  color: #7B1FA2 !important;
}

/* สีม่วง (ZIP/RAR) */
.generic-icon {
  color: #546E7A !important;
}

/* สีเทา (อื่นๆ) */

/* --- จัดการปัญหาบับเบิ้ลซ้อนกัน --- */

/* ⚠️ GUARD: Container ต้องโปร่งใส 100% — ห้ามลบ !important ออก
   ถ้าลบ → .user background (#374151) จะทะลุกลับมาสร้างกรอบซ้อน
   ดู: .agent/workflows/file-bubble-guard.md */
.message.message-is-file {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: fit-content;
  /* Ensure it doesn't span full width */
}

/* ทำให้กล่องไฟล์ที่เราออกแบบไว้ ชิดขอบบนของบับเบิ้ลที่โปร่งใส */
.message.message-is-file .file-bubble-content {
  margin-top: 0;
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: fit-content;
  line-height: 1.3;
}

/* ★ Visual Tuning: Metadata Preview Style สำหรับ Quote ในไฟล์เมสเสจ ★ */
.message.message-is-file .quoted-message-container {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 4px 0 2px 0 !important;
  /* Reset padding */
  margin-bottom: 4px;
  border-left: 3px solid currentColor !important;
  /* Adaptive Accent Bar */
  opacity: 0.8;
  /* ให้ดูเป็น Preview layer */
}

.message.message-is-file .quoted-message-container .quoted-sender {
  font-size: 0.7rem;
  margin-bottom: 0;
}

.message.message-is-file .quoted-message-container .quoted-text {
  font-size: 0.8rem;
  opacity: 0.9;
}

/* ★★★ สไตล์สำหรับ URL Links ในแชท ★★★ */
.chat-url-link {
  color: #667eea;
  text-decoration: underline;
  word-break: break-all;
  transition: color 0.2s ease;
}

.chat-url-link:hover {
  color: #764ba2;
  text-decoration: underline;
}

/* ============================================== */
/* ===         สไตล์สำหรับ Quick Replies         === */
/* ============================================== */

/* ทำให้ form เป็นตัวกำหนดตำแหน่งของ pop-up */
#send-form {
  position: relative;
}

/* Pop-up container */
/* Empty Chat State Placeholder */
.no-chat-selected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #8898aa;
  text-align: center;
  padding: 2rem;
  opacity: 0.8;
}

.no-chat-icon {
  font-size: 4rem;
  color: #e4e6eb;
  /* Very light gray */
  margin-bottom: 1.5rem;
  background-color: #f8f9fa;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-chat-selected h3 {
  font-size: 1.5rem;
  color: #32325d;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.no-chat-selected p {
  font-size: 1rem;
  color: #8898aa;
  max-width: 300px;
  line-height: 1.5;
}

/* ===== Quick Reply Popup Container ===== */
#quick-reply-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-width: 100%;
  /* Prevent horizontal overflow */
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid #e4e6eb;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 8px;
  z-index: 100;
}

/* รายการข้อความ */
#quick-reply-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#quick-reply-list li {
  padding: 0.8rem 1.2rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f2f5;
  transition: background-color 0.2s ease;
  max-width: 100%;
  /* Prevent overflow */
  overflow: hidden;
  box-sizing: border-box;
}

#quick-reply-list li:hover {
  background-color: #f5f6f7;
}

#quick-reply-list .qr-title {
  font-weight: 500;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#quick-reply-list .qr-message {
  font-size: 0.85rem;
  color: #606770;
  white-space: normal;
  /* Allow wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ============================================== */
/* ===    แก้ไขปัญหา Scroll ในหน้า Settings (Mobile)   === */
/* ============================================== */

@media (max-width: 768px) {

  /* 
    ทำให้ Admin Container ยืดหยุ่นและ
    กินพื้นที่ทั้งหมดที่เหลือในแนวตั้ง 
  */
  #admin-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* ใช้ความสูงเต็มพื้นที่ของ body */
    overflow-y: auto;
    /* ★★★ หัวใจสำคัญ: เปิดให้ Scroll แนวตั้งได้ ★★★ */
    -webkit-overflow-scrolling: touch;
    /* ทำให้เลื่อนลื่นบน iOS */
  }

  /* 
    ปรับแก้ padding และ margin เล็กน้อย
    เพื่อให้แน่ใจว่าเนื้อหาไม่ชิดขอบเกินไป 
  */
  #admin-container {
    padding: 1rem;
    margin: 0;
    /* เอา margin เดิมออก */
    max-width: 100%;
    border-radius: 0;
    /* ไม่ต้องมีขอบมนบนมือถือ */
    box-shadow: none;
    /* ไม่ต้องมีเงา */
  }

  /* 
    ทำให้ Admin Header (ที่มีปุ่ม Back) 
    อยู่กับที่ ไม่เลื่อนตามเนื้อหา 
  */
  .admin-page-header {
    flex-shrink: 0;
    /* ป้องกันการหดตัว */
  }

}

/* ===== (Duplicate rules removed - see lines 307-355 for search container styles) ===== */

/* ===== CSS สำหรับปุ่มเชื่อมต่อ Facebook (เพิ่มท้ายไฟล์ styles.css) ===== */
.primary-fb-btn {
  background-color: #1877F2;
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  transition: background-color 0.2s;
}

.primary-fb-btn:hover {
  background-color: #166FE5;
}

.connection-status {
  margin-top: 1rem;
  padding: 0.8rem;
  background-color: #f0f2f5;
  border-radius: 6px;
}

/* ===== SUPER ADMIN DASHBOARD STYLES ===== */
/* Container & Grid */
.admin-settings-container {
  max-width: 900px;
  /* Reduced from 1200px for focused view */
  margin: 0 auto;
  padding: 0 1rem;
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  max-width: 600px;
  margin: 0 auto;
  align-items: start;
}

@media(max-width: 768px) {
  .admin-page-header h2 {
    font-size: 1.4rem;
  }
}

#admin-container {
  min-height: calc(100vh - 80px);
  /* background: #f0f2f5; REMOVED: Let main app gradient show through */
  background: transparent;
}

#admin-container.container {
  max-width: 1200px;
  margin: 1rem auto;
  padding: 1.5rem;
}

.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.15);
  /* Subtle violet border */
}

.admin-page-header h2 {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

.admin-menu-group {
  margin-bottom: 0.5rem;
}

.admin-group-title {
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
  color: #5a4b81;
  /* Dark violet-gray */
  font-weight: 600;
  padding-left: 0.5rem;
  border-left: 4px solid #b794f4;
  /* Violet accent */
  line-height: 1.2;
}

.admin-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.admin-menu-list li {
  margin-bottom: 0;
  /* Handled by grid gap */
}

.admin-menu-list button {
  width: 100%;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  text-align: left;
}

.admin-menu-list button:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: #b794f4;
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(139, 92, 246, 0.1);
}

/* New: Gradient Icon Background */
.menu-icon-bg {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(142, 197, 252, 0.3);
  margin-right: 1.2rem;
}

.admin-menu-list button i {
  font-size: 1.4rem;
  width: auto;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Override specific icon colors if inside menu-icon-bg (resetting previous styles if any) */
.menu-icon-bg i {
  color: #fff !important;
}

.menu-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-menu-list .title {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2d3748;
}

.admin-menu-list .desc {
  display: block;
  font-size: 0.85rem;
  color: #718096;
  font-weight: 400;
}

.arrow-icon {
  color: #cbd5e0;
  font-size: 1rem;
  margin-left: 0.5rem;
  transition: transform 0.2s;
}

.admin-menu-list button:hover .arrow-icon {
  transform: translateX(4px);
  color: #b794f4;
}

/* Tenant Table */
.tenant-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.tenant-table th,
.tenant-table td {
  padding: 1.2rem;
  text-align: left;
  border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

.tenant-table th {
  background: rgba(233, 216, 253, 0.3);
  /* Very light violet */
  font-weight: 600;
  font-size: 0.9rem;
  color: #553c9a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tenant-table tr:hover {
  background: rgba(255, 255, 255, 0.8);
}

.btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-radius: 8px;
  background: white;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  margin-right: 0.5rem;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.btn-small:hover {
  background: #f7fafc;
  border-color: #cbd5e0;
  transform: translateY(-1px);
}

/* Admin Card (Glassmorphism) */
.admin-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.6);
  margin-bottom: 2rem;
}

.admin-card label {
  display: block;
  margin-bottom: 0.6rem;
  font-weight: 600;
  color: #4a5568;
  font-size: 0.95rem;
}

.admin-card textarea,
.admin-card input {
  width: 100%;
  padding: 1rem;
  border: 1px solid rgba(203, 213, 224, 0.6);
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.2s;
}

.admin-card textarea:focus,
.admin-card input:focus {
  outline: none;
  border-color: #9f7aea;
  background: white;
  box-shadow: 0 0 0 4px rgba(159, 122, 234, 0.15);
}

.primary-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.9rem 1.8rem;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.35);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.45);
  filter: brightness(1.05);
}

.primary-btn:disabled {
  background: #cbd5e0;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.7);
  color: #553c9a;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(4px);
}

.secondary-btn:hover {
  background: white;
  border-color: #805ad5;
  color: #44337a;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(139, 92, 246, 0.15);
}

.secondary-btn i {
  font-size: 0.9rem;
}

/* Ensure Admin Card Buttons are robust */
.admin-card button[type="submit"],
.admin-card button.save-btn {
  width: auto;
  /* Allow auto width but min-width for touch */
  min-width: 160px;
  margin-top: 1.5rem;
  /* Consistent spacing */
}

/* Mobile full width for buttons */
@media (max-width: 480px) {

  .admin-card button[type="submit"],
  .admin-card button.save-btn,
  .secondary-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Super Admin Container Fix */
#admin-container {
  min-height: calc(100vh - 80px);
  background: transparent;
}

@media (max-width: 768px) {
  .tenant-table {
    font-size: 0.85rem;
  }

  .tenant-table th,
  .tenant-table td {
    padding: 0.6rem;
  }

  .admin-page-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    /* Keeps items start-aligned */
  }

  .admin-page-header .secondary-btn {
    width: auto !important;
    align-self: flex-start;
    justify-content: center;
    min-width: 100px;
  }

  .admin-card {
    padding: 1.25rem;
    /* Reduced padding for mobile */
    border-radius: 16px;
  }

  .admin-menu-list {
    grid-template-columns: 1fr;
    /* Force 1 column on mobile */
  }
}

/* =========================================
   Modern Sub-Menu Forms & Inputs
   ========================================= */

/* .admin-card duplicate removed - using glassmorphism defined earlier */


.admin-card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 1.5rem;
  border-left: 4px solid #667eea;
  padding-left: 10px;
}

.admin-card label {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: #4a5568;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

.admin-card label:first-of-type {
  margin-top: 0;
}

.admin-card input[type="text"],
.admin-card input[type="password"],
.admin-card input[type="number"],
.admin-card textarea,
.admin-card select {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 1rem;
  transition: all 0.2s;
  background: #f8fafc;
  font-family: 'Prompt', sans-serif;
}

.admin-card input:focus,
.admin-card textarea:focus,
.admin-card select:focus {
  outline: none;
  border-color: #667eea;
  background: white;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.admin-card button[type="submit"],
.admin-card button.save-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.8rem 2rem;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.admin-card button[type="submit"]:hover,
.admin-card button.save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.admin-card button:disabled {
  background: #cbd5e0;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.google-unlink-btn {
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid #f5c998;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 247, 237, 0.98) 0%, rgba(255, 237, 213, 0.98) 100%);
  color: #9a3412;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  box-shadow: 0 10px 24px rgba(234, 88, 12, 0.12);
  text-align: left;
}

.google-unlink-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #fb923c;
  background:
    linear-gradient(135deg, rgba(255, 251, 235, 1) 0%, rgba(254, 215, 170, 0.98) 100%);
  box-shadow: 0 14px 28px rgba(234, 88, 12, 0.16);
}

.google-unlink-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.2), 0 14px 28px rgba(234, 88, 12, 0.16);
}

.google-unlink-btn__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(251, 146, 60, 0.22);
  color: #ea580c;
  font-size: 1rem;
}

.google-unlink-btn__content {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  flex: 1;
}

.google-unlink-btn__title {
  font-size: 1rem;
  font-weight: 700;
  color: #7c2d12;
}

.google-unlink-btn__meta {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #9a3412;
}

.google-unlink-btn__arrow {
  flex-shrink: 0;
  color: #c2410c;
  font-size: 0.95rem;
  opacity: 0.9;
}

.security-cta-btn {
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid #c7d2fe;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.98) 0%, rgba(224, 231, 255, 0.98) 100%);
  color: #1e3a8a;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.12);
  text-align: left;
}

.security-cta-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #93c5fd;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 1) 0%, rgba(191, 219, 254, 0.96) 100%);
  box-shadow: 0 14px 28px rgba(59, 130, 246, 0.16);
}

.security-cta-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.22), 0 14px 28px rgba(59, 130, 246, 0.16);
}

.security-cta-btn__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(147, 197, 253, 0.35);
  color: #2563eb;
  font-size: 1rem;
}

.security-cta-btn__content {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  flex: 1;
}

.security-cta-btn__title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e3a8a;
}

.security-cta-btn__meta {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #3157a6;
}

.security-cta-btn__arrow {
  flex-shrink: 0;
  color: #2563eb;
  font-size: 0.95rem;
  opacity: 0.9;
}

@media (max-width: 480px) {
  .google-unlink-btn {
    padding: 0.9rem;
    align-items: flex-start;
  }

  .google-unlink-btn__meta {
    font-size: 0.84rem;
  }

  .security-cta-btn {
    padding: 0.9rem;
    align-items: flex-start;
  }

  .security-cta-btn__meta {
    font-size: 0.84rem;
  }
}

/* FAQ List & Other Lists */
.faq-list-header {
  margin-bottom: 1rem;
}

#faq-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#faq-list li,
.recipient-item {
  background: white;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  transition: transform 0.2s;
}

#faq-list li:hover,
.recipient-item:hover {
  border-color: #b3bcf5;
}

.faq-content h4,
.recipient-info h4 {
  margin: 0 0 0.5rem 0;
  color: #2d3748;
  font-size: 1rem;
}

.faq-content p,
.recipient-info p {
  margin: 0;
  color: #718096;
  font-size: 0.9rem;
  line-height: 1.5;
}

.delete-btn,
.remove-btn {
  background: #fff5f5;
  color: #e53e3e;
  border: 1px solid #fed7d7;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
  flex-shrink: 0;
}

.delete-btn:hover,
.remove-btn:hover {
  background: #e53e3e;
  color: white;
  border-color: #e53e3e;
}

/* Sub-page Quota Bar */
.quota-bar {
  background: #fff;
  padding: 1rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.quota-bar .quota-text {
  font-size: 0.9rem;
  color: #4a5568;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}

.quota-bar .quota-progress {
  height: 8px;
  background: #edf2f7;
  border-radius: 4px;
  overflow: hidden;
}

.quota-bar .quota-progress div {
  height: 100%;
  background: #48bb78;
  border-radius: 4px;
  transition: width 0.5s;
}

.quota-bar .quota-progress.warning div {
  background: #ecc94b;
}

.quota-bar .quota-progress.danger div {
  background: #f56565;
}

/* ★★★ Quota Display Styles ★★★ */
.quota-status-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 1rem 1.5rem !important;
  margin-bottom: 1.5rem;
}

.quota-display-container {
  padding: 0 !important;
}

.quota-stats {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.quota-stat-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 100px;
}

.quota-label {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.25rem;
}

.quota-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.quota-value.warning {
  color: #e65100;
}

.quota-value.expired {
  color: #d32f2f;
}

.quota-progress-bar {
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.quota-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* ===== Delete Tenant Modal ===== */
.delete-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.delete-modal {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Prompt', sans-serif;
  border: 1px solid rgba(255, 255, 255, 1);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }

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

.delete-modal-header {
  padding: 2rem 1.5rem 0.5rem;
  text-align: center;
  border-bottom: none;
}

.delete-modal-header i {
  font-size: 2rem;
  color: #ef4444;
  margin-bottom: 1rem;
  background: #fee2e2;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.delete-modal-header h2 {
  font-size: 1.5rem;
  color: #1a202c;
  margin: 0;
  font-weight: 700;
}

.delete-modal-body {
  padding: 1.5rem;
}

.delete-warning {
  background-color: #fff7ed;
  border: 1px solid #ffedd5;
  color: #9a3412;
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
}

.delete-items-list {
  margin: 1rem 0;
  padding-left: 1.5rem;
  list-style: disc;
}

.delete-items-list li {
  margin-bottom: 0.5rem;
  color: #555;
}

.expected-name {
  text-align: center;
  font-size: 1.1rem;
  color: #c53030;
  background-color: #fff5f5;
  padding: 0.8rem;
  border-radius: 12px;
  margin: 1rem 0 1rem;
  font-weight: 600;
  border: 1px dashed #fc8181;
}

#delete-confirm-input {
  width: 100%;
  padding: 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1.1rem;
  transition: all 0.2s;
  background: #f8fafc;
  text-align: center;
  font-family: 'Prompt', sans-serif;
}

#delete-confirm-input:focus {
  outline: none;
  border-color: #ef4444;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

.delete-error {
  color: #dc3545;
  background-color: #f8d7da;
  padding: 0.5rem;
  border-radius: 4px;
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.9rem;
}

.delete-modal-footer {
  padding: 1rem 1.5rem;
  display: flex;
  gap: 1rem;
  border-top: 1px solid #e4e6eb;
}

.delete-modal-footer button {
  flex: 1;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.delete-modal-footer .secondary-btn {
  background-color: #e4e6eb;
  color: #333;
  border: none;
}

.delete-modal-footer .secondary-btn:hover {
  background-color: #d8dbdf;
}

.delete-modal-footer .danger-btn {
  background-color: #dc3545;
  color: white;
  border: none;
}

.delete-modal-footer .danger-btn:hover:not(:disabled) {
  background-color: #c82333;
}

.delete-modal-footer .danger-btn:disabled {
  background-color: #f5c6cb;
  color: #999;
  cursor: not-allowed;
}

/* btn-danger for small buttons in table */
.btn-small.btn-danger {
  background-color: #dc3545;
  color: white;
}

.btn-small.btn-danger:hover {
  background-color: #c82333;
}

/* ★★★ Quota Usage Bar Styles ★★★ */
.quota-bar {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 10px;
  border: 1px solid #dee2e6;
}

.quota-bar .quota-text {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #495057;
  font-weight: 500;
}

.quota-bar .quota-text strong {
  color: #212529;
}

.quota-bar .quota-progress {
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.quota-bar .quota-progress>div {
  height: 100%;
  background: linear-gradient(90deg, #28a745, #5cb85c);
  border-radius: 5px;
  transition: width 0.3s ease;
}

.quota-bar .quota-progress.warning>div {
  background: linear-gradient(90deg, #fd7e14, #ffc107);
}

.quota-bar .quota-progress.danger>div {
  background: linear-gradient(90deg, #dc3545, #e91e63);
}

/* ===== Loading Screen ===== */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  /* Glassmorphism effect */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* สูงกว่า Header */
  transition: opacity 0.3s ease;
}

/* ===== Unread Dot ===== */
.unread-dot {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px white;
  /* Keep white ring, remove soft glow to be "still" */
}

/* ... existing code ... */

.loading-screen p {
  margin-top: 1rem;
  font-family: 'Prompt', sans-serif;
  font-weight: 500;
  color: #667eea;
  animation: pulse-text 1.5s infinite;
  /* Revert: Animation back */
}

.spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(from 0deg, #667eea, #764ba2, #f0f2f5, #667eea);
  animation: spin 1s linear infinite;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.spinner::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background: white;
  border-radius: 50%;
}

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

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse-text {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.6;
  }
}

/* ===== Logo Styles & Header Fixes ===== */
.login-logo {
  display: block;
  margin: 0 auto 1rem auto;
  max-width: 150px;
  height: auto;
}

.nav-logo {
  height: 40px;
  width: auto;
  margin-right: 8px;
  /* Reduced gap */
  vertical-align: middle;
  flex-shrink: 0;
  /* Prevent logo from squishing */
}

.register-logo {
  display: block;
  margin: 0 auto 1rem auto;
  max-width: 120px;
  height: auto;
}

/* Container for logo + text in header */
.logo-container {
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Contain text overflow */
  margin-right: 1rem;
  text-decoration: none;
  /* Reset link underline */
  color: inherit;
  /* Keep text color */
}

/* Specific nav reset for logo link */
nav a.logo-container {
  padding: 0;
  background: none;
}

nav a.logo-container:hover {
  background: none;
  opacity: 0.8;
  /* Subtle feedback */
}

/* Business Name Text */
#business-name-header {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.25rem;
  /* Slightly smaller base size */
}

/* Mobile specific fixes */
@media (max-width: 768px) {
  .logo-container {
    max-width: calc(100% - 50px);
    /* Leave space for menu button */
  }

  #business-name-header {
    font-size: 0.95rem;
    /* Much smaller on mobile to fit "by Arvia Chatbot" */
  }

  .nav-logo {
    height: 28px;
    /* Shrunk to fit better in 50px header */
  }
}

/* ===== Modern Toggle Switch (iOS Style) ===== */
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
  /* Prevent shrinking in flex containers */
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked+.slider {
  background-color: #2dce89;
  /* Success Green */
}

input:focus+.slider {
  box-shadow: 0 0 1px #2dce89;
}

input:checked+.slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* ★★★ Image Lightbox Styles ★★★ */
.image-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: pointer;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.image-lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightbox-image {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}

.lightbox-close-btn {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 36px;
  height: 36px;
  background: white;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, background 0.2s;
}

.lightbox-close-btn:hover {
  transform: scale(1.1);
  background: #f0f0f0;
}

/* Clickable Profile Picture */
.clickable-pfp {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.clickable-pfp:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ★★★ Work Order System Styles ★★★ */

/* Sidebar Tabs */
.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid rgba(139, 92, 246, 0.1);
  background: rgba(255, 255, 255, 0.2);
  /* Glass Tab Container */
  flex-shrink: 0;
  backdrop-filter: blur(5px);
}

.sidebar-tab {
  flex: 1;
  padding: 0.8rem 0.5rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: 'Prompt', sans-serif;
  /* ★ Same font as user name ★ */
  font-size: 0.85rem;
  font-weight: 500;
  color: #8898aa;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.sidebar-tab:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #667eea;
}

.sidebar-tab.active {
  color: #667eea;
  border-bottom-color: #667eea;
  background: rgba(255, 255, 255, 0.5);
  /* Glass Active Tab */
}

.sidebar-tab i {
  font-size: 0.9rem;
}

/* Sidebar Panels */
.sidebar-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.sidebar-panel:not(.active) {
  display: none !important;
}

/* Work Order Header */
.workorder-header {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #f0f2f5;
  flex-shrink: 0;
}

.create-btn {
  width: 100%;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.create-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Work Order List Container */
#workorder-list-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#workorder-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Work Order List Item */
.workorder-item {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #f0f2f5;
  cursor: pointer;
  transition: all 0.2s ease;
}

.workorder-item:hover {
  background: #f8faff;
}

.workorder-item.active {
  background: #eef2ff;
  border-left: 3px solid #667eea;
}

.workorder-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1c1e21;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workorder-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: #8898aa;
}

.workorder-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 500;
}

/* Avatar Styling */
.workorder-item {
  display: flex !important;
  /* Force flex */
  align-items: center;
  gap: 12px;
}

.workorder-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.workorder-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eff1f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8898aa;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.workorder-icon.user-linked {
  background: #eef2ff;
  color: #667eea;
}

.workorder-info {
  flex: 1;
  min-width: 0;
  /* Prevent text overflow issues */
}

.workorder-status.active {
  background: #fff3cd;
  color: #856404;
}

.workorder-status.completed {
  background: #d4edda;
  color: #155724;
}

.workorder-linked {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #667eea;
}

/* ... existing code ... */

.user-workorder-item .status-icon.active {
  color: #f6c23e;
  /* Yellow */
}

.user-workorder-item .status-icon.completed {
  color: #1cc88a;
  /* Green */
}

/* ... existing code ... */

@media (max-width: 768px) {

  /* Hide append form in Tools Column on mobile to avoid clutter */
  #user-workorder-form {
    display: none !important;
  }
}

.workorder-linked {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #667eea;
}

/* Work Order Detail View (in Chat Column) */
.workorder-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
}

.workorder-detail-header {
  padding: 1rem;
  border-bottom: 1px solid #e4e6eb;
  flex-shrink: 0;
}

.workorder-detail-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.workorder-detail-title:hover {
  border-color: #e4e6eb;
}

.workorder-detail-title:focus {
  border-color: #667eea;
  outline: none;
  background: #f8fafc;
}

.workorder-detail-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
  overflow: visible !important;
}

.workorder-action-btn {
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  border: 1px solid #e4e6eb;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 1 auto;
}

@media (max-width: 480px) {
  .workorder-action-btn {
    flex: 1 1 calc(50% - 8px);
    /* 2 per row */
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    margin-bottom: 4px;
  }

  .workorder-action-btn i {
    font-size: 0.9rem;
  }
}

.workorder-action-btn:disabled,
.wo-title-edit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.workorder-action-btn:hover {
  background: #f0f2f5;
}

.workorder-action-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
}

.workorder-action-btn.success {
  background: #22c55e;
  color: white;
  border: none;
}

.workorder-action-btn.warning {
  background: #f59e0b;
  color: white;
  border: none;
}

/* Work Order Content Area */
.workorder-content-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

.workorder-content-textarea {
  width: 100%;
  min-height: 200px;
  border: 1px solid #e4e6eb;
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  resize: vertical;
  font-family: 'Noto Sans', sans-serif;
  transition: all 0.2s ease;
}

.workorder-content-textarea:focus {
  border-color: #667eea;
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Work Order Append Form */
.workorder-append-form {
  border-top: 1px solid #e4e6eb;
  padding: 1rem;
  flex-shrink: 0;
  display: flex;
  gap: 0.5rem;
}

.workorder-append-input {
  flex: 1;
  padding: 0.8rem 1rem;
  border: 1px solid #e4e6eb;
  border-radius: 24px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.workorder-append-input:focus {
  border-color: #667eea;
  outline: none;
}

.workorder-append-btn {
  padding: 0 1.2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Empty State */
.workorder-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #8898aa;
  text-align: center;
}

.workorder-empty i {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #c0c8d0;
}

.workorder-empty h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #666;
}

/* Delete Button */
.workorder-action-btn.danger {
  background: #d93025;
  color: white;
  border: none;
}

.workorder-action-btn.danger:hover {
  background: #c12a1f;
}

/* Work Order Detail Meta */
.workorder-detail-meta {
  font-size: 0.8rem;
  color: #8898aa;
  margin-bottom: 0.5rem;
}

/* User Work Order Widget (Tools Column) */
#user-workorder-container h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#user-workorder-container h3 i {
  color: #667eea;
}

#user-workorder-content {
  margin-bottom: 0.8rem;
}

.user-workorder-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 6px;
  margin-bottom: 0.3rem;
  cursor: pointer;
  background: #f8fafc;
  transition: all 0.2s;
}

.user-workorder-item:hover {
  background: #eef2ff;
}

.user-workorder-item .status-icon {
  width: 20px;
  text-align: center;
}

.user-workorder-item .status-icon.active {
  color: #667eea;
}

.user-workorder-item .status-icon.completed {
  color: #22c55e;
}

.user-workorder-item .title {
  font-size: 0.9rem;
  color: #333;
}

#user-workorder-form textarea {
  width: 100%;
  border: 1px solid #e4e6eb;
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 0.85rem;
  resize: vertical;
  min-height: 60px;
  margin-bottom: 0.5rem;
}

.workorder-btn-row {
  display: flex;
  gap: 0.5rem;
}

.workorder-btn-row button {
  flex: 1;
  padding: 0.5rem;
  font-size: 0.8rem;
  border-radius: 6px;
  cursor: pointer;
}

.workorder-btn-row .primary-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
}

.workorder-btn-row .secondary-btn {
  background: #f0f2f5;
  color: #333;
  border: 1px solid #e4e6eb;
}

.muted-text {
  color: #8898aa;
  font-size: 0.85rem;
}

/* Link User Modal */
#link-user-modal .modal-content h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #667eea;
}

.link-user-option:hover {
  background: #f0f2ff;
}

/* Create Work Order Button in Tools Column */
.create-workorder-btn {
  width: 100%;
  padding: 0.6rem 1rem;
  margin-top: 0.8rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.create-workorder-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* ===== Skeleton Loading (Shimmer Effect) ===== */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

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

.skeleton-loader {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}

.skeleton-item {
  display: flex !important;
  align-items: center;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid #f0f2f5;
  width: 100%;
  box-sizing: border-box;
}

.skeleton-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f0f2f5;
  background-image: linear-gradient(90deg,
      #f0f2f5 25%,
      #e6e8eb 37%,
      #f0f2f5 63%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  margin-right: 1rem;
  flex-shrink: 0;
}

.skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: #f0f2f5;
  background-image: linear-gradient(90deg,
      #f0f2f5 25%,
      #e6e8eb 37%,
      #f0f2f5 63%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

.skeleton-line.short {
  width: 40%;
}

.skeleton-line.long {
  width: 80%;
}

/* =========================================
   Image Gallery & Lightbox Styles
   ========================================= */

/* Grid Layout Gallery (Wrap) */
.image-gallery-container {
  display: grid;
  /* Fixed 3 columns for better album look */
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 330px;
  /* Perfect for 3 columns ~100px each */
  margin-top: 5px;
  width: 100%;
}

.gallery-thumb {
  width: 100% !important;
  /* Fill grid cell */
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  /* Force Square */
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  min-height: unset !important;
  /* Clear old fixed heights */
}

/* 3 columns on larger bubbles, 2 on smaller */
@media (max-width: 480px) {
  .image-gallery-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    max-width: 280px;
  }
}

.gallery-thumb:hover {
  transform: scale(1.05);
  filter: brightness(0.95);
  z-index: 1;
}

/* Lightbox Overlay */
.image-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  /* Darker bg */
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: lightboxFadeIn 0.2s forwards;
  touch-action: none;
  /* Prevent background scroll */
}

@keyframes lightboxFadeIn {
  to {
    opacity: 1;
  }
}

.image-lightbox-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Hide overflow unless zoomed */
}

.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.1s ease-out;
  /* Smooth pinch */
  transform-origin: center center;
  touch-action: none;
  /* Critical for custom gestures */
  user-select: none;
  -webkit-user-select: none;
}

.lightbox-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  border-radius: 50%;
  z-index: 10005;
  /* Topmost */
  backdrop-filter: blur(4px);
}

/* Navigation Buttons */
.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: none;
  font-size: 1.5rem;
  /* Smaller icon */
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.3s, transform 0.2s;
  z-index: 10004;
  /* Below Close but above image */
  width: 40px;
  /* Smaller button */
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.lightbox-nav-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-nav-btn.prev {
  left: 15px;
}

.lightbox-nav-btn.next {
  right: 15px;
}

/* Responsive Lightbox */
@media (max-width: 768px) {
  .lightbox-nav-btn.prev {
    left: 10px;
  }

  .lightbox-nav-btn.next {
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
  }

  .lightbox-close-btn {
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }
}

/* ===== System Notice Line ===== */
.system-notice-line {
  text-align: center;
  font-size: 0.75rem;
  color: #9aa0a6;
  margin: 12px 0;
  line-height: 1.4;
  user-select: none;
}

.system-notice-line::before,
.system-notice-line::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background-color: #e0e0e0;
  vertical-align: middle;
  margin: 0 8px;
}

/* ★★★ Premium Package Card Styles ★★★ */
.premium-package-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 1.2rem !important;
  margin-bottom: 2rem;
  color: #fff;
  box-shadow: 0 10px 25px rgba(118, 75, 162, 0.25);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.premium-package-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(118, 75, 162, 0.4);
}

/* Glass effect overlay for decorative purpose */
.premium-package-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Header Section */
.premium-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.premium-package-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.premium-package-icon {
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.premium-package-details {
  display: flex;
  flex-direction: column;
}

.premium-package-name {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.premium-package-badge {
  font-size: 0.8rem;
  opacity: 0.9;
  font-weight: 400;
}

.premium-expiry-tag {
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.premium-expiry-tag.expired {
  background: rgba(255, 82, 82, 0.9);
  color: white;
  border-color: rgba(255, 82, 82, 1);
}

/* Progress Section */
.premium-usage-container {
  background: rgba(255, 255, 255, 0.15);
  /* Light glass background for premium feel */
  border-radius: 12px;
  padding: 1rem;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.premium-progress-wrapper {
  margin-bottom: 1rem;
}

.premium-progress-bg {
  height: 8px;
  /* Thicker bar */
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.premium-progress-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Glow effects for different states */
.progress-glow-green {
  background: #00e676;
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.6);
}

.progress-glow-orange {
  background: #ff9100;
  box-shadow: 0 0 10px rgba(255, 145, 0, 0.6);
}

.progress-glow-red {
  background: #ff1744;
  box-shadow: 0 0 10px rgba(255, 23, 68, 0.6);
}

/* Stats Row */
.premium-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.premium-stat {
  display: flex;
  flex-direction: column;
}

.premium-stat label {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 4px;
}

.premium-stat-value {
  font-size: 1.1rem;
  font-weight: 600;
}

/* Animation for loading */
@keyframes pulse-white {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.6;
  }
}

.premium-loading {
  text-align: center;
  padding: 2rem;
  font-size: 1.1rem;
  animation: pulse-white 1.5s infinite;
}

/* 
   --------------------------------------------------
   ★ PREMIUM PACKAGE CARD (COMPACT REDESIGN) ★
   --------------------------------------------------
*/

/* 1. Remove Gray Container Background */
.quota-status-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.premium-package-card.compact {
  /* 2. White Premium Theme */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  /* Even tighter radius */
  /* Super-Slim padding & margin */
  padding: 0.35rem 1rem;
  margin-bottom: 0px !important;
  color: #334155;
  /* Slate 700 text for readability */
  /* 3. Soft Shadow & Border */
  box-shadow: 0 4px 20px rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(226, 232, 240, 0.8);
  position: relative;
  overflow: hidden;
}

/* Override Text & Icon Colors for White Theme */
.plan-icon-compact {
  font-size: 1.6rem;
  opacity: 1;
  /* Icon Gradient */
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.2));
}

.plan-info-compact .plan-name {
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
  /* Text Gradient */
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.plan-info-compact .plan-badge {
  color: #64748b;
  /* Muted text */
  font-weight: 600;
}

.usage-compact {
  background: transparent;
  border: none;
  /* Clean & Borderless */
  color: #475569;
}

.progress-track-slim {
  background: #e2e8f0;
  /* Light gray track */
}

/* Gradient Progress Fill */
.premium-package-card.compact .progress-fill {
  background: linear-gradient(90deg, #8b5cf6, #06b6d4);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}

.usage-label strong {
  color: #1e293b;
  /* Dark text for numbers */
}

/* Background decoration */
.premium-package-card.compact::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Header: Plan Name & Icon */
.compact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

.plan-info-compact .plan-badge {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 0;
}

/* Duplicate plan-name removed */

/* Duplicate plan-icon removed */

/* Compact Stats Area */
/* Duplicate usage-compact removed (Fix Gray Background) */

.usage-text-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  font-size: 0.85rem;
}

.usage-label strong {
  font-weight: 600;
  font-size: 1.1em;
}

.usage-percent {
  font-weight: 700;
  opacity: 0.9;
}

/* Slim Progress Bar */
.progress-track-slim {
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 2px;
}

.progress-fill {
  height: 100%;
  transition: width 0.5s ease-out;
  box-shadow: 0 0 10px currentColor;
  /* Glow effect */
}

/* Progress Colors */
.progress-glow-green {
  background: #00e676;
  color: #00e676;
}

.progress-glow-orange {
  background: #ff9100;
  color: #ff9100;
}

.progress-glow-red {
  background: #ff1744;
  color: #ff1744;
}

/* Footer */
.card-footer-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
}

.expiry-row-compact {
  font-size: 0.85rem;
  opacity: 0.8;
}

.upgrade-btn-small {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.upgrade-btn-small:hover {
  background: white;
  color: #764ba2;
}

/* --- MOBILE SPECIFIC OVERRIDES --- */
@media (max-width: 768px) {
  .premium-package-card.compact {
    padding: 1rem;
    /* Reduced padding */
    margin-bottom: 12px;
  }

  .compact-header {
    margin-bottom: 0.5rem;
  }

  .plan-info-compact .plan-name {
    font-size: 1.4rem;
    /* Smaller font */
  }

  .plan-icon-compact {
    font-size: 1.8rem;
    /* Smaller icon */
  }

  .usage-compact {
    padding: 0.6rem;
    /* Tighter stats box */
  }

  .usage-text-row {
    font-size: 0.85rem;
    margin-bottom: 6px;
  }

  .progress-track-slim {
    height: 5px;
  }
}

/* ===== Public Pages Scroll Guard ===== */
/* Ensure public pages are not trapped by app layout wrappers */
/* Fix for mobile scroll issue on pricing/register/renew pages */


body>.pricing-page,
body>.register-page,
body>.renew-page {
  position: relative !important;
  height: auto !important;
  min-height: 100dvh;
  overflow: hidden !important;
  /* Changed to hidden to clip background decorations */
}

/* Force body to allow scroll when these page wrappers are present */
body:has(> .pricing-page),
body:has(> .register-page),
body:has(> .renew-page) {
  overflow: visible !important;
  height: auto !important;
  min-height: 100dvh;
}

/* ★ FIX: Hide body scrollbar when login-background is shown to prevent double scrollbars (Desktop) ★ */
body:has(> .login-background:not([style*="display:none"]):not([style*="display: none"])) {
  overflow: hidden !important;
}

/* ★ FIX: Mobile Login Scroll - Override the mobile overflow:hidden rule for login page ★ */
@media (max-width: 768px) {

  /* When login is shown, let login-background handle scrolling */
  body:has(> .login-background:not([style*="display:none"]):not([style*="display: none"])) {
    overflow: hidden !important;
    height: 100% !important;
  }

  /* Ensure login-background can scroll on mobile */
  .login-background {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex;
    /* REMOVED !important to allow JS to hide it */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 1rem !important;
    padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Login card adjustments for mobile - centered and properly sized */
  .login-background .login-card {
    margin: auto !important;
    width: 100% !important;
    max-width: 400px !important;
    flex-shrink: 0 !important;
  }

  /* Register/Pricing/Renew pages - FINAL NATIVE SCROLL FIX
     html: overflow-y: auto (Handles the viewport scroll)
     body: overflow: visible (Allows content to grow, no second scrollbar)
  */
  html:has(body > .register-page),
  html:has(body > .pricing-page),
  html:has(body > .renew-page) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Main scrollbar */
    height: auto !important;
    min-height: 100dvh !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body:has(> .register-page),
  body:has(> .pricing-page),
  body:has(> .renew-page) {
    overflow: visible !important;
    /* Fix double scrollbar */
    height: auto !important;
    min-height: 100dvh !important;
  }

  body>.register-page,
  body>.pricing-page,
  body>.renew-page {
    position: relative !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    /* Ensure gradients are clipped on mobile */
    transform: none !important;
  }
}

/* ===== Admin Scroll-To-Top Button ===== */
.admin-scroll-top-btn {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(102, 126, 234, 0.35);
  cursor: pointer;
  z-index: 1200;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-scroll-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.admin-scroll-top-btn:hover {
  box-shadow: 0 12px 28px rgba(102, 126, 234, 0.45);
}

.admin-scroll-top-btn:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.35);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .admin-scroll-top-btn {
    right: max(0.9rem, env(safe-area-inset-right));
    bottom: max(0.9rem, env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
  }
}


/* ===== New Messages Toast (Chat) ===== */
.new-messages-toast {
  position: fixed;
  left: 50%;
  bottom: var(--new-msg-toast-bottom, calc(76px + env(safe-area-inset-bottom)));
  transform: translate(-50%, 12px);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-family: 'Prompt', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.1px;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.new-messages-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.new-messages-toast:hover {
  box-shadow: 0 10px 28px rgba(102, 126, 234, 0.45);
}

.new-messages-toast:focus-visible {
  outline: 3px solid rgba(167, 139, 250, 0.65);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .new-messages-toast {
    max-width: calc(100vw - 1.5rem);
    font-size: 0.83rem;
    padding: 0.5rem 0.75rem;
  }
}