/* ==========================================================
   Chat UI v2 — Modern Redesign
   Targets: Desktop / Tablet / Mobile
   ========================================================== */

/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */
:root {
  --cv2-surface:      #FFFFFF;
  --cv2-surface-2:    #F7F9FC;
  --cv2-surface-3:    #EEF2F8;
  --cv2-border:       rgba(15, 23, 42, 0.07);
  --cv2-border-md:    rgba(15, 23, 42, 0.12);

  --cv2-text-1:       #0F172A;
  --cv2-text-2:       #475569;
  --cv2-text-3:       #64748B;  /* was #94A3B8 — darkened for WCAG AA (4.6:1 on white) */

  --cv2-blue:         #3B6FBF;
  --cv2-blue-bg:      #EFF4FF;
  --cv2-blue-mid:     #DBEAFE;

  --cv2-green:        #065F46;  /* was #0F9B6B — darkened for contrast on light green bg (7.3:1) */
  --cv2-green-bg:     #ECFDF5;

  --cv2-amber:        #B45309;
  --cv2-amber-bg:     #FFFBEB;

  --cv2-red:          #B91C1C;  /* was #DC2626 — darkened for contrast on light red bg (6.1:1) */
  --cv2-red-bg:       #FEF2F2;

  --cv2-facebook:     #1877F2;  /* original brand color — used for avatar rings */
  --cv2-line:         #06C755;  /* original brand color — used for avatar rings */

  --cv2-shadow-xs:    0 1px 2px rgba(15,23,42,0.05);
  --cv2-shadow-sm:    0 1px 4px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --cv2-shadow-md:    0 4px 16px rgba(15,23,42,0.09), 0 1px 4px rgba(15,23,42,0.05);
  --cv2-shadow-lg:    0 12px 32px rgba(15,23,42,0.12), 0 4px 8px rgba(15,23,42,0.06);

  --cv2-r-xs:   4px;
  --cv2-r-sm:   8px;
  --cv2-r:      12px;
  --cv2-r-lg:   16px;
  --cv2-r-xl:   22px;
  --cv2-r-full: 999px;

  --cv2-ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --cv2-t:      160ms;
  --cv2-t-md:   260ms;
}

/* ==========================================================
   2. APP SHELL
   ========================================================== */
.chat-app {
  border-radius: 0;
  box-shadow: none;
  background: var(--cv2-surface-2);
}

/* Neutralise global responsive padding from style.css that bleeds into chat layout */
.chat-app-wrapper .container-fluid {
  padding: 0 !important;
}

/* ==========================================================
   3. SIDEBAR — LEFT PANEL
   ========================================================== */
.chat-sidebar {
  background: var(--cv2-surface);
  border-right: 1px solid var(--cv2-border);
  display: flex;
  flex-direction: column;
}

/* --- 3a. Header --- */
.sidebar-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--cv2-border);
  background: var(--cv2-surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-header-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cv2-text-1);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.sidebar-title i {
  color: var(--cv2-blue);
  font-size: 14px;
}

.user-count-badge {
  background: var(--cv2-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--cv2-r-full);
  min-width: 22px;
  text-align: center;
  line-height: 18px;
}

/* --- 3b. Search --- */
.search-container {
  padding: 10px 12px;
  background: var(--cv2-surface);
  flex-shrink: 0;
}

.search-input-wrapper {
  background: var(--cv2-surface-2);
  border: 1.5px solid var(--cv2-border);
  border-radius: var(--cv2-r-full);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  transition: border-color var(--cv2-t) var(--cv2-ease),
              box-shadow var(--cv2-t) var(--cv2-ease),
              background var(--cv2-t) var(--cv2-ease);
}

.search-input-wrapper:focus-within {
  border-color: var(--cv2-blue);
  background: var(--cv2-surface);
  box-shadow: 0 0 0 3px rgba(59, 111, 191, 0.12);
}

.search-icon {
  color: var(--cv2-text-3);
  font-size: 12px;
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--cv2-text-1);
  padding: 8px 0;
  outline: none;
}

.search-input::placeholder {
  color: var(--cv2-text-3);
}

.btn-filter {
  background: none;
  border: none;
  color: var(--cv2-text-3);
  padding: 4px;
  border-radius: var(--cv2-r-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--cv2-t), background var(--cv2-t);
}

