#chat-toggle {position:fixed;z-index:12;left:20px;top:148px;display:flex;align-items:center;justify-content:center;gap:5px;min-width:48px;min-height:44px;padding:7px 12px;border:1px solid #e3eee344;border-radius:14px;background:#17343cd9;color:#f4f5ed;font-size:12px;touch-action:manipulation}
#chat-toggle svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.ride-ui #ride-motion-buttons #chat-toggle {position:relative;inset:auto;z-index:auto}
#channel-chat {--chat-side:max(12px,env(safe-area-inset-left),env(safe-area-inset-right));position:fixed;z-index:45;left:20px;top:200px;width:min(440px,calc(100vw - 40px));max-height:min(480px,54dvh,calc(100dvh - 220px));display:flex;flex-direction:column;gap:8px;padding:12px;box-sizing:border-box;border:1px solid #e3eee344;border-radius:18px;background:#132d36f0;color:#f4f5ed;box-shadow:0 10px 35px #0003;touch-action:pan-y}
#channel-chat[hidden] {display:none}
.chat-header {display:flex;align-items:center;gap:8px;flex:none}
.chat-header strong {margin-right:auto;font-size:13px}
#channel-chat button {min-height:36px;padding:6px 10px;background:#ffffff0c;border:1px solid #e3eee32b;border-radius:10px;color:inherit;font-size:11px;touch-action:manipulation}
.chat-log {min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1;user-select:text;-webkit-user-select:text}
.chat-log p {margin:0;padding:4px 0;font-size:13px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.chat-log p + p {border-top:1px solid #e3eee312}
#channel-chat .chat-name {display:inline;min-height:0;padding:1px 5px;margin:0 6px 0 0;border:0;background:#bce4c513;color:#d7edcb;font-size:inherit;font-weight:600;max-width:100%;vertical-align:baseline}
.chat-name:disabled {opacity:1}
.chat-status {margin:0;font-size:10px;line-height:1.5;color:#b9cdc5;flex:none}
#channel-chat form {display:flex;gap:6px;flex:none}
#channel-chat input {box-sizing:border-box;min-width:0;width:100%;height:44px;padding:0 10px;border:1px solid #e3eee330;border-radius:11px;background:#081c2570;color:#fff;font-size:16px;touch-action:manipulation;user-select:text;-webkit-user-select:text}
#channel-chat form button {min-height:44px;flex:none}
#channel-chat .chat-input-close {display:none}
#channel-chat :focus-visible,#chat-toggle:focus-visible {outline:2px solid #d2e6b8;outline-offset:2px}
body.ride-ui #channel-chat {top:auto;bottom:calc(var(--safe,16px) + 128px);max-height:min(430px,49dvh,calc(100dvh - var(--safe,16px) - 224px))}
body.ride-ui .chat-status {display:none}
body.chat-open #help {visibility:hidden}
body.photo-mode :is(#chat-toggle,#channel-chat),body.map-open :is(#chat-toggle,#channel-chat) {display:none!important}

@media(max-width:700px),(pointer:coarse) {
 #chat-toggle {left:max(12px,env(safe-area-inset-left));top:154px;padding:7px 10px}
 #channel-chat {left:var(--chat-side);top:204px;max-height:min(380px,48dvh,calc(100dvh - var(--safe,12px) - 324px));width:min(400px,calc(100vw - var(--chat-side)*2));padding:8px;gap:6px}
 #channel-chat .chat-header button {min-height:40px}
}
body.hud-mobile:not(.ride-ui) .chat-status {display:none}
body.hud-mobile.chat-open:not(.ride-ui) :is(#boarding-prompt,#refreshment-pocket),
body.hud-mobile.chat-open #message:not([data-kind=operation]) {visibility:hidden;pointer-events:none}
body.hud-mobile:where(:not(.ride-ui,.hud-landscape)) #channel-chat {
 top:calc(env(safe-area-inset-top,0px) + 106px);
 max-height:min(380px,48dvh,calc(100dvh - var(--safe,12px) - env(safe-area-inset-top,0px) - 352px));
}
@media(max-width:359px) {
 .chat-log p {padding-block:2px}
}
/* Use the HUD's stable orientation, not the keyboard's short visible height. */
body.ride-ui.hud-mobile #channel-chat {
 --chat-left:max(var(--chat-side),var(--ride-left-clear,64px));
 --chat-right:max(var(--chat-side),var(--ride-right-clear,64px));
 --chat-gap:calc(100vw - var(--chat-left) - var(--chat-right));
 --chat-ride-bottom:calc(var(--safe,12px) + 140px);
 left:calc(var(--chat-left) + var(--chat-gap)/2);top:auto;bottom:var(--chat-ride-bottom);transform:translateX(-50%);
 width:min(400px,var(--chat-gap));max-height:min(360px,44dvh,calc(100dvh - var(--chat-ride-bottom) - 134px));border-radius:14px;
}
body.ride-ui.hud-mobile:is(:not(.driving),.autodriving) #channel-chat {--chat-ride-bottom:calc(var(--safe,12px) + 14px)}
/* If there's room below the cockpit buttons, use the full width there. */
body.ride-ui.hud-mobile:where(.cockpit-compact.chat-below-ride-actions:not(.hud-landscape)) #channel-chat {
 left:50%;width:min(400px,calc(100vw - var(--chat-side)*2));
 max-height:min(360px,44dvh,calc(100dvh - var(--chat-ride-bottom) - max(134px,var(--ride-actions-end,340px) + 8px)));
}
body.hud-landscape:not(.ride-ui) #channel-chat {top:auto;bottom:var(--safe,12px);left:calc(var(--hud-left,12px) + 104px);max-height:min(245px,calc(100dvh - var(--safe,12px) - 76px));width:min(390px,calc(100vw - 240px))}
body.ride-ui.hud-mobile.hud-landscape #channel-chat {
 --chat-ride-bottom:var(--safe,12px);
 width:min(390px,var(--chat-gap));max-height:min(245px,calc(100dvh - var(--safe,12px) - 76px));
}
body.ride-ui.hud-mobile.hud-landscape:where(.driving:not(.autodriving)) #channel-chat {
 --chat-left:max(var(--ride-left-clear,64px),calc(var(--hud-left,12px) + 130px));
 --chat-right:max(var(--ride-right-clear,64px),calc(var(--hud-right,12px) + 146px));
}

