/* Inbox and thread layouts share the reservation workspace typography. */
.inbox-page { max-width: 940px; padding-block: 28px 56px; }
.inbox-list { margin-top: 16px; }
.inbox-thread {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    gap: 13px; min-height: 90px; padding: 12px 9px; border-bottom: 1px solid var(--line);
}
.inbox-thread:is(:hover, :focus-visible) { background: var(--cream); }
.inbox-thread:focus-visible { outline-offset: -2px; }
.inbox-thread > img { width: 64px; height: 64px; border-radius: 13px; background: var(--cream); }
.inbox-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.inbox-meta h2 { font-size: 1rem; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.inbox-meta time { color: var(--muted); white-space: nowrap; font-size: .75rem; }
.inbox-listing, .inbox-preview { color: var(--muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-listing { font-size: .79rem; margin-top: 3px; }
.inbox-preview { font-size: .86rem; margin-top: 4px; color: var(--text); }
.inbox-thread .inbox-arrow { width: 17px; height: 17px; color: var(--muted); }

.thread-page { max-width: 900px; padding-block: 22px 40px; }
.thread-panel { height: min(740px, 86dvh); min-height: 450px; box-shadow: var(--shadow); }
.thread-header { flex: 0 0 auto; padding: 8px 17px 10px; border-bottom: 1px solid var(--line); }
.thread-back {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 9px;
    border-radius: 10px; font-size: .85rem; font-weight: 700; color: var(--orange);
}
.thread-back:hover { background: var(--cream); }
.thread-back .icon { width: 17px; height: 17px; }
.thread-person { display: flex; align-items: center; gap: 11px; margin-block: 4px 8px; padding-inline: 8px; }
.thread-person > div:last-child { min-width: 0; overflow-wrap: anywhere; }
.thread-person h1 { font-size: clamp(1.08rem, 4.5vw, 1.35rem); }
.thread-person p { color: var(--muted); font-size: .82rem; line-height: 1.35; margin-top: 3px; }
.thread-stay.conversation-context { position: static; padding: 0; }
.thread-stay summary {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 8px;
    border-radius: 9px; list-style: none; cursor: pointer; font-size: .83rem; font-weight: 650;
}
.thread-stay summary::-webkit-details-marker { display: none; }
.thread-stay summary:hover { background: var(--cream); }
.thread-stay summary .icon { width: 16px; height: 16px; }
.thread-stay[open] summary .icon:last-child { transform: rotate(180deg); }
.thread-stay-body { max-height: min(165px, 27dvh); overflow: auto; padding: 8px 10px; background: var(--cream); border-radius: 11px; }
.thread-stay-body p { font-size: .83rem; }
.thread-listing-link, .thread-trips-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: .83rem; font-weight: 700; }
.thread-listing-link .icon { width: 15px; height: 15px; }
.thread-trips-link { color: var(--orange); text-decoration: underline; }
.thread-stay-body .booking-actions { margin-top: 8px; }
.thread-panel .chat-feed { min-height: 0; padding: 17px; gap: 12px; background: #fbfaf8; }
.thread-panel .chat-feed:focus-visible { outline-offset: -3px; }
.thread-panel .message { flex-shrink: 0; max-width: min(88%, 560px); padding: 9px 12px; white-space: normal; }
.thread-panel .message p { white-space: pre-wrap; font-size: .94rem; line-height: 1.5; }
.thread-panel .message time { margin-top: 4px; font-size: .7rem; }
.thread-panel .message.mine { background: #f8ede4; border-color: #eedcd0; }
.thread-panel .chat-empty .icon { width: 30px; height: 30px; color: var(--orange); margin-bottom: 8px; }
.thread-panel .chat-feedback:not(:empty) { padding-block: 4px; }
.thread-panel > [data-chat-changed][hidden] { display: none; }
.thread-panel .chat-compose { align-items: end; flex-shrink: 0; padding: 10px 14px; }
.thread-panel .chat-compose textarea {
    flex: 1; width: auto; min-width: 0; min-height: 46px; padding: 10px 13px;
    border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: #fff;
}
.thread-panel .chat-compose .button { min-height: 46px; border-radius: 14px; padding: 10px 13px; }
.thread-panel .chat-compose .button:disabled { opacity: .65; }

@media (max-width: 559px) {
    .inbox-page { width: calc(100% - 32px); padding-block: 22px 42px; }
    .inbox-thread { gap: 9px; padding-inline: 4px; }
    .inbox-thread > img { width: 53px; height: 53px; border-radius: 11px; }
    .inbox-thread .inbox-arrow { width: 14px; height: 14px; }
    main:has(.thread-page) { display: flex; flex-direction: column; height: calc(100dvh - 58px); min-height: 420px; }
    .thread-page { display: flex; flex: 1; width: 100%; min-height: 340px; padding-block: 0; }
    .thread-panel { flex: 1; height: auto; min-height: 0; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
    .thread-header { position: sticky; top: 0; z-index: 2; padding: 4px 11px 6px; background: #fff; }
    .thread-panel .chat-feed { padding: 13px; }
    .thread-panel .chat-compose { padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); }
    .thread-panel .chat-compose .button { min-width: 46px; }
}