:root{
  --brand:#2d6cdf;
  --brand-ink:#17408b;
  --card-radius:18px;
}
body{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(45,108,223,.08), transparent 60%),
    radial-gradient(800px 400px at 85% -20%, rgba(45,108,223,.06), transparent 60%),
    var(--bs-body-bg);
}
.navbar-blur{ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.brand-badge{ font-weight:800; letter-spacing:.5px; }
.card{ border:1px solid rgba(0,0,0,.06); border-radius:var(--card-radius); }
.side-link{ border-radius:12px; padding:.6rem .8rem; display:flex; gap:.6rem; align-items:center; color:var(--bs-body-color); text-decoration:none; }
.side-link:hover{ background: var(--bs-secondary-bg); }
.compose{ border: 2px dashed var(--bs-border-color); }
.story-avatar{ width:46px; height:46px; object-fit:cover; border-radius:50%; border:2px solid var(--brand); }
.contact-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:1px solid rgba(0,0,0,.06); }
.btn-brand{ background:var(--brand); color:#fff; }
.btn-brand:hover{ background:var(--brand-ink); color:#fff; }
.liked{ color: var(--brand); }
.sticky-col{ position:sticky; top:88px; }
@media (max-width: 991.98px){ .sticky-col{ position: static; top:auto; } }
.cover{
  background: linear-gradient(180deg, rgba(45,108,223,.35), rgba(45,108,223,.05)), url('https://picsum.photos/seed/cover/1400/400') center/cover no-repeat;
  min-height: 190px;
  border-bottom-left-radius: var(--card-radius);
  border-bottom-right-radius: var(--card-radius);
}
.avatar-xl{ width:112px; height:112px; border-radius:50%; border:4px solid #fff; object-fit:cover; }
.tab-card .nav-link{ border:0; border-bottom:3px solid transparent; border-radius:0; }
.tab-card .nav-link.active{ border-bottom-color: var(--brand); color: var(--brand); background:transparent; }


.msg-list{ max-height: calc(100dvh - 210px); overflow:auto; }
.msg{ display:flex; gap:.6rem; margin-bottom:.6rem; }
.msg.me{ flex-direction: row-reverse; }
.bubble{ max-width: 82%; padding:.6rem .8rem; border-radius:16px; border:1px solid rgba(0,0,0,.06); }
.me .bubble{ background: var(--brand); color:#fff; border-color: transparent; border-bottom-right-radius:4px; }
.them .bubble{ background: var(--bs-body-bg); color: var(--bs-body-color); border-bottom-left-radius:4px; }
.thread-header{ position:sticky; top:70px; z-index: 2; background: var(--bs-body-bg); border-bottom:1px solid var(--bs-border-color); }
.composer{ position: sticky; bottom: 0; background: var(--bs-body-bg); border-top:1px solid var(--bs-border-color); }
@media (min-width: 992px){
  .msg-list{ max-height: calc(100dvh - 230px); }
}