/* ============================================================
   AMIR SUITE — AI Nav Menu v1.0
   Bar mechanics reuse the Mobile Nav gradient-border technique;
   the AI chat box is new.
   ============================================================ */

@property --anm-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}
@keyframes anm-gb-spin { to { --anm-angle: 360deg; } }

.as-anm-gb-wrap {
	--anm-c1: #4ee08a; --anm-c2: #60a5fa; --anm-c3: #f472b6;
	--anm-c4: #fb923c; --anm-c5: #a78bfa; --anm-c6: #22d3ee;
	--anm-speed: 4s;
	display: block; width: 100%;
	padding: 2px;
	border-radius: 24px;
	position: relative; z-index: 0;
	contain: layout style;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
}

.as-anm-gb-wrap.is-spinning { animation: anm-gb-spin var(--anm-speed) linear infinite; }

.as-anm-gb-wrap::after {
	content: ''; position: absolute; inset: 0;
	padding: 2px;
	border-radius: inherit; z-index: 0;
	background: conic-gradient(from var(--anm-angle), var(--anm-c1), var(--anm-c2), var(--anm-c3), var(--anm-c4), var(--anm-c5), var(--anm-c6), var(--anm-c1));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: inherit;
}

.as-anm-gb-wrap::before {
	content: ''; position: absolute; inset: -4px;
	padding: 6px;
	border-radius: inherit;
	background: conic-gradient(from var(--anm-angle), var(--anm-c1), var(--anm-c2), var(--anm-c3), var(--anm-c4), var(--anm-c5), var(--anm-c6), var(--anm-c1));
	filter: blur(12px); opacity: .45; z-index: -1;
	animation: inherit;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
}

