/* ⚠️ FILE TỰ SINH từ Hinata_Shared_UI — SỬA Ở ĐÂY SẼ BỊ XOÁ KHI KHỞI ĐỘNG MÁY.
   Sửa tại: Hinata_Shared_UI/src/styles/chatwoot-bridge.css */

/* ═══════════════════════════════════════════════════════════════════
   🐟 Hinata — AQUA PRO Design System
   Chatwoot Theme Bridge (Single Source of Truth)
   Path: Hinata_Shared_UI/src/styles/chatwoot-bridge.css
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Import SSOT theme tokens ── */
@import url('/theme-variables.css?v=20261001_chat_4theme_v1');

/* Token chữ/bóng từ foundation.css (chỉ khai báo :root, KHÔNG @font-face). Sửa ở Hinata_Shared_UI/src/styles/foundation.css */
:root {
  --text-xs: 0.75rem;
  --text-13: 0.8125rem;
  --text-sm: 0.875rem;
  --text-15: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --chat-tnum: 'tnum';
  --chat-list-name-size: var(--text-sm);
  --chat-list-name-lh: 20px;
  --chat-list-name-weight: 600;
  --chat-list-name-unread-weight: 700;
  --chat-preview-size: var(--text-13);
  --chat-preview-lh: 18px;
  --chat-preview-weight: 400;
  --chat-time-size: var(--text-xs);
  --chat-time-lh: 16px;
  --chat-time-weight: 400;
  --chat-bubble-size: var(--text-sm);
  --chat-bubble-lh: 20px;
  --chat-bubble-weight: 400;
  --chat-bubble-mobile-size: var(--text-15);
  --chat-bubble-mobile-lh: 22px;
  --chat-bubble-mobile-weight: 400;
  --chat-sender-size: var(--text-xs);
  --chat-sender-lh: 16px;
  --chat-sender-weight: 600;
  --chat-header-title-size: var(--text-15);
  --chat-header-title-lh: 20px;
  --chat-header-title-weight: 600;
  --chat-composer-size: var(--text-sm);
  --chat-composer-lh: 20px;
  --chat-composer-weight: 400;
  --chat-composer-mobile-size: var(--text-base);
  --chat-composer-mobile-lh: 22px;
  --chat-composer-mobile-weight: 400;
  --chat-label-size: var(--text-xs);
  --chat-label-lh: 16px;
  --chat-label-weight: 600;
  --chat-page-title-size: var(--text-lg);
  --chat-page-title-lh: 24px;
  --chat-page-title-weight: 600;
  --chat-page-card-name-size: var(--text-sm);
  --chat-page-card-name-lh: 20px;
  --chat-page-card-name-weight: 600;
  --chat-page-card-username-size: var(--text-xs);
  --chat-page-card-username-lh: 16px;
  --chat-page-card-username-weight: 400;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ── 2. Sharp Anime Background Wallpapers with Reading Contrast Gradient ── */
html[data-theme="naruto"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

html[data-theme="onepiece"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

html[data-theme="kimetsu"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

html[data-theme="aot"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── 2b. Mobile Viewport Anime Backgrounds & Optimized Blur ── */
@media (max-width: 768px) {
  html[data-theme="naruto"] body::before {
  }
  html[data-theme="onepiece"] body::before {
  }
  html[data-theme="kimetsu"] body::before {
  }
  html[data-theme="aot"] body::before {
  }
  html[data-theme="naruto"],
  html[data-theme="onepiece"],
  html[data-theme="kimetsu"],
  html[data-theme="aot"] {
    --glass-blur: 12px !important;
  }
}

/* Pro-Coral subtle grid */
html[data-theme="pro-coral"] body {
  background-color: #FDFAF6 !important;
  background-image:
    linear-gradient(to right, rgba(229, 106, 74, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(229, 106, 74, 0.08) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}

/* ── 3. Anime Panels: Liquid Frosted Glass (iOS Style) & Reading Surface ── */
/* Tinh chỉnh kính mờ cao cấp chuẩn iOS 27 Liquid Glass:
   - Blur 16-20px và độ bão hòa màu 180-190% trên 4 cột lớn
   - Trong suốt tối ưu để chiêm ngưỡng tranh anime sống động
   - Giữ độ tương phản chữ và chat bubbles đạt chuẩn WCAG AA/AAA */
html[data-theme="naruto"],
html[data-theme="onepiece"],
html[data-theme="kimetsu"],
html[data-theme="aot"] {
  --glass-blur: 20px !important;
}

/* Cấu trúc các cột của Chatwoot dưới Theme Anime (Khớp 100% Chatwoot v4.17.0 DOM):
   Cột 1: Primary Sidebar (<aside>) - Liquid Glass iOS
   Cột 2: Conversations List (.conversations-list-wrap) - Liquid Glass iOS
   Cột 3: Main Chat View (.conversation-details-wrap & .conversation-panel) - Frosted Glass Reading Surface
   Cột 4: Contact/Details Panel (.bg-n-surface-2) - Liquid Glass iOS để ngắm tranh anime bên phải */
html[data-theme="naruto"] #app,
html[data-theme="onepiece"] #app,
html[data-theme="kimetsu"] #app,
html[data-theme="aot"] #app {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* Gán đè biến Radix RGB tokens trực tiếp lên body để override triệt để rule Chatwoot body.dark (--surface-1: 20 21 23) */
html[data-theme="naruto"] body {
  --background-color: 28 18 12 !important;
  --surface-1: 36 24 16 !important;
  --surface-2: 45 28 20 !important;
  --surface-3: 55 36 26 !important;
}
html[data-theme="onepiece"] body {
  --background-color: 8 18 30 !important;
  --surface-1: 12 24 40 !important;
  --surface-2: 15 32 52 !important;
  --surface-3: 18 38 60 !important;
}
html[data-theme="kimetsu"] body {
  --background-color: 22 16 32 !important;
  --surface-1: 30 22 44 !important;
  --surface-2: 38 28 56 !important;
  --surface-3: 46 34 68 !important;
}
html[data-theme="aot"] body {
  --background-color: 18 20 18 !important;
  --surface-1: 24 28 24 !important;
  --surface-2: 32 38 32 !important;
  --surface-3: 40 48 40 !important;
}

/* Giải phóng nền đặc cho tất cả container con Chatwoot để lộ hình nền Anime từ body::before */
html[data-theme="naruto"] #app > div,
html[data-theme="naruto"] main,
html[data-theme="naruto"] main > section,
html[data-theme="naruto"] main > section > div,
html[data-theme="naruto"] .conversation-details-wrap div,
html[data-theme="naruto"] .conversations-list,
html[data-theme="onepiece"] #app > div,
html[data-theme="onepiece"] main,
html[data-theme="onepiece"] main > section,
html[data-theme="onepiece"] main > section > div,
html[data-theme="onepiece"] .conversation-details-wrap div,
html[data-theme="onepiece"] .conversations-list,
html[data-theme="kimetsu"] #app > div,
html[data-theme="kimetsu"] main,
html[data-theme="kimetsu"] main > section,
html[data-theme="kimetsu"] main > section > div,
html[data-theme="kimetsu"] .conversation-details-wrap div,
html[data-theme="kimetsu"] .conversations-list,
html[data-theme="aot"] #app > div,
html[data-theme="aot"] main,
html[data-theme="aot"] main > section,
html[data-theme="aot"] main > section > div,
html[data-theme="aot"] .conversation-details-wrap div,
html[data-theme="aot"] .conversations-list {
  background-color: transparent !important;
}

/* Primary Sidebar (<aside class="bg-n-background ...">) */
html[data-theme="naruto"] aside,
html[data-theme="onepiece"] aside,
html[data-theme="kimetsu"] aside,
html[data-theme="aot"] aside {
  background-color: rgba(var(--background-color) / 0.65) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Secondary Navigation & Conversation List (<div class="conversations-list-wrap ...">) */
html[data-theme="naruto"] .conversations-list-wrap,
html[data-theme="naruto"] [class*="conversations-list"],
html[data-theme="onepiece"] .conversations-list-wrap,
html[data-theme="onepiece"] [class*="conversations-list"],
html[data-theme="kimetsu"] .conversations-list-wrap,
html[data-theme="kimetsu"] [class*="conversations-list"],
html[data-theme="aot"] .conversations-list-wrap,
html[data-theme="aot"] [class*="conversations-list"] {
  background-color: rgba(var(--surface-1) / 0.58) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Main Chat Messages Wrapping Area (Cột 3: Vỏ ngoài mang Liquid Frosted Glass) */
html[data-theme="naruto"] .conversation-details-wrap,
html[data-theme="onepiece"] .conversation-details-wrap,
html[data-theme="kimetsu"] .conversation-details-wrap,
html[data-theme="aot"] .conversation-details-wrap {
  background-color: rgba(var(--surface-1) / 0.52) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
}

/* Triệt tiêu Nested Blur cho panel con bên trong Cột 3 (Zero Nested Blur theo SSOT §3.3) */
html[data-theme="naruto"] .conversation-panel,
html[data-theme="naruto"] [class*="conversation-panel"],
html[data-theme="onepiece"] .conversation-panel,
html[data-theme="onepiece"] [class*="conversation-panel"],
html[data-theme="kimetsu"] .conversation-panel,
html[data-theme="kimetsu"] [class*="conversation-panel"],
html[data-theme="aot"] .conversation-panel,
html[data-theme="aot"] [class*="conversation-panel"] {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Conversation Header (Con Cột 3: Không blur lồng nhau) */
html[data-theme="naruto"] .conversation-details-wrap > header,
html[data-theme="onepiece"] .conversation-details-wrap > header,
html[data-theme="kimetsu"] .conversation-details-wrap > header,
html[data-theme="aot"] .conversation-details-wrap > header {
  background-color: rgba(var(--surface-1) / 0.70) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Right Details Panel (Contact, attributes, etc.) */
html[data-theme="naruto"] main section > div.bg-n-surface-2,
html[data-theme="naruto"] [class*="ConversationSidebar"],
html[data-theme="onepiece"] main section > div.bg-n-surface-2,
html[data-theme="onepiece"] [class*="ConversationSidebar"],
html[data-theme="kimetsu"] main section > div.bg-n-surface-2,
html[data-theme="kimetsu"] [class*="ConversationSidebar"],
html[data-theme="aot"] main section > div.bg-n-surface-2,
html[data-theme="aot"] [class*="ConversationSidebar"] {
  background-color: rgba(var(--surface-2) / 0.50) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Fallback an toàn cho trình duyệt không hỗ trợ backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html[data-theme="naruto"] aside,
  html[data-theme="onepiece"] aside,
  html[data-theme="kimetsu"] aside,
  html[data-theme="aot"] aside {
    background-color: rgba(var(--background-color) / 0.92) !important;
  }
  html[data-theme="naruto"] .conversations-list-wrap,
  html[data-theme="onepiece"] .conversations-list-wrap,
  html[data-theme="kimetsu"] .conversations-list-wrap,
  html[data-theme="aot"] .conversations-list-wrap {
    background-color: rgba(var(--surface-1) / 0.88) !important;
  }
  html[data-theme="naruto"] .conversation-details-wrap,
  html[data-theme="onepiece"] .conversation-details-wrap,
  html[data-theme="kimetsu"] .conversation-details-wrap,
  html[data-theme="aot"] .conversation-details-wrap {
    background-color: rgba(var(--surface-1) / 0.86) !important;
  }
  html[data-theme="naruto"] main section > div.bg-n-surface-2,
  html[data-theme="onepiece"] main section > div.bg-n-surface-2,
  html[data-theme="kimetsu"] main section > div.bg-n-surface-2,
  html[data-theme="aot"] main section > div.bg-n-surface-2 {
    background-color: rgba(var(--surface-2) / 0.85) !important;
  }
}

/* ── 4. Chat Bubble Contrast (WCAG 2.2 AA Compliant) ── */

/* 4.1. Incoming Customer Message (Khách gửi đến) — Luôn đạt tương phản cao > 7:1 */
html[data-theme="naruto"] .message.is-incoming .bubble,
html[data-theme="onepiece"] .message.is-incoming .bubble,
html[data-theme="kimetsu"] .message.is-incoming .bubble,
html[data-theme="aot"] .message.is-incoming .bubble,
html[data-theme="dark"] .message.is-incoming .bubble {
  background-color: rgba(var(--surface-2) / 0.95) !important;
  color: #F9FAFB !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* 4.2. Outgoing Agent Message (Nhân viên gửi đi) — Tương phản tối ưu theo từng Theme */
/* Naruto: Cam rực rỡ #F97316 + Chữ tối #1C120C (Độ tương phản 6.56:1 - Đạt WCAG AAA) */
html[data-theme="naruto"] .message.is-outgoing .bubble,
html[data-theme="naruto"] .message-wrap.is-outgoing .bubble,
html[data-theme="naruto"] [class*="is-outgoing"] .prose-bubble {
  background-color: #F97316 !important;
  color: #1C120C !important;
  font-weight: 500 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 2px 10px rgba(249, 115, 22, 0.25) !important;
}
html[data-theme="naruto"] .message.is-outgoing .bubble a,
html[data-theme="naruto"] .message.is-outgoing .bubble strong {
  color: #000000 !important;
}

/* One Piece: Xanh đại dương sâu #0369A1 + Chữ trắng #FFFFFF (Độ tương phản 5.93:1 - Đạt WCAG AA) */
html[data-theme="onepiece"] .message.is-outgoing .bubble,
html[data-theme="onepiece"] .message-wrap.is-outgoing .bubble,
html[data-theme="onepiece"] [class*="is-outgoing"] .prose-bubble {
  background-color: #0369A1 !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 10px rgba(3, 105, 161, 0.25) !important;
}

/* Kimetsu: Tím Wisteria #7C3AED + Chữ trắng #FFFFFF (Độ tương phản 5.70:1 - Đạt WCAG AA) */
html[data-theme="kimetsu"] .message.is-outgoing .bubble,
html[data-theme="kimetsu"] .message-wrap.is-outgoing .bubble,
html[data-theme="kimetsu"] [class*="is-outgoing"] .prose-bubble {
  background-color: #7C3AED !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.25) !important;
}

/* AoT: Xanh Trinh Sát #3E6B2C + Chữ trắng #FFFFFF (Độ tương phản 6.28:1 - Đạt WCAG AA/AAA) */
html[data-theme="aot"] .message.is-outgoing .bubble,
html[data-theme="aot"] .message-wrap.is-outgoing .bubble,
html[data-theme="aot"] [class*="is-outgoing"] .prose-bubble {
  background-color: #3E6B2C !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 10px rgba(62, 107, 44, 0.25) !important;
}

/* Pro-Coral: San hô #E56A4A + Chữ trắng #FFFFFF */
html[data-theme="pro-coral"] .message.is-outgoing .bubble,
html[data-theme="pro-coral"] .message-wrap.is-outgoing .bubble,
html[data-theme="pro-coral"] [class*="is-outgoing"] .prose-bubble {
  background-color: #E56A4A !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 10px rgba(229, 106, 74, 0.25) !important;
}

/* ── 5. Chat Composer Box (Ô soạn thảo tin nhắn) ── */
/* Zero Nested Blur: Nằm trong .conversation-details-wrap (đã có blur 16px), nên dùng backdrop-filter: none */
html[data-theme="naruto"] .reply-box,
html[data-theme="onepiece"] .reply-box,
html[data-theme="kimetsu"] .reply-box,
html[data-theme="aot"] .reply-box,
html[data-theme="naruto"] [class*="reply-box"],
html[data-theme="onepiece"] [class*="reply-box"],
html[data-theme="kimetsu"] [class*="reply-box"],
html[data-theme="aot"] [class*="reply-box"] {
  background-color: rgba(var(--surface-1) / 0.70) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ── 6. Theme Switcher Widget Styling (Sidebar Integrated) ── */
#hinata-chat-theme-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(var(--surface-2) / 0.8) !important;
  color: var(--text-color, #F9FAFB) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 0 !important;
  padding: 0 !important;
  outline: none !important;
}

/* Dock the palette button inside Chatwoot's profile area instead of leaving it
   as a free-standing child at the bottom of the sidebar. */
.hinata-theme-trigger-dock {
  position: relative !important;
  padding-right: 44px !important;
}

.hinata-theme-trigger-dock > #hinata-chat-theme-trigger {
  position: absolute !important;
  right: 4px !important;
  bottom: 2px !important;
  z-index: 2 !important;
}

#hinata-chat-theme-trigger:hover,
#hinata-chat-theme-trigger:focus-visible {
  background: var(--primary-color, rgb(var(--iris-9))) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(var(--iris-9) / 0.3) !important;
}

/* Theme Switcher Popover */
#hinata-chat-theme-popover {
  position: fixed !important;
  bottom: 60px !important;
  left: 64px !important;
  width: 310px !important;
  background: rgba(var(--surface-1) / 0.85) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  padding: 14px !important;
  z-index: 999999 !important;
  display: none !important;
  flex-direction: column !important;
  gap: 12px !important;
  font-family: inherit !important;
}

#hinata-chat-theme-popover.is-open {
  display: flex !important;
  animation: hinataPopoverFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes hinataPopoverFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 767px) {
  #hinata-chat-theme-popover {
    top: 54px !important;
    bottom: auto !important;
    right: 8px !important;
    left: auto !important;
    width: min(310px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
  }
}

.hinata-theme-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.hinata-theme-header {
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-muted, #9CA3AF) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.hinata-theme-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}

.hinata-theme-btn-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(var(--surface-2) / 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  cursor: pointer !important;
  color: var(--text-color, #F9FAFB) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  text-align: left !important;
  outline: none !important;
}

.hinata-theme-btn-item:hover {
  background: rgba(var(--iris-9) / 0.2) !important;
  border-color: rgba(var(--iris-9) / 0.4) !important;
}

.hinata-theme-btn-item.active {
  background: rgba(var(--iris-9) / 0.25) !important;
  border-color: rgb(var(--iris-9)) !important;
  font-weight: 600 !important;
}

.hinata-theme-btn-item .material-symbols-outlined {
  font-size: 16px !important;
  color: var(--text-muted, #9CA3AF) !important;
}

.hinata-theme-btn-item.active .material-symbols-outlined {
  color: rgb(var(--iris-9)) !important;
}

.hinata-theme-divider {
  height: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 2px 0 !important;
}

/* ── 7. Sidebar Brand Logo (SSOT Proportional Scaling) ── */
.hinata-sidebar-brand {
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
  padding: 0 4px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  z-index: 10 !important;
}

.hinata-sidebar-brand-link {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  outline: none !important;
  cursor: pointer !important;
}

#hinata-brand-logo-expanded {
  display: block !important;
  height: 30px !important;
  max-width: 165px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08)) !important;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#hinata-brand-logo-expanded:hover {
  transform: scale(1.02) !important;
}

#hinata-brand-logo-collapsed {
  display: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35) !important;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#hinata-brand-logo-collapsed:hover {
  transform: scale(1.05) !important;
}

/* Hide legacy crude 16px icon, divider, and duplicate account text when brand logo is mounted */
.hinata-sidebar-brand-mounted > .grid.size-6,
.hinata-sidebar-brand-mounted > .size-6,
.hinata-sidebar-brand-mounted > div[class*="size-6"],
.hinata-sidebar-brand-mounted > div[class*="bg-n-strong"],
.hinata-sidebar-brand-mounted > div.w-px,
.hinata-sidebar-brand-mounted > div.relative.space-y-2 {
  display: none !important;
}

/* Collapsed Sidebar Mode (width <= 75px) */
aside[data-hinata-collapsed="true"] .hinata-sidebar-brand,
aside.w-\[64px\] .hinata-sidebar-brand {
  justify-content: center !important;
  padding: 0 !important;
  width: 100% !important;
}

aside[data-hinata-collapsed="true"] #hinata-brand-logo-expanded,
aside.w-\[64px\] #hinata-brand-logo-expanded {
  display: none !important;
}

aside[data-hinata-collapsed="true"] #hinata-brand-logo-collapsed,
aside.w-\[64px\] #hinata-brand-logo-collapsed {
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════
   8. Chatwoot Decluttering & Minimalist UI [SSOT-HINATA-CHAT-DECLUTTER-001]
   Mục đích: Ẩn toàn bộ tính năng ngoại lai / rác giao diện khỏi Chat Hinata.
   Phục hồi: Xem tài liệu Obsidian_Vault/04_Frontend_and_Mobile/Chatwoot_Feature_Declutter_And_Registry_SSOT.md
   ═══════════════════════════════════════════════════════════════════ */

/* ── [FEAT_CAPTAIN_AI]: Ẩn trợ lý AI Chatwoot Captain ── */
[data-feature="captain-ai"],
li:has(> a[href*="/captain"]),
li:has(a[href*="/captain"]),
li:has(.i-woot-captain),
button:has(.i-woot-captain),
div[title*="Captain"],
button[title*="Captain"] {
  display: none !important;
}

/* ── [FEAT_CALLS_DYTE]: Ẩn cuộc gọi thoại & video Dyte ── */
[data-feature="calls"],
li:has(> a[href*="/calls"]),
li:has(a[href*="/calls"]),
li:has(.i-lucide-phone),
button:has(.i-lucide-phone),
button[title*="Calls"],
button[title*="Cuộc gọi"] {
  display: none !important;
}

/* ── [FEAT_COMPANIES_CRM]: Ẩn Quản lý Công ty B2B ── */
[data-feature="companies"],
li:has(> a[href*="/companies"]),
li:has(a[href*="/companies"]),
li:has(.i-lucide-building-2),
button:has(.i-lucide-building-2),
button[title*="Companies"],
button[title*="Công ty"] {
  display: none !important;
}

/* ── [FEAT_CAMPAIGNS]: Ẩn chiến dịch Livechat / SMS / WhatsApp ── */
[data-feature="campaigns"],
li:has(> a[href*="/campaigns"]),
li:has(a[href*="/campaigns"]),
li:has(.i-lucide-megaphone),
button:has(.i-lucide-megaphone),
button[title*="Campaigns"],
button[title*="Chiến dịch"] {
  display: none !important;
}

/* ── [FEAT_HELP_CENTER]: Ẩn Cổng Trung tâm Trợ giúp Portals ── */
[data-feature="help-center"],
li:has(> a[href*="/portals"]),
li:has(a[href*="/portals"]),
li:has(.i-lucide-library-big),
button:has(.i-lucide-library-big),
button[title*="Help Center"],
button[title*="Portals"],
button[title*="Trung tâm trợ giúp"] {
  display: none !important;
}

/* ── [FEAT_SETTINGS_NOISE]: Ẩn các menu ngoại lai trong Cài đặt ── */
li:has(> a[href*="/settings/templates"]),
li:has(a[href*="/settings/templates"]),
li:has(> a[href*="/settings/agent-bots"]),
li:has(a[href*="/settings/agent-bots"]),
li:has(> a[href*="/settings/billing"]),
li:has(a[href*="/settings/billing"]),
li:has(> a[href*="/settings/sla"]),
li:has(a[href*="/settings/sla"]),
li:has(> a[href*="/settings/conversation-workflow"]),
li:has(a[href*="/settings/conversation-workflow"]) {
  display: none !important;
}

/* ── [FEAT_SAAS_INTEGRATIONS]: Ẩn tích hợp bên thứ ba (BẢO TỒN Webhooks & Dashboard Apps Customer 360) ── */
.integration--card:has(a[href*="slack"]),
.integration--card:has(a[href*="shopify"]),
.integration--card:has(a[href*="linear"]),
.integration--card:has(a[href*="notion"]),
.integration--card:has(a[href*="dyte"]),
.integration--card:has(a[href*="dialogflow"]),
div[data-testid="integration-card-slack"],
div[data-testid="integration-card-shopify"],
div[data-testid="integration-card-linear"],
div[data-testid="integration-card-notion"],
div[data-testid="integration-card-dyte"],
div[data-testid="integration-card-dialogflow"] {
  display: none !important;
}

/* ── [FEAT_COMPOSER_ARTICLE]: Ẩn nút chèn bài viết trợ giúp trong khung soạn tin ── */
button[title*="Insert Article"],
button[title*="chèn bài viết"],
button[title*="bài viết trợ giúp"],
.reply-box button:has(.i-lucide-library-big),
[class*="reply-box"] button:has(.i-lucide-library-big) {
  display: none !important;
}

/* ── [FEAT_CHATWOOT_CLOUD_LINKS]: Ẩn liên kết ngoài chatwoot.com & thẻ Changelog ── */
a[href*="chatwoot.com/hc"],
a[href*="chatwoot.com/changelog"],
button:has(.i-lucide-life-buoy),
.sidebar-changelog-card,
.sidebar-changelog-btn,
div:has(> .sidebar-changelog-card),
div:has(> .sidebar-changelog-btn) {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   9. Pancake-Style Multi-Fanpage Selector & Quick Filters [SSOT-HINATA-PANCAKE-UX-001]
   ═══════════════════════════════════════════════════════════════════ */

/* Ẩn native woot-tabs trong conversations list để nhường chỗ cho Pancake Quick Filter Tabs */
.conversations-list-wrap woot-tabs {
  display: none !important;
}

/* Container chính của Pancake Bar */
.hinata-pancake-bar {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px 12px 8px 12px !important;
  background: rgba(var(--surface-1) / 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  user-select: none !important;
  z-index: 20 !important;
}

/* Zero Nested Blur: Nằm trong .conversations-list-wrap (đã có blur 20px), nên dùng backdrop-filter: none */
html[data-theme="naruto"] .hinata-pancake-bar,
html[data-theme="onepiece"] .hinata-pancake-bar,
html[data-theme="kimetsu"] .hinata-pancake-bar,
html[data-theme="aot"] .hinata-pancake-bar {
  background: rgba(var(--surface-1) / 0.65) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="light"] .hinata-pancake-bar,
html[data-theme="pro-coral"] .hinata-pancake-bar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: #FFFFFF !important;
}

/* Row 1: Header Fanpages (Tiêu đề + nút Thêm Page + Cài đặt) */
.hinata-pancake-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.hinata-pancake-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.hinata-pancake-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--text-muted, #9CA3AF) !important;
}

.hinata-pancake-count-badge {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  border-radius: 10px !important;
  background: rgba(var(--iris-9) / 0.15) !important;
  color: rgb(var(--iris-9)) !important;
}

.hinata-pancake-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.hinata-pancake-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(var(--surface-2) / 0.8) !important;
  color: var(--text-color, #F9FAFB) !important;
  transition: all 0.15s ease !important;
  outline: none !important;
}

html[data-theme="light"] .hinata-pancake-action-btn,
html[data-theme="pro-coral"] .hinata-pancake-action-btn {
  background: #F3F4F6 !important;
  border-color: #E5E7EB !important;
  color: #374151 !important;
}

.hinata-pancake-action-btn:hover {
  background: rgba(var(--iris-9) / 0.2) !important;
  border-color: rgb(var(--iris-9)) !important;
  color: rgb(var(--iris-9)) !important;
}

.hinata-btn-add-page {
  background: rgba(var(--iris-9) / 0.15) !important;
  border-color: rgba(var(--iris-9) / 0.3) !important;
  color: rgb(var(--iris-9)) !important;
}

.hinata-btn-add-page:hover {
  background: rgb(var(--iris-9)) !important;
  color: #FFFFFF !important;
}

.hinata-pancake-action-btn .material-symbols-outlined {
  font-size: 14px !important;
}

/* Row 2: Danh sách chip Fanpage cuộn ngang */
.hinata-pancake-chips-scroll {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
  scrollbar-width: thin !important;
}

.hinata-pancake-chips-scroll::-webkit-scrollbar {
  height: 3px !important;
}

.hinata-pancake-chips-scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--iris-9) / 0.3) !important;
  border-radius: 3px !important;
}

/* Từng chip Fanpage */
.hinata-pancake-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 8px 4px 6px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(var(--surface-2) / 0.6) !important;
  color: var(--text-color, #E5E7EB) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

html[data-theme="light"] .hinata-pancake-chip,
html[data-theme="pro-coral"] .hinata-pancake-chip {
  background: #F9FAFB !important;
  border-color: #E5E7EB !important;
  color: #4B5563 !important;
}

.hinata-pancake-chip:hover {
  border-color: rgba(var(--iris-9) / 0.5) !important;
  background: rgba(var(--surface-2) / 0.9) !important;
}

.hinata-pancake-chip.active {
  background: rgba(var(--iris-9) / 0.18) !important;
  border-color: rgb(var(--iris-9)) !important;
  color: var(--text-color, #FFFFFF) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(var(--iris-9) / 0.2) !important;
}

html[data-theme="light"] .hinata-pancake-chip.active,
html[data-theme="pro-coral"] .hinata-pancake-chip.active {
  background: rgba(var(--iris-9) / 0.12) !important;
  color: rgb(var(--iris-9)) !important;
}

.hinata-chip-avatar {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.hinata-chip-icon {
  font-size: 15px !important;
  color: var(--text-muted, #9CA3AF) !important;
}

.hinata-pancake-chip.active .hinata-chip-icon {
  color: rgb(var(--iris-9)) !important;
}

.hinata-chip-name {
  max-width: 130px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.hinata-chip-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 4px !important;
  color: var(--text-muted, #9CA3AF) !important;
  text-decoration: none !important;
  transition: all 0.12s ease !important;
}

.hinata-chip-link:hover {
  color: #1877F2 !important;
  background: rgba(24, 119, 242, 0.15) !important;
}

.hinata-chip-link .material-symbols-outlined {
  font-size: 12px !important;
}

/* Row 3: Quick Filter Tabs (Pancake 1-Click Filter) */
.hinata-pancake-quick-filters {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 3px !important;
  padding: 2px !important;
  background: rgba(var(--surface-2) / 0.6) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="light"] .hinata-pancake-quick-filters,
html[data-theme="pro-coral"] .hinata-pancake-quick-filters {
  background: #F3F4F6 !important;
  border-color: #E5E7EB !important;
}

.hinata-quick-filter-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 5px 2px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted, #9CA3AF) !important;
  transition: all 0.15s ease !important;
  outline: none !important;
}

.hinata-quick-filter-tab:hover {
  color: var(--text-color, #F9FAFB) !important;
}

html[data-theme="light"] .hinata-quick-filter-tab:hover,
html[data-theme="pro-coral"] .hinata-quick-filter-tab:hover {
  color: #111827 !important;
}

.hinata-quick-filter-tab.active {
  background: rgba(var(--surface-1) / 0.98) !important;
  color: rgb(var(--iris-9)) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .hinata-quick-filter-tab.active,
html[data-theme="pro-coral"] .hinata-quick-filter-tab.active {
  background: #FFFFFF !important;
  color: rgb(var(--iris-9)) !important;
}

.hinata-tab-icon {
  font-size: 11px !important;
}

/* Bộ lọc "Chưa đọc": Khi active, ẩn các thẻ hội thoại không có badge chưa đọc */
.conversations-list-wrap.hinata-filter-unread-active .conversation-card:not(:has([class*="bg-n-teal-9"])),
.conversations-list-wrap.hinata-filter-unread-active [class*="conversation-card"]:not(:has([class*="bg-n-teal-9"])) {
  display: none !important;
}

/* ── 10. Facebook Integration Action Buttons in Chat Header & Contact Panel ── */
.hinata-fb-header-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-right: 6px !important;
}

.hinata-fb-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(var(--surface-2) / 0.8) !important;
  color: var(--text-color, #F9FAFB) !important;
  transition: all 0.15s ease !important;
  outline: none !important;
  line-height: 1.2 !important;
}

.hinata-fb-btn .material-symbols-outlined {
  font-size: 14px !important;
}

.hinata-fb-btn-meta {
  background: rgba(24, 119, 242, 0.15) !important;
  border-color: rgba(24, 119, 242, 0.4) !important;
  color: #1877F2 !important;
}

.hinata-fb-btn-meta:hover {
  background: #1877F2 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(24, 119, 242, 0.35) !important;
}

.hinata-fb-btn-refresh:hover {
  background: rgba(var(--iris-9) / 0.2) !important;
  border-color: rgb(var(--iris-9)) !important;
  color: rgb(var(--iris-9)) !important;
}

.hinata-fb-btn-refresh.loading .material-symbols-outlined {
  animation: hinataSpin 1s linear infinite !important;
}

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

/* Nút mở nhanh Facebook trên Conversation Card */
.hinata-fb-card-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
  color: #1877F2 !important;
  background: rgba(24, 119, 242, 0.1) !important;
  border: 1px solid rgba(24, 119, 242, 0.25) !important;
  transition: all 0.15s ease !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.hinata-fb-card-link:hover {
  background: #1877F2 !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 4px rgba(24, 119, 242, 0.4) !important;
  transform: scale(1.05) !important;
}

.hinata-fb-card-link .material-symbols-outlined {
  font-size: 13px !important;
}

/* Contact Sidebar Facebook Block */
.hinata-fb-contact-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  margin: 8px 12px !important;
  border-radius: 8px !important;
  background: rgba(var(--surface-1) / 0.8) !important;
  border: 1px solid rgba(24, 119, 242, 0.25) !important;
}

.hinata-fb-contact-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 11px !important;
}

.hinata-fb-contact-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #1877F2 !important;
  font-weight: 700 !important;
}

.hinata-fb-contact-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Hinata Modern Modal Dialog (Quyền QTV & Thông báo) */
.hinata-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(2px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999999 !important;
  animation: hinataFadeIn 0.15s ease-out !important;
}

.hinata-modal-content {
  width: 90% !important;
  max-width: 400px !important;
  background: rgba(var(--surface-1) / 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
  text-align: center !important;
  color: var(--text-color, #F9FAFB) !important;
}

html[data-theme="light"] .hinata-modal-content,
html[data-theme="pro-coral"] .hinata-modal-content {
  background: #FFFFFF !important;
  border-color: #E5E7EB !important;
  color: #111827 !important;
}

.hinata-modal-icon {
  font-size: 36px !important;
  margin-bottom: 8px !important;
}

.hinata-modal-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 8px 0 !important;
}

.hinata-modal-body {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--text-muted, #9CA3AF) !important;
  margin-bottom: 16px !important;
}

.hinata-modal-btn-confirm {
  padding: 8px 20px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: rgb(var(--iris-9)) !important;
  color: #FFFFFF !important;
  border: none !important;
  cursor: pointer !important;
}

/* Toast Notifications */
.hinata-toast {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  background: rgba(30, 41, 59, 0.95) !important;
  color: #F8FAFC !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  backdrop-filter: blur(8px) !important;
  animation: hinataSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.hinata-toast.fade-out {
  opacity: 0 !important;
  transform: translateY(8px) !important;
}

.hinata-toast-success {
  border-left: 3px solid #10B981 !important;
}

.hinata-toast-error {
  border-left: 3px solid #EF4444 !important;
}

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

/* ── 7. Hinata Design System Typography & Font Size Standardization ── */
body, #app, button, input, textarea, select {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: -0.01em !important;
}

/* Header tiêu đề danh sách hội thoại */
.conversations-list-wrap header h1,
.conversations-list-wrap header [class*="title"],
.conversation-header h2 {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Empty state styling */
.conversation-details-wrap [class*="items-center"] h2,
.conversation-details-wrap [class*="items-center"] [class*="title"] {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #F9FAFB !important;
  margin-top: 12px !important;
}

.conversation-details-wrap [class*="items-center"] p,
.conversation-details-wrap [class*="items-center"] span {
  font-size: 13px !important;
  color: #9CA3AF !important;
}

/* Keyboard shortcuts labels */
.conversation-details-wrap kbd {
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #D1D5DB !important;
}

/* ═══════════════════════════════════════════════════════════════════
   🥞 8. Pancake Fanpage Management UI Standard (Ảnh 1, Ảnh 2, Ảnh 3)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 8.1. Left Sidebar Navigation Item: Bảng Điều Khiển ── */
.hinata-sidebar-nav-item {
  list-style: none !important;
  margin: 4px 8px !important;
}

.hinata-sidebar-nav-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-color, #E5E7EB) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.hinata-sidebar-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

.hinata-sidebar-nav-btn.active {
  background: rgba(var(--iris-9) / 0.2) !important;
  color: rgb(var(--iris-9)) !important;
  font-weight: 600 !important;
}

.hinata-sidebar-nav-btn .hinata-nav-icon {
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

/* ── 8.2. Màn Hình Bảng Điều Khiển Fanpage (Pancake Grid - Ảnh 1) ── */
#hinata-pancake-dashboard-view {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 45 !important;
  background: var(--bg-dashboard, #0F172A) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  padding: 24px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

#hinata-pancake-dashboard-view.is-hidden {
  display: none !important;
}

.conversation-details-wrap.hinata-dashboard-open {
  position: relative !important;
  overflow: hidden !important;
}

.conversation-details-wrap.hinata-dashboard-open > .flex.items-center {
  display: none !important;
}

/* Glass background for anime themes */
html[data-theme*="anime-"] .hinata-pancake-dashboard-view {
  background: rgba(10, 15, 26, 0.88) !important;
  backdrop-filter: none !important;
}

.hinata-dashboard-header-card {
  background: rgba(var(--surface-1) / 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.hinata-dashboard-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.hinata-dashboard-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text-color, #F9FAFB) !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}

.hinata-dashboard-search-wrap {
  position: relative !important;
  flex: 1 !important;
  max-width: 360px !important;
  min-width: 200px !important;
}

.hinata-dashboard-search-wrap .hinata-search-icon {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  color: #9CA3AF !important;
  pointer-events: none !important;
}

.hinata-dashboard-search-input {
  width: 100% !important;
  padding: 8px 32px 8px 36px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--text-color, #F9FAFB) !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

.hinata-dashboard-search-input:focus {
  border-color: rgb(var(--iris-9)) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 0 0 2px rgba(var(--iris-9) / 0.25) !important;
}

.hinata-search-clear-btn {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: #9CA3AF !important;
  cursor: pointer !important;
  font-size: 12px !important;
  padding: 2px !important;
}

.hinata-dashboard-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.hinata-dashboard-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(var(--surface-2) / 0.8) !important;
  color: var(--text-color, #F9FAFB) !important;
  transition: all 0.15s ease !important;
}

.hinata-dashboard-btn:hover {
  background: rgba(var(--surface-2) / 1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.hinata-btn-connect {
  background: rgb(var(--iris-9)) !important;
  border-color: rgb(var(--iris-9)) !important;
  color: #FFFFFF !important;
}

.hinata-btn-connect:hover {
  filter: brightness(1.1) !important;
}

.hinata-btn-merge.active {
  background: rgba(var(--iris-9) / 0.25) !important;
  border-color: rgb(var(--iris-9)) !important;
  color: rgb(var(--iris-9)) !important;
}

.hinata-dashboard-btn-close {
  display: none !important;
}

/* Tabs */
.hinata-dashboard-tabs-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 12px !important;
}

.hinata-dashboard-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #9CA3AF !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.hinata-dashboard-tab:hover {
  color: #F9FAFB !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.hinata-dashboard-tab.active {
  color: #FFFFFF !important;
  background: rgba(var(--iris-9) / 0.2) !important;
  border-color: rgba(var(--iris-9) / 0.4) !important;
  font-weight: 600 !important;
}

.hinata-tab-count {
  display: inline-block !important;
  padding: 1px 7px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.hinata-tab-fb-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #1877F2 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

/* ── 8.3. Grid Cards 3 Cột Chuẩn Pancake (Ảnh 1) ── */
.hinata-dashboard-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

@media (min-width: 1100px) {
  .hinata-dashboard-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.hinata-page-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: rgba(var(--surface-1) / 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.hinata-page-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(var(--iris-9) / 0.4) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
  background: rgba(var(--surface-2) / 0.9) !important;
}

.hinata-page-card.selected {
  border-color: rgb(var(--iris-9)) !important;
  background: rgba(var(--iris-9) / 0.15) !important;
}

.hinata-card-checkbox-wrap {
  flex-shrink: 0 !important;
}

.hinata-card-checkbox {
  width: 18px !important;
  height: 18px !important;
  accent-color: rgb(var(--iris-9)) !important;
  cursor: pointer !important;
}

.hinata-card-avatar-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
}

.hinata-card-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  background: #1F2937 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.hinata-card-connected-dot {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  border: 2px solid #0A0F1A !important;
}

.hinata-card-content {
  flex: 1 !important;
  min-width: 0 !important;
  padding-right: 75px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.hinata-card-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-color, #F9FAFB) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hinata-card-sub {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.hinata-fb-icon-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 3px !important;
  background: #1877F2 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.hinata-card-alias-link {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #9CA3AF !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: color 0.15s ease !important;
}

.hinata-card-alias-link:hover {
  color: #38BDF8 !important;
  text-decoration: underline !important;
}

.hinata-card-status-badge {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 12px !important;
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34D399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* Floating merge bar */
.hinata-dashboard-merge-bar {
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(17, 24, 39, 0.95) !important;
  border: 1px solid rgba(var(--iris-9) / 0.4) !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  display: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  z-index: 50 !important;
}

.hinata-dashboard-merge-bar.is-active {
  display: flex !important;
}

.hinata-merge-btn-apply {
  padding: 8px 18px !important;
  border-radius: 8px !important;
  background: rgb(var(--iris-9)) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.hinata-merge-btn-cancel {
  padding: 8px 14px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #9CA3AF !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin-left: 8px !important;
}

/* ── 8.4. Modal Thêm Kết Nối Chuẩn 1:1 Pancake (Ảnh 3) ── */
.hinata-connect-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  background: rgba(0, 0, 0, 0.75) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  animation: hinataModalFadeIn 0.2s ease !important;
}

.hinata-connect-modal-container {
  width: 900px !important;
  max-width: 95vw !important;
  height: 640px !important;
  max-height: 90vh !important;
  background: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

.hinata-connect-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.hinata-connect-modal-header h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #F9FAFB !important;
  margin: 0 !important;
}

.hinata-connect-modal-close {
  background: transparent !important;
  border: none !important;
  color: #9CA3AF !important;
  cursor: pointer !important;
  font-size: 18px !important;
  padding: 4px !important;
  border-radius: 6px !important;
}

.hinata-connect-modal-close:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.hinata-connect-modal-body {
  display: flex !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* Cột trái: Kênh */
.hinata-connect-modal-sidebar {
  width: 180px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  overflow-y: auto !important;
  background: rgba(10, 15, 26, 0.5) !important;
}

.hinata-channel-tab-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #9CA3AF !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  text-align: left !important;
  transition: all 0.15s ease !important;
}

.hinata-channel-tab-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #F9FAFB !important;
}

.hinata-channel-tab-item.active {
  background: rgba(var(--iris-9) / 0.18) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.hinata-channel-badge-beta {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  background: rgba(245, 158, 11, 0.2) !important;
  color: #F59E0B !important;
  margin-left: auto !important;
}

/* Cột phải: Content */
.hinata-connect-modal-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  padding: 16px 20px !important;
  overflow-y: auto !important;
  gap: 16px !important;
}

.hinata-connect-content-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.hinata-connect-content-header h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #F9FAFB !important;
  margin: 0 !important;
}

.hinata-connect-search-input {
  width: 240px !important;
  padding: 6px 12px 6px 30px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F9FAFB !important;
  outline: none !important;
}

.hinata-connect-pages-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  overflow-y: auto !important;
  max-height: 400px !important;
  padding-right: 4px !important;
}

.hinata-connect-page-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.15s ease !important;
}

.hinata-connect-page-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(var(--iris-9) / 0.3) !important;
}

.hinata-connect-page-card.is-connected {
  border-color: rgba(16, 185, 129, 0.35) !important;
  background: rgba(16, 185, 129, 0.06) !important;
  cursor: default !important;
}

.hinata-connect-page-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  background: #374151 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  flex-shrink: 0 !important;
}

.hinata-connect-page-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.hinata-connect-page-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #F9FAFB !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hinata-connect-page-identifier {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  color: #9CA3AF !important;
}

/* Badge ĐÃ KẾT NỐI */
.hinata-badge-already-connected {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34D399 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  margin-left: auto !important;
}

/* Footer Modal */
.hinata-connect-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(10, 15, 26, 0.7) !important;
}

.hinata-btn-select-all {
  background: transparent !important;
  border: none !important;
  color: #9CA3AF !important;
  font-size: 12px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.hinata-btn-select-all:hover {
  color: #FFFFFF !important;
}

.hinata-kbd-shortcut {
  font-size: 10px !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #E5E7EB !important;
}

.hinata-btn-activate {
  padding: 8px 20px !important;
  border-radius: 8px !important;
  background: rgb(var(--iris-9)) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.15s ease !important;
}

.hinata-btn-activate:hover {
  filter: brightness(1.1) !important;
}

.hinata-btn-activate:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ── 8.5. Header Chat URL Link (Ảnh 2) ── */
.hinata-chat-header-page-alias {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 2px !important;
}

.hinata-fb-icon-badge-mini {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 3px !important;
  background: #1877F2 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.hinata-header-alias-link {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #38BDF8 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.15s ease !important;
}

.hinata-header-alias-link:hover {
  text-decoration: underline !important;
  color: #7DD3FC !important;
}

.hinata-header-alias-link .material-symbols-outlined {
  font-size: 12px !important;
}

/* ── 8.6. Responsive Mobile Optimization (≤ 768px) ── */
@media (max-width: 768px) {
  /* Bảng điều khiển Mobile */
  #hinata-pancake-dashboard-view {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    padding: 12px !important;
    gap: 12px !important;
  }

  .hinata-dashboard-btn-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hinata-dashboard-header-card {
    padding: 12px 14px !important;
    gap: 12px !important;
  }

  .hinata-dashboard-title-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .hinata-dashboard-title {
    font-size: 16px !important;
  }

  .hinata-dashboard-search-wrap {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .hinata-dashboard-search-input {
    font-size: 14px !important;
    padding: 8px 30px 8px 34px !important;
  }

  .hinata-dashboard-actions {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .hinata-dashboard-btn {
    flex: 1 !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .hinata-dashboard-tabs-row {
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .hinata-dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hinata-page-card {
    padding: 10px 12px !important;
  }

  .hinata-card-avatar-wrap,
  .hinata-card-avatar {
    width: 42px !important;
    height: 42px !important;
  }

  .hinata-card-content {
    padding-right: 65px !important;
  }

  /* Modal Kết Nối Mobile */
  .hinata-connect-modal-overlay {
    padding: 8px !important;
  }

  .hinata-connect-modal-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 94vh !important;
    max-height: 94vh !important;
    border-radius: 12px !important;
  }

  .hinata-connect-modal-header {
    padding: 12px 14px !important;
  }

  .hinata-connect-modal-body {
    flex-direction: column !important;
  }

  .hinata-connect-modal-sidebar {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    flex-shrink: 0 !important;
  }

  .hinata-channel-tab-item {
    white-space: nowrap !important;
    width: auto !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }

  .hinata-connect-modal-content {
    padding: 12px 14px !important;
    gap: 12px !important;
  }

  .hinata-connect-content-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .hinata-connect-search-input {
    width: 100% !important;
    font-size: 14px !important;
  }

  .hinata-connect-pages-grid {
    grid-template-columns: 1fr !important;
    max-height: none !important;
    gap: 8px !important;
  }

  .hinata-connect-modal-footer {
    padding: 10px 14px !important;
  }
}

/* ── 9. Pancake-inspired Focus Theme ────────────────────────────────
   Reference measured from the user's live Pancake workspace:
   55px blue navigation band, 52px icon rail, ~400px conversation list,
   warm message canvas, white information panel and pale-blue selection. */
html[data-theme="pancake"] body {
  --background-color: 245 247 250 !important;
  --surface-1: 255 255 255 !important;
  --surface-2: 248 250 252 !important;
  --surface-3: 238 242 247 !important;
  --iris-9: 63 105 177 !important;
  --text-color: #263142 !important;
  --text-muted: #778294 !important;
  --primary-color: #3f69b1 !important;
  --bg-dashboard: #f4f6fa !important;
  background: #f4f6fa !important;
  color: #263142 !important;
}

html[data-theme="pancake"] #app,
html[data-theme="pancake"] main,
html[data-theme="pancake"] main > section {
  background: #f4f6fa !important;
}

/* Pancake's blue navigation surface, adapted to Chatwoot's accessible sidebar. */
html[data-theme="pancake"] aside {
  background: #5275b7 !important;
  border-color: #4669a9 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="pancake"] aside a,
html[data-theme="pancake"] aside button,
html[data-theme="pancake"] aside span,
html[data-theme="pancake"] aside div {
  color: rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="pancake"] aside a:hover,
html[data-theme="pancake"] aside button:hover,
html[data-theme="pancake"] aside .router-link-active,
html[data-theme="pancake"] aside [aria-current="page"],
html[data-theme="pancake"] aside .hinata-sidebar-nav-btn.active {
  background: rgba(30, 55, 102, 0.42) !important;
  color: #ffffff !important;
}

html[data-theme="pancake"] #hinata-brand-logo-expanded {
  filter: brightness(0) invert(1) !important;
}

html[data-theme="pancake"] #hinata-chat-theme-trigger {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #ffffff !important;
}

/* Dense white conversation column with the same calm separators as Pancake. */
html[data-theme="pancake"] .conversations-list-wrap {
  width: 400px !important;
  flex: 0 0 400px !important;
  background: #ffffff !important;
  border-right: 1px solid #dfe3e8 !important;
  box-shadow: none !important;
}

html[data-theme="pancake"] .conversations-list-wrap header,
html[data-theme="pancake"] .conversations-list-wrap > div,
html[data-theme="pancake"] .conversations-list {
  background: #ffffff !important;
}

html[data-theme="pancake"] .conversation {
  background: #ffffff !important;
  border-color: #e6e8eb !important;
  color: #2f3948 !important;
  min-height: 84px !important;
}

html[data-theme="pancake"] .conversation:hover {
  background: #edf6fd !important;
}

html[data-theme="pancake"] .conversation.active,
html[data-theme="pancake"] .conversation[aria-current="true"],
html[data-theme="pancake"] .conversation.bg-n-background {
  background: #b9dcf7 !important;
  border-color: #9ccced !important;
}

/* Fanpage controls become a compact blue command band. */
html[data-theme="pancake"] #hinata-pancake-bar {
  background: #5275b7 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

html[data-theme="pancake"] #hinata-pancake-bar button,
html[data-theme="pancake"] #hinata-pancake-bar span,
html[data-theme="pancake"] #hinata-pancake-bar a {
  color: rgba(255, 255, 255, 0.94) !important;
}

html[data-theme="pancake"] #hinata-pancake-bar .active,
html[data-theme="pancake"] #hinata-pancake-bar button:hover {
  background: rgba(27, 52, 98, 0.38) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Warm neutral chat canvas and crisp white header/composer. */
html[data-theme="pancake"] .conversation-details-wrap {
  background: #e9e3de !important;
  border-color: #d9dde3 !important;
}

html[data-theme="pancake"] .conversation-details-wrap > header,
html[data-theme="pancake"] .conversation-panel > header,
html[data-theme="pancake"] .header-actions-wrap {
  background: #ffffff !important;
  border-color: #dfe3e8 !important;
  backdrop-filter: none !important;
}

html[data-theme="pancake"] .conversation-panel,
html[data-theme="pancake"] .messages-container,
html[data-theme="pancake"] [class*="message-list"] {
  background: #e9e3de !important;
  backdrop-filter: none !important;
}

html[data-theme="pancake"] .reply-box,
html[data-theme="pancake"] [class*="reply-box"] {
  background: #ffffff !important;
  border-color: #dfe3e8 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Pancake keeps customer information visually separate from the message canvas. */
html[data-theme="pancake"] main section > div.bg-n-surface-2,
html[data-theme="pancake"] [class*="ConversationSidebar"] {
  background: #ffffff !important;
  border-left: 1px solid #dfe3e8 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Light dashboard variant using the same restrained cards and selection blue. */
html[data-theme="pancake"] #hinata-pancake-dashboard-view {
  background: #f4f6fa !important;
  color: #263142 !important;
}

html[data-theme="pancake"] .hinata-dashboard-header-card,
html[data-theme="pancake"] .hinata-page-card {
  background: #ffffff !important;
  border-color: #dfe3e8 !important;
  box-shadow: 0 1px 2px rgba(29, 45, 68, 0.05) !important;
}

html[data-theme="pancake"] .hinata-page-card:hover,
html[data-theme="pancake"] .hinata-page-card.selected {
  background: #eaf5fd !important;
  border-color: #78b9e6 !important;
  transform: none !important;
}

html[data-theme="pancake"] .hinata-dashboard-title,
html[data-theme="pancake"] .hinata-card-name {
  color: #263142 !important;
}

html[data-theme="pancake"] .hinata-dashboard-search-input {
  background: #f0f2f5 !important;
  border-color: #e0e4e9 !important;
  color: #263142 !important;
}

html[data-theme="pancake"] .hinata-dashboard-btn,
html[data-theme="pancake"] .hinata-dashboard-tab {
  background: #ffffff !important;
  border-color: #dfe3e8 !important;
  color: #4b5668 !important;
}

html[data-theme="pancake"] .hinata-dashboard-tab.active,
html[data-theme="pancake"] .hinata-btn-connect {
  background: #3f69b1 !important;
  border-color: #3f69b1 !important;
  color: #ffffff !important;
}

@media (max-width: 1024px) {
  html[data-theme="pancake"] .conversations-list-wrap {
    width: 360px !important;
    flex-basis: 360px !important;
  }
}

@media (max-width: 768px) {
  html[data-theme="pancake"] .conversations-list-wrap {
    width: 100% !important;
    flex-basis: auto !important;
  }
}

/* ── 10. Pancake-inspired operational layout (default product UI) ─────
   This is deliberately independent from the colour-theme picker. */
html.hinata-operations-ui .conversations-list-wrap {
  width: 360px !important;
  flex: 0 0 360px !important;
  background: #fff !important;
  border-right: 1px solid #dfe4ea !important;
  box-shadow: none !important;
}

html.hinata-operations-ui .conversations-list-wrap header,
html.hinata-operations-ui .conversations-list-wrap > div,
html.hinata-operations-ui .conversations-list {
  background: #fff !important;
}

html.hinata-operations-ui .conversation {
  min-height: 78px !important;
  background: #fff !important;
  border-color: #e7ebef !important;
}

html.hinata-operations-ui .conversation:hover {
  background: #eef7fd !important;
}

html.hinata-operations-ui .conversation.active,
html.hinata-operations-ui .conversation[aria-current="true"],
html.hinata-operations-ui .conversation.bg-n-background {
  background: #cfeafb !important;
  border-color: #a8d7f3 !important;
}

html.hinata-operations-ui #hinata-pancake-bar {
  padding: 8px 10px !important;
  gap: 7px !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid #dfe4ea !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.hinata-operations-ui .hinata-pancake-header-row {
  min-height: 34px !important;
}

html.hinata-operations-ui .hinata-pancake-chips-scroll {
  gap: 6px !important;
}

html.hinata-operations-ui .hinata-pancake-chip {
  min-height: 32px !important;
  border-radius: 7px !important;
  background: #f4f6f8 !important;
  border-color: #e0e5ea !important;
  color: #455266 !important;
  box-shadow: none !important;
}

html.hinata-operations-ui .hinata-pancake-chip.active {
  background: #d9edfb !important;
  border-color: #9ccff0 !important;
  color: #205f9c !important;
}

html.hinata-operations-ui .hinata-pancake-quick-filters {
  padding: 5px !important;
  border-radius: 7px !important;
  background: #f2f4f7 !important;
  border-color: #e0e5ea !important;
}

html.hinata-operations-ui .conversation-details-wrap {
  background: #e9e3de !important;
}

html.hinata-operations-ui .conversation-details-wrap > header,
html.hinata-operations-ui .conversation-panel > header,
html.hinata-operations-ui .header-actions-wrap,
html.hinata-operations-ui .reply-box,
html.hinata-operations-ui [class*="reply-box"] {
  background: #fff !important;
  border-color: #dfe4ea !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html.hinata-operations-ui .conversation-panel,
html.hinata-operations-ui .messages-container,
html.hinata-operations-ui [class*="message-list"] {
  background: #e9e3de !important;
}

html.hinata-operations-ui main section > div.bg-n-surface-2,
html.hinata-operations-ui [class*="ConversationSidebar"] {
  min-width: 320px !important;
  background: #fff !important;
  border-left: 1px solid #dfe4ea !important;
  box-shadow: none !important;
}

html.hinata-operations-ui #hinata-pancake-dashboard-view {
  background: #f4f6f9 !important;
  color: #263244 !important;
}

html.hinata-operations-ui .hinata-dashboard-header-card,
html.hinata-operations-ui .hinata-page-card {
  background: #fff !important;
  border-color: #dfe4ea !important;
  box-shadow: 0 1px 3px rgba(31, 47, 68, 0.06) !important;
}

html.hinata-operations-ui .hinata-dashboard-title,
html.hinata-operations-ui .hinata-card-name {
  color: #263244 !important;
}

html.hinata-operations-ui .hinata-dashboard-search-input {
  background: #f0f2f5 !important;
  border-color: #e0e5ea !important;
  color: #263244 !important;
}

html.hinata-operations-ui .hinata-dashboard-btn,
html.hinata-operations-ui .hinata-dashboard-tab {
  background: #fff !important;
  border-color: #dfe4ea !important;
  color: #4b586a !important;
}

html.hinata-operations-ui .hinata-dashboard-tab.active,
html.hinata-operations-ui .hinata-btn-connect {
  background: #3770bd !important;
  border-color: #3770bd !important;
  color: #fff !important;
}

html.hinata-operations-ui .hinata-page-card:hover,
html.hinata-operations-ui .hinata-page-card.selected {
  background: #eaf5fd !important;
  border-color: #82bde4 !important;
  transform: none !important;
}

/* Connection manager: light, information-dense and action-oriented. */
html.hinata-operations-ui .hinata-connect-modal-overlay {
  background: rgba(42, 55, 75, 0.56) !important;
}

html.hinata-operations-ui .hinata-connect-modal-container {
  width: 1150px !important;
  height: 720px !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(28, 42, 61, 0.3) !important;
}

html.hinata-operations-ui .hinata-connect-modal-header {
  min-height: 68px !important;
  padding: 18px 28px !important;
  background: #f6f8fb !important;
  border-color: #e3e7ec !important;
}

html.hinata-operations-ui .hinata-connect-modal-header h3,
html.hinata-operations-ui .hinata-connect-content-header h4 {
  color: #202938 !important;
}

html.hinata-operations-ui .hinata-connect-modal-close {
  color: #202938 !important;
}

html.hinata-operations-ui .hinata-connect-modal-sidebar {
  width: 250px !important;
  padding: 20px 14px !important;
  gap: 6px !important;
  background: #fff !important;
  border-color: #e3e7ec !important;
}

html.hinata-operations-ui .hinata-channel-tab-item {
  min-height: 52px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  color: #263244 !important;
  font-size: 15px !important;
}

html.hinata-operations-ui .hinata-channel-tab-item:hover {
  background: #f0f3f7 !important;
  color: #1c2635 !important;
}

html.hinata-operations-ui .hinata-channel-tab-item.active {
  background: #e9edf3 !important;
  color: #172033 !important;
}

html.hinata-operations-ui .hinata-connect-modal-content {
  padding: 18px 24px 12px !important;
  gap: 12px !important;
  background: #fff !important;
}

html.hinata-operations-ui .hinata-connect-search-shell {
  position: relative !important;
  width: 390px !important;
}

html.hinata-operations-ui .hinata-connect-search-input {
  width: 100% !important;
  height: 42px !important;
  padding: 8px 46px 8px 36px !important;
  border-radius: 8px !important;
  background: #f0f2f5 !important;
  border-color: #e1e5ea !important;
  color: #263244 !important;
  font-size: 14px !important;
}

html.hinata-operations-ui .hinata-connect-filter-btn {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #526074 !important;
  cursor: pointer !important;
}

html.hinata-operations-ui #hinata-connect-subtabs {
  min-height: 40px !important;
  color: #59677a !important;
  border-color: #e3e7ec !important;
}

html.hinata-operations-ui #hinata-connect-subtabs > span:first-child {
  height: 40px !important;
  color: #1264e8 !important;
  border-bottom: 2px solid #1264e8 !important;
}

html.hinata-operations-ui .hinata-connect-pages-grid {
  flex: 1 !important;
  max-height: none !important;
  gap: 12px 16px !important;
  align-content: start !important;
}

html.hinata-operations-ui .hinata-connect-page-card {
  min-height: 92px !important;
  padding: 12px !important;
  border-radius: 10px !important;
  background: #fff !important;
  border-color: #d9e0e7 !important;
  color: #202938 !important;
}

html.hinata-operations-ui .hinata-connect-page-card:hover,
html.hinata-operations-ui .hinata-connect-page-card.selected {
  background: #e1f1fc !important;
  border-color: #9fd0f1 !important;
}

html.hinata-operations-ui .hinata-connect-page-card.is-connected {
  background: #edf7f4 !important;
  border-color: #b8dfd3 !important;
}

html.hinata-operations-ui .hinata-connect-page-avatar {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  background: #dbe4ef !important;
  color: #45627e !important;
  font-size: 23px !important;
}

html.hinata-operations-ui .hinata-connect-page-name {
  color: #202938 !important;
  font-size: 14px !important;
}

html.hinata-operations-ui .hinata-connect-page-identifier {
  color: #68778b !important;
  font-size: 13px !important;
}

html.hinata-operations-ui .hinata-badge-already-connected {
  background: #d9f2ea !important;
  color: #16815f !important;
  border-color: #b8dfd3 !important;
}

html.hinata-operations-ui .hinata-connect-modal-footer {
  min-height: 62px !important;
  padding: 10px 28px 14px 274px !important;
  background: #fff !important;
  border-color: #e3e7ec !important;
}

html.hinata-operations-ui .hinata-btn-select-all {
  color: #59677a !important;
}

html.hinata-operations-ui .hinata-kbd-shortcut {
  background: #f3f5f7 !important;
  color: #526074 !important;
  border: 1px solid #d9e0e7 !important;
}

html.hinata-operations-ui .hinata-btn-activate {
  background: #1988f4 !important;
  border-radius: 8px !important;
  color: #fff !important;
}

html.hinata-operations-ui #hinata-manual-token-form {
  background: #f7f9fb !important;
  border-color: #b8d9f3 !important;
  color: #263244 !important;
}

@media (max-width: 1024px) {
  html.hinata-operations-ui .conversations-list-wrap {
    width: 320px !important;
    flex-basis: 320px !important;
  }

  html.hinata-operations-ui .hinata-connect-modal-sidebar {
    width: 210px !important;
  }

  html.hinata-operations-ui .hinata-connect-modal-footer {
    padding-left: 234px !important;
  }
}

@media (max-width: 768px) {
  html.hinata-operations-ui .conversations-list-wrap {
    width: 100% !important;
    flex-basis: auto !important;
  }

  html.hinata-operations-ui .hinata-connect-modal-sidebar {
    width: 100% !important;
    max-height: 132px !important;
  }

  html.hinata-operations-ui .hinata-connect-modal-footer {
    padding-left: 14px !important;
  }
}

/* ── 11. Anime keeps the Hinata operations UI as glass, never a white repaint ──
   The operational layout rules above intentionally use solid light surfaces for
   the default product view. They must yield to the four ecosystem anime themes,
   otherwise they cover the SSOT wallpaper mounted on body::before. */
html.hinata-operations-ui[data-theme="naruto"] .conversations-list-wrap,
html.hinata-operations-ui[data-theme="onepiece"] .conversations-list-wrap,
html.hinata-operations-ui[data-theme="kimetsu"] .conversations-list-wrap,
html.hinata-operations-ui[data-theme="aot"] .conversations-list-wrap {
  background: rgba(var(--surface-1) / 0.58) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
}

html.hinata-operations-ui[data-theme="naruto"] .conversations-list-wrap header,
html.hinata-operations-ui[data-theme="naruto"] .conversations-list-wrap > div,
html.hinata-operations-ui[data-theme="naruto"] .conversations-list,
html.hinata-operations-ui[data-theme="onepiece"] .conversations-list-wrap header,
html.hinata-operations-ui[data-theme="onepiece"] .conversations-list-wrap > div,
html.hinata-operations-ui[data-theme="onepiece"] .conversations-list,
html.hinata-operations-ui[data-theme="kimetsu"] .conversations-list-wrap header,
html.hinata-operations-ui[data-theme="kimetsu"] .conversations-list-wrap > div,
html.hinata-operations-ui[data-theme="kimetsu"] .conversations-list,
html.hinata-operations-ui[data-theme="aot"] .conversations-list-wrap header,
html.hinata-operations-ui[data-theme="aot"] .conversations-list-wrap > div,
html.hinata-operations-ui[data-theme="aot"] .conversations-list {
  background-color: transparent !important;
}

html.hinata-operations-ui[data-theme="naruto"] #hinata-pancake-bar,
html.hinata-operations-ui[data-theme="onepiece"] #hinata-pancake-bar,
html.hinata-operations-ui[data-theme="kimetsu"] #hinata-pancake-bar,
html.hinata-operations-ui[data-theme="aot"] #hinata-pancake-bar {
  background: rgba(var(--surface-1) / 0.65) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--text-color) !important;
}

