/*
 * Maria UI
 * Shared presentation contract for Maria as the recurring explanatory and
 * working voice across MariaStacks. This layer is presentation-only.
 */

:root {
    --ms-maria-accent: #F3ACBD;
    --ms-maria-border: rgba(243, 172, 189, 0.34);
    --ms-maria-text: rgba(255,255,255,0.70);
    --ms-maria-muted: rgba(255,255,255,0.46);
    --ms-maria-response-radius: 18px;
}

.ms-maria-label {
    display: block;
    margin: 0;
    color: var(--ms-maria-accent);
    font-size: var(--ms-maria-label-size, 1rem);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
}

.ms-maria-text {
    color: var(--ms-maria-text);
}

.ms-maria-response {
    box-sizing: border-box;
    border: 1px solid var(--ms-maria-border);
    border-radius: var(--ms-maria-response-radius);
    padding: clamp(20px, 2.4vw, 28px);
    background: transparent;
}

.ms-maria-working {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ms-maria-working__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 24px;
}

.ms-maria-working__dots span {
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 50%;
    background: rgba(255,255,255,0.32);
    animation: ms-maria-thinking 1.2s ease-in-out infinite;
}

.ms-maria-working__dots span:nth-child(2) {
    animation-delay: 0.14s;
}

.ms-maria-working__dots span:nth-child(3) {
    animation-delay: 0.28s;
}

.ms-maria-working__status {
    margin-top: 9px;
    color: var(--ms-maria-muted);
    font-size: var(--ms-maria-status-size, 0.8rem);
    line-height: 1.45;
    letter-spacing: 0.01em;
}

@keyframes ms-maria-thinking {
    0%,
    60%,
    100% {
        transform: translateY(0) scale(1);
        background: rgba(255,255,255,0.32);
    }

    30% {
        transform: translateY(-4px) scale(1.22);
        background: var(--ms-maria-accent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ms-maria-working__dots span {
        animation: none;
        background: rgba(255,255,255,0.42);
    }

    .ms-maria-working__dots span:nth-child(2) {
        background: var(--ms-maria-accent);
    }
}