/*
  Built asset (prebuilt, no external CDNs).
  Source: assets/src/style.css
*/

:root{
  /* Defaults (can be overridden via inline CSS variables on .skylite-reels-root) */
  --brand-bg: #050904;
  --brand-primary: #12E000;
  /* Back-compat: templates set --brand-bg, CSS uses --brand-background */
  --brand-background: var(--brand-bg);
  --brand-surface: #0B1407;
  --brand-text: #E9FFE6;
  --brand-muted: #A6BBA2;
  /* Back-compat: templates set --brand-muted, CSS uses --brand-text-muted */
  --brand-text-muted: var(--brand-muted);
  --brand-border: color-mix(in srgb, var(--brand-text), transparent 88%);
  --brand-accent: #38FF14;

  --sr-radius: 16px;
  --sr-radius-sm: 12px;
  --sr-shadow: 0 18px 55px rgba(0,0,0,.55);
  --sr-focus: 0 0 0 3px color-mix(in srgb, var(--brand-accent), transparent 70%);

  /* Stage padding (TikTok layout: no container padding; keep whitespace via phone max-height) */
  --sr-stage-pad-y: 0px;
  --sr-stage-pad-x: 0px;

  /* Vertical gutters around the phone (keep these small; TikTok uses minimal top/bottom whitespace) */
  --sr-phone-gutter-y: 12px;

  /* Topbar height (desktop hides topbar; mobile shows it) */
  --sr-topbar-h: 0px;

  /*
    Phone stage sizing.
    Use viewport height to scale up on tall screens so we don't get big top/bottom gaps.
    Height is derived via aspect-ratio (9/16).
  */
  --sr-phone-w: min(92vw, clamp(420px, 56vh, 600px));

  /* Desktop sidebar width (used to compute true viewport centering like TikTok) */
  --sr-sidebar-w: 270px;

  /* TikTok-like notifications drawer */
  --sr-sidebar-icons-w: 76px;
  --sr-activity-panel-w: 420px;

  /*
    Shift the centered stage left so the PHONE is centered in the viewport,
    not centered within the (viewport - sidebar) main column.
    Clamp so we never overlap the sidebar on narrower desktop widths.
  */
  --sr-stage-shift: clamp(
    0px,
    calc((100vw - var(--sr-sidebar-w) - var(--sr-phone-w)) / 2 - 18px),
    calc(var(--sr-sidebar-w) / 2)
  );
}

/* TikTok-like: no page scrollbar on reels views */
html.sr-no-scroll,
body.sr-no-scroll{
  overflow: hidden !important;
  height: 100% !important;
  background: #000 !important;
  background-color: #000 !important;
}
body.sr-no-scroll{overscroll-behavior: none;}

.skylite-reels-root, .skylite-reels-root *{box-sizing:border-box;}
.skylite-reels-root{
  color:var(--brand-text);
  background: var(--brand-background);
  /* Break out of theme content containers (common in WP themes) */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
}

.skylite-reels-app{min-height:100vh;}
@supports (min-height: 100dvh){
  .skylite-reels-app{min-height:100dvh;}
}

.sr-layout{
  min-height: 100vh;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-primary), transparent 92%),
    color-mix(in srgb, var(--brand-accent), transparent 94%)
  ) , var(--brand-background);
  border: 1px solid var(--brand-border);
  border-radius: var(--sr-radius);
  overflow: hidden;
  display:grid;
  grid-template-columns: var(--sr-sidebar-w) 1fr;
}

.sr-sidebar{
  background: rgba(255,255,255,.03);
  border-right: 1px solid var(--brand-border);
  padding: 18px 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Slide-out notifications panel + icon-only sidebar
  Keep --sr-sidebar-w stable so the stage doesn't shift.
  Collapse the sidebar visually via width instead of shrinking the grid column.
*/
.sr-layout.sr-activity-open .sr-sidebar,
.sr-layout.sr-activity-closing .sr-sidebar,
.sr-layout.sr-friends-open .sr-sidebar,
.sr-layout.sr-friends-closing .sr-sidebar,
.sr-layout.sr-messages-open .sr-sidebar,
.sr-layout.sr-messages-closing .sr-sidebar,
.sr-layout.sr-search-open .sr-sidebar,
.sr-layout.sr-search-closing .sr-sidebar,
.sr-layout.sr-menu-open .sr-sidebar,
.sr-layout.sr-menu-closing .sr-sidebar{width: var(--sr-sidebar-icons-w);padding: 14px 10px;z-index: 2147483105;}
.sr-layout.sr-activity-open .sr-sidebar-search,
.sr-layout.sr-activity-closing .sr-sidebar-search,
.sr-layout.sr-friends-open .sr-sidebar-search,
.sr-layout.sr-friends-closing .sr-sidebar-search,
.sr-layout.sr-messages-open .sr-sidebar-search,
.sr-layout.sr-messages-closing .sr-sidebar-search,
.sr-layout.sr-search-open .sr-sidebar-search,
.sr-layout.sr-search-closing .sr-sidebar-search,
.sr-layout.sr-menu-open .sr-sidebar-search,
.sr-layout.sr-menu-closing .sr-sidebar-search{display:flex;align-items:center;justify-content:center;}
.sr-layout.sr-activity-open .sr-sidebar-search input,
.sr-layout.sr-activity-closing .sr-sidebar-search input,
.sr-layout.sr-friends-open .sr-sidebar-search input,
.sr-layout.sr-friends-closing .sr-sidebar-search input,
.sr-layout.sr-messages-open .sr-sidebar-search input,
.sr-layout.sr-messages-closing .sr-sidebar-search input,
.sr-layout.sr-search-open .sr-sidebar-search input,
.sr-layout.sr-search-closing .sr-sidebar-search input,
.sr-layout.sr-menu-open .sr-sidebar-search input,
.sr-layout.sr-menu-closing .sr-sidebar-search input{display:none;}
.sr-layout.sr-activity-open .sr-sidebar-search-btn,
.sr-layout.sr-activity-closing .sr-sidebar-search-btn,
.sr-layout.sr-friends-open .sr-sidebar-search-btn,
.sr-layout.sr-friends-closing .sr-sidebar-search-btn,
.sr-layout.sr-messages-open .sr-sidebar-search-btn,
.sr-layout.sr-messages-closing .sr-sidebar-search-btn,
.sr-layout.sr-search-open .sr-sidebar-search-btn,
.sr-layout.sr-search-closing .sr-sidebar-search-btn,
.sr-layout.sr-menu-open .sr-sidebar-search-btn,
.sr-layout.sr-menu-closing .sr-sidebar-search-btn{position:static;transform:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--brand-border);background: rgba(255,255,255,.04);cursor:pointer;}
.sr-layout.sr-activity-open .sr-sidebar-search-btn:hover,
.sr-layout.sr-activity-closing .sr-sidebar-search-btn:hover,
.sr-layout.sr-friends-open .sr-sidebar-search-btn:hover,
.sr-layout.sr-friends-closing .sr-sidebar-search-btn:hover,
.sr-layout.sr-messages-open .sr-sidebar-search-btn:hover,
.sr-layout.sr-messages-closing .sr-sidebar-search-btn:hover,
.sr-layout.sr-search-open .sr-sidebar-search-btn:hover,
.sr-layout.sr-search-closing .sr-sidebar-search-btn:hover,
.sr-layout.sr-menu-open .sr-sidebar-search-btn:hover,
.sr-layout.sr-menu-closing .sr-sidebar-search-btn:hover{background: rgba(255,255,255,.06);}
.sr-layout.sr-activity-open .sr-sidebar-search-btn:focus-visible,
.sr-layout.sr-activity-closing .sr-sidebar-search-btn:focus-visible,
.sr-layout.sr-friends-open .sr-sidebar-search-btn:focus-visible,
.sr-layout.sr-friends-closing .sr-sidebar-search-btn:focus-visible,
.sr-layout.sr-messages-open .sr-sidebar-search-btn:focus-visible,
.sr-layout.sr-messages-closing .sr-sidebar-search-btn:focus-visible,
.sr-layout.sr-search-open .sr-sidebar-search-btn:focus-visible,
.sr-layout.sr-search-closing .sr-sidebar-search-btn:focus-visible,
.sr-layout.sr-menu-open .sr-sidebar-search-btn:focus-visible,
.sr-layout.sr-menu-closing .sr-sidebar-search-btn:focus-visible{box-shadow: var(--sr-focus);outline:none;}
.sr-layout.sr-activity-open .sr-brand,
.sr-layout.sr-activity-closing .sr-brand,
.sr-layout.sr-friends-open .sr-brand,
.sr-layout.sr-friends-closing .sr-brand,
.sr-layout.sr-messages-open .sr-brand,
.sr-layout.sr-messages-closing .sr-brand,
.sr-layout.sr-search-open .sr-brand,
.sr-layout.sr-search-closing .sr-brand,
.sr-layout.sr-menu-open .sr-brand,
.sr-layout.sr-menu-closing .sr-brand{display:flex;justify-content:center;align-items:center;padding: 8px 6px;border-radius: 12px;}
.sr-layout.sr-activity-open .sr-brand-logo,
.sr-layout.sr-activity-closing .sr-brand-logo,
.sr-layout.sr-friends-open .sr-brand-logo,
.sr-layout.sr-friends-closing .sr-brand-logo,
.sr-layout.sr-messages-open .sr-brand-logo,
.sr-layout.sr-messages-closing .sr-brand-logo,
.sr-layout.sr-search-open .sr-brand-logo,
.sr-layout.sr-search-closing .sr-brand-logo,
.sr-layout.sr-menu-open .sr-brand-logo,
.sr-layout.sr-menu-closing .sr-brand-logo{height:32px;max-width:100%;width:auto;}
.sr-layout.sr-activity-open .sr-nav-item,
.sr-layout.sr-activity-closing .sr-nav-item,
.sr-layout.sr-friends-open .sr-nav-item,
.sr-layout.sr-friends-closing .sr-nav-item,
.sr-layout.sr-messages-open .sr-nav-item,
.sr-layout.sr-messages-closing .sr-nav-item,
.sr-layout.sr-search-open .sr-nav-item,
.sr-layout.sr-search-closing .sr-nav-item,
.sr-layout.sr-menu-open .sr-nav-item,
.sr-layout.sr-menu-closing .sr-nav-item{justify-content:center;gap:0;padding: 12px 8px;}
.sr-layout.sr-activity-open .sr-nav-item > span:not(.sr-ic),
.sr-layout.sr-activity-closing .sr-nav-item > span:not(.sr-ic),
.sr-layout.sr-friends-open .sr-nav-item > span:not(.sr-ic),
.sr-layout.sr-friends-closing .sr-nav-item > span:not(.sr-ic),
.sr-layout.sr-messages-open .sr-nav-item > span:not(.sr-ic),
.sr-layout.sr-messages-closing .sr-nav-item > span:not(.sr-ic),
.sr-layout.sr-search-open .sr-nav-item > span:not(.sr-ic),
.sr-layout.sr-search-closing .sr-nav-item > span:not(.sr-ic),
.sr-layout.sr-menu-open .sr-nav-item > span:not(.sr-ic),
.sr-layout.sr-menu-closing .sr-nav-item > span:not(.sr-ic){display:none;}
.sr-layout.sr-activity-open .sr-ic,
.sr-layout.sr-activity-closing .sr-ic,
.sr-layout.sr-friends-open .sr-ic,
.sr-layout.sr-friends-closing .sr-ic,
.sr-layout.sr-messages-open .sr-ic,
.sr-layout.sr-messages-closing .sr-ic,
.sr-layout.sr-search-open .sr-ic,
.sr-layout.sr-search-closing .sr-ic,
.sr-layout.sr-menu-open .sr-ic,
.sr-layout.sr-menu-closing .sr-ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;}
.sr-layout.sr-activity-open .sr-ic svg,
.sr-layout.sr-activity-closing .sr-ic svg,
.sr-layout.sr-friends-open .sr-ic svg,
.sr-layout.sr-friends-closing .sr-ic svg,
.sr-layout.sr-messages-open .sr-ic svg,
.sr-layout.sr-messages-closing .sr-ic svg,
.sr-layout.sr-search-open .sr-ic svg,
.sr-layout.sr-search-closing .sr-ic svg,
.sr-layout.sr-menu-open .sr-ic svg,
.sr-layout.sr-menu-closing .sr-ic svg{width:22px;height:22px;}

