/* ============================================================
   AJW — AI Markdown Page Widget — Frontend Widget CSS
   ============================================================ */

@property --ajwa-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

/* ---- Floating wrapper ---- */
.ajwa-widget-wrap {
	position: fixed;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	z-index: 9990;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.ajwa-widget-wrap.ajwa-visible {
	opacity: 1;
	pointer-events: all;
}

/* Left position */
.ajwa-widget-wrap.ajwa-pos-left {
	right: auto;
	left: 40px;
}

/* Inline shortcode version */
.ajwa-widget-wrap.ajwa-widget-inline {
	position: relative;
	top: auto;
	right: auto;
	left: auto;
	transform: none;
	opacity: 1;
	pointer-events: all;
	display: inline-flex;
}
.ajwa-widget-inline .ajwa-widget {
	display: inline-flex;
}

/* ---- Widget container ---- */
.ajwa-widget {
	display: flex;
	justify-content: flex-end;
	position: relative;
}
.ajwa-widget.ajwa-widget--left {
	justify-content: flex-start;
}

/* AI badge above widget */
.ajwa-widget::before {
	content: "";
	position: absolute;
    top: -32px;
    right: -8px;
    width: 40px;
    height: 40px;
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20viewBox%3D%220%200%20680%20520%22%20role%3D%22img%22%20style%3D%22%22%3E%0A%20%20%3Ctitle%20style%3D%22fill%3Argb(0%2C%200%2C%200)%3Bstroke%3Anone%3Bcolor%3Argb(255%2C%20255%2C%20255)%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bopacity%3A1%3Bfont-family%3A%26quot%3BAnthropic%20Sans%26quot%3B%2C%20-apple-system%2C%20BlinkMacSystemFont%2C%20%26quot%3BSegoe%20UI%26quot%3B%2C%20sans-serif%3Bfont-size%3A16px%3Bfont-weight%3A400%3Btext-anchor%3Astart%3Bdominant-baseline%3Aauto%22%3EGemini%20AI%20Icon%3C%2Ftitle%3E%0A%20%20%3Cdesc%20style%3D%22fill%3Argb(0%2C%200%2C%200)%3Bstroke%3Anone%3Bcolor%3Argb(255%2C%20255%2C%20255)%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bopacity%3A1%3Bfont-family%3A%26quot%3BAnthropic%20Sans%26quot%3B%2C%20-apple-system%2C%20BlinkMacSystemFont%2C%20%26quot%3BSegoe%20UI%26quot%3B%2C%20sans-serif%3Bfont-size%3A16px%3Bfont-weight%3A400%3Btext-anchor%3Astart%3Bdominant-baseline%3Aauto%22%3EGemini%20AI%20logo%20with%20three%20four-pointed%20stars%20%E2%80%94%20one%20large%2C%20one%20medium%2C%20one%20tiny%20%E2%80%94%20in%20purple%20to%20cyan%20gradient%3C%2Fdesc%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22g1%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20style%3D%22stop-color%3A%239333EA%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%2250%25%22%20style%3D%22stop-color%3A%23A855F7%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3A%2322D3EE%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22g2%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20style%3D%22stop-color%3A%23818CF8%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3A%2322D3EE%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22g3%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20style%3D%22stop-color%3A%23A855F7%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3A%239333EA%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%0A%20%20%3C!--%20Large%20star%20centered%20at%20390%2C%20230%20--%3E%0A%20%20%3Cpath%20d%3D%22%26%2310%3B%20%20%20%20M%20390%2040%26%2310%3B%20%20%20%20C%20408%20155%2C%20460%20200%2C%20590%20230%26%2310%3B%20%20%20%20C%20460%20260%2C%20408%20305%2C%20390%20420%26%2310%3B%20%20%20%20C%20372%20305%2C%20320%20260%2C%20190%20230%26%2310%3B%20%20%20%20C%20320%20200%2C%20372%20155%2C%20390%2040%26%2310%3B%20%20%20%20Z%26%2310%3B%20%20%22%20fill%3D%22url(%23g1)%22%20style%3D%22stroke%3Anone%3Bcolor%3Argb(255%2C%20255%2C%20255)%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bopacity%3A1%3Bfont-family%3A%26quot%3BAnthropic%20Sans%26quot%3B%2C%20-apple-system%2C%20BlinkMacSystemFont%2C%20%26quot%3BSegoe%20UI%26quot%3B%2C%20sans-serif%3Bfont-size%3A16px%3Bfont-weight%3A400%3Btext-anchor%3Astart%3Bdominant-baseline%3Aauto%22%2F%3E%0A%0A%20%20%3C!--%20Medium%20star%20at%20bottom-left%20~175%2C%20380%20--%3E%0A%20%20%3Cpath%20d%3D%22%26%2310%3B%20%20%20%20M%20175%20300%26%2310%3B%20%20%20%20C%20183%20338%2C%20205%20358%2C%20255%20370%26%2310%3B%20%20%20%20C%20205%20382%2C%20183%20402%2C%20175%20440%26%2310%3B%20%20%20%20C%20167%20402%2C%20145%20382%2C%2095%20370%26%2310%3B%20%20%20%20C%20145%20358%2C%20167%20338%2C%20175%20300%26%2310%3B%20%20%20%20Z%26%2310%3B%20%20%22%20fill%3D%22url(%23g2)%22%20style%3D%22stroke%3Anone%3Bcolor%3Argb(255%2C%20255%2C%20255)%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bopacity%3A1%3Bfont-family%3A%26quot%3BAnthropic%20Sans%26quot%3B%2C%20-apple-system%2C%20BlinkMacSystemFont%2C%20%26quot%3BSegoe%20UI%26quot%3B%2C%20sans-serif%3Bfont-size%3A16px%3Bfont-weight%3A400%3Btext-anchor%3Astart%3Bdominant-baseline%3Aauto%22%2F%3E%0A%0A%20%20%3C!--%20Tiny%20star%20at%20left%20~108%2C%20248%20--%3E%0A%20%20%3Cpath%20d%3D%22%26%2310%3B%20%20%20%20M%20108%20228%26%2310%3B%20%20%20%20C%20110%20237%2C%20116%20242%2C%20130%20245%26%2310%3B%20%20%20%20C%20116%20248%2C%20110%20253%2C%20108%20262%26%2310%3B%20%20%20%20C%20106%20253%2C%20100%20248%2C%2086%20245%26%2310%3B%20%20%20%20C%20100%20242%2C%20106%20237%2C%20108%20228%26%2310%3B%20%20%20%20Z%26%2310%3B%20%20%22%20fill%3D%22url(%23g3)%22%20style%3D%22stroke%3Anone%3Bcolor%3Argb(255%2C%20255%2C%20255)%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bopacity%3A1%3Bfont-family%3A%26quot%3BAnthropic%20Sans%26quot%3B%2C%20-apple-system%2C%20BlinkMacSystemFont%2C%20%26quot%3BSegoe%20UI%26quot%3B%2C%20sans-serif%3Bfont-size%3A16px%3Bfont-weight%3A400%3Btext-anchor%3Astart%3Bdominant-baseline%3Aauto%22%2F%3E%0A%3Cscript%20xmlns%3D%22%22%2F%3E%3C%2Fsvg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}
.ajwa-widget.ajwa-widget--left::before {
	right: auto;
	left: -8px;
}

/* ---- Nav bar ---- */
.ajwa-nav-bar {
	list-style: none;
	margin: 0;
	padding: 0;
	border-radius: 11px;
	background: #fff;
	position: relative;
	box-shadow:
		-2px 0 32px rgba(24, 99, 220, 0.22),
		 2px 2px 23px rgba(45, 173, 112, 0.28);
}

/* Animated snake gradient border */
.ajwa-nav-bar::before {
	content: "";
	position: absolute;
	inset: -1.5px;
	background: conic-gradient(
		from var(--ajwa-angle, 0deg),
		#30D48B, #3783FF, #a855f7, #3783FF, #30D48B
	);
	border-radius: 12px;
	z-index: -1;
	animation: ajwa-snake 3s linear infinite, ajwa-shine 3s ease-in-out infinite;
}

@keyframes ajwa-snake {
	to { --ajwa-angle: 360deg; }
}
@keyframes ajwa-shine {
	0%, 100% { filter: brightness(1); }
	50%       { filter: brightness(1.6) drop-shadow(0 0 6px #30D48B); }
}

/* ---- Nav items ---- */
.ajwa-nav-item {
	border-bottom: 1px solid #D1E0F8;
	position: relative;
}
.ajwa-nav-item:first-child { border-radius: 11px 11px 0 0; }
.ajwa-nav-item:last-child  { border-bottom: none; border-radius: 0 0 11px 11px; }

.ajwa-nav-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 11px 12px;
	text-decoration: none;
	color: #525363;
	transition: background 0.2s;
	position: relative;
	cursor: pointer;
}
.ajwa-nav-item:hover a { background: #D1E0F8; }

.ajwa-nav-item a img {
	display: block;
	width: 25px;
	height: 24px;
	object-fit: contain;
}
.ajwa-icon-text {
	width: 25px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	background: linear-gradient(135deg, #30D48B, #3783FF);
	color: white;
	border-radius: 5px;
}

/* ---- Tooltip ---- */
.ajwa-nav-tooltip {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: #fff;
	color: #525363;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	padding: 7px 10px;
	border-radius: 8px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 10000;
	box-shadow:
		1.3px 1.3px 5.3px rgba(45, 173, 112, 0.32),
		-1.3px 0px 5.3px rgba(24, 99, 220, 0.25);
}
.ajwa-nav-tooltip::before {
	content: "";
	position: absolute;
	inset: -1px;
	background: linear-gradient(to right, #30D48B, #3783FF);
	border-radius: 9px;
	z-index: -1;
}
.ajwa-nav-tooltip::after {
	content: "";
	position: absolute;
	inset: 0;
	background: white;
	border-radius: 8px;
	z-index: -1;
}

/* Tooltip — right widget → tooltip on left */
.ajwa-widget--right .ajwa-nav-tooltip,
.ajwa-nav-tooltip.ajwa-tooltip--left {
	right: calc(100% + 14px);
	left: auto;
}
/* Tooltip — left widget → tooltip on right */
.ajwa-widget--left .ajwa-nav-tooltip,
.ajwa-nav-tooltip.ajwa-tooltip--right {
	left: calc(100% + 14px);
	right: auto;
}

.ajwa-nav-item:hover .ajwa-nav-tooltip { display: block; }

/* Caret arrow — right widget */
.ajwa-widget--right .ajwa-nav-item a::before {
	content: "";
	position: absolute;
	top: 50%; right: calc(100% + 8px);
	margin-top: -6px;
	border: 6px solid transparent;
	border-left-color: #3783FF;
	opacity: 0;
	transition: opacity .15s;
}
.ajwa-widget--right .ajwa-nav-item a::after {
	content: "";
	position: absolute;
	top: 50%; right: calc(100% + 9px);
	margin-top: -5px;
	border: 5px solid transparent;
	border-left-color: #fff;
	opacity: 0;
	transition: opacity .15s;
}

/* Caret arrow — left widget */
.ajwa-widget--left .ajwa-nav-item a::before {
	content: "";
	position: absolute;
	top: 50%; left: calc(100% + 8px);
	margin-top: -6px;
	border: 6px solid transparent;
	border-right-color: #30D48B;
	opacity: 0;
	transition: opacity .15s;
}
.ajwa-widget--left .ajwa-nav-item a::after {
	content: "";
	position: absolute;
	top: 50%; left: calc(100% + 9px);
	margin-top: -5px;
	border: 5px solid transparent;
	border-right-color: #fff;
	opacity: 0;
	transition: opacity .15s;
}
.ajwa-nav-item:first-child:hover a {
    border-radius: 11px 11px 0 0;
}
.ajwa-nav-item:last-child:hover a {
    border-radius: 0 0 11px 11px;
}

.ajwa-nav-item:hover a::before,
.ajwa-nav-item:hover a::after { opacity: 1; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
	.ajwa-widget-wrap           { right: 16px; }
	.ajwa-widget-wrap.ajwa-pos-left { left: 16px; }
	.ajwa-nav-tooltip           { display: none !important; }
}