/* =========================================================
   UBICACIÓN:
   frontend/src/pages/comercial-digital/preguntas-mercado-libre/
   preguntas-mercado-libre.css

   WIRTZ HUB · MERCADO LIBRE
   PREGUNTAS Y RESPUESTAS

   PARTE 1 DE 2
   ========================================================= */

/* =========================================================
   RESET LOCAL
   ========================================================= */

.ml-questions-page,
.ml-questions-page *,
.ml-questions-modal,
.ml-questions-modal *,
.ml-questions-toast,
.ml-questions-toast * {
  box-sizing: border-box;

  font-family:
    "DM Sans",
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
}

.ml-questions-page button,
.ml-questions-page input,
.ml-questions-page select,
.ml-questions-page textarea,
.ml-questions-modal button,
.ml-questions-modal input,
.ml-questions-modal select,
.ml-questions-modal textarea {
  font: inherit;
}

.ml-questions-page button,
.ml-questions-page select,
.ml-questions-page input,
.ml-questions-page textarea {
  min-width: 0;
}

/* =========================================================
   VARIABLES
   ========================================================= */

.ml-questions-page {
  --ml-bg: #ffffff;
  --ml-bg-soft: #f8f9fa;
  --ml-bg-muted: #f1f3f5;
  --ml-bg-hover: #f4f5f6;
  --ml-bg-active: #eceeef;

  --ml-text: #151515;
  --ml-text-soft: #3e4247;
  --ml-muted: #737981;
  --ml-muted-light: #9ba0a7;

  --ml-border: #d8dade;
  --ml-border-soft: #e6e7e9;
  --ml-border-strong: #bfc3c8;

  --ml-success: #15803d;
  --ml-warning: #c26b00;
  --ml-danger: #d03232;
  --ml-info: #2768a2;

  --ml-radius-small: 8px;
  --ml-radius: 12px;
  --ml-radius-large: 16px;

  --ml-transition-fast:
    140ms
    ease;

  --ml-transition:
    220ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  display: grid;
  align-content: start;
  gap: 14px;

  width: 100%;
  min-width: 0;
  min-height: calc(100vh - 96px);

  color: var(--ml-text);

  animation:
    mlQuestionsPageEnter
    280ms
    ease
    both;
}

html[data-theme="dark"] .ml-questions-page {
  --ml-bg: #111111;
  --ml-bg-soft: #171717;
  --ml-bg-muted: #1e1e1e;
  --ml-bg-hover: #202020;
  --ml-bg-active: #252525;

  --ml-text: #f4f4f4;
  --ml-text-soft: #c5c7ca;
  --ml-muted: #9a9da2;
  --ml-muted-light: #70747a;

  --ml-border: #303236;
  --ml-border-soft: #25272a;
  --ml-border-strong: #494c51;

  --ml-success: #4ade80;
  --ml-warning: #f5b84b;
  --ml-danger: #f87171;
  --ml-info: #75b5ea;
}

/* =========================================================
   CONTENEDOR GLOBAL
   ========================================================= */

.app-content:has(.ml-questions-page) {
  display: block !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  padding: 24px !important;

  overflow-x: hidden !important;
  overflow-y: visible !important;
}

body:has(.ml-questions-page),
body:has(.ml-questions-page) .app-shell,
body:has(.ml-questions-page) .app-main {
  width: 100%;
  min-width: 0;
  min-height: 100vh;

  overflow-x: hidden;
}

body:has(.ml-questions-page) {
  overflow-y: auto;
}

body:has(.ml-questions-page) .app-footer,
body:has(.ml-questions-page) footer.app-footer,
body:has(.ml-questions-page) #footerMount {
  position: static !important;

  width: 100% !important;

  margin-top: 18px !important;

  transform: none !important;
}

/* =========================================================
   BASE DE PANELES
   ========================================================= */

.ml-questions-head,
.ml-questions-metric,
.ml-questions-filters,
.ml-questions-inbox,
.ml-questions-detail-panel {
  width: 100%;
  min-width: 0;

  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-large);

  background: var(--ml-bg);

  overflow: hidden;

  transition:
    border-color var(--ml-transition),
    background var(--ml-transition);
}

.ml-questions-head:hover,
.ml-questions-filters:hover,
.ml-questions-inbox:hover,
.ml-questions-detail-panel:hover {
  border-color: var(--ml-border-strong);
}

/* =========================================================
   CABECERA
   ========================================================= */

.ml-questions-head {
  display: grid;
  grid-template-columns:
    minmax(
      320px,
      1fr
    )
    auto;

  align-items: center;
  gap: 24px;

  min-height: 112px;

  padding:
    18px
    20px;
}

.ml-questions-brand {
  display: flex;
  align-items: center;
  gap: 15px;

  min-width: 0;
}

.ml-questions-brand__icon {
  display: grid;
  place-items: center;

  width: 50px;
  height: 50px;
  min-width: 50px;

  border: 1px solid var(--ml-border-strong);
  border-radius: 13px;

  background: var(--ml-bg-soft);
  color: var(--ml-text);
}

.ml-questions-brand__icon .icon,
.ml-questions-brand__icon svg {
  width: 22px;
  height: 22px;

  stroke-width: 2;
}

.ml-questions-brand__copy {
  display: grid;
  gap: 5px;

  min-width: 0;
}

.ml-questions-brand__copy > span {
  color: var(--ml-muted);

  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
}

.ml-questions-brand__copy h2 {
  margin: 0;

  color: var(--ml-text);

  font-size:
    clamp(
      25px,
      2vw,
      32px
    );

  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.ml-questions-brand__copy p {
  max-width: 680px;

  margin: 0;

  color: var(--ml-muted);

  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.ml-questions-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  min-width: 0;
}

/* =========================================================
   CONEXIÓN
   ========================================================= */

.ml-questions-connection {
  display: grid;
  grid-template-columns:
    38px
    minmax(
      140px,
      1fr
    )
    auto;

  align-items: center;
  gap: 10px;

  min-width: 260px;

  padding:
    9px
    10px;

  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);

  background: var(--ml-bg-soft);
}

.ml-questions-connection__icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border: 1px solid currentColor;
  border-radius: 10px;

  background: var(--ml-bg);

  color: var(--ml-muted);
}

.ml-questions-connection.is-connected
.ml-questions-connection__icon {
  color: var(--ml-success);
}

.ml-questions-connection.is-disconnected
.ml-questions-connection__icon {
  color: var(--ml-muted);
}

.ml-questions-connection__icon .icon,
.ml-questions-connection__icon svg {
  width: 17px;
  height: 17px;

  stroke-width: 2;
}

.ml-questions-connection__copy {
  display: grid;
  gap: 3px;

  min-width: 0;
}

.ml-questions-connection__copy > span,
.ml-questions-update > span {
  color: var(--ml-muted);

  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.09em;
}

