:root {
  /* Màu sắc chủ đạo từ BaseSource.AppUI */
  --primary-color: #8105BD;
  /* Tím AppUI */
  --primary-light: #EEE3F8;
  --primary-extra-light: #FCF8FF;
  --secondary-color: #F72585;
  /* Hồng AppUI */
  --sidebar-bg: #FFFFFF;
  --chat-bg: #FCF8FF;
  /* Nền nhẹ theo style AppUI */
  --text-main: #011212;
  --text-muted: #666666;
  --border-color: #EEE3F8;
  --sidebar-width-thin: 50px;
  --sidebar-width-contacts: 350px;
}

body,
html {
  height: 100%;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  overflow: hidden;
}

.app-wrapper {
  display: flex;
  height: 100vh;
  height: 100dvh;
  /* Dynamic viewport height for mobile */
  width: 100vw;
  background-color: #FCF8FF;
  position: relative;
  overflow: hidden;
  /* Prevent body-level horizontal overflow */
}

/* Sidebar mỏng bên trái cùng */
.nav-sidebar-thin {
  width: var(--sidebar-width-thin);
  background-color: #FCF8FF;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Đẩy top và bottom về 2 phía */
  align-items: center;
  padding: 30px 0;
}

/* Sidebar Toggle Custom Icon Style */
.sidebar-toggle-box {
  width: 44px;
  /* Increased for better visibility */
  height: 44px;
  background: #F8F2FF;
  /* Slightly lighter purple background */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(129, 5, 189, 0.2);
  /* Enhanced shadow */
}

#sidebar-collapse-trigger i {
  font-size: 20px;
  color: var(--primary-color);
  transition: transform 0.2s ease;
}

#sidebar-collapse-trigger:hover i {
  transform: scale(1.1);
}

.sidebar-toggle-box i {
  color: #8105BD;
  font-size: 24px;
  /* Increased icon size */
}

.sidebar-toggle-box:hover {
  background: #E9D5FF;
  transform: scale(1.05);
}

/* Sidebar Collapsed State */
.app-wrapper.sidebar-collapsed .nav-sidebar-thin {
  margin-left: -65px;
}

.nav-sidebar-thin {
  transition: margin-left 0.3s ease-in-out;
}

/* Floating Expand Button */
#sidebar-expand-trigger {
  display: none;
  position: fixed;
  bottom: 30px;
  left: 15px;
  z-index: 2010;
  animation: sidebarFadeIn 0.3s ease-out;
}

.app-wrapper.sidebar-collapsed #sidebar-expand-trigger {
  display: flex;
}

@keyframes sidebarFadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

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

/* Hide Mascot when Sidebar is Collapsed */
.app-wrapper.sidebar-collapsed #mascot-toggle,
.app-wrapper.sidebar-collapsed #mascot-helper {
  display: none !important;
}

.top-nav-icons,
.bottom-nav-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 45px;
  /* Khoảng cách cân bằng hơn */
}

.nav-custom-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.nav-icon {
  font-size: 20px;
  color: var(--primary-color);
  opacity: 1;
  /* Hiển thị rõ nét mặc định */
  cursor: pointer;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease-in-out;
}

.nav-icon.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  /* Điều chỉnh để độ cao thanh dọc ~24px khớp với icon */
  bottom: 10px;
  width: 4px;
  /* Độ dày thanh mảnh hơn cho tinh tế */
  background-color: var(--primary-color);
  border-radius: 0 4px 4px 0;
}

.nav-icon.active {
  background-color: transparent;
  color: var(--primary-color);
  /* opacity: 0.5; */
  /* Mờ 50% khi active theo yêu cầu mới */
  width: 100%;
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 8px;
  /* Đẩy toàn bộ icon sang phải để tách biệt với thanh dọc */
}

.nav-icon.active i {
  color: var(--primary-color);
  transform: scale(1.1) translateX(1px);
  /* Làm nổi bật icon active */
}

.nav-icon:not(.active):hover i {
  color: #000000;
  opacity: 0.7;
}

/* Hide mobile-only elements on desktop */
#nav-menu-trigger,
.mobile-nav-popup {
  display: none !important;
}

.avatar-sm {
  position: relative;
  cursor: pointer;
}

.avatar-sm img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/* Profile Popup UI - Compact Style */
.profile-popup {
  position: absolute;
  top: 0px;
  left: calc(100% + 15px);
  width: 220px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  display: none;
  flex-direction: column;
  z-index: 3000;
  padding: 15px 20px;
  animation: slideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.profile-popup.show {
  display: flex;
}

.profile-popup .popup-title {
  font-size: 20px;
  font-weight: 800;
  color: #8105BD;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #EDEDED;
}

.profile-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.profile-user-info img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-user-name {
  font-size: 16px;
  font-weight: 600;
  color: #001212;
}

.social-icons-group {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  padding-left: 0;
  justify-content: center;
}

.social-icons-group img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s;
}

.social-icons-group img:hover {
  transform: scale(1.15);
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 8px 0;
  cursor: pointer;
  transition: opacity 0.2s;
}

.profile-menu-item span {
  font-size: 16px;
  font-weight: 500;
  color: #001212;
}

.profile-menu-item:hover {
  opacity: 0.7;
}

.profile-menu-item .menu-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  /* Remove border-radius */
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

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



/* Toggle Theme - Sidebar Bottom */
.theme-toggle {
  display: flex;
  flex-direction: column;
  background-color: white;
  border: 1px solid var(--border-color);
  border-radius: 30px;
  padding: 3px;
  gap: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

.toggle-item {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--primary-color);
  transition: all 0.3s;
}

.toggle-item img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.toggle-item.active {
  background-color: var(--primary-color);
  color: #FFFFFF;
}

/* Sidebar danh sách liên hệ */
.contacts-sidebar {
  width: var(--sidebar-width-contacts);
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.brand-area {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.brand-logo-img {
  max-width: 200px;
  /* Giảm kích thước logo xuống mức vừa vặn */
  height: auto;
  display: block;
}

.search-box-container {
  padding: 0 20px 15px 20px;
  position: relative;
}

.search-results-dropdown {
  position: absolute;
  top: calc(100% - 10px);
  left: 20px;
  right: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 1002;
  max-height: 480px;
  overflow-y: auto;
  padding: 10px 0;
  border: 1px solid #f0f0f0;
}

.search-results-dropdown.show {
  display: block;
  animation: slideUp 0.3s ease;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.2s;
}

.search-result-item:hover {
  background-color: var(--primary-extra-light);
}

.search-result-item img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.search-result-item span {
  font-size: 14px;
  font-weight: 500;
  color: #1A1A1A;
}

/* Custom scrollbar for dropdown */
.search-results-dropdown::-webkit-scrollbar {
  width: 6px;
}

.search-results-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.search-results-dropdown::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 10px;
}

.search-box-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.edit-icon-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  cursor: pointer;
}

.header-user-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.header-action-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  cursor: pointer;
  transition: opacity 0.2s;
}

.header-action-img:hover {
  opacity: 0.8;
}

.filter-icon {
  font-size: 20px;
  color: var(--primary-color);
  cursor: pointer;
  padding: 5px;
  /* Tăng diện tích nhấn */
}

