/* ===== Vars / Theme ===== */

:root[data-theme="light"] {
    --bg: #f6f1ea;
    --sidebar-bg: #ffffff;
    --sidebar-hover: #fdf2e3;
    --sidebar-active: #ffe1c1;
    --border: #ece5dc;
    --text: #1a1410;
    --text-muted: #807366;
    --text-faint: #b09e8c;
    --accent: #e8893a;
    --accent-soft: #ffe1c1;
    --accent-text: #ffffff;
    --bubble-mine: #e8893a;
    --bubble-mine-text: #ffffff;
    --bubble-other: #ffffff;
    --bubble-other-text: #1a1410;
    --messages-bg: #fdf4e8;
    --read: #4fae4e;
    --online: #4caf50;
    --danger: #e53935;
    --shadow: 0 1px 2px rgba(0,0,0,0.08);
    --shadow-lg: 0 6px 24px rgba(0,0,0,0.12);
    --reply-border: #e8893a;
}

:root[data-theme="dark"] {
    --bg: #14110d;
    --sidebar-bg: #1d1813;
    --sidebar-hover: #2a2218;
    --sidebar-active: #6b3b13;
    --border: #2d251c;
    --text: #f5ede0;
    --text-muted: #968b7b;
    --text-faint: #6e6452;
    --accent: #f5973d;
    --accent-soft: #4a3220;
    --accent-text: #ffffff;
    --bubble-mine: #e8893a;
    --bubble-mine-text: #ffffff;
    --bubble-other: #1d1813;
    --bubble-other-text: #f5ede0;
    --messages-bg: #14110d;
    --read: #4fae4e;
    --online: #4caf50;
    --danger: #e53935;
    --shadow: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-lg: 0 6px 24px rgba(0,0,0,0.5);
    --reply-border: #f5973d;
}

.app-logo {
    display: inline-block;
    line-height: 0;
}
.app-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}
.auth-logo { width: 112px; height: 96px; margin-bottom: 12px; }
.empty-icon { width: 112px; height: 96px; margin-bottom: 16px; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    overflow: hidden;
}
.hidden { display: none !important; }

button {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

input, textarea {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

/* ===== Auth view ===== */
.auth-view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    background: var(--bg);
}
:root[data-theme="light"] .auth-view {
    background-color: #fdf4e8;
    background-image: url("/bg-pattern.png");
    background-size: 420px auto;
    background-repeat: repeat;
}
.auth-card {
    background: var(--sidebar-bg);
    padding: 36px 32px;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    width: 360px;
    text-align: center;
}
.auth-card h1 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.auth-sub { margin: 0 0 24px; color: var(--text-muted); font-size: 13px; }
.auth-card input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    margin-bottom: 12px;
    transition: border-color 0.2s;
}
.auth-card input:focus { border-color: var(--accent); }
.auth-actions { display: flex; gap: 8px; margin-top: 8px; }
.btn-primary, .btn-ghost {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-weight: 500;
    transition: opacity 0.15s, background 0.15s;
}
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-primary:hover { opacity: 0.9; }
.btn-ghost { background: var(--bg); color: var(--text); }
.btn-ghost:hover { background: var(--sidebar-hover); }
.auth-error {
    color: var(--danger);
    font-size: 13px;
    min-height: 18px;
    margin-top: 12px;
}

/* ===== App layout ===== */
.app-view {
    display: grid;
    grid-template-columns: 360px 1fr;
    height: 100vh;
    height: 100dvh; /* mobile-correct height accounting for browser chrome */
    background: var(--messages-bg);
    position: relative;
}
:root[data-theme="light"] .app-view {
    background-color: #fdf4e8;
    background-image: url("/bg-pattern.png");
    background-size: 420px auto;
    background-repeat: repeat;
}

.resize-handle {
    cursor: col-resize;
    background: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    transform: translateX(-5px);
    z-index: 10;
}
.resize-handle::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    width: 1px;
    background: rgba(0, 0, 0, 0.06);
    transition: background 0.15s;
}
.resize-handle:hover::after,
.resize-handle.dragging::after {
    background: var(--accent);
}
body.resizing {
    cursor: col-resize;
    user-select: none;
}
body.resizing * {
    pointer-events: none;
}
body.resizing .resize-handle {
    pointer-events: auto;
}