.ml-questions-connection__copy strong {
  color: var(--ml-text);

  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-questions-connection__copy small {
  color: var(--ml-muted);

  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.2;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-questions-update {
  display: grid;
  gap: 5px;

  min-width: 145px;

  padding:
    8px
    10px;

  border-left: 1px solid var(--ml-border);
}

.ml-questions-update strong {
  color: var(--ml-text);

  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

/* =========================================================
   BOTONES
   ========================================================= */

.ml-questions-btn,
.ml-questions-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--ml-border-strong);

  background: var(--ml-bg);
  color: var(--ml-text);

  cursor: pointer;
  outline: none;

  transition:
    border-color var(--ml-transition-fast),
    background var(--ml-transition-fast),
    color var(--ml-transition-fast),
    transform var(--ml-transition-fast),
    opacity var(--ml-transition-fast);
}

.ml-questions-btn {
  gap: 7px;

  min-height: 40px;

  padding:
    0
    13px;

  border-radius: var(--ml-radius-small);

  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.ml-questions-icon-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;

  padding: 0;

  border-radius: var(--ml-radius-small);
}

.ml-questions-btn:hover:not(:disabled),
.ml-questions-icon-btn:hover:not(:disabled) {
  border-color: var(--ml-text);

  background: var(--ml-bg-hover);

  transform: translateY(-1px);
}

.ml-questions-btn:active:not(:disabled),
.ml-questions-icon-btn:active:not(:disabled) {
  transform: translateY(0);
}

.ml-questions-btn:focus-visible,
.ml-questions-icon-btn:focus-visible {
  outline: 2px solid var(--ml-text);
  outline-offset: 2px;
}

.ml-questions-btn:disabled,
.ml-questions-icon-btn:disabled {
  opacity: 0.42;

  cursor: not-allowed;
}

.ml-questions-btn .icon,
.ml-questions-btn svg,
.ml-questions-icon-btn .icon,
.ml-questions-icon-btn svg {
  width: 15px;
  height: 15px;
  min-width: 15px;

  stroke-width: 2.1;
}

.ml-questions-btn--primary {
  border-color: #161616;

  background: #161616;
  color: #ffffff;
}

.ml-questions-btn--primary:hover:not(:disabled) {
  border-color: #000000;

  background: #000000;
  color: #ffffff;
}

html[data-theme="dark"]
.ml-questions-btn--primary {
  border-color: #f3f3f3;

  background: #f3f3f3;
  color: #111111;
}

html[data-theme="dark"]
.ml-questions-btn--primary:hover:not(:disabled) {
  border-color: #ffffff;

  background: #ffffff;
  color: #000000;
}

.ml-questions-btn--danger,
.ml-questions-icon-btn.is-delete {
  border-color:
    color-mix(
      in srgb,
      var(--ml-danger) 52%,
      var(--ml-border)
    );

  background:
    color-mix(
      in srgb,
      var(--ml-danger) 6%,
      var(--ml-bg)
    );

  color: var(--ml-danger);
}

.ml-questions-btn--danger:hover:not(:disabled),
.ml-questions-icon-btn.is-delete:hover:not(:disabled) {
  border-color: var(--ml-danger);

  background:
    color-mix(
      in srgb,
      var(--ml-danger) 11%,
      var(--ml-bg)
    );
}

.ml-questions-icon-btn.is-answer {
  border-color:
    color-mix(
      in srgb,
      var(--ml-success) 45%,
      var(--ml-border)
    );

  color: var(--ml-success);
}

.ml-questions-icon-btn.is-answer:hover:not(:disabled) {
  border-color: var(--ml-success);

  background:
    color-mix(
      in srgb,
      var(--ml-success) 8%,
      var(--ml-bg)
    );
}

.ml-questions-btn.is-active {
  border-color: var(--ml-text);

  background: var(--ml-bg-active);
}

/* =========================================================
   MÉTRICAS
   ========================================================= */

.ml-questions-metrics {
  display: grid;
  grid-template-columns:
    repeat(
      6,
      minmax(
        0,
        1fr
      )
    );

  gap: 12px;

  width: 100%;
  min-width: 0;
}

.ml-questions-metric {
  position: relative;

  display: grid;
  align-content: start;
  gap: 11px;

  min-height: 136px;

  padding: 15px;

  animation:
    mlQuestionsMetricEnter
    300ms
    calc(
      var(
        --metric-index,
        0
      ) *
      35ms
    )
    ease
    both;
}

.ml-questions-metric:hover {
  border-color: var(--ml-border-strong);

  background: var(--ml-bg-hover);
}

.ml-questions-metric__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  min-width: 0;
}

.ml-questions-metric__icon {
  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  border: 1px solid var(--ml-border);
  border-radius: 10px;

  background: var(--ml-bg-soft);
}

.ml-questions-metric__icon .icon,
.ml-questions-metric__icon svg {
  width: 16px;
  height: 16px;

  stroke-width: 2;
}

.ml-questions-metric__label {
  color: var(--ml-muted);

  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  text-align: right;
  text-transform: uppercase;

  overflow: hidden;
  text-overflow: ellipsis;
}

.ml-questions-metric__value {
  color: var(--ml-text);

  font-size:
    clamp(
      22px,
      2vw,
      29px
    );

  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-questions-metric__detail {
  color: var(--ml-muted);

  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-questions-metric.is-total
.ml-questions-metric__icon {
  color: var(--ml-text);
}

.ml-questions-metric.is-pending
.ml-questions-metric__icon {
  color: var(--ml-warning);
}

.ml-questions-metric.is-answered
.ml-questions-metric__icon,
.ml-questions-metric.is-sale
.ml-questions-metric__icon {
  color: var(--ml-success);
}

.ml-questions-metric.is-received
.ml-questions-metric__icon {
  color: var(--ml-info);
}

.ml-questions-metric.is-time
.ml-questions-metric__icon {
  color: var(--ml-text-soft);
}

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

.ml-questions-filters {
  display: grid;

  overflow: hidden;
}

.ml-questions-filters__summary {
  display: grid;
  grid-template-columns:
    minmax(
      180px,
      auto
    )
    minmax(
      0,
      1fr
    )
    auto;

  align-items: end;
  gap: 14px;

  padding: 14px;
}

.ml-questions-filters__title {
  display: grid;
  gap: 5px;

  align-self: center;

  min-width: 0;
}

.ml-questions-filters__title span {
  color: var(--ml-muted);

  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
}

.ml-questions-filters__title strong {
  color: var(--ml-text);

  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
}

.ml-questions-filters__primary {
  display: grid;
  grid-template-columns:
    minmax(
      250px,
      1.7fr
    )
    repeat(
      3,
      minmax(
        130px,
        0.7fr
      )
    );

  align-items: end;
  gap: 9px;

  min-width: 0;
}

.ml-questions-filters__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ml-questions-search {
  display: flex;
  align-items: center;
  gap: 9px;

  min-width: 0;
  height: 42px;

  padding:
    0
    12px;

  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius-small);

  background: var(--ml-bg);
  color: var(--ml-muted);

  transition:
    border-color var(--ml-transition-fast),
    background var(--ml-transition-fast);
}

.ml-questions-search:focus-within {
  border-color: var(--ml-text);

  background: var(--ml-bg-soft);
}

.ml-questions-search .icon,
.ml-questions-search svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
}

.ml-questions-search input {
  width: 100%;

  border: 0;

  background: transparent;
  color: var(--ml-text);

  outline: none;

  font-size: 12px;
  font-weight: 600;
}

.ml-questions-search input::placeholder {
  color: var(--ml-muted-light);
}

.ml-questions-filter-control,
.ml-questions-field {
  display: grid;
  gap: 6px;

  min-width: 0;
}

.ml-questions-filter-control > span,
.ml-questions-field > span {
  color: var(--ml-muted);

  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ml-questions-filter-control input,
.ml-questions-filter-control select,
.ml-questions-field input,
.ml-questions-field select,
.ml-questions-field textarea {
  width: 100%;

  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius-small);

  background: var(--ml-bg);
  color: var(--ml-text);

  outline: none;

  font-size: 11.5px;
  font-weight: 600;

  transition:
    border-color var(--ml-transition-fast),
    background var(--ml-transition-fast);
}

.ml-questions-filter-control input,
.ml-questions-filter-control select,
.ml-questions-field input,
.ml-questions-field select {
  height: 42px;

  padding:
    0
    10px;
}

.ml-questions-field textarea {
  min-height: 140px;

  padding: 12px;

  line-height: 1.5;

  resize: vertical;
}

.ml-questions-filter-control input:focus,
.ml-questions-filter-control select:focus,
.ml-questions-field input:focus,
.ml-questions-field select:focus,
.ml-questions-field textarea:focus {
  border-color: var(--ml-text);

  background: var(--ml-bg-soft);
}