.search-box {
  background-color: var(--primary-extra-light);
  border: 1px solid var(--primary-color);
  border-radius: 5px;
  padding: 6px 10px;
  /* Giảm padding một chút để cân đối với icon có padding */
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-box i {
  color: var(--primary-color);
  /* Icon màu tím */
}

.search-box input {
  border: none;
  background: transparent;
  width: 100%;
  outline: none;
  font-size: 13px;
  font-weight: 400;
  color: var(--primary-color);
  /* Chữ màu tím */
}

.search-box input::placeholder {
  color: var(--primary-color);
  opacity: 0.6;
  /* Placeholder nhạt hơn một chút */
}

.contact-list {
  flex: 1;
  overflow-y: auto;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 15px;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 4px solid transparent;
}

.contact-item:hover {
  background-color: var(--primary-extra-light);
}

.contact-item.active {
  background-color: var(--primary-extra-light);
  /* Màu đậm hơn chút cho active */
  border-left: 4px solid var(--primary-color);
}

.avatar-container {
  position: relative;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.status-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: #8105BD;
  /* Màu xanh success chuẩn của AppUI */
}

.contact-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-top-row,
.contact-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.contact-name {
  font-weight: 500;
  font-size: 15px;
  color: #1A1A1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.contact-last-msg {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 10px;
}

.seen-indicator-img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Khu vực Chat chính */
.chat-main {
  flex: 1;
  background-color: var(--chat-bg);
  display: flex;
  flex-direction: column;
  position: relative;
  /* Ensure overlay is contained */
}

.chat-header {
  background-color: white;
  padding: 10px 25px 10px 15px;
  margin: 10px 20px;
  /* Tạo khoảng cách với các cạnh */
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 60px;
  /* Bo tròn 4 góc 60px */
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  /* Đổ bóng STYLE GLASS theo thiết kế */
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* Viền mảnh mờ */
}

.chat-user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.chat-user-info .avatar {
  width: 40px;
  height: 40px;
}

.chat-user-info .contact-name {
  font-size: 16px;
  font-weight: 700;
  color: #1A1A1A;
  overflow: visible !important;
  white-space: normal;
  display: flex;
  align-items: center;
}

.chat-user-details .name {
  font-weight: 800;
  font-size: 18px;
  color: #1A1A1A;
}

.chat-content {
  flex: 1;
  padding: 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Custom scrollbar for chat content */
.chat-content::-webkit-scrollbar {
  width: 6px;
}

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

.chat-content::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 10px;
}

.chat-content::-webkit-scrollbar-thumb:hover {
  filter: brightness(0.9);
}

.date-divider {
  text-align: center;
  position: relative;
  margin: 10px 0;
}

.date-divider span {
  background-color: var(--primary-light);
  padding: 4px 15px;
  border-radius: 12px;
  font-size: 12px;
  color: var(--primary-color);
  font-weight: 600;
}

.message {
  max-width: 75%;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  position: relative; /* Added for timestamp positioning */
}

.message-time {
  position: absolute;
  bottom: 0;
  font-size: 11px;
  color: #999;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  pointer-events: none;
}

.message.received .message-time {
  left: calc(100% + 10px);
}

.message.sent .message-time {
  right: calc(100% + 10px);
}

.message:hover .message-time {
  opacity: 1;
}

.message.received {
  align-self: flex-start;
}

.message.sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message-bubble {
  padding: 14px 20px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  overflow-wrap: break-word;
  word-break: break-word;
}

.message.received .message-bubble {
  background-color: white;
  color: #333;
  border-bottom-left-radius: 4px;
}

.message.sent .message-bubble {
  background-color: var(--primary-color);
  color: white;
  border-bottom-right-radius: 4px;
}

.message-time {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  margin-bottom: 4px;
}

.message:hover .message-time {
  opacity: 1;
}

.chat-input-area {
  padding: 12px 25px;
}

.input-container {
  background-color: white;
  border-radius: 40px;
  padding: 6px 25px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
}

.input-content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.input-container textarea {
  width: 100%;
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
  padding: 8px 0;
  resize: none;
  max-height: 130px;
  /* Khoảng 4 dòng text font 20px */
  overflow-y: auto;
  line-height: 1.4;
  font-family: inherit;
  word-break: break-all !important;
  overflow-wrap: break-word !important;
}

.input-container textarea::-webkit-scrollbar {
  width: 5px;
}

.input-container textarea::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 10px;
}

.input-actions {
  display: flex;
  gap: 15px;
  /* Giảm nhẹ gap để cân đối với icon to hơn */
  color: var(--primary-color);
  align-items: center;
}

.input-action-icon {
  font-size: 20px;
  /* Nâng kích thước icon FontAwesome lên 30px */
  cursor: pointer;
  transition: transform 0.2s;
}

.input-action-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s;
}

.input-action-icon:hover,
.input-action-img:hover {
  transform: scale(1.1);
}

.send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.send-btn:hover {
  transform: scale(1.1);
}

.send-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.send-btn i {
  font-size: 18px;
  transform: rotate(45deg);
  margin-right: 2px;
  margin-bottom: 2px;
}

/* Voice Recording UI */
.recording-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.cancel-recording-btn {
  color: #D9D9D9;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.cancel-recording-btn:hover {
  color: var(--primary-color);
  transform: scale(1.1);
}

.recording-bar-pill {
  background-color: var(--primary-extra-light);
  border-radius: 40px;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
  flex: 1;
  border: 1px solid var(--primary-light);
  height: 36px;
}

.stop-recording-btn {
  width: 28px;
  height: 28px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.stop-recording-btn:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

.stop-recording-btn i {
  font-size: 10px;
}

.recording-timer-pill {
  background-color: white;
  padding: 1px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-color);
  margin-right: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}

.input-action-icon.active {
  color: var(--primary-color);
}

/* Attachment Popup Menu */
.attachment-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.attachment-menu {
  position: absolute;
  bottom: calc(100% + 15px);
  left: 0;
  background: white;
  border-radius: 15px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  padding: 10px;
  min-width: 220px;
  display: none;
  z-index: 1000;
  border: 1px solid #f0f0f0;
}

.attachment-menu.show {
  display: block;
  animation: slideUp 0.3s ease;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  color: #333;
  font-size: 16px;
  white-space: nowrap;
}

.attachment-item:hover {
  background-color: #f8f0ff;
  color: var(--primary-color);
}

.attachment-item i {
  font-size: 24px;
  color: #8105BD;
  width: 32px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

/* Snippet Popup Menu */
.snippet-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.snippet-menu {
  position: absolute;
  bottom: calc(100% + 15px);
  left: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  padding: 15px;
  min-width: 320px;
  display: none;
  z-index: 1000;
  border: 1px solid #f0f0f0;
}

.snippet-menu.show {
  display: block;
  animation: slideUp 0.3s ease;
}

.snippet-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--primary-color);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.snippet-search-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.snippet-search input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 15px;
  color: var(--primary-color);
}

.snippet-search input::placeholder {
  color: rgba(129, 5, 189, 0.5);
}

.snippet-item {
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1px solid #f9f9f9;
}

.snippet-item:last-child {
  border-bottom: none;
}

.snippet-tag {
  display: inline-block;
  background-color: var(--primary-light);
  color: var(--primary-color);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 13px;
  margin-bottom: 8px;
}

.snippet-text {
  font-size: 13px;
  color: #333;
  line-height: 1.4;
  margin-bottom: 4px;
}

.snippet-cmd {
  font-size: 12px;
  color: #999;
  font-style: italic;
}

.create-snippet-btn {
  width: auto;
  margin-top: 8px;
  background: white;
  border: 1.5px solid var(--primary-color);
  color: var(--primary-color);
  padding: 8px 15px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.create-snippet-btn:hover {
  background-color: var(--primary-color);
  color: white;
}

/* Quick Filter Dropdown Sidebar */
.filter-wrapper {
  position: relative;
}

.quick-filter-dropdown {
  position: absolute;
  top: calc(100% + 15px);
  left: -16px;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.25);
  width: 60px;
  display: none;
  z-index: 1050;
  padding: 15px 0;
  border: 1px solid #f0f0f0;
}

