/**
 * Law Agent chat widget — تفاهم.
 *
 * Everything is scoped under .law-agent-chat and every property is set
 * explicitly, because this lands inside somebody else's theme: Elementor and
 * the Hostinger themes both style bare <button>, <input> and <table>.
 *
 * SINGLE THEME, DELIBERATELY. This used to carry a prefers-color-scheme
 * override, so a visitor whose OS was in dark mode got a black widget on a
 * white page. The site has no dark mode; a component should not invent one
 * its host cannot match.
 *
 * The palette is the site's own: the teal of the header button and footer,
 * and the sage of the "معلومات قانونية مبسطة" rule.
 */

.law-agent-chat,
.law-agent-account,
.law-agent-services {
	/* brand */
	--la-teal:        #134e4a;
	--la-teal-deep:   #0d3b38;
	--la-teal-ink:    #ffffff;
	--la-sage:        #7fbfa0;
	--la-sage-soft:   #e8f3ed;
	--la-sage-rule:   #cfe6da;

	/* ground and ink — neutrals biased toward teal, not pure grey */
	--la-bg:          #f3f7f5;
	--la-panel:       #ffffff;
	--la-ink:         #10312f;
	--la-muted:       #5b7873;
	--la-faint:       #8aa5a0;
	--la-rule:        #dbe7e3;

	/* status stays semantic, separate from the brand accent */
	--la-warn:        #8a5a12;
	--la-warn-soft:   #fbf1e0;
	--la-warn-rule:   #eeddbd;
	--la-danger:      #9a2c2c;
	--la-danger-soft: #fae9e9;

	--la-radius:      14px;
	--la-radius-sm:   10px;
}

.law-agent-chat {
	display: grid;
	grid-template-columns: 1fr;
	height: var(--law-agent-height, 620px);
	max-height: 90vh;
	border: 1px solid var(--la-rule);
	border-radius: var(--la-radius);
	overflow: hidden;
	background: var(--la-bg);
	color: var(--la-ink);
	font-family: "IBM Plex Sans Arabic", "Noto Naskh Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
	font-size: 15px;
	line-height: 1.75;
	text-align: right;

	/* The widget adapts to the box it is put in, not to the browser window.
	   A popup or a narrow column on a wide desktop is still a narrow widget,
	   and a viewport media query cannot tell. */
	container-type: inline-size;
	container-name: law-agent;
	box-shadow: 0 1px 2px rgba(16, 49, 47, .05), 0 8px 24px -12px rgba(16, 49, 47, .18);
}

.law-agent-chat *,
.law-agent-chat *::before,
.law-agent-chat *::after { box-sizing: border-box; }

.law-agent-chat.has-sidebar { grid-template-columns: 264px 1fr; }

/* Below ~560px of WIDGET width the conversation list costs more than it
   gives: it would take half the room the conversation needs. */
@container law-agent (max-width: 560px) {
	.law-agent-chat.has-sidebar { grid-template-columns: 1fr; }
	.law-agent-chat .la-sidebar { display: none; }
}

/* Fallback for browsers without container queries: the old viewport rule,
   which is right for phones and merely unhelpful inside a desktop popup. */
@supports not (container-type: inline-size) {
	@media (max-width: 782px) {
		.law-agent-chat.has-sidebar { grid-template-columns: 1fr; }
		.law-agent-chat .la-sidebar { display: none; }
	}
}

/* Dropped into a popup or a flex cell that sizes itself: fill it instead of
   insisting on a pixel height that fights the container. */
.law-agent-chat.is-fill {
	height: 100%;
	min-height: 0;
	max-height: none;
}

/* ── sidebar ─────────────────────────────────────────────────────────── */

.law-agent-chat .la-sidebar {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--la-panel);
	border-inline-start: 1px solid var(--la-rule);
}

