/* Complainant-specific styles */

/* Additional text color for AI transcript */
.theme-dark .text-ai-transcript {
    color: #FFC107; /* Muted yellow for AI text */
}

.theme-light .text-ai-transcript {
    color: #F59E0B; /* Tailwind amber-500 for AI text */
}

/* Complainant-specific scrollbar styling */
.scrollable-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.theme-dark .scrollable-content::-webkit-scrollbar-track {
    background: var(--card-bg-dark);
}

.theme-light .scrollable-content::-webkit-scrollbar-track {
    background: var(--bg-light);
}

.theme-dark .scrollable-content::-webkit-scrollbar-thumb {
    background: var(--secondary-bg-dark);
    border-radius: 0;
}

.theme-light .scrollable-content::-webkit-scrollbar-thumb {
    background: #A0AEC0;
    border-radius: 0;
}

.theme-dark .scrollable-content::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-hover-dark);
}

.theme-light .scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #718096;
}

/* Officer and Complainant text colors */
.theme-dark .text-officer {
    color: #6EE7B7;
}

.theme-light .text-officer {
    color: #10B981;
}

.theme-dark .text-complainant {
    color: #93C5FD;
}

.theme-light .text-complainant {
    color: #3B82F6;
}

/* Conversation entry styles */
.conversation-entry {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.conversation-icon-wrapper {
    margin-right: 0.5rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.conversation-icon {
    font-size: 1rem;
}

.theme-dark .conversation-icon {
    color: var(--placeholder-dark);
}

.theme-light .conversation-icon {
    color: var(--placeholder-light);
}

.conversation-text {
    flex-grow: 1;
}

.conversation-text .quoted-text {
    font-style: italic;
}

.theme-dark .conversation-text .quoted-text {
    color: #FFC107;
}

.theme-light .conversation-text .quoted-text {
    color: #F59E0B;
}

/* Transcript streaming styles */
.transcript-streaming {
    border-left: 3px solid var(--accent-blue-dark);
    padding-left: 0.5rem;
    margin-left: -0.5rem;
}

.theme-light .transcript-streaming {
    border-left-color: var(--accent-blue-light);
}

.transcript-confidence {
    background-color: rgba(74, 144, 226, 0.1);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.6rem;
}

.transcript-streaming:hover {
    background-color: rgba(74, 144, 226, 0.05);
}

/* Complainant info modal specific */
#complainantInfoModal .acme-input {
    margin-bottom: 0.75rem;
}

.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    padding-top: 60px;
}

.modal-content {
    margin: 5% auto;
    padding: 20px;
    border-radius: 0;
    width: 90%;
    max-width: 500px;
}

.theme-dark .modal-content {
    background-color: var(--card-bg-dark);
    border: 1px solid var(--border-dark);
}

.theme-light .modal-content {
    background-color: var(--card-bg-light);
    border: 1px solid var(--border-light);
}

.modal-close-button {
    float: right;
    font-size: 1.75rem;
    font-weight: bold;
    line-height: 1;
}

.theme-dark .modal-close-button {
    color: var(--placeholder-dark);
}

.theme-light .modal-close-button {
    color: var(--placeholder-light);
}

.theme-dark .modal-close-button:hover,
.theme-dark .modal-close-button:focus {
    color: var(--text-dark);
    text-decoration: none;
    cursor: pointer;
}

.theme-light .modal-close-button:hover,
.theme-light .modal-close-button:focus {
    color: var(--text-light);
    text-decoration: none;
    cursor: pointer;
}

/* Video placeholder styles */
.video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.video-avatar {
    position: absolute;
    font-size: 4rem;
    opacity: 0.3;
}

.theme-dark .video-avatar {
    color: var(--placeholder-dark);
}

.theme-light .video-avatar {
    color: var(--placeholder-light);
}

.theme-dark .video-placeholder {
    background-color: #000;
}

.theme-light .video-placeholder {
    background-color: #E5E7EB; /* gray-200 */
}

/* Interaction tab button styles */
.interaction-tab-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid transparent;
    border-bottom: none;
    margin-right: 0.125rem;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
    border-radius: 0.375rem 0.375rem 0 0;
    position: relative;
    bottom: -1px;
}

.theme-dark .interaction-tab-button {
    color: var(--placeholder-dark);
}

.theme-light .interaction-tab-button {
    color: var(--placeholder-light);
}

.theme-dark .interaction-tab-button:hover:not(.active-tab) {
    color: var(--text-dark);
    background-color: rgba(255, 255, 255, 0.03);
}

.theme-light .interaction-tab-button:hover:not(.active-tab) {
    color: var(--text-light);
    background-color: rgba(0, 0, 0, 0.02);
}

.theme-dark .interaction-tab-button.active-tab {
    color: var(--accent-blue-dark);
    background-color: var(--card-bg-dark);
    border-color: var(--border-dark);
    border-bottom-color: var(--card-bg-dark);
}

.theme-light .interaction-tab-button.active-tab {
    color: var(--accent-blue-light);
    background-color: var(--card-bg-light);
    border-color: var(--border-light);
    border-bottom-color: var(--card-bg-light);
}