.sr-activity-panel{position: fixed;top:0;left: 0;height: 100vh;width: 100vw;z-index: 2147483000;display:flex;align-items:stretch;opacity:0;visibility:hidden;pointer-events:none;}
.sr-layout.sr-activity-open .sr-activity-panel,
.sr-layout.sr-activity-closing .sr-activity-panel{opacity:1;visibility:visible;pointer-events:auto;}
.sr-layout.sr-activity-closing .sr-activity-panel{pointer-events:none;}
.sr-activity-panel[hidden]{display:none;}
.sr-activity-panel-card{margin-left: 0;width: min(var(--sr-activity-panel-w), 100vw);height:100vh;background:#fff;color:#111;box-shadow: 10px 0 40px rgba(0,0,0,.25);border-right: 1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;transform: translateX(-105%);opacity:1;box-sizing:border-box;padding-left: var(--sr-sidebar-icons-w);}
.sr-layout.sr-activity-open .sr-activity-panel-card{transform: translateX(0);}
.sr-activity-panel-scrim{flex:1;background: rgba(0,0,0,.06);opacity:0;}
.sr-layout.sr-activity-open .sr-activity-panel-scrim{opacity:1;}

@media (prefers-reduced-motion: no-preference){
  .sr-activity-panel-card{transition: transform .28s cubic-bezier(.2,.9,.2,1);}
  .sr-activity-panel-scrim{transition: opacity .18s ease;}
}
.sr-activity-panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 14px;border-bottom:1px solid rgba(0,0,0,.08);}
.sr-activity-panel-title{font-weight:800;font-size:22px;}
.sr-activity-panel-close{width:36px;height:36px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background: rgba(0,0,0,.04);color:#111;font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.sr-activity-panel-close:hover{background: rgba(0,0,0,.06);}
.sr-activity-panel-tabs{padding:10px 12px;display:flex;gap:8px;flex-wrap:wrap;}
.sr-activity-panel-tabs .sr-pill{border-color: rgba(0,0,0,.10);background: rgba(0,0,0,.04);color:#111;}
.sr-activity-panel-tabs .sr-pill.is-active{border-color: color-mix(in srgb, var(--brand-primary), transparent 68%);background: color-mix(in srgb, var(--brand-primary), transparent 88%);color: #70ad00!important;}
.sr-activity-panel-list{padding:10px 12px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:10px;}
.sr-activity-panel-list{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.38) transparent;
}
.sr-activity-panel-list::-webkit-scrollbar{width:3px;}
.sr-activity-panel-list::-webkit-scrollbar-track{background:transparent;}
.sr-activity-panel-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.32);border-radius:999px;}
.sr-activity-panel-list:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.48);}

