/*
 * Chat interactions module UI (guided dock replacing composer input).
 * Scoped to unified chat wrapper to avoid global leakage.
 */

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) #hcgpt-input-box.hcgpt-interaction-active .hcgpt-input-wrapper {
    display: none;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) #hcgpt-input-box.hcgpt-interaction-active #hcgpt-right-controls {
    display: none;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) #hcgpt-interaction-dock {
    width: 100%;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-card {
    background: var(--hcgpt-input-bg);
    border: 1px solid var(--hcgpt-input-border);
    border-radius: calc(var(--hcgpt-input-radius) + 2px);
    padding: 14px 14px 12px;
    color: var(--hcgpt-color-text);
    box-shadow: var(--hcgpt-shadow-sm);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-meta {
    font-size: var(--hcgpt-font-size-12);
    line-height: var(--hcgpt-line-height-130);
    color: var(--hcgpt-color-text-muted);
    margin-bottom: 6px;
    font-weight: var(--hcgpt-font-weight-semibold);
    font-family: var(--hcgpt-font-sans);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-question {
    margin: 0 0 12px;
    font-size: var(--hcgpt-font-size-18);
    line-height: var(--hcgpt-line-height-130);
    color: var(--hcgpt-color-text);
    font-family: var(--hcgpt-font-sans);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-options {
    display: grid;
    gap: 8px;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-option {
    display: grid;
    grid-template-columns: 20px 24px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    border: 1px solid var(--hcgpt-input-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--hcgpt-input-bg) 86%, transparent);
    padding: 8px 12px;
    cursor: pointer;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-option input {
    margin: 0;
    accent-color: var(--hcgpt-accent);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-option-index {
    color: var(--hcgpt-color-text-muted);
    font-weight: var(--hcgpt-font-weight-semibold);
    font-size: var(--hcgpt-font-size-14);
    font-family: var(--hcgpt-font-sans);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-option-label {
    color: var(--hcgpt-color-text);
    font-size: var(--hcgpt-font-size-15);
    line-height: var(--hcgpt-line-height-125);
    font-family: var(--hcgpt-font-sans);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-recommended {
    font-size: var(--hcgpt-font-size-11);
    font-weight: var(--hcgpt-font-weight-semibold);
    color: var(--hcgpt-accent);
    border: 1px solid color-mix(in srgb, var(--hcgpt-accent) 40%, var(--hcgpt-color-border));
    border-radius: 999px;
    padding: 3px 8px;
    font-family: var(--hcgpt-font-mono);
}

@supports selector(label:has(input:checked)) {
    :where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-option:has(input:checked) {
        border-color: color-mix(in srgb, var(--hcgpt-accent) 55%, var(--hcgpt-input-border));
        background: color-mix(in srgb, var(--hcgpt-accent) 10%, var(--hcgpt-input-bg));
    }
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-note {
    color: var(--hcgpt-color-text-muted);
    font-size: var(--hcgpt-font-size-14);
    padding: 8px 0 2px;
    font-family: var(--hcgpt-font-mono);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-other-wrap {
    margin-top: 10px;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-free-text {
    width: 100%;
    min-height: 78px;
    resize: vertical;
    border: 1px solid var(--hcgpt-input-border);
    border-radius: 14px;
    background: var(--hcgpt-input-bg);
    color: var(--hcgpt-color-text);
    padding: 10px 12px;
    font-size: var(--hcgpt-font-size-14);
    line-height: var(--hcgpt-line-height-135);
    font-family: var(--hcgpt-font-sans);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-free-text:focus-visible {
    outline: none;
    border-color: var(--hcgpt-color-focus-ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hcgpt-color-focus-ring) 28%, transparent);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-error {
    min-height: 18px;
    margin-top: 8px;
    font-size: var(--hcgpt-font-size-13);
    line-height: var(--hcgpt-line-height-130);
    color: var(--hcgpt-danger);
    font-family: var(--hcgpt-font-sans);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-btn {
    border-radius: 999px;
    border: 1px solid var(--hcgpt-input-border);
    min-height: 34px;
    padding: 0 12px;
    font-size: var(--hcgpt-font-size-14);
    font-weight: var(--hcgpt-font-weight-semibold);
    cursor: pointer;
    font-family: var(--hcgpt-font-sans);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-btn--ghost {
    background: transparent;
    color: var(--hcgpt-color-text-muted);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-btn--primary {
    border-color: color-mix(in srgb, var(--hcgpt-accent) 60%, var(--hcgpt-input-border));
    background: color-mix(in srgb, var(--hcgpt-accent) 86%, var(--hcgpt-surface));
    color: var(--hcgpt-color-text-on-accent, #fff);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-btn:disabled {
    opacity: var(--hcgpt-control-disabled-opacity);
    cursor: not-allowed;
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-esc {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--hcgpt-input-border);
    border-radius: 999px;
    font-size: var(--hcgpt-font-size-11);
    line-height: var(--hcgpt-line-height-120);
    color: var(--hcgpt-color-text-muted);
    font-family: var(--hcgpt-font-sans);
}

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) #hcgpt-stt-btn[aria-disabled="true"],
:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) #hcgpt-rec-btn[aria-disabled="true"],
:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) #hcgpt-stt-btn.hcgpt-interaction-voice-locked,
:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) #hcgpt-rec-btn.hcgpt-interaction-voice-locked {
    opacity: 0.5;
    pointer-events: none !important;
}

@media (max-width: 767.98px) {
    :where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-card {
        padding: 12px 10px 10px;
        border-radius: 18px;
    }

    :where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-question {
        font-size: var(--hcgpt-font-size-16);
        font-family: var(--hcgpt-font-sans);
    }

    :where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) .hcgpt-interaction-option {
        padding: 7px 10px;
        gap: 8px;
    }
}