.btn-filter:hover { color: var(--cv2-blue); background: var(--cv2-blue-bg); }

/* --- 3c. Inbox Filter Chips (horizontal scroll) --- */
.inbox-summary {
  display: flex;
  gap: 5px;
  padding: 0 12px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  background: var(--cv2-surface);
}

.inbox-summary::-webkit-scrollbar { display: none; }

.inbox-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--cv2-r-full);
  border: 1.5px solid var(--cv2-border-md);
  background: var(--cv2-surface);
  color: var(--cv2-text-2);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--cv2-t) var(--cv2-ease);
  line-height: 1;
}

.inbox-chip:hover {
  border-color: var(--cv2-blue);
  color: var(--cv2-blue);
  background: var(--cv2-blue-bg);
}

.inbox-chip.is-active {
  background: var(--cv2-blue);
  border-color: var(--cv2-blue);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(59, 111, 191, 0.3);
}

.inbox-chip__count {
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,0,0,0.08);
  padding: 1px 5px;
  border-radius: var(--cv2-r-full);
  min-width: 18px;
  text-align: center;
}

.inbox-chip.is-active .inbox-chip__count {
  background: rgba(255,255,255,0.25);
}

/* --- 3d. Queue Workload Strip — compact horizontal stats --- */
.queue-workload-strip {
  display: flex;
  gap: 6px;
  padding: 0 12px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  background: var(--cv2-surface);
}

.queue-workload-strip::-webkit-scrollbar { display: none; }

.queue-workload-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--cv2-r-full);
  border: 1.5px solid var(--cv2-border-md);
  background: var(--cv2-surface);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--cv2-t) var(--cv2-ease);
  text-align: left;
  min-width: 0;
  white-space: nowrap;
}

.queue-workload-card:hover {
  border-color: var(--cv2-blue);
  background: var(--cv2-blue-bg);
  box-shadow: var(--cv2-shadow-xs);
}

.queue-workload-card__label {
  font-size: 11.5px;
  color: var(--cv2-text-2);
  font-weight: 500;
  order: 1;
}

.queue-workload-card__value {
  font-size: 13px;
  font-weight: 800;
  color: var(--cv2-text-1);
  order: 0;
  background: var(--cv2-surface-2);
  padding: 1px 7px;
  border-radius: var(--cv2-r-full);
  min-width: 22px;
  text-align: center;
  line-height: 1.6;
}

/* Highlight breached SLA */
.queue-workload-card[data-workload-value="breached"] .queue-workload-card__value {
  background: var(--cv2-red-bg);
  color: var(--cv2-red);
}
.queue-workload-card[data-workload-value="unassigned"] .queue-workload-card__value {
  background: var(--cv2-amber-bg);
  color: var(--cv2-amber);
}

/* --- 3e. Desktop Filter Panel (tabs inside sidebar) --- */
.filter-panel {
  background: var(--cv2-surface);
  border-bottom: 1px solid var(--cv2-border);
  padding: 0 12px 10px;
  flex-shrink: 0;
}

.filter-panel .d-flex.flex-wrap.gap-1 {
  gap: 4px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.filter-panel .d-flex.flex-wrap.gap-1::-webkit-scrollbar { display: none; }

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: var(--cv2-r-full);
  border: 1.5px solid var(--cv2-border-md);
  background: var(--cv2-surface);
  color: var(--cv2-text-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--cv2-t) var(--cv2-ease);
}

.filter-btn:hover {
  border-color: var(--cv2-blue);
  color: var(--cv2-blue);
  background: var(--cv2-blue-bg);
}

.filter-btn.active {
  background: var(--cv2-blue);
  border-color: var(--cv2-blue);
  color: #fff;
  font-weight: 600;
}

/* --- 3f. Bulk Toolbar --- */
.bulk-toolbar {
  padding: 8px 12px;
  background: var(--cv2-surface);
  border-bottom: 1px solid var(--cv2-border);
  flex-shrink: 0;
}

.bulk-toolbar__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--cv2-text-2);
}

.bulk-toolbar__actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.bulk-toolbar .btn {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--cv2-r-full);
  font-weight: 500;
}

/* --- 3g-pre. Queue Filter Buttons (tag/queue filter pills) --- */
.queue-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 12px 10px;
}

