/* =========================
   STORIES
========================= */

.stories-section {
  width: 100%;

  padding: 18px 0 10px;

  overflow: hidden;
}

.stories-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 18px 10px;
}

.stories-header h2 {
  margin: 0;

  color: #f4f7ff;

  font-size: 18px;
  font-weight: 700;
}

.stories-list {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 2px 18px 10px;

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;
}

.stories-list::-webkit-scrollbar {
  display: none;
}

.stories-loading {
  color: #7f8ba0;

  font-size: 13px;
}


/* =========================
   ITEM STORY
========================= */

.story-item {
  width: 68px;

  flex: 0 0 68px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;

  border: 0;
  background: transparent;

  color: #dbe4f3;

  cursor: pointer;
}

.story-avatar-wrapper {
  position: relative;

  width: 64px;
  height: 64px;

  padding: 3px;

  border-radius: 50%;

  overflow: visible;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #60a5fa
    );
}

.story-avatar {
  width: 100%;
  height: 100%;

  display: block;

  border-radius: 50%;

  object-fit: cover;

  border: 3px solid #0b1120;

  background: #161f32;
}

.story-item.viewed
.story-avatar-wrapper {
  background: #3c4658;
}

.story-name {
  width: 100%;

  overflow: hidden;

  color: #9eabc0;

  font-size: 11px;

  text-align: center;

  white-space: nowrap;
  text-overflow: ellipsis;
}


/* =========================
   QUICK POST
========================= */

.quick-post {
  margin: 10px 18px 14px;
  padding: 10px;

  display: flex;
  align-items: center;
  gap: 10px;

  border:
    1px solid rgba(255, 255, 255, 0.07);

  border-radius: 18px;

  background: #11192a;
}

.quick-post-avatar {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border-radius: 50%;

  object-fit: cover;

  border:
    2px solid rgba(75, 134, 255, 0.45);
}

.quick-post-input {
  flex: 1;

  min-width: 0;
  min-height: 42px;

  padding: 0 14px;

  border:
    1px solid rgba(255, 255, 255, 0.07);

  border-radius: 14px;

  background: #171f31;

  color: #8f9bb0;

  font-size: 13px;

  text-align: left;

  cursor: pointer;
}


/* =========================
   OVERLAY COMPOSER
========================= */

.post-composer-overlay {
  position: fixed;
  inset: 0;

  z-index: 99970;

  opacity: 0;
  pointer-events: none;

  background:
    rgba(0, 0, 0, 0.62);

  transition:
    opacity 0.25s ease;
}

.post-composer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}


/* =========================
   DRAWER COMPOSER
========================= */

.post-composer-drawer {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 99980;

  max-height: 82dvh;

  padding:
    8px
    16px
    calc(
      16px +
      env(safe-area-inset-bottom)
    );

  border-radius:
    24px
    24px
    0
    0;

  background: #0d1424;

  transform:
    translateY(105%);

  transition:
    transform
    0.3s
    cubic-bezier(.22, .8, .28, 1);
}

.post-composer-drawer.active {
  transform:
    translateY(0);
}

.post-composer-handle {
  width: 48px;
  height: 5px;

  margin:
    4px
    auto
    14px;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.18);
}


/* =========================
   HEADER COMPOSER
========================= */

.post-composer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 16px;
}

.post-composer-header h2 {
  margin: 0;

  color: #f4f7ff;

  font-size: 19px;
}

#closePostComposer {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.06);

  color: #dce5f5;

  font-size: 16px;
}


/* =========================
   TEXTAREA
========================= */

.post-composer-drawer
#postText {
  width: 100%;

  min-height: 150px;
  max-height: 320px;

  padding: 14px;

  resize: vertical;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  outline: none;

  border-radius: 16px;

  background: #151f34;

  color: #eef3ff;

  font: inherit;
  font-size: 14px;
  line-height: 1.5;
}

.post-composer-drawer
#postText::placeholder {
  color: #748198;
}

.post-composer-drawer
#postText:focus {
  border-color: #3478f6;
}


/* =========================
   FOOTER
========================= */

.post-composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-top: 14px;
}

.post-composer-tools {
  display: flex;
  gap: 8px;
}

.post-composer-tools button {
  width: 42px;
  height: 42px;

  border: 0;
  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.06);

  color: #91a0b7;

  font-size: 15px;
}

.post-composer-submit {
  min-height: 42px;

  padding: 0 22px;

  border: 0;
  border-radius: 13px;

  background: #2d6df6;

  color: #fff;

  font-size: 13px;
  font-weight: 700;
}



.story-add {
  position: absolute;
  
  left: 50%;
  bottom: -11px;
  
  transform:
    translateX(-50%);
  
  width: 22px;
  height: 22px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  padding: 0;
  
  border:
    3px solid #0b1120;
  
  border-radius: 50%;
  
  background: #2d6df6;
  
  color: #fff;
  
  font-size: 9px;
  
  cursor: pointer;
  
  z-index: 3;
}

.story-item {
  padding-bottom: 8px;
}

.story-name {
  margin-top: 5px;
}