/*
 * Offer stage — "chat" (حلول تقنية): a business chat app — the services
 * themselves (unified number, AI replies, call centre, WhatsApp API) live in
 * conversations like this one.
 * The navigation is the chat list (in the profile's two groups); the chosen
 * offer is a conversation: the visitor's message is the offer's name, the
 * company "is typing…" and replies with the offer's line. Read ticks in the
 * visitor's message. No invented names, numbers or messages: the words
 * are the offer's own heading and line.
 */

.gb-offer-stage--chat {
	--gb-chat-wall: #EEF4F3;
	--gb-chat-out: #D5F5F1;
	--gb-chat-in: var(--gb-color-neutral-0);
	--gb-offer-enter: gb-chat-in;
	--gb-offer-enter-time: 0.3s;
}

/* The whole stage is the app: chat list beside the conversation. */
.gb-offer-stage--chat[data-gb-offer-ready] {
	grid-template-columns: minmax(15rem, 0.38fr) minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
	overflow: hidden;
	border: 1px solid var(--gb-border);
	border-radius: var(--gb-radius-l);
	background-color: var(--gb-bg);
	box-shadow: 0 2rem 4rem -2.5rem rgb(12 35 66 / 0.45);
}

/* ---------- Chat list (tabs) ---------- */

.gb-offer-stage--chat[data-gb-offer-ready] .gb-offer-stage__nav {
	padding: var(--gb-space-2xs);
	border-inline-end: 1px solid var(--gb-border);
	background-color: var(--gb-surface);
}

.gb-offer-stage--chat .gb-offer-stage__nav-head {
	display: grid;
	gap: 0.5rem;
	margin-block-end: var(--gb-space-2xs);
	padding: var(--gb-space-2xs) var(--gb-space-2xs) 0;
}

.gb-offer-stage--chat .gb-os-panel-head {
	padding: 0;
	font-size: var(--gb-step-1);
	color: var(--gb-color-navy);
}

.gb-os-search {
	display: block;
	block-size: 2.2rem;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-bg);
	box-shadow: inset 0 0 0 1px var(--gb-border);
}

.gb-offer-stage--chat .gb-offer-tab {
	min-block-size: 3.5rem;
	color: var(--gb-color-navy);
}

.gb-os-avatar {
	display: grid;
	place-items: center;
	inline-size: 2.6rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--gb-color-turquoise-a20);
	font-size: 0.8rem;
	font-weight: var(--gb-weight-bold);
	color: var(--gb-color-navy);
	font-variant-numeric: tabular-nums;
}

.gb-offer-stage--chat .gb-offer-tab:hover {
	background-color: var(--gb-bg);
}

.gb-offer-stage--chat .gb-offer-tab[aria-selected="true"] {
	background-color: var(--gb-bg);
	box-shadow: inset 3px 0 0 var(--gb-primary);
	font-weight: var(--gb-weight-bold);
}

[dir="rtl"] .gb-offer-stage--chat .gb-offer-tab[aria-selected="true"] {
	box-shadow: inset -3px 0 0 var(--gb-primary);
}

.gb-offer-stage--chat .gb-offer-tab[aria-selected="true"] .gb-os-avatar {
	background-color: var(--gb-primary);
}

/* ---------- The conversation ---------- */

.gb-offer-stage--chat[data-gb-offer-ready] .gb-offer-stage__screen {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	min-block-size: clamp(22rem, 32vw, 27rem);
	background-color: var(--gb-chat-wall);
	background-image: radial-gradient(rgb(0 202 190 / 0.12) 1.2px, transparent 1.4px);
	background-size: 18px 18px;
}

.gb-os-chat-head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.65rem 1rem;
	border-block-end: 1px solid var(--gb-border);
	background-color: var(--gb-bg);
}

.gb-os-chat-head .gb-os-phone__avatar {
	inline-size: 2.3rem;
}

.gb-os-chat-head .gb-os-phone__avatar,
.gb-os-chat-head .gb-os-phone__mark {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 50%;
}

.gb-os-chat-head .gb-os-phone__avatar {
	padding: 2px;
	background: var(--gb-primary);
}

.gb-os-chat-head .gb-os-phone__mark {
	inline-size: 100%;
	block-size: 100%;
	padding: 0.3rem;
	background-color: var(--gb-color-navy);
}

.gb-os-chat-head__who {
	display: grid;
	line-height: 1.3;
	color: var(--gb-color-navy);
}

.gb-os-chat-head__who span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.78rem;
	color: var(--gb-text-muted);
}

.gb-os-chat-head__who span::before {
	content: "";
	inline-size: 0.45rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: #28C840;
}

.gb-offer-stage--chat[data-gb-offer-ready] .gb-offer-stage__view {
	align-content: end;
	padding: var(--gb-space-m);
}

.gb-offer-stage--chat[data-gb-offer-ready] .gb-offer {
	display: grid;
	gap: 0.2rem;
}

.gb-offer-stage--chat[data-gb-offer-ready] .gb-offer__body {
	display: grid;
	gap: 0.75rem;
}

.gb-offer-stage--chat[data-gb-offer-ready] .gb-offer__number {
	display: none;
}

/* The visitor's message (sent side = the reading end). */
.gb-offer-stage--chat[data-gb-offer-ready] .gb-offer__title {
	justify-self: end;
	max-inline-size: 85%;
	padding: 0.6rem 0.95rem;
	border-radius: 1rem 1rem 0.3rem 1rem;
	background-color: var(--gb-chat-out);
	font-size: var(--gb-step-0);
	box-shadow: 0 1px 1px rgb(12 35 66 / 0.08);
}

