/* _content/Ayva.Calls/Components/Admin/AdminCallTranscript.razor.rz.scp.css */
/*
 * AdminCallTranscript Component Styles
 * Admin-specific styling extending the base transcript component.
 * Uses CSS variables from ayva-theme.css for consistency.
 */

/* ==========================================================================
   ADMIN TRANSCRIPT CONTAINER OVERRIDE
   ========================================================================== */

[b-22n0o959y4] .admin-transcript {
    border-color: var(--accent-color);
    border-width: 1px;
}

/* ==========================================================================
   ADMIN HEADER
   ========================================================================== */

.admin-header[b-22n0o959y4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    background: var(--accent-color-5);
    flex-wrap: wrap;
}

.header-left[b-22n0o959y4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 200px;
}

.header-right[b-22n0o959y4] {
    flex-shrink: 0;
}

/* Caller Info Section */
.caller-info[b-22n0o959y4] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.direction-icon[b-22n0o959y4] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--bg-hover);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.caller-details[b-22n0o959y4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.caller-name[b-22n0o959y4] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.caller-phone[b-22n0o959y4] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

/* Call Info Section */
.call-info[b-22n0o959y4] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.direction-badge[b-22n0o959y4] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: capitalize;
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.direction-badge.inbound[b-22n0o959y4] {
    background: var(--success-color-15);
    color: var(--success-color);
}

.direction-badge.outbound[b-22n0o959y4] {
    background: var(--info-color-15);
    color: var(--info-color);
}

.separator[b-22n0o959y4] {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.duration[b-22n0o959y4] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.recording-badge[b-22n0o959y4] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--error-color-15);
    color: var(--error-color);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.recording-dot[b-22n0o959y4] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--error-color);
    animation: recordingPulse-b-22n0o959y4 1.5s ease-in-out infinite;
}

@keyframes recordingPulse-b-22n0o959y4 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ==========================================================================
   ADMIN INPUT AREA
   ========================================================================== */

.admin-input[b-22n0o959y4] {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    border-top: 1px solid var(--border-color);
    background: var(--white-overlay-02);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Input Controls Row */
.input-controls[b-22n0o959y4] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

/* Speaker Toggle Buttons */
.speaker-toggle[b-22n0o959y4] {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.toggle-btn[b-22n0o959y4] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.toggle-btn svg[b-22n0o959y4] {
    flex-shrink: 0;
}

.toggle-btn:not(:last-child)[b-22n0o959y4] {
    border-right: 1px solid var(--border-color);
}

.toggle-btn:hover:not(.active)[b-22n0o959y4] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.toggle-btn.active[b-22n0o959y4] {
    background: var(--accent-color);
    color: white;
}

/* Silent Mode Toggle */
.silent-toggle[b-22n0o959y4] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.silent-toggle:hover[b-22n0o959y4] {
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.silent-toggle:has(input:checked)[b-22n0o959y4] {
    background: var(--warning-color-15);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.silent-toggle input[b-22n0o959y4] {
    display: none;
}

.silent-toggle svg[b-22n0o959y4] {
    flex-shrink: 0;
}

/* Shortcut Hint */
.shortcut-hint[b-22n0o959y4] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-left: auto;
}

/* Input Wrapper */
.input-wrapper[b-22n0o959y4] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-sm);
    transition: all var(--transition-fast);
}

.input-wrapper:focus-within[b-22n0o959y4] {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color-10);
}

.input-wrapper input[b-22n0o959y4] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-sm);
    padding: var(--space-sm) var(--space-md);
    outline: none;
}

.input-wrapper input[b-22n0o959y4]::placeholder {
    color: var(--text-secondary);
}

/* Send Button */
.btn-send[b-22n0o959y4] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-send svg[b-22n0o959y4] {
    flex-shrink: 0;
}

.btn-send:disabled[b-22n0o959y4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-send.active[b-22n0o959y4] {
    background: var(--accent-gradient);
    color: white;
}

.btn-send.active:hover:not(:disabled)[b-22n0o959y4] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-color-30);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .admin-header[b-22n0o959y4] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-right[b-22n0o959y4] {
        margin-top: var(--space-md);
    }

    .input-controls[b-22n0o959y4] {
        flex-direction: column;
        align-items: flex-start;
    }

    .shortcut-hint[b-22n0o959y4] {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .admin-header[b-22n0o959y4] {
        padding: var(--space-md);
    }

    .admin-input[b-22n0o959y4] {
        padding: var(--space-md);
    }

    .caller-name[b-22n0o959y4] {
        font-size: var(--text-base);
    }

    .speaker-toggle[b-22n0o959y4] {
        width: 100%;
    }

    .toggle-btn[b-22n0o959y4] {
        flex: 1;
        justify-content: center;
    }
}
/* _content/Ayva.Calls/Components/Admin/AdminPresenceIndicator.razor.rz.scp.css */
/*
 * AdminPresenceIndicator Component Styles
 * Small badge showing admin viewers currently watching the call.
 * Uses CSS variables from ayva-theme.css for consistency.
 */

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.admin-presence-indicator[b-9bkwua7vlb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 8px;
    background: var(--accent-color-10);
    border: 1px solid var(--accent-color-20);
    border-radius: var(--radius-full);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
}

.admin-presence-indicator:hover[b-9bkwua7vlb] {
    background: var(--accent-color-15);
    border-color: var(--accent-color);
}

/* ==========================================================================
   ICON & COUNT
   ========================================================================== */

.presence-icon[b-9bkwua7vlb] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
}

.presence-icon svg[b-9bkwua7vlb] {
    flex-shrink: 0;
}

.presence-count[b-9bkwua7vlb] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--accent-color);
}

/* ==========================================================================
   POPOVER
   ========================================================================== */

.presence-popover[b-9bkwua7vlb] {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    padding: var(--space-sm);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 100;
    animation: popoverIn-b-9bkwua7vlb 0.2s ease-out;
}

.presence-popover[b-9bkwua7vlb]::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}

@keyframes popoverIn-b-9bkwua7vlb {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ==========================================================================
   POPOVER CONTENT
   ========================================================================== */

.popover-header[b-9bkwua7vlb] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
}

.viewer-list[b-9bkwua7vlb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.viewer-item[b-9bkwua7vlb] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.viewer-dot[b-9bkwua7vlb] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success-color);
    flex-shrink: 0;
    animation: dotPulse-b-9bkwua7vlb 2s ease-in-out infinite;
}

