:root {
  --font-xs: 11px;
  --font-sm: 12px;
  --font-md: 13px;
  --font-lg: 14px;
  --font-xl: 16px;
}
* {
  margin: 0; 
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  background: #0b0f19;
  color: #e2e8f0;
}
.app {
  display: flex;
  height: 100vh;
}

.logo {
  font-weight: bold;
  margin-bottom: 15px;
}
/* ARROW */
.arrow {
  transition: transform 0.3s ease;
}

.section.active .arrow {
  transform: rotate(180deg);
}
.menu-item:hover {
  background: #1e293b;
}

.menu-item.active {
  background: #1e293b;
  color: #3b82f6;
  width:80%; 
}

/* CHANNELS (CLEAN SCROLL SYSTEM) */
#channels {
  position: relative;
  padding-bottom: 20px; /* space for arrow */
}
.channels-wrapper {
  max-height: 160px;
  overflow-y: auto;
}

/* Hide scrollbar */
.channels-wrapper::-webkit-scrollbar {
  display: none;
}
/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 5px;
  right: 8px;   /* KEY: right side */
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.scroll-indicator i {
  font-size: 12px;
  color: #94a3b8;
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.scroll-indicator::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;

  background: linear-gradient(to top, #0f172a, transparent);
  z-index: -1;
}
/* Hide scroll arrow when section is collapsed */
.section-items.closed .scroll-indicator {
  opacity: 0;
  pointer-events: none;
}
.scroll-indicator {
  opacity: 1;
  transition: opacity 0.3s ease;
}
/* BADGE */


/* PROFILE */
.profile {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #1e293b;
  padding-top: 10px;
}

.avatar {
  background: #2563eb;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* MIDDLE PANEL */
.middle {
  width: 275px;
  border-right: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
  position: relative;  /* ADD THIS LINE */
}

.middle-header {
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0f172a;
  border-bottom: 1px solid #1e293b;
}

/* HEADER */
.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-left h3 {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.middle-header {
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0f172a;
  border-bottom: 1px solid #1e293b;
  overflow: hidden;
  white-space: nowrap;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.status-badge {
  font-size: 11px;
  background: #1e293b;
  padding: 2px 8px;
  border-radius: 8px;
}

/* ACTION BUTTONS */
.header-actions {
  display: flex;
  gap: 8px;
}

.icon-btn {
  background: transparent;
  border: none;
  color: #64748b;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.icon-btn:hover {
  background: #1e293b;
  color: #cbd5f5;
}

/* TABS */
.tabs {
  padding: 8px 12px;
  border-bottom: 1px solid #1e293b;
  display: flex;
  gap: 12px;
}

.tabs span {
  color: #64748b;
  cursor: pointer;
  font-size: 12px;
}

.tabs span:hover {
  color: #cbd5f5;
}

.tabs .active {
  color: white;
  font-weight: 600;
}

/* CHAT */
.chat {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-empty {
  text-align: center;
  color: #64748b;
}

.chat-empty .icon {
  font-size: 40px;
}
.empty {
  font-size: 12px;
    color: #cbd5f5;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-top: 3px;
}

/* FLOAT BUTTON */
.floating-btn {
  position: fixed;
  right: 20px;
  top: 45%;                 
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: none;
 transform: translateY(-50%);
  transition: transform 0.3s ease;
  background: #1e293b;
  color: #cbd5f5;
  font-size: 20px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 0 0 4px rgba(30, 41, 59, 0.4),
              0 10px 20px rgba(0, 0, 0, 0.6);

  z-index: 99999;
}
/* MOVE LEFT WHEN PANEL OPEN */
.floating-btn.shift-left {
transform: translateY(-50%) translateX(var(--shift));
  transition: transform 0.3s ease;
}


.floating-btn:hover {
  /* background: #334155; */
    transform: translateY(-50%) scale(1.1);
}
.floating-btn.shift-left:hover {
  transform: translateY(-50%) translateX(var(--shift));
}
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}
#labels .menu-item {
  padding-left: 20px;
  position: relative;
}

#labels .menu-item::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}

/* ALL LABEL COLORS */

[data-label="awaiting-payment"]::before { background: #22c55e; }
[data-label="closed-lost"]::before { background: #ef4444; }
[data-label="closed-won"]::before { background: #10b981; }
[data-label="future-course"]::before { background: #a855f7; }
[data-label="info-collected"]::before { background: #06b6d4; }

[data-label="issues"]::before { background: #f59e0b; }
[data-label="lea-new-assigned"]::before { background: #8b5cf6; }
[data-label="lead-new-class"]::before { background: #ef4444; }
[data-label="negotiating"]::before { background: #facc15; }
[data-label="non-negotiating"]::before { background: #3b82f6; }
[data-label="pricing-given"]::before { background: #2563eb; }
#labels .menu-item.active {
  background: #1e293b;
  color: #3b82f6;
}

#labels .menu-item:hover {
  background: #1e293b;
}
/* LABEL SCROLL SYSTEM */
#labels {
  position: relative;
  padding-bottom: 20px;
}

.labels-wrapper {
  max-height: 160px;
  overflow-y: auto;
}

/* Hide scrollbar */
.labels-wrapper::-webkit-scrollbar {
  display: none;
}

/* Scroll indicator positioning */
.label-scroll {
  position: absolute;
  bottom: 5px;
  right: 8px;
}

/* Hide when collapsed */
.section-items.closed .label-scroll {
  opacity: 0;
  pointer-events: none;
}
/* DROPDOWN */
.profile {
  position: relative;
  cursor: pointer;
}

.profile-dropdown {
  position: absolute;
  bottom: 60px;
  left: 0;
  width: 260px;
  background: #1e293b;
  border-radius: 10px;
  padding: 15px;
  display: none;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  z-index: 100;
}

/* SHOW */
.profile-dropdown.active {
  display: flex;
}

/* AVAILABILITY */
.availability {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.status-btn {
  background: #334155;
  border: none;
  color: #fff;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

/* DOT */
.status-btn .dot {
  width: 8px;
  height: 8px;
  background: gray;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

/* AUTO OFFLINE */
.auto-offline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

/* SWITCH */
.switch {
  position: relative;
  width: 35px;
  height: 18px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  background: #334155;
  border-radius: 20px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.3s;
}

.slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}

.switch input:checked + .slider {
  background: #3b82f6;
}

.switch input:checked + .slider::before {
  transform: translateX(17px);
}

/* ITEMS */
.dropdown-item {
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-item:hover {
  background: #334155;
}

.logout {
  color: #ef4444;
}
/* DROPDOWN */
.status-dropdown {
  position: relative;
}

.status-options {
  position: absolute;
  top: 35px;
  right: 0;
  background: #0f172a;
  border-radius: 8px;
  padding: 5px;
  display: none;
  width: 120px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

.status-options.active {
  display: block;
}

.status-item {
  padding: 6px 8px;
  cursor: pointer;
  font-size: 13px;
  border-radius: 6px;
}

.status-item:hover {
  background: #1e293b;
}

/* DOT COLORS */
.dot.online { background: #22c55e; }
.dot.away { background: #facc15; }
.dot.busy { background: #ef4444; }
.dot.offline { background: gray; }

/* AVATAR STATUS */
.avatar {
  position: relative;
}

.avatar::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #0f172a;
}
.avatar.online::after { background: #22c55e; }
.avatar.away::after { background: #facc15; }
.avatar.busy::after { background: #ef4444; }
.avatar.offline::after { background: gray; }
/* ================= MAIN AREA FIX ================= */

.main-area {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

/* Fix middle + chat alignment */
.main-view {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Ensure chat expands properly */
.chat {
  flex: 1;
  background: #0b0f19;
}

/* ================= SEARCH OVERLAY ================= */

.search-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0b0f19;
  z-index: 50;

  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* Hide class */
.hidden {
  display: none !important;
}

/* Back button */
.back-btn {
  background: none;
  border: none;
  color: #cbd5f5;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 20px;
}

.back-btn:hover {
  color: white;
}

/* Center search content */
.search-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Search input box */
.search-box-main {
  width: 400px;
  background: #1e293b;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-box-main input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: white;
}

.search-box-main i {
  color: #64748b;
}

/* Shortcut text */
.shortcut {
  font-size: 11px;
  color: #64748b;
}

/* Empty state */
.search-empty {
  margin-top: 30px;
  text-align: center;
  color: #64748b;
}

.search-empty i {
  font-size: 25px;
  margin-bottom: 10px;
}
/* ================= ANIMATION ================= */

.search-view {
  position: absolute;
  inset: 0;
  background: #0b0f19;
  z-index: 10;
  display: flex;
  flex-direction: column;

  opacity: 0;
  transform: scale(0.98);
  transition: all 0.3s ease;
}

/* ACTIVE STATE */
.search-view.animate-in {
  opacity: 1;
  transform: scale(1);
}

/* BACK BUTTON ANIMATION */
.back-btn {
  position: absolute;   /* 🔥 KEY */
  top: 20px;
  left: 20px;

  background: #1e293b;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  color: #cbd5f5;
  cursor: pointer;

  z-index: 20;

  /* animation */
  transform: translateX(40px);
  opacity: 0;
  transition: all 0.35s ease;
}

/* when active */
.search-view.animate-in .back-btn {
  transform: translateX(0); /* slide left */
  opacity: 1;
}

/* SEARCH CONTAINER */
.search-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;

  justify-content: center;
  transition: all 0.35s ease;
}

/* MOVE UP WHEN ACTIVE */
.search-view.animate-in .search-container {
  justify-content: flex-start;
  padding-top: 60px;
}

/* SEARCH BOX ANIMATION */
.search-box-main {
  width: 500px;
  border: 1px solid #2563eb;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  gap: 10px;

  transition: all 0.35s ease;
}

/* EXPAND WIDTH */
.search-view.animate-in .search-box-main {
  width: 700px;
  transform: translateY(-10px);
}
.view-more-btn {
  text-align: center;
  color: #4facfe;
  font-size: 12px;
  font-weight: 600;
  padding: 12px 0;
  cursor: pointer !important;
}
.agent-item {
  display: flex;
  align-items: center;
}
.system-msg.ghost {
  color: #ef4444;
}

.system-msg.ghost:hover::after {
  background: #7f1d1d;
  color: #fff;
}
/* INPUT */
.search-box-main input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #e2e8f0;
}

/* EMPTY TEXT FADE IN */
.search-empty {
  margin-top: 60px;
  text-align: center;
  color: #64748b;

  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.search-view.animate-in .search-empty {
  opacity: 1;
  transform: translateY(0);
}
/* THREAD ITEM */
.thread {
  padding: 8px 10px;
  border-bottom: 1px solid #1c2333;
  cursor: pointer;
  display: flex;
  align-items: flex-start; 
}
.thread:hover {
  background: #0f172a;
}

/* HEADER ROW */
.thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LEFT SIDE (AVATAR + INFO) */
.thread-header .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2f6fed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 10px;
  font-size: 11px;
  flex-shrink: 0;
}

/* INFO SECTION */
.thread-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px; /* more breathing space */
}

/* NAME */
.thread-info .name {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TAG */
.thread-info .tag {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TIME (RIGHT SIDE) */
.thread-header .time {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
}
.thread .avatar::after {
  display: none;
}
.avatar {
  font-size: 14px;
  letter-spacing: 0.5px;
}
.chat-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;          /* 🔥 IMPORTANT */
  overflow: hidden;
}
.avatar::after {
  display: none !important;
  content: none !important;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;              /* 🔥 IMPORTANT */
  padding: 12px 16px;

  border-bottom: 1px solid #1c2333;
  background: #0b0f19;

  box-sizing: border-box;   /* 🔥 ensures full width */
}

.chat-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.chat-input {
  display: flex;
  border-top: 1px solid #1c2333;
}

.chat-input input {
  flex: 1;
  padding: 10px;
  border: none;
  outline: none;
}

.chat-input button {
  padding: 10px 15px;
  background: #2f6fed;
  border: none;
  color: #fff;
  cursor: pointer;
}
#scheduleBtn {
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #334155;
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

#scheduleBtn:not(:disabled):hover {
  background: #334155;
  color: #fff;
}
#sendBtn {
  background: #2563eb;
  color: #fff;
  border: none;
  height: 30px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

#sendBtn:not(:disabled):hover {
  background: #1d4ed8;
}

.hidden {
  display: none;
}
/* HEADER */
.chat-header {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #1c2333;
  background: #0b0f19;
}

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

.user-info .name {
  font-weight: 600;
  font-size: 14px;
}

.user-info .sub {
  font-size: 12px;
  color: #8b95a7;
}

.chat-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rt {
  color: #ff4d4f;
  font-size: 12px;
}

.resolve-btn {
  background: #1e293b;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}

/* MAIN CONTAINER */
.chat-input {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;

  padding: 14px 14px 10px;
  margin: 10px;

  display: flex;
  flex-direction: column;
  gap: 10px; /* 🔥 spacing between sections */
}

/* TOP PILLS */
.input-top {
  display: flex;
  gap: 8px;
}

.pill {
  background: #1e293b;
  border: none;
  color: #9ca3af;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
}

.pill.active {
  background: #2563eb;
  color: white;
}

/* TEXTAREA */
.chat-input textarea {
  width: 100%;
  min-height: 70px;

  background: transparent;
  border: none;
  outline: none;

  color: #cbd5f5;
  font-size: 13px;
  line-height: 1.5;

  resize: none;
}

/* BOTTOM BAR */
.input-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;  /* 🔥 FIX ALIGNMENT */
}

/* LEFT ICONS */
.left-icons {
  display: flex;
  gap: 8px;
  align-items: center; /* 🔥 FIX */
}

.icon-btn {
  background: #1e293b;
  border: none;
  color: #9ca3af;

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 6px;
  cursor: pointer;
}

/* RIGHT BUTTONS */
.right-actions {
  display: flex;
  align-items: center; /* 🔥 FIX */
  gap: 10px;
}

/* SCHEDULE */
.schedule {
  background: #3b2f1f;
  color: #fbbf24;
  border: none;

  height: 32px;
  padding: 0 14px;

  border-radius: 6px;
  font-size: 12px;
}

/* SEND */
.send {
  background: #1e40af;
  color: #93c5fd;
  border: none;

  height: 32px;
  padding: 0 14px;

  border-radius: 6px;
  font-size: 12px;
}
/* WRAPPER */
.toggle-wrapper {
  position: relative;
  display: inline-flex;
  background: #1e293b;
  border-radius: 20px;
  padding: 3px;
}

/* BUTTONS */
.toggle-btn {
  position: relative;
  z-index: 2;
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 12px;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 20px;
  transition: color 0.2s;
}

.toggle-btn.active {
  color: #fff;
}

/* SLIDER BACKGROUND */
.toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  width: 50%;
  background: #2563eb;
  border-radius: 20px;
  transition: transform 0.25s ease;
}
.toggle-wrapper {
  box-shadow: inset 0 0 0 1px #111827;
}
.input-top {
  display: flex;
  gap: 8px;
}

/* BASE */
.pill {
  background: #1e293b;
  border: none;
  color: #9ca3af;

  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;

  cursor: pointer;
  transition: all 0.2s ease;
}

/* ACTIVE */
.pill.active {
  background: #2563eb;
  color: #fff;
}

/* HOVER */
.pill:hover {
  background: #334155;
}
/* 🔹 PILLS (Reply / Private Note) */
.pill {
  padding: 4px 10px;       /* reduced */
  font-size: 11px;         /* smaller text */
  border-radius: 16px;
}
.action-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  margin-left: 15px;
}

/* common style */
.MSGICON,
.CALLICON {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e293b;
  color: #94a3b8;
  cursor: pointer;
  transition: 0.2s;
  font-size: 13px;
  border: 1px solid #2d3f55;
}

.MSGICON:hover,
.CALLICON:hover {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* 🔹 ICON BUTTONS */
.icon-btn {
  width: 28px;             /* was ~32 */
  height: 26px;
  font-size: 12px;         /* smaller icon */
}

/* 🔹 SCHEDULE BUTTON */
.schedule {
  height: 26px;
  padding: 0 10px;
  font-size: 11px;
}

/* 🔹 SEND BUTTON */
.send {
  height: 26px;
  padding: 0 12px;
  font-size: 11px;
}

/* 🔹 GAP REDUCTION (IMPORTANT FOR COMPACT LOOK) */
.input-bottom {
  gap: 5px;
}

.left-icons {
  gap: 5px;
}

.right-actions {
  gap: 5px;
}
/* DEFAULT (REPLY MODE) */
.chat-input {
  background: #0f172a;
  transition: background 0.2s ease;
}

/* PRIVATE NOTE MODE */
.chat-input.private-mode {
  background: #2a251f;
}
/* Right Bar */
/* ================= RIGHT PANEL (NEW - SAFE) ================= */

.crm-right-panel {
  position: fixed;
  top: 0;
  right: 0;

  width: 300px;
  height: 100vh;

  background: #0f172a;
  border-left: 1px solid #1e293b;

  display: flex;
  flex-direction: column;

  transform: translateX(100%);
  transition: 0.3s ease;

  z-index: 9999;
}

/* ACTIVE STATE */
.crm-right-panel.open {
  transform: translateX(0);
}

/* HEADER */
.crm-rp-header {
  display: flex;
  justify-content: space-between;
  padding: 14px;
  border-bottom: 1px solid #1e293b;
  font-weight: 600;
}

/* CLOSE BTN */
.crm-rp-close {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
}

/* PROFILE */
.crm-rp-profile {
  display: flex;
  gap: 10px;
  padding: 15px;
}

.crm-rp-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #064e3b;

  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.crm-rp-name {
  font-size: 14px;
  font-weight: 600;
}

.crm-rp-status {
  font-size: 12px;
  color: #94a3b8;
}

/* SECTIONS */
.crm-rp-section {
  padding: 14px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

.crm-rp-section::-webkit-scrollbar {
  width: 4px;
}

.crm-rp-section::-webkit-scrollbar-track {
  background: transparent;
}

.crm-rp-section::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 10px;
}

.crm-rp-section::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.6);
}

.crm-rp-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* FIELD */
.crm-rp-field {
  margin-bottom: 12px;
  position: relative;
}

.crm-rp-field label {
  font-size: 11px;
  color: #94a3b8;
  display: block;
  margin-bottom: 4px;
}

.crm-rp-select {
  background: #111827;
  border: 1px solid #1e293b;
  padding: 8px;
  border-radius: 6px;
  font-size: 12px;
}

/* BUTTON */
.crm-rp-btn {
  background: red;
  border: none;
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 6px;
  color: #cbd5f5;
  cursor: pointer;
}

/* EMPTY TEXT */
.crm-rp-empty {
  font-size: 12px;
  color: #64748b;
}

/* HEADER ROW */
.crm-rp-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}

/* TOGGLE BUTTON */
.crm-rp-toggle {
  background: none;
  border: none;
  color: #cbd5f5;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

/* CONTENT ANIMATION */
.crm-rp-content {
  margin-top: 10px;
  transition: all 0.25s ease;
}

/* COLLAPSED STATE */
.crm-rp-content.collapsed {
  display: none;
}
/* SECTION CONTAINER */
.side-section {
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 8px;
  margin-top: 12px;
  overflow: hidden;
}

/* HEADER */
.side-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #0f172a;
}

/* BODY */
.side-body {
  padding: 12px;
}

/* EMPTY TEXT */
.empty-text {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 10px;
}

/* BUTTON */
.macro-btn {
  background: red;
  border: none;
  padding: 8px 10px;
  font-size: 12px;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.macro-btn:hover {
  background: #2563eb;
}
.crm-rp-btn:hover {
  background: #2563eb;
}

/* COLLAPSE */
.side-section.collapsed .side-body {
  display: none;
}
/* INFO ITEM */
.info-item {
  margin-bottom: 12px;
}

.info-item label {
  font-size: 12px;
  color: #9ca3af;
  display: block;
  margin-bottom: 4px;
}

.info-value {
  font-size: 13px;
  color: #fff;
}

/* SELECT */
.info-select {
  width: 100%;
  padding: 8px;
  background: #0f172a;
  border: 1px solid #1f2937;
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
}
.crm-right-panel {
  overflow-y: auto;
  overflow-x: visible; /* 🔥 IMPORTANT */
}
/* 🔥 THIN + SMOOTH SCROLLBAR */

/* Chrome, Edge, Safari */
.crm-right-panel::-webkit-scrollbar {
  width: 4px; /* 🔥 thin */
}

.crm-right-panel::-webkit-scrollbar-track {
  background: transparent;
}

.crm-right-panel::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3); /* light gray */
  border-radius: 10px;
  transition: all 0.3s ease;
}

/* Hover effect */
.crm-right-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.6);
}

/* 🔥 Firefox support */
.crm-right-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}
.crm-right-panel::-webkit-scrollbar {
  width: 0px;
}

.crm-right-panel:hover::-webkit-scrollbar {
  width: 4px;
}
.crm-right-panel {
  scroll-behavior: smooth;
}
/* PARTICIPANTS HEADER ROW */
.participants-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 10px;
}

/* PARTICIPANT ROW */
.participant {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* SMALL AVATAR */
.avatar.small {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

/* ACTIVE USER */
.avatar.active {
  background: #1e40af;
}

/* TEXT */
.participant-text {
  font-size: 12px;
  color: #94a3b8;
  margin-left: 8px;
}
input:disabled {
  opacity: 0.6;
  cursor: allowed;
}
/* TOGGLE WRAPPER */
.toggle-pill {
  position: relative;
  display: flex;
  width: 180px;
  background: #1e293b;
  border-radius: 20px;
  padding: 3px;
}

/* BUTTONS */
.toggle-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 12px;
  padding: 3px 0;
  cursor: pointer;
  z-index: 2;
  border-radius: 20px;
  transition: color 0.2s ease;
}

.toggle-btn.active {
  color: #fff;
}

/* SLIDER */
.toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 50%;
  height: calc(100% - 6px);

  background: #2563eb;
  border-radius: 20px;

  transition: transform 0.25s ease;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* MESSAGE BUBBLE */
.msg {
  max-width: 70%;
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: 10px;
  font-size: 13px;
  word-wrap: break-word;
    display: inline-flex;      /* 🔥 KEY FIX */
  flex-direction: column;
  width: fit-content;
}
.msg.sent {
  margin-left: auto;
}

.msg.received {
  margin-right: auto;
}
.msg-text {
  white-space: pre-wrap;
  word-break: break-word;
}

/* SENT (RIGHT SIDE) */
.msg.sent {
  background: #2563eb;
  color: white;
  margin-left: auto;
  border-bottom-right-radius: 3px;
}

/* RECEIVED (LEFT SIDE) */
.msg.received {
  background: #1e293b;
  color: #cbd5f5;
  margin-right: auto;
  border-bottom-left-radius: 3px;
}
/* MESSAGE BASE */
.msg {
  max-width: 70%;
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: 10px;
  font-size: 13px;
  display: flex;
  flex-direction: column;

  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s ease;
}

/* SHOW ANIMATION */
.msg.show {
  opacity: 1;
  transform: translateY(0);
}

/* TEXT */
.msg-text {
  margin-bottom: 4px;
}

/* META (TIME + TICK) */
.msg-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  opacity: 0.8;
}

.msg-meta .time {
  font-size: 12px;
}

/* SENT */
.msg.sent {
  background: #2563eb;
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 3px;
}

/* RECEIVED */
.msg.received {
  background: #1e293b;
  color: #cbd5f5;
  margin-right: auto;
  border-bottom-left-radius: 3px;
}

/* TICK */
.tick {
  font-size: 11px;
  letter-spacing: -1px;
}
/* 🔥 CHAT SCROLLBAR (THIN + CLEAN) */
.chat-messages::-webkit-scrollbar {
  width: 4px;   /* 👈 thickness */
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;  /* no ugly background */
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3); /* soft gray */
  border-radius: 10px;
}

/* Hover effect */
.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.6);
}
/* 🔥 TEXTAREA SCROLLBAR */
.chat-input textarea::-webkit-scrollbar {
  width: 4px;
}

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

.chat-input textarea::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 10px;
}

.chat-input textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.6);
}
.emoji-picker {
  position: absolute;
  bottom: 80px;
  left: 20px;
  background: #1e293b;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 180px;
}

.emoji-picker span {
  cursor: pointer;
}
.date-separator {
  text-align: center;
  font-size: 11px;
  color: #94a3b8;
  margin: 10px 0;
}
.chat-img {
  max-width: 200px;
  border-radius: 8px;
  margin-bottom: 5px;
}

.file-msg {
  background: #1e293b;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
}
.recording {
  background: red;
  color: white;
  border-radius: 50%;
}
.preview-box {
  background: #1e293b;
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 8px;
  position: relative;
}

.preview-img {
  max-width: 120px;
  border-radius: 6px;
}

.remove-preview {
  position: absolute;
  top: 5px;
  right: 8px;
  cursor: pointer;
  font-size: 12px;
}
.preview-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-item {
  position: relative;
}

.preview-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}

.remove-preview {
  position: absolute;
  top: -5px;
  right: -5px;
  background: red;
  color: white;
  border-radius: 50%;
  font-size: 10px;
  padding: 2px 5px;
  cursor: pointer;
}
.file-wrapper {
  position: relative;
  display: inline-block;
}

/* download button */
.download-btn {
  position: absolute;
  bottom: 5px;
  right: 5px;

  background: rgba(0,0,0,0.6);
  color: white;
  text-decoration: none;

  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;

  cursor: pointer;
}

/* hover effect */
.download-btn:hover {
  background: rgba(0,0,0,0.8);
}
.download-btn {
  opacity: 0;
  transition: 0.2s;
}

.file-wrapper:hover .download-btn {
  opacity: 1;
}
/* FILE CARD — non-image/audio attachments (docs, pdfs, zips, etc.) */
.file-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  padding: 10px 12px;
  border-radius: 10px;
  max-width: 240px;
  text-decoration: none;
  transition: background 0.15s ease;
  margin-bottom: 4px;
}

.file-card:hover {
  background: rgba(255,255,255,0.12);
}

.file-card .file-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.file-card .file-info {
  min-width: 0;
  flex: 1;
}

.file-card .file-name {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.file-card .file-type {
  color: #94a3b8;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.file-card .file-download-icon {
  color: #94a3b8;
  font-size: 15px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.file-card:hover .file-download-icon {
  color: #fff;
}
/* PRIVATE NOTE MESSAGE */
.msg.note {
  background: #2a251f;
  border-left: 3px solid #fbbf24;
}

/* Optional label */
.msg.note::before {
  content: "Private Note";
  font-size: 10px;
  color: #fbbf24;
  margin-bottom: 2px;
}
.note-label {
  font-size: 10px;
  color: #fbbf24;
  margin-bottom: 3px;
}
/* WHEN PANEL OPEN */
.main-view.panel-open .chat {
  margin-right: 300px; /* same as panel width */
  transition: margin 0.3s ease;
}
.msg-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.msg-avatar {
  width: 18px;
  height: 18px;
  background: #334155;
  border-radius: 50%;
  font-size: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.msg-sender {
  font-size: 11px;
  color: #94a3b8;
}
/* MESSAGE ROW (avatar + bubble) */
.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 6px 0;
}

/* RIGHT SIDE (SENT) */
.msg-row.sent {
  justify-content: flex-end;
}

/* LEFT SIDE (RECEIVED) */
.msg-row.received {
  justify-content: flex-start;
}

/* AVATAR OUTSIDE */
.msg-avatar-out {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #334155;
  font-size: 11px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}
.rbac-container {
  padding: 20px;
  background: #0e1a2f;
  color: #fff;
}

/* ===== RBAC PAGE FIX ===== */

/* MAIN WRAPPER */
.altron-rbac-container {
  max-width: 1200px;
  margin: auto;
  padding: 30px;
}

/* ===== HEADER CARD ===== */
.altron-rbac-header-card {
  background: linear-gradient(135deg, #16243d, #0e1a2f);
  border-radius: 24px;
  padding: 26px 30px;
  margin-bottom: 30px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.45);
}

.altron-rbac-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.altron-rbac-title h1 {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.altron-rbac-title p {
  color: #9fb0c9;
  font-size: 15px;
}

.altron-header-actions {
  display: flex;
  gap: 14px;
}

/* BUTTONS */
.altron-btn {
  padding: 10px 18px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.altron-btn-primary {
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  color: #000;
}

.altron-btn-secondary {
  background: #1c2940;
  color: #fff;
  border: 1px solid #2f3e5c;
}

/* ===== ROLES GRID ===== */
.altron-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 30px;
}

/* ===== ROLE CARD ===== */
.altron-role-card {
  background: linear-gradient(180deg, #16243d, #0e1a2f);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: #fff;
}

.altron-role-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 50px rgba(0,0,0,0.5);
}

.altron-role-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.altron-role-icon {
  background: #20365f;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.altron-edit-icon {
  cursor: pointer;
  opacity: 0.6;
  font-size: 18px;
  color: #9fb0c9;
}

.altron-role-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}

.altron-role-desc {
  color: #9fb0c9;
  font-size: 13px;
  margin-bottom: 14px;
}

.altron-role-stats {
  display: flex;
  justify-content: space-between;
  color: #c7d2e3;
  font-size: 13px;
  margin-bottom: 14px;
}

.altron-role-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.altron-role-tags span {
  background: #1c2f50;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 11px;
  color: #c7d2e3;
}

.altron-more {
  background: transparent !important;
  border: 1px dashed #4facfe !important;
  color: #4facfe !important;
}

/* ===== SUMMARY STATS ===== */
.altron-rbac-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 10px;
}

.altron-summary-card {
  background: linear-gradient(180deg, #16243d, #0e1a2f);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.altron-summary-text span {
  color: #9fb0c9;
  font-size: 13px;
  display: block;
}

.altron-summary-text h2 {
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  margin-top: 6px;
}

.altron-summary-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.altron-shield  { background: #1f3a5f; }
.altron-users   { background: #0f5132; }
.altron-gear    { background: #3a1f5f; }

/* ===== PERMISSION MATRIX POPUP ===== */
.altron-pm-drawer {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 99999;
}

.altron-pm-drawer.active {
  display: flex;
}

.altron-pm-content {
  width: 90%;
  max-width: 1100px;
  max-height: 85vh;
  background: #ffffff;
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #111;
}

.altron-pm-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.altron-pm-header h2 {
  font-size: 22px;
  color: #111;
}

.altron-pm-header p {
  color: #666;
  font-size: 14px;
  margin-top: 4px;
}

.altron-pm-close {
  font-size: 22px;
  cursor: pointer;
  color: #888;
}

.altron-pm-close:hover { color: #000; }

.altron-pm-matrix {
  overflow-y: auto;
  overflow-x: auto;
  flex: 1;
}

/* ===== ADD ROLE MODAL ===== */
.altron-role-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 99999;
}

.altron-role-modal.active {
  display: flex;
}

.altron-role-modal-box {
  width: 580px;
  max-height: 85vh;
  background: #0f172a;
  border-radius: 18px;
  padding: 25px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  color: #e2e8f0;
}

.altron-role-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.altron-role-modal-header h2 {
  font-size: 20px;
  color: #fff;
}

.altron-close-role {
  cursor: pointer;
  font-size: 20px;
  color: #9fb0c9;
}

.altron-form-group {
  margin-bottom: 16px;
}

.altron-form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 13px;
  color: #9fb0c9;
}

.altron-form-group input,
.altron-form-group textarea {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #1e293b;
  background: #1e293b;
  color: #fff;
  font-size: 14px;
  box-sizing: border-box;
}

.altron-permissions-section h3 {
  color: #fff;
  margin: 15px 0 10px;
  font-size: 16px;
}

.altron-permission-group {
  margin-bottom: 18px;
}

.altron-permission-group h4 {
  color: #4facfe;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #1e293b;
}

.altron-role-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* ===== PERMISSION TOGGLE ROWS ===== */
.altron-perm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #1e293b;
  font-size: 13px;
  color: #c7d2e3;
}

.altron-toggle-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  flex-shrink: 0;
}

.altron-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.altron-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #1c2f50;
  border-radius: 34px;
  transition: 0.3s;
  border: 1px solid #2f4c7a;
}

.altron-toggle-slider:before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: #4a5a7a;
  border-radius: 50%;
  transition: 0.3s;
}

.altron-toggle-switch input:checked + .altron-toggle-slider {
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border-color: #4facfe;
}

.altron-toggle-switch input:checked + .altron-toggle-slider:before {
  transform: translateX(22px);
  background: #fff;
}

/* ===== SHARED BUTTONS ===== */
.altron-cancel-btn {
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5f5;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}

.altron-save-btn {
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #000;
}

/* ===== ROLE DETAILS MODAL ===== */
.altron-role-details-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 99999;
}

