/*
 * ThemeFood — Anya Virtual Asisten
 * Styling widget chat "Anya" (bottom sheet). Semua class diprefix "tf-anya-"
 * agar tidak bentrok dengan style tema lain.
 * Warna brand toko: hijau #03AA0E.
 */

.tf-anya-sheet {
	position: fixed;
	inset: 0;
	z-index: 99999;
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.tf-anya-sheet.open {
	visibility: visible;
	opacity: 1;
}

/*
 * Selama sheet Anya terbuka (js/anya-chat.js memasang class "tf-anya-open" di <body>), elemen umpan
 * balik "Tambah ke troli" dari kartu produk di chat harus tampil DI ATAS sheet (z-index 99999):
 * toast tengah layar (#tfCenterToast) & miniatur terbang (.tf-fly) biasanya 10500, dan dialog Onsen
 * (alert "toko tutup") berada di z-index 2. Tanpa class ini (sheet tertutup) z-index aslinya tetap.
 */
body.tf-anya-open .tf-center-toast,
body.tf-anya-open .tf-fly {
	z-index: 100001;
}

body.tf-anya-open ons-alert-dialog {
	z-index: 100002;
}

.tf-anya-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
}

.tf-anya-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 78%;
	max-height: 78%;
	background: #fff;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -4px 24px rgba(0, 0, 0, .18);
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform .28s ease;
	overflow: hidden;
}

.tf-anya-sheet.open .tf-anya-panel {
	transform: translateY(0);
}

.tf-anya-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: #03AA0E;
	color: #fff;
}

.tf-anya-title {
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	overflow: hidden;
}

.tf-anya-title span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tf-anya-bot-icon {
	flex: 0 0 auto;
	color: #fff;
}

.tf-anya-close {
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	padding: 2px 8px;
	color: #fff;
}

.tf-anya-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 14px 12px;
	background: #f4f6f5;
}

.tf-anya-row {
	display: flex;
	margin-bottom: 10px;
}

.tf-anya-row-user {
	justify-content: flex-end;
}

.tf-anya-row-assistant {
	justify-content: flex-start;
	align-items: flex-end;
	gap: 6px;
}

.tf-anya-avatar {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #03AA0E;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.tf-anya-avatar .tf-anya-bot-icon {
	width: 16px;
	height: 16px;
}

.tf-anya-bubble {
	max-width: 78%;
	padding: 10px 13px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.45;
	word-wrap: break-word;
	white-space: normal;
}

.tf-anya-bubble-assistant {
	background: #eceff1;
	color: #222;
	border-bottom-left-radius: 4px;
}

.tf-anya-bubble-user {
	background: #03AA0E;
	color: #fff;
	border-bottom-right-radius: 4px;
}

.tf-anya-bubble-error {
	background: #fde3e8;
	color: #b3261e;
	border-bottom-left-radius: 4px;
}

/*
 * Kartu produk di dalam chat Anya (lihat tf_anya_render_product_cards() di
 * inc/anya-assistant.php). Class "item-list" dkk SENGAJA sama dengan kartu
 * produk asli di katalog utama (untuk kompatibilitas tombol Chat/Favorit/
 * Pesan lewat event handler global di js/script.js & js/cart.js), tapi
 * tampilannya di-override total di sini (specificity lebih tinggi lewat
 * ".tf-anya-bubble-cards") karena bubble chat jauh lebih sempit daripada
 * grid katalog.
 */
.tf-anya-bubble-cards {
	max-width: 88%;
	padding: 8px;
	background: #fff;
	border: 1px solid #e5e7e9;
}

