/* Space out content a bit */
body {
/* padding-bottom: 20px; */
}

body.body_chat {
  background: #eef3f8;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

body.body_chat #wrapper {
  height: 100vh;
  overflow: visible;
}

body.body_chat #page-wrapper {
  padding: 0 !important;
  border-left: 0 !important;
  background: #eef3f8;
  min-height: calc(100vh - 120px) !important;
  height: calc(100vh - 120px);
  overflow: hidden;
}

body.body_chat #page-wrapper > [ui-view] {
  display: block;
  height: 100%;
  overflow: hidden;
}

body.body_chat .sidebar {
  max-height: calc(100vh - 51px);
  overflow-y: auto;
  overflow-x: hidden;
}

.navbar-menu-toggle {
  float: left;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-top: 9px;
  margin-left: 6px;
  padding: 5px 11px;
  border-color: #c9d8e6;
  border-radius: 16px;
  background: #f7fbff;
  color: #2f6f9f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.navbar-menu-toggle:hover,
.navbar-menu-toggle:focus {
  border-color: #8dbce0;
  background: #eef7ff;
  color: #1f5f8f;
  outline: 0;
}

.navbar-menu-toggle .fa {
  font-size: 12px;
}

body.body_chat .wsp-container {
  display: none !important;
}

@keyframes afBlockUiSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes afBlockUiProgress {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

body > .block-ui-container,
body .modal .block-ui-container,
body .modal-dialog .block-ui-container {
  overflow: hidden;
}

body.block-ui-active > .block-ui-container {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw;
  height: 100vh !important;
  min-height: 100vh;
  max-height: 100vh;
  z-index: 2147483000;
  overflow: hidden;
}

body.block-ui-visible > .block-ui-container > .block-ui-overlay,
body .modal .block-ui-visible > .block-ui-container > .block-ui-overlay,
body .modal-dialog .block-ui-visible > .block-ui-container > .block-ui-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 1;
  background: rgba(167, 178, 191, 0.32);
  backdrop-filter: blur(5px);
}

body.block-ui-active > .block-ui-container,
body .modal .block-ui-active > .block-ui-container,
body .modal-dialog .block-ui-active > .block-ui-container {
  cursor: default;
}

body.block-ui-visible > .block-ui-container > .block-ui-message-container,
body .modal .block-ui-visible > .block-ui-container > .block-ui-message-container,
body .modal-dialog .block-ui-visible > .block-ui-container > .block-ui-message-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  overflow: visible;
}

body.block-ui-visible > .block-ui-container > .block-ui-message-container {
  position: fixed;
  width: 100vw;
  min-height: 100vh;
}

body.block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message,
body .modal .block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message,
body .modal-dialog .block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message {
  position: relative;
  display: block;
  width: 332px;
  max-width: calc(100vw - 48px);
  min-height: 116px;
  padding: 18px 20px 18px 58px;
  border: 1px solid rgba(206, 221, 238, 0.95);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 251, 255, 0.98) 100%);
  color: transparent;
  box-shadow:
    0 18px 46px rgba(31, 60, 95, 0.16),
    0 4px 14px rgba(31, 60, 95, 0.08);
  font-size: 0;
  overflow: hidden;
}

body.block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message:before,
body .modal .block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message:before,
body .modal-dialog .block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message:before {
  content: "";
  position: absolute;
  top: 22px;
  left: 20px;
  width: 22px;
  height: 22px;
  border: 3px solid rgba(55, 125, 255, 0.2);
  border-top-color: #317cff;
  border-right-color: #73b6ff;
  border-radius: 50%;
  animation: afBlockUiSpin 0.8s linear infinite;
}

body.block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message:after,
body .modal .block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message:after,
body .modal-dialog .block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message:after {
  content: "Cargando informaci\00f3n...";
  position: absolute;
  left: 58px;
  right: 20px;
  top: 20px;
  color: #365486;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

body.block-ui-visible > .block-ui-container > .block-ui-message-container:before,
body .modal .block-ui-visible > .block-ui-container > .block-ui-message-container:before,
body .modal-dialog .block-ui-visible > .block-ui-container > .block-ui-message-container:before {
  content: "Por favor espere unos segundos...";
  position: absolute;
  left: 50%;
  top: calc(50% - 2px);
  width: 292px;
  max-width: calc(100vw - 88px);
  color: #90a2bc;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  transform: translateX(-50%);
}

body.block-ui-visible > .block-ui-container > .block-ui-message-container:after,
body .modal .block-ui-visible > .block-ui-container > .block-ui-message-container:after,
body .modal-dialog .block-ui-visible > .block-ui-container > .block-ui-message-container:after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + 26px);
  width: 292px;
  max-width: calc(100vw - 88px);
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d8ecff 0%, #d8ecff 32%, #8ecbff 46%, #317cff 50%, #8ecbff 54%, #d8ecff 68%, #d8ecff 100%);
  background-size: 200% 100%;
  pointer-events: none;
  transform: translateX(-50%);
  animation: afBlockUiProgress 1.45s linear infinite;
}

body .block-ui-message-icon,
body .block-ui-message-text {
  display: none !important;
}

body .modal .block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message,
body .modal-dialog .block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message {
  width: 304px;
  max-width: calc(100vw - 40px);
  min-height: 108px;
  padding: 17px 18px 17px 52px;
  border-radius: 14px;
}

body .modal .block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message:before,
body .modal-dialog .block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message:before {
  top: 20px;
  left: 18px;
  width: 20px;
  height: 20px;
}

body .modal .block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message:after,
body .modal-dialog .block-ui-visible > .block-ui-container > .block-ui-message-container > .block-ui-message:after {
  left: 52px;
  right: 18px;
  top: 19px;
  font-size: 14px;
}

body .modal .block-ui-visible > .block-ui-container > .block-ui-message-container:before,
body .modal-dialog .block-ui-visible > .block-ui-container > .block-ui-message-container:before {
  width: 268px;
  max-width: calc(100vw - 72px);
  top: calc(50% - 3px);
}

body .modal .block-ui-visible > .block-ui-container > .block-ui-message-container:after,
body .modal-dialog .block-ui-visible > .block-ui-container > .block-ui-message-container:after {
  width: 268px;
  max-width: calc(100vw - 72px);
  top: calc(50% + 23px);
}

