/* Live Transcript Panel Styles */

.transcript-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.recording-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-error);
    animation: recording-pulse 1s infinite;
}

@keyframes recording-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* Transcript Content */
.transcript-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--panel-padding);
    scroll-behavior: smooth;
}

.transcript-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Transcript Lines */
.transcript-line {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    opacity: 0;
    transform: translateY(10px);
    animation: transcript-appear 0.3s ease-out forwards;
}

.transcript-line:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

@keyframes transcript-appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.transcript-speaker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
}

.speaker-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.speaker-avatar.agent {
    background: linear-gradient(135deg, var(--color-agent) 0%, var(--color-primary-light) 100%);
}

.speaker-avatar.customer {
    background: linear-gradient(135deg, var(--color-customer) 0%, var(--color-success-light) 100%);
}

.speaker-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.speaker-name.agent {
    color: var(--color-agent);
}

.speaker-name.customer {
    color: var(--color-customer);
}

.transcript-body {
    flex: 1;
    min-width: 0;
}

.transcript-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.transcript-time {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* Keyword Highlighting */
.highlight-amount {
    background: linear-gradient(to bottom, transparent 60%, rgba(46, 132, 74, 0.2) 60%);
    font-weight: 500;
    color: var(--color-success);
}

.highlight-account {
    background: linear-gradient(to bottom, transparent 60%, rgba(1, 118, 211, 0.2) 60%);
    font-weight: 500;
    color: var(--color-primary);
}

.highlight-name {
    background: linear-gradient(to bottom, transparent 60%, rgba(127, 63, 191, 0.2) 60%);
    font-weight: 500;
    color: var(--color-ai);
}

.highlight-action {
    background: linear-gradient(to bottom, transparent 60%, rgba(221, 122, 1, 0.2) 60%);
    font-weight: 500;
    color: var(--color-warning);
}

/* Active Line Indicator */
.transcript-line.active {
    background: var(--color-surface-alt);
    margin-left: calc(var(--panel-padding) * -1);
    margin-right: calc(var(--panel-padding) * -1);
    padding-left: var(--panel-padding);
    padding-right: var(--panel-padding);
    border-left: 3px solid var(--color-primary);
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 0;
}

.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-muted);
    animation: typing-bounce 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-6px);
    }
}

/* Scroll to latest button */
.scroll-to-latest {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 8px 16px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--transition-base);
}

.scroll-to-latest.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-to-latest:hover {
    background: var(--color-primary-dark);
}

.scroll-to-latest svg {
    width: 14px;
    height: 14px;
}