/* Slide-out messages panel */
.sr-messages-panel{position: fixed;top:0;left: 0;height: 100vh;width: 100vw;z-index: 2147483000;display:flex;align-items:stretch;opacity:0;visibility:hidden;pointer-events:none;}
.sr-layout.sr-messages-open .sr-messages-panel,
.sr-layout.sr-messages-closing .sr-messages-panel{opacity:1;visibility:visible;pointer-events:auto;}
.sr-layout.sr-messages-closing .sr-messages-panel{pointer-events:none;}
.sr-messages-panel[hidden]{display:none;}
.sr-messages-panel-card{margin-left: 0;width: min(var(--sr-activity-panel-w), 100vw);height:100vh;background:#fff;color:#111;box-shadow: 10px 0 40px rgba(0,0,0,.25);border-right: 1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;transform: translateX(-105%);opacity:1;box-sizing:border-box;padding-left: var(--sr-sidebar-icons-w);}
.sr-layout.sr-messages-open .sr-messages-panel-card{transform: translateX(0);}
.sr-messages-panel-scrim{flex:1;background: rgba(0,0,0,.06);opacity:0;}
.sr-layout.sr-messages-open .sr-messages-panel-scrim{opacity:1;}
@media (prefers-reduced-motion: no-preference){
  .sr-messages-panel-card{transition: transform .28s cubic-bezier(.2,.9,.2,1);}
  .sr-messages-panel-scrim{transition: opacity .18s ease;}
}
.sr-friends-panel{position: fixed;top:0;left: 0;height: 100vh;width: 100vw;z-index: 2147483000;display:flex;align-items:stretch;opacity:0;visibility:hidden;pointer-events:none;}
.sr-layout.sr-friends-open .sr-friends-panel,
.sr-layout.sr-friends-closing .sr-friends-panel{opacity:1;visibility:visible;pointer-events:auto;}
.sr-layout.sr-friends-closing .sr-friends-panel{pointer-events:none;}
.sr-friends-panel[hidden]{display:none;}
.sr-friends-panel-card{margin-left: 0;width: min(var(--sr-activity-panel-w), 100vw);height:100vh;background: var(--brand-bg);color: var(--brand-text);box-shadow: 10px 0 40px rgba(0,0,0,.25);border-right: 1px solid rgba(255,255,255,.10);display:flex;flex-direction:column;transform: translateX(-105%);opacity:1;box-sizing:border-box;padding-left: var(--sr-sidebar-icons-w);}
.sr-layout.sr-friends-open .sr-friends-panel-card{transform: translateX(0);}
.sr-friends-panel-scrim{flex:1;background: rgba(0,0,0,.18);opacity:0;}
.sr-layout.sr-friends-open .sr-friends-panel-scrim{opacity:1;}
@media (prefers-reduced-motion: no-preference){
  .sr-friends-panel-card{transition: transform .28s cubic-bezier(.2,.9,.2,1);}
  .sr-friends-panel-scrim{transition: opacity .18s ease;}
}
.sr-friends-panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 14px;border-bottom:1px solid rgba(255,255,255,.10);}
.sr-friends-panel-title{font-weight:800;font-size:22px;}
.sr-friends-panel-close{width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background: rgba(255,255,255,.06);color:var(--brand-text,#fff);font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.sr-friends-panel-close:hover{background: rgba(255,255,255,.09);}
.sr-friends-panel-body{padding:10px 12px;overflow:hidden;flex:1;}
.sr-messages-panel-head{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:16px 14px;border-bottom:1px solid rgba(0,0,0,.08);}
.sr-messages-panel-title{font-weight:800;font-size:22px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sr-dm-title-link{color:inherit;text-decoration:none;}
.sr-dm-title-link:hover{text-decoration:underline;}
.sr-messages-panel-close{width:36px;height:36px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background: rgba(0,0,0,.04);color:#111;font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.sr-messages-panel-close:hover{background: rgba(0,0,0,.06);}
.sr-messages-back{width:36px;height:36px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background: rgba(0,0,0,.04);color:#111;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.sr-messages-back:hover{background: rgba(0,0,0,.06);}
.sr-messages-panel-body{padding:12px 12px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:10px;}
.sr-messages-panel .sr-muted{color: rgba(0,0,0,.55);} 
.sr-messages-panel .sr-input{background:#fff !important;color:#111 !important;border-color: rgba(0,0,0,.18) !important;}

.sr-dm-list{display:flex;flex-direction:column;gap:10px;}
.sr-dm-row{width:100%;text-align:left;display:flex;align-items:center;gap:12px;padding:12px 12px;border:1px solid rgba(0,0,0,.10);border-radius:14px;background: rgba(0,0,0,.02);cursor:pointer;}
.sr-dm-row:hover{background: rgba(0,0,0,.04);}
.sr-dm-row.is-unread{border-color: rgba(0,0,0,.18);background: rgba(0,0,0,.04);}
.sr-dm-avatar{width:46px;height:46px;border-radius:999px;overflow:hidden;flex:0 0 auto;display:block;border:1px solid rgba(0,0,0,.10);background: rgba(0,0,0,.06);}
.sr-dm-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.sr-dm-avatar-ph{width:100%;height:100%;background: rgba(0,0,0,.08);display:block;}
.sr-dm-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;color:#fff;}
.sr-dm-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.sr-dm-name{font-weight:800;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sr-dm-time{opacity:.65;font-size:12px;flex:0 0 auto;}
.sr-dm-last{opacity:.8;font-size:13px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sr-dm-dot{width:10px;height:10px;border-radius:999px;background: #12E000;box-shadow: 0 0 0 2px rgba(18,224,0,.18);flex:0 0 auto;}

.sr-dm-chat{display:flex;flex-direction:column;height:100%;min-height:0;}
.sr-dm-messages{flex:1;min-height:0;overflow:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:10px;padding:4px 2px;}
.sr-dm-msg{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.sr-dm-msg.is-mine{align-items:flex-end;}
.sr-dm-bubble{max-width: 82%;min-width:0;padding:10px 12px;border-radius:14px;background: rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.10);color:#111;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;word-break:break-word;}
.sr-dm-bubble a,.sr-dm-bubble a:visited{overflow-wrap:anywhere;word-break:break-word;word-wrap:break-word;}
.sr-dm-msg.is-mine .sr-dm-bubble{background: rgba(18,224,0,.18);border-color: rgba(18,224,0,.28);}
.sr-dm-when{font-size:11px;opacity:.55;}
.sr-dm-compose{display:flex;gap:10px;padding-top:10px;border-top:1px solid rgba(0,0,0,.08);}
.sr-dm-input{flex:1;}
.sr-dm-send{flex:0 0 auto;}

/* Slide-out main menu (More) panel */
.sr-menu-panel{position: fixed;top:0;left: 0;height: 100vh;width: 100vw;z-index: 2147483000;display:flex;align-items:stretch;opacity:0;visibility:hidden;pointer-events:none;}
.sr-layout.sr-menu-open .sr-menu-panel,
.sr-layout.sr-menu-closing .sr-menu-panel{opacity:1;visibility:visible;pointer-events:auto;}
.sr-layout.sr-menu-closing .sr-menu-panel{pointer-events:none;}
.sr-menu-panel[hidden]{display:none;}
.sr-menu-panel-card{margin-left: 0;width: min(var(--sr-activity-panel-w), 100vw);height:100vh;background:#fff;color:#111;box-shadow: 10px 0 40px rgba(0,0,0,.25);border-right: 1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;transform: translateX(-105%);opacity:1;box-sizing:border-box;padding-left: var(--sr-sidebar-icons-w);}
.sr-layout.sr-menu-open .sr-menu-panel-card{transform: translateX(0);}
.sr-menu-panel-scrim{flex:1;background: rgba(0,0,0,.06);opacity:0;}
.sr-layout.sr-menu-open .sr-menu-panel-scrim{opacity:1;}
@media (prefers-reduced-motion: no-preference){
  .sr-menu-panel-card{transition: transform .28s cubic-bezier(.2,.9,.2,1);}
  .sr-menu-panel-scrim{transition: opacity .18s ease;}
  .sr-search-panel-card{transition: transform .28s cubic-bezier(.2,.9,.2,1);}
  .sr-search-panel-scrim{transition: opacity .18s ease;}
}
.sr-menu-panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 14px;border-bottom:1px solid rgba(0,0,0,.08);}
.sr-menu-panel-title{font-weight:800;font-size:22px;}
.sr-menu-panel-close{width:36px;height:36px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background: rgba(0,0,0,.04);color:#111;font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.sr-menu-panel-close:hover{background: rgba(0,0,0,.06);}
.sr-menu-panel-body{padding:12px 12px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:10px;}
.sr-menu-list{display:flex;flex-direction:column;gap:10px;}
.sr-menu-item{display:flex;align-items:center;gap:12px;padding:12px 12px;border:1px solid rgba(0,0,0,.10);border-radius:14px;background: rgba(0,0,0,.02);text-decoration:none;color:#111;}
.sr-menu-item:hover{background: rgba(0,0,0,.04);}
.sr-menu-ic{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.10);background: rgba(0,0,0,.04);flex:0 0 auto;}
.sr-menu-ic svg{width:20px;height:20px;fill: currentColor;opacity:.9;}
.sr-menu-text{font-weight:750;}

/* Slide-out search panel */
.sr-search-panel{position: fixed;top:0;left: 0;height: 100vh;width: 100vw;z-index: 2147483000;display:flex;align-items:stretch;opacity:0;visibility:hidden;pointer-events:none;}
.sr-layout.sr-search-open .sr-search-panel,
.sr-layout.sr-search-closing .sr-search-panel{opacity:1;visibility:visible;pointer-events:auto;}
.sr-layout.sr-search-closing .sr-search-panel{pointer-events:none;}
.sr-search-panel[hidden]{display:none;}
.sr-search-panel-card{margin-left: 0;width: min(var(--sr-activity-panel-w), 100vw);height:100vh;background:#fff;color:#111;box-shadow: 10px 0 40px rgba(0,0,0,.25);border-right: 1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;transform: translateX(-105%);opacity:1;box-sizing:border-box;padding-left: var(--sr-sidebar-icons-w);}
.sr-layout.sr-search-open .sr-search-panel-card{transform: translateX(0);}
.sr-search-panel-scrim{flex:1;background: rgba(0,0,0,.06);opacity:0;}
.sr-layout.sr-search-open .sr-search-panel-scrim{opacity:1;}

.sr-search-panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 14px;border-bottom:1px solid rgba(0,0,0,.08);}
.sr-search-panel-title{font-weight:800;font-size:22px;}
.sr-search-panel-close{width:36px;height:36px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background: rgba(0,0,0,.04);color:#111;font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.sr-search-panel-close:hover{background: rgba(0,0,0,.06);}
.sr-search-panel-body{padding:14px 14px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:14px;}
.sr-search-input{width:100%;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background: rgba(255,255,255,.06);color: var(--brand-text);padding:0 14px;outline:none;}
.sr-search-input::placeholder{color: var(--brand-muted);}
.sr-search-input:focus{border-color: rgba(255,255,255,.28);box-shadow: 0 0 0 3px rgba(255,255,255,.08);}
.sr-search-suggest-title{font-weight:800;color: var(--brand-text);}
.sr-search-suggest-list{display:flex;flex-direction:column;gap:2px;}
.sr-search-suggest-item{width:100%;display:flex;gap:10px;align-items:center;padding:10px 8px;border:none;border-radius:12px;background:transparent;color: var(--brand-text);cursor:pointer;text-align:left;}
.sr-search-suggest-item:hover{background: rgba(255,255,255,.06);}
.sr-search-suggest-ic{width:18px;flex:0 0 auto;opacity:.65;display:inline-flex;align-items:center;justify-content:center;}
.sr-search-suggest-text{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Drawer theme: match sidebar (dark) + lighter inner surfaces */

.sr-activity-panel-card,.sr-messages-panel-card,.sr-menu-panel-card,.sr-search-panel-card{background: linear-gradient(180deg,color-mix(in srgb, var(--brand-surface), #000 12%),color-mix(in srgb, var(--brand-bg), #000 18%));color: var(--brand-text);border-right: 1px solid color-mix(in srgb, var(--brand-text), transparent 88%);}
.sr-activity-panel-head,.sr-messages-panel-head,.sr-menu-panel-head,.sr-search-panel-head{border-bottom:1px solid color-mix(in srgb, var(--brand-text), transparent 88%);}
.sr-activity-panel-title,.sr-messages-panel-title,.sr-menu-panel-title,.sr-search-panel-title{color: var(--brand-text);}
.sr-activity-panel-close,.sr-messages-panel-close,.sr-messages-back,.sr-menu-panel-close,.sr-search-panel-close{border:1px solid rgba(255,255,255,.14);background: rgba(255,255,255,.06);color: var(--brand-text);}
.sr-activity-panel-close:hover,.sr-messages-panel-close:hover,.sr-messages-back:hover,.sr-menu-panel-close:hover,.sr-search-panel-close:hover{background: rgba(255,255,255,.09);}

.sr-activity-panel-scrim,.sr-messages-panel-scrim,.sr-menu-panel-scrim,.sr-search-panel-scrim{background: rgba(0,0,0,.45);}

.sr-activity-panel-tabs .sr-pill{border-color: rgba(255,255,255,.14);background: rgba(255,255,255,.06);color: var(--brand-text);}

.sr-activity-panel .sr-muted,.sr-messages-panel .sr-muted{color: var(--brand-muted);} 
.sr-activity-panel .sr-ntf-row{border: 1px solid rgb(61 79 51 / 55%) !important;background: rgb(72 72 72 / 28%) !important;}
.sr-activity-panel .sr-ntf-line2{color: var(--brand-muted);} 
.sr-activity-panel .sr-ntf-thumb img{border:1px solid rgba(255,255,255,.12);background: rgba(255,255,255,.08);} 

.sr-messages-panel .sr-input{background: rgba(255,255,255,.06) !important;color: var(--brand-text) !important;border-color: rgba(255,255,255,.18) !important;}
.sr-dm-row{border:1px solid rgba(255,255,255,.10);background: rgba(255,255,255,.06);}
.sr-dm-row:hover{background: rgba(255,255,255,.09);}
.sr-dm-row.is-unread{border-color: rgba(255,255,255,.18);background: rgba(255,255,255,.10);}
.sr-dm-avatar{border:1px solid rgba(255,255,255,.14);background: rgba(255,255,255,.08);}
.sr-dm-bubble{background: rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color: var(--brand-text);}
.sr-dm-when{color: var(--brand-muted);opacity:.9;}

.sr-menu-item{border:1px solid rgba(255,255,255,.10);background: rgba(255,255,255,.06);color: var(--brand-text);}
.sr-menu-item:hover{background: rgba(255,255,255,.09);}
.sr-menu-ic{border:1px solid rgba(255,255,255,.14);background: rgba(255,255,255,.08);}

/* Notification rows in activity drawer (dark theme) */
.sr-activity-panel .sr-muted{color: var(--brand-text);} 
.sr-activity-panel .sr-ntf-row{border:1px solid rgba(255,255,255,.12);background: rgba(255,255,255,.06);}
.sr-activity-panel .sr-ntf-line2{color: var(--brand-text);} 
.sr-activity-panel .sr-ntf-thumb img{border:1px solid rgba(255,255,255,.14);background: rgba(255,255,255,.08);} 

/* Ensure sidebar stays visible in feed-mode on desktop when drawer open */
.sr-feed-mode .sr-layout.sr-activity-open .sr-sidebar,
.sr-feed-mode .sr-layout.sr-activity-closing .sr-sidebar,
.sr-feed-mode .sr-layout.sr-messages-open .sr-sidebar,
.sr-feed-mode .sr-layout.sr-messages-closing .sr-sidebar,
.sr-feed-mode .sr-layout.sr-search-open .sr-sidebar,
.sr-feed-mode .sr-layout.sr-search-closing .sr-sidebar{display:flex !important;}

@media (max-width: 900px){
  .sr-layout.sr-activity-open,
  .sr-layout.sr-activity-closing,
  .sr-layout.sr-search-open,
  .sr-layout.sr-search-closing,
  .sr-layout.sr-messages-open,
  .sr-layout.sr-messages-closing,
  .sr-layout.sr-menu-open,
  .sr-layout.sr-menu-closing{grid-template-columns: 1fr;}
  .sr-layout.sr-activity-open .sr-sidebar,
  .sr-layout.sr-activity-closing .sr-sidebar,
  .sr-layout.sr-search-open .sr-sidebar,
  .sr-layout.sr-search-closing .sr-sidebar,
  .sr-layout.sr-messages-open .sr-sidebar,
  .sr-layout.sr-messages-closing .sr-sidebar,
  .sr-layout.sr-menu-open .sr-sidebar,
  .sr-layout.sr-menu-closing .sr-sidebar{display:none;}
  .sr-activity-panel{left:0;width:100vw;}
  .sr-activity-panel-card{margin-left:0;width:100vw;padding-left:0;}

  .sr-messages-panel{left:0;width:100vw;}
  .sr-messages-panel-card{margin-left:0;width:100vw;padding-left:0;}

  .sr-menu-panel{left:0;width:100vw;}
  .sr-menu-panel-card{margin-left:0;width:100vw;padding-left:0;}

  .sr-search-panel{left:0;width:100vw;}
  .sr-search-panel-card{margin-left:0;width:100vw;padding-left:0;}
}

.sr-brand{
  font-weight: 800;
  letter-spacing:.2px;
  padding: 0;
  border-radius: 12px;
  background: none;
  border: none;
  display:flex;
  align-items:center;
  gap: 10px;
}

.sr-brand-logo{display:block;height:34px;width:auto;max-width:100%;object-fit:contain;}

.sr-nav{display:flex;flex-direction:column;gap:6px;}
.sr-nav-item{
  display:flex;align-items:center;gap:10px;
  color: var(--brand-text);
  text-decoration:none;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  position: relative;
}
.sr-nav-item:hover{background: rgba(255,255,255,.04);border-color: rgba(255,255,255,.08);}
.sr-nav-item.is-active{background: color-mix(in srgb, var(--brand-primary), transparent 88%);border-color: color-mix(in srgb, var(--brand-primary), transparent 72%);}
.sr-nav-item:focus{outline:none;box-shadow: var(--sr-focus);}

.sr-ic{position:relative;}
.sr-nav-badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ff3b30;color:#fff;border:2px solid rgba(0,0,0,.25);font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1;pointer-events:none;}

/* Default: show badge above the end of the label text */
.sr-nav-badge-ic{display:none;position:absolute;top:-6px;right:-6px;}
.sr-nav-label{position:relative;display:inline-block;}
.sr-nav-badge-text{position:absolute;top:-10px;right:-10px;transform:none;}

/* Icon-only sidebar: hide label badge and show icon badge */
.sr-layout.sr-activity-open .sr-nav-badge-text,
.sr-layout.sr-activity-closing .sr-nav-badge-text,
.sr-layout.sr-search-open .sr-nav-badge-text,
.sr-layout.sr-search-closing .sr-nav-badge-text,
.sr-layout.sr-messages-open .sr-nav-badge-text,
.sr-layout.sr-messages-closing .sr-nav-badge-text{display:none;}
.sr-layout.sr-activity-open .sr-nav-badge-ic,
.sr-layout.sr-activity-closing .sr-nav-badge-ic,
.sr-layout.sr-search-open .sr-nav-badge-ic,
.sr-layout.sr-search-closing .sr-nav-badge-ic,
.sr-layout.sr-messages-open .sr-nav-badge-ic,
.sr-layout.sr-messages-closing .sr-nav-badge-ic{display:inline-flex;}

.sr-ic svg{width:18px;height:18px;fill: currentColor;opacity:.92}

.sr-main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;background: #151e05;}

.sr-topbar{
  display:none;
  align-items:center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--brand-border);
  background: rgba(0,0,0,.14);
  min-height: 66px;
}

.sr-topbar-spacer{flex:1;}

.sr-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  background: rgba(255,255,255,.04);
  color: var(--brand-text);
  text-decoration:none;
  font-weight: 650;
}
.sr-btn:hover{background: rgba(255,255,255,.06);}
.sr-btn:focus{outline:none;box-shadow: var(--sr-focus);}

.sr-btn-primary{
  border-color: color-mix(in srgb, var(--brand-primary), #000 15%);
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
  color: #07070c;
}
.sr-btn-primary:hover{filter: brightness(1.03);}

.sr-btn-ghost{background: transparent;}

.sr-hamburger{display:none;}

.sr-stage{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--sr-stage-pad-y) var(--sr-stage-pad-x);
  flex: 1;
  min-height: 0;
}

@media (min-width: 901px){
  .sr-stage{transform: translateX(calc(-1 * var(--sr-stage-shift)));}
}

.sr-page{width:100%;}
.sr-page-head{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.sr-page-title{font-size:18px;font-weight:750;letter-spacing:.2px;}
.sr-page-tabs{display:flex;gap:8px;margin: 10px 0 12px;flex-wrap:wrap;}
.sr-page-list{display:flex;flex-direction:column;gap:10px;}

.sr-list-row{display:block;padding:12px 12px;border:1px solid var(--brand-border);border-radius:14px;background: rgba(255,255,255,.03);text-decoration:none;color: var(--brand-text);}
.sr-list-row:hover{background: rgba(255,255,255,.05);}
.sr-list-row-title{font-weight:700;}

.sr-activity-row{padding:12px 12px;border:1px solid var(--brand-border);border-radius:14px;background: rgba(255,255,255,.03);}
.sr-activity-type{font-weight:750;text-transform:uppercase;font-size:11px;letter-spacing:.6px;opacity:.8;margin-bottom:4px;}
.sr-activity-reel{display:inline-block;color: var(--brand-text);text-decoration:none;margin-bottom:6px;}
.sr-activity-reel:hover{text-decoration:underline;}

/* TikTok-like Activity notifications list */
.sr-ntf-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px;border:1px solid var(--brand-border);border-radius:14px;background: rgba(255,255,255,.03);}
.sr-ntf-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1;text-decoration:none;color:inherit;}
.sr-ntf-left:hover .sr-ntf-line1{text-decoration:underline;}
.sr-ntf-avatar{width:46px;height:46px;border-radius:999px;overflow:hidden;flex:0 0 auto;display:block;border:1px solid rgba(255,255,255,.10);background: rgba(255,255,255,.04);}
.sr-ntf-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.sr-ntf-avatar-ph{width:100%;height:100%;background: rgba(255,255,255,.08);}
.sr-ntf-text{min-width:0;}
.sr-ntf-line1{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sr-ntf-time{font-weight:650;opacity:.7;font-size:12px;}
.sr-ntf-line2{color: var(--brand-text-muted);font-size:13px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.sr-ntf-thumb{flex:0 0 auto;display:block;}
.sr-ntf-thumb img{width:46px;height:62px;border-radius:10px;object-fit:cover;display:block;border:1px solid rgba(255,255,255,.10);background: rgba(0,0,0,.25);}

.sr-phone{display:flex;justify-content:center;}
.sr-phone-inner{
  width: var(--sr-phone-w);
  max-height: calc(100vh - var(--sr-topbar-h) - (var(--sr-phone-gutter-y) * 2));
  aspect-ratio: 9/16;
  border-radius: var(--sc-radius-lg, 28px);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--sr-shadow);
  overflow:hidden;
  position:relative;
}

/* Landscape reels: use a 16:9 stage instead of the 9:16 phone shell. */
.sr-stage.sr-stage-landscape{
  --sr-phone-w: min(
    96vw,
    calc((100vh - var(--sr-topbar-h) - (var(--sr-phone-gutter-y) * 2)) * 16 / 9)
  );
}
.sr-phone-inner.sr-stage-landscape{aspect-ratio: 16/9;}

@media (min-width: 901px){
  .sr-stage.sr-stage-landscape{transform: none !important;}
}

.sr-view{height:100%;}
.sr-view[hidden]{display:none !important;}

.sr-reel{height:100%;display:flex;flex-direction:column;}

/* Smooth carousel-like transitions */
.sr-reel.sr-anim-down{animation: srSlideInUp .22s ease-out both;}
.sr-reel.sr-anim-up{animation: srSlideInDown .22s ease-out both;}
.sr-reel.sr-anim-down,.sr-reel.sr-anim-up{will-change: transform, opacity;}
@keyframes srSlideInUp{from{transform:translateY(42px);opacity:.0}to{transform:translateY(0);opacity:1}}
@keyframes srSlideInDown{from{transform:translateY(-42px);opacity:.0}to{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion: reduce){
  .sr-reel.sr-anim-down,.sr-reel.sr-anim-up{animation:none;}
}

.sr-player{position:relative;height:100%;background: #000;display:flex;align-items:center;justify-content:center;}

.sr-center-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);display:none;place-items:center;pointer-events:none;z-index:30;}
.sr-center-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;display:none;pointer-events:none;z-index:29;}
.sr-center-spinner::before{content:"";position:absolute;inset:0;border-radius:999px;border:4px solid rgba(255,255,255,.20);border-top-color: rgba(255,255,255,.92);animation:srSpin .9s linear infinite;}
@keyframes srSpin{to{transform: rotate(360deg);}}
.sr-center-play svg{width:28px;height:28px;fill: rgba(255,255,255,.95);}
.sr-reel-page.is-paused .sr-center-play{display:grid;}
.sr-reel-page.is-loading .sr-center-spinner{display:block;}
.sr-reel-page.is-paused .sr-center-spinner{display:none;}
.sr-feed-mode .sr-center-spinner,.sr-feed-mode .sr-reel-page.is-loading .sr-center-spinner{display:none !important;}

.sr-iframe{width:100%;height:100%;border:0;}
.sr-video{width:100%;height:100%;object-fit:contain;border:0;}

.sr-feed-mode .sr-player .sr-iframe{
  width: 100%;
  height: 100%;
  border: 0;
  transform: scale(1.05);
  transform-origin: center center;
}

/* TikTok-like seek bar at the bottom of the reel */
.sr-seek{position:absolute;left:0;right:0;bottom:calc(-7px + env(safe-area-inset-bottom, 0px));z-index:25;padding:0 5px 2px;pointer-events:auto;}
.sr-seek-range{width:100%;appearance:none;-webkit-appearance:none;background:transparent;height:14px;margin:0;--sr-seek-pct:0%;touch-action:none;}
.sr-seek-range::-webkit-slider-runnable-track{height:2px;border-radius:999px;background:linear-gradient(to right, rgba(255,255,255,.95) 0, rgba(255,255,255,.95) var(--sr-seek-pct), rgba(255,255,255,.28) var(--sr-seek-pct), rgba(255,255,255,.28) 100%);}
.sr-seek-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.95);border:1px solid rgba(0,0,0,.35);margin-top:-4px;}
.sr-seek-range::-moz-range-track{height:2px;background:rgba(255,255,255,.28);border-radius:999px;}
.sr-seek-range::-moz-range-progress{height:2px;background:rgba(255,255,255,.95);border-radius:999px;}
.sr-seek-range::-moz-range-thumb{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.95);border:1px solid rgba(0,0,0,.35);}
.sr-seek-range:focus{outline:none;}

/* Embedded players can swallow wheel events; keep navigation on the parent like TikTok */
.sr-iframe{pointer-events:none;}

.sr-placeholder{color: var(--brand-text-muted);padding: 18px;text-align:center;}

.sr-mute{
  position:absolute;top:calc(10px + env(safe-area-inset-top, 0px));right:calc(10px + env(safe-area-inset-right, 0px));
  width: 40px;height: 40px;border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: var(--brand-text);
}
.sr-mute svg{width:22px;height:22px;fill: currentColor;}
.sr-mute:focus{outline:none;box-shadow: var(--sr-focus);}

.sr-volume{position:absolute;top:calc(10px + env(safe-area-inset-top, 0px));right:calc(10px + env(safe-area-inset-right, 0px));z-index: 30;}
.sr-volume .sr-mute{position:static;top:auto;right:auto;}
.sr-volume-pop{position:absolute;right:8px;top: calc(100% + 4px);width:10px;height:130px;padding:10px 8px;border-radius: 12px;border: 1px solid rgba(255,255,255,.14);background: rgba(0, 0, 0, 0.11);backdrop-filter: blur(10px);display:none;align-items:center;justify-content:center;}
.sr-volume.is-open .sr-volume-pop{display:flex;}
.sr-volume-range{width:110px;height:22px;appearance:none;background:transparent;margin:0;transform: rotate(-90deg);transform-origin:center;}
.sr-volume-range::-webkit-slider-runnable-track{height:2px;background: rgba(255,255,255,.28);border-radius:999px;}
.sr-volume-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;border-radius:999px;background: rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.35);margin-top:-4px;}
.sr-volume-range::-moz-range-track{height:2px;background: rgba(255,255,255,.28);border-radius:999px;}
.sr-volume-range::-moz-range-thumb{width:10px;height:10px;border-radius:999px;background: rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.35);}
.sr-volume-range:focus{outline:none;}

.sr-feed-mode .sr-volume{left:max(12px,calc(env(safe-area-inset-left, 0px) + 12px));right:auto;top:calc(14px + env(safe-area-inset-top, 0px));display:flex;align-items:center;gap:12px;}
.sr-feed-mode .sr-volume .sr-mute{width:44px;height:44px;background:rgba(0,0,0,.34);backdrop-filter:blur(10px);box-shadow:0 10px 28px rgba(0,0,0,.18);}
.sr-feed-mode .sr-volume-pop{left:calc(100% + 10px);right:auto;top:50%;transform:translateY(-50%);width:clamp(138px,20vw,168px);height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.20);backdrop-filter:blur(14px);box-shadow:0 10px 28px rgba(0,0,0,.16);display:none;flex-direction:row;align-items:center;justify-content:center;gap:12px;}
.sr-feed-mode .sr-volume-range{transform:none;transform-origin:center;width:100%;max-width:110px;height:20px;}
.sr-feed-mode .sr-volume-range::-webkit-slider-runnable-track{height:3px;background:rgba(255,255,255,.34);}
.sr-feed-mode .sr-volume-range::-webkit-slider-thumb{width:11px;height:11px;margin-top:-4px;}
.sr-feed-mode .sr-volume-range::-moz-range-track{height:3px;background:rgba(255,255,255,.34);}
.sr-feed-mode .sr-volume-range::-moz-range-thumb{width:11px;height:11px;}

.sr-meta{
  position:absolute;
  left: 12px;
  bottom: 12px;
  right: 12px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.44));
}

.sr-title{font-weight: 750; margin-bottom: 6px;}
.sr-caption{color: var(--brand-text-muted); font-size: 14px; line-height: 1.35;}
.sr-tags{color: color-mix(in srgb, var(--brand-accent), #fff 12%); font-size: 13px; margin-top: 8px;}

.sr-actions{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: calc(var(--sr-phone-w) / 2 + 14px);
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
}

/* TikTok-like right-side arrows (desktop): pinned to viewport */
.sr-arrows{
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction:column;
  gap: 10px;
  z-index: 9996;
}
.sr-arrow-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  background: #202d0d !important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.skylite-reels-root .sr-arrows .sr-arrow-btn{
  background: #202d0d !important;
  border-color: var(--brand-border) !important;
  color: rgb(107 231 69) !important;
  -webkit-appearance: none;
  appearance: none;
}
.skylite-reels-root .sr-arrows .sr-arrow-btn svg{fill: rgb(107 231 69) !important;}
.sr-arrow-btn:hover{filter: brightness(0.98);}
.sr-arrow-btn:focus{outline:none;box-shadow: var(--sr-focus);}
.sr-arrow-btn svg{width: 28px;height: 28px;fill: rgb(107 231 69);}

/* TikTok-like top-right actions (desktop): pinned to viewport */
.sr-top-actions{
  position: fixed;
  right: 24px;
  top: 18px;
  display:flex;
  align-items:center;
  gap: 10px;
  z-index: 9997;
}

@media (min-width: 901px){
  /* Pin to viewport so these match TikTok positioning even when the stage is shifted */
  .sr-arrows{position:fixed;right: 24px;top: 50%;}
  .sr-top-actions{position:fixed;right: 18px;top: 14px;}
}

@media (max-width: 900px){
  .sr-top-actions{display:none;}
  .sr-arrows{display:none;}
}

.sr-action{display:flex;flex-direction:column;align-items:center;gap:6px;}

.sr-action-profile{position:relative;margin-bottom: 4px;}
.sr-avatar{width: 56px;height:56px;border-radius:999px;background: rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);}
.sr-follow{
  position:absolute;bottom:-6px;right: 8px;
  width: 22px;height:22px;border-radius:999px;
  border: 0; background: var(--brand-primary); color: #07070c; font-weight: 800;
}

.sr-action-btn{
  width: 86px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--brand-text);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: 14px;
}

.sr-action-btn:hover{background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08);}
.sr-action-btn:focus{outline:none;box-shadow: var(--sr-focus);}

.sr-action-btn.is-on .sr-action-ic{color: var(--brand-primary);}

.sr-action-ic svg{width: 26px;height:26px;fill: currentColor;}
.sr-action-count{font-size: 12px;color: var(--brand-text-muted);}

.sr-skeleton{height:100%;padding: 12px;display:flex;flex-direction:column;gap: 10px;}
.sr-skeleton[hidden]{display:none !important;}
.sr-skel-video{flex:1;border-radius: 18px;background: rgba(255,255,255,.06);}
.sr-skel-lines{display:grid;grid-template-columns: 1fr;gap: 8px;}
.sr-skel-lines div{height: 10px;border-radius: 999px;background: rgba(255,255,255,.06);width: 80%;}
.sr-skel-lines div:nth-child(2){width: 65%;}
.sr-skel-lines div:nth-child(3){width: 48%;}

@media (prefers-reduced-motion: no-preference){
  .sr-skel-video, .sr-skel-lines div{animation: srPulse 1.4s ease-in-out infinite;}
}
@keyframes srPulse{0%,100%{opacity:.75}50%{opacity:1}}

.sr-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(17,17,26,.95);
  border: 1px solid var(--brand-border);
  padding: 10px 12px;
  border-radius: 999px;
  box-shadow: var(--sr-shadow);
  z-index: 9999;
}
.sr-toast-success{border-color: color-mix(in srgb, var(--brand-accent), transparent 65%)}
.sr-toast-warn{border-color: rgba(255,200,0,.35)}
.sr-toast-error{border-color: rgba(255,0,80,.35)}

.sr-modal{position:fixed;inset:0;z-index:9998;}
.sr-modal-backdrop{position:absolute;inset:0;background: rgba(0,0,0,.58);}
.sr-modal-card{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(560px, 92vw);
  max-height: min(70vh, 640px);
  display:flex;
  flex-direction:column;
  background: rgba(17,17,26,.98);
  border: 1px solid var(--brand-border);
  border-radius: var(--sr-radius);
  box-shadow: var(--sr-shadow);
}

/* Desktop: taller comments modal; keep header + composer pinned while the list scrolls. */
@media (min-width: 761px){
  /* Keep the same width, but stretch to full viewport height */
  .sr-modal-card{
    top: 0;
    bottom: 0;
    height: 100vh;
    max-height: none;
    transform: translateX(-50%);
  }

  .sr-modal-head{
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(17,17,26,.98);
  }

  .sr-modal .sr-modal-body{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
    gap: 0;
  }

  .sr-modal .sr-comments-list{
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px 14px;
  }

  .sr-modal .sr-comment-compose{
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 12px 14px;
  }
}

/* Mobile: full-screen comments modal (header top, compose bottom) */
@media (max-width: 760px){
  .sr-modal-card{
    left: 0;
    top: 0;
    transform: none;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .sr-modal-head{padding-top: calc(12px + env(safe-area-inset-top));}
  .sr-modal-body{padding-bottom: calc(12px + env(safe-area-inset-bottom));}
  .sr-modal .sr-comment-compose{padding-bottom: calc(12px + env(safe-area-inset-bottom));}

  /* Reels: Comments modal close button on the left (avoids overlap with mobile hamburger on the right). */
  .sr-modal-card[aria-label='Comments'] .sr-modal-head{
    position: relative;
    justify-content: center;
  }
  .sr-modal-card[aria-label='Comments'] .sr-modal-title{
    text-align: center;
  }
  .sr-modal-card[aria-label='Comments'] .sr-modal-close{
    position: absolute;
    left: calc(14px + env(safe-area-inset-left));
    right: auto;
    top: 50%;
    transform: translateY(-50%);
  }
}

.sr-modal-head{display:flex;align-items:center;justify-content:space-between;padding: 12px 14px;border-bottom:1px solid var(--brand-border);}
.sr-modal-title{font-weight: 750;}
.sr-modal-body{padding: 12px 14px;overflow:hidden;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;}
.sr-modal-foot{padding: 12px 14px;border-top:1px solid var(--brand-border);display:flex;gap: 10px;}

.sr-comments{display:flex;flex-direction:column;gap: 12px;}
.sr-comment{padding: 10px 12px;border-radius: 14px;background: rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);}
.sr-comment-author{font-weight: 700;margin-bottom: 4px;}
.sr-comment-text{color: var(--brand-text-muted);}

.sr-modal .sr-comment{ text-align:left; display:block !important; }
.sr-modal .sr-comment-head{display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:8px !important;margin-bottom:4px;width:100%;text-align:left;}
.sr-modal .sr-comment-head .sr-comment-author{margin-bottom:0;text-align:left;margin-left:0 !important;}
.sr-modal .sr-comment-avatar{width:20px;height:20px;border-radius:999px;flex:0 0 20px;object-fit:cover;background: rgba(255,255,255,.06);margin:0 !important;display:block !important;}
.sr-modal .sr-comment-author{ text-align:left !important; margin-left:0 !important; }
.sr-modal .sr-comment-text{ text-align:left; display:block !important; }

.sr-comments-status{padding:8px 10px;text-align:center;border-radius: 12px;border:1px dashed rgba(255,255,255,.10);background: rgba(255,255,255,.02);}

/* Comments modal: only the list scrolls; compose stays pinned at bottom */
.sr-modal .sr-comments-list{flex:1;min-height:0;overflow:auto;}
.sr-modal .sr-comment-compose{flex:0;position:sticky;bottom:0;margin-top:0;padding-top:12px;background: rgba(17,17,26,.98);border-top:1px solid var(--brand-border);}

/* Emoji picker (comments modal) */
.sr-modal .sr-emoji-btn{
  width:38px;
  min-width:38px;
  padding:0;
  border-radius:14px;
  font-size:18px;
  line-height:1;
}

.sr-modal .sr-comment-compose{overflow: visible;}

.sr-modal .sr-emoji-popover{
  position:absolute;
  right: 14px;
  bottom: calc(100% + 10px);
  width: min(320px, 86vw);
  max-height: 240px;
  overflow: auto;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--brand-border);
  background: rgba(17,17,26,.98);
  box-shadow: var(--sr-shadow);
  z-index: 6;
}

.sr-modal .sr-emoji-grid{display:grid;grid-template-columns: repeat(8, 1fr);gap: 6px;}

.sr-modal .sr-emoji-item{
  -webkit-appearance:none;
  appearance:none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--brand-text);
  border-radius: 12px;
  height: 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  cursor: pointer;
}

.sr-modal .sr-emoji-item:hover{background: rgba(255,255,255,.06);}
.sr-modal .sr-emoji-item:focus{outline:none;box-shadow: var(--sr-focus);}

/* Thin scrollbar to match popup design */
.sr-modal .sr-comments-list{scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;}
.sr-modal .sr-comments-list::-webkit-scrollbar{width:6px;height:6px;}
.sr-modal .sr-comments-list::-webkit-scrollbar-track{background: transparent;}
.sr-modal .sr-comments-list::-webkit-scrollbar-thumb{background: rgba(255,255,255,.18);border-radius:999px;}
.sr-modal .sr-comments-list::-webkit-scrollbar-thumb:hover{background: rgba(255,255,255,.26);}

.sr-input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--brand-text);
  height: 38px;
  padding: 8px 12px!important;
}
.sr-input:focus{outline:none;box-shadow: var(--sr-focus);}

.sr-upload select.sr-input{
  background: rgba(255,255,255,.03) !important;
  color: var(--brand-text) !important;
  border-color: rgba(255,255,255,.12) !important;
}

