/**
 * Smart search — voice / camera states, status line, camera dialog
 * (assets/js/smart-search.js).
 */

/* Mic while listening: soft pulsing ring. Camera while the photo is read: dimmed. */
[data-ts-voice-search].is-listening { color: var(--fri-yay) !important; position: relative; }
[data-ts-voice-search].is-listening::after {
	content: '';
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(194,95,78,0.45);
	animation: tsSsPulse 1.2s ease-out infinite;
	pointer-events: none;
}
@keyframes tsSsPulse { to { box-shadow: 0 0 0 10px rgba(194,95,78,0); } }
[data-ts-image-search].is-busy { opacity: 0.45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { [data-ts-voice-search].is-listening::after { animation: none; } }

/* Status line under the search bar: "Listening…", "Searching your photo…", errors. */
.ts-ss-status {
	margin: 10px auto 0;
	max-width: 680px;
	text-align: center;
	font-family: var(--ff-body);
	font-size: 13px;
	line-height: 1.45;
	color: var(--stone);
}
.ts-ss-status[hidden] { display: none; }
.ts-ss-status.is-busy::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--fri-yay);
	vertical-align: middle;
	animation: tsSsBlink 1s ease-in-out infinite;
}
@keyframes tsSsBlink { 50% { opacity: 0.25; } }
.ts-ss-status.is-error { color: var(--fri-yay); }

/* Camera dialog */
body.ts-ss-lock { overflow: hidden; }
.ts-ss-cam {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(28,26,24,0.6);
}
.ts-ss-cam[hidden] { display: none; }
.ts-ss-cam-box {
	position: relative;
	width: min(520px, 100%);
	max-height: calc(100vh - 32px);
	overflow: auto;
	background: var(--white);
	border-radius: 16px;
	padding: 28px 24px 24px;
	text-align: center;
	box-shadow: var(--shadow-lg);
}
.ts-ss-cam-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 8px;
	background: none;
	font-size: 18px;
	color: var(--ink);
	cursor: pointer;
}
.ts-ss-cam-close:hover { background: var(--cream); }
.ts-ss-cam-title { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.ts-ss-cam-sub { margin: 6px 0 16px; font-size: 13px; color: var(--stone); }
.ts-ss-cam-stage {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: var(--cream);
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ts-ss-cam-stage video { display: block; width: 100%; max-height: 52vh; object-fit: cover; background: #000; }
.ts-ss-cam-stage video[hidden] { display: none; }
.ts-ss-cam-note { padding: 28px 20px; font-size: 14px; color: var(--ink); }
.ts-ss-cam-note[hidden] { display: none; }
.ts-ss-cam-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.ts-ss-cam-snap,
.ts-ss-cam-upload {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	border-radius: 4px;
	font-family: var(--ff-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ts-ss-cam-snap { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.ts-ss-cam-snap[hidden] { display: none; }
.ts-ss-cam-snap:hover { background: #bc886d; border-color: #bc886d; }
.ts-ss-cam-upload { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.ts-ss-cam-upload:hover { background: var(--ink); color: #fff; }