@keyframes dotPulse-b-9bkwua7vlb {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 var(--success-color-40);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 4px transparent;
    }
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 480px) {
    .presence-popover[b-9bkwua7vlb] {
        left: auto;
        right: 0;
        transform: none;
    }

    .presence-popover[b-9bkwua7vlb]::before {
        left: auto;
        right: 16px;
        transform: rotate(45deg);
    }
}
/* _content/Ayva.Calls/Components/Admin/CallControlPanel.razor.rz.scp.css */
/*
 * CallControlPanel Component Styles
 * Control buttons and mode switcher for admin call management.
 * Uses CSS variables from ayva-theme.css for consistency.
 */

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.call-control-panel[b-4nnsibw6bq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

/* ==========================================================================
   CONTROL BUTTONS ROW
   ========================================================================== */

.control-buttons[b-4nnsibw6bq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.control-btn[b-4nnsibw6bq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    min-width: 64px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.control-btn svg[b-4nnsibw6bq] {
    flex-shrink: 0;
}

.btn-label[b-4nnsibw6bq] {
    font-weight: var(--font-medium);
}

/* Control Button Hover States */
.control-btn:hover:not(.danger)[b-4nnsibw6bq] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.control-btn:active:not(.danger)[b-4nnsibw6bq] {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
}

.control-btn:focus-visible[b-4nnsibw6bq] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Active State */
.control-btn.active[b-4nnsibw6bq] {
    background: var(--accent-color-15);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.control-btn.active svg[b-4nnsibw6bq] {
    color: var(--accent-color);
}

/* Listen Button Specific */
.control-btn.listen.active[b-4nnsibw6bq] {
    background: var(--success-color-15);
    border-color: var(--success-color);
    color: var(--success-color);
}

.control-btn.listen.active svg[b-4nnsibw6bq] {
    color: var(--success-color);
    animation: pulse-b-4nnsibw6bq 1.5s ease-in-out infinite;
}

/* Mic Button Specific */
.control-btn.mic.active[b-4nnsibw6bq] {
    background: var(--error-color-15);
    border-color: var(--error-color);
    color: var(--error-color);
}

.control-btn.mic.active svg[b-4nnsibw6bq] {
    color: var(--error-color);
}

/* Hangup Button - Danger Style */
.control-btn.danger[b-4nnsibw6bq] {
    background: var(--error-color-10);
    border-color: var(--error-color);
    color: var(--error-color);
}

.control-btn.danger:hover[b-4nnsibw6bq] {
    background: var(--error-color);
    color: white;
}

.control-btn.danger:active[b-4nnsibw6bq] {
    transform: scale(0.95);
}

/* ==========================================================================
   MODE SWITCHER
   ========================================================================== */

.mode-switcher[b-4nnsibw6bq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.mode-label[b-4nnsibw6bq] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
}

.mode-options[b-4nnsibw6bq] {
    display: flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.mode-option[b-4nnsibw6bq] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mode-option svg[b-4nnsibw6bq] {
    flex-shrink: 0;
}

.mode-option input[b-4nnsibw6bq] {
    display: none;
}

.mode-option:not(:last-child)[b-4nnsibw6bq] {
    border-right: 1px solid var(--border-color);
}

.mode-option:hover:not(.active)[b-4nnsibw6bq] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.mode-option:focus-visible[b-4nnsibw6bq] {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
    z-index: 1;
}

.mode-option:active:not(.active)[b-4nnsibw6bq] {
    background: var(--bg-active);
}

.mode-option.active[b-4nnsibw6bq] {
    background: var(--accent-color);
    color: white;
    box-shadow: inset 0 2px 4px var(--black-overlay-20);
}

/* Mode Option Icons in Active State */
.mode-option.active svg[b-4nnsibw6bq] {
    color: white;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes pulse-b-4nnsibw6bq {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 640px) {
    .call-control-panel[b-4nnsibw6bq] {
        padding: var(--space-md);
    }

    .control-buttons[b-4nnsibw6bq] {
        gap: var(--space-sm);
    }

    .control-btn[b-4nnsibw6bq] {
        padding: var(--space-sm);
        min-width: 52px;
    }

    .control-btn svg[b-4nnsibw6bq] {
        width: 18px;
        height: 18px;
    }

    .mode-options[b-4nnsibw6bq] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .mode-option[b-4nnsibw6bq] {
        flex: 1;
        min-width: 90px;
        justify-content: center;
    }

    .mode-option:not(:last-child)[b-4nnsibw6bq] {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
}

@media (max-width: 380px) {
    .control-buttons[b-4nnsibw6bq] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
    }

    .control-btn[b-4nnsibw6bq] {
        min-width: unset;
    }

    .control-btn.hangup[b-4nnsibw6bq] {
        grid-column: span 3;
    }
}
/* _content/Ayva.Calls/Components/Admin/CallMetadataPanel.razor.rz.scp.css */
/*
 * CallMetadataPanel Component Styles
 * Right-side stats panel showing call metadata and real-time analytics.
 * Uses CSS variables from ayva-theme.css for consistency.
 */

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.call-metadata-panel[b-hrtspia84h] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    min-width: 180px;
}

/* ==========================================================================
   METADATA ITEMS
   ========================================================================== */

.metadata-item[b-hrtspia84h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 70px;
}

.metadata-label[b-hrtspia84h] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.metadata-value[b-hrtspia84h] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

/* ==========================================================================
   DURATION
   ========================================================================== */

.metadata-item.duration .metadata-value[b-hrtspia84h] {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--accent-color);
}

/* ==========================================================================
   WORD COUNTS
   ========================================================================== */

.word-count-row[b-hrtspia84h] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.count[b-hrtspia84h] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.count svg[b-hrtspia84h] {
    flex-shrink: 0;
    opacity: 0.7;
}

.count.caller[b-hrtspia84h] {
    color: var(--text-secondary);
}

.count.agent[b-hrtspia84h] {
    color: var(--accent-color);
}

.word-count-row .separator[b-hrtspia84h] {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

/* ==========================================================================
   SENTIMENT INDICATOR
   ========================================================================== */

.sentiment-indicator[b-hrtspia84h] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: capitalize;
}

.sentiment-indicator.positive[b-hrtspia84h] {
    background: var(--success-color-15);
    color: var(--success-color);
}

.sentiment-indicator.negative[b-hrtspia84h] {
    background: var(--error-color-15);
    color: var(--error-color);
}

.sentiment-indicator.neutral[b-hrtspia84h] {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* ==========================================================================
   TOPICS LIST
   ========================================================================== */

.topics-list[b-hrtspia84h] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.topic-tag[b-hrtspia84h] {
    display: inline-block;
    padding: 2px 6px;
    background: var(--accent-color-10);
    border: 1px solid var(--accent-color-20);
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: var(--font-medium);
    color: var(--accent-color);
    white-space: nowrap;
}

.topic-more[b-hrtspia84h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: var(--font-medium);
    color: var(--text-muted);
}

/* ==========================================================================
   TRANSFERS
   ========================================================================== */

.transfer-count[b-hrtspia84h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--warning-color-15);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--warning-color);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .call-metadata-panel[b-hrtspia84h] {
        justify-content: space-between;
    }

    .metadata-item[b-hrtspia84h] {
        min-width: 60px;
    }
}

@media (max-width: 480px) {
    .call-metadata-panel[b-hrtspia84h] {
        padding: var(--space-sm);
        gap: var(--space-sm);
    }

    .metadata-item.topics[b-hrtspia84h] {
        width: 100%;
    }
}
/* _content/Ayva.Calls/Components/Admin/CompletedCallDetailPanel.razor.rz.scp.css */
.completed-call-panel[b-9lc0263812] {
    padding: var(--space-md);
}

.loading-container[b-9lc0263812] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}

.call-header-section[b-9lc0263812] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--glass-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.caller-info[b-9lc0263812] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.caller-details[b-9lc0263812] {
    display: flex;
    flex-direction: column;
}

.call-meta-info[b-9lc0263812] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
}

.recording-section[b-9lc0263812],
.transcript-section[b-9lc0263812],
.stats-section[b-9lc0263812] {
    background: var(--glass-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.transcript-body[b-9lc0263812] {
    max-height: 500px;
    overflow-y: auto;
    padding: var(--space-sm);
}

.transcript-entry[b-9lc0263812] {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
}

.transcript-entry.speaker-caller[b-9lc0263812] {
    background: var(--accent-color-10);
    border-left-color: var(--accent-color);
}

.transcript-entry.speaker-agent[b-9lc0263812] {
    background: var(--success-color-10);
    border-left-color: var(--success-color);
}

.transcript-entry.speaker-system[b-9lc0263812] {
    background: var(--white-overlay-05);
    border-left-color: var(--text-muted);
}

.transcript-entry.injected[b-9lc0263812] {
    border-left-color: var(--warning-color);
}

.transcript-entry.entry-type-tool-call[b-9lc0263812],
.transcript-entry.entry-type-tool-result[b-9lc0263812] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

.entry-header[b-9lc0263812] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.speaker-name[b-9lc0263812] {
    font-weight: 600;
    font-size: 0.875rem;
}

.timestamp[b-9lc0263812] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.entry-content[b-9lc0263812] {
    line-height: 1.5;
}

.stat-item[b-9lc0263812] {
    text-align: center;
    padding: var(--space-sm);
}

@media (max-width: 768px) {
    .call-header-section[b-9lc0263812] {
        flex-direction: column;
        gap: var(--space-md);
    }

    .call-meta-info[b-9lc0263812] {
        align-items: flex-start;
    }
}
/* _content/Ayva.Calls/Components/Admin/LiveCallsPanel.razor.rz.scp.css */
.live-calls-panel[b-zlkxv9dtxi] {
    padding: var(--space-lg);
}

.panel-header[b-zlkxv9dtxi] {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.header-content[b-zlkxv9dtxi] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.loading-container[b-zlkxv9dtxi] {
    display: flex;
    justify-content: center;
    padding: var(--space-xl);
}

.empty-state[b-zlkxv9dtxi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    gap: var(--space-md);
    text-align: center;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.calls-list[b-zlkxv9dtxi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-md);
}

.call-card[b-zlkxv9dtxi] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    cursor: pointer;
    transition: var(--transition-normal);
}

.call-card:hover[b-zlkxv9dtxi] {
    transform: translateY(-2px);
    border-color: var(--accent-color);
    box-shadow: var(--shadow-lg);
}

.call-card.ai-handled[b-zlkxv9dtxi] {
    border-left: 3px solid var(--accent-color);
}

.call-card.human-handled[b-zlkxv9dtxi] {
    border-left: 3px solid var(--warning-color);
}

.call-header[b-zlkxv9dtxi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.caller-info[b-zlkxv9dtxi] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.caller-name[b-zlkxv9dtxi] {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.call-meta[b-zlkxv9dtxi] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.duration[b-zlkxv9dtxi] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.call-topics[b-zlkxv9dtxi] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.call-detail-view[b-zlkxv9dtxi] {
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

.detail-header[b-zlkxv9dtxi] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.recent-calls-section[b-zlkxv9dtxi] {
    margin-top: var(--space-lg);
}

.recent-calls-table[b-zlkxv9dtxi] {
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

@media (max-width: 768px) {
    .calls-list[b-zlkxv9dtxi] {
        grid-template-columns: 1fr;
    }

    .call-detail-view[b-zlkxv9dtxi] {
        min-height: 400px;
    }
}
/* _content/Ayva.Calls/Components/Base/CallTranscriptBase.razor.rz.scp.css */
/*
 * CallTranscriptBase Component Styles
 * Base styling for call transcript visualization with glassmorphism design.
 * Uses CSS variables from ayva-theme.css for consistency.
 */

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.call-transcript-container[b-h2vay19c1m] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 300px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    position: relative;
}

/* ==========================================================================
   LOADING OVERLAY
   ========================================================================== */

.loading-overlay[b-h2vay19c1m] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    background: var(--bg-card);
    z-index: 10;
}

.loading-overlay .spinner[b-h2vay19c1m] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin-b-h2vay19c1m 0.8s linear infinite;
}

.loading-overlay span[b-h2vay19c1m] {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ==========================================================================
   CALL ENDED OVERLAY
   ========================================================================== */

.call-ended-overlay[b-h2vay19c1m] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    background: var(--black-overlay-90);
    backdrop-filter: blur(4px);
    z-index: 10;
}

.call-ended-icon[b-h2vay19c1m] {
    color: var(--error-color);
    opacity: 0.8;
}

.call-ended-text[b-h2vay19c1m] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.end-reason[b-h2vay19c1m] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ==========================================================================
   TRANSCRIPT BODY
   ========================================================================== */

.transcript-body[b-h2vay19c1m] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    scroll-behavior: smooth;
}

/* Custom scrollbar for transcript */
.transcript-body[b-h2vay19c1m]::-webkit-scrollbar {
    width: 6px;
}

.transcript-body[b-h2vay19c1m]::-webkit-scrollbar-track {
    background: transparent;
}

.transcript-body[b-h2vay19c1m]::-webkit-scrollbar-thumb {
    background: var(--accent-color-30);
    border-radius: 3px;
}

.transcript-body[b-h2vay19c1m]::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color-50);
}

/* ==========================================================================
   TRANSCRIPT ENTRY
   ========================================================================== */

.transcript-entry[b-h2vay19c1m] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border-left: 3px solid transparent;
    animation: fadeInUp-b-h2vay19c1m 0.2s ease-out;
    max-width: 85%;
}

