/* ============================================
   ACTGRAM — Instagram-style Stories
   ============================================ */

.ig-story-root {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  background: #000;
  overflow: hidden;
  color: #fff;
  font-family: 'DM Sans', 'Plus Jakarta Sans', sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

@media (min-width: 768px) {
  .ig-story-root {
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.45);
  }
}

/* ---- Viewer ---- */
.ig-story-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #111;
}

.ig-story-media img,
.ig-story-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ig-story-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 22%, transparent 68%, rgba(0,0,0,0.65) 100%);
  z-index: 2;
}

.ig-story-progress-row {
  display: flex;
  gap: 4px;
  padding: 10px 12px 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}

.ig-story-progress-seg {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  overflow: hidden;
}

.ig-story-progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 99px;
}

.ig-story-progress-fill.done { width: 100%; }
.ig-story-progress-fill.playing {
  animation: igStoryProgress 5s linear forwards;
}

.ig-story-progress-fill.paused {
  animation-play-state: paused;
}

@keyframes igStoryProgress {
  from { width: 0%; }
  to { width: 100%; }
}

.ig-story-header {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 30;
}

.ig-story-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  flex-shrink: 0;
}

.ig-story-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-story-meta { flex: 1; min-width: 0; }

.ig-story-username {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.ig-story-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
}

.ig-story-icon-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.ig-story-icon-btn:active { transform: scale(0.92); }

.ig-story-tap-zones {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 20;
}

.ig-story-tap-zones > div { flex: 1; }

.ig-story-caption {
  position: absolute;
  bottom: 92px;
  left: 0;
  right: 0;
  padding: 0 20px;
  z-index: 25;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ── Reposted post/reel/thought slide (Instagram-style "Add to story") ──
   The card sits above .ig-story-tap-zones (z-index 20) so it can be tapped
   through to the original post, while the strips either side of it stay
   free for prev/next navigation. */
.ig-shared-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.45);
  transform: scale(1.2);
}

.ig-shared-backdrop-plain {
  background: linear-gradient(160deg, #0F172A 0%, #1E293B 60%, #334155 100%);
  filter: none;
  transform: none;
}

.ig-shared-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 22px 108px;
  box-sizing: border-box;
  pointer-events: none;
}

.ig-shared-card {
  pointer-events: auto;
  width: 100%;
  max-width: 340px;
  max-height: 100%;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.ig-shared-card:active { transform: scale(0.985); }

.ig-shared-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  flex-shrink: 0;
}

.ig-shared-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #E2E8F0;
}

.ig-shared-avatar-ph { background: #CBD5E1; }

.ig-shared-head-text { flex: 1; min-width: 0; }

.ig-shared-name {
  font-size: 13px;
  font-weight: 800;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ig-shared-tick { color: #0072B5; font-size: 13px; }

.ig-shared-handle {
  font-size: 11px;
  color: #94A3B8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ig-shared-type {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #0072B5;
  background: #E8F7FD;
  padding: 3px 8px;
  border-radius: 99px;
  flex-shrink: 0;
}

.ig-shared-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #0F172A;
  overflow: hidden;
  flex-shrink: 0;
}

.ig-shared-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text-only reposts (thoughts) show the words instead of a picture. */
.ig-shared-thumb-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  box-sizing: border-box;
  background: linear-gradient(150deg, #00AEEF 0%, #0072B5 100%);
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.ig-shared-thumb-text i { font-size: 26px; opacity: 0.55; }

.ig-shared-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  pointer-events: none;
}

.ig-shared-caption {
  padding: 10px 12px 0;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ig-shared-cta {
  padding: 10px 12px 12px;
  font-size: 12px;
  font-weight: 800;
  color: #00AEEF;
  display: flex;
  align-items: center;
  gap: 5px;
}

@media (max-width: 380px) {
  .ig-shared-wrap { padding: 66px 16px 100px; }
  .ig-shared-card { max-width: 300px; }
}

.ig-story-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 30;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

.ig-story-reply {
  flex: 1;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 99px;
  font-size: 14px;
  color: #fff;
  outline: none;
  backdrop-filter: blur(8px);
}

.ig-story-reply::placeholder { color: rgba(255, 255, 255, 0.65); }

.ig-story-heart.liked i { color: #ff3040; }
#ig-story-like-btn.liked i { color: #ff3040; }

.ig-story-seenby-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 99px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  font-family: 'DM Sans', sans-serif;
}
.ig-story-seenby-btn:active { transform: scale(0.98); }

.ig-story-viewers-sheet { padding: 4px 4px 8px; }
.ig-story-viewers-sheet h3 {
  font-size: 15px;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 14px;
  font-family: 'Outfit', sans-serif;
}
.ig-story-viewers-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 50vh;
  overflow-y: auto;
}
.ig-story-viewer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
}
.ig-story-viewer-row img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ig-story-viewer-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
  font-family: 'DM Sans', sans-serif;
}
.ig-story-viewers-empty {
  text-align: center;
  color: #94A3B8;
  font-size: 13px;
  padding: 24px 0;
  font-family: 'DM Sans', sans-serif;
}

