/*
 * Template "Chat Kita" (Pernikahan): a group chat.
 * Colors from the variant (x-inv.head): --inv-primary (header, buttons), --inv-accent,
 * --inv-background (chat wallpaper), --inv-text, --inv-bubble (incoming), --inv-mine (the guest's).
 */

:root {
    --inv-bubble: #ffffff;
    --inv-mine: #d7f7c6;
    --inv-radius: 14px;
    --ck-col: min(100vw, 460px);
    --ck-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ck-serif: 'Instrument Serif', Georgia, serif;
    --ck-soft: color-mix(in srgb, var(--inv-text) 60%, transparent);
    --ck-line: color-mix(in srgb, var(--inv-text) 12%, transparent);
    --ck-shadow: 0 1px 1.5px rgb(0 0 0 / .13);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
p, h1, h2, h3, figure, blockquote { margin: 0; }
a { color: inherit; }

body.ck-body {
    min-height: 100vh;
    background: color-mix(in srgb, var(--inv-background) 70%, #000);
    color: var(--inv-text);
    font-family: var(--ck-sans);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.ck-preview {
    position: fixed; top: 0; left: 50%; z-index: 60; transform: translateX(-50%);
    padding: .3rem .9rem; border-radius: 0 0 10px 10px;
    background: var(--inv-accent); color: #111; font-size: .72rem; font-weight: 700;
}

/* ---------- avatar ---------- */
.ck-avatar {
    display: inline-grid; grid-auto-flow: column; place-content: center; gap: 1px; flex: none;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: linear-gradient(135deg, var(--inv-accent), color-mix(in srgb, var(--inv-primary) 80%, #fff));
    color: #fff; font: 700 .9rem/1 var(--ck-sans); letter-spacing: .02em;
}
.ck-avatar--small { width: 1.5rem; height: 1.5rem; font-size: .55rem; }

/* ---------- lock screen (cover) ---------- */
.ck-lock {
    position: fixed; top: 0; bottom: 0; left: 50%; z-index: 30; width: var(--ck-col); transform: translateX(-50%);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(4.5rem + env(safe-area-inset-top)) 1.1rem calc(2rem + env(safe-area-inset-bottom));
    overflow: hidden; color: #fff; background: #111;
}
.ck-lock__wall {
    position: absolute; inset: 0; z-index: -1;
    background: var(--ck-photo, linear-gradient(160deg, var(--inv-primary), var(--inv-accent))) center / cover no-repeat;
    animation: ck-zoom 16s ease-out both;
}
.ck-lock__wall::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .35), rgb(0 0 0 / .05) 40%, rgb(0 0 0 / .55)); }
@keyframes ck-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }

.ck-lock__clock { text-align: center; text-shadow: 0 2px 18px rgb(0 0 0 / .3); }
.ck-lock__date { font-weight: 500; font-size: 1.05rem; }
.ck-lock__time { font-weight: 700; font-size: 5.5rem; line-height: 1; letter-spacing: -.04em; }

.ck-lock__stack { display: grid; gap: .9rem; }
.ck-notif {
    padding: .8rem .95rem .9rem; border-radius: 22px; color: #1b1b1b;
    background: rgb(255 255 255 / .78); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
    box-shadow: 0 10px 30px rgb(0 0 0 / .18);
}
.ck-notif__head { display: flex; align-items: center; gap: .45rem; font-size: .75rem; color: #555; }
.ck-notif__app { flex: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ck-notif__title { margin-top: .45rem; font-weight: 700; font-size: 1rem; }
.ck-notif__text { margin-top: .1rem; font-size: .95rem; }
.ck-notif__guest { font-weight: 700; }
.ck-notif__quote { margin-top: .5rem; font-family: var(--ck-serif); font-style: italic; font-size: 1rem; color: #444; }
.ck-unlock {
    justify-self: center; gap: .3rem; padding: .85rem 2rem;
    background: rgb(255 255 255 / .22); color: #fff; font-weight: 700;
    border: 1px solid rgb(255 255 255 / .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ck-lock--leave { transition: transform .5s cubic-bezier(.6, 0, .4, 1), opacity .5s ease; }
.ck-lock--gone { transform: translateX(-50%) translateY(-100%); opacity: 0; }

/* ---------- chat app ---------- */
.ck-app {
    position: relative; width: var(--ck-col); min-height: 100vh; margin: 0 auto;
    background-color: var(--inv-background);
    /* a quiet doodle wallpaper made of dots and hearts */
    background-image:
        radial-gradient(circle at 20px 20px, color-mix(in srgb, var(--inv-text) 7%, transparent) 2px, transparent 2.5px),
        radial-gradient(circle at 60px 50px, color-mix(in srgb, var(--inv-primary) 9%, transparent) 3px, transparent 3.5px);
    background-size: 80px 80px, 80px 80px;
    box-shadow: 0 0 60px rgb(0 0 0 / .25);
}

.ck-head {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: .7rem;
    padding: calc(.6rem + env(safe-area-inset-top)) .9rem .6rem;
    background: var(--inv-primary); color: #fff;
    box-shadow: 0 1px 4px rgb(0 0 0 / .15);
}
.ck-head__text { min-width: 0; }
.ck-head__name { font-weight: 700; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-head__status { font-size: .78rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ck-chat { display: flex; flex-direction: column; gap: 1.1rem; padding: 1rem .75rem 6.5rem; }

.ck-day { display: flex; justify-content: center; }
.ck-day span, .ck-system {
    padding: .3rem .75rem; border-radius: 8px; box-shadow: var(--ck-shadow);
    background: var(--inv-bubble); color: var(--ck-soft); font-size: .78rem; font-weight: 500;
}
.ck-system { align-self: center; text-align: center; }

.ck-group { display: flex; flex-direction: column; gap: .3rem; }

/* ---------- bubbles ---------- */
.ck-bubble {
    position: relative; max-width: 85%; padding: .5rem .7rem .55rem;
    border-radius: 12px; box-shadow: var(--ck-shadow); overflow-wrap: anywhere;
}
.ck-bubble--in { align-self: flex-start; background: var(--inv-bubble); }
.ck-bubble--out { align-self: flex-end; background: var(--inv-mine); }
/* the tail on the first bubble of a run */
.ck-group > .ck-bubble--in:first-child { border-top-left-radius: 3px; }
.ck-group > .ck-bubble--out:first-child, .ck-group > .ck-bubble--in + .ck-bubble--out { border-top-right-radius: 3px; }
.ck-wide { width: 85%; }

.ck-time { float: right; margin: .35rem 0 -.2rem .6rem; font-size: .68rem; color: var(--ck-soft); line-height: 1.6; }
.ck-mini { font-size: .76rem; font-weight: 700; color: var(--inv-primary); margin-bottom: .35rem; }

.ck-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.6rem; line-height: 1.7; }

.ck-forward { border-left: 3px solid var(--inv-accent); }
.ck-forward__label { font-size: .74rem; font-style: italic; color: var(--ck-soft); margin-bottom: .25rem; }
.ck-forward blockquote { font-family: var(--ck-serif); font-size: 1.08rem; line-height: 1.45; }
.ck-forward figcaption { margin-top: .35rem; font-weight: 700; font-size: .8rem; color: var(--inv-primary); }

/* contact cards */
.ck-contact { width: 85%; padding: .75rem; }
.ck-contact__top { display: flex; gap: .75rem; align-items: center; }
.ck-contact__photo { flex: none; width: 4.25rem; height: 4.25rem; border-radius: 50%; object-fit: cover; }
.ck-contact__photo--empty { display: grid; place-items: center; background: color-mix(in srgb, var(--inv-primary) 18%, transparent); font: 400 2rem var(--ck-serif); }
.ck-contact__label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--inv-primary); }
.ck-contact__name { font: 400 1.35rem/1.15 var(--ck-serif); }
.ck-contact__nick { font-size: .85rem; color: var(--ck-soft); }
.ck-contact__parents { margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--ck-line); font-size: .85rem; }
.ck-contact__parents strong { display: block; font-weight: 700; }
.ck-contact__action {
    display: block; margin: .6rem -.75rem -.75rem; padding: .6rem; border-top: 1px solid var(--ck-line);
    text-align: center; font-weight: 700; font-size: .9rem; color: var(--inv-primary); text-decoration: none;
}

/* shared locations */
.ck-location { width: 85%; padding: .3rem; }
.ck-location__map {
    position: relative; height: 9.5rem; border-radius: 10px;
    background: var(--ck-photo) center / cover no-repeat, color-mix(in srgb, var(--inv-primary) 20%, #ddd);
}
.ck-location__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%); font-size: 2rem; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .35)); }
.ck-location__body { display: grid; gap: .2rem; padding: .55rem .45rem .35rem; }
.ck-location__name { font: 400 1.45rem/1.1 var(--ck-serif); }
.ck-location__when { font-size: .85rem; font-weight: 700; color: var(--inv-primary); }
.ck-location__venue { font-weight: 700; }
.ck-location__address, .ck-location__dress { font-size: .87rem; color: var(--ck-soft); }
.inv-maps .inv-button { margin-top: .5rem; width: 100%; padding: .65rem 1rem; font-size: .9rem; }

/* love story */
.ck-moment { width: 85%; padding: .3rem .3rem .65rem; }
.ck-moment__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin-bottom: .5rem; }
.ck-moment > :not(img) { padding: 0 .4rem; }
.ck-moment__title { font: 400 1.3rem/1.2 var(--ck-serif); margin-bottom: .2rem; }