.chat-top-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 69px;
  margin-left: 250px;
  padding: 10px 24px;
  background: #337ab7;
  border-top: 1px solid #2e6da4;
  border-bottom: 1px solid #2e6da4;
  box-sizing: border-box;
  transition: margin-left 0.2s ease;
}

body.body_chat.chat-navbar-collapsed .chat-top-strip {
  margin-left: 0;
}

.chat-top-strip-copy {
  min-width: 0;
}

.chat-top-strip .chat-panel-kicker {
  color: #d9edf7;
}

.chat-top-strip-title {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.chat-top-strip-filters {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.chat-top-strip-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.chat-top-strip-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.chat-top-strip-icon-button:hover,
.chat-top-strip-icon-button:focus {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  outline: 0;
}

.chat-top-strip-contacts {
  position: relative;
}

.chat-top-strip-contacts-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.chat-top-strip-contacts-button:hover,
.chat-top-strip-contacts-button:focus {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  outline: 0;
}

.chat-top-strip-contacts-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(51, 122, 183, 0.18);
  z-index: 20;
}

.chat-top-strip-contacts-search {
  position: relative;
  margin-bottom: 8px;
}

.chat-top-strip-contacts-search i {
  position: absolute;
  top: 50%;
  left: 14px;
  color: #999;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}

.chat-top-strip-contacts-search .form-control {
  height: 36px;
  padding-left: 42px;
  padding-right: 12px;
  border: 1px solid #d9e2ec;
  border-radius: 10px;
  box-shadow: none;
}

.chat-top-strip-contacts-search input.form-control {
  padding-left: 42px !important;
}

.chat-top-strip-contacts-search .form-control:focus {
  border-color: #66afe9;
  box-shadow: 0 0 6px rgba(102, 175, 233, 0.35);
}

.chat-top-strip-contact-create-row {
  margin-bottom: 8px;
}

.chat-top-strip-contact-create-button,
.chat-top-strip-contact-create-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 1px dashed #9fc3e6;
  border-radius: 10px;
  background: #f7fbff;
  color: #2e6da4;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.chat-top-strip-contact-create-button:hover,
.chat-top-strip-contact-create-button:focus,
.chat-top-strip-contact-create-inline:hover,
.chat-top-strip-contact-create-inline:focus {
  border-color: #66afe9;
  background: #fff;
  color: #2e6da4;
  box-shadow: 0 4px 10px rgba(51, 122, 183, 0.12);
  outline: 0;
  text-decoration: none;
}

.chat-top-strip-contact-item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
}

.chat-top-strip-contact-item:hover,
.chat-top-strip-contact-item:focus {
  background: #f7fbff;
  outline: 0;
}

.chat-top-strip-contact-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #5bc0de;
  color: #fff;
  font-weight: 700;
}

.chat-top-strip-contact-copy {
  flex: 1;
  min-width: 0;
}

.chat-top-strip-contact-copy strong {
  display: block;
  color: #333;
  font-size: 13px;
  line-height: 1.3;
}

.chat-top-strip-contact-copy small {
  display: block;
  margin-top: 2px;
  color: #777;
  font-size: 11px;
}

.chat-top-strip-contact-empty {
  padding: 14px 10px 8px;
  color: #777;
  font-size: 12px;
  text-align: center;
}

.chat-top-strip-contact-empty div {
  margin-bottom: 8px;
}

.chat-top-strip-contact-detail {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.chat-top-strip-contact-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: #337ab7;
  font-size: 12px;
  font-weight: 700;
}

.chat-top-strip-contact-detail-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e6eef5;
  border-radius: 12px;
  background: #f9fbfd;
  overflow: hidden;
}

.chat-top-strip-contact-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.chat-top-strip-contact-detail-copy {
  min-width: 0;
}

.chat-top-strip-contact-detail-copy strong {
  display: block;
  color: #333;
  font-size: 14px;
  line-height: 1.3;
}

.chat-top-strip-contact-detail-copy small {
  display: block;
  margin-top: 2px;
  color: #777;
  font-size: 11px;
}

.chat-top-strip-contact-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}

.chat-top-strip-contact-detail-item {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #d9e2ec;
  border-radius: 10px;
  background: #fff;
}

.chat-top-strip-contact-detail-item span {
  display: block;
  margin-bottom: 4px;
  color: #7d8a96;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.chat-top-strip-contact-detail-item strong {
  display: block;
  color: #34495a;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-top-strip-contact-detail-item.chat-top-strip-contact-detail-item-unassigned {
  border-color: #d9534f;
  background: #fff1f1;
}

.chat-top-strip-contact-detail-item-unassigned strong {
  color: #c9302c;
}

.chat-top-strip-contact-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.chat-top-strip-contact-detail-actions .btn {
  width: 100%;
  min-width: 0;
  white-space: normal;
}

.chat-top-strip-contact-detail-actions .btn:first-child {
  grid-column: 1 / -1;
}

.chat-top-strip-contact-create-form {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.chat-top-strip-contact-form-field {
  display: grid;
  gap: 4px;
  margin: 0;
}

.chat-top-strip-contact-form-label {
  color: #7d8a96;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.chat-top-strip-contact-create-form .form-control {
  height: 36px;
  border-color: #d9e2ec;
  border-radius: 10px;
  box-shadow: none;
}

.chat-top-strip-contact-create-form .form-control:focus {
  border-color: #66afe9;
  box-shadow: 0 0 6px rgba(102, 175, 233, 0.2);
}

.chat-top-strip-contact-create-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chat-top-strip-contact-create-actions .btn:first-child {
  grid-column: auto;
}

.chat-top-strip .chat-top-strip-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.chat-top-strip .chat-top-strip-filter-chip:hover,
.chat-top-strip .chat-top-strip-filter-chip:focus {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.chat-top-strip .chat-top-strip-filter-chip .chat-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 0;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: #337ab7;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.chat-top-strip .chat-top-strip-filter-chip.chat-filter-chip-active {
  border-color: #fff;
  background: #fff;
  color: #286090;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.chat-top-strip .chat-top-strip-filter-chip.chat-filter-chip-active .chat-filter-count {
  background: #337ab7;
  color: #fff;
}

@media (min-width: 992px) {
  body.body_chat #page-wrapper {
    min-height: calc(100vh - 120px) !important;
    height: calc(100vh - 120px);
  }
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-left: 15px;
  padding-right: 15px;
}

/* Custom page header */
.header {
  border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px;
}

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