.altron-role-details-modal.active {
  display: flex;
}

.altron-role-details-box {
  width: 860px;
  max-height: 85vh;
  background: linear-gradient(180deg, #16243d, #0e1a2f);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
  overflow-y: auto;
  color: #fff;
}

.altron-rd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.altron-rd-header h2 { font-size: 22px; color: #fff; }

.altron-rd-close {
  cursor: pointer;
  font-size: 20px;
  color: #9fb0c9;
}

.altron-rd-tabs {
  display: flex;
  gap: 20px;
  margin: 18px 0;
  border-bottom: 1px solid #2a3b5c;
}

.altron-rd-tab {
  padding-bottom: 10px;
  cursor: pointer;
  color: #9fb0c9;
  font-size: 14px;
}

.altron-rd-tab.active {
  color: #4facfe;
  border-bottom: 2px solid #4facfe;
}

.altron-rd-panel { display: none; }
.altron-rd-panel.active { display: block; }

.altron-rd-panel input,
.altron-rd-panel textarea {
  width: 100%;
  padding: 8px;
  margin: 8px 0 15px;
  border-radius: 6px;
  border: 1px solid #2a3b5c;
  background: #1e293b;
  color: #fff;
  box-sizing: border-box;
}

.altron-rd-panel label {
  color: #9fb0c9;
  font-size: 13px;
}

.altron-rd-stats {
  display: flex;
  gap: 20px;
  margin: 10px 0 15px;
  color: #c7d2e3;
  font-size: 14px;
}

.altron-rd-save-btn {
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 10px;
  font-weight: 600;
  color: #000;
}

.altron-rd-users-header {
  margin-bottom: 14px;
}

.altron-rd-users-header button {
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.altron-rd-table {
  width: 100%;
  border-collapse: collapse;
}

.altron-rd-table th,
.altron-rd-table td {
  padding: 10px;
  border-bottom: 1px solid #2a3b5c;
  font-size: 13px;
  color: #c7d2e3;
}

.altron-rd-permission-group {
  margin-bottom: 20px;
}

.altron-rd-permission-group h4 {
  color: #4facfe;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2a3b5c;
}

.altron-rd-activity-box {
  padding: 16px;
  background: #1e293b;
  border-radius: 10px;
  color: #c7d2e3;
  font-size: 14px;
  line-height: 1.8;
}

/* ===== ADD USER MODAL ===== */
.altron-add-user-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 99999;
}

.altron-add-user-modal.active {
  display: flex;
}

.altron-add-user-box {
  width: 440px;
  background: linear-gradient(180deg, #16243d, #0e1a2f);
  border-radius: 18px;
  padding: 25px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
  color: #fff;
}

.altron-add-user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.altron-add-user-header h2 {
  font-size: 18px;
  color: #fff;
}

.altron-add-user-close {
  cursor: pointer;
  font-size: 20px;
  color: #9fb0c9;
}

.altron-add-user-body { margin-bottom: 10px; }

.altron-add-user-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
/* ===== RBAC PAGE LAYOUT FIX ===== */

#rbacPage {
  display: none;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #0b1323;
}

.altron-rbac-container {
  max-width: 100%;
  padding: 30px 40px;
  box-sizing: border-box;
}

/* HEADER CARD - full width */
.altron-rbac-header-card {
  width: 100%;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 30px 36px;
  margin-bottom: 36px;
}

.altron-rbac-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.altron-rbac-title h1 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}

.altron-rbac-title p {
  color: #9fb0c9;
  font-size: 15px;
  margin: 0;
}

.altron-header-actions {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
}

/* ROLES GRID - 3 columns */
.altron-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}

