:root {
  --mn-bg: #0b0e14;
  --mn-panel: #12161f;
  --mn-panel2: #171c28;
  --mn-border: #232a3a;
  --mn-accent: #5b8cff;
  --mn-accent2: #9b5bff;
  --mn-msg-in: #1c2230;
  --mn-msg-out: linear-gradient(135deg, #3d6bff, #8b5bff);
}

* { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; }

body {
  margin: 0;
  background: var(--mn-bg);
  color: #e8eaf0;
  height: 100vh;
  overflow: hidden;
}

/* ===== Auth (Facebook style, light theme) ===== */
.mn-auth { height: 100vh; display: flex; flex-direction: column; background: #f0f2f5; color: #050505; overflow-y: auto; }
.mn-auth-header { padding: 1.4rem 2rem; box-shadow: 0 2px 4px rgba(0,0,0,.1); background: #fff; }
.mn-auth-brand { font-size: 2rem; font-weight: 800; color: #1877f2; letter-spacing: -.5px;
  display: flex; align-items: center; gap: .5rem; }
.mn-auth-logo { width: 40px; height: 40px; border-radius: 12px; font-size: 1.3rem; color: #fff;
  background: linear-gradient(135deg, #1877f2, #9b5bff);
  display: inline-flex; align-items: center; justify-content: center; }
.mn-auth-main { flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; padding: 1rem; flex-wrap: wrap; }
.mn-auth-card { background: #fff; border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.1); padding: 1.25rem 1rem; }
#loginCard { width: 396px; }
#loginCard form { display: flex; flex-direction: column; gap: .75rem; }
.mn-input { width: 100%; border: none; border-radius: 6px; background: #f5f6f7;
  padding: .875rem 1rem; font-size: 1rem; color: #1c1e21; outline: none; font-family: inherit; }
.mn-input:focus { box-shadow: 0 0 0 2px #1877f2; background: #fff; }
.mn-input::placeholder { color: #90949c; }
.mn-btn-login { width: 100%; border: none; border-radius: 6px; background: #1877f2; color: #fff;
  font-size: 1.25rem; font-weight: 700; padding: .625rem; cursor: pointer; transition: background .15s; }
.mn-btn-login:hover { background: #166fe5; }
.mn-auth-error { color: #f02849; font-size: .85rem; min-height: 1.1em; text-align: center; }
.mn-auth-create-card { width: 396px; text-align: center; padding-bottom: 1.75rem; }
.mn-create-text { font-size: 1.125rem; margin: 0 0 1rem; color: #1c1e21; }
.mn-chat-hint { font-size: .8rem; color: #606770; margin: .9rem 0 0; }
.mn-chat-hint a { color: #1877f2; }
.mn-btn-create { width: 100%; border: none; border-radius: 6px; background: #42b72a; color: #fff;
  font-size: 1rem; font-weight: 700; padding: .75rem; cursor: pointer; transition: background .15s; }
.mn-btn-create:hover { background: #36a420; }
.mn-auth-register-card { width: 432px; max-width: 100%; padding: 1.5rem 2rem; }
.mn-register-title { font-size: 2rem; font-weight: 800; margin: 0 0 .25rem; color: #1c1e21; }
.mn-register-sub { color: #606770; margin: 0 0 1.25rem; font-size: .95rem; }
.mn-input-row { display: flex; gap: .75rem; }
.mn-input-row .mn-input { flex: 1; }
.mn-btn-create-lg { font-size: 1.125rem; padding: .875rem; margin-top: .25rem; }
.mn-back-login { display: inline-block; margin-top: 1.25rem; color: #1877f2; font-size: .95rem;
  text-decoration: none; font-weight: 600; }
.mn-back-login:hover { text-decoration: underline; }
.mn-auth-footer { background: #fff; padding: 1.5rem 2rem 2rem; text-align: center; }
.mn-footer-lang { color: #737373; font-size: .8rem; margin: 0 0 .5rem; }
.mn-footer-line { border: none; border-top: 1px solid #dddfe2; margin: 0 0 .75rem; }
.mn-footer-links a { color: #8a8d91; font-size: .75rem; text-decoration: none; margin: 0 .5rem; }
.mn-footer-links a:hover { text-decoration: underline; }
.mn-footer-copy { color: #8a8d91; font-size: .75rem; margin: .75rem 0 0; }
@media (max-width: 900px) {
  .mn-auth-main { flex-direction: column; }
  #loginCard, .mn-auth-create-card, .mn-auth-register-card { width: 100%; max-width: 396px; }
  .mn-auth-register-card { max-width: 432px; }
}
.form-control { background: var(--mn-panel2); border: 1px solid var(--mn-border); color: #e8eaf0; }
.form-control:focus { background: var(--mn-panel2); border-color: var(--mn-accent); color: #e8eaf0;
  box-shadow: 0 0 0 .2rem rgba(91,140,255,.2); }
.input-group-text { background: var(--mn-panel2); border: 1px solid var(--mn-border); color: #889; }
.btn-primary { background: linear-gradient(135deg, var(--mn-accent), var(--mn-accent2)); border: none; }
.btn-primary:hover { filter: brightness(1.12); }

/* Layout */
.chat-app { display: flex; height: 100vh; }

.sidebar {
  width: 340px; min-width: 300px;
  background: var(--mn-panel);
  border-right: 1px solid var(--mn-border);
  display: flex; flex-direction: column;
}
.sidebar-header { padding: 1rem; border-bottom: 1px solid var(--mn-border); }
.user-chip { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem;
  background: var(--mn-panel2); border-radius: 12px; }
.conv-list { flex: 1; overflow-y: auto; }
.sidebar-footer { padding: .8rem 1rem; border-top: 1px solid var(--mn-border); }

.chat-main { flex: 1; display: flex; flex-direction: column; background:
  radial-gradient(800px 400px at 100% 0%, rgba(155,91,255,.07), transparent 60%), var(--mn-bg); }
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.chat-header {
  padding: .8rem 1.2rem; border-bottom: 1px solid var(--mn-border);
  background: rgba(18,22,31,.8); backdrop-filter: blur(8px);
}
.chat-header .avatar { width: 38px; height: 38px; }

/* Conversations */
.conv-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem; cursor: pointer;
  border-bottom: 1px solid rgba(35,42,58,.5);
  transition: background .12s;
}
.conv-item:hover { background: var(--mn-panel2); }
.conv-item.active { background: linear-gradient(90deg, rgba(91,140,255,.15), transparent); border-left: 3px solid var(--mn-accent); }
.conv-item .avatar { width: 44px; height: 44px; }
.conv-name { font-weight: 600; }
.conv-preview { color: #889; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.conv-meta { margin-left: auto; text-align: right; }
.conv-time { color: #667; font-size: .72rem; }
.unread-badge {
  background: linear-gradient(135deg, var(--mn-accent), var(--mn-accent2));
  color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 700;
  min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.dot-online { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; position: absolute; bottom: 0; right: 0;
  border: 2px solid var(--mn-panel); }
.avatar-wrap { position: relative; display: inline-block; }
.avatar {
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--c1,#5b8cff), var(--c2,#9b5bff));
}

/* Messages */
.messages { flex: 1; overflow-y: auto; padding: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.msg { display: flex; gap: .6rem; max-width: 75%; }
.msg.out { align-self: flex-end; flex-direction: row-reverse; }
.msg .avatar { width: 34px; height: 34px; font-size: .8rem; flex-shrink: 0; }
.msg-bubble {
  padding: .6rem .9rem; border-radius: 16px; font-size: .95rem; line-height: 1.4;
  word-break: break-word; white-space: pre-wrap;
}
.msg.in .msg-bubble { background: var(--mn-msg-in); border-bottom-left-radius: 4px; }
.msg.out .msg-bubble { background: var(--mn-msg-out); color: #fff; border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(91,140,255,.25); }
.msg-time { font-size: .68rem; color: #667; margin-top: .25rem; }
.msg.out .msg-time { text-align: right; }
.msg .meta { display: flex; flex-direction: column; }

/* Typing */
.typing-indicator { padding: 0 1.2rem .3rem; color: #889; font-size: .8rem; display: flex; gap: 4px; align-items: center; }
.typing-indicator span { width: 7px; height: 7px; border-radius: 50%; background: #5b8cff; animation: blink 1.2s infinite; }
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100% { opacity: .3; } 40% { opacity: 1; } }

/* Composer */
.composer { display: flex; gap: .6rem; padding: 1rem 1.2rem; border-top: 1px solid var(--mn-border);
  background: rgba(18,22,31,.8); backdrop-filter: blur(8px); }
.composer .form-control { border-radius: 999px; padding: .7rem 1.2rem; }
.composer .btn { border-radius: 50%; width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 768px) {
  .sidebar { width: 100%; min-width: 0; position: absolute; inset: 0; z-index: 5; }
  .chat-main { margin-left: 0; }
  .chat-app.chat-open .sidebar { display: none; }
  .chat-app:not(.chat-open) .chat-main { display: none; }
  .msg { max-width: 88%; }
}

.mn-auth-logo-img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.chat-logo-sm-img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }