/* Product rooms share the feed's paper, ink and accent palette. */
/* Search has one scroll surface and includes products without a video. */
#search-results { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; padding: 28px 4px 32px; color: var(--ink, #18191e); }
body.searching .layout { grid-template-columns: 190px minmax(0, 1fr); }
body.searching .detail-panel, body.searching .feed-tabs, body.searching .feed-browser-controls { display: none; }
.search-results-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 28px; }
.search-results-heading h1 { flex: 1 1 100%; font-size: 25px; line-height: 1.5; margin: 0; }
.search-results-heading h1 span { color: #927132; overflow-wrap: anywhere; }
.search-results-heading p { flex: 1; margin: 0; color: #646774; font-size: 13px; }
#clear-search { min-height: 44px; background: #fff; border: 1px solid #dbdce3; color: #40434d; }
#search-results h2 { font-size: 19px; margin: 25px 0 12px; }
#search-results .product-grid { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
#search-results .room-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
#search-results .room-card h3 { margin: 10px 0 5px; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.room-quick-actions a.room-product-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; min-height: 44px; text-align: center; }
.room-details-button { padding: 8px 0; color: #715827; text-decoration: underline; background: transparent; min-height: 44px; }
@media (min-width: 721px) and (max-width: 970px) { body.searching .layout { grid-template-columns: 78px minmax(0, 1fr); } }
@media (max-width: 720px) {
  #search-results { height: 100%; padding: 22px 16px 30px; background: var(--paper, #f5f5f7); }
  .search-results-heading h1 { font-size: 23px; }
  #search-results .product-grid { grid-template-columns: 1fr; }
  #search-results .shop-product { display: flex; gap: 14px; align-items: center; }
  #search-results .shop-product img { width: 100px; height: 110px; margin: 0; flex-shrink: 0; }
  #search-results .shop-product > div { min-width: 0; }
  #search-results .shop-product a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
  #search-results .shop-product h3 { font-size: 15px; overflow-wrap: anywhere; }
}
body.in-room .feed-tabs,
body.in-room #feed,
body.in-room #discovery,
body.in-room #rooms-view,
body.in-room .feed-browser-controls {
  display: none !important;
}

#rooms-view,
#room-view {
  min-width: 0;
  min-height: 0;
  color: var(--ink, #18191e);
  scrollbar-width: thin;
  scrollbar-color: #d4d4dc transparent;
  overscroll-behavior-y: contain;
}

#rooms-view {
  flex: 1;
  overflow-y: auto;
  padding: 28px 2px 30px;
}

.rooms-heading { margin-block-end: 22px; }
.rooms-heading h1 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.4;
}
.rooms-heading p {
  max-width: 50ch;
  margin: 0;
  color: #6f727e;
  font-size: 14px;
  line-height: 1.8;
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: 18px;
  align-items: start;
}
.room-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-align: start;
  color: var(--ink, #18191e);
  background: #fff;
  border: 1px solid var(--line, #e7e7eb);
  border-radius: 20px;
  box-shadow: 0 5px 20px #20203005;
}
.room-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #f0f0f3;
  border-block-end: 1px solid #ededf1;
}
.room-card-body { display: block; width: 100%; padding: 17px; }
.room-card-status,
.room-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid #f4d6cd;
  border-radius: 7px;
  color: #a13b29;
  background: #fff2eb;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}
.room-card h2 {
  margin: 12px 0 5px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.room-card p {
  margin: 0;
  color: #6f727e;
  font-size: 13px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.room-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-block-start: 17px;
  padding-block-start: 13px;
  border-block-start: 1px solid #eeeeF2;
  color: #c63b29;
  font-size: 13px;
  font-weight: 600;
}
.room-card-cta svg { width: 18px; height: 18px; }

#room-view {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  padding: 26px 2px 24px;
}
.room-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.room-back,
.room-share {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  color: #454752;
  background: #fff;
  border: 1px solid var(--line, #e7e7eb);
  border-radius: 12px;
  font-size: 12px;
}
.room-back svg,
.room-share svg { width: 19px; height: 19px; }
.room-heading { flex: 1; min-width: 0; }
.room-heading h1 {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 23px);
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.room-heading p {
  margin: 4px 0 0;
  color: #737682;
  font-size: 12px;
  line-height: 1.6;
}
.room-player-stage {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid #e7e7ed;
  border-radius: 22px;
  background: #eaeaf0;
}
.room-player-shell {
  position: relative;
  isolation: isolate;
  width: min(100%, 430px);
  aspect-ratio: 9 / 16;
  max-height: min(64dvh, 760px);
  overflow: hidden;
  border-radius: 15px;
  background: #18191e;
  box-shadow: 0 9px 28px #14142618;
}
.room-player-shell .room-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #18191e;
}
.room-player-shell .room-status {
  position: absolute;
  z-index: 2;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  max-width: calc(100% - 28px);
  background: #fff8f1f5;
}
.room-video-controls {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 25px 13px 12px;
  color: #fff;
  background: linear-gradient(transparent, #111217a6);
}
.room-video-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid #ffffff40;
  border-radius: 11px;
  color: #fff;
  background: #202126b3;
  font-size: 12px;
}
.room-video-controls svg { width: 20px; height: 20px; }
.room-play-overlay {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: max-content;
  max-width: calc(100% - 36px);
  min-width: 64px;
  min-height: 64px;
  padding: 15px 20px;
  transform: translate(-50%, -50%);
  border: 1px solid #ffffff80;
  border-radius: 18px;
  color: #fff;
  background: #1b1d26d9;
  box-shadow: 0 4px 24px #0003;
  font-size: 13px;
  font-weight: 500;
}
.room-player-shell .room-play-overlay:active:not(:disabled) {
  transform: translate(-50%, -50%) scale(.97);
}
.room-play-overlay svg { flex-shrink: 0; width: 25px; height: 25px; }
.room-context {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line, #e7e7eb);
  border-radius: 17px;
  background: #fff;
}
.room-context > div { flex: 1 1 180px; min-width: 0; }
.room-context h2 {
  flex: 1 1 100%;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.room-context p {
  flex: 1 1 180px;
  margin: 5px 0 0;
  color: #6f727e;
  font-size: 13px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.room-product-button,
.room-quick-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--accent, #f04b37);
  border-radius: 11px;
  color: #fff;
  background: var(--accent, #f04b37);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.room-product-button svg,
.room-quick-actions svg { flex-shrink: 0; width: 19px; height: 19px; }
.room-quick-actions { display: none; }

/* This is a replay entry point, so the marker intentionally stays still. */
.room-player-shell:not(.paused) .room-play-overlay{display:none}
.room-player-shell .progress{z-index:5;bottom:7px;left:12px;width:calc(100% - 24px)}
.room-video-controls{padding-bottom:22px}
.video-wrap.paused .play-state{pointer-events:auto;z-index:3}
.video-wrap:not(.paused) .play-state{visibility:hidden}
.room-quick-actions{display:flex;gap:10px;flex-shrink:0;padding-bottom:14px}
.room-details-note{flex-basis:100%;font-size:12px;color:#757783}
.feed-browser-controls{align-items:center;font-size:12px;color:#777985;flex-wrap:wrap;gap:7px}
.feed-browser-controls small{font-size:11px}
#search-toggle{display:grid;place-items:center;padding:2px;background:none;flex-shrink:0}
.room-player-shell:fullscreen{width:100%;height:100%;max-height:none;border-radius:0;aspect-ratio:auto}
.room-player-shell.buffering::after,.video-wrap.buffering::after{content:'';position:absolute;top:46%;left:46%;width:28px;height:28px;border:3px solid #ffffff60;border-top-color:#fff;border-radius:50%;pointer-events:none;animation:room-buffer .9s linear infinite}
@keyframes room-buffer{to{transform:rotate(360deg)}}
.enter-room {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin-block-end: 13px;
  padding: 10px 12px;
  border: 1px solid #ffffff52;
  border-radius: 12px;
  color: #fff;
  background: #29222cf0;
  box-shadow: 0 5px 18px #0002;
  text-align: start;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  backdrop-filter: blur(10px);
}
.enter-room .room-dot {
  display: block;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff917e;
  box-shadow: 0 0 0 4px #ff917e1f;
}
.enter-room-copy { flex: 1; min-width: 0; }
.enter-room strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.enter-room small {
  display: block;
  margin-block-start: 2px;
  color: #e5d9da;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
}
.enter-room > svg,
.enter-room > [data-icon] { flex: 0 0 auto; margin-inline-start: auto; }
.enter-room svg { width: 19px; height: 19px; }
.video-wrap:has(.enter-room) .video-shade {
  inset-block-start: 60%;
  background: linear-gradient(transparent, #000b);
}

.feed-browser-controls {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  gap: 10px;
  padding: 0 0 16px;
}
.feed-browser-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid #e0e0e7;
  border-radius: 10px;
  color: #595c67;
  background: #fff;
  font-size: 12px;
}
.feed-browser-controls svg { width: 17px; height: 17px; }
.feed-browser-controls button:disabled { cursor: default; opacity: .45; }
.player-notice {
  position: absolute;
  z-index: 4;
  inset-inline: 16px;
  inset-block-start: 36%;
  padding: 16px;
  border: 1px solid #ffffff40;
  border-radius: 13px;
  color: #fff;
  background: #1b1d26f2;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.player-notice p { display: block; margin: 0 0 10px; color: inherit; }
.player-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-block-start: 8px;
  padding: 9px 16px;
  border: 1px solid #fff5;
  border-radius: 9px;
  color: #202128;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
}

@media (hover: hover) {
  .room-card:hover { border-color: #d3d3dc; box-shadow: 0 9px 25px #2020300c; transform: translateY(-3px); }
  .room-back:hover, .room-share:hover, .feed-browser-controls button:not(:disabled):hover { background: #f0f0f5; border-color: #d4d4dd; }
  .room-product-button:hover, .room-quick-actions button:first-child:hover { background: #d83f2c; border-color: #d83f2c; }
  .enter-room:hover { background: #3b2a31; border-color: #ffb4a7; }
  .room-video-controls button:hover { background: #393b45; }
}

@media (min-width: 721px) and (max-width: 970px) {
  .room-toolbar { gap: 8px; }
  .room-heading h1 { font-size: 17px; }
  .room-player-stage { padding: 10px; border-radius: 18px; }
  .room-context { padding: 14px; }
  .room-grid { gap: 14px; }
}

@media (max-width: 720px) {
  body.in-room { background: var(--paper, #f5f5f7); }
  .layout main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .navigation { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .navigation .nav-primary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .navigation .nav-item,
  html[dir=ltr] .navigation .nav-item {
    width: 100%; min-width: 0; max-width: 100%; height: 54px;
    padding: 5px 3px; gap: 3px; margin: 0; overflow: hidden;
  }
  .navigation .nav-item > span:last-child,
  html[dir=ltr] .navigation .nav-item > span:last-child {
    max-width: 100%; font-size: 9px; line-height: 1.25;
    white-space: normal; overflow-wrap: anywhere; text-align: center;
  }
  #rooms-view { padding: 24px 16px 28px; background: var(--paper, #f5f5f7); }
  .rooms-heading { margin-block-end: 20px; }
  .rooms-heading h1 { font-size: 26px; }
  .rooms-heading p { font-size: 13px; }
  .room-grid { grid-template-columns: 1fr; gap: 16px; }
  .room-card > img { aspect-ratio: 4 / 3; max-height: 280px; }
  .room-card-body { padding: 17px; }
  .room-card h2 { font-size: 18px; }
  #room-view { height: 100%; gap: 14px; padding: 16px 12px 0; background: var(--paper, #f5f5f7); }
  .room-toolbar { gap: 9px; }
  .room-back, .room-share { min-width: 44px; padding: 9px; }
  .room-heading h1 { font-size: 17px; }
  .room-heading p { font-size: 11px; margin-block-start: 3px; }
  .room-player-stage { padding: 0; border-radius: 16px; border-color: #dddde5; }
  .room-player-shell { width: 100%; max-height: max(240px, calc(100dvh - 292px)); border-radius: 15px; box-shadow: none; }
  .room-player-shell .room-status { inset-block-start: 11px; inset-inline-start: 11px; }
  .room-video-controls { padding: 23px 10px 10px; }
  .room-context { padding: 15px; gap: 8px; }
  .room-context h2 { font-size: 17px; }
  .room-context p { font-size: 12px; }
  .room-product-button { width: 100%; margin-block-start: 3px; }
  .room-quick-actions {
    position: sticky;
    z-index: 5;
    inset-block-end: 0;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 0 -12px;
    padding: 10px 12px 12px;
    border-block-start: 1px solid #e6e6ed;
    background: #f5f5f7f5;
    backdrop-filter: blur(12px);
  }
  .room-quick-actions button { padding: 10px 7px; min-width: 0; font-size: 12px; }
  .room-quick-actions button + button { color: #30323d; background: #fff; border-color: #dddde6; }
  .enter-room { min-height: 50px; margin-block-end: 11px; padding: 9px 11px; }
  .video-wrap:has(.enter-room) .video-shade { inset-block-start: 46%; }
  .feed-browser-controls { display: none; }
  .player-notice { inset-inline: 12px; padding: 14px; font-size: 12px; }
}

@media (max-width: 360px) {
  .room-toolbar { gap: 7px; }
  .room-heading h1 { font-size: 15px; }
  .room-back, .room-share { padding-inline: 7px; font-size: 11px; }
  .room-heading p { font-size: 10px; }
  #rooms-view { padding-inline: 12px; }
  .rooms-heading h1 { font-size: 23px; }
  .room-card-body { padding: 15px; }
  .room-video-controls button { padding-inline: 9px; font-size: 11px; }
  .enter-room { gap: 8px; font-size: 12px; }
}

/* Reserve a separate rail so language wrapping cannot cover buying/room controls. */
@media (max-width: 720px) {
  .clip .video-bottom { left: 14px; right: 76px; }
  .clip .actions { right: 12px; width: 48px; }
  .clip .action { min-width: 44px; min-height: 58px; }
  .clip .action .circle { width: 44px; height: 44px; }
  .clip .video-bottom h1 { max-width: 100%; font-size: 16px; }
  .clip .enter-room { padding: 9px 10px; }
  .clip .video-product strong { overflow-wrap: anywhere; }
  .clip .frame-toggle { width: 44px; height: 44px; top: 106px; }
  .clip .volume { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  #rooms-view, #room-view { scroll-behavior: auto; }
  .room-card, .room-card *, .enter-room, .enter-room *,
  .room-toolbar button, .room-video-controls button, .room-product-button,
  .room-quick-actions button, .room-play-overlay, .feed-browser-controls button,
  .player-retry { animation: none !important; transition: none !important; }
  .room-card:hover, .room-card:active:not(:disabled), .enter-room:active:not(:disabled) { transform: none; }
  .room-player-shell .room-play-overlay:active:not(:disabled) { transform: translate(-50%, -50%); }
}

/* Reserve the room's first screen for playback and its two actions. */
#room-view {
  height: 100%;
  gap: 10px;
  padding: 18px 2px 10px;
  overflow-x: hidden;
}
.room-toolbar { min-height: 48px; }
.room-player-stage {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 8px;
  container-type: size;
}
.room-player-shell {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 720 / 1264;
}
@supports (width: 1cqh) {
  .room-player-shell {
    width: min(100cqw, calc(100cqh * 720 / 1264));
    height: min(100cqh, calc(100cqw * 1264 / 720));
  }
}
.room-video-controls { gap: 6px; padding-inline: 8px; }
.room-video-controls button { flex: 0 0 44px; padding-inline: 8px; }
.room-context {
  display: block;
  padding: 9px 13px;
  border-radius: 13px;
}
.room-context h2 { font-size: 15px; line-height: 1.4; }
.room-context p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-block-start: 3px;
  font-size: 12px;
  line-height: 1.5;
}
.room-context .room-details-note {
  margin-block-start: 3px;
  font-size: 10px;
  line-height: 1.5;
}
.room-quick-actions {
  position: sticky;
  z-index: 6;
  inset-block-end: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
  margin: 0;
  padding: 5px 0 0;
  background: var(--paper, #f5f5f7);
}
.room-quick-actions button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 9px 10px;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.room-quick-actions .room-ask { color: #30323d; background: #fff; border-color: #dddde6; }

@media (max-width: 720px) {
  #room-view { gap: 9px; padding: 12px 12px 0; }
  .room-toolbar { min-height: 46px; }
  .room-player-stage { min-height: 300px; padding: 7px; }
  .room-context { padding: 8px 11px; }
  .room-context h2 { font-size: 15px; }
  .room-context p { font-size: 11px; }
  .room-quick-actions {
    margin-inline: -12px;
    padding: 9px 12px 10px;
    border-block-start: 1px solid #e6e6ed;
    background: #f5f5f7fa;
    box-shadow: 0 -4px 12px #25253605;
  }
  .room-quick-actions button { margin: 0; padding-inline: 6px; }
}

@media (max-width: 360px) {
  .room-heading h1 { font-size: 15px; }
  .room-quick-actions button { gap: 5px; font-size: 11px; }
  .room-quick-actions svg { width: 17px; height: 17px; }
}