/*
 * Yarabot Chat Widget
 * RTL-first · Persian-first · Yekan Bakh font
 *
 * Font files: place YekanBakh-Regular.woff2/.woff and YekanBakh-Bold.woff2/.woff
 * inside assets/fonts/ — download from https://github.com/fontiran/YekanBakh
 */

@font-face {
	font-family: 'Yekan Bakh';
	src: url('../fonts/YekanBakh-Regular.woff2') format('woff2'),
	     url('../fonts/YekanBakh-Regular.woff')  format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Yekan Bakh';
	src: url('../fonts/YekanBakh-Bold.woff2') format('woff2'),
	     url('../fonts/YekanBakh-Bold.woff')  format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ── Variables ──────────────────────────────────────────────────────────── */

#yarabot-chat-widget {
	--yr-green:       #267a66;
	--yr-green-dark:  #1e6254;
	--yr-green-light: #e8f5f2;
	--yr-red:         #eb5759;
	--yr-orange:      #f09e29;
	--yr-bg:          #ffffff;
	--yr-bg-msg:      #f4f4f4;
	--yr-text:        #1a1a1a;
	--yr-text-muted:  #6b7280;
	--yr-border:      #e5e7eb;
	--yr-radius:      16px;
	--yr-shadow:      0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
	--yr-font:        'Yekan Bakh', Tahoma, 'Segoe UI', Arial, sans-serif;
	--yr-panel-w:     380px;
	--yr-panel-h:     560px;
	--yr-toggle-size: 60px;
	--yr-z:           999999;
}

/* ── Widget root ────────────────────────────────────────────────────────── */

#yarabot-chat-widget {
	position: fixed;
	z-index: var(--yr-z);
	font-family: var(--yr-font);
	direction: rtl;
	text-align: right;
	line-height: 1.6;
}

/* Docking corner, chosen in Settings → Yarabot Chat. `direction: rtl` does not
   flip physical left/right, so each corner sets its own offsets. */
#yarabot-chat-widget[data-position$="-right"]  { right: 24px; }
#yarabot-chat-widget[data-position$="-left"]   { left: 24px; }
#yarabot-chat-widget[data-position^="bottom-"] { bottom: 24px; }
#yarabot-chat-widget[data-position^="top-"]    { top: 24px; }

#yarabot-chat-widget button {
	font-family: var(--yr-font);
}

/* ── Toggle button ──────────────────────────────────────────────────────── */

#yarabot-toggle {
	width:  var(--yr-toggle-size);
	height: var(--yr-toggle-size);
	border-radius: 50%;
	background: var(--yr-green);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(38, 122, 102, 0.45);
	transition: transform 0.2s ease, background 0.2s ease;
	padding: 0;
}

#yarabot-toggle:hover {
	background: var(--yr-green-dark);
	transform: scale(1.07);
}

#yarabot-toggle img {
	width: 34px;
	height: 34px;
	object-fit: contain;
	filter: brightness(0) invert(1); /* white icon on green */
}

/* A real avatar photo must keep its own colours. */
#yarabot-chat-widget img.yarabot-avatar {
	filter: none;
	border-radius: 50%;
}

/* Closed shows the logo, open shows a close cross. The logo is already in the
   panel header while open, and a rotated logo just read as a broken image. */
.yarabot-toggle-close {
	width: 26px;
	height: 26px;
	color: #fff;
	display: none;
}

#yarabot-toggle.yarabot-toggle--open .yarabot-toggle-logo  { display: none; }
#yarabot-toggle.yarabot-toggle--open .yarabot-toggle-close { display: block; }

/* ── Chat panel ─────────────────────────────────────────────────────────── */

#yarabot-chat-panel {
	position: absolute;
	width: var(--yr-panel-w);
	height: var(--yr-panel-h);
	max-height: calc(100vh - var(--yr-toggle-size) - 48px);
	background: var(--yr-bg);
	border-radius: var(--yr-radius);
	box-shadow: var(--yr-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: yarabot-panel-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The panel opens away from the toggle, into the screen. */
[data-position^="bottom-"] #yarabot-chat-panel { bottom: calc(var(--yr-toggle-size) + 12px); }
[data-position^="top-"]    #yarabot-chat-panel { top:    calc(var(--yr-toggle-size) + 12px); }
[data-position$="-right"]  #yarabot-chat-panel { right: 0; }
[data-position$="-left"]   #yarabot-chat-panel { left:  0; }

[data-position="bottom-right"] #yarabot-chat-panel { transform-origin: bottom right; }
[data-position="bottom-left"]  #yarabot-chat-panel { transform-origin: bottom left;  }
[data-position="top-right"]    #yarabot-chat-panel { transform-origin: top right;    }
[data-position="top-left"]     #yarabot-chat-panel { transform-origin: top left;     }

/* `display: flex` above would otherwise beat the [hidden] default. */
#yarabot-chat-panel[hidden] {
	display: none;
}

