/* Action row: map below the avatar; all other actions share the right side. */
#city-bar{align-items:flex-start;gap:8px}
#map-shortcut{flex:0 0 38px;width:38px;min-height:48px;padding:4px 0;background:none;border:0;color:#ffe0a0;filter:drop-shadow(0 2px 1px #12284b)}
#nav{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;width:min(570px,calc(100% - 46px));margin-left:auto}
#nav button{width:100%;min-width:0;max-width:none;padding:4px 1px;min-height:56px;font-size:10px;border:0;background:none}
#nav button span{display:flex;align-items:center;justify-content:center;height:30px;font-size:26px}
#nav button svg{width:29px;height:29px;filter:drop-shadow(0 1px 1px #123261)}
@media(max-width:440px){#nav button{font-size:8px;line-height:12px}#nav{gap:1px}#nav button svg{width:26px;height:26px}}
.player-public-id{padding:10px 14px;border:1px solid #c7a45e;border-radius:8px;color:#ffe2a3;user-select:text}

/* Three fixed channels; exactly three single-line messages in the folded dock. */
#chat-dock{--chat-line:21px;position:absolute;z-index:12;left:calc(var(--safe-left) + 9px);right:calc(var(--safe-right) + 9px);bottom:calc(var(--safe-bottom) + 8px);max-width:760px;color:#142b54}
#chat-dock[hidden]{display:none}
#chat-expand{display:block;margin:0 auto -1px;width:124px;min-height:22px;height:22px;padding:0;background:none;border:0;border-radius:0;filter:drop-shadow(0 -1px 1px #152333)}
#chat-expand svg{width:120px;height:18px}
#chat-dock.expanded #chat-expand svg{transform:rotate(180deg)}
.chat-shell{display:flex;gap:6px;align-items:stretch}
.chat-channels{width:39px;flex:0 0 39px;display:flex;flex-direction:column;gap:5px;justify-content:flex-end}
.chat-channels button{min-height:38px;width:38px;height:38px;padding:4px;color:#fce1a0;border:2px solid #d2a14a;border-radius:8px;background:linear-gradient(#1b529b,#082b62);box-shadow:0 0 0 1px #111c2f}
.chat-channels button svg{width:26px;height:26px}
.chat-channels button[aria-pressed=true]{color:#0e3975;background:linear-gradient(#fff3c7,#e9bd66)}
.chat-main{min-width:0;flex:1;display:flex;flex-direction:column;background:linear-gradient(130deg,#f9edcbeF,#e7d5b3f5);border:2px solid #cfa74f;border-radius:11px;box-shadow:0 0 0 1px #102744,0 4px 18px #04142570;overflow:hidden}
.chat-main header{display:flex;justify-content:space-between;align-items:center;padding:3px 9px;background:#103d7beF;color:#ffe8af;min-height:23px;line-height:17px;font-size:11px}
.chat-main header b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chat-main button{touch-action:manipulation}
#chat-recipient,#chat-latest{min-height:20px;padding:0 4px;font-size:10px;color:#fff0c6;background:none;border:0}
#chat-lines{height:calc(3 * var(--chat-line));min-height:calc(3 * var(--chat-line));overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:0 7px;scrollbar-width:thin;scrollbar-color:#b08744 #ead9b5}
.chat-line{height:var(--chat-line);line-height:var(--chat-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;user-select:text}
.chat-line.mine{color:#24532c}
.chat-line button{display:inline;min-height:0;padding:0;color:#17376e;background:none;border:0;border-radius:0;font-size:inherit;font-weight:800;line-height:inherit}
#chat-form{display:flex;gap:4px;padding:4px;border-top:1px solid #bfa567}
#chat-form input{flex:1}
#chat-form input,#chat-context input{min-width:0;padding:5px 8px;background:#fff7e3;color:#172d55;border:1px solid #c5a764;border-radius:6px;font-size:12px;min-height:29px}
#chat-send{min-height:29px;padding:2px 11px;color:#ffe4a5;background:linear-gradient(#1b579d,#073271);border:1px solid #b7923c;border-radius:6px}
#chat-error{margin:0;padding:0 8px;font-size:10px;color:#8a3021;line-height:16px;max-height:32px;overflow:auto}
#chat-error:empty{display:none}
#chat-context{padding:5px 8px;font-size:11px;max-height:180px;overflow:auto;overscroll-behavior:contain}
#chat-context[hidden],#chat-recipient[hidden],#chat-older[hidden],#chat-dock [hidden]{display:none}
#chat-context p{margin:2px 0 5px}
#chat-context form{display:flex;gap:4px;margin-bottom:5px}
#chat-context button,#chat-older{min-height:26px;padding:3px 8px;color:#f8e4ae;background:#15447e;border:1px solid #b19145;border-radius:6px;font-size:11px}
#chat-context>button{margin:2px 5px}
.peer-results,.clan-results{display:flex;flex-wrap:wrap;gap:4px}
#chat-dock.expanded{height:50dvh;max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px)}
#chat-dock.expanded .chat-shell{height:calc(100% - 22px)}
#chat-dock.expanded #chat-lines{flex:1;height:auto;min-height:0}
#chat-dock.expanded .chat-line{height:auto;min-height:var(--chat-line);white-space:pre-wrap;overflow-wrap:anywhere}
#chat-dock.expanded .chat-channels{justify-content:flex-start}
#chat-dock.expanded #chat-form input{font-size:16px;min-height:38px}
body:has(#chat-dock:not([hidden])) #toast{bottom:calc(var(--safe-bottom) + var(--chat-offset,194px))}
body:has(#chat-dock:not([hidden])) .city-guard-status{bottom:calc(var(--safe-bottom) + var(--chat-offset,194px))}
body:has(#chat-dock.expanded:not([hidden])) #toast{bottom:calc(var(--safe-bottom) + var(--chat-offset,calc(50dvh + 16px)))}

.inbox-identity{margin:0 0 12px;text-align:center;font-weight:800;color:#17365f;user-select:text}
.inbox-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.inbox-tabs button{min-width:0;min-height:42px;padding:8px 3px;color:#ffe6ab;background:linear-gradient(#1a589e,#07326b);border:2px solid #cca24e;font-weight:800}
.inbox-tabs [aria-selected=true]{color:#152d58;background:linear-gradient(#fff3ba,#e7b346)}
.inbox-tools{display:flex;gap:8px;justify-content:space-between;margin:12px 0}
.inbox-tools button,[data-more-inbox]{color:#153b73;background:#f8e2a7;border:1px solid #b58f44;min-height:36px;padding:6px 10px;font-size:12px}
.inbox-list{min-height:180px;max-height:55dvh;overflow-y:auto;overscroll-behavior:contain;color:#1a3055}
.inbox-entry{margin:8px 0;padding:10px;background:#fff8e6;border:1px solid #ddc89e;border-radius:9px}
.inbox-entry.unread{border-left:4px solid #1884cc}
.inbox-entry-title{display:block;padding:0;min-height:28px;text-align:left;font-size:15px;font-weight:800;color:#103a75;background:none;border:0}
.inbox-entry time{font-size:10px;color:#63708a}
.inbox-entry p{font-size:13px;line-height:1.5;margin:7px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.inbox-error{color:#9b321c;font-size:12px}
[data-more-inbox][hidden]{display:none}

/* Compact map occupies about a quarter of a phone screen. */
#modal[data-presentation="minimap"]{align-items:flex-start;justify-content:flex-start;padding:calc(var(--safe-top) + var(--hud-height) + var(--city-row) + 5px) 12px 0;background:#03132a22}
#modal[data-presentation="minimap"] #modal-card{width:min(560px,calc(100vw - 24px));height:25dvh;max-height:50dvh;margin:0;padding:0;background:transparent;border:0;overflow:hidden}
#modal[data-presentation="minimap"] .royal-panel{height:100%;display:flex;flex-direction:column;min-height:0;border-width:3px;border-radius:12px}
#modal[data-presentation="minimap"] .royal-heading{min-height:30px;padding:3px 8px}
#modal[data-presentation="minimap"] h2{font-size:15px;margin:0}
#modal[data-presentation="minimap"] .royal-icon{width:25px;min-height:25px;height:25px;padding:3px}
#modal[data-presentation="minimap"] .royal-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:3px;overflow:hidden}
#modal[data-presentation="minimap"] .realm-toolbar{padding:0 0 3px;gap:4px;margin:0;display:flex;flex:none}
#modal[data-presentation="minimap"] .realm-toolbar button{min-height:22px;padding:2px 8px;font-size:10px}
#modal[data-presentation="minimap"] #realm-canvas{width:100%;height:0;min-height:0;flex:1;border-radius:5px}
#modal[data-presentation="minimap"] #map-coordinate-form,#modal[data-presentation="minimap"] .royal-note,#modal[data-presentation="minimap"] .realm-legend,#modal[data-presentation="minimap"] .royal-body>.wide{display:none}

/* Reserve actual dock height for scrollable menus and combat/build buttons. */
body:has(#chat-dock:not([hidden])) #view-content{padding-bottom:var(--chat-offset,194px)}
body:has(#chat-dock:not([hidden])) #drawer,body:has(#chat-dock:not([hidden])) .battle-controls{bottom:calc(var(--safe-bottom) + var(--chat-offset,194px))}

/* 0.26: arrow only → three rows → one third of the screen → arrow only. */
#chat-dock{left:var(--safe-left);right:var(--safe-right);bottom:var(--safe-bottom);max-width:none;--dock-body:151px;height:calc(var(--dock-body) + 22px);transition:height .28s ease}
#chat-dock .chat-shell{height:var(--dock-body);display:flex;gap:0;overflow:hidden;background:linear-gradient(130deg,#f9edcbf5,#e7d5b3fa);border:2px solid #cfa74f;border-radius:12px 12px 0 0;box-shadow:0 0 0 1px #102744;transition:transform .28s ease,visibility .28s}
#chat-dock .chat-main{border:0;border-left:1px solid #cfa74f;border-radius:0;box-shadow:none;flex:1;background:none}
#chat-dock .chat-channels{width:41px;flex:0 0 41px;padding:4px;gap:3px;justify-content:flex-start;background:#12396b}
#chat-dock .chat-channels button{width:32px;height:32px;min-height:32px;border-radius:6px}
#chat-dock[data-stage=hidden]{height:22px}
#chat-dock[data-stage=hidden] .chat-shell{visibility:hidden;transform:translateY(100%);pointer-events:none}
#chat-dock[data-stage=compact]{--dock-body:151px}
#chat-dock[data-stage=expanded]{height:33.333dvh;--dock-body:calc(33.333dvh - 22px)}
#chat-dock.expanded .chat-shell{height:var(--dock-body)}
#chat-dock #chat-expand{transform:none}
#chat-dock[data-stage=expanded] #chat-expand svg{transform:rotate(180deg)}
#chat-dock[data-stage=hidden] #chat-expand svg,#chat-dock[data-stage=compact] #chat-expand svg{transform:none}
#chat-dock[data-stage=compact] #chat-lines{flex:none;height:calc(3 * var(--chat-line));min-height:calc(3 * var(--chat-line))}
@media(prefers-reduced-motion:reduce){#chat-dock,#chat-dock .chat-shell{transition:none}}
.gift-form{display:grid;gap:12px}.gift-form input,.clan-dialog input{width:100%;padding:12px;background:#fff6dc;color:#143266;border:2px solid #bf954a;border-radius:9px}.gift-result{white-space:pre-wrap;overflow-wrap:anywhere;color:#15375c}.gift-result.error{color:#992d27}.clan-dialog form{display:grid;gap:8px;margin:12px 0}.clan-dialog .clan-results{display:grid;gap:7px}

.city-guard-status{max-width:calc(100% - 28px)}
.city-guard-status>span{display:block;font-size:12px}
.city-guard-status>div{display:flex;gap:8px;justify-content:center;margin-top:5px}
.city-guard-status button{font-size:11px;padding:4px 8px;color:#ffedb1;border:1px solid #d7b563;border-radius:6px;background:linear-gradient(#2462a0,#113767);min-height:28px}
@media(prefers-reduced-motion:reduce){.city-guard-status{transition:none}}