.ml-questions-filter-control input::placeholder,
.ml-questions-field input::placeholder,
.ml-questions-field textarea::placeholder {
  color: var(--ml-muted-light);
}

.ml-questions-filters__advanced {
  display: grid;
  grid-template-columns:
    repeat(
      6,
      minmax(
        130px,
        1fr
      )
    )
    auto;

  align-items: end;
  gap: 9px;

  max-height: 0;

  padding:
    0
    14px;

  border-top: 1px solid transparent;

  opacity: 0;

  overflow: hidden;

  transform: translateY(-5px);

  transition:
    max-height 260ms ease,
    padding 220ms ease,
    border-color 220ms ease,
    opacity 180ms ease,
    transform 220ms ease;
}

.ml-questions-filters__advanced.is-open {
  max-height: 180px;

  padding:
    14px;

  border-top-color: var(--ml-border);

  opacity: 1;

  transform: translateY(0);
}

.ml-questions-filters__advanced-actions {
  display: flex;
  align-items: flex-end;
}

/* =========================================================
   WORKSPACE
   ========================================================= */

.ml-questions-workspace {
  display: grid;
  grid-template-columns:
    minmax(
      400px,
      40%
    )
    minmax(
      0,
      1fr
    );

  align-items: start;
  gap: 14px;

  width: 100%;
  min-width: 0;
}

.ml-questions-inbox,
.ml-questions-detail-panel {
  min-height: 720px;
}

.ml-questions-inbox {
  display: grid;
  grid-template-rows:
    auto
    minmax(
      0,
      1fr
    )
    auto;

  align-self: start;
}

.ml-questions-detail-panel {
  display: grid;
  align-content: start;

  background: var(--ml-bg);
}

/* =========================================================
   BANDEJA · CABECERA
   ========================================================= */

.ml-questions-inbox__head {
  display: grid;
  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;
  gap: 12px;

  min-height: 70px;

  padding:
    14px
    15px;

  border-bottom: 1px solid var(--ml-border);

  background: var(--ml-bg-soft);
}

.ml-questions-inbox__head > div:first-child {
  display: grid;
  gap: 5px;

  min-width: 0;
}

.ml-questions-inbox__head > div:first-child > span {
  color: var(--ml-muted);

  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
}

.ml-questions-inbox__head > div:first-child > strong {
  color: var(--ml-text);

  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
}

.ml-questions-inbox__total {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;

  color: var(--ml-muted);

  font-size: 10px;
  font-weight: 600;
}

.ml-questions-inbox__total strong {
  color: var(--ml-text);

  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

/* =========================================================
   BANDEJA · LISTADO
   ========================================================= */

.ml-questions-list {
  display: grid;
  align-content: start;
  gap: 8px;

  min-width: 0;
  min-height: 0;
  max-height: 780px;

  padding: 10px;

  overflow-x: hidden;
  overflow-y: auto;
}

.ml-questions-inbox-item {
  position: relative;

  display: grid;
  grid-template-columns:
    118px
    minmax(
      0,
      1fr
    )
    34px;

  align-items: start;
  gap: 11px;

  width: 100%;
  min-width: 0;

  padding: 11px;

  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);

  background: var(--ml-bg);
  color: var(--ml-text);

  cursor: pointer;
  outline: none;

  overflow: hidden;

  animation:
    mlQuestionsInboxItemEnter
    260ms
    calc(
      var(
        --question-index,
        0
      ) *
      24ms
    )
    ease
    both;

  transition:
    border-color var(--ml-transition-fast),
    background var(--ml-transition-fast),
    transform var(--ml-transition-fast);
}

.ml-questions-inbox-item::before {
  content: "";

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  width: 3px;

  background: transparent;
}

.ml-questions-inbox-item:hover {
  border-color: var(--ml-border-strong);

  background: var(--ml-bg-hover);

  transform: translateY(-1px);
}

.ml-questions-inbox-item:focus-visible {
  border-color: var(--ml-text);

  outline: 2px solid var(--ml-text);
  outline-offset: 2px;
}

.ml-questions-inbox-item.is-pending::before {
  background: var(--ml-warning);
}

.ml-questions-inbox-item.is-selected {
  border-color: var(--ml-text);

  background: var(--ml-bg-active);
}

.ml-questions-inbox-item.is-selected::before {
  width: 4px;

  background: var(--ml-text);
}

.ml-questions-inbox-item__product {
  display: grid;
  grid-template-columns:
    44px
    minmax(
      0,
      1fr
    );

  align-items: start;
  gap: 8px;

  min-width: 0;
}

.ml-questions-inbox-item__image {
  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

  border: 1px solid var(--ml-border);
  border-radius: 9px;

  background: var(--ml-bg-soft);
  color: var(--ml-muted);

  overflow: hidden;
}

.ml-questions-inbox-item__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.ml-questions-inbox-item__image .icon,
.ml-questions-inbox-item__image svg {
  width: 17px;
  height: 17px;
}

.ml-questions-inbox-item__product-copy {
  display: grid;
  gap: 5px;

  min-width: 0;
}

.ml-questions-inbox-item__product-copy > span {
  color: var(--ml-muted);

  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-questions-inbox-item__product-copy strong {
  display: -webkit-box;

  color: var(--ml-text);

  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;

  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.ml-questions-inbox-item__content {
  display: grid;
  gap: 9px;

  min-width: 0;
}

.ml-questions-inbox-item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;

  min-width: 0;
}

.ml-questions-inbox-item__buyer {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
}

.ml-questions-inbox-item__avatar {
  display: grid;
  place-items: center;

  width: 31px;
  height: 31px;
  min-width: 31px;

  border: 1px solid var(--ml-border-strong);
  border-radius: 8px;

  background: var(--ml-bg-soft);
  color: var(--ml-text);

  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.ml-questions-inbox-item__buyer > div {
  display: grid;
  gap: 3px;

  min-width: 0;
}

.ml-questions-inbox-item__buyer strong {
  color: var(--ml-text);

  font-size: 11px;
  font-weight: 750;
  line-height: 1.1;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-questions-inbox-item__buyer small {
  color: var(--ml-muted);

  font-size: 9px;
  font-weight: 500;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-questions-inbox-item__question {
  margin: 0;

  color: var(--ml-text-soft);

  font-size: 11px;
  font-weight: 550;
  line-height: 1.48;
}

.ml-questions-inbox-item__meta {
  display: flex;
  align-items: center;
  gap: 9px;

  flex-wrap: wrap;

  color: var(--ml-muted);
}

.ml-questions-inbox-item__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  font-size: 8.5px;
  font-weight: 600;
}

.ml-questions-inbox-item__meta .icon,
.ml-questions-inbox-item__meta svg {
  width: 11px;
  height: 11px;
}

.ml-questions-inbox-item__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ml-questions-inbox-item__arrow {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  color: var(--ml-muted);

  transition:
    color var(--ml-transition-fast),
    transform var(--ml-transition-fast);
}

.ml-questions-inbox-item:hover
.ml-questions-inbox-item__arrow,
.ml-questions-inbox-item.is-selected
.ml-questions-inbox-item__arrow {
  color: var(--ml-text);

  transform: translateX(2px);
}

.ml-questions-inbox-item__arrow .icon,
.ml-questions-inbox-item__arrow svg {
  width: 15px;
  height: 15px;
}

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

.ml-questions-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  min-height: 28px;

  padding:
    0
    9px;

  border: 1px solid currentColor;
  border-radius: 999px;

  background: transparent;

  font-size: 8.5px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.ml-questions-status.is-compact {
  min-height: 24px;

  padding:
    0
    7px;

  font-size: 8px;
}

.ml-questions-status .icon,
.ml-questions-status svg {
  width: 11px;
  height: 11px;
}

.ml-questions-status.is-pending {
  color: var(--ml-warning);
}

.ml-questions-status.is-answered {
  color: var(--ml-success);
}

.ml-questions-status.is-review {
  color: var(--ml-info);
}

.ml-questions-status.is-closed,
.ml-questions-status.is-banned {
  color: var(--ml-danger);
}

.ml-questions-status.is-default {
  color: var(--ml-muted);
}

/* =========================================================
   PAGINACIÓN
   ========================================================= */

.ml-questions-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  min-height: 58px;

  padding:
    10px
    12px;

  border-top: 1px solid var(--ml-border);

  background: var(--ml-bg-soft);
}

.ml-questions-pagination__summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  color: var(--ml-muted);

  font-size: 10px;
  font-weight: 600;
}

.ml-questions-pagination__summary strong {
  color: var(--ml-text);

  font-weight: 800;
}

.ml-questions-pagination__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* =========================================================
   ESTADOS VACÍOS
   ========================================================= */

.ml-questions-state,
.ml-questions-detail-empty,
.ml-questions-history-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;

  min-height: 260px;

  padding: 28px;

  color: var(--ml-text);

  text-align: center;
}

