/*
 * TIA AI Ask
 *
 * 配色・角丸はプラグイン専用変数 → テーマ変数 → 固定値の順に解決する。
 * テーマ側で --primary 等を定義しているサイトではブランド色へ自動で追随し、
 * 定義していないサイトでは固定値が使われる。サイトごとのCSS分岐は不要。
 */

.tia-ai-ask {
    margin: 24px 0;
}

.tia-ai-ask__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
    border: 1px solid var(--tia-ai-ask-primary, var(--primary, #2563eb));
    border-radius: var(--tia-ai-ask-radius, var(--radius-sm, 8px));
    background: var(--tia-ai-ask-surface, var(--surface-container, #ffffff));
    color: var(--tia-ai-ask-primary, var(--primary, #2563eb));
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background 160ms ease, color 160ms ease;
}

.tia-ai-ask__button:hover,
.tia-ai-ask__button:focus {
    background: var(--tia-ai-ask-primary, var(--primary, #2563eb));
    color: var(--tia-ai-ask-surface, var(--surface-container, #ffffff));
}

.tia-ai-ask__button:focus-visible {
    outline: 2px solid var(--tia-ai-ask-primary, var(--primary, #2563eb));
    outline-offset: 2px;
}

.tia-ai-ask__note {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tia-ai-ask-muted, var(--muted, #47566b));
}

@media (max-width: 640px) {
    .tia-ai-ask__button {
        display: flex;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tia-ai-ask__button {
        transition: none;
    }
}