/* PolyGOAT phone demo — the animated Martínez family chat.
   Extracted from the hero demo on / so the desktop download page can show the
   same thing next to the QR card. Keep in sync with the hero styles in
   site/index.html if that demo changes. */
:root{
  --primary:#8D69FF;--primary-dark:#6B4FD9;
}

/* ── PHONE ── */
.hero-phone-wrap{flex-shrink:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.phone-glow{position:absolute;inset:-20px;border-radius:60px;background:radial-gradient(ellipse at 50% 50%,rgba(141,105,255,.18) 0%,transparent 70%);z-index:0;pointer-events:none}
.phone-mockup{position:relative;z-index:1;width:310px;height:630px;background:#fff;border-radius:44px;border:9px solid #1C1C1E;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 32px 72px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden}
.phone-mockup::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:96px;height:26px;background:#1C1C1E;border-radius:0 0 18px 18px;z-index:10}
.phone-status{padding:8px 16px 4px;padding-top:30px;display:flex;justify-content:space-between;font-size:.72rem;font-weight:600;color:#1a1a1a;background:#f7f7f7;flex-shrink:0}
.status-icons{font-size:.62rem;letter-spacing:1px}
.phone-chat-bar{display:flex;align-items:center;gap:.6rem;padding:.55rem .85rem;background:#f7f7f7;border-bottom:1px solid #e0e0e0;flex-shrink:0}
.chat-bar-avatars{display:flex;font-size:1.1rem}
.chat-bar-name{font-size:.84rem;font-weight:700;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-bar-sub{font-size:.68rem;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-messages{flex:1;overflow-y:auto;padding:.75rem .65rem;display:flex;flex-direction:column;gap:.4rem;background:#f0ece8;scrollbar-width:none;pointer-events:none}
.phone-messages::-webkit-scrollbar{display:none}
.phone-reply-bar{display:flex;flex-direction:column;gap:.35rem;padding:.6rem .7rem .65rem;background:#fff;border-top:1px solid #ebebeb;flex-shrink:0}
.reply-label{font-size:.59rem;font-weight:700;color:#b0b0b0;text-transform:uppercase;letter-spacing:.09em;padding-left:.25rem;margin-bottom:.05rem}
.reply-choice{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:linear-gradient(135deg,#faf8ff 0%,#f3efff 100%);border:1.5px solid rgba(141,105,255,.25);border-radius:12px;padding:.4rem .45rem .4rem .75rem;font-size:.74rem;font-weight:600;color:#3a2d6b;font-family:inherit;cursor:pointer;text-align:left;transition:background .15s,border-color .15s,transform .1s;box-shadow:0 1px 3px rgba(141,105,255,.08)}
.reply-choice:hover{background:linear-gradient(135deg,#f0ebff 0%,#e8e0ff 100%);border-color:var(--primary);transform:translateY(-1px)}
.reply-choice-text{flex:1}
.reply-choice-send{width:22px;height:22px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── CHAT MESSAGES ── */
.typing-row{display:flex;align-items:center;gap:.4rem;font-size:.7rem;padding:.15rem 0}
.typing-name{font-weight:700;font-size:.66rem}
.typing-dots{display:flex;gap:3px;align-items:center}
.typing-dots span{width:5px;height:5px;background:#aaa;border-radius:50%;animation:dotBounce 1.1s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:.18s}
.typing-dots span:nth-child(3){animation-delay:.36s}
@keyframes dotBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.chat-msg{display:flex;align-items:flex-start;gap:.45rem;max-width:90%}
.family-msg{align-self:flex-start;flex-direction:row}
.user-msg{align-self:flex-end;flex-direction:row-reverse}
.msg-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:top center;flex-shrink:0;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.18);margin-top:1px}
.msg-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.msg-sender-name{font-size:.68rem;font-weight:700;padding-left:4px;line-height:1}
.msg-text-bubble{background:#fff;color:#1a1a1a;border-radius:4px 16px 16px 16px;padding:.45rem .52rem .45rem .7rem;font-size:.78rem;line-height:1.4;box-shadow:0 1px 3px rgba(0,0,0,.08);word-break:break-word;display:inline-flex;align-items:center;gap:.42rem}
.user-msg .msg-text-bubble{background:var(--primary);color:#fff;border-radius:16px 4px 16px 16px}
.msg-text-content{min-width:0;flex:1 1 auto}
.msg-audio-btn{width:21px;height:21px;border-radius:999px;border:1px solid rgba(141,105,255,.22);background:#F4F0FF;color:var(--primary);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 1px 3px rgba(35,25,70,.08)}
.user-msg .msg-audio-btn{border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.18);color:#fff}
.msg-audio-btn svg{width:12px;height:12px;display:block}
.msg-text-bubble.has-translation{flex-wrap:wrap}
.msg-text-bubble.has-translation .msg-text-content{flex:1 1 calc(100% - 30px)}
.msg-text-bubble.has-translation .msg-audio-btn{align-self:flex-start;margin-top:.06rem}
.msg-translation{flex:0 0 100%;width:100%}
.msg-gif-box{border-radius:12px;overflow:hidden;display:inline-flex;position:relative}
.is-gif .msg-body{gap:1px}
.chat-gif-img{width:100px;height:auto;display:block}
.giphy-attr{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.72);border-radius:4px;padding:2px 4px;color:#fff;font-size:.46rem;font-weight:800;line-height:1;letter-spacing:.04em;text-shadow:none;opacity:.9;pointer-events:none}.giphy-credit{margin-top:.85rem;display:flex;justify-content:center;opacity:.78;position:relative;z-index:1}.giphy-credit img{width:118px;height:auto;display:block}

/* reply bar tap animation */
.reply-choice.tap-press{transform:scale(.91)!important;background:linear-gradient(135deg,#e0d8ff 0%,#d0c8f8 100%)!important;border-color:var(--primary)!important;transition:transform .08s ease,background .08s ease!important}