.quick-filter-dropdown.show {
  display: block;
  animation: slideUp 0.3s ease;
}

.filter-header {
  font-size: 12px;
  font-weight: 600;
  color: #2c5e5e;
  text-align: center;
  margin-bottom: 12px;
  padding: 0 5px;
}

.filter-items-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-height: 500px;
  overflow-y: visible !important;
  padding: 5px 0;
}

/* Custom scrollbar for filter items */
.filter-items-scroll::-webkit-scrollbar {
  width: 4px;
}

.filter-items-scroll::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 10px;
}

.filter-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  background-color: var(--primary-color);
  color: white;
  flex-shrink: 0;
}

.filter-circle span {
  font-size: 8px;
  font-weight: 800;
  color: white !important;
}

.filter-circle i {
  font-size: 16px;
  color: white !important;
}

.filter-circle:hover {
  filter: brightness(0.8);
  box-shadow: 0 0 10px rgba(129, 5, 189, 0.4);
}

.filter-circle.active {
  box-shadow: 0 0 12px rgba(129, 5, 189, 0.6);
  filter: brightness(1.1);
  border-color: #A033DD;
}

/* Tag Filter Popup */
.tag-filter-wrapper {
  position: relative;
}

.tag-filter-popup {
  position: absolute;
  top: -100px;
  /* Điều chỉnh vị trí theo hình */
  left: calc(100% + 20px);
  background: white;
  border-radius: 12px;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.15);
  width: 550px;
  display: none;
  z-index: 1100;
  padding: 25px;
  border: 1px solid #e0e0e0;
}

.tag-filter-popup.show {
  display: block;
  animation: fadeInRight 0.3s ease;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }

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

.tag-popup-container {
  display: flex;
  gap: 25px;
}

/* Cột trái */
.tag-left-column {
  width: 40%;
  padding-right: 20px;
  padding-top: 20px;
  /* Thêm padding để trông thấp hơn cột phải */
}

.tag-section-title {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
}

.tag-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all 0.2s;
  color: #333;
  font-size: 14px;
}

.tag-menu-item:hover {
  background: #f9f9f9;
}

.tag-menu-item.active {
  background: #EDEDED;
  font-weight: 600;
}

.tag-menu-item.active i {
  color: #8105BD;
}

.tag-menu-item i {
  font-size: 12px;
  color: #8105BD;
}

/* Cột phải */
.tag-right-column {
  width: 60%;
}

.tag-search-container {
  display: flex;
  align-items: center;
  background: #fdf5ff;
  border: 1.5px solid #8105BD;
  border-radius: 5px;
  padding: 10px 15px;
  margin-bottom: 15px;
}

.tag-search-icon {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  object-fit: contain;
}

.tag-search-container input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  color: #2c5e5e;
  font-size: 15px;
}

.tag-sort-section {
  border: 1px solid #D9D9D9;
  border-radius: 10px;
  padding: 20px;
}

.tag-sort-title {
  color: #2c5e5e;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 20px;
}

.tag-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 25px;
}

.tag-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Checkbox Custom (Teal Border) */
.tag-checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #8105BD;
  border-radius: 4px;
  cursor: pointer;
  background: white;
}

/* Pointer Tag Badge (Yellow/Silver/Copper/Red) - Updated to match image */
.tag-badge-arrow {
  padding: 0 !important;
  font-weight: 700;
  font-size: 13px;
  color: #000000 !important;
  position: relative;
  background: transparent !important;
  margin-left: 0;
  min-width: auto;
  display: flex;
  align-items: center;
  padding-left: 45px !important;
  /* Space for the color badge shape */
  height: 24px;
}

.tag-badge-arrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 16px;
  border-radius: 2px 0 0 2px;
}

.tag-badge-arrow::after {
  content: '';
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid transparent;
  /* Will be set by color classes */
}

.tag-badge-arrow.yellow::before {
  background-color: #FFD700;
}

.tag-badge-arrow.yellow::after {
  border-left-color: #FFD700;
}

.tag-badge-arrow.silver {
  color: #000 !important;
}

.tag-badge-arrow.silver::before {
  background-color: #E0E0E0;
}

.tag-badge-arrow.silver::after {
  border-left-color: #E0E0E0;
}

.tag-badge-arrow.copper::before {
  background-color: #FFB366;
}

.tag-badge-arrow.copper::after {
  border-left-color: #FFB366;
}

.tag-badge-arrow.red {
  color: #000 !important;
}

.tag-badge-arrow.red::before {
  background-color: #FF4D4D;
}

.tag-badge-arrow.red::after {
  border-left-color: #FF4D4D;
}

.tag-status-indicator {
  width: 18px;
  height: 18px;
  border: 2px solid #8105BD;
  border-radius: 4px;
  margin-left: auto;
  cursor: pointer;
  position: relative;
}

.tag-status-indicator.active {
  background-color: white;
}

.tag-status-indicator.active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background-color: #8105BD;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.add-filter-btn {
  border: 1.5px solid #8105BD;
  background: white;
  color: #8105BD;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: -5px;
  transition: all 0.2s;
}

.add-filter-btn:hover {
  background: #fdf5ff;
}

/* Rename User Popup */
.rename-wrapper {
  position: relative;
}

.rename-popup {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: white;
  border-radius: 15px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  padding: 15px;
  min-width: 260px;
  display: none;
  z-index: 1001;
  border: 1px solid #f0f0f0;
}

.rename-popup.show {
  display: block;
  animation: slideUp 0.3s ease;
}

.rename-title {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 10px;
  text-align: center;
}

.rename-input-group {
  margin-bottom: 20px;
}

.rename-input-group input {
  width: 100%;
  border: 1.5px solid var(--primary-color);
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px;
  outline: none;
  color: var(--primary-color);
}

.rename-input-group input::placeholder {
  color: rgba(129, 5, 189, 0.5);
}

.rename-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.rename-back-btn {
  background-color: #8E8E8E;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.rename-submit-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.rename-back-btn:hover,
.rename-submit-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

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

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

/* Right Side Tag Sidebar */
.tags-sidebar-right {
  width: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #F8F9FA;
  border-left: none;
  display: flex !important;
  flex-direction: column;
  padding: 0;
  position: relative;
  height: 100vh;
  z-index: 100;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  border-radius: 26px 26px 0 0;
  overflow: hidden;
  /* Thêm padding top để lộ nền #FCF8FF ở 2 góc trên */
}

.tags-sidebar-right.show {
  width: 400px;
  opacity: 1;
  visibility: visible;
  border-left: 1px solid var(--border-color);
}

.tags-sidebar-right .tag-header {
  background: white;
  border-radius: 52px;
  border: 0.5px solid #D9D9D9;
  /* Bo góc toàn bộ để tạo hình capsule */
  box-shadow: 0px 2px 4px 0px #D9D9D9;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 20px;
  padding: 12px 0;
  width: 100%;
  /* Sát biên trái phải */
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  /* Sát biên trên */
}

.tags-sidebar-right .tag-header h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #8105BD;
  letter-spacing: 2px;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
}

.tags-sidebar-right .tag-header::before,
.tags-sidebar-right .tag-header::after {
  content: '';
  width: 16px;
  height: 16px;
  background-color: #D9D9D9;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.tags-sidebar-right .tag-header::before {
  left: 25px;
}

