:root {
  --sidebar-width: 250px;
  --navbar-height: 60px;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f5f6fa;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 100 100'%3E%3Crect x='10' y='10' width='80' height='80' rx='18' fill='none' stroke='%2300d4ff' stroke-width='3' opacity='0.04'/%3E%3Ctext x='50' y='66' text-anchor='middle' fill='%2300d4ff' font-size='48' font-weight='bold' opacity='0.04'%3EA%3C/text%3E%3C/svg%3E") repeat;
  background-size: 240px;
  pointer-events: none;
}

.emoji-item { cursor:pointer; display:inline-block; padding:4px; border-radius:6px; line-height:1; }
.emoji-item:hover { background:#f0f2f5; transform:scale(1.2); }

.contact-row:hover { background:#f0f2f5; }
.contact-row.active { background:#f0f2f5; }
.contact-row.active .rounded-circle { border:2px solid #00a884; }
.min-width-0 { min-width:0; }

.msg-in { background:#fff; border-radius:8px; }
.msg-out { background:#d9fdd3; border-radius:8px; }
.msg-in::before, .msg-out::before { content:''; position:absolute; top:0; width:0; height:0; }
.msg-in::before { left:-8px; border:8px solid transparent; border-right-color:#fff; border-left:0; border-top:0; }
.msg-out::before { right:-8px; border:8px solid transparent; border-left-color:#d9fdd3; border-right:0; border-top:0; }

[data-bs-theme="dark"] .msg-in { background:#1f2c33; }
[data-bs-theme="dark"] .msg-out { background:#005c4b; }
[data-bs-theme="dark"] .msg-in::before { border-right-color:#1f2c33; }
[data-bs-theme="dark"] .msg-out::before { border-left-color:#005c4b; }
[data-bs-theme="dark"] #messageArea { background-color:#0b141a !important; }
[data-bs-theme="dark"] .contact-row:hover,
[data-bs-theme="dark"] .contact-row.active { background:#1f2c33; }
[data-bs-theme="dark"] #chatPanel .flex-shrink-0[style*="f0f2f5"] { background:#1f2c33 !important; }

.navbar-brand .brand-text {
  font-family: 'Lexend', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #00d4ff;
  text-shadow: 0 0 10px rgba(0,212,255,0.5);
  margin-left: 8px;
}

.wrapper { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: #1a1a2e;
  color: #fff;
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  height: calc(100vh - var(--navbar-height));
  z-index: 1000;
  overflow-y: auto;
  transition: transform 0.3s;
}

.sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-brand {
  color: #fff;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 600;
}

.sidebar-brand i { color: #25D366; margin-right: 0.5rem; }

.sidebar-nav { list-style: none; padding: 0; }

.nav-section {
  padding: 0.75rem 1rem 0.25rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1px;
}

.nav-item .nav-link {
  color: rgba(255,255,255,0.7);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.2s;
}

.nav-item .nav-link:hover,
.nav-item .nav-link.active {
  background: rgba(37, 211, 102, 0.15);
  color: #25D366;
}

.nav-item .nav-link i { width: 20px; margin-right: 10px; text-align: center; }

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content.full-width { margin-left: 0; }

.content { flex: 1; padding-top: calc(var(--navbar-height) + 1.5rem); }

.navbar { height: var(--navbar-height); }

.card { border-radius: 12px; transition: transform 0.2s; }
.card:hover { transform: translateY(-1px); }

.datatable { font-size: 0.9rem; }
.datatable thead th { border-bottom-width: 1px; font-weight: 600; color: #555; }

.table > :not(caption) > * > * { padding: 0.75rem; vertical-align: middle; }

.btn { border-radius: 8px; font-weight: 500; }

.modal-content { border-radius: 12px; border: none; }
.modal-header { border-bottom: 1px solid #eee; padding: 1rem 1.25rem; }
.modal-body { padding: 1.25rem; max-height: 70vh; overflow-y: auto; }
.modal-footer { border-top: 1px solid #eee; padding: 0.75rem 1.25rem; }
.modal .form-label { font-weight: 500; font-size: 0.85rem; margin-bottom: 0.25rem; color: #444; }
.modal .form-control, .modal .form-select { font-size: 0.9rem; border-radius: 8px; }
.modal .form-text { font-size: 0.78rem; margin-top: 0.2rem; }
.modal .input-group { flex-wrap: nowrap; }
.modal .input-group .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.modal .input-group .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; }

.progress { border-radius: 10px; }

pre code { font-size: 0.85rem; }

.notify-badge { font-size: 0.6rem; }

@media (max-width: 991px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .main-content { margin-left: 0; }
}

[data-bs-theme="dark"] body { background: #111; color: #e0e0e0; }
[data-bs-theme="dark"] .card { background: #1e1e1e; border-color: #333; }
[data-bs-theme="dark"] .card-header { background: #1e1e1e !important; border-color: #333; }
[data-bs-theme="dark"] .table { color: #e0e0e0; }
[data-bs-theme="dark"] .bg-light { background: #2a2a2a !important; }
[data-bs-theme="dark"] .navbar { background: #1a1a2e !important; }