.ig-story-menu {
  position: absolute;
  top: 72px;
  right: 14px;
  background: rgba(30, 30, 30, 0.95);
  border-radius: 12px;
  overflow: hidden;
  z-index: 40;
  min-width: 180px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.ig-story-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.ig-story-menu button:hover { background: rgba(255, 255, 255, 0.08); }

.ig-story-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 24px;
}

/* ---- Creator ---- */
.ig-story-creator {
  background: #000;
}

.ig-story-creator-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0a0a0a;
}

.ig-story-creator-preview video,
.ig-story-creator-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-story-creator-text-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: #00AEEF;
}

/* The global `input, textarea, select { background: var(--white) !important }`
   rule in design-system.css:2062 also hits this textarea, painting a white box
   over the gradient. The same `!important` + #story-upload prefix pattern used
   by .ig-story-caption-input below is required to keep it transparent. */
#story-upload .ig-story-creator-text-input,
.ig-story-creator-text-input {
  width: 100%;
  background: transparent !important;
  border: none !important;
  outline: none;
  color: #fff !important;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  resize: none;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#story-upload .ig-story-creator-text-input:focus,
.ig-story-creator-text-input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.ig-story-creator-text-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 800;
}

.ig-story-creator-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
}

.ig-story-creator-tools {
  display: flex;
  gap: 8px;
}

.ig-story-creator-tool {
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
}

.ig-story-creator-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.ig-story-mode-tabs {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 18px;
}

.ig-story-mode-tab {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.ig-story-mode-tab.active {
  color: #fff;
  border-bottom-color: #fff;
}

.ig-story-gallery-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 14px 16px;
  scrollbar-width: none;
}

.ig-story-gallery-row::-webkit-scrollbar { display: none; }

.ig-story-gallery-item {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.75;
  transition: opacity 150ms, border-color 150ms;
}

.ig-story-gallery-item.selected {
  border-color: #fff;
  opacity: 1;
}

.ig-story-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-story-gallery-pick {
  width: auto;
  height: 64px;
  min-width: 160px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 0 16px;
}

.ig-story-capture-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px 8px;
}

.ig-story-side-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ig-story-shutter {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.ig-story-shutter-inner {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
  transition: transform 120ms, border-radius 120ms;
}

.ig-story-shutter:active .ig-story-shutter-inner {
  transform: scale(0.9);
}

.ig-story-shutter.recording .ig-story-shutter-inner {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ff3040;
}

/* TEXT MODE — the shutter still advances to the edit step, but a camera
   shutter reads as "take a photo" when there is nothing to photograph.
   Render it as a solid cyan check-mark "done" button instead. */
.ig-story-shutter.is-text-done {
  border-color: rgba(255, 255, 255, 0.95);
  background: #00AEEF;
}

.ig-story-shutter.is-text-done .ig-story-shutter-inner {
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-story-shutter.is-text-done .ig-story-shutter-inner::before {
  content: '';
  width: 26px;
  height: 15px;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  border-radius: 2px;
  transform: rotate(-45deg) translate(2px, -3px);
}

/* The effects wand is a camera-only control — hide it in text mode so the
   bottom row is just the tabs and the done button. */
.ig-story-root.is-text-mode .ig-story-capture-row .ig-story-side-btn {
  visibility: hidden;
}

/* Edit step */
.ig-story-edit-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

.ig-story-edit-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  text-align: center;
  max-width: 85%;
  pointer-events: auto;
}

.ig-story-edit-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 25;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}