.queue-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
  padding: 5px 10px;
  border: 1.5px solid var(--cv2-border-md);
  border-radius: var(--cv2-r-full);
  background: var(--cv2-surface);
  color: var(--cv2-text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--cv2-t) var(--cv2-ease);
  white-space: nowrap;
}

.queue-filter-btn:hover {
  border-color: var(--cv2-blue);
  color: var(--cv2-blue);
  background: var(--cv2-blue-bg);
}

.queue-filter-btn.active {
  border-color: var(--cv2-blue);
  background: var(--cv2-blue);
  color: #fff;
  font-weight: 600;
}

.queue-filter-btn__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-filter-btn__meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--cv2-r-full);
  background: rgba(15, 23, 42, 0.1);
  color: inherit;
  font-size: 10.5px;
  font-weight: 700;
}

/* User conversation meta badges under user-item */
.user-conversation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* --- 3g. Contact List Items --- */
.user-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cv2-surface-2);
}

.user-list::-webkit-scrollbar { width: 4px; }
.user-list::-webkit-scrollbar-track { background: transparent; }
.user-list::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.12); border-radius: 2px; }

.user-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--cv2-border);
  background: var(--cv2-surface);
  cursor: pointer;
  transition: background var(--cv2-t) var(--cv2-ease);
  border-left: 3px solid transparent;
  position: relative;
  margin-bottom: 1px;
}

.user-item:hover { background: var(--cv2-surface-2); }

.user-item.active {
  background: var(--cv2-blue-bg) !important;
  border-left-color: var(--cv2-blue);
}

.user-item.unread {
  background: var(--cv2-surface);
  border-left-color: #3B82F6;
}

.user-item.unread .user-name {
  font-weight: 700;
}

/* Avatar */
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--cv2-r-full);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--cv2-blue);
  border: 2px solid transparent;
  box-shadow: var(--cv2-shadow-xs);
  position: relative;
}

.user-avatar.platform-facebook { border-color: var(--cv2-facebook); }
.user-avatar.platform-line     { border-color: var(--cv2-line); }

/* Item content */
.user-item-content {
  flex: 1;
  min-width: 0;
}

.user-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}

.user-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cv2-text-1);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.user-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.user-time {
  font-size: 11px;
  color: var(--cv2-text-3);
  white-space: nowrap;
}

.user-last-message {
  font-size: 12.5px;
  color: var(--cv2-text-2);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 4px;
}

.user-item.unread .user-last-message {
  color: var(--cv2-text-1);
  font-weight: 500;
}

/* Badges on contact items */
.user-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

.badge-sm {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--cv2-r-xs);
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.badge-ai {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.badge-sm.badge-conversation {
  background: var(--cv2-surface-2);
  color: var(--cv2-text-2);
  border: 1px solid var(--cv2-border);
}

.badge-sm.badge-conversation.is-success {
  background: var(--cv2-green-bg);
  color: var(--cv2-green);
  border-color: transparent;
}

.badge-sm.badge-conversation.is-warning {
  background: var(--cv2-amber-bg);
  color: var(--cv2-amber);
  border-color: transparent;
}

.badge-sm.badge-conversation.is-danger {
  background: var(--cv2-red-bg);
  color: var(--cv2-red);
  border-color: transparent;
}

.badge-sm.badge-conversation.is-muted {
  background: var(--cv2-surface-3);
  color: var(--cv2-text-3);
  border-color: transparent;
}

/* Platform badge */
.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--cv2-r-xs);
}

.platform-badge.is-facebook {
  background: #E7EFFD;
  color: #0D47A1;   /* dark blue — 7.8:1 on light blue bg */
}

.platform-badge.is-line {
  background: #E6F9ED;
  color: #065F46;   /* dark green — 7.3:1 on light green bg */
}

/* Unread count dot */
.unread-count {
  background: var(--cv2-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: var(--cv2-r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
}

/* Checkbox select */
.user-select-control {
  display: flex;
  align-items: center;
  padding-top: 2px;
  flex-shrink: 0;
}

.user-select-control .form-check-input {
  width: 15px;
  height: 15px;
  cursor: pointer;
  border-radius: var(--cv2-r-xs);
  border: 1.5px solid var(--cv2-border-md);
  flex-shrink: 0;
}

/* SLA breach highlight on item */
.user-item.sla-breached {
  border-left-color: var(--cv2-red);
}

.user-item.sla-breached::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cv2-red);
  animation: cv2-pulse 2s infinite;
}