.law-agent-chat .la-new {
	margin: 14px;
	padding: 11px 14px;
	border: 0;
	border-radius: var(--la-radius-sm);
	background: var(--la-teal);
	color: var(--la-teal-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}

.law-agent-chat .la-new:hover { background: var(--la-teal-deep); }

.law-agent-chat .la-sessions {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 0 10px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.law-agent-chat .la-session {
	display: block;
	width: 100%;
	padding: 9px 11px;
	border: 1px solid transparent;
	border-radius: var(--la-radius-sm);
	background: transparent;
	color: var(--la-muted);
	font: inherit;
	font-size: 13.5px;
	text-align: right;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.law-agent-chat .la-session:hover { background: var(--la-bg); color: var(--la-ink); }

.law-agent-chat .la-session.is-current {
	background: var(--la-sage-soft);
	border-color: var(--la-sage-rule);
	color: var(--la-teal);
	font-weight: 600;
}

.law-agent-chat .la-session-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.law-agent-chat .la-session-status {
	display: inline-block;
	margin-top: 3px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--la-warn-soft);
	color: var(--la-warn);
	font-size: 10.5px;
	font-weight: 600;
}

/* ── thread ──────────────────────────────────────────────────────────── */

.law-agent-chat .la-main {
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
}

.law-agent-chat .la-log {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 24px 20px;
	scroll-behavior: smooth;
}

.law-agent-chat .la-thread {
	max-width: 780px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.law-agent-chat .la-msg { display: flex; }
.law-agent-chat .la-msg.assistant { justify-content: flex-start; }
.law-agent-chat .la-msg.user { justify-content: flex-end; }

.law-agent-chat .la-bubble {
	max-width: 92%;
	padding: 14px 17px;
	border-radius: var(--la-radius);
	background: var(--la-panel);
	border: 1px solid var(--la-rule);
	box-shadow: 0 1px 2px rgba(16, 49, 47, .04);
}

/* The visitor's own words: solid teal, squared off on the corner nearest
   them, so the two voices separate at a glance without avatars or labels. */
.law-agent-chat .la-msg.user .la-bubble {
	background: var(--la-teal);
	border-color: var(--la-teal);
	color: var(--la-teal-ink);
	border-start-end-radius: 4px;
	white-space: pre-wrap;
}

.law-agent-chat .la-msg.assistant .la-bubble { border-start-start-radius: 4px; }

.law-agent-chat .la-greeting .la-bubble {
	background: var(--la-sage-soft);
	border-color: var(--la-sage-rule);
	color: var(--la-teal);
}

.law-agent-chat .la-md > *:first-child { margin-top: 0; }
.law-agent-chat .la-md > *:last-child  { margin-bottom: 0; }
.law-agent-chat .la-md p { margin: 0 0 10px; }
.law-agent-chat .la-md strong { font-weight: 600; }

.law-agent-chat .la-md ul {
	margin: 0 0 10px;
	padding-inline-start: 22px;
}

.law-agent-chat .la-md li { margin-bottom: 4px; }

.law-agent-chat .la-md code {
	padding: 1px 6px;
	border-radius: 5px;
	background: var(--la-bg);
	border: 1px solid var(--la-rule);
	font-family: ui-monospace, Consolas, monospace;
	font-size: .88em;
	direction: ltr;
	display: inline-block;
}

/* Penalty schedules come back as real Markdown tables, and they are wide. */
.law-agent-chat .la-table {
	overflow-x: auto;
	margin: 0 0 10px;
	border: 1px solid var(--la-rule);
	border-radius: var(--la-radius-sm);
}

.law-agent-chat .la-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.law-agent-chat .la-table th,
.law-agent-chat .la-table td {
	padding: 9px 12px;
	border-bottom: 1px solid var(--la-rule);
	text-align: right;
	vertical-align: top;
}

.law-agent-chat .la-table tr:last-child td { border-bottom: 0; }

.law-agent-chat .la-table th {
	background: var(--la-bg);
	font-weight: 600;
	color: var(--la-teal);
}

.law-agent-chat .is-streaming .la-md::after {
	content: "▌";
	color: var(--la-sage);
	animation: la-blink 1s steps(2) infinite;
}

@keyframes la-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.law-agent-chat .la-log { scroll-behavior: auto; }
	.law-agent-chat .is-streaming .la-md::after { animation: none; }
	.law-agent-chat * { transition: none !important; }
}

@container law-agent (max-width: 480px) {
	.law-agent-chat .la-log { padding: 16px 13px; }
	.law-agent-chat .la-composer { padding: 11px; }
	.law-agent-chat .la-send { padding: 13px 16px; }
	.law-agent-chat .la-bubble { max-width: 100%; }
}

/* ── provenance ──────────────────────────────────────────────────────── */

.law-agent-chat .la-label {
	margin-top: 12px;
	padding: 8px 11px;
	border-radius: var(--la-radius-sm);
	background: var(--la-warn-soft);
	border: 1px solid var(--la-warn-rule);
	color: var(--la-warn);
	font-size: 13px;
	line-height: 1.5;
}

.law-agent-chat .la-sources {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--la-rule);
	font-size: 13.5px;
}

.law-agent-chat .la-sources summary {
	cursor: pointer;
	color: var(--la-teal);
	font-weight: 600;
	list-style: none;
}

.law-agent-chat .la-sources summary::-webkit-details-marker { display: none; }

.law-agent-chat .la-sources summary::before {
	content: "▸";
	display: inline-block;
	margin-inline-end: 6px;
	color: var(--la-sage);
	transition: transform .15s ease;
}

.law-agent-chat .la-sources[open] summary::before { transform: rotate(-90deg); }

.law-agent-chat .la-sources ul {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.law-agent-chat .la-sources li {
	padding-inline-start: 10px;
	border-inline-start: 2px solid var(--la-sage);
	line-height: 1.5;
}

.law-agent-chat .la-reason { color: var(--la-faint); font-size: 12.5px; }

/* ── the consultation offer ──────────────────────────────────────────── */

.law-agent-chat .la-cta {
	margin-top: 14px;
	padding: 16px;
	border: 1px solid var(--la-sage-rule);
	border-radius: var(--la-radius);
	background: var(--la-sage-soft);
}

.law-agent-chat .la-cta-title {
	font-weight: 600;
	color: var(--la-teal);
	margin-bottom: 5px;
}

.law-agent-chat .la-cta-body {
	color: var(--la-muted);
	font-size: 14px;
	margin-bottom: 12px;
}

.law-agent-chat .la-cta-button {
	display: inline-block;
	padding: 11px 18px;
	border: 0;
	border-radius: var(--la-radius-sm);
	background: var(--la-teal);
	color: var(--la-teal-ink);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease;
}

.law-agent-chat .la-cta-button:hover { background: var(--la-teal-deep); }
.law-agent-chat .la-cta-button[disabled] { opacity: .55; cursor: default; }

.law-agent-chat .la-booking-panel .la-bubble {
	background: var(--la-panel);
	border-color: var(--la-sage-rule);
}

/* ── sign in / register ──────────────────────────────────────────────── */

.law-agent-chat .la-login {
	display: grid;
	gap: 10px;
	justify-items: start;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--la-sage-rule);
}

.law-agent-chat .la-login-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

/* The secondary path: most people reaching this panel already have an
   account, so registering is a link rather than a second button. */
.law-agent-chat .la-login-alt {
	color: var(--la-teal);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.law-agent-chat .la-signup {
	display: grid;
	gap: 9px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--la-rule);
}

.law-agent-chat .la-signup-title { font-weight: 600; color: var(--la-teal); }
.law-agent-chat .la-signup-body  { font-size: 13.5px; color: var(--la-muted); }

.law-agent-chat .la-signup input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--la-rule);
	border-radius: var(--la-radius-sm);
	background: var(--la-panel);
	color: var(--la-ink);
	font: inherit;
	text-align: right;
}