#story-upload .ig-story-caption-input,
#story-viewer .ig-story-caption-input,
.ig-story-caption-input {
  width: 100%;
  padding: 13px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  font-family: 'DM Sans', sans-serif;
  box-shadow: none !important;
}

#story-upload .ig-story-caption-input:focus,
#story-viewer .ig-story-caption-input:focus,
.ig-story-caption-input:focus {
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

.ig-story-caption-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

#story-upload .ig-story-text-input-field {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
  box-shadow: none !important;
}

#story-upload .ig-story-text-input-field:focus {
  border-color: rgba(129, 140, 248, 0.5) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

#story-upload .ig-story-text-input-field::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

#story-upload .ig-story-reply,
#story-viewer .ig-story-reply {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
}

#story-upload .ig-story-reply:focus,
#story-viewer .ig-story-reply:focus {
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: none !important;
}

.ig-story-share-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ig-story-swipe-hint {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  z-index: 25;
  pointer-events: none;
}

/* ---- Story Edit (Instagram-style) ---- */
.ig-story-edit-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 30;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 70%, transparent 100%);
}

.ig-story-edit-top-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
  font-family: 'Outfit', sans-serif;
}

.ig-story-edit-share-top {
  padding: 9px 20px;
  border: none;
  border-radius: 99px;
  background: #fff;
  color: #0F172A;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: transform 120ms, opacity 120ms;
}

.ig-story-edit-share-top:active {
  transform: scale(0.96);
  opacity: 0.92;
}

.ig-story-edit-tools {
  position: absolute;
  top: 64px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 30;
  padding: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.35);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: opacity 160ms ease, transform 160ms ease;
}

/* While an overlay is being dragged the rail fades back and stops taking
   pointer events, so it can no longer cover the canvas or steal the touch
   from an overlay moved into the upper-right corner. */
.ig-story-creator.is-dragging-overlay .ig-story-edit-tools,
.ig-story-creator.is-dragging-overlay .ig-story-history {
  opacity: 0.12;
  transform: translateX(8px);
  pointer-events: none;
}

/* Step transitions: the capture and edit steps cross-fade instead of a hard
   display swap. */
#ig-story-capture-step,
#ig-story-edit-step {
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ig-story-step-enter {
  animation: ig-story-step-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ig-story-step-in {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ig-story-step-enter { animation: none; }
}

.ig-story-edit-tool {
  /* 44px is the minimum reliable touch target (iOS HIG / Material). */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, color 150ms, transform 120ms;
}

.ig-story-edit-tool i {
  font-size: 20px;
  line-height: 1;
}

.ig-story-edit-tool:hover {
  background: rgba(255, 255, 255, 0.16);
}

.ig-story-edit-tool:active {
  transform: scale(0.92);
}

.ig-story-edit-tool.active {
  background: #fff;
  color: #4F46E5;
  border-color: #fff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

.ig-story-canvas-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

.ig-story-canvas-layer .ig-story-overlay {
  pointer-events: auto;
  position: absolute;
  cursor: grab;
  touch-action: none;
  max-width: 88%;
  text-align: center;
}

.ig-story-canvas-layer .ig-story-overlay:active { cursor: grabbing; }

.ig-story-overlay-text {
  /* font-size is set inline per overlay (the size slider); this is the
     fallback for anything created before sizes existed. */
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  padding: 8px 14px;
  border-radius: 8px;
  word-break: break-word;
  /* Preserve the newlines a multi-line textarea can now produce. */
  white-space: pre-wrap;
  line-height: 1.25;
}

.ig-story-overlay-text.has-bg {
  background: rgba(0, 0, 0, 0.55);
  text-shadow: none;
}

.ig-story-overlay-emoji {
  font-size: 64px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.4));
}