.tags-sidebar-right .tag-header::after {
  right: 25px;
}

.tags-sidebar-right .tag-management-box,
.tags-sidebar-right .tag-description,
.tags-sidebar-right .back-button-footer {
  width: auto;
}

.tags-sidebar-right .tag-description,
.tags-sidebar-right .back-button-footer {
  padding-left: 25px;
  padding-right: 25px;
}

.tags-sidebar-right .tag-description {
  font-size: 14px;
  color: #000000;
  line-height: 1.4;
  margin-bottom: 20px;
}

.tags-sidebar-right .tag-management-box {
  background: white;
  border: 1px solid #D9D9D9;
  border-radius: 10px;
  padding: 20px;
  margin: 0 25px;
  /* Thêm margin để khung bằng với dòng chữ phía trên */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tags-sidebar-right .management-title {
  font-size: 16px;
  font-weight: 600;
  color: #8105BD;
  margin-bottom: 5px;
}

.tags-sidebar-right .tag-list-vertical {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.tags-sidebar-right .tag-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.tags-sidebar-right .drag-handle {
  color: #8105BD;
  font-size: 18px;
  cursor: grab;
  width: 20px;
  display: flex;
  justify-content: center;
}

.tags-sidebar-right .tag-name-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
}

.tags-sidebar-right .tag-color-badge {
  width: 25px;
  height: 16px;
  position: relative;
  border-radius: 2px 0 0 2px;
}

.tags-sidebar-right .tag-color-badge::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid transparent;
}

.tags-sidebar-right .tag-color-badge.yellow {
  background-color: #FFD700;
}

.tags-sidebar-right .tag-color-badge.yellow::after {
  border-left-color: #FFD700;
}

.tags-sidebar-right .tag-color-badge.silver {
  background-color: #C0C0C0;
}

.tags-sidebar-right .tag-color-badge.silver::after {
  border-left-color: #C0C0C0;
}

.tags-sidebar-right .tag-color-badge.copper {
  background-color: #CD7F32;
}

.tags-sidebar-right .tag-color-badge.copper::after {
  border-left-color: #CD7F32;
}

.tags-sidebar-right .tag-color-badge.red {
  background-color: #FF0000;
}

.tags-sidebar-right .tag-color-badge.red::after {
  border-left-color: #FF0000;
}

.tags-sidebar-right .tag-text {
  font-weight: 700;
  font-size: 13px;
  color: #001212;
  margin-left: 15px;
}

.tags-sidebar-right .tag-checkbox-container {
  margin-left: auto;
}

.tags-sidebar-right .tag-checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid #8105BD;
  border-radius: 4px;
  cursor: pointer;
  background: white;
}

.tags-sidebar-right .tag-checkbox.checked {
  background-color: white;
  position: relative;
}

.tags-sidebar-right .tag-checkbox.checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background-color: #8105BD;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.tags-sidebar-right .add-tag-inline-btn {
  border: 1px solid #8105BD;
  background: white;
  color: #8105BD;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 5px;
}

.tags-sidebar-right .back-button-footer {
  margin-top: auto;
  display: flex;
  padding-bottom: 20px;
}

.tags-sidebar-right .btn-back {
  background-color: #8E8E8E;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.tags-sidebar-right .btn-back:hover {
  filter: brightness(0.9);
}

/* Right Side Information Sidebar */
.info-sidebar-right {
  width: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #F8F9FA;
  border-left: none;
  display: flex !important;
  flex-direction: column;
  padding: 0;
  position: relative;
  height: 100vh;
  z-index: 100;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  border-radius: 26px 26px 0 0;
  overflow: hidden;
}

.info-sidebar-right.show {
  width: 400px;
  opacity: 1;
  visibility: visible;
  border-left: 1px solid var(--border-color);
}

.info-sidebar-right .info-header {
  background: white;
  border-radius: 52px;
  border: 0.5px solid #D9D9D9;
  box-shadow: 0px 2px 4px 0px #D9D9D9;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 20px;
  padding: 12px 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}

.info-sidebar-right .info-header h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #8105BD;
  letter-spacing: 2px;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
}

.info-sidebar-right .info-header::before,
.info-sidebar-right .info-header::after {
  content: '';
  width: 16px;
  height: 16px;
  background-color: #D9D9D9;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.info-sidebar-right .info-header::before {
  left: 25px;
}

.info-sidebar-right .info-header::after {
  right: 25px;
}

.info-sidebar-content,
.info-sidebar-right .back-button-footer {
  min-width: 320px;
}

.info-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 25px;
}

.info-sidebar-content::-webkit-scrollbar {
  width: 5px;
}

.info-sidebar-content::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 10px;
}

.info-user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
}

.info-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.info-user-name {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
}

.info-form-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
  padding-bottom: 15px;
  border-bottom: 1.5px dashed #8105BD;
}

.info-field {
  width: 100%;
  border: 0.5px solid #8105BD;
  background: white;
  padding: 4px 12px;
  font-size: 12px;
  color: #8105BD;
  outline: none;
  border-radius: 5px;
  transition: all 0.2s;
}

.info-field::placeholder {
  color: #8105BD;
  opacity: 0.7;
}

.info-field:focus {
  border-color: #8105BD;
  background: #FCF8FF;
}

.info-section {
  padding: 15px 0;
  border-bottom: 1.5px dashed #8105BD;
}

.info-section:last-child {
  border-bottom: none;
}

.info-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.info-section-header i,
.info-section-header img {
  font-size: 24px;
  color: #8105BD;
  width: 28px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
}

.info-section-body {
  font-size: 14px;
  color: #000000;
  padding-left: 28px;
  line-height: 1.5;
}

.info-sidebar-right .back-button-footer {
  padding: 15px 25px 20px 25px;
}

.info-sidebar-right .btn-back {
  background-color: #8E8E8E;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.info-sidebar-right .btn-back:hover {
  filter: brightness(0.9);
}

/* Right Side Order Sidebar */
.order-sidebar-right {
  width: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #F8F9FA;
  border-left: none;
  display: flex !important;
  flex-direction: column;
  padding: 0;
  position: relative;
  height: 100vh;
  z-index: 100;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  border-radius: 26px 26px 0 0;
  overflow: hidden;
}

.order-sidebar-right.show {
  width: 400px;
  opacity: 1;
  visibility: visible;
  border-left: 1px solid var(--border-color);
}

.order-sidebar-right .order-header {
  background: white;
  border-radius: 52px;
  border: 0.5px solid #D9D9D9;
  box-shadow: 0px 2px 4px 0px #D9D9D9;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 15px;
  padding: 12px 0;
  width: 100%;
}

.order-sidebar-right .order-header h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #8105BD;
  letter-spacing: 2px;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
}

.order-sidebar-right .order-header::before,
.order-sidebar-right .order-header::after {
  content: '';
  width: 16px;
  height: 16px;
  background-color: #D9D9D9;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.order-sidebar-right .order-header::before {
  left: 25px;
}

.order-sidebar-right .order-header::after {
  right: 25px;
}

.order-sidebar-content,
.order-sidebar-right .order-footer {
  min-width: 320px;
}

.order-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
}

.order-sidebar-content::-webkit-scrollbar {
  width: 5px;
}

.order-sidebar-content::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 10px;
}

.order-group {
  padding-bottom: 12px;
}

.order-divider-dashed {
  border-top: 1.5px dashed #8105BD;
  margin: 10px 0;
  width: 100%;
}