/* gallery album */
.ck-album { padding: .5rem; }
.inv-gallery { gap: 3px; border-radius: 10px; overflow: hidden; }
.inv-gallery__item { border-radius: 0; }

/* link preview */
.ck-linkcard { width: 85%; padding: .3rem .3rem .6rem; }
.ck-linkcard > p { padding: .45rem .45rem 0; }
.ck-linkcard__preview {
    display: grid; gap: .15rem; padding: .7rem .8rem; border-radius: 10px; text-decoration: none;
    background: color-mix(in srgb, var(--inv-primary) 12%, var(--inv-bubble)); border-left: 4px solid var(--inv-primary);
}
.ck-linkcard__badge { font-size: .72rem; font-weight: 700; color: #e11d48; letter-spacing: .08em; }
.ck-linkcard__title { font-weight: 700; }
.ck-linkcard__url { font-size: .78rem; color: var(--ck-soft); }

/* countdown */
.inv-countdown { gap: .4rem; }
.inv-countdown__item { min-width: 0; flex: 1; padding: .55rem .2rem; border-radius: 10px; background: color-mix(in srgb, var(--inv-primary) 10%, transparent); }
.inv-countdown__value { font-size: 1.5rem; font-weight: 700; color: var(--inv-primary); }
.inv-countdown__actions .inv-button { padding: .55rem 1rem; font-size: .82rem; }

/* buttons */
.inv-button { background: var(--inv-primary); color: #fff; font-weight: 700; }
.inv-button--outline { background: transparent; color: var(--inv-primary); }

/* gift: the accounts as small cards inside the bubble, two per row (an odd last one spans both) */
.ck-gift .ck-wide { width: 92%; max-width: 92%; padding: .45rem; }
.inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inv-gift__account { min-width: 0; padding: .6rem .65rem; border-radius: 10px; background: color-mix(in srgb, var(--inv-primary) 8%, transparent); }
.inv-gift__account + .inv-gift__account { margin-top: 0; }
.inv-gift__accounts + .inv-gift__address { margin-top: .45rem; }
.inv-gift__bank { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inv-primary); margin: 0 0 .3rem; }
.inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .4rem; }
.inv-gift__logo img { max-width: 5rem; }
.inv-gift__number { margin: 0; font: 700 .98rem/1.25 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .02em; overflow-wrap: anywhere; }
.inv-gift__holder { margin: .15rem 0 .45rem; font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ck-soft); overflow-wrap: anywhere; }
.inv-gift__account .inv-button { padding: .35rem .7rem; font-size: .65rem; }
.inv-gift__address .inv-gift__holder { font-size: .8rem; text-transform: none; letter-spacing: 0; }
.inv-gift__address > p:not([class]) { font-size: .88rem; margin-bottom: .45rem; }