.ig-story-overlay-location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.96);
  color: #0F172A;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  letter-spacing: -0.1px;
}

.ig-story-overlay-location i {
  color: #4F46E5;
  font-size: 16px;
}

/* Overlay gesture states (Instagram-style drag / pinch / rotate).
   A dragged overlay lifts slightly and drops its shadow softens; a snappy
   transition on scale/opacity keeps release + delete animations smooth without
   fighting the per-frame transform writes during an active gesture. */
.ig-story-canvas-layer .ig-story-overlay {
  transition: opacity 0.18s ease;
}
.ig-story-canvas-layer .ig-story-overlay.is-dragging {
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
}
/* Shrinks toward the bin while hovering over it (clear "will delete" cue). */
.ig-story-canvas-layer .ig-story-overlay.over-trash {
  opacity: 0.7;
}
/* Delete animation: scale down + fade out, then the node is removed. */
.ig-story-canvas-layer .ig-story-overlay.deleting {
  transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1), opacity 0.22s ease;
  transform: translate(-50%, -50%) scale(0.1) !important;
  opacity: 0;
  pointer-events: none;
}

/* Instagram-style trash bin — hidden below the screen, slides up during a drag. */
.ig-story-trash-bin {
  position: absolute;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 160%);
  z-index: 29;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}
.ig-story-trash-bin.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.ig-story-trash-bin-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease, border-color 0.18s ease;
}
/* Highlighted when an overlay is hovering over the bin. */
.ig-story-trash-bin.active .ig-story-trash-bin-circle {
  background: #EF4444;
  border-color: #fff;
  transform: scale(1.28);
  box-shadow: 0 10px 34px rgba(239, 68, 68, 0.55);
}

/* Same slide-in treatment as the panels — see the note there on why `display`
   is not used to toggle visibility. */
.ig-story-filter-strip {
  position: absolute;
  bottom: 72px;
  left: 0;
  right: 0;
  z-index: 28;
  display: flex;
  overflow-x: auto;
  padding: 10px 12px;
  gap: 10px;
  scrollbar-width: none;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  transform: translateY(24px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 160ms ease,
              visibility 0s linear 220ms;
}

.ig-story-filter-strip.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 160ms ease,
              visibility 0s;
}

.ig-story-filter-strip::-webkit-scrollbar { display: none; }

.ig-story-filter-item {
  flex-shrink: 0;
  width: 72px;
  text-align: center;
  cursor: pointer;
}

.ig-story-filter-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  margin-bottom: 6px;
}

.ig-story-filter-item.active .ig-story-filter-thumb {
  border-color: #fff;
}

.ig-story-filter-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-story-filter-name {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}

.ig-story-edit-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 28;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, rgba(0,0,0,0.72));
}

/* Bottom panels */
/* Panels slide up instead of snapping into existence. `display` cannot be
   transitioned, so visibility is driven by transform + opacity and the panel
   stays laid out (pointer-events guard it when closed). */
.ig-story-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: #111827;
  border-radius: 20px 20px 0 0;
  max-height: 52vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -16px 48px rgba(0,0,0,0.5);
  border-top: 1px solid rgba(255,255,255,0.08);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 180ms ease,
              visibility 0s linear 260ms;
}

.ig-story-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 180ms ease,
              visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .ig-story-panel { transition: opacity 100ms ease, visibility 0s linear 100ms; }
  .ig-story-panel.open { transition: opacity 100ms ease, visibility 0s; }
}

.ig-story-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ig-story-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.2px;
}

.ig-story-panel-done {
  border: none;
  background: none;
  color: #818CF8;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
}

.ig-story-panel-body {
  padding: 16px 18px 28px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* ---- Emoji picker ---- */
.ig-story-emoji-panel {
  max-height: 62vh;
}

.ig-story-sticker-panel {
  max-height: 58vh;
}

.ig-story-emoji-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ig-story-emoji-search-wrap i {
  color: rgba(255, 255, 255, 0.45);
  font-size: 16px;
  flex-shrink: 0;
}

.ig-story-emoji-search {
  flex: 1;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  padding: 0;
  box-shadow: none !important;
  font-family: 'DM Sans', sans-serif;
}

.ig-story-emoji-search::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.ig-story-emoji-scroll {
  padding: 0 12px 12px;
  scroll-behavior: smooth;
}

.ig-story-emoji-section {
  margin-bottom: 18px;
}

.ig-story-emoji-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  padding: 4px 6px 10px;
  font-family: 'Outfit', sans-serif;
}

.ig-story-emoji-cats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.ig-story-emoji-cat {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms;
}

.ig-story-emoji-cat i {
  font-size: 20px;
  line-height: 1;
}

.ig-story-emoji-cat:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.ig-story-emoji-cat.active {
  background: rgba(129, 140, 248, 0.2);
  color: #818CF8;
}

.ig-story-emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.ig-story-emoji-cell {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 28px;
  line-height: 1;
  padding: 10px 2px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 120ms, background 120ms;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-story-emoji-cell:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.12);
}

.ig-story-emoji-cell:active {
  transform: scale(0.95);
  background: rgba(129, 140, 248, 0.2);
}

.ig-story-sticker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.ig-story-sticker-cell {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 34px;
  line-height: 1;
  padding: 12px 4px;
  border: none;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 120ms, background 120ms;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-story-sticker-cell:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.1);
}

.ig-story-sticker-cell:active {
  transform: scale(0.95);
  background: rgba(129, 140, 248, 0.2);
}

.ig-story-font-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 14px;
  scrollbar-width: none;
}

.ig-story-font-row::-webkit-scrollbar { display: none; }

.ig-story-font-chip {
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 99px;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.ig-story-font-chip.active {
  border-color: #7c3aed;
  background: rgba(124,58,237,0.25);
}

.ig-story-color-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ig-story-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  cursor: pointer;
}

.ig-story-color-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px #7c3aed;
}

/* Now a <textarea> (multi-line text overlays). The `!important`s are needed
   because design-system.css:2062 forces a white background on every
   input/textarea site-wide — see the same fix on .ig-story-caption-input. */
.ig-story-text-input-field {
  width: 100%;
  padding: 14px;
  border-radius: 12px !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  font-size: 16px;
  line-height: 1.4;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 12px;
  resize: none;
  font-family: 'DM Sans', sans-serif;
  min-height: 56px;
  max-height: 120px;
  box-shadow: none !important;
}

.ig-story-text-input-field:focus {
  border-color: rgba(255,255,255,0.32) !important;
  background: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}

.ig-story-text-input-field::placeholder {
  color: rgba(255,255,255,0.45);
}

/* ── @mention / #hashtag stickers ─────────────────────────────────────── */
.ig-story-overlay-tag {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  padding: 7px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.ig-story-overlay-mention { color: #fff; }
.ig-story-overlay-hashtag { color: #00AEEF; }

.ig-story-tag-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 120ms;
}

.ig-story-tag-row:hover { background: rgba(255, 255, 255, 0.06); }

.ig-story-tag-label {
  font-size: 14.5px;
  font-weight: 700;
}

.ig-story-tag-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.ig-story-tag-empty,
.ig-story-emoji-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Snap guides & safe area ──────────────────────────────────────────────
   Shown only while dragging. The safe lines mark where the story VIEWER's
   own header/reply chrome will sit at playback, so text is never placed
   somewhere it will be covered. */
.ig-story-guides {
  position: absolute;
  inset: 0;
  z-index: 13;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}

.ig-story-guides.visible { opacity: 1; }

.ig-story-guide {
  position: absolute;
  opacity: 0;
  transition: opacity 110ms ease;
}

.ig-story-guide.on { opacity: 1; }

.ig-story-guide-v {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: rgba(0, 174, 239, 0.9);
  box-shadow: 0 0 8px rgba(0, 174, 239, 0.8);
}

.ig-story-guide-h {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  margin-top: -0.5px;
  background: rgba(0, 174, 239, 0.9);
  box-shadow: 0 0 8px rgba(0, 174, 239, 0.8);
}

.ig-story-safe {
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.75) 0 6px,
    transparent 6px 12px
  );
}

