.search-container {
	display: flex;
	gap: 10px;
	margin: 20px 0;
	max-width: 600px;
}

/* Quick label and tip sizing */
.quick-label {
	font-size: 16px; /* a bit larger */
	font-weight: 400; /* not bold */
	margin-right: 8px;
	color: rgba(0,0,0,0.9); /* slightly transparent for softer look */
	line-height: 1; 
}

.search-tips-link {
	display: inline-flex;
	align-items: center;
	height: 34px; /* match input/select/button height */
}
.search-tip-icon {
	height: 26px; /* slightly smaller */
	width: 26px;
	vertical-align: middle;
	margin-left: 8px;
	display: inline-block;
	color: rgba(0,0,0,0.6);
}

/* Quick-search horizontal alignment: make input, select and buttons same height and aligned */
#quick-search {
	display: flex;
	align-items: center;
	gap: 8px;
}

#quick-search input[type="text"],
#quick-search select[id="qs-type"],
.mic-button,
.send-button {
	height: 34px; /* uniform height */
	box-sizing: border-box;
	font-size: 13px;
}

#quick-search input[type="text"] {
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	min-width: 260px;
	display: inline-block;
}

#quick-search select[id="qs-type"] {
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: white;
}

/* recording indicator inline alignment */
.recording-indicator {
	margin-left: 6px;
}

@media (max-width:600px) {
	#quick-search { flex-wrap: wrap; }
	#quick-search input[type="text"] { min-width: 100%; }
}

.search-input {
	flex: 1;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
}

.mic-button, .send-button {
	padding: 8px 12px;
	background-color: #0066cc;
	color: white;
	border: 1px solid #005bb5;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.12s, transform 0.08s;
	font-size: 13px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

	.mic-button:hover, .send-button:hover {
		background-color: #0052a3;
	}

.mic-icon {
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
}

.sr-only { /* accessible text hidden visually */
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.result-container {
	margin-top: 20px;
	background: #f9f9f9;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 15px;
	max-width: 600px;
}

	.result-container pre {
		white-space: pre-wrap;
		word-break: break-word;
		font-size: 15px;
	}

.recording-indicator {
	/* Hidden by default, shown when recording (has .active) */
	display: none;
}

.recording-indicator.active {
	display: flex;
align-items: center;
margin-top: 10px;
color: #d9534f;
font-weight: 600;
gap: 8px;
}

.recording-icon {
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	background: #d9534f;
	display: inline-block;
	box-shadow: 0 0 0 rgba(217,83,79, 0.4);
	animation: pulse 1.2s infinite;
}

@keyframes pulse {
	0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217,83,79, 0.4); }
	70% { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(217,83,79, 0); }
	100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217,83,79, 0); }
}

@keyframes blink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}