html.hinata-operations-ui[data-theme="naruto"] .conversation-details-wrap,
html.hinata-operations-ui[data-theme="naruto"] .conversation-panel,
html.hinata-operations-ui[data-theme="naruto"] .messages-container,
html.hinata-operations-ui[data-theme="naruto"] [class*="message-list"],
html.hinata-operations-ui[data-theme="onepiece"] .conversation-details-wrap,
html.hinata-operations-ui[data-theme="onepiece"] .conversation-panel,
html.hinata-operations-ui[data-theme="onepiece"] .messages-container,
html.hinata-operations-ui[data-theme="onepiece"] [class*="message-list"],
html.hinata-operations-ui[data-theme="kimetsu"] .conversation-details-wrap,
html.hinata-operations-ui[data-theme="kimetsu"] .conversation-panel,
html.hinata-operations-ui[data-theme="kimetsu"] .messages-container,
html.hinata-operations-ui[data-theme="kimetsu"] [class*="message-list"],
html.hinata-operations-ui[data-theme="aot"] .conversation-details-wrap,
html.hinata-operations-ui[data-theme="aot"] .conversation-panel,
html.hinata-operations-ui[data-theme="aot"] .messages-container,
html.hinata-operations-ui[data-theme="aot"] [class*="message-list"] {
  background: rgba(var(--surface-1) / 0.52) !important;
  color: var(--text-color) !important;
}

