.add-user-lists-wrapper{
    max-height: 200px;
    overflow-y: scroll;
}

.list-item .user-avatar{
    width:40px;
    height:40px;
    margin-left:-18px
}

.list-item .separator{
    right: 1rem;
}

.no-notifications{
    max-width: 200px
}

input[type=checkbox]
{
    width: 25px; height: 25px;
}

/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 1500;
  -webkit-text-size-adjust: 100%;
  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  -webkit-backface-visibility: hidden;
  outline: none; }
  .pswp * {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
  .pswp img {
    max-width: none; }

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  opacity: 0.001;
  will-change: opacity;
  /* for open/close transition */
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--open {
  display: block; }

.pswp--zoom-allowed .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.pswp--zoomed-in .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab; }

.pswp--dragging .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing; }

/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: opacity; }

.pswp__scroll-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.pswp__container,
.pswp__zoom-wrap {
  -ms-touch-action: none;
  touch-action: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; }

.pswp__zoom-wrap {
  position: absolute;
  width: 100%;
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  /* for open/close transition */
  -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
          transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp__bg {
  will-change: opacity;
  /* for open/close transition */
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
  -webkit-transition: none;
  transition: none; }

.pswp__container,
.pswp__zoom-wrap {
  -webkit-backface-visibility: hidden; }

.pswp__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden; }

.pswp__img {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0; }

/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
  -webkit-backface-visibility: hidden; }

/*
	div element that matches size of large image
	large image loads on top of it
*/
.pswp__img--placeholder--blank {
  background: #222; }

.pswp--ie .pswp__img {
  width: 100% !important;
  height: auto !important;
  left: 0;
  top: 0; }

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  margin-top: -8px;
  color: #CCC; }

.pswp__error-msg a {
  color: #CCC;
  text-decoration: underline; }

/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*

	Contents:

	1. Buttons
	2. Share modal and links
	3. Index indicator ("1 of X" counter)
	4. Caption
	5. Loading indicator
	6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/
/*
	
	1. Buttons

 */
/* <button> css reset */
.pswp__button {
  width: 44px;
  height: 44px;
  position: relative;
  background: none;
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  float: right;
  opacity: 0.75;
  -webkit-transition: opacity 0.2s;
          transition: opacity 0.2s;
  -webkit-box-shadow: none;
          box-shadow: none; }
  .pswp__button:focus, .pswp__button:hover {
    opacity: 1; }
  .pswp__button:active {
    outline: none;
    opacity: 0.9; }
  .pswp__button::-moz-focus-inner {
    padding: 0;
    border: 0; }

/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
  opacity: 1; }

.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  background: url(/libs/photoswipe/dist/default-skin/default-skin.png) 0 0 no-repeat;
  background-size: 264px 88px;
  width: 44px;
  height: 44px; }

@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
  .pswp--svg .pswp__button,
  .pswp--svg .pswp__button--arrow--left:before,
  .pswp--svg .pswp__button--arrow--right:before {
    background-image: url(/libs/photoswipe/dist/default-skin/default-skin.svg); }
  .pswp--svg .pswp__button--arrow--left,
  .pswp--svg .pswp__button--arrow--right {
    background: none; } }

.pswp__button--close {
  background-position: 0 -44px; }

.pswp__button--share {
  background-position: -44px -44px; }

.pswp__button--fs {
  display: none; }

.pswp--supports-fs .pswp__button--fs {
  display: block; }

.pswp--fs .pswp__button--fs {
  background-position: -44px 0; }

.pswp__button--zoom {
  display: none;
  background-position: -88px 0; }

.pswp--zoom-allowed .pswp__button--zoom {
  display: block; }

.pswp--zoomed-in .pswp__button--zoom {
  background-position: -132px 0; }

/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
  visibility: hidden; }

/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
  background: none;
  top: 50%;
  margin-top: -50px;
  width: 70px;
  height: 100px;
  position: absolute; }

.pswp__button--arrow--left {
  left: 0; }

.pswp__button--arrow--right {
  right: 0; }

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  content: '';
  top: 35px;
  background-color: rgba(0, 0, 0, 0.3);
  height: 30px;
  width: 32px;
  position: absolute; }

.pswp__button--arrow--left:before {
  left: 6px;
  background-position: -138px -44px; }

.pswp__button--arrow--right:before {
  right: 6px;
  background-position: -94px -44px; }

/*

	2. Share modal/popup and links

 */
.pswp__counter,
.pswp__share-modal {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none; }

.pswp__share-modal {
  display: block;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 10px;
  position: absolute;
  z-index: 1600;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out;
          transition: opacity 0.25s ease-out;
  -webkit-backface-visibility: hidden;
  will-change: opacity; }

.pswp__share-modal--hidden {
  display: none; }

.pswp__share-tooltip {
  z-index: 1620;
  position: absolute;
  background: #FFF;
  top: 56px;
  border-radius: 2px;
  display: block;
  width: auto;
  right: 44px;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  -webkit-transform: translateY(6px);
      -ms-transform: translateY(6px);
          transform: translateY(6px);
  -webkit-transition: -webkit-transform 0.25s;
          transition: transform 0.25s;
  -webkit-backface-visibility: hidden;
  will-change: transform; }
  .pswp__share-tooltip a {
    display: block;
    padding: 8px 12px;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    line-height: 18px; }
    .pswp__share-tooltip a:hover {
      text-decoration: none;
      color: #000; }
    .pswp__share-tooltip a:first-child {
      /* round corners on the first/last list item */
      border-radius: 2px 2px 0 0; }
    .pswp__share-tooltip a:last-child {
      border-radius: 0 0 2px 2px; }

.pswp__share-modal--fade-in {
  opacity: 1; }
  .pswp__share-modal--fade-in .pswp__share-tooltip {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0); }

/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
  padding: 16px 12px; }

a.pswp__share--facebook:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -12px;
  right: 15px;
  border: 6px solid transparent;
  border-bottom-color: #FFF;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none; }

