/*
 * Talking Time ReflectiveVideoUpload styles.
 *
 * Requirement 15.2, 15.3, 15.4, 28.3, 28.4, 5.5
 */

.tt-area .tt-reflective-video {
    background: var(--tt-surface);
    border-radius: var(--tt-radius-md);
    border: 1px solid rgba(74, 123, 200, 0.18);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tt-area .tt-reflective-video__title {
    margin: 0;
    font-size: var(--tt-font-size-md);
    font-weight: 600;
    color: var(--tt-text);
}

.tt-area .tt-reflective-video__info {
    margin: 0;
    font-size: var(--tt-font-size-sm);
    color: var(--tt-text-muted);
    line-height: 1.45;
}

.tt-area .tt-reflective-video__row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.tt-area .tt-reflective-video__file {
    font-family: var(--tt-font-base);
    font-size: var(--tt-font-size-sm);
    padding: 6px 8px;
    border-radius: var(--tt-radius-sm);
    border: 1px solid rgba(74, 123, 200, 0.35);
    background: var(--tt-surface);
    color: var(--tt-text);
    flex: 1;
    min-width: 200px;
}

.tt-area .tt-reflective-video__btn {
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: var(--tt-font-base);
    font-size: var(--tt-font-size-sm);
    font-weight: 600;
    padding: 8px 18px;
    border-radius: var(--tt-radius-sm);
    background: linear-gradient(
        135deg,
        var(--tt-story-purple) 0%,
        var(--tt-story-purple) 100%
    );
    color: var(--tt-text-inverse);
    box-shadow: var(--tt-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tt-area .tt-reflective-video__btn:hover:not(:disabled),
.tt-area .tt-reflective-video__btn:focus-visible:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--tt-shadow-md);
    outline: none;
}

.tt-area .tt-reflective-video__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tt-area .tt-reflective-video__error {
    margin: 0;
    padding: 8px 12px;
    background: rgba(194, 74, 74, 0.1);
    color: var(--tt-danger);
    border-radius: var(--tt-radius-sm);
    font-size: var(--tt-font-size-sm);
    font-weight: 500;
}

.tt-area .tt-reflective-video__status {
    margin: 0;
    font-size: var(--tt-font-size-sm);
    color: var(--tt-text-muted);
    font-style: italic;
}

.tt-area .tt-reflective-video__success {
    margin: 0;
    padding: 8px 12px;
    background: rgba(58, 154, 107, 0.12);
    color: var(--tt-success);
    border-radius: var(--tt-radius-sm);
    font-size: var(--tt-font-size-sm);
    font-weight: 500;
}

.tt-area .tt-reflective-video__probe {
    font-size: 12px;
    color: var(--tt-text-muted);
    margin: 0;
}

.tt-area .tt-reflective-video__progress {
    width: 100%;
    height: 6px;
    background: var(--tt-surface-raised);
    border-radius: 999px;
    overflow: hidden;
}

.tt-area .tt-reflective-video__progress-bar {
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--tt-story-purple) 0%,
        var(--tt-story-purple) 100%
    );
    transition: width 0.2s ease;
}