.law-agent-chat .la-signup-cancel {
	border: 0;
	background: none;
	color: var(--la-muted);
	font: inherit;
	font-size: 13.5px;
	text-decoration: underline;
	cursor: pointer;
}

.law-agent-chat .la-signup-status { font-size: 13.5px; color: var(--la-muted); }
.law-agent-chat .la-signup-status.is-error { color: var(--la-danger); }

/* ── persistent booking bar ──────────────────────────────────────────── */

.law-agent-chat .la-bookbar {
	display: flex;
	padding: 11px 14px;
	border-top: 1px solid var(--la-rule);
	background: var(--la-sage-soft);
}

.law-agent-chat .la-bookbar[hidden] { display: none; }

.law-agent-chat .la-book {
	padding: 9px 16px;
	border: 1px solid var(--la-teal);
	border-radius: var(--la-radius-sm);
	background: transparent;
	color: var(--la-teal);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.law-agent-chat .la-book:hover,
.law-agent-chat .la-book:focus-visible {
	background: var(--la-teal);
	color: var(--la-teal-ink);
}

/* ── composer ────────────────────────────────────────────────────────── */

.law-agent-chat .la-composer {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	padding: 14px;
	border-top: 1px solid var(--la-rule);
	background: var(--la-panel);
}

.law-agent-chat .la-input {
	flex: 1;
	min-height: 48px;
	max-height: 160px;
	padding: 12px 15px;
	border: 1px solid var(--la-rule);
	border-radius: var(--la-radius-sm);
	background: var(--la-bg);
	color: var(--la-ink);
	font: inherit;
	line-height: 1.6;
	resize: vertical;
	text-align: right;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.law-agent-chat .la-input:focus {
	outline: none;
	border-color: var(--la-sage);
	box-shadow: 0 0 0 3px rgba(127, 191, 160, .25);
}

.law-agent-chat .la-input::placeholder { color: var(--la-faint); }

.law-agent-chat .la-send {
	padding: 13px 24px;
	border: 0;
	border-radius: var(--la-radius-sm);
	background: var(--la-teal);
	color: var(--la-teal-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}

.law-agent-chat .la-send:hover { background: var(--la-teal-deep); }

.law-agent-chat .la-send[disabled],
.law-agent-chat .la-input[disabled] { opacity: .5; cursor: default; }

/* Handed to a lawyer: the model will not answer on this conversation again,
   so the composer says so rather than looking merely broken. The JS sets
   this class; it was never styled, so a locked widget was indistinguishable
   from a stuck one. */
.law-agent-chat.is-locked .la-composer {
	background: var(--la-bg);
	position: relative;
}

.law-agent-chat.is-locked .la-composer::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	width: 3px;
	height: 100%;
	background: var(--la-warn);
}

/* ── messages left ───────────────────────────────────────────────────── */

.law-agent-chat .la-usage {
	padding: 6px 16px 0;
	background: var(--la-panel);
	border-top: 1px solid var(--la-rule);
	color: var(--la-faint);
	font-size: 12.5px;
	text-align: right;
}

.law-agent-chat .la-usage[hidden] { display: none; }

/* Two or fewer left: worth noticing before it happens, not after. */
.law-agent-chat .la-usage.is-low { color: var(--la-warn); font-weight: 600; }

.law-agent-chat .la-usage + .la-composer { border-top: 0; }

/* ── microphone ──────────────────────────────────────────────────────── */

.law-agent-chat .la-mic {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 48px;
	height: 48px;
	padding: 0 12px;
	border: 1px solid var(--la-rule);
	border-radius: var(--la-radius-sm);
	background: var(--la-bg);
	color: var(--la-teal);
	font: inherit;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.law-agent-chat .la-mic[hidden] { display: none; }

/* The glyph is drawn rather than an emoji, so it matches the theme's weight. */
.law-agent-chat .la-mic::before {
	content: "";
	width: 12px;
	height: 18px;
	border: 2px solid currentColor;
	border-radius: 7px;
	box-shadow: 0 7px 0 -5px currentColor;
}

.law-agent-chat .la-mic:hover { border-color: var(--la-sage); background: var(--la-sage-soft); }

.law-agent-chat .la-mic.is-recording {
	border-color: var(--la-danger);
	background: var(--la-danger-soft);
	color: var(--la-danger);
}

.law-agent-chat .la-mic.is-recording::before {
	width: 10px;
	height: 10px;
	border: 0;
	border-radius: 50%;
	background: currentColor;
	box-shadow: none;
	animation: la-pulse 1.2s ease-in-out infinite;
}

.law-agent-chat .la-mic.is-busy { opacity: .6; cursor: progress; }
.law-agent-chat .la-mic[disabled] { opacity: .5; cursor: default; }

@keyframes la-pulse { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
	.law-agent-chat .la-mic.is-recording::before { animation: none; }
}

.law-agent-chat .la-voice-error {
	margin: 0 14px;
	padding: 8px 11px;
	border-radius: var(--la-radius-sm);
	background: var(--la-danger-soft);
	color: var(--la-danger);
	font-size: 13px;
}

/* A question that was spoken, marked quietly on the visitor's own bubble. */
.law-agent-chat .la-msg.user.is-voice .la-bubble::before {
	content: "🎙";
	margin-inline-end: 6px;
	font-size: 12px;
	opacity: .85;
}

/* ── listening ───────────────────────────────────────────────────────── */

.law-agent-chat .la-listen {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 5px 12px;
	border: 1px solid var(--la-sage-rule);
	border-radius: 999px;
	background: var(--la-panel);
	color: var(--la-teal);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.law-agent-chat .la-listen::before {
	content: "";
	width: 0;
	height: 0;
	border-block: 5px solid transparent;
	border-inline-end: 8px solid currentColor;
}

.law-agent-chat .la-listen.is-playing::before {
	width: 8px;
	height: 10px;
	border: 0;
	border-inline: 3px solid currentColor;
}

.law-agent-chat .la-listen:hover { background: var(--la-sage-soft); }
.law-agent-chat .la-listen[disabled] { opacity: .6; cursor: progress; }

/* ── errors ──────────────────────────────────────────────────────────── */

.law-agent-chat .la-error {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: var(--la-radius-sm);
	background: var(--la-danger-soft);
	color: var(--la-danger);
	font-size: 14px;
}

.law-agent-chat .la-retry {
	margin-top: 10px;
	padding: 8px 15px;
	border: 1px solid var(--la-rule);
	border-radius: var(--la-radius-sm);
	background: var(--la-panel);
	color: var(--la-ink);
	font: inherit;
	cursor: pointer;
}

.law-agent-chat .la-retry:hover { background: var(--la-bg); }

/* Keyboard users need to see where they are; the ring is sage so it never
   reads as an error state. */
.law-agent-chat button:focus-visible,
.law-agent-chat a:focus-visible,
.law-agent-chat summary:focus-visible {
	outline: 2px solid var(--la-sage);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Scrollbars, so they do not arrive as the browser's default grey slab. */
.law-agent-chat .la-log,
.law-agent-chat .la-sessions {
	scrollbar-width: thin;
	scrollbar-color: #c3d6d1 transparent;
}

.law-agent-chat .la-log::-webkit-scrollbar,
.law-agent-chat .la-sessions::-webkit-scrollbar { width: 8px; }

.law-agent-chat .la-log::-webkit-scrollbar-thumb,
.law-agent-chat .la-sessions::-webkit-scrollbar-thumb {
	background: #c3d6d1;
	border-radius: 999px;
}

.law-agent-notice {
	padding: 12px 14px;
	border: 1px dashed #c3512f;
	border-radius: 10px;
	color: #c3512f;
}

/* ── the consultations page (My Account) ─────────────────────────────
   Lives inside the theme's account layout, not in a box of its own: no
   border, no fixed height, the theme's width. Only the palette is ours. */

.law-agent-account {
	color: var(--la-ink);
	font-family: "IBM Plex Sans Arabic", "Noto Naskh Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
	font-size: 15px;
	line-height: 1.75;
	text-align: right;
}

.law-agent-account *,
.law-agent-account *::before,
.law-agent-account *::after { box-sizing: border-box; }

.law-agent-account .la-account-loading,
.law-agent-account .la-cmuted { color: var(--la-faint); }

.law-agent-account .la-account-empty {
	padding: 28px 20px;
	border: 1px dashed var(--la-rule);
	border-radius: var(--la-radius);
	background: var(--la-bg);
	text-align: center;
}

.law-agent-account .la-account-empty p { margin: 0 0 14px; }

.law-agent-account .la-error {
	padding: 12px 14px;
	border-radius: var(--la-radius-sm);
	background: var(--la-danger-soft);
	color: var(--la-danger);
}

.law-agent-account .la-cta-button {
	display: inline-block;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--la-radius-sm);
	background: var(--la-teal);
	color: var(--la-teal-ink);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.law-agent-account .la-cta-button:hover { background: var(--la-teal-deep); color: var(--la-teal-ink); }

/* list */

.law-agent-account .la-clist {
	display: grid;
	gap: 14px;
}

.law-agent-account .la-ccard {
	padding: 16px 18px;
	border: 1px solid var(--la-rule);
	border-inline-start: 4px solid var(--la-sage);
	border-radius: var(--la-radius);
	background: var(--la-panel);
}

.law-agent-account .la-ccard.is-pending  { border-inline-start-color: var(--la-warn); }
.law-agent-account .la-ccard.is-cancelled,
.law-agent-account .la-ccard.is-refunded { border-inline-start-color: var(--la-faint); }

.law-agent-account .la-ccard-head,
.law-agent-account .la-ccard-body,
.law-agent-account .la-ccard-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.law-agent-account .la-ccard-head { margin-bottom: 6px; }
.law-agent-account .la-ccard-date { color: var(--la-muted); font-size: 13.5px; }
.law-agent-account .la-ccard-amount { font-size: 18px; font-weight: 700; color: var(--la-teal); }
.law-agent-account .la-ccard-lawyer { color: var(--la-muted); font-size: 14px; }

.law-agent-account .la-ccard-actions {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--la-rule);
	justify-content: flex-start;
}

.law-agent-account .la-clink {
	color: var(--la-teal);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--la-sage-rule);
}

.law-agent-account .la-clink:hover { border-bottom-color: var(--la-teal); color: var(--la-teal-deep); }

.law-agent-account .la-clink-chat::before {
	content: "💬";
	margin-inline-end: 5px;
	font-size: 13px;
}

/* status badge, same words as the dashboard */

.law-agent-account .la-cstatus {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	background: var(--la-sage-soft);
	color: var(--la-teal);
}

.law-agent-account .la-cstatus.is-pending   { background: var(--la-warn-soft); color: var(--la-warn); }
.law-agent-account .la-cstatus.is-cancelled,
.law-agent-account .la-cstatus.is-refunded  { background: var(--la-bg); color: var(--la-muted); }

/* detail */

.law-agent-account .la-cback {
	display: inline-block;
	margin-bottom: 14px;
	color: var(--la-muted);
	font-size: 14px;
	text-decoration: none;
}

.law-agent-account .la-cback::before { content: "→"; margin-inline-end: 6px; }
.law-agent-account .la-cback:hover { color: var(--la-teal); }

.law-agent-account .la-cdetail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.law-agent-account .la-cdetail-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--la-teal);
}

.law-agent-account .la-cfacts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 8px 18px;
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 1px solid var(--la-rule);
	border-radius: var(--la-radius);
	background: var(--la-panel);
}