a.pswp__share--facebook:hover {
  background: #3E5C9A;
  color: #FFF; }
  a.pswp__share--facebook:hover:before {
    border-bottom-color: #3E5C9A; }

a.pswp__share--twitter:hover {
  background: #55ACEE;
  color: #FFF; }

a.pswp__share--pinterest:hover {
  background: #CCC;
  color: #CE272D; }

a.pswp__share--download:hover {
  background: #DDD; }

/*

	3. Index indicator ("1 of X" counter)

 */
.pswp__counter {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  font-size: 13px;
  line-height: 44px;
  color: #FFF;
  opacity: 0.75;
  padding: 0 10px; }

/*
	
	4. Caption

 */
.pswp__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 44px; }
  .pswp__caption small {
    font-size: 11px;
    color: #BBB; }

.pswp__caption__center {
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
  font-size: 13px;
  padding: 10px;
  line-height: 20px;
  color: #CCC; }

.pswp__caption--empty {
  display: none; }

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
  visibility: hidden; }

/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */
.pswp__preloader {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -22px;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out;
          transition: opacity 0.25s ease-out;
  will-change: opacity;
  direction: ltr; }

.pswp__preloader__icn {
  width: 20px;
  height: 20px;
  margin: 12px; }

.pswp__preloader--active {
  opacity: 1; }
  .pswp__preloader--active .pswp__preloader__icn {
    /* We use .gif in browsers that don't support CSS animation */
    background: url(/libs/photoswipe/dist/default-skin/preloader.gif) 0 0 no-repeat; }

.pswp--css_animation .pswp__preloader--active {
  opacity: 1; }
  .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
    -webkit-animation: clockwise 500ms linear infinite;
            animation: clockwise 500ms linear infinite; }
  .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
    -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
            animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }

.pswp--css_animation .pswp__preloader__icn {
  background: none;
  opacity: 0.75;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 15px;
  top: 15px;
  margin: 0; }

.pswp--css_animation .pswp__preloader__cut {
  /* 
			The idea of animating inner circle is based on Polymer ("material") loading indicator 
			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
		*/
  position: relative;
  width: 7px;
  height: 14px;
  overflow: hidden; }

.pswp--css_animation .pswp__preloader__donut {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid #FFF;
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  margin: 0; }

@media screen and (max-width: 1024px) {
  .pswp__preloader {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    float: right; } }

@-webkit-keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@-webkit-keyframes donut-rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    -webkit-transform: rotate(-140deg);
            transform: rotate(-140deg); }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

@keyframes donut-rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    -webkit-transform: rotate(-140deg);
            transform: rotate(-140deg); }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

/*
	
	6. Additional styles

 */
/* root element of UI */
.pswp__ui {
  -webkit-font-smoothing: auto;
  visibility: visible;
  opacity: 1;
  z-index: 1550; }

/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  width: 100%; }

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  visibility: visible; }

.pswp__top-bar,
.pswp__caption {
  background-color: rgba(0, 0, 0, 0.5); }

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
  background-color: rgba(0, 0, 0, 0.3); }

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar {
  opacity: 0; }

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
  opacity: 0; }

/*
	pswp__ui--hidden class is added when controls are hidden
	e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
  /* Force paint & create composition layer for controls. */
  opacity: 0.001; }

/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
  display: none; }

.pswp__element--disabled {
  display: none !important; }

.pswp--minimal--dark .pswp__top-bar {
  background: none; }

/* =========================
   PROFILE.CSS (Profile page)
   Avatar = 120px
   Ring only when has stories:
     unread = gradient
     seen   = grey
   No stories => no ring, keep inner white border
   ========================= */

.profile-cover-bg{
    height:200px;
}

.card-img{
    border-radius: 0px!important;
}

/* Avatar holder sizing (profile) */
.avatar-holder{
    width: 120px !important;
    height: 120px !important;
    display: inline-flex;
    align-items: flex-start;
    border-radius: 50% !important;
    margin-top: -60px !important;

    /* IMPORTANT: don't clip the ring */
    overflow: visible !important;
}

/* Legacy safety if a raw img is used directly */
.avatar-holder > img{
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: transparent !important;
    object-fit: cover;
}

/* Ring anchor */
.profile-avatar-wrap{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;

    /* IMPORTANT: don't clip the ring */
    overflow: visible !important;
}

/* Outer ring (hidden unless has stories) */
.profile-avatar-wrap::before{
    content: "";
    position: absolute;
    inset: -3px;                 /* slim ring thickness */
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;

    opacity: 0;
    background: transparent;
}

/* Show ring when stories exist */
.profile-avatar-wrap.profile-has-stories::before{
    opacity: 1;
}

/* Unread */
.profile-avatar-wrap.profile-has-stories.profile-stories-unseen::before{
    background: linear-gradient(45deg,
        var(--template-gradient-from, var(--ds-accent)),
        var(--ds-accent),
        var(--template-gradient-to, var(--ds-accent)));
}

/* Seen */
.profile-avatar-wrap.profile-has-stories.profile-stories-seen::before{
    background: #d7dce1;
}

/* Avatar image (always keep the inner white border) */
.profile-avatar-img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;

    position: relative;
    z-index: 2;

    border: 2px solid #fff;
    background: #fff;
}

/* Online indicator */
.profile-avatar-wrap .online-indicator {
    position: absolute;
    z-index: 3;
    right: 10px;
    bottom: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #28a745;
    border: 2px solid #fff;
}

/* Description spacing (your original) */
.description-content p{ margin-bottom: .5rem; }
.description-content p:last-child{ margin-bottom: 5px; }
.description-content p{ margin-bottom: 0.3rem; }

/* Cursor only when user has stories */
.profile-avatar-wrap.profile-has-stories,
.profile-avatar-wrap.profile-has-stories *{
    cursor: pointer;
}

.has-stories-pointer { cursor: pointer; }

/* ===== Highlights row ===== */
.profile-highlights {
    /*margin-top: 6px;*/
    /*margin-bottom: 8px;*/
}

.profile-highlights-swiper .swiper-slide {
    width: auto;
}

.profile-highlight-item {
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-highlight-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 2px solid #d7dce1; /* like IG highlight ring */
    background: #fff;
}

.profile-highlight-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-highlight-label {
    max-width: 64px;
    font-size: 11px;
    line-height: 1.1;
    margin-top: 6px;
    text-align: center;
    color: #6c757d;
}

/* =========================
   Highlights preloader
   ========================= */