html.hinata-operations-ui[data-theme="naruto"] #hinata-pancake-dashboard-view,
html.hinata-operations-ui[data-theme="onepiece"] #hinata-pancake-dashboard-view,
html.hinata-operations-ui[data-theme="kimetsu"] #hinata-pancake-dashboard-view,
html.hinata-operations-ui[data-theme="aot"] #hinata-pancake-dashboard-view {
  background: rgba(var(--surface-1) / 0.38) !important;
  color: var(--text-color) !important;
  backdrop-filter: none !important;
}

html.hinata-operations-ui[data-theme="naruto"] .hinata-dashboard-header-card,
html.hinata-operations-ui[data-theme="naruto"] .hinata-page-card,
html.hinata-operations-ui[data-theme="onepiece"] .hinata-dashboard-header-card,
html.hinata-operations-ui[data-theme="onepiece"] .hinata-page-card,
html.hinata-operations-ui[data-theme="kimetsu"] .hinata-dashboard-header-card,
html.hinata-operations-ui[data-theme="kimetsu"] .hinata-page-card,
html.hinata-operations-ui[data-theme="aot"] .hinata-dashboard-header-card,
html.hinata-operations-ui[data-theme="aot"] .hinata-page-card {
  background: rgba(var(--surface-2) / 0.52) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important;
}