/* ===== Sidebar ===== */
.sidebar {
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}
.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex: 0 0 auto;
    transition: background 0.15s;
}
.icon-btn:hover { background: var(--sidebar-hover); }
.search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg);
    border-radius: 20px;
    padding: 0 12px;
    height: 38px;
    gap: 8px;
}
.search-icon { color: var(--text-muted); flex: 0 0 auto; }
.search-wrap input {
    flex: 1;
    background: none;
    border: none;
    height: 100%;
    font-size: 14px;
}

.menu-dropdown {
    position: absolute;
    top: 60px;
    left: 12px;
    background: var(--sidebar-bg);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    padding: 6px;
    z-index: 100;
    min-width: 200px;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--text);
    transition: background 0.15s;
}
.menu-item:hover { background: var(--sidebar-hover); }
.menu-item svg { color: var(--text-muted); flex: 0 0 auto; }

.chats-list, .search-results {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px;
}
.chats-list::-webkit-scrollbar, .search-results::-webkit-scrollbar,
.messages-wrap::-webkit-scrollbar, .group-users::-webkit-scrollbar {
    width: 6px;
}
.chats-list::-webkit-scrollbar-thumb, .search-results::-webkit-scrollbar-thumb,
.messages-wrap::-webkit-scrollbar-thumb, .group-users::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.chat-item:hover { background: var(--sidebar-hover); }
.chat-item.active { background: var(--sidebar-active); }
.chat-item.active .chat-item-name,
.chat-item.active .chat-item-last,
.chat-item.active .chat-item-time { color: var(--text); }

.chat-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-item-name { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-time { font-size: 12px; color: var(--text-faint); flex: 0 0 auto; }
.chat-item-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-item-last { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.chat-item-last .sender { color: var(--text); font-weight: 500; }
.unread-badge {
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    flex: 0 0 auto;
}

/* ===== Avatar ===== */
.avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 17px;
    flex: 0 0 auto;
    position: relative;
    user-select: none;
    background-size: cover;
    background-position: center;
}
.avatar.avatar-photo { background-color: #ccc; }
.avatar.small { width: 36px; height: 36px; font-size: 14px; }
.avatar.tiny { width: 28px; height: 28px; font-size: 12px; }
.avatar.large { width: 56px; height: 56px; font-size: 22px; }
.avatar .online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: var(--online);
    border-radius: 50%;
    border: 2px solid var(--sidebar-bg);
}

/* ===== Main ===== */
.main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: var(--messages-bg);
}
:root[data-theme="light"] .main {
    background: transparent;
}
.empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-align: center;
}
.empty-state h2 { margin: 0 0 6px; color: var(--text); }
.empty-state p { margin: 0; }

.chat-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-header {
    background: var(--sidebar-bg);
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}
.chat-header-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-header-text { min-width: 0; }
.chat-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-status { font-size: 13px; color: var(--text-muted); }
.chat-status.online { color: var(--accent); }
.chat-status.typing { color: var(--accent); font-style: italic; }
.chat-header-actions { display: flex; gap: 4px; }

.messages-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 4px;
}
.messages {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-width: 900px;
    margin: 0 auto;
}

.date-divider {
    align-self: center;
    background: rgba(0,0,0,0.25);
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    margin: 12px 0;
    font-weight: 500;
}

.msg-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 1px;
}
.msg-row.mine { justify-content: flex-end; }
.msg-row.group-end { margin-bottom: 6px; }
.msg-row .avatar-slot {
    width: 36px;
    flex: 0 0 auto;
}
.msg-row.mine .avatar-slot { display: none; }

