/* Phase 42 (UI): minimal overrides requested by user.
   NOTE: Enqueued AFTER style.css.
*/

/* Requested feed/stories spacing */
.sv-feed > .sv-card {
  border-bottom: 0.5px solid var(--sv-border);
  padding: 0 10px 0;
  border-top: 0.5px solid var(--sv-border);
}

.sv-shelf {
  margin: 0;
  padding: 12px 10px 10px;
  border-top: 0.5px solid var(--sv-border);
  border-radius: 0;
  border-bottom: 0.5px solid var(--sv-border);
}

.sv-stories {
  padding: 5px 6px 5px !important;
}

.sv-story {
  height: 210px;
  position: relative;
  border-radius: 13px;
}

.sv-rThumb {
  width: 170px !important;
}

/* Force feed cards/shelf to square corners */
.sv-card {
  border-radius: 0 !important;
}
.sv-shelf {
  border-radius: 0 !important;
}

/* Keep post action icons on a single line (no wrapping) */
.sv-actions {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.sv-actRow {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sv-actRow::-webkit-scrollbar{height:0}

/* Feed video overlays */
.sv-feed .sv-mediaVideo{ position: relative; }

.sv-feed .sv-sv42-sound,
.sv-feed .sv-sv42-time {
  position: absolute;
  bottom: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.38);
  color: #fff;
  backdrop-filter: blur(8px);
}

.sv-feed .sv-sv42-time{ left: 10px; font-variant-numeric: tabular-nums; }
.sv-feed .sv-sv42-sound{ right: 10px; cursor: pointer; user-select: none; }
.sv-feed .sv-sv42-sound svg{ width: 16px; height: 16px; display:block; }

/* Keep overlays readable in light mode too */
body:not(.sv-dark) .sv-feed .sv-sv42-sound,
body:not(.sv-dark) .sv-feed .sv-sv42-time{
  background: rgba(0,0,0,.34);
}

/* Phase 77: Go Live panel */
.sv-liveGrid{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width: 720px){ .sv-liveGrid{ grid-template-columns:1fr 1fr; } }
.sv-liveRow{ display:flex; gap:8px; align-items:center; }
.sv-liveRow .sv-in{ flex:1; }
.sv-liveCopy{ white-space:nowrap; }
.sv-livePreview iframe{ background: var(--sv-card); border-radius:16px; box-shadow: var(--sv-shadow); }
/* Make ghost links behave like buttons */
a.sv-ghost{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }


/* ===========================
   Phase 81: Groups UI polish
=========================== */
.sv-gShelf{
  display:flex;
  gap:10px;
  overflow:auto;
  padding:6px 2px;
  scroll-snap-type:x mandatory;
}
.sv-groupCard{
  min-width:220px;
  max-width:220px;
  border:0.5px solid var(--sv-border);
  border-radius:14px;
  overflow:hidden;
  background:var(--sv-card);
  scroll-snap-align:start;
}
.sv-gCover{
  height:90px;
  background:#222;
  background-size:cover;
  background-position:center;
}
.sv-gMeta{
  display:flex;
  gap:10px;
  padding:10px;
  align-items:center;
}
.sv-gAv img{
  width:38px;
  height:38px;
  border-radius:12px;
  object-fit:cover;
}
.sv-gName{ font-weight:950; font-size:15px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-gSub{ font-size:12px; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.sv-gActions{
  display:flex;
  gap:8px;
  padding:0 10px 10px;
  align-items:center;
}
.sv-gActions .sv-chip,
.sv-gActions .sv-primary{ height:34px; padding:0 12px; }

.sv-gItem{
  border:0.5px solid var(--sv-border);
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
  background:var(--sv-card);
}
.sv-gRow{ display:flex; gap:10px; align-items:flex-start; }
.sv-gTitle{ font-weight:950; font-size:16px; line-height:1.1; }
.sv-gDesc{ font-size:13px; opacity:.85; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sv-gFoot{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:10px; }
.sv-gAv img{ display:block; }

.sv-gModal{
  width:min(720px, 92vw);
  max-height:82vh;
  overflow:auto;
  background:var(--sv-card);
  border:0.5px solid var(--sv-border);
  border-radius:18px;
  padding:12px;
}
.sv-gModalTop{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.sv-gModalTabs{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.sv-gModalTabs .sv-chip.is-on{ outline:2px solid var(--sv-primary); }
.sv-gListRow{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border:0.5px solid var(--sv-border);
  border-radius:14px;
  margin-bottom:10px;
}
.sv-gListRow .sv-l{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
  flex:1;
}
.sv-gListRow .sv-l img{
  width:34px;
  height:34px;
  border-radius:12px;
  object-fit:cover;
}
.sv-gListRow .sv-n{
  min-width:0;
}
.sv-gListRow .sv-n .t{
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sv-gListRow .sv-n .s{
  font-size:12px;
  opacity:.8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
}

.sv-groupHead{
  border:0.5px solid var(--sv-border);
  border-radius:14px;
  overflow:hidden;
  background:var(--sv-card);
  margin-bottom:10px;
}
.sv-ghCover{
  height:140px;
  background:#222;
  background-size:cover;
  background-position:center;
}
.sv-ghBody{
  display:flex;
  gap:12px;
  padding:12px;
  align-items:flex-start;
}
.sv-ghAv img{
  width:54px;
  height:54px;
  border-radius:16px;
  object-fit:cover;
}
.sv-ghName{ font-weight:950; font-size:18px; line-height:1.1; }
.sv-ghDesc{ margin-top:8px; font-size:13px; opacity:.9; }
.sv-ghActions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }


/* Phase 88: Premium plans modal */
.sv-planList{ border:1px solid var(--sv-border); border-radius:14px; overflow:hidden; }
.sv-planRow{ padding:10px 12px; border-bottom:1px solid var(--sv-border); }
.sv-planRow:last-child{ border-bottom:none; }
.sv-planRow .n{ font-weight:900; }
.sv-planRow .p{ font-size:13px; opacity:.8; margin-top:2px; }