:root {
  --bg-1: #0b1020;
  --bg-2: #151a33;
  --panel: rgba(18, 23, 48, 0.74);
  --panel-2: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.09);
  --text: #eef2ff;
  --muted: rgba(238, 242, 255, 0.62);
  --primary: #6f5ef9;
  --primary-2: #8b7cff;
  --success: #28d7a1;
  --danger: #ff6b7a;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.34);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(111,94,249,0.25), transparent 30%),
    radial-gradient(circle at top right, rgba(52,211,153,0.12), transparent 28%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
}

a { text-decoration: none; }
.form-control, .form-select {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  border-radius: 16px;
  min-height: 52px;
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(111,94,249,0.6);
  box-shadow: 0 0 0 .25rem rgba(111,94,249,0.18);
}
.form-control::placeholder { color: rgba(255,255,255,0.42); }
.form-label { color: rgba(255,255,255,0.82); }
.btn-primary {
  border: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 12px 30px rgba(111,94,249,0.35);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline-light { border-color: rgba(255,255,255,0.18); }
.glass-card {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--radius-xl);
}
.auth-body { display: grid; place-items: center; padding: 24px; }
.auth-wrapper { width: 100%; }
.auth-card { max-width: 470px; padding: 28px; }
.auth-logo {
  width: 74px; height: 74px; border-radius: 24px;
  display: grid; place-items: center; font-size: 30px;
  background: linear-gradient(135deg, rgba(111,94,249,1), rgba(52,211,153,0.9));
  box-shadow: 0 18px 36px rgba(111,94,249,0.35);
}
.app-shell {
  display: flex;
  min-height: 100vh;
  padding: 16px;
  gap: 16px;
}
.sidebar-panel {
  width: 290px;
  padding: 24px 18px;
  border-radius: 28px;
  background: rgba(7, 11, 26, 0.62);
  border: 1px solid var(--border);
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow);
}
.main-panel {
  flex: 1;
  min-width: 0;
  padding-bottom: 84px;
}
.brand-chip { display: flex; align-items: center; gap: 14px; }
.brand-orb {
  width: 44px; height: 44px; border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), #33d5a2);
  box-shadow: 0 10px 30px rgba(111,94,249,0.35);
}
.sidebar-nav .sidebar-link,
.mobile-bottom-nav .mobile-link {
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,0.72); padding: 14px 16px;
  border-radius: 16px; transition: .25s ease;
}
.sidebar-link.active, .sidebar-link:hover,
.mobile-link.active, .mobile-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.sidebar-user { display: flex; align-items: center; gap: 12px; padding: 14px; }
.avatar-circle, .chat-avatar, .mini-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
}
.avatar-circle {
  width: 48px; height: 48px; border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.avatar-circle.xl { width: 82px; height: 82px; border-radius: 28px; font-size: 24px; }
.app-page, .chat-page-shell { display: grid; gap: 16px; }
.narrow-page { max-width: 860px; }
.page-topbar, .chat-topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 18px 20px;
}
.sticky-top-bar {
  position: sticky; top: 0; z-index: 15;
}
.page-title { font-size: clamp(1.45rem, 2vw, 2rem); }
.niche-scroller {
  display: flex; gap: 12px; overflow: auto; padding-bottom: 2px;
}
.niche-pill {
  white-space: nowrap; color: #fff; padding: 11px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08);
}
.niche-pill.active {
  background: linear-gradient(135deg, var(--pill-color, var(--primary)), rgba(255,255,255,0.18));
}
.chat-list-wrap { overflow: hidden; }
.chat-list-item {
  background: transparent; color: #fff; border: 0 !important;
  display: flex; gap: 14px; align-items: center; padding: 16px 18px;
  transition: background .25s ease, transform .2s ease;
}
.chat-list-item:hover { background: rgba(255,255,255,0.04); transform: translateY(-1px); }
.chat-avatar {
  width: 54px; height: 54px; border-radius: 20px; font-size: 20px;
  flex: 0 0 auto; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.chat-avatar.large { width: 52px; height: 52px; }
.chat-item-main { min-width: 0; flex: 1; }
.chat-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conversation-type-badge, .status-pill {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: 999px; font-size: 12px;
  background: rgba(255,255,255,0.09); color: #fff;
}
.status-pill.success { background: rgba(40,215,161,0.18); color: #b9f4df; }
.status-pill.muted { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.72); }
.chat-preview {
  color: rgba(255,255,255,0.66); max-width: 100%;
}
.unread-badge {
  min-width: 26px; height: 26px; border-radius: 999px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2ed3a4, #1fa9ff); color: #fff; font-weight: 700;
}
.messages-wrap {
  height: calc(100vh - 245px);
  min-height: 420px;
  overflow: auto;
  padding: 16px;
  scroll-behavior: smooth;
}
.day-divider {
  display: flex; justify-content: center; margin: 14px 0;
}
.day-divider span {
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.76);
  padding: 8px 14px; border-radius: 999px; font-size: 13px;
}
.message-row {
  display: flex; margin-bottom: 14px; gap: 10px; align-items: flex-end;
}
.message-row.me { justify-content: flex-end; }
.mini-avatar {
  width: 34px; height: 34px; border-radius: 12px; font-size: 12px; flex: 0 0 auto;
}
.message-bubble-wrap { max-width: min(84%, 720px); }
.message-sender {
  font-size: 12px; color: rgba(255,255,255,0.6); margin: 0 0 6px 8px;
}
.message-bubble {
  border-radius: 22px;
  padding: 12px 14px 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.message-row.me .message-bubble {
  background: linear-gradient(135deg, rgba(111,94,249,0.95), rgba(79,70,229,0.9));
}
.message-text { white-space: pre-wrap; word-break: break-word; }
.message-meta {
  text-align: right; margin-top: 6px; font-size: 11px; color: rgba(255,255,255,0.72);
}
.chat-input-bar {
  position: sticky; bottom: 74px; z-index: 12;
  padding: 12px;
}
.chat-input-inner { display: flex; align-items: flex-end; gap: 12px; }
.chat-textarea {
  resize: none; max-height: 160px; border-radius: 18px;
  padding: 14px 16px;
}
.send-btn { min-width: 54px; height: 54px; }
.mobile-bottom-nav {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
  display: grid; grid-auto-flow: column; gap: 8px; padding: 10px;
  background: rgba(11,16,32,0.88); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px; backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.mobile-link { justify-content: center; flex-direction: column; font-size: 12px; gap: 6px !important; }
.profile-hero { display: flex; align-items: center; gap: 18px; }
.admin-page-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.admin-full-width { grid-column: 1 / -1; }
.color-dot {
  width: 10px; height: 10px; border-radius: 999px; display: inline-block; margin-right: 8px;
}
.admin-table { --bs-table-bg: transparent; --bs-table-color: #fff; }
.empty-state { color: #fff; }
@media (max-width: 991.98px) {
  .app-shell { padding: 12px; }
  .main-panel { padding-bottom: 98px; }
  .messages-wrap { height: calc(100vh - 280px); }
  .chat-input-bar { bottom: 94px; }
}
@media (max-width: 767.98px) {
  .auth-card { padding: 22px; border-radius: 24px; }
  .page-topbar, .chat-topbar { padding: 16px; }
  .admin-page-grid { grid-template-columns: 1fr; }
  .message-bubble-wrap { max-width: 90%; }
}


.chat-input-meta {
  padding: 8px 6px 0;
}
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.08);
  padding: 6px 10px;
  border-radius: 999px;
  margin-top: 8px;
}
.presence-pill, .global-unread-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.08);
  padding: 6px 10px;
  border-radius: 999px;
}
.presence-pill.online {
  background: rgba(40,215,161,0.18);
  color: #cff8ea;
}
.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.05);
}
.presence-pill.online .presence-dot {
  background: #2ed3a4;
  box-shadow: 0 0 0 6px rgba(46,211,164,0.12);
}
.conversation-presence-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.global-unread-pill i {
  font-size: 11px;
}

