#chat-panel{position:fixed;z-index:25;left:16px;top:256px;width:338px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 272px);display:flex;flex-direction:column;padding:0 12px 10px;border:1px solid #53637a;border-radius:12px;background:#172337f5;color:#f3f6fc;font:14px/1.4 "Avenir Next",Avenir,"Segoe UI",sans-serif;pointer-events:auto;touch-action:auto}
#chat-panel[hidden]{display:none}
.chat-heading{display:flex;align-items:center;gap:8px;min-height:44px;flex:none}
#chat-title{font-size:14px;line-height:1.3;letter-spacing:0;margin:0;font-weight:750}
.chat-room-tag{font-size:10px;color:#c4d2e7;margin-left:auto}
#close-chat{width:44px;height:44px;margin-right:-8px;border:0;border-radius:8px;background:none;color:#f3f6fc;font-size:26px;cursor:pointer}
#chat-options{font-size:11px;color:#ccd8ec;flex:none}
#chat-options summary{cursor:pointer;padding:4px 0 8px;min-height:28px}
#chat-options p{margin:0 0 8px;line-height:1.4}#chat-options label{display:flex;gap:8px;align-items:center;min-height:44px}
#chat-options[open]{max-height:150px;overflow:auto}
#chat-messages{height:150px;min-height:40px;flex:1 1 auto;margin:0;padding:8px 0;background:none;border-radius:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#72829a transparent;touch-action:pan-y;user-select:text}
#chat-messages:empty::before{content:'Поздоровайтесь! Реплики появятся и над персонажами.';display:block;max-width:30ch;color:#c4d2e7;font-size:13px;padding:12px 0}
#chat-messages li{font-size:14px;line-height:1.4;margin:0 0 7px;color:#f3f6fc;overflow-wrap:anywhere;unicode-bidi:plaintext}
#chat-messages .chat-sender{display:inline;min-height:28px;padding:2px 5px 2px 0;margin:0 5px 0 0;border:0;background:none;color:#a9ceff;text-decoration:none;font-size:14px;font-weight:800;cursor:pointer;touch-action:manipulation}
#chat-messages .chat-sender::after{content:':'}.chat-sender:disabled{opacity:1;cursor:default!important}
#chat-form{display:flex;gap:6px;flex:none;padding:0;margin:6px 0 0}
#chat-input{min-width:0;flex:1;width:0;height:44px;border:1px solid #8194b2;border-radius:8px;padding:0 10px;background:#f4f7fc;color:#16243a;font-size:16px;outline-offset:2px;user-select:text;touch-action:auto}
#chat-input::placeholder{color:#52627a;opacity:1;font-size:13px}
#chat-form #chat-send{width:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:8px;background:#b8d4ff;color:#102641;font-size:25px;font-weight:800;cursor:pointer}
#chat-form #chat-send:disabled{background:#43536a;color:#c0cee0;cursor:default}
.chat-footer{display:flex;justify-content:space-between;gap:8px;color:#c4d2e7;font-size:10px;padding-top:6px;flex:none}
#chat-count{font-variant-numeric:tabular-nums}
#chat-feedback{color:#ffd1bf;font-size:12px;line-height:1.4;margin:6px 0 0;min-height:0;flex:none}
#chat-feedback:empty{display:none}
#chat-latest{flex:none;align-self:center;min-height:32px;padding:4px 12px;border:1px solid #8194b2;border-radius:8px;background:#263b59;color:#fff;font-size:12px;cursor:pointer}
#chat-latest[hidden]{display:none}
#chat-panel :focus-visible,#open-chat:focus-visible{outline:2px solid #9bc5ff;outline-offset:2px}
#open-chat{display:flex;align-items:center;justify-content:center;gap:9px}#open-chat kbd{font-size:11px;border:1px solid #a4b3c8;border-radius:4px;padding:1px 5px}
.chat-visible .controls-hint{visibility:hidden}
.portrait-blocked #chat-panel{visibility:hidden}
@media(hover:hover){#close-chat:hover,.chat-sender:not(:disabled):hover{background:#314563}#chat-form #chat-send:not(:disabled):hover{background:#d1e3ff}}
.mobile-layout .hud #open-chat{display:flex!important;top:168px;right:var(--safe-right);min-height:44px;min-width:68px;background:#172a42;color:#fff;border-color:#708299;font-size:12px}
.mobile-layout #chat-panel{left:auto;right:calc(var(--safe-right) + 100px);top:64px;width:min(320px,47vw);max-height:calc(var(--chat-vh,100dvh) - 78px);padding-bottom:8px}
.mobile-layout #chat-messages{height:120px;font-size:13px}.mobile-layout .chat-footer>span:first-child{font-size:0}.mobile-layout .chat-footer>span:first-child::after{content:'Сообщения видны всей комнате';font-size:10px}
.mobile-layout #chat-options summary{min-height:44px}.mobile-layout #chat-messages .chat-sender{min-height:44px}.mobile-layout #chat-latest{min-height:44px}
.mobile-layout #chat-panel.keyboard-open{top:calc(var(--chat-vtop,0px) + 4px);right:12px;width:min(430px,calc(100vw - 24px));max-height:calc(var(--chat-vh,100dvh) - 8px)}
.mobile-layout #chat-panel.keyboard-open #chat-options,.mobile-layout #chat-panel.keyboard-open .chat-footer{display:none}
.mobile-layout #chat-panel.keyboard-open #chat-messages{min-height:0;height:70px}
@media(max-height:620px) and (pointer:fine){#chat-panel{top:230px;max-height:calc(100dvh - 242px)}}

/* Speech is a single 44px touch target in the chat header. */
#chat-speech-toggle{min-height:44px;flex:none;padding:6px 9px;border:1px solid #708299;border-radius:8px;background:#273b56;color:#f3f6fc;font-family:inherit;font-size:11px;font-weight:600;line-height:1.2;cursor:pointer;touch-action:manipulation;margin-left:auto}
#chat-speech-toggle[aria-pressed="true"]{background:#b8d4ff;color:#102641;border-color:#b8d4ff}
#chat-speech-toggle:disabled{opacity:.55;cursor:default}
.chat-room-tag{display:none}
#chat-speech-volume{min-width:0;flex:1;width:110px;accent-color:#b8d4ff}
#chat-speech-volume-value{min-width:34px;font-variant-numeric:tabular-nums}
#chat-options #chat-speech-status{color:#c4dfff}