/* Customize container */
@media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
}
.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}

/* Supporting marketing content */
.marketing {
  margin: 40px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-left: 0;
    padding-right: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
}

.nav>li.active>a {
text-decoration: none;
background-color: #eee;
}

.option-calendar
{background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQ9JREFUeNpiYAACXcX4/zCaEcaBASYGNIAhABBADP+BAJnGMAMsAwMgSQwzAAIIbDeyCnQ+pplogAVEXLq3AKuknlICRAGIgQsABBCKO7DyKXYkEwMBAFcA8wk6jeIGdAAPWpg30WnssYMGAAIIrgBkJ0wnMhvZjdjkCdpAdCiQC1jQg5FYAPMCE7ogst8J8anrBWzeIMRHMYBgmscBAAIIJfciJ3di5VlwpQNC6QMmz0LIj4TkBz4lDrwBo3lhNDtTxQsAAcaIq97HVi+ANQABoXKFFP0spOZmSnM/un4WUsoeUgCx+ikuzwa8NBp1AFVLEmokPmLrAYK5AFc+ppb8oIkCjGw4GgUjLgpGi2IARtkVg5lduFIAAAAASUVORK5CYII=');}


.option-search, .option-calendar
{background-position: 98%;background-repeat: no-repeat;background-size: 16px;}


.calendar-disabled {
    background-color: #eee !important;
}

.calendar-readonly {
    background-color: #fff !important;
}

.chat-inbox-page {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 24px;
  min-height: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #eef3f8;
  overflow: hidden;
}

.chat-inbox-shell {
  display: flex;
  flex: 1;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #d9e2ec;
  box-shadow: 0 14px 30px rgba(51, 122, 183, 0.12);
}

.chat-conversations-panel {
  display: flex;
  flex-direction: column;
  width: 420px;
  min-width: 420px;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid #d9e2ec;
  background: #fff;
}

.chat-panel-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 14px;
}

.chat-panel-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #337ab7;
}

.chat-panel-title {
  margin: 4px 0 0;
  font-size: 24px;
  color: #333;
}

.chat-icon-button {
  width: 36px;
  height: 36px;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  background: #fff;
  color: #337ab7;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chat-icon-button:hover,
.chat-icon-button:focus {
  border-color: #337ab7;
  background: #337ab7;
  color: #fff;
  outline: 0;
}

.chat-filter-row {
  padding: 0 16px 14px;
  white-space: nowrap;
  overflow-x: auto;
}

.chat-filter-chip {
  margin: 0 8px 8px 0;
  padding: 8px 12px;
  border: 1px solid #cfd8e3;
  border-radius: 999px;
  background: #f7fbff;
  color: #337ab7;
  font-size: 12px;
  font-weight: 600;
}

.chat-filter-chip-active {
  border-color: #2e6da4;
  background: #337ab7;
  color: #fff;
}

.chat-filter-count {
  margin-left: 6px;
  color: #999;
}

.chat-filter-chip-active .chat-filter-count {
  color: rgba(255, 255, 255, 0.85);
}

.chat-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #d9e2ec;
  background: #f7fbff;
  flex-shrink: 0;
  overflow: visible;
  z-index: 2;
}

.chat-list-header-copy {
  min-width: 0;
}

.chat-list-header-title {
  color: #337ab7;
  font-size: 13px;
  font-weight: 700;
}

.chat-list-header-subtitle {
  margin-top: 4px;
  color: #777;
  font-size: 11px;
  line-height: 1.2;
}

.chat-list-header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  background: #fff;
  color: #337ab7;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.chat-list-header-action:hover,
.chat-list-header-action:focus,
.chat-list-header-action-active {
  border-color: #66afe9;
  background: #fff;
  color: #2e6da4;
  outline: 0;
}

.chat-list-header-menu {
  position: absolute;
  top: calc(100% - 6px);
  right: 20px;
  width: 240px;
  padding: 8px;
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(51, 122, 183, 0.18);
  z-index: 10;
}

.chat-list-header-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #555;
  text-align: left;
}

.chat-list-header-menu-item:hover,
.chat-list-header-menu-item:focus {
  background: #f7fbff;
  color: #2e6da4;
  outline: 0;
}

.chat-list-header-menu-item-active {
  background: #e8f2fb;
  color: #2e6da4;
}

.chat-list-header-menu-copy {
  display: block;
  min-width: 0;
}

.chat-list-header-menu-copy strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.chat-list-header-menu-copy span {
  display: block;
  margin-top: 2px;
  color: #777;
  font-size: 11px;
  line-height: 1.35;
}

.chat-list-header-menu-item-active .chat-list-header-menu-copy span {
  color: #5b7f9d;
}

.chat-search-box {
  position: relative;
  padding: 14px 20px;
  border-bottom: 1px solid #d9e2ec;
  background: #fff;
  flex-shrink: 0;
}

