:root {
    --primary: #7c83ff;
    --primary-dark: #6268df;
    --primary-soft: rgba(124, 131, 255, .17);
    --edited: #8a641e;
    --edited-border: #d69a2d;
    --deleted: #53242a;
    --deleted-border: #ff7b72;
}

body[data-accent="blue"] { --primary: #4f9cff; --primary-dark: #2e78d8; --primary-soft: rgba(79, 156, 255, .18); }
body[data-accent="green"] { --primary: #37c871; --primary-dark: #249d55; --primary-soft: rgba(55, 200, 113, .18); }
body[data-accent="pink"] { --primary: #ff6fb1; --primary-dark: #d74d8d; --primary-soft: rgba(255, 111, 177, .18); }
body[data-accent="amber"] { --primary: #f5a623; --primary-dark: #c98212; --primary-soft: rgba(245, 166, 35, .18); }

body[data-theme="dark"] {
    --bg-main: #111217;
    --bg-soft: #171821;
    --bg-card: #1f202b;
    --bg-card-2: #252635;
    --bg-input: #151620;
    --border: #34364a;
    --border-soft: rgba(255,255,255,.08);
    --text-main: #f4f4f7;
    --text-muted: #a6a8b8;
    --text-soft: #d7d8e2;
    --bubble-me: #3d4173;
    --bubble-other: #252635;
    --shadow: 0 18px 55px rgba(0,0,0,.35);
}

body[data-theme="light"] {
    --bg-main: #f4f5f8;
    --bg-soft: #ffffff;
    --bg-card: #ffffff;
    --bg-card-2: #f1f2f7;
    --bg-input: #f5f6fa;
    --border: #d8dae7;
    --border-soft: rgba(20, 24, 38, .10);
    --text-main: #1d1e27;
    --text-muted: #626779;
    --text-soft: #303342;
    --bubble-me: #e7e9ff;
    --bubble-other: #ffffff;
    --shadow: 0 16px 45px rgba(20,24,38,.12);
    --edited: #fff2cc;
    --edited-border: #d69a2d;
    --deleted: #ffe5e3;
    --deleted-border: #d33f35;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    overflow: hidden;
}
button, input, textarea { font-family: inherit; }
.hidden { display: none !important; }

.login-page {
    width: 100%; height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 22px;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 28%, transparent), transparent 34%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--primary-dark) 25%, transparent), transparent 36%),
        linear-gradient(135deg, var(--bg-main), var(--bg-soft));
}
.login-card {
    width: 100%; max-width: 390px;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    border: 1px solid var(--border-soft);
    border-radius: 28px;
    box-shadow: var(--shadow);
    padding: 34px;
    backdrop-filter: blur(18px);
}
.brand-logo {
    width: 74px; height: 74px; margin: 0 auto 30px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    position: relative;
    box-shadow: 0 18px 35px color-mix(in srgb, var(--primary) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand-logo::before {
    content: ""; position: absolute; width: 36px; height: 27px;
    border-radius: 16px 16px 16px 5px; background: #fff;
    top: 19px; left: 16px; box-shadow: 16px 15px 0 rgba(255,255,255,.48);
}
.brand-logo::after {
    content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary); top: 28px; left: 27px;
    box-shadow: 11px 0 0 var(--primary), 22px 0 0 var(--primary);
}
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; font-weight: 650; }
.form-input, .modal-input, .modal-textarea {
    width: 100%; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-main);
    border-radius: 15px; padding: 14px 15px; font-size: 15px; outline: none; transition: .2s ease;
}
.form-input:focus, .modal-input:focus, .modal-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.modal-textarea { min-height: 110px; resize: vertical; }
.error-box { background: rgba(255,123,114,.12); color: #ff7b72; border: 1px solid rgba(255,123,114,.28); border-radius: 15px; padding: 12px 14px; font-size: 14px; margin-bottom: 18px; }

.primary-btn, .secondary-btn, .tool-btn {
    border: none; border-radius: 14px; cursor: pointer; transition: .2s ease; font-weight: 750;
}
.primary-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff;
    padding: 11px 19px; box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 24%, transparent);
}
.primary-btn.full { width: 100%; padding: 14px 15px; }
.primary-btn:hover, .secondary-btn:hover, .tool-btn:hover { transform: translateY(-1px); }
.primary-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.secondary-btn {
    background: var(--bg-card); color: var(--text-soft); border: 1px solid var(--border); padding: 10px 13px; font-size: 13px;
}
.tool-btn { background: var(--bg-card-2); color: var(--text-main); padding: 8px 11px; border: 1px solid var(--border-soft); }