.law-agent-account .la-cfacts dt { margin: 0; color: var(--la-muted); font-size: 14px; }
.law-agent-account .la-cfacts dd { margin: 0; font-weight: 600; word-break: break-all; }

.law-agent-account .la-csection { margin-top: 20px; }

.law-agent-account .la-csection h4 {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	color: var(--la-teal);
}

.law-agent-account .la-csection-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.law-agent-account .la-csummary {
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--la-radius-sm);
	background: var(--la-sage-soft);
	border: 1px solid var(--la-sage-rule);
	white-space: pre-wrap;
}

/* the transcript, read-only and compact */

.law-agent-account .la-cthread {
	display: grid;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--la-rule);
	border-radius: var(--la-radius);
	background: var(--la-bg);
	max-height: 520px;
	overflow: auto;
}

.law-agent-account .la-cmsg {
	max-width: 88%;
	padding: 10px 14px;
	border-radius: var(--la-radius-sm);
	background: var(--la-panel);
	border: 1px solid var(--la-rule);
}

.law-agent-account .la-cmsg.user {
	justify-self: start;
	background: var(--la-teal);
	border-color: var(--la-teal);
	color: var(--la-teal-ink);
}

.law-agent-account .la-cmsg-who {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	opacity: .75;
}

.law-agent-account .la-cmsg.is-voice .la-cmsg-who::before { content: "🎙 "; }

