/* ==================== SESSION 139b: PIXEL THEME — REWRITE to match reference images ==================== */
/* Applied when body has class 'pixel' (in addition to 'dark'/'light') */

/* ========== DESIGN TOKENS ========== */
body.pixel {
  --pix-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pix-radius-sm: 8px;
  --pix-radius-md: 12px;
  --pix-radius-lg: 16px;
  --pix-radius-xl: 24px;
  --pix-radius-pill: 9999px;
}

/* --- LIGHT MODE (from reference: chat_desktop.jpg) --- */
body.pixel.light {
  --pix-bg-app: #F0F2F5;
  --pix-bg-sidebar: #FFFFFF;
  --pix-bg-chat: #F0F2F5;
  --pix-bg-input: #F2F4F7;
  --pix-bg-hover: #F8FAFC;
  --pix-bg-active: #EFF6FF;
  --pix-bg-dropdown: #FFFFFF;
  --pix-bg-modal: #FFFFFF;
  --pix-bg-overlay: rgba(0,0,0,0.3);

  --pix-primary: #2563EB;
  --pix-primary-hover: #1D4ED8;
  --pix-primary-container: #DBEAFE;
  --pix-primary-text: #FFFFFF;

  --pix-text-main: #111827;
  --pix-text-secondary: #374151;
  --pix-text-muted: #6B7280;
  --pix-text-placeholder: #9CA3AF;

  --pix-border: #E5E7EB;
  --pix-border-focus: #2563EB;

  --pix-bubble-in: #FFFFFF;
  --pix-bubble-in-text: #111827;
  --pix-bubble-out: #E3EDFF;
  --pix-bubble-out-text: #001A41;

  --pix-online: #22C55E;
  --pix-badge-bg: #2563EB;
  --pix-badge-text: #FFFFFF;

  --pix-shadow: 0 1px 3px rgba(0,0,0,0.08);
  --pix-shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
}

/* --- DARK MODE (from reference: chat_dark.jpg) --- */
body.pixel.dark {
  --pix-bg-app: #1a1d21;
  --pix-bg-sidebar: #13161a;
  --pix-bg-chat: #1e2125;
  --pix-bg-input: #2c3036;
  --pix-bg-hover: #2a2e33;
  --pix-bg-active: #2d333b;
  --pix-bg-dropdown: #2c3036;
  --pix-bg-modal: #1e2125;
  --pix-bg-overlay: rgba(0,0,0,0.5);

  --pix-primary: #1f6feb;
  --pix-primary-hover: #388bfd;
  --pix-primary-container: #0d4f8b;
  --pix-primary-text: #ffffff;

  --pix-text-main: #ffffff;
  --pix-text-secondary: #8b949e;
  --pix-text-muted: #6e7681;
  --pix-text-placeholder: #6e7681;

  --pix-border: #30363d;
  --pix-border-focus: #58a6ff;

  --pix-bubble-in: #2d333b;
  --pix-bubble-in-text: #ffffff;
  --pix-bubble-out: #0d4f8b;
  --pix-bubble-out-text: #ffffff;

  --pix-online: #3fb950;
  --pix-badge-bg: #1f6feb;
  --pix-badge-text: #ffffff;

  --pix-shadow: 0 1px 3px rgba(0,0,0,0.3);
  --pix-shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
}

/* ========== GLOBAL ========== */
body.pixel {
  font-family: var(--pix-font) !important;
  background: var(--pix-bg-app) !important;
}

/* ========== APP SHELL ========== */
body.pixel .app {
  background: var(--pix-bg-app) !important;
  font-family: var(--pix-font) !important;
}

/* ========== SIDEBAR ========== */
body.pixel .sidebar {
  background: var(--pix-bg-sidebar) !important;
  border-right: 1px solid var(--pix-border) !important;
}

body.pixel .sb-head {
  background: var(--pix-bg-sidebar) !important;
}

/* Hamburger button */
body.pixel .hamburger,
body.pixel .icon-btn {
  border-radius: var(--pix-radius-sm) !important;
  transition: background 0.15s !important;
}
body.pixel .hamburger:hover,
body.pixel .icon-btn:hover {
  background: var(--pix-bg-hover) !important;
}

/* Search bar — pill shape */
body.pixel .sb-search-capsule {
  background: var(--pix-bg-input) !important;
  border-radius: var(--pix-radius-pill) !important;
  border: none !important;
  padding: 0 16px !important;
  height: 44px !important;
}
body.pixel .sb-search-capsule input {
  color: var(--pix-text-main) !important;
  font-family: var(--pix-font) !important;
  font-size: 14px !important;
}
body.pixel .sb-search-capsule input::placeholder {
  color: var(--pix-text-placeholder) !important;
}
body.pixel .sb-search-capsule img {
  opacity: 0.5;
}

