/* IGNIPOST Chat palette (see ignipost/brand/BRAND-chat.md): the site tokens of ignipost-site.css, in Ink and Emerald.
   Buttons and links use the deeper "emerald text" greens so white and body text keep AA contrast. */

.ip-site.ip-profile-chat {
    --ip-ink: #0B1712;
    --ip-ink-rgb: 11, 23, 18;
    --ip-ember: #0E9F6E;
    --ip-ember-text: #0A7C55;
    --ip-accent: #0A7C55;
    --ip-accent-rgb: 14, 159, 110;
    --ip-flame: #34D399;
    --ip-flame-rgb: 52, 211, 153;
    --ip-rose: #08624A;
    --ip-accent-pale: #A7F3D0;
    --ip-accent-light: #6EE7B7;
    --ip-ivory: #F0FAF5;
    --ip-slate: #4A5A53;
    --ip-gradient: linear-gradient(135deg, #0B8259 0%, #0A7C55 55%, #075B43 100%);
    --ip-bg: #FFFFFF;
    --ip-surface: #FFFFFF;
    --ip-soft: #F0FAF5;
    --ip-text: #0B1712;
    --ip-muted: #4A5A53;
    --ip-line: #E2ECE6;
    --ip-shadow: 0 1px 2px rgba(11, 23, 18, .04), 0 18px 48px -28px rgba(11, 23, 18, .22);
    --ip-footer-bg: #07110D;
    --lm-ink: var(--ip-ink);
    --lm-muted: var(--ip-muted);
    --lm-line: var(--ip-line);
    --lm-soft: var(--ip-soft);
    --lm-accent: var(--ip-ember);
}
html.dark .ip-site.ip-profile-chat, html[data-theme-resolved='dark'] .ip-site.ip-profile-chat {
    --ip-bg: #07110D;
    --ip-surface: #0D1A14;
    --ip-soft: #11221A;
    --ip-text: #EAF5EF;
    --ip-muted: #9FB5AB;
    --ip-line: #1D3128;
    --ip-ember-text: #34D399;
    --ip-accent: #34D399;
    --ip-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 48px -28px rgba(0, 0, 0, .7);
    --lm-ink: var(--ip-text);
    --lm-paper: var(--ip-surface);
}

/* Reading position bar under the header on every page (the post page draws its own). */
.ip-scroll-progress { position: fixed; inset: 0 0 auto 0; z-index: 120; height: 3px; pointer-events: none; }
.ip-scroll-progress span { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--ip-gradient); will-change: transform; }
.ip-site:has(.ip-reading-progress) .ip-scroll-progress { display: none; }

/* Home preview: the chat plays in message by message, then the next customer starts typing. */
.ip-chat-home .ip-thread .ip-bubble, .ip-chat-home .ip-thread .ip-quick { opacity: 0; transform: translateY(10px); animation: ip-chat-in .5s cubic-bezier(.2, .72, .2, 1) forwards; }
.ip-chat-home .ip-thread .ip-bubble.is-in { animation-delay: .35s; }
.ip-chat-home .ip-thread .ip-bubble.is-out { animation-delay: 1.4s; }
.ip-chat-home .ip-thread .ip-quick { animation-delay: 2.1s; }
@keyframes ip-chat-in { to { opacity: 1; transform: none; } }
.ip-typing { display: inline-flex; gap: 4px; align-self: flex-start; margin: 2px 0 0; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--ip-soft); opacity: 0; animation: ip-chat-in .4s ease 2.9s forwards; }
.ip-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ip-muted); animation: ip-dot 1.2s ease-in-out infinite; }
.ip-typing i:nth-child(2) { animation-delay: .15s; }
.ip-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ip-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Home preview: campaign card. */
.ip-campaign { display: grid; gap: 14px; padding: 18px; }
.ip-campaign-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ip-campaign-head strong { color: var(--ip-text); font-size: 15px; }
.ip-campaign-head span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--ip-soft); color: var(--ip-ember-text); font-size: 12px; font-weight: 700; }
.ip-campaign-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ip-campaign-facts div { padding: 10px 12px; border: 1px solid var(--ip-line); border-radius: 12px; background: var(--ip-surface); }
.ip-campaign-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ip-muted); }
.ip-campaign-facts dd { margin: 3px 0 0; color: var(--ip-text); font-size: 13px; font-weight: 600; }
.ip-campaign-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--ip-soft); }
.ip-campaign-bar span { display: block; width: var(--p); height: 100%; border-radius: inherit; background: var(--ip-gradient); transform-origin: 0 50%; animation: ip-grow 1.6s cubic-bezier(.2, .72, .2, 1) both; }
@keyframes ip-grow { from { transform: scaleX(0); } }
.ip-campaign-stats { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; color: var(--ip-muted); font-size: 13px; }
.ip-campaign-stats b { color: var(--ip-text); }

@media (prefers-reduced-motion: reduce) {
    .ip-chat-home .ip-thread .ip-bubble, .ip-chat-home .ip-thread .ip-quick, .ip-typing { opacity: 1; transform: none; animation: none; }
    .ip-typing i, .ip-campaign-bar span { animation: none; }
}