/* Facebook-like Story Bar — scoped to .storybar-fb (integrated) */
.storybar-fb {
  --sb-height: 210px;
  --sb-card-w: 120px;
  --sb-radius: 14px;
  --sb-bg: #1e1f22;
  --sb-card-bg: #2a2b2f;
  --sb-text: #e6e6e6;
  --sb-muted: #a7a7a7;
  --sb-ring: #1877f2;
  --sb-gap: 10px;
  --sb-pad: 12px;
}
.storybar-fb { position: relative; padding: 10px; background: var(--sb-bg); border-radius: 12px; overflow: hidden; }
.storybar-fb .sb-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--sb-card-w);
  gap: var(--sb-gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 6px 40px 6px 6px;
}
.storybar-fb .sb-track::-webkit-scrollbar { height: 8px; }
.storybar-fb .sb-track::-webkit-scrollbar-thumb { background:#3a3b3f; border-radius:4px; }
.storybar-fb .sb-card { position: relative; height: var(--sb-height); border-radius: var(--sb-radius);
  background: var(--sb-card-bg); color: var(--sb-text); scroll-snap-align: start; overflow: hidden; cursor: pointer;
  user-select: none; transition: transform .2s ease; }
.storybar-fb .sb-card:hover { transform: translateY(-2px); }
.storybar-fb .sb-cover { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.95); }
.storybar-fb .sb-gradient { position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.75) 100%); }
.storybar-fb .sb-avatar { position: absolute; top: 10px; left: 10px; width: 36px; height: 36px; border-radius: 999px; box-shadow: 0 0 0 3px var(--sb-bg); }
.storybar-fb .sb-ring   { position:absolute; top: 8px; left: 8px; width: 40px; height: 40px; border-radius: 999px; border: 3px solid var(--sb-ring); box-shadow: 0 0 0 3px var(--sb-bg); }
.storybar-fb .sb-name { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 12.5px; line-height: 1.2; font-weight: 600; color: var(--sb-text);
  text-shadow: 0 1px 2px rgba(0,0,0,.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.storybar-fb .sb-create { display: grid; place-items: center; background: #242526; }
.storybar-fb .sb-create .sb-plus { width: 44px; height: 44px; border-radius: 999px; background: var(--sb-ring); color: white; display: grid; place-items: center;
  font-size: 28px; font-weight: 700; border: 4px solid var(--sb-bg); position:absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  box-shadow: 0 6px 16px rgba(24,119,242,.35); }
.storybar-fb .sb-create .sb-name { text-align: center; bottom: 12px; }
.storybar-fb .sb-nav { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.55);
  display: grid; place-items: center; cursor: pointer; transition: background .2s ease; z-index: 3; }
.storybar-fb .sb-nav:hover { background: rgba(0,0,0,.75); }
.storybar-fb .sb-nav svg { width: 18px; height: 18px; fill: white; }
/* Hide any legacy header "+ add story" buttons */
.add-story-top-right,[data-add-story-header]{ display:none !important; }

/* === AUTO-ADDED BY BUILD: Hide left sidebar in print across entire site === */
@media print {
  #sidebar,
  #left-sidebar,
  .sidebar,
  .sidebar-left,
  .left-sidebar,
  aside[class*="sidebar"],
  [class*="sidebar"][class*="left"] {
    display: none !important;
    visibility: hidden !important;
  }
  #content,
  .content,
  .main,
  .page-content,
  .container,
  .container-fluid,
  .wrapper,
  .page {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .layout,
  .with-sidebar,
  .row,
  .columns {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
}


/* === Mobile layout override for Social sidebars (appended 2025-10-24T07:26:07) === */
@media (max-width: 991.98px) {
  .container .row > .col-lg-3.d-none.d-lg-block {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 1rem;
  }
  .container .row > .col-lg-6 {
    max-width: 100% !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  /* preserve order: main first then sidebars */
  .container .row > .col-lg-6 { order: 1; }
  .container .row > .col-lg-3.d-none.d-lg-block:first-child { order: 2; }
  .container .row > .col-lg-3.d-none.d-lg-block:last-child { order: 3; }
}