.ml-questions-state__icon,
.ml-questions-detail-empty__visual {
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  border: 1px solid var(--ml-border);
  border-radius: 14px;

  background: var(--ml-bg-soft);
  color: var(--ml-muted);
}

.ml-questions-state__icon .icon,
.ml-questions-state__icon svg,
.ml-questions-detail-empty__visual .icon,
.ml-questions-detail-empty__visual svg {
  width: 23px;
  height: 23px;
}

.ml-questions-state strong,
.ml-questions-detail-empty strong,
.ml-questions-history-empty strong {
  color: var(--ml-text);

  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
}

.ml-questions-state p,
.ml-questions-detail-empty p,
.ml-questions-history-empty p {
  max-width: 430px;

  margin: 0;

  color: var(--ml-muted);

  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

.ml-questions-state.is-error
.ml-questions-state__icon,
.ml-questions-state.is-error strong {
  color: var(--ml-danger);
}

.ml-questions-loader {
  width: 28px;
  height: 28px;

  border: 2px solid var(--ml-border);
  border-top-color: var(--ml-text);
  border-radius: 50%;

  animation:
    mlQuestionsSpin
    720ms
    linear
    infinite;
}

/* =========================================================
   ANIMACIONES BASE
   ========================================================= */

.is-spinning {
  animation:
    mlQuestionsSpin
    720ms
    linear
    infinite !important;
}

@keyframes mlQuestionsPageEnter {
  from {
    opacity: 0;

    transform: translateY(6px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

@keyframes mlQuestionsMetricEnter {
  from {
    opacity: 0;

    transform: translateY(6px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

@keyframes mlQuestionsInboxItemEnter {
  from {
    opacity: 0;

    transform: translateX(-5px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}

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

/* =========================================================
   CONTINÚA EN PARTE 2 DE 2
   ========================================================= *//* =========================================================
   UBICACIÓN:
   frontend/src/pages/comercial-digital/preguntas-mercado-libre/
   preguntas-mercado-libre.css

   WIRTZ HUB · MERCADO LIBRE
   PREGUNTAS Y RESPUESTAS

   PARTE 2 DE 2
   CONTINÚA DESPUÉS DE mlQuestionsSpin
   ========================================================= */

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

.ml-questions-detail {
  display: grid;
  grid-auto-rows: max-content;

  width: 100%;
  min-width: 0;

  animation:
    mlQuestionsDetailEnter
    260ms
    ease
    both;
}

.ml-questions-detail__head {
  display: grid;
  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;
  gap: 16px;

  min-height: 110px;

  padding:
    16px
    18px;

  border-bottom: 1px solid var(--ml-border);

  background: var(--ml-bg-soft);
}

.ml-questions-detail__product {
  display: flex;
  align-items: center;
  gap: 13px;

  min-width: 0;
}

.ml-questions-detail__image {
  display: grid;
  place-items: center;

  width: 68px;
  height: 68px;
  min-width: 68px;

  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);

  background: var(--ml-bg);
  color: var(--ml-muted);

  overflow: hidden;
}

.ml-questions-detail__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.ml-questions-detail__image .icon,
.ml-questions-detail__image svg {
  width: 25px;
  height: 25px;
}

.ml-questions-detail__product-copy {
  display: grid;
  gap: 6px;

  min-width: 0;
}

.ml-questions-detail__product-copy > span {
  color: var(--ml-muted);

  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ml-questions-detail__product-copy h3 {
  margin: 0;

  color: var(--ml-text);

  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.ml-questions-detail__product-copy a {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  width: max-content;

  color: var(--ml-muted);

  font-size: 10px;
  font-weight: 650;
  text-decoration: none;

  transition:
    color var(--ml-transition-fast),
    transform var(--ml-transition-fast);
}

.ml-questions-detail__product-copy a:hover {
  color: var(--ml-text);

  transform: translateX(2px);
}

.ml-questions-detail__product-copy a .icon,
.ml-questions-detail__product-copy a svg {
  width: 12px;
  height: 12px;
}

.ml-questions-detail__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  flex-wrap: wrap;
}

/* =========================================================
   RESUMEN DEL DETALLE
   ========================================================= */

.ml-questions-detail__summary {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  border-bottom: 1px solid var(--ml-border);
}

.ml-questions-detail__summary article {
  display: grid;
  align-content: center;
  gap: 6px;

  min-width: 0;
  min-height: 88px;

  padding:
    13px
    15px;

  border-right: 1px solid var(--ml-border);

  background: var(--ml-bg);

  transition:
    background var(--ml-transition-fast);
}

.ml-questions-detail__summary article:last-child {
  border-right: 0;
}

.ml-questions-detail__summary article:hover {
  background: var(--ml-bg-hover);
}

.ml-questions-detail__summary article > span {
  color: var(--ml-muted);

  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ml-questions-detail__summary article strong {
  color: var(--ml-text);

  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-questions-detail__summary article small {
  color: var(--ml-muted-light);

  font-size: 9px;
  font-weight: 550;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   TABS
   ========================================================= */

.ml-questions-detail__tabs {
  display: flex;
  align-items: center;
  gap: 8px;

  min-height: 62px;

  padding:
    11px
    14px;

  border-bottom: 1px solid var(--ml-border);

  background: var(--ml-bg);
}

.ml-questions-detail__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 37px;

  padding:
    0
    13px;

  border: 1px solid var(--ml-border-strong);
  border-radius: 999px;

  background: var(--ml-bg);
  color: var(--ml-text);

  font-size: 10px;
  font-weight: 700;

  cursor: pointer;
  outline: none;

  transition:
    border-color var(--ml-transition-fast),
    background var(--ml-transition-fast),
    color var(--ml-transition-fast);
}

.ml-questions-detail__tab:hover {
  border-color: var(--ml-text);

  background: var(--ml-bg-hover);
}

.ml-questions-detail__tab:focus-visible {
  outline: 2px solid var(--ml-text);
  outline-offset: 2px;
}

.ml-questions-detail__tab.is-active {
  border-color: var(--ml-text);

  background: var(--ml-text);
  color: var(--ml-bg);
}

.ml-questions-detail__tab .icon,
.ml-questions-detail__tab svg {
  width: 14px;
  height: 14px;
}

.ml-questions-detail__tab b {
  display: grid;
  place-items: center;

  min-width: 20px;
  height: 20px;

  padding:
    0
    5px;

  border-radius: 999px;

  background: var(--ml-bg-muted);
  color: var(--ml-muted);

  font-size: 8px;
  font-weight: 800;
}

.ml-questions-detail__tab.is-active b {
  background:
    color-mix(
      in srgb,
      var(--ml-bg) 18%,
      transparent
    );

  color: var(--ml-bg);
}

.ml-questions-detail__tab-panel {
  display: grid;
  align-content: start;
  gap: 16px;

  min-width: 0;
  min-height: 300px;

  padding: 16px;
}

/* =========================================================
   CONVERSACIÓN
   ========================================================= */

.ml-questions-conversation {
  display: grid;
  gap: 15px;

  min-width: 0;
}

.ml-questions-message {
  display: grid;
  grid-template-columns:
    38px
    minmax(
      0,
      1fr
    );

  align-items: start;
  gap: 11px;

  min-width: 0;

  animation:
    mlQuestionsMessageEnter
    240ms
    ease
    both;
}

.ml-questions-message:nth-child(2) {
  animation-delay: 45ms;
}

.ml-questions-message__avatar {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border: 1px solid var(--ml-border-strong);
  border-radius: 10px;

  background: var(--ml-bg-soft);
  color: var(--ml-text);

  font-size: 9px;
  font-weight: 800;
}

.ml-questions-message.is-answer
.ml-questions-message__avatar {
  color: var(--ml-success);
}

.ml-questions-message.is-waiting
.ml-questions-message__avatar {
  color: var(--ml-warning);
}

.ml-questions-message__avatar .icon,
.ml-questions-message__avatar svg {
  width: 17px;
  height: 17px;
}

.ml-questions-message__content {
  position: relative;

  display: grid;
  gap: 10px;

  min-width: 0;

  padding:
    14px
    15px;

  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);

  background: var(--ml-bg);

  transition:
    border-color var(--ml-transition-fast),
    background var(--ml-transition-fast);
}

.ml-questions-message__content:hover {
  border-color: var(--ml-border-strong);

  background: var(--ml-bg-hover);
}

.ml-questions-message.is-answer
.ml-questions-message__content {
  border-color:
    color-mix(
      in srgb,
      var(--ml-success) 34%,
      var(--ml-border)
    );

  background:
    color-mix(
      in srgb,
      var(--ml-success) 4%,
      var(--ml-bg)
    );
}

.ml-questions-message.is-waiting
.ml-questions-message__content {
  border-style: dashed;

  border-color:
    color-mix(
      in srgb,
      var(--ml-warning) 42%,
      var(--ml-border)
    );

  background:
    color-mix(
      in srgb,
      var(--ml-warning) 4%,
      var(--ml-bg)
    );
}

.ml-questions-message__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;

  min-width: 0;
}

.ml-questions-message__meta > div {
  display: grid;
  gap: 4px;

  min-width: 0;
}

.ml-questions-message__meta strong {
  color: var(--ml-text);

  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.1;
}

.ml-questions-message__meta span,
.ml-questions-message__meta time {
  color: var(--ml-muted);

  font-size: 9px;
  font-weight: 550;
}

.ml-questions-message__meta time {
  flex: 0 0 auto;

  white-space: nowrap;
}

.ml-questions-message__content > p {
  margin: 0;

  color: var(--ml-text-soft);

  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.6;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ml-questions-message__footer {
  display: flex;
  align-items: center;
  gap: 11px;

  flex-wrap: wrap;

  padding-top: 2px;

  color: var(--ml-muted);
}

.ml-questions-message__footer span {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  font-size: 9px;
  font-weight: 600;
}

.ml-questions-message__footer .icon,
.ml-questions-message__footer svg {
  width: 12px;
  height: 12px;
}

/* =========================================================
   EDITOR DE RESPUESTA
   ========================================================= */

.ml-questions-answer-editor {
  display: grid;

  margin-top: 2px;

  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius-large);

  background: var(--ml-bg);

  overflow: hidden;

  animation:
    mlQuestionsEditorEnter
    260ms
    ease
    both;
}

.ml-questions-answer-editor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  min-height: 68px;

  padding:
    13px
    16px;

  border-bottom: 1px solid var(--ml-border);

  background: var(--ml-bg-soft);
}

.ml-questions-answer-editor__head > div {
  display: grid;
  gap: 5px;

  min-width: 0;
}

.ml-questions-answer-editor__head > div > span {
  color: var(--ml-muted);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.ml-questions-answer-editor__head strong {
  color: var(--ml-text);

  font-size: 14px;
  font-weight: 800;
}

.ml-questions-answer-editor__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  min-height: 29px;

  padding:
    0
    10px;

  border: 1px solid currentColor;
  border-radius: 999px;

  color: var(--ml-warning);

  font-size: 9px;
  font-weight: 700;
}

.ml-questions-answer-editor__status .icon,
.ml-questions-answer-editor__status svg {
  width: 12px;
  height: 12px;
}

#mlQuestionsInlineAnswerForm {
  display: grid;
  gap: 14px;

  padding: 16px;
}

.ml-questions-answer-composer {
  display: grid;

  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius);

  background: var(--ml-bg);

  overflow: hidden;

  transition:
    border-color var(--ml-transition-fast);
}

.ml-questions-answer-composer:focus-within {
  border-color: var(--ml-text);
}

.ml-questions-answer-composer__fixed {
  padding:
    11px
    13px;

  background: var(--ml-bg-soft);
  color: var(--ml-text);

  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.ml-questions-answer-composer__fixed:first-child {
  border-bottom: 1px solid var(--ml-border);
}

.ml-questions-answer-composer__fixed:last-child {
  border-top: 1px solid var(--ml-border);
}

#mlQuestionsInlineAnswerText {
  width: 100%;
  min-width: 0;
  min-height: 170px;

  padding:
    13px
    14px;

  border: 0;

  background: var(--ml-bg);
  color: var(--ml-text);

  outline: none;

  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.6;

  resize: vertical;
}

#mlQuestionsInlineAnswerText::placeholder {
  color: var(--ml-muted-light);
}

.ml-questions-answer-preview {
  display: grid;
  gap: 9px;

  padding:
    12px
    13px;

  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);

  background: var(--ml-bg-soft);
}

.ml-questions-answer-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ml-questions-answer-preview__head span:first-child {
  color: var(--ml-muted);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.ml-questions-answer-preview__head span:last-child {
  color: var(--ml-muted-light);

  font-size: 9px;
  font-weight: 550;
}

.ml-questions-answer-preview p {
  margin: 0;

  color: var(--ml-text-soft);

  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.55;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ml-questions-answer-editor__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  flex-wrap: wrap;
}

.ml-questions-answer-editor__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
}

.ml-questions-answer-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;

  color: var(--ml-muted);

  font-size: 9.5px;
  font-weight: 600;
}

.ml-questions-answer-counter strong {
  color: var(--ml-text);

  font-size: 12.5px;
  font-weight: 800;
}

/* =========================================================
   SWITCH
   ========================================================= */

.ml-questions-switch {
  display: grid;
  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;
  gap: 13px;

  min-width: 280px;

  cursor: pointer;
}

.ml-questions-switch > span {
  display: grid;
  gap: 4px;
}

.ml-questions-switch strong {
  color: var(--ml-text);

  font-size: 11px;
  font-weight: 750;
}

.ml-questions-switch small {
  color: var(--ml-muted);

  font-size: 9px;
  font-weight: 500;
}

.ml-questions-switch input {
  display: none;
}

.ml-questions-switch b {
  position: relative;

  width: 40px;
  height: 23px;

  border: 1px solid var(--ml-border-strong);
  border-radius: 999px;

  background: var(--ml-bg-muted);

  transition:
    border-color var(--ml-transition-fast),
    background var(--ml-transition-fast);
}

.ml-questions-switch b::before {
  content: "";

  position: absolute;
  top: 3px;
  left: 3px;

  width: 15px;
  height: 15px;

  border-radius: 50%;

  background: var(--ml-muted-light);

  transition:
    background var(--ml-transition-fast),
    transform var(--ml-transition-fast);
}

.ml-questions-switch input:checked + b {
  border-color: var(--ml-success);

  background:
    color-mix(
      in srgb,
      var(--ml-success) 12%,
      var(--ml-bg)
    );
}

.ml-questions-switch input:checked + b::before {
  background: var(--ml-success);

  transform: translateX(17px);
}

/* =========================================================
   HISTORIAL
   ========================================================= */

.ml-questions-history {
  display: grid;
  gap: 9px;

  min-width: 0;
}

.ml-questions-history__item {
  display: grid;
  grid-template-columns:
    36px
    minmax(
      0,
      1fr
    );

  align-items: start;
  gap: 11px;

  min-width: 0;

  padding: 12px;

  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);

  background: var(--ml-bg);

  animation:
    mlQuestionsHistoryEnter
    240ms
    calc(
      var(
        --history-index,
        0
      ) *
      30ms
    )
    ease
    both;

  transition:
    border-color var(--ml-transition-fast),
    background var(--ml-transition-fast);
}

.ml-questions-history__item:hover {
  border-color: var(--ml-border-strong);

  background: var(--ml-bg-hover);
}

.ml-questions-history__item.is-error {
  border-color:
    color-mix(
      in srgb,
      var(--ml-danger) 52%,
      var(--ml-border)
    );
}

.ml-questions-history__icon {
  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  border: 1px solid var(--ml-border);
  border-radius: 9px;

  background: var(--ml-bg-soft);
  color: var(--ml-text);
}

.ml-questions-history__item.is-error
.ml-questions-history__icon {
  color: var(--ml-danger);
}

.ml-questions-history__icon .icon,
.ml-questions-history__icon svg {
  width: 16px;
  height: 16px;
}

.ml-questions-history__content {
  display: grid;
  gap: 8px;

  min-width: 0;
}

.ml-questions-history__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 13px;

  min-width: 0;
}

.ml-questions-history__head strong {
  color: var(--ml-text);

  font-size: 11px;
  font-weight: 800;
}

.ml-questions-history__head time {
  color: var(--ml-muted);

  font-size: 9px;
  font-weight: 500;

  white-space: nowrap;
}

.ml-questions-history__content p {
  margin: 0;

  color: var(--ml-text-soft);

  font-size: 11px;
  font-weight: 550;
  line-height: 1.5;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ml-questions-history__content > small {
  color: var(--ml-muted);

  font-size: 9px;
  font-weight: 550;
}

.ml-questions-history__meta {
  display: flex;
  align-items: center;
  gap: 7px;

  flex-wrap: wrap;
}

.ml-questions-history__meta span {
  display: inline-flex;
  align-items: center;

  min-height: 24px;

  padding:
    0
    8px;

  border: 1px solid var(--ml-border);
  border-radius: 999px;

  color: var(--ml-muted);

  font-size: 8px;
  font-weight: 650;
}

.ml-questions-history__error {
  color: var(--ml-danger) !important;

  font-size: 9px !important;
  font-weight: 650 !important;
}

/* =========================================================
   MODALES
   ========================================================= */

html.ml-questions-modal-open {
  overflow: hidden !important;
}

.ml-questions-modal {
  --ml-bg: #ffffff;
  --ml-bg-soft: #f8f9fa;
  --ml-bg-muted: #f1f3f5;
  --ml-text: #151515;
  --ml-text-soft: #3e4247;
  --ml-muted: #737981;
  --ml-muted-light: #9ba0a7;
  --ml-border: #d8dade;
  --ml-border-strong: #bfc3c8;
  --ml-danger: #d03232;
  --ml-success: #15803d;

  position: fixed;
  inset: 0;
  z-index: 999999;

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

  padding: 20px;

  opacity: 0;

  pointer-events: none;
}

html[data-theme="dark"] .ml-questions-modal {
  --ml-bg: #111111;
  --ml-bg-soft: #171717;
  --ml-bg-muted: #1e1e1e;
  --ml-text: #f4f4f4;
  --ml-text-soft: #c5c7ca;
  --ml-muted: #9a9da2;
  --ml-muted-light: #70747a;
  --ml-border: #303236;
  --ml-border-strong: #494c51;
  --ml-danger: #f87171;
  --ml-success: #4ade80;
}

.ml-questions-modal.is-open {
  display: flex;

  opacity: 1;

  pointer-events: auto;
}

.ml-questions-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;

  width: 100%;
  height: 100%;

  border: 0;

  background: rgba(0, 0, 0, 0.68);

  cursor: default;

  animation:
    mlQuestionsBackdropEnter
    180ms
    ease
    both;
}

.ml-questions-modal__window {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-rows:
    auto
    minmax(
      0,
      1fr
    );

  width:
    min(
      720px,
      calc(
        100vw -
        32px
      )
    );

  max-height:
    min(
      90vh,
      900px
    );

  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius-large);

  background: var(--ml-bg);
  color: var(--ml-text);

  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.28);

  overflow: hidden;

  animation:
    mlQuestionsModalEnter
    240ms
    ease
    both;
}