.sr-upload select.sr-input option{
  color: #101010 !important;
  background: #ffffff !important;
}

.sr-upload select.sr-input option[value=""]{
  color: #5f6368 !important;
}

.sr-textarea{min-height: 92px;padding: 10px 12px!important;resize: vertical;}

.sr-muted{color: var(--brand-text-muted);}

.sr-upload{height:100%;display:grid;grid-template-columns: 1.5fr .7fr; gap: 14px; align-items:start;}

.skylite-reels-root[data-page="upload"]:not([data-embed="account"]) .sr-upload{align-items:stretch;min-height:780px;min-height:max(780px, calc(100vh - 140px));}
.skylite-reels-root[data-page="upload"]:not([data-embed="account"]) .sr-upload-card{height:100%;}

/* Desktop-only: make the Upload page use a wide content canvas instead of the 9:16 phone shell.
   (Feed stays phone-like; only upload opts into this.) */
@media (min-width: 901px){
  .sr-upload-wide .sr-stage{transform:none !important;justify-content:flex-start;padding: 18px 18px;}
  .sr-upload-wide .sr-phone{width:100%;justify-content:flex-start;}
  .sr-upload-wide .sr-phone-inner{
    width: min(1400px, calc(100vw - var(--sr-sidebar-w) - 60px));
    max-height: none;
    aspect-ratio: auto;
    height: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  .sr-upload-wide .sr-view{height:auto;}
}

/* Mobile: Messages page uses full-screen canvas (no 9:16 phone shell). */
@media (max-width: 900px){
  .sr-messages-wide{--sr-phone-gutter-y: 0px;}
  .sr-messages-wide .sr-stage{align-items:stretch;justify-content:stretch;}
  .sr-messages-wide .sr-layout{border-radius:0;border:0;}
  .sr-messages-wide .sr-phone{width:100%;justify-content:stretch;}
  .sr-messages-wide .sr-phone-inner{
    width:100%;
    height: calc(100vh - var(--sr-topbar-h) - (var(--sr-phone-gutter-y) * 2));
    max-height: calc(100vh - var(--sr-topbar-h) - (var(--sr-phone-gutter-y) * 2));
    aspect-ratio:auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
  }
}

@supports (height: 100dvh){
  @media (max-width: 900px){
    .sr-messages-wide .sr-phone-inner{
      height: calc(100dvh - var(--sr-topbar-h) - (var(--sr-phone-gutter-y) * 2));
      max-height: calc(100dvh - var(--sr-topbar-h) - (var(--sr-phone-gutter-y) * 2));
    }
  }
}

.sr-upload-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--sr-radius);
  padding: 14px;
}

