.chat-wrapper { max-width: 1000px; margin: 0 auto; padding: 1rem; margin-top: 80px; margin-bottom: 100px; }
.chat-auth { max-width: 400px; margin: 0 auto; padding: 2rem; background: var(--card-bg, #1a1a2e); border-radius: 8px; }
.chat-auth h2 { margin-bottom: 1rem; text-align: center; }
.chat-auth .tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.chat-auth .tab { flex: 1; padding: 0.5rem; background: transparent; border: 1px solid var(--border, #333); cursor: pointer; border-radius: 4px; color: inherit; }
.chat-auth .tab.active { background: var(--primary, #6366f1); border-color: var(--primary, #6366f1); }
.chat-auth .tab-content { display: none; }
.chat-auth .tab-content.active { display: block; }
.chat-auth input { width: 100%; padding: 0.75rem; margin-bottom: 0.75rem; border: 1px solid var(--border, #333); border-radius: 4px; background: var(--input-bg, #0f0f1a); color: inherit; }
.chat-auth .error { color: #ef4444; margin-top: 0.5rem; }

.chat-container { display: flex; height: calc(100vh - 250px); min-height: 400px; background: var(--card-bg, #1a1a2e); border-radius: 8px; overflow: hidden; }
.chat-sidebar { width: 200px; background: var(--sidebar-bg, #0f0f1a); padding: 1rem; border-right: 1px solid var(--border, #333); display: flex; flex-direction: column; }
.chat-user-info { padding-bottom: 1rem; border-bottom: 1px solid var(--border, #333); margin-bottom: 1rem; }
.chat-user-info .username { font-weight: bold; }
.badge-op { background: #f59e0b; color: #000; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; margin-left: 0.5rem; }
.chat-rooms, .chat-users { margin-bottom: 1rem; }
.chat-rooms h4, .chat-users h4 { font-size: 0.8rem; color: var(--muted, #888); margin-bottom: 0.5rem; }
.room-btn { display: block; width: 100%; padding: 0.5rem; margin-bottom: 0.25rem; background: transparent; border: none; text-align: left; cursor: pointer; border-radius: 4px; color: inherit; }
.room-btn:hover, .room-btn.active { background: var(--primary, #6366f1); }
#online-users { list-style: none; padding: 0; margin: 0; max-height: 200px; overflow-y: auto; }
#online-users li { padding: 0.3rem 0; cursor: pointer; font-size: 0.9rem; }
#online-users li:hover { color: var(--primary, #6366f1); }
#online-users .op { color: #f59e0b; }

.chat-main { flex: 1; display: flex; flex-direction: column; }
.chat-header { padding: 1rem; border-bottom: 1px solid var(--border, #333); }
.chat-header #current-room { font-weight: bold; }
.room-topic { color: var(--muted, #888); font-size: 0.85rem; margin-left: 1rem; }
.chat-messages { flex: 1; overflow-y: auto; padding: 1rem; }
.chat-message { margin-bottom: 0.75rem; }
.chat-message .meta { font-size: 0.8rem; color: var(--muted, #888); }
.chat-message .meta .author { font-weight: bold; color: var(--text, #fff); cursor: pointer; }
.chat-message .meta .author.op { color: #f59e0b; }
.chat-message .meta .author.admin { color: #ef4444; }
.chat-message .text { margin-top: 0.2rem; word-wrap: break-word; }
.chat-message .actions { display: none; font-size: 0.75rem; }
.chat-message:hover .actions { display: inline; }
.chat-message .actions button { background: none; border: none; color: #ef4444; cursor: pointer; margin-left: 0.5rem; }

.chat-input { display: flex; padding: 1rem; border-top: 1px solid var(--border, #333); gap: 0.5rem; }
.chat-input input { flex: 1; padding: 0.75rem; border: 1px solid var(--border, #333); border-radius: 4px; background: var(--input-bg, #0f0f1a); color: inherit; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; background: var(--border, #333); border: none; border-radius: 3px; cursor: pointer; color: inherit; }

@media (max-width: 768px) {
    .chat-wrapper { margin-top: 70px; margin-bottom: 90px; }
    .chat-container { flex-direction: column; height: calc(100vh - 220px); min-height: 350px; }
    .chat-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border, #333); padding: 0.5rem; }
    .chat-sidebar .chat-user-info { width: 100%; }
    .chat-rooms { display: flex; gap: 0.25rem; overflow-x: auto; width: 100%; }
    .chat-rooms h4 { display: none; }
    .chat-users { display: none; }
}