/* Direct cutover guard: the dashboard is dynamically mounted outside some
   operational wrappers, so it must still reveal the body wallpaper. */
html[data-theme="naruto"],
html[data-theme="onepiece"],
html[data-theme="kimetsu"],
html[data-theme="aot"] {
  background-color: rgb(var(--background-color)) !important;
}

html[data-theme="naruto"] body,
html[data-theme="onepiece"] body,
html[data-theme="kimetsu"] body,
html[data-theme="aot"] body {
  background-color: transparent !important;
}

html[data-theme="naruto"] #hinata-pancake-dashboard-view,
html[data-theme="onepiece"] #hinata-pancake-dashboard-view,
html[data-theme="kimetsu"] #hinata-pancake-dashboard-view,
html[data-theme="aot"] #hinata-pancake-dashboard-view {
  background: rgba(var(--surface-1) / 0.38) !important;
  color: var(--text-color) !important;
  backdrop-filter: none !important;
}

html[data-theme="naruto"] .hinata-dashboard-header-card,
html[data-theme="naruto"] .hinata-page-card,
html[data-theme="onepiece"] .hinata-dashboard-header-card,
html[data-theme="onepiece"] .hinata-page-card,
html[data-theme="kimetsu"] .hinata-dashboard-header-card,
html[data-theme="kimetsu"] .hinata-page-card,
html[data-theme="aot"] .hinata-dashboard-header-card,
html[data-theme="aot"] .hinata-page-card {
  background: rgba(var(--surface-2) / 0.52) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* Chatwoot's root creates a stacking context. Put the wallpaper on that root
   (not only body::before) so it remains visible behind the Vue operational UI. */
html[data-theme="naruto"] #app {
}