.ml-questions-modal__window--small {
  width:
    min(
      470px,
      calc(
        100vw -
        32px
      )
    );
}

.ml-questions-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  min-height: 72px;

  padding:
    14px
    16px;

  border-bottom: 1px solid var(--ml-border);

  background: var(--ml-bg-soft);
}

.ml-questions-modal__head > div {
  display: grid;
  gap: 5px;
}

.ml-questions-modal__head span {
  color: var(--ml-muted);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.ml-questions-modal__head h3 {
  margin: 0;

  color: var(--ml-text);

  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.ml-questions-modal__close {
  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  border: 1px solid var(--ml-border-strong);
  border-radius: 9px;

  background: var(--ml-bg);
  color: var(--ml-muted);

  cursor: pointer;

  transition:
    border-color var(--ml-transition-fast),
    background var(--ml-transition-fast),
    color var(--ml-transition-fast);
}

.ml-questions-modal__close:hover {
  border-color: var(--ml-text);

  background: var(--ml-bg-muted);
  color: var(--ml-text);
}

.ml-questions-modal__close .icon,
.ml-questions-modal__close svg {
  width: 17px;
  height: 17px;
}

#mlQuestionsSecurityForm {
  display: grid;

  min-height: 0;

  overflow-y: auto;
}

.ml-questions-security {
  display: grid;
  gap: 15px;

  padding: 20px;
}

.ml-questions-security__icon {
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  margin:
    0
    auto;

  border: 1px solid var(--ml-border-strong);
  border-radius: 14px;

  background: var(--ml-bg-soft);
  color: var(--ml-text);
}

.ml-questions-security__icon .icon,
.ml-questions-security__icon svg {
  width: 24px;
  height: 24px;
}

.ml-questions-security__copy {
  display: grid;
  gap: 7px;

  text-align: center;
}

.ml-questions-security__copy strong {
  color: var(--ml-text);

  font-size: 16px;
  font-weight: 800;
}

.ml-questions-security__copy p {
  margin: 0;

  color: var(--ml-muted);

  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

.ml-questions-password-field {
  display: grid;
  grid-template-columns:
    18px
    minmax(
      0,
      1fr
    )
    36px;

  align-items: center;
  gap: 8px;

  min-height: 44px;

  padding-left: 11px;

  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius-small);

  background: var(--ml-bg);

  transition:
    border-color var(--ml-transition-fast);
}

.ml-questions-password-field:focus-within {
  border-color: var(--ml-text);
}

.ml-questions-password-field > .icon,
.ml-questions-password-field > svg {
  width: 15px;
  height: 15px;

  color: var(--ml-muted);
}

.ml-questions-password-field input {
  width: 100%;
  min-width: 0;
  height: 42px;

  border: 0;

  background: transparent;
  color: var(--ml-text);

  outline: none;

  font-size: 12px;
  font-weight: 600;
}

.ml-questions-password-field input::placeholder {
  color: var(--ml-muted-light);
}

.ml-questions-password-field button {
  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  border: 0;

  background: transparent;
  color: var(--ml-muted);

  cursor: pointer;
}

.ml-questions-password-field button:hover {
  color: var(--ml-text);
}

.ml-questions-password-field button .icon,
.ml-questions-password-field button svg {
  width: 16px;
  height: 16px;
}

.ml-questions-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  padding:
    13px
    16px;

  border-top: 1px solid var(--ml-border);

  background: var(--ml-bg-soft);
}