/* Highlights wrapper uses same skeleton, but tighter */
.profile-highlights-skeleton .stories-swiper-skeleton {
    padding: 0;
    margin: 0;
    display: flex;
    gap: 12px;
}

/* If your feed skeleton has its own spacing that looks too big */
.profile-highlights-skeleton .stories-swiper-skeleton__item {
    width: 72px; /* optional */
}

.profile-highlights-swiper{
    position: relative; /* keep this always */
}

/* reserve space only while loading */
#profile-highlights.is-loading .profile-highlights-swiper{
    min-height: 92px; /* tweak if you want */
}

/* once loaded, remove the reserved height */
#profile-highlights.is-loaded .profile-highlights-swiper{
    min-height: 0;
}

/* Skeleton overlays the swiper area */
.profile-highlights-skeleton{
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    /* match px-4 (1.5rem) so skeleton aligns with content */
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    /* important: don't turn this into a flex row itself */
    display: block !important;
}


/* When loaded, hide skeleton smoothly */
#profile-highlights.is-loaded .profile-highlights-skeleton{
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease;
}

/* While loading, hide actual slides (optional but nice) */
#profile-highlights.is-loading #profile-highlights-wrapper{
    opacity: 0;
}
#profile-highlights.is-loaded #profile-highlights-wrapper{
    opacity: 1;
    transition: opacity 180ms ease;
}