.order-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.order-group-header i,
.order-group-header img {
  font-size: 24px;
  color: #8105BD;
  width: 28px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Specific for Tag arrow in header to prevent stretching */
.order-group-header .tag-arrow-shape {
  width: 32px !important;
  /* Force the specific tag width */
  height: 16px !important;
  /* Force the specific tag height to prevent square look */
  flex-shrink: 0;
  display: inline-block;
}

.order-group-title {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

/* Calling Overlay */
.calling-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(238, 227, 248, 0.85);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  color: #8105BD;
  animation: callEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.minimize-call-btn {
  position: absolute;
  top: 30px;
  left: 30px;
  font-size: 24px;
  cursor: pointer;
  z-index: 2001;
  transition: transform 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.minimize-call-btn:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.calling-overlay.show {
  display: flex !important;
}

.calling-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.calling-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  padding: 5px;
  background: rgba(129, 5, 189, 0.1);
  position: relative;
  animation: pulse-glow 2s infinite ease-in-out;
}

.calling-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #8105BD;
  box-shadow: 0 0 20px rgba(129, 5, 189, 0.2);
}

.calling-name {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 5px;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 10px rgba(129, 5, 189, 0.1);
}

.calling-status {
  font-size: 18px;
  margin-bottom: 50px;
  opacity: 0.9;
  font-weight: 500;
}

.calling-actions {
  display: flex;
  gap: 40px;
}

.calling-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.calling-action-item span {
  font-size: 14px;
  font-weight: 600;
}

.action-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 25px rgba(129, 5, 189, 0.2);
  border: none;
}

.action-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 12px 30px rgba(129, 5, 189, 0.3);
}