.ml-questions-delete-confirmation {
  display: grid;
  place-items: center;
  gap: 11px;

  min-height: 230px;

  padding: 26px;

  text-align: center;
}

.ml-questions-delete-confirmation__icon {
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  border: 1px solid
    color-mix(
      in srgb,
      var(--ml-danger) 52%,
      var(--ml-border)
    );

  border-radius: 14px;

  background:
    color-mix(
      in srgb,
      var(--ml-danger) 8%,
      var(--ml-bg)
    );

  color: var(--ml-danger);
}

.ml-questions-delete-confirmation__icon .icon,
.ml-questions-delete-confirmation__icon svg {
  width: 24px;
  height: 24px;
}

.ml-questions-delete-confirmation strong {
  color: var(--ml-text);

  font-size: 16px;
  font-weight: 800;
}

.ml-questions-delete-confirmation p {
  max-width: 360px;

  margin: 0;

  color: var(--ml-muted);

  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

/* =========================================================
   TOAST
   ========================================================= */

.ml-questions-toast {
  --ml-success: #15803d;
  --ml-danger: #d03232;
  --ml-warning: #c26b00;
  --ml-info: #2768a2;

  position: fixed;
  right: 18px;
  bottom: 32px;
  z-index: 1000000;

  display: grid;
  grid-template-columns:
    34px
    minmax(
      0,
      1fr
    );

  align-items: center;
  gap: 11px;

  width:
    min(
      390px,
      calc(
        100vw -
        36px
      )
    );

  min-height: 58px;

  padding:
    11px
    13px;

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

  background: #ffffff;
  color: #151515;

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.18);

  opacity: 0;

  pointer-events: none;

  transform: translateY(10px);

  transition:
    opacity var(--ml-transition),
    transform var(--ml-transition);
}

