/* Bound the complete workspace chain only while Messenger is visible. */
body.messenger-open { overflow: hidden; }
.messenger-open .toast-region { top: 4.9rem; bottom: auto; pointer-events: none; }
.messenger-open .toast { padding: .6rem .8rem; font-size: .85rem; }
.messenger-open #app-shell { position: fixed; inset: var(--messenger-top, 0px) 0 auto; height: var(--messenger-height, 100dvh); display: flex; flex-direction: column; overflow: hidden; }
.messenger-open .topbar { flex: none; height: auto; min-height: 4.4rem; flex-wrap: wrap; }
.messenger-open .workspace { flex: 1; min-height: 0; overflow: hidden; }
.messenger-open .sidebar { top: 0; height: 100%; min-height: 0; overflow-y: auto; }
.messenger-open #main-content { display: flex; min-height: 0; padding: 0; overflow: hidden; }
.messenger-open #view-messaging { width: 100%; max-width: none; min-width: 0; min-height: 0; height: 100%; margin: 0; overflow: hidden; }

#view-messaging { --chat-bg: #121315; --chat-panel: #191a1c; --chat-line: #33352f; --chat-muted: #a9aca4; --chat-own: #36321e; }
#view-messaging .messaging-layout { display: grid; grid-template-columns: clamp(15rem, 25%, 20rem) minmax(0, 1fr); gap: 0; height: 100%; min-height: 0; background: var(--chat-bg); }
#view-messaging .message-sidebar, #view-messaging .message-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
#view-messaging .message-sidebar { gap: 0; border-right: 1px solid var(--chat-line); background: var(--chat-panel); }
#view-messaging .message-list-head, #view-messaging .thread-head { flex: none; display: flex; align-items: center; gap: .5rem; min-height: 4.3rem; padding: .7rem 1rem; border-bottom: 1px solid var(--chat-line); }
#view-messaging h1, #view-messaging h2, #view-messaging h3 { font-family: inherit; text-transform: none; letter-spacing: normal; text-shadow: none; }
#view-messaging .message-list-head h1 { flex: 1; margin: 0; font-size: 1.1rem; font-weight: 650; }
#view-messaging :is(button, a:where(.route-link)), #view-messaging summary { letter-spacing: normal; text-transform: none; }
#view-messaging .message-list-head :is(button, a:where(.route-link)) { padding: .45rem .55rem; font-size: .85rem; white-space: nowrap; }
#view-messaging .conversation-list { display: block; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; overflow-anchor: none; }
#view-messaging .conversation-card { display: flex; flex-direction: column; gap: .25rem; border: 0; border-bottom: 1px solid var(--chat-line); border-radius: 0; background: transparent; padding: .85rem 1rem; font-weight: normal; }
#view-messaging .conversation-card.active { background: #2a2d25; box-shadow: inset 3px 0 var(--yellow); }
#view-messaging .conversation-card:hover { background: #252723; }
#view-messaging .conversation-line { display: flex; align-items: center; gap: .5rem; width: 100%; }
#view-messaging .conversation-line strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 600; color: var(--ink); }
#view-messaging .conversation-card span { text-transform: none; letter-spacing: normal; }
#view-messaging .conversation-card small { width: 100%; font-size: .78rem; color: var(--chat-muted); }
#view-messaging .conversation-card .closed-label { color: var(--chat-muted); font-size: .7rem; font-weight: 500; }
#view-messaging .inline-pip { color: white; }
#view-messaging #message-list-info, #view-messaging .conversation-empty { flex: none; margin: 0; padding: .6rem 1rem; color: var(--chat-muted); font-size: .75rem; }
#view-messaging .thread-head { background: var(--chat-bg); }
#view-messaging .thread-title { flex: 1; min-width: 0; }
#view-messaging .thread-title h2 { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-messaging .thread-title p { margin: .2rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--chat-muted); font-size: .78rem; }
#view-messaging .message-back { display: none; }
#view-messaging .message-menu { position: relative; flex: none; }
#view-messaging .message-menu > summary { display: grid; place-items: center; min-width: 2.4rem; min-height: 2.4rem; padding: .2rem .5rem; list-style: none; cursor: pointer; border-radius: .35rem; font-size: 1.3rem; }
#view-messaging .message-menu > summary::-webkit-details-marker { display: none; }
#view-messaging .message-menu > summary:hover, #view-messaging .message-menu[open] > summary { background: #30322c; }
#view-messaging .message-menu-items { position: absolute; z-index: 5; right: 0; top: 100%; width: min(17rem, 80vw); max-height: min(28rem, 60dvh); overflow-y: auto; padding: .45rem; border: 1px solid var(--chat-line); border-radius: .45rem; box-shadow: 0 .5rem 1.5rem #0008; background: #222326; }
#view-messaging .message-menu-items :is(button, a:where(.route-link)) { display: block; width: 100%; background: transparent; text-align: left; border: 0; padding: .65rem; font-size: .85rem; font-weight: 500; }
#view-messaging .message-menu-items :is(button, a:where(.route-link)):hover { background: #35372f; }
#view-messaging .message-participants { padding: .5rem .65rem; margin: 0; color: var(--chat-muted); font-size: .8rem; overflow-wrap: anywhere; }
#view-messaging .message-history { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#view-messaging .message-stream { display: block; height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; overflow-anchor: none; overscroll-behavior: contain; background: var(--chat-bg); padding: 1rem 1.25rem; scroll-padding-block: .5rem; }
#view-messaging .message-items { display: flex; flex-direction: column; gap: .75rem; }
#view-messaging .message-bubble { flex: none; align-self: flex-start; width: fit-content; max-width: min(85%, 48rem); padding: .5rem .7rem; border: 0; border-radius: .25rem .7rem .7rem; background: #222326; font-size: .95rem; line-height: 1.5; }
#view-messaging .message-bubble.mine { align-self: flex-end; background: var(--chat-own); border-radius: .7rem .25rem .7rem .7rem; }
#view-messaging .message-bubble.npc { background: #27222a; }
#view-messaging .message-bubble.system { background: #29281f; }
#view-messaging .message-bubble header { align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 1rem; color: #d7d8d0; font-size: .78rem; font-weight: 600; }
#view-messaging .message-bubble header strong { overflow-wrap: anywhere; }
#view-messaging .message-bubble p { margin: .15rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#view-messaging .message-bubble time { display: block; color: var(--chat-muted); font-size: .68rem; text-align: right; }
#view-messaging .message-actions > summary { min-height: 1.5rem; min-width: 1.8rem; font-size: 1rem; }
#view-messaging .message-actions .message-menu-items { position: static; width: auto; box-shadow: none; }
#view-messaging .message-latest { position: absolute; z-index: 2; bottom: .75rem; left: 50%; transform: translateX(-50%); max-width: 90%; background: #e4cd55; color: #161610; border: 1px solid #e4cd55; border-radius: 2rem; font-size: .8rem; padding: .55rem .9rem; box-shadow: 0 .15rem .6rem #0007; }
#view-messaging #message-older { display: block; margin: 0 auto .8rem; font-size: .8rem; padding: .5rem .8rem; }
#view-messaging #message-history-status { margin: 0 0 .5rem; font-size: .8rem; }
#view-messaging #message-history-status:empty { display: none; }
#view-messaging .message-compose { flex: none; grid-template-columns: minmax(0,1fr) auto; gap: .4rem .65rem; padding: .65rem 1rem max(.65rem, env(safe-area-inset-bottom)); background: var(--chat-panel); border-top: 1px solid var(--chat-line); }
#view-messaging .message-compose textarea { min-width: 0; min-height: 2.75rem; max-height: min(9rem,24dvh); resize: none; padding: .6rem .75rem; font-size: .95rem; line-height: 1.4; border-color: #42443c; border-radius: .5rem; background: #222326; }
#view-messaging .message-compose > :is(button, a:where(.route-link)) { min-height: 2.75rem; padding: .6rem .85rem; }
#view-messaging .message-send-as { gap: .5rem; font-size: .78rem; }
#view-messaging .message-send-as select { width: auto; max-width: min(19rem, 70%); padding: .3rem .5rem; font-size: .8rem; }
#view-messaging .compose-hint { color: var(--chat-muted); font-size: .7rem; }
#view-messaging #message-send-status { grid-column: 1 / -1; margin: 0; font-size: .8rem; }
#view-messaging #message-send-status:empty { display: none; }
#view-messaging .message-delivery { grid-column: 1 / -1; display: flex; gap: .5rem; align-items: center; }
#view-messaging .message-delivery:has(#message-send-status:empty):has(#message-send-retry[hidden]) { display: none; }
#view-messaging .message-delivery p { margin: 0; font-size: .8rem; color: var(--chat-muted); }
#view-messaging #message-send-retry, #view-messaging [data-conversation-more] { padding: .4rem .7rem; font-size: .8rem; }
#view-messaging .archived-notice { flex: none; padding: .7rem 1rem; font-size: .85rem; color: var(--chat-muted); background: var(--chat-panel); }
#view-messaging #message-new-dialog { width: min(32rem, calc(100vw - 2rem)); max-height: min(90dvh, calc(var(--messenger-height,100dvh) - 2rem)); overflow-y: auto; border: 1px solid var(--chat-line); background: var(--chat-panel); }
#view-messaging #message-new-title { font-size: 1.1rem; }
#view-messaging[data-mode="access"] { overflow-y: auto; padding: 1rem; background: var(--chat-bg); }
#view-messaging .message-access-head { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
#view-messaging .message-access-head h1 { margin: 0; font-size: 1.2rem; }
#view-messaging .message-access { border-top: 1px solid var(--chat-line); }
#view-messaging :is(:is(button, a:where(.route-link)), summary, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (max-width: 760px) {
  .messenger-open .sidebar { top: calc(var(--messenger-top,0px) + var(--messenger-header,4.4rem)); height: calc(var(--messenger-height,100dvh) - var(--messenger-header,4.4rem)); }
  .messenger-open .topbar .brand { flex: 1; }
  .messenger-open .topbar-meta { margin-left: auto; flex-wrap: nowrap; }
  .messenger-open .topbar-meta :is(button, a:where(.route-link)) { padding: .45rem .6rem; font-size: .8rem; }
}
@media (max-width: 700px) {
  #view-messaging .messaging-layout { grid-template-columns: minmax(0,1fr); }
  #view-messaging .messaging-layout[data-mobile="list"] .message-thread, #view-messaging .messaging-layout[data-mobile="thread"] .message-sidebar { display: none; }
  #view-messaging .message-back { display: inline-flex; align-items: center; padding: .4rem .55rem; }
  #view-messaging .thread-head, #view-messaging .message-list-head { padding: .55rem .7rem; min-height: 3.75rem; }
  #view-messaging .message-stream { padding: .8rem .7rem; }
  #view-messaging .message-bubble { max-width: 94%; }
  #view-messaging .message-compose { padding: .5rem .65rem max(.5rem, env(safe-area-inset-bottom)); }
  #view-messaging .message-compose textarea { font-size: 1rem; }
}
@media (pointer: coarse) {
  #view-messaging .message-menu > summary, #view-messaging .message-menu-items :is(button, a:where(.route-link)), #view-messaging .message-back, #view-messaging #message-new { min-height: 44px; min-width: 44px; }
  #view-messaging .compose-hint { display: none; }
}
@media (max-height: 500px) {
  #view-messaging .message-list-head, #view-messaging .thread-head { min-height: 3rem; padding-block: .35rem; }
  #view-messaging .message-compose { padding-block: .35rem; }
  #view-messaging .message-send-as { grid-column: auto; }
  #view-messaging .compose-hint { display: none; }
}

