/* Mailbox is an independent visual-viewport screen. Safe-area top belongs to
   the header, bottom belongs to the composer, and neither reserves app nav. */
#mailbox-root[hidden],.mailbox-devices[hidden]{display:none!important}
#mailbox-root{
  --mailbox-safe-top:env(safe-area-inset-top,0px);
  --mailbox-safe-bottom:env(safe-area-inset-bottom,0px);
  --mailbox-compose-min:calc(120px + max(8px,var(--mailbox-safe-bottom)));
  --mailbox-people-min:0px;
  position:fixed;z-index:75;top:var(--app-top,0px);left:0;right:0;
  height:var(--app-height,100dvh);padding:0 env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);
  background:#000;color:#fff;overflow:hidden;touch-action:pan-y;
}
.mailbox-shell{height:100%;min-height:0;display:flex;flex-direction:column}
.mailbox-header{
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  min-height:68px;padding:calc(12px + var(--mailbox-safe-top)) 24px 12px;
  border-bottom:1px solid #242424;
}
.mailbox-header h2{flex:1;min-width:0;font-size:22px;line-height:1.35;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mailbox-header>button{flex-shrink:0;min-height:40px;padding:9px 12px;border-radius:9px;font-size:12px;line-height:1.3}
.mailbox-header>button:first-child{background:#fff;border-color:#fff;color:#000}
.mailbox-header .mailbox-picker-button{
  display:flex;align-items:center;justify-content:flex-start;gap:6px;
  min-width:0;max-width:100%;min-height:36px;margin:0;padding:0;
  background:transparent;color:#fff;border:0;border-radius:5px;
  font-size:inherit;line-height:inherit;font-weight:inherit;text-align:left;
}
.mailbox-picker-button>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailbox-picker-button .icon{width:15px;height:15px;flex-shrink:0}
.mailbox-picker-chevron{flex-shrink:0;color:#aaa;font-size:14px;line-height:1}
/* Removed prose and duplicate peer headings never reserve vertical space. */
.mailbox-notice,.mailbox-peer,.mailbox-messages>.mailbox-empty{display:none}
.mailbox-feedback{flex-shrink:0;max-height:64px;overflow-y:auto;padding:6px 24px;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.mailbox-feedback:empty{display:none}
/* Reserve just the dock and optional mobile picker before shrinking a devices
   panel. A flex-zero message list must not let that panel hide Send. */
.mailbox-body{flex:1;min-height:calc(var(--mailbox-compose-min) + var(--mailbox-people-min));display:grid;grid-template-columns:260px minmax(0,1fr)}
.mailbox-people{min-height:0;overflow-y:auto;padding:12px;border-right:1px solid #242424;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mailbox-person{display:block;width:100%;min-height:46px;margin:0 0 7px;padding:12px;text-align:left;font-size:14px;line-height:1.5;color:#fff;background:#111;border:1px solid #2b2b2b;border-radius:10px;overflow-wrap:anywhere}
.mailbox-person.selected{color:#000;background:#fff;border-color:#fff}
.mailbox-empty{font-size:12px;line-height:1.8;color:#aaa}
.mailbox-thread{display:flex;flex-direction:column;min-width:0;min-height:0}
.mailbox-messages{flex:1;min-height:0;overflow-y:auto;padding:20px 24px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mailbox-message{max-width:min(82%,540px);margin:0 0 16px;padding:12px 14px;overflow-wrap:anywhere;background:#171717;border:1px solid #292929;border-radius:3px 13px 13px}
.mailbox-message.mine{margin-left:auto;color:#000;background:#f5f5f5;border-color:#f5f5f5;border-radius:13px 3px 13px 13px}
.mailbox-message-text{white-space:pre-wrap;color:#fff;font-size:15px;line-height:1.65}
.mailbox-message.mine .mailbox-message-text{color:#000}
.mailbox-message-image{display:block;max-width:100%;width:auto;height:auto;max-height:360px;object-fit:contain;border-radius:7px;background:#222;user-select:none}
.mailbox-image-preview[hidden],.mailbox-file-input[hidden]{display:none!important}
.mailbox-image-preview{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:8px;padding:6px 8px;background:#151515;border:1px solid #333;border-radius:9px;font-size:11px;color:#ccc}
.mailbox-image-preview img{flex-shrink:0;width:60px;height:54px;object-fit:contain;border-radius:5px}
.mailbox-image-preview span{flex:1;min-width:0;overflow-wrap:anywhere}
.mailbox-image-preview button{flex-shrink:0;min-height:36px;padding:6px 9px;font-size:11px}
.mailbox-message-time{display:block;margin-top:7px;color:#bbb;font-size:11px;line-height:1.5}
.mailbox-message.mine .mailbox-message-time{color:#444}
.mailbox-read{min-height:42px;padding:10px 12px;color:#000;background:#fff;border:0;border-radius:8px;font-size:13px;line-height:1.4}
.mailbox-composer{flex-shrink:0;padding:10px 24px max(8px,var(--mailbox-safe-bottom));background:#080808;border-top:1px solid #242424}
.mailbox-composer textarea{display:block;width:100%;height:64px;min-height:64px;max-height:110px;resize:none;padding:11px 13px;font-size:16px;line-height:1.5;color:#fff;-webkit-text-fill-color:#fff;caret-color:#fff;background:#111;border:1px solid #333;border-radius:11px}
.mailbox-toolbar{display:flex;align-items:center;gap:7px;min-width:0;margin-top:7px;font-size:11px;line-height:1.4;color:#ccc}
.mailbox-toolbar select{min-height:36px;padding:5px 7px;font-size:16px;line-height:1.4;color:#fff;background:#191919;border:1px solid #333;border-radius:7px}
.mailbox-toolbar button{flex-shrink:0;min-height:38px;margin-left:auto;padding:9px 14px;font-size:12px;line-height:1.3;border-radius:8px}
.mailbox-toolbar .mailbox-attach{margin-left:0;padding-left:10px;padding-right:10px}
.mailbox-devices{flex-shrink:1;min-height:0;max-height:40%;overflow-y:auto;padding:14px 24px;border-bottom:1px solid #242424;font-size:12px;line-height:1.8;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mailbox-device{margin-top:10px;padding:14px;background:#101010;border:1px solid #333;border-radius:10px}
.mailbox-device code{display:block;margin:9px 0;color:#ddd;word-break:break-all;user-select:text}
.mailbox-device button{min-height:36px;padding:8px 11px;font-size:12px}

@media(max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  #mailbox-root{--mailbox-compose-min:calc(107px + max(6px,var(--mailbox-safe-bottom)));--mailbox-people-min:80px}
  .mailbox-header{min-height:60px;gap:8px;padding:calc(12px + var(--mailbox-safe-top)) 12px 8px}
  .mailbox-header h2{font-size:18px;line-height:1.35}
  .mailbox-header>button{min-height:36px;padding:8px 9px;font-size:11px}
  .mailbox-header .mailbox-picker-button{min-height:36px}
  .mailbox-feedback{max-height:48px;padding:5px 12px;font-size:11px}
  .mailbox-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .mailbox-people{display:flex;align-items:center;align-content:flex-start;flex-wrap:wrap;gap:6px;min-height:0;max-height:80px;overflow-x:hidden;overflow-y:auto;padding:8px 12px;border-right:0;border-bottom:1px solid #242424;touch-action:pan-y}
  .mailbox-person{flex:0 1 auto;min-width:0;max-width:100%;width:auto;min-height:32px;margin:0;padding:6px 10px;white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.4;border-radius:8px}
  #mailbox-root.mailbox-has-peer:not(.mailbox-picker-open) .mailbox-people{display:none}
  #mailbox-root.mailbox-has-peer:not(.mailbox-picker-open){--mailbox-people-min:0px}
  #mailbox-root.mailbox-has-peer:not(.mailbox-picker-open) .mailbox-body{grid-template-rows:minmax(0,1fr)}
  .mailbox-messages{padding:14px 12px}
  .mailbox-message{max-width:90%;margin-bottom:14px;padding:11px 13px}
  .mailbox-message-time{font-size:10px}
  .mailbox-composer{padding:8px 12px max(6px,var(--mailbox-safe-bottom))}
  .mailbox-composer textarea{height:56px;min-height:56px;max-height:110px;padding:10px 12px;font-size:16px}
  .mailbox-toolbar{gap:5px;margin-top:6px;font-size:10px}
  .mailbox-toolbar select{min-height:34px;padding:4px 5px;font-size:16px}
  .mailbox-toolbar button{min-height:36px;padding:8px 11px;font-size:12px}
  .mailbox-devices{padding:12px;font-size:12px}
  /* The visual viewport already ends above the software keyboard. Do not add
     the home-indicator inset a second time or push the composer off-screen. */
  .keyboard-open #mailbox-root{--mailbox-safe-top:0px;--mailbox-safe-bottom:0px;--mailbox-compose-min:107px}
  .keyboard-open .mailbox-header{min-height:50px;padding-top:7px;padding-bottom:6px}
  .keyboard-open .mailbox-composer{padding:6px 10px}
  .keyboard-open .mailbox-composer textarea{height:52px;min-height:52px;max-height:90px}
  .keyboard-tight .mailbox-header{min-height:36px;gap:5px;padding:2px 8px 3px}
  .keyboard-tight #mailbox-root{--mailbox-compose-min:80px;--mailbox-people-min:30px}
  .keyboard-tight .mailbox-header h2{font-size:15px}
  .keyboard-tight .mailbox-header>button{min-height:30px;padding:5px 7px;font-size:10px}
  .keyboard-tight .mailbox-header .mailbox-picker-button{min-height:30px}
  .keyboard-tight .mailbox-feedback{max-height:24px;padding:2px 8px;font-size:10px;line-height:1.5}
  .keyboard-tight .mailbox-people{max-height:30px;padding:2px 8px;gap:4px;align-items:flex-start}
  .keyboard-tight .mailbox-person{min-height:24px;padding:3px 7px;font-size:11px;line-height:1.4}
  .keyboard-tight .mailbox-messages{padding:8px}
  .keyboard-tight .mailbox-composer{padding:4px 8px}
  .keyboard-tight .mailbox-composer textarea{height:38px;min-height:38px;max-height:38px;padding:6px 10px 2px}
  .keyboard-tight .mailbox-image-preview{margin-bottom:3px;padding:2px 5px;gap:5px;font-size:10px}
  .keyboard-tight .mailbox-image-preview img{width:32px;height:28px}
  .keyboard-tight .mailbox-image-preview button{min-height:28px;padding:4px 7px}
  .keyboard-tight .mailbox-toolbar{gap:4px;margin-top:3px;font-size:9px}
  .keyboard-tight .mailbox-toolbar select{min-height:28px;padding:2px 4px}
  .keyboard-tight .mailbox-toolbar button{min-height:30px;padding:5px 9px;font-size:11px}
  .keyboard-tight .mailbox-devices{max-height:24px;padding:0 8px}
}
@media(max-width:359px){
  .mailbox-header{gap:6px;padding-left:9px;padding-right:9px}
  .mailbox-header h2{font-size:16px}
  .mailbox-header>button{font-size:10px;padding-left:7px;padding-right:7px}
  .mailbox-toolbar button{font-size:11px;padding:7px 8px}
  .mailbox-toolbar>span{font-size:9px}
  .mailbox-toolbar .mailbox-attach{padding-left:6px;padding-right:6px}
}

/* Calls keep their live one-to-one channel; friend text always uses mailbox. */
.mailbox-call-actions[hidden]{display:none!important}
.mailbox-call-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:6px 24px;border-bottom:1px solid #242424;font-size:11px;color:#bbb}
.mailbox-call-actions>span{flex:1;min-width:0}.mailbox-call-actions>button{min-height:32px;padding:6px 12px;font-size:11px;border-radius:8px}
@media(max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){.mailbox-call-actions{padding:4px 12px}.keyboard-tight .mailbox-call-actions{padding:1px 8px}.keyboard-tight .mailbox-call-actions>button{min-height:24px;padding:2px 8px}}
/* Reserve the preview while the soft keyboard or device drawer reduces height. */
#mailbox-root.mailbox-has-draft{--mailbox-compose-min:calc(190px + max(8px,var(--mailbox-safe-bottom)))}
@media(max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  #mailbox-root.mailbox-has-draft{--mailbox-compose-min:calc(177px + max(6px,var(--mailbox-safe-bottom)))}
  .keyboard-open #mailbox-root.mailbox-has-draft{--mailbox-compose-min:177px}
  .keyboard-tight #mailbox-root.mailbox-has-draft{--mailbox-compose-min:115px}
}