@layer blocks {
    .inquiry-assistant {
        max-width: 40rem;
        margin: 0 0 var(--space-unit);
    }

    /* The display of .button and .field would show what the script hides. */
    .inquiry-assistant [hidden] {
        display: none;
    }

    .inquiry-assistant[data-assistant-state='done'] .block-actions {
        display: none;
    }

    .inquiry-assistant-notice,
    .inquiry-assistant-typing {
        margin: 0 0 calc(var(--space-unit) * 0.5);
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .inquiry-assistant-log {
        display: flex;
        flex-direction: column;
        gap: calc(var(--space-unit) * 0.5);
        margin: 0 0 calc(var(--space-unit) * 0.5);
    }

    .inquiry-assistant-log:empty {
        display: none;
    }

    .inquiry-assistant-bubble {
        margin: 0;
        padding: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.75);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-surface);
        background: var(--tone-card);
        color: var(--tone-fg);
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .inquiry-assistant-bubble[data-from='visitor'] {
        align-self: flex-end;
        background: var(--tone-bg);
    }

    .inquiry-assistant-bubble[data-from='assistant'] {
        align-self: flex-start;
    }

    @container (min-width: 30rem) {
        .inquiry-assistant-bubble {
            max-width: 85%;
        }
    }

    .inquiry-assistant-link {
        margin: 0 0 calc(var(--space-unit) * 0.5);
        font-family: var(--font-ui);
    }

    .inquiry-assistant-answer textarea {
        resize: vertical;
    }
}