/* ============================================================================
   extras.css — stories bar, story viewer, voice / video-note recorder
   ========================================================================== */

/* ------------------------------ stories bar ------------------------------ */
.stories-bar{
  display:flex;gap:10px;padding:10px 12px 8px;overflow-x:auto;overflow-y:hidden;
  background:var(--panel);border-bottom:1px solid var(--border);
  scrollbar-width:none;flex:0 0 auto;
}
.stories-bar::-webkit-scrollbar{display:none}

.story-circle{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  width:64px;flex:0 0 auto;cursor:pointer;user-select:none;
}
.story-circle:hover .story-ring{transform:scale(1.05)}
.story-ring-wrap{position:relative;width:58px;height:58px}
.story-ring{
  width:58px;height:58px;border-radius:50%;padding:2.5px;
  transition:transform .15s ease;
  background:var(--muted);
}
.story-ring.has-unviewed{
  background:linear-gradient(45deg,#FFC24B,var(--accent-2),var(--accent),var(--accent-deep));
}
.story-ring.all-viewed{background:var(--muted)}
.story-ring.no-stories{background:var(--panel-2)}
.story-ring-in{
  width:100%;height:100%;border-radius:50%;padding:2px;background:var(--panel);
}
.story-ava{
  width:100% !important;height:100% !important;border-radius:50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:17px;font-weight:600;color:#fff;
}
.story-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.story-name{
  max-width:64px;font-size:11.5px;color:var(--text-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-align:center;
}
.story-own .story-name{color:var(--text)}

.story-plus-btn{
  position:absolute;right:-1px;bottom:-1px;width:20px;height:20px;
  border-radius:50%;border:2px solid var(--panel);background:var(--accent);
  color:#FFF7F0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:transform .15s ease;
}
.story-plus-btn:hover{transform:scale(1.15)}
.story-plus{font-size:14px;font-weight:700;line-height:1}

/* --------------------------- create-story modal -------------------------- */
.story-create{display:flex;flex-direction:column;gap:12px}
.story-create-preview{
  display:flex;align-items:center;justify-content:center;background:#000;
  border-radius:var(--radius);overflow:hidden;max-height:52vh;
}
.story-create-media{max-width:100%;max-height:52vh;display:block}
.story-caption-input{
  background:var(--panel-2);border:1px solid transparent;border-radius:10px;
  color:var(--text);padding:10px 12px;font-size:14px;outline:none;width:100%;
}
.story-caption-input:focus{border-color:var(--accent)}

/* ------------------------------ story viewer ----------------------------- */
.story-viewer{
  position:fixed;inset:0;z-index:55;background:rgba(4,8,14,.96);
  display:flex;align-items:center;justify-content:center;
  animation:svFade .18s ease;
}
@keyframes svFade{from{opacity:0}to{opacity:1}}
.sv-frame{
  position:relative;width:min(430px,100vw);height:min(92vh,820px);
  background:#000;border-radius:14px;overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.6);
}
@media (max-width:520px){.sv-frame{width:100vw;height:100vh;border-radius:0}}

.sv-progress{
  position:absolute;top:0;left:0;right:0;display:flex;gap:4px;
  padding:10px 10px 6px;z-index:4;
}
.sv-seg{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.sv-seg-fill{width:0;height:100%;background:#fff;border-radius:2px}

.sv-head{
  position:absolute;top:20px;left:0;right:0;display:flex;align-items:center;
  gap:9px;padding:8px 10px;z-index:4;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);
}
.sv-ava{
  width:36px !important;height:36px !important;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:13px;font-weight:600;color:#fff;
}
.sv-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.sv-who{flex:1;min-width:0}
.sv-name{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-time{font-size:12px;color:rgba(255,255,255,.65)}
.sv-views{
  border:none;background:rgba(255,255,255,.14);color:#fff;border-radius:16px;
  padding:5px 11px;font-size:13px;cursor:pointer;flex:0 0 auto;
  transition:background .15s;
}
.sv-views:hover{background:rgba(255,255,255,.26)}
.sv-btn{
  border:none;background:transparent;color:#fff;font-size:17px;cursor:pointer;
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.sv-btn:hover{background:rgba(255,255,255,.18)}
.sv-del:hover{background:var(--danger)}

.sv-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sv-media{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.sv-caption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 16px 18px;
  color:#fff;font-size:14.5px;line-height:1.35;z-index:3;
  background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);
  word-break:break-word;
}

.sv-zones{position:absolute;inset:0;display:flex;z-index:2}
.sv-zone{cursor:pointer}
.sv-zone-l{width:32%}
.sv-zone-r{flex:1}

.sv-viewers{display:flex;flex-direction:column;gap:2px;max-height:50vh;overflow-y:auto}
.sv-viewers-empty{color:var(--text-2);text-align:center;padding:18px 0}
.sv-viewer-row{
  display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:10px;
}
.sv-viewer-row:hover{background:var(--hover)}
.sv-viewer-ava{
  width:38px !important;height:38px !important;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:14px;font-weight:600;color:#fff;
}
.sv-viewer-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.sv-viewer-name{font-size:14px;color:var(--text)}
.sv-viewer-time{font-size:12px;color:var(--text-2)}

/* ------------------------------ recorder UI ------------------------------ */
@keyframes recPulse{
  0%{box-shadow:0 0 0 0 rgba(229,72,77,.55);opacity:1}
  70%{box-shadow:0 0 0 9px rgba(229,72,77,0);opacity:.55}
  100%{box-shadow:0 0 0 0 rgba(229,72,77,0);opacity:1}
}
.rec-dot{
  width:12px;height:12px;border-radius:50%;background:var(--danger);
  animation:recPulse 1.2s infinite;flex:0 0 auto;
}
.rec-timer{
  font-variant-numeric:tabular-nums;font-size:14px;color:var(--text);
  font-weight:600;font-family:var(--font-mono);
}
.rec-hint{color:var(--text-2);font-size:13.5px;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* voice strip floating over the composer */
.rec-strip{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:50;display:flex;align-items:center;gap:12px;
  width:min(560px,calc(100vw - 24px));padding:10px 14px;
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow);
  animation:recSlideUp .2s ease;
}
@keyframes recSlideUp{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* video-note fullscreen overlay */
.rec-overlay{
  position:fixed;inset:0;z-index:55;background:rgba(4,8,14,.9);
  display:flex;align-items:center;justify-content:center;
  animation:svFade .18s ease;
}
.rec-note-box{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:26px 30px;background:var(--panel);border-radius:20px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);max-width:calc(100vw - 24px);
}
.note-preview-ring{
  width:min(300px,70vw);height:min(300px,70vw);border-radius:50%;
  padding:4px;overflow:hidden;flex:0 0 auto;
  background:linear-gradient(45deg,var(--accent-2),var(--accent),var(--accent-deep));
}
.note-preview{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  background:#000;transform:scaleX(-1); /* mirror: feels natural for selfies */
}
.rec-note-row{display:flex;align-items:center;gap:10px}
.rec-note-btns{display:flex;gap:10px}

.rec-cancel{color:var(--text-2)}
.rec-cancel:hover{color:var(--danger)}