/* FineME v318 — immersive video feed, optional post titles, commerce-to-chat product tags, Wow-first reactions. */

/* --------------------------------------------------------------------------
   Video feed — desktop scales with the viewport instead of inheriting the old
   548 px social-card width. Keep the FineME app bar, but let the content area
   behave like a dedicated short-video surface.
   -------------------------------------------------------------------------- */
.fm-v318.fm-video-page{
  background:#07090f!important;
}
.fm-v318.fm-video-page .fm-appbar{
  border-bottom-color:rgba(221,226,240,.7)!important;
  box-shadow:0 1px 0 rgba(32,42,72,.04)!important;
}
.fm-v318.fm-video-page .fm-page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0 18px 28px!important;
}
.fm-v318.fm-video-page .video-phase5-toolbar.fm-video-toolbar-v277{
  width:min(1660px,calc(100vw - 36px))!important;
  min-height:64px!important;
  margin:0 auto!important;
  padding:9px 2px 8px!important;
  position:sticky!important;
  top:0!important;
  z-index:31!important;
  background:rgba(7,9,15,.92)!important;
  backdrop-filter:blur(18px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(130%)!important;
}
.fm-v318.fm-video-page .fm-video-title-v277 h1{color:#fff!important;font-size:21px!important}
.fm-v318.fm-video-page .fm-video-title-v277 small{color:#9ca7bb!important;font-size:11px!important}
.fm-v318.fm-video-page .fm-video-title-mark{
  width:38px!important;height:38px!important;border-radius:13px!important;
  background:linear-gradient(145deg,#6b70ff,#6a88ff 50%,#ef63b4)!important;
  box-shadow:0 9px 26px rgba(105,112,255,.28)!important;
}
.fm-v318.fm-video-page .fm-video-tabs-v277{
  background:rgba(21,24,35,.96)!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.18)!important;
}
.fm-v318.fm-video-page .fm-video-tabs-v277 a{color:#b6bfd0!important;font-size:11.5px!important;min-height:36px!important}
.fm-v318.fm-video-page .fm-video-tabs-v277 a.active{color:#fff!important;background:#30364a!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important}
.fm-v318.fm-video-page .fm-video-tabs-v277 .video-phase5-create{background:linear-gradient(135deg,#675cff,#7955ed 58%,#ee62ac)!important}

.fm-v318.fm-video-page .shadow-video-layout.fm-video-layout-v277{
  width:min(1660px,calc(100vw - 36px))!important;
  max-width:none!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 252px!important;
  gap:22px!important;
  align-items:start!important;
  justify-content:stretch!important;
}
.fm-v318.fm-video-page .shadow-video-stream.fm-video-stream-v277{
  width:100%!important;
  height:calc(100dvh - 82px)!important;
  min-height:520px!important;
  max-height:none!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:24px!important;
  background:#020307!important;
  box-shadow:0 28px 86px rgba(0,0,0,.34)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scroll-snap-type:y mandatory!important;
  overscroll-behavior-y:contain!important;
}
.fm-v318 .fm-video-card-v277,
.fm-v318 .fm-video-card-v278{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  background:#020307!important;
}
.fm-v318 .fm-video-card-v277 .shadow-video-media,
.fm-v318 .fm-video-card-v278 .shadow-video-media{
  inset:0!important;
  background:#020307!important;
}
.fm-v318 .fm-video-card-v277 .shadow-video-media>video,
.fm-v318 .fm-video-card-v278 .shadow-video-media>video{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
}
/* The ambient layer fills empty pillar-box space without cropping the real video. */
.fm-v318 .fm-video-ambient{
  inset:-12%!important;
  opacity:.76!important;
  filter:blur(42px) saturate(122%)!important;
  background:
    radial-gradient(circle at 24% 20%,rgba(97,105,255,.22),transparent 34%),
    radial-gradient(circle at 76% 76%,rgba(239,92,172,.17),transparent 38%),
    #030409!important;
}
.fm-v318 .fm-video-card-v277 .shadow-video-gradient,
.fm-v318 .fm-video-card-v278 .shadow-video-gradient{
  inset:40% 0 0!important;
  background:linear-gradient(180deg,transparent 0%,rgba(2,3,7,.08) 18%,rgba(2,3,7,.42) 56%,rgba(2,3,7,.94) 100%)!important;
}
.fm-v318 .fm-video-card-v277 .shadow-video-caption,
.fm-v318 .fm-video-card-v278 .shadow-video-caption{
  left:28px!important;
  right:112px!important;
  bottom:25px!important;
  max-width:min(720px,66%)!important;
  gap:7px!important;
}
.fm-v318 .fm-video-card-v277 .shadow-video-caption h2,
.fm-v318 .fm-video-card-v278 .shadow-video-caption h2{
  font-size:clamp(18px,1.32vw,25px)!important;
  line-height:1.28!important;
  -webkit-line-clamp:2!important;
}
.fm-v318 .fm-video-card-v277 .shadow-video-caption p,
.fm-v318 .fm-video-card-v278 .shadow-video-caption p{
  font-size:clamp(12px,.9vw,15px)!important;
  line-height:1.5!important;
  -webkit-line-clamp:3!important;
  max-width:680px!important;
}
.fm-v318 .fm-video-card-v277 .shadow-video-author-line,
.fm-v318 .fm-video-card-v278 .shadow-video-author-line,
.fm-v318 .fm-video-card-v277 .shadow-video-author-line a,
.fm-v318 .fm-video-card-v278 .shadow-video-author-line a{font-size:12px!important}
.fm-v318 .fm-video-card-v277 .shadow-video-open-post,
.fm-v318 .fm-video-card-v278 .shadow-video-open-post{font-size:11px!important}

.fm-v318 .fm-video-card-v277 .shadow-video-actions,
.fm-v318 .fm-video-card-v278 .shadow-video-actions{
  right:20px!important;
  bottom:24px!important;
  width:76px!important;
  padding:9px 7px 10px!important;
  gap:9px!important;
  border-radius:30px!important;
  background:linear-gradient(180deg,rgba(12,15,23,.28),rgba(5,7,12,.62))!important;
  border:1px solid rgba(255,255,255,.11)!important;
  backdrop-filter:blur(20px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(125%)!important;
}
.fm-v318 .fm-video-card-v277 .shadow-video-action,
.fm-v318 .fm-video-card-v278 .shadow-video-action{
  width:60px!important;
  min-height:57px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.085)!important;
}
.fm-v318 .fm-video-card-v277 .shadow-video-action>span,
.fm-v318 .fm-video-card-v278 .shadow-video-action>span{font-size:27px!important}
.fm-v318 .fm-video-card-v277 .shadow-video-action>b,
.fm-v318 .fm-video-card-v278 .shadow-video-action>b{font-size:10px!important}
.fm-v318 .fm-video-card-v277 .shadow-video-action small,
.fm-v318 .fm-video-card-v278 .shadow-video-action small{font-size:8.5px!important;color:#fff!important}
.fm-v318 .fm-video-card-v277 .shadow-video-avatar .fm-avatar,
.fm-v318 .fm-video-card-v278 .shadow-video-avatar .fm-avatar{width:48px!important;height:48px!important}

/* Right guide remains useful on ultra-wide displays but no longer dictates video size. */
.fm-v318.fm-video-page .fm-video-side-guide{
  position:sticky!important;
  top:76px!important;
  width:100%!important;
  padding:18px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:20px!important;
  background:rgba(17,20,30,.92)!important;
  color:#fff!important;
  box-shadow:0 20px 58px rgba(0,0,0,.22)!important;
}
.fm-v318.fm-video-page .fm-video-side-guide strong{color:#fff!important;font-size:14px!important}
.fm-v318.fm-video-page .fm-video-side-guide p{color:#9ea9ba!important;font-size:11.5px!important;line-height:1.65!important}

/* --------------------------------------------------------------------------
   Product tag v318 — link product or direct-to-chat product. Compact enough
   for video, but allows a three-line title and seller CTA.
   -------------------------------------------------------------------------- */
.fm-v318 .fm-product-interest-form{margin:0!important;padding:0!important;display:block!important}
.fm-v318 .fm-product-interest-form>button{font:inherit;cursor:pointer;text-align:left!important}
.fm-v318 .shadow-video-product{
  width:min(360px,100%)!important;
  min-height:62px!important;
  grid-template-columns:52px minmax(0,1fr) auto!important;
  gap:9px!important;
  padding:6px 7px!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  background:rgba(9,11,17,.72)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.28)!important;
  color:#fff!important;
}
.fm-v318 button.shadow-video-product{appearance:none;width:min(360px,100%)!important}
.fm-v318 .shadow-video-product>img{width:52px!important;height:52px!important;border-radius:11px!important;object-fit:cover!important}
.fm-v318 .shadow-video-product-copy{gap:1px!important}
.fm-v318 .shadow-video-product-copy small{font-size:8.5px!important;line-height:1.15!important;color:#b8c1cf!important}
.fm-v318 .shadow-video-product-copy strong{
  font-size:11px!important;line-height:1.28!important;
  -webkit-line-clamp:3!important;white-space:normal!important;
}
.fm-v318 .shadow-video-product-copy em{
  display:-webkit-box!important;-webkit-line-clamp:1!important;-webkit-box-orient:vertical!important;overflow:hidden!important;
  font-style:normal!important;font-size:8.2px!important;line-height:1.3!important;color:#aeb8c8!important;
}
.fm-v318 .shadow-video-product>b{min-width:74px!important;min-height:45px!important;padding:5px 8px!important;border-radius:11px!important}
.fm-v318 .shadow-video-product>b span{font-size:11px!important;font-weight:900!important}
.fm-v318 .shadow-video-product>b em{font-size:8px!important}
.fm-v318 .fm-video-product-chat{border:1px solid rgba(127,118,255,.40)!important}
.fm-v318 .fm-video-product-chat>b{background:linear-gradient(135deg,#6b69f6,#805ee8 55%,#ed67ad)!important;color:#fff!important}

/* Feed product tags use the same direct-chat semantics without becoming huge. */
.fm-v318 .fm-post-product .fm-product-interest-form,
.fm-v318 .fm-post-product form{width:100%}
.fm-v318 .fm-post-product button{font:inherit}

/* --------------------------------------------------------------------------
   Wow-first reactions. The legacy Like row can still exist in storage for
   backwards compatibility, but it is not presented as a user-facing action.
   -------------------------------------------------------------------------- */
.fm-v318 .fm-js-reaction:not(.is-active) [data-fm-reaction-emoji],
.fm-v318 .fm-reaction-main-emoji{filter:drop-shadow(0 2px 5px rgba(0,0,0,.18))}
.fm-v318 .fm-js-reaction.is-active{
  color:#7258df!important;
}
.fm-v318 .fm-reaction-picker button[data-fm-reaction-type="wow"]{
  background:linear-gradient(180deg,#f5f1ff,#fff)!important;
  box-shadow:inset 0 0 0 1px rgba(113,88,223,.12)!important;
}
.fm-v318 .fm-reaction-picker button[data-fm-reaction-type="angry"] span{filter:saturate(1.08)}

/* --------------------------------------------------------------------------
   Composer — title is common to every mode and optional. Product entry has
   three explicit paths: saved, manual/direct chat, and external link.
   -------------------------------------------------------------------------- */
.fm-v318 .fm-social-modal.is-composer{width:min(720px,calc(100vw - 24px))!important;max-height:min(92dvh,900px)!important}
.fm-v318 .fm-qc-title-field{
  margin:0 16px 11px!important;
  padding:11px 12px!important;
  border:1px solid #e3e7f0!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#fbfcff,#fff9fc)!important;
}
.fm-v318 .fm-qc-title-field>span{display:flex!important;align-items:center!important;gap:7px!important;font-size:11px!important;font-weight:900!important;color:#4a5872!important}
.fm-v318 .fm-qc-title-field>span small{font-size:9px!important;color:#9aa5b7!important;font-weight:700!important}
.fm-v318 .fm-qc-title-field input{
  width:100%!important;margin-top:6px!important;min-height:43px!important;padding:9px 10px!important;
  border:1px solid #dfe4ee!important;border-radius:11px!important;background:#fff!important;color:#1f2c43!important;
  font:inherit!important;font-size:14px!important;font-weight:750!important;outline:none!important;
}
.fm-v318 .fm-qc-title-field input:focus{border-color:#9b9df7!important;box-shadow:0 0 0 3px rgba(107,105,246,.09)!important}
.fm-v318 .fm-qc-product-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;padding:4px!important}
.fm-v318 .fm-qc-product-tabs button{min-height:38px!important;font-size:11px!important;padding:0 7px!important}
.fm-v318 .fm-qc-product-tabs button.is-active{color:#645ee9!important;box-shadow:0 4px 13px rgba(70,82,136,.10)!important}
.fm-v318 .fm-qc-manual-product-intro{
  display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;
  padding:11px!important;border:1px solid #e0e3fb!important;border-radius:13px!important;
  background:linear-gradient(135deg,#f5f5ff,#fff7fc)!important;color:#293751!important;
}
.fm-v318 .fm-qc-manual-product-intro>span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#fff;font-size:20px;box-shadow:0 5px 15px rgba(83,91,160,.09)}
.fm-v318 .fm-qc-manual-product-intro>div{display:grid;gap:2px}.fm-v318 .fm-qc-manual-product-intro strong{font-size:12px}.fm-v318 .fm-qc-manual-product-intro small{font-size:9.5px;line-height:1.55;color:#78859b}
.fm-v318 .fm-qc-product-manual-start{width:100%;margin-top:8px;min-height:38px;border:1px dashed #a9aaf4;border-radius:11px;background:#fff;color:#655ee9;font:inherit;font-size:11px;font-weight:900;cursor:pointer}
.fm-v318 .fm-qc-product-editor{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)!important;gap:12px!important;padding:12px!important;border-radius:16px!important}
.fm-v318 .fm-qc-product-editor-copy strong{-webkit-line-clamp:3!important}
.fm-v318 .fm-qc-product-fields{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.fm-v318 .fm-qc-product-description-field,
.fm-v318 .fm-qc-product-image-field{grid-column:1/-1!important}
.fm-v318 .fm-qc-product-fields textarea{width:100%;resize:vertical;min-height:70px;border:1px solid #dfe4ee;border-radius:10px;background:#fff;color:#26354f;padding:8px 9px;font:inherit;font-size:11.5px;outline:none}
.fm-v318 .fm-qc-product-fields textarea:focus{border-color:#9ea5f5;box-shadow:0 0 0 3px rgba(102,111,239,.08)}

/* --------------------------------------------------------------------------
   Responsive video sizing. Between laptop and wide desktop, hide the guide
   before shrinking the actual video stage.
   -------------------------------------------------------------------------- */
@media (max-width:1420px){
  .fm-v318.fm-video-page .shadow-video-layout.fm-video-layout-v277{grid-template-columns:minmax(0,1fr)!important;width:min(1260px,calc(100vw - 28px))!important}
  .fm-v318.fm-video-page .fm-video-side-guide{display:none!important}
  .fm-v318.fm-video-page .video-phase5-toolbar.fm-video-toolbar-v277{width:min(1260px,calc(100vw - 28px))!important}
}
@media (max-width:980px) and (min-width:701px){
  .fm-v318.fm-video-page .fm-page{padding:0 10px 20px!important}
  .fm-v318.fm-video-page .shadow-video-layout.fm-video-layout-v277,
  .fm-v318.fm-video-page .video-phase5-toolbar.fm-video-toolbar-v277{width:100%!important}
  .fm-v318.fm-video-page .shadow-video-stream.fm-video-stream-v277{height:calc(100dvh - 86px)!important;min-height:560px!important;border-radius:20px!important}
  .fm-v318 .fm-video-card-v277 .shadow-video-caption,.fm-v318 .fm-video-card-v278 .shadow-video-caption{max-width:72%!important}
}
@media (max-width:700px){
  .fm-v318.fm-video-page{background:#020307!important}
  .fm-v318.fm-video-page .fm-page{width:100%!important;margin:0!important;padding:0 0 calc(70px + env(safe-area-inset-bottom))!important}
  .fm-v318.fm-video-page .video-phase5-toolbar.fm-video-toolbar-v277{
    width:100%!important;height:48px!important;min-height:48px!important;margin:0!important;padding:4px 8px!important;
    top:0!important;background:rgba(3,4,8,.94)!important;border-bottom:1px solid rgba(255,255,255,.07)!important;
  }
  .fm-v318.fm-video-page .fm-video-title-v277{display:none!important}
  .fm-v318.fm-video-page .fm-video-tabs-v277{width:100%!important;justify-content:center!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
  .fm-v318.fm-video-page .fm-video-tabs-v277 a{min-height:36px!important;padding:0 16px!important;color:#afb7c8!important}
  .fm-v318.fm-video-page .fm-video-tabs-v277 a.active{background:rgba(255,255,255,.10)!important;color:#fff!important}
  .fm-v318.fm-video-page .fm-video-tabs-v277 .video-phase5-create{position:absolute!important;right:9px!important;width:36px!important;height:36px!important}
  .fm-v318.fm-video-page .shadow-video-layout.fm-video-layout-v277{width:100%!important;display:block!important}
  .fm-v318.fm-video-page .shadow-video-stream.fm-video-stream-v277{
    width:100vw!important;height:calc(100dvh - 48px - 70px - env(safe-area-inset-bottom))!important;
    min-height:440px!important;max-height:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  }
  .fm-v318 .fm-video-card-v277 .shadow-video-caption,.fm-v318 .fm-video-card-v278 .shadow-video-caption{
    left:12px!important;right:73px!important;bottom:14px!important;max-width:calc(100% - 85px)!important;gap:4px!important;
  }
  .fm-v318 .fm-video-card-v277 .shadow-video-caption h2,.fm-v318 .fm-video-card-v278 .shadow-video-caption h2{font-size:15px!important;line-height:1.3!important}
  .fm-v318 .fm-video-card-v277 .shadow-video-caption p,.fm-v318 .fm-video-card-v278 .shadow-video-caption p{font-size:10.5px!important;line-height:1.42!important;-webkit-line-clamp:2!important}
  .fm-v318 .fm-video-card-v277 .shadow-video-author-line,.fm-v318 .fm-video-card-v278 .shadow-video-author-line,.fm-v318 .fm-video-card-v277 .shadow-video-author-line a,.fm-v318 .fm-video-card-v278 .shadow-video-author-line a{font-size:10px!important}
  .fm-v318 .fm-video-card-v277 .shadow-video-actions,.fm-v318 .fm-video-card-v278 .shadow-video-actions{
    right:5px!important;bottom:11px!important;width:62px!important;padding:5px 4px 6px!important;gap:5px!important;border-radius:25px!important;
  }
  .fm-v318 .fm-video-card-v277 .shadow-video-action,.fm-v318 .fm-video-card-v278 .shadow-video-action{width:50px!important;min-height:47px!important;border-radius:16px!important}
  .fm-v318 .fm-video-card-v277 .shadow-video-action>span,.fm-v318 .fm-video-card-v278 .shadow-video-action>span{font-size:23px!important}
  .fm-v318 .fm-video-card-v277 .shadow-video-avatar .fm-avatar,.fm-v318 .fm-video-card-v278 .shadow-video-avatar .fm-avatar{width:40px!important;height:40px!important}
  .fm-v318 .shadow-video-product, .fm-v318 button.shadow-video-product{
    width:min(270px,calc(100vw - 92px))!important;min-height:48px!important;grid-template-columns:38px minmax(0,1fr) auto!important;gap:6px!important;padding:4px 5px!important;border-radius:13px!important;
  }
  .fm-v318 .shadow-video-product>img{width:38px!important;height:38px!important;border-radius:9px!important}
  .fm-v318 .shadow-video-product-copy small{font-size:7.3px!important}.fm-v318 .shadow-video-product-copy strong{font-size:9.5px!important;-webkit-line-clamp:3!important}.fm-v318 .shadow-video-product-copy em{display:none!important}
  .fm-v318 .shadow-video-product>b{min-width:58px!important;min-height:34px!important;padding:3px 5px!important}.fm-v318 .shadow-video-product>b span{font-size:9px!important}.fm-v318 .shadow-video-product>b em{font-size:6.8px!important}
  .fm-v318 .fm-social-modal.is-composer{width:100vw!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}
  .fm-v318 .fm-qc-title-field{margin:0 12px 9px!important;padding:9px 10px!important}.fm-v318 .fm-qc-title-field input{min-height:40px!important;font-size:13px!important}
  .fm-v318 .fm-qc-product-tabs{grid-template-columns:1fr!important}.fm-v318 .fm-qc-product-tabs button{min-height:36px!important;text-align:left!important;padding:0 11px!important}
  .fm-v318 .fm-qc-product-editor{grid-template-columns:1fr!important;padding:9px!important}
  .fm-v318 .fm-qc-product-fields{grid-template-columns:1fr!important}.fm-v318 .fm-qc-product-description-field,.fm-v318 .fm-qc-product-image-field{grid-column:auto!important}
}
@media (max-width:390px){
  .fm-v318 .shadow-video-product,.fm-v318 button.shadow-video-product{width:min(246px,calc(100vw - 82px))!important}
  .fm-v318 .shadow-video-product>b{min-width:54px!important}
}

/* Direct-to-chat product card uses the same visual card as an external product. */
.fm-v318 button.fm-product-chat-card{
  width:100%!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  border:0!important;
  text-align:left!important;
  font:inherit!important;
  cursor:pointer!important;
  color:inherit!important;
}
.fm-v318 .fm-product-chat-card .fm-social-product-cta{
  background:linear-gradient(135deg,#6c65f4,#7c5ee9 55%,#ed67ad)!important;
  color:#fff!important;
}
.fm-v318 .product-tag-card .fm-product-interest-form{margin-left:auto!important}
.fm-v318 .product-tag-card .fm-product-interest-form .btn{white-space:nowrap!important}

/* Full post page keeps Wow as the primary action while exposing the other reactions. */
.fm-v318 .fm-detail-reactions{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
.fm-v318 .fm-detail-reaction-picker{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fm-v318 .fm-detail-reaction-picker form,.fm-v318 .fm-detail-reaction-main{margin:0}
.fm-v318 .fm-detail-reaction-picker .btn{min-width:44px;padding-inline:10px}
.fm-v318 .fm-detail-reaction-picker .btn.is-active,.fm-v318 .fm-detail-reaction-main .btn.is-active{box-shadow:inset 0 0 0 2px rgba(111,87,225,.28);background:#f3efff;color:#654ddb}
@media(max-width:520px){.fm-v318 .fm-detail-reaction-picker .btn span{display:none}}