:root { --sidebar-w: 260px; --right-panel-w: 220px; --mobile-users-rail-w: 46px; }
body { height: 100vh; margin: 0; }
.chat-layout { display: flex; height: 100vh; overflow: hidden; }

/* Left sidebar */
#sidebar-left { width: var(--sidebar-w); min-width: var(--sidebar-w); display: flex; flex-direction: column; border-right: 1px solid var(--bs-border-color); background: var(--bs-body-bg); overflow: hidden; }
#sidebar-left .sidebar-header { padding: 12px 16px; border-bottom: 1px solid var(--bs-border-color); font-weight: 700; font-size: 1.1rem; }
#sidebar-left .sidebar-section { padding: 8px 16px 4px; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); }
.room-item { display: flex; align-items: center; padding: 6px 16px; cursor: pointer; border-radius: 0; transition: background .15s; }
.room-item:hover, .room-item.active { background: var(--bs-secondary-bg); }
.room-item .room-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.friend-item { display: flex; align-items: center; gap: 8px; padding: 4px 16px; font-size: .88rem; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.online-dot.online { background: #28a745; }
.online-dot.offline { background: #6c757d; }
#sidebar-left .sidebar-bottom { margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--bs-border-color); display: flex; align-items: center; gap: 10px; }

/* Main chat */
#chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#chat-header { padding: 10px 16px; border-bottom: 1px solid var(--bs-border-color); display: flex; align-items: center; gap: 10px; }
.chat-mobile-body { display: contents; }
#messages-container { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.mobile-users-rail { display: none; }
.msg { padding: 4px 0; }
.msg-body { min-width: 0; }
.msg-meta { font-size: .8rem; color: var(--bs-secondary-color); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.msg-username { font-weight: 600; }
.msg-content { font-size: .93rem; word-break: break-word; padding-left: 0; display: inline; }
.msg-inline-content { color: inherit; }
.msg-inline-content * { color: inherit !important; }
.msg-system { font-style: italic; color: var(--sys-msg-color-light); font-size: .82rem; padding: 2px 0; }
.msg-time { color: var(--sys-msg-color-light); font-size: .8rem; }
.msg-sep { color: var(--sys-msg-color-light); }
[data-bs-theme="dark"] .msg-system { color: var(--sys-msg-color-dark); }
[data-bs-theme="dark"] .msg-time   { color: var(--sys-msg-color-dark); }
[data-bs-theme="dark"] .msg-sep    { color: var(--sys-msg-color-dark); }
.msg-whisper-row { background: rgba(180,180,190,.35); border-radius: 4px; padding: 2px 6px; margin: 2px 0; cursor: pointer; }
[data-bs-theme="dark"] .msg-whisper-row { background: rgba(170,170,170,.13); }
.room-desc { font-size: .78rem; color: var(--bs-secondary-color); }
.msg-delete-btn { opacity: 0; font-size: .75rem; color: var(--bs-secondary-color); cursor: pointer; }
.msg:hover .msg-delete-btn { opacity: 1; }
.scroll-bottom-btn { position: absolute; bottom: 90px; right: 240px; z-index: 10; border-radius: 20px; display: none; }

/* Input area */
#input-area { flex: 0 0 auto; background: var(--bs-body-bg); padding: 0; }
.composer-dock-main { min-width: 0; border-top: 1px solid var(--bs-border-color); }
.mobile-dock-rail { display: none; border-top: 1px solid var(--bs-border-color); }
#whisper-bar { display: none; padding: 4px 10px; background: var(--bs-secondary-bg); border-radius: 6px; margin: 8px 16px 0; font-size: .85rem; }
.md-toolbar { display: flex; gap: 4px; margin: 0; padding: 6px 16px; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
.md-btn { border: 1px solid var(--bs-border-color); background: transparent; color: var(--bs-body-color); border-radius: 4px; padding: 1px 8px; font-size: .82rem; cursor: pointer; }
.md-btn:hover { background: var(--bs-secondary-bg); }
.chat-composer { display: grid; width: 100%; padding: 10px 16px; }
.chat-composer-main { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 8px; align-items: start; }
.chat-input-wrap { position: relative; min-width: 0; }
.chat-input-wrap #msg-input { min-width: 0; min-height: 38px; height: 38px; box-sizing: border-box; line-height: 1.5; padding-top: .375rem; padding-right: 72px; padding-bottom: .375rem; }
.chat-input-wrap .char-counter { position: absolute; right: 10px; bottom: 3px; opacity: .62; pointer-events: none; line-height: 1; }
.chat-composer-main #send-btn { width: 38px; min-width: 38px; height: 38px; align-self: start; display: inline-flex; align-items: center; justify-content: center; }
.char-counter { font-size: .75rem; color: var(--bs-secondary-color); text-align: right; }
.char-counter.over { color: #dc3545; }

/* Right panel */
#panel-right { width: var(--right-panel-w); min-width: var(--right-panel-w); border-left: 1px solid var(--bs-border-color); overflow-y: auto; background: var(--bs-body-bg); }
#panel-right .panel-header { padding: 10px 12px; border-bottom: 1px solid var(--bs-border-color); font-size: .85rem; font-weight: 600; }
.chat-shell-backdrop { display: none; }
.online-user { padding: 10px 12px; display: grid; grid-template-columns: 42px 1fr; gap: 8px 10px; align-items: start; }
.online-user:hover { background: var(--bs-secondary-bg); }
.online-user-avatar { position: relative; width: 42px; cursor: pointer; }
.online-user-avatar img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; }
.online-user-main { min-width: 0; cursor: pointer; }
.online-user-name { font-size: .9rem; font-weight: 600; line-height: 1.2; }
.online-user-role { margin-top: 4px; }
.online-user-actions { grid-column: 1 / span 2; display: flex; gap: 6px; padding-top: 2px; }
.user-action-btn { width: 28px; height: 28px; border: 1px solid var(--bs-border-color); background: transparent; border-radius: 6px; color: var(--bs-secondary-color); display: inline-flex; align-items: center; justify-content: center; }
.user-action-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }

/* Embeds */
.embed-yt { position: relative; display: inline-block; max-width: 300px; }
.embed-yt-thumb { max-width: 100%; border-radius: 6px; }
.embed-yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 3rem; color: rgba(255,255,255,.9); pointer-events: none; }
.embed-image { max-width: 300px; max-height: 300px; border-radius: 6px; object-fit: cover; }
.embed-og { border: 1px solid var(--bs-border-color); border-radius: 8px; overflow: hidden; max-width: 360px; }
.embed-og a { display: flex; text-decoration: none; color: inherit; }
.embed-og-image { width: 80px; height: 80px; object-fit: cover; }
.embed-og-body { padding: 8px; }
.embed-og-title { font-weight: 600; font-size: .9rem; }
.embed-og-desc { font-size: .8rem; color: var(--bs-secondary-color); }

/* Auth page */
#auth-page { display: flex; align-items: center; justify-content: center; height: 100vh; }
.auth-card { width: 100%; max-width: 400px; }

/* Responsive */
@media (max-width: 768px) {
    html, body { height: 100%; overflow: hidden; }
    body { height: 100vh; height: 100dvh; }
    .chat-layout { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
    #chat-main { height: 100%; min-height: 0; overflow: hidden; }
    #chat-header { flex: 0 0 auto; position: relative; z-index: 20; background: var(--bs-body-bg); }
    .chat-mobile-body { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
    .mobile-users-rail { flex: 0 0 var(--mobile-users-rail-w); display: flex; flex-direction: column; align-items: center; gap: 8px; width: var(--mobile-users-rail-w); min-width: var(--mobile-users-rail-w); min-height: 0; padding: 8px 5px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; border-left: 1px solid var(--bs-border-color); background: var(--bs-body-bg); scrollbar-width: thin; }
    .mobile-users-rail-count { flex: 0 0 auto; min-width: 24px; padding: 1px 5px; border-radius: 999px; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: .7rem; line-height: 1.2; text-align: center; }
    .mobile-users-rail-list { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
    .mobile-users-rail-user { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
    .mobile-users-rail-user img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; }
    @media (max-width: 340px) {
        :root { --mobile-users-rail-w: 40px; }
        .mobile-users-rail { padding-left: 4px; padding-right: 4px; }
        .mobile-users-rail-user,
        .mobile-users-rail-user img { width: 28px; height: 28px; }
    }
    @media (min-width: 420px) {
        :root { --mobile-users-rail-w: 50px; }
        .mobile-users-rail-user,
        .mobile-users-rail-user img { width: 32px; height: 32px; }
    }
    #messages-container { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    #input-area { grid-template-columns: minmax(0, 1fr) var(--mobile-users-rail-w); display: grid; flex: 0 0 auto; }
    .mobile-dock-rail { display: block; min-width: 0; border-left: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
    #sidebar-left { position: fixed; left: -100%; top: 0; height: 100vh; z-index: 1060; transition: left .3s; }
    #sidebar-left.show { left: 0; }
    #panel-right { position: fixed; top: 0; right: 0; width: min(86vw, var(--right-panel-w)); min-width: 0; height: 100vh; z-index: 1060; display: block; transform: translateX(100%); transition: transform .2s ease; box-shadow: -8px 0 24px rgba(0,0,0,.18); }
    #panel-right.show { transform: translateX(0); }
    .chat-shell-backdrop { position: fixed; inset: 0; z-index: 1055; background: rgba(0,0,0,.35); }
    .chat-shell-backdrop.show { display: block; }
    #input-area { position: relative; z-index: 1056; background: var(--bs-body-bg); }
    .scroll-bottom-btn { right: 16px; }
}

/* Color preview */
.color-preview-box { width: 80px; height: 40px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; }

#createUserModal { z-index: 1065; }