:root {
  --sbk-bg-900: #090611;
  --sbk-bg-800: #0f0a1a;
  --sbk-bg-700: #161029;
  --sbk-panel-1: #141023;
  --sbk-panel-2: #1a1330;
  --sbk-border: #3a2a60;
  --sbk-text: #f4f1ff;
  --sbk-text-soft: #ded5f7;
  --sbk-accent: #8e68ff;
  --sbk-accent-strong: #6e4dd6;
  --sbk-shadow: rgba(6, 4, 12, 0.55);
  --sbk-post-bar-bg: #151027;
  --sbk-sidebar-width: 300px;
  --sbk-radius: 14px;
}

* {
  box-sizing: border-box;
  scrollbar-color: var(--sbk-accent-strong) var(--sbk-bg-800);
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--sbk-text);
  font-family: "Segoe UI Variable", "SF Pro Text", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-rendering: geometricPrecision;
  background:
    radial-gradient(1300px 780px at 10% -6%, rgba(142, 104, 255, 0.17), transparent 56%),
    radial-gradient(920px 700px at 100% 8%, rgba(110, 77, 214, 0.16), transparent 50%),
    linear-gradient(132deg, var(--sbk-bg-900), var(--sbk-bg-800) 50%, var(--sbk-bg-700));
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--sbk-text);
  letter-spacing: 0.01em;
  font-weight: 700;
}

p,
span,
label,
small,
.small,
.text-muted,
.text-secondary,
.text-body-secondary,
.muted,
.form-text {
  color: #e8ddff !important;
  opacity: 1 !important;
}

a,
a:visited {
  color: var(--sbk-text);
  text-decoration-color: rgba(142, 104, 255, 0.55);
}

a:hover,
a:focus-visible {
  color: #ffffff;
}

.sbk-sidebar,
nav.sbk-sidebar,
.navbar.sbk-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: var(--sbk-sidebar-width);
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.9rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: linear-gradient(180deg, rgba(23, 17, 39, 0.97), rgba(12, 9, 21, 0.99));
  border-right: 1px solid var(--sbk-border);
  box-shadow: 0 24px 56px var(--sbk-shadow);
  backdrop-filter: blur(8px);
}

.sbk-sidebar .container,
.sbk-sidebar .container-fluid,
.sbk-sidebar .navbar-collapse {
  width: 100%;
  padding: 0;
  margin: 0;
  display: block !important;
}

.sbk-sidebar .navbar-brand,
.sbk-sidebar .brand,
.sbk-sidebar .logo {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  margin: 0.25rem 0.2rem 0.9rem;
  color: var(--sbk-text) !important;
  font-size: 1.86rem;
  font-weight: 760;
  letter-spacing: 0.015em;
  line-height: 1.18;
}

