/* The watch feed (watch/index.html): full-screen chats, one per screen, snap scrolling. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #120A19; --ink: #2B1B3A; --card: #FFFFFF; --muted: #BBA8C8;
  --pink: #FF5FA2; --pink-deep: #D63F82; --mint: #C9F7D8; --blush: #F3D5E3;
  --bubble: 20px 20px 20px 6px; --bubble-sent: 20px 20px 6px 20px;
  --top: 52px;
}
html, body { height: 100%; background: var(--bg); color: #fff; overflow: hidden; }
body { font-family: Rubik, system-ui, -apple-system, sans-serif; font-size: 15px; -webkit-tap-highlight-color: transparent; }

/* logo and "make your own", over the feed */
.w-top {
  position: fixed; inset: 0 0 auto; z-index: 5; height: var(--top);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 14px; padding-top: env(safe-area-inset-top);
}
.brand { font-family: 'Bagel Fat One', Rubik, sans-serif; font-size: 26px; line-height: 1; color: #fff; text-decoration: none; }
.brand span { color: var(--pink); }
.w-make {
  background: var(--pink); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 8px 13px; border-radius: var(--bubble-sent); box-shadow: 0 3px 0 var(--pink-deep);
}

/* one chat per screen; the browser's own snap scrolling does the swiping */
.feed {
  height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; scrollbar-width: none;
}
.feed::-webkit-scrollbar { display: none; }
.slide {
  height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; gap: 8px;
  padding: calc(var(--top) + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto;
}
.stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.stage canvas { display: block; border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); }
.paused-icon {
  position: absolute; width: 76px; height: 76px; border-radius: 50%; background: rgba(18, 10, 25, .55);
  display: grid; place-items: center; opacity: 0; transform: scale(.7); transition: opacity .15s, transform .15s; pointer-events: none;
}
.paused-icon svg { width: 36px; height: 36px; margin-left: 4px; fill: #fff; }
.is-paused .paused-icon { opacity: 1; transform: none; }

.progress { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); overflow: hidden; flex: none; }
.progress i { display: block; height: 100%; width: 0; background: var(--pink); }

.info { display: flex; align-items: center; gap: 8px; flex: none; min-height: 48px; }
.meta { flex: 1; min-width: 0; }
.meta h2 { font-family: 'Bagel Fat One', Rubik, sans-serif; font-weight: 400; font-size: 19px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta p { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.w-btn {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .12); display: grid; place-items: center; color: #fff;
}
.w-btn svg { width: 22px; height: 22px; fill: #fff; }
.w-btn:active { transform: translateY(2px); }

.w-loading { position: fixed; inset: 45% 0 auto; text-align: center; color: var(--muted); font-size: 16px; }
.w-loading a { color: var(--pink); }
.w-hint {
  position: fixed; left: 50%; top: calc(var(--top) + 14px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 4;
  background: var(--card); color: var(--ink); font-weight: 600; font-size: 14px; white-space: nowrap;
  padding: 8px 14px; border-radius: var(--bubble); box-shadow: 0 3px 0 var(--blush);
  pointer-events: none; animation: nudge 1.4s ease-in-out .3s 2 both;
}
.w-hint.gone { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }   /* hidden by watch.js after a moment */
@keyframes nudge { 50% { transform: translate(-50%, 6px); } }
.w-toast {
  position: fixed; left: 50%; top: 45%; transform: translateX(-50%); z-index: 6;
  background: var(--card); color: var(--ink); font-weight: 600; padding: 10px 16px; border-radius: var(--bubble);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.w-toast.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* "Ook in het Nederlands →" (initLangBar in i18n.js), above the chat's title and buttons */
.langbar {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--card); color: var(--ink); padding: 7px 8px 7px 14px; border-radius: var(--bubble); font-size: 14px; font-weight: 600;
}
.langbar a { color: var(--ink); }
.langbar button { border: 0; background: none; font: inherit; color: #8A6F99; cursor: pointer; padding: 2px 6px; }