/* Speaker-specific styling */
.transcript-entry.speaker-caller[b-h2vay19c1m] {
    align-self: flex-start;
    border-left-color: var(--text-primary);
    background: var(--white-overlay-05);
}

.transcript-entry.speaker-agent[b-h2vay19c1m] {
    align-self: flex-end;
    border-left-color: var(--accent-color);
    border-left: none;
    border-right: 3px solid var(--accent-color);
    background: var(--accent-color-10);
}

.transcript-entry.speaker-system[b-h2vay19c1m] {
    align-self: center;
    border-left-color: var(--text-muted);
    background: var(--white-overlay-05);
    max-width: 70%;
    text-align: center;
}

/* Injected message styling */
.transcript-entry.injected[b-h2vay19c1m] {
    position: relative;
}

.transcript-entry.injected[b-h2vay19c1m]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -3px;
    width: 3px;
    height: 100%;
    background: var(--warning-color);
    border-radius: 2px 0 0 2px;
}

.transcript-entry.injected.speaker-agent[b-h2vay19c1m]::before {
    left: auto;
    right: -3px;
    border-radius: 0 2px 2px 0;
}

.transcript-entry.silent-injection[b-h2vay19c1m] {
    opacity: 0.7;
    border-style: dashed;
}

/* Entry type styling */
.transcript-entry.entry-type-tool-call[b-h2vay19c1m],
.transcript-entry.entry-type-tool-result[b-h2vay19c1m] {
    background: var(--info-color-10);
    border-left-color: var(--info-color);
    max-width: 70%;
}