[dir="rtl"] .gb-offer-stage--chat[data-gb-offer-ready] .gb-offer__title {
	border-radius: 1rem 1rem 1rem 0.3rem;
}

/* The company's reply (received side = the reading start). */
.gb-offer-stage--chat[data-gb-offer-ready] .gb-offer__text {
	justify-self: start;
	max-inline-size: 85%;
	padding: 0.7rem 1rem;
	border-radius: 1rem 1rem 1rem 0.3rem;
	background-color: var(--gb-chat-in);
	color: var(--gb-text);
	box-shadow: 0 1px 1px rgb(12 35 66 / 0.08);
}

[dir="rtl"] .gb-offer-stage--chat[data-gb-offer-ready] .gb-offer__text {
	border-radius: 1rem 1rem 0.3rem 1rem;
}

/* "Typing…": shown only while a reply is on its way. */
.gb-os-typing {
	display: none;
	overflow: hidden;
	justify-self: start;
	gap: 0.25rem;
	padding: 0.75rem 0.9rem;
	border-radius: 1rem;
	background-color: var(--gb-chat-in);
	box-shadow: 0 1px 1px rgb(12 35 66 / 0.08);
}

.gb-os-typing i {
	inline-size: 0.45rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--gb-color-neutral-300);
}

/*
 * Read ticks inside the visitor's message: an empty ::after with a drawn
 * background (no generated text, so screen readers hear only the heading).
 */
.gb-offer-stage--chat[data-gb-offer-ready] .gb-offer__title::after {
	content: "";
	display: inline-block;
	inline-size: 1.1rem;
	block-size: 0.7rem;
	margin-inline-start: 0.5rem;
	vertical-align: middle;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='%2300CABE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 7.5 4 4L13 2'/%3E%3Cpath d='m9 11.5 0 0 8-9.5'/%3E%3Cpath d='m8.5 11 .5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Composer. */
.gb-os-compose {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.8rem;
	border-block-start: 1px solid var(--gb-border);
	background-color: var(--gb-bg);
}

.gb-os-compose > span:first-child {
	flex: 1 1 auto;
	padding: 0.5rem 1rem;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-surface);
	font-size: 0.9rem;
	color: var(--gb-text-muted);
}

.gb-os-compose__send {
	display: grid;
	place-items: center;
	inline-size: 2.4rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--gb-primary);
	color: var(--gb-color-navy);
}

.gb-os-compose__send .gb-icon {
	--gb-icon-size: 1.1rem;
}

[dir="rtl"] .gb-os-compose__send .gb-icon {
	scale: -1 1;
}

/* ---------- Motion: sent → typing… → reply ---------- */

@keyframes gb-chat-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes gb-chat-pop {
	0% {
		opacity: 0;
		scale: 0.85;
	}

	100% {
		opacity: 1;
		scale: 1;
	}
}

/* The typing bubble shows, then folds away (its row and gap collapse). */
@keyframes gb-chat-typing {
	0%,
	92% {
		opacity: 1;
		max-block-size: 3rem;
	}

	100% {
		opacity: 0;
		max-block-size: 0;
		padding-block: 0;
		margin-block-end: -0.75rem;
	}
}

@keyframes gb-chat-dot {
	0%,
	100% {
		translate: 0 0;
		opacity: 0.5;
	}

	50% {
		translate: 0 -3px;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--chat[data-gb-switch] .gb-offer:not([hidden]) .gb-offer__title {
		transform-origin: var(--gb-chat-out-origin, right bottom);
		animation: gb-chat-pop 0.3s var(--gb-ease-out) both;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--chat[data-gb-switch] .gb-offer:not([hidden]) .gb-os-typing {
		display: flex;
		animation: gb-chat-typing 0.85s linear 0.35s both;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--chat[data-gb-switch] .gb-offer:not([hidden]) .gb-os-typing i {
		animation: gb-chat-dot 0.6s ease-in-out 2;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--chat[data-gb-switch] .gb-offer:not([hidden]) .gb-os-typing i:nth-child(2) {
		animation-delay: 0.15s;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--chat[data-gb-switch] .gb-offer:not([hidden]) .gb-os-typing i:nth-child(3) {
		animation-delay: 0.3s;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--chat[data-gb-switch] .gb-offer:not([hidden]) .gb-offer__text {
		transform-origin: var(--gb-chat-in-origin, left bottom);
		animation: gb-chat-pop 0.35s var(--gb-ease-out) 1.2s both;
	}
}

[dir="rtl"] .gb-offer-stage--chat {
	--gb-chat-out-origin: left bottom;
	--gb-chat-in-origin: right bottom;
}

/* ---------- Phones: the chat list becomes a row of chats above ---------- */

@media (max-width: 47.99rem) {
	.gb-offer-stage--chat[data-gb-offer-ready] {
		grid-template-columns: minmax(0, 1fr);
	}

	.gb-offer-stage--chat[data-gb-offer-ready] .gb-offer-stage__nav {
		border-inline-end: 0;
		border-block-end: 1px solid var(--gb-border);
	}

	.gb-offer-stage--chat .gb-offer-stage__tabgroup + .gb-offer-stage__tabgroup {
		margin-block-start: var(--gb-space-2xs);
	}

	.gb-offer-stage--chat .gb-offer-tab {
		min-block-size: 3rem;
		background-color: var(--gb-bg);
		font-size: 0.85rem;
	}

	.gb-os-avatar {
		inline-size: 2rem;
	}

	.gb-offer-stage--chat[data-gb-offer-ready] .gb-offer-stage__screen {
		min-block-size: 21rem;
	}
}