/* Messages (S43): B-09, B-10, O-31 and G-01's "Ask the owner". The thread, bubble, composer and masked-span rules are
   the design system's (bundle.css: MessageBubble, MaskedText), copied here. */
.bh-msgs { display: grid; gap: var(--space-4); min-width: 0; }
.bh-msgs p { margin: 0; }

/* Lists: a card of rows, each a link (B09-list, O31-list) */
.bh-msgs-list {
  display: grid; margin: 0; padding: 0; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden;
}
.bh-msgs-list > li + li { border-top: 1px solid var(--line); }
.bh-msgs-row {
  display: flex; align-items: flex-start; gap: var(--space-3); min-height: 72px; padding: var(--space-3) var(--space-4);
  color: var(--ink-1); text-decoration: none;
}
.bh-msgs-row:hover { background: var(--sunken); color: var(--ink-1); }
.bh-msgs-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; }
.bh-msgs-row-text { display: grid; gap: var(--space-1); flex: 1 1 auto; min-width: 0; justify-items: start; }
.bh-msgs-row-head { display: flex; justify-content: space-between; gap: var(--space-2); width: 100%; }
.bh-msgs-row-title { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bh-msgs-excerpt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: var(--ink-2);
}
.bh-msgs-thumb, .bh-msgs-avatar {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px;
  border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--sunken); color: var(--ink-3);
}
.bh-msgs-avatar { border-radius: var(--radius-pill); background: var(--primary-soft); border-color: transparent; color: var(--primary); font-weight: var(--weight-bold); }
.bh-msgs-group { display: grid; gap: var(--space-2); }
.bh-msgs-group-title { margin: 0; font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); }
.bh-msgs-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bh-msgs-filter > a { min-height: var(--target-min); padding: var(--space-2) var(--space-3); font-size: var(--text-small); text-decoration: none; }

/* Empty states (B09-empty, O31-empty) */
.bh-msgs-empty { display: grid; gap: var(--space-3); justify-items: start; }
.bh-msgs-badge {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-pill);
  background: var(--sunken); color: var(--ink-2); border: 1px solid var(--line);
}

/* B-10's apartment card, O-31's head and the guest's booking */
.bh-msgs-apt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bh-msgs-apt-text { display: grid; gap: var(--space-1); flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.bh-msgs-apt-title { margin: 0; font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--weight-bold); }
.bh-msgs-head { display: grid; gap: var(--space-1); justify-items: start; overflow-wrap: anywhere; }
.bh-msgs-head h1 { margin: 0; }
.bh-msgs-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.bh-msgs-intro { display: grid; gap: var(--space-2); }
.bh-msgs-hint { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--ink-2); }
.bh-msgs-hint > .bh-icon { flex: none; margin-top: 2px; }
.bh-msgs-notice { display: flex; align-items: flex-start; gap: var(--space-3); }
.bh-msgs-notice > .bh-icon { flex: none; color: var(--ink-2); }
.bh-msgs-notice > div { display: grid; gap: var(--space-2); justify-items: start; }
.bh-msgs-notice h2 { margin: 0; }
.bh-msgs-options > summary { list-style: none; justify-self: start; }
.bh-msgs-options > summary::-webkit-details-marker { display: none; }
.bh-msgs-options[open] > summary { margin-bottom: var(--space-2); }
.bh-msgs-options > .bh-card { display: grid; gap: var(--space-3); justify-items: start; }
.bh-msgs-options h2 { margin: 0; }
.bh-msgs-ask { display: grid; gap: var(--space-2); margin-top: var(--space-3); }

/* MessageBubble */
.bh-thread { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.bh-msg { display: grid; gap: var(--space-1); max-width: min(80%, 480px); }
.bh-msg--mine { justify-self: end; justify-items: end; }
.bh-msg--theirs { justify-self: start; justify-items: start; }
.bh-msg-bubble { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-card); white-space: pre-wrap; overflow-wrap: anywhere; }
.bh-msg--mine .bh-msg-bubble { background: var(--primary-soft); }
.bh-msg--theirs .bh-msg-bubble { background: var(--card); border: 1px solid var(--line); }
.bh-msg-sender { color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-bold); }
.bh-msg-meta { display: flex; align-items: center; gap: var(--space-1); color: var(--ink-3); font-size: var(--text-label); line-height: var(--leading-label); font-variant-numeric: tabular-nums; }
.bh-msg-note { color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); text-align: right; }
.bh-msg--system {
  justify-self: center; display: flex; align-items: center; gap: var(--space-2); max-width: 100%;
  color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); text-align: center;
}
.bh-msg--system > .bh-icon { flex: none; }
.bh-msg-day { justify-self: center; color: var(--ink-3); font-size: var(--text-label); line-height: var(--leading-label); }

/* The composer */
.bh-composer { display: grid; gap: var(--space-3); justify-items: start; }
.bh-composer > .bh-field, .bh-composer > .bh-banner { width: 100%; }
.bh-msg-input { width: 100%; min-height: 96px; resize: vertical; }

/* MaskedText: contact details before a confirmed booking read "[shown after booking]" */
.bh-masked {
  padding: 0 var(--space-1); border: 1px dashed var(--ink-3); border-radius: var(--radius-inline); background: var(--sunken);
  color: var(--ink-2); font-size: var(--text-small); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}