/* Keep the contact tools with the roster so conversations get the available
   height. Messages, drafts, authorization and read acknowledgement stay in Hub. */
#messageInbox{width:min(900px,calc(100vw - 36px));height:min(680px,calc(var(--hub-viewport-height) - 108px - env(safe-area-inset-bottom) - var(--messenger-player-clearance,0px) - var(--messenger-top-clearance,0px)));padding:0;border-radius:var(--world-radius,22px);background:var(--bg2);box-shadow:0 28px 90px #0008,0 0 0 1px var(--line);border:1px solid var(--line);isolation:isolate}
#messageInbox>.section-head{padding:19px 22px 12px;margin:0;gap:16px}
#messageInbox .section-head h2{font:700 1.4rem/1.1 var(--world-heading,'Space Grotesk'),sans-serif;letter-spacing:-.035em;margin-top:6px}
#messageInbox .section-head .eyebrow{font-size:.52rem;letter-spacing:.13em}
#messageInbox .chat-world{margin-top:7px;font-size:.51rem;background:var(--bg);border-color:var(--line)}
#messageInbox .inbox-actions{display:flex;gap:6px;align-items:center;flex:none}
#messageInbox .inbox-actions button{font:600 .64rem/1.3 Inter,sans-serif;padding:8px 10px;border-radius:9px;min-height:44px;background:var(--bg);border:1px solid var(--line);box-shadow:none;color:var(--muted)}
#messageInbox .inbox-actions button:hover,#messageInbox .inbox-actions button[aria-pressed="true"]{color:var(--fg);border-color:var(--a2)}
#messageInbox>.context-note{margin:0;padding:0 22px 10px;font-size:.68rem;line-height:1.4;color:var(--muted)}
#messageInbox>.notice{margin:0;padding:0 22px 10px;font-size:.65rem}
#messageInbox>.notice:empty{display:none}
#messageInbox>.inbox{grid-template-columns:minmax(235px,.72fr) minmax(0,1.65fr);min-height:220px;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:var(--bg);box-shadow:none;flex:1}
#messageInbox .chat-roster{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg2);border-right:1px solid var(--line)}
#messageInbox .chat-contact-tools{grid-template-columns:minmax(0,1fr);gap:8px;margin:0;padding:16px 14px 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
#messageInbox .chat-contact-tools label{gap:7px;font-size:.63rem}
#messageInbox .chat-contact-tools input{min-height:44px;font-size:.8rem;padding:10px 11px;background:var(--bg);border-radius:10px}
#messageInbox .chat-contact-tools button{justify-self:start;min-height:38px;padding:7px 11px;font-size:.61rem;border-radius:20px;background:var(--bg)}
#messageInbox .chat-contact-tools p{font-size:.59rem;line-height:1.4;grid-column:auto}
#messageInbox .thread-list{padding:10px;gap:5px;flex:1;min-height:0;border:0;background:none}
#messageInbox .thread-item{grid-template-columns:44px minmax(0,1fr) auto;padding:12px 10px;min-height:91px;column-gap:10px;border-radius:12px;border:1px solid transparent;box-shadow:none}
#messageInbox .thread-item[aria-pressed="true"]{background:color-mix(in srgb,var(--a2) 10%,var(--bg));border-color:color-mix(in srgb,var(--a2) 32%,var(--line));box-shadow:inset 3px 0 var(--a2)}
#messageInbox .thread-item>strong{font:600 .82rem/1.35 Inter,sans-serif}
#messageInbox .thread-contact{font:400 .59rem/1.4 Inter,sans-serif;letter-spacing:0;text-transform:none;color:var(--muted)}
#messageInbox .thread-preview{font:400 .67rem/1.45 Inter,sans-serif;margin-top:3px;color:var(--muted)}
#messageInbox .thread-unread{font-size:.56rem;padding:4px 6px;border:0;background:var(--a2);color:#071322;border-radius:12px}
#messageInbox :is(.thread-avatar,.thread-person-avatar){position:relative;isolation:isolate;display:grid;place-items:center;flex:none;width:44px;height:44px;overflow:hidden;border-radius:var(--world-small-radius,13px);background:linear-gradient(145deg,var(--avatar-a,var(--a1)),var(--avatar-b,var(--a3)));border:1px solid #ffffff33;box-shadow:inset 0 1px #ffffff44;color:#111a30;font:800 .8rem/1 'Space Grotesk',sans-serif;letter-spacing:0;text-shadow:none}
#messageInbox :is(.thread-avatar,.thread-person-avatar)::before{content:"";position:absolute;z-index:-1;width:90%;height:90%;border:1px solid #ffffff55;border-radius:50%;transform:translate(20%,18%)}
#messageInbox [data-avatar="halo"]{--avatar-a:#f6c46c;--avatar-b:#ff91af}
#messageInbox [data-avatar="pulse"]{--avatar-a:#aab4ff;--avatar-b:#edb6ff}
#messageInbox [data-avatar="nova"]{--avatar-a:#8debff;--avatar-b:#a0acff}
#messageInbox [data-avatar="wave"]{--avatar-a:#8ef0d5;--avatar-b:#8bb7ff}
#messageInbox [data-avatar="ember"]{--avatar-a:#ffb194;--avatar-b:#f6a2ce}
#messageInbox .thread-view{padding:0;min-height:0;background:linear-gradient(160deg,color-mix(in srgb,var(--a3) 3%,var(--bg)),var(--bg));overflow:hidden}
#messageInbox .thread-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:16px 20px;background:var(--bg2);border-bottom:1px solid var(--line)}
#messageInbox .thread-person{display:flex;align-items:center;gap:12px;min-width:0}
#messageInbox .thread-identity{min-width:0}
#messageInbox .thread-head h3{font:700 .95rem/1.4 'Space Grotesk',sans-serif;letter-spacing:-.01em}
#messageInbox .thread-handle{margin-top:3px;color:var(--muted);font:400 .6rem/1.4 Inter,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#messageInbox .thread-actions{display:flex;align-items:center;gap:10px}
#messageInbox .thread-actions a{font-size:.63rem}
#messageInbox .thread-actions .thread-safety{min-height:44px;font-size:.63rem;padding:8px;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--muted)}
#messageInbox .thread-messages{padding:20px;gap:14px;scroll-padding:16px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;min-height:90px}
#messageInbox .thread-history-controls{padding:8px 0 14px;background:none;border:0;gap:12px}
#messageInbox .thread-history-note{font:400 .6rem/1.5 Inter,sans-serif;color:var(--muted)}
#messageInbox .thread-history-load{font-size:.63rem;background:var(--bg2)}
#messageInbox .bubble{max-width:88%;font:400 .86rem/1.6 Inter,sans-serif;white-space:pre-wrap;padding:12px 15px;border-radius:16px 16px 16px 5px;background:var(--bg2);border:1px solid var(--line);color:var(--fg);box-shadow:0 3px 8px #0001}
#messageInbox .bubble.mine{background:color-mix(in srgb,var(--a2) 14%,var(--bg2));border-color:color-mix(in srgb,var(--a2) 22%,var(--line));border-radius:16px 16px 5px 16px}
#messageInbox .bubble-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;margin-top:5px;white-space:normal}
#messageInbox .bubble time{margin:0;font:400 .56rem/1.4 Inter,sans-serif;color:var(--muted)}
#messageInbox .bubble .message-report{min-height:38px;margin:0;padding:7px;background:none;border-color:transparent;font-size:.56rem;color:var(--muted)}
#messageInbox .bubble .message-report:hover{border-color:var(--line);color:var(--fg)}
#messageInbox .thread-compose{margin:0;padding:13px 20px 18px;gap:8px 10px;background:var(--bg2);border-top:1px solid var(--line)}
#messageInbox .thread-compose label{font:500 .62rem/1.4 Inter,sans-serif;color:var(--muted)}
#messageInbox .thread-compose textarea{min-height:68px;max-height:130px;resize:vertical;padding:12px 14px;background:var(--bg);border-radius:13px;border:1px solid var(--line);font:400 1rem/1.5 Inter,sans-serif;color:var(--fg)}
#messageInbox .thread-compose button{min-height:48px;min-width:64px;padding:10px 12px;border-radius:12px;font-size:.7rem;background:var(--a2);color:#071322}
#messageInbox .thread-compose button:disabled{opacity:.48;cursor:default}
#messageInbox .thread-view>.notice:not(:empty){padding:0 20px 12px;background:var(--bg2);margin:0;font-size:.68rem}
#messageInbox .notification-preferences{margin:0 18px 14px;padding:16px;background:var(--bg)}
#messageInbox .chat-read-status{padding:10px 20px;background:var(--bg2)}
#messageInbox .empty{padding:28px 18px;border:0;line-height:1.7;background:none;font-size:.78rem;color:var(--muted)}
#chatToggle{border-radius:14px;background:var(--bg2);box-shadow:0 12px 35px #0006;border-color:color-mix(in srgb,var(--a2) 35%,var(--line));padding:12px 18px;font-size:.76rem}
#chatToggle::before{content:"";width:16px;height:13px;border:1.5px solid var(--a2);border-radius:5px 5px 5px 0}
@media(min-width:641px){
  #messageInbox[data-expanded="true"]{width:min(1180px,calc(100vw - 48px));height:calc(var(--hub-viewport-height) - 108px - env(safe-area-inset-bottom) - var(--messenger-player-clearance,0px) - var(--messenger-top-clearance,0px));right:max(24px,env(safe-area-inset-right))}
}
@media(max-width:760px) and (min-width:641px){
  #messageInbox>.inbox{grid-template-columns:220px minmax(0,1fr)}
  #messageInbox .thread-head{padding:12px}
  #messageInbox .thread-actions a{display:none}
  #messageInbox .thread-compose,#messageInbox .thread-messages{padding:14px}
}
@media(max-width:640px){
  #messageInbox{width:calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));right:max(10px,env(safe-area-inset-right));height:min(760px,calc(var(--hub-viewport-height) - 88px - env(safe-area-inset-bottom) - var(--messenger-player-clearance,0px) - var(--messenger-top-clearance,0px)));border-radius:18px}
  #messageInbox>.section-head{padding:14px 14px 12px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
  #messageInbox .section-head h2{font-size:1.1rem;margin:0}
  #messageInbox .chat-world{display:none}
  #messageInbox .inbox-actions{width:auto;display:flex;gap:5px;margin-left:auto}
  #messageInbox .inbox-actions button{padding:7px 8px;font-size:.6rem;min-height:44px}
  #messageInbox .inbox-actions :is(#inboxRefresh,#inboxMinimize){width:44px;padding:0;font-size:0}
  #messageInbox #inboxRefresh::after{content:"↻";font:500 1.15rem/1 Inter,sans-serif}
  #messageInbox #inboxMinimize::after{content:"⌄";font:500 1.15rem/1 Inter,sans-serif}
  #messageInbox #inboxExpand{display:none}
  #messageInbox>.notice{padding:0 14px 8px;font-size:.6rem}
  #messageInbox>.inbox{grid-template-columns:minmax(0,1fr);min-height:180px}
  #messageInbox .chat-roster{border:0}
  #messageInbox .chat-contact-tools{grid-template-columns:minmax(0,1fr) auto;padding:12px 14px;gap:8px}
  #messageInbox .chat-contact-tools p{grid-column:1/-1}
  #messageInbox .chat-contact-tools input{font-size:1rem}
  #messageInbox .chat-contact-tools button{min-height:44px;align-self:end;border-radius:10px}
  #messageInbox .thread-item{min-height:92px;padding:14px 12px}
  #messageInbox .thread-item>strong{font-size:.88rem}
  #messageInbox .thread-contact{font-size:.63rem}
  #messageInbox .thread-preview{font-size:.73rem}
  #messageInbox .thread-head{grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:10px 14px 12px}
  #messageInbox .thread-back{grid-column:1/-1;min-height:44px;padding:5px 0;border:0;background:none;color:var(--a2);font-size:.68rem}
  #messageInbox .thread-person{gap:10px}
  #messageInbox .thread-person-avatar{width:36px;height:36px;font-size:.72rem}
  #messageInbox .thread-head h3{font-size:.95rem}
  #messageInbox .thread-actions a{display:none}
  #messageInbox .thread-messages{padding:16px 14px;gap:12px}
  #messageInbox .bubble{font-size:.86rem;max-width:94%;padding:11px 13px}
  #messageInbox .bubble .message-report{min-height:44px}
  #messageInbox .thread-compose{padding:12px 14px 14px}
  #messageInbox .thread-compose textarea{min-height:66px;max-height:100px;padding:10px 12px}
  #messageInbox .thread-compose button{min-width:54px;padding:9px}
  #messageInbox .notification-preferences{margin-inline:12px}
}
@media(max-width:360px){#messageInbox .section-head h2{font-size:1rem}#messageInbox>.section-head{gap:6px}#messageInbox .inbox-actions{gap:4px}}
@media(max-height:540px){
  #messageInbox>.section-head{padding:10px 14px;gap:8px}
  #messageInbox .chat-world,#messageInbox>.context-note,#messageInbox .section-head .eyebrow{display:none}
  #messageInbox>.notice:empty{display:none}
  #messageInbox .thread-messages{min-height:80px}
  #messageInbox .thread-compose textarea{min-height:52px;max-height:70px}
}
:root[data-display-mode="touch"] #messageInbox :is(.inbox-actions button,.thread-actions button,.thread-compose button,.chat-contact-tools button){min-height:52px}
@supports not (background:color-mix(in srgb,black,white)){#messageInbox .thread-view,#messageInbox .bubble.mine,#messageInbox .thread-item[aria-pressed="true"]{background:var(--bg2)}}

/* The embedded Hub shares the viewport with a persistent, resizable music bar. */
body.platform-embedded{--messenger-player-clearance:var(--player-bar-height,84px);--messenger-top-clearance:64px}
#messageInbox{bottom:calc(76px + env(safe-area-inset-bottom) + var(--hub-keyboard-inset) + var(--messenger-player-clearance,0px))}
#chatToggle{bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--hub-keyboard-inset) + var(--messenger-player-clearance,0px))}
@media(max-width:640px){
  #messageInbox{bottom:calc(68px + env(safe-area-inset-bottom) + var(--hub-keyboard-inset) + var(--messenger-player-clearance,0px))}
  #chatToggle{bottom:calc(max(12px,env(safe-area-inset-bottom)) + var(--hub-keyboard-inset) + var(--messenger-player-clearance,0px))}
}

/* Conversation rhythm uses real timestamps; drafts remain in this mounted Hub. */
#messageInbox .thread-messages{background-image:radial-gradient(ellipse at 95% 0,color-mix(in srgb,var(--a3) 5%,transparent),transparent 55%)}
#messageInbox .message-day{display:flex;align-items:center;gap:12px;align-self:stretch;margin:10px 0 5px;color:var(--muted);font:500 .65rem/1.5 Inter,sans-serif;text-align:center}
#messageInbox .message-day::before,#messageInbox .message-day::after{content:"";height:1px;flex:1;background:var(--line)}
#messageInbox .message-day time{flex:none;max-width:75%}
#messageInbox .bubble.message-continuation{margin-top:-8px;border-top-left-radius:6px}
#messageInbox .bubble.mine.message-continuation{border-top-left-radius:16px;border-top-right-radius:6px}
#messageInbox .thread-compose:focus-within{border-top-color:color-mix(in srgb,var(--a2) 55%,var(--line))}
#messageInbox .thread-compose textarea:focus{outline:2px solid var(--a2);outline-offset:2px;box-shadow:none}
#messageInbox .compose-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;grid-column:1/-1;min-width:0;color:var(--muted);font:400 .62rem/1.4 Inter,sans-serif}
#messageInbox .compose-count{font-variant-numeric:tabular-nums;white-space:nowrap}
#messageInbox .compose-count.near-limit{color:var(--a1);font-weight:700}
#messageInbox .thread-compose button:not(:disabled):hover{filter:brightness(1.08)}
@media(max-width:640px){
  #messageInbox .thread-head{grid-template-columns:36px minmax(0,1fr) auto;gap:8px;padding:10px}
  #messageInbox .thread-back{grid-column:auto;align-self:center;min-width:36px;min-height:44px;padding:0;font-size:0;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
  #messageInbox .thread-back::before{content:"←";font:500 1rem/1 Inter,sans-serif}
  #messageInbox .thread-person{gap:8px}
  #messageInbox .thread-person-avatar{width:32px;height:36px}
  #messageInbox .thread-head h3{font-size:.86rem;line-height:1.3;overflow-wrap:anywhere}
}
@media(max-height:540px){#messageInbox .compose-hint{display:none}#messageInbox .compose-meta{justify-content:flex-end}#messageInbox .thread-compose{gap:5px 8px}}
@media(max-height:540px){
  #messageInbox[data-expanded]{top:calc(8px + env(safe-area-inset-top) + var(--messenger-top-clearance,0px));bottom:calc(8px + env(safe-area-inset-bottom) + var(--hub-keyboard-inset) + var(--messenger-player-clearance,0px));height:auto;max-height:none;overflow-y:auto}
  #chatToggle[aria-expanded="true"]{display:none}
  #messageInbox>.inbox{flex:1 0 210px;min-height:210px}
  #messageInbox .thread-compose{padding:8px 12px}
  #messageInbox .thread-compose textarea{min-height:44px;max-height:64px}
  #messageInbox .thread-compose button{min-height:44px}
  #messageInbox .thread-head{padding:8px 12px}
}
@media(max-height:540px){
  #messageInbox>.inbox{min-height:190px}
  #messageInbox .thread-head{padding:8px 12px}
  #messageInbox .thread-messages{min-height:50px;padding:10px 12px}
  #messageInbox .thread-compose{padding:8px 12px}
  #messageInbox .thread-compose label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}