html[data-theme="onepiece"] #app {
}

html[data-theme="kimetsu"] #app {
}

html[data-theme="aot"] #app {
}

html[data-theme="naruto"] #app > div,
html[data-theme="naruto"] .conversation-details-wrap,
html[data-theme="naruto"] .conversation-panel,
html[data-theme="naruto"] .messages-container,
html[data-theme="naruto"] #hinata-pancake-dashboard-view,
html[data-theme="onepiece"] #app > div,
html[data-theme="onepiece"] .conversation-details-wrap,
html[data-theme="onepiece"] .conversation-panel,
html[data-theme="onepiece"] .messages-container,
html[data-theme="onepiece"] #hinata-pancake-dashboard-view,
html[data-theme="kimetsu"] #app > div,
html[data-theme="kimetsu"] .conversation-details-wrap,
html[data-theme="kimetsu"] .conversation-panel,
html[data-theme="kimetsu"] .messages-container,
html[data-theme="kimetsu"] #hinata-pancake-dashboard-view,
html[data-theme="aot"] #app > div,
html[data-theme="aot"] .conversation-details-wrap,
html[data-theme="aot"] .conversation-panel,
html[data-theme="aot"] .messages-container,
html[data-theme="aot"] #hinata-pancake-dashboard-view {
  background-color: transparent !important;
}