/* ── Undo / redo ──────────────────────────────────────────────────────── */
.ig-story-history {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 28;
}

.ig-story-history-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: opacity 140ms ease, transform 120ms ease;
}

.ig-story-history-btn:active { transform: scale(0.92); }

.ig-story-history-btn.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ── Font-size slider ─────────────────────────────────────────────────── */
.ig-story-size-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ig-story-size-ic {
  color: rgba(255,255,255,0.55);
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  flex-shrink: 0;
  line-height: 1;
}

.ig-story-size-ic-sm { font-size: 12px; }
.ig-story-size-ic-lg { font-size: 20px; }

.ig-story-size-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,0.22) !important;
  border: none !important;
  outline: none;
  padding: 0 !important;
  box-shadow: none !important;
}

.ig-story-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.ig-story-size-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.ig-story-align-row {
  display: flex;
  gap: 8px;
}

.ig-story-align-btn {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.ig-story-align-btn.active {
  border-color: #7c3aed;
  background: rgba(124,58,237,0.2);
}

.ig-story-location-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ig-story-location-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.04);
  color: #fff;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 120ms, border-color 120ms;
}

.ig-story-location-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(129,140,248,0.3);
}

.ig-story-location-item > i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(79,70,229,0.15);
  color: #818CF8;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ig-story-location-item span {
  font-size: 14px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
}

.ig-story-location-item small {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  margin-top: 2px;
}

.ig-story-location-empty {
  text-align: center;
  padding: 32px 16px;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  font-weight: 600;
}

.ig-story-panel-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ig-story-panel-tab {
  flex: 1;
  padding: 8px;
  border: none;
  background: none;
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.ig-story-panel-tab.active {
  color: #fff;
  border-bottom-color: #7c3aed;
}

/* Filter classes on preview */
.ig-f-normal { filter: none; }
.ig-f-clarendon { filter: contrast(1.2) saturate(1.35); }
.ig-f-moon { filter: grayscale(1) contrast(1.1) brightness(1.1); }
.ig-f-lark { filter: contrast(0.92) brightness(1.08) saturate(1.18); }
.ig-f-reyes { filter: sepia(0.22) brightness(1.1) contrast(0.85); }
.ig-f-juno { filter: sepia(0.35) contrast(1.15) brightness(1.1) saturate(1.4); }
.ig-f-slumber { filter: saturate(0.66) brightness(1.05) sepia(0.12); }
.ig-f-crema { filter: sepia(0.5) contrast(0.9) brightness(1.05); }
.ig-f-ludwig { filter: brightness(1.05) saturate(0.9) contrast(1.05); }
.ig-f-aden { filter: hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2); }
.ig-f-perpetua { filter: contrast(1.1) brightness(1.1) saturate(1.1); }
.ig-f-amaro { filter: hue-rotate(-10deg) contrast(0.9) brightness(1.1) saturate(1.3); }
.ig-f-valencia { filter: sepia(0.25) contrast(1.1) brightness(1.08); }
.ig-f-willow { filter: grayscale(0.5) contrast(0.95) brightness(0.95); }
.ig-f-inkwell { filter: grayscale(1) brightness(1.1) contrast(1.1); }
.ig-f-nashville { filter: sepia(0.4) contrast(1.1) brightness(1.05) saturate(1.2); }