html[data-theme="dark"] .ml-questions-toast {
  --ml-success: #4ade80;
  --ml-danger: #f87171;
  --ml-warning: #f5b84b;
  --ml-info: #75b5ea;

  border-color: #494c51;

  background: #161616;
  color: #f4f4f4;
}

.ml-questions-toast.is-visible {
  opacity: 1;

  transform: translateY(0);
}

.ml-questions-toast__icon {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  border: 1px solid currentColor;
  border-radius: 9px;
}

.ml-questions-toast__icon .icon,
.ml-questions-toast__icon svg {
  width: 16px;
  height: 16px;
}

.ml-questions-toast__body {
  display: grid;
  gap: 3px;

  min-width: 0;
}

.ml-questions-toast__body strong {
  color: currentColor;

  font-size: 11px;
  font-weight: 800;
}

.ml-questions-toast__body p {
  margin: 0;

  color: inherit;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
}

.ml-questions-toast.is-success {
  color: var(--ml-success);
}

.ml-questions-toast.is-error {
  color: var(--ml-danger);
}

.ml-questions-toast.is-warning {
  color: var(--ml-warning);
}

.ml-questions-toast.is-info {
  color: var(--ml-info);
}

/* =========================================================
   SCROLLBARS
   ========================================================= */

.ml-questions-page *,
.ml-questions-modal * {
  scrollbar-width: thin;

  scrollbar-color:
    color-mix(
      in srgb,
      var(--ml-muted) 46%,
      transparent
    )
    transparent;
}

.ml-questions-page *::-webkit-scrollbar,
.ml-questions-modal *::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.ml-questions-page *::-webkit-scrollbar-track,
.ml-questions-modal *::-webkit-scrollbar-track {
  background: transparent;
}

.ml-questions-page *::-webkit-scrollbar-thumb,
.ml-questions-modal *::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--ml-muted) 42%,
      transparent
    );

  background-clip: padding-box;
}

