/* Ubicación:
   Mayorista/admin/modules/chat/chat.css
*/

/* =========================================================
   WIRTZ MAYORISTA · CHAT ADMINISTRATIVO
   ========================================================= */

.admin-chat-page {
  width: 100%;
  display: grid;
  gap: 18px;
}

.admin-chat-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.admin-chat-page__header > div {
  min-width: 0;
}

.admin-chat-page__header > div > span {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.9px;
  color: var(
    --admin-text-soft,
    #777777
  );
}

.admin-chat-page__header h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(
    --admin-text,
    #171717
  );
}

.admin-chat-page__header p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(
    --admin-text-soft,
    #777777
  );
}

/* =========================================================
   FILTROS
   ========================================================= */

.admin-chat-filters {
  width: 100%;
  padding: 14px;
  display: grid;
  grid-template-columns:
    minmax(
      260px,
      1fr
    )
    repeat(
      3,
      minmax(
        145px,
        180px
      )
    )
    auto
    auto;
  align-items: end;
  gap: 10px;
  border: 1px solid
    var(
      --admin-line,
      #dddddd
    );
  border-radius: 14px;
  background: #ffffff;
}

.admin-chat-filters label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-chat-filters label > span {
  font-size: 10px;
  font-weight: 700;
  color: var(
    --admin-text-soft,
    #777777
  );
}

.admin-chat-filters input,
.admin-chat-filters select {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid
    var(
      --admin-line,
      #dddddd
    );
  border-radius: 9px;
  outline: 0;
  background: #ffffff;
  color: var(
    --admin-text,
    #171717
  );
  font: inherit;
  font-size: 11px;
}

.admin-chat-filters input:focus,
.admin-chat-filters select:focus {
  border-color: #171717;
  box-shadow:
    0 0 0 3px
    rgba(
      0,
      0,
      0,
      0.06
    );
}

.admin-chat-search {
  position: relative;
}

.admin-chat-search > svg {
  position: absolute;
  z-index: 1;
  left: 11px;
  bottom: 12px;
  width: 15px;
  height: 15px;
  color: var(
    --admin-text-soft,
    #777777
  );
}

.admin-chat-search input {
  padding-left: 34px;
}

.admin-chat-unread-filter {
  min-height: 40px;
  padding: 0 11px;
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  border: 1px solid
    var(
      --admin-line,
      #dddddd
    );
  border-radius: 9px;
}

.admin-chat-unread-filter input {
  width: 15px;
  min-height: auto;
  margin: 0;
}

.admin-chat-unread-filter span {
  white-space: nowrap;
}

/* =========================================================
   LAYOUT
   ========================================================= */

.admin-chat-layout {
  width: 100%;
  min-height: 680px;
  display: grid;
  grid-template-columns:
    minmax(
      290px,
      350px
    )
    minmax(
      420px,
      1fr
    )
    minmax(
      230px,
      280px
    );
  overflow: hidden;
  border: 1px solid
    var(
      --admin-line,
      #dddddd
    );
  border-radius: 16px;
  background: #ffffff;
}

.admin-chat-conversations {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid
    var(
      --admin-line,
      #dddddd
    );
  background: #fafafa;
}

.admin-chat-conversations > header {
  min-height: 70px;
  padding: 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid
    var(
      --admin-line,
      #dddddd
    );
}

.admin-chat-conversations > header strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
}

.admin-chat-conversations > header span {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: var(
    --admin-text-soft,
    #777777
  );
}

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

/* =========================================================
   CONVERSACIONES
   ========================================================= */

.admin-chat-conversation-item {
  width: 100%;
  min-height: 136px;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid
    var(
      --admin-line,
      #dddddd
    );
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition:
    background 150ms ease,
    box-shadow 150ms ease;
}

.admin-chat-conversation-item:hover {
  background: #ffffff;
}

.admin-chat-conversation-item.is-active {
  background: #ffffff;
  box-shadow:
    inset 3px 0 0
    #171717;
}

.admin-chat-conversation-item.has-unread {
  background: #f2f2f2;
}

