body { min-height: 100dvh; background: var(--ds-color-canvas); color: var(--ds-color-text); }
.message-language-reminder { margin: 0 0 8px; font-size: .78rem; line-height: 1.4; font-weight: 500; color: var(--ds-color-text-muted); overflow-wrap: anywhere; }
.message-language-reminder[hidden] { display: none; }
.compose-dialog .message-language-reminder { margin: 0 16px 8px; }
.message-translation{margin-top:9px;max-width:100%;overflow-wrap:anywhere}
.message-translated{border-top:1px solid currentColor;margin-top:5px;padding-top:9px;white-space:pre-wrap}
.message-translated strong{display:block;font-size:.73rem;color:inherit}.message-translated p{margin:5px 0 0;font-size:inherit;line-height:1.45;white-space:pre-wrap;color:inherit}
.message-translation-status{font-size:.78rem;margin:5px 0;line-height:1.4;color:inherit}
.message-translation-error{font-size:.78rem;margin:5px 0;line-height:1.4;color:inherit}
.messages-shell { width: min(1200px, 100%); min-height: 100dvh; margin: 0 auto; padding: var(--ds-space-4); }
.messages-shell.has-app-navigation { padding-bottom: calc(92px + 3dvh + env(safe-area-inset-bottom)); }
.test-banner { display: flex; justify-content: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--ds-color-urgent); color: var(--ds-color-text-muted); font-size: .78rem; text-align: center; }
.test-banner strong { color: var(--ds-color-urgent); }
.messages-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-5) 0; border-bottom: 1px solid var(--ds-color-border); }
.messages-header > div { text-align: left; }
.messages-header h1, .messages-header p { margin: 0; }
.messages-header #open-compose { justify-self: end; }
.back-link { min-height: 48px; display: inline-flex; align-items: center; width: fit-content; padding: 0 14px; border: 1px solid var(--ds-color-action); color: var(--ds-color-action); font-weight: 850; text-decoration: none; }
.page-unread { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 999px; background: var(--ds-color-action); color: var(--white); font-size: .76rem; vertical-align: middle; }
.messages-layout { display: grid; grid-template-columns: minmax(300px, 38%) 1fr; min-height: min(680px, calc(100dvh - 180px)); border: 1px solid var(--ds-color-border); border-top: 0; }
.inbox-pane { border-right: 1px solid var(--ds-color-border); }
.message-filters { display: flex; gap: 4px; overflow-x: auto; padding: var(--ds-space-3); border-bottom: 1px solid var(--ds-color-divider); }
.message-filters button { min-height: 44px; padding: 0 12px; border: 1px solid var(--ds-color-border); background: var(--white); color: var(--ds-color-heading); font-weight: 800; white-space: nowrap; }
.message-filters button.active { border-color: var(--ds-color-action); background: var(--ds-color-action); color: var(--white); }
.conversation-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 11px; width: 100%; min-height: 88px; padding: 13px; border: 0; border-bottom: 1px solid var(--ds-color-divider); background: var(--white); color: var(--ds-color-text); text-align: left; }
.conversation-row:hover, .conversation-row:focus-visible, .conversation-row.selected { background: var(--ds-color-surface-supporting); outline: none; }
.conversation-row.unread .conversation-name, .conversation-row.unread .conversation-preview { font-weight: 900; }
.conversation-avatar { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--ds-color-border); border-radius: 50%; color: var(--ds-color-heading); font-size: .78rem; font-weight: 900; }
.conversation-avatar.on-campus { border-color: var(--church-green); background: var(--church-green); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--church-green); }
.conversation-avatar.on-campus::after { position: absolute; right: -3px; bottom: -2px; width: 10px; height: 10px; border: 2px solid var(--white); border-radius: 50%; background: var(--church-green); content: ""; }
.conversation-avatar.system { border-radius: var(--ds-radius-none); color: var(--ds-color-text-muted); }
.conversation-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.conversation-copy { min-width: 0; }
.conversation-name, .conversation-preview, .conversation-subject { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-subject { margin-top: 3px; color: var(--ds-color-text-muted); font-size: .72rem; text-transform: uppercase; }
.conversation-preview { margin-top: 5px; color: var(--ds-color-text-muted); font-size: .8rem; }
.conversation-meta { display: grid; justify-items: end; gap: 8px; color: var(--ds-color-text-muted); font-size: .7rem; }
.unread-count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--ds-color-action); color: var(--white); font-weight: 900; }
.important-mark { color: var(--ds-color-observation); font-weight: 900; }
.conversation-list .ds-empty-state { border: 0; }
.thread-pane { position: relative; min-width: 0; }
.thread-empty { display: grid; place-content: center; min-height: 100%; padding: var(--ds-space-6); color: var(--ds-color-text-muted); text-align: center; }
.thread-empty strong { color: var(--ds-color-heading); font-size: 1.2rem; }
.thread-empty span { margin-top: 6px; }
#thread-view { display: grid; grid-template-rows: auto minmax(300px, 1fr) auto; min-height: 100%; }
.thread-header { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; min-height: 88px; padding: 13px 16px; border-bottom: 1px solid var(--ds-color-border); }
.thread-header h2, .thread-header p { margin: 0; }
.thread-header > div > span { color: var(--ds-color-text-muted); font-size: .76rem; }
.thread-back { display: none; min-height: 44px; border: 0; background: none; color: var(--ds-color-action); font-weight: 850; }
.thread-home { display: none; min-height: 44px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--ds-color-action); color: var(--ds-color-action); font-weight: 850; text-decoration: none; }
.quiet-button { min-height: 44px; padding: 0 10px; border: 1px solid var(--ds-color-border); background: var(--white); color: var(--ds-color-heading); font-weight: 800; }
.thread-menu { min-width: 44px; font-size: 1.55rem; line-height: 1; }
.thread-options { position: fixed; top: 78px; right: 12px; z-index: 30; padding: 6px; border: 1px solid var(--ds-color-border); border-radius: 8px; background: var(--white); box-shadow: 0 8px 28px rgb(0 0 0 / 20%); }
.thread-options button { min-height: 44px; border: 0; background: var(--white); font-weight: 800; }
.message-list { display: block; overflow-y: auto; padding: var(--ds-space-4); background: var(--white); }
.load-earlier { display: block; min-height: 40px; margin: 0 auto 12px; padding: 0 14px; border: 1px solid var(--ds-color-border); border-radius: 999px; background: var(--white); color: var(--ds-color-heading); font-weight: 800; }
.message-day { margin: 12px 0; color: var(--ds-color-text-muted); font-size: .7rem; font-weight: 800; text-align: center; }
.message-block { display: flex; align-items: flex-start; min-height: 0; margin: 7px 0; }
.message-block.outgoing { justify-content: flex-end; }
.message-block.grouped { margin-top: -4px; }
.message-block.grouped .message-author { display: none; }
.unread-divider { display: flex; align-items: center; gap: 8px; margin: 14px 0; color: var(--ds-color-action); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.unread-divider::before, .unread-divider::after { flex: 1; height: 1px; background: currentColor; content: ""; opacity: .45; }
.message-bubble { position: relative; width: fit-content; max-width: min(78%, 560px); min-height: 0; padding: 10px 42px 10px 12px; border: 1px solid var(--ds-color-divider); border-radius: 14px 14px 14px 4px; background: var(--ds-color-surface-supporting); white-space: pre-wrap; overflow-wrap: anywhere; }
.message-block.outgoing .message-bubble { border-radius: 14px 14px 4px 14px; }
.message-action { position: absolute; top: 2px; right: 3px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.4rem; font-weight: 900; line-height: 1; opacity: .8; touch-action: manipulation; }
.message-action:hover, .message-action:focus-visible { background: rgb(0 0 0 / 10%); opacity: 1; }
.message-body { display: block; }
.message-body:empty { display: none; }
.message-photo { display: grid; width: min(360px, 100%); margin: 2px 0 8px; padding: 0; overflow: hidden; border: 0; border-radius: 10px; background: rgb(0 0 0 / 8%); color: inherit; text-align: left; }
.message-photo img { display: block; width: 100%; max-height: 360px; object-fit: cover; }
.message-photo-loading { display: grid; place-items: center; min-height: 112px; padding: 16px; font-size: .76rem; font-weight: 800; opacity: .76; }
.message-photo-unavailable { min-width: 180px; margin: 2px 0 8px; padding: 18px; border: 1px dashed currentColor; border-radius: 10px; font-size: .8rem; font-style: italic; text-align: center; opacity: .72; }
.deleted-message { font-style: italic; opacity: .72; }
.quoted-message { display: grid; gap: 2px; margin: 0 0 7px; padding: 7px 9px; border-left: 3px solid currentColor; border-radius: 5px; background: rgb(255 255 255 / 18%); font-size: .76rem; opacity: .9; }
.quoted-message strong, .quoted-message span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-block.outgoing .message-bubble { border-color: var(--ds-color-action); background: var(--ds-color-action); color: var(--white); }
.message-block.system .message-bubble { max-width: 100%; border-left: 4px solid var(--ds-color-border); border-radius: 0; color: var(--ds-color-text-muted); }
.message-author, .message-time { display: block; font-size: .68rem; }
.message-author { margin-bottom: 3px; font-weight: 900; }
.message-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; white-space: normal; }
.message-time { min-width: max-content; opacity: .78; }
.message-reaction-summary { display: flex; gap: 4px; margin-left: auto; }
.message-reaction-chip { display: inline-flex; align-items: center; gap: 3px; min-height: 24px; padding: 1px 7px; border: 1px solid currentColor; border-radius: 999px; background: rgb(255 255 255 / 52%); color: var(--ds-color-heading); font-size: .88rem; line-height: 1; }
.message-reaction-chip strong { font-size: .66rem; }
.message-reaction-chip.mine { border-width: 2px; }
.message-block.outgoing .message-reaction-chip { background: rgb(255 255 255 / 16%); color: var(--white); }
.message-edited { margin-left: 4px; font-style: italic; }
.message-delivery.failed { color: var(--ds-color-urgent); font-weight: 900; }
.retry-message { margin: 6px 0 0; padding: 3px 8px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font-size: .72rem; font-weight: 900; }
.message-composer { padding: 12px; border-top: 1px solid var(--ds-color-border); background: var(--white); }
.reply-preview { display: flex !important; align-items: center; justify-content: space-between !important; margin: 0 0 8px !important; padding: 7px 9px; border-left: 4px solid var(--ds-color-action); background: var(--ds-color-surface-supporting); }
.reply-preview[hidden] { display: none !important; }
.reply-preview span { display: grid; min-width: 0; }
.reply-preview strong, .reply-preview small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-preview small { max-height: 72px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-preview button { flex-shrink: 0; }
.reply-preview button { width: 40px; height: 40px; border: 0; background: transparent; font-size: 1.4rem; }
.message-composer label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.message-composer textarea { width: 100%; min-height: 64px; padding: 10px; border: 1px solid var(--ds-color-border); resize: vertical; }
.message-composer > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.message-composer .message-composer-actions { display: grid; grid-template-columns: auto 1fr auto; }
.message-composer .photo-picker { min-width: 74px; }
.message-composer .photo-preview { display: grid; grid-template-columns: 58px 1fr 42px; gap: 10px; margin: 0 0 8px; padding: 8px; border: 1px solid var(--ds-color-border); border-radius: 10px; background: var(--ds-color-surface-supporting); }
.message-composer .photo-preview[hidden] { display: none; }
.photo-preview img { width: 58px; height: 58px; border-radius: 7px; object-fit: cover; }
.photo-preview span { display: grid; align-content: center; gap: 3px; min-width: 0; color: var(--ds-color-text); }
.photo-preview strong, .photo-preview small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-preview button { width: 42px; height: 42px; border: 0; background: transparent; color: var(--ds-color-heading); font-size: 1.35rem; }
.photo-status { min-height: 18px; margin: 0 0 6px; color: var(--ds-color-text-muted); font-size: .72rem; }
.photo-status.error { color: var(--ds-color-urgent); font-weight: 850; }
.message-composer button { touch-action: manipulation; }
.message-composer span { color: var(--ds-color-text-muted); font-size: .72rem; }
.reply-closed { padding: 16px; border-top: 1px solid var(--ds-color-divider); color: var(--ds-color-text-muted); text-align: center; }
.compose-dialog { width: min(620px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 2px solid var(--ds-color-heading); background: var(--white); color: var(--ds-color-text); }
.compose-dialog::backdrop { background: rgb(7 21 37 / 55%); }
.compose-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 15px; border-bottom: 1px solid var(--ds-color-border); }
.compose-dialog header h2, .compose-dialog header p { margin: 0; }
.compose-dialog header button { width: 48px; height: 48px; border: 1px solid var(--ds-color-heading); background: var(--white); color: var(--ds-color-heading); font-size: 1.8rem; }
.compose-dialog label { display: grid; gap: 5px; padding: 12px 15px 0; color: var(--ds-color-heading); font-weight: 800; }
.compose-dialog input, .compose-dialog select, .compose-dialog textarea { width: 100%; min-height: 48px; padding: 9px; border: 1px solid var(--ds-color-border); background: var(--white); color: var(--ds-color-text); font: inherit; }
.compose-dialog textarea { min-height: 120px; resize: vertical; }
.compose-dialog .important-row { grid-template-columns: auto 1fr; align-items: center; }
.compose-dialog .important-row input { width: 22px; min-height: 22px; }
.compose-photo-controls { display: grid; gap: 8px; padding: 12px 15px 0; }
.compose-photo-controls > .quiet-button { min-height: 48px; border: 1px solid var(--ds-color-action); background: var(--white); color: var(--ds-color-action); font-weight: 850; }
.compose-photo-controls .photo-preview { display: grid; grid-template-columns: 58px 1fr 42px; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--ds-color-border); border-radius: 10px; background: var(--ds-color-surface-supporting); }
.compose-photo-controls .photo-preview[hidden], .compose-photo-controls[hidden] { display: none; }
.compose-photo-controls .photo-status { margin: 0; }
.message-actions { width: min(360px, calc(100% - 28px)); padding: 8px; border: 0; border-radius: 14px; }
.message-actions::backdrop { background: rgb(0 0 0 / 45%); }
.message-actions form { display: grid; gap: 4px; }
.message-actions p { max-height: 92px; margin: 6px 8px 10px; overflow: hidden; color: var(--ds-color-text-muted); }
.message-actions button { min-height: 48px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--ds-color-surface-supporting); color: var(--ds-color-heading); font-weight: 850; text-align: left; }
.message-reaction-menu { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-bottom: 4px; padding: 6px 8px; border-block: 1px solid var(--ds-color-divider); }
.message-reaction-menu[hidden] { display: none; }
.message-reaction-menu > span { color: var(--ds-color-text-muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.message-reaction-menu > div { display: flex; gap: 6px; }
.message-actions .message-reaction-choice { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 52px; min-height: 48px; padding: 0; border: 1px solid var(--ds-color-border); border-radius: 999px; background: var(--white); font-size: 1.1rem; text-align: center; touch-action: manipulation; }
.message-actions .message-reaction-choice strong { font-size: .68rem; }
.message-actions .message-reaction-choice strong:empty { display: none; }
.message-actions .message-reaction-choice.active { border-color: var(--ds-color-action); background: var(--ds-color-action); color: var(--white); }
.message-actions .message-reaction-choice:disabled { opacity: .45; }
.message-actions .danger-action { color: var(--ds-color-urgent); }
.edit-history-dialog h2 { margin: 8px; }
.edit-history-entry { padding: 10px 8px; border-top: 1px solid var(--ds-color-divider); }
.edit-history-entry time { display: block; margin-top: 4px; color: var(--ds-color-text-muted); font-size: .72rem; }
.full-photo-dialog { width: min(920px, calc(100% - 20px)); max-width: none; max-height: calc(100dvh - 20px); padding: 48px 10px 12px; border: 0; border-radius: 12px; background: #071525; color: var(--white); }
.full-photo-dialog::backdrop { background: rgb(0 0 0 / 82%); }
.full-photo-dialog img { display: block; max-width: 100%; max-height: calc(100dvh - 130px); margin: 0 auto; object-fit: contain; }
.full-photo-dialog p { margin: 10px 4px 0; color: var(--white); white-space: pre-wrap; }
.full-photo-close { position: absolute; top: 6px; right: 6px; width: 42px; height: 42px; border: 1px solid rgb(255 255 255 / 55%); border-radius: 50%; background: rgb(0 0 0 / 42%); color: var(--white); font-size: 1.45rem; }
.audience-review { margin: 12px 15px 0; padding: 10px; border-left: 4px solid var(--ds-color-action); color: var(--ds-color-text-muted); }
.compose-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 15px; }
.compose-actions button { min-height: 52px; }
.messages-login-required { width: min(520px, calc(100% - 32px)); margin: 12vh auto; padding: var(--ds-space-5); border: 1px solid var(--ds-color-border); text-align: center; }
.messages-login-required .brand-lockup { margin-inline: auto; }
.messages-login-required a { display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; text-decoration: none; }
.toast { position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 60; max-width: min(360px, calc(100% - 32px)); padding: 12px 16px; background: var(--ds-color-heading); color: var(--white); font-weight: 850; opacity: 0; pointer-events: none; transform: translateY(12px); transition: .18s ease; }
.toast.show { opacity: 1; transform: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: var(--ds-focus-ring); outline-offset: 2px; }

@media (max-width: 720px) {
  .messages-shell { padding: 8px; }
  .test-banner { align-items: center; flex-direction: column; gap: 2px; }
  .messages-header { grid-template-columns: 1fr auto; padding: 16px 4px; }
  .messages-header > div { text-align: left; }
  .messages-header #open-compose { grid-column: 2; grid-row: 1; }
  .messages-layout { display: block; min-height: calc(100dvh - 190px); border-inline: 0; }
  .inbox-pane { border-right: 0; }
  .thread-pane { display: none; position: relative; height: 100%; min-height: 0; overflow: hidden; background: var(--white); }
  /* Keep the active conversation in document flow. iOS focus can detach a
     fixed thread overlay while its hidden inbox leaves a blank card behind. */
  html:has(.messages-layout.thread-open), body:has(.messages-layout.thread-open) {
    height: var(--messages-visual-height, 100dvh); min-height: 0; overflow: hidden;
  }
  .messages-shell.has-app-navigation:has(.messages-layout.thread-open) {
    height: 100%; min-height: 0; padding: 0; box-sizing: border-box;
  }
  .messages-shell:has(.messages-layout.thread-open) > :is(.messages-header, .test-banner, .app-navigation-header) { display: none; }
  .messages-layout.thread-open {
    height: calc(var(--messages-visual-height, 100dvh) - var(--messages-nav-height, 82px) - 3dvh);
    min-height: 0; border: 0;
  }
  .messages-layout.thread-open .thread-pane { display: block; }
  .messages-layout.thread-open .inbox-pane { display: none; }
  #thread-view {
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
  }
  .thread-header { grid-template-columns: auto 1fr auto; padding-top: max(12px, env(safe-area-inset-top)); }
  .thread-header .thread-menu { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; border: 0; }
  .thread-back { display: block; }
  .message-list { min-height: 0; }
  .message-composer { padding-bottom: 12px; }
  .message-composer textarea { min-height: 54px; max-height: 112px; resize: none; }
  .message-photo { width: min(76vw, 340px); }
  .message-photo img { max-height: 42dvh; }
  .full-photo-dialog { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .full-photo-dialog img { max-height: calc(100dvh - 130px); }
  .message-bubble { max-width: 86%; }
  .compose-dialog { width: 100%; max-height: 100dvh; margin: 0; border: 0; }
  html.messages-keyboard-open #thread-view {
    height: 100%;
  }
  html.messages-keyboard-open .messages-layout.thread-open { height: var(--messages-visual-height, 100dvh); }
  html.messages-keyboard-open .thread-pane { height: 100%; }
  html.messages-keyboard-open .app-bottom-navigation { display: none; }
}

.conversation-swipe { position: relative; overflow: hidden; }
.conversation-swipe .conversation-row { position: relative; z-index: 1; background: var(--surface, #fff); touch-action: pan-y; transition: transform 160ms ease; }
.conversation-swipe.delete-revealed .conversation-row { transform: translateX(-80px); }
.conversation-delete { position: absolute; inset: 0 0 0 auto; width: 80px; min-height: 44px; margin: 0; border: 0; border-radius: 0; background: #b42318; color: white; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .conversation-swipe .conversation-row { transition: none; } }

/* A single group pool and two account-backed pin actions. */
.messages-header { flex-wrap: wrap; gap: 8px; }
.messages-header > div { flex: 1 1 auto; }
.thread-options { max-width: calc(100vw - 24px); }
.thread-options button { display: block; width: 100%; text-align: left; color: var(--ds-color-heading); padding: 8px 14px; }
.thread-options button[hidden] { display: none; }
#group-pool { padding: 12px; }
#group-pool button { display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 12px; border: 0; border-bottom: 1px solid var(--ds-color-border); text-align: left; background: var(--white); color: var(--ds-color-heading); font: inherit; }
#group-pool strong { overflow-wrap: anywhere; }
#group-pool span { white-space: nowrap; }
#new-group { margin: 0 15px 15px; }
.group-members { max-height: 32dvh; overflow-y: auto; padding: 6px 15px; }
.group-members label { display: flex; align-items: center; gap: 12px; padding: 8px 0; min-height: 46px; }
.group-members label[hidden] { display: none; }
.group-members input { flex: 0 0 22px; width: 22px; min-height: 22px; height: 22px; }
#group-error { color: var(--ds-color-danger, #ba3030); }

#group-error:empty { display: none; }
#group-form .compose-actions { display: flex; justify-content: flex-end; }
#save-group { min-width: 140px; white-space: nowrap; }
.inbox-item { position: relative; }
.inbox-item .conversation-row { padding-right: 54px; }
.inbox-actions { position: absolute; right: 8px; top: 39px; z-index: 2; }
.inbox-actions[open] { z-index: 10; }
.inbox-actions summary { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; list-style: none; border-radius: 50%; color: var(--ds-color-text); font-size: 24px; line-height: 1; }
.inbox-actions summary::-webkit-details-marker { display: none; }
.inbox-actions summary:is(:hover, :focus-visible) { background: var(--theme-surface-strong, var(--ds-color-surface-supporting, #edf1ed)); color: var(--theme-text, var(--ds-color-text, #102018)); }
.inbox-actions summary:focus-visible { outline: 2px solid var(--theme-text, var(--ds-color-text, #102018)); outline-offset: 2px; }
.inbox-action-menu { --inbox-danger: var(--ds-color-danger, #a52a39); position: absolute; right: 0; top: 100%; width: 220px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid var(--theme-border, var(--ds-color-border, #c8d0ca)); border-radius: 12px; background: var(--theme-surface, var(--ds-color-surface, #fff)); color: var(--theme-text, var(--ds-color-text, #102018)); box-shadow: 0 8px 28px #0003; }
.inbox-action-menu button { display: block; width: 100%; padding: 10px 12px; min-height: 44px; border: 0; border-radius: 7px; text-align: left; background: transparent; color: inherit; font: inherit; font-size: .85rem; }
.inbox-action-menu button:is(:hover, :focus-visible):not(:disabled) { background: var(--theme-surface-strong, var(--ds-color-surface-supporting, #edf1ed)); }
.inbox-action-menu button:focus-visible { outline: 2px solid var(--theme-text, var(--ds-color-text, #102018)); outline-offset: -2px; }
.inbox-action-menu button:disabled { opacity: .5; }
.inbox-action-menu [data-delete-conversation] { color: var(--inbox-danger); }
html[data-theme="dark"] .inbox-action-menu { --inbox-danger: #ff8d96; }

/* Comfortable, expanding message fields with a compact single-row reply bar. */
#message-form { display: block; width: 100%; min-width: 0; padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
#message-form .composer-line { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: end; gap: 8px; margin: 0; }
#message-form .composer-input { display: flex; align-items: flex-end; min-width: 0; overflow: hidden; border: 1px solid transparent; border-radius: 25px; background: var(--ds-color-surface-supporting); transition: border-color .15s ease; }
#message-form .composer-input:focus-within { border-color: var(--ds-color-action); }
#message-form #message-input { flex: 1 1 auto; display: block; width: 100%; min-width: 0; min-height: 46px; max-height: 160px; margin: 0; padding: 11px 15px; border: 0; border-radius: 0; outline: none; background: transparent; color: var(--ds-color-text); font-family: inherit; font-size: 16px; font-weight: 400; line-height: 24px; resize: none; box-sizing: border-box; overflow-y: hidden; }
#message-form #choose-photo { flex: 0 0 40px; width: 40px; min-width: 40px; height: 44px; min-height: 44px; padding: 0 2px 3px 0; margin: 0 3px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--ds-color-text-muted); font-size: 30px; font-weight: 400; line-height: 1; }
#message-form #choose-photo[hidden] { display: none; }
#message-form #send-message { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0 0 1px; padding: 0; border: 0; border-radius: 50%; font-size: 0; line-height: 1; background: var(--ds-color-action); color: #fff; }
#message-form #send-message::after { content: '↑'; font-size: 29px; font-weight: 600; }
#message-form #send-message[data-editing="true"]::after { content: '✓'; font-size: 23px; }
#message-form #send-message:disabled { opacity: .5; }
#message-form .composer-count { display: block; padding: 5px 54px 0 0; text-align: right; }
#message-form .composer-count[hidden], #message-form #photo-status:empty { display: none; }
#compose-form .new-message-field { display: block; padding: 14px 15px 0; font-size: 14px; }
html[data-theme] #compose-form #compose-message, #compose-form #compose-message { display: block; width: 100%; min-width: 0; min-height: 100px; max-height: 240px; margin-top: 7px; padding: 14px 16px; border: 1px solid transparent; border-radius: 23px; background: var(--ds-color-surface-supporting); color: var(--ds-color-text); font-family: inherit; font-size: 16px; font-weight: 400; line-height: 24px; box-sizing: border-box; resize: none; }
html[data-theme] #compose-form #compose-message:focus, #compose-form #compose-message:focus { outline: none; border-color: var(--ds-color-action); }
#compose-form .compose-actions button { border-radius: 999px; }

#compose-form .compose-photo-controls > .quiet-button { justify-self: start; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ds-color-surface-supporting); }
#compose-photo-status:empty { display: none; }

.contacts-tabs{display:flex;gap:8px;padding:0 0 14px}.contacts-tabs a{padding:10px 20px;min-height:44px;border-radius:10px;text-decoration:none;color:var(--ds-color-text);font-weight:650}.contacts-tabs a[aria-current]{background:var(--ds-color-surface-supporting);box-shadow:inset 0 -3px var(--ds-color-text)}

/* One compact action row; the inbox is a single unfiltered list. */
.messages-header { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 0; }
.messages-header #open-groups, .messages-header #open-compose { grid-row: 1; width: 100%; min-height: 48px; margin: 0; justify-self: stretch; }
.messages-header #open-groups { grid-column: 1; }
.messages-header #open-compose { grid-column: 2; }
/* Reserve thumbnail space before private image requests finish. */
.message-photo { position: relative; aspect-ratio: var(--message-photo-ratio, 1); max-height: 360px; }
.message-photo .message-photo-loading { position: absolute; inset: 0; min-height: 0; }
.message-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; }
.message-photo img[hidden] { display: none; }
@media (max-width: 720px) { .message-photo { max-height: 42dvh; } .message-photo img { max-height: none; } }

@media (min-width: 721px) {
  #thread-view { height: max(440px, calc(100dvh - 260px)); min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
  .message-list { min-height: 0; }
}

/* One compact toolbar; conversations carry the visual emphasis. */
.messages-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 64px; padding: 8px 4px; border: 0; }
.messages-header h1 { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 21px; font-weight: 700; letter-spacing: -.5px; color: var(--ds-color-heading); }
.messages-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.messages-tools a, .messages-header #open-saved-messages, .messages-header #open-groups, .messages-header #open-compose { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; margin: 0; padding: 0 9px; border: 0; border-radius: 10px; background: transparent; color: var(--ds-color-action); font-size: 14px; font-weight: 600; text-decoration: none; }
.messages-header #open-compose { width: 44px; padding: 0; margin-left: 4px; background: var(--ds-color-action); color: #fff; }
.messages-tools a:hover, .messages-header #open-saved-messages:hover, .messages-header #open-groups:hover { background: var(--ds-color-surface-supporting); }
.messages-tools a:focus-visible, .messages-tools button:focus-visible { outline: 2px solid var(--ds-color-action); outline-offset: 2px; }
.messages-header .page-unread { min-width: 19px; height: 19px; padding: 0 5px; font-size: 11px; letter-spacing: 0; }
.inbox-item .conversation-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; align-items: start; min-height: 80px; padding: 14px 12px; }
.conversation-avatar { width: 40px; height: 40px; font-size: 13px; font-weight: 650; }
.conversation-name { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 650; line-height: 22px; }
.conversation-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-pin { flex: 0 0 13px; width: 13px; height: 13px; color: var(--ds-color-text-muted); }
.conversation-preview { margin-top: 3px; font-size: 14px; line-height: 20px; font-weight: 400; }
.conversation-row.unread .conversation-name { font-weight: 750; }
.conversation-row.unread .conversation-preview { font-weight: 600; }
.conversation-meta { gap: 6px; font-size: 11px; line-height: 20px; }
.conversation-meta .unread-count { margin-right: 36px; min-width: 20px; height: 20px; font-size: 11px; }
.inbox-actions { top: 34px; right: 6px; }
.inbox-actions summary { font-size: 21px; color: var(--theme-muted, var(--ds-color-text-muted, #5d6b63)); }
.conversation-row:focus-visible { outline: 2px solid var(--ds-color-action); outline-offset: -2px; }
@media (max-width: 720px) {
  .messages-layout { min-height: calc(100dvh - 170px); }
  .messages-header { padding-inline: 4px; }
}
@media (max-width: 350px) {
  .messages-header h1 { font-size: 19px; }
  .messages-tools { gap: 0; }
  .messages-tools a, .messages-header #open-saved-messages, .messages-header #open-groups { padding-inline: 6px; font-size: 13px; }
}

.messages-tools a, .messages-header #open-saved-messages, .messages-header #open-groups { color: var(--ds-color-heading); }

.inbox-search { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0 12px; border-radius: 12px; background: var(--ds-color-surface-supporting); color: var(--ds-color-text-muted); }
.inbox-search input { width: 100%; min-width: 0; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--ds-color-text); font-size: 16px; }
.inbox-search input::-webkit-search-cancel-button { display: none; }
.inbox-search button { flex: 0 0 44px; height: 44px; border: 0; background: transparent; color: var(--ds-color-heading); font-size: 24px; }
.inbox-search:focus-within { outline: 2px solid var(--ds-color-action); outline-offset: 1px; }
.inbox-search input:focus-visible { outline: none; }
.inbox-item[hidden] { display: none; }
.inbox-item .conversation-row { border-bottom: 0; touch-action: pan-y; }
.inbox-item::after { content: ""; position: absolute; bottom: 0; left: 63px; right: 12px; height: 1px; background: var(--ds-color-divider); pointer-events: none; }
.draft-label { color: var(--ds-color-heading); font-weight: 650; }
.conversation-row.unread .conversation-avatar::before { content: ""; position: absolute; top: -2px; left: -3px; width: 8px; height: 8px; border: 2px solid var(--white); border-radius: 50%; background: var(--ds-color-action); }
@media (min-width: 721px) { .inbox-search { margin: 10px; } }

#messages-read-only{font:500 .75rem/1.4 var(--ds-font-family);color:var(--theme-muted);margin-left:6px;white-space:nowrap}
.messages-read-only :is(#open-compose,#thread-menu,.inbox-actions,.message-action:not(.translation-only),.retry-message,#new-group){display:none!important}

.message-history{min-width:44px;min-height:44px;margin-top:4px;padding:6px 10px;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:.8rem;cursor:pointer}
.message-history:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* Compact message actions; scoped so other dialogs keep their layout. */
#message-actions{box-sizing:border-box;position:fixed;inset:0;margin:auto;width:min(328px,calc(100vw - 32px));max-height:calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:8px;border:1px solid var(--theme-border,var(--ds-color-border));border-radius:22px;background:var(--theme-surface,var(--ds-color-surface-supporting));color:var(--theme-text,var(--ds-color-heading));box-shadow:0 20px 70px #0003;overflow:auto;overscroll-behavior:contain}
#message-actions::backdrop{background:rgb(10 22 18 / 32%);backdrop-filter:blur(3px)}
#message-actions form{display:flex;flex-direction:column;gap:0}
#message-actions [hidden]{display:none!important}
#message-actions .message-action-context{padding:12px 14px 14px;border-bottom:1px solid var(--theme-border,var(--ds-color-divider));margin-bottom:4px;order:1}
#message-action-sender{display:block;font-size:12px;font-weight:600;color:var(--theme-muted,var(--ds-color-text-muted));margin-bottom:5px}
#message-actions #message-action-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:none;margin:0;font-size:15px;line-height:1.4;font-weight:400;color:var(--theme-text,var(--ds-color-heading))}
#message-actions .message-reaction-menu{order:0;display:flex;justify-content:space-between;margin:0;padding:6px 12px 10px;border:0;border-bottom:1px solid var(--theme-border,var(--ds-color-divider))}
#message-actions .message-reaction-menu>span{font-size:12px;font-weight:500;text-transform:none;letter-spacing:0}
#message-actions .message-reaction-menu>div{gap:8px}
#message-actions .message-reaction-choice{width:48px;height:44px;min-height:44px;border:0;background:transparent;font-size:26px;box-shadow:none}
#message-actions .message-reaction-choice.active{background:var(--ds-color-action);color:#fff}
#message-actions form>button{order:3;display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:11px 14px;border:0;border-radius:10px;background:transparent;font:500 16px/1.35 system-ui;text-align:left;color:var(--theme-text,var(--ds-color-heading));touch-action:manipulation}
#message-actions form>button:hover{background:var(--theme-border,var(--ds-color-border))}
#message-actions button:focus-visible{outline:2px solid var(--ds-color-action);outline-offset:-2px}
#message-actions #reply-message{order:2}
#message-actions form>.danger-action{order:4;color:var(--ds-color-urgent)}
#message-actions #delete-message{border-top:1px solid var(--theme-border,var(--ds-color-divider));border-radius:0 0 10px 10px;margin-top:4px}
#message-actions form>.message-action-cancel{order:5;justify-content:center;color:var(--theme-muted,var(--ds-color-text-muted));border-top:1px solid var(--theme-border,var(--ds-color-divider));margin-top:4px;font-size:14px}
#message-actions form>button:not(.message-action-cancel)::before{content:"";display:block;width:22px;height:22px;flex:0 0 22px;background:currentColor;mask:var(--action-icon) center/contain no-repeat;-webkit-mask:var(--action-icon) center/contain no-repeat}
#reply-message{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2010V4l-7%207%207%207v-6c7%200%2010%203%2013%207-1-8-5-10-13-9%22%2F%3E%3C%2Fsvg%3E")}
#copy-message{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%209h12v12H9z%20M15%205V2H2v13h3%22%2F%3E%3C%2Fsvg%3E")}
#translate-message{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%204h12%20M8%202v2%20M4%207c1%204%204%207%209%209%20M12%204c-1%206-5%2010-10%2012%20M14%2022l4-11%204%2011%20M16%2018h4%22%2F%3E%3C%2Fsvg%3E")}
#edit-message{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2016l12-12%204%204L8%2020l-5%201z%20M14%206l4%204%22%2F%3E%3C%2Fsvg%3E")}
#edit-history{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010a9%209%200%201%201%201%208%20M3%203v7h7%20M12%207v6l4%202%22%2F%3E%3C%2Fsvg%3E")}
#remove-message-photo{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h18v18H3z%20M3%2017l6-6%205%205%203-3%204%204%20M7%207h.01%22%2F%3E%3C%2Fsvg%3E")}
#delete-message{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18%20M9%206V3h6v3%20M5%206l1%2015h12l1-15%20M10%2010v7%20M14%2010v7%22%2F%3E%3C%2Fsvg%3E")}
html[data-theme="dark"] #message-actions form>.danger-action{color:#ff8895}
#message-actions .message-reaction-menu{padding:6px 0 10px;justify-content:center}
#message-actions .message-reaction-menu>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#message-actions .message-reaction-menu>div{display:flex;gap:0;justify-content:space-between;width:100%}
#message-actions .message-reaction-choice{width:calc(100% / 7);min-width:0;font-size:23px;position:relative}
#message-actions .message-reaction-choice strong{position:absolute;bottom:0;right:2px;font-size:10px}
#message-actions #forward-message{order:2}
#message-more{order:4;border-top:1px solid var(--theme-border);margin-top:4px}
#message-more summary{padding:14px;font-size:16px;font-weight:500;cursor:pointer;min-height:48px}
#message-more button{display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:11px 14px;background:transparent;font:500 16px/1.35 system-ui;color:var(--theme-text);text-align:left}
#message-more button[hidden]{display:none!important}
#message-actions #message-more .danger-action{color:var(--ds-color-urgent)}
html[data-theme="dark"] #message-actions #message-more .danger-action{color:#ff8895}
#message-more button::before{content:"";width:22px;height:22px;flex:0 0 22px;background:currentColor;mask:var(--action-icon) center/contain no-repeat;-webkit-mask:var(--action-icon) center/contain no-repeat}
#star-message::before{content:"☆"!important;background:none!important;mask:none!important;-webkit-mask:none!important;font-size:25px;line-height:22px}
#message-info::before{content:"ⓘ"!important;background:none!important;mask:none!important;-webkit-mask:none!important;font-size:22px;line-height:22px}
.message-forwarded{display:block;font-size:12px;font-style:italic;opacity:.85;margin-bottom:5px}
.message-saved-marker{font-size:13px;float:right;margin:0 10px}
.message-tools-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid var(--theme-border);border-radius:20px;background:var(--theme-surface);color:var(--theme-text);padding:18px}
.message-tools-dialog::backdrop{background:#10201966;backdrop-filter:blur(3px)}
.message-tools-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.message-tools-dialog h2{font-size:20px;margin:0}.message-tools-dialog header button{width:44px;height:44px;border:0;background:transparent;color:inherit;font-size:28px}
.message-tools-dialog input{box-sizing:border-box;width:100%;min-height:44px;background:var(--theme-surface);color:var(--theme-text);border:1px solid var(--theme-border);border-radius:10px;padding:10px}
.message-tools-dialog p{font-size:15px;line-height:1.45;overflow-wrap:anywhere}.message-tool-note{color:var(--theme-muted);font-size:13px!important}
.forward-destinations{max-height:38dvh;overflow:auto;margin-top:12px}.forward-destinations button{display:block;text-align:left;width:100%;padding:12px;min-height:52px;border:0;border-bottom:1px solid var(--theme-border);background:transparent;color:var(--theme-text);font-size:16px}
.forward-destinations small,.forward-message-preview small{display:block;color:var(--theme-muted);font-size:12px;margin-top:4px}.forward-review button,.saved-message-row button{min-height:44px;margin:4px;padding:8px 12px;border-radius:8px;border:1px solid var(--theme-border);background:var(--theme-surface);color:var(--theme-text)}
.saved-message-row{border-bottom:1px solid var(--theme-border);padding:12px 0}.forward-message-preview{padding:12px;border-left:3px solid var(--ds-color-action);background:var(--theme-surface-strong);max-height:120px;overflow:auto}
#message-tools-status{color:var(--ds-color-urgent)}

#forward-message{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2010V4l7%207-7%207v-6C8%2012%205%2015%202%2019c1-8%205-10%2013-9%22%2F%3E%3C%2Fsvg%3E")}

/* A recruitment reminder opens its event in the same authorized campus. */
.message-body .message-event-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}


#people-picker { border: 1px solid var(--ds-color-border); border-radius: 12px; padding: 12px; min-width: 0; }
#people-picker[hidden] { display: none; }
#people-picker legend { font-weight: 850; padding: 0 6px; }
#people-delivery-help, .people-compose-hint, #people-count { font-size: .85rem; line-height: 1.4; margin: 8px 0; }
.people-list { max-height: 210px; overflow-y: auto; overscroll-behavior: contain; }
.people-list label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border-bottom: 1px solid var(--ds-color-border); }
.people-list input { width: 20px; height: 20px; flex-shrink: 0; }
.people-selected { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.people-selected button { min-height: 36px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--ds-color-border); border-radius: 18px; background: var(--ds-color-surface-supporting); color: var(--ds-color-heading); overflow-wrap: anywhere; }

.message-block { flex-direction: column; margin: 10px 0; }
.message-block.outgoing { align-items: flex-end; }
.message-bubble { padding: 13px 42px 12px 15px; border-radius: 18px 18px 18px 5px; line-height: 1.45; }
.message-block.outgoing .message-bubble { border-radius: 18px 18px 5px 18px; }
.message-block.outgoing .message-author { display: none; }
.message-time { font-size: .67rem; font-weight: 400; }
.message-status { display: flex; align-items: center; gap: 5px; margin: 5px 3px 0; color: var(--theme-muted, var(--ds-color-text-muted)); font-size: .72rem; line-height: 1.4; }
.message-status svg { width: 17px; height: 17px; flex: 0 0 17px; }
.message-status.status-read svg { color: #3e7a3a; }
.message-status.status-failed, .message-status.status-expired { color: var(--ds-color-urgent); }
.message-status .retry-message { min-height: 44px; margin: -7px 0; padding: 0 7px; border: 0; border-radius: 6px; font-size: inherit; text-decoration: underline; font-weight: 700; }
.status-sending svg { animation: message-status-spin 1.5s linear infinite; }
@keyframes message-status-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .status-sending svg { animation: none; } }

/* Preserve usable touch targets and wrapping on narrow, enlarged-text layouts. */
.message-action { width: 44px; height: 44px; }
.message-bubble { padding-right: 49px; }
.message-meta { flex-wrap: wrap; }
.message-reaction-summary { flex-wrap: wrap; }
.message-reaction-chip { min-width: 44px; min-height: 44px; justify-content: center; box-sizing: border-box; }
.load-earlier { min-height: 44px; }
.full-photo-close { width: 44px; height: 44px; }
#message-form #choose-photo { flex-basis: 44px; width: 44px; min-width: 44px; }
.message-photo-unavailable { min-width: 0; overflow-wrap: anywhere; }
#message-form #message-input, html[data-theme] #compose-form #compose-message, #compose-form #compose-message { font-size: max(16px, 1rem); }