/* Final ownership guard: Hinata's class survives Chatwoot restoring its own
   data-theme after the Vue application has mounted. */
html.hinata-theme-naruto {
  --background-color: 28 18 12;
  --surface-1: 36 24 16;
  --surface-2: 45 28 20;
  --text-color: #F9FAFB;
}

html.hinata-theme-onepiece {
  --background-color: 8 18 30;
  --surface-1: 12 24 40;
  --surface-2: 15 32 52;
  --text-color: #F9FAFB;
}

html.hinata-theme-kimetsu {
  --background-color: 22 16 32;
  --surface-1: 30 22 44;
  --surface-2: 38 28 56;
  --text-color: #F9FAFB;
}

html.hinata-theme-aot {
  --background-color: 18 20 18;
  --surface-1: 24 28 24;
  --surface-2: 32 38 32;
  --text-color: #F9FAFB;
}

html.hinata-theme-naruto #app {
}

html.hinata-theme-onepiece #app {
}

html.hinata-theme-kimetsu #app {
}

html.hinata-theme-aot #app {
}

html.hinata-theme-naruto #app > div,
html.hinata-theme-naruto .conversation-details-wrap,
html.hinata-theme-naruto .conversation-panel,
html.hinata-theme-naruto .messages-container,
html.hinata-theme-naruto #hinata-pancake-dashboard-view,
html.hinata-theme-onepiece #app > div,
html.hinata-theme-onepiece .conversation-details-wrap,
html.hinata-theme-onepiece .conversation-panel,
html.hinata-theme-onepiece .messages-container,
html.hinata-theme-onepiece #hinata-pancake-dashboard-view,
html.hinata-theme-kimetsu #app > div,
html.hinata-theme-kimetsu .conversation-details-wrap,
html.hinata-theme-kimetsu .conversation-panel,
html.hinata-theme-kimetsu .messages-container,
html.hinata-theme-kimetsu #hinata-pancake-dashboard-view,
html.hinata-theme-aot #app > div,
html.hinata-theme-aot .conversation-details-wrap,
html.hinata-theme-aot .conversation-panel,
html.hinata-theme-aot .messages-container,
html.hinata-theme-aot #hinata-pancake-dashboard-view {
  background-color: transparent !important;
  color: var(--text-color) !important;
}

