:root {
--primary-blue: #2196F3;
--alert-red: #ff4444;
--background-gray: #f8f9fa;
}
.control-bar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 20px;
position: sticky;
top: 0;
background: var(--background-gray);
padding: 10px 0;
z-index: 100;
}
.control-btn {
padding: 12px 20px;
font-size: 15px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--primary-blue);
color: white;
}
.control-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.control-btn.secondary {
background: #e0e0e0;
color: #333;
}
.control-btn.ai {
background: #4CAF50;
}
#transcript-container {
border: 2px solid var(--primary-blue);
border-radius: 10px;
height: 60vh;
padding: 20px;
margin: 20px 0;
background: white;
line-height: 1.6;
white-space: pre-wrap;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
font-size: 15px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
.status-indicator {
display: flex;
align-items: center;
gap: 8px;
color: #666;
font-size: 14px;
justify-content: center;
margin: 10px 0;
}
.pulsing-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--alert-red);
animation: pulse 1.5s infinite;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1000;
}
.modal-content {
position: relative;
background: white;
padding: 20px;
border-radius: 10px;
width: 90%;
max-width: 500px;
margin: 20px auto;
max-height: 80vh;
overflow-y: auto;
}
.loading {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--primary-blue);
padding: 20px;
}
.auto-save-notice {
color: var(--alert-red);
font-size: 12px;
text-align: right;
margin-top: -15px;
padding-right: 5px;
}
@keyframes pulse {
0% { opacity: 0.4; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.3); }
100% { opacity: 0.4; transform: scale(0.9); }
}
@media (max-width: 480px) {
#transcript-container {
height: 55vh;
padding: 15px;
font-size: 14px;
}
.control-btn {
padding: 10px 15px;
font-size: 14px;
}
}
    .ai-voice-vip-alert {
            border: 3px solid #1e1e1e;
            background-color: #fcf8e3;
            color:#1e1e1e;
            padding: 15px;
            margin: 20px auto;
            width:100%;
            border-radius: 10px;
            text-align: center;
            display: block;
        }