/* AI Psychic chat — використовує токени теми (tokens.css). */
.aip { padding: var(--space-3xl) 0 var(--space-4xl); background: var(--gradient-hero); }
.aip__wrap { max-width: 820px; }
.aip__intro { text-align: center; margin-bottom: var(--space-xl); }
.aip__intro h1 { font-size: var(--fs-h1); margin: var(--space-md) 0; color: var(--color-white); }
.aip__intro p { color: var(--color-text-secondary); max-width: 60ch; margin: 0 auto; line-height: 1.6; }
.aip__intro .section-badge {
    display: inline-block; padding: 0.25rem 0.9rem; border-radius: 999px; font-size: var(--fs-xs);
    letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-light);
    background: var(--color-bg-glass); border: 1px solid var(--color-border);
}

.aip__chat {
    background: var(--color-bg-card); border: 1px solid var(--color-border-glow); border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: hidden; display: flex; flex-direction: column;
}
.aip__bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
    padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); background: var(--color-bg-glass);
}
.aip__who { display: flex; align-items: center; gap: var(--space-md); min-width: 0; }
.aip__who strong { display: block; color: var(--color-white); font-family: var(--font-heading); }
.aip__role { color: var(--color-text-muted); font-size: var(--fs-xs); }
.aip__avatar {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    background: var(--gradient-btn); color: #fff; font-size: 1.3rem;
}
.aip__cta-top { white-space: nowrap; }

.aip__log {
    height: min(52vh, 440px); min-height: 280px; overflow-y: auto; padding: var(--space-lg);
    display: flex; flex-direction: column; gap: var(--space-md); scroll-behavior: smooth;
}
.aip__log:focus-visible, .aip__chip:focus-visible, .aip__form textarea:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 2px; }
.aip__msg { max-width: 82%; padding: .7rem 1rem; border-radius: 16px; line-height: 1.55; font-size: var(--fs-body); overflow-wrap: anywhere; }
.aip__msg p { margin: 0; }
.aip__msg--bot { align-self: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); border-bottom-left-radius: 4px; }
.aip__msg--user { align-self: flex-end; background: var(--gradient-btn); color: #fff; border-bottom-right-radius: 4px; }
.aip__msg--error { align-self: flex-start; background: rgba(236, 72, 153, .1); border: 1px solid rgba(236, 72, 153, .4); color: var(--color-text); border-bottom-left-radius: 4px; }

.aip__typing { display: flex; align-items: center; gap: 5px; padding: 0 var(--space-lg) var(--space-md); }
.aip__typing[hidden] { display: none; }
.aip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-light); animation: aip-bounce 1.2s infinite ease-in-out; }
.aip__dot:nth-child(2) { animation-delay: .15s; }
.aip__dot:nth-child(3) { animation-delay: .3s; }
@keyframes aip-bounce { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .aip__dot { animation: none; opacity: .7; } .aip__log { scroll-behavior: auto; } }

.aip__quiz {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
    margin: 0 var(--space-lg) var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: 14px;
    background: var(--gradient-card); border: 1px solid var(--color-border-glow);
}
.aip__quiz[hidden] { display: none; }
.aip__quiz strong { color: var(--color-white); font-family: var(--font-heading); }
.aip__quiz p { margin: .25rem 0 0; color: var(--color-text-secondary); font-size: var(--fs-small); }

.aip__chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: 0 var(--space-lg) var(--space-md); }
.aip__chips[hidden] { display: none; }
.aip__chip {
    cursor: pointer; padding: .45rem .9rem; border-radius: 999px; font: inherit; font-size: var(--fs-small);
    color: var(--color-primary-light); background: var(--color-bg-glass); border: 1px solid var(--color-border);
}
.aip__chip:hover { background: var(--color-bg-glass-hover); }

.aip__form { display: flex; gap: var(--space-sm); padding: var(--space-md) var(--space-lg) var(--space-lg); border-top: 1px solid var(--color-border); align-items: flex-end; }
.aip__form textarea {
    flex: 1; resize: none; min-height: 48px; max-height: 140px; padding: .8rem 1rem; border-radius: 14px;
    border: 1px solid var(--color-border); background: var(--color-bg-deep); color: var(--color-text); font: inherit; line-height: 1.4;
}
.aip__form textarea::placeholder { color: var(--color-text-muted); }
.aip__send[disabled] { opacity: .6; cursor: not-allowed; }
.aip__note { margin: var(--space-lg) auto 0; max-width: 70ch; text-align: center; font-size: var(--fs-xs); line-height: 1.6; color: var(--color-text-muted); }
.aip__note a { color: var(--color-primary-light); text-decoration: underline; }
.aip__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
    .aip { padding-top: var(--space-xl); }
    .aip__bar { flex-wrap: wrap; }
    .aip__cta-top { width: 100%; justify-content: center; }
    .aip__msg { max-width: 92%; }
    .aip__log { height: 46vh; padding: var(--space-md); }
    .aip__quiz { margin-left: var(--space-md); margin-right: var(--space-md); }
    .aip__quiz .btn { width: 100%; }
    .aip__chips, .aip__form, .aip__typing { padding-left: var(--space-md); padding-right: var(--space-md); }
}