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

/* Telegram-style themes. Dark is the default; script.js sets data-theme
   to light / dark / night. */
:root {
    --bg-app: #0e1621;
    --bg-aside: #17212b;
    --bg-main: #0e1621;
    --bg-wallpaper: #0e1621;
    --bg-search: #242f3d;
    --bg-msg-own: #2b5278;
    --bg-msg-other: #182533;
    --bg-hover: #202b36;
    --bg-active: #2b5278;
    --bg-modal: #17212b;
    --bg-input: #17212b;
    --text: #f5f5f5;
    --text-secondary: #7f91a4;
    --text-muted: #6d7f8f;
    --text-own: #f5f5f5;
    --time-own: #7da8d3;
    --time-other: #6d7f8f;
    --check: #64b5ef;
    --text-active: #ffffff;
    --border: #0b131b;
    --accent: #5eb5f7;
    --accent-btn: #5288c1;
    --accent-hover: #4a7bb0;
    --on-accent: #ffffff;
    --link: #6ab3f3;
    --sender: #6ab3f3;
    --unread: #4082bc;
    --online: #4fc47f;
    --danger: #e55c5c;
    --danger-hover: #c94b4b;
    --success: #4fc47f;
    --radius: 10px;
    --radius-lg: 12px;
    --bubble-radius: 15px;
    --shadow: 0 2px 8px rgba(0,0,0,0.35);
    --bubble-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

:root[data-theme="light"] {
    --bg-app: #ffffff;
    --bg-aside: #ffffff;
    --bg-main: #c8d6a6;
    --bg-wallpaper: linear-gradient(135deg, #dbddbb 0%, #8db28a 35%, #d5d88d 65%, #88b884 100%);
    --bg-search: #f1f1f1;
    --bg-msg-own: #effdde;
    --bg-msg-other: #ffffff;
    --bg-hover: #f4f4f5;
    --bg-active: #3390ec;
    --bg-modal: #ffffff;
    --bg-input: #ffffff;
    --text: #000000;
    --text-secondary: #707579;
    --text-muted: #a2acb4;
    --text-own: #000000;
    --time-own: #4fae4e;
    --time-other: #a2acb4;
    --check: #4fae4e;
    --text-active: #ffffff;
    --border: #dadce0;
    --accent: #3390ec;
    --accent-btn: #3390ec;
    --accent-hover: #2a7fd4;
    --on-accent: #ffffff;
    --link: #3390ec;
    --sender: #3390ec;
    --unread: #3390ec;
    --online: #0ac630;
    --danger: #e53935;
    --danger-hover: #c62828;
    --success: #0ac630;
    --shadow: 0 2px 10px rgba(0,0,0,0.15);
    --bubble-shadow: 0 1px 2px rgba(16,35,47,0.15);
}

:root[data-theme="night"] {
    --bg-app: #181818;
    --bg-aside: #212121;
    --bg-main: #0f0f0f;
    --bg-wallpaper: #0f0f0f;
    --bg-search: #2c2c2c;
    --bg-msg-own: #766ac8;
    --bg-msg-other: #212121;
    --bg-hover: #2c2c2c;
    --bg-active: #766ac8;
    --bg-modal: #212121;
    --bg-input: #212121;
    --text: #ffffff;
    --text-secondary: #aaaaaa;
    --text-muted: #868686;
    --text-own: #ffffff;
    --time-own: rgba(255,255,255,0.6);
    --time-other: #868686;
    --check: #ffffff;
    --text-active: #ffffff;
    --border: #0f0f0f;
    --accent: #8774e1;
    --accent-btn: #8774e1;
    --accent-hover: #7563cf;
    --on-accent: #ffffff;
    --link: #a99ff0;
    --sender: #a99ff0;
    --unread: #8774e1;
    --online: #0ac630;
    --danger: #ff595a;
    --danger-hover: #e04a4b;
    --success: #0ac630;
    --shadow: 0 2px 10px rgba(0,0,0,0.6);
    --bubble-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:15px;
    height:100vh; width:100vw; overflow:hidden;
    background:var(--bg-app); color:var(--text);
    -webkit-font-smoothing:antialiased;
}

:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-thumb { background:rgba(127,127,127,0.35); border-radius:3px; }
::-webkit-scrollbar-track { background:transparent; }

.icon {
    width:24px; height:24px; flex-shrink:0;
    fill:none; stroke:currentColor; stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round;
}

.app { display:flex; height:100vh; height:100dvh; width:100vw; width:100dvw; background:var(--bg-app); }

/* ---------- Sidebar ---------- */

aside {
    width:360px; min-width:360px;
    background:var(--bg-aside);
    display:flex; flex-direction:column;
    border-right:1px solid var(--border);
    position:relative; z-index:5;
}

.aside-header {
    display:flex; align-items:center; gap:12px;
    padding:8px 12px 8px 16px; min-height:56px;
}

.burger {
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:40px; height:40px; margin-left:-8px; padding:0 10px;
    border-radius:50%; cursor:pointer; transition:background 0.15s;
}
.burger:hover { background:var(--bg-hover); }
.burger span { display:block; width:18px; height:2px; background:var(--text-secondary); border-radius:2px; }

.aside-header h1 { flex:1; font-size:19px; font-weight:500; }

.aside-icons,
.main-header-right { display:flex; gap:2px; }
.aside-icons span,
.main-header-right span {
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; cursor:pointer; color:var(--text-secondary);
    transition:background 0.15s; user-select:none;
}
.aside-icons span:hover,
.main-header-right span:hover { background:var(--bg-hover); }

.search-bar { padding:0 12px 8px; }
.search-bar input {
    width:100%; padding:10px 16px; background:var(--bg-search);
    border:2px solid transparent; border-radius:22px;
    color:var(--text); font-size:15px; outline:none; font-family:inherit;
}
.search-bar input:focus { border-color:var(--accent); background:var(--bg-aside); }
.search-bar input::placeholder { color:var(--text-muted); }

.chat-tabs {
    display:flex; gap:0; padding:0 8px; border-bottom:1px solid var(--border);
}
.tab {
    position:relative; padding:10px 14px 12px; font-size:14px; font-weight:500;
    cursor:pointer; color:var(--text-secondary); transition:color 0.15s; user-select:none;
    border-radius:8px 8px 0 0;
}
.tab:hover:not(.active) { background:var(--bg-hover); }
.tab.active { color:var(--accent); }
.tab.active::after {
    content:''; position:absolute; left:10px; right:10px; bottom:0;
    height:3px; border-radius:3px 3px 0 0; background:var(--accent);
}

.chat-list { flex:1; overflow-y:auto; padding:6px 8px; }

.chat-item {
    display:flex; align-items:center; gap:10px;
    padding:8px 9px; border-radius:10px; cursor:pointer;
}
.chat-item:hover { background:var(--bg-hover); }
.chat-item.active { background:var(--bg-active); }
.chat-item.active .chat-name,
.chat-item.active .chat-msg,
.chat-item.active .chat-time { color:var(--text-active); }
.chat-item.active .chat-unread { background:var(--text-active); color:var(--bg-active); }
.chat-item.active .avatar.online-dot::after { border-color:var(--bg-active); }

.avatar {
    width:54px; height:54px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:500; font-size:20px; color:#fff; flex-shrink:0;
    background:var(--bg-search);
}
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar.small { width:42px; height:42px; font-size:16px; }
.avatar.tiny { width:32px; height:32px; font-size:12px; }

.online-dot { position:relative; }
.online-dot::after {
    content:''; position:absolute; bottom:1px; right:1px;
    width:14px; height:14px; border-radius:50%;
    background:var(--online); border:3px solid var(--bg-aside);
}
.avatar.small.online-dot::after { width:12px; height:12px; border-width:2px; }

.chat-preview { flex:1; min-width:0; }
.chat-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:3px; }
.chat-name {
    font-size:16px; font-weight:500; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-time { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.chat-bottom { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.chat-msg {
    font-size:15px; color:var(--text-secondary);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1;
}
.chat-unread {
    background:var(--unread); color:#fff; font-size:13px; font-weight:500;
    padding:0 7px; height:22px; line-height:22px; border-radius:11px;
    min-width:22px; text-align:center;
}

.current-user {
    padding:8px 12px; border-top:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    background:var(--bg-aside); font-size:15px;
}
.cu-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; font-weight:500; }
.cu-left span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cu-right { display:flex; align-items:center; gap:6px; }
.cu-right span {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--text-secondary); border-radius:50%; transition:background 0.15s;
}
.cu-right span:hover { background:var(--bg-hover); }
.current-user button {
    background:transparent; border:none; color:var(--danger); padding:6px 10px;
    border-radius:8px; cursor:pointer; font-size:14px; font-weight:500; font-family:inherit;
    transition:background 0.15s;
}
.current-user button:hover { background:var(--bg-hover); }

/* ---------- Conversation ---------- */

main {
    flex:1; min-width:0; display:flex; flex-direction:column; position:relative;
    background:var(--bg-main); background-image:var(--bg-wallpaper);
    background-attachment:fixed;
}

.no-chat {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:4px;
}
.no-chat-icon { display:none; }
.no-chat h3 { display:none; }
.no-chat p {
    font-size:14px; font-weight:500; color:#fff;
    background:rgba(0,0,0,0.3); padding:4px 12px; border-radius:14px;
}

.chat-view { flex:1; min-height:0; display:flex; flex-direction:column; }

.main-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 12px 6px 20px; min-height:56px;
    border-bottom:1px solid var(--border); background:var(--bg-aside);
}
.main-header-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.main-header-left > div:last-child { min-width:0; }
.main-header-left h2 {
    font-size:16px; font-weight:500; line-height:1.3;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.status { font-size:14px; color:var(--text-secondary); }
.status.online { color:var(--accent); }
.status.offline { color:var(--text-secondary); }
.status.typing { color:var(--accent); }

.chat-search {
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; background:var(--bg-aside); border-bottom:1px solid var(--border);
}
.chat-search input {
    flex:1; padding:9px 16px; background:var(--bg-search);
    border:none; border-radius:20px; color:var(--text); font-size:15px; outline:none;
    font-family:inherit;
}
.chat-search input::placeholder { color:var(--text-muted); }
.chat-search span {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--text-secondary); border-radius:50%;
}
.chat-search span:hover { background:var(--bg-hover); }

.pinned-bar {
    display:flex; align-items:center; gap:10px;
    padding:6px 12px 6px 20px; background:var(--bg-aside);
    border-bottom:1px solid var(--border); cursor:pointer;
}
.pinned-bar:hover { background:var(--bg-hover); }
.pin-icon { display:none; }
.pin-info {
    flex:1; min-width:0; display:flex; flex-direction:column;
    border-left:2px solid var(--accent); padding-left:8px;
}
.pin-info span:first-child { font-size:14px; font-weight:500; color:var(--accent); }
.pin-info span:last-child {
    font-size:14px; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pin-close {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--text-secondary); border-radius:50%;
}
.pin-close:hover { background:var(--bg-hover); }

.msg.pinned-msg .msg-bubble { box-shadow:0 0 0 2px var(--accent); }
.pin-badge { font-size:11px; margin-right:2px; }

.back-btn {
    display:none; width:40px; height:40px; margin-left:-12px;
    align-items:center; justify-content:center;
    border-radius:50%; cursor:pointer; color:var(--text-secondary);
}
.back-btn:hover { background:var(--bg-hover); }

.messages {
    flex:1; overflow-y:auto; overflow-x:hidden;
    padding:12px max(16px, calc((100% - 728px) / 2)) 8px;
    display:flex; flex-direction:column; gap:2px;
}

.date-divider {
    position:sticky; top:4px; z-index:2;
    display:flex; justify-content:center; margin:10px 0 8px;
    pointer-events:none;
}
.date-divider span {
    font-size:14px; font-weight:500; color:#fff;
    background:rgba(0,0,0,0.25); padding:2px 10px; border-radius:12px;
}
:root:not([data-theme="light"]) .date-divider span { background:rgba(0,0,0,0.45); }

.msg { display:flex; max-width:min(75%, 480px); position:relative; animation:msgIn 0.18s ease-out; }
@keyframes msgIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.msg-left { align-self:flex-start; }
.msg-right { align-self:flex-end; }
.msg.tail { margin-bottom:6px; }

.msg-bubble {
    position:relative; min-width:64px;
    padding:6px 10px 6px 11px; border-radius:var(--bubble-radius);
    box-shadow:var(--bubble-shadow); line-height:1.35;
}
.msg-left .msg-bubble { background:var(--bg-msg-other); }
.msg-right .msg-bubble { background:var(--bg-msg-own); color:var(--text-own); }
.msg-left:not(.tail) .msg-bubble { border-bottom-left-radius:6px; }
.msg-right:not(.tail) .msg-bubble { border-bottom-right-radius:6px; }
.msg-left.continued .msg-bubble { border-top-left-radius:6px; }
.msg-right.continued .msg-bubble { border-top-right-radius:6px; }

/* Bubble tail on the last message of a run */
.msg.tail .msg-bubble::after {
    content:''; position:absolute; bottom:0; width:9px; height:17px;
    background:inherit;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 17'%3E%3Cpath d='M9 0v17H1.5C.4 17-.3 15.8.4 14.9 3.6 10.8 6 6.2 9 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 17'%3E%3Cpath d='M9 0v17H1.5C.4 17-.3 15.8.4 14.9 3.6 10.8 6 6.2 9 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.msg-left.tail .msg-bubble { border-bottom-left-radius:0; }
.msg-left.tail .msg-bubble::after { left:-8px; }
.msg-right.tail .msg-bubble { border-bottom-right-radius:0; }
.msg-right.tail .msg-bubble::after { right:-8px; transform:scaleX(-1); }

.msg-bubble.replying { margin-top:0; }

.reply-badge {
    display:flex; flex-direction:column; padding:3px 8px; margin:2px 0 5px;
    border-left:3px solid var(--sender); border-radius:4px;
    background:rgba(127,127,127,0.1); cursor:pointer;
}
.reply-badge span:first-child { font-size:14px; font-weight:500; color:var(--sender); }
.reply-badge span:last-child {
    font-size:14px; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.msg-right .reply-badge { border-left-color:var(--time-own); }
.msg-right .reply-badge span:first-child { color:var(--time-own); }
.msg-right .reply-badge span:last-child { color:var(--text-own); }

.msg-text { font-size:15px; word-break:break-word; white-space:pre-wrap; }
.msg-sender { font-size:14px; font-weight:500; color:var(--sender); margin-bottom:1px; }
.msg.continued .msg-sender { display:none; }

.msg-file {
    display:flex; align-items:center; gap:10px;
    padding:4px 0; margin-bottom:4px; cursor:pointer; max-width:300px;
}
.msg-file img,
.msg-file video { width:100%; border-radius:10px; display:block; max-height:320px; object-fit:cover; }
.msg-file audio { width:100%; min-width:220px; }
.file-icon {
    width:48px; height:48px; flex-shrink:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent-btn); font-size:22px;
}
.file-info { flex:1; min-width:0; }
.file-name { font-size:15px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-size { font-size:13px; color:var(--time-other); }
.msg-right .file-size { color:var(--time-own); }

.msg-meta {
    display:flex; align-items:center; justify-content:flex-end; gap:3px;
    float:right; margin:4px -2px -2px 10px; position:relative; top:2px;
    user-select:none;
}
.msg-time { font-size:12px; color:var(--time-other); }
.msg-right .msg-time { color:var(--time-own); }
.msg-check { font-size:12px; color:var(--check); letter-spacing:-3px; padding-right:3px; }
.msg-edited { font-size:12px; color:var(--time-other); }
.msg-right .msg-edited { color:var(--time-own); }
.msg-bubble { display:flow-root; }
/* Inline text lets the floated time sit on the last line when it fits */
.msg-text { display:inline; }

.msg-actions {
    display:none; position:absolute; bottom:calc(100% - 4px); z-index:10;
    background:var(--bg-modal); border-radius:10px; padding:4px;
    gap:2px; box-shadow:var(--shadow);
}
.msg-right .msg-actions { right:0; }
.msg-left .msg-actions { left:0; }
@media (hover: hover) {
    .msg:hover .msg-actions { display:flex; }
}
.msg-actions span {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    border-radius:8px; cursor:pointer; font-size:15px;
}
.msg-actions span:hover { background:var(--bg-hover); }

.reply-preview {
    display:flex; align-items:center; gap:10px;
    margin:0 max(16px, calc((100% - 728px) / 2));
    padding:8px 8px 8px 14px; background:var(--bg-input);
    border-radius:12px 12px 0 0; border-bottom:1px solid var(--border);
}
.reply-info {
    flex:1; min-width:0; display:flex; flex-direction:column;
    border-left:2px solid var(--accent); padding-left:8px;
}
.reply-label { font-size:14px; font-weight:500; color:var(--accent); }
.reply-text { font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reply-close {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; border-radius:50%; color:var(--text-secondary);
}
.reply-close:hover { background:var(--bg-hover); }

.input-bar {
    display:flex; align-items:flex-end; gap:8px;
    padding:4px max(16px, calc((100% - 728px) / 2)) 16px;
}
.input-wrapper {
    flex:1; min-width:0; display:flex; align-items:center; gap:4px; min-height:54px;
    background:var(--bg-input); border-radius:16px; padding:0 8px 0 4px;
    box-shadow:var(--bubble-shadow);
}
.reply-preview[style*="flex"] + .recording-bar + .input-bar .input-wrapper,
.reply-preview[style*="flex"] + .input-bar .input-wrapper { border-top-left-radius:0; border-top-right-radius:0; }
.input-wrapper input {
    flex:1; min-width:0; padding:14px 4px; background:none; border:none; outline:none;
    color:var(--text); font-size:16px; font-family:inherit;
}
.input-wrapper input::placeholder { color:var(--text-muted); }

.input-emoji,
.attach-btn {
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; border-radius:50%; cursor:pointer; user-select:none;
    color:var(--text-muted); transition:color 0.15s;
}
.input-emoji:hover,
.attach-btn:hover { color:var(--accent); }

.mic-btn,
.send-btn {
    width:54px; height:54px; flex-shrink:0; border-radius:50%; border:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-input); color:var(--accent); cursor:pointer;
    box-shadow:var(--bubble-shadow); transition:background 0.15s, color 0.15s;
}
.mic-btn:hover,
.send-btn:hover { background:var(--accent-btn); color:var(--on-accent); }
.mic-btn.active { background:var(--danger); color:#fff; }
/* One round button, as in Telegram: mic while empty, send once there is something to send */
.input-bar:not(.has-content) .send-btn,
.input-bar.has-content .mic-btn { display:none; }
.send-btn:disabled { opacity:0.5; cursor:default; }

.recording-bar {
    display:flex; align-items:center; gap:8px;
    margin:0 max(16px, calc((100% - 728px) / 2)) 4px;
    padding:8px 8px 8px 16px; background:var(--bg-input); border-radius:12px;
    font-size:14px; color:var(--text);
}
.rec-dot {
    width:10px; height:10px; border-radius:50%; background:var(--danger);
    animation:pulse 1s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.recording-bar button {
    margin-left:auto; background:var(--danger); border:none; color:#fff;
    padding:6px 16px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:500;
    font-family:inherit;
}

/* ---------- Polls, code, badges ---------- */

.poll-multiple-label {
    display:flex; align-items:center; gap:8px; margin-bottom:12px;
    font-size:14px; color:var(--text-secondary);
}
.modal-label {
    display:block; font-size:13px; color:var(--text-secondary);
    margin-bottom:4px; text-align:left;
}
.modal-content select {
    width:100%; padding:12px 14px; background:var(--bg-modal);
    border:1px solid var(--border); border-radius:10px; color:var(--text);
    font-size:15px; outline:none; font-family:inherit; margin-bottom:12px;
}

.msg-poll { min-width:240px; max-width:320px; }
.poll-question { font-size:15px; font-weight:500; margin-bottom:8px; word-break:break-word; }
.poll-option {
    position:relative; display:flex; align-items:center; gap:8px;
    padding:8px 10px; border-radius:8px; margin-bottom:4px;
    background:rgba(127,127,127,0.12); cursor:pointer; overflow:hidden;
    border:1px solid transparent;
}
.poll-option.mine { border-color:var(--accent); }
.poll-option:hover { background:rgba(127,127,127,0.2); }
.poll-bar {
    position:absolute; inset:0; width:0; background:var(--accent);
    opacity:0.2; transition:width 0.4s ease; pointer-events:none;
}
.poll-opt-text { font-size:14px; position:relative; flex:1; word-break:break-word; }
.poll-count { font-size:12px; color:var(--text-secondary); position:relative; white-space:nowrap; }
.poll-total { font-size:12px; color:var(--text-secondary); margin-top:4px; }

.md-code {
    background:rgba(127,127,127,0.18); padding:1px 5px; border-radius:4px;
    font-family:'Roboto Mono',Consolas,monospace; font-size:14px;
}
.md-code-block {
    display:block; background:rgba(127,127,127,0.15); padding:8px 10px;
    border-left:3px solid var(--accent); border-radius:6px;
    font-family:'Roboto Mono',Consolas,monospace; font-size:14px;
    margin:4px 0; white-space:pre-wrap;
}

.sched-badge { font-size:11px; color:var(--accent); font-weight:500; }
.channel-tag { display:none; }

.menu-list { display:flex; flex-direction:column; gap:2px; }
.menu-item {
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; border-radius:8px; cursor:pointer;
    font-size:15px; user-select:none;
}
.menu-item:hover { background:var(--bg-hover); }
.menu-item.danger { color:var(--danger); }
.menu-item.group-only,
.menu-item.private-only,
.menu-item.channel-only,
.menu-item.owner-only { display:none; }

.media-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
    max-height:50vh; overflow-y:auto;
}
.media-item { aspect-ratio:1; overflow:hidden; background:var(--bg-search); cursor:pointer; position:relative; }
.media-item img, .media-item video { width:100%; height:100%; object-fit:cover; }

.reaction-row { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.reaction {
    display:inline-flex; align-items:center; gap:4px;
    background:rgba(127,127,127,0.15); border:none;
    padding:2px 8px; border-radius:14px; font-size:14px; font-weight:500;
    cursor:pointer; user-select:none; color:var(--sender);
}
.reaction.mine { background:var(--accent-btn); color:var(--on-accent); }
.reaction:hover { filter:brightness(1.08); }
.msg-right .reaction { color:var(--time-own); background:rgba(127,127,127,0.15); }
.msg-right .reaction.mine { background:var(--time-own); color:var(--bg-msg-own); }

/* ---------- Modals ---------- */

.modal {
    position:fixed; inset:0; background:rgba(0,0,0,0.5);
    display:flex; align-items:center; justify-content:center; z-index:100;
}
.modal-content {
    background:var(--bg-modal);
    border-radius:var(--radius-lg); padding:32px 28px; text-align:center;
    max-width:360px; width:90%; box-shadow:var(--shadow);
    animation:modalIn 0.2s ease-out;
}
.modal-content.small { max-width:380px; padding:20px; text-align:left; }
.modal-content.small h3 { margin-bottom:16px; font-size:20px; font-weight:500; }
@keyframes modalIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:none} }

.modal-icon {
    width:120px; height:120px; margin:0 auto 20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent-btn); color:#fff;
}
.modal-icon .icon { width:64px; height:64px; stroke-width:1.5; }
.modal-content h2 { font-size:28px; font-weight:500; margin-bottom:8px; }
.modal-content p { color:var(--text-secondary); font-size:15px; margin-bottom:24px; line-height:1.4; }
.modal-content input {
    width:100%; padding:14px 16px; background:var(--bg-modal);
    border:1px solid var(--border); border-radius:10px; color:var(--text);
    font-size:16px; outline:none; font-family:inherit; margin-bottom:12px;
}
.modal-content input:hover { border-color:var(--text-muted); }
.modal-content input:focus { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.modal-content input[type="checkbox"] { width:auto; margin:0; accent-color:var(--accent); }
.modal-content button {
    width:100%; padding:14px; border:none; border-radius:10px;
    background:var(--accent-btn); color:var(--on-accent); font-size:15px; font-weight:500;
    text-transform:uppercase; letter-spacing:0.02em;
    cursor:pointer; transition:background 0.15s; font-family:inherit;
}
.modal-content button:hover { background:var(--accent-hover); }
.modal-content button.danger { background:transparent; color:var(--danger); }
.modal-content button.danger:hover { background:var(--bg-hover); }
.modal-content button.btn-soft { background:transparent; color:var(--accent); }
.modal-content button.btn-soft:hover { background:var(--bg-hover); }
.poll-opt-input,
#pollOptions input {
    width:100%; padding:12px 14px; background:var(--bg-modal);
    border:1px solid var(--border); border-radius:10px; color:var(--text);
    font-size:15px; outline:none; font-family:inherit; margin-bottom:8px;
}

.modal-error { color:var(--danger); font-size:14px; margin-bottom:8px; min-height:18px; }

.auth-switch {
    display:block; margin-top:16px; font-size:14px; color:var(--accent);
    cursor:pointer;
}
.auth-switch:hover { text-decoration:underline; }

.user-list { max-height:240px; overflow-y:auto; margin:4px -8px 0; }
.user-item {
    display:flex; align-items:center; gap:12px;
    padding:6px 8px; border-radius:10px; cursor:pointer; font-size:15px; font-weight:500;
}
.user-item:hover { background:var(--bg-hover); }
.user-item .avatar { width:42px; height:42px; font-size:16px; }
.user-item.selected { background:var(--bg-hover); }

.selected-users { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px; }
.selected-users span {
    background:var(--bg-search); color:var(--text); padding:5px 12px;
    border-radius:16px; font-size:14px; cursor:pointer;
}
.selected-users span:hover { background:var(--danger); color:#fff; }

.profile-avatar {
    position:relative; cursor:pointer;
    width:100px; height:100px; border-radius:50%; margin:0 auto 16px;
    background:var(--bg-search); display:flex; align-items:center; justify-content:center;
    font-size:40px; color:#fff; font-weight:500;
}
.profile-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-change {
    position:absolute; bottom:0; right:0; background:var(--accent-btn); color:#fff;
    width:32px; height:32px; border-radius:50%; font-size:14px;
    display:flex; align-items:center; justify-content:center;
    border:3px solid var(--bg-modal);
}

.typing-indicator { font-size:14px; color:var(--accent); }

.toast {
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
    background:rgba(0,0,0,0.75); color:#fff;
    padding:10px 20px; border-radius:10px; font-size:14px;
    z-index:200; display:none; animation:msgIn 0.2s ease-out;
    white-space:nowrap;
}

/* Emoji / reaction pickers are created in script.js */
.emoji-picker {
    position:fixed; z-index:50;
    display:grid; grid-template-columns:repeat(5, 1fr); gap:2px; padding:8px;
    background:var(--bg-modal); border-radius:12px; box-shadow:var(--shadow);
}
.emoji-picker span {
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    border-radius:8px; font-size:22px; cursor:pointer;
}
.emoji-picker span:hover { background:var(--bg-hover); }

/* ---------- Mobile bottom nav ---------- */

.bottom-nav {
    display:none;
    position:fixed; bottom:0; left:0; right:0; z-index:30;
    background:var(--bg-aside); border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom);
}
.bn-item {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:8px 0 6px; background:none; border:none; cursor:pointer;
    color:var(--text-secondary); font-family:inherit;
}
.bn-item .bn-icon { display:flex; line-height:1; }
.bn-item .bn-label { font-size:11px; font-weight:500; }
.bn-item.active { color:var(--accent); }

@media (max-width: 1024px) {
    aside { width:300px; min-width:300px; }
}

@media (max-width: 768px) {
    .app { flex-direction:column; overflow:hidden; }
    aside {
        width:100%; min-width:100%; height:calc(100dvh - 56px); position:absolute;
        top:0; left:0; z-index:10;
        transition:transform 0.25s ease;
    }
    aside.hidden { transform:translateX(-100%); }
    main { width:100%; height:calc(100dvh - 56px); }
    .bottom-nav { display:flex; position:static; }
    .back-btn { display:flex; }
    .main-header { padding:6px 8px 6px 16px; }
    .messages { padding:8px 10px; }
    .msg { max-width:85%; }
    .input-bar { padding:4px 8px 8px; gap:6px; }
    .reply-preview, .recording-bar { margin:0 8px; }
    .input-wrapper { min-height:48px; }
    .mic-btn, .send-btn { width:48px; height:48px; }
    .media-grid { grid-template-columns:repeat(4,1fr); }
    .msg-poll { min-width:220px; }
}

@media (max-width: 480px) {
    .aside-header { padding:6px 8px 6px 12px; }
    .avatar { width:50px; height:50px; font-size:18px; }
    .avatar.small { width:40px; height:40px; font-size:15px; }
    .chat-msg { font-size:14px; }
    .modal-content { padding:24px 20px; }
    .modal-content.small { padding:16px; }
}