/* One purpose-built image border; all content and interaction remain native. */
#game #bottom-bar{grid-template-rows:minmax(0,1fr)}
#game #bottom-bar #chat{--chat-type-scale:var(--inverse-ui-scale,1);position:relative;inset:auto;align-self:end;display:flex;flex-direction:column;justify-content:initial;gap:3px;height:100%;min-height:0;padding:5px 8px;overflow:hidden;border:0;background:#0d1411e8;box-shadow:0 2px 10px #0004;isolation:isolate;pointer-events:auto;text-shadow:none}
#game #bottom-bar #chat::before{content:'';position:absolute;inset:0;z-index:-1;border:10px solid transparent;border-image:url('../public/assets/chat-frame-v1.webp') 100 / 10px / 0 stretch;pointer-events:none}
#game #bottom-bar #chat[data-expanded=true]{height:min(320px,calc(100cqh - 150px))}
#chat .chat-header{display:flex;align-items:center;gap:5px;flex:none;height:21px;min-height:0;margin:0;padding:0;border:0}
#chat .chat-tabs{display:flex;gap:2px;flex:1;min-width:0;align-self:stretch}
#chat .chat-tab{flex:0 1 auto;min-width:32px;min-height:0;height:100%;margin:0;padding:0 8px;border:0;border-bottom:1px solid transparent;border-radius:0;background:none!important;box-shadow:none;font:calc(12px * var(--chat-type-scale))/1.2 system-ui;color:#a8b2a7;white-space:nowrap;text-shadow:none}
#chat .chat-tab[aria-selected=true]{border-bottom-color:#c5b480;color:#eee5ce;background:#b3a27612!important}
#chat .chat-tab:hover{color:#fff3d6;background:#d8c5a316!important}
#chat .chat-tab[data-chat-view=party]{color:#c49aff}
#chat .chat-tab[data-chat-view=guild]{color:#ffa652}
#chat .chat-tab[data-chat-view=whisper]{color:#83e6a1}
#chat #chat-expand{flex:none;width:22px;min-width:22px;height:22px;min-height:0;margin:0;padding:3px;border:1px solid #71695277;border-radius:0;background:#0e1510!important;color:#c3baa3;box-shadow:none}
#chat-expand svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5}
#chat[data-expanded=true] #chat-expand svg{transform:rotate(180deg)}
#game #bottom-bar #chat #chat-log{flex:1;min-height:0;height:auto;max-height:none;padding:2px 3px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:none;font:calc(12px * var(--chat-type-scale))/1.5 system-ui;color:#e3e5db;text-shadow:0 1px #000}
#game #bottom-bar #chat #chat-log{overflow-anchor:none}
#game #bottom-bar #chat #chat-log.game-scroll-host{padding-right:14px}
#chat-log .chat-line{--chat-message:#dce1d7;min-width:0;word-break:break-word;overflow-wrap:anywhere;padding:1px 0;color:var(--chat-message)}
#chat-log .chat-line[data-channel=world]{--chat-message:#e7d6a1}
#chat-log .chat-line[data-channel=party]{--chat-message:#c49aff}
#chat-log .chat-line[data-channel=guild]{--chat-message:#ffa652}
#chat-log .chat-line[data-channel=whisper]{--chat-message:#83e6a1}
#chat-log .chat-tag{display:inline;margin-right:6px;color:inherit;font-size:.9em;opacity:.85}
#chat-log .chat-sender{display:inline;margin-right:3px;font-weight:600;color:inherit;cursor:pointer}
#chat-log .chat-sender:hover{text-decoration:underline}
#chat-log .chat-sender:focus-visible{outline:1px solid #d1bd8b;outline-offset:1px}
#chat-log .chat-message{color:inherit;white-space:pre-wrap}
#game #bottom-bar #chat #chat-form{display:flex;align-items:center;gap:0;flex:none;min-height:30px;margin:0;padding:0;border:1px solid #68654f99;background:#080e0ce8!important;box-shadow:inset 0 1px #0005}
#game #bottom-bar #chat .chat-channel-row{display:flex;align-items:center;gap:0;flex:none;height:28px;min-height:0;padding:0 5px;border-right:1px solid #6f69534d}
#chat .chat-channel-row>label{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
#game #bottom-bar #chat #chat-channel{width:74px;max-width:none;min-width:0;height:26px;min-height:0;margin:0;padding:0 2px;border:0;border-radius:0;background:#0b120e;color:#e1d3ae;font:calc(12px * var(--chat-type-scale))/1.3 system-ui;cursor:pointer}
#game #bottom-bar #chat #chat-input{flex:1;width:0;min-width:0;height:28px;min-height:0;padding:0 8px;border:0;border-radius:0;background:none;outline:none;box-shadow:none;color:#f1ede3;font:calc(13px * var(--chat-type-scale))/1.4 system-ui;user-select:text}
#game #bottom-bar #chat #chat-input::placeholder{color:#939f92!important;font:calc(12px * var(--chat-type-scale))/1.4 system-ui}
#game #bottom-bar #chat #chat-form:focus-within{border-color:#ad9c70}
#game #bottom-bar #chat #chat-form>button{width:34px;min-width:34px;height:28px;min-height:0;margin:0;padding:0;border:0;border-left:1px solid #6f69534d;border-radius:0;background:#a39a7412!important;box-shadow:none;font:16px/1 system-ui;color:#d9c995}
#game #bottom-bar #chat #whisper-target{flex:none;width:100%;max-width:none;min-width:0;height:27px;min-height:0;margin:0;padding:0 8px;border:1px solid #56866777;border-radius:0;background:#0a130fdc;font:calc(12px * var(--chat-type-scale))/1.4 system-ui;color:#83e6a1}
#chat[data-send-channel=party] #chat-channel{color:#c49aff!important}
#chat[data-send-channel=guild] #chat-channel{color:#ffa652!important}
#chat[data-send-channel=whisper] #chat-channel{color:#83e6a1!important}
#chat #chat-latest{position:absolute;right:14px;bottom:44px;min-width:0;min-height:24px;padding:3px 8px;border:1px solid #a5986e;border-radius:0;background:#22271cf2!important;box-shadow:0 2px 4px #0006;color:#edddb6;font:12px/1.2 system-ui;text-shadow:none}

