/**
 * Isis Contact Toolkit — frontend styles.
 * Scoped under .isis-widget. Uses CSS custom properties set per instance.
 * Logical properties are used where direction matters (RTL-ready).
 */

.isis-widget {
	position: fixed;
	z-index: var(--isis-z, 9999);
	bottom: var(--isis-y, 24px);
	font-family: var(--isis-font, inherit);
	-webkit-font-smoothing: antialiased;
}

.isis-widget.isis-pos-right { right: var(--isis-x, 24px); left: auto; }
.isis-widget.isis-pos-left  { left: var(--isis-x, 24px); right: auto; }

/* Device visibility (cache-friendly: pure CSS). */
@media (max-width: 768px) {
	.isis-widget.isis-device-desktop { display: none !important; }
	.isis-widget .isis-fab { width: var(--isis-btn-size-m, 56px); height: var(--isis-btn-size-m, 56px); }
}
@media (min-width: 769px) {
	.isis-widget.isis-device-mobile { display: none !important; }
}

/* ---------- Floating button ---------- */
.isis-fab {
	position: relative;
	width: var(--isis-btn-size, 60px);
	height: var(--isis-btn-size, 60px);
	border: 0;
	border-radius: var(--isis-btn-radius, 50%);
	background: var(--isis-btn-bg, #25d366);
	color: var(--isis-btn-color, #fff);
	box-shadow: var(--isis-btn-shadow);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: transform .18s ease, box-shadow .18s ease;
}

.isis-fab:hover { transform: scale(1.06); }
.isis-fab:focus-visible { outline: 3px solid rgba(255,255,255,.7); outline-offset: 2px; }

.isis-fab .isis-svg { width: 55%; height: 55%; }
.isis-fab-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.isis-fab-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.isis-fab-icon-close { display: none; }
.isis-widget.isis-open .isis-fab-icon-open { display: none; }
.isis-widget.isis-open .isis-fab-icon-close { display: flex; }

.isis-badge {
	position: absolute;
	top: -4px;
	inset-inline-end: -4px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--isis-badge-bg, #ff3b30);
	color: var(--isis-badge-color, #fff);
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* ---------- Panel ---------- */
.isis-panel {
	position: absolute;
	bottom: calc(var(--isis-btn-size, 60px) + 14px);
	inset-inline-end: 0;
	width: var(--isis-panel-width, 320px);
	max-width: calc(100vw - 32px);
	max-height: min(70vh, 560px);
	display: flex;
	flex-direction: column;
	background: var(--isis-panel-bg, #fff);
	border: 1px solid var(--isis-panel-border, #e5e7eb);
	border-radius: var(--isis-panel-radius, 16px);
	box-shadow: var(--isis-panel-shadow);
	overflow: hidden;
	transform-origin: bottom;
}

@media (max-width: 768px) {
	.isis-panel { bottom: calc(var(--isis-btn-size-m, 56px) + 12px); }
}

.isis-panel[hidden] { display: none !important; }

/* Open / close animations */
@keyframes isis-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes isis-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes isis-slide-up-in  { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes isis-slide-up-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes isis-zoom-in  { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes isis-zoom-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.92); } }

.isis-panel.isis-anim-open-fade     { animation: isis-fade-in .22s ease; }
.isis-panel.isis-anim-open-slide-up { animation: isis-slide-up-in .26s cubic-bezier(.2,.9,.3,1.2); }
.isis-panel.isis-anim-open-zoom     { animation: isis-zoom-in .22s ease; }
.isis-panel.isis-anim-close-fade     { animation: isis-fade-out .18s ease; }
.isis-panel.isis-anim-close-slide-up { animation: isis-slide-up-out .2s ease; }
.isis-panel.isis-anim-close-zoom     { animation: isis-zoom-out .18s ease; }

@media (prefers-reduced-motion: reduce) {
	.isis-panel[class*="isis-anim-"] { animation: none !important; }
	.isis-fab { transition: none; }
}

/* ---------- Header ---------- */
.isis-head {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--isis-head-bg, #075e54);
	color: var(--isis-head-color, #fff);
	padding: var(--isis-head-pad, 16px);
}
.isis-head-align-center { justify-content: center; text-align: center; }
.isis-head-align-end { justify-content: flex-end; text-align: end; }

.isis-head-visual { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--isis-head-icon, #fff); }
.isis-head-visual .isis-svg { width: 26px; height: 26px; }
.isis-head-img { width: var(--isis-head-img, 44px); height: var(--isis-head-img, 44px); object-fit: cover; border-radius: 50%; }

.isis-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.isis-head-title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.isis-head-sub { font-size: 12.5px; opacity: .85; line-height: 1.4; }

.isis-head-close {
	margin-inline-start: auto;
	background: transparent;
	border: 0;
	color: inherit;
	opacity: .8;
	cursor: pointer;
	padding: 6px;
	border-radius: 8px;
	display: flex;
}
.isis-head-close:hover { opacity: 1; background: rgba(255,255,255,.14); }
.isis-head-close .isis-svg { width: 18px; height: 18px; }

/* ---------- Body / items ---------- */
.isis-body {
	padding: var(--isis-panel-pad, 12px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--isis-item-gap, 8px);
}

.isis-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--isis-item-bg, #f8fafc);
	border-radius: var(--isis-item-radius, 12px);
	padding: 10px 12px;
	text-decoration: none;
	transition: background .15s ease, transform .15s ease;
}
.isis-item:hover { background: var(--isis-item-hover, #eef2ff); transform: translateY(-1px); }
.isis-item:focus-visible { outline: 2px solid var(--isis-btn-bg, #25d366); outline-offset: 2px; }

.isis-item-icon {
	flex: 0 0 auto;
	width: calc(var(--isis-item-icon, 22px) + 18px);
	height: calc(var(--isis-item-icon, 22px) + 18px);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.isis-item-icon .isis-svg { width: var(--isis-item-icon, 22px); height: var(--isis-item-icon, 22px); }
.isis-item-img { width: 100%; height: 100%; object-fit: cover; }

.isis-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.isis-item-title { font-size: var(--isis-item-fsize, 14px); font-weight: var(--isis-item-weight, 500); color: var(--isis-item-color, #1f2937); line-height: 1.35; }
.isis-item-desc { font-size: 12px; color: var(--isis-item-desc, #6b7280); line-height: 1.4; }

/* ---------- Groups ---------- */
.isis-group {
	border-radius: var(--isis-group-radius, 10px);
	background: var(--isis-group-bg, #f1f5f9);
	overflow: hidden;
}

.isis-group-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: start;
	transition: background .15s ease;
}
.isis-group-toggle:hover { background: var(--isis-group-hover, #e2e8f0); }
.isis-group-toggle:focus-visible { outline: 2px solid var(--isis-btn-bg, #25d366); outline-offset: -2px; }

.isis-group-icon { flex: 0 0 auto; display: flex; color: var(--isis-group-icon, #0f172a); }
.isis-group-icon .isis-svg { width: 22px; height: 22px; }
.isis-group-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

.isis-group-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.isis-group-title { font-size: var(--isis-item-fsize, 14px); font-weight: 600; color: var(--isis-group-color, #0f172a); line-height: 1.35; }
.isis-group-desc { font-size: 12px; opacity: .75; }

.isis-group-chevron { flex: 0 0 auto; display: flex; color: var(--isis-group-chevron, #64748b); transition: transform .2s ease; }
.isis-group-chevron .isis-svg { width: 18px; height: 18px; }
.isis-group-toggle[aria-expanded="true"] .isis-group-chevron { transform: rotate(180deg); }

.isis-group-items { padding: 0 8px 8px; display: flex; flex-direction: column; gap: var(--isis-item-gap, 8px); max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.isis-group-items[hidden] { display: none !important; }

/* Generic svg sizing guard */
.isis-widget .isis-svg { display: block; }

/* Delayed entrance */
.isis-widget.isis-pre-hide { opacity: 0; pointer-events: none; }
.isis-widget { transition: opacity .25s ease; }