.chat-search-icon {
  position: absolute;
  top: 50%;
  left: 34px;
  color: #999;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}

.chat-search-input {
  height: 42px;
  padding-left: 48px;
  border: 1px solid #ccc;
  border-radius: 12px;
  color: #555;
  background: #fcfdff;
  box-shadow: none;
}

.chat-search-input:focus {
  border-color: #66afe9;
  box-shadow: 0 0 6px rgba(102, 175, 233, 0.35);
}

.chat-search-box .form-control.chat-search-input {
  padding-left: 48px !important;
}

.chat-conversation-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.chat-conversation-card {
  display: flex;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  border-top: 1px solid #eef3f8;
  background: transparent;
  text-align: left;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-conversation-card:hover {
  background: #f7fbff;
}

.chat-conversation-card-active {
  background: #e8f2fb;
  box-shadow: inset 3px 0 0 #337ab7;
}

.chat-conversation-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  margin-right: 12px;
  border-radius: 50%;
  background: #5bc0de;
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.chat-conversation-main {
  flex: 1;
  min-width: 0;
}

.chat-conversation-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 12px;
  color: #333;
}

.chat-conversation-head span {
  color: #999;
  font-size: 12px;
}

.chat-conversation-preview {
  margin-bottom: 8px;
  color: #777;
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.chat-conversation-unread {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin-left: 12px;
  border-radius: 50%;
  background: #d9534f;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.chat-conversation-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chat-meta-pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: #dff0d8;
  color: #3c763d;
  font-size: 11px;
  font-weight: 700;
}

.chat-meta-pill-soft {
  background: #d9edf7;
  color: #31708f;
}

.chat-meta-pill-assignment {
  background: #eef3f7;
  color: #607284;
}

.chat-meta-pill.chat-meta-pill-assignment-unassigned {
  background: #d9534f;
  color: #fff;
}

.chat-source-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid transparent;
  font-size: 13px;
}

.chat-tooltip {
  position: relative;
}

.chat-source-badge[data-chat-tooltip] {
  position: relative;
}

.chat-source-badge[data-chat-tooltip]:hover::after,
.chat-tooltip:hover::after {
  content: attr(data-chat-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 8px 10px;
  border-radius: 4px;
  background: rgba(51, 51, 51, 0.95);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  text-align: left;
  z-index: 15;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.chat-source-badge[data-chat-tooltip]:hover::before,
.chat-tooltip:hover::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  border-width: 6px 5px 0;
  border-style: solid;
  border-color: rgba(51, 51, 51, 0.95) transparent transparent;
  z-index: 15;
  pointer-events: none;
}

.chat-tooltip-below:hover::after {
  top: calc(100% + 8px);
  bottom: auto;
}

.chat-tooltip-below:hover::before {
  top: calc(100% + 2px);
  bottom: auto;
  border-width: 0 5px 6px;
  border-color: transparent transparent rgba(51, 51, 51, 0.95);
}

.chat-source-badge-whatsapp {
  background: #dff0d8;
  border-color: #c7e2bf;
  color: #3c763d;
}

.chat-source-badge-instagram {
  background: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}

.chat-source-badge-facebook {
  background: #d9edf7;
  border-color: #bcdff1;
  color: #31708f;
}

.chat-source-badge-default {
  background: #f5f5f5;
  border-color: #ddd;
  color: #777;
}

.chat-thread-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.chat-thread-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #d9e2ec;
  background: #fcfdff;
  flex-shrink: 0;
  overflow: visible;
}

.chat-thread-header h3 {
  margin: 0 0 4px;
  font-size: 22px;
  color: #2e6da4;
}

.chat-thread-header-copy {
  min-width: 0;
  overflow: visible;
}

.chat-thread-contact-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.chat-thread-meta-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  overflow: visible;
}

.chat-thread-contact-action-wrap {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.chat-thread-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.chat-thread-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid #faebcc;
  border-radius: 999px;
  background: #fcf8e3;
  color: #8a6d3b;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.chat-thread-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid #d9e2ec;
  border-radius: 999px;
  background: #f7fbff;
  color: #555;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.chat-thread-contact-chip-action {
  border: 1px solid #d9e2ec;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.chat-thread-contact-chip-action:hover,
.chat-thread-contact-chip-action:focus {
  border-color: #66afe9;
  background: #fff;
  color: #2e6da4;
  box-shadow: 0 4px 10px rgba(51, 122, 183, 0.12);
  outline: 0;
}

.chat-thread-contact-chip-caret {
  color: #999;
}

.chat-thread-contact-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  padding: 8px;
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(51, 122, 183, 0.18);
  z-index: 20;
}

.chat-thread-contact-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.chat-thread-contact-menu-item:hover,
.chat-thread-contact-menu-item:focus {
  background: #f7fbff;
  color: #2e6da4;
  outline: 0;
  text-decoration: none;
}

.chat-thread-contact-feedback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: #3c763d;
  font-size: 11px;
  font-weight: 600;
}

.chat-toast-container {
  position: fixed;
  top: 96px;
  right: 24px;
  z-index: 1100;
  pointer-events: none;
}

.chat-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 300px;
  max-width: 360px;
  padding: 14px 16px;
  border: 1px solid #f0c5c4;
  border-left: 4px solid #d9534f;
  border-radius: 14px;
  background: #fff7f7;
  box-shadow: 0 10px 24px rgba(217, 83, 79, 0.16);
  color: #a94442;
  pointer-events: auto;
}

.chat-toast > .fa {
  margin-top: 2px;
  font-size: 16px;
}

.chat-toast span {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.chat-toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #a94442;
}

.chat-toast-close:hover,
.chat-toast-close:focus {
  background: rgba(217, 83, 79, 0.1);
  color: #843534;
  outline: 0;
}

.chat-thread-subtitle {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: #777;
  font-size: 13px;
}

.chat-thread-source-whatsapp {
  border-color: #c7e2bf;
  background: #dff0d8;
  color: #3c763d;
}

.chat-thread-source-instagram {
  border-color: #faebcc;
  background: #fcf8e3;
  color: #8a6d3b;
}

.chat-thread-source-facebook {
  border-color: #bcdff1;
  background: #d9edf7;
  color: #31708f;
}

.chat-thread-source-default {
  border-color: #ddd;
  background: #f5f5f5;
  color: #777;
}

.chat-thread-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  justify-content: flex-end;
}

.chat-thread-meta-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid #d9e2ec;
  border-radius: 999px;
  background: #f8fbfe;
  color: #666;
  font-size: 12px;
  line-height: 1.25;
}

button.chat-thread-meta-inline {
  font-family: inherit;
  text-align: left;
}

button.chat-thread-meta-inline:disabled {
  cursor: default;
  opacity: 1;
}

.chat-thread-meta-inline + .chat-thread-meta-inline::before {
  content: none;
}

.chat-thread-meta-inline-label {
  color: #6f8090;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.chat-thread-meta-inline-value {
  color: #34495a;
  font-weight: 700;
}

.chat-thread-meta-inline.chat-thread-meta-inline-unassigned {
  border-color: #d9534f;
  background: #fff1f1;
}

.chat-thread-meta-inline-unassigned .chat-thread-meta-inline-value {
  color: #c9302c;
}

.chat-thread-meta-inline-unassigned .chat-thread-meta-inline-label {
  color: #c9302c;
}

.chat-thread-meta-inline.chat-thread-meta-inline-warning {
  border-color: #f0ad4e;
  background: #fff7e6;
}

.chat-thread-meta-inline-warning .chat-thread-meta-inline-label,
.chat-thread-meta-inline-warning .chat-thread-meta-inline-value {
  color: #8a4b00;
}

.chat-thread-meta-inline.chat-thread-meta-inline-ctwa {
  border-color: #8ec5d8;
  background: #eef9fc;
}