.msg {
    max-width: min(70%, 580px);
    background: var(--bubble-other);
    color: var(--bubble-other-text);
    padding: 7px 12px;
    border-radius: 14px;
    box-shadow: var(--shadow);
    position: relative;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.msg.mine {
    background: var(--bubble-mine);
    color: var(--bubble-mine-text);
}
.msg.deleted {
    color: var(--text-muted);
    font-style: italic;
    background: var(--bubble-other);
    opacity: 0.7;
}
.msg-sender {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--accent);
}
.msg-sender.c0 { color: #e17076; }
.msg-sender.c1 { color: #7bc862; }
.msg-sender.c2 { color: #65aadd; }
.msg-sender.c3 { color: #a695e7; }
.msg-sender.c4 { color: #ee7aae; }
.msg-sender.c5 { color: #6ec9cb; }
.msg-sender.c6 { color: #faa774; }
.msg-sender.c7 { color: #7e85b6; }

.msg-text {
    display: inline;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.msg-meta {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    color: var(--text-faint);
    user-select: none;
    white-space: nowrap;
    vertical-align: baseline;
}
.msg-meta .edited { font-style: italic; margin-right: 4px; }
.msg-meta .checks { margin-left: 3px; }
.msg-meta .checks.read { color: var(--read); }
.msg.mine .msg-meta { color: rgba(255, 255, 255, 0.8); }
.msg.mine .msg-meta .checks { color: rgba(255, 255, 255, 0.7); }
.msg.mine .msg-meta .checks.read { color: #ffffff; }

.msg-reply {
    border-left: 3px solid var(--reply-border);
    padding: 4px 8px;
    margin-bottom: 6px;
    background: rgba(36, 129, 204, 0.08);
    border-radius: 8px;
    cursor: pointer;
}
.msg-reply-name { font-size: 12px; font-weight: 600; color: var(--accent); }
.msg-reply-text {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

/* Reply preview inside own (orange) bubble — light-on-orange for contrast */
.msg.mine .msg-reply {
    background: rgba(255, 255, 255, 0.22);
    border-left-color: rgba(255, 255, 255, 0.85);
}
.msg.mine .msg-reply-name { color: #fff; }
.msg.mine .msg-reply-text { color: rgba(255, 255, 255, 0.92); }

.msg-attach-image {
    max-width: 320px;
    max-height: 320px;
    border-radius: 8px;
    margin-bottom: 4px;
    display: block;
    cursor: pointer;
}
.msg-attach-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: rgba(0,0,0,0.06);
    border-radius: 8px;
    margin-bottom: 4px;
    color: var(--text);
    text-decoration: none;
}
:root[data-theme="dark"] .msg-attach-file { background: rgba(255,255,255,0.08); }
.msg-attach-file-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.msg-attach-file-name { font-size: 13px; word-break: break-all; }

.msg-actions {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -36px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sidebar-bg);
    box-shadow: var(--shadow);
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.msg-row.mine .msg-actions { right: auto; left: -36px; }
.msg-row:hover .msg-actions { display: flex; }

/* ===== Reply bar (above input) ===== */
.reply-bar {
    background: var(--sidebar-bg);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}
.reply-bar-icon { color: var(--accent); flex: 0 0 auto; }
.reply-bar-content { flex: 1; min-width: 0; border-left: 3px solid var(--accent); padding-left: 8px; }
.reply-bar-name { font-size: 13px; font-weight: 600; color: var(--accent); }
.reply-bar-text { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Send form ===== */
.send-form {
    background: var(--sidebar-bg);
    padding: 8px 12px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.05);
}
.input-icon { color: var(--text-muted); }
.input-icon:hover { color: var(--accent); }
#send-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 18px;
    font-size: 14px;
    resize: none;
    max-height: 160px;
    min-height: 38px;
    line-height: 18px;
    border: 1px solid transparent;
    transition: border-color 0.15s;
}
#send-input:focus { border-color: var(--accent); }
.send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s, transform 0.1s;
}
.send-btn:hover { opacity: 0.9; }
.send-btn:active { transform: scale(0.95); }

/* ===== Emoji panel ===== */
.emoji-panel {
    position: absolute;
    bottom: 70px;
    left: 12px;
    background: var(--sidebar-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 50;
    width: 280px;
    max-height: 280px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}
.emoji-panel button {
    font-size: 22px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    transition: background 0.1s;
}
.emoji-panel button:hover { background: var(--sidebar-hover); }

/* ===== Attach preview ===== */
.attach-preview {
    background: var(--bg);
    padding: 4px 10px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    max-width: 200px;
    overflow: hidden;
}
.attach-preview span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Search results ===== */
.search-results { padding: 4px 8px; }
.search-section-title {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 8px 12px 4px;
    font-weight: 600;
}
.search-message-snippet {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-message-snippet mark {
    background: var(--accent-soft);
    color: var(--accent);
    padding: 0 1px;
    border-radius: 2px;
}

/* ===== Modal ===== */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}
.modal-card {
    background: var(--sidebar-bg);
    border-radius: 12px;
    width: 420px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 16px;
    box-shadow: var(--shadow-lg);
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.modal-header h3 { margin: 0; }
#group-title, #group-search {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid transparent;
}
#group-title:focus, #group-search:focus { border-color: var(--accent); }
.group-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    min-height: 4px;
}
.group-chip {
    background: var(--accent-soft);
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.group-chip button { color: var(--accent); padding: 0; line-height: 1; }
.group-users { flex: 1; overflow-y: auto; max-height: 300px; }
.group-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.group-user-item:hover { background: var(--sidebar-hover); }
.group-user-item.selected { background: var(--accent-soft); }
.modal-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ===== Profile modal ===== */
.profile-card {
    width: 380px;
    padding: 0;
    overflow: hidden;
    position: relative;
}
.profile-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    color: var(--text-muted);
}
.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 24px 24px;
    text-align: center;
    background: var(--sidebar-hover);
}
.profile-header > .avatar {
    width: 96px;
    height: 96px;
    font-size: 36px;
    margin-bottom: 14px;
}
.avatar-editable { cursor: pointer; overflow: hidden; }
.avatar-editable::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M9 2L7.17 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-3.17L15 2H9zm3 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/></svg>") center/32px no-repeat;
    opacity: 0;
    transition: opacity 0.15s;
}
.avatar-editable:hover::after { opacity: 1; }
.profile-header > .avatar .online-dot {
    width: 18px;
    height: 18px;
    border-width: 3px;
    bottom: 2px;
    right: 2px;
}
.profile-header h2 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
}
.profile-status {
    font-size: 14px;
    color: var(--text-muted);
}
.profile-status.online { color: var(--accent); }
.profile-body {
    padding: 16px 20px 20px;
}
.profile-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.profile-row-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.profile-row-value {
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.profile-row-value.empty {
    color: var(--text-faint);
    font-style: italic;
}
.profile-bio-edit {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 14px;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}
.profile-bio-edit:focus { border-color: var(--accent); outline: none; }
.profile-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.profile-actions button { padding: 10px 14px; border-radius: 10px; }
.profile-members-title {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.profile-add-member {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: transparent;
    color: var(--accent);
    border: 1px dashed var(--accent);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}
.profile-add-member:hover {
    background: rgba(36, 129, 204, 0.08);
}
.profile-members {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
}
.profile-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.profile-member:hover { background: var(--sidebar-hover); }
.profile-member-info { flex: 1; min-width: 0; }
.profile-member-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-member-status {
    font-size: 12px;
    color: var(--text-muted);
}
.profile-member-status.online { color: var(--accent); }
.profile-member-badge {
    font-size: 11px;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
}

.chat-header-info { cursor: pointer; }
.chat-header-info:hover .chat-title { color: var(--accent); }

/* ===== Context menu ===== */
.ctx-menu {
    position: fixed;
    background: var(--sidebar-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 300;
    min-width: 160px;
}
.ctx-menu .menu-item { font-size: 14px; }
.ctx-menu .menu-item.danger { color: var(--danger); }
.ctx-menu .menu-item.danger svg { color: var(--danger); }

/* ===== Lightbox ===== */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
    cursor: zoom-out;
}
.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
}

/* ===== Typing dots ===== */
.typing-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    margin-left: 6px;
}
.typing-dots span {
    width: 4px;
    height: 4px;
    background: var(--accent);
    border-radius: 50%;
    animation: blink 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

/* ===== Empty chat list ===== */
.chats-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
}
.chats-empty-icon {
    color: var(--text-muted);
    opacity: 0.35;
    margin-bottom: 12px;
}
.chats-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.chats-empty-text {
    font-size: 14px;
    line-height: 1.4;
}

/* ===== Mobile ===== */
.chat-mobile-back { display: none; }

@media (max-width: 700px) {
    .app-view { grid-template-columns: 1fr !important; }
    .resize-handle { display: none; }
    .app-view.chat-open .sidebar { display: none; }
    .app-view:not(.chat-open) .main { display: none; }

    /* Back button visible only on mobile */
    .chat-mobile-back { display: inline-flex; margin-right: 4px; }

    /* No "select a chat" stub on mobile — sidebar is already visible */
    .empty-state { display: none; }

    /* Bigger tap targets */
    .icon-btn { width: 42px; height: 42px; }
    .send-btn { width: 44px; height: 44px; }

    /* Modals near-fullscreen */
    .modal-card,
    .profile-card {
        width: 96vw;
        max-width: 96vw;
        max-height: 92vh;
        border-radius: 12px;
    }
    .menu-dropdown { left: 8px; right: 8px; }

    /* Auth — adjust paddings */
    .auth-card { width: 92vw; max-width: 420px; padding: 24px 18px; }

    /* Limit attachment image width on small screens */
    .msg-attach-image { max-width: 70vw; }

    /* Reply preview text — drop max-width cap */
    .msg-reply-text { max-width: none; }

    /* Sidebar header — slightly smaller paddings */
    .sidebar-header { padding: 8px 10px; }
}