/* A quiet sheet of glass over the shared Hub landscape. */
.hub-dialog.inbox-composer {
  width: min(740px, calc(100vw - 40px));
  max-height: calc(100dvh - 48px);
  padding: 30px 34px 20px;
  border: 1px solid #edf2dc35;
  border-radius: 24px;
  background: linear-gradient(135deg, #354231de, #1a251eea);
  backdrop-filter: blur(36px) saturate(115%);
  -webkit-backdrop-filter: blur(36px) saturate(115%);
  box-shadow: 0 30px 100px #060d0b80, inset 0 1px 0 #ffffff12;
  color: var(--paper);
  overscroll-behavior: contain;
}
.inbox-composer::backdrop { background: #07110f75; backdrop-filter: blur(7px); }
.inbox-composer [hidden] { display: none !important; }
.inbox-composer .hub-dialog-heading { position: absolute; top: 34px; right: 34px; z-index: 4; margin: 0; }
.inbox-composer .hub-dialog-heading > button { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: #f3edcf09; }
.inbox-composer form[data-compose] { display: block; margin: 0; }
.inbox-composer .mail-compose-row { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #d6e2c41d; min-height: 53px; }
.inbox-composer .mail-compose-row > label { flex: 0 0 48px; margin: 0; color: #b1bca6; font-size: 12px; font-weight: 400; }
.inbox-composer .mail-compose-row :is(input, select) { flex: 1; width: 100%; margin: 0; padding: 12px 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: #f0f0e2; font: 14px/1.4 var(--sans); }
.inbox-composer .mail-compose-row input::placeholder, .inbox-composer .mail-compose-message textarea::placeholder { color: #b1bda585; opacity: 1; }
.inbox-composer .mail-compose-row :is(input, select):focus-visible { outline: 1px solid #e4c89d66; outline-offset: 4px; border-radius: 3px; }
.inbox-composer .mail-compose-from { border-bottom: 0; margin-bottom: 3px; padding-right: 56px; }
.inbox-composer .mail-compose-from select { min-width: 0; flex: 0 1 auto; width: max-content; max-width: calc(100% - 70px); border: 1px solid #d0e2b826; border-radius: 30px; background: #e8f0d807; padding: 9px 28px 9px 13px; font-size: 12px; }
.inbox-composer .mail-compose-from select:disabled { opacity: 1; color: #d0d9c5; }
.inbox-composer .mail-compose-source { flex-shrink: 0; font-size: 10px; color: #b9c4ac; }
.inbox-composer .mail-recipient-entry { position: relative; flex: 1; min-width: 0; }
.inbox-composer .mail-recipient-toggles { display: flex; gap: 2px; }
.inbox-composer .mail-recipient-toggles button { border: 0; padding: 8px; min-width: 36px; min-height: 44px; color: #c3cbb6; background: none; font-size: 11px; }
.inbox-composer .mail-recipient-toggles button[aria-expanded="true"] { color: #e4c394; }
.inbox-composer .mail-contacts-hint { color: #b4c0a4; font-size: 10px; line-height: 1.6; margin: 9px 0 7px 62px; }
.inbox-composer .mail-compose-subject { margin-top: 11px; }
.inbox-composer .mail-compose-subject input { font-size: 17px; }
.inbox-composer .mail-compose-message { display: block; margin: 12px 0 0; }
.inbox-composer .mail-compose-message textarea { display: block; width: 100%; min-height: 230px; max-height: 50dvh; resize: vertical; border: 0; border-radius: 10px; background: transparent; padding: 12px 0; font: 15px/1.85 var(--sans); color: #ecefdf; box-shadow: none; }
.inbox-composer .mail-compose-message textarea:focus-visible { outline: 1px solid #e4c89d66; outline-offset: 7px; }
.inbox-composer .mail-compose-footer { border-top: 1px solid #d6e2c422; margin-top: 14px; padding-top: 12px; }
.inbox-composer .mail-compose-footer .hint { margin: 0 0 15px; color: #b3bfa6; font-size: 10px; }
.inbox-composer .hub-actions { justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: 0; }
.inbox-composer .hub-actions button { min-height: 44px; padding: 11px 17px; border-radius: 30px; font-size: 12px; }
.inbox-composer .hub-actions .primary { background: #e1c099; border-color: #e8cba5; color: #263022; }
.inbox-composer [data-dialog-status] { min-height: 0; margin: 14px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.inbox-composer [data-dialog-status]:empty { display: none; }
.inbox-composer .mail-contact-suggestions { position: absolute; top: calc(100% + 2px); left: -8px; right: -8px; z-index: 2; max-height: 250px; overflow: auto; border: 1px solid #d4e2c438; border-radius: 14px; padding: 5px; background: #263427f5; backdrop-filter: blur(28px); box-shadow: 0 16px 34px #0005; overscroll-behavior: contain; }
.inbox-composer .mail-contact-suggestions > button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; min-height: 52px; padding: 8px; border: 0; border-radius: 9px; background: transparent; }
.inbox-composer .mail-contact-suggestions > button:hover, .inbox-composer .mail-contact-suggestions > button[aria-selected="true"] { background: #e5d0a71a; }
.inbox-composer .mail-contact-suggestions strong { font-size: 12px; font-weight: 500; color: #f0efdc; overflow-wrap: anywhere; }
.inbox-composer .mail-contact-suggestions small { display: block; margin-top: 3px; color: #bac5aa; font-size: 11px; overflow-wrap: anywhere; }
.inbox-composer .mail-contact-suggestions strong small { display: inline; }
.inbox-composer .mail-contact-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid #d3dbb932; border-radius: 50%; color: #e4cba4; font: 19px var(--serif); background: #d4c58b0b; }
.mail-compose-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.inbox-composer [data-send-review] h3 { font: 28px/1.15 var(--serif); min-height: 48px; padding-right: 56px; margin: 0 0 16px; }
.inbox-composer [data-send-review] dl { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; font-size: 12px; }
.inbox-composer [data-send-review] dt { color: #b3bea5; }
.inbox-composer [data-send-review] dd { margin: 0; overflow-wrap: anywhere; }
.inbox-composer [data-send-review] .mail-message-body { margin: 22px 0; max-height: 38dvh; background: #e8ebda05; border: 1px solid #cfd9bb1c; border-radius: 13px; padding: 18px; font-size: 14px; line-height: 1.8; }

@media (max-width: 600px) {
  .hub-dialog.inbox-composer { width: calc(100vw - 16px); max-width: calc(100vw - 16px); height: min(760px, calc(100dvh - 16px)); max-height: calc(100dvh - 16px); padding: 22px 19px 18px; border-radius: 22px; }
  .hub-dialog.inbox-composer[open] { display: flex; flex-direction: column; }
  .inbox-composer .hub-dialog-heading { top: 26px; right: 19px; }
  .inbox-composer [data-dialog-status] { flex-shrink: 0; }
  .inbox-composer form[data-compose] { display: flex; flex-direction: column; gap: 0; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d1dabb3b transparent; }
  .inbox-composer .mail-compose-row { gap: 10px; flex-shrink: 0; }
  .inbox-composer .mail-compose-row > label { flex-basis: 42px; font-size: 11px; }
  .inbox-composer .mail-compose-row :is(input, select), .inbox-composer .mail-compose-message textarea { font-size: 16px; }
  .inbox-composer .mail-compose-from, .inbox-composer [data-send-review] h3 { position: sticky; top: 0; z-index: 3; background: #2d3a2c; }
  .inbox-composer .mail-compose-source { display: none; }
  .inbox-composer .mail-compose-from select { font-size: 16px; max-width: calc(100% - 52px); }
  .inbox-composer .mail-contacts-hint { margin-left: 52px; font-size: 10px; flex-shrink: 0; }
  .inbox-composer .mail-compose-message { flex: 1; min-height: 125px; }
  .inbox-composer .mail-compose-message textarea { height: 100%; min-height: 125px; max-height: none; resize: none; }
  .inbox-composer .mail-compose-footer { position: sticky; bottom: 0; z-index: 1; flex-shrink: 0; padding: 10px 0 0; background: #243126f5; }
  .inbox-composer .mail-compose-footer .hint { font-size: 10px; line-height: 1.6; }
  .inbox-composer .hub-actions { gap: 8px; }
  .inbox-composer .hub-actions button { padding: 11px 13px; font-size: 11px; }
  .inbox-composer [data-send-draft] { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .inbox-composer .mail-contact-suggestions { left: -52px; max-height: min(230px, 32dvh); }
  .inbox-composer [data-recipient-row="to"] .mail-contact-suggestions { right: -76px; }
  .inbox-composer [data-send-review] { min-height: 0; overflow-y: auto; }
  .inbox-composer [data-send-review] .hub-actions { position: sticky; bottom: 0; padding-top: 10px; background: #243126f5; }
}