@keyframes cv2-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.3); }
}

/* ==========================================================
   4. CHAT MAIN — CENTER PANEL
   ========================================================== */
.chat-main {
  background: var(--cv2-surface-2);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* --- 4a. Chat Header v2 (ch2-*) --- */

/* Container */
.ch2-header {
  background: var(--cv2-surface);
  border-bottom: 1px solid var(--cv2-border);
  flex-shrink: 0;
  position: relative;
}

/* Row 1: Primary bar */
.ch2-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  min-height: 52px;
}

/* Back / sidebar toggle */
.ch2-back {
  width: 34px;
  height: 34px;
  border-radius: var(--cv2-r-sm);
  border: none;
  background: transparent;
  color: var(--cv2-text-2);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 15px;
  transition: background var(--cv2-t);
}
.ch2-back:hover { background: var(--cv2-surface-3); }

/* User block */
.ch2-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* Avatar */
.ch2-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--cv2-r-full);
  background: var(--cv2-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid transparent;
  overflow: hidden;
}
.ch2-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ch2-avatar.platform-facebook { border-color: var(--cv2-facebook); }
.ch2-avatar.platform-line     { border-color: var(--cv2-line); }
.ch2-avatar.purchased         { border-color: var(--cv2-green); }

/* Info block */
.ch2-info {
  flex: 1;
  min-width: 0;
}

.ch2-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ch2-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--cv2-text-1);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Platform badge — support both .ch2-platform and .platform-badge (JS sets className) */
.ch2-platform,
.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: var(--cv2-r-full);
  background: var(--cv2-surface-3);
  color: var(--cv2-text-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.ch2-platform.is-facebook, .platform-badge.is-facebook { background: #e7f3ff; color: #0D47A1; }  /* dark blue 7.8:1 on light blue bg */
.ch2-platform.is-line,     .platform-badge.is-line     { background: #e8ffe8; color: #065F46; }  /* dark green 7.3:1 on light green bg */

.ch2-subtitle {
  font-size: 11.5px;
  color: var(--cv2-text-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ch2-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.ch2-meta-item {
  font-size: 11px;
  white-space: nowrap;
  color: var(--cv2-text-3);
}

/* Action buttons in bar */
.ch2-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ch2-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--cv2-r-sm);
  border: none;
  background: transparent;
  color: var(--cv2-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background var(--cv2-t), color var(--cv2-t);
}
.ch2-btn:hover {
  background: var(--cv2-surface-3);
  color: var(--cv2-blue);
}
.ch2-btn.disabled {
  opacity: .4;
  pointer-events: none;
}
.ch2-btn.is-active {
  background: var(--cv2-blue-bg);
  color: var(--cv2-blue);
}

/* Accent style for Assign (primary action) */
.ch2-btn--accent { color: var(--cv2-blue); }
.ch2-btn--accent:hover { background: var(--cv2-blue-bg); }

/* More button — always visible */
.ch2-btn--more {
  color: var(--cv2-text-3);
  border-radius: var(--cv2-r-full);
}
.ch2-btn--more:hover {
  background: var(--cv2-surface-3);
  color: var(--cv2-text-1);
}

/* Row 2: Context strip */
.ch2-context {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 14px 8px;
}

/* Conversation chips */
.conversation-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--cv2-r-full);
  border: 1px solid var(--cv2-border-md);
  background: var(--cv2-surface-2);
  color: var(--cv2-text-2);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: all var(--cv2-t);
}
.conversation-chip.is-success { background: var(--cv2-green-bg); color: var(--cv2-green); border-color: transparent; }
.conversation-chip.is-warning { background: var(--cv2-amber-bg); color: var(--cv2-amber); border-color: transparent; }
.conversation-chip.is-danger  { background: var(--cv2-red-bg);   color: var(--cv2-red);   border-color: transparent; }
.conversation-chip.is-muted   { background: var(--cv2-surface-3); color: var(--cv2-text-3); border-color: transparent; }

/* ---- Dropdown ---- */
.ch2-dropdown {
  position: absolute;
  top: 100%;
  right: 10px;
  background: var(--cv2-surface);
  border: 1px solid var(--cv2-border-md);
  border-radius: var(--cv2-r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 220px;
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  padding: 4px 0;
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}
.ch2-dropdown.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ch2-drop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: transparent;
  color: var(--cv2-text-1);
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--cv2-t);
  text-align: left;
}
.ch2-drop-item:hover { background: var(--cv2-surface-3); }
.ch2-drop-item i {
  width: 18px;
  text-align: center;
  color: var(--cv2-text-3);
  font-size: 13px;
}
.ch2-drop-item.disabled {
  opacity: .4;
  pointer-events: none;
}
.ch2-drop-item.is-active { background: var(--cv2-blue-bg); }
.ch2-drop-item.is-active i { color: var(--cv2-blue); }
.ch2-drop-item--danger { color: var(--cv2-red); }
.ch2-drop-item--danger i { color: var(--cv2-red); }

.ch2-drop-sep {
  height: 1px;
  background: var(--cv2-border);
  margin: 4px 0;
}

/* Mobile-only dropdown items — hidden on desktop/tablet */
.ch2-mob-only { display: none; }

/* --- 4b. Messages Area --- */
.messages-wrapper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cv2-surface-2);
}

