/**
 * StoneVaults — messaging layout + UI/UX (supplier / buyer / admin messages)
 */

/* Dashboard main: flex column so messages shell can fill height */
html[data-sv-area] .dashboard-shell,
html[data-sv-area] .dashboard-shell > div {
  min-height: 0;
}

html[data-sv-area] .dashboard-main,
html[data-sv-area] main.dashboard-main,
html[data-sv-area] .dashboard-shell main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

html[data-sv-area] .dashboard-main > div,
html[data-sv-area] .dashboard-main > * {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Messages shell */
.sv-messages-shell {
  min-height: calc(100dvh - 7.5rem);
  max-height: calc(100dvh - 7.5rem);
}

@media (max-width: 1023px) {
  .sv-messages-shell {
    min-height: calc(100dvh - 6rem);
    max-height: calc(100dvh - 6rem);
    border-radius: 0.875rem;
  }
}

@media (max-width: 767px) {
  .sv-messages-shell {
    min-height: calc(100dvh - 5.25rem);
    max-height: calc(100dvh - 5.25rem);
    border-radius: 0.75rem;
  }

  html[data-sv-messages-page] .dashboard-main {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.5rem !important;
  }
}

/* Chat list */
.sv-chat-list {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.sv-chat-list-item {
  -webkit-tap-highlight-color: transparent;
}

.sv-chat-list-item h4 {
  line-height: 1.35;
}

/* Chat pane */
.sv-chat-pane {
  min-height: 12rem;
}

.sv-messages-chat-wrap .sv-chat-pane {
  flex: 1 1 auto;
  min-height: 0;
}

.sv-chat-pane form {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: #f9fafb;
  z-index: 2;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.sv-chat-pane .flex-1.overflow-y-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Message bubbles */
.sv-chat-pane .max-w-\[70\%\] {
  max-width: min(85%, 22rem);
}

@media (max-width: 767px) {
  .sv-chat-pane .max-w-\[70\%\] {
    max-width: min(92%, 20rem);
  }

  .sv-chat-pane input[type="text"],
  .sv-chat-pane textarea {
    font-size: 16px !important;
    min-height: 2.75rem;
  }

  .sv-chat-pane button[type="submit"] {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* Hide duplicate desktop close on mobile when back button shows */
@media (max-width: 767px) {
  .sv-messages-shell .sv-messages-chat-wrap > div > div:first-child button[title="Close"] {
    display: none;
  }
}

/* Empty state */
.sv-messages-shell .flex-1.flex.flex-col.items-center.justify-center {
  padding: 2rem 1.25rem;
}

.sv-messages-shell .flex-1.flex.flex-col.items-center.justify-center h3 {
  color: #334155;
}

/* Loading shimmer for list */
.sv-messages-loading {
  padding: 2rem;
  text-align: center;
  color: #64748b;
  font-size: 0.875rem;
}

html[data-sv-messages-page] .sv-messages-list-header {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

/* Sent bubble polish */
.sv-chat-pane .bg-blue-500,
.sv-chat-pane .bg-blue-600 {
  box-shadow: 0 1px 2px rgba(30, 58, 95, 0.12);
}

.sv-chat-pane .bg-gray-200,
.sv-chat-pane .bg-gray-100 {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Unread badge + list meta */
.sv-chat-list-item .bg-red-500,
.sv-chat-list-item .bg-primary-600 {
  font-size: 0.65rem;
  min-width: 1.25rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.sv-chat-list-item p.text-xs {
  color: #64748b;
}

.sv-chat-list-item .font-semibold.text-gray-900 {
  color: #0f172a;
}

/* Mobile: full-width chat when thread selected */
@media (max-width: 767px) {
  html[data-sv-messages-page] .sv-messages-shell > div.hidden.md\:flex {
    display: none !important;
  }

  html[data-sv-messages-page] .sv-messages-shell > div.flex.md\:hidden,
  html[data-sv-messages-page] .sv-messages-shell > div:not(.hidden) {
    width: 100%;
  }
}

/* Admin chats route */
html[data-sv-area="admin"][data-sv-messages-page] .sv-messages-shell {
  min-height: calc(100dvh - 5.5rem);
  max-height: calc(100dvh - 5.5rem);
}