/* Notification button */
body.pixel .notif-btn {
  border-radius: var(--pix-radius-sm) !important;
}

/* ========== DROPDOWN MENU (hamburger) ========== */
body.pixel .dropdown {
  background: var(--pix-bg-dropdown) !important;
  border: 1px solid var(--pix-border) !important;
  border-radius: var(--pix-radius-lg) !important;
  box-shadow: var(--pix-shadow-lg) !important;
  padding: 8px !important;
}
body.pixel .dropdown button {
  color: var(--pix-text-main) !important;
  border-radius: var(--pix-radius-sm) !important;
  padding: 10px 14px !important;
  font-family: var(--pix-font) !important;
  font-size: 14px !important;
  transition: background 0.12s !important;
}
body.pixel .dropdown button:hover {
  background: var(--pix-bg-hover) !important;
}
body.pixel .dropdown .dd-divider {
  border-color: var(--pix-border) !important;
  margin: 4px 0 !important;
}
body.pixel .mm-profile {
  border-radius: var(--pix-radius-sm) !important;
}
body.pixel .mm-name {
  color: var(--pix-text-main) !important;
}
body.pixel .mm-user {
  color: var(--pix-text-muted) !important;
}
body.pixel .mm-version {
  color: var(--pix-text-muted) !important;
}

/* ========== CONVERSATION LIST ========== */
body.pixel .conv-item {
  border-radius: var(--pix-radius-md) !important;
  margin: 2px 8px !important;
  padding: 10px 12px !important;
  border: none !important;
  transition: background 0.12s !important;
}
body.pixel .conv-item:hover {
  background: var(--pix-bg-hover) !important;
}
body.pixel .conv-item.active {
  background: var(--pix-bg-active) !important;
}
body.pixel .conv-name {
  color: var(--pix-text-main) !important;
  font-weight: 600 !important;
  font-family: var(--pix-font) !important;
  font-size: 15px !important;
}
body.pixel .conv-last {
  color: var(--pix-text-secondary) !important;
  font-size: 13px !important;
}
body.pixel .conv-time {
  color: var(--pix-text-muted) !important;
  font-size: 11px !important;
}
body.pixel .conv-unread {
  background: var(--pix-badge-bg) !important;
  color: var(--pix-badge-text) !important;
  border-radius: var(--pix-radius-pill) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
}

/* ========== CHAT MAIN AREA ========== */
body.pixel .chat-main {
  background: var(--pix-bg-chat) !important;
}

/* Chat header */
body.pixel .chat-header {
  background: var(--pix-bg-sidebar) !important;
  border-bottom: 1px solid var(--pix-border) !important;
  height: 64px !important;
  padding: 0 20px !important;
}
body.pixel .ch-info .name {
  color: var(--pix-text-main) !important;
  font-weight: 600 !important;
  font-family: var(--pix-font) !important;
}
body.pixel .ch-info .sub {
  color: var(--pix-text-muted) !important;
  font-size: 13px !important;
}
body.pixel .ch-info .sub.online-sub {
  color: var(--pix-online) !important;
}

/* ========== MESSAGE BUBBLES ========== */
body.pixel .msg-area {
  padding: 20px 28px !important;
  gap: 10px !important;
}

body.pixel .msg {
  font-family: var(--pix-font) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 16px !important;
  max-width: 75% !important;
}

/* Incoming: top-left rounded less */
body.pixel .msg.in {
  background: var(--pix-bubble-in) !important;
  color: var(--pix-bubble-in-text) !important;
  border-radius: 16px 16px 16px 4px !important;
  border: 1px solid var(--pix-border) !important;
}

/* Outgoing: top-right rounded less */
body.pixel .msg.out {
  background: var(--pix-bubble-out) !important;
  color: var(--pix-bubble-out-text) !important;
  border-radius: 16px 16px 4px 16px !important;
  border: none !important;
}

body.pixel .msg .meta {
  color: var(--pix-text-muted) !important;
  opacity: 0.7 !important;
  font-size: 11px !important;
}
body.pixel .msg.out .meta .tick {
  color: var(--pix-primary) !important;
}

/* File messages */
body.pixel .msg.file {
  background: var(--pix-bubble-in) !important;
  border: 1px solid var(--pix-border) !important;
  border-radius: 16px 16px 16px 4px !important;
}
body.pixel .msg.out.file {
  background: var(--pix-bubble-out) !important;
  border: none !important;
  border-radius: 16px 16px 4px 16px !important;
}