.messages-wrapper::-webkit-scrollbar { width: 4px; }
.messages-wrapper::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.1); border-radius: 2px; }

.messages-container {
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.message-separator {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--cv2-text-3);
  letter-spacing: 0.04em;
  padding: 10px 0;
  position: relative;
}

.message-separator::before,
.message-separator::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  height: 1px;
  background: var(--cv2-border-md);
}

.message-separator::before { left: 0; }
.message-separator::after  { right: 0; }

/* Message row layout */
.message {
  display: flex;
  flex-direction: column;
  margin-bottom: 2px;
}

.message.user     { align-items: flex-start; }
.message.admin    { align-items: flex-end; }
.message.assistant { align-items: flex-end; }

/* Consecutive messages from same sender */
.message + .message.user      { margin-top: 1px; }
.message + .message.admin     { margin-top: 1px; }
.message + .message.assistant { margin-top: 1px; }

/* Bubble */
.message-bubble {
  max-width: min(72%, 480px);
  padding: 10px 14px;
  border-radius: 16px;
  position: relative;
  box-shadow: var(--cv2-shadow-xs);
}

/* User (incoming) */
.message.user .message-bubble {
  background: var(--cv2-surface);
  border: 1px solid var(--cv2-border);
  border-bottom-left-radius: 4px;
  color: var(--cv2-text-1);
}

/* Admin (outgoing) */
.message.admin .message-bubble {
  background: var(--cv2-blue);
  border-bottom-right-radius: 4px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(59,111,191,0.25);
}