.sr-upload-card h2, .sr-upload-card h3{margin: 0 0 8px;}
.sr-upload-card p{margin: 0 0 10px;}

.sr-field{display:flex;flex-direction:column;gap: 6px;margin: 10px 0;}
.sr-field-inline{flex-direction:row;align-items:center;justify-content:space-between;}

.sr-grid2{display:grid;grid-template-columns: 1fr 1fr; gap: 10px;}

.sr-upload-actions{display:flex;gap: 10px;margin-top: 10px;}

.sr-preview{margin-top: 10px;display:flex;flex-direction:column;gap: 8px;}
.sr-preview-video{width:100%;max-height: 240px;border-radius: 16px;background: #000;}

/* Upload preview: phone-style stage (9:16) */
.sr-preview-phone{
  width: 100%;
  aspect-ratio: 9/16;
  border-radius: 15px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--sr-shadow);
  overflow: hidden;
  position: relative;
}

.sr-preview-phone .sr-reel-page{height:100%;}
.sr-preview-phone .sr-player{height:100%;}
.sr-preview-phone .sr-video{object-fit:cover;}

/* Keep the action rail pinned to the right in preview (no stage math needed) */
.sr-preview-phone .sr-reel-actions-wrap{
  left: auto;
  right: calc(12px + env(safe-area-inset-right, 0px));
  transform: none;
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}

/* Upload preview (mobile too): never hide/remove the action rail */
.skylite-reels-root[data-page="upload"] .sr-preview-phone .sr-preview-actions-wrap{
  display:flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position:absolute;
  top: 0;
  bottom: 0;
  left: auto !important;
  right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  transform: none !important;
  z-index: 32;
}

/* Preview actions are visual only */
.sr-preview-phone .sr-reel-actions,
.sr-preview-phone .sr-reel-actions-wrap{pointer-events:none;}

.sr-preview-title{font-weight:780;color:#fff;}

/* Upload preview: top controls (volume left, menu right) */
.sr-preview-phone .sr-preview-volume{
  left: calc(10px + env(safe-area-inset-left, 0px));
  right: auto;
}

.sr-preview-phone .sr-preview-menu{
  z-index: 31;
}

/* Upload preview: caption block matches reel overlay spacing */
.sr-preview-phone .sr-preview-caption{display:flex;flex-direction:column;gap:4px;}
.sr-preview-phone .sr-preview-title{display:block;}
.sr-preview-phone .sr-preview-caption [data-role='preview-caption']{display:block;}



/* Desktop-only: apply overlay sizing ONLY inside the Upload Preview panel */
@media (min-width: 901px){
  .skylite-reels-root[data-page="upload"] .sr-preview-phone .sr-reel-overlay{
    margin-right: 12px;
    width: 300px;
  }
}

/* Mobile-only: constrain overlay width ONLY inside the Upload Preview panel */
@media (max-width: 760px){
  .skylite-reels-root[data-page="upload"] .sr-preview-phone .sr-reel-overlay{
    max-width: 75%;
  }
}

.skylite-reels-root[data-page="upload"]:not([data-embed="account"]) .sr-upload-card{display:flex;flex-direction:column;min-height:0;}
.skylite-reels-root[data-page="upload"]:not([data-embed="account"]) .sr-preview{flex:1;display:flex;flex-direction:column;min-height:0;}
.skylite-reels-root[data-page="upload"]:not([data-embed="account"]) .sr-preview-video{width:100%;height:100%;flex:1;max-height:1080px !important;border-radius:16px;background:#000;object-fit:contain;}

/* Upload page: let the phone preview fill the panel height while staying 9:16 */
.skylite-reels-root[data-page="upload"]:not([data-embed="account"]) .sr-preview-phone{
  align-self: center;
  max-height: 1080px;
  width: min(420px, 100%);
  max-width: 100%;
  height: auto;
}

.sr-progress{margin-top: 12px;}
.sr-progress-row{display:flex;gap: 10px;align-items:center;}
.sr-progress-bar{flex:1;height: 10px;border-radius: 999px;background: rgba(255,255,255,.06);overflow:hidden;}
.sr-progress-fill{height:100%;width:0;background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));}
.sr-progress-text{width: 48px;text-align:right;color: var(--brand-text-muted);font-size: 12px;}

.sr-alert{margin-top: 12px;padding: 10px 12px;border-radius: 14px;border: 1px solid rgba(255,0,80,.25);background: rgba(255,0,80,.10);}
.sr-alert-warn{border-color: rgba(255,200,0,.25);background: rgba(255,200,0,.08);}

.sr-divider{height: 1px;background: rgba(255,255,255,.10);margin: 12px 0;}