.transcript-entry.entry-type-system-note[b-h2vay19c1m] {
    background: var(--white-overlay-05);
    border-left-color: var(--text-muted);
    font-style: italic;
}

/* Entry header */
.entry-header[b-h2vay19c1m] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
}

.speaker-label[b-h2vay19c1m] {
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}

.speaker-agent .speaker-label[b-h2vay19c1m] {
    color: var(--accent-light);
}

.timestamp[b-h2vay19c1m] {
    color: var(--text-muted);
    font-size: 0.7rem;
}

/* Injection badge */
.injection-badge[b-h2vay19c1m] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px 6px;
    background: var(--warning-color-20);
    border-radius: var(--radius-sm);
    color: var(--warning-text);
    font-size: 0.65rem;
}

.injection-badge svg[b-h2vay19c1m] {
    flex-shrink: 0;
}

.injector-name[b-h2vay19c1m] {
    opacity: 0.8;
}

/* Entry content */
.entry-content[b-h2vay19c1m] {
    color: var(--text-primary);
    font-size: var(--text-sm);
    line-height: 1.5;
    word-wrap: break-word;
}

/* Tool call content */
.tool-call-content[b-h2vay19c1m] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.tool-icon[b-h2vay19c1m] {
    display: flex;
    align-items: center;
    color: var(--info-color);
}

.tool-name[b-h2vay19c1m] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--info-text);
    background: var(--info-color-15);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.tool-status[b-h2vay19c1m] {
    font-size: var(--text-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.tool-status.success[b-h2vay19c1m] {
    background: var(--success-bg);
    color: var(--success-text);
}

.tool-status.failed[b-h2vay19c1m] {
    background: var(--error-bg);
    color: var(--error-text);
}

/* Confidence indicator */
.confidence-indicator[b-h2vay19c1m] {
    height: 2px;
    background: var(--border-color);
    border-radius: 1px;
    margin-top: var(--space-xs);
    overflow: hidden;
}

.confidence-bar[b-h2vay19c1m] {
    display: block;
    height: 100%;
    width: var(--confidence, 0%);
    background: var(--success-color);
    transition: width var(--transition-smooth);
}

/* ==========================================================================
   SPEAKING INDICATOR
   ========================================================================== */

.speaking-indicator[b-h2vay19c1m] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--white-overlay-03);
    border-radius: var(--radius-lg);
    animation: fadeIn-b-h2vay19c1m 0.3s ease-out;
}

.speaking-indicator.caller-speaking[b-h2vay19c1m] {
    align-self: flex-start;
}

.speaking-indicator.agent-speaking[b-h2vay19c1m] {
    align-self: flex-end;
}

.speaking-avatar[b-h2vay19c1m] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    border-radius: 50%;
    color: var(--text-secondary);
    animation: pulse-b-h2vay19c1m 1.5s ease-in-out infinite;
}

.speaking-avatar.agent[b-h2vay19c1m] {
    background: var(--accent-color-20);
    color: var(--accent-light);
}

.speaking-label[b-h2vay19c1m] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Waveform animation */
.waveform[b-h2vay19c1m] {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    padding-left: var(--space-sm);
}

.wave-bar[b-h2vay19c1m] {
    width: 3px;
    height: 8px;
    background: var(--success-color);
    border-radius: 2px;
    animation: waveform-b-h2vay19c1m 0.5s ease-in-out infinite;
    transform-origin: bottom;
}

.wave-bar:nth-child(1)[b-h2vay19c1m] { animation-delay: 0s; }
.wave-bar:nth-child(2)[b-h2vay19c1m] { animation-delay: 0.1s; }
.wave-bar:nth-child(3)[b-h2vay19c1m] { animation-delay: 0.2s; }
.wave-bar:nth-child(4)[b-h2vay19c1m] { animation-delay: 0.3s; }
.wave-bar:nth-child(5)[b-h2vay19c1m] { animation-delay: 0.4s; }