/* ROLE CARD */
.altron-role-card {
  padding: 24px;
  border-radius: 20px;
  min-height: 200px;
  box-sizing: border-box;
}

.altron-role-card h3 {
  font-size: 18px;
  margin: 14px 0 6px;
}

.altron-role-desc {
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.altron-role-stats {
  font-size: 14px;
  margin-bottom: 16px;
}

/* SUMMARY CARDS - 3 columns */
.altron-rbac-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.altron-summary-card {
  padding: 28px;
  border-radius: 20px;
  box-sizing: border-box;
}

.altron-summary-text h2 {
  font-size: 40px;
  margin-top: 8px;
}

/* Responsive - 2 columns on smaller screens */
@media (max-width: 1100px) {
  .altron-roles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .altron-rbac-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .altron-roles-grid {
    grid-template-columns: 1fr;
  }
  .altron-rbac-summary {
    grid-template-columns: 1fr;
  }
}
/* ===== SIDEBAR BOTTOM ITEMS FIX ===== */

/* Setting & Overview sections */
.sidebar .section {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #cbd5f5;
  padding: 8px;
  margin-top: 8px;
  border-radius: 6px;
  cursor: pointer;
  justify-content: flex-start;
}

.sidebar .section:hover {
  background: #1e293b;
}

.sidebar .section i {
  font-size: 13px;
  flex-shrink: 0;
  width: 16px;
}

/* Remove the arrow space for Setting & Overview 
   since they have no dropdown */
.sidebar .section .arrow {
  display: none;
}

/* Role & Access Control */
#rbacMenu {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #cbd5f5;
  padding: 8px;
  margin-top: 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#rbacMenu:hover {
  background: #1e293b;
}

