/* ---------- Accueil ---------- */
.wordmark { font-size: 26px; font-weight: 800; letter-spacing: -.5px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hello h1 { font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.couple { display: flex; flex-direction: column; gap: 16px; }
.couple .pair { display: flex; }
.couple .pair > :last-child { margin-left: -14px; }
.countdown-n { font-size: 28px; font-weight: 800; line-height: 1; text-align: center; }
.tile-ic { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic-violet { background: rgba(139, 92, 246, .18); color: var(--violet-soft); }
.ic-pink { background: rgba(236, 72, 153, .16); color: var(--pink-soft); }
.ic-gold { background: rgba(252, 211, 77, .14); color: var(--gold); }
.ic-cyan { background: rgba(103, 232, 249, .12); color: var(--cyan); }
.msg-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line-soft); width: 100%; text-align: left; }
.msg-row:last-child { border-bottom: 0; }
.tile { height: 84px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }

/* ---------- Chat ---------- */
.chat-head { display: flex; align-items: center; gap: 12px; padding: calc(var(--safe-top) + 12px) 16px 12px; border-bottom: 1px solid var(--line-soft); }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.chat-list > :first-child { margin-top: auto; }
.day-sep { align-self: center; padding: 4px 12px; border-radius: var(--r-full); background: var(--surface); font-size: 11px; font-weight: 600; color: var(--muted); margin: 6px 0; }
.msg { display: flex; flex-direction: column; max-width: 78%; position: relative; }
.msg.in { align-self: flex-start; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.msg.has-react { margin-bottom: 12px; }
.bubble { padding: 9px 13px; border-radius: 20px 20px 20px 6px; background: var(--bubble); border: 1px solid var(--line-soft); font-size: 15px; line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; text-align: left; -webkit-user-select: text; user-select: text; }
.msg.out .bubble { border-radius: 20px 20px 6px 20px; background: var(--grad); border: 0; color: #fff; }
.bubble .meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 11px; color: var(--muted-2); margin-top: 3px; }
.msg.out .bubble .meta { color: rgba(255, 255, 255, .8); }
.quote { padding: 6px 10px; border-radius: 12px; background: rgba(0, 0, 0, .22); border-left: 3px solid rgba(255, 255, 255, .7); font-size: 12px; margin-bottom: 6px; }
.msg.in .quote { background: var(--surface-2); border-left-color: var(--violet-soft); }
.quote b { display: block; font-weight: 700; }
.photo-msg { width: 220px; padding: 5px; }
.photo-msg .ph { height: 150px; }
.voice-msg { display: flex; align-items: center; gap: 10px; width: 236px; }
.voice-msg .play { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #6D28D9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msg.in .voice-msg .play { background: var(--grad); color: #fff; }
.wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 26px; }
.wave i { width: 3px; border-radius: 2px; background: currentColor; display: block; opacity: .9; }
.reactions { position: absolute; bottom: -12px; display: flex; gap: 2px; height: 24px; padding: 0 8px; border-radius: var(--r-full); background: #22202F; border: 2px solid var(--bg); align-items: center; font-size: 11px; font-weight: 700; color: var(--pink-soft); }
.msg.in .reactions { left: 12px; }
.msg.out .reactions { right: 12px; }
.typing { align-self: flex-start; height: 38px; padding: 0 16px; border-radius: 20px 20px 20px 6px; background: var(--bubble); border: 1px solid var(--line-soft); display: flex; align-items: center; gap: 5px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: block; }
.reply-bar { display: flex; align-items: center; gap: 10px; margin: 0 14px; padding: 8px 8px 8px 12px; border-radius: 14px 14px 0 0; background: var(--surface-2); border-left: 3px solid var(--violet); font-size: 13px; }
.composer { display: flex; align-items: center; gap: 8px; padding: 10px 14px 10px; }
.composer input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: 16px; outline: none; }

/* ---------- Ensemble ---------- */
.player-ph { height: 0; padding-top: 56.25%; position: relative; background: #000; }
.player-ph > div { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(245, 243, 255, .35); }
.sync-badge { position: absolute; top: 10px; left: 10px; height: 26px; padding: 0 10px; border-radius: var(--r-full); background: rgba(0, 0, 0, .6); display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; z-index: 1; }
.progress { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--pink)); border-radius: 2px; transition: width .4s linear; }
.controls { display: flex; align-items: center; justify-content: center; gap: 22px; }
.big-play { width: 60px; height: 60px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; }
.queue-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-md); background: rgba(255, 255, 255, .03); width: 100%; text-align: left; }
.queue-item .ph { width: 104px; height: 58px; border-radius: 11px; flex-shrink: 0; }
.cover { width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; }
.cover-xl { width: 180px; height: 180px; border-radius: 24px; align-self: center; }