/* The mobile chat remains above the saved single-row slots; no chat toggle. */
.gamepad #game #bottom-bar #chat{--chat-type-scale:1;position:absolute;align-self:auto;gap:3px;height:clamp(104px,calc(110 * var(--mobile-unit)),124px);padding:6px 8px;background:#0b120fe0}
.gamepad #game #bottom-bar #chat .chat-header{height:20px;gap:2px}
.gamepad #game #bottom-bar #chat .chat-tabs{gap:0}
.gamepad #game #bottom-bar #chat .chat-tab{flex:1;min-width:0;padding:0 2px;font-size:11px}
.gamepad #game #bottom-bar #chat #chat-expand{width:20px;min-width:20px;height:20px;padding:2px}
.gamepad #game #bottom-bar #chat #chat-log{padding:2px 1px;font-size:12px;line-height:1.4;min-height:18px}
.gamepad #game #bottom-bar #chat .chat-channel-row{height:26px;padding:0 2px}
.gamepad #game #bottom-bar #chat #chat-channel{width:80px;height:26px}
.gamepad #game #bottom-bar #chat #chat-form{min-height:28px}
.gamepad #game #bottom-bar #chat #chat-input{height:26px;font-size:16px;padding:0 5px}
.gamepad #game #bottom-bar #chat #chat-input::placeholder{font-size:13px}
.gamepad #game #bottom-bar #chat #chat-form>button{height:26px;width:28px;min-width:28px}
.gamepad #game #bottom-bar #chat #whisper-target{height:28px;font-size:16px}
.gamepad #game #bottom-bar #chat[data-send-channel=whisper]{height:clamp(134px,calc(140 * var(--mobile-unit)),154px)}
.gamepad #game #bottom-bar #chat[data-expanded=true]{height:min(190px,calc(var(--screen-height) - 90px))}
.gamepad #game #bottom-bar #chat:focus-within{bottom:calc(8px + env(safe-area-inset-bottom));height:clamp(100px,calc(var(--screen-height) - var(--keyboard-shift,0px) * var(--ui-scale) - 24px),180px);background:#0b120ff5}
.gamepad #game #bottom-bar #chat #chat-latest{bottom:41px;font-size:11px;min-height:22px}
@media(max-width:680px){
 .gamepad #game #bottom-bar #chat .chat-tab{font-size:10px;padding:0 1px}
 .gamepad #game #bottom-bar #chat #chat-log{font-size:11px}
 .gamepad #game #bottom-bar #chat #chat-channel{width:76px}
}

