:root{
  --wall: #F5F1EB;
  --mat: #E9E4DC;
  --bubble-in: #FFFFFF;
  --bubble-out: #D9FDD3;
  --ink: #111B21;
  --text-secondary: #54656F;
  --muted: #5E6E78;
  --accent: #008069;
  --accent-2: #0B7A66;
  --link: #027AAD;
  --header-glass: #F7F4EFDB;
  --divider: #E9EDEF;
  --system-yellow: #FFEECD;
  --read-tick: #1E9BD7;
  --bride: #C4336D;
  --groom: #1B7F52;
  --ring-1: #21C063;
  --ring-2: #25D366;
  --ring-3: #0B7A66;
  --map-bg: #DCE8DA;
  --map-pin: #D93F3F;
  --loader-bg: #0B141A;
  --lock-bg: #050505;
  --system-yellow-ink: #5C4A1F;
  --on-accent: #FFFFFF;
  --error: #C0392B;
  --groom-photo: url('../assets/samuel.jpg');
  --bride-photo: url('../assets/ledy.jpg');
  --couple-photo: url('../assets/couple.jpg');
  --couple-photo-2: url('../assets/couple-2.jpg');
  --couple-photo-3: url('../assets/couple-3.jpg');
  --couple-photo-4: url('../assets/couple-4.jpg');
  --couple-photo-5: url('../assets/couple-5.jpg');
  --lock-photo: url('../assets/couple-3.jpg');
  --card-shadow: 0 1px 0.5px rgba(11,20,26,.13);
  --radius-card: 18px;
  --font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --max-w: 430px;
  --doodle-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='rgba(84,101,111,0.35)' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18' y='26' width='30' height='20' rx='2'/%3E%3Cpath d='M18 27l15 12 15-12'/%3E%3Cpath d='M168 30c-2-4-8-4-9 0-1-4-7-4-9 0-2 5 4 10 9 13 5-3 11-8 9-13Z'/%3E%3Cpath d='M40 110c0-7 5-12 12-12s12 5 12 12v8l4 5H36l4-5v-8Z'/%3E%3Cpath d='M48 128a4 4 0 0 0 8 0'/%3E%3Cpath d='M165 105l3 9 9 3-9 3-3 9-3-9-9-3 9-3Z'/%3E%3Ccircle cx='30' cy='175' r='3'/%3E%3Ccircle cx='22' cy='170' r='3'/%3E%3Ccircle cx='38' cy='170' r='3'/%3E%3Ccircle cx='22' cy='180' r='3'/%3E%3Ccircle cx='38' cy='180' r='3'/%3E%3Cpath d='M170 165v22a6 6 0 1 1-3-5V165l14-3v20a6 6 0 1 1-3-5v-14Z'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark){
  :root{
    --wall: #0B141A;
    --mat: #070D11;
    --bubble-in: #1F2C34;
    --bubble-out: #144D37;
    --ink: #E9EDEF;
    --text-secondary: #AEBAC1;
    --muted: #AEBAC1;
    --accent: #21C063;
    --accent-2: #21C063;
    --link: #53BDEB;
    --header-glass: rgba(31,44,52,.86);
    --divider: #2A3942;
    --read-tick: #53BDEB;
    --bride: #FF7CA8;
    --groom: #3DD68C;
    --card-shadow: 0 1px 0.5px rgba(0,0,0,.4);
    --doodle-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18' y='26' width='30' height='20' rx='2'/%3E%3Cpath d='M18 27l15 12 15-12'/%3E%3Cpath d='M168 30c-2-4-8-4-9 0-1-4-7-4-9 0-2 5 4 10 9 13 5-3 11-8 9-13Z'/%3E%3Cpath d='M40 110c0-7 5-12 12-12s12 5 12 12v8l4 5H36l4-5v-8Z'/%3E%3Cpath d='M48 128a4 4 0 0 0 8 0'/%3E%3Cpath d='M165 105l3 9 9 3-9 3-3 9-3-9-9-3 9-3Z'/%3E%3Ccircle cx='30' cy='175' r='3'/%3E%3Ccircle cx='22' cy='170' r='3'/%3E%3Ccircle cx='38' cy='170' r='3'/%3E%3Ccircle cx='22' cy='180' r='3'/%3E%3Ccircle cx='38' cy='180' r='3'/%3E%3Cpath d='M170 165v22a6 6 0 1 1-3-5V165l14-3v20a6 6 0 1 1-3-5v-14Z'/%3E%3C/g%3E%3C/svg%3E");
  }
}

