:root {
  color-scheme: dark;
  --bg: #150d0b;
  --sidebar: #1d120f;
  --panel: #241611;
  --panel-soft: #321b18;
  --line: #56332c;
  --text: #f8eae2;
  --muted: #d4ada0;
  --accent: #ff7a45;
  --accent-rgb: 255, 122, 69;
  --accent-soft: rgba(var(--accent-rgb), .1);
  --accent-border: rgba(var(--accent-rgb), .12);
  --accent-glow: rgba(var(--accent-rgb), .34);
  --accent-ink: #2a120c;
  --bubble: #2a1814;
  --own: #5f2a1d;
  --danger: #ff9d7d;
  font-family: system-ui, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { min-width: 320px; height: 100vh; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
button, input, textarea { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

.auth-screen { min-height: 100%; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 15%, #1a3533 0, var(--bg) 48%); }
.auth-card { width: min(100%, 420px); padding: 38px; border: 1px solid #ffffff12; border-radius: 22px; background: #171b21eF; box-shadow: 0 24px 90px #0008; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-centered { justify-content: center; margin-bottom: 34px; }
.brand-mark, .empty-logo { display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-family: Manrope, sans-serif; font-weight: 800; }
.brand-mark { width: 40px; height: 40px; border-radius: 13px; font-size: 24px; }
.brand strong, .brand span, .profile-copy strong, .profile-copy span { display: block; }
.brand strong { font: 800 18px system-ui, "Segoe UI", sans-serif; letter-spacing: -.5px; }
.brand span { margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: 1.7px; }
.auth-card h1 { margin: 0; text-align: center; font: 700 25px system-ui, "Segoe UI", sans-serif; }
.auth-card > p { margin: 8px 0 26px; text-align: center; font-size: 13px; }
.stack { display: grid; gap: 16px; }
.stack label { display: grid; gap: 7px; color: #c2c8d0; font-size: 12px; font-weight: 600; }
input, textarea { width: 100%; border: 1px solid var(--line); outline: 0; border-radius: 10px; background: #101419; color: var(--text); transition: border-color .15s, box-shadow .15s; }
input { height: 44px; padding: 0 13px; }
textarea { padding: 12px 13px; resize: vertical; }
input:focus, textarea:focus { border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 0 0 3px var(--accent-soft); }
.button { min-height: 44px; border: 0; border-radius: 10px; cursor: pointer; font-weight: 700; }
.primary { background: var(--accent); color: var(--accent-ink); }
.primary:hover { filter: brightness(1.06); }
.text-button { display: block; margin: 16px auto 0; border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 13px; }
.notice { min-height: 18px; margin: 12px 0 0 !important; color: var(--muted); font-size: 12px !important; text-align: center; }
.notice.error { color: var(--danger); }
.notice.good { color: var(--accent); }
.connection { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 26px; color: var(--muted); font-size: 11px; }
.connection i, .online-dot { width: 7px; height: 7px; border-radius: 50%; background: #e5b85c; }
.connection.connected i, .online-dot { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }

.messenger { display: grid; grid-template-columns: 320px minmax(0, 1fr); width: 100%; height: 100vh; }
.sidebar { display: flex; min-height: 0; flex-direction: column; border-right: 1px solid var(--line); background: var(--sidebar); }
.sidebar-header { height: 72px; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.icon-button { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; font-size: 19px; }
.icon-button:hover { background: #ffffff0c; color: var(--text); }
.icon-button.accent { background: var(--accent-soft); color: var(--accent); font-size: 23px; }
.profile-bar { display: flex; align-items: center; gap: 11px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.avatar { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border: 1px solid #ffffff10; border-radius: 14px; background: linear-gradient(145deg, #783d2c, #3e2925); color: #ffe0d0; font: 700 15px system-ui, "Segoe UI", sans-serif; }
.profile-copy { min-width: 0; flex: 1; }
.profile-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.side-actions { padding: 14px 14px 2px; }
.add-contact { display: flex; gap: 7px; }
.add-contact input { height: 38px; min-width: 0; font-size: 12px; }
.add-contact .icon-button { width: 38px; height: 38px; }
.side-action { width: 100%; margin-top: 7px; padding: 8px 0; border: 0; background: transparent; color: var(--muted); text-align: left; cursor: pointer; font-size: 11px; }
.side-action:hover { color: var(--accent); }
.list-heading { display: flex; justify-content: space-between; padding: 18px 20px 9px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.list-heading span:last-child { color: #59616d; }
.contact-list { min-height: 0; flex: 1; overflow: auto; padding: 3px 8px 12px; }
.contact { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.contact:hover { background: #ffffff08; }
.contact.active { background: var(--panel-soft); }
.contact .avatar { width: 42px; height: 42px; }
.contact-copy { min-width: 0; flex: 1; }
.contact-copy strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.contact-copy span { display: block; overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.contact-meta { display: grid; justify-items: end; gap: 7px; color: var(--muted); font-size: 10px; }
.unread { display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #13211d; font-size: 10px; font-weight: 700; }
.sidebar-footer { display: flex; align-items: center; gap: 8px; padding: 15px 20px; border-top: 1px solid var(--line); color: #718078; font-size: 10px; }
.online-dot { width: 6px; height: 6px; }
.admin-panel { max-height: 38%; overflow: auto; border-top: 1px solid var(--line); }
.request-item { margin: 3px 12px 8px; padding: 10px; border-radius: 10px; background: var(--panel); }
.request-item strong { font-size: 12px; }
.request-item p { margin: 5px 0 8px; color: var(--muted); font-size: 11px; }
.request-actions { display: flex; gap: 6px; }
.request-actions button { padding: 5px 8px; border: 0; border-radius: 6px; background: var(--accent-soft); color: var(--accent); cursor: pointer; font-size: 10px; }
.request-actions .reject { background: #ff837d1a; color: var(--danger); }

.chat-area { min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 100%, #301b17 0, var(--bg) 55%); }
.empty-chat { display: grid; flex: 1; align-content: center; justify-items: center; padding: 24px; text-align: center; }
.empty-logo { width: 68px; height: 68px; border-radius: 23px; font-size: 40px; box-shadow: 0 12px 55px var(--accent-soft); }
.empty-chat h2 { margin: 22px 0 7px; font: 700 20px system-ui, "Segoe UI", sans-serif; }
.empty-chat p { margin: 0; color: var(--muted); font-size: 13px; }
.active-chat { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.chat-header { display: flex; align-items: center; gap: 12px; height: 72px; padding: 0 28px; border-bottom: 1px solid var(--line); background: #15191fc9; }
.chat-heading { min-width: 0; flex: 1; }
.chat-heading strong { font-size: 14px; }
.chat-heading span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.message-list { display: flex; flex: 1; flex-direction: column; gap: 7px; overflow: auto; padding: 25px max(24px, calc((100% - 850px) / 2)) 16px; }
.date-divider { display: flex; justify-content: center; margin: 8px 0 12px; }
.date-divider span { padding: 5px 10px; border: 1px solid var(--line); border-radius: 20px; background: #161b22; color: var(--muted); font-size: 10px; }
.message-row { display: flex; flex-direction: column; align-items: flex-start; max-width: min(78%, 620px); }
.message-row.mine { align-self: flex-end; align-items: flex-end; }
.message { padding: 10px 13px 7px; border: 1px solid #ffffff08; border-radius: 15px 15px 15px 4px; background: var(--bubble); box-shadow: 0 4px 13px #0001; }
.mine .message { border-color: var(--accent-border); border-radius: 15px 15px 4px 15px; background: var(--own); }
.reply-preview { margin-bottom: 8px; padding-left: 8px; border-left: 2px solid var(--accent); color: var(--muted); font-size: 10px; }
.message-text { overflow-wrap: anywhere; white-space: pre-wrap; font-size: 13px; line-height: 1.5; }
.message-text, .reaction, .message-actions button, .emoji-option { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif; }
.message-meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 5px; color: #a6b5b0; font-size: 9px; }
.reactions { display: flex; align-self: flex-start; flex-wrap: wrap; gap: 4px; margin: 4px 5px 0; }
.message-row.mine .reactions { align-self: flex-end; }
.reaction { padding: 3px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; font-size: 10px; }
.reaction.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.message-actions { display: none; flex-wrap: wrap; gap: 2px; margin-top: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--sidebar); }
.message-row:not(.mine) .message-actions { align-self: flex-start; }
.message-row.mine .message-actions { align-self: flex-end; }
.message-row:hover .message-actions, .message-row:focus-within .message-actions { display: flex; }
.message-actions button { padding: 3px 4px; border: 0; background: transparent; cursor: pointer; font-size: 12px; }
.message-actions button:hover, .message-actions button:focus-visible { border-radius: 7px; background: var(--accent-soft); outline: 0; }
.media-loading { min-width: 200px; padding: 14px 12px; color: var(--muted); font-size: 11px; }
.image-preview { display: block; width: fit-content; max-width: min(420px, 70vw); max-height: 360px; overflow: hidden; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: zoom-in; }
.message-image { display: block; width: auto; max-width: min(420px, 70vw); max-height: 360px; object-fit: contain; }
.voice-player { display: flex; align-items: center; gap: 12px; width: min(340px, 68vw); min-height: 58px; padding: 9px 12px; border: 1px solid var(--accent-border); border-radius: 16px; background: linear-gradient(135deg, var(--panel-soft), var(--panel)); }
.voice-play { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; padding: 0 0 0 2px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); cursor: pointer; font-size: 14px; }
.voice-play:hover { filter: brightness(1.12); transform: scale(1.04); }
.voice-content { display: grid; min-width: 0; flex: 1; gap: 5px; }
.voice-waveform { display: flex; align-items: center; justify-content: space-between; gap: 3px; height: 28px; cursor: pointer; outline: none; }
.voice-waveform:focus-visible { border-radius: 5px; box-shadow: 0 0 0 2px var(--accent); }
.voice-bar { flex: 1 1 2px; min-width: 2px; max-width: 5px; height: var(--bar-height); border-radius: 4px; background: #87665c; transition: background-color .12s; }
.voice-bar.played { background: var(--accent); }
.voice-time { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.voice-player-error { border-color: var(--danger); }
.image-viewer { position: relative; width: fit-content; max-width: min(94vw, 1200px); max-height: 92vh; padding: 14px; overflow: visible; border: 1px solid var(--line); border-radius: 16px; background: #100b0a; }
.image-viewer::backdrop { background: #050403eF; backdrop-filter: blur(7px); }
.image-viewer img { display: block; max-width: calc(94vw - 28px); max-height: calc(92vh - 28px); object-fit: contain; border-radius: 8px; }
.image-viewer-close { position: absolute; z-index: 1; top: -14px; right: -14px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #ffffff28; border-radius: 50%; background: var(--panel-soft); color: var(--text); cursor: pointer; font-size: 24px; line-height: 1; }
.message-file { display: flex; align-items: center; gap: 10px; min-width: 190px; color: var(--text); text-decoration: none; }
.message-file:hover { color: var(--accent); }
.file-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #ffffff10; font-size: 17px; }
.file-copy { display: grid; gap: 3px; }
.file-copy strong { max-width: 280px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.file-copy span { color: var(--muted); font-size: 10px; }
.typing { min-height: 20px; padding: 0 35px 7px; color: var(--accent); font-size: 11px; }
.typing-dots { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.compose { display: flex; align-items: flex-end; gap: 9px; max-width: 910px; width: calc(100% - 48px); margin: 0 auto; padding: 9px; border: 1px solid #303842; border-radius: 15px; background: #1a1f27; box-shadow: 0 10px 30px #0002; }
.compose textarea { max-height: 130px; min-height: 39px; border: 0; background: transparent; line-height: 1.45; resize: none; }
.compose textarea:focus { box-shadow: none; }
.attach { margin-bottom: 2px; font-size: 23px; transform: rotate(45deg); }
.emoji-picker-wrap { position: relative; flex: 0 0 auto; }
.emoji-toggle { width: 38px; height: 38px; margin-bottom: 2px; font-size: 21px; }
.emoji-picker { position: absolute; z-index: 5; right: -45px; bottom: calc(100% + 12px); display: grid; grid-template-columns: repeat(8, 38px); gap: 3px; width: max-content; max-width: min(330px, calc(100vw - 32px)); max-height: 230px; overflow: auto; padding: 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--sidebar); box-shadow: 0 14px 38px #0007; }
.emoji-option { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-size: 22px; }
.emoji-option:hover, .emoji-option:focus-visible { background: var(--accent-soft); outline: 0; }
.send-button { display: grid; flex: 0 0 auto; place-items: center; width: 37px; height: 37px; margin-bottom: 1px; border: 0; border-radius: 11px; background: var(--accent); color: var(--accent-ink); cursor: pointer; font-size: 21px; font-weight: 700; }
.send-button:hover { filter: brightness(1.07); }
.compose-hint { margin: 7px 0 13px; color: #59616d; text-align: center; font-size: 9px; }

dialog { width: min(92vw, 420px); padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--sidebar); color: var(--text); box-shadow: 0 25px 80px #0009; }
dialog::backdrop { background: #06080bcc; backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.dialog-heading h2 { margin: 5px 0 0; font: 700 22px system-ui, "Segoe UI", sans-serif; }
.eyebrow { color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: 1.4px; }
.toast { position: fixed; right: 22px; bottom: 22px; max-width: min(380px, calc(100vw - 40px)); padding: 12px 16px; border: 1px solid var(--line); border-radius: 11px; background: #202630; box-shadow: 0 10px 30px #0005; font-size: 12px; }
.toast.error { border-color: #ff837d55; color: #ffaaa5; }

body.light { color-scheme: light; --bg: #f3f5f7; --sidebar: #fff; --panel: #f4f6f8; --panel-soft: #edf1f3; --line: #e3e7eb; --text: #202831; --muted: #7b8793; --accent: #c44e22; --accent-rgb: 196, 78, 34; --accent-soft: rgba(var(--accent-rgb), .1); --accent-border: rgba(var(--accent-rgb), .12); --accent-glow: rgba(var(--accent-rgb), .34); --accent-ink: #fff; --bubble: #fff; --own: #f8e3d9; }
body.light .auth-card, body.light .compose, body.light .message, body.light .date-divider span { background-color: #fff; }
body.light .chat-area { background: #f5f7f9; }
body.light .chat-header { background: #ffffffdd; }
body.light input, body.light textarea { background: #fafbfc; }
body.light .voice-player { background: linear-gradient(135deg, #fff, var(--panel)); }

@media (max-width: 720px) {
  body { overflow: auto; }
  .messenger { grid-template-columns: 82px minmax(0, 1fr); min-height: 100vh; height: 100dvh; }
  .sidebar-header { justify-content: center; height: 64px; padding: 0; }
  .sidebar-header .brand > div:last-child, .sidebar-header > .icon-button, .profile-copy, .profile-bar > .icon-button, .side-actions, .list-heading, .contact-copy, .contact-meta, .sidebar-footer, .admin-panel { display: none; }
  .profile-bar { justify-content: center; padding: 12px 0; }
  .contact-list { padding: 5px 7px; }
  .contact { justify-content: center; padding: 8px 0; }
  .contact .avatar { width: 45px; height: 45px; }
  .chat-header { height: 64px; padding: 0 12px; }
  .message-list { padding: 18px 12px; }
  .message-row { max-width: 90%; }
  .compose { width: calc(100% - 20px); gap: 4px; }
  .emoji-picker { right: -45px; grid-template-columns: repeat(7, 36px); }
  .emoji-option { width: 34px; height: 34px; }
  .compose-hint { margin-bottom: 9px; }
  .auth-card { padding: 30px 22px; }
  .voice-player { width: min(310px, 68vw); }
}

@media (hover: none) {
  .message-actions { display: flex; }
}