/* =========================================
   INBOX PAGE
========================================= */

.inbox-page {
  max-width:
    900px;

  margin:
    8px auto
    50px;

  padding:
    0 16px;
}


/* =========================================
   HEADER
========================================= */

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


.inbox-eyebrow {
  margin:
    0 0 2px;

  color:
    var(--muted);

  font-size:
    0.76rem;

  font-weight:
    750;
}


.inbox-subtitle {
  margin:
    6px 0 0;

  color:
    var(--muted);

  font-size:
    0.9rem;

  line-height:
    1.45;
}


/* =========================================
   CONVERSATION LIST
========================================= */

.inbox-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


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


/* =========================================
   CONVERSATION CARD
========================================= */

.inbox-conversation {
  display:
    flex;

  align-items:
    stretch;

  min-height:
    116px;

  padding-right:
    100px;

  overflow:
    hidden;

  color:
    inherit;

  background-color:
    #ffffff;

  border:
    1px solid
    #dce4eb;

  border-radius:
    12px;

  box-shadow:
    0 3px 12px
    rgba(
      15,
      23,
      42,
      0.05
    );

  cursor:
    pointer;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}


.inbox-conversation:hover {
  transform:
    translateY(-1px);

  background-color:
    #fffdf9;

  border-color:
    #c8d3dd;

  box-shadow:
    0 7px 18px
    rgba(
      15,
      23,
      42,
      0.08
    );
}


.inbox-conversation:focus-visible {
  outline:
    3px solid
    rgba(
      37,
      99,
      235,
      0.16
    );

  outline-offset:
    2px;
}


/* =========================================
   UNREAD
========================================= */

.inbox-conversation-unread {
  background:
    linear-gradient(
      90deg,
      #fff8ee 0%,
      #ffffff 42%
    );

  border-color:
    var(--orange);

  box-shadow:
    0 4px 14px
    rgba(
      245,
      158,
      11,
      0.12
    );
}


.inbox-conversation-unread:hover {
  background:
    linear-gradient(
      90deg,
      #fff4df 0%,
      #ffffff 42%
    );

  border-color:
    var(--orange-dark);
}


.inbox-conversation-unread
.inbox-listing-title {
  font-weight:
    900;
}


.inbox-conversation-unread
.inbox-preview {
  color:
    var(--navy);

  font-weight:
    750;
}


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

  height:
    8px;

  flex-shrink:
    0;

  background-color:
    var(--orange);

  border-radius:
    50%;

  box-shadow:
    0 0 0 3px
    rgba(
      245,
      158,
      11,
      0.13
    );
}


.inbox-unread-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    20px;

  padding:
    0 7px;

  color:
    var(--navy);

  background-color:
    var(--orange);

  border-radius:
    999px;

  font-size:
    0.59rem;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.04em;

  white-space:
    nowrap;
}


/* =========================================
   IMAGE
========================================= */

.inbox-image {
  width:
    120px;

  min-width:
    120px;

  height:
    116px;

  min-height:
    116px;

  flex-shrink:
    0;

  overflow:
    hidden;

  background:
    linear-gradient(
      135deg,
      #eef2f6,
      #e2e8f0
    );
}


.inbox-image img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  transition:
    transform 0.2s ease;
}


.inbox-conversation:hover
.inbox-image img {
  transform:
    scale(1.025);
}


.inbox-no-image,
.inbox-direct-avatar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  height:
    100%;

  font-weight:
    800;
}


.inbox-no-image {
  color:
    var(--light-muted);

  background:
    linear-gradient(
      135deg,
      #eef2f6,
      #e2e8f0
    );

  font-size:
    0.76rem;
}


.inbox-direct-avatar {
  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      #294561
    );

  font-size:
    1.15rem;

  letter-spacing:
    0.04em;
}


/* =========================================
   CONTENT
========================================= */

.inbox-content {
  display:
    flex;

  flex:
    1;

  flex-direction:
    column;

  justify-content:
    center;

  min-width:
    0;

  padding:
    14px 20px;
}


/* =========================================
   TITLE
========================================= */

.inbox-title-row {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;
}


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

  color:
    var(--navy);

  font-size:
    0.98rem;

  font-weight:
    850;

  line-height:
    1.25;

  overflow-wrap:
    anywhere;
}


.inbox-title-price {
  flex-shrink:
    0;

  color:
    var(--orange-dark);

  font-size:
    0.9rem;

  font-weight:
    900;

  white-space:
    nowrap;
}


/* =========================================
   LISTING STATUS
========================================= */

.inbox-status-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    20px;

  padding:
    0 7px;

  border-radius:
    999px;

  font-size:
    0.59rem;

  font-weight:
    850;

  white-space:
    nowrap;
}


.inbox-status-badge.active {
  color:
    #166534;

  background-color:
    #dcfce7;

  border:
    1px solid
    #bbf7d0;
}


.inbox-status-badge.reserved {
  color:
    #1e40af;

  background-color:
    #dbeafe;

  border:
    1px solid
    #bfdbfe;
}


