.ggd-tc {
	--t-bg-r: var(--card-2-r, 28); --t-bg-g: var(--card-2-g, 19); --t-bg-b: var(--card-2-b, 16);
	--t-tx: var(--text, #f7ede0); --t-tx-r: var(--text-r, 247); --t-tx-g: var(--text-g, 237); --t-tx-b: var(--text-b, 224);
	--t-mu: var(--mute, #bba18a);
	--t-ln-r: var(--line-r, 56); --t-ln-g: var(--line-g, 34); --t-ln-b: var(--line-b, 26);
	--t-ac: var(--accent, #ffc04d); --t-ac-r: var(--accent-r, 255); --t-ac-g: var(--accent-g, 192); --t-ac-b: var(--accent-b, 77);
	--t-ok: var(--ok, #3ecf8e); --t-ok-r: var(--ok-r, 62); --t-ok-g: var(--ok-g, 207); --t-ok-b: var(--ok-b, 142);
	--t-err: var(--err, #ff5b5b); --t-err-r: var(--err-r, 255); --t-err-g: var(--err-g, 91); --t-err-b: var(--err-b, 91);
	--t-warn: var(--warn, #ffc857); --t-warn-r: var(--warn-r, 255); --t-warn-g: var(--warn-g, 200); --t-warn-b: var(--warn-b, 87);
	--t-info: var(--info, #6bb4ff); --t-info-r: var(--info-r, 107); --t-info-g: var(--info-g, 180); --t-info-b: var(--info-b, 255);

	position: fixed;
	z-index: 100002;
	left: 14px;
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	width: min(372px, calc(100vw - 28px));
	display: flex;
	flex-direction: column;
	pointer-events: none;
	direction: rtl;
	font-family: var(--ggd-ff-body, "Vazirmatn", Tahoma, sans-serif);
	-webkit-tap-highlight-color: transparent;
}
.ggd-tc *, .ggd-tc *::before, .ggd-tc *::after { box-sizing: border-box; font-family: inherit; }

.ggd-tw {
	display: grid;
	grid-template-rows: 1fr;
	margin-top: 8px;
	transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1), margin-top .32s cubic-bezier(.2, .8, .2, 1);
}
.ggd-tw.is-gone { grid-template-rows: 0fr; margin-top: 0; }

.ggd-t {
	--c: var(--t-ac); --c-r: var(--t-ac-r); --c-g: var(--t-ac-g); --c-b: var(--t-ac-b);
	--tx0: -112%;
	position: relative;
	min-height: 0;
	overflow: hidden;
	pointer-events: auto;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	cursor: default;
	border-radius: 10px;
	color: var(--t-tx);
	background: rgba(var(--t-bg-r), var(--t-bg-g), var(--t-bg-b), 0.9);

	border: 1px solid rgb(calc(var(--t-ln-r)*0.85 + var(--c-r)*0.15), calc(var(--t-ln-g)*0.85 + var(--c-g)*0.15), calc(var(--t-ln-b)*0.85 + var(--c-b)*0.15));
	box-shadow: 0 16px 44px rgba(0, 0, 0, .42), 0 2px 8px rgba(0, 0, 0, .25);
	opacity: 0;
	transform: translate3d(var(--tx0), 0, 0);
	transition: transform .42s cubic-bezier(.16, .9, .24, 1), opacity .3s ease;
	will-change: transform, opacity;
}
.ggd-t[data-type="ok"]   { --c: var(--t-ok); --c-r: var(--t-ok-r); --c-g: var(--t-ok-g); --c-b: var(--t-ok-b); }
.ggd-t[data-type="err"]  { --c: var(--t-err); --c-r: var(--t-err-r); --c-g: var(--t-err-g); --c-b: var(--t-err-b); }
.ggd-t[data-type="warn"] { --c: var(--t-warn); --c-r: var(--t-warn-r); --c-g: var(--t-warn-g); --c-b: var(--t-warn-b); }
.ggd-t[data-type="info"] { --c: var(--t-info); --c-r: var(--t-info-r); --c-g: var(--t-info-g); --c-b: var(--t-info-b); }

.ggd-t.is-in { opacity: 1; transform: translate3d(0, 0, 0); }
.ggd-t.is-out { opacity: 0; transform: translate3d(calc(var(--tx0) * .22), 0, 0); transition-duration: .3s, .26s; transition-timing-function: cubic-bezier(.5, 0, .75, 0), ease; }
.ggd-t.is-drag { transition: none !important; cursor: grabbing; }
.ggd-t.is-bump { animation: ggd-t-bump .35s ease; }

.ggd-t-bar { position: absolute; z-index: 2; inset: 0 0 auto 0; height: 3px; background: rgba(var(--c-r), var(--c-g), var(--c-b), 0.18); pointer-events: none; }
.ggd-t-bar i {
	display: block; width: 100%; height: 100%;
	background: linear-gradient(90deg, var(--c), rgb(calc(var(--c-r)*0.55 + 114.75), calc(var(--c-g)*0.55 + 114.75), calc(var(--c-b)*0.55 + 114.75)));
	transform-origin: right center;
	animation: ggd-t-bar var(--d, 4200ms) linear forwards;
}
.ggd-t.is-drag .ggd-t-bar i,
.ggd-t:focus-within .ggd-t-bar i,
.ggd-tc.is-hidden .ggd-t-bar i,
.ggd-t.is-press .ggd-t-bar i { animation-play-state: paused; }
@media (hover: hover) { .ggd-t:hover .ggd-t-bar i { animation-play-state: paused; } }

.ggd-t-top { display: flex; align-items: center; gap: 8px; padding: 12px 14px 0 8px; }
.ggd-t-app { flex: none; width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }
.ggd-t-name { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--t-mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .1px; }
.ggd-t-x {
	flex: none; width: 28px; height: 28px; margin: -6px 0 -6px 0; display: grid; place-items: center;
	border: 0; border-radius: 6px; background: none; color: var(--t-mu); cursor: pointer;
	transition: background .18s, color .18s;
}
.ggd-t-x svg { width: 14px; height: 14px; }
.ggd-t-x:hover, .ggd-t-x:focus-visible { background: rgba(var(--t-tx-r), var(--t-tx-g), var(--t-tx-b), 0.12); color: var(--t-tx); outline: 0; }
.ggd-t-x:active { background: rgba(var(--t-tx-r), var(--t-tx-g), var(--t-tx-b), 0.2); }

.ggd-t-main { display: flex; align-items: flex-start; gap: 12px; padding: 8px 14px 14px; }
.ggd-t-ic {
	flex: none; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden;
	border-radius: 10px; color: var(--c); background: rgba(var(--c-r), var(--c-g), var(--c-b), 0.16);
}
.ggd-t-ic svg { width: 22px; height: 22px; }
.ggd-t-ic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ggd-t-ic.is-img { border-radius: 50%; background: none; box-shadow: 0 0 0 2px rgba(var(--c-r), var(--c-g), var(--c-b), 0.55); }
.ggd-t-tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ggd-t-tx b { font-size: 14px; font-weight: 800; line-height: 1.7; color: var(--t-tx); overflow-wrap: anywhere; }
.ggd-t-tx p { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.85; color: var(--t-mu); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ggd-t-tx p:empty { display: none; }
.ggd-t-tx a { color: var(--c); font-weight: 700; margin-inline-start: 4px; text-decoration: none; }
.ggd-t-tx a:hover { text-decoration: underline; }
.ggd-t-act {
	display: inline-flex; width: fit-content; margin-top: 6px; padding: 5px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 700;
	color: var(--t-tx); background: rgba(var(--t-tx-r), var(--t-tx-g), var(--t-tx-b), 0.1); text-decoration: none; transition: background .18s;
}
.ggd-t-act:hover { background: rgba(var(--c-r), var(--c-g), var(--c-b), 0.24); }

.ggd-t.is-alert {
	background: rgb(calc(var(--t-err-r)*0.13 + var(--t-bg-r)*0.87), calc(var(--t-err-g)*0.13 + var(--t-bg-g)*0.87), calc(var(--t-err-b)*0.13 + var(--t-bg-b)*0.87));
	border-color: rgba(var(--t-err-r), var(--t-err-g), var(--t-err-b), 0.62);
	box-shadow: 0 16px 44px rgba(0, 0, 0, .42), 0 8px 30px rgba(var(--t-err-r), var(--t-err-g), var(--t-err-b), 0.3);
}
.ggd-t.is-alert .ggd-t-bar { height: 4px; }
.ggd-t.is-alert .ggd-t-ic { background: var(--t-err); color: #fff; box-shadow: 0 6px 16px rgba(var(--t-err-r), var(--t-err-g), var(--t-err-b), 0.45); }
.ggd-t.is-alert .ggd-t-tx b { color: var(--t-tx); }
.ggd-t.is-alert .ggd-t-act { background: var(--t-err); color: #fff; padding: 7px 18px; font-weight: 800; box-shadow: 0 4px 14px rgba(var(--t-err-r), var(--t-err-g), var(--t-err-b), 0.4); }
.ggd-t.is-alert .ggd-t-act:hover, .ggd-t.is-alert .ggd-t-act:focus-visible { background: rgb(calc(var(--t-err-r)*0.85 + 0), calc(var(--t-err-g)*0.85 + 0), calc(var(--t-err-b)*0.85 + 0)); outline: 0; }

.ggd-t[data-tone] {
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(var(--c-r), var(--c-g), var(--c-b), 0.2) 0%, transparent 60%),
		rgba(var(--t-bg-r), var(--t-bg-g), var(--t-bg-b), 0.92);
	border-color: rgb(calc(var(--c-r)*0.48 + var(--t-ln-r)*0.52), calc(var(--c-g)*0.48 + var(--t-ln-g)*0.52), calc(var(--c-b)*0.48 + var(--t-ln-b)*0.52));
	box-shadow: 0 16px 44px rgba(0, 0, 0, .42), 0 6px 26px rgba(var(--c-r), var(--c-g), var(--c-b), 0.24);
}
.ggd-t[data-tone] .ggd-t-ic {
	color: #fff;
	background: linear-gradient(145deg, var(--c), rgb(calc(var(--c-r)*0.58 + 0), calc(var(--c-g)*0.58 + 0), calc(var(--c-b)*0.58 + 0)));
	box-shadow: 0 6px 16px rgba(var(--c-r), var(--c-g), var(--c-b), 0.42);
	border-radius: 14px;
}
.ggd-t[data-tone].is-in .ggd-t-ic svg { animation: ggd-t-pop .7s .15s cubic-bezier(.3, 1.6, .5, 1) both; }
.ggd-t[data-tone] .ggd-t-act {
	background: linear-gradient(145deg, var(--c), rgb(calc(var(--c-r)*0.62 + 0), calc(var(--c-g)*0.62 + 0), calc(var(--c-b)*0.62 + 0)));
	color: #fff; padding: 7px 18px; font-weight: 800;
	box-shadow: 0 4px 14px rgba(var(--c-r), var(--c-g), var(--c-b), 0.38);
}
.ggd-t[data-tone] .ggd-t-act:hover, .ggd-t[data-tone] .ggd-t-act:focus-visible { filter: brightness(1.1); outline: 0; }
.ggd-t[data-tone="like"]    { --c: #ff4f8b; --c-r: 255; --c-g: 79; --c-b: 139; }
.ggd-t[data-tone="dislike"] { --c: #8f7cf8; --c-r: 143; --c-g: 124; --c-b: 248; }
.ggd-t[data-tone="app"]     { --c: var(--t-ok); --c-r: var(--t-ok-r); --c-g: var(--t-ok-g); --c-b: var(--t-ok-b); }
.ggd-t[data-tone="offline"] { --c: #ffa53a; --c-r: 255; --c-g: 165; --c-b: 58; }
.ggd-t[data-tone="dislike"].is-in .ggd-t-ic svg { animation-name: ggd-t-pop-down; }

.ggd-wf { opacity: .16; animation: ggd-wf 1.6s ease-in-out infinite; }
.ggd-wf.w1 { animation-delay: .2s; }
.ggd-wf.w2 { animation-delay: .4s; }
.ggd-wf.w3 { animation-delay: .6s; }
@keyframes ggd-wf { 0%, 62%, 100% { opacity: .16; } 14%, 40% { opacity: 1; } }

@keyframes ggd-t-pop { 0% { transform: scale(.4) rotate(-14deg); } 100% { transform: none; } }
@keyframes ggd-t-pop-down { 0% { transform: scale(.4) rotate(14deg); } 100% { transform: none; } }

@media (max-width: 720px) {
	.ggd-tc {
		left: 50%; bottom: auto; top: calc(2px + env(safe-area-inset-top, 0px));
		width: min(520px, calc(100vw - 20px));
		transform: translateX(-50%);
	}
	.ggd-t { --tx0: 0px; transform: translate3d(0, -130%, 0); }
	.ggd-t.is-in { transform: translate3d(0, 0, 0); }
	.ggd-t.is-out { transform: translate3d(0, -40%, 0); }
}

@keyframes ggd-t-bar { 0% { transform: scaleX(1); opacity: 1; } 94% { opacity: 1; } 100% { transform: scaleX(0); opacity: 0; } }
@keyframes ggd-t-bump { 0%, 100% { scale: 1; } 40% { scale: 1.035; } }

@media (prefers-reduced-motion: reduce) {
	.ggd-t, .ggd-t.is-in, .ggd-t.is-out { transform: none; transition: opacity .2s ease; }
	.ggd-t.is-bump { animation: none; }
	.ggd-t[data-tone].is-in .ggd-t-ic svg { animation: none; }
	.ggd-wf { animation: none; opacity: 1; }
	.ggd-tw { transition: none; }
}