.chat-thread-meta-inline-ctwa .chat-thread-meta-inline-label,
.chat-thread-meta-inline-ctwa .chat-thread-meta-inline-value {
  color: #276f86;
}

.chat-thread-meta-inline.chat-thread-meta-inline-ctwa-expired {
  border-color: #d9e2ec;
  background: #f8fbfe;
}

.chat-thread-meta-inline-ctwa-expired .chat-thread-meta-inline-label,
.chat-thread-meta-inline-ctwa-expired .chat-thread-meta-inline-value {
  color: #6f8090;
}

.chat-tag-picker-wrap {
  position: relative;
}

.chat-edit-lead-button {
  display: none !important;
}

.chat-thread-meta-lead-editable {
  border-color: #f0ad4e;
  background: #fffaf0;
  color: #8a4b00;
  cursor: pointer;
}

.chat-thread-meta-lead-editable .chat-thread-meta-inline-label,
.chat-thread-meta-lead-editable .chat-thread-meta-inline-value,
.chat-thread-meta-lead-editable .fa {
  color: #8a4b00;
}

.chat-thread-meta-lead-editable:hover,
.chat-thread-meta-lead-editable:focus {
  border-color: #ec971f;
  background: #ec971f;
  color: #fff;
}

.chat-thread-meta-lead-editable:hover .chat-thread-meta-inline-label,
.chat-thread-meta-lead-editable:hover .chat-thread-meta-inline-value,
.chat-thread-meta-lead-editable:hover .fa,
.chat-thread-meta-lead-editable:focus .chat-thread-meta-inline-label,
.chat-thread-meta-lead-editable:focus .chat-thread-meta-inline-value,
.chat-thread-meta-lead-editable:focus .fa {
  color: #fff;
}

.chat-tag-toggle-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 116px;
  padding: 0 12px;
  box-shadow: 0 2px 8px rgba(51, 122, 183, 0.12);
}

.chat-tag-toggle-button-active {
  border-color: #337ab7;
  background: #337ab7;
  color: #fff;
}

