/* Phone and tablet chat (js/ui/mobile-chat.js). Body colours follow docs/chat.md. */
.m-chatbox{position:absolute;left:calc(var(--safe-l) + 46px);bottom:calc(var(--safe-b) + 58px);width:250px;height:70px;background:url(/ui/mobile/chatbg.png?v=33a281024816cb39) 0 0/100% 100%;text-align:left;overflow:hidden}
/* Rows stack from the bottom inside the box's padding, so new lines never spill below it. */
.m-chatbox-rows{position:absolute;left:8px;right:26px;top:6px;bottom:6px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;overflow:hidden;font-size:10.5px;line-height:14px}
.m-chatbox .m-chatbox-rows .m-crow{margin:0;white-space:nowrap;overflow:hidden;align-items:center;gap:4px;flex:none}
.m-chatbox .m-crow>span{overflow:hidden;text-overflow:ellipsis}
.m-chatbox .m-chatbox-rows .m-pill{width:30px;height:11px;margin:0}
.m-stage>.m-chatbox{pointer-events:none}
.m-cex{position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;pointer-events:auto}
.m-cex img{width:18px;height:18px;display:block}
.m-cex:active img{transform:scale(.9)}
.m-cdot{position:absolute;right:6px;top:4px;width:9px;height:9px}
/* With the HUD collapsed the log stays readable without its arrow: expand the HUD to open chat. */
.m-root.m-hud-collapsed .m-chatbox{background:none}
.m-root.m-hud-collapsed .m-chatbox .m-cex,.m-root.m-hud-collapsed .m-chatbox .m-cdot{display:none}
.m-root.m-chatting .m-bar,.m-root.m-chatting .m-strip,.m-root.m-chatting .m-chatbox,.m-root.m-chatting .m-picker{display:none!important}
/* Regions measured on chatpanel.png (1127x668, stretched to the panel): frame x 25-1094, y 0-651; gold rule y 35;
   message box x 176-1073, y 95-561. The panel starts after the left safe area (the iPhone notch in landscape). */