/* In-game sender picker; no native OS dropdown or baked-in text. */
#game #bottom-bar #chat[data-channel-open=true]{overflow:visible;z-index:15}
#chat .chat-channel-row{position:relative}
#chat :is(#chat-channel-toggle,#chat-channel-menu button){--channel-color:#d1d8ca}
#chat :is(#chat-channel-toggle,#chat-channel-menu button)[data-channel=world]{--channel-color:#e7d6a1}
#chat :is(#chat-channel-toggle,#chat-channel-menu button)[data-channel=party]{--channel-color:#c49aff}
#chat :is(#chat-channel-toggle,#chat-channel-menu button)[data-channel=guild]{--channel-color:#ffa652}
#chat :is(#chat-channel-toggle,#chat-channel-menu button)[data-channel=whisper]{--channel-color:#83e6a1}
#game #bottom-bar #chat #chat-channel-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:70px;min-width:70px;height:26px;min-height:0;margin:0;padding:0 5px;border:0;border-radius:0;background:transparent!important;box-shadow:none;color:var(--channel-color);font:500 calc(12px * var(--chat-type-scale))/1.3 system-ui;white-space:nowrap}
#chat #chat-channel-toggle svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;opacity:.65;transition:transform .13s}
#chat #chat-channel-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
#chat #chat-channel-toggle:hover{background:#b5a47510!important}
#game #bottom-bar #chat #chat-channel-menu{position:absolute;bottom:calc(100% + 7px);left:0;width:154px;padding:5px;z-index:20;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border:1px solid #71694d;border-radius:2px;background:#101812fa;box-shadow:0 5px 16px #0009,inset 0 0 0 2px #b7a37210;animation:chat-channel-in .12s ease-out;font:calc(12px * var(--chat-type-scale))/1.3 system-ui}
#game #bottom-bar #chat #chat-channel-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0;height:30px;min-height:30px;margin:0;padding:0 10px;border:0;border-left:2px solid transparent;border-radius:0;background:transparent!important;box-shadow:none;color:var(--channel-color);font:inherit;text-align:left;text-shadow:none}
#chat #chat-channel-menu button+button{border-top:1px solid #b2a47a15}
#chat #chat-channel-menu button>span:last-child{visibility:hidden;font-size:12px}
#game #bottom-bar #chat #chat-channel-menu button[aria-selected=true]{border-left-color:var(--channel-color);background:#b8ad7f16!important}
#chat #chat-channel-menu button[aria-selected=true]>span:last-child{visibility:visible}
#game #bottom-bar #chat #chat-channel-menu button:hover,#game #bottom-bar #chat #chat-channel-menu button:focus-visible{background:#b8ad7f22!important;outline:1px solid #b8ad7f66;outline-offset:-1px}
.gamepad #game #bottom-bar #chat #chat-channel-toggle{width:72px;min-width:72px;height:26px;font-size:13px}
.gamepad #game #bottom-bar #chat #chat-channel-menu{width:154px;font-size:13px}
.gamepad #game #bottom-bar #chat #chat-channel-menu button{height:34px;min-height:34px}
@keyframes chat-channel-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#chat #chat-channel-menu{animation:none}#chat #chat-channel-toggle svg{transition:none}}

/* Folded phones show one latest-message row, not an idle typing panel. */
#chat #chat-preview{display:none}
.gamepad #game #bottom-bar #chat:not([data-expanded=true]):not([data-typing=true]){display:grid;grid-template-columns:minmax(0,1fr) 30px;grid-template-rows:minmax(0,1fr);align-items:stretch;height:32px;gap:0;padding:3px 6px;background:#0b120fc9}
.gamepad #game #bottom-bar #chat:not([data-expanded=true]):not([data-typing=true]) :is(#chat-log,#chat-form,#whisper-target,#chat-latest,.chat-tabs){display:none!important}
.gamepad #game #bottom-bar #chat:not([data-expanded=true]):not([data-typing=true]) .chat-header{position:static;grid-column:2;grid-row:1;height:auto;min-height:0;align-items:stretch;margin-left:4px;border-left:1px solid #71695266}
.gamepad #game #bottom-bar #chat:not([data-expanded=true]):not([data-typing=true]) #chat-expand{display:grid;place-items:center;width:100%;min-width:0;height:100%;min-height:0;padding:3px;border:0;background:transparent!important;box-shadow:none}
.gamepad #game #bottom-bar #chat:not([data-expanded=true]):not([data-typing=true]) #chat-expand svg{width:14px;height:14px}
.gamepad #game #bottom-bar #chat:not([data-expanded=true]):not([data-typing=true]) #chat-preview{display:block;grid-column:1;grid-row:1;width:100%;height:100%;min-height:0;min-width:0;margin:0;padding:0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;border-radius:0;background:none!important;box-shadow:none;text-align:left;color:#dce1d7;font:12px/24px system-ui;text-shadow:0 1px #000}
.gamepad #game #bottom-bar #chat #chat-preview[data-channel=world]{color:#e7d6a1}
.gamepad #game #bottom-bar #chat #chat-preview[data-channel=party]{color:#c49aff}
.gamepad #game #bottom-bar #chat #chat-preview[data-channel=guild]{color:#ffa652}
.gamepad #game #bottom-bar #chat #chat-preview[data-channel=whisper]{color:#83e6a1}
/* Keep the contextual interaction above the folded row, not behind its hitbox. */
.gamepad #game #interact{bottom:calc((var(--touch-slots-height) + 60px) * var(--inverse-ui-scale))}

/* The collapsed desktop panel shares both edges with status and ten slots. */
body:not(.gamepad) #game #bottom-bar .vitals{height:100%;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:stretch}
body:not(.gamepad) #game #bottom-bar .vitals>div{flex:initial}
body:not(.gamepad) #game #bottom-bar #action-bar{height:100%;grid-template-rows:repeat(2,minmax(0,1fr))}
body:not(.gamepad) #game #bottom-bar #action-bar>.quick-slot{height:100%}