.speaker-btn {
  background: linear-gradient(135deg, #8105BD, #a54cd6);
  color: white;
}

.mute-btn {
  background: linear-gradient(135deg, #8105BD, #a54cd6);
  color: white;
}

.hangup-btn {
  background: linear-gradient(135deg, #FF3B30, #ff6b6b);
  color: white;
  box-shadow: 0 8px 25px rgba(255, 59, 48, 0.3);
}

.hangup-btn:hover {
  box-shadow: 0 12px 30px rgba(255, 59, 48, 0.4);
}

/* Minimized State Styling */
.calling-overlay.minimized {
  width: 424px;
  height: 238px;
  top: 20px;
  right: 20px;
  left: auto;
  bottom: auto;
  border-radius: 10px;
  background: rgba(238, 227, 248, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(129, 5, 189, 0.3);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  padding: 20px;
  cursor: move;
  /* Indicated draggable */
  transition: width 0.3s, height 0.3s, opacity 0.3s;
  /* Smooth scale transition */
  overflow: hidden;
  /* Prevent any accidental overflow */
  user-select: none;
  /* Prevent text selection during drag */
  touch-action: none;
}

.calling-overlay.minimized .minimize-call-btn {
  top: 10px;
  left: 10px;
  font-size: 16px;
}

.calling-overlay.minimized .calling-container {
  width: 100%;
}

.calling-overlay.minimized .calling-avatar {
  width: 70px;
  height: 70px;
}

.calling-overlay.minimized .calling-avatar img {
  border-width: 3px;
}

.calling-overlay.minimized .calling-name {
  font-size: 24px;
  margin-bottom: 4px;
}

.calling-overlay.minimized .calling-status {
  font-size: 14px;
  margin-bottom: 12px;
}

.calling-overlay.minimized .calling-actions {
  gap: 20px;
}

.calling-overlay.minimized .action-btn {
  width: 44px;
  height: 44px;
  font-size: 16px;
}

.calling-overlay.minimized .calling-action-item gap {
  gap: 4px;
}

.calling-overlay.minimized .calling-action-item span {
  font-size: 10px;
}

@keyframes callEntrance {
  from {
    opacity: 0;
    transform: scale(1.1);
  }

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

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(129, 5, 189, 0.4);
  }

  70% {
    box-shadow: 0 0 0 20px rgba(129, 5, 189, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(129, 5, 189, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.order-group-header.order-tag-pill {
  background: #FFF;
  border-radius: 10px;
  padding: 5px 15px;
  width: fit-content;
  margin-top: 4px;
}

.order-product-label {
  font-size: 12px;
  font-weight: 600;
  color: #8105BD;
  margin-bottom: 6px;
}

.order-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.order-field {
  width: 100%;
  border: 0.5px solid #8105BD;
  background: white;
  padding: 4px 12px;
  font-size: 12px;
  color: #8105BD;
  outline: none;
  border-radius: 5px;
  transition: all 0.2s;
}

.order-field::placeholder {
  color: #8105BD;
  opacity: 0.7;
}

.order-field:focus {
  border-color: #8105BD;
  background: #FCF8FF;
}

/* Horizontal Field Layout (Purple Theme) */
.order-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0.5px solid #8105BD;
  background: white;
  padding: 4px 12px;
  border-radius: 5px;
}

.order-fields+.order-field-row {
  margin-top: 5px;
}

.order-field-label {
  font-size: 12px;
  font-weight: 600;
  color: #8105BD;
  flex-shrink: 0;
}

.order-field-value {
  border: none;
  background: transparent;
  width: 100%;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: #000;
  outline: none;
  padding: 0;
}

.order-field-value:read-only {
  cursor: default;
}

.order-add-product-btn {
  background: none;
  border: none;
  color: #8105BD;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  margin-top: 4px;
}

.order-add-product-btn:hover {
  color: #8105BD;
}

.order-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border: 0.5px solid #8105BD;
  border-radius: 5px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #000;
  background: white;
}

.order-footer {
  display: flex;
  gap: 8px;
  padding: 12px 20px 18px 20px;
  flex-wrap: wrap;
}

.order-btn {
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

/* Order Success View */
.order-success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}

.order-success-icon {
  width: 80px;
  height: 80px;
  background: #FCF8FF;
  border: 1px solid #8105BD;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.order-success-icon i {
  font-size: 40px;
  color: #8105BD;
}

.order-success-title {
  font-size: 30px;
  font-weight: 800;
  color: #8105BD;
  margin-bottom: 30px;
  text-align: center;
}

.order-success-details {
  width: 100%;
}

.order-success-details .order-field-row.no-border {
  border: none;
  background: transparent;
  padding: 8px 0;
  margin-bottom: 0;
}

.tag-pill-mini {
  background: white;
  border: 0.5px solid #E2E8F0;
  border-radius: 20px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}

.tag-pill-mini .tag-arrow-shape {
  width: 16px !important;
  height: 8px !important;
}

/* Mascot Overlay */
.mascot-overlay {
  position: fixed;
  /* Full screen */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0.8s;
  pointer-events: none;
}

.mascot-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mascot-container {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mascot-overlay.show .mascot-container {
  transform: scale(1.2);
  /* Zoom in effect */
}

.mascot-robot {
  width: 320px;
  height: 320px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 15px 25px rgba(0, 181, 173, 0.3));
}

.mascot-robot img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}

.mascot-robot img.active {
  display: block;
}

.floating-icon {
  position: absolute;
  font-size: 32px;
  /* Bigger icons */
  color: #00B5AD;
  opacity: 0.8;
  animation: float 3s ease-in-out infinite;
}

.icon-1 {
  top: 10%;
  left: 15%;
  animation-delay: 0s;
  color: #81E6D9;
  font-size: 40px;
}

.icon-2 {
  top: 25%;
  right: 10%;
  animation-delay: 0.5s;
  color: #EDF2F7;
  font-size: 36px;
}

.icon-3 {
  bottom: 20%;
  left: 20%;
  animation-delay: 1s;
  color: #38B2AC;
  font-size: 44px;
}

@keyframes float {

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

  50% {
    transform: translateY(-15px);
  }
}

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

.order-btn-back {
  background-color: #8E8E8E;
  color: white;
}

.order-btn-reset {
  background-color: #8E8E8E;
  color: white;
}

.order-btn-submit {
  background-color: #8105BD;
  color: white;
}

.order-btn-print {
  background-color: #A033DD;
  color: white;
}

/* Order Tag Popup */
.order-tag-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 250px;
  background: white;
  border-radius: 12px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  display: none;
  flex-direction: column;
  padding: 12px;
  z-index: 1000;
  margin-bottom: 5px;
}

.order-tag-popup.show {
  display: flex;
}

.order-tag-search-container {
  display: flex;
  align-items: center;
  background: #FCF8FF;
  border: 1px solid #8105BD;
  border-radius: 8px;
  padding: 5px 10px;
  margin-bottom: 12px;
}

.order-tag-search-container img {
  margin-right: 8px;
  flex-shrink: 0;
}

.order-tag-search-container input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: #8105BD;
  width: 100%;
}

.order-tag-search-container input::placeholder {
  color: #8105BD;
  opacity: 0.6;
}

.order-tag-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.order-tag-list::-webkit-scrollbar {
  width: 4px;
}

.order-tag-list::-webkit-scrollbar-thumb {
  background: #E0E0E0;
  border-radius: 10px;
}

.order-tag-item {
  display: flex;
  align-items: center;
  padding: 4px 0;
  cursor: pointer;
  transition: background 0.2s;
  gap: 12px;
}

.order-tag-item:hover {
  background: #F5F5F5;
}

.tag-arrow-shape {
  width: 32px;
  height: 16px;
  display: inline-block;
  background-color: #8105BD;
  clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
  flex-shrink: 0;
}

.tag-arrow-shape.hollow {
  background-color: #8105BD;
}

/* === Responsive Design (Tablet & Mobile) === */
/* === Tablet Landscape & Small Desktop Optimization (1024px - 1366px) === */
@media (min-width: 992px) and (max-width: 1366px) {

  .info-sidebar-right,
  .order-sidebar-right {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    width: 320px !important;
    flex-shrink: 0 !important;
    z-index: 1000 !important;
    background-color: white !important;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.05) !important;
    border-left: 1px solid rgba(129, 5, 189, 0.1) !important;
  }

  .chat-header {
    padding: 10px 20px !important;
    margin: 10px 15px !important;
  }

  .chat-user-info .contact-name {
    font-size: 16px !important;
  }

  .chat-user-info .avatar {
    width: 40px !important;
    height: 40px !important;
  }

  .info-sidebar-right .info-header h1,
  .order-sidebar-right .order-header h1 {
    font-size: 20px !important;
    letter-spacing: 0px !important;
  }

  .info-sidebar-right .info-header,
  .order-sidebar-right .order-header {
    background: white !important;
    padding: 12px 0 !important;
    border-radius: 52px !important;
    width: 100% !important;
    margin: 0 0 15px 0 !important;
    border: 0.5px solid #D9D9D9 !important;
    box-shadow: 0px 2px 4px 0px #D9D9D9 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
  }

  .info-sidebar-content,
  .info-sidebar-right .back-button-footer,
  .order-sidebar-content,
  .order-sidebar-right .order-footer {
    min-width: auto !important;
  }

  .info-sidebar-content {
    padding: 0 15px !important;
  }

  .info-sidebar-right .info-header::before,
  .order-sidebar-right .order-header::before {
    left: 25px !important;
    width: 16px !important;
    height: 16px !important;
    content: '' !important;
    background-color: #D9D9D9 !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .info-sidebar-right .info-header::after,
  .order-sidebar-right .order-header::after {
    right: 25px !important;
    width: 16px !important;
    height: 16px !important;
    content: '' !important;
    background-color: #D9D9D9 !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* Shrink header icons and badges */
  .header-action-img {
    width: 22px !important;
    height: 22px !important;
  }

  .edit-icon-img {
    width: 18px !important;
    height: 18px !important;
  }

  .header-user-img {
    width: 16px !important;
    height: 16px !important;
  }

  .chat-header .d-flex.align-items-center.gap-3 {
    gap: 10px !important;
  }

  .chat-header .rounded-pill.px-3.py-1 {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 12px !important;
  }

  /* === Specific Optimization for Mini-Landscape (1024x600) === */
  @media (max-width: 1150px) {
    .contacts-sidebar {
      width: 300px !important;
    }


    .chat-search-bar {
      top: 90px !important;
    }

    .chat-header {
      margin: 8px 10px !important;
      padding: 8px 15px !important;
    }

    .chat-user-info .contact-name {
      font-size: 16px !important;
    }

    .chat-header .d-flex.align-items-center.gap-3 {
      gap: 5px !important;
    }

    .chat-header .rounded-pill.px-3.py-1 {
      font-size: 11px !important;
      padding: 2px 8px !important;
    }

    /* Shrink Chat Input Area */
    .chat-input-area {
      padding: 10px 20px !important;
    }

    .input-container {
      padding: 6px 20px !important;
      border-radius: 30px !important;
      gap: 10px !important;
    }

    .input-container textarea {
      font-size: 15px !important;
      padding: 4px 0 !important;
    }

    .input-action-icon,
    .input-action-img {
      font-size: 22px !important;
      width: 22px !important;
      height: 22px !important;
    }

    .send-icon-img {
      width: 30px !important;
      height: 30px !important;
    }

    /* Restore Premium Sidebar Headers Benchmark */
    .info-sidebar-right .info-header h1,
    .order-sidebar-right .order-header h1 {
      font-size: 20px !important;
      letter-spacing: 0px !important;
      line-height: 1.2 !important;
    }

    .info-sidebar-right .info-header,
    .order-sidebar-right .order-header {
      padding: 12px 0 !important;
      border-radius: 52px !important;
      margin: 0 0 15px 0 !important;
    }

    .info-sidebar-right .info-header::before,
    .order-sidebar-right .order-header::before {
      left: 25px !important;
      width: 16px !important;
      height: 16px !important;
    }

    .info-sidebar-right .info-header::after,
    .order-sidebar-right .order-header::after {
      right: 25px !important;
      width: 16px !important;
      height: 16px !important;
    }

    /* Shrink Chat Header Icons */
    .header-action-img {
      width: 24px !important;
      height: 24px !important;
    }

    .header-user-img {
      width: 18px !important;
      height: 18px !important;
    }

    .chat-header .d-flex.align-items-center.gap-3 {
      gap: 8px !important;
    }

    /* Compress Nav Sidebar for short height */
    .nav-sidebar-thin {
      padding: 15px 0 !important;
    }

    .top-nav-icons,
    .bottom-nav-icons {
      gap: 20px !important;
    }

    .nav-icon {
      height: 38px !important;
      font-size: 20px !important;
    }

    .nav-custom-icon {
      width: 24px !important;
      height: 24px !important;
    }

    .theme-toggle {
      gap: 4px !important;
      padding: 3px !important;
    }

    .theme-toggle .toggle-item img {
      width: 16px !important;
      height: 16px !important;
    }
  }
}

@media (max-width: 991px) {

  /* Refined Bottom Navigation for a Premium Look */
  .nav-sidebar-thin {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 65px !important;
    /* Slightly taller for breathing room */
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 15px !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border-right: none !important;
    border-top: 1px solid rgba(129, 5, 189, 0.1) !important;
    z-index: 2000 !important;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05) !important;
    border-radius: 20px 20px 0 0 !important;
    /* Curved top corners */
  }

  /* Hide bottom nav when in chat view to save space */
  .app-wrapper.mobile-show-chat .nav-sidebar-thin {
    display: none !important;
  }

  /* Messenger Style Bottom Bar Overrides */
  .top-nav-icons,
  .bottom-nav-icons,
  .profile-avatar-wrapper {
    display: contents !important;
    /* Flatten structure for equal spacing */
  }

  /* Ensure the main bar distributes icons equally */
  .nav-sidebar-thin {
    display: flex !important;
    justify-content: space-evenly !important;
    /* Perfectly equal gaps */
    align-items: center !important;
    padding: 0 10px !important;
  }

  /* Hide non-primary icons on the mobile bar */
  #nav-notify-item,
  #profile-avatar-trigger,
  #nav-theme-toggle,
  #nav-logout-item {
    display: none !important;
  }

  /* Show primary icons and menu trigger */
  #nav-chat-item,
  #nav-cart-item,
  #nav-report-item,
  #nav-settings-item,
  #nav-menu-trigger {
    display: flex !important;
  }

  .nav-icon {
    width: 64px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    padding-left: 0 !important;
    /* Reset desktop padding */
  }

  .nav-icon.active::before {
    display: none !important;
  }

  .nav-icon.active {
    background-color: var(--primary-light) !important;
    padding-left: 0 !important;
    /* Reset desktop padding */
  }

  .nav-icon i {
    font-size: 20px !important;
  }

  .nav-custom-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .nav-icon.active i,
  .nav-icon.active .nav-custom-icon {
    color: var(--primary-color) !important;
    transform: scale(1.05) !important;
  }

  /* Mobile More Menu Popup Styles */
  .mobile-nav-popup {
    position: fixed !important;
    bottom: 85px !important;
    right: 20px !important;
    width: 280px !important;
    background: white !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    display: none !important;
    /* Managed by JS/class */
    flex-direction: column !important;
    z-index: 3000 !important;
    padding: 20px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .mobile-nav-popup.show {
    display: flex !important;
  }

  .mobile-popup-header {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 20px !important;
    padding-left: 5px !important;
  }

  .mobile-popup-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }

  .mobile-popup-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
  }

  .mobile-popup-inner-icon {
    width: 50px !important;
    height: 50px !important;
    background: #F7F7F7 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s !important;
  }

  .mobile-popup-item:active .mobile-popup-inner-icon {
    background: #EAEAEA !important;
  }

  .mobile-popup-item span {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #666 !important;
    text-align: center !important;
  }

  /* Special style for theme toggle clone in grid */
  .theme-toggle-clone {
    color: var(--primary-color) !important;
  }

  .contacts-sidebar {
    width: 100%;
    border-right: none;
    display: flex;
  }

  .contacts-sidebar,
  .order-dashboard-container,
  .report-dashboard-container,
  .setting-dashboard-container {
    padding-bottom: 85px !important;
    /* Extra padding for the floating bar */
  }

  /* Profile popup - Compact mobile version */
  .profile-popup {
    position: fixed !important;
    bottom: 85px !important;
    top: auto !important;
    left: auto !important;
    right: 15px !important;
    width: 260px !important;
    z-index: 4000 !important;
    padding: 15px 18px !important;
    border-radius: 15px !important;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .profile-popup .popup-title {
    font-size: 18px !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
  }

  .profile-popup .profile-user-info {
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
  }

  .profile-popup .profile-user-info img {
    width: 32px !important;
    height: 32px !important;
  }

  .profile-popup .profile-user-name {
    font-size: 18px !important;
  }

  .social-icons-group {
    margin-bottom: 10px !important;
    gap: 10px !important;
  }

  .profile-menu-item {
    padding: 8px 0 !important;
    gap: 12px !important;
  }

  .profile-menu-item span {
    font-size: 15px !important;
  }

  .chat-main {
    width: 100%;
    display: none;
  }

  /* Messenger-Style Interaction */
  .app-wrapper.mobile-show-chat .contacts-sidebar {
    display: none;
  }

  .app-wrapper.mobile-show-chat .chat-main {
    display: flex;
  }

  #mobile-back-btn {
    display: flex !important;
  }

  .chat-header {
    margin: 10px;
    padding: 10px 15px;
  }

  .chat-user-info .avatar {
    width: 40px;
    height: 40px;
  }

  .chat-user-info .contact-name {
    font-size: 16px;
  }

  .chat-content {
    padding: 15px;
  }

  .chat-input-area {
    padding: 15px;
  }

  .input-container textarea {
    font-size: 14px;
  }

  /* Emoji and other popups on mobile */
  .attachment-menu,
  .snippet-menu,
  .emoji-picker-popup {
    width: 70vw !important;
    left: 15vw !important;
    bottom: 100px !important;
    position: fixed !important;
    z-index: 4000 !important;
    min-width: auto !important;
    padding: 8px !important;
  }

  .attachment-item {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }

  .attachment-item i {
    font-size: 20px !important;
    width: 24px !important;
  }

  .snippet-menu {
    padding: 10px !important;
  }

  .snippet-item {
    padding: 8px 0 !important;
  }

  .snippet-tag {
    font-size: 11px !important;
    padding: 1px 8px !important;
  }

  .snippet-text {
    font-size: 12px !important;
  }

  .emoji-item {
    font-size: 20px !important;
    padding: 5px !important;
  }

  .emoji-category-btn {
    font-size: 16px !important;
    padding: 5px !important;
  }

  /* Adjust sidebars to be full-screen fixed overlays on mobile */
  .tags-sidebar-right,
  .info-sidebar-right,
  .order-sidebar-right {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3000 !important;
    border-left: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .tags-sidebar-right .tag-header h1,
  .info-sidebar-right .info-header h1,
  .order-sidebar-right .order-header h1 {
    font-size: 26px !important;
  }

  /* Remove active highlight on mobile/tablet - Higher specificity */
  .app-wrapper .contacts-sidebar .contact-item.active {
    border-left: none !important;
    background-color: transparent !important;
  }
}