/* ---------- Dates ---------- */
.hero-count { padding: 20px; border-radius: 24px; background: var(--grad); color: #fff; display: flex; align-items: center; gap: 16px; }
.hero-count .box { width: 58px; padding: 8px 0; border-radius: 14px; background: rgba(0, 0, 0, .22); display: flex; flex-direction: column; align-items: center; }
.hero-count .box b { font-size: 24px; font-weight: 800; line-height: 1; }
.hero-count .box span { font-size: 10px; font-weight: 600; opacity: .85; }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.cal-dow span { font-size: 11px; font-weight: 700; color: var(--muted-2); }
.cal-day { height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 12px; }
.cal-day .n { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: var(--text-2); }
.cal-day.today .n { background: var(--grad); color: #fff; font-weight: 800; }
.cal-day.sel { background: var(--surface-2); }
.cal-day .dots { display: flex; gap: 2px; height: 5px; }
.cal-day .dots i { width: 5px; height: 5px; border-radius: 50%; display: block; }

/* ---------- Souvenirs ---------- */
.onthisday { position: relative; height: 168px; border-radius: var(--r-lg); overflow: hidden; display: flex; align-items: flex-end; width: 100%; text-align: left; }
.onthisday .shade { width: 100%; padding: 14px 16px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72)); display: flex; align-items: flex-end; justify-content: space-between; color: #fff; }
.mem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mem-grid .ph { height: 112px; border-radius: var(--r-sm); width: 100%; }
.empty-state { padding: 32px 16px; text-align: center; color: var(--muted); font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; }

@media (min-width: 700px) {
  .mem-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mem-grid .ph { height: 140px; }
}

/* ---------- Parcours d'arrivée ---------- */
body.onboarding #navbar { display: none; }
body.onboarding #view { padding-bottom: 0; }
.ob { min-height: 100%; max-width: 480px; margin: 0 auto; padding: calc(var(--safe-top) + 24px) 22px calc(var(--safe-bottom) + 28px); display: flex; flex-direction: column; gap: 18px; position: relative; }
.ob-back { align-self: flex-start; }
.ob-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.ob-actions { display: flex; flex-direction: column; gap: 10px; }
.ob-head { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ob-choice { width: 100%; text-align: left; }
.ob-legacy { cursor: pointer; }
.ob-code { height: 64px; text-align: center; font-size: 26px; font-weight: 800; letter-spacing: 6px; text-transform: uppercase; }
.ob-code-show { display: flex; align-items: center; gap: 10px; font-size: 34px; font-weight: 800; letter-spacing: 6px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 8px 0; }
.ob-code-show span { width: 10px; }
.link { color: var(--violet-soft); font-weight: 700; font-size: inherit; }

/* ---------- Chat : médias et enregistrement ---------- */
.chat-img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 16px; display: block; background: var(--surface-2); }
.chat-vid { position: relative; border-radius: 16px; overflow: hidden; background: #000; }
.chat-vid video { width: 100%; max-height: 300px; display: block; object-fit: cover; }
.vid-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, .25); }
.rec-bar { background: var(--surface); border-top: 1px solid var(--line-soft); }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); transition: transform .1s linear; }
.viewer-media { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.viewer-el { max-width: 100%; max-height: 100%; border-radius: 16px; object-fit: contain; }
.thumb-img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* ---------- Lecteur YouTube partagé ---------- */
.yt-host { position: fixed; z-index: 15; background: #000; overflow: hidden; }
.yt-host #ytFrame { width: 100%; height: 100%; display: block; border: 0; }
.yt-mini-bar { display: none; }
.yt-host.mini { z-index: 40; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); background: var(--bg-raised); display: flex; flex-direction: column; transition: width .2s ease, height .2s ease; }
.yt-host.mini.dragging { transition: none; box-shadow: 0 18px 40px rgba(0, 0, 0, .65); }
.yt-host.mini #ytFrame { flex: 1; height: auto; min-height: 0; }
.yt-host.mini .yt-mini-bar { display: flex; align-items: center; gap: 2px; height: 44px; flex: none; padding: 0 4px 0 2px; font-size: 13px; font-weight: 600; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.yt-grip { width: 22px; display: flex; align-items: center; justify-content: center; color: var(--muted-2); flex: none; }
.yt-mini-bar button { height: 32px; min-width: 32px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.yt-mini-bar [data-yt="open"] { justify-content: flex-start; text-align: left; color: var(--text); }
.yt-slot { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
.yt-slot .empty-yt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; text-align: center; padding: 16px; }
.tap-banner { background: var(--gold); color: #1A1200; font-weight: 700; font-size: 13px; padding: 9px 12px; text-align: center; }
.result-item { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 6px; border-radius: 14px; }
.result-item img { width: 120px; height: 68px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--surface-2); }

/* ---------- Appels ---------- */
.call { position: fixed; inset: 0; z-index: 80; background: radial-gradient(circle at 50% 30%, #241B3A, #0A0A0F 70%); display: flex; flex-direction: column; animation: fadeIn .2s ease; }
.call-remote { position: absolute; inset: 0; }
.call-remote audio { display: none; }
.call-remote-video { width: 100%; height: 100%; object-fit: cover; }
.call-top { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding-top: var(--safe-top); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.call-status { font-size: 15px; color: var(--text-2); font-weight: 600; min-height: 20px; }
.call-local { position: absolute; top: calc(var(--safe-top) + 16px); right: 16px; width: 110px; height: 160px; border-radius: 18px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .25); background: #000; z-index: 2; }
.call-local video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.call-controls { position: relative; z-index: 2; display: flex; justify-content: center; gap: 22px; padding: 20px 20px calc(var(--safe-bottom) + 36px); }
.call-btn { width: 66px; height: 66px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.call-btn.off { background: #fff; color: #0A0A0F; }
.call-btn.accept { background: #22C55E; }
.call-btn.decline { background: var(--danger); }
.call-btn.decline svg { transform: rotate(135deg); }
.call-btn[data-c="decline"] svg { transform: none; }
.update-bar { position: fixed; left: 12px; right: 12px; top: calc(var(--safe-top) + 10px); z-index: 95; padding: 12px 14px; border-radius: 16px; background: var(--bg-raised); border: 1px solid rgba(196, 181, 253, .35); display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.onthisday .shade { position: relative; z-index: 1; }