@keyframes yarabot-panel-in {
	from { opacity: 0; transform: scale(0.88) translateY(12px); }
	to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

@media (prefers-reduced-motion: reduce) {
	#yarabot-chat-panel { animation: none; }
	#yarabot-toggle:hover { transform: none; }
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.yarabot-header {
	background: var(--yr-green);
	color: #fff;
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.yarabot-header-logo {
	width: 32px;
	height: 32px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	flex-shrink: 0;
}

.yarabot-header-text {
	flex: 1;
	min-width: 0;
}

.yarabot-header-title {
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.yarabot-header-subtitle {
	font-size: 11px;
	opacity: 0.8;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.yarabot-icon-btn {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: color 0.15s, background 0.15s;
	flex-shrink: 0;
}

.yarabot-icon-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.15);
}

.yarabot-icon-btn svg {
	width: 17px;
	height: 17px;
}

/* ── Messages area ──────────────────────────────────────────────────────── */

.yarabot-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	scroll-behavior: smooth;
}

.yarabot-messages::-webkit-scrollbar {
	width: 4px;
}
.yarabot-messages::-webkit-scrollbar-track { background: transparent; }
.yarabot-messages::-webkit-scrollbar-thumb {
	background: var(--yr-border);
	border-radius: 4px;
}

/* ── Welcome message ────────────────────────────────────────────────────── */

.yarabot-welcome {
	background: var(--yr-green-light);
	color: var(--yr-green-dark);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 13.5px;
	line-height: 1.6;
	text-align: center;
}

/* ── Turns ──────────────────────────────────────────────────────────────── */

/* One turn = bubble + optional sources + optional feedback bar. The alignment
   lives on the wrapper so those extras line up with their bubble. */
.yarabot-turn {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 85%;
}

/* User — right side (RTL: flex-start = right) */
.yarabot-turn--user { align-self: flex-start; align-items: flex-start; }
/* Bot — left side (RTL: flex-end = left) */
.yarabot-turn--bot  { align-self: flex-end;   align-items: flex-end;   }

.yarabot-message {
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.7;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.yarabot-message--user {
	background: var(--yr-green);
	color: #fff;
	border-radius: var(--yr-radius) var(--yr-radius) 4px var(--yr-radius);
	white-space: pre-wrap; /* the visitor's own line breaks are preserved */
}

.yarabot-message--bot {
	background: var(--yr-bg-msg);
	color: var(--yr-text);
	border-radius: var(--yr-radius) var(--yr-radius) var(--yr-radius) 4px;
}

.yarabot-message--error {
	background: #fef2f2;
	color: var(--yr-red);
}

/* ── Markdown inside bot bubbles ────────────────────────────────────────── */

.yarabot-message--bot p {
	margin: 0 0 8px;
}

.yarabot-message--bot p:last-child {
	margin-bottom: 0;
}

.yarabot-message--bot h3,
.yarabot-message--bot h4,
.yarabot-message--bot h5,
.yarabot-message--bot h6 {
	margin: 10px 0 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.yarabot-message--bot ul,
.yarabot-message--bot ol {
	margin: 0 0 8px;
	padding-right: 18px;
	padding-left: 0;
}

.yarabot-message--bot li {
	margin-bottom: 3px;
}

.yarabot-message--bot a {
	color: var(--yr-green-dark);
	text-decoration: underline;
}

.yarabot-message--bot code {
	background: rgba(0, 0, 0, 0.07);
	border-radius: 4px;
	padding: 1px 5px;
	font-family: 'SFMono-Regular', Consolas, monospace;
	font-size: 12.5px;
	direction: ltr;
	display: inline-block;
}

.yarabot-message--bot pre {
	background: rgba(0, 0, 0, 0.07);
	border-radius: 8px;
	padding: 10px 12px;
	margin: 0 0 8px;
	overflow-x: auto;
	direction: ltr;
	text-align: left;
}

.yarabot-message--bot pre code {
	background: none;
	padding: 0;
	display: block;
	white-space: pre;
}

/* ── Sources ────────────────────────────────────────────────────────────── */

.yarabot-sources {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 2px 4px 0;
	width: 100%;
}

.yarabot-sources-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	width: fit-content;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 12px;
	font-weight: 700;
	color: var(--yr-green);
	opacity: 0.85;
	transition: opacity 0.15s;
}

.yarabot-sources-toggle:hover { opacity: 1; }

.yarabot-chevron {
	width: 11px;
	height: 11px;
	transition: transform 0.18s ease;
}

.yarabot-sources-toggle.is-open .yarabot-chevron {
	transform: rotate(180deg);
}

.yarabot-sources-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.yarabot-sources-list[hidden] { display: none; }

.yarabot-sources-list li {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	font-size: 11.5px;
	line-height: 1.75;
	color: var(--yr-text-muted);
}

.yarabot-source-index {
	flex-shrink: 0;
	font-weight: 700;
	color: var(--yr-green);
}

.yarabot-sources-list a {
	color: #2563eb;
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-all;
}

.yarabot-source-snippet {
	word-break: break-word;
}

/* ── Feedback ───────────────────────────────────────────────────────────── */

.yarabot-actions {
	display: flex;
	gap: 2px;
	padding: 0 4px;
	opacity: 0;
	transition: opacity 0.15s;
}

.yarabot-turn:hover .yarabot-actions,
.yarabot-actions:focus-within,
.yarabot-actions:has(.is-active) {
	opacity: 1;
}

.yarabot-action {
	background: none;
	border: none;
	padding: 3px;
	cursor: pointer;
	color: var(--yr-text-muted);
	display: flex;
	border-radius: 4px;
	transition: color 0.15s, background 0.15s;
}

.yarabot-action:hover      { color: var(--yr-green); background: var(--yr-green-light); }
.yarabot-action.is-active  { color: var(--yr-green); }
.yarabot-action--dislike.is-active { color: var(--yr-red); }
.yarabot-action[hidden]    { display: none; }

.yarabot-action svg {
	width: 14px;
	height: 14px;
}

/* ── Typing indicator ───────────────────────────────────────────────────── */

.yarabot-typing {
	display: inline-flex;
	gap: 5px;
	padding: 4px 2px;
}

.yarabot-typing span {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--yr-green);
	animation: yarabot-bounce 1.3s infinite ease-in-out;
}

.yarabot-typing span:nth-child(1) { animation-delay: -0.32s; }
.yarabot-typing span:nth-child(2) { animation-delay: -0.16s; }
.yarabot-typing span:nth-child(3) { animation-delay: 0s; }

@keyframes yarabot-bounce {
	0%, 80%, 100% { transform: scale(0.4); opacity: 0.5; }
	40%           { transform: scale(1.0); opacity: 1;   }
}

/* ── Suggested questions ────────────────────────────────────────────────── */

.yarabot-suggested {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 14px;
}

.yarabot-suggested:not(:empty) {
	padding-bottom: 10px;
}

.yarabot-suggestion {
	background: var(--yr-green-light);
	color: var(--yr-green-dark);
	border: 1px solid rgba(38, 122, 102, 0.25);
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 12.5px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	direction: rtl;
	text-align: right;
}

.yarabot-suggestion:hover {
	background: var(--yr-green);
	color: #fff;
	border-color: var(--yr-green);
}

/* ── Input row ──────────────────────────────────────────────────────────── */

.yarabot-input-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--yr-border);
	background: var(--yr-bg);
	flex-shrink: 0;
}

