@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg-dark: #0f1012; --bg-panel: #1e1f22; --bg-sidebar: #2b2d31; --bg-chat: #313338; --bg-input: #383a40;
    --primary: #5865F2; --danger: #ed4245; --success: #23a559; --gold: #f1c40f;
    --text-main: #f2f3f5; --text-muted: #949ba4; --nav-height: 60px; --header-height: 50px;
}

* { box-sizing: border-box; margin: 0; padding: 0; outline: none; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-dark); color: var(--text-main); height: 100dvh; overflow: hidden; display: flex; font-size: 15px; }
::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #2b2d31; } ::-webkit-scrollbar-thumb { background: #1a1b1e; border-radius: 3px; }

#login-view { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: url('https://img.freepik.com/free-vector/dark-gradient-background-with-copy-space_53876-99548.jpg') center/cover; }
.login-box { background: rgba(30,31,34, 0.95); backdrop-filter: blur(5px); padding: 30px; border-radius: 12px; width: 90%; max-width: 350px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.login-box input { width: 100%; padding: 12px; margin-bottom: 10px; background: #111; border: 1px solid #333; color: white; border-radius: 4px; text-align: center; }
.btn-login { width: 100%; padding: 12px; background: var(--primary); color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; }
.error-msg { color: var(--danger); margin-top: 10px; font-size: 0.9rem; }

#app-layout { display: flex; width: 100%; height: 100%; overflow: hidden; }
.sidebar-desktop { width: 70px; background: #1e1f22; display: flex; flex-direction: column; align-items: center; padding: 15px 0; gap: 10px; flex-shrink: 0; }
.nav-item { width: 48px; height: 48px; border-radius: 50%; background: #313338; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; display: flex; justify-content: center; align-items: center; text-decoration: none; transition: 0.2s; }
.nav-item:hover, .nav-item.active { background: var(--primary); color: white; border-radius: 16px; }
.nav-item.logout { margin-top: auto; }

.main-area { flex: 1; display: flex; flex-direction: column; position: relative; background: #313338; overflow: hidden; }
.top-bar { height: var(--header-height); background: #313338; border-bottom: 1px solid #26272d; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; font-weight: 600; flex-shrink: 0; }
.user-badge { font-size: 0.9rem; color: var(--text-muted); }

.view { display: none; width: 100%; height: 100%; overflow-y: auto; padding: 20px; }
.view.active { display: block; }
.content-container { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; padding-bottom: 80px; }
.card { background: #2b2d31; padding: 15px; border-radius: 5px; position: relative; border-left: 4px solid var(--primary); }
.card.important { border-left-color: var(--danger); background: rgba(237,66,69,0.08); }
.card h3 { margin-bottom: 10px; color: white; }
.card-meta { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 5px; }
.del-icon { position: absolute; top: 10px; right: 10px; cursor: pointer; opacity: 0.5; }
input, textarea { width: 100%; padding: 10px; background: #1e1f22; border: none; color: white; border-radius: 4px; margin-bottom: 10px; resize: none; }
.btn-primary { background: var(--primary); color: white; padding: 8px 16px; border: none; border-radius: 3px; cursor: pointer; }
.inputs-row { display: flex; gap: 10px; }
.abs-item { background: #2b2d31; padding: 10px; border-radius: 4px; margin-bottom: 5px; display: flex; justify-content: space-between; }

.view.chat-view { padding: 0; display: none; flex-direction: column; }
.view.chat-view.active { display: flex; }
.chat-wrapper { display: flex; width: 100%; height: 100%; overflow: hidden; }
.rooms-bar { width: 220px; background: #2b2d31; display: flex; flex-direction: column; border-right: 1px solid #1e1f22; flex-shrink: 0; padding: 5px; }
.rooms-scroller { flex: 1; overflow-y: auto; }
.sidebar-header { padding: 10px 5px; font-weight: bold; color: #aaa; font-size: 0.75rem; text-transform: uppercase; }
.room-btn { width: 100%; text-align: left; background: transparent; border: none; color: var(--text-muted); padding: 8px 10px; margin-bottom: 2px; cursor: pointer; border-radius: 4px; font-size: 0.95rem; display: flex; justify-content: space-between; align-items: center; }
.room-btn:hover { background: #35373c; color: white; }
.room-btn.active { background: rgba(88,101,242,0.1); color: white; }
.room-count { background: rgba(0,0,0,0.3); color: #aaa; font-size: 0.75rem; padding: 2px 6px; border-radius: 10px; }
.room-btn.active .room-count { background: rgba(255,255,255,0.2); color: white; }
.room-count:empty { padding: 0; }
.add-room-btn { background: #222; border: none; padding: 10px; color: #aaa; cursor: pointer; margin-top: auto; }
.online-bar { width: 200px; background: #2b2d31; padding: 10px; border-left: 1px solid #1e1f22; overflow-y: auto; flex-shrink: 0; }
.user-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; opacity: 0.8; }
.u-avatar { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; color: #000; }
.chat-window { flex: 1; display: flex; flex-direction: column; background: #313338; min-width: 0; }
.chat-header-info { height: 48px; border-bottom: 1px solid #26272d; display: flex; align-items: center; padding: 0 15px; font-weight: 600; flex-shrink: 0; }
#chat-messages { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 5px; }
.msg-row { padding: 2px 0; }
.msg-header { display: flex; align-items: baseline; gap: 8px; }
.msg-author { font-weight: 600; cursor: pointer; color: white; font-size: 0.95rem; }
.msg-time { font-size: 0.7rem; color: #72767d; }
.msg-text { color: #dbdee1; word-break: break-word; font-size: 0.95rem; line-height: 1.4; }
.chat-input-container { padding: 0 15px 20px; flex-shrink: 0; }
.chat-form { background: #383a40; border-radius: 8px; padding: 0 15px; display: flex; align-items: center; }
#chat-input { flex: 1; background: transparent; border: none; height: 44px; margin: 0; color: white; }
.btn-send { background: none; border: none; color: #aaa; font-size: 1.2rem; cursor: pointer; padding: 0 10px; }
#mobile-chat-nav { display: none; } .mobile-nav { display: none; }

/* --- WIADOMOŚCI SYSTEMOWE --- */
.msg-system { display: flex; align-items: center; justify-content: center; margin: 15px 0; color: #72767d; font-size: 0.8rem; font-style: italic; opacity: 0.8; }
.sys-text { padding: 0 10px; }
.sys-line { flex: 1; height: 1px; background: #3f4147; max-width: 50px; }

/* --- MOBILE --- */
@media (max-width: 768px) {
    .sidebar-desktop { display: none; } .top-bar { display: none; }
    .mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: #1e1f22; border-top: 1px solid #111; justify-content: space-around; align-items: center; z-index: 2000; padding-bottom: env(safe-area-inset-bottom); }
    .m-nav-btn { background: none; border: none; font-size: 1.4rem; color: #72767d; transition: 0.2s; }
    .m-nav-btn.active { color: white; transform: scale(1.1); }
    .view { padding-bottom: 90px; } .view.chat-view { padding-bottom: 0; }
    #mobile-chat-nav { display: flex; width: 100%; height: 50px; background: #2b2d31; border-bottom: 1px solid #111; position: relative; z-index: 10; flex-shrink: 0; }
    .m-sub-btn { flex: 1; background: transparent; border: none; color: #949ba4; font-weight: 600; font-size: 0.9rem; cursor: pointer; border-bottom: 3px solid transparent; }
    .m-sub-btn.active { color: white; border-bottom-color: var(--primary); background: rgba(255,255,255,0.03); }
    .chat-wrapper { flex-direction: column; height: 100%; }
    .rooms-bar, .chat-window, .online-bar { display: none !important; width: 100% !important; border: none; }
    .active-mobile-view { display: flex !important; flex-direction: column; }
    .rooms-bar, .online-bar { height: calc(100dvh - 110px) !important; background: #2b2d31; padding: 15px; overflow-y: auto; }
    .room-btn { width: 100%; margin-bottom: 8px; padding: 15px; background: #313338; border: 1px solid #222; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
    .room-btn.active { background: var(--primary); border-color: var(--primary); }
    .add-room-btn { display: block; width: 100%; padding: 15px; background: #111; color: #aaa; margin-top: 20px; border-radius: 8px; border: 1px solid #333; }
    .user-row { background: #313338; padding: 10px; border-radius: 6px; margin-bottom: 5px; }
    .chat-window { height: calc(100dvh - 170px) !important; background: #313338; }
    #chat-messages { flex: 1; overflow-y: auto; padding: 15px; }
    .chat-input-container { position: fixed; bottom: 60px; left: 0; width: 100%; height: 60px; background: #2b2d31; border-top: 1px solid #111; z-index: 1500; padding: 8px 10px; display: flex; align-items: center; box-shadow: 0 -5px 20px rgba(0,0,0,0.2); }
    .chat-form { width: 100%; padding: 0 10px; height: 44px; }
    #chat-input { height: 100%; font-size: 16px; }
}

#toast-container { position: fixed; top: 20px; right: 20px; z-index: 3000; }
.toast { background: #333; color: white; padding: 10px 20px; border-radius: 5px; margin-bottom: 10px; border-left: 4px solid var(--success); animation: slideIn 0.3s; }
.toast.error { border-left-color: var(--danger); }
@keyframes slideIn { from{transform:translateX(100%)}to{transform:translateX(0)} }