/* File image */
body.pixel .file-img {
  border-radius: var(--pix-radius-md) !important;
}

/* ========== COMPOSE DOCK (floating pill) ========== */
body.pixel .compose {
  margin: 0 20px 16px 20px !important;
  background: var(--pix-bg-input) !important;
  border: 1px solid var(--pix-border) !important;
  border-radius: var(--pix-radius-xl) !important;
  padding: 6px 8px 6px 16px !important;
  box-shadow: var(--pix-shadow) !important;
}
body.pixel .compose textarea {
  color: var(--pix-text-main) !important;
  font-family: var(--pix-font) !important;
  font-size: 15px !important;
  background: transparent !important;
}
body.pixel .compose textarea::placeholder {
  color: var(--pix-text-placeholder) !important;
}

/* Send button — circular */
body.pixel .send-btn {
  background: var(--pix-primary) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border: none !important;
  transition: all 0.15s !important;
}
body.pixel .send-btn:hover {
  background: var(--pix-primary-hover) !important;
  transform: scale(1.05) !important;
}
body.pixel .send-btn:active {
  transform: scale(0.95) !important;
}

/* Attach / emoji / mic buttons */
body.pixel .attach-btn,
body.pixel .emoji-btn,
body.pixel .mic-btn {
  border-radius: 50% !important;
  transition: background 0.12s !important;
}
body.pixel .attach-btn:hover,
body.pixel .emoji-btn:hover,
body.pixel .mic-btn:hover {
  background: var(--pix-bg-hover) !important;
}

/* ========== AVATARS ========== */
body.pixel .avatar {
  border-radius: 50% !important;
}
body.pixel .avatar img {
  border-radius: 50% !important;
}

/* ========== AUTH PAGE ========== */
body.pixel.auth-page {
  background: var(--pix-bg-app) !important;
  font-family: var(--pix-font) !important;
}
body.pixel .auth-container {
  background: var(--pix-bg-modal) !important;
  border: 1px solid var(--pix-border) !important;
  border-radius: var(--pix-radius-xl) !important;
  box-shadow: var(--pix-shadow-lg) !important;
  max-width: 440px !important;
}
body.pixel .auth-logo h1 {
  font-family: var(--pix-font) !important;
  color: var(--pix-text-main) !important;
}
body.pixel .auth-subtitle {
  color: var(--pix-text-muted) !important;
}
body.pixel .auth-input {
  background: var(--pix-bg-input) !important;
  border: 1px solid var(--pix-border) !important;
  border-radius: var(--pix-radius-md) !important;
  color: var(--pix-text-main) !important;
  font-family: var(--pix-font) !important;
  height: 50px !important;
}
body.pixel .auth-input:focus {
  border-color: var(--pix-border-focus) !important;
  outline: none !important;
}
body.pixel .auth-input::placeholder {
  color: var(--pix-text-placeholder) !important;
}
body.pixel .btn-primary {
  background: var(--pix-primary) !important;
  color: var(--pix-primary-text) !important;
  border: none !important;
  border-radius: var(--pix-radius-md) !important;
  height: 50px !important;
  font-weight: 600 !important;
  font-family: var(--pix-font) !important;
  font-size: 16px !important;
  transition: all 0.15s !important;
}
body.pixel .btn-primary:hover {
  background: var(--pix-primary-hover) !important;
  transform: translateY(-1px) !important;
}
body.pixel .auth-switch a {
  color: var(--pix-primary) !important;
}
body.pixel .theme-toggle {
  background: var(--pix-bg-dropdown) !important;
  border: 1px solid var(--pix-border) !important;
  border-radius: var(--pix-radius-pill) !important;
  color: var(--pix-text-main) !important;
}

/* ========== MODALS ========== */
body.pixel .modal {
  background: var(--pix-bg-modal) !important;
  border: 1px solid var(--pix-border) !important;
  border-radius: var(--pix-radius-xl) !important;
  box-shadow: var(--pix-shadow-lg) !important;
}
body.pixel .modal-head h3 {
  color: var(--pix-text-main) !important;
  font-family: var(--pix-font) !important;
}
body.pixel .modal-bg {
  background: var(--pix-bg-overlay) !important;
}

/* ========== INFO PANEL ========== */
body.pixel .info-panel {
  background: var(--pix-bg-modal) !important;
  border: 1px solid var(--pix-border) !important;
  border-radius: var(--pix-radius-xl) !important;
  box-shadow: var(--pix-shadow-lg) !important;
}
body.pixel .info-panel .ip-head h4,
body.pixel .info-panel .ip-hero h5 {
  color: var(--pix-text-main) !important;
}
body.pixel .info-panel .ip-hero p,
body.pixel .info-panel .im-sub,
body.pixel .info-panel .ip-sec-head h6 {
  color: var(--pix-text-muted) !important;
}
body.pixel .info-panel .im-name {
  color: var(--pix-text-main) !important;
}