.law-agent-account .la-cmsg-body p { margin: 0 0 6px; }
.law-agent-account .la-cmsg-body p:last-child { margin-bottom: 0; }
.law-agent-account .la-cmsg-body table { border-collapse: collapse; font-size: 13.5px; }
.law-agent-account .la-cmsg-body td,
.law-agent-account .la-cmsg-body th { padding: 4px 8px; border: 1px solid var(--la-rule); }

@media (max-width: 600px) {
	.law-agent-account .la-cfacts { grid-template-columns: 1fr; gap: 2px 0; }
	.law-agent-account .la-cfacts dt { margin-top: 8px; }
	.law-agent-account .la-cmsg { max-width: 100%; }
}

/* ── new order states ───────────────────────────────────────────────── */

.law-agent-account .la-cstatus.is-in_progress { background: var(--la-sage-soft); color: var(--la-teal); }
.law-agent-account .la-cstatus.is-completed   { background: var(--la-teal); color: var(--la-teal-ink); }
.law-agent-account .la-ccard.is-completed     { border-inline-start-color: var(--la-teal); }

.law-agent-account .la-ccard-service {
	margin: -2px 0 8px;
	font-weight: 700;
	color: var(--la-teal);
}

/* ── the case description form (services that ask for one) ────────── */

.law-agent-chat .la-notes,
.law-agent-account .la-notes,
.law-agent-services .la-notes {
	margin-top: 12px;
	padding: 14px;
	border: 1px solid var(--la-sage-rule);
	border-radius: var(--la-radius-sm);
	background: var(--la-panel);
	text-align: right;
}

