/* Talking-portrait nudge — mounted by assets/js/talking-nudge.js
   Sits over the page bottom-right. Deliberately quiet chrome: the portrait and
   the moving text are the whole effect, so nothing around them competes. */

.tn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    max-width: min(440px, calc(100vw - 40px));
    opacity: 0;
    transform: translateY(22px) scale(.97);
    pointer-events: none;
    transition: opacity 460ms cubic-bezier(.2, .7, .3, 1), transform 460ms cubic-bezier(.2, .7, .3, 1);
    font-family: var(--font-family, system-ui, sans-serif);
}
.tn.is-in  { opacity: 1; transform: none; pointer-events: auto; }
.tn.is-out { opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none; }

/* ── Bubbles ── */
.tn-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    min-width: 0;
}
.tn-bubble {
    position: relative;
    max-width: 290px;
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 16px 16px 4px 16px;
    padding: 12px 15px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
    font-size: 13.5px;
    line-height: 1.58;
    color: var(--gray-800, #1F2937);
    animation: tnPop 320ms cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes tnPop {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
/* Earlier lines recede rather than vanish, so it reads as a conversation. */
.tn-bubble.is-old {
    opacity: .46;
    font-size: 12.5px;
    padding: 9px 13px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    transition: opacity 300ms ease, font-size 300ms ease, padding 300ms ease;
}
.tn-bubble:last-child::after {
    content: "";
    position: absolute;
    right: -7px;
    bottom: 12px;
    width: 12px;
    height: 12px;
    background: var(--white, #fff);
    border-right: 1px solid var(--border, #E5E7EB);
    border-bottom: 1px solid var(--border, #E5E7EB);
    transform: rotate(-45deg);
}

.tn-caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--accent, #D97706);
    vertical-align: -2px;
    margin-left: 2px;
    animation: tnBlink 1s steps(1) infinite;
}
@keyframes tnBlink { 50% { opacity: 0; } }

.tn-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 13px;
    border-radius: var(--radius-md, 8px);
    background: var(--accent, #D97706);
    color: #231400;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: filter var(--transition-fast, .15s ease), transform var(--transition-fast, .15s ease);
}
.tn-cta:hover { filter: brightness(1.07); transform: translateY(-1px); color: #231400; }
.tn-cta:focus-visible { outline: 2px solid var(--gray-900, #111827); outline-offset: 2px; }

/* ── Portrait ── */
.tn-figure { position: relative; flex: 0 0 auto; }

.tn-face {
    display: block;
    width: 112px;
    height: 140px;
    border-radius: 15px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
    background: var(--gray-100, #F3F4F6);
    transition: transform var(--transition-fast, .18s ease);
}
.tn-figure:hover .tn-face { transform: translateY(-3px); }
.tn-face[role="button"] { cursor: pointer; }
.tn-face:focus-visible { outline: 3px solid var(--primary, #2563EB); outline-offset: 3px; }

.tn-close {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 23px;
    height: 23px;
    padding: 0;
    z-index: 3;
    border-radius: 50%;
    border: 1px solid var(--border, #E5E7EB);
    background: var(--white, #fff);
    color: var(--gray-500, #6B7280);
    font-size: 11px;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.tn-close:hover { color: var(--gray-900, #111827); border-color: var(--gray-900, #111827); }
.tn-close:focus-visible { outline: 2px solid var(--primary, #2563EB); outline-offset: 2px; }

/* Countdown ring, drawn just outside the portrait. */
.tn-ring {
    position: absolute;
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    pointer-events: none;
}
.tn-ring rect {
    fill: none;
    stroke: var(--accent, #D97706);
    stroke-width: 2.5;
    opacity: .8;
}

/* ── QR popover ── */
.tn-qrpop {
    position: absolute;
    bottom: calc(100% + 14px);
    right: 0;
    width: 258px;
    padding: 13px;
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 46px rgba(0, 0, 0, .24);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px) scale(.97);
    transform-origin: bottom right;
    z-index: 4;
    transition: opacity 170ms ease, transform 170ms ease, visibility 170ms;
}
.tn-qrpop::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 40px;
    border: 8px solid transparent;
    border-top-color: var(--white, #fff);
}
.tn-figure:hover .tn-qrpop,
.tn-figure:focus-within .tn-qrpop,
.tn.qr-open .tn-qrpop {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.tn-qrpop-h {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gray-500, #6B7280);
    margin-bottom: 10px;
}
.tn-qrpop-row { display: flex; gap: 10px; }
.tn-qrpop-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.tn-qrpop-tile {
    width: 100%;
    aspect-ratio: 1;
    background: #fff;
    border: 2px solid var(--border, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    padding: 5px;
    transition: border-color var(--transition-fast, .15s ease), transform var(--transition-fast, .15s ease);
}
.tn-qrpop-tile img { width: 100%; height: 100%; display: block; }
.tn-qrpop-item:hover .tn-qrpop-tile { transform: translateY(-2px); }
.tn-qrpop-coffee:hover .tn-qrpop-tile { border-color: var(--accent, #D97706); }
.tn-qrpop-paypal:hover .tn-qrpop-tile { border-color: #0070BA; }
.tn-qrpop-item:focus-visible .tn-qrpop-tile { outline: 2px solid var(--primary, #2563EB); outline-offset: 2px; }
.tn-qrpop-cap { font-size: 11.5px; font-weight: 700; color: var(--gray-900, #111827); }

/* On a phone the portrait would crowd the page, so it shrinks and the bubbles
   take the full width above it. */
@media (max-width: 560px) {
    .tn { right: 12px; bottom: 12px; left: 12px; max-width: none; gap: 9px; }
    .tn-bubble { max-width: none; }
    .tn-face { width: 84px; height: 105px; }
    .tn-qrpop { width: 232px; }
}

@media (prefers-reduced-motion: reduce) {
    .tn, .tn-bubble, .tn-face, .tn-cta, .tn-qrpop, .tn-qrpop-tile { transition: none; animation: none; }
    .tn-caret { animation: none; }
    .tn-figure:hover .tn-face, .tn-cta:hover, .tn-qrpop-item:hover .tn-qrpop-tile { transform: none; }
}