/*
 * Başlatıcının görünümü.
 *
 * Bütün seçiciler `#ajano-sa-root` altında: mağazanın teması ne kadar agresif
 * yazılmış olursa olsun bizim kurallarımız onun içine sızmamalı, aynı şekilde
 * temanın genel kuralları da (ör. `button { width: 100% }`) bizi bozmamalı —
 * bu yüzden kritik özellikler açıkça yazılıyor.
 *
 * z-index yüksek ama maksimum değil: mağazanın kendi çerez bildirimi ya da
 * sepet çekmecesi bizim üstümüzde kalabilmeli.
 */

#ajano-sa-root {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99990;
	font-family: inherit;
}

#ajano-sa-root .ajano-sa-button {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #0e0e0e;
	color: #c6fd51;
	cursor: pointer;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.24);
	transition: transform 0.15s ease;
}

#ajano-sa-root .ajano-sa-button:hover {
	transform: scale(1.05);
}

#ajano-sa-root .ajano-sa-button:focus-visible {
	outline: 3px solid #c6fd51;
	outline-offset: 3px;
}

/*
 * KÖŞE KİPİ — sohbet kutusu.
 *
 * 380x620 fazla dardı: avatar sahnesi, konuşma dökümü ve ürün kartları aynı
 * kutuya sığmıyor, kartlar tek sütuna düşüyordu. Genişlik ekranla birlikte
 * büyüyor ama bir tavanı var; mağaza sayfasının üstünü kaplamamalı.
 */
#ajano-sa-root .ajano-sa-panel {
	position: absolute;
	right: 0;
	bottom: 78px;
	width: min(440px, calc(100vw - 40px));
	height: min(720px, calc(100vh - 130px));
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
}

/* ---------------------------------------------------------------------- *
 * ORTALI KİP — ekranın %80'i.
 *
 * Köşe kutusu hızlı bir soru için iyi; ürün karşılaştıran, kartlara bakan,
 * avatarla konuşan biri için dar. Bu kipte panel ekranın ortasında durup
 * genişliğin ve yüksekliğin %80'ini kaplıyor — `inset: 10%` tam olarak bunu
 * veriyor, ayrıca ortalama için bir dönüşüm ya da flex kabı gerekmiyor.
 *
 * Arkada karartma var: panel artık sayfanın bir köşesi değil, önüne geçen
 * bir pencere. Karartmaya tıklamak kapatıyor.
 * ---------------------------------------------------------------------- */

#ajano-sa-root.ajano-sa-center .ajano-sa-panel {
	position: fixed;
	inset: 10%;
	width: auto;
	height: auto;
	border-radius: 20px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

#ajano-sa-root .ajano-sa-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(14, 14, 14, 0.45);
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	/* Panelin ALTINDA, düğmenin üstünde. */
	z-index: -1;
}

#ajano-sa-root .ajano-sa-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * Dar ekranda panel TAM EKRAN.
 *
 * 380px'lik bir kutu telefonda ekranın neredeyse tamamını kaplıyor ama
 * kenarlarda kullanılamaz bir şerit bırakıyor; konuşma alanı da yazı
 * kutusuyla birlikte sıkışıyor. Tam ekran hem daha kullanışlı hem daha
 * öngörülebilir.
 */
@media (max-width: 480px) {
	#ajano-sa-root.ajano-sa-open {
		right: 0;
		bottom: 0;
		left: 0;
		top: 0;
	}

	/* Telefonda İKİ KİP DE tam ekran: %80'lik bir kutu dar ekranda
	   kenarlarda kullanılamaz bir şerit bırakıyor. */
	#ajano-sa-root .ajano-sa-panel,
	#ajano-sa-root.ajano-sa-center .ajano-sa-panel {
		position: fixed;
		inset: 0;
		width: auto;
		height: auto;
		max-height: none;
		border-radius: 0;
	}

	#ajano-sa-root.ajano-sa-open .ajano-sa-button {
		position: fixed;
		right: 16px;
		bottom: 16px;
		width: 48px;
		height: 48px;
	}
}

/* ---------------------------------------------------------------------- *
 * Portreli düğme — "canlı biri var" hissi.
 *
 * Canlı render yerine tek kare + hareket. Üç işaret birlikte çalışıyor:
 * yüzün hafif salınımı (nefes), dışarı açılan halka (dikkat), yeşil nokta
 * (çevrimiçi). Üçü de ucuz; hiçbiri ana iş parçacığını meşgul etmiyor.
 *
 * `prefers-reduced-motion` açıkken hepsi duruyor: sürekli hareket eden bir
 * öğe, hareket duyarlılığı olan ziyaretçiler için rahatsız edici.
 * ---------------------------------------------------------------------- */

#ajano-sa-root.ajano-sa-has-face .ajano-sa-button {
	width: 64px;
	height: 64px;
	background: #fff;
	overflow: visible;
	position: relative;
}

#ajano-sa-root .ajano-sa-face {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	/* Portre üretilirken arka plan saydam bırakıldı; marka rengi buradan
	   geliyor ki asistan her temada aynı görünsün. */
	background: #c6fd51;
	display: block;
	animation: ajano-sa-breathe 4.5s ease-in-out infinite;
}

#ajano-sa-root .ajano-sa-dot {
	position: absolute;
	right: 2px;
	bottom: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 3px #fff;
}

/* Halka düğmenin ARKASINDA: yüzün üstünü kapatmıyor. */
#ajano-sa-root.ajano-sa-has-face .ajano-sa-button::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid #c6fd51;
	opacity: 0;
	animation: ajano-sa-ring 3.2s ease-out infinite;
	pointer-events: none;
}

/* Panel açıkken halka ve salınım durur: ziyaretçi zaten asistanla konuşuyor,
   dikkat çekmeye gerek yok. */
#ajano-sa-root.ajano-sa-open .ajano-sa-face,
#ajano-sa-root.ajano-sa-open .ajano-sa-button::before {
	animation: none;
}

@keyframes ajano-sa-breathe {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(-2px) scale(1.03); }
}

@keyframes ajano-sa-ring {
	0%   { opacity: 0.55; transform: scale(1); }
	70%  { opacity: 0;    transform: scale(1.35); }
	100% { opacity: 0;    transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
	#ajano-sa-root .ajano-sa-face,
	#ajano-sa-root .ajano-sa-button::before {
		animation: none;
	}
}