#rbacMenu i {
  font-size: 13px;
  flex-shrink: 0;
  width: 16px;
}
/* ===== SIDEBAR SCROLLER FIX ===== */
.sidebar {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Hide horizontal scrollbar completely */
.sidebar::-webkit-scrollbar {
  width: 0px;
}

/* ===== PROFILE SECTION FIX ===== */
.profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #1e293b;
  margin-top: auto;
  overflow: hidden;
}

.profile .avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  font-size: 11px;
  flex-shrink: 0;
}

.profile div {
  overflow: hidden;
}

.profile div div {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile div small {
  font-size: 10px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.order-card {
  padding: 12px;
  margin-bottom: 10px;
  background: #1e1e2f;
  color: white;
  border-radius: 8px;
  cursor: grab;
}

.order-card.dragging {
  opacity: 0.5;
}

.order-card.over {
  border: 2px dashed #4CAF50;
}
.field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.assign-btn {
  background: transparent;
  border: none;
  color: #4da3ff;
  font-size: 10px;
  cursor: pointer;
}

.assign-btn:hover {
  text-decoration: underline;
}
.crm-rp-select.dropdown {
  position: relative;
  cursor: pointer;
}


.dropdown-list {
  animation: dropdownFade 0.2s ease;
}

@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  padding: 10px;
  cursor: pointer;
  color: #fff;
}

.dropdown-item:hover {
  background: #334155;
}

.hidden {
  display: none;
}
.assign-wrapper {
  position: relative;
  width: 100%;
}

#assignedAgent {
  position: relative;
  width: 100%;
}


