/* Post-signup explainer (dashboard/setup/done.html).
   Builds on the global wa-* / phone-* chat-mockup classes in landing/style.css
   and adds the WhatsApp objects the explainer needs: doc bubbles, image
   strips, link previews, plus the card grids. Everything here portrays what
   Peter REALLY sends in the chat (bare links with previews, document bubbles,
   image batches), never a stylised abstraction. */

.onb-wrap { max-width: 1060px; margin: 0 auto; padding: 0 32px 5rem; }
.onb-section { margin-top: 4.5rem; }
.onb-section .section-title, .onb-status .section-title { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }

/* ---- Status header ---- */
.onb-status {
    max-width: 520px;
    margin: 0 auto;
    padding-top: 4rem;
    text-align: center;
}

/* ---- Replay phone ---- */
.onb-phone {
    width: 310px;
    max-width: 100%;
    margin: 2rem auto 0;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
    box-shadow: var(--shadow-lg, 0 24px 70px rgba(0, 0, 0, 0.55));
    text-align: start;
}
.onb-phone .phone-screen { height: 540px; }
.onb-phone .wa-chat { justify-content: flex-end; }
/* Revealing bubbles mutates layout inside the frame; keep the browser's
   scroll anchoring from chasing it and dragging the page along. */
.onb-phone, .onb-phone * { overflow-anchor: none; }
.onb-phone .wa-avatar { color: #fff; }
.onb-phone .wa-avatar svg { width: 17px; height: 17px; }
.is-hidden { display: none !important; }

/* ---- WhatsApp objects (shapes match what Peter actually sends) ---- */
.wa-doc-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f6f6;
    border-radius: 6px;
    padding: 7px 9px;
    margin: 4px 0 2px;
}
.wa-doc-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: #d3453f;
}
.wa-doc-icon svg { width: 100%; height: 100%; }
.wa-doc-meta { min-width: 0; }
.wa-doc-name {
    font-size: 0.68rem;
    font-weight: 600;
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wa-doc-info { font-size: 0.6rem; color: #777; }

.wa-image-strip { display: flex; gap: 3px; margin: 4px 0 2px; }
.wa-image-thumb {
    width: 54px;
    height: 54px;
    border-radius: 5px;
    flex-shrink: 0;
}
.wa-thumb-grad-a { background: linear-gradient(135deg, #f6d365, #fda085); }
.wa-thumb-grad-b { background: linear-gradient(135deg, #84fab0, #8fd3f4); }
.wa-thumb-grad-c { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.wa-thumb-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 27, 33, 0.55);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
}

.wa-link-preview {
    border-radius: 6px;
    overflow: hidden;
    background: #f5f6f6;
    margin: 4px 0 2px;
}
.wa-link-thumb { height: 62px; }
.wa-link-body { padding: 6px 9px; }
.wa-link-title {
    font-size: 0.66rem;
    font-weight: 600;
    color: #111;
    line-height: 1.35;
}
.wa-link-domain { font-size: 0.58rem; color: #777; margin-top: 1px; }
.wa-link-url {
    font-size: 0.7rem;
    color: #027eb5;
    margin-top: 3px;
    word-break: break-all;
}

/* ---- Card grids ("Made with one message" + FAQ) ---- */
.onb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 2.2rem;
}
.onb-card {
    background: #ECE5DD url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d4cfc4' fill-opacity='0.15'%3E%3Cpath d='M30 5l5 10h10l-8 6 3 10-10-7-10 7 3-10-8-6h10z' /%3E%3C/g%3E%3C/svg%3E");
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 16px;
}
.onb-card-chat { display: flex; flex-direction: column; gap: 7px; }
.onb-card .wa-msg { max-width: 96%; }
.onb-card .wa-msg-user { align-self: flex-end; }
.onb-card .wa-msg-peter { align-self: flex-start; }

/* Copy-message button (Ideas & Help page only; rendered when examples_copy). */
.onb-copy {
    margin-top: 12px;
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #075e54;
    background: #dcf8c6;
    border: 1px solid rgba(7, 94, 84, 0.25);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.onb-copy:hover { background: #cdeeb2; }
.onb-copy.is-copied { background: #075e54; color: #fff; border-color: #075e54; }

/* Scroll reveal: Peter's reply pops up from below once the card is in view.
   The hidden state only exists under .onb-anim, which explainer.js adds when
   motion is allowed — no JS / reduced motion renders everything visible. */
.onb-anim .onb-card .wa-msg-peter {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s var(--ease-out-expo, ease);
    transition-delay: 0.15s;
    animation: none;
}
.onb-anim .onb-card.in-view .wa-msg-peter {
    opacity: 1;
    transform: none;
}

/* Wide grids break out of the 1060px wrap: the examples row goes to six
   columns, the FAQ grid to five, when the viewport is wide enough; below
   that both fall back to the normal 3/2/1-column responsive grid. */
.onb-grid-wide, .onb-grid-faq {
    width: min(1680px, calc(100vw - 64px));
    margin-left: 50%;
    transform: translateX(-50%);
}
@media (min-width: 1560px) {
    .onb-grid-wide { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
    .onb-grid-faq { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
    .onb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .onb-wrap { padding: 0 20px 4rem; }
    .onb-grid { grid-template-columns: 1fr; }
    .onb-grid-wide, .onb-grid-faq { width: 100%; margin-left: 0; transform: none; }
}