#yarabot-input {
	flex: 1;
	border: 1px solid var(--yr-border);
	border-radius: 20px;
	padding: 9px 14px;
	font-size: 14px;
	font-family: var(--yr-font);
	direction: rtl;
	text-align: right;
	resize: none;
	overflow: hidden;
	max-height: 120px;
	line-height: 1.5;
	outline: none;
	transition: border-color 0.15s;
	color: var(--yr-text);
	background: var(--yr-bg);
}

#yarabot-input:focus {
	border-color: var(--yr-green);
}

#yarabot-input::placeholder {
	color: var(--yr-text-muted);
}

#yarabot-send,
#yarabot-mic {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
}

#yarabot-send {
	background: var(--yr-green);
	border: none;
	color: #fff;
	transition: background 0.15s, transform 0.1s;
}

#yarabot-send:hover {
	background: var(--yr-green-dark);
	transform: scale(1.07);
}

#yarabot-send svg {
	width: 18px;
	height: 18px;
}

/* The send icon points left-to-right, so it is mirrored for RTL. */
.yarabot-send-icon { transform: scaleX(-1); }
.yarabot-stop-icon { display: none; }

/* While a reply streams, the same button stops it. */
#yarabot-send.is-streaming { background: var(--yr-red); }
#yarabot-send.is-streaming:hover { background: #d94a4c; }
#yarabot-send.is-streaming .yarabot-send-icon { display: none; }
#yarabot-send.is-streaming .yarabot-stop-icon { display: block; }

/* ── Mic button ─────────────────────────────────────────────────────────── */

#yarabot-mic {
	background: none;
	border: 1.5px solid var(--yr-border);
	color: var(--yr-text-muted);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#yarabot-mic[hidden] {
	display: none;
}

#yarabot-mic:hover {
	background: var(--yr-green-light);
	border-color: var(--yr-green);
	color: var(--yr-green);
}

#yarabot-mic svg {
	width: 16px;
	height: 16px;
}

#yarabot-mic.yarabot-mic--recording {
	background: var(--yr-red);
	border-color: var(--yr-red);
	color: #fff;
	animation: yarabot-pulse 1.2s infinite;
}

@keyframes yarabot-pulse {
	0%, 100% { box-shadow: 0 0 0 0   rgba(235, 87, 89, 0.45); }
	50%      { box-shadow: 0 0 0 8px rgba(235, 87, 89, 0);    }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 440px) {
	#yarabot-chat-widget[data-position$="-right"]  { right: 16px; }
	#yarabot-chat-widget[data-position$="-left"]   { left: 16px; }
	#yarabot-chat-widget[data-position^="bottom-"] { bottom: 16px; }
	#yarabot-chat-widget[data-position^="top-"]    { top: 16px; }

	#yarabot-chat-panel {
		width: calc(100vw - 32px);
		height: 75vh;
	}

	/* No hover on touch — feedback buttons would never appear otherwise. */
	.yarabot-actions { opacity: 1; }
}