/* --- Profile social links (lightweight icon chips) --- */
.profile-social-links-row{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-social-chip{
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    color: inherit;
    text-decoration: none;

    transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease, color .08s ease;
}

.profile-social-chip ion-icon{
    font-size: 18px;
}

.profile-social-chip:hover{
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
    text-decoration: none;
}

.profile-social-chip .social-media-icon{
    width: 15px;
    height: 15px;
    display: block;
}

/* Brand-ish hover (subtle) */
.profile-social-chip.social-instagram:hover{ border-color:#E1306C; color:#E1306C; }
.profile-social-chip.social-x:hover{ border-color:#111111; color:#111111; }
.profile-social-chip.social-twitter:hover{ border-color:#1DA1F2; color:#1DA1F2; }
.profile-social-chip.social-tiktok:hover{ border-color:#000000; color:#000000; }
.profile-social-chip.social-youtube:hover{ border-color:#FF0000; color:#FF0000; }
.profile-social-chip.social-twitch:hover{ border-color:#9146FF; color:#9146FF; }
.profile-social-chip.social-discord:hover{ border-color:#5865F2; color:#5865F2; }
.profile-social-chip.social-telegram:hover{ border-color:#229ED9; color:#229ED9; }
.profile-social-chip.social-reddit:hover{ border-color:#FF4500; color:#FF4500; }
.profile-social-chip.social-snapchat:hover{ border-color:#FFFC00; color:#111111; }
.profile-social-chip.social-patreon:hover{ border-color:#FF424D; color:#FF424D; }
.profile-social-chip.social-kofi:hover{ border-color:#29ABE0; color:#29ABE0; }
.profile-social-chip.social-buymeacoffee:hover{ border-color:#FFDD00; color:#111111; }
.profile-social-chip.social-linktree:hover{ border-color:#43E660; color:#1a1a1a; }
.profile-social-chip.social-beacons:hover{ border-color:#6C5CE7; color:#6C5CE7; }


/* Spotify profile widget (Swiper) */
.profile-spotify-swiper{
    overflow: hidden;
}

/* Let slides auto-size by width rules below */
.profile-spotify-swiper .swiper-slide{
    flex-shrink: 0;
}

.profile-spotify-swiper .swiper-wrapper{
    align-items: stretch;
}

.profile-spotify-slide{
    height: auto;
}

/* slide widths (work with slidesPerView: 'auto') */
.profile-spotify-slide--artist{
    width: 120px;
}

.profile-spotify-slide--anthem{
    width: 150px;
}

/* shared cover */
.profile-spotify-cover{
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

/* if you ever want anthem taller later, enable this
.profile-spotify-slide--anthem .profile-spotify-cover{
    height: 140px;
}
*/

.profile-spotify-badge{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1db954;
    flex: 0 0 auto;
    display: inline-block;
}

/* Swiper arrows sizing */
.profile-spotify-prev,
.profile-spotify-next{
    --swiper-navigation-size: 16px;
}

/* Pagination wrapper (so bullets appear below, not overlay) */
.swiper-pagination-wrapper{
    margin-top: .5rem;
    text-align: center;
}

.profile-spotify-pagination{
    position: static;
}

/* Interest tags on a profile. */
.profile-interest-tag {
    background: rgba(var(--primary-600, 233 30 99), .10);
    color: rgb(var(--primary-600, 233 30 99));
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
}

.add-user-lists-wrapper{
    max-height: 200px;
    overflow-y: scroll;
}

.list-item .user-avatar{
    width:40px;
    height:40px;
    margin-left:-18px
}

.list-item .separator{
    right: 1rem;
}

.no-notifications{
    max-width: 200px
}

input[type=checkbox]
{
    width: 25px; height: 25px;
}

.dropzone-previews.dropzone{
    min-height: 0px!important;
    border: none!important;
}

.dropzone .dz-preview.dz-image-preview {
    background: transparent!important;
}

.dropzone .dz-preview:hover .dz-image img {
     -webkit-filter: blur(2px)!important;
    filter: blur(2px)!important;
}

.dropzone .dz-preview .dz-filename{
    display: none!important;
}

.dropzone .dz-preview {
    min-height: unset;
}

/* Post comments */
.post-comments-wrapper .rounded-circle, .new-post-comment-area .rounded-circle{
    height:50px;
    width:50px
}

.post-comment .separator{
    right: 1rem;
}

.comment-textarea{
    height:45px!important;
    min-height:45px!important;
    border-radius: 20px!important;
    padding-top: 10px!important;
    overflow: hidden!important;
}

.hl-textarea-wrap {
    position: relative;
    width: 100%;
}

.hl-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none; /* don't block typing or dropzone */
    border-radius: .25rem; /* match bootstrap input */
}

.hl-highlights {
    white-space: pre-wrap;
    word-wrap: break-word;
    color: transparent;              /* only show highlight backgrounds */
    padding: .375rem .75rem;         /* bootstrap textarea padding */
    min-height: calc(1.5em * 3 + .75rem); /* approximate rows=3 */
}

/* Make the textarea background transparent so backdrop shows */
.hl-textarea {
    position: relative;
    background-color: transparent !important;
}

.comment-content p{
    margin-bottom: 0!important;
}

/* Swiper nav buttons CSS overrides; Default ones have contrast issues */

/* IG desktop-ish: dark faint circle + semi-transparent white arrow */
.post-media-swiper{
    position: relative;
}

.post-media-swiper .swiper-button-prev,
.post-media-swiper .swiper-button-next{
    width: 26px;
    height: 26px;
    border-radius: 999px;

    /* faint dark bg (not white), high transparency */
    background: rgba(0,0,0,.22) !important;

    border: 0 !important;
    box-shadow: none !important;

    opacity: 1 !important;

    top: 50%;
    transform: translateY(-50%);

    background-image: none !important;
}

/* arrow glyph: white + high transparency */
.post-media-swiper .swiper-button-prev:after,
.post-media-swiper .swiper-button-next:after{
    font-size: 13px !important;
    font-weight: 900;

    color: rgba(255,255,255,.82) !important; /* “transparent arrow” */
    text-shadow: none !important;
    opacity: 1 !important;
}

/* placement */
.post-media-swiper .swiper-button-prev{ left: 10px !important; }
.post-media-swiper .swiper-button-next{ right: 10px !important; }

/* disabled */
.post-media-swiper .swiper-button-disabled{
    opacity: .25 !important;
    pointer-events: none;
}

/* hover: slightly stronger (optional, IG-ish) */
.post-media-swiper .swiper-button-prev:hover,
.post-media-swiper .swiper-button-next:hover{
    background: rgba(0,0,0,.30) !important;
}
.post-media-swiper .swiper-button-prev:hover:after,
.post-media-swiper .swiper-button-next:hover:after{
    color: rgba(255,255,255,.92) !important;
}

/* White / slightly transparent Swiper pagination bullets */
 .swiper-pagination{
    bottom: 10px !important;
    z-index: 5;
}

 .swiper-pagination-bullet{
    width: 6px;
    height: 6px;
    margin: 0 3px !important;

    opacity: 1 !important; /* stop Swiper lowering it */
    background: rgba(255,255,255,.55) !important; /* white translucent */

    box-shadow: 0 1px 6px rgba(0,0,0,.18);
}

 .swiper-pagination-bullet-active{
    background: rgba(255,255,255,.95) !important; /* active = more solid */
}

/* If dynamicBullets is on, prevent scale weirdness + keep same look */
 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
    transform: none !important;
}


/**
 * Selectize (v0.15.2)
 * https://selectize.dev
 *
 * Copyright (c) 2013-2015 Brian Reavis & contributors
 * Copyright (c) 2020-2022 Selectize Team & contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 * @author Brian Reavis <brian@thirdroute.com>
 * @author Ris Adams <selectize@risadams.com>
 */
.selectize-control.plugin-drag_drop.multi>.selectize-input.dragging{overflow:visible}.selectize-control.plugin-drag_drop.multi>.selectize-input>div.ui-sortable-placeholder{visibility:visible !important;background:#f2f2f2 !important;background:rgba(0,0,0,0.06) !important;border:0 none !important;box-shadow:inset 0 0 12px 4px #fff}.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after{content:"!";visibility:hidden}.selectize-control.plugin-drag_drop .ui-sortable-helper{box-shadow:0 2px 5px rgba(0,0,0,0.2)}.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header{position:relative;padding:6px .75rem;border-bottom:1px solid #d0d0d0;background:#f8f8f8;border-radius:.25rem .25rem 0 0}.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close{position:absolute;right:.75rem;top:50%;color:#343a40;opacity:.4;margin-top:-12px;line-height:20px;font-size:20px !important;text-decoration:none}.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close:hover{color:black}.selectize-dropdown.plugin-optgroup_columns .selectize-dropdown-content{display:flex}.selectize-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0 none;flex-grow:1;flex-basis:0;min-width:0}.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0 none}.selectize-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.selectize-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0 none}.selectize-control.plugin-remove_button .item{display:inline-flex;align-items:center;padding-right:0 !important}.selectize-control.plugin-remove_button .item .remove{color:inherit;text-decoration:none;vertical-align:middle;display:inline-block;padding:1px 5px;border-left:1px solid #dee2e6;border-radius:0 2px 2px 0;box-sizing:border-box;margin-left:5px}.selectize-control.plugin-remove_button .item .remove:hover{background:rgba(0,0,0,0.05)}.selectize-control.plugin-remove_button .item.active .remove{border-left-color:rgba(0,0,0,0)}.selectize-control.plugin-remove_button .disabled .item .remove:hover{background:0}.selectize-control.plugin-remove_button .disabled .item .remove{border-left-color:white}.selectize-control.plugin-clear_button .clear{text-decoration:none;display:flex;position:absolute;height:100%;width:25px;top:0;right:calc(0.75rem - 5px);color:#000;opacity:.4;font-weight:bold;border:0;cursor:pointer;z-index:1;font-size:21px;justify-content:center;align-items:center}.selectize-control.plugin-clear_button .clear:hover{opacity:1}.selectize-control.plugin-clear_button.single .clear{right:calc(0.75rem - 5px + 1.5rem)}.selectize-dropdown.plugin-auto_position.selectize-position-top{border-top:1px solid #d0d0d0;border-bottom:0 none;border-radius:3px 3px 0 0;box-shadow:0 -6px 12px rgba(0,0,0,0.18)}.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active{border-radius:0 0 3px 3px;border-top:0 none}.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active::before{top:0;bottom:unset}.selectize-control{position:relative}.selectize-dropdown,.selectize-input,.selectize-input input{color:#343a40;font-family:inherit;font-size:inherit;line-height:1.5;font-smoothing:inherit}.selectize-input,.selectize-control.single .selectize-input.input-active{background:#fff;cursor:text;display:inline-block}.selectize-input{border:1px solid #ced4da;padding:.375rem .75rem;display:inline-block;width:100%;position:relative;z-index:1;box-sizing:border-box;box-shadow:none;border-radius:.25rem}.selectize-control.multi .selectize-input.has-items{padding:calc(0.375rem - 1px - 0px) 0.75rem calc(0.375rem - 1px - 3px - 0px)}.selectize-input.full{background-color:#fff}.selectize-input.disabled,.selectize-input.disabled *{cursor:default !important}.selectize-input.focus{box-shadow:inset 0 1px 2px rgba(0,0,0,0.15)}.selectize-input.dropdown-active{border-radius:.25rem .25rem 0 0}.selectize-input>*{vertical-align:baseline;display:inline-block;zoom:1}.selectize-control.multi .selectize-input>div{cursor:pointer;margin:0 3px 3px 0;padding:1px 5px;background:#efefef;color:#343a40;border:0 solid #dee2e6}.selectize-control.multi .selectize-input>div.active{background:#007bff;color:#fff;border:0 solid rgba(0,0,0,0)}.selectize-control.multi .selectize-input.disabled>div,.selectize-control.multi .selectize-input.disabled>div.active{color:#878787;background:white;border:0 solid white}.selectize-input>input{display:inline-block !important;padding:0 !important;min-height:0 !important;max-height:none !important;max-width:100% !important;margin:0 !important;text-indent:0 !important;border:0 none !important;background:none !important;line-height:inherit !important;user-select:auto !important;box-shadow:none !important}.selectize-input>input::-ms-clear{display:none}.selectize-input>input:focus{outline:none !important}.selectize-input>input[placeholder]{box-sizing:initial}.selectize-input.has-items>input{margin:0 0 !important}.selectize-input::after{content:" ";display:block;clear:left}.selectize-input.dropdown-active::before{content:" ";display:block;position:absolute;background:#d8dde1;height:1px;bottom:0;left:0;right:0}.selectize-dropdown{position:absolute;top:100%;left:0;width:100%;z-index:10;border:1px solid #d0d0d0;background:#fff;margin:-1px 0 0 0;border-top:0 none;box-sizing:border-box;box-shadow:0 1px 3px rgba(0,0,0,0.1);border-radius:0 0 .25rem .25rem}.selectize-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.selectize-dropdown [data-selectable] .highlight{background:rgba(255,237,40,0.4);border-radius:1px}.selectize-dropdown .option,.selectize-dropdown .optgroup-header,.selectize-dropdown .no-results,.selectize-dropdown .create{padding:3px .75rem}.selectize-dropdown .option,.selectize-dropdown [data-disabled],.selectize-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.selectize-dropdown [data-selectable].option{opacity:1;cursor:pointer}.selectize-dropdown .optgroup:first-child .optgroup-header{border-top:0 none}.selectize-dropdown .optgroup-header{color:#6c757d;background:#fff;cursor:default}.selectize-dropdown .active{background-color:#007bff;color:#fff}.selectize-dropdown .active.create{color:#16181b}.selectize-dropdown .selected{background-color:#007bff;color:#fff}.selectize-dropdown .create{color:rgba(52,58,64,0.5)}.selectize-dropdown .active:not(.selected){background:#e9ecef;color:#16181b}.selectize-dropdown-content{overflow-y:auto;overflow-x:hidden;max-height:200px;overflow-scrolling:touch}.selectize-dropdown-emptyoptionlabel{text-align:center}.selectize-dropdown .spinner{display:inline-block;width:30px;height:30px;margin:3px .75rem}.selectize-dropdown .spinner:after{content:" ";display:block;width:24px;height:24px;margin:3px;border-radius:50%;border:5px solid #d0d0d0;border-color:#d0d0d0 transparent #d0d0d0 transparent;animation:lds-dual-ring 1.2s linear infinite}@keyframes lds-dual-ring{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.selectize-control.single .selectize-input,.selectize-control.single .selectize-input input{cursor:pointer}.selectize-control.single .selectize-input.input-active,.selectize-control.single .selectize-input.input-active input:not(:read-only){cursor:text}.selectize-control.single .selectize-input:after{content:" ";display:block;position:absolute;top:50%;right:calc(0.75rem + 5px);margin-top:-3px;width:0;height:0;border-style:solid;border-width:5px 5px 0 5px;border-color:#343a40 transparent transparent transparent}.selectize-control.single .selectize-input.dropdown-active:after{margin-top:-4px;border-width:0 5px 5px 5px;border-color:transparent transparent #343a40 transparent}.selectize-control.rtl{text-align:right}.selectize-control.rtl.single .selectize-input:after{left:calc(0.75rem + 5px);right:auto}.selectize-control.rtl .selectize-input>input{margin:0 4px 0 -2px !important}.selectize-control .selectize-input.disabled{opacity:.5;background-color:#fff}.selectize-dropdown,.selectize-dropdown.form-control{height:auto;padding:0;margin:2px 0 0 0;z-index:1000;background:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:.25rem;box-shadow:0 6px 12px rgba(0,0,0,0.175)}.selectize-dropdown .optgroup-header{font-size:.875rem;line-height:1.5}.selectize-dropdown .optgroup:first-child:before{display:none}.selectize-dropdown .optgroup:before{content:" ";display:block;height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid #e9ecef;margin-left:-0.75rem;margin-right:-0.75rem}.selectize-dropdown .create{padding-left:.75rem}.selectize-dropdown-content{padding:5px 0}.selectize-dropdown-emptyoptionlabel{text-align:center}.selectize-input{min-height:calc(1.5em + 0.75rem + 2px);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.selectize-input{transition:none}}.selectize-input.dropdown-active{border-radius:.25rem}.selectize-input.dropdown-active::before{display:none}.selectize-input.focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)}.is-invalid .selectize-input{border-color:#dc3545;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.is-invalid .selectize-input:focus{border-color:#bd2130;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #eb8c95}.selectize-control.form-control-sm .selectize-input.has-items{min-height:calc(1.5em + 0.5rem + 2px) !important;height:calc(1.5em + 0.5rem + 2px);padding:.25rem .5rem !important;font-size:.875rem;line-height:1.5}.selectize-control.multi .selectize-input.has-items{height:auto;padding-left:calc(0.75rem - 5px);padding-right:calc(0.75rem - 5px)}.selectize-control.multi .selectize-input>div{border-radius:calc(0.25rem - 1px)}.form-control.selectize-control{padding:0;height:auto;border:0;background:0;box-shadow:none;border-radius:0}.input-group .selectize-control:not(:last-child) .selectize-input{overflow:unset;border-top-right-radius:0;border-bottom-right-radius:0}.input-group .selectize-control:not(:first-child) .selectize-input{overflow:unset;border-top-left-radius:0;border-bottom-left-radius:0}.selectize-dropdown.plugin-auto_position.selectize-position-top{border-top:1px solid #ced4da !important;border-bottom:1px solid #ced4da !important;border-radius:.25rem !important}.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active{border-radius:.25rem !important;border-top:1px solid #ced4da !important}.selectize-dropdown.plugin-auto_position.selectize-position-top{border-top:1px solid #d0d0d0;border-bottom:0 none;border-radius:3px 3px 0 0;box-shadow:0 -6px 12px rgba(0,0,0,0.18)}.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active{border-radius:0 0 3px 3px;border-top:0 none}.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active::before{top:0;bottom:unset}.selectize-control.plugin-clear_button .clear{text-decoration:none;display:flex;position:absolute;height:100%;width:25px;top:0;right:calc(0.75rem - 5px);color:#000;opacity:.4;font-weight:bold;border:0;cursor:pointer;z-index:1;font-size:21px;justify-content:center;align-items:center}.selectize-control.plugin-clear_button .clear:hover{opacity:1}.selectize-control.plugin-clear_button.single .clear{right:calc(0.75rem - 5px + 1.5rem)}.selectize-control.plugin-drag_drop.multi>.selectize-input.dragging{overflow:visible}.selectize-control.plugin-drag_drop.multi>.selectize-input>div.ui-sortable-placeholder{visibility:visible !important;background:#f2f2f2 !important;background:rgba(0,0,0,0.06) !important;border:0 none !important;box-shadow:inset 0 0 12px 4px #fff}.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after{content:"!";visibility:hidden}.selectize-control.plugin-drag_drop .ui-sortable-helper{box-shadow:0 2px 5px rgba(0,0,0,0.2)}.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header{position:relative;padding:6px .75rem;border-bottom:1px solid #d0d0d0;background:#f8f8f8;border-radius:.25rem .25rem 0 0}.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close{position:absolute;right:.75rem;top:50%;color:#343a40;opacity:.4;margin-top:-12px;line-height:20px;font-size:20px !important;text-decoration:none}.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close:hover{color:black}.selectize-dropdown.plugin-optgroup_columns .selectize-dropdown-content{display:flex}.selectize-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0 none;flex-grow:1;flex-basis:0;min-width:0}.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0 none}.selectize-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.selectize-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0 none}.selectize-control.plugin-remove_button .item{display:inline-flex;align-items:center;padding-right:0 !important}.selectize-control.plugin-remove_button .item .remove{color:inherit;text-decoration:none;vertical-align:middle;display:inline-block;padding:1px 5px;border-left:1px solid #dee2e6;border-radius:0 2px 2px 0;box-sizing:border-box;margin-left:5px}.selectize-control.plugin-remove_button .item .remove:hover{background:rgba(0,0,0,0.05)}.selectize-control.plugin-remove_button .item.active .remove{border-left-color:rgba(0,0,0,0)}.selectize-control.plugin-remove_button .disabled .item .remove:hover{background:0}.selectize-control.plugin-remove_button .disabled .item .remove{border-left-color:white}
/* =========================================================
   STORIES.CSS (FEED / VIEWER) — FULL UPDATED FILE
   Includes: tray thumbs, skeleton, viewer overlay + OUTSIDE tap-zones
   ========================================================= */

/* =========================
   STORIES TRAY (REAL SWIPER)
   ========================= */

#stories-swiper {
    padding: 5px 0;
}

#stories-swiper .swiper-wrapper {
    align-items: flex-start;
}

#stories-swiper .swiper-slide.story-thumb {
    width: auto;
}

.story-thumb-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.story-thumb-avatar-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(45deg, #ff7a00, #ff0069, #d300c5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-thumb-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
}

.story-thumb-name {
    margin-top: 6px;
    font-size: 12px;
    max-width: 76px;
    text-align: center;
}

/* =========================
   ADD STORY THUMB
   ========================= */

.story-thumb-avatar-add-wrap {
    position: relative;
    background: #ccc;
}

.story-thumb-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #999;
}

.story-thumb-add-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff0069;
    color: #fff;
    font-size: 14px;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =======================================
   Seen / Unseen ring states (MUST be last)
   ======================================= */

.story-thumb.story-thumb-unseen .story-thumb-avatar-wrap {
    background: linear-gradient(45deg, #ff7a00, #ff0069, #d300c5) !important;
}

.story-thumb.story-thumb-seen .story-thumb-avatar-wrap {
    background: #d7dce1 !important;
}

.story-thumb.story-thumb-seen .story-thumb-name {
    opacity: 0.75;
}

/* =========================
   STORIES SKELETON (LOADING)
   Works everywhere (feed + profile highlights)
   ========================= */

/* Base skeleton row */
.stories-swiper-skeleton {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* Base skeleton item */
.stories-swiper-skeleton__item {
    width: 76px;
    min-width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Base ring (default = feed size) */
.stories-swiper-skeleton__ring {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    padding: 2px;
    background: linear-gradient(45deg, #ff7a00, #ff0069, #d300c5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stories-swiper-skeleton__avatar {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    border: 2px solid #fff;
    background: #d7dce1;
}

.stories-swiper-skeleton__name {
    margin-top: 6px;
    width: 70px;
}

.stories-swiper-skeleton__line {
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, #e6eaee 25%, #f2f4f7 37%, #e6eaee 63%);
    background-size: 400% 100%;
    animation: storiesSkeletonShimmer 1.1s ease-in-out infinite;
}

@keyframes storiesSkeletonShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* --- Optional: smaller skeleton variant (highlights) --- */
/* Just add class="stories-swiper-skeleton stories-swiper-skeleton--sm" on the wrapper */
.stories-swiper-skeleton--sm .stories-swiper-skeleton__item {
    width: 72px;
    min-width: 72px;
}

.stories-swiper-skeleton--sm .stories-swiper-skeleton__ring {
    width: 56px;
    height: 56px;
    padding: 3px;
}


/* =========================
   VIEWER OVERLAY (REFINED)
   ========================= */

.stories-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
}

.stories-viewer-overlay.visible { display: block; }

.stories-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.82);
    opacity: 0;
    transition: opacity 250ms ease-out;
}

/* IMPORTANT:
   .stories-viewer is the full-screen stage
   tap-zones live inside it and the card sits above them */
.stories-viewer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 250ms ease-out, transform 250ms ease-out;
    z-index: 1;
}

/* Card wrapper */
.stories-viewer-inner {
    width: min(420px, 100vw - 32px);
    height: calc(100vh - 80px);
    max-height: 900px;
    border-radius: 20px;
    overflow: hidden; /* IMPORTANT: keep hidden for clean chrome */
    display: flex;
    position: relative;
    z-index: 3; /* ABOVE tap-zones */
}

/* Fade in/out */
.stories-viewer-overlay.visible .stories-viewer-backdrop { opacity: 1; }
.stories-viewer-overlay.visible .stories-viewer { opacity: 1; transform: translateY(0); }

.stories-viewer-overlay.closing .stories-viewer-backdrop { opacity: 0; }
.stories-viewer-overlay.closing .stories-viewer { opacity: 0; transform: translateY(10px); }

/* Screen container (the story stage) */
.stories-viewer-swiper {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
}

/* Media */
.story-image,
.story-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Legibility gradients */
.stories-legibility {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    pointer-events: none;
}

.stories-legibility--top {
    top: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
}

.stories-legibility--bottom {
    bottom: 0;
    height: 140px;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
}

/* Chrome wrappers (top/bottom) */
.stories-chrome {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 8;
    pointer-events: none;
}

.stories-chrome--top { top: 0; padding: 10px 10px 0; }
.stories-chrome--bottom { bottom: 0; padding: 0 10px 10px; }

/* Progress bars */
.stories-viewer-progress-wrap {
    display: flex;
    gap: 6px;
    padding: 2px 0 10px;
    pointer-events: none;
}

.story-progress-bar {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,0.22);
    overflow: hidden;
}

.story-progress-fill {
    width: 0;
    height: 100%;
    background: rgba(255,255,255,0.88);
}

/* =========================
   HEADER (SINGLE SOURCE)
   ========================= */

.stories-viewer-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    color:#fff;
    pointer-events:none;
}

/* Left user block */
.stories-viewer-user{
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-width:0;       /* enables ellipsis */
    flex:1 1 auto;
}

.stories-viewer-avatar{
    width:36px;
    height:36px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid rgba(255,255,255,0.25);
    flex:0 0 auto;
    pointer-events:auto; /* clickable */
}

/* Stack: username / meta */
.stories-viewer-user-info{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    min-width:0;
    flex:1 1 auto;
    line-height:1.1;
}

/* Username truncates */
.stories-viewer-username{
    display:block;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:600;
    line-height:1.1;
    margin:0;
    padding:0;
    color:#fff;
    text-decoration:none;
    pointer-events:auto; /* clickable */
}
.stories-viewer-username:hover{ text-decoration: underline; }

/* Meta row (time + views + pill inline) */
.stories-viewer-meta{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    line-height:1;
    font-size:12px;
    opacity:0.85;
}

.stories-viewer-time{
    font-size:12px;
    opacity:0.75;
    margin-top:0;
    white-space:nowrap;
}

.stories-viewer-views{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:12px;
    opacity:.9;
    white-space:nowrap;
}
.stories-viewer-views ion-icon{ font-size:14px; }

/* Sound pill (badge-like + truncates) */
#stories-sound-pill.stories-sound-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    max-width:min(220px, 60vw);
    min-width:0;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    line-height:1;
    letter-spacing:0.2px;
    color:rgba(255,255,255,0.88);
    background:rgba(0,0,0,0.28);
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(6px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    opacity:.92;
}

/* Right controls block */
.stories-viewer-controls{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    pointer-events:auto;
}

.stories-viewer-controls button,
.stories-viewer-controls .stories-owner-menu-btn {
    background: rgba(0,0,0,0.40);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    color: #fff;
    pointer-events: auto;
    text-decoration: none;
}

.stories-viewer-controls button:focus,
.stories-viewer-controls .stories-owner-menu-btn:focus {
    outline: none;
    box-shadow: none;
}

.stories-viewer-controls ion-icon {
    font-size: 18px;
    color: #fff;
    pointer-events: none;
}

.stories-owner-menu-btn.dropdown-toggle::after {
    display: none !important;
}

/* Close button */
.stories-viewer-close{
    width:34px;
    height:34px;
    border-radius:999px;
}

/* =========================
   REPLY (visual only)
   ========================= */

.stories-reply{
    display:flex;
    align-items:center;
    gap:8px;
    /*pointer-events:none;*/
}

.stories-reply { pointer-events: auto; }
.stories-reply-pill, .stories-reply-btn { cursor: pointer; }

.stories-reply-pill{
    flex: 1;
    height: 34px;
    border-radius: 999px;
    padding: 0 12px;
    display:flex;
    align-items:center;
    color: rgba(255,255,255,0.75);
    font-size: 0.82rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
}

.stories-reply-btn{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.9);
}

/* =========================
   TAP ZONES (OUTSIDE THE CARD)
   ========================= */

.stories-viewer-tap-zones-outside {
    position: absolute;
    inset: 0;
    z-index: 2;            /* above backdrop, below the card */
    display: flex;
    pointer-events: none;  /* enable only on left/right */
}

.stories-viewer-tap-left,
.stories-viewer-tap-right {
    width: 35%;
    pointer-events: auto;
}

.stories-viewer-tap-middle {
    flex: 1;
    pointer-events: none;  /* hole over the card */
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 768px) {
    .stories-viewer-inner {
        width: 100vw;
        height: 100vh;
        max-height: none;
        border-radius: 0;
    }

    .stories-viewer-swiper { border-radius: 0; }

    .stories-viewer-tap-left,
    .stories-viewer-tap-right {
        width: 50%;
    }

    .stories-viewer-tap-middle {
        display: none;
    }
}

@media (min-width: 992px) {
    .stories-viewer { padding: 0; }

    .stories-viewer-inner {
        height: calc(100vh - 32px);
        width: min(540px, 100vw - 64px);
        max-height: none;
        border-radius: 20px;
    }
}

/* =========================
   TEXT OVERLAY LAYER
   ========================= */

.stories-text-layer{
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 36px);
    max-width: calc(100% - 36px);
    text-align: center;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 10px 28px rgba(0,0,0,0.45);
    word-break: break-word;
    pointer-events: none;
    font-size: clamp(1.15rem, 1.0rem + 0.7vw, 1.65rem);
    line-height: 1.25;
}

/* =========================
   LINK CTA (BOTTOM)
   ========================= */

.stories-chrome--bottom{
    z-index: 8;
    pointer-events: none;
}

#stories-link-btn{
    pointer-events: auto;
}

.stories-link-btn{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    text-decoration: none;
    max-width: calc(100% - 24px);
}

.stories-link-btn:hover,
.stories-link-btn:focus,
.stories-link-btn:active{
    color: #fff;
    text-decoration: none;
    background: rgba(0,0,0,0.45);
    border-color: rgba(255,255,255,0.18);
    outline: none;
}

.stories-link-btn .stories-link-text{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.stories-link-btn ion-icon{
    font-size: 16px;
    pointer-events: none;
}

/* =========================
   TEXT STORY BACKGROUNDS
   ========================= */

.stories-viewer-swiper.story-bg--solid_black { background: #000 !important; }

.stories-viewer-swiper.story-bg--grad_orange { background: linear-gradient(135deg, #ff8a00, #ff5722) !important; }
.stories-viewer-swiper.story-bg--grad_pink   { background: linear-gradient(135deg, #ff2d8d, #9b3dff) !important; }
.stories-viewer-swiper.story-bg--grad_red    { background: linear-gradient(135deg, #ff5252, #e53935) !important; }
.stories-viewer-swiper.story-bg--grad_purple { background: linear-gradient(135deg, #9b3dff, #3f51b5) !important; }
.stories-viewer-swiper.story-bg--grad_indigo { background: linear-gradient(135deg, #3f51b5, #00bcd4) !important; }
.stories-viewer-swiper.story-bg--grad_blue   { background: linear-gradient(135deg, #2196f3, #00bcd4) !important; }
.stories-viewer-swiper.story-bg--grad_teal   { background: linear-gradient(135deg, #00bcd4, #4caf50) !important; }
.stories-viewer-swiper.story-bg--grad_green  { background: linear-gradient(135deg, #4caf50, #ffca28) !important; }
.stories-viewer-swiper.story-bg--grad_yellow { background: linear-gradient(135deg, #ffca28, #ff8a00) !important; }
.stories-viewer-swiper.story-bg--grad_brown  { background: linear-gradient(135deg, #6d4c41, #e53935) !important; }

.stories-viewer-swiper.story-bg--grad_default{
    background:
            radial-gradient(circle at 25% 10%, rgba(255, 0, 128, 0.35), rgba(0,0,0,0) 55%),
            radial-gradient(circle at 75% 90%, rgba(155, 61, 255, 0.35), rgba(0,0,0,0) 55%),
            #0b0b10 !important;
}

/* =========================================================
   DROPDOWN FIX (BS4) — KEEP THIS LAST
   Fixes: "clickable but invisible" + "expanded by default"
   ========================================================= */

.stories-owner-menu {
    position: relative;     /* anchor dropdown menu */
    pointer-events: auto;
    z-index: 9999;          /* above chrome/gradients */
}

.stories-owner-menu .dropdown-menu {
    right: 0;
    left: auto;
    top: 100%;
    margin-top: 8px;
    z-index: 99999;
    pointer-events: auto;
}

/* only visible when BS adds .show */
.stories-owner-menu.show .dropdown-menu {
    display: block;
}

/* =========================================================
   DROPDOWN "GHOST CLICK" HARD FIX (BS4)
   Put this at the VERY END of stories.css
   ========================================================= */

/* Always keep the menu fully disabled unless .show is present */
.stories-owner-menu .dropdown-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Only Bootstrap-opened menus become visible + clickable */
.stories-owner-menu.show .dropdown-menu,
.stories-owner-menu .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Ensure menu stacks above chrome/gradients */
.stories-owner-menu { position: relative; z-index: 99999; }
.stories-owner-menu .dropdown-menu { z-index: 999999; }

/* Story reply */
/*todo: unused*/
#backToStoryBtn.btn-link {
    padding: 0 .25rem;
    text-decoration: none;
}
#backToStoryBtn.btn-link:hover {
    text-decoration: underline;
}
#backToStoryBtn.btn-link:focus {
    box-shadow: none;
}

/*own story comment disabled*/

.stories-reply.stories-reply--disabled {
    opacity: .45;
    cursor: default;
    /* DO NOT use pointer-events:none; */
}

/* =========================================================
   MOBILE 100vh FIX (URL bar / notch)
   Put at VERY END of stories.css
   ========================================================= */

/* Use dynamic viewport units when available */
@supports (height: 100dvh) {
    .stories-viewer-inner {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}

/* JS fallback (uses --vh set in JS) */
.stories-viewer-inner {
    height: calc(var(--vh, 1vh) * 100) !important;
    max-height: calc(var(--vh, 1vh) * 100) !important;
}

/* Keep your desktop sizing rules working */
@media (min-width: 992px) {
    .stories-viewer-inner {
        height: calc((var(--vh, 1vh) * 100) - 32px) !important;
        max-height: none !important;
    }
}

/* If you want to respect safe areas on iOS */
.stories-viewer-inner {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Prevent background scroll when viewer is open */
.stories-no-scroll {
    overflow: hidden !important;
    height: 100% !important;
}

/* Tap zones INSIDE card (mobile) */
.stories-viewer-tap-zones-inside{
    position:absolute;
    inset:0;
    z-index:5;            /* above media, below chrome (chrome is 8) */
    display:none;
    pointer-events:none;
}

.stories-viewer-tap-left-inside,
.stories-viewer-tap-right-inside{
    position:absolute;
    top:0; bottom:0;
    width:50%;
    pointer-events:auto;
}

.stories-viewer-tap-left-inside{ left:0; }
.stories-viewer-tap-right-inside{ right:0; }

@media (max-width: 768px){
    .stories-viewer-tap-zones-inside{ display:block; }
}

.stories-viewer-username .story-verified svg {
    width: 1em !important;
    height: 1em !important;
    display: block;
}