/* Live translation preview — isolated styles (public/chat-ai/features/translation/live/) */

.tr-live-preview {
    margin: 0 20px 10px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--tr-accent, #6366f1) 28%, transparent);
    background: linear-gradient(165deg,
            color-mix(in srgb, var(--tr-panel, #fff) 96%, var(--tr-accent, #6366f1) 4%) 0%,
            var(--tr-panel, #fff) 100%);
    box-shadow:
        0 4px 24px color-mix(in srgb, var(--tr-accent, #6366f1) 10%, transparent),
        0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset;
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.tr-live-preview.has-content {
    border-color: color-mix(in srgb, var(--tr-accent, #6366f1) 42%, transparent);
}

.tr-live-preview.is-streaming {
    box-shadow:
        0 6px 28px color-mix(in srgb, var(--tr-accent, #6366f1) 16%, transparent),
        0 0 0 1px color-mix(in srgb, var(--tr-accent, #6366f1) 12%, transparent);
}

.tr-live-preview[hidden] {
    display: none !important;
}

.tr-live-preview__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--tr-accent-soft, #eef2ff) 90%, transparent),
            color-mix(in srgb, var(--tr-accent, #6366f1) 8%, var(--tr-panel, #fff)));
    border-bottom: 1px solid color-mix(in srgb, var(--tr-accent, #6366f1) 12%, transparent);
}

.tr-live-preview__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tr-accent, #6366f1);
    letter-spacing: 0.01em;
}

.tr-live-preview__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 0 color-mix(in srgb, #f59e0b 50%, transparent);
    animation: tr-live-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

.tr-live-preview__dot[hidden] {
    display: none !important;
}

@keyframes tr-live-pulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 color-mix(in srgb, #f59e0b 45%, transparent);
    }

    50% {
        opacity: 0.65;
        box-shadow: 0 0 0 6px transparent;
    }
}

.tr-live-preview__head button {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tr-text, #111) 6%, transparent);
    color: var(--tr-muted, #64748b);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tr-live-preview__head button:hover {
    background: color-mix(in srgb, var(--tr-text, #111) 10%, transparent);
    color: var(--tr-text, #111);
}

.tr-live-preview__body {
    padding: 14px 18px 16px;
    font-size: 0.95rem;
    line-height: 1.75;
    font-weight: 450;
    color: var(--tr-text, #1e293b);
    max-height: 160px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
    tab-size: 2;
    scroll-behavior: smooth;
}

.tr-live-preview__body.is-loading {
    color: var(--tr-muted, #64748b);
    font-weight: 500;
}

.tr-live-preview__body.is-error {
    color: #dc2626;
    font-weight: 500;
    white-space: normal;
}

.tr-live-preview__body.is-empty:not(.is-loading) {
    color: var(--tr-muted, #94a3b8);
}

.tr-live-preview__shimmer {
    display: inline-block;
    background: linear-gradient(90deg,
            var(--tr-muted, #94a3b8) 0%,
            color-mix(in srgb, var(--tr-accent, #6366f1) 60%, #fff) 50%,
            var(--tr-muted, #94a3b8) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tr-live-shimmer 1.2s ease-in-out infinite;
}

@keyframes tr-live-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.tr-shell--live .tr-composer {
    padding-bottom: 6px;
}

@media (max-width: 640px) {
    .tr-live-preview {
        margin: 0 12px 8px;
        border-radius: 14px;
    }

    .tr-live-preview__body {
        max-height: 130px;
        padding: 12px 14px 14px;
        font-size: 0.9rem;
    }
}