.inbox-status-badge.sale-agreed {
  color:
    #92400e;

  background-color:
    #fff7ed;

  border:
    1px solid
    #fed7aa;
}


.inbox-status-badge.sold {
  color:
    #ffffff;

  background-color:
    var(--green);

  border:
    1px solid
    var(--green);
}


/* =========================================
   USER
========================================= */

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

  color:
    var(--muted);

  font-size:
    0.8rem;

  line-height:
    1.35;
}


.inbox-user-link {
  color:
    var(--blue);

  font-weight:
    800;

  text-decoration:
    none;
}


.inbox-user-link:hover {
  color:
    var(--orange-dark);

  text-decoration:
    underline;

  text-underline-offset:
    3px;
}


/* =========================================
   MESSAGE AREA
========================================= */

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

  margin-top:
    9px;
}


.inbox-message-label {
  margin:
    0 0 2px;

  color:
    var(--light-muted);

  font-size:
    0.64rem;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.04em;
}


/* =========================================
   LATEST MESSAGE + TIME
========================================= */

.inbox-latest-row {
  display:
    flex;

  align-items:
    center;

  min-width:
    0;
}


.inbox-preview {
  min-width:
    0;

  max-width:
    460px;

  margin:
    0;

  overflow:
    hidden;

  color:
    #4b5563;

  font-size:
    0.84rem;

  line-height:
    1.4;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.inbox-latest-time {
  display:
    inline-flex;

  align-items:
    center;

  flex-shrink:
    0;

  color:
    var(--light-muted);

  font-size:
    0.69rem;

  white-space:
    nowrap;
}


.inbox-latest-time::before {
  content:
    "•";

  margin:
    0 7px;

  color:
    #a8b2bd;
}


/* =========================================
   DIRECT CHAT LABEL
========================================= */

.inbox-direct-label {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    20px;

  padding:
    0 7px;

  color:
    #475569;

  background-color:
    #f1f5f9;

  border:
    1px solid
    #e2e8f0;

  border-radius:
    999px;

  font-size:
    0.59rem;

  font-weight:
    800;

  white-space:
    nowrap;
}


/* =========================================
   DELETE
========================================= */

.inbox-delete-button {
  position:
    absolute;

  top:
    50%;

  right:
    16px;

  z-index:
    2;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    30px;

  padding:
    0 10px;

  color:
    #b91c1c;

  background-color:
    #ffffff;

  border:
    1px solid
    #fecaca;

  border-radius:
    7px;

  font-family:
    inherit;

  font-size:
    0.66rem;

  font-weight:
    800;

  text-decoration:
    none;

  transform:
    translateY(-50%);

  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}


.inbox-delete-button:hover {
  color:
    #ffffff;

  background-color:
    var(--red);

  border-color:
    var(--red);
}


/* =========================================
   EMPTY
========================================= */

.inbox-empty {
  padding:
    58px 25px;

  color:
    var(--muted);

  background:
    linear-gradient(
      135deg,
      #f8fafc,
      #fffaf3
    );

  border:
    1px dashed
    var(--border-dark);

  border-radius:
    var(--radius-large);

  text-align:
    center;
}

/* =========================================
   DESKTOP INBOX REFINEMENT
========================================= */

@media screen and (min-width: 769px) {

  .inbox-page {
    max-width:
      860px;

    margin:
      18px auto 48px;

    padding:
      0 14px;
  }

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

  .inbox-list {
    gap:
      10px;
  }

  .inbox-conversation {
    position:
      relative;

    min-height:
      104px;

    padding-right:
      42px;

    border-radius:
      11px;
  }

  .inbox-image {
    width:
      108px;

    min-width:
      108px;

    height:
      104px;

    min-height:
      104px;
  }

  .inbox-content {
    justify-content:
      center;

    padding:
      12px 16px;
  }

  .inbox-title-row {
    gap:
      5px 7px;
  }

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

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

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

    font-size:
      0.76rem;
  }

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

  .inbox-message-label {
    margin-bottom:
      1px;

    font-size:
      0.59rem;
  }

  .inbox-preview {
    max-width:
      none;

    font-size:
      0.8rem;
  }

  .inbox-latest-row {
    justify-content:
      flex-start;

    gap:
      7px;
  }

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

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

  .inbox-delete-form {
    position:
      absolute;

    top:
      9px;

    right:
      9px;

    z-index:
      3;

    margin:
      0;
  }

  .inbox-delete-button {
    position:
      static;

    width:
      26px;

    min-width:
      26px;

    height:
      26px;

    min-height:
      26px;

    padding:
      0;

    color:
      #94a3b8;

    background:
      transparent;

    border:
      0;

    border-radius:
      50%;

    font-size:
      0;

    transform:
      none;
  }

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

    font-size:
      1.05rem;

    font-weight:
      700;

    line-height:
      1;
  }

}

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

  @media screen and (min-width: 769px) {

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

      background:
        #fff1f2;
    }

  }

}