.inbox-navigation { display: flex; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #d8e6eb; }
.inbox-navigation button { flex: 1; min-height: 44px; }
.inbox-navigation [aria-pressed="true"] { background: #dceff0; border-color: #267d83; }
#portal-inbox { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 24px; }
#portal-inbox > p, .inbox-thread > p { margin: 0; }
#portal-inbox > p:empty, .inbox-thread > p:empty { margin: 0; height: 0; }
.inbox-status:not(:empty), .inbox-thread > p[role="status"]:not(:empty) { padding: 8px 10px; border-radius: 8px; background: #f0f4f6; color: #405a68; font-size: .875rem; line-height: 1.4; }
.inbox-status:not(:empty) { border-left: 3px solid #267d83; }
.inbox-patients { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.inbox-patients button { text-align: left; white-space: normal; overflow-wrap: anywhere; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.inbox-patients button:only-child { font-size: .875rem; }
.inbox-patient-name { min-width: 0; overflow-wrap: anywhere; }
.inbox-patients time { color: #506777; font-size: .8125rem; }
.inbox-patients .inbox-unread { background: #f0f8f8; border-color: #267d83; border-left-width: 4px; }
.inbox-patients .inbox-unread .inbox-patient-name { font-weight: 700; }
.inbox-unread-badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #176269; color: #fff; font-size: .8125rem; font-weight: 700; overflow-wrap: anywhere; max-width: 100%; }
.inbox-patients button[aria-pressed="true"] { background: #dceff0; border-color: #267d83; box-shadow: inset 0 0 0 2px #267d83; }
.inbox-patients button.inbox-unread[aria-pressed="true"] { border-left-width: 4px; }
.inbox-thread { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.inbox-thread h2 { margin: 0; font-size: 1.125rem; line-height: 1.4; }
.inbox-notice { color: #506777; font-size: .875rem; line-height: 1.5; margin: 0 0 8px; }
/* Normal flow and auto top margin keep short histories at the bottom without
   hiding the start of overflowing histories or reversing sequence order. */
.inbox-messages { display: flex; flex-direction: column; height: clamp(180px, 32vh, 340px); overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; padding: 10px; border: 1px solid #e1ebef; border-radius: 12px; background: #fbfdfd; }
.inbox-messages > :first-child { margin-top: auto; }
.inbox-messages:has(> .inbox-empty:only-child) { height: clamp(120px, 20vh, 180px); }
.inbox-empty { margin: auto 0; padding: 20px 10px; text-align: center; color: #506777; }
.inbox-message { flex-shrink: 0; width: fit-content; max-width: 90%; padding: 12px; margin: 8px 0; border-radius: 12px; background: #f0f4f6; overflow-wrap: anywhere; }
.inbox-own { margin-left: auto; background: #dceff0; }
.inbox-message time { display: block; color: #506777; font-size: .75rem; margin-top: 4px; }
.inbox-message p { white-space: pre-wrap; margin: 8px 0 0; }
.inbox-composer { min-width: 0; padding-top: 4px; }
.inbox-composer label { display: block; margin: 12px 0 8px; font-weight: 600; }
.inbox-thread textarea { display: block; width: 100%; resize: vertical; min-height: 96px; padding: 12px; border: 1px solid #8098a5; border-radius: 10px; line-height: 1.5; }
.inbox-composer > p[role="status"] { margin: 8px 0 0; }
.inbox-composer > p[role="status"]:not(:empty) { font-size: .875rem; color: #405a68; overflow-wrap: anywhere; }
.inbox-composer > p[role="status"]:empty { margin: 0; }
.inbox-composer-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.inbox-composer-actions > span { text-align: right; font-size: .875rem; color: #506777; }
.inbox-composer-actions > button { min-height: 44px; min-width: 96px; }
.inbox-thread > button { min-height: 44px; align-self: flex-start; }
.inbox-thread textarea:focus-visible, .inbox-messages:focus-visible { outline: 3px solid #267d83; outline-offset: 3px; }
.inbox-thread h2, .inbox-notice { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  #portal-inbox { padding: 12px 12px 20px; }
  .inbox-navigation { padding: 12px; }
  .inbox-message { max-width: 95%; }
  .inbox-messages { height: clamp(160px, 28vh, 260px); }
  .inbox-composer-actions { gap: 10px; }
}