.law-agent-chat .la-notes-input,
.law-agent-account .la-notes-input,
.law-agent-services .la-notes-input {
	display: block;
	width: 100%;
	margin: 10px 0;
	padding: 10px 12px;
	border: 1px solid var(--la-rule);
	border-radius: var(--la-radius-sm);
	background: var(--la-bg);
	color: var(--la-ink);
	font: inherit;
	line-height: 1.6;
	resize: vertical;
}

.law-agent-chat .la-notes-input:focus,
.law-agent-account .la-notes-input:focus,
.law-agent-services .la-notes-input:focus { outline: 2px solid var(--la-sage); outline-offset: 1px; }

/* ── the assistant's suggestion ─────────────────────────────────────── */

.law-agent-chat .la-suggest {
	border-color: var(--la-sage);
	background: var(--la-sage-soft);
}

.law-agent-chat .la-suggest .la-cta-title::before {
	content: "✦";
	margin-inline-end: 6px;
	color: var(--la-sage);
}

.law-agent-chat .la-suggest-desc {
	margin: 4px 0 10px;
	color: var(--la-muted);
	font-size: 13.5px;
}

/* ── the services page ──────────────────────────────────────────────── */

.law-agent-services {
	color: var(--la-ink);
	font-family: "IBM Plex Sans Arabic", "Noto Naskh Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
	font-size: 15px;
	line-height: 1.75;
	text-align: right;
}