/* AI / Assistant (right-aligned like admin) */
.message.assistant .message-bubble {
  background: linear-gradient(135deg, #F3F0FF, #EDE9FE);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-bottom-right-radius: 4px;
  border-right: 2.5px solid #A78BFA;
  color: var(--cv2-text-1);
}

/* Message header (sender label) */
.message-header {
  font-size: 10.5px;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.7;
}

.message.admin .message-header { color: rgba(255,255,255,0.8); }
.message.user .message-header { color: var(--cv2-text-3); }
.message.assistant .message-header { color: #7C3AED; }

.message-header i { font-size: 10px; }

/* Message content */
.message-content {
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
}

.message.admin .message-content { color: #fff; }
.message.user .message-content  { color: var(--cv2-text-1); }

/* Time */
.message-time {
  font-size: 10.5px;
  margin-top: 5px;
  text-align: right;
  opacity: 0.6;
}

.message.admin .message-time { color: rgba(255,255,255,0.8); }
.message.user .message-time  { color: var(--cv2-text-3); }

/* Reaction/feedback buttons */
.message-actions {
  display: flex;
  gap: 4px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.message.admin   .message-actions { justify-content: flex-end; }
.message.assistant .message-actions { justify-content: flex-end; }
.message.user    .message-actions { justify-content: flex-start; }

/* --- 4c. Input Area --- */
.message-input-area {
  background: var(--cv2-surface);
  border-top: 1px solid var(--cv2-border);
  padding: 10px 14px;
  flex-shrink: 0;
}

.message-input-container {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  background: var(--cv2-surface-2);
  border: 1.5px solid var(--cv2-border-md);
  border-radius: var(--cv2-r-xl);
  padding: 6px 8px 6px 12px;
  transition: border-color var(--cv2-t), box-shadow var(--cv2-t);
}

.message-input-container:focus-within {
  border-color: var(--cv2-blue);
  background: var(--cv2-surface);
  box-shadow: 0 0 0 3px rgba(59,111,191,0.10);
}

.message-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--cv2-text-1);
  resize: none;
  outline: none;
  max-height: 120px;
  min-height: 36px;
  line-height: 1.5;
  padding: 0;
}

.message-input::placeholder { color: var(--cv2-text-3); }

.btn-input-action {
  width: 32px;
  height: 32px;
  border-radius: var(--cv2-r-sm);
  border: none;
  background: transparent;
  color: var(--cv2-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background var(--cv2-t), color var(--cv2-t);
  flex-shrink: 0;
}

.btn-input-action:hover { background: var(--cv2-surface-3); color: var(--cv2-text-2); }

.btn-send {
  width: 36px;
  height: 36px;
  border-radius: var(--cv2-r-full);
  border: none;
  background: var(--cv2-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background var(--cv2-t), transform var(--cv2-t), box-shadow var(--cv2-t);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(59,111,191,0.35);
}

.btn-send:hover {
  background: #2d5aa0;
  box-shadow: 0 4px 12px rgba(59,111,191,0.4);
  transform: scale(1.05);
}

.btn-send:active { transform: scale(0.95); }

/* Input footer */
.message-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 2px 0;
  font-size: 11px;
  color: var(--cv2-text-3);
}

/* --- 4d. Empty / Placeholder state --- */
.chat-empty-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--cv2-text-3);
  padding: 2rem;
  text-align: center;
}

.chat-empty-placeholder .empty-icon {
  font-size: 48px;
  opacity: 0.25;
  margin-bottom: 8px;
}

.chat-empty-placeholder .empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--cv2-text-2);
}

.chat-empty-placeholder .empty-desc {
  font-size: 13px;
}

/* ==========================================================
   5. RIGHT SIDEBAR — CUSTOMER INFO
   ========================================================== */
/* ==========================================================
   INFO PANEL — NEW RIGHT COLUMN SYSTEM
   ========================================================== */

/* Container (keeping .order-sidebar class for responsive media queries) */
.order-sidebar {
  background: var(--cv2-surface);
  border-left: 1px solid var(--cv2-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header (removed for space) ── */
.info-hd { display: none; }

/* ── Scrollable body ── */
.info-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.info-body::-webkit-scrollbar { width: 3px; }
.info-body::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.1); border-radius: 2px; }

/* ── Section wrapper ── */
.info-sec {
  border-bottom: 1px solid var(--cv2-border);
}

.info-sec--orders {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 120px;
}

/* ── Section header (clickable) ── */
.info-sec-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  background: var(--cv2-surface);
  transition: background 120ms;
}

.info-sec-hd:hover {
  background: var(--cv2-surface-2);
}

.info-sec-ico {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cv2-blue);
  font-size: 10px;
  flex-shrink: 0;
}

