.dot-ai-disclosure {
    --dot-ai-accent: #7238dc;
    clear: both;
    width: 100%;
    margin: 24px 0 16px;
}

.dot-ai-disclosure__button {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    width: fit-content;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid #d9dfe8;
    border-radius: 12px;
    background: #f8fafc;
    color: #252a32;
    box-shadow: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: max-width .38s cubic-bezier(.2, .8, .2, 1), background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.dot-ai-disclosure__button:focus-visible {
    outline: 3px solid rgba(114, 56, 220, .28);
    outline-offset: 3px;
}

.dot-ai-disclosure__icon {
    display: block;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
}

.dot-ai-disclosure__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.dot-ai-disclosure__text {
    display: block;
    flex: 0 1 auto;
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    opacity: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    white-space: nowrap;
    transform: translateX(-5px);
    transition: max-width .38s cubic-bezier(.2, .8, .2, 1), margin-left .3s ease, opacity .18s ease, transform .3s ease;
}

.dot-ai-disclosure__button[aria-expanded="true"],
.dot-ai-disclosure__button:focus-visible {
    max-width: 100%;
    border-color: #cdd5e0;
    background: #f4f6fa;
    box-shadow: 0 2px 8px rgba(26, 36, 54, .06);
}

.dot-ai-disclosure__button[aria-expanded="true"] .dot-ai-disclosure__text,
.dot-ai-disclosure__button:focus-visible .dot-ai-disclosure__text {
    max-width: 1100px;
    margin-left: 8px;
    opacity: 1;
    white-space: normal;
    transform: translateX(0);
}

@media (hover: hover) and (pointer: fine) {
    .dot-ai-disclosure__button:hover {
        max-width: 100%;
        border-color: #cdd5e0;
        background: #f4f6fa;
        box-shadow: 0 2px 8px rgba(26, 36, 54, .06);
    }

    .dot-ai-disclosure__button:hover .dot-ai-disclosure__text {
        max-width: 1100px;
        margin-left: 8px;
        opacity: 1;
        white-space: normal;
        transform: translateX(0);
    }
}

@media (max-width: 767px) {
    .dot-ai-disclosure {
        margin-top: 20px;
    }

    .dot-ai-disclosure__button[aria-expanded="true"],
    .dot-ai-disclosure__button:focus-visible {
        width: 100%;
        max-width: 100%;
    }

    .dot-ai-disclosure__button[aria-expanded="true"] .dot-ai-disclosure__text,
    .dot-ai-disclosure__button:focus-visible .dot-ai-disclosure__text {
        max-width: calc(100vw - 78px);
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dot-ai-disclosure__button,
    .dot-ai-disclosure__text {
        transition: none;
    }
}