/* forms (the guest's side) */
.ck-form .inv-form input:not([type=radio]):not([type=checkbox]), .ck-form .inv-form select, .ck-form .inv-form textarea {
    border: 0; border-radius: 10px; background: color-mix(in srgb, var(--inv-bubble) 92%, transparent); color: inherit;
}
.inv-wish { padding: .55rem .75rem; background: var(--inv-bubble); border-radius: 12px 12px 12px 3px; box-shadow: var(--ck-shadow); }
.inv-wish__name { color: var(--inv-primary); font-size: .88rem; }
.inv-wish__message { font-size: .88rem; line-height: 1.45; }
.inv-wish__time { font-size: .68rem; }
/* about three chat bubbles in the scroll box */
.ck-wishes .inv-wishes { --inv-wishes-height: 20.5rem; }
.ck-wishes .inv-wishes__list { padding: .15rem .3rem .3rem .1rem; }

/* closing */
.ck-photo { padding: .25rem; }
.ck-photo img { display: block; width: 100%; max-height: 22rem; object-fit: cover; border-radius: 10px; }
.ck-closing__sign { font-size: .95rem; }
.ck-closing__names { font: 400 1.45rem/1.3 var(--ck-serif); }
.ck-typing { align-self: flex-start; display: flex; gap: 4px; padding: .7rem .85rem; border-radius: 12px; background: var(--inv-bubble); box-shadow: var(--ck-shadow); }
.ck-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ck-soft); animation: ck-dots 1.2s infinite ease-in-out; }
.ck-typing span:nth-child(2) { animation-delay: .15s; }
.ck-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ck-dots { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.ck-branding { align-self: center; padding: .5rem 0 0; color: var(--ck-soft); }
.inv-checkin { color: #1a1a1a; }

/* typing bar: a shortcut to the wishes */
.ck-typebar {
    position: fixed; bottom: 0; left: 50%; z-index: 20; width: var(--ck-col); transform: translateX(-50%);
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem 4.4rem calc(.6rem + env(safe-area-inset-bottom)) .6rem;
    background: color-mix(in srgb, var(--inv-background) 85%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-decoration: none;
}
.ck-typebar__field {
    flex: 1; padding: .7rem 1rem; border-radius: 999px; background: var(--inv-bubble); box-shadow: var(--ck-shadow);
    color: var(--ck-soft); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-typebar__send { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--inv-primary); color: #fff; }
/* the music button sits at the end of the typing bar, inside the column */
.ck-body .inv-music { right: max(.6rem, calc(50vw - 230px + .6rem)); bottom: calc(.55rem + env(safe-area-inset-bottom)); }
.ck-body .inv-music__space { display: none; }

@media (prefers-reduced-motion: reduce) {
    .ck-lock__wall, .ck-typing span { animation: none; }
}