/* =============================================
   Voice Input - Microphone Button & Transcript
   ============================================= */

/* Voice button */
#optic-voice-btn {
	background: #f0f4f8;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 0;
	font-size: 18px;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	position: relative;
}

#optic-voice-btn:hover {
	background: #e2e8f0;
}

/* Recording state - pulsing red */
#optic-voice-btn.optic-voice-recording {
	background: #fee2e2;
	border-color: #ef4444;
	animation: opticVoicePulse 1.2s ease-in-out infinite;
}

/* Processing state - spinner */
#optic-voice-btn.optic-voice-processing {
	background: #fef3c7;
	border-color: #f59e0b;
	cursor: wait;
	animation: opticVoiceSpin 1s linear infinite;
}

@keyframes opticVoicePulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
	50%       { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

@keyframes opticVoiceSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Live transcript area */
#optic-voice-transcript {
	display: none;
	padding: 8px 16px;
	background: #f0f8ff;
	border-top: 1px solid #bde0ff;
	font-size: 13px;
	color: #4a5568;
	font-style: italic;
	text-align: center;
	min-height: 34px;
}

/* Inline error toast */
.optic-voice-error {
	position: absolute;
	bottom: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fee2e2;
	color: #991b1b;
	padding: 8px 16px;
	font-size: 13px;
	border-radius: 8px;
	text-align: center;
	z-index: 10000;
	animation: opticVoiceFadeIn 0.3s ease;
	pointer-events: none;
}

@keyframes opticVoiceFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Keep input area positioned for absolute children */
.optic-chat-input-area {
	position: relative;
}