.tf-anya-bubble-cards .item-list-wrapper {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tf-anya-bubble-cards .item-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px;
	border: 1px solid #e5e7e9;
	border-radius: 10px;
	background: #fafafa;
	/* front.css punya aturan grid katalog (mis. "body.desktop-layout.grid2
	   .item-list-wrapper .item-list { flex-basis: calc(25% - 10px); }") yang
	   spesifisitasnya lebih tinggi dari rule ini dan ikut kena ke kartu chat
	   (bikin kartu kepepet jadi ~112px lebar, teks judul patah per-huruf).
	   !important di sini memaksa kartu chat SELALU full-width terlepas dari
	   class grid1/grid2/desktop-layout di <body>. */
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.tf-anya-bubble-cards .item-open {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
}

/*
 * Pembungkus judul+harga, TERPISAH dari gambar. Tanpa ini, front.css
 * membuat .item-open jadi flex row dengan judul/harga/gambar semua jadi
 * flex-item sejajar (bukan judul-di-atas-harga seperti niatnya), sehingga
 * lebar judul kepepet nyaris 0 dan tekstnya patah per-huruf.
 */
.tf-anya-bubble-cards .tf-anya-card-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.tf-anya-bubble-cards .item-thumbnail {
	width: 48px !important;
	height: 48px !important;
	border-radius: 8px;
	object-fit: cover;
	flex: 0 0 auto;
	background: #eee;
	margin-top: 0 !important;
}

.tf-anya-bubble-cards .item-title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #222;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	margin: 0;
	padding: 0;
}

.tf-anya-bubble-cards .tf-anya-card-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
}

.tf-anya-bubble-cards .item-price {
	font-size: 13px;
	font-weight: 700;
	color: #03AA0E;
	margin: 0;
}

.tf-anya-bubble-cards .item-price-was {
	margin: 0;
}

/*
 * front.css otomatis menambahkan badge "Promo" (::after) di sebelah harga
 * coret lewat aturan global ".item-price-was:after" — di kartu chat yang
 * sempit ini posisinya jadi meleset/nyasar (belum ketemu akar penyebab
 * pastinya). Coretan harga lama sendiri sudah cukup menandakan diskon,
 * jadi badge teks "Promo"-nya disembunyikan saja khusus di sini.
 */
.tf-anya-bubble-cards .item-price-was:after {
	content: none;
}

/*
 * front.css punya "body.grid2 .item-list .item-price-was:after { position:
 * absolute; top:25px; left:20px; }" untuk badge "Promo" di grid katalog.
 * Karena .item-price-was di kartu chat ini tidak diberi positioning apa pun,
 * badge absolute itu jadi nempel ke leluhur ber-posisi TERDEKAT — yaitu
 * .tf-anya-panel (position:absolute, membungkus SELURUH widget chat) —
 * bukan ke harga produknya sendiri. Paksa balik ke posisi inline normal.
 */
.tf-anya-bubble-cards .item-list .item-price-was:after {
	position: relative !important;
	top: -1px !important;
	left: auto !important;
	right: auto !important;
	margin-left: 6px !important;
}

.tf-anya-bubble-cards .item-price-was span {
	font-size: 11px;
	color: #9aa0a6;
	text-decoration: line-through;
	margin-left: 0;
}

.tf-anya-bubble-cards .item-list.outofstock .item-price {
	color: #b3261e;
}

.tf-anya-bubble-cards .item-action {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	margin-left: auto;
}

.tf-anya-bubble-cards .item-action button {
	border: 1px solid #03AA0E;
	background: #fff;
	color: #03AA0E;
	border-radius: 8px;
	font-size: 12px;
	padding: 6px 10px;
	cursor: pointer;
	line-height: 1;
}

.tf-anya-bubble-cards .item-action .add-item {
	background: #03AA0E;
	color: #fff;
}

.tf-anya-bubble-cards .item-action .add-item[disabled] {
	background: #cfd3d4;
	border-color: #cfd3d4;
	color: #fff;
	cursor: not-allowed;
}

.tf-anya-bubble-cards .item-action .chat-item,
.tf-anya-bubble-cards .item-action .item-show-fav {
	width: 32px;
	height: 32px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.tf-anya-bubble a {
	color: #03AA0E;
	text-decoration: underline;
	word-break: break-all;
}

.tf-anya-bubble-user a {
	color: #fff;
}

.tf-anya-typing {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 12px 14px;
}

.tf-anya-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #9aa0a6;
	display: inline-block;
	animation: tf-anya-blink 1.2s infinite ease-in-out;
}