.chat-tag-toggle-button span {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.chat-tag-picker {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  padding: 10px;
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(51, 122, 183, 0.18);
  z-index: 15;
}

.chat-tag-picker-title {
  margin-bottom: 8px;
  color: #777;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-tag-option {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #555;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}

.chat-tag-option:hover,
.chat-tag-option:focus {
  background: #f7fbff;
  color: #2e6da4;
  outline: 0;
}

.chat-tag-option-active {
  background: #fcf8e3;
  color: #8a6d3b;
}

.chat-help-icon {
  margin-left: 4px;
  color: #5b9bd5;
  font-size: 12px;
  cursor: help;
  pointer-events: none;
}

.chat-thread-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.chat-message-stream {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
  background: linear-gradient(180deg, #fcfdff 0%, #f1f7fc 100%);
}

.chat-message-row {
  display: flex;
  margin-bottom: 16px;
}

.chat-message-row-client {
  justify-content: flex-start;
}

.chat-message-row-seller,
.chat-message-row-bot,
.chat-message-row-system {
  justify-content: flex-end;
}

.chat-message-bubble {
  max-width: 70%;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid #d9e2ec;
  box-shadow: 0 4px 10px rgba(51, 122, 183, 0.08);
}

.chat-message-row-client .chat-message-bubble {
  background: #fff;
  border-top-left-radius: 6px;
}

.chat-message-row-seller .chat-message-bubble {
  background: #dff0d8;
  border-color: #c7e2bf;
  border-top-right-radius: 6px;
}

.chat-message-row-bot .chat-message-bubble {
  background: #fff2cc;
  border-color: #f1dc93;
  border-top-right-radius: 6px;
  box-shadow: 0 6px 14px rgba(183, 135, 51, 0.16);
}

.chat-message-row-bot .chat-message-author {
  color: #8a5a00;
}

.chat-message-row-system .chat-message-bubble {
  background: #d9edf7;
  border-color: #bcdff1;
  border-top-right-radius: 6px;
}

.chat-message-author {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #777;
}

.chat-message-text {
  margin: 0;
  color: #333;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.chat-message-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 2px 2px 2px 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(51, 122, 183, 0.12);
  color: #2e6da4;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  vertical-align: baseline;
}

.chat-message-link:hover,
.chat-message-link:focus {
  background: rgba(51, 122, 183, 0.2);
  color: #23527c;
  text-decoration: none;
  outline: 0;
}

.chat-message-media {
  margin-top: 10px;
}

.chat-message-image-button {
  display: block;
  max-width: 280px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

.chat-message-image-button:focus {
  outline: 2px solid rgba(51, 122, 183, 0.45);
  outline-offset: 2px;
}

.chat-message-image {
  display: block;
  max-width: 100%;
  max-height: 240px;
  border-radius: 8px;
  object-fit: contain;
  background: #f8fbfe;
}

.chat-message-media-loading,
.chat-message-file-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid #d9e2ec;
  background: #f8fbfe;
  color: #6f8090;
  font-size: 12px;
}

.chat-message-file-link {
  color: #2e6da4;
  cursor: pointer;
}

.chat-message-file-link:hover,
.chat-message-file-link:focus {
  border-color: #66afe9;
  background: #fff;
  color: #23527c;
  outline: 0;
}

.chat-message-audio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 360px;
  margin-top: 10px;
}

.chat-message-audio-player {
  width: 260px;
  max-width: 100%;
  height: 36px;
}

.chat-message-audio-download {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
  color: #2e6da4;
  font-size: 12px;
  cursor: pointer;
}

.chat-message-audio-download:hover,
.chat-message-audio-download:focus {
  border-color: #66afe9;
  background: #fff;
  color: #23527c;
  outline: 0;
}

.chat-message-audio-meta {
  flex-basis: 100%;
  color: #6f8090;
  font-size: 11px;
}

.chat-message-attachment {
  margin-top: 10px;
}

.chat-message-attachment-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 9px 11px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  color: #34495a;
  text-align: left;
  cursor: pointer;
}

.chat-message-attachment-button:hover,
.chat-message-attachment-button:focus {
  border-color: #66afe9;
  background: #fff;
  color: #23527c;
  outline: 0;
  text-decoration: none;
}

.chat-message-attachment-button > .fa:first-child {
  width: 18px;
  color: #2e6da4;
  font-size: 18px;
  text-align: center;
}

.chat-message-attachment-button > .fa-download {
  color: #6f8090;
  font-size: 13px;
}

.chat-message-attachment-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.chat-message-attachment-copy strong {
  display: block;
  max-width: 220px;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message-attachment-copy small {
  display: block;
  margin-top: 3px;
  color: #6f8090;
  font-size: 11px;
  line-height: 1.2;
}

.chat-message-time {
  display: block;
  margin-top: 8px;
  color: #999;
  font-size: 11px;
}

.chat-message-time-failed {
  color: #c9302c;
  font-weight: 700;
}

.chat-detail-rail {
  width: 320px;
  min-width: 320px;
  min-height: 0;
  border-left: 1px solid #d9e2ec;
  background: #f7fbff;
  padding: 20px;
  overflow-y: auto;
}

.chat-detail-toggle-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 140px;
  padding: 0 12px;
  border-color: #2e6da4;
  background: #337ab7;
  color: #fff;
  box-shadow: 0 6px 14px rgba(51, 122, 183, 0.24);
}

.chat-detail-toggle-button:hover,
.chat-detail-toggle-button:focus {
  border-color: #245580;
  background: #286090;
  color: #fff;
  box-shadow: 0 8px 18px rgba(40, 96, 144, 0.28);
}

.chat-detail-toggle-button span {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.chat-detail-card {
  padding: 18px;
  border: 1px solid #d9e2ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(51, 122, 183, 0.06);
}

.chat-detail-tabs {
  display: flex;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 12px;
  background: #f1f7fc;
  border: 1px solid #d9e2ec;
}

.chat-detail-tabs button {
  flex: 1;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #5b9bd5;
  font-size: 12px;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.chat-detail-tabs button:hover,
.chat-detail-tabs button:focus {
  color: #2e6da4;
  outline: 0;
}

.chat-detail-tab-active {
  background: #337ab7 !important;
  border-color: #2e6da4 !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(51, 122, 183, 0.28);
}

.chat-detail-card h4 {
  margin: 0 0 10px;
  color: #333;
}

.chat-detail-card p {
  color: #555;
  line-height: 1.55;
}

.chat-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.chat-management-item {
  padding: 10px 12px;
  border: 1px solid #d9e2ec;
  border-radius: 10px;
  background: #f7fbff;
}

.chat-management-item span {
  display: block;
  margin-bottom: 4px;
  color: #777;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.chat-management-item strong {
  color: #333;
  font-size: 13px;
  line-height: 1.35;
}

.chat-management-item.chat-management-item-unassigned {
  border-color: #d9534f;
  background: #fff1f1;
}

.chat-management-item-unassigned strong {
  color: #c9302c;
}

.chat-detail-card .chat-tooltip:hover::after {
  max-width: 220px;
  white-space: normal;
  line-height: 1.35;
}

.chat-management-grid > .chat-management-item.chat-tooltip:hover::after {
  width: 160px;
  max-width: 160px;
  transform: none;
  text-align: left;
}

.chat-management-grid > .chat-management-item:nth-child(odd).chat-tooltip:hover::after {
  left: 0;
}

.chat-management-grid > .chat-management-item:nth-child(odd).chat-tooltip:hover::before {
  left: 18px;
  transform: none;
}

.chat-management-grid > .chat-management-item:nth-child(even).chat-tooltip:hover::after {
  left: auto;
  right: 0;
}

.chat-management-grid > .chat-management-item:nth-child(even).chat-tooltip:hover::before {
  left: auto;
  right: 18px;
  transform: none;
}

.chat-management-summary {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-left: 3px solid #337ab7;
  border-radius: 8px;
  background: #f7fbff;
  color: #555;
  font-size: 13px;
  line-height: 1.45;
}

.chat-management-form-group {
  margin-bottom: 12px;
}

.chat-management-form-group label {
  display: block;
  margin-bottom: 6px;
  color: #777;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.chat-management-form-group label.chat-tooltip-panel-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.chat-management-form-group label.chat-tooltip-panel-form:hover::after {
  width: 160px;
  max-width: 160px;
  left: 0;
  transform: none;
  white-space: normal;
  line-height: 1.35;
  text-align: left;
}

.chat-management-form-group label.chat-tooltip-panel-form:hover::before {
  left: 16px;
  transform: none;
}

.chat-management-dual .chat-management-form-group:last-child label.chat-tooltip-panel-form:hover::after {
  left: auto;
  right: 0;
}

.chat-management-dual .chat-management-form-group:last-child label.chat-tooltip-panel-form:hover::before {
  left: auto;
  right: 16px;
}

.chat-management-inline {
  display: flex;
  gap: 8px;
}

.chat-management-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 108px;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.chat-management-button:hover,
.chat-management-button:focus {
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.16);
}

.chat-management-inline .form-control,
.chat-management-form-group .form-control {
  border: 1px solid #d9e2ec;
  box-shadow: none;
}

.chat-management-inline .form-control:focus,
.chat-management-form-group .form-control:focus {
  border-color: #66afe9;
  box-shadow: 0 0 6px rgba(102, 175, 233, 0.35);
}

.chat-management-dual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.chat-management-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #e6eef5;
}

.chat-management-status-block {
  min-width: 0;
}

.chat-management-timestamp {
  color: #777;
  font-size: 12px;
  line-height: 1.4;
}

.chat-management-timestamp strong {
  color: #333;
}

.chat-management-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
}

.chat-management-sync-saving {
  color: #8a6d3b;
}

.chat-management-sync-saved {
  color: #3c763d;
}

.chat-management-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.chat-contact-grid {
  display: grid;
  gap: 12px;
}

.chat-contact-item {
  padding: 12px;
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  background: #f7fbff;
}

.chat-contact-item span {
  display: block;
  margin-bottom: 4px;
  color: #777;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.chat-contact-item strong {
  color: #333;
  font-size: 13px;
  line-height: 1.4;
}

.chat-notes-list {
  padding-left: 18px;
  margin: 0;
}

.chat-notes-form {
  margin-bottom: 14px;
}

.chat-notes-form .form-control {
  margin-bottom: 10px;
  resize: vertical;
  min-height: 88px;
  border: 1px solid #d9e2ec;
  box-shadow: none;
}

.chat-notes-form .form-control:focus {
  border-color: #66afe9;
  box-shadow: 0 0 6px rgba(102, 175, 233, 0.35);
}