.agent-box {
  position: relative;
  background:#111827;
  border:1px solid #1e293b;
  padding:8px 10px;
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff;
}


.agent-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-size: 12px;
  color: #9ca3af;
  border-bottom: 1px solid #334155;
}

.agent-search {
  padding: 8px;
}

.agent-search input {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #2563eb;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
}

.agent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
}

.agent-item:hover {
  background: #334155;
}

.agent-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.agent-name {
  font-size: 13px;
}

.agent-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}
/* ===== ASSIGN DROPDOWN PRO UI ===== */

.assign-wrapper {
  position: relative;
}

.agent-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 6px;

  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 9999;

  display: none;
  overflow: hidden;
}

/* HEADER */
.agent-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-size: 12px;
  color: #9ca3af;
  border-bottom: 1px solid #334155;
}

/* SEARCH */
.agent-search {
  padding: 8px;
}

.agent-search input {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #2563eb;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
}

/* LIST */
#agentList {
  max-height: 200px;
  overflow-y: auto;
}

/* ITEM */
.agent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
}

.agent-item:hover {
  background: #334155;
}

/* AVATAR */
.agent-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
}

/* NAME */
.agent-name {
  font-size: 13px;
  color: #fff;
}

/* STATUS DOT */
.agent-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  margin-left: auto;
}
.agent-dropdown.active {
  display: block;
}
/* ===== AGENT DROPDOWN IMPROVEMENT ===== */

.agent-dropdown {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* search focus */
.agent-search input:focus {
  border-color: #4facfe;
  outline: none;
}

/* scroll */
#agentList {
  max-height: 220px;
  overflow-y: auto;
}

/* hover */
.agent-item:hover {
  background: #334155;
  border-radius: 6px;
}

#labelDropdown {
  width: 100%;
  margin-top: 6px;
}
#labelDropdown {
  max-height: 250px;
  overflow-y: auto;
}
.resolve-box {
  position: relative;
  background: #111827;
  border: 1px solid #1e293b;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  min-width: 110px;
}
.resolve-wrapper {
  position: relative;
}