html.hinata-theme-naruto .hinata-dashboard-header-card,
html.hinata-theme-naruto .hinata-page-card,
html.hinata-theme-onepiece .hinata-dashboard-header-card,
html.hinata-theme-onepiece .hinata-page-card,
html.hinata-theme-kimetsu .hinata-dashboard-header-card,
html.hinata-theme-kimetsu .hinata-page-card,
html.hinata-theme-aot .hinata-dashboard-header-card,
html.hinata-theme-aot .hinata-page-card {
  background: rgba(var(--surface-2) / 0.52) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--text-color) !important;
}

/* The dashboard covers Chatwoot's main canvas. Paint the canonical artwork on
   that visible surface so the operational layout cannot mask the wallpaper. */
:is(.hinata-theme-naruto, [data-theme="naruto"]) :is(#hinata-pancake-dashboard-view, .hinata-page-dashboard, .hinata-chat-shell__dashboard-view) {
}

:is(.hinata-theme-onepiece, [data-theme="onepiece"]) :is(#hinata-pancake-dashboard-view, .hinata-page-dashboard, .hinata-chat-shell__dashboard-view) {
}

:is(.hinata-theme-kimetsu, [data-theme="kimetsu"]) :is(#hinata-pancake-dashboard-view, .hinata-page-dashboard, .hinata-chat-shell__dashboard-view) {
}

