/* Keep the reading navigation flush with the scroll viewport on every device. */
#app > div.customer-share-page { padding-top: 0 !important; }
.customer-share-page .customer-story-nav { top: 0 !important; margin-top: 0 !important; border-radius: 0 0 12px 12px; background: #fff; }
.customer-share-page .customer-share-shell > #customer-share-videos { order: 95 !important; }
.customer-video-section { min-width: 0; overflow: hidden; }
.customer-video-marquee { overflow: hidden; padding: 4px 0; touch-action: pan-y pinch-zoom; cursor: grab; user-select: none; }
.customer-video-marquee.is-dragging, .customer-video-marquee.is-dragging .customer-video-card { cursor: grabbing; }
.customer-video-cover img { -webkit-user-drag: none; }
.customer-video-resume { border: 1px solid #d5e3ef; border-radius: 8px; background: #fff; color: #183b5d; padding: 6px 12px; cursor: pointer; }
.customer-video-track { display: flex; gap: 16px; width: max-content; animation: customer-video-drift 72s linear infinite; }
.customer-video-marquee:hover .customer-video-track, .customer-video-marquee:focus-within .customer-video-track, .customer-video-marquee:active .customer-video-track, .customer-video-marquee.is-still .customer-video-track { animation-play-state: paused; }
.customer-video-card { flex: 0 0 280px; width: 280px; padding: 0; text-align: left; border: 1px solid #d5e3ef; background: #fff; border-radius: 16px; overflow: hidden; color: #183b5d; cursor: pointer; }
.customer-video-cover { position: relative; aspect-ratio: 16/9; background: #0c2b46; }
.customer-video-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.customer-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 48px; height: 48px; background: #002c53b8; border: 1px solid #ffffffba; border-radius: 50%; color: #fff; }
.customer-video-cover > small { position: absolute; right: 9px; bottom: 9px; color: #fff; background: #0009; padding: 2px 6px; border-radius: 4px; }
.customer-video-caption { padding: 12px; display: grid; gap: 5px; }
.customer-video-caption > small { color: #637a8e; font-size: 12px; }
.customer-video-caption > b { font-size: 16px; }
@keyframes customer-video-drift { to { transform: translateX(calc(-50% - 8px)); } }
.customer-video-dialog { position: fixed; inset: 0; z-index: 200000; background: #080b10; color: #fff; height: 100vh; height: 100dvh; isolation: isolate; }
.customer-video-toolbar { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; justify-content: flex-end; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; background: linear-gradient(#000b,transparent); pointer-events: none; }
.customer-video-toolbar > span { font-size: 13px; }
.customer-video-toolbar button { pointer-events: auto; color: #fff; background: #ffffff26; border: 1px solid #ffffff66; border-radius: 50%; width: 44px; height: 44px; font-size: 28px; padding: 0; }
.customer-video-feed { height: 100%; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; touch-action: none; }
.customer-video-feed::-webkit-scrollbar { display: none; }
.customer-video-slide { height: 100%; position: relative; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; padding: calc(68px + env(safe-area-inset-top)) 12px calc(62px + env(safe-area-inset-bottom)); }
.customer-video-slide video { display: block; width: 100%; max-width: 1100px; min-height: 0; flex: 1; object-fit: contain; }
.customer-video-controls { width: min(100%,1100px); padding: 10px 4px 0; flex-shrink: 0; touch-action: none; }
.customer-video-progress { display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; font-size: 12px; }
.customer-video-progress input[type=range] { flex: 1; min-width: 0; height: 36px; margin: 0; padding: 0; accent-color: #fff; cursor: pointer; touch-action: none; border: 0; background: transparent; }
.customer-video-play-actions { display: flex; align-items: center; gap: 16px; min-height: 36px; }
.customer-video-play-actions button { color: #fff; border: 1px solid #ffffff55; background: #ffffff15; padding: 6px 14px; font-size: 13px; }
.customer-video-play-actions button:last-child { margin-left: auto; }
.customer-video-play-actions small { color: #cbd6df; }
.customer-video-library-row { padding: 18px 0; border-bottom: 1px solid #d8e5ef; }
.customer-video-library-row > img { display: block; width: 180px; height: 105px; object-fit: cover; margin-bottom: 12px; border-radius: 8px; }
.customer-video-public-choice { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.customer-video-playlist-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #e5edf3; }
.customer-video-playlist-row > span { flex: 1; }
.customer-video-playlist-row small { display: block; color: #687e90; }
.customer-video-info { width: min(100%,1100px); padding: 14px 4px 0; box-sizing: border-box; }
.customer-video-info h2 { color: #fff; font-size: 20px; margin: 6px 0; }
.customer-video-info small, .customer-video-info p { color: #c0cad4; font-size: 13px; margin: 4px 0; }
.customer-video-info > span { display: block; }
.customer-video-info button { background: #fff; color: #0b375d; margin-top: 8px; }
.customer-video-stepper { position: absolute; inset: auto 0 0; display: flex; justify-content: center; gap: 24px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: #080b10; }
.customer-video-stepper button { color: #fff; background: #ffffff12; border: 1px solid #ffffff55; padding: 7px 20px; }
.customer-video-stepper button:disabled { opacity: .3; }
@media (max-width:820px) { .customer-video-card { flex-basis: 232px; width: 232px; } .customer-video-info h2 { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .customer-video-track { animation: none; } .customer-video-marquee { overflow-x: auto; } }
.customer-video-slide {padding-bottom:calc(124px + env(safe-area-inset-bottom));}
.customer-video-social-bar {position:absolute;bottom:calc(52px + env(safe-area-inset-bottom));left:0;right:0;display:flex;justify-content:center;gap:8px;padding:6px 12px;background:#080b10;}
.customer-video-social-bar button {flex:1;max-width:130px;border:0;background:transparent;color:white;font-size:12px;min-height:48px;}
.customer-video-social-bar button span {display:block;font-size:25px;line-height:27px;}
.customer-video-social-bar button[aria-pressed=true] {color:#ff5d65;}
.customer-video-social-error {position:absolute;bottom:108px;left:12px;color:#ffdfb4;font-size:12px;}
.customer-video-sheet-backdrop {position:absolute;inset:0;background:#0008;display:flex;align-items:flex-end;z-index:10;}
.customer-video-sheet {background:#fff;color:#17334b;width:100%;max-height:75dvh;overflow:auto;border-radius:18px 18px 0 0;padding:20px 18px calc(24px + env(safe-area-inset-bottom));box-sizing:border-box;}
.customer-video-sheet header {display:flex;align-items:center;justify-content:space-between;}
.customer-video-sheet h3 {margin:0;}
.customer-video-sheet p {font-size:14px;line-height:1.5;}
.customer-video-sheet button {background:#0b65ab;color:white;border:0;padding:10px 18px;border-radius:8px;}
.customer-video-sheet input,.customer-video-sheet textarea {display:block;width:100%;box-sizing:border-box;font:inherit;padding:12px;border:1px solid #bccddd;margin:12px 0;background:#fff;color:#18334b;}
.customer-video-comment {padding:12px;border-bottom:1px solid #dee6ee;white-space:pre-wrap;overflow-wrap:anywhere;}

/* Keep the video actions on one stable line through touch and drag states. */
.customer-video-actions { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.customer-video-actions > .customer-video-resume { flex: 0 0 auto; width: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; text-decoration: underline; }
.customer-video-actions > .customer-video-resume:disabled { opacity: .5; cursor: default; }