#resolveActionDropdown {
  position: absolute;
  top: 110%;
  right: 0;
  width: 180px;
  z-index: 9999;
}
.resolve-combined {
  display: inline-flex;
  border: 1px solid #334155;
  border-radius: 8px;
  overflow: hidden;
  background: #1e293b;
}

/* LEFT PART */
.resolve-main {
  background: transparent;
  border: none;
  color: #fff;
  padding: 6px 14px;
  cursor: pointer;
}

/* RIGHT PART (arrow) */
.resolve-arrow {
  background: transparent;
  border: none;
  border-left: 1px solid #334155;
  color: #cbd5f5;
  padding: 6px 10px;
  cursor: pointer;
}

/* HOVER EFFECT */
.resolve-main:hover,
.resolve-arrow:hover {
  background: #334155;
}
.system-msg {
  text-align: center;
  font-size: 11px;
  color: #94a3b8;
  margin: 10px 0;
   position: relative;
  cursor: default;
}
/* 🔥 HOVER TOOLTIP */
.system-msg:hover::after {
  content: attr(data-time);
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.chat-msg {
  display: flex;
  margin: 8px 0;
}

.chat-msg.user {
  justify-content: flex-end;
}

.chat-msg.agent {
  justify-content: flex-start;
}

.msg-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 12px;
  background: #1e293b;
  color: #fff;
  font-size: 13px;
}

.chat-msg.user .msg-bubble {
  background: #4f46e5;
}
/* ===== SIDEBAR CLEAN UI ===== */
.sidebar {
  width: 210px;
  height: 100vh;
  padding: 20px 16px;
  background: linear-gradient(180deg, #0b1323, #0a1020);
  color: #cbd5f5;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  overflow: hidden;
}

/* LOGO */
.logo {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

/* SEARCH */
.search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

/* COMPOSE */
.compose-btn {
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* MENU ITEM */
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}

.menu-item:hover {
  background: rgba(255,255,255,0.05);
}

/* ACTIVE */
.menu-item.active {
  background: linear-gradient(
    90deg,
    rgba(59,130,246,0.2),
    rgba(59,130,246,0.05)
  );
  color: #60a5fa;
}

/* BADGE */
.badge {
  background: #3b82f6;
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SECTION */
.section {
  font-size: 16px;
  font-weight: 600;
  color: #e5e7eb;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-left i {
  font-size: 18px;
  opacity: 0.85;
}

/* SUB ITEMS */
.section-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px dashed rgba(255,255,255,0.08);

  margin-left: 16px;     /* increase */
  padding-left: 16px; 
}

.section-items.closed {
  display: none;
}

/* PROFILE */
.profile {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* SEARCH BOX */
.search-box {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.search-box i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 13px;
  pointer-events: none;
  z-index: 1;
}

.search-box input {
  width: 85%;
  height: 32px;
  padding: 0 12px 0 30px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  color: #cbd5f5;
  font-size: 13px;
  backdrop-filter: blur(10px);
  outline: none;
}
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 14px;
}
/* PLACEHOLDER */
.search-box input::placeholder {
  color: #64748b;
}

/* ICON BUTTON */
.compose-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: #cbd5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.compose-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
}
.logo {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}
.section-items .menu-item {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: #9ca3af;
}

/* DOT */
.section-items .menu-item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ca3af;
}

/* OVERRIDE for label items - colored squares */
#labels .menu-item::before {
  left: 5px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 3px !important;
  background: #9ca3af; /* fallback, overridden below */
}

[data-label="awaiting-payment"]::before { background: #22c55e !important; }
[data-label="closed-lost"]::before { background: #ef4444 !important; }
[data-label="closed-won"]::before { background: #10b981 !important; }
[data-label="future-course"]::before { background: #a855f7 !important; }
[data-label="info-collected"]::before { background: #06b6d4 !important; }
[data-label="issues"]::before { background: #f59e0b !important; }
[data-label="lea-new-assigned"]::before { background: #8b5cf6 !important; }
[data-label="lead-new-class"]::before { background: #ef4444 !important; }
[data-label="negotiating"]::before { background: #facc15 !important; }
[data-label="non-negotiating"]::before { background: #3b82f6 !important; }
[data-label="pricing-given"]::before { background: #2563eb !important; }
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 3px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 10px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
}
#channels .menu-item,
#folders .menu-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  padding: 6px 8px;
  display: block;
}
.thread-channel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #64748b;
  margin-bottom: 2px;
  width: 100%;
}

.channel-name {
  color: #94a3b8;
  font-size: 10px;
}

.assigned-name {
  color: #64748b;
  font-size: 10px;
}
.thread-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.thread-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.thread-name-row .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.thread-time {
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 8px;
}
.thread-header {
  display: flex;
  align-items: center;
}

.thread-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 4px;
  flex-shrink: 0;
  min-width: 82px;
  max-width: 90px;
  padding-top: 2px;
}


.meta-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

.meta-row i {
  font-size: 10px;
  flex-shrink: 0;
}

.meta-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-item.thread {
  padding: 12px 10px;   /* increase vertical space */
  min-height: 80px;     /* 🔥 increase height (adjust as needed) */
}
.ps-wrapper {
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 20px;
}

.ps-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 25px;
}

/* CARD */
.ps-card {
  margin-bottom: 40px;
}

/* LABEL */
.ps-label {
  font-size: 13px;
  color: #cbd5f5;
  margin-bottom: 6px;
  display: block;
}

/* INPUT */
.ps-input {
  width: 100%;
  padding: 12px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: #0f172a;
  border: 1px solid #1e293b;
  color: white;
}

/* BUTTON */
.ps-btn {
  background: #2563eb;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  color: white;
  font-size: 13px;
  cursor: pointer;
}

/* AVATAR */
.ps-avatar {
  width: 60px;
  height: 60px;
  background: #2f6fed;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  font-weight: bold;
}

/* SECTION */
.ps-section {
  margin-top: 40px;
}

.ps-section h2 {
  font-size: 16px;
  margin-bottom: 15px;
}

/* ROW */
.ps-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.ps-sub {
  font-size: 12px;
  color: #64748b;
}

/* SELECT */
.ps-select {
  background: #0f172a;
  border: 1px solid #1e293b;
  padding: 10px;
  border-radius: 8px;
  color: white;
}

/* EDITOR */
.ps-editor {
  height: 120px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  margin: 10px 0 15px;
}

/* HOTKEY */
.ps-hotkeys {
  display: flex;
  gap: 20px;
}

.ps-hotkey {
  flex: 1;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 15px;
  cursor: pointer;
}

.ps-hotkey.active {
  border-color: #2563eb;
}
/* SECURITY CARD */
.ps-security-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 16px;
  margin-top: 15px;
}

.ps-security-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.ps-btn-outline {
  background: #1e293b;
  border: 1px solid #2563eb;
  color: #93c5fd;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

/* SELECT GROUP */
.ps-select-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-sound-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #0f172a;
  border: 1px solid #1e293b;
  color: #cbd5f5;
  cursor: pointer;
}

/* CHECKBOX GROUP */
.ps-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 15px 0;
}

.ps-checkbox-group label {
  font-size: 13px;
  color: #cbd5f5;
}

/* MUTED TEXT */
.ps-sub.muted {
  color: #64748b;
  font-size: 12px;
}
/* SUB TITLE */
.ps-sub-title {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 10px;
}

/* TABLE HEADER */
.ps-table-header {
  display: grid;
  grid-template-columns: 1fr 80px 140px;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 10px;
}

/* TABLE ROW */
.ps-row-table {
  display: grid;
  grid-template-columns: 1fr 80px 140px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #1e293b;
  font-size: 13px;
}

.ps-row-table span {
  color: #cbd5f5;
}

/* CHECKBOX ALIGN */
.ps-row-table input {
  margin: auto;
}

/* TOGGLE BAR */
.ps-toggle-bar {
  margin-top: 25px;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ps-toggle-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #cbd5f5;
}

/* SWITCH */
.ps-switch {
  position: relative;
  width: 40px;
  height: 20px;
}

.ps-switch input {
  display: none;
}

.ps-slider {
  position: absolute;
  cursor: pointer;
  background: #334155;
  border-radius: 20px;
  inset: 0;
  transition: 0.3s;
}

.ps-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}

.ps-switch input:checked + .ps-slider {
  background: #2563eb;
}

.ps-switch input:checked + .ps-slider::before {
  transform: translateX(20px);
}
#profileSettingsPage {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#profileSettingsPage .ps-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 40px 60px;
  box-sizing: border-box;
}
/* OVERLAY */
.cmd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* MODAL */
.cmd-modal {
  width: 600px;
  background: #0b0f19;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  overflow: hidden;
  border: 1px solid #1e293b;
}

/* HEADER */
.cmd-header {
  border-bottom: 1px solid #1e293b;
  padding: 12px;
}

.cmd-header input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #e2e8f0;
  font-size: 14px;
}

/* SECTION */
.cmd-section {
  padding: 10px 0;
}

.cmd-title {
  font-size: 12px;
  color: #64748b;
  padding: 8px 16px;
}

/* ITEM */
.cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  color: #cbd5f5;
  transition: 0.2s;
}