.admin-chat-conversation-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-chat-conversation-item__top strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-chat-conversation-item__top time {
  flex: 0 0 auto;
  font-size: 9px;
  color: var(
    --admin-text-soft,
    #777777
  );
}

.admin-chat-conversation-item__subject {
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-chat-conversation-item__message {
  min-height: 31px;
  display: -webkit-box;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.45;
  color: var(
    --admin-text-soft,
    #777777
  );
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-chat-conversation-item__bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-chat-unread {
  min-width: 21px;
  height: 21px;
  margin-left: auto;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #171717;
  color: #ffffff;
  font-size: 9px;
}

/* =========================================================
   ESTADOS
   ========================================================= */

.admin-chat-status,
.admin-chat-priority {
  min-height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-chat-status--abierto,
.admin-chat-status--en_espera_admin {
  border-color: #b2ddff;
  background: #eff8ff;
  color: #175cd3;
}

.admin-chat-status--en_espera_cliente {
  border-color: #fedf89;
  background: #fffaeb;
  color: #b54708;
}

.admin-chat-status--en_proceso {
  border-color: #d6bbfb;
  background: #f9f5ff;
  color: #6941c6;
}

.admin-chat-status--resuelto {
  border-color: #abefc6;
  background: #ecfdf3;
  color: #067647;
}

.admin-chat-status--cerrado,
.admin-chat-status--archivado {
  border-color: #d0d5dd;
  background: #f2f4f7;
  color: #475467;
}

.admin-chat-priority--baja {
  border-color: #d0d5dd;
  background: #f2f4f7;
  color: #475467;
}

.admin-chat-priority--normal {
  border-color: #b2ddff;
  background: #eff8ff;
  color: #175cd3;
}

.admin-chat-priority--alta {
  border-color: #fedf89;
  background: #fffaeb;
  color: #b54708;
}

.admin-chat-priority--urgente {
  border-color: #fecdca;
  background: #fef3f2;
  color: #b42318;
}

/* =========================================================
   DETALLE
   ========================================================= */

.admin-chat-detail {
  min-width: 0;
  min-height: 680px;
  background: #ffffff;
}

.admin-chat-thread {
  min-height: 680px;
  height: 100%;
  display: grid;
  grid-template-rows:
    auto
    minmax(
      0,
      1fr
    )
    auto;
}

.admin-chat-thread__header {
  min-height: 82px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid
    var(
      --admin-line,
      #dddddd
    );
}

.admin-chat-thread__header > div {
  min-width: 0;
  flex: 1;
}

.admin-chat-thread__header > div > span {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 800;
  color: var(
    --admin-text-soft,
    #777777
  );
}

.admin-chat-thread__header h3 {
  margin: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-chat-thread__header small {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  color: var(
    --admin-text-soft,
    #777777
  );
}

/* =========================================================
   MENSAJES
   ========================================================= */

.admin-chat-messages {
  min-height: 0;
  padding: 22px;
  overflow-y: auto;
  background: #f8f8f8;
}

.admin-chat-message {
  width: 100%;
  margin-bottom: 14px;
  display: flex;
}

.admin-chat-message.is-admin {
  justify-content: flex-end;
}

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

.admin-chat-message__bubble {
  max-width: min(
    75%,
    630px
  );
  padding: 12px 14px 9px;
  border: 1px solid
    var(
      --admin-line,
      #dddddd
    );
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    0 3px 12px
    rgba(
      0,
      0,
      0,
      0.035
    );
}

.admin-chat-message.is-admin
  .admin-chat-message__bubble {
  border-color: #171717;
  border-bottom-right-radius: 5px;
  background: #171717;
  color: #ffffff;
}

.admin-chat-message.is-client
  .admin-chat-message__bubble {
  border-bottom-left-radius: 5px;
}

.admin-chat-message__bubble p {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  word-break: break-word;
}

.admin-chat-message__bubble footer {
  margin-top: 7px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  font-size: 8px;
  opacity: 0.7;
}

.admin-chat-message__attachment {
  margin-top: 9px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid currentColor;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.admin-chat-message__attachment svg {
  width: 14px;
  height: 14px;
}

.admin-chat-system-message {
  max-width: 500px;
  margin: 14px auto;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid
    var(
      --admin-line,
      #dddddd
    );
  border-radius: 999px;
  background: #ffffff;
  font-size: 9px;
  text-align: center;
  color: var(
    --admin-text-soft,
    #777777
  );
}

/* =========================================================
   RESPUESTA
   ========================================================= */

.admin-chat-reply {
  padding: 15px 18px;
  border-top: 1px solid
    var(
      --admin-line,
      #dddddd
    );
  background: #ffffff;
}

.admin-chat-reply textarea {
  width: 100%;
  min-height: 78px;
  max-height: 180px;
  padding: 11px 12px;
  resize: vertical;
  border: 1px solid
    var(
      --admin-line,
      #cccccc
    );
  border-radius: 10px;
  outline: 0;
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
}

.admin-chat-reply textarea:focus {
  border-color: #171717;
  box-shadow:
    0 0 0 3px
    rgba(
      0,
      0,
      0,
      0.06
    );
}

.admin-chat-reply footer {
  margin-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-chat-reply footer small {
  font-size: 9px;
  color: var(
    --admin-text-soft,
    #777777
  );
}

.admin-chat-reply button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.admin-chat-archived {
  padding: 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid
    var(
      --admin-line,
      #dddddd
    );
  background: #f7f7f7;
}

.admin-chat-archived svg {
  width: 20px;
  height: 20px;
}

.admin-chat-archived strong {
  font-size: 11px;
}

.admin-chat-archived p {
  margin: 3px 0 0;
  font-size: 9px;
  color: var(
    --admin-text-soft,
    #777777
  );
}

/* =========================================================
   PANEL DERECHO
   ========================================================= */

.admin-chat-sidebar {
  min-width: 0;
  border-left: 1px solid
    var(
      --admin-line,
      #dddddd
    );
  background: #fafafa;
}

.admin-chat-info > header {
  padding: 19px 16px;
  border-bottom: 1px solid
    var(
      --admin-line,
      #dddddd
    );
}

.admin-chat-info > header > span {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(
    --admin-text-soft,
    #777777
  );
}

.admin-chat-info > header h3 {
  margin: 6px 0 4px;
  font-size: 15px;
  font-weight: 800;
}

.admin-chat-info > header p {
  margin: 0;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(
    --admin-text-soft,
    #777777
  );
}

.admin-chat-info__data {
  padding: 15px 16px;
  display: grid;
  gap: 12px;
  border-bottom: 1px solid
    var(
      --admin-line,
      #dddddd
    );
}

.admin-chat-info__data article span {
  display: block;
  margin-bottom: 3px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(
    --admin-text-soft,
    #777777
  );
}

.admin-chat-info__data article strong {
  font-size: 10px;
}

.admin-chat-classification {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.admin-chat-classification label {
  display: grid;
  gap: 6px;
}

.admin-chat-classification label > span {
  font-size: 9px;
  font-weight: 700;
  color: var(
    --admin-text-soft,
    #777777
  );
}

.admin-chat-classification select {
  width: 100%;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid
    var(
      --admin-line,
      #dddddd
    );
  border-radius: 8px;
  outline: 0;
  background: #ffffff;
  font: inherit;
  font-size: 10px;
}

.admin-chat-classification select:focus {
  border-color: #171717;
}

.admin-chat-classification button {
  width: 100%;
}

.admin-chat-sidebar-empty {
  min-height: 300px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
}

.admin-chat-sidebar-empty svg {
  width: 22px;
  height: 22px;
}

.admin-chat-sidebar-empty strong {
  font-size: 12px;
}

.admin-chat-sidebar-empty p {
  margin: 0;
  font-size: 9px;
  line-height: 1.5;
  color: var(
    --admin-text-soft,
    #777777
  );
}

/* =========================================================
   VACÍOS Y CARGA
   ========================================================= */

.admin-chat-loading,
.admin-chat-empty,
.admin-chat-detail-loading,
.admin-chat-detail-empty {
  min-height: 250px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  text-align: center;
}

.admin-chat-detail-loading,
.admin-chat-detail-empty {
  min-height: 100%;
}

.admin-chat-empty > span,
.admin-chat-detail-empty > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid
    var(
      --admin-line,
      #dddddd
    );
  border-radius: 50%;
  background: #ffffff;
}

.admin-chat-empty strong,
.admin-chat-detail-empty h3,
.admin-chat-loading strong,
.admin-chat-detail-loading strong {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}

.admin-chat-empty p,
.admin-chat-detail-empty p {
  max-width: 320px;
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: var(
    --admin-text-soft,
    #777777
  );
}

.admin-chat-messages-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(
    --admin-text-soft,
    #777777
  );
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 1250px
) {
  .admin-chat-filters {
    grid-template-columns:
      minmax(
        240px,
        1fr
      )
      repeat(
        2,
        minmax(
          140px,
          170px
        )
      );
  }

  .admin-chat-layout {
    grid-template-columns:
      minmax(
        280px,
        330px
      )
      minmax(
        0,
        1fr
      );
  }

  .admin-chat-sidebar {
    display: none;
  }
}

@media (
  max-width: 850px
) {
  .admin-chat-page__header {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-chat-page__header button {
    width: 100%;
  }

  .admin-chat-filters {
    grid-template-columns:
      1fr
      1fr;
  }

  .admin-chat-search {
    grid-column:
      1 /
      -1;
  }

  .admin-chat-layout {
    grid-template-columns:
      minmax(
        240px,
        300px
      )
      minmax(
        0,
        1fr
      );
  }

  .admin-chat-message__bubble {
    max-width: 88%;
  }
}

@media (
  max-width: 650px
) {
  .admin-chat-filters {
    grid-template-columns:
      1fr;
  }

  .admin-chat-layout {
    min-height: auto;
    display: block;
  }

  .admin-chat-conversations {
    min-height: 560px;
    border-right: 0;
  }

  .admin-chat-detail {
    min-height: 560px;
    border-top: 1px solid
      var(
        --admin-line,
        #dddddd
      );
  }

  .admin-chat-thread {
    min-height: 560px;
  }

  .admin-chat-reply footer {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-chat-reply button {
    width: 100%;
  }
}/* =========================================================
   CHAT · CORRECCIÓN DE ESPACIO VERTICAL EN MÓVIL
   Agregar al final de chat.css
   ========================================================= */

@media (max-width: 650px) {
  .admin-chat-layout {
    min-height: 0;
    height: auto;

    display: block;

    overflow: visible;
  }

  /* Bandeja compacta */
  .admin-chat-conversations {
    min-height: 0;
    height: auto;
    max-height: 360px;

    display: block;

    overflow: hidden;

    border-right: 0;
  }

  .admin-chat-conversations > header {
    min-height: 58px;
    padding: 12px 14px;
  }

  .admin-chat-conversation-list {
    min-height: 0;
    height: auto;
    max-height: 300px;

    display: block;

    overflow-y: auto;
  }

  .admin-chat-conversation-item {
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 12px 14px;

    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
  }

  .admin-chat-conversation-item__message {
    min-height: 0;

    -webkit-line-clamp: 1;
  }

  .admin-chat-conversation-item__bottom {
    margin-top: 4px;
  }

  /* Conversación seleccionada */
  .admin-chat-detail {
    min-height: 0;
    height: auto;

    border-top: 1px solid
      var(
        --admin-line,
        #dddddd
      );
  }

  .admin-chat-thread {
    min-height: 0;
    height: auto;

    display: flex;
    flex-direction: column;
  }

  .admin-chat-thread__header {
    min-height: 68px;
    padding: 13px 15px;
  }

  .admin-chat-messages {
    min-height: 220px;
    max-height: 420px;
    padding: 16px;

    flex: 0 1 auto;

    overflow-y: auto;
  }

  .admin-chat-message {
    margin-bottom: 10px;
  }

  .admin-chat-message__bubble {
    max-width: 90%;
    padding: 10px 12px 8px;
  }

  .admin-chat-reply {
    padding: 12px 14px;
  }

  .admin-chat-reply textarea {
    min-height: 68px;
  }

  .admin-chat-loading,
  .admin-chat-empty {
    min-height: 160px;
  }

  .admin-chat-detail-loading,
  .admin-chat-detail-empty {
    min-height: 260px;
  }
}