/* =========================================
   MOBILE INBOX
========================================= */

@media screen and (max-width: 768px) {

  .inbox-page {
    margin:
      0 auto 32px;

    padding:
      0 8px;
  }

  .inbox-header {
    margin-bottom:
      16px;
  }

  .inbox-header .title {
    margin-bottom:
      6px !important;

    font-size:
      1.65rem !important;
  }

  .inbox-subtitle {
    margin-top:
      3px;

    font-size:
      0.82rem;
  }

  .inbox-list {
    gap:
      9px;
  }

  .inbox-conversation-wrapper {
    position:
      relative;
  }

  /* compact card */

  .inbox-conversation {
    position:
      relative;

    display:
      grid;

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

    min-height:
      108px;

    padding:
      0;

    overflow:
      hidden;

    border-radius:
      12px;
  }

  /* image */

  .inbox-image {
    width:
      82px;

    min-width:
      82px;

    height:
      100%;

    min-height:
      108px;

    align-self:
      stretch;
  }

  .inbox-image img {
    width:
      100%;

    height:
      100%;

    object-fit:
      cover;
  }

  .inbox-no-image,
  .inbox-direct-avatar {
    width:
      100%;

    height:
      100%;
  }

  /* content */

  .inbox-content {
    display:
      flex;

    flex-direction:
      column;

    justify-content:
      center;

    min-width:
      0;

    padding:
      11px 34px 11px 12px;
  }

  /* title */

  .inbox-title-row {
    display:
      flex;

    align-items:
      center;

    flex-wrap:
      wrap;

    gap:
      4px 6px;

    min-width:
      0;
  }

  .inbox-listing-title {
    min-width:
      0;

    max-width:
      100%;

    font-size:
      0.9rem;

    font-weight:
      850;

    line-height:
      1.2;
  }

  .inbox-title-price {
    color:
      var(--orange-dark);

    font-size:
      0.76rem;

    font-weight:
      900;
  }

  /* status */

  .inbox-status-badge {
    min-height:
      18px;

    padding:
      0 6px;

    font-size:
      0.5rem;
  }

  /* active is implied in inbox,
     so hide it on small screens */

  .inbox-status-badge.active {
    display:
      none;
  }

  .inbox-unread-badge {
    min-height:
      18px;

    padding:
      0 6px;

    font-size:
      0.5rem;
  }

  .inbox-unread-dot {
    width:
      6px;

    height:
      6px;
  }

  /* user */

  .inbox-user {
    margin:
      4px 0 0;

    color:
      var(--muted);

    font-size:
      0.7rem;

    line-height:
      1.25;
  }

  /* latest message */

  .inbox-message-area {
    min-width:
      0;

    margin-top:
      7px;
  }

  .inbox-message-label {
    display:
      none;
  }

  .inbox-latest-row {
    display:
      flex;

    align-items:
      center;

    gap:
      7px;

    min-width:
      0;
  }

  .inbox-preview {
    flex:
      1;

    min-width:
      0;

    max-width:
      none;

    margin:
      0;

    overflow:
      hidden;

    color:
      #4b5563;

    font-size:
      0.76rem;

    line-height:
      1.3;

    white-space:
      nowrap;

    text-overflow:
      ellipsis;
  }

  .inbox-latest-time {
    flex-shrink:
      0;

    color:
      var(--light-muted);

    font-size:
      0.59rem;

    white-space:
      nowrap;
  }

  .inbox-latest-time::before {
    display:
      none;
  }

  /* compact delete control */

  .inbox-delete-form {
    position:
      absolute;

    top:
      7px;

    right:
      7px;

    z-index:
      3;

    margin:
      0;
  }

  .inbox-delete-button {
    position:
      static;

    width:
      24px;

    min-width:
      24px;

    height:
      24px;

    min-height:
      24px;

    padding:
      0;

    color:
      #94a3b8;

    background:
      transparent;

    border:
      0;

    border-radius:
      50%;

    font-size:
      0;

    transform:
      none;
  }

  .inbox-delete-button::before {
    content:
      "×";

    font-size:
      1rem;

    font-weight:
      700;

    line-height:
      1;
  }

  .inbox-delete-button:hover,
  .inbox-delete-button:focus-visible {
    color:
      var(--red);

    background:
      #fff1f2;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media screen and (max-width: 480px) {

  .inbox-page {
    padding:
      0 4px;
  }

  .inbox-conversation {
    grid-template-columns:
      76px minmax(0, 1fr);

    min-height:
      104px;
  }

  .inbox-image {
    width:
      76px;

    min-width:
      76px;

    min-height:
      104px;
  }

  .inbox-content {
    padding:
      10px 31px 10px 10px;
  }

  .inbox-listing-title {
    font-size:
      0.86rem;
  }

  .inbox-title-price {
    font-size:
      0.73rem;
  }

  .inbox-user {
    font-size:
      0.67rem;
  }

  .inbox-preview {
    font-size:
      0.73rem;
  }

  .inbox-latest-time {
    font-size:
      0.56rem;
  }

  .inbox-delete-form {
    top:
      6px;

    right:
      5px;
  }

}


/* =========================================
   FINAL MOBILE INBOX POLISH
========================================= */

@media screen and (max-width: 768px) {

  .inbox-title-row
  .inbox-status-badge.sale-agreed,
  .inbox-title-row
  .inbox-status-badge.sold,
  .inbox-title-row
  .inbox-status-badge.reserved {
    margin-left:
      auto;
  }

  .inbox-meta-row {
    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      8px;

    min-width:
      0;

    margin-top:
      4px;
  }

  .inbox-meta-row .inbox-user {
    min-width:
      0;

    margin:
      0;
  }

  .inbox-meta-row .inbox-latest-time {
    flex-shrink:
      0;
  }

  .inbox-message-area {
    margin-top:
      6px;
  }

  .inbox-preview {
    width:
      100%;

    max-width:
      100%;
  }

  .inbox-delete-button {
    color:
      #94a3b8 !important;

    background:
      transparent !important;
  }

}

@media (hover: hover) and (pointer: fine) {

  @media screen and (max-width: 768px) {

    .inbox-delete-button:hover {
      color:
        var(--red) !important;

      background:
        #fff1f2 !important;
    }

  }

}


/* =========================================
   MESSAGE + TIME ROW
========================================= */

@media screen and (max-width: 768px) {

  .inbox-meta-row {
    display:
      block;
  }

  .inbox-latest-row {
    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      8px;

    min-width:
      0;
  }

  .inbox-latest-row .inbox-preview {
    flex:
      1;

    min-width:
      0;
  }

  .inbox-latest-row .inbox-latest-time {
    flex-shrink:
      0;

    align-self:
      center;
  }

}