.cmd-item i {
  color: #94a3b8;
}

.cmd-item:hover {
  background: #1e293b;
}

.cmd-item.active {
  background: #1e293b;
  border-left: 3px solid #2563eb;
}

/* FOOTER */
.cmd-footer {
  border-top: 1px solid #1e293b;
  padding: 10px 16px;
  font-size: 12px;
  color: #64748b;
  display: flex;
  gap: 20px;
}
/* OVERLAY */
.compose-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

/* MODAL */
.compose-modal{
  width:670px;
  height:350px;
  background:#111827;
  border:1px solid #2b3548;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 25px 60px rgba(0,0,0,0.7);
}

/* ROW */
.compose-row{
  height:52px;
  display:flex;
  align-items:center;
  padding:0 18px;
  border-bottom:1px solid #263041;
}

.compose-row label{
  width:36px;
  color:#d1d5db;
  font-size:15px;
  font-weight:500;
}

.compose-row input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:#fff;
  font-size:14px;
}

.compose-row input::placeholder{
  color:#6b7280;
}

/* TEXTAREA */
.compose-message{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  resize:none;
  padding:16px 18px;
  color:#fff;
  font-size:14px;
  line-height:1.5;
}

.compose-message::placeholder{
  color:#6b7280;
}

/* FOOTER */
.compose-footer{
  height:54px;
  border-top:1px solid #263041;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
}

/* LEFT ICON */
.compose-icon-btn{
  width:38px;
  height:38px;
  border:none;
  border-radius:10px;
  background:#1f2937;
  color:#d1d5db;
  cursor:pointer;
  font-size:15px;
}

/* RIGHT ACTIONS */
.compose-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* DISCARD */
.discard-btn{
  height:38px;
  padding:0 16px;
  border:none;
  border-radius:10px;
  background:#1f2937;
  color:#e5e7eb;
  cursor:pointer;
  font-weight:500;
}

/* SEND */
.send-btn{
  height:38px;
  padding:0 18px;
  border:none;
  border-radius:10px;
  background:#3b82f6;
  color:#fff;
  cursor:pointer;
  font-weight:600;
}
#composeInbox {
  background: #111827;
  color: #fff;
  border: none;
  outline: none;
}

#composeInbox option {
  background: #111827;
  color: #fff;
  padding: 8px;
}

#composeInbox option:hover {
  background: #1e293b;
}
/* TO TAG (verified contact pill) */
.to-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1e3a5f;
  border: 1px solid #2563eb;
  color: #93c5fd;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
}

.to-tag .remove-tag {
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
}

.to-tag .remove-tag:hover {
  color: #ef4444;
}

/* FROZEN STATE */
#composeInbox:disabled,
#composeMessage:disabled,
#sendCompose:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* RICH TEXT TOOLBAR */
.rt-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rt-btn:hover {
  background: #1e293b;
  color: #fff;
}

/* RICH AREA PLACEHOLDER */
#composeRichArea:empty:before {
  content: attr(data-placeholder);
  color: #4b5563;
  pointer-events: none;
}

#composeInbox:disabled,
#composeMessage:disabled,
#sendCompose:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#composeInbox {
  background: #111827;
  color: #fff;
  border: none;
  outline: none;
}

#composeInbox option {
  background: #111827;
  color: #fff;
}

.to-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1e3a5f;
  border: 1px solid #2563eb;
  color: #93c5fd;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
}

.to-tag .remove-tag {
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
}

