/* Tema Obrolan Cinta: undangan ala aplikasi chat. Sampul = layar kunci dengan notifikasi pesan masuk,
   beranda = profil kontak, isi = gelembung chat (masuk kiri, keluar kanan berwarna aksen) dengan centang biru,
   ucapan tamu = balasan grup. Gambar: chat/*.svg (digambar sendiri). */
:root{--page-bg:#d9dfe9;--bg:#eef1f6;--surface:#fff;--ink:#1d2433;--muted:#7a8496;--accent:#2f7bf6;--accent-ink:#fff;--line:#e3e7ee;--radius:20px;
--ct-keluar:linear-gradient(160deg,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent));
--ct-pola:url(chat/pola.svg);--ct-gembok:url(chat/gembok.svg);--ct-centang:url(chat/centang.svg);
--cover-bg:radial-gradient(70% 50% at 20% 10%,color-mix(in srgb,var(--accent) 70%,#fff),transparent),radial-gradient(70% 60% at 90% 90%,#ff9ec4,transparent),linear-gradient(160deg,var(--accent),#7a5cff)}
.theme-chat .nk-main{padding-bottom:86px;background:var(--ct-pola) 0 0/180px 180px,var(--bg)}
.theme-chat .nk-main::before{content:"Undangan Pernikahan \A online \00B7  mengetik...";white-space:pre;position:sticky;top:0;z-index:12;display:block;padding:12px 16px 12px 68px;min-height:62px;background:radial-gradient(circle at 34px 31px,#fff 0 3px,transparent 3.5px),radial-gradient(circle at 34px 31px,var(--accent) 0 19px,transparent 19.5px),color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);font:700 .95rem/1.4 var(--font-display);color:var(--ink)}
.theme-chat .nk-section{padding:28px 14px;text-align:left}

/* Huruf */
.theme-chat .nk-script{font-weight:700;color:var(--ink);letter-spacing:-.02em}
.theme-chat .nk-script span{color:var(--accent);opacity:1}
.theme-chat .nk-eyebrow{text-transform:none;letter-spacing:0;font-size:.8rem;font-weight:600}
/* Judul bagian = penanda tanggal di tengah chat */
.theme-chat .nk-heading{display:table;margin:0 auto 18px;font:600 .78rem/1 var(--font-body);color:var(--muted);background:color-mix(in srgb,var(--surface) 85%,transparent);border-radius:999px;padding:8px 14px;box-shadow:0 1px 2px rgba(0,0,0,.06);text-transform:uppercase;letter-spacing:.08em}
/* Gelembung masuk (kiri) */
.theme-chat .nk-text,.theme-chat .nk-card,.theme-chat .nk-calendar,.theme-chat .nk-msg{position:relative;background:var(--surface);color:var(--ink);border:0;border-radius:20px 20px 20px 6px;box-shadow:0 1px 2px rgba(0,0,0,.08);text-align:left}
.theme-chat .nk-text{display:table;max-width:86%;margin:0 0 10px;padding:12px 14px 22px;font-size:.93rem;line-height:1.55}
.theme-chat .nk-text::after,.theme-chat .nk-card::after{content:"09.41";position:absolute;right:12px;bottom:6px;font-size:.62rem;color:var(--muted)}
.theme-chat .nk-muted{color:var(--muted)}
/* Gelembung keluar (kanan, warna aksen, centang biru) */
.theme-chat .nk-person,.theme-chat .nk-closing .nk-text{position:relative;margin-left:auto;background:var(--ct-keluar);color:var(--accent-ink);border-radius:20px 20px 6px 20px;box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 30%,transparent)}
.theme-chat .nk-person::after,.theme-chat .nk-closing .nk-text::after{content:"09.42";position:absolute;right:30px;bottom:6px;font-size:.62rem;color:color-mix(in srgb,var(--accent-ink) 75%,transparent);background:none}
.theme-chat .nk-person::before,.theme-chat .nk-closing .nk-text::before{content:"";position:absolute;right:10px;bottom:7px;width:16px;height:10px;background:var(--accent-ink);-webkit-mask:var(--ct-centang) center/contain no-repeat;mask:var(--ct-centang) center/contain no-repeat}

/* Tombol */
.theme-chat .nk-btn{font:700 .85rem/1 var(--font-body);letter-spacing:0;padding:13px 24px}
.theme-chat .nk-btn-ghost{background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:none}

/* Sampul: layar kunci + notifikasi */
.theme-chat .nk-cover{overflow:hidden;flex-direction:column;justify-content:flex-start;padding-top:8vh}
.theme-chat .nk-cover::before{content:"";width:22px;height:26px;margin:0 auto 10px;background:#fff;-webkit-mask:var(--ct-gembok) center/contain no-repeat;mask:var(--ct-gembok) center/contain no-repeat;flex:none}
.theme-chat .nk-cover::after{content:"1 pesan baru";position:absolute;top:calc(8vh + 44px);left:0;right:0;text-align:center;color:rgba(255,255,255,.9);font:600 1rem/1 var(--font-display)}
.theme-chat .nk-cover-inner{width:100%;margin-top:70px;text-align:left;background:rgba(255,255,255,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:26px;padding:16px 18px 18px;box-shadow:0 20px 50px rgba(20,20,60,.25);animation:ct-masuk .7s .3s cubic-bezier(.2,1.4,.4,1) both}
.theme-chat .nk-cover .nk-eyebrow{display:flex;align-items:center;gap:8px;color:var(--muted);margin-bottom:12px}
.theme-chat .nk-cover .nk-eyebrow::before{content:"";width:22px;height:22px;border-radius:7px;background:var(--ct-keluar)}
.theme-chat .nk-cover .nk-eyebrow::after{content:"sekarang";margin-left:auto;font-weight:400}
.theme-chat .nk-cover h1{font-size:1.9rem;margin:0 0 4px}
.theme-chat .nk-date{font:400 .9rem/1.4 var(--font-body);letter-spacing:0;color:var(--ink);margin:0 0 12px}
.theme-chat .nk-date::before{content:"Kamu diundang ke hari bahagia kami \2022  "}
.theme-chat .nk-to{border:0;background:color-mix(in srgb,var(--accent) 9%,#fff);border-radius:14px;padding:10px 12px;margin-bottom:14px}
.theme-chat .nk-to .nk-guest{font:700 1.1rem/1.3 var(--font-display)}
.theme-chat #openBtn{width:100%}

/* Beranda = profil kontak */
.theme-chat .nk-hero{text-align:center;min-height:auto;padding-top:40px}
.theme-chat .nk-hero-photo{width:150px;height:150px;border-radius:50%;margin-bottom:16px;border:4px solid var(--surface);box-shadow:0 0 0 3px var(--accent),0 10px 30px rgba(0,0,0,.12);position:relative;overflow:visible}
.theme-chat .nk-hero-photo img{border-radius:50%}
.theme-chat .nk-hero-photo::after{content:"";position:absolute;right:8px;bottom:8px;width:22px;height:22px;border-radius:50%;background:#34c759;border:3px solid var(--surface)}
.theme-chat .nk-hero:not(:has(.nk-hero-photo))::before{content:"";order:-1;display:block;width:130px;height:130px;margin:0 auto 16px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#fff 0 18px,transparent 19px),radial-gradient(ellipse 40px 30px at 50% 88%,#fff 0 100%,transparent),var(--ct-keluar);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.theme-chat .nk-hero .nk-eyebrow{order:1;color:var(--muted);margin:6px 0 0}
.theme-chat .nk-big{font-size:2.1rem}
.theme-chat .nk-countdown{order:2;gap:8px}
.theme-chat .nk-countdown div{width:72px;border:0;border-radius:18px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.08);padding:12px 0}
.theme-chat .nk-countdown b{font:700 1.4rem/1.1 var(--font-display);color:var(--accent)}
.theme-chat .nk-countdown small{text-transform:none;letter-spacing:0;font-size:.7rem}
.theme-chat .nk-hero .nk-player{order:3}

/* Save the date: lampiran kalender */
.theme-chat .nk-bunting{display:none}
.theme-chat .nk-calendar{max-width:300px;padding:14px 14px 26px}
.theme-chat .nk-calendar::after{content:"09.41";position:absolute;right:12px;bottom:6px;font-size:.62rem;color:var(--muted)}
.theme-chat .nk-cal-month{font:700 1rem/1 var(--font-display);margin:0 0 10px;color:var(--accent)}
.theme-chat .nk-cal-month::before{content:"\1F4C5  "}
.theme-chat .nk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:.85rem;gap:2px 0}
.theme-chat .nk-cal-grid b{font:600 .62rem/2 var(--font-body);color:var(--muted)}
.theme-chat .nk-cal-grid span{line-height:30px;position:relative;z-index:0}
.theme-chat .nk-cal-sun{color:#e5484d}
.theme-chat .nk-cal-day{color:var(--accent-ink)!important;font-weight:700}
.theme-chat .nk-cal-day::before{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;translate:-50% -50%;border-radius:50%;z-index:-1;background:var(--accent)}
/* reaksi hati pada kalender */
.theme-chat .nk-savedate .nk-calendar::before{content:"\2764 3";position:absolute;left:12px;bottom:-12px;background:var(--surface);border-radius:999px;padding:2px 8px;font-size:.72rem;color:#e5484d;box-shadow:0 1px 3px rgba(0,0,0,.15)}

/* Mempelai */
.theme-chat .nk-ornament{display:none}
.theme-chat .nk-couple{gap:8px;margin-top:10px}
.theme-chat .nk-person{max-width:86%;padding:14px 16px 24px}
.theme-chat .nk-person h3{font-size:1.25rem;color:var(--accent-ink)}
.theme-chat .nk-person p{color:color-mix(in srgb,var(--accent-ink) 85%,transparent);font-size:.85rem;margin-top:2px}
.theme-chat .nk-amp{align-self:center;font:700 .75rem/1 var(--font-body);color:var(--muted);background:color-mix(in srgb,var(--surface) 85%,transparent);border-radius:999px;padding:6px 12px}

/* Acara: gelembung masuk dengan kartu lokasi */
.theme-chat .nk-card{max-width:90%;margin:0 0 12px;padding:0 0 26px;overflow:hidden}
.theme-chat .nk-card h3{font:700 1rem/1 var(--font-display);color:var(--accent-ink);background:var(--ct-keluar);padding:12px 14px;margin:0 0 10px}
.theme-chat .nk-card p{padding:0 14px;font-size:.9rem}
.theme-chat .nk-card .nk-actions{justify-content:flex-start;padding:0 14px}
.theme-chat .nk-gift{padding-top:14px}
.theme-chat .nk-gift .nk-btn{margin:10px 14px 0}
.theme-chat .nk-number{color:var(--accent)}
.theme-chat .nk-stream{text-align:center}

/* Galeri: foto terkirim */
.theme-chat .nk-gallery{margin-left:auto;max-width:88%;gap:3px;padding:4px;background:var(--ct-keluar);border-radius:20px 20px 6px 20px}
.theme-chat .nk-photo{border-radius:4px}
.theme-chat .nk-photo:first-child{border-radius:16px 16px 4px 4px}
.theme-chat .nk-yt{border-radius:18px}

/* RSVP = kolom ketik pesan */
.theme-chat .nk-form{max-width:none;gap:8px}
.theme-chat .nk-form input,.theme-chat .nk-form select,.theme-chat .nk-form textarea{border:1px solid var(--line);border-radius:22px;background:var(--surface)}
.theme-chat .nk-form input:focus,.theme-chat .nk-form select:focus,.theme-chat .nk-form textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.theme-chat .nk-form .nk-btn{align-self:flex-end}
.theme-chat .nk-form .nk-btn::after{content:" \27A4"}
.theme-chat .nk-messages{max-width:none}
.theme-chat .nk-msg{max-width:86%;padding:10px 14px;margin-bottom:8px}
.theme-chat .nk-msg .nk-strong{color:var(--accent);font-size:.8rem}
.theme-chat .nk-msg:nth-child(3n+2) .nk-strong{color:#d6409f}
.theme-chat .nk-msg:nth-child(3n) .nk-strong{color:#e07b00}
.theme-chat #rsvp>.nk-text{display:table;margin:0 auto}

/* Penutup */
.theme-chat .nk-closing{display:flex;flex-direction:column}
.theme-chat .nk-closing .nk-text{max-width:86%;margin:0 0 10px auto;padding-bottom:24px}
.theme-chat .nk-closing .nk-eyebrow{align-self:center;color:var(--muted);margin-top:14px}
.theme-chat .nk-closing .nk-big{text-align:center;font-size:1.8rem}
.theme-chat .nk-closing::after{content:"Dibaca \2713\2713";align-self:flex-end;font-size:.7rem;color:var(--accent);margin-top:-36px}
.theme-chat .nk-closing .nk-eyebrow,.theme-chat .nk-closing .nk-big{order:-1}
.theme-chat .nk-closing .nk-big{margin-bottom:18px}
.theme-chat .nk-footer a{font-weight:700}

/* Pemutar lagu: pesan suara */
.theme-chat .nk-player{display:flex;align-items:center;gap:10px;width:100%;max-width:290px;margin:22px auto 0;padding:8px 14px 8px 8px;cursor:pointer;text-align:left;background:var(--ct-keluar);border:0;border-radius:22px 22px 6px 22px;color:var(--accent-ink);font:inherit}
.theme-chat .nk-player-icon{flex:none;width:38px;height:38px;border-radius:50%;background:var(--accent-ink);position:relative}
.theme-chat .nk-player-icon::before{content:"";position:absolute;left:14px;top:11px;border-style:solid;border-width:8px 0 8px 12px;border-color:transparent transparent transparent var(--accent)}
.theme-chat:has(.nk-music.nk-playing) .nk-player-icon::before{left:12px;top:11px;width:4px;height:16px;border:0;background:var(--accent);box-shadow:8px 0 0 var(--accent)}
.theme-chat .nk-player-text{order:3;display:flex;flex-direction:column;line-height:1.2}
.theme-chat .nk-player-text b{font-size:.8rem}
.theme-chat .nk-player-text small{font-size:.62rem;opacity:.85}
.theme-chat .nk-player-wave{flex:1;display:flex;align-items:center;gap:2px;height:24px}
.theme-chat .nk-player-wave i{flex:1;height:10px;border-radius:2px;background:color-mix(in srgb,var(--accent-ink) 80%,transparent)}
.theme-chat .nk-player-wave i:nth-child(2){height:18px}.theme-chat .nk-player-wave i:nth-child(3){height:24px}.theme-chat .nk-player-wave i:nth-child(4){height:14px}
.theme-chat:has(.nk-music.nk-playing) .nk-player-wave i{animation:ct-eq .7s ease-in-out infinite alternate}
.theme-chat .nk-player-wave i:nth-child(2){animation-delay:.2s!important}.theme-chat .nk-player-wave i:nth-child(3){animation-delay:.4s!important}

/* Musik & menu bawah */
.theme-chat .nk-music{bottom:86px}
.theme-chat:not(.nk-locked) .nk-nav{display:flex}
.theme-chat .nk-nav{border-radius:24px}
.theme-chat .nk-nav a{border-radius:14px}
.theme-chat .nk-nav a:hover,.theme-chat .nk-nav a:focus-visible{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}

.theme-chat .nk-reveal{transform:translateY(16px) scale(.97);transform-origin:left bottom}
@keyframes ct-masuk{from{opacity:0;transform:translateY(-30px) scale(.9)}}
@keyframes ct-eq{from{scale:1 .4}to{scale:1 1}}
@media (prefers-reduced-motion:reduce){.theme-chat *,.theme-chat *::before,.theme-chat *::after{animation:none!important}}