.sr-empty{height:100%;display:flex;flex-direction:column;gap: 8px;align-items:center;justify-content:center;color: var(--brand-text-muted);padding: 18px;text-align:center;}
.sr-empty a{color: color-mix(in srgb, var(--brand-accent), #fff 12%);}

.sr-drawer-backdrop{display:none;}
.sr-drawer{display:none;}

@media (max-width: 900px){
  .sr-main{--sr-topbar-h: 0px;}
  .sr-topbar{display:flex;}
  .sr-layout{grid-template-columns: 1fr;}
  .sr-sidebar{display:none;}
  .sr-hamburger{display:inline-flex;align-items:center;justify-content:center;width: 40px;height: 40px;border-radius: 999px;border:1px solid var(--brand-border);background: rgba(255,255,255,.04);color: var(--brand-text);}
  .sr-hamburger svg{width: 18px;height: 18px;fill: currentColor;}

  .sr-stage{justify-content:center;transform:none;}
  .sr-actions{left:auto;margin-left:0;transform:none;right: 8px; top: 92px; width: 92px;}

  .sr-drawer-backdrop{display:block;position:fixed;inset:0;background: rgba(0,0,0,.55);z-index: 9997;}
  .sr-drawer{display:block;position:fixed;left: 10px;right: 10px;top: 12px;border-radius: var(--sr-radius);background: rgba(17,17,26,.98);border:1px solid var(--brand-border);z-index: 9998;box-shadow: var(--sr-shadow);padding: 12px;}
  .sr-drawer-header{display:flex;align-items:center;justify-content:space-between;gap: 10px;margin-bottom: 10px;}
  .sr-drawer-nav{display:flex;flex-direction:column;gap: 8px;}
  .sr-drawer-item{color: var(--brand-text);text-decoration:none;padding: 10px 12px;border-radius: 14px;border:1px solid rgba(255,255,255,.08);background: rgba(255,255,255,.03);}
}

@media (max-width: 900px){
  .sr-upload{grid-template-columns: 1fr;}
  .sr-upload-actions{flex-wrap:wrap;}
}

/* -------------------------------------------------------------------------- */
/* Feed v2 (TikTok-like scroll-snap)                                          */
/* -------------------------------------------------------------------------- */

.sr-feed-mode .sr-layout{
  grid-template-columns: 1fr;
  border-radius: 0;
  border: 0;
  background: var(--brand-background);
}

.sr-feed-mode .sr-sidebar{display:none;}

.sr-feed-mode .sr-stage{
  transform: none !important;
  padding: 0;
  background: #182207;
}

.sr-phone-inner.sr-feed-phone{
  background: #000;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* TikTok-like: fill the viewport (crop instead of letterbox) */
.sr-feed-mode .sr-video{object-fit:cover;}

/* Feed v2: ensure the media fills the reel (avoid top/bottom black gaps) */
.sr-feed-mode .sr-reel-page{overflow:hidden;}
.sr-feed-mode .sr-reel-page .sr-player{position:absolute;inset:0;display:block;height:auto;}
.sr-feed-mode .sr-reel-page .sr-video,
.sr-feed-mode .sr-reel-page .sr-iframe{position:absolute;inset:0;width:100%;height:100%;}

/* Feed: thumb overlay to avoid iOS poster->black->video flash */
.sr-feed-mode .sr-reel-page .sr-video,
.sr-feed-mode .sr-reel-page .sr-iframe{z-index:1;}
.sr-feed-mode .sr-player .sr-feed-thumb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  z-index:2;
  opacity:1;
  background:#000;
  transition:opacity 120ms linear;
}
.sr-feed-mode .sr-player.sr-thumb-hidden .sr-feed-thumb{opacity:0;}

/* Give the feed container a definite height on desktop too (avoids 0-height in some themes/layouts) */
@media (min-width: 901px){
  .sr-phone-inner.sr-feed-phone{
    height: calc(100vh - var(--sr-topbar-h) - (var(--sr-phone-gutter-y) * 2));
    width: min(92vw, calc((100vh - var(--sr-topbar-h) - (var(--sr-phone-gutter-y) * 2)) * 9 / 16));
    max-height: none;
    aspect-ratio: auto;
    border-radius: 12px !important;
  }
}

/* Full height player on small screens; keep 9:16 centered on desktop */
@media (max-width: 900px){
  .sr-phone-inner.sr-feed-phone{
    width: 100vw;
    max-height: calc(100vh - var(--sr-topbar-h));
    height: calc(100vh - var(--sr-topbar-h));
    aspect-ratio: auto;
  }
}

/* iOS/modern mobile browsers: use dynamic viewport height (avoids address-bar jump) */
@supports (height: 100dvh){
  .skylite-reels-app{min-height:100dvh;}
  .sr-layout{min-height:100dvh;}
  .sr-sidebar{height:100dvh;}
  @media (min-width: 901px){
    .sr-phone-inner.sr-feed-phone{
      height: calc(100dvh - var(--sr-topbar-h) - (var(--sr-phone-gutter-y) * 2));
      width: min(92vw, calc((100dvh - var(--sr-topbar-h) - (var(--sr-phone-gutter-y) * 2)) * 9 / 16));
    }
  }
  @media (max-width: 900px){
    .sr-phone-inner.sr-feed-phone{
      height: calc(100dvh - var(--sr-topbar-h));
      max-height: calc(100dvh - var(--sr-topbar-h));
    }
  }
}

.sr-view.sr-feed{
  height: 100%;
  overflow-y: scroll;
  overscroll-behavior: none;
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: #000;

  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sr-view.sr-feed::-webkit-scrollbar{width:0;height:0;}

.sr-reel-page{
  height: 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  background: #000;
}

/* TikTok-like "cover" behavior for Vimeo embeds (crop instead of letterbox) */
.sr-feed-mode .sr-player{overflow:hidden;}
.sr-feed-mode .sr-player .sr-iframe{
  width: 100%;
  height: 100%;
  border: 0;
  /* Vimeo preserves aspect ratio; scale so it fills a 9:16 viewport. */
  transform: scale(1.05);
  transform-origin: center center;
}

/* Ensure demo/empty placeholders remain visible on the black player */
.sr-player{color: var(--brand-text);}

.sr-feed-header{
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 5;
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 750;
  letter-spacing: .2px;
  color: rgba(255,255,255,.82);
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.sr-feed-tab{
  opacity:.65;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.sr-feed-tab:hover{background: rgba(255,255,255,.10); opacity: .92;}
.sr-feed-tab:focus{outline:none;box-shadow: var(--sr-focus);}
.sr-feed-tab.is-active{opacity:1;color:#fff;}
.sr-feed-sep{opacity:.35;}

.sr-reel-overlay{
  position: absolute;
  left: 12px;
  right: 0px;
  bottom: 18px;
  z-index: 5;
  padding: 10px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
}

@media (max-width: 901px){
  .sr-reel-overlay{
    position: absolute;
    left: 12px;
    right: 18%;
    bottom: 18px;
    z-index: 5;
    padding: 10px 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
    margin-right: 0;
    display: block;
    box-sizing: border-box;
    width: auto;
    max-width: none;
  }

  .sr-reel-overlay .sr-reel-caption-wrap{
    max-width: 100%;
  }
}

@media (min-width: 901px){
  .sr-reel-overlay{
    margin-right: 12px;
    width: auto;
  }
}
.sr-reel-user{font-weight: 780; margin-bottom: 6px;}
.sr-reel-caption-wrap{max-width:min(100%,560px);}
.sr-reel-caption{
  color: rgba(255,255,255,.86);
  font-size: 14px;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sr-reel-caption.sr-caption-measure{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;}
.sr-reel-page.sr-caption-expanded .sr-reel-caption,
.sr-reel-caption.sr-caption-expanded-state{display:block;overflow:visible;-webkit-line-clamp:unset;}
.sr-reel-caption-toggle{
  display: none;
  margin-top: 4px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  outline: none;
}
.sr-reel-caption-toggle:hover,
.sr-reel-caption-toggle:focus,
.sr-reel-caption-toggle:active,
.sr-reel-caption-toggle:focus-visible{text-decoration:none;outline:none;box-shadow:none;border-radius:0;}
.sr-reel-audio{margin-top: 8px; color: rgba(255,255,255,.78); font-size: 13px;}

.sr-reel-actions-wrap{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 6;
  --sr-rail-ty: 0px;
  --sr-rail-left: 0px;
  --sr-rail-gap: 8px;
  --sr-rail-pad-bottom: 0px;
  transform: translateX(calc(var(--sr-rail-left) + var(--sr-rail-gap) + env(safe-area-inset-right, 0px))) translateY(var(--sr-rail-ty));
  will-change: transform;
  pointer-events: none;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  padding-bottom: calc(var(--sr-rail-pad-bottom) + var(--sr-rail-extra-bottom, 0px));
}

@media (max-width: 900px){
  .sr-reel-actions-wrap{
    --sr-rail-extra-bottom: 22px;
    left: auto;
    right: calc(12px + env(safe-area-inset-right, 0px));
    transform: translateY(var(--sr-rail-ty));
  }
}

.sr-reel-actions-wrap .sr-reel-actions{pointer-events: auto;}

.sr-reel-actions {
  position: relative;
  top: auto;
  bottom: auto;
  transform: none;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  pointer-events: auto;
}

.sr-act {
    width: 72px;
    border: 0;
    background: transparent;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    padding: 6px 4px;
    border-radius: 16px;
}
.sr-act:hover{background: rgba(255,255,255,.06);}
.sr-act:focus{outline:none;box-shadow: var(--sr-focus);}

.sr-act-ic{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.28);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.sr-act:hover .sr-act-ic{background: rgba(0,0,0,.36);}
.sr-act-ic svg{width: 26px;height: 26px;fill: currentColor;filter: drop-shadow(0 3px 12px rgba(0,0,0,.35));}
.sr-act-count{font-size: 12px;color: rgba(255,255,255,.82);}

.sr-act-avatar{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 2px solid rgba(255,255,255,.30);
  overflow: visible;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  position: relative;
}

.sr-act-badge{
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: #fff;
  background: #ff2d55;
  border: 2px solid rgba(0,0,0,.45);
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}

.sr-act-badge svg{width: 13px;height: 13px;}

.sr-act-profile.is-following .sr-act-badge{background: var(--brand-primary);}

@media (max-height: 720px){
  .sr-reel-actions{transform: none;}
  .sr-act{width: 68px;}
  .sr-act-ic{width: 44px;height: 44px;}
}

.sr-act-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 999px;
}

.sr-feed-mode .sr-mute{
  right: 10px;
  top: 10px;
}

/* Modal + compose helpers used by feed */
.sr-comments-list{display:flex;flex-direction:column;gap: 10px;}
.sr-comment-compose{display:flex;gap: 10px;margin-top: 12px;}

/* Toast kinds (JS uses .sr-toast.is-*) */
.sr-toast.is-success{border-color: color-mix(in srgb, var(--brand-accent), transparent 65%)}
.sr-toast.is-warn{border-color: rgba(255,200,0,.35)}
.sr-toast.is-error{border-color: rgba(255,0,80,.35)}

/* Simple form helpers used by upload/profile pages */
.sr-form{margin-top: 12px; display:flex; flex-direction:column; gap: 10px;}
.sr-label{font-weight: 700; font-size: 13px; color: rgba(255,255,255,.82); margin-top: 6px;}
.sr-row{display:flex; gap: 12px; align-items:center;}
.sr-check{display:flex; gap: 8px; align-items:center; color: rgba(255,255,255,.86); user-select:none;}

.sr-kpis{display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0;}

/* KPI cards: colorful gradients per metric (used on profile/activity pages). */
.sr-kpi{
  --kpi-a: var(--brand-primary);
  --kpi-b: var(--brand-accent);
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--kpi-a), transparent 72%);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  background:
    radial-gradient(120px 80px at 18% 22%, color-mix(in srgb, var(--kpi-a), transparent 70%), transparent 60%),
    radial-gradient(120px 80px at 82% 32%, color-mix(in srgb, var(--kpi-b), transparent 74%), transparent 60%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--kpi-a), transparent 90%),
      color-mix(in srgb, var(--kpi-b), transparent 92%)
    ),
    rgba(255,255,255,.03);
  box-shadow:
    0 12px 34px rgba(0,0,0,.40),
    0 0 0 1px rgba(0,0,0,.12) inset;
}

.sr-kpi:hover{
  transform: translateY(-1px);
  box-shadow:
    0 16px 40px rgba(0,0,0,.46),
    0 0 0 1px rgba(0,0,0,.12) inset;
}

.sr-kpi::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 44%);
  opacity: .65;
}