.tf-anya-dot:nth-child(2) {
	animation-delay: .2s;
}

.tf-anya-dot:nth-child(3) {
	animation-delay: .4s;
}

@keyframes tf-anya-blink {

	0%,
	80%,
	100% {
		opacity: .3;
		transform: translateY(0);
	}

	40% {
		opacity: 1;
		transform: translateY(-2px);
	}
}

.tf-anya-input-row {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px;
	background: #fff;
	border-top: 1px solid #e5e7e9;
	padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

/* Satu kolom berbingkai (bulat, hijau saat fokus) berisi: teks + mic + kamera. Tombol kirim ada di luar, di kanan. */
.tf-anya-field {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	min-height: 40px;
	border: 1px solid #dcdfe1;
	border-radius: 20px;
	background: #fff;
}

.tf-anya-field:focus-within {
	border-color: #03AA0E;
}

.tf-anya-input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	resize: none;
	max-height: 90px;
	min-height: 38px;
	border: 0;
	border-radius: 20px;
	background: transparent;
	/* teks tidak pernah masuk ke bawah ikon: ikon adalah saudara flex di kanan, bukan tumpang-tindih */
	padding: 9px 4px 9px 15px;
	font-size: 14px;
	line-height: 1.4;
	font-family: inherit;
	outline: none;
}

.tf-anya-send {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: #03AA0E;
	color: #fff;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s ease;
}

.tf-anya-send:active {
	background: #028a0c;
}

@media (max-width: 480px) {
	.tf-anya-panel {
		height: 80%;
		max-height: 80%;
	}

	.tf-anya-bubble {
		max-width: 85%;
	}
}

/*
 * ---------------------------------------------------------------------------
 * Suara & foto (js/tf-voice-photo.js, js/anya-chat.js)
 * Tombol mic/kamera di baris input, status "Mendengarkan…", chip pratinjau
 * foto, miniatur foto di gelembung pelanggan, serta toast & pemberitahuan
 * privasi yang dipakai bersama kolom cari beranda.
 * ---------------------------------------------------------------------------
 */
.tf-anya-input-row {
	gap: 6px;
}

.tf-anya-status[hidden],
.tf-anya-attach[hidden] {
	display: none !important;
}

.tf-anya-status {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	background: #fff;
	border-top: 1px solid #e5e7e9;
	font-size: 13px;
	color: #555;
}

.tf-anya-status.is-rec {
	color: #b3261e;
	font-weight: 600;
}

.tf-anya-status.is-rec::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #E24B4A;
	animation: tf-anya-rec-blink 1s infinite ease-in-out;
}

@keyframes tf-anya-rec-blink {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: .25;
	}
}

/* Ikon mic/kamera: kecil, tanpa lingkaran latar, di dalam kolom (ketuk area 36px). */
.tf-anya-tool {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	margin: 0 0 1px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #03AA0E;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background .15s ease, color .15s ease;
}

.tf-anya-tool:last-child {
	margin-right: 2px;
}

.tf-anya-tool:active {
	background: #dcefde;
}

.tf-anya-tool svg {
	display: block;
	pointer-events: none;
}

.tf-anya-input-row.is-listening .tf-anya-mic {
	background: #E24B4A;
	color: #fff;
	animation: tf-anya-mic-pulse 1.2s infinite;
}

@keyframes tf-anya-mic-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(226, 75, 74, .55);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(226, 75, 74, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(226, 75, 74, 0);
	}
}

.tf-anya-input-row.is-busy .tf-anya-tool {
	opacity: .45;
	pointer-events: none;
}

.tf-anya-attach {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px;
	background: #f4faf4;
	border-top: 1px solid #e5e7e9;
}

.tf-anya-attach-thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
	background: #eee;
}

.tf-anya-attach-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	line-height: 1.35;
	color: #444;
}

