/**
 * Askira Search — Better.com-style conversational search card.
 *
 * White rounded card on the dark navy hero: brand mark, large conversational
 * input, voice button, circular send button, and quick-action chips.
 * Palette matches the theme (.head__btn): gold #E1BD89 / navy #061A40.
 *
 * Tune the look via the custom properties below.
 */

.askira-search {
	/* ---- Theme tokens ---- */
	--askira-card: #ffffff;
	--askira-fg: #061A40;               /* input text — theme navy */
	--askira-muted: #8a93a0;            /* placeholder + idle icons */
	--askira-accent: #E1BD89;           /* gold (.head__btn) */
	--askira-accent-fg: #061A40;        /* navy on gold */
	--askira-accent-hover: #BEA563;     /* gold-dark */
	--askira-chip-border: #e3e6ea;
	--askira-chip-hover: #f6f7f9;
	--askira-radius: 24px;
	--askira-shadow: 0 18px 45px rgba(6, 26, 64, 0.28);
	--askira-max: 720px;

	display: block;
	width: 100%;
	max-width: var(--askira-max);
	margin: 22px auto 24px;        /* bottom gap keeps the hero buttons clear */
	box-sizing: border-box;
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Load-in animation — same motion/curve as .head__title / .head__btn,
	   staggered to appear just after the buttons (title 4.3s, buttons 4.5s). */
	opacity: 0;
	-webkit-animation: askira-fade-up 1.4s ease-in-out 4.7s forwards;
	animation: askira-fade-up 1.4s ease-in-out 4.7s forwards;
}

/* Self-contained keyframes (identical to the theme's head-anim) so the card
   can never be stuck invisible if the main stylesheet changes. */
@-webkit-keyframes askira-fade-up {
	0%   { -webkit-transform: translateY(3rem); transform: translateY(3rem); opacity: 0; }
	100% { -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }
}
@keyframes askira-fade-up {
	0%   { -webkit-transform: translateY(3rem); transform: translateY(3rem); opacity: 0; }
	100% { -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }
}

.askira-search--left {
	margin-left: 0;
	margin-right: auto;
}

.askira-search *,
.askira-search *::before,
.askira-search *::after {
	box-sizing: border-box;
}

/* ---------- Card ---------- */

.askira-search__card {
	background: var(--askira-card);
	border-radius: var(--askira-radius);
	box-shadow: var(--askira-shadow);
	padding: 12px 12px 13px 14px;
	text-align: left;
}

/* ---------- Input row ---------- */

.askira-search__bar {
	display: flex;
	align-items: center;
	gap: 10px;
}

.askira-search__brand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--askira-accent);
	color: var(--askira-accent-fg);
}

.askira-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: 17px;               /* >=16px avoids iOS zoom on focus */
	line-height: 1.4;
	color: var(--askira-fg);
	padding: 10px 2px;
	-webkit-appearance: none;
	appearance: none;
}

.askira-search__input::placeholder {
	color: var(--askira-muted);
	opacity: 1;
}

.askira-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* ---------- Mic ---------- */

.askira-search__mic {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--askira-muted);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.askira-search__mic:hover {
	background: var(--askira-chip-hover);
	color: var(--askira-fg);
}

/* Active listening state — pulsing red. */
.askira-search__mic.is-listening {
	background: rgba(197, 48, 48, 0.10);
	color: #c53030;
	-webkit-animation: askira-pulse 1.4s ease-in-out infinite;
	animation: askira-pulse 1.4s ease-in-out infinite;
}

@-webkit-keyframes askira-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(197, 48, 48, 0.35); }
	50%      { box-shadow: 0 0 0 7px rgba(197, 48, 48, 0); }
}
@keyframes askira-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(197, 48, 48, 0.35); }
	50%      { box-shadow: 0 0 0 7px rgba(197, 48, 48, 0); }
}

/* ---------- Send button ---------- */

.askira-search__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--askira-accent);
	color: var(--askira-accent-fg);
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.05s ease;
}

.askira-search__submit:hover {
	background: var(--askira-accent-hover);
}

.askira-search__submit:active {
	transform: translateY(1px);
}

/* Muted until the user types (JS toggles this). */
.askira-search__submit.is-idle {
	background: #eceef1;
	color: #b3bac3;
}

/* ---------- Quick-action chips ---------- */

/* Always one clean row — wrapping to a ragged 3+1 looks broken.
   Overflows scroll horizontally with the scrollbar hidden. */
.askira-search__chips {
	display: flex;
	flex-wrap: nowrap;
	gap: 7px;
	margin-top: 10px;
/*	padding-left: 25px;           */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.askira-search__chips::-webkit-scrollbar {
	display: none;
}

.askira-search__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 13px;
	border: 1px solid var(--askira-chip-border);
	border-radius: 999px;
	background: #fff;
	color: var(--askira-fg);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	flex: 0 0 auto;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.askira-search__chip:hover {
	background: var(--askira-chip-hover);
	border-color: #cfd5dd;
}

.askira-search__chip svg {
	color: var(--askira-muted);
	flex: 0 0 auto;
}

/* ---------- Disclaimer ---------- */

.askira-search__note {
	margin: 12px 0 0;
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
}

/* ---------- Focus ---------- */

.askira-search__card:focus-within {
	box-shadow: 0 0 0 3px rgba(225, 189, 137, 0.45), var(--askira-shadow);
}

.askira-search__mic:focus-visible,
.askira-search__submit:focus-visible,
.askira-search__chip:focus-visible {
	outline: 2px solid var(--askira-accent);
	outline-offset: 2px;
}

/* Accessible, visually-hidden label. */
.askira-search__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Mobile ---------- */
.gradient-text {
  background: linear-gradient(
    90deg,
    #C99A55 0%,
    #E1BD89 40%,
    #F3DFC0 70%,
    #E1BD89 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

@media (max-width: 768px) {
	.askira-search {
		max-width: 100%;
		margin-top: 16px;
		/* Match .head__title / .head__btn on mobile: no animation, visible at
		   once (the theme disables the hero animation below 768px). */
		opacity: 1;
		-webkit-animation: none;
		animation: none;
		-webkit-transform: none;
		transform: none;
	}

	.askira-search__card {
		border-radius: 20px;
		padding: 10px 10px 12px 12px;
	}

	.askira-search__input {
		font-size: 16px;
		padding: 8px 2px;
	}

	.askira-search__brand {
		width: 30px;
		height: 30px;
	}

	.askira-search__bar {
		gap: 6px;
	}

	/* Keep chips on one scrollable row so the hero stays inside the fold. */
	.askira-search__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-left: 0;
		margin-top: 10px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.askira-search__chips::-webkit-scrollbar {
		display: none;
	}

	.askira-search__chip {
		font-size: 13px;
		padding: 8px 13px;
	}

	/* The hero is a fixed 100vh with overflow:hidden. Let it grow rather than
	   clip now that the card is taller. */
	.head {
		height: auto;
		min-height: 100vh;
	}
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.askira-search {
		opacity: 1;
		-webkit-animation: none;
		animation: none;
		-webkit-transform: none;
		transform: none;
	}
	.askira-search__mic.is-listening {
		-webkit-animation: none;
		animation: none;
	}
}