.chat-notes-list li {
  margin-bottom: 8px;
  color: #555;
}

.chat-note-text {
  line-height: 1.45;
}

.chat-note-meta {
  margin-top: 4px;
  color: #999;
  font-size: 11px;
  font-weight: 600;
}

.chat-notes-empty {
  margin-top: 10px;
  margin-bottom: 0;
  color: #777;
  font-size: 12px;
}

.chat-composer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #d9e2ec;
  background: #fff;
  flex-shrink: 0;
}

.chat-composer-freeform {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.chat-template-lock {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.chat-template-lock-copy {
  flex: 1 1 220px;
  min-width: 220px;
}

.chat-template-lock-copy strong {
  display: block;
  color: #8a4b00;
  font-size: 13px;
  line-height: 1.3;
}

.chat-template-lock-copy span {
  display: block;
  margin-top: 3px;
  color: #6f5b2b;
  font-size: 12px;
  line-height: 1.35;
}

.chat-template-actions {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.chat-template-option {
  min-width: 150px;
  max-width: 210px;
  padding: 8px 10px;
  border: 1px solid #f0ad4e;
  border-radius: 8px;
  background: #fffaf0;
  color: #6f4f12;
  text-align: left;
}

.chat-template-option strong {
  display: block;
  font-size: 12px;
  line-height: 1.25;
}

.chat-template-option span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.25;
}

.chat-template-option:hover,
.chat-template-option:focus {
  border-color: #ec971f;
  background: #fff4d8;
  outline: 0;
}

.chat-template-option[disabled],
.chat-template-option[disabled]:hover {
  cursor: wait;
  opacity: 0.65;
}

.chat-attachment-menu {
  position: absolute;
  left: 24px;
  bottom: 72px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 210px;
  padding: 14px;
  border: 1px solid #d9e2ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(51, 122, 183, 0.14);
  z-index: 10;
}

.chat-attachment-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.chat-attachment-option:focus {
  outline: 0;
}

.chat-attachment-option[disabled],
.chat-attachment-option[disabled]:hover {
  cursor: wait;
  opacity: 0.65;
}

.chat-attachment-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-attachment-option:hover .chat-attachment-option-icon,
.chat-attachment-option:focus .chat-attachment-option-icon {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

.chat-attachment-option-label {
  color: #555;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.chat-attachment-option-document .chat-attachment-option-icon {
  background: #337ab7;
}

.chat-attachment-option-media .chat-attachment-option-icon {
  background: #5bc0de;
}

.chat-microphone-button.chat-recording-active {
  border-color: #d9534f;
  background: #d9534f;
  color: #fff;
}

.chat-recording-cancel {
  color: #d9534f;
}

.chat-recording-status {
  flex: 0 0 auto;
  color: #d9534f;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.chat-emoji-picker {
  position: absolute;
  left: 24px;
  bottom: 72px;
  width: 336px;
  max-height: 280px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #d9e2ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(51, 122, 183, 0.14);
  z-index: 10;
}

.chat-emoji-group + .chat-emoji-group {
  margin-top: 12px;
}

.chat-emoji-group-title {
  margin-bottom: 8px;
  color: #777;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.chat-emoji-option {
  height: 38px;
  border: 1px solid #d9e2ec;
  border-radius: 10px;
  background: #f7fbff;
  font-size: 20px;
  line-height: 1;
}

.chat-emoji-option:hover {
  background: #d9edf7;
}

.chat-composer-tools {
  display: flex;
  gap: 8px;
}

.chat-composer .form-control {
  height: 46px;
  border: 1px solid #ccc;
  border-radius: 12px;
  box-shadow: none;
}

@media screen and (max-width: 1280px) {
  .chat-detail-rail {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  body.body_chat #page-wrapper,
  body.body_chat #page-wrapper > [ui-view] {
    min-height: calc(100vh - 51px);
    height: calc(100vh - 51px);
  }

  .chat-inbox-page {
    padding: 12px;
  }

  .chat-toast-container {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .chat-toast {
    min-width: 0;
    max-width: none;
  }

  .chat-inbox-shell {
    flex-direction: column;
  }

  .chat-conversations-panel {
    width: 100%;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid #e7ebf0;
  }

  .chat-conversation-list {
    max-height: 320px;
  }

  .chat-thread-header,
  .chat-composer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .chat-emoji-picker {
    left: 16px;
    bottom: 68px;
    width: calc(100% - 32px);
  }

  .chat-attachment-menu {
    left: 16px;
    bottom: 68px;
    width: calc(100% - 32px);
  }

  .chat-message-stream {
    padding: 16px;
  }
}

.chat-summary-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5b6f87;
  margin-bottom: 12px;
}

.chat-summary-text {
  white-space: pre-line;
  line-height: 1.6;
  color: #2f3b4c;
  margin: 0;
}

.chat-summary-meta {
  margin-top: 12px;
  font-size: 12px;
  color: #7a8797;
}

.chat-summary-empty {
  margin: 0;
  color: #7a8797;
}

.lead-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #d9edf7;
  border-radius: 4px;
  background: #f5fbff;
  color: #245269;
}

.lead-chat-header strong {
  display: block;
  margin-bottom: 2px;
  color: #1f4e79;
}

.lead-chat-timeline {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 2px;
}

.lead-chat-message {
  width: 82%;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid #d6e4ef;
  border-radius: 8px;
  background: #fff;
}

.lead-chat-message-client {
  margin-right: auto;
  border-color: #c8e6c9;
  background: #f3fbf4;
}

.lead-chat-message-seller,
.lead-chat-message-bot {
  margin-left: auto;
  border-color: #bee5eb;
  background: #f3fbff;
}

.lead-chat-message-system {
  margin-right: auto;
  margin-left: auto;
  border-color: #ddd;
  background: #f7f7f7;
}

.lead-chat-message-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  color: #315f85;
  font-size: 11px;
}

.lead-chat-message-text {
  white-space: pre-wrap;
  color: #333;
  font-size: 12px;
}

.lead-notification-dropdown {
  position: relative;
}

.lead-notification-trigger {
  color: #2f80d1 !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  position: relative;
}

.lead-notification-trigger:hover,
.lead-notification-trigger:focus {
  background: #eef7ff !important;
  color: #1f5fbf !important;
}

.lead-notification-badge {
  background: #d9534f;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  min-width: 18px;
  padding: 3px 5px;
  position: absolute;
  right: 4px;
  text-align: center;
  top: 6px;
}

.lead-notification-menu {
  border: 1px solid #cfe2f3;
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(20, 54, 92, .18);
  min-width: 330px;
  overflow: hidden;
  padding: 0;
}

.lead-notification-header {
  align-items: center;
  background: #f4f9ff;
  color: #123f6c;
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  padding: 11px 13px;
}

.lead-notification-header a {
  background: #eef6ff;
  border: 1px solid #d7e9fb;
  border-radius: 6px;
  color: #2868a7 !important;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  min-width: 92px;
  padding: 5px 9px;
  text-align: center;
}

.lead-notification-header a:hover,
.lead-notification-header a:focus {
  background: #e2f0ff;
  border-color: #b9d9f7;
  color: #1f5fbf !important;
  text-decoration: none;
}

.lead-notification-empty {
  color: #789;
  font-size: 12px;
  padding: 14px;
  text-align: center;
}

.lead-notification-limit-note {
  background: #f8fbff;
  border-bottom: 1px solid #e4eef8;
  color: #60798f;
  font-size: 11px;
  padding: 8px 13px;
  text-align: center;
}

.lead-notification-loading {
  color: #60798f;
  font-size: 11px;
  padding: 8px 13px;
  text-align: center;
}

.lead-notification-item {
  border-left: 4px solid transparent;
  padding: 10px 13px !important;
}

.lead-notification-item.unread {
  background: #eef7ff;
  border-left-color: #2f80d1;
}

.lead-notification-item.duplicado {
  border-left-color: #f0ad4e;
}

.lead-notification-item-title {
  color: #123f6c;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
  white-space: normal;
}

.lead-notification-duplicate-badge {
  background: #fff3cd;
  border: 1px solid #f0ad4e;
  border-radius: 999px;
  color: #8a5a00;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  padding: 2px 7px;
  text-transform: uppercase;
}

.lead-notification-event-badge {
  background: #e8f2ff;
  border: 1px solid #b9d8ff;
  border-radius: 999px;
  color: #145ca6;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  padding: 2px 7px;
  text-transform: uppercase;
}

.lead-notification-event-badge.lead-notification-event-creacion {
  background: #e8f2ff;
  border-color: #b9d8ff;
  color: #145ca6;
}

.lead-notification-event-badge.lead-notification-event-asignacion {
  background: #e9f7ef;
  border-color: #b9dfc9;
  color: #1f7a3f;
}

.lead-notification-event-badge.lead-notification-event-reasignacion {
  background: #fff4e5;
  border-color: #f4cf97;
  color: #9a5a00;
}

.lead-notification-item-meta {
  color: #6a7f93;
  font-size: 11px;
  white-space: normal;
}

.lead-notification-original {
  color: #8a5a00;
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

.navbar-top-links .dropdown-menu li.lead-notification-pagination {
  align-items: center;
  background: #f8fbff;
  border-top: 1px solid #e4eef8;
  box-sizing: border-box;
  color: #40617f;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  padding: 8px 13px;
  width: 100%;
}

.lead-notification-pagination button {
  background: #fff;
  border: 1px solid #cfe2f3;
  border-radius: 6px;
  color: #2868a7;
  height: 26px;
  min-width: 30px;
}

.lead-notification-pagination button:hover:not(:disabled),
.lead-notification-pagination button:focus:not(:disabled) {
  background: #e2f0ff;
  border-color: #b9d9f7;
}

.lead-notification-pagination button:disabled {
  color: #9eb0bf;
  cursor: not-allowed;
  opacity: .7;
}

.lead-notification-clear {
  background: #fff7e8;
  border-top: 1px solid #f3d6a4;
  color: #8a4b00 !important;
  display: block;
  font-size: 12px;
  font-weight: 700;
  padding: 11px 13px !important;
  text-align: center;
}

.lead-notification-clear:hover,
.lead-notification-clear:focus {
  background: #f0ad4e !important;
  color: #fff !important;
  text-decoration: none;
}

.chat-notification-dropdown {
  position: relative;
}

.chat-notification-trigger {
  color: #1f8f63 !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  position: relative;
}

.chat-notification-trigger:hover,
.chat-notification-trigger:focus {
  background: #eefaf5 !important;
  color: #14734d !important;
}

.chat-notification-badge {
  background: #2ca86d;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  min-width: 18px;
  padding: 3px 5px;
  position: absolute;
  right: 4px;
  text-align: center;
  top: 6px;
}

.chat-notification-menu {
  border: 1px solid #ccebdd;
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(20, 92, 59, .16);
  min-width: 340px;
  overflow: hidden;
  padding: 0;
}

.chat-notification-header {
  align-items: center;
  background: #f0fbf6;
  color: #115a3c;
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  padding: 11px 13px;
}

.chat-notification-header a {
  background: #eefaf5;
  border: 1px solid #ccebdd;
  border-radius: 6px;
  color: #14734d !important;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  min-width: 92px;
  padding: 5px 9px;
  text-align: center;
}

.chat-notification-header a:hover,
.chat-notification-header a:focus {
  background: #e1f6ed;
  border-color: #a8dcc6;
  color: #115a3c !important;
  text-decoration: none;
}

.chat-notification-empty {
  color: #789;
  font-size: 12px;
  padding: 14px;
  text-align: center;
}

.chat-notification-item {
  border-left: 4px solid #2ca86d;
  padding: 10px 13px !important;
}

.chat-notification-item:hover {
  background: #f2fbf7 !important;
}

.chat-notification-item-title {
  color: #104b34;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
  white-space: normal;
}

.chat-notification-unread-badge {
  background: #2ca86d;
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  min-width: 18px;
  padding: 2px 6px;
  text-align: center;
}

.chat-notification-item-meta,
.chat-notification-item-preview {
  color: #6a7f93;
  font-size: 11px;
  white-space: normal;
}

.chat-notification-item-preview {
  color: #315f4c;
  margin-top: 3px;
}

.chat-notification-clear {
  background: #eefaf5;
  border-top: 1px solid #ccebdd;
  color: #14734d !important;
  display: block;
  font-size: 12px;
  font-weight: 700;
  padding: 11px 13px !important;
  text-align: center;
}

.chat-notification-clear:hover,
.chat-notification-clear:focus {
  background: #dff5eb !important;
  color: #115a3c !important;
  text-decoration: none;
}