.sbk-brand-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(140deg, #bda4ff, #7d58eb);
  box-shadow:
    0 0 0 2px rgba(142, 104, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.sbk-sidebar .navbar-nav,
.sbk-sidebar .nav,
.sbk-sidebar ul {
  width: 100%;
  margin: 0;
  padding: 0.2rem 0;
  list-style: none;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.25rem;
}

.sbk-sidebar .mt-auto,
.sbk-sidebar [class*="mt-auto"] {
  margin-top: 0.45rem !important;
}

.sbk-sidebar .nav-link,
.sbk-sidebar a:not(.btn) {
  width: 100%;
  border-radius: 11px;
  padding: 0.68rem 0.72rem;
  color: var(--sbk-text-soft) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sbk-sidebar .nav-link:hover,
.sbk-sidebar .nav-link:focus-visible,
.sbk-sidebar a:not(.btn):hover,
.sbk-sidebar a:not(.btn):focus-visible {
  background: linear-gradient(90deg, rgba(142, 104, 255, 0.26), rgba(110, 77, 214, 0.12));
  color: var(--sbk-text) !important;
  transform: translateX(2px);
}

.sbk-sidebar .active,
.sbk-sidebar .nav-link.active {
  color: #ffffff !important;
  background: linear-gradient(90deg, rgba(142, 104, 255, 0.34), rgba(110, 77, 214, 0.18));
  border: 1px solid rgba(189, 164, 255, 0.25);
}

.sbk-main {
  margin-left: var(--sbk-sidebar-width);
  width: calc(100% - var(--sbk-sidebar-width));
  min-height: 100dvh;
  padding: 1rem clamp(0.85rem, 2.2vw, 1.8rem);
}

.card,
.list-group-item,
.feed-item,
.post,
.modal-content,
.dropdown-menu,
.offcanvas,
.table {
  color: var(--sbk-text);
  background: linear-gradient(180deg, rgba(25, 19, 42, 0.94), rgba(16, 12, 30, 0.96)) !important;
  border-color: rgba(142, 104, 255, 0.22) !important;
  box-shadow: 0 12px 32px rgba(9, 6, 18, 0.4);
}

/* Force profile/post metadata to readable non-gray text. */
.profile-info .text-muted,
.profile-header .text-muted,
.profile-card .text-muted,
.post .text-muted,
.post small,
.post .small,
.feed-item .text-muted {
  color: #e8ddff !important;
  opacity: 1 !important;
}

/* Profile counters: Posts / Followers / Following should never look muted-gray. */
.profile-stats .text-muted,
.profile-stats .small,
.profile-stats small,
.profile-stats p,
.profile-header .profile-stats .text-muted,
.profile-header .profile-stats .small,
.profile-header .profile-stats small,
.profile-header [class*="followers"] .text-muted,
.profile-header [class*="following"] .text-muted,
.profile-header [class*="posts"] .text-muted,
[data-profile-stats] .text-muted,
[data-profile-stats] .small,
[data-profile-stats] small {
  color: #e5d8ff !important;
  opacity: 1 !important;
}

.profile-stats h1,
.profile-stats h2,
.profile-stats h3,
.profile-stats h4,
.profile-stats h5,
.profile-stats h6,
.profile-stats .fw-bold,
.profile-stats .stat-number,
.profile-header [class*="followers"] h1,
.profile-header [class*="followers"] h2,
.profile-header [class*="followers"] h3,
.profile-header [class*="followers"] h4,
.profile-header [class*="followers"] h5,
.profile-header [class*="following"] h1,
.profile-header [class*="following"] h2,
.profile-header [class*="following"] h3,
.profile-header [class*="following"] h4,
.profile-header [class*="following"] h5,
.profile-header [class*="posts"] h1,
.profile-header [class*="posts"] h2,
.profile-header [class*="posts"] h3,
.profile-header [class*="posts"] h4,
.profile-header [class*="posts"] h5,
[data-profile-stats] .fw-bold,
[data-profile-stats] .stat-number {
  color: #f6f1ff !important;
}

/* Remove the bright white post action strip and keep visual consistency. */
.post .bg-white,
.post .bg-light,
.feed-item .bg-white,
.feed-item .bg-light,
.card .bg-white,
.card .bg-light,
.post .border-top,
.feed-item .border-top,
.post-footer,
.post-actions,
.card-footer {
  background: linear-gradient(180deg, rgba(21, 16, 39, 0.96), rgba(16, 12, 30, 0.96)) !important;
  color: var(--sbk-text-soft) !important;
  border-top: 1px solid rgba(142, 104, 255, 0.24) !important;
}

.post-footer a,
.post-actions a,
.card-footer a {
  color: #d6c4ff !important;
}

.post-footer a:hover,
.post-actions a:hover,
.card-footer a:hover {
  color: #f4edff !important;
}

.post.sbk-pending,
.feed-item.sbk-pending,
.card.sbk-pending {
  opacity: 0.82;
  pointer-events: none;
  transition: opacity 0.14s ease;
}

.dropdown-menu {
  min-width: 12rem;
  border-radius: 12px;
  padding: 0.35rem;
}

.dropdown-item {
  color: var(--sbk-text-soft);
  border-radius: 9px;
  padding: 0.56rem 0.66rem;
  font-weight: 560;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  color: var(--sbk-text);
  background: rgba(142, 104, 255, 0.22);
}

.dropdown-menu.show {
  display: block;
}

input,
textarea,
select,
.form-control,
.form-select {
  color: var(--sbk-text) !important;
  background: rgba(13, 10, 23, 0.88) !important;
  border: 1px solid rgba(142, 104, 255, 0.36) !important;
  border-radius: 12px !important;
  font-size: 0.97rem;
  font-weight: 540;
}

input::placeholder,
textarea::placeholder {
  color: #cbb9ef !important;
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--sbk-accent) !important;
  box-shadow: 0 0 0 0.18rem rgba(142, 104, 255, 0.22) !important;
}

button,
.btn {
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 640;
  letter-spacing: 0.012em;
  border: 1px solid rgba(142, 104, 255, 0.42);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.btn:hover,
button:hover {
  transform: translateY(-1px);
}

.btn:active,
button:active {
  transform: translateY(0);
}

.btn-primary {
  color: #f9f6ff;
  background: linear-gradient(120deg, #805cf0, #6a49d4);
  border-color: rgba(189, 164, 255, 0.5);
  box-shadow: 0 8px 18px rgba(76, 52, 152, 0.46);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: #ffffff;
  background: linear-gradient(120deg, #8e68ff, #7452df);
  box-shadow: 0 11px 22px rgba(76, 52, 152, 0.52);
}

.btn-outline-primary {
  color: var(--sbk-text);
  border-color: rgba(189, 164, 255, 0.62);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  color: #ffffff;
  background: rgba(142, 104, 255, 0.2);
}

img.sbk-hd-avatar,
img[data-username="sbkreal"],
img[alt*="sbkreal" i],
img[src*="sbkreal" i] {
  image-rendering: auto;
  object-fit: cover;
  border-radius: 16px;
  border: 2px solid rgba(189, 164, 255, 0.66);
  box-shadow: 0 12px 26px rgba(52, 32, 108, 0.42);
  filter: saturate(1.05) contrast(1.06);
}

.sbk-mobile-toggle {
  position: fixed;
  top: 0.88rem;
  left: 0.88rem;
  z-index: 1300;
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(189, 164, 255, 0.5);
  background: linear-gradient(140deg, rgba(22, 16, 39, 0.96), rgba(13, 10, 25, 0.98));
  color: #f6f2ff;
  align-items: center;
  justify-content: center;
  font-size: 1.24rem;
  box-shadow: 0 10px 24px rgba(8, 6, 16, 0.5);
}

.sbk-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 1180;
  opacity: 0;
  pointer-events: none;
  background: rgba(5, 4, 10, 0.6);
  transition: opacity 0.2s ease;
}

body.sbk-mobile-nav-open .sbk-mobile-overlay {
  opacity: 1;
  pointer-events: auto;
}

body.sbk-mobile-nav-open {
  overflow: hidden;
}

@media (max-width: 1024px) {
  :root {
    --sbk-sidebar-width: 288px;
  }
}

@media (max-width: 900px) {
  .sbk-mobile-toggle {
    display: inline-flex;
  }

  .sbk-sidebar,
  nav.sbk-sidebar,
  .navbar.sbk-sidebar {
    transform: translateX(-106%);
    transition: transform 0.24s ease;
    width: min(84vw, 320px);
    border-right: 1px solid var(--sbk-border);
    border-bottom: 0;
  }

  body.sbk-mobile-nav-open .sbk-sidebar,
  body.sbk-mobile-nav-open nav.sbk-sidebar,
  body.sbk-mobile-nav-open .navbar.sbk-sidebar {
    transform: translateX(0);
  }

  .sbk-main {
    width: 100%;
    margin-left: 0;
    padding: 4.15rem 0.85rem 1rem;
  }
}

/* DM page: full-height messaging layout while sidebar stays visible. */
body.sbk-dm-page .sbk-main {
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0.75rem !important;
}

body.sbk-dm-page .sbk-main > *,
body.sbk-dm-page .sbk-main .container,
body.sbk-dm-page .sbk-main .container-fluid,
body.sbk-dm-page .sbk-main .row,
body.sbk-dm-page .sbk-main .col,
body.sbk-dm-page .sbk-main .col-12,
body.sbk-dm-page .sbk-main .chat-container,
body.sbk-dm-page .sbk-main .conversation-container,
body.sbk-dm-page .sbk-main .message-wrapper,
body.sbk-dm-page .sbk-main [class*="conversation"],
body.sbk-dm-page .sbk-main [class*="chat"] {
  width: 100% !important;
  max-width: 100% !important;
}

body.sbk-dm-page .sbk-main > .container,
body.sbk-dm-page .sbk-main > .container-fluid,
body.sbk-dm-page .sbk-main > .row,
body.sbk-dm-page .sbk-main .chat-container,
body.sbk-dm-page .sbk-main .conversation-container,
body.sbk-dm-page .sbk-main .message-wrapper,
body.sbk-dm-page .sbk-main [class*="conversation-container"],
body.sbk-dm-page .sbk-main [class*="chat-container"] {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

body.sbk-dm-page .sbk-main .container,
body.sbk-dm-page .sbk-main .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Message viewport should occupy all remaining height. */
body.sbk-dm-page .sbk-main [data-messages-container],
body.sbk-dm-page .sbk-main #messages,
body.sbk-dm-page .sbk-main #chat-messages,
body.sbk-dm-page .sbk-main .messages-container,
body.sbk-dm-page .sbk-main .conversation-messages,
body.sbk-dm-page .sbk-main .dm-messages,
body.sbk-dm-page .sbk-main [class*="messages"] {
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow-y: auto !important;
  border-radius: 16px;
}

/* Composer stays at bottom and spans full width. */
body.sbk-dm-page .sbk-main form[action*="message"],
body.sbk-dm-page .sbk-main form[action*="conversation"],
body.sbk-dm-page .sbk-main form[action*="dm"],
body.sbk-dm-page .sbk-main .message-form,
body.sbk-dm-page .sbk-main .chat-input,
body.sbk-dm-page .sbk-main [class*="composer"] {
  margin-top: auto !important;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 900px) {
  body.sbk-dm-page .sbk-main {
    height: 100dvh;
    min-height: 100dvh;
    padding: 4rem 0.6rem 0.6rem !important;
  }
}

/* Final desktop override: conversation fills all space except sidebar. */
@media (min-width: 901px) {
  body.sbk-dm-page {
    overflow: hidden;
  }

  body.sbk-dm-page .sbk-main {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: var(--sbk-sidebar-width) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0.7rem !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }

  body.sbk-dm-page .sbk-main > .container,
  body.sbk-dm-page .sbk-main > .container-fluid,
  body.sbk-dm-page .sbk-main > .row,
  body.sbk-dm-page .sbk-main > * {
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
  }

  body.sbk-dm-page .sbk-main [data-messages-container],
  body.sbk-dm-page .sbk-main #messages,
  body.sbk-dm-page .sbk-main #chat-messages,
  body.sbk-dm-page .sbk-main .messages-container,
  body.sbk-dm-page .sbk-main .conversation-messages,
  body.sbk-dm-page .sbk-main .dm-messages,
  body.sbk-dm-page .sbk-main [class*="messages"] {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Hard reset: remove "small card" constraints and make conversation page-sized. */
  body.sbk-dm-page .sbk-main .sbk-dm-root,
  body.sbk-dm-page .sbk-main .sbk-dm-root.container,
  body.sbk-dm-page .sbk-main .sbk-dm-root.container-fluid,
  body.sbk-dm-page .sbk-main .sbk-dm-root.row,
  body.sbk-dm-page .sbk-main [class*="conversation"].sbk-dm-root,
  body.sbk-dm-page .sbk-main [class*="chat"].sbk-dm-root {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0.4rem !important;
    min-height: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
  }

  body.sbk-dm-page .sbk-main .sbk-dm-root > *,
  body.sbk-dm-page .sbk-main .sbk-dm-root [class*="container"],
  body.sbk-dm-page .sbk-main .sbk-dm-root [class*="wrapper"],
  body.sbk-dm-page .sbk-main .sbk-dm-root [class*="panel"],
  body.sbk-dm-page .sbk-main .sbk-dm-root [class*="box"],
  body.sbk-dm-page .sbk-main .sbk-dm-root [class*="card"],
  body.sbk-dm-page .sbk-main .sbk-dm-root [class*="conversation"],
  body.sbk-dm-page .sbk-main .sbk-dm-root [class*="chat"] {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
  }

  body.sbk-dm-page .sbk-main .sbk-dm-root [class*="card"] {
    border-radius: 12px !important;
  }

  body.sbk-dm-page .sbk-main .sbk-dm-root [data-messages-container],
  body.sbk-dm-page .sbk-main .sbk-dm-root #messages,
  body.sbk-dm-page .sbk-main .sbk-dm-root #chat-messages,
  body.sbk-dm-page .sbk-main .sbk-dm-root .messages-container,
  body.sbk-dm-page .sbk-main .sbk-dm-root .conversation-messages,
  body.sbk-dm-page .sbk-main .sbk-dm-root .dm-messages,
  body.sbk-dm-page .sbk-main .sbk-dm-root [class*="messages"] {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  body.sbk-dm-page .sbk-main .sbk-dm-root form,
  body.sbk-dm-page .sbk-main .sbk-dm-root .message-form,
  body.sbk-dm-page .sbk-main .sbk-dm-root .chat-input,
  body.sbk-dm-page .sbk-main .sbk-dm-root [class*="composer"] {
    margin-top: auto !important;
    width: 100% !important;
    max-width: none !important;
  }
}