.sr-kpi-n{
  position: relative;
  z-index: 1;
  font-weight: 860;
  font-size: 20px;
  letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.sr-kpi-l{
  position: relative;
  z-index: 1;
  color: color-mix(in srgb, var(--kpi-a), #fff 55%);
  font-size: 12px;
  margin-top: 4px;
}

/* Per-card hues (based on the default KPI ordering in the UI). */
.sr-kpis .sr-kpi:nth-child(1){ --kpi-a: #12E000; --kpi-b: #38FF14; } /* Followers */
.sr-kpis .sr-kpi:nth-child(2){ --kpi-a: #00E5A8; --kpi-b: #19C8FF; } /* Following */
.sr-kpis .sr-kpi:nth-child(3){ --kpi-a: #B44CFF; --kpi-b: #5B7CFF; } /* Reels */
.sr-kpis .sr-kpi:nth-child(4){ --kpi-a: #00B7FF; --kpi-b: #2BFFDA; } /* Views */
.sr-kpis .sr-kpi:nth-child(5){ --kpi-a: #FF2D7D; --kpi-b: #FF6A3D; } /* Likes */
.sr-kpis .sr-kpi:nth-child(6){ --kpi-a: #FFB800; --kpi-b: #12E000; } /* Messages/Other */

.sr-pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
  font-weight: 650;
}
.sr-pill.is-active{border-color: color-mix(in srgb, var(--brand-primary), transparent 68%); background: color-mix(in srgb, var(--brand-primary), transparent 88%); color: #70ad00!important;}

/* -------------------------------------------------------------------------- */
/* TikTok-like desktop shell overrides (feed mode)                             */
/* -------------------------------------------------------------------------- */

@media (min-width: 901px){
  /* In feed mode, show the left sidebar like TikTok */
  .sr-feed-mode .sr-layout{grid-template-columns: var(--sr-sidebar-w) 1fr;}
  .sr-feed-mode .sr-sidebar{
    display:flex;
    background: linear-gradient(180deg,
      color-mix(in srgb, #0d2900, #000 10%),
      color-mix(in srgb, var(--brand-bg), #009328 16%)
    );
    color: var(--brand-text);
    border-right: 1px solid var(--brand-border);
    z-index: 555;
  }
  .sr-feed-mode .sr-brand{background: transparent; border: 0; color: var(--brand-text);}
  .sr-feed-mode .sr-nav-item{color: var(--brand-text);}
  .sr-feed-mode .sr-nav-item:hover{background: color-mix(in srgb, var(--brand-primary), transparent 90%); border-color: color-mix(in srgb, var(--brand-text), transparent 86%);}
  .sr-feed-mode .sr-nav-item.is-active{background: color-mix(in srgb, var(--brand-primary), transparent 86%); border-color: color-mix(in srgb, var(--brand-primary), transparent 72%);}

  /* Keep the phone visually centered in the full viewport (accounting for sidebar) */
  .sr-feed-mode .sr-stage{transform: translateX(calc(-1 * var(--sr-stage-shift))) !important; padding: 0; background: #151e05; justify-content:center;}
}

.sr-sidebar-search{margin-top: 10px;position:relative;}
.sr-sidebar-search-btn{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;background:transparent;padding:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;}
.sr-sidebar-search-btn:focus-visible{box-shadow: var(--sr-focus);outline:none;}
.sr-sidebar-search input{
  width: 100%;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  background: color-mix(in srgb, var(--brand-surface), #000 35%);
  color: var(--brand-text);
  padding: 0 12px 0 42px;
  outline: none;
}
.sr-sidebar-search input::placeholder{color: var(--brand-muted);}

.sr-top-avatar{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  display:block;
  border: 1px solid var(--brand-border);
  background: color-mix(in srgb, var(--brand-surface), #000 25%);
}
.sr-top-avatar img{width:100%;height:100%;object-fit:cover;display:block;}

/* Make the top-right button match TikTok white pills */
.sr-feed-mode .sr-top-actions .sr-btn{
  border: 1px solid var(--brand-border);
  background: color-mix(in srgb, var(--brand-surface), #000 20%);
  color: var(--brand-text);
}
.sr-feed-mode .sr-top-actions .sr-btn:hover{filter: brightness(0.98);}

/* -------------------------------------------------------------------------- */
/* Embed-only layout (upload form in iframe)                                   */
/* -------------------------------------------------------------------------- */

.sr-layout.sr-embed{
  min-height: 0;
  grid-template-columns: 1fr;
}

.sr-layout.sr-embed .sr-sidebar{display:none;}

.sr-layout.sr-embed .sr-main{
  min-height: 0;
  padding: 12px;
}

/* -------------------------------------------------------------------------- */
/* iOS Safari viewport fix (remove bottom whitespace under reels stage)       */
/* -------------------------------------------------------------------------- */

@media (max-width: 900px){
  .sr-feed-mode .sr-layout,
  .sr-feed-mode .sr-main,
  .sr-feed-mode .sr-stage{
    min-height: 100svh;
    height: 100svh;
    background: #000;
  }

  .sr-feed-mode .sr-phone,
  .sr-feed-mode .sr-phone-inner.sr-feed-phone{
    min-height: 100svh;
    height: 100svh;
    max-height: 100svh;
  }
}

@supports (height: 100dvh){
  @media (max-width: 900px){
    .sr-feed-mode .sr-layout,
    .sr-feed-mode .sr-main,
    .sr-feed-mode .sr-stage{
      min-height: 100dvh;
      height: 100dvh;
    }

    .sr-feed-mode .sr-phone,
    .sr-feed-mode .sr-phone-inner.sr-feed-phone{
      min-height: 100dvh;
      height: 100dvh;
      max-height: 100dvh;
    }
  }
}

/* Feed mode (desktop): landscape reels should render in a 16:9 stage (not 9:16 crop). */
@media (min-width: 901px){
  .sr-feed-mode .sr-phone-inner.sr-feed-phone.sr-stage-landscape{
    height: auto;
    max-height: calc(100vh - var(--sr-topbar-h) - (var(--sr-phone-gutter-y) * 2));
    width: min(96vw, calc((100vh - var(--sr-topbar-h) - (var(--sr-phone-gutter-y) * 2)) * 16 / 9));
    aspect-ratio: 16/9;
  }
  .sr-feed-mode .sr-stage.sr-stage-landscape .sr-player .sr-iframe{transform:none;}
}

@supports (height: 100dvh){
  @media (min-width: 901px){
    .sr-feed-mode .sr-phone-inner.sr-feed-phone.sr-stage-landscape{
      max-height: calc(100dvh - var(--sr-topbar-h) - (var(--sr-phone-gutter-y) * 2));
      width: min(96vw, calc((100dvh - var(--sr-topbar-h) - (var(--sr-phone-gutter-y) * 2)) * 16 / 9));
    }
  }
}

/* Mobile: landscape reels should auto-fit the phone screen (full width, 16:9 height). */
@media (max-width: 900px){
  .sr-stage.sr-stage-landscape{--sr-phone-w: 100vw;}
  .sr-phone-inner.sr-stage-landscape{
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: calc(100svh - var(--sr-topbar-h));
    aspect-ratio: 16/9;
    border-radius: 0;
  }

  .sr-feed-mode .sr-phone-inner.sr-feed-phone.sr-stage-landscape{
    width: 100vw;
    max-width: 100vw;
    height: auto;
    min-height: 0;
    max-height: calc(100svh - var(--sr-topbar-h));
    aspect-ratio: 16/9;
  }
}

@supports (height: 100dvh){
  @media (max-width: 900px){
    .sr-phone-inner.sr-stage-landscape,
    .sr-feed-mode .sr-phone-inner.sr-feed-phone.sr-stage-landscape{
      max-height: calc(100dvh - var(--sr-topbar-h));
    }
  }
}

/* Feed mode: landscape should be letterboxed (contain), not cropped/scaled. */
.sr-feed-mode .sr-stage.sr-stage-landscape .sr-video{object-fit:contain;}
.sr-feed-mode .sr-stage.sr-stage-landscape .sr-player .sr-iframe{transform:none;}

/* iOS installed profile/mobile feed: keep caption/audio above the seek bar. */
@media (max-width: 901px){
  .skylite-reels-app.sr-feed-mode,
  .skylite-reels-root.sr-feed-mode,
  .sr-feed-mode,
  .sr-feed{
    --sr-mobile-feed-overlay-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
    --sr-mobile-feed-seek-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    --sr-mobile-feed-rail-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  }

  .sr-feed-mode .sr-reel-page > .sr-reel-overlay,
  .sr-feed .sr-reel-page > .sr-reel-overlay,
  .sr-reel-page > .sr-reel-overlay{
    left: 12px !important;
    right: 28% !important;
    bottom: var(--sr-mobile-feed-overlay-bottom) !important;
    z-index: 12 !important;
    padding: 10px 10px 14px !important;
    box-sizing: border-box !important;
  }

  .sr-reel-page > .sr-reel-overlay .sr-reel-audio{
    display: block !important;
    margin-top: 10px !important;
    line-height: 1.25 !important;
  }

  .sr-feed-mode .sr-reel-page > .sr-seek,
  .sr-feed .sr-reel-page > .sr-seek,
  .sr-reel-page > .sr-seek{
    bottom: var(--sr-mobile-feed-seek-bottom) !important;
    z-index: 8 !important;
    padding-bottom: 4px !important;
  }

  .sr-feed-mode .sr-reel-actions-wrap.sr-reel-actions-rail-wrap,
  .sr-feed .sr-reel-actions-wrap.sr-reel-actions-rail-wrap,
  .sr-reel-actions-wrap.sr-reel-actions-rail-wrap{
    --sr-rail-extra-bottom: var(--sr-mobile-feed-rail-bottom) !important;
    right: calc(8px + env(safe-area-inset-right, 0px)) !important;
    z-index: 13 !important;
  }
}

@media (display-mode: standalone) and (max-width: 901px){
  .skylite-reels-app.sr-feed-mode,
  .skylite-reels-root.sr-feed-mode,
  .sr-feed-mode,
  .sr-feed{
    --sr-mobile-feed-overlay-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
    --sr-mobile-feed-seek-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    --sr-mobile-feed-rail-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  }
}