.info-sec-lbl {
  flex: 1;
  font-size: 10px;
  font-weight: 700;
  color: var(--cv2-text-2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.info-sec-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Section inline action button ── */
.info-sec-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  background: var(--cv2-blue-bg);
  color: var(--cv2-blue);
  border: 1px solid var(--cv2-blue-mid);
  border-radius: 4px;
  font-size: 8px;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.info-sec-action-btn:hover { background: var(--cv2-blue); color: #fff; }

.info-sec-link {
  font-size: 10px;
  color: var(--cv2-blue);
  text-decoration: none;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--cv2-r-full);
  background: var(--cv2-blue-bg);
  transition: background 120ms;
  white-space: nowrap;
}
.info-sec-link:hover { background: var(--cv2-blue-mid); }

.info-sec-caret {
  font-size: 9px;
  color: var(--cv2-text-3);
  transition: transform 220ms var(--cv2-ease);
}
.info-sec.is-collapsed .info-sec-caret { transform: rotate(-90deg); }

/* ── Section body ── */
.info-sec-bd {
  padding: 6px 10px 8px;
}
.info-sec.is-collapsed > .info-sec-bd { display: none; }

.info-sec-bd--fill {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.info-sec--orders .info-sec-bd {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Orders count badge ── */
.orders-ct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: var(--cv2-r-full);
  font-size: 10px;
  font-weight: 700;
  background: var(--cv2-blue-bg);
  color: var(--cv2-blue);
  border: 1px solid var(--cv2-blue-mid);
}

/* ── Empty state (static containers) ── */
.info-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 10px;
  color: var(--cv2-text-3);
  font-size: 11.5px;
  text-align: center;
}
.info-empty-ico {
  font-size: 18px;
  opacity: 0.35;
}

/* ── Notes composer ── */
.notes-composer {
  margin-top: 6px;
  padding: 7px 8px;
  background: var(--cv2-surface-2);
  border: 1px solid var(--cv2-border);
  border-radius: var(--cv2-r);
}

.notes-composer-input {
  width: 100%;
  border: 1px solid var(--cv2-border-md);
  border-radius: var(--cv2-r-sm);
  padding: 5px 7px;
  font-size: 12px;
  resize: none;
  background: var(--cv2-surface);
  color: var(--cv2-text-1);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
  line-height: 1.5;
  font-family: inherit;
}
.notes-composer-input:focus {
  border-color: var(--cv2-blue);
  box-shadow: 0 0 0 3px rgba(59,111,191,0.08);
}
.notes-composer-input::placeholder { color: var(--cv2-text-3); }

.notes-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
}

.pin-check {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--cv2-text-2);
  cursor: pointer;
  font-weight: 500;
}
.pin-check input { margin: 0; cursor: pointer; accent-color: var(--cv2-amber); }
.pin-check i { color: var(--cv2-amber); font-size: 10px; }

.notes-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  background: var(--cv2-blue);
  color: white;
  border: none;
  border-radius: var(--cv2-r-full);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms;
}
.notes-add-btn:hover { background: #2d5aa0; }
.notes-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.notes-add-btn i { font-size: 9px; }

/* ==========================================================
   6. RESPONSIVE — DESKTOP (≥ 1280px)
   ========================================================== */
@media (min-width: 1280px) {
  .chat-app {
    display: grid;
    grid-template-columns: 300px 1fr 280px;
    height: calc(100vh - 48px); /* Account for nav bar */
    overflow: hidden;
  }

  .chat-sidebar {
    grid-column: 1;
    width: 100%; /* override chat-redesign.css width: 360px */
    min-width: 0;
    height: 100%;
    overflow: hidden;
  }

  .chat-main {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border-left: 1px solid var(--cv2-border);
    border-right: 1px solid var(--cv2-border);
  }

  .order-sidebar {
    grid-column: 3;
    width: 100%; /* override chat-redesign.css width: 340px */
    min-width: 0;
    height: 100%;
    overflow: hidden;
  }
}

/* ==========================================================
   7. RESPONSIVE — TABLET (768px–1279px)
   ========================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
  .chat-app {
    display: grid !important;
    grid-template-columns: 280px 1fr;
    height: calc(100vh - 106px);
    overflow: hidden;
    position: relative; /* ensure absolute children are contained */
  }

  /* Reset mobile absolute positioning — chat-mobile.css sets position:absolute */
  .chat-sidebar {
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    grid-column: 1;
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    left: auto !important;
    top: auto !important;
  }

  .chat-main {
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    grid-column: 2;
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border-left: 1px solid var(--cv2-border);
    left: auto !important;
    top: auto !important;
  }

  /* Right info panel: slide-over from right, hidden by default */
  .order-sidebar {
    display: flex !important; /* override chat-mobile.css display:none */
    position: fixed !important;
    top: 0;
    right: 0;
    height: 100%;
    width: 300px;
    z-index: 500;
    transform: translateX(100%);
    transition: transform var(--cv2-t-md) var(--cv2-ease);
    box-shadow: var(--cv2-shadow-lg);
  }

  .order-sidebar.is-open {
    transform: translateX(0);
  }
}

/* ==========================================================
   8. RESPONSIVE — MOBILE (< 768px)
   ========================================================== */