@keyframes waveform-b-h2vay19c1m {
    0%, 100% {
        height: 8px;
    }
    50% {
        height: calc(8px + var(--audio-level, 50%) * 0.12);
    }
}

/* ==========================================================================
   AI STATUS INDICATOR
   ========================================================================== */

.ai-status-indicator[b-h2vay19c1m] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background: var(--accent-color-10);
    border-top: 1px solid var(--border-color);
    animation: fadeIn-b-h2vay19c1m 0.2s ease-out;
}

.ai-status-icon[b-h2vay19c1m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

/* Thinking dots */
.thinking-dots[b-h2vay19c1m] {
    display: flex;
    gap: 4px;
}

.thinking-dots span[b-h2vay19c1m] {
    width: 6px;
    height: 6px;
    background: var(--accent-color);
    border-radius: 50%;
    animation: thinkingDot-b-h2vay19c1m 1.4s ease-in-out infinite;
}

.thinking-dots span:nth-child(1)[b-h2vay19c1m] { animation-delay: 0s; }
.thinking-dots span:nth-child(2)[b-h2vay19c1m] { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3)[b-h2vay19c1m] { animation-delay: 0.4s; }

@keyframes thinkingDot-b-h2vay19c1m {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Tool call icon */
.ai-status-indicator.tool_call .ai-status-icon svg[b-h2vay19c1m] {
    color: var(--info-color);
    animation: toolPulse-b-h2vay19c1m 1s ease-in-out infinite;
}

@keyframes toolPulse-b-h2vay19c1m {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Responding pulse ring */
.pulse-ring[b-h2vay19c1m] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    animation: pulseRing-b-h2vay19c1m 1.2s ease-out infinite;
}

@keyframes pulseRing-b-h2vay19c1m {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.ai-status-text[b-h2vay19c1m] {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.ai-status-elapsed[b-h2vay19c1m] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes fadeIn-b-h2vay19c1m {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp-b-h2vay19c1m {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin-b-h2vay19c1m {
    to { transform: rotate(360deg); }
}

@keyframes pulse-b-h2vay19c1m {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .transcript-entry[b-h2vay19c1m] {
        max-width: 95%;
        padding: var(--space-sm) var(--space-md);
    }

    .transcript-body[b-h2vay19c1m] {
        padding: var(--space-md);
    }

    .speaking-indicator[b-h2vay19c1m] {
        padding: var(--space-sm) var(--space-md);
    }
}

@media (max-width: 480px) {
    .entry-header[b-h2vay19c1m] {
        flex-wrap: wrap;
    }

    .injection-badge[b-h2vay19c1m] {
        margin-top: var(--space-xs);
    }

    .tool-call-content[b-h2vay19c1m] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* _content/Ayva.Calls/Components/Customer/CustomerCallTranscript.razor.rz.scp.css */
/*
 * CustomerCallTranscript Component Styles
 * Customer-facing call transcript styling with glassmorphism design.
 * Uses CSS variables from ayva-theme.css - NO hardcoded values.
 */

/* ==========================================================================
   CONTAINER CUSTOMIZATION
   ========================================================================== */

[b-51iyoymccx] .call-transcript-container.customer-transcript {
    background: linear-gradient(
        135deg,
        var(--bg-primary) 0%,
        var(--bg-secondary) 100%
    );
    border-color: var(--white-overlay-08);
    box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   CUSTOMER HEADER
   ========================================================================== */

.customer-header[b-51iyoymccx] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-color);
    background: var(--white-overlay-02);
}

.header-icon[b-51iyoymccx] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-gradient);
    border-radius: var(--radius-xl);
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 15px var(--accent-color-30);
}

.header-text[b-51iyoymccx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.header-text h2[b-51iyoymccx] {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.duration[b-51iyoymccx] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.call-status-badge[b-51iyoymccx] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--success-bg);
    border-radius: var(--radius-full);
    color: var(--success-color);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    flex-shrink: 0;
}

.call-status-badge .status-dot[b-51iyoymccx] {
    width: 8px;
    height: 8px;
    background: var(--success-color);
    border-radius: 50%;
    animation: statusPulse-b-51iyoymccx 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px var(--success-color-50);
}

@keyframes statusPulse-b-51iyoymccx {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* ==========================================================================
   CUSTOMER INPUT
   ========================================================================== */

.customer-input[b-51iyoymccx] {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-color);
    background: var(--white-overlay-02);
}

.input-wrapper[b-51iyoymccx] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-sm);
    transition: all var(--transition-fast);
}

.input-wrapper:focus-within[b-51iyoymccx] {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color-10);
}

.input-wrapper input[b-51iyoymccx] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: var(--font-primary);
    padding: var(--space-sm) var(--space-md);
    outline: none;
}

.input-wrapper input[b-51iyoymccx]::placeholder {
    color: var(--text-muted);
}

.input-wrapper input:disabled[b-51iyoymccx] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-send[b-51iyoymccx] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.btn-send:hover:not(:disabled)[b-51iyoymccx] {
    transform: scale(1.05);
    box-shadow: 0 4px 15px var(--accent-color-30);
}

.btn-send:active:not(:disabled)[b-51iyoymccx] {
    transform: scale(0.98);
}

.btn-send:disabled[b-51iyoymccx] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==========================================================================
   CUSTOMER FOOTER
   ========================================================================== */

.customer-footer[b-51iyoymccx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid var(--border-color);
    background: var(--white-overlay-02);
}

.btn-control[b-51iyoymccx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 120px;
}

.btn-control:hover:not(:disabled)[b-51iyoymccx] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.btn-control:active:not(:disabled)[b-51iyoymccx] {
    transform: translateY(0);
}