/* ========== GALLERY PANEL ========== */
body.pixel .gallery-panel {
  background: var(--pix-bg-modal) !important;
  border: 1px solid var(--pix-border) !important;
  border-radius: var(--pix-radius-xl) !important;
  box-shadow: var(--pix-shadow-lg) !important;
}
body.pixel .gp-head h4 {
  color: var(--pix-text-main) !important;
}

/* ========== NOTIFICATION PANEL ========== */
body.pixel .notif-overlay {
  background: var(--pix-bg-dropdown) !important;
  border: 1px solid var(--pix-border) !important;
  border-radius: var(--pix-radius-lg) !important;
  box-shadow: var(--pix-shadow-lg) !important;
}
body.pixel .notif-panel-head h4 {
  color: var(--pix-text-main) !important;
}
body.pixel .notif-item .ni-title {
  color: var(--pix-text-main) !important;
}
body.pixel .notif-item .ni-desc {
  color: var(--pix-text-secondary) !important;
}
body.pixel .notif-item .ni-time {
  color: var(--pix-text-muted) !important;
}

/* ========== BOTTOM NAV ========== */
body.pixel .bottom-nav {
  background: var(--pix-bg-sidebar) !important;
  border-top: 1px solid var(--pix-border) !important;
}
body.pixel .bn-item span {
  color: var(--pix-text-muted) !important;
}
body.pixel .bn-item.active span {
  color: var(--pix-primary) !important;
}

/* ========== REPLY QUOTE ========== */
body.pixel .reply-quote {
  background: var(--pix-bg-input) !important;
  border-left: 3px solid var(--pix-primary) !important;
}

/* ========== MENTION TAG ========== */
body.pixel .mention-tag {
  color: var(--pix-primary) !important;
  background: var(--pix-primary-container) !important;
  border-radius: var(--pix-radius-sm) !important;
}

/* ========== BADGES ========== */
body.pixel .bot-badge {
  background: var(--pix-primary) !important;
  color: var(--pix-primary-text) !important;
  border-radius: var(--pix-radius-sm) !important;
}

/* ========== FILE LINK ========== */
body.pixel .file-link {
  color: var(--pix-primary) !important;
}

/* ========== SCROLLBAR ========== */
body.pixel ::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
body.pixel ::-webkit-scrollbar-track {
  background: transparent !important;
}
body.pixel ::-webkit-scrollbar-thumb {
  background: var(--pix-border) !important;
  border-radius: var(--pix-radius-pill) !important;
}
body.pixel ::-webkit-scrollbar-thumb:hover {
  background: var(--pix-text-muted) !important;
}

/* ========== EMPTY CHAT ========== */
body.pixel .empty-chat h2 {
  color: var(--pix-text-main) !important;
  font-family: var(--pix-font) !important;
}
body.pixel .empty-chat p {
  color: var(--pix-text-muted) !important;
}

/* ========== ONLINE DOT ========== */
body.pixel .online-dot::after,
body.pixel .avatar.online-dot::after {
  background: var(--pix-online) !important;
  border-color: var(--pix-bg-sidebar) !important;
}

/* ========== CHAT SEARCH BAR ========== */
body.pixel .chat-search-bar {
  background: var(--pix-bg-input) !important;
  border: 1px solid var(--pix-border) !important;
  border-radius: var(--pix-radius-pill) !important;
}
body.pixel .chat-search-bar input {
  color: var(--pix-text-main) !important;
}

/* ========== SCROLL FAB ========== */
body.pixel .scroll-fab {
  background: var(--pix-bg-dropdown) !important;
  border: 1px solid var(--pix-border) !important;
  box-shadow: var(--pix-shadow) !important;
}

/* ========== LOAD MORE INDICATOR ========== */
body.pixel .load-more-indicator {
  background: var(--pix-bg-input) !important;
  border: 1px solid var(--pix-border) !important;
  color: var(--pix-text-muted) !important;
}

/* ========== ADD MEMBER MODAL ========== */
body.pixel .mention-dropdown {
  background: var(--pix-bg-dropdown) !important;
  border: 1px solid var(--pix-border) !important;
  border-radius: var(--pix-radius-lg) !important;
}
body.pixel .mention-item .mi-name {
  color: var(--pix-text-main) !important;
}
body.pixel .mention-item .mi-sub {
  color: var(--pix-text-muted) !important;
}