.dm-directory{display:grid;gap:8px;max-height:min(52dvh,460px);overflow-y:auto;padding:4px}.dm-roster-count{font-weight:700;margin-bottom:4px}.dm-roster-row{display:flex;align-items:center;gap:10px;padding:9px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:10px}.dm-player-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dm-online{color:#67e8a4;font-size:15px}.dm-history{display:flex;flex-direction:column;gap:10px;min-height:150px;max-height:min(49dvh,400px);overflow-y:auto;padding:13px 9px;background:rgba(16,15,28,.22);border-radius:13px}.dm-bubble{max-width:83%;display:flex;flex-direction:column;gap:3px;padding:9px 12px;background:rgba(255,255,255,.12);border-radius:12px;align-self:flex-start;overflow-wrap:anywhere;white-space:pre-wrap;font-size:13px}.dm-bubble.mine{align-self:flex-end;background:rgba(100,177,159,.27)}.dm-who{font-size:11px;font-weight:700;opacity:.8}.dm-bubble time{font-size:10px;opacity:.6;align-self:flex-end}.dm-compose{display:flex;gap:8px;padding-top:12px}.dm-compose input{flex:1;min-width:0}.dm-inbox-row{width:100%;display:grid;grid-template-columns:1fr auto;gap:3px 10px;background:rgba(255,255,255,.08);color:inherit;border:1px solid rgba(255,255,255,.2);border-radius:11px;text-align:left;padding:12px;cursor:pointer}.dm-inbox-row span{opacity:.82;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dm-inbox-row small{opacity:.65;font-size:10px}@media(max-width:600px){.dm-history{max-height:43dvh}.dm-bubble{font-size:12px}.dm-compose{gap:5px}}
/* Highest-priority chat controls: independent of the game's modal panels. */
.dm-quickbar{position:fixed;right:max(12px,env(safe-area-inset-right));top:calc(65px + env(safe-area-inset-top));z-index:1250;display:flex;gap:5px;pointer-events:auto}
.dm-quick{border:2px solid #e3c58c;border-radius:9px;background:#342b47;color:white;font-size:19px;width:40px;height:39px;cursor:pointer;box-shadow:0 3px 0 #20192c}
.dm-floating{position:fixed;z-index:1300;right:max(10px,env(safe-area-inset-right));top:calc(113px + env(safe-area-inset-top));width:min(365px,calc(100vw - 20px));max-height:min(72dvh,600px);display:flex;flex-direction:column;gap:9px;background:#30283f;color:#fff6ea;border:3px solid #dbb46d;border-radius:14px;padding:11px;box-shadow:0 12px 40px #0008;pointer-events:auto}
.dm-floating-head{display:flex;align-items:center;justify-content:space-between;gap:9px}
.dm-floating .dm-history{flex:1;min-height:110px;max-height:42dvh}
.dm-floating .dm-directory{max-height:45dvh}
.dm-floating input{height:42px}
@media(max-width:600px){.dm-quickbar{top:calc(56px + env(safe-area-inset-top));right:5px}.dm-quick{width:33px;height:34px;font-size:16px}.dm-floating{top:calc(95px + env(safe-area-inset-top));right:5px;width:calc(100vw - 10px);max-height:67dvh}.dm-floating .dm-history{max-height:36dvh}}

body:not(.playing) .dm-quickbar{display:none}
#chatbar.open{z-index:1400}
.dm-floating{z-index:1300}

/* Mobile hotfix: exactly one compact chat launcher; options expand vertically. */
.dm-quickbar{right:max(10px,env(safe-area-inset-right));top:calc(85px + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.dm-quick-actions{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.dm-quick-actions[hidden]{display:none!important}
.dm-quick-toggle{width:43px;height:43px}
.dm-floating{top:calc(145px + env(safe-area-inset-top))}
@media(max-width:600px){
 .dm-quickbar{top:calc(78px + env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));}
 .dm-quick-toggle{width:40px;height:40px}
 .dm-quick-actions .dm-quick{width:40px;height:40px}
 .dm-floating{top:calc(130px + env(safe-area-inset-top))}
}

/* Draggable floating chat bubble: user chooses its screen position. */
.dm-quickbar{position:fixed!important;right:auto!important;bottom:auto!important;display:block!important;width:46px;z-index:1250;touch-action:none;user-select:none;-webkit-user-select:none}
.dm-quick-toggle{width:46px!important;height:46px!important;border-radius:50%;display:grid;place-items:center;touch-action:none;-webkit-touch-callout:none;cursor:grab;box-shadow:0 4px 13px #0008,0 0 0 2px #f0d69b}
.dm-quick-toggle:active{cursor:grabbing}
.dm-quick-actions{position:absolute;right:calc(100% + 10px);top:0;display:flex;flex-direction:column;gap:7px;padding:5px;border-radius:12px;background:rgba(39,31,54,.93);border:1px solid #d9b981;white-space:nowrap}
.dm-quick-actions[hidden]{display:none!important}
.dm-quick-actions .dm-quick{width:40px;height:40px}
@media(max-width:600px){.dm-quickbar{width:44px}.dm-quick-toggle{width:44px!important;height:44px!important}.dm-quick-actions{right:calc(100% + 7px)}}

.dm-quickbar.dm-menu-right .dm-quick-actions{right:auto;left:calc(100% + 9px)}

/* Chat drag bubble belongs to the in-game HUD only. Hide on title, login and character creation. */
body:not(.playing) .dm-quickbar{display:none!important}
/* 未讀密語紅點 */
.dm-has-badge{position:relative}
.dm-badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#e5484d;color:#fff;font-size:11px;line-height:18px;font-weight:bold;text-align:center;border:2px solid #fff;box-shadow:0 1px 0 rgba(0,0,0,.3);pointer-events:none;animation:dm-pop .25s ease-out}
.dm-badge[hidden]{display:none}
.dm-badge.inline{position:static;display:inline-block;margin-left:6px;vertical-align:middle;border:none;animation:none}
.dm-inbox-row.unread{box-shadow:inset 4px 0 0 #e5484d}
@keyframes dm-pop{from{transform:scale(.4)}to{transform:scale(1)}}