.lobby-chat { position: fixed; right: 20px; bottom: 20px; z-index: 100; width: min(380px, calc(100vw - 32px)); box-sizing: border-box; margin: 0; border: 1px solid #bdd9d2; border-top: 3px solid #148b78; border-radius: 8px; box-shadow: 0 8px 30px #0003; background: #f5fbfa; color: #1c3431; padding: 16px; max-height: calc(100dvh - 40px); overflow: auto; }
.lobby-chat.collapsed { width: auto; padding: 0; border: 0; overflow: visible; }
.lobby-chat.collapsed h2 { display: none; }
.lobby-chat.collapsed header button { min-width: 120px; min-height: 48px; padding: 10px 18px; }
.lobby-chat-body[hidden] { display: none; }
.lobby-chat header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lobby-chat h2 { margin: 0; font-size: 22px; }
.lobby-chat header button { background: #147c6b; color: white; min-height: 40px; }
.lobby-chat-log { height: min(180px, 30dvh); overflow-y: auto; margin: 10px 0; }
.lobby-chat header button { position: relative; }
.lobby-chat-badge { position: absolute; right: -5px; top: -7px; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; border-radius: 50%; background: #c9364b; color: #fff; font-size: 11px; line-height: 20px; text-align: center; border: 1px solid #fff; }
.lobby-chat-badge[hidden] { display: none; }
.lobby-chat-message { display: flex; gap: 10px; border-bottom: 1px solid #d5e5e1; padding: 10px 0; }
.lobby-chat-message img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lobby-chat-message div { min-width: 0; flex: 1; }
.lobby-chat-message p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 5px 0; }
.lobby-chat-message small { margin-left: 10px; color: #59736d; }
.lobby-chat form { display: flex; align-items: stretch; gap: 8px; }
.lobby-chat textarea { min-width: 0; flex: 1; min-height: 48px; max-height: 150px; }
.lobby-chat button { border-radius: 6px; }
.lobby-chat-message button { padding: 4px 8px; font-size: 12px; }
.lobby-chat-status { font-size: 13px; min-height: 18px; }
@media(max-width: 600px) { .lobby-chat { right: 12px; bottom: 12px; padding: 12px; } .lobby-chat.collapsed { padding: 0; } .lobby-chat h2 { font-size: 18px; } .lobby-chat-log { height: min(220px, 35dvh); } }