/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes mlQuestionsDetailEnter {
  from {
    opacity: 0;

    transform: translateX(6px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}

@keyframes mlQuestionsMessageEnter {
  from {
    opacity: 0;

    transform: translateY(5px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

@keyframes mlQuestionsEditorEnter {
  from {
    opacity: 0;

    transform: translateY(6px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

@keyframes mlQuestionsHistoryEnter {
  from {
    opacity: 0;

    transform: translateX(5px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}

@keyframes mlQuestionsModalEnter {
  from {
    opacity: 0;

    transform:
      translateY(14px)
      scale(0.98);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes mlQuestionsBackdropEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =========================================================
   RESPONSIVE · 1650
   ========================================================= */

@media (max-width: 1650px) {
  .ml-questions-metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

  .ml-questions-filters__summary {
    grid-template-columns:
      minmax(
        160px,
        auto
      )
      minmax(
        0,
        1fr
      );
  }

  .ml-questions-filters__actions {
    grid-column:
      1 /
      -1;
  }

  .ml-questions-filters__advanced {
    grid-template-columns:
      repeat(
        3,
        minmax(
          150px,
          1fr
        )
      );
  }

  .ml-questions-filters__advanced-actions {
    grid-column:
      1 /
      -1;
  }
}

/* =========================================================
   RESPONSIVE · 1400
   ========================================================= */

@media (max-width: 1400px) {
  .ml-questions-head {
    grid-template-columns:
      1fr;
  }

  .ml-questions-head__actions {
    justify-content: flex-start;

    flex-wrap: wrap;
  }

  .ml-questions-workspace {
    grid-template-columns:
      minmax(
        360px,
        42%
      )
      minmax(
        0,
        1fr
      );
  }

  .ml-questions-inbox-item {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      34px;
  }

  .ml-questions-inbox-item__product {
    grid-column:
      1 /
      2;
  }

  .ml-questions-inbox-item__content {
    grid-column:
      1 /
      2;
  }

  .ml-questions-inbox-item__actions {
    grid-column:
      2 /
      3;

    grid-row:
      1 /
      3;
  }
}

/* =========================================================
   RESPONSIVE · 1180
   ========================================================= */

@media (max-width: 1180px) {
  .app-content:has(.ml-questions-page) {
    padding: 18px !important;
  }

  .ml-questions-workspace {
    grid-template-columns:
      1fr;
  }

  .ml-questions-inbox,
  .ml-questions-detail-panel {
    min-height: 0;
  }

  .ml-questions-list {
    max-height: 620px;
  }

  .ml-questions-detail-panel {
    min-height: 520px;
  }

  .ml-questions-filters__primary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .ml-questions-search {
    grid-column:
      1 /
      -1;
  }

  .ml-questions-detail__summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .ml-questions-detail__summary article:nth-child(2) {
    border-right: 0;
  }

  .ml-questions-detail__summary article:nth-child(n + 3) {
    border-top: 1px solid var(--ml-border);
  }
}

/* =========================================================
   RESPONSIVE · 900
   ========================================================= */

@media (max-width: 900px) {
  .ml-questions-head__actions {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width: 100%;
  }

  .ml-questions-connection {
    grid-column:
      1 /
      -1;

    width: 100%;
  }

  .ml-questions-update {
    min-width: 0;

    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-small);
  }

  .ml-questions-head__actions > .ml-questions-btn {
    width: 100%;
  }

  .ml-questions-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .ml-questions-filters__summary {
    grid-template-columns:
      1fr;
  }

  .ml-questions-filters__actions {
    justify-content: flex-start;
  }

  .ml-questions-filters__advanced {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .ml-questions-detail__head {
    grid-template-columns:
      1fr;
  }

  .ml-questions-detail__actions {
    justify-content: flex-start;
  }
}

/* =========================================================
   RESPONSIVE · 720
   ========================================================= */

@media (max-width: 720px) {
  body:has(.ml-questions-page),
  body:has(.ml-questions-page) .app-shell,
  body:has(.ml-questions-page) .app-main,
  body:has(.ml-questions-page) .app-content,
  .ml-questions-page,
  .ml-questions-workspace,
  .ml-questions-inbox,
  .ml-questions-detail-panel,
  .ml-questions-detail,
  .ml-questions-list,
  .ml-questions-detail__tab-panel,
  .ml-questions-history {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow-x: hidden !important;
  }

  .app-content:has(.ml-questions-page) {
    padding: 10px !important;
  }

  .ml-questions-page {
    gap: 10px;
  }

  .ml-questions-head,
  .ml-questions-metric,
  .ml-questions-filters,
  .ml-questions-inbox,
  .ml-questions-detail-panel {
    border-radius: 13px;
  }

  .ml-questions-head {
    min-height: 0;

    padding: 13px;
  }

  .ml-questions-brand {
    align-items: flex-start;
  }

  .ml-questions-brand__icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .ml-questions-brand__copy h2 {
    font-size: 22px;
  }

  .ml-questions-brand__copy p {
    font-size: 11px;
  }

  .ml-questions-head__actions {
    grid-template-columns:
      1fr;
  }

  .ml-questions-connection {
    grid-template-columns:
      38px
      minmax(
        0,
        1fr
      )
      auto;
  }

  .ml-questions-update {
    width: 100%;
  }

  .ml-questions-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap: 8px;
  }

  .ml-questions-metric {
    min-height: 122px;

    padding: 12px;
  }

  .ml-questions-metric__label {
    font-size: 8.5px;
  }

  .ml-questions-filters__summary {
    padding: 12px;
  }

  .ml-questions-filters__primary,
  .ml-questions-filters__advanced {
    grid-template-columns:
      1fr;
  }

  .ml-questions-search {
    grid-column: auto;
  }

  .ml-questions-filters__actions {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width: 100%;
  }

  .ml-questions-filters__actions .ml-questions-btn,
  .ml-questions-filters__advanced-actions,
  .ml-questions-filters__advanced-actions .ml-questions-btn {
    width: 100%;
  }

  .ml-questions-filters__advanced.is-open {
    max-height: 620px;
  }

  .ml-questions-inbox-item {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }

  .ml-questions-inbox-item__product,
  .ml-questions-inbox-item__content,
  .ml-questions-inbox-item__actions {
    grid-column: auto;
    grid-row: auto;
  }

  .ml-questions-inbox-item__actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .ml-questions-detail__product {
    align-items: flex-start;
  }

  .ml-questions-detail__image {
    width: 56px;
    height: 56px;
    min-width: 56px;
  }

  .ml-questions-detail__actions {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width: 100%;
  }

  .ml-questions-detail__actions .ml-questions-btn,
  .ml-questions-detail__actions .ml-questions-status {
    width: 100%;
  }

  .ml-questions-detail__summary {
    grid-template-columns:
      1fr;
  }

  .ml-questions-detail__summary article {
    border-top: 1px solid var(--ml-border);
    border-right: 0;
  }

  .ml-questions-detail__summary article:first-child {
    border-top: 0;
  }

  .ml-questions-detail__tabs {
    display: grid;
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );

    gap: 6px;
  }

  .ml-questions-detail__tab {
    width: 100%;

    padding:
      0
      8px;

    font-size: 9px;
  }

  .ml-questions-detail__tab b {
    display: none;
  }

  .ml-questions-message {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      );
  }

  .ml-questions-message__avatar {
    width: 34px;
    height: 34px;
  }

  .ml-questions-message__meta {
    flex-direction: column;
    gap: 5px;
  }

  .ml-questions-answer-editor__head,
  .ml-questions-answer-editor__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .ml-questions-answer-editor__actions {
    justify-content: space-between;

    width: 100%;
  }

  .ml-questions-switch {
    width: 100%;
    min-width: 0;
  }

  .ml-questions-history__head {
    flex-direction: column;
    gap: 4px;
  }

  .ml-questions-modal {
    align-items: flex-end;

    padding: 0;
  }

  .ml-questions-modal__window,
  .ml-questions-modal__window--small {
    width: 100%;
    max-height: 92vh;

    border-right: 0;
    border-bottom: 0;
    border-left: 0;

    border-radius:
      16px
      16px
      0
      0;

    animation:
      mlQuestionsModalMobileEnter
      240ms
      ease
      both;
  }

  .ml-questions-modal__footer {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width: 100%;
  }

  .ml-questions-modal__footer .ml-questions-btn {
    width: 100%;
  }

  .ml-questions-toast {
    right: 10px;
    bottom: 18px;

    width:
      calc(
        100vw -
        20px
      );
  }
}

/* =========================================================
   RESPONSIVE · 480
   ========================================================= */

@media (max-width: 480px) {
  .ml-questions-brand__copy h2 {
    font-size: 20px;
  }

  .ml-questions-metrics {
    grid-template-columns:
      1fr;
  }

  .ml-questions-metric {
    min-height: 112px;
  }

  .ml-questions-filters__actions {
    grid-template-columns:
      1fr;
  }

  .ml-questions-inbox__head {
    grid-template-columns:
      1fr;
  }

  .ml-questions-inbox__total {
    justify-content: flex-start;
  }

  .ml-questions-inbox-item__top {
    flex-direction: column;
  }

  .ml-questions-inbox-item__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .ml-questions-detail__actions {
    grid-template-columns:
      1fr;
  }

  .ml-questions-detail__tabs {
    grid-template-columns:
      1fr;
  }

  .ml-questions-message {
    grid-template-columns:
      1fr;
  }

  .ml-questions-message__avatar {
    display: none;
  }

  .ml-questions-answer-editor__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ml-questions-answer-editor__actions .ml-questions-btn {
    width: 100%;
  }

  .ml-questions-history__item {
    grid-template-columns:
      1fr;
  }

  .ml-questions-modal__footer {
    grid-template-columns:
      1fr;
  }
}

/* =========================================================
   MODAL MOBILE
   ========================================================= */

@keyframes mlQuestionsModalMobileEnter {
  from {
    opacity: 0;

    transform: translateY(100%);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .ml-questions-page,
  .ml-questions-page *,
  .ml-questions-page *::before,
  .ml-questions-page *::after,
  .ml-questions-modal,
  .ml-questions-modal *,
  .ml-questions-modal *::before,
  .ml-questions-modal *::after,
  .ml-questions-toast,
  .ml-questions-toast *,
  .ml-questions-toast *::before,
  .ml-questions-toast *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}/* =========================================================
   CORRECCIÓN · PREGUNTAS SUPERPUESTAS
   ========================================================= */

.ml-questions-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  align-items: stretch !important;
  gap: 10px !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: 780px !important;

  padding: 10px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.ml-questions-list > .ml-questions-inbox-item {
  position: relative !important;

  grid-column: 1 / -1 !important;
  grid-row: auto !important;

  align-self: start !important;

  width: 100% !important;
  height: auto !important;
  min-height: 110px !important;
  max-height: none !important;

  margin: 0 !important;

  overflow: visible !important;

  transform: none;
}

.ml-questions-inbox-item__product,
.ml-questions-inbox-item__content,
.ml-questions-inbox-item__actions {
  position: relative !important;
  inset: auto !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.ml-questions-inbox-item__question {
  display: block !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

@media (max-width: 1400px) {
  .ml-questions-list > .ml-questions-inbox-item {
    min-height: 150px !important;
  }
}

@media (max-width: 720px) {
  .ml-questions-list {
    max-height: 620px !important;
  }

  .ml-questions-list > .ml-questions-inbox-item {
    min-height: 0 !important;
  }
}