/* Only the chat sheet follows the software keyboard / Safari viewport pan.
   The world keeps its camera aspect and render buffer throughout typing. */
body.hud-mobile.chat-open:is(.chat-typing,.chat-keyboard) #channel-chat {
 left:var(--chat-side,12px);right:var(--chat-side,12px);top:var(--chat-sheet-top,8px);bottom:auto;transform:none;
 width:auto;height:var(--chat-sheet-height,360px);max-height:var(--chat-sheet-height,360px);padding:8px;gap:6px;
}
body:is(.chat-typing,.chat-keyboard) .chat-status {display:none}
body:is(.chat-typing,.chat-keyboard) #channel-chat .chat-input-close {display:block}
body:is(.chat-typing,.chat-keyboard) :is(#ride-vehicle-rail,#ride-motion-rail,#joystick,#pedals,#cockpit-wheel-target,.world-mini,#hud-categories,#driving-dock,#refreshment-pocket,#boarding-prompt,#help,#quick,#telemetry,#autodrive-quick,#journey-status,#ride-request,header,#message) {visibility:hidden;pointer-events:none}
body.chat-keyboard > canvas {transform:translateY(var(--chat-visible-top,0px))}
body:is(.chat-typing,.chat-keyboard).chat-tiny .chat-header {display:none}
body:is(.chat-typing,.chat-keyboard).chat-tiny .chat-log {display:none}
#channel-chat.chat-error .chat-status {display:block;color:#ffe0b0}

/* Three persistent lines, with no input hitbox or message-expiry timer. The
   full history/composer replaces this preview only when deliberately opened. */
#chat-preview {position:fixed;z-index:7;left:20px;bottom:calc(var(--safe,16px) + 160px);width:min(380px,calc(100vw - 40px));padding:5px 9px;border-radius:10px;background:linear-gradient(90deg,#0a202bd9,#0a202b70);color:#fff;text-shadow:0 1px 3px #000;pointer-events:none;user-select:none;-webkit-user-select:none}
#chat-preview p {display:flex;gap:7px;min-width:0;margin:0;font-size:11px;line-height:19px}
#chat-preview strong {flex:none;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d7edcb;font-weight:600}
#chat-preview span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ride-ui #chat-preview {bottom:calc(var(--safe,16px) + 128px)}
body.chat-preview-active #help {visibility:hidden}
body.hud-mobile:not(.ride-ui) #chat-preview {top:204px;bottom:auto;left:12px;width:min(360px,calc(100vw - 24px))}
body.ride-ui.hud-mobile #chat-preview {
 --chat-gap:calc(100vw - var(--ride-left-clear,64px) - var(--ride-right-clear,64px));
 left:calc(var(--ride-left-clear,64px) + var(--chat-gap)/2);bottom:calc(var(--safe,12px) + 126px);transform:translateX(-50%);width:min(340px,var(--chat-gap));padding:5px 7px;
}
body.ride-ui.hud-mobile:not(.driving) #chat-preview,body.ride-ui.hud-mobile.autodriving #chat-preview {bottom:var(--safe,12px)}
body.hud-landscape:not(.ride-ui) #chat-preview {top:64px;bottom:auto;left:120px;width:min(340px,calc(100vw - 260px))}
body.ride-ui.hud-mobile.hud-landscape #chat-preview {bottom:var(--safe,12px)}
@media(max-width:359px) {
 #chat-preview p {font-size:10px;gap:4px}
 #chat-preview strong {max-width:55px}
}
body:is(.chat-open,.chat-keyboard,.photo-mode,.map-open) #chat-preview {display:none!important}
body:has(#vehicle-panel:not([hidden]),#motion-panel:not([hidden]),#window-panel:not([hidden]),#destination-panel:not([hidden]),#options:not([hidden]),#garage-panel:not([hidden]),#rest-panel:not([hidden]),#profile-panel:not([hidden]),#channel-panel:not([hidden])) #chat-preview {visibility:hidden}
#lookout-hud > #chat-toggle {position:static;inset:auto;min-width:44px}
body.lookout-mode #lookout-hud > #chat-preview:not([hidden]) {
 position:static;inset:auto;transform:none;order:-1;flex:1 0 100%;box-sizing:border-box;
 width:100%;min-width:0;padding:2px 6px;background:none;
}
#lookout-hud > #chat-preview p:not(:last-child) {display:none}
body.lookout-mode:not(.chat-typing,.chat-keyboard) #channel-chat {
 inset:auto 0 var(--safe,12px);transform:none;margin-inline:auto;width:min(440px,calc(100vw - 2*var(--chat-side,12px)));
 max-height:min(380px,53dvh,calc(100dvh - var(--safe,12px) - 56px));
}