*{box-sizing:border-box; margin:0; padding:0;}

html,body{
  background:var(--mat);
  color:var(--ink);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

body{
  min-height:100vh;
  display:flex;
  justify-content:center;
}

button, input, textarea, select{ font-family:inherit; }

.frame{
  position:relative;
  width:100%;
  max-width:var(--max-w);
  height:100vh;
  height:100dvh;
  background:var(--wall);
  box-shadow:0 0 60px rgba(0,0,0,.2);
  overflow:hidden;
  overflow:clip;
}

/* ===== LOADER ===== */
.loader{
  position:fixed; inset:0;
  z-index:200;
  background:var(--loader-bg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:16px;
  color:var(--ring-2);
  font-size:12px;
  letter-spacing:1px;
  transition:opacity .5s ease, visibility .5s ease;
}
.loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-ring{
  width:40px; height:40px;
  border-radius:50%;
  border:2px solid rgba(37,211,102,.25);
  border-top-color:var(--ring-2);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===== CHAT SHELL ===== */
.chat-shell{
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background-color:var(--wall);
  background-image:var(--doodle-pattern);
  background-size:220px 220px;
  transition:transform .5s ease, opacity .5s ease, filter .5s ease;
}
.chat-shell.locked{
  transform:scale(.93);
  opacity:.4;
  filter:blur(1px);
  pointer-events:none;
}

/* ===== HEADER ===== */
.chat-header{
  flex:0 0 auto;
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:6px;
  min-height:64px;
  padding:8px 10px;
  background:var(--header-glass);
  backdrop-filter:saturate(1.6) blur(18px);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid var(--divider);
  flex-wrap:nowrap;
}

.chat-header .pill{
  display:flex; align-items:center; justify-content:center; gap:4px;
  height:44px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  box-shadow:none;
}
.chat-header .pill-back{ width:44px; padding:0; font-size:13px; font-weight:600; }
.chat-header .pill-icon{ width:44px; position:relative; }
.chat-header .pill-icon.wide{ width:44px; }
.pill-icon.playing{ color:var(--accent); }

.status-avatar{
  width:44px; height:44px;
  border-radius:50%;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:2px;
}
.avatar-ring{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  border-radius:50%;
  background:conic-gradient(from 180deg, var(--ring-1), var(--ring-2), var(--ring-3), var(--ring-1));
  padding:2px;
}
.avatar-inner{
  display:block;
  width:100%; height:100%;
  border-radius:50%;
  background:var(--couple-photo, none) center/cover, linear-gradient(160deg,#e6d3ad,#b3894a);
}

.header-info{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start;
  background:transparent; border:none; cursor:pointer;
  padding:2px 4px;
  text-align:left;
}
.header-title{
  font-size:17px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.header-participants{
  font-size:13px; color:var(--text-secondary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

.header-actions{ display:flex; gap:8px; }

.tooltip{
  position:absolute; top:50px; right:0;
  width:200px;
  background:var(--ink);
  color:var(--wall);
  font-size:11.5px;
  line-height:1.5;
  padding:10px 12px;
  border-radius:10px;
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  text-align:left;
  pointer-events:none;
  z-index:40;
}
.tooltip.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ===== CHIPS ===== */
.chat-chips{
  flex:0 0 auto;
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  padding:10px 12px;
}
.chip{
  max-width:86%;
  background:var(--bubble-in);
  color:var(--muted);
  font-size:12.5px;
  padding:6px 12px;
  border-radius:10px;
  box-shadow:var(--card-shadow);
  text-align:center;
}
.chip-lock{ background:var(--system-yellow); color:var(--system-yellow-ink); }
.chip-lock svg{ vertical-align:-1px; }
.chip-date{ border-radius:999px; font-size:12px; }

/* ===== FEED ===== */
.chat-feed{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 12px 24px;
}
.feed-section{
  scroll-margin-top:16px;
  min-height:auto;
  padding:14px 0;
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .42s ease, transform .42s ease;
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .bubble-typing span{ animation:none !important; }
  .loader-ring{ animation:none; }
}

.msg{
  display:flex; align-items:flex-end; gap:8px;
  margin-bottom:10px;
  max-width:100%;
}
.avatar{
  flex:0 0 30px; width:30px; height:30px;
  border-radius:50%;
  background:var(--groom-photo, none) center/cover, var(--groom);
}
.avatar-bride{ background:var(--bride-photo, none) center/cover, var(--bride); }

.bubble{
  position:relative;
  max-width:80%;
  background:var(--bubble-in);
  color:var(--ink);
  border-radius:var(--radius-card);
  padding:8px 12px;
  box-shadow:var(--card-shadow);
  font-size:14.5px;
  line-height:1.5;
}
.bubble p{ margin:0; }
.bubble p + p{ margin-top:6px; }

/* WhatsApp-style bubble tail: only on the last bubble of a consecutive group.
   A single bubble-colored piece with a circular mask cut out of its outer
   corner - not a second background-colored piece trying to match the page
   behind it, which broke (a visible seam) against the doodle-pattern
   wallpaper. The mask reveals whatever is actually behind it instead. */
.msg:not(:has(+ .msg.grouped)) .bubble::before{
  content:"";
  position:absolute;
  bottom:0; left:-8px;
  width:11px; height:14px;
  background:var(--bubble-in);
  border-bottom-right-radius:16px 13px;
  -webkit-mask-image:radial-gradient(circle 9px at 0 0, transparent 99%, #000 100%);
  mask-image:radial-gradient(circle 9px at 0 0, transparent 99%, #000 100%);
}

.sender{ font-size:14px; font-weight:600; margin-bottom:2px; }
.sender-groom{ color:var(--groom); }
.sender-bride{ color:var(--bride); }

.bubble-typing{
  display:flex; gap:4px; align-items:center;
  padding:12px 14px;
}
.bubble-typing span{
  width:6px; height:6px; border-radius:50%;
  background:var(--muted);
  animation:typing 0.9s infinite ease-in-out;
}
.bubble-typing span:nth-child(2){ animation-delay:.15s; }
.bubble-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typing{
  0%, 60%, 100%{ transform:translateY(0); opacity:.4; }
  30%{ transform:translateY(-4px); opacity:1; }
}

.bubble-card{ max-width:88%; }
.card-title{ font-size:15.5px; font-weight:600; margin-bottom:4px; }

/* ===== HOME CARD ===== */
.hero-photo{
  width:100%; aspect-ratio:4/3;
  border-radius:var(--radius-card);
  background:var(--couple-photo, none) center/cover, linear-gradient(160deg,#e6d3ad,#b3894a);
  margin-bottom:10px;
}
.hero-couple{ font-family:var(--font-ui); font-weight:700; font-size:21px; margin-bottom:2px; }
.hero-date{ font-size:12.5px; color:var(--text-secondary); margin-bottom:8px; }
.hero-invite{ font-size:13.5px; color:var(--ink); margin-bottom:10px; }
.music-row{
  display:flex; align-items:center; gap:8px;
  background:var(--wall);
  border-radius:var(--radius-card);
  padding:8px 10px;
  font-size:12.5px;
  color:var(--text-secondary);
  margin-bottom:10px;
}
.reaction-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.reaction-pill{
  border:1px solid var(--divider);
  background:var(--wall);
  border-radius:999px;
  padding:5px 10px;
  font-size:12.5px;
  cursor:pointer;
  color:var(--ink);
}
.reaction-pill.reacted{ border-color:var(--accent); background:rgba(37,211,102,.12); }
.btn-share{
  margin-left:auto;
  border:none;
  background:var(--accent);
  color:var(--on-accent);
  border-radius:999px;
  padding:6px 14px;
  font-size:12.5px;
  cursor:pointer;
}

/* ===== VERSE / FORWARD ===== */
.bubble-forward{ border-left:3px solid var(--accent-2); }
/* The tail-curl pseudo-elements extend past the bubble's own box and cut
   across this border, creating a jagged corner - the colored border is
   already a clear "forwarded" marker on its own, so skip the tail here. */
.bubble-forward::before{ display:none; }
.forward-label{ font-size:11.5px; color:var(--muted); margin-bottom:6px; }
.verse-quote{
  font-family:var(--font-ui);
  font-style:italic;
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  margin-bottom:6px;
}
.verse-source{ font-size:12px; color:var(--muted); }

/* ===== PROFILES ===== */
.profile-photo{
  width:100%; aspect-ratio:1/1; max-width:160px;
  border-radius:var(--radius-card);
  margin:0 auto 10px;
  background:linear-gradient(160deg,#e6d3ad,#b3894a);
}
.profile-bride{ background:var(--bride-photo, none) center/cover, linear-gradient(160deg,#f3c9d6,#c4336d); }
.profile-groom{ background:var(--groom-photo, none) center/cover, linear-gradient(160deg,#bfe3cf,#1b7f52); }
.profile-name{ font-size:16px; font-weight:600; text-align:center; }
.profile-role{ font-size:12px; color:var(--muted); text-align:center; margin-bottom:4px; }
.profile-parents{ font-size:12.5px; color:var(--text-secondary); text-align:center; margin-bottom:6px; }

/* ===== COUNTDOWN ===== */
.pinned-label{
  display:flex; align-items:center; gap:4px;
  font-size:11.5px; color:var(--muted); margin-bottom:2px;
}
.pinned-label svg{ flex:0 0 auto; }
.countdown-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px;
  margin:10px 0;
}
.cd-tile{
  background:var(--wall);
  border-radius:12px;
  padding:10px 4px;
  text-align:center;
}
.cd-tile span{ display:block; font-size:26px; font-weight:600; color:var(--ink); }
.cd-tile small{ font-size:10px; text-transform:uppercase; color:var(--muted); }

.btn-calendar, .btn-mini{
  display:inline-block;
  font-size:12.5px;
  font-weight:600;
  color:var(--link);
  background:transparent;
  border:1px solid var(--divider);
  border-radius:999px;
  padding:7px 14px;
  cursor:pointer;
  text-decoration:none;
}

/* ===== EVENTS ===== */
.event-name{ font-size:15.5px; font-weight:600; }
.event-when{ font-size:12.5px; color:var(--text-secondary); margin:2px 0; }
.event-where{ font-size:12.5px; color:var(--text-secondary); margin-bottom:8px; }
.map-preview{
  position:relative;
  width:100%; height:116px;
  border-radius:var(--radius-card);
  margin-bottom:10px;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.9) 22px 24px),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,.9) 30px 32px),
    var(--map-bg);
  overflow:hidden;
}
.map-pin{
  position:absolute; top:50%; left:50%;
  width:14px; height:14px;
  transform:translate(-50%,-100%);
  background:var(--map-pin);
  border-radius:50% 50% 50% 0;
  transform-origin:bottom;
}
.map-pin::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:5px; height:5px; border-radius:50%; background:var(--on-accent);
}
.event-actions{ display:flex; flex-wrap:wrap; gap:8px; }

/* ===== STORY ===== */
.story-card{ max-width:88%; }
.story-photo{
  width:100%; aspect-ratio:16/10;
  border-radius:var(--radius-card);
  margin:6px 0 8px;
  background:linear-gradient(160deg,#d9c4a0,#8a6a3f);
}
.story-title{ font-weight:600; font-size:14.5px; margin-bottom:4px; }

/* ===== DRESS CODE ===== */
.swatch-row{ display:flex; gap:10px; }
.swatch{
  width:40px; height:40px;
  border-radius:50%;
  border:2px solid var(--divider);
}

/* ===== GALLERY ===== */
.gallery-mosaic{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
}
.g-item{
  aspect-ratio:1/1;
  border-radius:8px;
  border:none;
  cursor:pointer;
  position:relative;
  color:var(--on-accent);
  font-weight:600;
  font-size:16px;
}
.g1{ background:var(--couple-photo, none) center/cover, linear-gradient(160deg,#e6d3ad,#b3894a); }
.g2{ background:var(--couple-photo-2, none) center/cover, linear-gradient(160deg,#d9c4a0,#8a6a3f); }
.g3{ background:var(--couple-photo-3, none) center/cover, linear-gradient(160deg,#f2ead9,#c9a765); }
.g4{ background:var(--couple-photo-4, none) center/cover, linear-gradient(160deg,#e0c9a6,#9c7a4a); }
.g5{ background:var(--couple-photo-5, none) center/cover, linear-gradient(160deg,#ead9c0,#b08b52); }
.g-more{ background:rgba(17,27,33,.55); backdrop-filter:blur(2px); }

/* ===== LIGHTBOX ===== */
.lightbox{
  position:fixed; inset:0;
  z-index:150;
  background:rgba(11,20,26,.94);
  display:none;
  align-items:center; justify-content:center;
  gap:12px;
  padding:24px;
}
.lightbox.show{ display:flex; }
.lightbox-photo{
  width:100%; max-width:320px; aspect-ratio:4/5;
  border-radius:var(--radius-card);
}
.lightbox-caption{
  position:absolute; bottom:28px; left:0; right:0;
  text-align:center; color:var(--on-accent); font-size:13px;
}
.lightbox-close{
  position:absolute; top:16px; right:16px;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background:transparent; color:var(--on-accent); font-size:20px; cursor:pointer;
}
.lightbox-nav{
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08); color:var(--on-accent);
  font-size:22px; cursor:pointer; line-height:1;
  flex:0 0 auto;
}

/* ===== GIFT ===== */
.gift-bank-name{ font-weight:600; font-size:15px; }
.gift-bank-number{ font-size:18px; font-weight:700; letter-spacing:1.5px; color:var(--accent); margin:4px 0 2px; }
.gift-bank-holder{ font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.gift-address{ font-size:13px; color:var(--text-secondary); margin-bottom:10px; }
.btn-copy{
  border:none; background:var(--accent); color:var(--on-accent);
  border-radius:999px; padding:7px 16px; font-size:12.5px; cursor:pointer;
}

/* ===== RSVP ===== */
.attendance-card{ max-width:92%; }
.deadline-note{ font-size:12px; color:var(--muted); margin-bottom:10px; }
.attendance-choices{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.choice-btn{
  width:100%;
  padding:12px 8px;
  border-radius:10px;
  border:1.5px solid var(--divider);
  background:var(--wall);
  color:var(--ink);
  font-size:13.5px; font-weight:600;
  cursor:pointer;
}
.choice-btn.selected{ border-color:var(--accent); background:rgba(37,211,102,.14); color:var(--accent-2); }
.guest-count-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-secondary); }
.guest-count-row[hidden]{ display:none; }
.guest-count-row select{
  padding:6px 10px; border-radius:8px; border:1px solid var(--divider); background:var(--bubble-in); color:var(--ink);
}

.rsvp-form{
  display:flex; flex-direction:column; gap:8px;
  max-width:92%;
}
.rsvp-form input, .rsvp-form textarea{
  border:1px solid var(--divider);
  background:var(--wall);
  border-radius:10px;
  padding:10px 12px;
  font-size:13.5px;
  color:var(--ink);
  resize:none;
}
.rsvp-error{ display:none; color:var(--error); font-size:12px; }
.rsvp-error.show{ display:block; }
.btn-send{
  align-self:flex-end;
  border:none; background:var(--accent); color:var(--on-accent);
  border-radius:999px; padding:8px 20px; font-size:13px; font-weight:600; cursor:pointer;
}

.wishes-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.wishes-empty{ font-size:12.5px; color:var(--muted); text-align:center; }
.wish-item{ max-width:88%; }
.wish-name{ font-weight:600; font-size:13.5px; }
.wish-status{ font-size:11.5px; color:var(--accent-2); margin-left:6px; }
.wish-text{ font-size:13px; color:var(--text-secondary); margin-top:2px; }

/* ===== LOVE NOTE ===== */
.lovenote-text{ font-family:var(--font-ui); font-style:italic; font-size:15px; line-height:1.5; margin-bottom:8px; }

/* ===== CLOSING ===== */
.closing-signature{ font-family:var(--font-ui); font-weight:700; font-size:19px; margin-top:6px; }

/* ===== PINNED MESSAGE (tap to cycle + jump) ===== */
.pinned-bar{
  position:sticky; top:0; z-index:29;
  flex:0 0 auto;
  width:100%;
  min-height:58px;
  display:flex; align-items:center; gap:8px;
  min-width:0;
  border:none;
  border-bottom:1px solid var(--divider);
  background:var(--header-glass);
  color:var(--text-secondary);
  font-size:13.5px;
  padding:8px 12px;
  cursor:pointer;
  text-align:left;
}
.pinned-marker{
  flex:0 0 38px;
  height:42px;
  position:relative;
  display:grid;
  place-items:center;
  border-left:3px solid var(--text-secondary);
  color:var(--muted);
}
.pinned-marker::after{
  content:"";
  position:absolute;
  inset:5px 0 5px 4px;
  border-radius:7px;
  background:var(--bubble-in);
  z-index:0;
}
.pinned-pin-glyph{ position:relative; z-index:1; transform:rotate(-45deg); }
.pinned-text{
  flex:1 1 auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0;
}
.pinned-count{
  flex:0 0 auto;
  color:var(--muted);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.pinned-next{ flex:0 0 auto; color:var(--muted); }

/* ===== MESSAGE GROUPING & TIMESTAMPS ===== */
.msg.grouped .avatar{ visibility:hidden; }
.msg.grouped{ margin-top:-4px; }
.msg-time{
  display:block;
  text-align:right;
  font-size:10.5px;
  color:var(--muted);
  margin-top:4px;
}

/* ===== HEADER TYPING STATUS ===== */
.header-participants.typing-status{ color:var(--accent); }

/* ===== STORY VIEWER ===== */
.story-viewer{
  position:absolute; inset:0;
  z-index:70;
  background:var(--lock-bg);
  display:flex; flex-direction:column;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.story-viewer.show{ opacity:1; visibility:visible; }

.story-progress{
  flex:0 0 auto;
  display:flex; gap:4px;
  padding:10px 10px 0;
}
.story-progress .seg{
  position:relative;
  flex:1;
  height:2.5px;
  border-radius:2px;
  background:rgba(255,255,255,.3);
  overflow:hidden;
}
.story-progress .seg-fill{
  position:absolute; left:0; top:0; height:100%;
  width:0%;
  background:var(--on-accent);
}
.story-progress .seg.filled .seg-fill{ width:100%; }
@media (prefers-reduced-motion: reduce){
  .story-progress .seg.active .seg-fill{ transition:none !important; width:100%; }
}

.story-header{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  color:var(--on-accent);
}
.story-header .pill-back{
  background:transparent;
  color:var(--on-accent);
  box-shadow:none;
  height:auto;
  padding:4px;
}
.story-avatar{
  width:28px; height:28px; border-radius:50%;
  display:block;
  background:var(--couple-photo, none) center/cover, linear-gradient(160deg,#e6d3ad,#b3894a);
  flex:0 0 auto;
}
.story-title{ display:flex; flex-direction:column; font-size:13px; min-width:0; }
.story-title strong{ font-size:14px; }
.story-title span{ font-size:11.5px; color:rgba(255,255,255,.7); }

.story-view-photo{
  flex:1 1 auto;
  margin:0 10px 10px;
  border-radius:var(--radius-card);
}
.story-nav{
  position:absolute; top:50px; bottom:10px;
  width:35%;
  border:none; background:transparent;
  cursor:pointer;
}
.story-prev{ left:0; }
.story-next{ right:0; }

/* ===== GROUP INFO PANEL ===== */
.group-info{
  position:absolute; inset:0;
  z-index:60;
  background:var(--wall);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s ease;
}
.group-info.show{ transform:translateX(0); }

.group-info-header{
  flex:0 0 auto;
  display:flex; align-items:center; gap:12px;
  padding:12px;
  font-size:16px; font-weight:600;
  background:var(--header-glass);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--divider);
}

.group-info-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:20px 16px 32px;
  text-align:center;
}

.group-info-photo{
  width:100px; height:100px;
  border-radius:50%;
  margin:0 auto 12px;
  background:var(--couple-photo, none) center/cover, linear-gradient(160deg,#e6d3ad,#b3894a);
}
.group-info-name{ font-size:19px; font-weight:700; }
.group-info-count{ font-size:13px; color:var(--text-secondary); margin-bottom:20px; }

.gi-card{
  background:var(--bubble-in);
  border-radius:var(--radius-card);
  padding:16px;
  margin-bottom:14px;
  text-align:left;
  box-shadow:var(--card-shadow);
}
.gi-label{
  font-size:12.5px; font-weight:600; color:var(--accent);
  margin-bottom:8px;
}
.gi-label-row{ display:flex; justify-content:space-between; color:var(--muted); }
.gi-date{ font-size:14px; font-weight:600; margin-bottom:4px; }
.gi-desc{ font-size:13.5px; color:var(--ink); line-height:1.5; margin-bottom:8px; }
.gi-meta{ font-size:12px; color:var(--muted); }

.gi-media-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
}
.gi-media-grid .g-item{ aspect-ratio:1/1; }

.gi-event-row, .gi-member-row{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--divider);
}
.gi-event-row:last-child, .gi-member-row:last-child{ border-bottom:none; padding-bottom:0; }
.gi-pin{ flex:0 0 auto; color:var(--muted); margin-top:2px; }
.gi-event-text, .gi-member-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
.gi-event-name, .gi-member-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
.gi-event-when, .gi-member-role{ font-size:12px; color:var(--text-secondary); }
.gi-map-link{ flex:0 0 auto; font-size:13px; color:var(--link); font-weight:600; }
.gi-badge{
  flex:0 0 auto;
  font-size:11px; font-weight:600;
  color:var(--accent-2);
  background:rgba(37,211,102,.14);
  padding:3px 9px;
  border-radius:999px;
}

/* ===== LOCK SCREEN LANDING (iOS-style) ===== */
.lock-screen{
  position:absolute; inset:0;
  z-index:40;
  overflow:hidden;
  background:var(--lock-bg);
  display:flex; flex-direction:column;
}
.lock-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.75)),
    var(--lock-photo, none) center/cover,
    linear-gradient(160deg, #3a3a3a, #0b0b0b);
}

/* -- iOS status bar -- */
.ios-statusbar{
  position:relative; z-index:1;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px 0;
  color:var(--on-accent);
  font-size:15px; font-weight:600;
}
.ios-dynamic-island{
  position:absolute; top:10px; left:50%;
  transform:translateX(-50%);
  width:90px; height:26px;
  background:#000;
  border-radius:16px;
}
.ios-statusbar-icons{ display:flex; align-items:center; gap:4px; }

.lock-overlay{
  position:relative; z-index:1;
  flex:1 1 auto;
  min-height:0;
  display:flex; flex-direction:column; align-items:center;
  padding:14px 20px 0;
  color:var(--on-accent);
  text-align:center;
}
.lock-icon{ opacity:.85; margin-bottom:6px; }
.lock-date{ font-size:17px; font-weight:600; margin-bottom:2px; }
.lock-time{ font-size:58px; font-weight:600; line-height:1; margin-bottom:22px; letter-spacing:-1px; }

.lock-notif-stack{
  width:100%;
  margin-top:auto;
  display:flex; flex-direction:column; gap:10px;
}
.lock-notif{
  width:100%;
  display:flex; align-items:flex-start; gap:10px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius-card);
  padding:11px 14px;
  text-align:left;
  cursor:pointer;
  color:var(--on-accent);
}
.notif-avatar-wrap{ position:relative; flex:0 0 34px; }
.notif-avatar{
  display:block;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--groom-photo, none) center/cover, var(--groom);
}
.notif-avatar.avatar-bride{ background:var(--bride-photo, none) center/cover, var(--bride); }
.notif-app-icon{
  position:absolute; bottom:-3px; right:-3px;
  width:16px; height:16px;
  border-radius:5px;
  background:var(--accent);
  border:1.5px solid var(--lock-bg);
  display:flex; align-items:center; justify-content:center;
}
.notif-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.notif-row1{ display:flex; justify-content:space-between; gap:8px; font-size:14px; }
.notif-time{ flex:0 0 auto; font-weight:400; color:rgba(255,255,255,.7); font-size:12px; }
.notif-text{
  font-size:13px; color:rgba(255,255,255,.92); line-height:1.4;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}

.lock-swipe-zone{
  margin-top:10px;
  width:100%;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 0 6px;
  touch-action:none;
  cursor:grab;
}
.lock-swipe-chevron{
  font-size:20px;
  color:rgba(255,255,255,.85);
  animation:swipe-hint 1.6s ease-in-out infinite;
}
@keyframes swipe-hint{
  0%, 100%{ transform:translateY(0); opacity:.5; }
  50%{ transform:translateY(-6px); opacity:1; }
}
.lock-hint{
  font-size:12.5px;
  color:rgba(255,255,255,.7);
}
@media (prefers-reduced-motion: reduce){
  .lock-swipe-chevron{ animation:none; }
}

/* -- iOS bottom bar -- */
.ios-bottombar{
  position:relative; z-index:1;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px 10px;
  color:var(--on-accent);
}
.ios-bottom-icon{
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
}
.ios-focus-label{ font-size:12.5px; color:rgba(255,255,255,.75); }
.lock-home-indicator{
  flex:0 0 auto;
  width:120px; height:4px;
  border-radius:2px;
  background:rgba(255,255,255,.8);
  margin:0 auto 8px;
}

/* ===== JUMP MENU (quick nav) ===== */
.jump-menu{
  display:none;
  flex:0 0 auto;
  background:var(--header-glass);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--divider);
  padding:10px 6px;
  justify-content:space-around;
  z-index:21;
}
.jump-menu.show{ display:flex; }
.jump-menu a{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--text-secondary);
  text-decoration:none;
  font-size:10.5px;
}
.jump-menu a.active{ color:var(--accent); font-weight:600; }

/* ===== COMPOSE BAR (decorative WhatsApp-style, wired to RSVP) ===== */
.compose-bar{
  display:none;
  flex:0 0 auto;
  align-items:center; gap:8px;
  background:var(--header-glass);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--divider);
  padding:8px 10px;
  z-index:20;
}
.compose-bar.show{ display:flex; }
.compose-plus, .compose-icon, .compose-send{
  flex:0 0 auto;
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.compose-input{
  flex:1;
  text-align:left;
  border:none;
  background:var(--bubble-in);
  color:var(--muted);
  border-radius:20px;
  padding:9px 14px;
  font-size:13.5px;
  cursor:pointer;
}
.compose-send{ background:var(--accent); color:var(--on-accent); }

/* ===== FOCUS & PRESS STATES ===== */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

button:not(:disabled):active{
  transform:scale(.96);
}
@media (prefers-reduced-motion: reduce){
  button:active{ transform:none; }
}

@media (min-width:481px){
  .frame{
    margin:24px 0;
    border-radius:18px;
    height:calc(100vh - 48px);
    height:calc(100dvh - 48px);
  }
}