:root{
  --accent:#7c5cff;
  --accent2:#00d4ff;
  --muted:#93a4c7;
  --ring: rgba(124,92,255,.35);
}

*{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
body{background: radial-gradient(900px 500px at 20% 0%, rgba(124,92,255,.28), transparent 60%),
               radial-gradient(800px 500px at 80% 10%, rgba(0,212,255,.22), transparent 55%),
               #070b18; color:#e8eeff;}
.app-navbar{
  background: linear-gradient(90deg, rgba(124,92,255,.25), rgba(0,212,255,.18));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar .nav-link{color:rgba(255,255,255,.70);}
.navbar .nav-link.active{color:#fff; font-weight:600;}
.brand-dot{
  width:12px;height:12px;border-radius:50%;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow: 0 0 0 6px rgba(124,92,255,.15);
  display:inline-block;
}
.card{background: rgba(15,23,51,.72); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; box-shadow: 0 12px 28px rgba(0,0,0,.25);}
.card .card-header{background: rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.08);}
.btn-primary{
  background: linear-gradient(135deg,var(--accent),#5f3dff);
  border: none;
  box-shadow: 0 10px 24px rgba(124,92,255,.25);
}
.text-muted{color: var(--muted)!important;}
.form-control,.form-select{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color:#e8eeff;
}
.form-control:focus,.form-select:focus{
  border-color: rgba(124,92,255,.5);
  box-shadow: 0 0 0 .25rem var(--ring);
}
.table{color:#e8eeff;}
.table td,.table th{border-color: rgba(255,255,255,.08);}
.app-footer{
  position: fixed; left:0; right:0; bottom:0;
  background: rgba(10,14,35,.75);
  border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  padding: 10px 0;
}
main{padding-bottom: 72px;}

.chat-layout{display:grid; grid-template-columns: 340px 1fr; gap: 16px;}
@media(max-width: 992px){.chat-layout{grid-template-columns: 1fr;}}

.contact-item{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding:10px;
  cursor:pointer;
}
.contact-item:hover{background: rgba(255,255,255,.06);}
.contact-item.active{outline:2px solid rgba(124,92,255,.55);}

.msg-bubble{
  max-width: 86%;
  padding:10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  white-space: pre-wrap;
}
.msg-in{justify-content:flex-start;}
.msg-out{justify-content:flex-end;}
.msg-out .msg-bubble{
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(0,212,255,.12));
}
.msg-meta{font-size:12px; color: rgba(255,255,255,.55);}

/* =========================
   LIGHT THEME OVERRIDE
   ========================= */
html[data-theme="light"] body{
  background: radial-gradient(900px 520px at 15% 0%, rgba(124,92,255,.14), transparent 60%),
              radial-gradient(900px 520px at 85% 10%, rgba(0,212,255,.12), transparent 55%),
              #f6f8ff;
  color:#0f172a;
}

html[data-theme="light"] .app-navbar{
  background: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(15,23,42,.10);
}

html[data-theme="light"] .navbar .nav-link{
  color: rgba(15,23,42,.70);
}
html[data-theme="light"] .navbar .nav-link.active{
  color: #0f172a;
}

html[data-theme="light"] .card{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 28px rgba(15,23,42,.08);
}

html[data-theme="light"] .card .card-header{
  background: rgba(15,23,42,.03);
  border-bottom:1px solid rgba(15,23,42,.08);
}

html[data-theme="light"] .text-muted{
  color: rgba(15,23,42,.55) !important;
}

html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(15,23,42,.12);
  color:#0f172a;
}

html[data-theme="light"] .table{
  color:#0f172a;
}
html[data-theme="light"] .table td,
html[data-theme="light"] .table th{
  border-color: rgba(15,23,42,.10);
}

html[data-theme="light"] .app-footer{
  background: rgba(255,255,255,.7);
  border-top:1px solid rgba(15,23,42,.10);
}