/* Bilchat — frontend widget */
.bil-root,
.bil-root * {
	box-sizing: border-box;
	font-family: Vazirmatn, -apple-system, "Segoe UI", Tahoma, sans-serif;
}

.bil-root {
	--bil-color: #2563eb;
	position: fixed;
	bottom: 20px;
	z-index: 2147483000;
	direction: rtl;
}
.bil-root.bil-right { right: 20px; }
.bil-root.bil-left  { left: 20px; }

.bil-launcher {
	width: 60px;
	height: 60px;
	padding: 0;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: var(--bil-color);
	color: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: transform .15s ease;
}
.bil-launcher:hover { transform: scale(1.06); }
.bil-launcher svg { width: 28px; height: 28px; fill: #fff; }
.bil-launcher img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

.bil-panel {
	position: absolute;
	bottom: 76px;
	width: 360px;
	max-width: calc(100vw - 32px);
	height: 520px;
	max-height: calc(100vh - 120px);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
	display: none;
	flex-direction: column;
	overflow: hidden;
	animation: bil-in .18s ease;
}
.bil-root.bil-right .bil-panel { right: 0; }
.bil-root.bil-left  .bil-panel { left: 0; }
.bil-root.bil-open .bil-panel { display: flex; }

@keyframes bil-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bil-header {
	background: var(--bil-color);
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.bil-header .bil-title { font-weight: 700; font-size: 15px; flex: 1; }
.bil-status { font-size: 12px; opacity: .9; display: flex; align-items: center; gap: 5px; }
.bil-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.bil-online .bil-dot { background: #34d399; }
.bil-close { background: none; border: none; color: #fff; cursor: pointer; font-size: 22px; line-height: 1; opacity: .85; }
.bil-close:hover { opacity: 1; }

.bil-body {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	background: #f3f4f6;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bil-msg {
	max-width: 80%;
	padding: 9px 12px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.7;
	white-space: pre-wrap;
	word-break: break-word;
}
.bil-msg .bil-time { display: block; font-size: 10px; opacity: .6; margin-top: 3px; }
.bil-admin {
	align-self: flex-start;
	background: #fff;
	color: #111827;
	border-bottom-right-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.bil-visitor {
	align-self: flex-end;
	background: var(--bil-color);
	color: #fff;
	border-bottom-left-radius: 4px;
}

.bil-offline {
	background: #fff7ed;
	color: #9a3412;
	border: 1px solid #fed7aa;
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.7;
}
.bil-channels { display: flex; gap: 8px; margin-top: 8px; }
.bil-chan {
	flex: 1;
	text-align: center;
	text-decoration: none;
	padding: 8px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}
.bil-chan-tg { background: #229ED9; }
.bil-chan-wa { background: #25D366; }

.bil-form {
	background: #fff;
	border-top: 1px solid #e5e7eb;
	padding: 12px;
	display: none;
}
.bil-root.bil-asking .bil-form { display: block; }
.bil-form .bil-label { font-size: 12px; color: #4b5563; margin-bottom: 8px; }
.bil-form input {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid #d1d5db;
	border-radius: 9px;
	font-size: 14px;
	margin-bottom: 8px;
}
.bil-form button {
	width: 100%;
	background: var(--bil-color);
	color: #fff;
	border: none;
	border-radius: 9px;
	padding: 9px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.bil-footer {
	display: flex;
	gap: 8px;
	padding: 10px;
	background: #fff;
	border-top: 1px solid #e5e7eb;
	align-items: flex-end;
}
.bil-root.bil-asking .bil-footer { display: none; }
.bil-input {
	flex: 1;
	resize: none;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	padding: 9px 11px;
	font-size: 14px;
	max-height: 90px;
	line-height: 1.6;
}
.bil-input:focus { outline: none; border-color: var(--bil-color); }
.bil-send {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 10px;
	border: none;
	background: var(--bil-color);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bil-send svg { width: 20px; height: 20px; fill: #fff; transform: scaleX(-1); }

@media (max-width: 480px) {
	.bil-panel { width: calc(100vw - 24px); height: calc(100vh - 100px); }
}