:is(.hinata-theme-aot, [data-theme="aot"]) :is(#hinata-pancake-dashboard-view, .hinata-page-dashboard, .hinata-chat-shell__dashboard-view) {
}

/* Keep page information readable while the artwork remains visible around it. */
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .hinata-dashboard-header-card,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .hinata-page-card,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .hinata-page-dashboard__card {
  background: rgba(var(--surface-2) / 0.78) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}

:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .hinata-dashboard-title,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .hinata-card-name,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .hinata-card-alias-link {
  color: #f9fafb !important;
}

/* Shared UI's anime contract keeps wallpaper sharp (--glass-blur: 0px).
   Chatwoot used to stack a tinted, blurred surface on every chat layer,
   which made the artwork look like an opaque brown/blue block. */
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) {
  --glass-blur: 0px !important;
}

/* Conversation list wrap (left column): light alpha tint */
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .conversations-list-wrap,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [data-testid="hinata-conversation-list"],
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [data-testid="hinata-conversation-toolbar"] {
  background: rgba(var(--surface-1) / 0.32) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Transparent message timelines / message containers */
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [class*="conversations-list"]:not(.conversations-list-wrap),
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .conversation-panel,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .messages-container,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [class*="message-list"],
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [data-testid="hinata-message-timeline"] {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Lightweight alpha for conversation details & Hinata workspace containers */
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .conversation-details-wrap,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [data-testid="hinata-conversation-workspace"],
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [data-testid="hinata-workspace-empty"],
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .hinata-chat-shell__workspace {
  background: var(--chat-workspace-bg, rgba(var(--surface-1) / 0.16)) !important;
  background-color: var(--chat-workspace-bg, rgba(var(--surface-1) / 0.16)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Header areas: high contrast background for crisp legibility */
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .conversation-details-wrap > header,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .conversation-panel > header,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .header-actions-wrap,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [data-testid="hinata-workspace-header"],
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .conversation-details-wrap > div:has(.header-actions-wrap) {
  background: var(--chat-header-bg, rgba(var(--surface-1) / 0.78)) !important;
  color: #f9fafb !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .conversation-details-wrap > div:has(.header-actions-wrap) .text-n-slate-12,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [data-testid="hinata-workspace-header"] [data-testid="header-contact-name"] {
  color: #f9fafb !important;
}

:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .conversation-details-wrap > div:has(.header-actions-wrap) .text-n-slate-11,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [data-testid="hinata-workspace-header"] .text-n-slate-11 {
  color: #d1d5db !important;
}

/* Composer / Reply box areas: high contrast for typing comfortably */
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .reply-box,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [class*="reply-box"],
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [data-testid="hinata-message-composer"] {
  background: var(--chat-composer-bg, rgba(var(--surface-1) / 0.85)) !important;
  color: #f9fafb !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Date separator in timeline */
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [data-testid="timeline-date-group"] span {
  background: rgba(var(--surface-1) / 0.78) !important;
  color: #f9fafb !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Conversation cards: solid readable cards over wallpaper */
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .conversation,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [data-testid="hinata-conversation-card"] {
  background: rgba(var(--surface-1) / 0.58) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .conversation:hover,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .conversation.active,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .conversation[aria-current="true"],
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) .conversation.bg-n-background,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [data-testid="hinata-conversation-card"]:hover,
:is(.hinata-theme-naruto, .hinata-theme-onepiece, .hinata-theme-kimetsu, .hinata-theme-aot, [data-theme="naruto"], [data-theme="onepiece"], [data-theme="kimetsu"], [data-theme="aot"]) [data-testid="hinata-conversation-card"].active {
  background: rgba(var(--surface-1) / 0.82) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: #f9fafb !important;
}