/* ══════════════════════════════════════════════════════════════
   VIBRASTORIES · Instagram-style stories con NERHIA live data
   ══════════════════════════════════════════════════════════════ */

/* ── Strip ───────────────────────────────────────────────────── */
.stories-strip {
  display: flex;
  gap: .65rem;
  padding: .75rem 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(138,87,255,.04) 0%, transparent 100%);
}
.stories-strip::-webkit-scrollbar { display: none; }

.story-thumb {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.story-thumb:active { opacity: .8; }

/* Gradient ring */
.story-ring {
  width: 58px; height: 58px; border-radius: 50%;
  padding: 2.5px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .25s;
}
.story-ring.seen { opacity: .38; }

.story-ring-add     { background: rgba(138,87,255,.25); border: 2px dashed rgba(138,87,255,.4); }
.story-ring-nerhia  { background: conic-gradient(from 0deg, var(--violet), var(--cyan), var(--teal), var(--violet)); }
.story-ring-mobility{ background: conic-gradient(from 0deg, var(--cyan), #0099ff, var(--cyan)); }
.story-ring-culture { background: conic-gradient(from 0deg, var(--violet2), #ff88cc, var(--violet2)); }
.story-ring-economy { background: conic-gradient(from 0deg, var(--gold), #ff9900, var(--gold)); }
.story-ring-energy  { background: conic-gradient(from 0deg, var(--green), #00ff88, var(--green)); }
.story-ring-vitality{ background: conic-gradient(from 0deg, var(--pink), #ff44aa, var(--pink)); }

.story-av {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  overflow: hidden;
}
.story-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.story-av-add {
  font-size: 1.6rem; font-weight: 700;
  color: var(--violet2);
}

.story-label {
  font-family: var(--mono);
  font-size: .49rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text2); white-space: nowrap;
  max-width: 58px; overflow: hidden; text-overflow: ellipsis; text-align: center;
}

/* Live dot on NERHIA */
.story-live-dot {
  position: absolute;
  bottom: 22px; right: 3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal);
  border: 2px solid var(--bg);
  box-shadow: 0 0 7px var(--teal);
  animation: breathe 2s ease-in-out infinite;
}

/* ── Viewer ──────────────────────────────────────────────────── */
.story-viewer {
  position: fixed; inset: 0; z-index: 560;
  background: #06040f;
  display: none; flex-direction: column;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.story-viewer.open {
  display: flex;
  animation: sv-open .22s cubic-bezier(.2,0,.1,1);
}
@keyframes sv-open {
  from { opacity: 0; transform: scale(.97) translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Progress bars */
.sv-progress {
  position: absolute;
  top: calc(var(--safe-top) + 10px);
  left: 10px; right: 10px; z-index: 20;
  display: flex; gap: 3px;
}
.sv-prog-bar {
  flex: 1; height: 2.5px; border-radius: 2px;
  background: rgba(255,255,255,.22); overflow: hidden;
}
.sv-prog-fill {
  height: 100%; border-radius: 2px;
  background: rgba(255,255,255,.92);
  width: 0%;
}
.sv-prog-fill.done  { width: 100% !important; transition: none; }
.sv-prog-fill.empty { width: 0%   !important; transition: none; }

/* Header */
.sv-header {
  position: absolute;
  top: calc(var(--safe-top) + 22px);
  left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 1rem 0;
}
.sv-info { display: flex; align-items: center; gap: .6rem; }
.sv-av-wrap {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); border: 2px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; overflow: hidden; flex-shrink: 0;
}
.sv-av-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sv-name {
  font-family: var(--sans); font-size: .9rem; font-weight: 800;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.sv-time {
  font-family: var(--mono); font-size: .5rem; letter-spacing: .1em;
  color: rgba(255,255,255,.55); text-transform: uppercase; margin-top: .1rem;
}
.sv-close {
  background: rgba(0,0,0,.38); border: none; cursor: pointer;
  color: #fff; font-size: .95rem;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  flex-shrink: 0;
}
.sv-close:active { background: rgba(0,0,0,.6); }

/* Canvas background */
.sv-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* Content overlay */
.sv-content {
  position: absolute;
  bottom: 108px; left: 0; right: 0;
  padding: 2.5rem 1.1rem 1rem;
  background: linear-gradient(
    0deg,
    rgba(6,4,15,.92) 0%,
    rgba(6,4,15,.55) 55%,
    transparent 100%
  );
  z-index: 10;
}
.sv-content-dept {
  font-family: var(--mono); font-size: .5rem; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: .4rem;
}
.sv-content-headline {
  font-family: var(--sans); font-size: 1.4rem; font-weight: 800;
  color: #fff; line-height: 1.22; margin-bottom: .5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.sv-content-body {
  font-family: var(--mono); font-size: .7rem;
  color: rgba(255,255,255,.72); line-height: 1.6;
  margin-bottom: .85rem;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.sv-content-metrics {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.sv-metric {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.08); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.13);
  padding: .32rem .65rem; border-radius: 7px;
}
.sv-metric-val {
  font-family: var(--mono); font-size: .95rem; font-weight: 500;
  color: #fff; line-height: 1;
}
.sv-metric-label {
  font-family: var(--mono); font-size: .42rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: .15rem;
}

/* CTA button inside story */
.sv-cta-btn {
  display: inline-flex; align-items: center;
  margin-top: .8rem; padding: .55rem 1.4rem;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  border: none; border-radius: 99px; color: #fff;
  font-family: var(--mono); font-size: .65rem; font-weight: 700;
  letter-spacing: .08em; cursor: pointer;
  box-shadow: 0 4px 18px rgba(138,87,255,.4);
}
.sv-cta-btn:active { transform: scale(.96); }

/* Tap zones */
.sv-tap-left, .sv-tap-right {
  position: absolute; top: 0; bottom: 0;
  width: 34%; z-index: 15; cursor: pointer;
}
.sv-tap-left  { left: 0; }
.sv-tap-right { right: 0; }

/* Reactions bar */
.sv-reactions {
  position: absolute;
  bottom: calc(var(--safe-bot) + 14px);
  left: 0; right: 0; z-index: 20;
  display: flex; justify-content: center;
  align-items: center; gap: .55rem;
  padding: 0 1rem;
}
.sv-react-btn {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  background: rgba(255,255,255,.09); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.13); border-radius: 12px;
  padding: .5rem .6rem; cursor: pointer;
  font-size: 1.3rem; min-width: 50px;
  transition: transform .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.sv-react-btn:active { transform: scale(1.15); background: rgba(255,255,255,.2); }
.sv-react-btn.reacted { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); }
.sv-react-count {
  font-family: var(--mono); font-size: .48rem; letter-spacing: .05em;
  color: rgba(255,255,255,.6);
}
.sv-vbc-pill {
  display: flex; align-items: center; gap: .28rem;
  font-family: var(--mono); font-size: .58rem; color: var(--gold);
  background: rgba(255,196,0,.1); border: 1px solid rgba(255,196,0,.22);
  border-radius: 99px; padding: .45rem .75rem;
  white-space: nowrap;
}