/**
 * AI Icon List — Frontend Styles
 *
 * PHP adds these classes directly to .ail-wrap:
 *
 *  [Icon Style]
 *   .ail-icon-box   → "Icon with background box"
 *   .ail-icon-bare  → "Icon only (no background)"
 *
 *  [Item Content]
 *   .ail-icon-text  → "Icon + Text"
 *   .ail-icon-only  → "Icon only"
 *   .ail-text-only  → "Text only"
 *
 *  [Font Weight]
 *   .ail-weight-100 … .ail-weight-900
 */

/* ── CSS token defaults (light mode) ──────────────────── */
.ail-wrap {
	--ail-text-color:  var(--ail-light-text,    #475569);
	--ail-icon-color:  var(--ail-light-icon,    #2563eb);
	--ail-icon-bg:     var(--ail-light-icon-bg, #ffffff);
	--ail-bg-card:     #f8fafc;
	--ail-border:      #e2e8f0;
	--ail-icon-shadow: 0 1px 3px rgba(0,0,0,0.10);
	--ail-box-size:    calc(var(--ail-icon-size, 16px) + 20px);
}

/* ── Dark-mode token overrides ────────────────────────── */
@media (prefers-color-scheme: dark) {
	html:not(.theme-light) .ail-wrap {
		--ail-text-color:  var(--ail-dark-text,    #cbd5e1);
		--ail-icon-color:  var(--ail-dark-icon,    #60a5fa);
		--ail-icon-bg:     var(--ail-dark-icon-bg, #0f172a);
		--ail-bg-card:     #1e293b;
		--ail-border:      #334155;
		--ail-icon-shadow: 0 1px 4px rgba(0,0,0,0.30);
	}
}
html.theme-dark .ail-wrap,
html.dark       .ail-wrap {
	--ail-text-color:  var(--ail-dark-text,    #cbd5e1);
	--ail-icon-color:  var(--ail-dark-icon,    #60a5fa);
	--ail-icon-bg:     var(--ail-dark-icon-bg, #0f172a);
	--ail-bg-card:     #1e293b;
	--ail-border:      #334155;
	--ail-icon-shadow: 0 1px 4px rgba(0,0,0,0.30);
}

/* ── Wrapper ───────────────────────────────────────────── */
.ail-wrap { display: block !important; width: 100%; }



/* ── List ──────────────────────────────────────────────── */
.ail-list {
	margin: 0 !important; padding: 0 !important;
	list-style: none !important;
	display: flex !important; flex-direction: column !important;
	gap: 16px !important;
}

/* ── Item row ──────────────────────────────────────────── */
.ail-item {
	display: flex !important; align-items: var(--ail-align-items, center) !important;
	gap: 12px !important; margin: 0 !important; padding: 0 !important;
}

/* ── Icon box base ─────────────────────────────────────── */
.ail-icon-box {
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--ail-icon-color) !important;
}
.ail-icon-box i { display: flex !important; align-items: center; line-height: 1; }
.ail-icon-box svg {
	width:      var(--ail-icon-size, 16px) !important;
	height:     var(--ail-icon-size, 16px) !important;
	min-width:  var(--ail-icon-size, 16px) !important;
	min-height: var(--ail-icon-size, 16px) !important;
	max-width:  var(--ail-icon-size, 16px) !important;
	max-height: var(--ail-icon-size, 16px) !important;
	stroke: currentColor !important; fill: none !important;
	display: block !important; flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   ICON STYLE → .ail-wrap.ail-icon-box
   Option: "Icon with background box"
══════════════════════════════════════════════════════════ */
.ail-wrap.ail-icon-box .ail-icon-box {
	width:      var(--ail-box-size, 36px) !important;
	height:     var(--ail-box-size, 36px) !important;
	min-width:  var(--ail-box-size, 36px) !important;
	min-height: var(--ail-box-size, 36px) !important;
	border-radius: 10px !important;
	background-color: var(--ail-icon-bg) !important;
	box-shadow: var(--ail-icon-shadow) !important;
	overflow: hidden;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ══════════════════════════════════════════════════════════
   ICON STYLE → .ail-wrap.ail-icon-bare
   Option: "Icon only (no background)"
══════════════════════════════════════════════════════════ */
.ail-wrap.ail-icon-bare .ail-icon-box {
	width:      var(--ail-icon-size, 16px) !important;
	height:     var(--ail-icon-size, 16px) !important;
	min-width:  var(--ail-icon-size, 16px) !important;
	min-height: var(--ail-icon-size, 16px) !important;
	background: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	overflow: visible;
}
.ail-wrap.ail-icon-bare .ail-icon-box svg {
	width:      var(--ail-icon-size, 16px) !important;
	height:     var(--ail-icon-size, 16px) !important;
	min-width:  var(--ail-icon-size, 16px) !important;
	min-height: var(--ail-icon-size, 16px) !important;
	max-width:  var(--ail-icon-size, 16px) !important;
	max-height: var(--ail-icon-size, 16px) !important;
}
.ail-wrap.ail-icon-bare .ail-item { gap: 10px !important; }

/* ══════════════════════════════════════════════════════════
   ITEM CONTENT → .ail-wrap.ail-icon-text
   Option: "Icon + Text" (default)
══════════════════════════════════════════════════════════ */
/* default styles apply — no overrides needed */

/* ══════════════════════════════════════════════════════════
   ITEM CONTENT → .ail-wrap.ail-icon-only
   Option: "Icon only"
══════════════════════════════════════════════════════════ */
.ail-wrap.ail-icon-only .ail-item { gap: 0 !important; }

/* ══════════════════════════════════════════════════════════
   ITEM CONTENT → .ail-wrap.ail-text-only
   Option: "Text only"
══════════════════════════════════════════════════════════ */
.ail-wrap.ail-text-only .ail-item { gap: 0 !important; }

/* ── Item text ─────────────────────────────────────────── */
.ail-item-text {
	font-size:   var(--ail-text-size,   15px) !important;
	font-weight: var(--ail-text-weight, 600)  !important;
	line-height: 1.4 !important;
	color: var(--ail-text-color) !important;
	transition: color 0.3s ease;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 767px) {
	.ail-card { padding: 24px !important; border-radius: 18px !important; }
	.ail-list { gap: 14px !important; }
}
@media (max-width: 480px) {
	.ail-card { padding: 20px !important; }
}


/**
 * AI Icon List — Frontend Styles
 *
 * PHP adds these modifier classes to .ail-wrap:
 *
 *  [Icon Style]  — prefix: ail-style-
 *   .ail-style-box   → "Icon with background box"
 *   .ail-style-bare  → "Icon only (no background)"
 *
 *  [Item Content] — prefix: ail-view-
 *   .ail-view-icon-text  → "Icon + Text"
 *   .ail-view-icon-only  → "Icon only"
 *   .ail-view-text-only  → "Text only"
 *
 *  [Font Weight]  — prefix: ail-weight-
 *   .ail-weight-100 … .ail-weight-900
 *
 *  Inner element (never on wrapper):
 *   .ail-icon-box  → the icon container <div> inside each list item
 */

/* ── CSS token defaults (light mode) ──────────────────── */
.ail-wrap {
	--ail-text-color:  var(--ail-light-text,    #475569);
	--ail-icon-color:  var(--ail-light-icon,    #2563eb);
	--ail-icon-bg:     var(--ail-light-icon-bg, #ffffff);
	--ail-bg-card:     #f8fafc;
	--ail-border:      #e2e8f0;
	--ail-icon-shadow: 0 1px 3px rgba(0,0,0,0.10);
	--ail-box-size:    calc(var(--ail-icon-size, 16px) + 20px);
}

/* ── Dark-mode token overrides ────────────────────────── */
@media (prefers-color-scheme: dark) {
	html:not(.theme-light) .ail-wrap {
		--ail-text-color:  var(--ail-dark-text,    #cbd5e1);
		--ail-icon-color:  var(--ail-dark-icon,    #60a5fa);
		--ail-icon-bg:     var(--ail-dark-icon-bg, #0f172a);
		--ail-bg-card:     #1e293b;
		--ail-border:      #334155;
		--ail-icon-shadow: 0 1px 4px rgba(0,0,0,0.30);
	}
}
html.theme-dark .ail-wrap,
html.dark       .ail-wrap {
	--ail-text-color:  var(--ail-dark-text,    #cbd5e1);
	--ail-icon-color:  var(--ail-dark-icon,    #60a5fa);
	--ail-icon-bg:     var(--ail-dark-icon-bg, #0f172a);
	--ail-bg-card:     #1e293b;
	--ail-border:      #334155;
	--ail-icon-shadow: 0 1px 4px rgba(0,0,0,0.30);
}

/* ── Wrapper ───────────────────────────────────────────── */
.ail-wrap { display: block !important; width: 100%; }

/* ── Card ──────────────────────────────────────────────── */


/* ── List ──────────────────────────────────────────────── */
.ail-list {
	margin: 0 !important; padding: 0 !important;
	list-style: none !important;
	display: flex !important; flex-direction: column !important;
	gap: 16px !important;
}

/* ── Item row ──────────────────────────────────────────── */
.ail-item {
	display: flex !important; align-items: var(--ail-align-items, center) !important;
	gap: 12px !important; margin: 0 !important; padding: 0 !important;
}

/* ── Icon box (inner element) ──────────────────────────── */
.ail-icon-box {
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--ail-icon-color) !important;
}
.ail-icon-box i { display: flex !important; align-items: center; line-height: 1; }
.ail-icon-box svg {
	width:      var(--ail-icon-size, 16px) !important;
	height:     var(--ail-icon-size, 16px) !important;
	min-width:  var(--ail-icon-size, 16px) !important;
	min-height: var(--ail-icon-size, 16px) !important;
	max-width:  var(--ail-icon-size, 16px) !important;
	max-height: var(--ail-icon-size, 16px) !important;
	stroke: currentColor !important; fill: none !important;
	display: block !important; flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   ICON STYLE → .ail-wrap.ail-style-box
   "Icon with background box"
══════════════════════════════════════════════════════════ */
.ail-wrap.ail-style-box .ail-icon-box {
	width:      var(--ail-box-size, 36px) !important;
	height:     var(--ail-box-size, 36px) !important;
	min-width:  var(--ail-box-size, 36px) !important;
	min-height: var(--ail-box-size, 36px) !important;
	border-radius: 10px !important;
	background-color: var(--ail-icon-bg) !important;
	box-shadow: var(--ail-icon-shadow) !important;
	overflow: hidden;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ══════════════════════════════════════════════════════════
   ICON STYLE → .ail-wrap.ail-style-bare
   "Icon only (no background)"
══════════════════════════════════════════════════════════ */
.ail-wrap.ail-style-bare .ail-icon-box {
	width:      var(--ail-icon-size, 16px) !important;
	height:     var(--ail-icon-size, 16px) !important;
	min-width:  var(--ail-icon-size, 16px) !important;
	min-height: var(--ail-icon-size, 16px) !important;
	background: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	overflow: visible;
}
.ail-wrap.ail-style-bare .ail-icon-box svg {
	width:      var(--ail-icon-size, 16px) !important;
	height:     var(--ail-icon-size, 16px) !important;
	min-width:  var(--ail-icon-size, 16px) !important;
	min-height: var(--ail-icon-size, 16px) !important;
	max-width:  var(--ail-icon-size, 16px) !important;
	max-height: var(--ail-icon-size, 16px) !important;
}
.ail-wrap.ail-style-bare .ail-item { gap: 10px !important; }

/* ══════════════════════════════════════════════════════════
   ITEM CONTENT → .ail-wrap.ail-view-icon-text
   "Icon + Text" (default — no overrides needed)
══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   ITEM CONTENT → .ail-wrap.ail-view-icon-only
   "Icon only"
══════════════════════════════════════════════════════════ */
.ail-wrap.ail-view-icon-only .ail-item { gap: 0 !important; }

/* ══════════════════════════════════════════════════════════
   ITEM CONTENT → .ail-wrap.ail-view-text-only
   "Text only"
══════════════════════════════════════════════════════════ */
.ail-wrap.ail-view-text-only .ail-item { gap: 0 !important; }

/* ── Item text ─────────────────────────────────────────── */
.ail-item-text {
	font-size:   var(--ail-text-size,   15px) !important;
	font-weight: var(--ail-text-weight, 600)  !important;
	line-height: 1.4 !important;
	color: var(--ail-text-color) !important;
	transition: color 0.3s ease;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 767px) {
	.ail-card { padding: 24px !important; border-radius: 18px !important; }
	.ail-list { gap: 14px !important; }
}
@media (max-width: 480px) {
	.ail-card { padding: 20px !important; }
}

.ail-wrap.ail-icon-bare.ail-icon-text-only .ail-item{
	align-items: flex-start!important;
	}
	
	.ail-wrap.ail-icon-bare.ail-icon-text-only .ail-item .ail-icon-box{
		margin-top: 5px;
	}