.app-shell { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: 100vh; width: 100%; background: var(--bg-main); }
.sidebar { background: var(--bg-soft); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; min-width: 0; }
.sidebar-header { padding: 24px 22px 18px; border-bottom: 1px solid var(--border-soft); }
.sidebar-header h1 { font-size: 22px; font-weight: 780; margin: 0 0 15px; }
.search-box { width: 100%; background: var(--bg-input); border: 1px solid var(--border-soft); border-radius: 13px; padding: 12px 14px; outline: none; color: var(--text-muted); font-size: 14px; }
.chat-list { padding: 14px; overflow-y: auto; }
.chat-card { display: flex; gap: 12px; align-items: center; padding: 15px; border-radius: 17px; background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent); }
.avatar, .profile-avatar, .mini-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 780; }
.avatar { width: 46px; height: 46px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 25%, transparent); }
.chat-card-info { min-width: 0; flex: 1; }
.chat-name { font-size: 15px; font-weight: 760; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-preview { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-box { margin-top: auto; padding: 16px; border-top: 1px solid var(--border-soft); background: rgba(255,255,255,.02); }
.profile-label { font-size: 12px; color: var(--text-muted); margin-bottom: 9px; }
.profile-user { display: flex; gap: 11px; align-items: center; }
.profile-avatar { width: 38px; height: 38px; background: var(--primary-soft); color: var(--primary); }
.profile-name { font-size: 14px; font-weight: 720; line-height: 1.25; }
.profile-username { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.chat-panel { display: flex; flex-direction: column; min-width: 0; background: radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 10%, transparent), transparent 32%), var(--bg-main); }
.topbar { height: 76px; padding: 0 25px; background: color-mix(in srgb, var(--bg-soft) 88%, transparent); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; backdrop-filter: blur(16px); }
.topbar-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.topbar-title { font-size: 18px; font-weight: 760; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 35vw; }
.topbar-subtitle { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block; box-shadow: 0 0 0 5px rgba(74,222,128,.10); }
.status-dot.offline { background: #9ca3af; box-shadow: none; }
.topbar-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.topbar-actions form { margin: 0; }

.messages { flex: 1; overflow-y: auto; padding: 30px 7%; display: flex; flex-direction: column; gap: 14px; }
.messages::-webkit-scrollbar, .chat-list::-webkit-scrollbar { width: 8px; }
.messages::-webkit-scrollbar-thumb, .chat-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.date-divider { align-self: center; background: var(--bg-card); color: var(--text-muted); font-size: 12px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-soft); margin-bottom: 6px; }
.message-row { display: flex; gap: 10px; max-width: 74%; align-items: flex-end; scroll-margin: 100px; }
.message-row.me { align-self: flex-end; flex-direction: row-reverse; }
.message-row.other { align-self: flex-start; }
.message-row.highlight .message-bubble { outline: 3px solid var(--primary); }
.mini-avatar { width: 32px; height: 32px; background: var(--primary-soft); color: var(--primary); font-size: 12px; }
.message-block { display: flex; flex-direction: column; gap: 5px; }
.message-bubble { border-radius: 17px; padding: 11px 13px 9px; box-shadow: 0 12px 28px rgba(0,0,0,.18); border: 1px solid var(--border-soft); min-width: 90px; word-break: break-word; }
.message-row.me .message-bubble { background: var(--bubble-me); border-bottom-right-radius: 6px; }
.message-row.other .message-bubble { background: var(--bubble-other); border-bottom-left-radius: 6px; }
.message-bubble.edited { background: var(--edited) !important; border-color: var(--edited-border) !important; }
.message-bubble.deleted { background: var(--deleted) !important; border-color: var(--deleted-border) !important; color: var(--text-main); font-style: italic; }
.message-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; display: flex; gap: 7px; align-items: center; }
.message-text { font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.message-image { display: block; max-width: min(360px, 64vw); max-height: 360px; border-radius: 14px; margin-top: 8px; cursor: zoom-in; object-fit: cover; border: 1px solid var(--border-soft); }
.reply-card { border-left: 3px solid var(--primary); background: rgba(255,255,255,.07); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; }
.reply-card-title { font-size: 12px; font-weight: 800; color: var(--primary); margin-bottom: 2px; }
.reply-card-text { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 310px; }
.message-actions { display: flex; gap: 7px; opacity: 0; pointer-events: none; transition: .15s ease; }
.message-row:hover .message-actions { opacity: 1; pointer-events: auto; }
.message-action { border: 1px solid var(--border-soft); background: var(--bg-card); color: var(--text-muted); border-radius: 999px; padding: 5px 8px; font-size: 11px; cursor: pointer; }
.message-action:hover { color: var(--text-main); border-color: var(--primary); }
.read-status { font-size: 11px; color: var(--text-muted); align-self: flex-end; padding: 0 5px; }
.read-status.seen { color: var(--primary); }

.empty-state { margin: auto; text-align: center; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 22px; padding: 30px; box-shadow: var(--shadow); max-width: 420px; }
.empty-state h2 { margin: 0 0 8px; color: var(--text-main); font-size: 20px; }
.empty-state p { margin: 0; line-height: 1.45; font-size: 14px; }

.typing-indicator { margin: 0 7%; color: var(--text-muted); font-size: 13px; padding-bottom: 6px; }
.typing-dots i { display: inline-block; width: 5px; height: 5px; margin-left: 3px; border-radius: 50%; background: var(--text-muted); animation: bounce 1s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .12s; }
.typing-dots i:nth-child(3) { animation-delay: .24s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }

.composer-wrap { padding: 12px 7% 24px; background: linear-gradient(to top, var(--bg-main) 82%, transparent); flex-shrink: 0; }
.composer-wrap.dragging { outline: 2px dashed var(--primary); outline-offset: -10px; }
.composer { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 20px; box-shadow: var(--shadow); padding: 12px; }
.composer textarea { width: 100%; min-height: 58px; max-height: 140px; resize: none; border: none; outline: none; background: transparent; font-size: 15px; line-height: 1.45; color: var(--text-main); padding: 7px 8px; }
.composer textarea::placeholder { color: var(--text-muted); }
.composer-footer { display: flex; justify-content: space-between; align-items: center; padding: 7px 4px 0; gap: 12px; }
.composer-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.composer-note { font-size: 12px; color: var(--text-muted); }
.reply-preview, .attachment-preview { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 10px 12px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reply-preview { border-left: 4px solid var(--primary); }
.reply-preview-title { color: var(--primary); font-weight: 800; font-size: 13px; margin-bottom: 2px; }
.reply-preview-text { color: var(--text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55vw; }
.reply-preview button, .attachment-preview button { background: transparent; color: var(--text-muted); border: none; cursor: pointer; font-size: 18px; }
.attachment-preview img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; }
.attachment-info { flex: 1; min-width: 0; font-size: 13px; }
#attachmentLabel { font-weight: 800; }
#attachmentName { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.floating-panel { position: fixed; z-index: 40; bottom: 110px; left: 40%; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 18px; box-shadow: var(--shadow); padding: 12px; max-width: min(420px, 92vw); max-height: 330px; overflow-y: auto; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.emoji-item { border: none; background: var(--bg-card-2); border-radius: 10px; padding: 8px; font-size: 20px; cursor: pointer; }
.gif-grid { display: grid; grid-template-columns: repeat(3, 120px); gap: 8px; }
.gif-item { border: 1px solid var(--border-soft); background: var(--bg-card-2); border-radius: 12px; padding: 0; overflow: hidden; cursor: pointer; }
.gif-item img { width: 120px; height: 90px; object-fit: cover; display: block; }

.modal-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-card { width: min(460px, 94vw); background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 22px; box-shadow: var(--shadow); padding: 22px; }
.modal-title { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.modal-text { color: var(--text-muted); font-size: 14px; line-height: 1.45; margin: 0 0 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.theme-options { display: grid; gap: 14px; }
.theme-row { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-choice { border: 1px solid var(--border); background: var(--bg-card-2); color: var(--text-main); border-radius: 12px; padding: 9px 12px; cursor: pointer; }
.theme-choice.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.image-viewer { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.86); display: flex; flex-direction: column; }
.image-viewer-toolbar { height: 62px; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 10px; }
.image-viewer-toolbar button { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.12); color: #fff; border-radius: 12px; padding: 9px 14px; cursor: pointer; }
.image-viewer-stage { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 20px; }
.image-viewer-stage img { max-width: 90vw; max-height: 82vh; transform-origin: center center; border-radius: 14px; }
.toast { position: fixed; z-index: 110; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-soft); border-radius: 999px; box-shadow: var(--shadow); padding: 10px 16px; font-size: 14px; }

@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .topbar { height: auto; min-height: 76px; padding: 12px 16px; align-items: flex-start; }
    .topbar-actions { gap: 6px; }
    .topbar-actions .secondary-btn { padding: 8px 10px; font-size: 12px; }
    .topbar-title { max-width: 45vw; font-size: 16px; }
    .messages { padding: 20px 16px; }
    .composer-wrap { padding: 10px 16px 18px; }
    .message-row { max-width: 88%; }
    .composer-note { display: none; }
    .floating-panel { left: 16px; right: 16px; bottom: 105px; }
    .gif-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gif-item img { width: 100%; }
}