@media (max-width: 767.98px) {
  /* Sidebar header compact */
  .sidebar-header {
    padding: 10px 14px 8px;
    min-height: 50px;
  }

  .sidebar-title { font-size: 16px; }

  /* More compact queue strip */
  .queue-workload-strip {
    padding: 0 10px 8px;
    gap: 5px;
  }

  .queue-workload-card {
    padding: 5px 10px;
    font-size: 12px;
  }

  .queue-workload-card__label { font-size: 11px; }
  .queue-workload-card__value { font-size: 12px; }

  /* Contact items mobile */
  .user-item {
    padding: 10px 12px;
  }

  .user-avatar {
    width: 42px;
    height: 42px;
    font-size: 15px;
  }

  .user-name { font-size: 13px; }
  .user-last-message { font-size: 12px; }
  .user-time { font-size: 10.5px; }

  /* Input */
  .message-input-area {
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  /* Message bubbles larger touch targets */
  .message-bubble {
    max-width: 82%;
    padding: 9px 13px;
  }

  .message-content { font-size: 13.5px; }

  /* Mobile filter chips */
  .mob-chip {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
    border-radius: var(--cv2-r-full);
    border: 1.5px solid var(--cv2-border-md);
    background: var(--cv2-surface);
    color: var(--cv2-text-2);
    font-weight: 500;
  }

  .mob-chip.active {
    background: var(--cv2-blue);
    border-color: var(--cv2-blue);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(59,111,191,0.3);
  }

  .mob-chip .chip-count {
    font-size: 10px;
    background: rgba(0,0,0,0.08);
    padding: 1px 5px;
    border-radius: var(--cv2-r-full);
  }

  .mob-chip.active .chip-count { background: rgba(255,255,255,0.25); }

  /* Bottom sheet improvements */
  .mob-bottom-sheet {
    border-radius: 20px 20px 0 0;
    box-shadow: var(--cv2-shadow-lg);
  }

  .sheet-handle::after {
    background: var(--cv2-border-md);
    width: 40px;
    height: 4px;
    border-radius: 2px;
  }
}

/* ==========================================================
   9. EMPTY STATE
   ========================================================== */
.empty-state {
  text-align: center;
  padding: 40px 20px;
}

.empty-state i {
  font-size: 40px;
  opacity: 0.2;
  color: var(--cv2-blue);
  margin-bottom: 12px;
  display: block;
}

.empty-state p {
  font-size: 13.5px;
  color: var(--cv2-text-3);
  margin: 0;
}

/* ==========================================================
   10. LOADING SKELETON
   ========================================================== */
.loading-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--cv2-surface-3);
  border-top-color: var(--cv2-blue);
  border-radius: 50%;
  animation: cv2-spin 0.7s linear infinite;
}

@keyframes cv2-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================
   11. SCROLLBAR GLOBAL (sidebar + messages)
   ========================================================== */
.chat-sidebar *,
.chat-main *,
.order-sidebar * {
  scrollbar-width: thin;
  scrollbar-color: rgba(15,23,42,0.1) transparent;
}

/* ==========================================================
   12. SMOOTH TRANSITIONS
   ========================================================== */
.chat-sidebar,
.chat-main,
.order-sidebar {
  transition: none; /* Prevent layout shift */
}

/* Hover state transition for interactive elements */
.user-item,
.inbox-chip,
.filter-btn,
.btn-header-action,
.btn-input-action,
.btn-send,
.queue-workload-card {
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================
   13. SLA BREACHED BADGE
   ========================================================== */
.sla-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--cv2-red-bg);
  color: var(--cv2-red);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--cv2-r-xs);
}

/* ==========================================================
   14. PLATFORM INDICATOR (on avatar ring)
   ========================================================== */
.user-avatar[class*="platform-"]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--cv2-surface);
}

.user-avatar.platform-facebook::after { background: var(--cv2-facebook); }
.user-avatar.platform-line::after     { background: var(--cv2-line); }

/* ==========================================================
   15. CONTRAST FIXES — WCAG AA
   ========================================================== */

/* notification count badge: too small at 9.6px on light red */
.position-absolute.bg-danger.badge {
  background-color: #A0262B !important;  /* darker red for 5.5:1 */
}