/* Personal chat hues are independent of the server's sender categories. */
#view-messaging { --chat-bg:#0d1115; --chat-panel:#10191f; --chat-line:#344149; --chat-muted:#b9c3c5; --chat-own:#192b30; --chat-accent:#00d8e9; }
#view-messaging .chat-colour-cyan,#view-messaging .chat-colour-default { --chat-accent:#00d8e9; }
#view-messaging .chat-colour-gold { --chat-accent:#ffda28; }
#view-messaging .chat-colour-rose { --chat-accent:#ff78b7; }
#view-messaging .chat-colour-violet { --chat-accent:#c3a8ff; }
#view-messaging .chat-colour-mint { --chat-accent:#79e8b0; }
#view-messaging .chat-colour-orange { --chat-accent:#ffb36b; }
#view-messaging .message-list-head { border-top:3px solid var(--yellow); background:linear-gradient(110deg,#07313a,#211624); }
#view-messaging .message-list-head h1 { color:var(--ink); }
#view-messaging .conversation-card { border-left:4px solid var(--chat-accent); background:#11191c; background:color-mix(in srgb,var(--chat-accent) 7%,#0d151b); }
#view-messaging .conversation-card:hover { background:color-mix(in srgb,var(--chat-accent) 13%,#0d151b); }
#view-messaging .conversation-card.active { box-shadow:inset 0 0 0 1px var(--chat-accent); background:color-mix(in srgb,var(--chat-accent) 18%,#0d151b); }
#view-messaging .conversation-card.active .conversation-line::before { content:'›'; color:var(--chat-accent); font-size:1.1rem; font-weight:bold; }
#view-messaging .thread-head { border-top:3px solid var(--chat-accent); background:linear-gradient(110deg,#10282e,#19141e); }
#view-messaging .message-stream { background:linear-gradient(140deg,#00d8e904,transparent 45%,#ed006106),var(--chat-bg); }
#view-messaging .message-compose { background:linear-gradient(110deg,#102329,#1c1723); border-top-color:#47606b; }
#view-messaging .message-bubble { background:#20282e; color:#f4f1e8; border-left:2px solid #57636b; }
#view-messaging .message-bubble.mine { background:#192f34; border-left-color:#378f9a; }
#view-messaging .message-bubble.npc { background:#251f33; border-left-color:#c3a8ff; }
#view-messaging .message-bubble.rival { background:#2a1e29; border-left-color:#ff78b7; }
#view-messaging .message-bubble.system { background:#2b2716; border-left-color:#ffda28; }
#view-messaging .sender-name { font-weight:650; }
#view-messaging .sender-player { color:#00d8e9; }
#view-messaging .sender-rival { color:#ff78b7; }
#view-messaging .sender-npc { color:#c3a8ff; }
#view-messaging .sender-system { color:#ffda28; }
#view-messaging .sender-unknown { color:#d4d9dd; }
#view-messaging .sender-category { color:#c0c8cd; font-size:.65rem; font-weight:normal; padding:.05rem .25rem; border:1px solid #ffffff25; border-radius:3px; margin-left:.35rem; }
#view-messaging .thread-title .sender-category { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
#view-messaging .message-participants { line-height:1.8; }
#view-messaging .chat-colour-picker > summary { font-size:.78rem; min-height:44px; padding:.35rem .5rem; border:1px solid #ffffff30; }
#view-messaging .thread-head { position:relative; }
#view-messaging .chat-colour-picker { position:static; }
#view-messaging .chat-colour-panel { position:absolute; z-index:10; top:100%; right:.7rem; width:min(16.5rem,calc(100vw - 2rem)); max-height:21rem; overflow-y:auto; padding:.7rem; border:1px solid #74828c; border-top:2px solid var(--chat-accent); border-radius:.4rem; background:#141b23; box-shadow:0 .6rem 1.5rem #000b; }
#view-messaging .chat-colour-panel p { margin:0 0 .6rem; font-size:.8rem; }
#view-messaging .chat-colour-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; margin-bottom:.4rem; }
#view-messaging .chat-colour-panel :is(button, a:where(.route-link)) { display:flex; align-items:center; gap:.45rem; min-height:44px; font-size:.8rem; padding:.45rem; background:#0d141b; color:var(--ink); }
#view-messaging .chat-colour-panel :is(button, a:where(.route-link)) span { width:.8rem; height:.8rem; border-radius:50%; background:var(--chat-accent); flex:none; }
#view-messaging .chat-colour-panel [aria-pressed=true] { outline:2px solid var(--chat-accent); outline-offset:-2px; }
#view-messaging .chat-colour-panel > :is(button, a:where(.route-link)) { width:100%; }
#view-messaging #chat-colour-status { margin:.6rem 0 0; color:#e2d6b2; line-height:1.4; }
#view-messaging #chat-colour-status:empty { display:none; }