.m-chat{position:absolute;left:var(--safe-l);top:var(--kb-top,0px);height:var(--kb-height,100%);width:min(540px,calc(100% - var(--safe-l)));max-height:100%;background:url(/ui/mobile/chatpanel.png?v=378d701120c5d8cd) 0 0/100% 100%;z-index:7;filter:drop-shadow(6px 0 18px #000a)}
.m-cmain{display:contents}
.m-chead{position:absolute;left:15.62%;right:4.79%;top:5.24%;height:8.98%;display:flex;align-items:center;gap:8px;padding:0 4px 0 6px}
.m-chead .m-mute{font-size:11px}
.m-cicon,.m-cicon img{width:28px;height:28px;display:block;flex:none}
.m-crail{position:absolute;left:2.22%;width:13.4%;top:14.22%;bottom:16.02%;padding:0 6px;display:flex;flex-direction:column;gap:3px;overflow:auto}
.m-ctab{height:30px;flex:none;background:url(/ui/mobile/chtab.png?v=5e48daef429b3ad0) 0 0/100% 100%;display:grid;place-items:center;position:relative}
.m-ctab.on{background-image:url(/ui/mobile/chtabon.png?v=c1b689193ae499fc)}
.m-ctab .m-pill{width:52px;height:18px}
.m-ctab .m-dot{position:absolute;right:1px;top:1px;width:10px;height:10px}
.m-clist{position:absolute;left:calc(15.62% + 8px);right:calc(4.79% + 6px);top:calc(14.22% + 4px);bottom:calc(16.02% + 4px);overflow:auto;display:flex;flex-direction:column;gap:5px;font-size:12px;line-height:1.38;-webkit-user-select:text;user-select:text}
.m-clist>:first-child{margin-top:auto}
.m-crow{display:flex;gap:6px;align-items:flex-start}
.m-crow .m-pill{width:42px;height:15px;flex:none;margin-top:1px}
.m-crow span{overflow-wrap:anywhere}
.m-who{display:inline;color:#c0ffc0;font-weight:600;white-space:nowrap;cursor:pointer}
.m-crow.me .m-who{color:#ffe07a}
.m-to{color:#c0ffc0}
.m-c-talk{color:#fff}.m-c-whisper{color:#ff9be8}.m-c-team{color:#ffe066}.m-c-guild{color:#8ef08e}.m-c-friend{color:#ffb0b0}.m-c-service{color:#ffb060}.m-c-broadcast{color:#ff7a6a}.m-c-world{color:#ffe066}.m-c-system{color:#ffd56a}.m-c-alert{color:#ff8a80}
.m-cbar{position:absolute;left:calc(2.22% + 8px);right:calc(2.93% + 8px);top:83.98%;bottom:2.54%;display:flex;align-items:center;gap:5px}
.m-cdrop{width:68px;height:32px;flex:none;background:url(/ui/mobile/dropbox.png?v=01898d346dbdb8ce) 0 0/100% 100%;display:flex;align-items:center;justify-content:center;gap:5px}
.m-cdrop .m-pill{width:40px;height:14px}
.m-cdrop .m-tri{width:10px;height:7px;transform:rotate(180deg)}
.m-cin{height:32px;background:url(/ui/mobile/inlong.png?v=1b2e01a1ca02f131) 0 0/100% 100%;border:0;outline:0;color:var(--ink);font-size:14px;padding:0 10px;flex:1;min-width:0;-webkit-user-select:text;user-select:text}
.m-cin::placeholder{color:#8d877a}
.m-cto{width:76px;flex:none;background-image:url(/ui/mobile/inshort.png?v=5b2d3c67f262d8b1)}
.m-cwrap{flex:1;min-width:0;position:relative;display:flex}
.m-cwrap .m-cin{padding-right:46px}
.m-ccount{font-size:10px;color:var(--mute);position:absolute;right:9px;top:50%;transform:translateY(-50%);pointer-events:none}
.m-csend{min-width:54px;height:30px;padding:0 8px;flex:none}
.m-cmenu{position:absolute;left:15.62%;bottom:calc(16.02% + 4px);width:262px;padding:8px;background:#0d0e10 url(/ui/mobile/droplist.png?v=513e82954a2beb8a) 0 0/100% 100%;border:1px solid #a8894a88;border-radius:4px;box-shadow:0 8px 20px #000c;z-index:3;display:flex;flex-direction:column}
.m-copt{display:flex;align-items:center;gap:8px;padding:4px;border-radius:4px;font-size:11px;color:#cfc6b0;text-align:left}
.m-copt.on{background:#e2c47c1f;box-shadow:inset 2px 0 0 var(--gold);color:#f6e7b8}
.m-copt.off{opacity:.45}
.m-copt img{width:52px;height:18px;flex:none}
.m-cdrawer{position:absolute;left:15.62%;right:4.79%;bottom:calc(16.02% + 4px);height:132px;background:#0d0e10 url(/ui/mobile/drawer.png?v=cd53aab1678784e5) 0 0/100% 100%;border-radius:4px;display:flex;gap:10px;padding:10px;z-index:3;box-shadow:0 8px 20px #000c}
.m-dtabs{display:flex;flex-direction:column;gap:6px}
.m-dtabs button{opacity:.6}.m-dtabs button.on{opacity:1;outline:1px solid var(--gold);border-radius:4px}
.m-dtabs img{width:46px;height:46px;display:block}
.m-dbody{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;overflow:auto}
.m-chipx{font-size:12px;color:#f1e6c8;background:#ffffff12;border:1px solid #ffffff22;border-radius:14px;padding:5px 10px}

/* Auto Ctrl switch in the player plate (drives the classic #auto-ctrl-toggle setting). */
.m-autoctrl{display:flex;align-items:center;gap:3px;height:16px;padding:0 6px 0 3px;border-radius:8px;background:#0009;box-shadow:inset 0 0 0 1px #a8894a88;font-size:9px;font-weight:700;color:#cfc6b0;white-space:nowrap}
.m-autoctrl i{width:9px;height:9px;border-radius:2px;box-shadow:inset 0 0 0 1px #cfc6b0}
.m-autoctrl.on{color:#f6e7b8;box-shadow:inset 0 0 0 1px var(--gold)}
.m-autoctrl.on i{background:var(--gold);box-shadow:none}

.m-chat-clear{position:absolute;left:calc(var(--safe-l) + 46px);bottom:calc(var(--safe-b) + 132px);width:40px;height:40px;display:grid;place-items:center}
.m-cicon[data-chat-clear]{width:32px;height:32px;display:grid;place-items:center}
.m-chat-clear img{width:40px;height:40px;object-fit:contain}
.m-cicon[data-chat-clear] img{width:28px;height:28px;object-fit:contain}
.m-chat-clear:disabled{opacity:.35}
.m-root:is(.m-hud-collapsed,.m-chatting) .m-chat-clear{display:none}
.m-root:has(:is(.m-shop,.m-sheet):not([hidden])) .m-chat-clear{visibility:hidden}

/* Chat entry below DM, available even when history is empty. */
.m-chat-open{position:absolute;left:calc(var(--safe-l) + 2px);bottom:calc(var(--safe-b) + 88px);width:40px;height:40px}
.m-chat-open img{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 3px #000c)}
.m-chat-open:active{transform:scale(.92)}
.m-root:is(.m-hud-collapsed,.m-chatting) .m-chat-open{display:none}
.m-root:has(:is(.m-shop,.m-sheet,.m-inspection):not([hidden])) .m-chat-open{visibility:hidden}

/* Reuse sent text without changing channel/recipient or sending automatically. */
.m-chistory{flex:none;min-height:30px;padding:4px 9px;color:var(--ink);font-size:12px;background:url(/ui/mobile/btnB.png?v=6985addbe008ac4c) center/100% 100% no-repeat}
.m-chistory[aria-expanded='true']{background-image:url(/ui/mobile/tabon.png?v=4532b1ded01984c6);color:#35260e}
.m-chistory:disabled{opacity:.45}
.m-sent-history{position:absolute;left:calc(15.62% + 4px);right:calc(4.79% + 4px);top:calc(14.22% + 2px);bottom:calc(16.02% + 4px);overflow:auto;z-index:3;padding:8px;background:#171c20 url(/ui/mobile/popbg.png?v=3add4e59f44b5c98) center/100% 100%;box-shadow:0 4px 14px #000a}
.m-history-note{margin:0 0 6px;color:var(--gold);font-size:11px;line-height:1.4}
.m-history-message{display:block;width:100%;min-height:38px;padding:8px 6px;text-align:left;overflow-wrap:anywhere;color:var(--ink);font-size:12px;line-height:1.4;border-bottom:1px solid #c9b47726}
.m-history-message:active,.m-history-message:focus-visible{background:#e2c47c26}
.m-chead:has(.m-chistory) .m-mute{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

.m-to[data-chat-who]{cursor:pointer}