#chat { position: absolute; right: 24px; top: 134px; width: min(288px, calc(100vw - 48px)); color: #d6ccb5; font: 18px/1.15 'Street Terminal', monospace; pointer-events: none; }
#chat nav { display: none; gap: 6px; }
#chat.open { pointer-events: auto; padding: 8px; box-sizing: border-box; background: #12150df5; border: 1px solid #77705a70; z-index: 8; }
#chat.open nav { display: flex; }
#chat:not(.open) .chat-log { pointer-events: none; user-select: none; }
#chat button { padding: 5px 10px; background: #191c16e8; border: 1px solid #77705a70; color: #b6ac93; font: inherit; }
#chat button[aria-pressed="true"] { color: #f0dfb4; border-bottom-color: #bba16e; }
#chat nav > button:last-child { margin-left: auto; visibility: hidden; }
#chat.open nav > button:last-child { visibility: visible; }
#chat .chat-log { max-height: 72px; overflow: hidden; overflow-wrap: anywhere; opacity: 0; background: linear-gradient(90deg, #12150d20, #12150db8); transition: opacity .2s; }
#chat.recent .chat-log, #chat.open .chat-log { opacity: 1; }
#chat.open .chat-log { max-height: min(220px, 28vh); overflow-y: auto; }
#chat .chat-log > div { padding: 3px 9px; }
#chat strong { color: #dbc58e; font-weight: 400; }
#chat .chat-system { color: #c8a07b; }
#chat form { display: flex; gap: 4px; margin-top: 4px; }
#chat form[hidden] { display: none; }
#chat input { flex: 1; width: 0; padding: 7px 9px; font: inherit; }
#chat :focus-visible { outline: 2px solid #dbc58e; outline-offset: 1px; }
body.intro-playing #chat, body.dialog-open #chat { display: none; }
@media (max-width: 600px) { #chat { right: 12px; top: 94px; } }
@media (max-height: 600px) { #chat:not(.open) .chat-log { display: none; } #chat.open .chat-log { max-height: 100px; } }