.as-anm-gb-wrap > .as-anm-bar {
	position: relative; z-index: 1;
	border-radius: 22px !important;
	background-color: var(--anm-bar-bg, #0d1117);
	overflow: hidden;
}

.as-anm-outer {
	display: block; width: 100%; contain: layout style;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
}

.as-anm-bar {
	--anm-bar-bg: #0d1117;
	display: block; width: 100%;
	position: relative;
	background-color: var(--anm-bar-bg, #0d1117);
	border-radius: 22px;
	overflow: hidden;
	transition: opacity .3s ease;
}

.as-anm-bar.bg-glass {
	background-color: color-mix(in srgb, var(--anm-bar-bg, #0d1117) 88%, transparent);
	backdrop-filter: blur(20px) saturate(1.8);
	-webkit-backdrop-filter: blur(20px) saturate(1.8);
}

@media (min-width: 1025px) {
	.as-anm-gb-wrap.hide-desktop, .as-anm-outer.hide-desktop { display: none !important; }
}

/* ══ Icons row ══ */
.as-anm-inner {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 12px 6px;
	gap: 2px;
}

.as-anm-btn {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	flex: 1 1 0; min-width: 0; /* let items shrink, but never wrap their label to 2 lines */
	color: inherit; text-decoration: none;
	padding: 4px 4px; border-radius: 12px;
	transition: transform .2s ease;
}
.as-anm-btn:hover { transform: translateY(-2px); }

/* Fallback for when even the auto-fit floor (see JS initLabelFit) still
   can't fit every label: instead of silently clipping text behind
   text-overflow:ellipsis with no way to read it, switch the row to a
   horizontally-scrollable strip where every item keeps its natural
   width and every label is fully readable by swiping. This only
   engages when needed — see .is-overflow-scroll toggled by JS. */
.as-anm-inner.is-overflow-scroll {
	justify-content: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.as-anm-inner.is-overflow-scroll::-webkit-scrollbar { display: none; }
.as-anm-inner.is-overflow-scroll .as-anm-btn {
	flex: 0 0 auto;
	min-width: max-content;
	padding-inline: 10px;
}
/* In scroll-fallback mode the button is sized to its content (max-content),
   so the label's own max-width:100% (meant for the normal, flex-shrunk
   layout) no longer needs to constrain it — dropping it here removes any
   chance of the label still clipping instead of showing in full. */
.as-anm-inner.is-overflow-scroll .as-anm-label {
	max-width: none;
}

.as-anm-icon-wrap { position: relative; display: inline-flex; }
.as-anm-icon { font-size: 20px; line-height: 1; color: #9aa4b2; display: inline-flex; }
.as-anm-icon svg { width: 20px; height: 20px; }
.as-anm-btn.is-active .as-anm-icon { color: #4ee08a; }

.as-anm-icon-img {
	width: 22px; height: 22px;
	border-radius: 6px;
	object-fit: cover;
	display: inline-block;
}

.as-anm-badge {
	position: absolute; top: -6px; inset-inline-end: -8px;
	background: #f43f5e; color: #fff; font-size: 10px; line-height: 1;
	padding: 2px 5px; border-radius: 999px; font-weight: 700;
}

.as-anm-label {
	font-size: 11px; color: #9aa4b2;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	max-width: 100%;
}
.as-anm-btn.is-active .as-anm-label { color: #4ee08a; }

/* ══ AI chat box ══ */
.as-anm-ai-box {
	margin: 0 10px 10px;
	border-radius: 16px;
	background: var(--anm-ai-box-bg, #161b22);
	padding: 6px 8px;
	position: relative;
}

.as-anm-ai-close {
	display: none; /* only shown once the box is "open" — see .is-open below */
	position: absolute;
	top: -8px; inset-inline-end: -6px;
	width: 22px; height: 22px;
	border-radius: 50%;
	border: none;
	background: #20262f;
	color: #9aa4b2;
	align-items: center; justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,.35);
	z-index: 2;
}
.as-anm-ai-close svg { width: 12px; height: 12px; }
.as-anm-ai-close:hover { background: #2a3138; color: #e6edf3; }
.as-anm-ai-box.is-open .as-anm-ai-close { display: flex; }

.as-anm-ai-row {
	display: flex;
	align-items: center;
	gap: 8px;
	direction: inherit; /* avatar sits at the reading-direction start: left in LTR, right in RTL */
}

.as-anm-ai-avatar {
	flex: 0 0 auto;
	width: 38px; height: 38px;
	border-radius: 50%;
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #4ee08a, #60a5fa);
	box-shadow: 0 0 0 2px rgba(255,255,255,.06);
}
.as-anm-ai-avatar img { width: 100%; height: 100%; object-fit: cover; }
.as-anm-ai-avatar-fallback { font-size: 18px; }

.as-anm-ai-input-wrap {
	flex: 1 1 auto;
	position: relative;
	min-width: 0;
}

.as-anm-ai-input {
	width: 100%;
	background: transparent;
	border: none; outline: none;
	color: #e6edf3;
	/* 16px is not a random choice — iOS Safari auto-zooms the whole
	   page the instant an input smaller than 16px receives focus.
	   That auto-zoom is what makes the bar look like it's "jumping"
	   or mis-sized while the keyboard is open; it isn't a positioning
	   bug at all, so keep this at 16px+ even if you resize elsewhere. */
	font-size: 16px;
	padding: 8px 2px;
}

.as-anm-ai-fake-ph {
	position: absolute;
	inset-inline-start: 2px;
	top: 50%; transform: translateY(-50%);
	color: #8b95a5;
	font-size: 16px; /* must match .as-anm-ai-input so the overlay lines up */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100% - 4px);
	pointer-events: none;
	transition: opacity .2s ease;
}
.as-anm-ai-fake-ph.is-swapping { opacity: 0; }
.as-anm-ai-fake-ph.is-hidden { opacity: 0; }

/* This is the one true "cursor" in the chat box — it lives directly
   inside the input's placeholder overlay, so it always sits exactly
   where the visitor would type, never inside the reply bubble above. */
.as-anm-ai-fake-ph::after {
	content: '';
	display: inline-block;
	width: 1px; height: 1em;
	margin-inline-start: 2px;
	background: currentColor;
	vertical-align: -2px;
	animation: anm-caret-blink 1s steps(2) infinite;
}
@keyframes anm-caret-blink { 50% { opacity: 0; } }

.as-anm-ai-mic, .as-anm-ai-send {
	flex: 0 0 auto;
	width: 34px; height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.06);
	color: #4ee08a;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background .2s ease, transform .15s ease;
}
.as-anm-ai-mic svg, .as-anm-ai-send svg { width: 16px; height: 16px; }
.as-anm-ai-mic:hover, .as-anm-ai-send:hover { background: rgba(255,255,255,.12); }
.as-anm-ai-mic:active, .as-anm-ai-send:active { transform: scale(.92); }

.as-anm-ai-mic.is-listening {
	background: rgba(244,63,94,.18);
	color: #f43f5e;
	animation: anm-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes anm-mic-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,94,.4); }
	50% { box-shadow: 0 0 0 6px rgba(244,63,94,0); }
}

.as-anm-ai-reply {
	display: none;
	font-size: 12.5px;
	line-height: 1.6;
	color: #cdd6e0;
	background: rgba(78,224,138,.08);
	border: 1px solid rgba(78,224,138,.2);
	border-radius: 12px;
	padding: 8px 10px;
	margin-bottom: 6px;
	/* Genuinely fixed height (not "grows as the reply streams in") —
	   `max-height` alone was NOT enough: a box with only a max-height
	   still shrinks/grows with 1 vs multi-line content, which pushes
	   the input row below it up and down while the input still has
	   focus. That live reflow of a focused input is exactly what
	   desyncs the visible text caret from the input's real screen
	   position — a plain layout-shift issue, not something limited to
	   one browser engine, so it showed up everywhere, not just iOS
	   Safari. Setting `height` (with `min-height` as a belt-and-braces
	   duplicate) forces the box to occupy the same vertical space
	   whether the reply is one word or several lines, so nothing below
	   it — the input, mic and send button — ever moves.
	   `contain: content` + `overscroll-behavior: contain` additionally
	   isolate this box's own layout/scroll from the rest of the bar
	   (including the input sitting right below it), so its internal
	   scrolling can never bleed into — or shift — anything outside it. */
	height: 92px;
	min-height: 92px;
	max-height: 92px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	contain: content;
	overscroll-behavior: contain;
}
.as-anm-ai-reply.is-visible { display: block; }
/* Deliberately NOT a blinking vertical bar here. A bar at the end of
   streaming reply text reads as a *text caret* — but it sits inside a
   bubble that reflows and auto-scrolls as words arrive, so on a
   multi-line reply it visibly drifts away from the real input, which
   is confusing (it looks like "the cursor" is in the wrong place).
   A row of pulsing dots reads unambiguously as "assistant is typing"
   and never impersonates the real text caret, which stays exactly
   where it belongs: in the input, via .as-anm-ai-fake-ph::after below. */
.as-anm-ai-reply.is-typing::after {
	content: '';
	display: inline-block;
	width: 4px; height: 4px;
	margin-inline-start: 6px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
	box-shadow: 8px 0 0 0 currentColor, 16px 0 0 0 currentColor;
	animation: anm-typing-dots 1s ease-in-out infinite;
}
@keyframes anm-typing-dots {
	0%, 100% { opacity: .25; }
	50%      { opacity: 1; }
}
.as-anm-ai-reply.is-error { color: #f8a3b0; background: rgba(244,63,94,.08); border-color: rgba(244,63,94,.25); }

@media (prefers-reduced-motion: reduce) {
	.as-anm-gb-wrap.is-spinning { animation: none; }
	.as-anm-ai-fake-ph::after, .as-anm-ai-reply.is-typing::after { animation: none; }
}