/* V1.2 */
.message-row.grouped { margin-top: -6px; }
.message-row .hidden-avatar { visibility:hidden; }
.message-bubble { position: relative; transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease; }
.message-row:hover .message-bubble { transform: translateY(-1px); box-shadow: 0 18px 34px rgba(0,0,0,.22); }
.message-actions-inline { position:absolute; top:8px; right:8px; display:none; gap:4px; }
.message-row.them .message-actions-inline { right:8px; }
.message-row:hover .message-actions-inline, .message-row:focus-within .message-actions-inline { display:flex; }
.icon-action { width:28px; height:28px; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.18); color:#fff; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }
.reply-preview-bubble { display:flex; flex-direction:column; width:100%; text-align:left; margin:0 0 10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.06); border-left:3px solid rgba(111,94,249,.9); border-radius:14px; padding:8px 10px; color:#fff; }
.message-reactions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.reaction-pill { border:none; background:rgba(255,255,255,.1); color:#fff; border-radius:999px; padding:4px 8px; font-size:13px; }
.edited-flag, .seen-state { margin-left:8px; opacity:.78; }
.message-bubble.is-deleted { opacity:.72; font-style:italic; }
.reply-composer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; margin-top:10px; }
.emoji-picker { position:fixed; left:12px; right:12px; bottom:100px; z-index:60; max-width:520px; margin:0 auto; padding:12px; }
.emoji-picker-header, .emoji-picker-tabs { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.emoji-picker-tabs { justify-content:flex-start; flex-wrap:wrap; }
.emoji-tab { border:none; background:rgba(255,255,255,.08); color:#fff; border-radius:999px; padding:6px 10px; text-transform:capitalize; }
.emoji-tab.active { background:linear-gradient(135deg, rgba(111,94,249,.95), rgba(79,70,229,.9)); }
.emoji-picker-body { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; max-height:260px; overflow:auto; }
.emoji-btn { border:none; background:rgba(255,255,255,.08); color:#fff; border-radius:14px; padding:10px 0; font-size:22px; }
.composer-icon { width:48px; height:48px; }
.quick-reaction-picker { position:fixed; z-index:80; display:flex; gap:8px; background:rgba(11,16,32,.94); border:1px solid rgba(255,255,255,.08); padding:10px; border-radius:999px; box-shadow:0 18px 40px rgba(0,0,0,.35); }
.highlight-flash .message-bubble { animation: flashGlow 1.4s ease; }
@keyframes flashGlow { 0%{box-shadow:0 0 0 rgba(111,94,249,0)} 30%{box-shadow:0 0 0 8px rgba(111,94,249,.22)} 100%{box-shadow:0 0 0 rgba(111,94,249,0)} }
.typing-dots { display:inline-flex; gap:4px; align-items:center; }
.typing-dots i { width:6px; height:6px; border-radius:999px; background:#fff; opacity:.6; animation: typingPulse 1s infinite ease-in-out; }
.typing-dots i:nth-child(2){ animation-delay:.15s; } .typing-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes typingPulse { 0%,100%{ transform:translateY(0); opacity:.35; } 50%{ transform:translateY(-3px); opacity:1; } }
.chat-list-item.is-pinned { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pinned-badge { background:rgba(255,196,84,.16); } .muted-badge{ background:rgba(255,255,255,.08); }
@media (max-width:767.98px){ .emoji-picker-body { grid-template-columns:repeat(5,minmax(0,1fr)); } }

/* V1.3 */
.attachment-chip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  margin:0 0 10px;
}
.message-image-wrap { overflow:hidden; border-radius:18px; }
.message-image-btn {
  display:block; width:100%; border:none; padding:0; background:rgba(255,255,255,.06); border-radius:18px; overflow:hidden;
}
.message-image-preview {
  display:block; width:100%; max-width:320px; max-height:360px; object-fit:cover;
}
.file-card {
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08);
}
.file-card-icon {
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:rgba(111,94,249,.18); font-size:20px;
}
.file-card-body { min-width:0; flex:1; }
.file-card-body strong { display:block; word-break:break-word; }
.file-card-actions { display:flex; gap:8px; flex-wrap:wrap; }
.quick-reaction-picker {
  position:fixed; z-index:90; display:flex; gap:8px; padding:10px; border-radius:18px; background:rgba(11,16,32,.95); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow);
}
.highlight-flash .message-bubble { box-shadow:0 0 0 2px rgba(46,211,164,.45), 0 18px 34px rgba(0,0,0,.22); }
.image-preview-modal {
  position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:18px;
}
.image-preview-backdrop {
  position:absolute; inset:0; border:none; background:rgba(2,4,10,.78); backdrop-filter:blur(6px);
}
.image-preview-dialog {
  position:relative; z-index:2; width:min(940px, 100%); max-height:90vh; padding:14px; display:grid; gap:12px;
}
.image-preview-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.image-preview-target { width:100%; max-height:75vh; object-fit:contain; border-radius:20px; background:rgba(255,255,255,.04); }
body.modal-open-lite { overflow:hidden; }
.typing-dots { display:inline-flex; gap:4px; }
.typing-dots i { width:6px; height:6px; border-radius:999px; background:currentColor; opacity:.5; animation:typingPulse 1s infinite ease-in-out; }
.typing-dots i:nth-child(2){ animation-delay:.15s; }
.typing-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes typingPulse { 0%, 80%, 100% { transform:scale(.65); opacity:.35; } 40% { transform:scale(1); opacity:1; } }
@media (max-width: 767.98px) {
  .file-card { align-items:flex-start; flex-wrap:wrap; }
  .file-card-actions { width:100%; }
  .message-image-preview { max-width:100%; }
}

.quick-actions-bar{display:flex;gap:10px;overflow:auto;padding:8px 4px 14px}.quick-action-btn{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#fff;padding:10px 14px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow);transition:transform .18s ease, opacity .18s ease}.quick-action-btn:active{transform:scale(.98)}
.typing-dots{display:inline-flex;gap:3px;margin-left:6px}.typing-dots span{width:5px;height:5px;border-radius:999px;background:currentColor;display:block;animation:typingPulse 1s infinite alternate}.typing-dots span:nth-child(2){animation-delay:.15s}.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes typingPulse{from{opacity:.25;transform:translateY(0)}to{opacity:1;transform:translateY(-2px)}}
.skeleton-stack{display:grid;gap:10px;padding:0 0 12px}.skeleton-line{height:14px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.18),rgba(255,255,255,.06));background-size:200% 100%;animation:skeletonMove 1.2s linear infinite}
@keyframes skeletonMove{0%{background-position:200% 0}100%{background-position:-200% 0}}
.feature-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.niche-edit-card{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.04)}
.admin-mini-list{display:grid;gap:8px}.mini-line{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04)}
.status-pill.danger{background:rgba(255,90,110,.18);color:#ffb8c4}.status-pill.success{background:rgba(28,195,134,.18);color:#9ef1d1}
.composer-tools{display:flex;gap:8px;align-items:center}
.attachment-chip{margin-top:10px;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.06)}
.highlight-flash{animation:flashBg 1.5s ease}
@keyframes flashBg{0%{box-shadow:0 0 0 0 rgba(111,94,249,.6)}100%{box-shadow:0 0 0 10px rgba(111,94,249,0)}}
.message-row{animation:fadeSlideIn .18s ease}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.discover-card { border:1px solid rgba(255,255,255,.08); }
.flash-message .message-bubble { box-shadow:0 0 0 2px rgba(111,94,249,.35), 0 14px 34px rgba(0,0,0,.28); }
.message-row.compact-stack .mini-avatar,
.message-row.compact-stack .message-sender { visibility:hidden; height:0; margin:0; }
.message-row.compact-stack { margin-top:-8px; }