.to-tag .remove-tag:hover {
  color: #ef4444;
}
#composeRichArea:empty:before {
  content: attr(data-placeholder);
  color: #4b5563;
  pointer-events: none;
  display: block;
}
/* ============ CALL OVERLAY ============ */
.call-overlay {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: auto;
  height: auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 999999;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.call-overlay.call-overlay-visible {
  opacity: 1;
  pointer-events: all;
}
.call-popup {
  width: 320px;
  background: #1a1a22;
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 28px 24px 24px;
  text-align: center;
  position: relative;
  transform: translateY(60px) scale(0.96);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.34,1.4,0.64,1), opacity 0.3s ease;
}
.call-overlay.call-overlay-visible .call-popup {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.call-close-btn {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  width: 28px; height: 28px;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.call-close-btn:hover { background: rgba(255,255,255,0.13); color: #fff; }

/* BADGE */
.call-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.call-badge.incoming { color: #1D9E75; }
.call-badge.outgoing { color: #378ADD; }
.call-badge.active   { color: #FAC775; }
.call-badge-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  position: relative; flex-shrink: 0;
}
.call-badge.incoming .call-badge-pulse { background: #1D9E75; }
.call-badge.outgoing .call-badge-pulse { background: #378ADD; }
.call-badge.active   .call-badge-pulse { background: #FAC775; }
.call-badge-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: callPulse 1.5s ease-out infinite;
  opacity: 0;
}
@keyframes callPulse {
  0%   { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* AVATAR */
.call-avatar-wrap {
  position: relative;
  width: 84px; height: 84px;
  margin: 0 auto 18px;
}
.call-avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(29,158,117,0.35);
  animation: callRingPulse 2s ease-out infinite;
}
.call-avatar-wrap.outgoing::before { border-color: rgba(55,138,221,0.35); }
@keyframes callRingPulse {
  0%   { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1.15); opacity: 0; }
}
.call-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 600; color: #fff;
  font-family: "Segoe UI", sans-serif;
}
.call-avatar.incoming { background: linear-gradient(135deg, #0F6E56, #1D9E75); }
.call-avatar.outgoing { background: linear-gradient(135deg, #185FA5, #378ADD); }

/* CALLER TEXT */
.call-caller-name {
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.3px;
  margin: 0 0 4px;
  font-family: "Segoe UI", sans-serif;
}
.call-caller-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin: 0 0 22px;
  font-family: "Segoe UI", sans-serif;
}
.call-divider {
  height: 0.5px;
  background: rgba(255,255,255,0.08);
  margin: 0 0 20px;
}

/* TIMER */
.call-timer {
  font-size: 26px;
  font-weight: 300;
  color: #FAC775;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
  display: none;
  font-family: "Segoe UI", sans-serif;
}
.call-timer.call-timer-visible { display: block; }

/* ACTION BUTTONS */
.call-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
}
.call-actions-three { gap: 20px; }
.call-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.call-btn-wrap span {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.4);
  font-family: "Segoe UI", sans-serif;
}
.call-action-btn {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, filter 0.15s;
}
.call-action-btn svg { width: 24px; height: 24px; }
.call-action-btn:hover  { transform: scale(1.08); filter: brightness(1.1); }
.call-action-btn:active { transform: scale(0.95); }
.call-btn-decline  { background: #c0392b; box-shadow: 0 6px 20px rgba(192,57,43,0.4); }
.call-btn-accept   { background: #1D9E75; box-shadow: 0 6px 20px rgba(29,158,117,0.4); }
.call-btn-secondary {
  background: rgba(255,255,255,0.1);
  border: 0.5px solid rgba(255,255,255,0.15) !important;
}
.call-btn-secondary-active {
  background: rgba(255,255,255,0.22) !important;
}
/* ============ END CALL OVERLAY ============ */
/* ============ CALL TRANSCRIPT CARD ============ */
.call-transcript-card {
  background: #111827;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 16px;
  margin: 12px 8px;
  text-align: left;
}

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

.ctc-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #0F6E56, #1D9E75);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.ctc-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.ctc-meta {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.ctc-divider {
  height: 0.5px;
  background: rgba(255,255,255,0.07);
  margin: 12px 0;
}

.ctc-transcript-title {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.ctc-no-transcript {
  font-size: 12px;
  color: #475569;
  text-align: center;
  padding: 12px 0;
  line-height: 1.8;
}

.ctc-no-transcript small {
  font-size: 11px;
  color: #334155;
}

.ctc-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ctc-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
}

.ctc-line-time {
  color: #475569;
  font-size: 10px;
  white-space: nowrap;
  padding-top: 2px;
  flex-shrink: 0;
}

.ctc-line-speaker {
  color: #1D9E75;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.ctc-line-text {
  color: #cbd5f5;
  line-height: 1.5;
}
/* ============ END CALL TRANSCRIPT CARD ============ */
/* ============ PREVIOUS CALL THREADS ============ */
.prev-call-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #1e293b;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 6px;
}

.prev-call-item:hover {
  background: rgba(255,255,255,0.04);
  padding-left: 4px;
}

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

.prev-call-left {
  flex-shrink: 0;
}

.prev-call-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.prev-call-completed {
  background: linear-gradient(135deg, #0F6E56, #1D9E75);
  color: #fff;
}

.prev-call-declined {
  background: #3b0f0f;
  color: #f87171;
}

.prev-call-info {
  flex: 1;
  min-width: 0;
}

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

.prev-call-label {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5f5;
}

.prev-call-time {
  font-size: 10px;
  color: #475569;
  white-space: nowrap;
}

.prev-call-date {
  font-size: 11px;
  color: #475569;
  margin-bottom: 4px;
}

.prev-call-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(29,158,117,0.1);
  border: 1px solid rgba(29,158,117,0.2);
  color: #1D9E75;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
}
/* ============ END PREVIOUS CALL THREADS ============ */
.ctc-direction-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.03em;
  align-self: flex-start;
}
/* FILTER MODAL */
.filter-modal {
  width: 290px;
  background: #1b2232;
  border: 1px solid #2a3448;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.45);
  position: absolute;
  top: 55px;
  right: 10px;
  z-index: 9999;
  height: auto;
}
.filter-modal.hidden {
  display: none;
}
.filter-row {
  margin-bottom: 14px;
}

.filter-row:last-child {
  margin-bottom: 0;
}

/* ROW */
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 18px;
}

.filter-row:last-child {
  margin-bottom: 0;
}

/* LABEL */
.filter-row label {
  color: #f1f5f9;
  font-size: 15px;
  font-weight: 500;
}

/* SELECT */
.custom-select {
  position: relative;
}

/* BUTTON */
.select-btn {
  height: 32px;

  border: none;
  border-radius: 10px;

  background: #2a3143;

  color: #fff;

  padding: 0 12px;

  display: flex;
  align-items: center;
  gap: 10px;

  cursor: pointer;

  font-size: 14px;
}

.select-btn i {
  font-size: 11px;
  color: #cbd5e1;
}

/* LARGE WIDTH */
.custom-select.large .select-btn {
  width: 165px;

  justify-content: space-between;
}

/* DROPDOWN */
.select-dropdown {
  position: absolute;

  top: calc(100% + 8px);
  right: 0;

  min-width: 92px;

  background: #232b3d;

  border: 1px solid #334155;
  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 15px 40px rgba(0,0,0,0.5);

  z-index: 999;
}

/* LARGE DROPDOWN */
.large-dropdown {
  width: 260px;
}

/* ITEM */
.dropdown-item {
  height: 40px;

  padding: 0 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #f1f5f9;
  font-size: 14px;

  cursor: pointer;

  transition: 0.2s;
}

/* HOVER */
.dropdown-item:hover {
  background: #313a4d;
}

/* ACTIVE */
.dropdown-item.active {
  background: #3a4357;
}

/* CHECK */
.dropdown-item i {
  font-size: 12px;
  color: #fff;
}
.select-dropdown {
  display: none;
}
#permissionMatrixDrawer,
#addRoleModal,
#roleDetailsModal,
#addUserModal {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999 !important;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

#permissionMatrixDrawer.active,
#addRoleModal.active,
#roleDetailsModal.active,
#addUserModal.active {
  display: flex !important;
}
#filterModal .select-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  z-index: 10000;
  max-height: 240px;
  overflow-y: auto;
}

#filterModal .select-dropdown.open {
  display: block;
}

#filterModal .custom-select {
  position: relative;
}

#filterModal .dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #cbd5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#filterModal .dropdown-item:hover {
  background: #1e293b;
}

#filterModal .dropdown-item.active {
  color: #4facfe;
}
.profile-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #0b1323; /* matches sidebar background so it looks "cut out" */
  box-sizing: content-box;
}

.profile-status-dot.online  { background: #22c55e; }
.profile-status-dot.away    { background: #facc15; }
.profile-status-dot.busy    { background: #ef4444; }
.profile-status-dot.offline { background: #64748b; }
.live-channel-label {
  color: #ef4444;
  font-weight: 600;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ef4444;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-left: 4px;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: liveBlink 1.2s ease-in-out infinite;
}

@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}
.live-dot.offline {
  animation: none;
  opacity: 1;
}
.conv-context-menu {
  position: absolute;
  display: none;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 999999;
  min-width: 180px;
  overflow: hidden;
}

.conv-context-item {
  padding: 10px 14px;
  font-size: 13px;
  color: #f1f5f9;
  cursor: pointer;
}

.conv-context-item:hover {
  background: #334155;
}

.conv-context-item.delete {
  color: #f87171;
}

.conv-context-item.delete:hover {
  background: rgba(239, 68, 68, 0.15);
}
.search-results-list {
  width: 700px;
  margin-top: 20px;
  max-height: 60vh;
  overflow-y: auto;
  display: none;

  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

.search-results-list::-webkit-scrollbar {
  width: 5px;
}

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

.search-results-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 10px;
}

.search-results-list::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.search-result-item:hover {
  background: #1e293b;
}

.search-result-info {
  flex: 1;
  min-width: 0;
}

.search-result-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-ticket {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

.search-result-preview {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-channel {
  font-size: 11px;
  color: #64748b;
  flex-shrink: 0;
}

.search-no-results {
  text-align: center;
  color: #64748b;
  font-size: 13px;
  padding: 30px 0;
}
.search-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 12px 6px;
}
/* =============================================
   PREVIOUS CONVERSATIONS CARDS (Matches Screenshot)
   ============================================= */
.prev-conv-card {
  padding: 12px 14px;
  border-bottom: 1px solid #1c2536;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prev-conv-card:hover {
  background: rgba(255, 255, 255, 0.03);
}

.prev-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.prev-channel-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.prev-channel-tag i {
  font-size: 11px;
}

.prev-time-meta {
  font-size: 11px;
  color: #64748b;
}

.prev-contact-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 1px;
  line-height: 1.3;
}

.prev-msg-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prev-msg-row i {
  font-size: 11px;
  color: #64748b;
  flex-shrink: 0;
}

.prev-msg-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prev-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.prev-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.4;
}

/* Yellow clock badge (e.g. ⏰ 15h 42m) */
.prev-pill-badge.yellow {
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.3);
  color: #facc15;
}

/* Red flame badge (e.g. 🔥 2d 6h) */
.prev-pill-badge.red {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.prev-pill-badge.green {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}
/* =============================================
   CALL TRANSCRIPT & RECORDING CARD
   ============================================= */
.call-transcript-card {
  background: #111927;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 16px;
  margin: 12px 0;
  color: #fff;
}

.ctc-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ctc-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
}

.ctc-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.ctc-meta {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}

.ctc-direction-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.ctc-divider {
  height: 1px;
  background: #1e293b;
  margin: 14px 0;
}

.ctc-transcript-title {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.ctc-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
}

.ctc-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.ctc-line-time {
  font-size: 11px;
  color: #64748b;
  min-width: 42px;
}

.ctc-line-speaker {
  font-weight: 600;
  color: #3b82f6;
  min-width: 65px;
}

.ctc-line-text {
  color: #cbd5f5;
  flex: 1;
}
/* =============================================
   ATTACH / UNLINK THREAD STYLES
   ============================================= */
.attach-contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #1e293b;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.attach-contact-item:hover {
  background: #334155;
}

.attach-contact-info {
  display: flex;
  flex-direction: column;
}

.attach-contact-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.attach-contact-sub {
  font-size: 11px;
  color: #94a3b8;
}

.attach-select-btn {
  background: #2563eb;
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.attach-select-btn:hover {
  background: #1d4ed8;
}