.law-agent-services *,
.law-agent-services *::before,
.law-agent-services *::after { box-sizing: border-box; }

.law-agent-services .la-account-loading,
.law-agent-services .la-cmuted { color: var(--la-faint); }

.law-agent-services .la-error {
	padding: 12px 14px;
	border-radius: var(--la-radius-sm);
	background: var(--la-danger-soft);
	color: var(--la-danger);
}

.law-agent-services .la-svc-grid {
	display: grid;
	grid-template-columns: repeat(var(--la-columns, 3), minmax(0, 1fr));
	gap: 18px;
}

@media (max-width: 900px) { .law-agent-services .la-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .law-agent-services .la-svc-grid { grid-template-columns: 1fr; } }

.law-agent-services .la-svc {
	display: flex;
	flex-direction: column;
	padding: 22px 20px;
	border: 1px solid var(--la-rule);
	border-top: 4px solid var(--la-sage);
	border-radius: var(--la-radius);
	background: var(--la-panel);
	box-shadow: 0 1px 2px rgba(16, 49, 47, .05), 0 8px 24px -12px rgba(16, 49, 47, .18);
}

.law-agent-services .la-svc-name {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
	color: var(--la-teal);
}

.law-agent-services .la-svc-desc {
	margin: 0 0 14px;
	color: var(--la-muted);
	flex: 1;
}

.law-agent-services .la-svc-price {
	margin-bottom: 14px;
	font-size: 22px;
	font-weight: 700;
	color: var(--la-teal);
}

.law-agent-services .la-cta-button {
	display: inline-block;
	padding: 11px 20px;
	border: 0;
	border-radius: var(--la-radius-sm);
	background: var(--la-teal);
	color: var(--la-teal-ink);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.law-agent-services .la-cta-button:hover { background: var(--la-teal-deep); color: var(--la-teal-ink); }

.law-agent-services .la-login {
	margin-top: 12px;
	padding: 12px;
	border-radius: var(--la-radius-sm);
	background: var(--la-bg);
}

.law-agent-services .la-signup-title { font-weight: 700; }
.law-agent-services .la-signup-body { color: var(--la-muted); font-size: 13.5px; margin-bottom: 8px; }
.law-agent-services .la-login-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.law-agent-services .la-login-alt { color: var(--la-teal); font-weight: 600; background: none; border: 0; font: inherit; cursor: pointer; }
.law-agent-services .la-signup-status { margin-top: 8px; font-size: 13.5px; color: var(--la-muted); }
.law-agent-services .la-signup-status.is-error { color: var(--la-danger); }