/* ─── Variables ───────────────────────────────────────────── */
:root {
    --bg-tier-1: #1e1f22;
    --bg-tier-2: #2b2d31;
    --bg-tier-3: #1e1f22;
    --bg-tier-4: #111214;
    --accent: #5865f2;
    --accent-hover: #4752c4;
    --green: #23a559;
    --red: #f23f43;
    --text-primary: #f2f3f5;
    --text-secondary: #b5bac1;
    --text-muted: #949ba4;
    --text-link: #00a8fc;
    --input-bg: #383a40;
    --hover: #35373c;
    --scrollbar-thumb: #1a1b1e;
    --scrollbar-track: #2b2d31;
}

/* ─── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
    font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: var(--bg-tier-3);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.4;
}
.hidden { display: none !important; }
a { color: var(--text-link); text-decoration: none; }
button { cursor: pointer; font-family: inherit; font-size: inherit; }
input { font-family: inherit; font-size: 14px; }

/* ─── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
    padding: 10px 16px;
    border: none;
    border-radius: 3px;
    font-weight: 500;
    font-size: 14px;
    transition: background 0.15s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--input-bg); color: var(--text-primary); }
.btn-secondary:hover { background: #404249; }
.btn-icon {
    background: none; border: none; color: var(--text-muted);
    font-size: 18px; padding: 6px; border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.btn-icon:hover { color: var(--text-primary); background: var(--hover); }

/* ─── Auth overlay ────────────────────────────────────────── */
.auth-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: var(--bg-tier-4);
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at bottom, #1b2838 0%, #674e79 50%, #0b0e11 100%);
}
.auth-card {
    background: var(--bg-tier-2);
    padding: 32px;
    border-radius: 8px;
    width: 420px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.auth-logo {
    font-size: 28px; font-weight: 700; text-align: center;
    margin-bottom: 24px; color: var(--accent);
}
.auth-tabs { display: flex; gap: 0; margin-bottom: 24px; }
.auth-tabs .tab {
    flex: 1; padding: 10px; background: var(--bg-tier-3); border: none;
    color: var(--text-muted); font-weight: 600; font-size: 14px;
    border-bottom: 2px solid transparent; transition: all 0.15s;
}
.auth-tabs .tab:first-child { border-radius: 4px 0 0 0; }
.auth-tabs .tab:last-child { border-radius: 0 4px 0 0; }
.auth-tabs .tab.active { color: var(--text-primary); border-bottom-color: var(--accent); background: var(--bg-tier-2); }
.auth-form { display: none; flex-direction: column; gap: 12px; }
.auth-form.active { display: flex; }
.auth-form input {
    padding: 10px 12px; background: var(--bg-tier-4); border: 1px solid #222326;
    border-radius: 3px; color: var(--text-primary); outline: none; transition: border 0.15s;
}
.auth-form input:focus { border-color: var(--accent); }
.auth-form .btn { width: 100%; margin-top: 8px; }
.error-msg { color: var(--red); text-align: center; font-size: 13px; margin-top: 8px; min-height: 18px; }

/* ─── App Layout ──────────────────────────────────────────── */
.app {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* ─── Server List ─────────────────────────────────────────── */
.server-list {
    width: 72px; min-width: 72px;
    background: var(--bg-tier-4);
    padding: 12px 0;
    display: flex; flex-direction: column;
    align-items: center;
    gap: 8px;
    overflow-y: auto;
    scrollbar-width: none;
}
.server-list::-webkit-scrollbar { display: none; }
.server-icon-wrapper {
    position: relative; width: 48px; height: 48px;
    border-radius: 50%; transition: border-radius 0.2s, background 0.2s;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
}
.server-icon-wrapper:hover { border-radius: 16px; }
.server-icon-wrapper.active { border-radius: 16px; background: var(--accent); }
.server-icon-wrapper:not(.active) { background: var(--bg-tier-2); }
.server-icon-wrapper span {
    font-weight: 600; font-size: 16px; color: var(--text-primary);
}
.server-icon-wrapper.home-icon { background: var(--bg-tier-2); }
.server-icon-wrapper.home-icon:hover,
.server-icon-wrapper.home-icon.active { background: var(--accent); }
.server-separator {
    width: 32px; height: 2px;
    background: var(--bg-tier-3);
    border-radius: 1px; flex-shrink: 0;
}
.server-add-btn {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--bg-tier-2); border: none;
    color: var(--green); font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
}
.server-add-btn:hover { border-radius: 16px; background: var(--green); color: #fff; }

/* Server pill indicator */
.server-icon-wrapper::before {
    content: ''; position: absolute; left: -16px;
    width: 4px; height: 0; background: var(--text-primary);
    border-radius: 0 4px 4px 0; transition: height 0.2s;
}
.server-icon-wrapper:hover::before { height: 20px; }
.server-icon-wrapper.active::before { height: 40px; }

/* ─── Channel List ────────────────────────────────────────── */
.channel-list {
    width: 240px; min-width: 240px;
    background: var(--bg-tier-2);
    display: flex; flex-direction: column;
}
.server-header {
    height: 48px; padding: 0 16px;
    display: flex; align-items: center;
    border-bottom: 1px solid var(--bg-tier-3);
    font-weight: 600; font-size: 15px;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
    justify-content: space-between;
}
.server-header:hover { background: var(--hover); }
.server-header .dropdown-arrow { font-size: 12px; color: var(--text-muted); }

.channels-container {
    flex: 1; overflow-y: auto; padding: 8px;
}
.channel-group-label {
    display: flex; align-items: center;
    padding: 8px 0 4px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    cursor: pointer;
}
.channel-group-label:hover { color: var(--text-secondary); }
.channel-group-label .plus-btn {
    margin-left: 2px; font-size: 14px;
    opacity: 0; transition: opacity 0.15s;
}
.channel-group-label:hover .plus-btn { opacity: 1; }

.channel-item {
    display: flex; align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.1s, color 0.1s;
    margin: 1px 0;
    gap: 6px;
    font-size: 15px;
}
.channel-item:hover { background: var(--hover); color: var(--text-secondary); }
.channel-item.active { background: var(--hover); color: var(--text-primary); }
.channel-item .hash { font-size: 20px; font-weight: 400; }
.channel-item .voice-icon { font-size: 16px; }

.user-bar {
    height: 52px; padding: 0 8px;
    background: var(--bg-tier-3);
    display: flex; align-items: center;
    gap: 8px; flex-shrink: 0;
}
.user-bar-info {
    display: flex; align-items: center; gap: 8px;
    flex: 1; overflow: hidden;
}
.user-bar-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: #fff;
    flex-shrink: 0;
    position: relative;
}
.user-bar-avatar .status-dot {
    position: absolute; bottom: -1px; right: -1px;
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid var(--bg-tier-3);
}
.status-dot.online { background: var(--green); }
.status-dot.idle { background: #f0b232; }
.status-dot.dnd { background: var(--red); }
.status-dot.offline { background: var(--text-muted); }
.user-bar-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-bar-status { font-size: 11px; color: var(--text-muted); }

/* ─── Main Content ────────────────────────────────────────── */
.main-content {
    flex: 1; display: flex; flex-direction: column;
    background: var(--bg-tier-3);
    min-width: 0;
}
.chat-header {
    height: 48px; padding: 0 16px;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--bg-tier-4);
    flex-shrink: 0;
    font-weight: 600; font-size: 15px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.channel-hash { font-size: 24px; color: var(--text-muted); }
.dm-panel-btn {
    background: var(--bg-tier-2); border: none; color: var(--text-muted);
    padding: 4px 8px; border-radius: 3px; font-size: 13px; margin-left: auto;
    cursor: pointer; transition: all 0.15s;
}
.dm-panel-btn:hover { color: var(--text-primary); background: var(--hover); }

/* ─── Messages ────────────────────────────────────────────── */
.messages-container {
    flex: 1; overflow-y: auto;
    padding: 16px 0;
    display: flex; flex-direction: column;
}
.welcome-msg {
    padding: 16px 16px 32px;
}
.welcome-icon {
    width: 68px; height: 68px; border-radius: 50%;
    background: var(--bg-tier-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 42px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 8px;
}
.welcome-msg h1 { font-size: 32px; margin-bottom: 8px; }
.welcome-msg p { color: var(--text-muted); font-size: 14px; }

/* Message */
.message {
    display: flex;
    padding: 2px 16px;
    gap: 16px;
    position: relative;
    transition: background 0.05s;
}
.message:hover { background: var(--bg-tier-2); }
.message + .message { margin-top: 0; }
.message + .message.has-avatar { padding-top: 12px; }
.message + .message.no-avatar { padding-top: 0; }
.message-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px; color: #fff;
    flex-shrink: 0;
    margin-top: 2px;
}
.message-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.message-content { flex: 1; min-width: 0; }
.message-header {
    display: flex; align-items: baseline; gap: 8px;
}
.message-author {
    font-weight: 600; font-size: 15px;
    color: var(--text-primary);
    cursor: pointer;
}
.message-author:hover { text-decoration: underline; }
.message-timestamp {
    font-size: 11px; color: var(--text-muted);
}
.message-text {
    color: var(--text-secondary);
    font-size: 15px;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.message-text a { color: var(--text-link); }
.message-edited { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
.message-actions {
    position: absolute; top: -16px; right: 16px;
    background: var(--bg-tier-2); border: 1px solid var(--bg-tier-4);
    border-radius: 4px;
    display: none; gap: 2px; padding: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.message:hover .message-actions { display: flex; }
.message-actions button {
    background: none; border: none; padding: 4px 6px;
    color: var(--text-muted); font-size: 16px; border-radius: 2px;
    cursor: pointer; transition: all 0.1s;
}
.message-actions button:hover { background: var(--hover); color: var(--text-primary); }

/* Reactions */
.message-reactions {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.reaction {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 6px; border-radius: 8px;
    background: var(--bg-tier-2); border: 1px solid transparent;
    font-size: 13px; cursor: pointer; transition: all 0.1s;
}
.reaction:hover { background: var(--bg-tier-3); }
.reaction.active { background: rgba(88,101,242,0.15); border-color: var(--accent); }
.reaction .count { font-size: 12px; font-weight: 600; color: var(--text-secondary); }

/* ─── Message Input ───────────────────────────────────────── */
.message-input-area {
    padding: 0 16px 24px;
    flex-shrink: 0;
}
.message-input-wrapper {
    display: flex; align-items: center;
    background: var(--input-bg);
    border-radius: 8px;
    padding: 0 4px 0 16px;
}
.message-input-wrapper input {
    flex: 1; padding: 12px 0;
    background: transparent; border: none;
    color: var(--text-primary); outline: none; font-size: 15px;
}
.message-input-wrapper input::placeholder { color: var(--text-muted); }
.message-input-wrapper .btn-icon { padding: 4px; }
.send-btn {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    font-size: 18px !important;
    cursor: pointer;
    transition: background 0.15s;
}
.send-btn:hover { background: var(--accent-hover) !important; }

/* ─── DM Panel ────────────────────────────────────────────── */
.dm-panel {
    position: fixed; top: 0; right: 0;
    width: 340px; height: 100vh;
    background: var(--bg-tier-2);
    box-shadow: -4px 0 24px rgba(0,0,0,0.3);
    z-index: 100;
    display: flex; flex-direction: column;
}
.dm-panel-header {
    height: 48px; padding: 0 16px;
    display: flex; align-items: center;
    font-weight: 700; font-size: 16px;
    border-bottom: 1px solid var(--bg-tier-3);
}
.dm-list { flex: 1; overflow-y: auto; padding: 8px; }
.dm-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px; border-radius: 4px;
    cursor: pointer; transition: background 0.1s;
}
.dm-item:hover { background: var(--hover); }
.dm-item-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: #fff;
    flex-shrink: 0;
    position: relative;
}
.dm-item-info { flex: 1; min-width: 0; }
.dm-item-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-item-status { font-size: 12px; color: var(--text-muted); }
.dm-create { margin: 12px; }

/* ─── DM Chat (when chatting DMs) ─────────────────────────── */
.dm-chat-header {
    display: flex; align-items: center; gap: 12px;
}
.dm-chat-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; color: #fff;
}

/* ─── Modal ───────────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 500;
    display: flex; align-items: center; justify-content: center;
}
.modal {
    background: var(--bg-tier-2);
    padding: 24px;
    border-radius: 8px;
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.modal h2 { margin-bottom: 16px; }
.modal input {
    width: 100%; padding: 10px 12px;
    background: var(--bg-tier-4); border: 1px solid #222326;
    border-radius: 3px; color: var(--text-primary);
    margin-bottom: 16px; outline: none;
}
.modal input:focus { border-color: var(--accent); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ─── Typing indicator ────────────────────────────────────── */
.typing-indicator {
    padding: 0 16px 4px;
    font-size: 13px; color: var(--text-muted);
    height: 20px;
}
.typing-dots { display: inline-flex; gap: 2px; }
.typing-dots span {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--text-muted);
    animation: typing 1.4s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ─── Empty state ─────────────────────────────────────────── */
.empty-state {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--text-muted); font-size: 16px;
}