.btn-control:disabled[b-51iyoymccx] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-control.muted[b-51iyoymccx] {
    background: var(--warning-color-10);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.btn-control.muted:hover:not(:disabled)[b-51iyoymccx] {
    background: var(--warning-color-15);
}

.btn-end-call[b-51iyoymccx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    background: var(--error-bg);
    border: 1px solid var(--error-color);
    border-radius: var(--radius-lg);
    color: var(--error-color);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 140px;
}

.btn-end-call:hover:not(:disabled)[b-51iyoymccx] {
    background: var(--error-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--error-color-30);
}

.btn-end-call:active:not(:disabled)[b-51iyoymccx] {
    transform: translateY(0);
}

.btn-end-call:disabled[b-51iyoymccx] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
    .customer-header[b-51iyoymccx] {
        padding: var(--space-md) var(--space-lg);
        gap: var(--space-md);
    }

    .header-icon[b-51iyoymccx] {
        width: 48px;
        height: 48px;
    }

    .header-icon svg[b-51iyoymccx] {
        width: 24px;
        height: 24px;
    }

    .header-text h2[b-51iyoymccx] {
        font-size: var(--text-lg);
    }

    .customer-input[b-51iyoymccx] {
        padding: var(--space-sm) var(--space-md);
    }

    .customer-footer[b-51iyoymccx] {
        padding: var(--space-md) var(--space-lg);
        gap: var(--space-md);
    }

    .btn-control[b-51iyoymccx],
    .btn-end-call[b-51iyoymccx] {
        padding: var(--space-sm) var(--space-lg);
        min-width: 100px;
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    .customer-header[b-51iyoymccx] {
        flex-wrap: wrap;
    }

    .call-status-badge[b-51iyoymccx] {
        position: absolute;
        top: var(--space-md);
        right: var(--space-md);
    }

    .customer-footer[b-51iyoymccx] {
        flex-direction: column;
        gap: var(--space-md);
    }

    .btn-control[b-51iyoymccx],
    .btn-end-call[b-51iyoymccx] {
        width: 100%;
        justify-content: center;
    }

    /* Hide text labels on very small screens */
    .btn-control span[b-51iyoymccx],
    .btn-end-call span[b-51iyoymccx] {
        display: none;
    }

    .btn-control[b-51iyoymccx],
    .btn-end-call[b-51iyoymccx] {
        min-width: auto;
        padding: var(--space-md);
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.btn-send:focus-visible[b-51iyoymccx],
.btn-control:focus-visible[b-51iyoymccx],
.btn-end-call:focus-visible[b-51iyoymccx],
.input-wrapper input:focus-visible[b-51iyoymccx] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .call-status-badge .status-dot[b-51iyoymccx] {
        animation: none;
    }

    .btn-send[b-51iyoymccx],
    .btn-control[b-51iyoymccx],
    .btn-end-call[b-51iyoymccx] {
        transition: none;
    }
}
/* _content/Ayva.Calls/Components/Dialogs/CallForwardingModal.razor.rz.scp.css */
.dialog-header[b-cyk2j014iy] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.transfer-dialog-content[b-cyk2j014iy] {
    min-width: 400px;
    max-width: 500px;
    min-height: 300px;
}

.loading-state[b-cyk2j014iy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    gap: var(--space-md);
}

.transfer-tabs[b-cyk2j014iy] {
    background: transparent;
}

.tab-content[b-cyk2j014iy] {
    padding: var(--space-md) 0;
    max-height: 300px;
    overflow-y: auto;
}

.employee-list[b-cyk2j014iy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.employee-item[b-cyk2j014iy] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    border: 1px solid transparent;
    background: var(--white-overlay-03);
}

.employee-item:hover[b-cyk2j014iy] {
    background: var(--white-overlay-06);
}

.employee-item.selected[b-cyk2j014iy] {
    border-color: var(--accent-color);
    background: var(--accent-color-10);
}

.employee-details[b-cyk2j014iy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.employee-details .mud-typography[b-cyk2j014iy] {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.transfer-summary[b-cyk2j014iy] {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--white-overlay-03);
    border: 1px solid var(--border-color);
}

/* Scrollbar styling */
.tab-content[b-cyk2j014iy]::-webkit-scrollbar {
    width: 6px;
}

.tab-content[b-cyk2j014iy]::-webkit-scrollbar-track {
    background: transparent;
}

.tab-content[b-cyk2j014iy]::-webkit-scrollbar-thumb {
    background: var(--white-overlay-20);
    border-radius: 3px;
}

.tab-content[b-cyk2j014iy]::-webkit-scrollbar-thumb:hover {
    background: var(--white-overlay-30);
}

/* Responsive */
@media (max-width: 480px) {
    .transfer-dialog-content[b-cyk2j014iy] {
        min-width: unset;
        width: 100%;
    }
}
/* _content/Ayva.Calls/Components/Shared/AIStatusIndicator.razor.rz.scp.css */
/* ============================================
   AI STATUS INDICATOR STYLES
   ============================================ */

.ai-status-indicator[b-0unp6vdys5] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    animation: statusAppear-b-0unp6vdys5 0.3s ease-out;
    transition: all var(--transition-normal);
}

.ai-status-indicator:hover[b-0unp6vdys5] {
    border-color: var(--border-color-medium);
    box-shadow: var(--shadow-sm);
}

@keyframes statusAppear-b-0unp6vdys5 {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Status-specific styling */
.ai-status-indicator.status-idle[b-0unp6vdys5] {
    border-color: var(--border-color);
}

.ai-status-indicator.status-thinking[b-0unp6vdys5] {
    border-color: var(--accent-color-40);
    background: linear-gradient(135deg, var(--accent-color-10), var(--accent-color-5));
}

.ai-status-indicator.status-responding[b-0unp6vdys5] {
    border-color: var(--success-color-40);
    background: linear-gradient(135deg, var(--success-color-10), var(--success-color-5));
}

.ai-status-indicator.status-tool-call[b-0unp6vdys5] {
    border-color: var(--warning-color-40);
    background: linear-gradient(135deg, var(--warning-color-10), var(--warning-color-5));
}

/* ============================================
   STATUS ICON CONTAINER
   ============================================ */

.status-icon-container[b-0unp6vdys5] {
    position: relative;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status-icon-container .mud-icon-root[b-0unp6vdys5] {
    position: relative;
    z-index: 1;
}

/* ============================================
   THINKING SPINNER
   ============================================ */

.thinking-spinner[b-0unp6vdys5] {
    position: relative;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thinking-spinner .mud-icon-root[b-0unp6vdys5] {
    color: var(--accent-color);
}

.spinner-ring[b-0unp6vdys5] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spinRing-b-0unp6vdys5 1s linear infinite;
}

@keyframes spinRing-b-0unp6vdys5 {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   RESPONDING INDICATOR
   ============================================ */

.responding-indicator[b-0unp6vdys5] {
    position: relative;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.responding-indicator .mud-icon-root[b-0unp6vdys5] {
    color: var(--success-color);
}

.pulse-dot[b-0unp6vdys5] {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--success-color);
    border-radius: 50%;
    animation: pulseDot-b-0unp6vdys5 1.2s ease-in-out infinite;
}

@keyframes pulseDot-b-0unp6vdys5 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

/* ============================================
   TOOL INDICATOR
   ============================================ */

.tool-indicator[b-0unp6vdys5] {
    position: relative;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-indicator .mud-icon-root[b-0unp6vdys5] {
    color: var(--warning-color);
}

.tool-spinner[b-0unp6vdys5] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px dashed var(--warning-color);
    border-radius: 50%;
    animation: toolSpin-b-0unp6vdys5 2s linear infinite;
    opacity: 0.6;
}

@keyframes toolSpin-b-0unp6vdys5 {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   STATUS CONTENT
   ============================================ */

.status-content[b-0unp6vdys5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
    min-width: 0;
}

.status-label[b-0unp6vdys5] {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.status-thinking .status-label[b-0unp6vdys5] {
    color: var(--accent-color);
}

.status-responding .status-label[b-0unp6vdys5] {
    color: var(--success-color);
}

.status-tool-call .status-label[b-0unp6vdys5] {
    color: var(--warning-color);
}

.tool-name[b-0unp6vdys5] {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.tool-description[b-0unp6vdys5] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   ELAPSED TIMER
   ============================================ */

.elapsed-timer[b-0unp6vdys5] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
}

.elapsed-time[b-0unp6vdys5] {
    font-size: var(--text-xs);
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

/* ============================================
   CONFIDENCE BADGE
   ============================================ */

.confidence-badge[b-0unp6vdys5] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    transition: all var(--transition-fast);
}

.confidence-badge:hover[b-0unp6vdys5] {
    transform: scale(1.05);
}

.confidence-badge .mud-icon-root[b-0unp6vdys5] {
    font-size: 0.875rem;
}

.confidence-badge.high[b-0unp6vdys5] {
    background: var(--success-bg);
    color: var(--success-color);
}

.confidence-badge.medium[b-0unp6vdys5] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.confidence-badge.low[b-0unp6vdys5] {
    background: var(--error-bg);
    color: var(--error-color);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .ai-status-indicator[b-0unp6vdys5] {
        padding: 0.5rem 0.75rem;
    }

    .tool-description[b-0unp6vdys5] {
        display: none;
    }

    .confidence-badge span[b-0unp6vdys5] {
        display: none;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .spinner-ring[b-0unp6vdys5],
    .pulse-dot[b-0unp6vdys5],
    .tool-spinner[b-0unp6vdys5] {
        animation: none;
    }

    .spinner-ring[b-0unp6vdys5] {
        border-color: var(--accent-color);
        opacity: 0.6;
    }

    .tool-spinner[b-0unp6vdys5] {
        opacity: 0.4;
    }
}
/* _content/Ayva.Calls/Components/Shared/SpeakingIndicator.razor.rz.scp.css */
/* ============================================
   SPEAKING INDICATOR STYLES
   ============================================ */

.speaking-indicator[b-hk7atkjv4k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    animation: indicatorAppear-b-hk7atkjv4k 0.3s ease-out;
}

@keyframes indicatorAppear-b-hk7atkjv4k {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Caller indicator - left aligned */
.speaking-indicator.speaker-caller[b-hk7atkjv4k] {
    margin-right: auto;
}

/* Agent indicator - right aligned with accent */
.speaking-indicator.speaker-agent[b-hk7atkjv4k] {
    margin-left: auto;
    flex-direction: row-reverse;
    border-color: var(--accent-color-30);
    background: linear-gradient(135deg, var(--accent-color-10), var(--accent-color-5));
}

.speaking-indicator.speaker-agent .speaker-info[b-hk7atkjv4k] {
    text-align: right;
}

/* ============================================
   SPEAKER AVATAR WITH PULSE
   ============================================ */

.speaker-avatar[b-hk7atkjv4k] {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.speaking-indicator.speaker-caller .speaker-avatar[b-hk7atkjv4k] {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.speaking-indicator.speaker-agent .speaker-avatar[b-hk7atkjv4k] {
    background: var(--accent-gradient);
    color: white;
}

/* Pulse ring animation */
.pulse-ring[b-hk7atkjv4k] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-md);
    pointer-events: none;
}

.speaker-avatar.active .pulse-ring[b-hk7atkjv4k] {
    animation: pulseRing-b-hk7atkjv4k 1.5s ease-out infinite;
}

.speaking-indicator.speaker-caller .pulse-ring[b-hk7atkjv4k] {
    border: 2px solid var(--text-secondary);
}

.speaking-indicator.speaker-agent .pulse-ring[b-hk7atkjv4k] {
    border: 2px solid var(--accent-color);
}

@keyframes pulseRing-b-hk7atkjv4k {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* ============================================
   SPEAKER INFO
   ============================================ */

.speaker-info[b-hk7atkjv4k] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.speaker-label[b-hk7atkjv4k] {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.speaking-indicator.speaker-agent .speaker-label[b-hk7atkjv4k] {
    color: var(--accent-color);
}

.speaking-text[b-hk7atkjv4k] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================
   WAVEFORM VISUALIZATION
   ============================================ */

.waveform-container[b-hk7atkjv4k] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}

.waveform-bars[b-hk7atkjv4k] {
    display: flex;
    align-items: center;
    gap: 0.1875rem;
    height: 1.5rem;
}

.waveform-bar[b-hk7atkjv4k] {
    width: 0.25rem;
    min-height: 0.25rem;
    border-radius: var(--radius-full);
    animation: waveformBounce-b-hk7atkjv4k 0.6s ease-in-out infinite alternate;
}

.speaking-indicator.speaker-caller .waveform-bar[b-hk7atkjv4k] {
    background: var(--success-color);
}

.speaking-indicator.speaker-agent .waveform-bar[b-hk7atkjv4k] {
    background: var(--accent-color);
}

@keyframes waveformBounce-b-hk7atkjv4k {
    0% {
        transform: scaleY(0.4);
    }
    100% {
        transform: scaleY(1);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .speaking-indicator[b-hk7atkjv4k] {
        padding: 0.625rem 0.875rem;
    }

    .speaker-avatar[b-hk7atkjv4k] {
        width: 2rem;
        height: 2rem;
    }

    .waveform-bars[b-hk7atkjv4k] {
        height: 1.25rem;
    }

    .waveform-bar[b-hk7atkjv4k] {
        width: 0.1875rem;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .speaking-indicator[b-hk7atkjv4k],
    .pulse-ring[b-hk7atkjv4k],
    .waveform-bar[b-hk7atkjv4k] {
        animation: none;
    }

    .speaker-avatar.active .pulse-ring[b-hk7atkjv4k] {
        opacity: 0.5;
    }
}
/* _content/Ayva.Calls/Components/Shared/TranscriptMessage.razor.rz.scp.css */
/* ============================================
   TRANSCRIPT MESSAGE STYLES
   ============================================ */

.transcript-message[b-l1pgb2cacl] {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
    animation: messageAppear-b-l1pgb2cacl 0.3s ease-out;
}

@keyframes messageAppear-b-l1pgb2cacl {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   SPEAKER POSITIONING
   ============================================ */

/* Caller messages - left aligned */
.transcript-message.speaker-caller[b-l1pgb2cacl] {
    flex-direction: row;
}

/* Agent messages - right aligned with accent */
.transcript-message.speaker-agent[b-l1pgb2cacl] {
    flex-direction: row-reverse;
}

.transcript-message.speaker-agent .message-content[b-l1pgb2cacl] {
    align-items: flex-end;
}

.transcript-message.speaker-agent .message-header[b-l1pgb2cacl] {
    justify-content: flex-end;
}

/* System messages - centered */
.transcript-message.speaker-system[b-l1pgb2cacl] {
    justify-content: center;
}

.transcript-message.speaker-system .message-content[b-l1pgb2cacl] {
    align-items: center;
    max-width: 100%;
}

/* ============================================
   MESSAGE AVATAR
   ============================================ */

.message-avatar[b-l1pgb2cacl] {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.message-avatar.caller[b-l1pgb2cacl] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.message-avatar.agent[b-l1pgb2cacl] {
    background: var(--accent-gradient);
    color: white;
}

/* ============================================
   MESSAGE CONTENT
   ============================================ */

.message-content[b-l1pgb2cacl] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 80%;
    min-width: 0;
}

.message-header[b-l1pgb2cacl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.speaker-name[b-l1pgb2cacl] {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.transcript-message.speaker-agent .speaker-name[b-l1pgb2cacl] {
    color: var(--accent-color);
}

.message-time[b-l1pgb2cacl] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ============================================
   MESSAGE BUBBLE
   ============================================ */

.message-body[b-l1pgb2cacl] {
    display: flex;
    flex-direction: column;
}

.message-bubble[b-l1pgb2cacl] {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: 1.5;
    word-wrap: break-word;
}

.transcript-message.speaker-caller .message-bubble[b-l1pgb2cacl] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: var(--radius-sm);
    color: var(--text-primary);
}

.transcript-message.speaker-agent .message-bubble[b-l1pgb2cacl] {
    background: var(--accent-gradient);
    color: white;
    border-bottom-right-radius: var(--radius-sm);
}

/* Injected message styling */
.transcript-message.injected .message-bubble[b-l1pgb2cacl] {
    border-style: dashed;
}

.transcript-message.silent-injection .message-bubble[b-l1pgb2cacl] {
    opacity: 0.7;
    font-style: italic;
}

/* ============================================
   INJECTION BADGE
   ============================================ */

.injection-badge[b-l1pgb2cacl] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: var(--warning-bg);
    color: var(--warning-color);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-full);
    border: 1px solid var(--warning-color-30);
}

.injection-badge.silent[b-l1pgb2cacl] {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.injection-badge .mud-icon-root[b-l1pgb2cacl] {
    font-size: 0.75rem;
}

.injector-name[b-l1pgb2cacl] {
    color: var(--text-muted);
    font-weight: 400;
}

/* ============================================
   CONFIDENCE INDICATOR
   ============================================ */

.confidence-indicator[b-l1pgb2cacl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.375rem;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.confidence-indicator.high[b-l1pgb2cacl] {
    background: var(--success-bg);
    color: var(--success-color);
}

.confidence-indicator.medium[b-l1pgb2cacl] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.confidence-indicator.low[b-l1pgb2cacl] {
    background: var(--error-bg);
    color: var(--error-color);
}

/* ============================================
   TOOL CALL / RESULT CONTENT
   ============================================ */

.tool-call-content[b-l1pgb2cacl],
.tool-result-content[b-l1pgb2cacl] {
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.tool-header[b-l1pgb2cacl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tool-header .mud-icon-root[b-l1pgb2cacl] {
    color: var(--accent-color);
}

.tool-name[b-l1pgb2cacl] {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.tool-status[b-l1pgb2cacl] {
    font-size: var(--text-xs);
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
}

.tool-status.executing[b-l1pgb2cacl] {
    background: var(--info-bg);
    color: var(--info-color);
}

.tool-status.success[b-l1pgb2cacl] {
    background: var(--success-bg);
    color: var(--success-color);
}

.tool-status.failed[b-l1pgb2cacl] {
    background: var(--error-bg);
    color: var(--error-color);
}

.tool-result-content.success[b-l1pgb2cacl] {
    border-color: var(--success-color-30);
}

.tool-result-content.success .mud-icon-root[b-l1pgb2cacl] {
    color: var(--success-color);
}

.tool-result-content.error[b-l1pgb2cacl] {
    border-color: var(--error-color-30);
}

.tool-result-content.error .mud-icon-root[b-l1pgb2cacl] {
    color: var(--error-color);
}

/* ============================================
   SYSTEM NOTE CONTENT
   ============================================ */

.system-note-content[b-l1pgb2cacl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-style: italic;
}

.system-note-content .mud-icon-root[b-l1pgb2cacl] {
    color: var(--text-muted);
    font-size: 1rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .message-content[b-l1pgb2cacl] {
        max-width: 90%;
    }

    .message-bubble[b-l1pgb2cacl] {
        padding: 0.625rem 0.875rem;
    }

    .injection-badge .injector-name[b-l1pgb2cacl] {
        display: none;
    }
}