.tf-anya-attach-x {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	color: #666;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.tf-anya-bubble-photo {
	padding: 6px;
}

.tf-anya-bubble-img {
	display: block;
	width: 180px;
	max-width: 100%;
	max-height: 220px;
	border-radius: 10px;
	object-fit: cover;
	background: #eee;
}

.tf-anya-bubble-photo-text .tf-anya-bubble-img {
	margin-bottom: 6px;
}

/* Toast pesan singkat (suara/foto) — di atas sheet Anya & toast lain. */
.tf-vp-toast {
	position: fixed;
	left: 50%;
	bottom: 110px;
	max-width: 88%;
	transform: translate(-50%, 8px);
	padding: 10px 16px;
	border-radius: 22px;
	background: rgba(30, 30, 30, .92);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	z-index: 100005;
}

.tf-vp-toast.is-show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Pemberitahuan privasi foto (sekali saja). */
.tf-vp-notice {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, .5);
	z-index: 100004;
}

.tf-vp-notice-box {
	width: 100%;
	max-width: 320px;
	padding: 20px;
	border-radius: 14px;
	background: #fff;
	color: #222;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
	text-align: center;
}

.tf-vp-notice-box p {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.5;
}

.tf-vp-notice-ok {
	width: 100%;
	min-height: 44px;
	border: none;
	border-radius: 22px;
	background: #03AA0E;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

/* Pilihan sumber foto di HP: Ambil foto / Pilih dari galeri atau file (lembar dari bawah). */
.tf-vp-source {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(0, 0, 0, .5);
	z-index: 100004;
}

.tf-vp-source-box {
	width: 100%;
	max-width: 480px;
	padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	border-radius: 18px 18px 0 0;
	background: #fff;
	box-shadow: 0 -6px 24px rgba(0, 0, 0, .2);
}

.tf-vp-source-btn,
.tf-vp-source-cancel {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0 0 10px;
	border: none;
	border-radius: 24px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.tf-vp-source-btn {
	background: #03AA0E;
	color: #fff;
}

.tf-vp-source-btn[data-src="file"] {
	background: #eef6ee;
	color: #03790b;
}

.tf-vp-source-cancel {
	margin-bottom: 0;
	background: transparent;
	color: #666;
	font-weight: 600;
}

/* Jendela webcam di desktop/laptop: pratinjau langsung + Jepret / Ulangi / Pakai foto / Batal. */
.tf-vp-cam {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, .6);
	z-index: 100004;
}

.tf-vp-cam [hidden] {
	display: none !important;
}

.tf-vp-cam-box {
	box-sizing: border-box;
	width: 100%;
	max-width: 640px;
	max-height: 100%;
	overflow-y: auto;
	padding: 14px;
	border-radius: 18px;
	background: #fff;
	color: #222;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}

.tf-vp-cam-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	border-radius: 12px;
	background: #111;
	overflow: hidden;
}

.tf-vp-cam-video,
.tf-vp-cam-shot {
	display: block;
	width: 100%;
	max-height: 60vh;
	object-fit: contain;
	background: #111;
}

.tf-vp-cam-msg {
	margin: 10px 0;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	color: #444;
}

.tf-vp-cam-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tf-vp-cam-btn,
.tf-vp-cam-cancel {
	flex: 1 1 140px;
	min-height: 48px;
	border: none;
	border-radius: 24px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.tf-vp-cam-btn {
	background: #03AA0E;
	color: #fff;
}

.tf-vp-cam-btn:disabled {
	opacity: .5;
	cursor: default;
}

.tf-vp-cam-btn.tf-vp-cam-alt {
	background: #eef6ee;
	color: #03790b;
}

.tf-vp-cam-cancel {
	background: transparent;
	color: #666;
	font-weight: 600;
}

.tf-vp-cam button:focus-visible {
	outline: 3px solid #0a6cff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	.tf-anya-input-row.is-listening .tf-anya-mic,
	.tf-anya-status.is-rec::before {
		animation: none;
	}
}