/* Isolated styles for local circle-search demo content. */
.circle-scenario-card { cursor: pointer; }
.circle-scenario-cover { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #eee; }
.circle-scenario-cover.circle-scenario-photo-window { aspect-ratio: 4 / 5; }
.circle-scenario-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.circle-scenario-photo-window { position: relative; overflow: hidden; }
.circle-scenario-photo-window > img { position: absolute; left: 0; top: -29%; width: 100%; height: auto; max-width: none; object-fit: initial; }
.circle-scenario-cover.circle-scenario-photo-window > img { width: 100%; height: auto; }
.circle-scenario-play-indicator { position: absolute; right: 9px; bottom: 9px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0,0,0,.52); font-size: 12px; }
.circle-scenario-avatar { display: grid; place-items: center; width: 21px; height: 21px; margin-right: 5px; border-radius: 50%; color: #6f473d; background: linear-gradient(145deg,#ffe4dc,#e5d0c5); font-size: 10px; font-style: normal; font-weight: 700; }
.circle-scenario-gallery { height: min(125vw, 506px); max-height: 506px; background: #f3f1ef; }
.circle-scenario-note-image { display: block; }
.circle-scenario-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #161616; }
.circle-scenario-video-cover img { object-fit: cover; }
.circle-scenario-detail-avatar { display: grid; place-items: center; width: 100%; height: 100%; color: #6f473d; background: linear-gradient(145deg,#ffe4dc,#e5d0c5); font-size: 13px; font-weight: 700; }
.comment-row[hidden] { display: none; }

.note-page[data-circle-scenario-applied] > .note-floating-agent {
  position: relative; left: auto; bottom: auto; z-index: 1;
  width: calc(100% - 34px); max-width: none; margin: 0 17px 18px;
}

/* Video layout is shared with the base page in styles.css. Keep source media
   filling that stage so scenario-specific styles cannot restore a small player. */
.video-page[data-circle-scenario-applied] .circle-scenario-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-page[data-circle-scenario-applied] .circle-video-action-rail { display: none; }
.circle-video-toast { position: absolute; z-index: 9; left: 50%; bottom: 142px; transform: translateX(-50%); padding: 8px 14px; border-radius: 16px; background: #000b; color: #fff; font-size: 12px; white-space: nowrap; }