/* === Ultra-Mobile Refinements (< 576px) === */
@media (max-width: 576px) {
  .chat-header {
    margin: 5px;
    padding: 8px 10px;
    gap: 8px !important;
  }

  /* Hide Unassigned badge to prevent overlap, but keep Call and Info */
  .chat-header .rounded-pill.px-3.py-1 {
    display: none !important;
  }

  /* Restore Call and Info icons */
  #info-sidebar-trigger,
  #call-btn {
    display: flex !important;
  }

  .header-action-img {
    width: 20px !important;
    height: 20px !important;
  }

  .chat-user-info {
    gap: 8px !important;
    flex: 1;
    min-width: 0;
  }

  .chat-user-info .avatar {
    width: 36px !important;
    height: 36px !important;
  }

  .chat-user-info .contact-name {
    font-size: 13px !important;
  }

  .edit-icon-img {
    height: 14px !important;
    width: auto !important;
  }

  .header-tag-container {
    height: 22px !important;
    padding: 2px 10px 2px 8px !important;
  }

  .header-tag-container .tag-badge-arrow {
    font-size: 9px !important;
    padding-left: 22px !important;
  }

  .header-tag-container .tag-badge-arrow::before {
    width: 14px !important;
    height: 10px !important;
  }

  .header-tag-container .tag-badge-arrow::after {
    left: 14px !important;
    border-top-width: 5px !important;
    border-bottom-width: 5px !important;
  }

  #mobile-back-btn {
    margin-right: 5px !important;
  }

  #mobile-back-btn i {
    font-size: 16px !important;
  }

  /* Message Bubbles */
  .message {
    max-width: 85% !important;
  }

  .message-bubble {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Chat Footer / Input */
  .chat-input-area {
    padding: 10px !important;
  }

  .input-container {
    padding: 10px 15px !important;
    gap: 8px !important;
    overflow: visible !important;
    align-items: flex-end !important;
    border-radius: 24px !important;
  }

  .input-actions {
    gap: 10px !important;
  }

  .input-action-icon,
  .input-action-img {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
  }

  .input-container textarea {
    font-size: 14px !important;
  }

  .send-icon-img {
    width: 24px !important;
    height: 24px !important;
  }

  .emoji-category-btn {
    font-size: 14px !important;
    padding: 4px 6px !important;
  }

  /* Rename Popup Fix */
  .rename-popup {
    position: fixed !important;
    top: 19% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-width: 280px !important;
    max-width: 90vw !important;
    width: auto !important;
    padding: 25px !important;
    border-radius: 15px !important;
    display: none;
    z-index: 10001 !important;
    background: white !important;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25) !important;
  }

  .rename-popup.show {
    display: block !important;
  }

  .rename-title {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }

  .rename-input-group input {
    font-size: 13px !important;
    padding: 10px 15px !important;
    color: var(--primary-color) !important;
    border: 1.5px solid var(--primary-color) !important;
    border-radius: 10px !important;
    width: 100% !important;
    outline: none !important;
  }

  .rename-actions {
    gap: 12px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .rename-back-btn,
  .rename-submit-btn {
    padding: 12px 20px !important;
    font-size: 11px !important;
    flex: 1 !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
  }

  .rename-back-btn {
    background-color: #f0f0f0 !important;
    color: #666 !important;
    border: none !important;
  }

  .rename-submit-btn {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: none !important;
  }

  /* Header Tag Popups Fix (< 576px) */
  .header-tag-popup {
    position: fixed !important;
    top: 9vh !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 90vw !important;
    max-width: 350px !important;
    max-height: 80vh !important;
    transform: none !important;
    overflow-y: auto !important;
    z-index: 10002 !important;
    background: white !important;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25) !important;
    border-radius: 10px !important;
    border: 1px solid #D9D9D9 !important;
    padding: 10px 5px 20px 5px !important;
  }

  .add-tag-popup-content,
  #header-add-tag-popup {
    position: fixed !important;
    top: 12vh !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 85vw !important;
    max-width: 320px !important;
    max-height: 75vh !important;
    transform: none !important;
    overflow-y: auto !important;
    z-index: 10003 !important;
    background: white !important;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25) !important;
    border-radius: 10px !important;
    border: 1px solid #D9D9D9 !important;
    padding: 10px 5px 20px 5px !important;
  }

  .header-tag-popup .management-title {
    text-align: center !important;
    padding: 20px 15px 10px 15px !important;
  }

  .add-tag-popup-content .popup-header h2 {
    font-size: 18px !important;
  }

  .add-tag-popup-content .popup-body {
    padding: 15px !important;
  }

  /* Chat Search Bar Fix (< 576px) */
  .chat-search-bar {
    position: fixed !important;
    top: 80px !important;
    left: 2.5vw !important;
    width: 95vw !important;
    right: auto !important;
    padding: 10px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25) !important;
    z-index: 10001 !important;
    gap: 8px !important;
  }

  .search-input-group {
    padding: 5px 10px !important;
    gap: 5px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .search-input-group input {
    font-size: 13px !important;
    width: 100% !important;
  }

  .search-results-counter {
    font-size: 12px !important;
    margin-right: 5px !important;
    white-space: nowrap !important;
  }

  .search-results-counter::after {
    right: -6px !important;
    height: 16px !important;
  }

  .search-nav-actions {
    gap: 8px !important;
  }

  .search-nav-arrows {
    gap: 8px !important;
  }

  .search-nav-arrows i {
    font-size: 14px !important;
  }

  .close-search-btn {
    width: 18px !important;
    height: 18px !important;
  }


  /* Minimized Call Overlay Fix (< 576px) */
  .calling-overlay.minimized {
    width: 90vw !important;
    height: auto !important;
    min-height: auto !important;
    top: 10px !important;
    left: 5vw !important;
    right: 5vw !important;
    padding: 15px !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 20px rgba(129, 5, 189, 0.2) !important;
  }

  .calling-overlay.minimized .calling-avatar {
    width: 50px !important;
    height: 50px !important;
  }

  .calling-overlay.minimized .calling-avatar img {
    border-width: 2px !important;
  }

  .calling-overlay.minimized .calling-name {
    font-size: 18px !important;
    margin-bottom: 2px !important;
  }

  .calling-overlay.minimized .calling-status {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  .calling-overlay.minimized .calling-actions {
    gap: 15px !important;
  }

  .calling-overlay.minimized .action-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }

  .calling-overlay.minimized .calling-action-item span {
    font-size: 9px !important;
  }

  .calling-overlay.minimized .minimize-call-btn {
    top: 8px !important;
    left: 8px !important;
    font-size: 14px !important;
  }

  /* Mobile Search Filters Fix (< 991px) */
  .quick-filter-dropdown {
    position: fixed !important;
    top: 150px !important;
    /* Moved down a bit */
    left: 5vw !important;
    width: 90vw !important;
    max-width: 360px !important;
    right: auto !important;
    border-radius: 15px !important;
    padding: 15px !important;
    /* Slightly reduced padding */
    z-index: 9999 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  }

  .filter-header {
    font-size: 14px !important;
    /* Slightly smaller */
    text-align: left !important;
    padding-left: 10px !important;
    margin-bottom: 12px !important;
  }

  .filter-items-scroll {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    /* 5 columns for smaller icons */
    gap: 10px !important;
    max-height: none !important;
    padding: 0 !important;
    overflow-y: visible !important;
  }

  .filter-circle {
    width: 38px !important;
    /* Smaller icons */
    height: 38px !important;
    margin: 0 auto !important;
  }

  .filter-circle i {
    font-size: 16px !important;
    /* Smaller font */
  }

  .filter-circle span {
    font-size: 7px !important;
  }

  /* Tag Filter Popup Mobile Overrides */
  .tag-filter-popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 92vw !important;
    height: 85vh !important;
    max-height: 85vh !important;
    z-index: 10005 !important;
    overflow-y: auto !important;
    padding: 20px !important;
    border-radius: 18px !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3) !important;
    animation: fadeInDown 0.3s ease !important;
  }

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translate(-50%, -60%);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }

  .tag-popup-container {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .tag-left-column {
    width: 100% !important;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding-bottom: 15px !important;
  }

  .tag-right-column {
    width: 100% !important;
    padding: 0 !important;
  }

  .tag-list {
    max-height: 200px !important;
    overflow-y: auto !important;
    padding-right: 5px !important;
  }

  .tag-item {
    padding: 10px !important;
  }

  .tag-badge-arrow {
    min-width: 100px !important;
    font-size: 12px !important;
  }
}


/* Ensure Layout anchors don't have default underlining */
.nav-icon a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Hide Sidebar Toggle on Mobile */
@media (max-width: 991px) {

  #sidebar-collapse-trigger,
  #sidebar-expand-trigger {
    display: none !important;
  }
}

/* Reduced gap for sidebar icons on short screens */
@media (max-height: 670px) {
  .top-nav-icons,
  .bottom-nav-icons {
    gap: 20px !important;
  }
}