/*
 * Bug-report widget, triage queue and the report block on tickets (includes/feedback.php, assets/feedback.js).
 * Layout follows Bayaar's report button and dialog (shadcn: 44px round button, max-w-md dialog, xs labels);
 * only the colours are Payam's. They are set here so the same file works in wp-admin, which has no theme CSS.
 */
.payam-fb, .payam-fb-queue, .payam-fb-onticket, .payam-fb-toasts {
	--pfb-bg: oklch(1 0 0);
	--pfb-fg: oklch(0.324 0.0788 266.2);
	--pfb-muted: oklch(0.96 0.005 265);
	--pfb-muted-fg: oklch(0.5 0.04 266);
	--pfb-border: oklch(0.324 0.0788 266.2 / 0.12);
	--pfb-input: oklch(0.324 0.0788 266.2 / 0.18);
	--pfb-primary: oklch(0.324 0.0788 266.2);
	--pfb-primary-fg: oklch(0.99 0 0);
	--pfb-ring: oklch(0.687 0.0754 55.5);
	--pfb-sand: oklch(0.687 0.0754 55.5);
	--pfb-danger: oklch(0.577 0.245 27.325);
	--pfb-success: oklch(0.58 0.13 155);
	--pfb-radius: 0.75rem;
	font-family: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
	color: var(--pfb-fg);
}
.payam-fb *, .payam-fb-queue *, .payam-fb-toasts * { box-sizing: border-box; }

/* The floating button: bottom left, 44px, translucent card with the mark in the primary colour. */
.payam-fb-button {
	position: fixed; left: 0.75rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 60;
	display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0;
	border-radius: 9999px; border: 1px solid var(--pfb-border); background: oklch(1 0 0 / 0.9); color: var(--pfb-primary);
	box-shadow: 0 4px 6px -1px oklch(0.324 0.0788 266.2 / 0.1), 0 2px 4px -2px oklch(0.324 0.0788 266.2 / 0.1);
	backdrop-filter: blur(4px); cursor: pointer;
	transition: transform 0.15s, opacity 0.15s, border-color 0.15s, background 0.15s;
}
.payam-fb-button svg { width: 1.25rem; height: 1.25rem; }
.payam-fb-button:hover { border-color: oklch(0.324 0.0788 266.2 / 0.4); background: var(--pfb-bg); }
.payam-fb-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pfb-ring); }
.payam-fb-button:active { transform: translateY(1px); }
@media (min-width: 768px) { .payam-fb-button { left: 1.25rem; bottom: 1.25rem; } }
/* Phones: while the page scrolls the button shrinks and fades out of the reader's way. */
@media (max-width: 767px) {
	.payam-fb-button[data-scrolling] { pointer-events: none; transform: scale(0.75); opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) { .payam-fb-button { transition: none; } }

/* Dialog */
.payam-fb-dialog { padding: 0; border: 0; background: transparent; max-width: calc(100% - 2rem); width: 28rem; margin: auto; overflow: visible; color: var(--pfb-fg); }
.payam-fb-dialog::backdrop { background: oklch(0 0 0 / 0.5); }
.payam-fb-panel {
	position: relative; display: grid; gap: 1rem; padding: 1.5rem; max-height: calc(100dvh - 2rem); overflow-y: auto;
	background: var(--pfb-bg); border: 1px solid var(--pfb-border); border-radius: var(--pfb-radius);
	box-shadow: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);
}
.payam-fb-close { position: absolute; top: 1rem; inset-inline-end: 1rem; padding: 0.25rem; border: 0; background: none; color: var(--pfb-muted-fg); opacity: 0.7; cursor: pointer; border-radius: 0.25rem; }
.payam-fb-close:hover { opacity: 1; }
.payam-fb-close svg, .payam-fb-file svg, .payam-fb-pick svg { width: 1rem; height: 1rem; }
.payam-fb-title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.payam-fb-desc, .payam-fb-hint { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--pfb-muted-fg); line-height: 1.6; }
.payam-fb-hint { margin: 0; font-size: 0.75rem; }
.payam-fb-fields { display: grid; gap: 0.75rem; }
.payam-fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.payam-fb-field { display: grid; gap: 0.25rem; font-size: 0.75rem; }
.payam-fb-field > span { color: var(--pfb-muted-fg); }
.payam-fb input[type="text"], .payam-fb input[type="url"], .payam-fb select, .payam-fb textarea {
	width: 100%; min-height: 2.25rem; padding: 0.25rem 0.75rem; font: inherit; font-size: 0.875rem; color: var(--pfb-fg);
	background: transparent; border: 1px solid var(--pfb-input); border-radius: calc(var(--pfb-radius) - 2px);
	box-shadow: 0 1px 2px oklch(0 0 0 / 0.05);
}
.payam-fb textarea { min-height: 6rem; padding: 0.5rem 0.75rem; resize: vertical; line-height: 1.7; }
.payam-fb input:focus-visible, .payam-fb select:focus-visible, .payam-fb textarea:focus-visible { outline: none; border-color: var(--pfb-ring); box-shadow: 0 0 0 3px oklch(0.687 0.0754 55.5 / 0.35); }
.payam-fb input:disabled, .payam-fb textarea:disabled, .payam-fb select:disabled, .payam-fb button:disabled { opacity: 0.5; cursor: not-allowed; }
.payam-fb-files { display: grid; gap: 0.375rem; font-size: 0.75rem; }
.payam-fb-files > span { color: var(--pfb-muted-fg); }
.payam-fb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.25rem; padding: 0.5rem 1rem;
	font: inherit; font-size: 0.875rem; font-weight: 500; border-radius: calc(var(--pfb-radius) - 2px); cursor: pointer;
	border: 1px solid transparent; transition: background 0.15s, color 0.15s;
}
.payam-fb-btn.is-primary { background: var(--pfb-primary); color: var(--pfb-primary-fg); }
.payam-fb-btn.is-primary:hover { background: oklch(0.324 0.0788 266.2 / 0.9); }
.payam-fb-btn.is-outline { justify-self: start; background: var(--pfb-bg); border-color: var(--pfb-input); color: var(--pfb-fg); box-shadow: 0 1px 2px oklch(0 0 0 / 0.05); }
.payam-fb-btn.is-outline:hover, .payam-fb-btn.is-ghost:hover { background: var(--pfb-muted); }
.payam-fb-btn.is-ghost { background: transparent; color: var(--pfb-fg); }
@media (max-width: 639px) { .payam-fb-btn.is-outline { min-height: 2.75rem; } }
@media (pointer: coarse) { .payam-fb-paste { display: none; } }
.payam-fb-list { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.payam-fb-file { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.5rem; border: 1px solid var(--pfb-border); border-radius: calc(var(--pfb-radius) - 4px); background: oklch(0.96 0.005 265 / 0.4); }
.payam-fb-file span { display: flex; min-width: 0; align-items: center; gap: 0.375rem; }
.payam-fb-file .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.payam-fb-file .size { flex-shrink: 0; color: var(--pfb-muted-fg); }
.payam-fb-file button { flex-shrink: 0; padding: 0; border: 0; background: none; color: var(--pfb-muted-fg); cursor: pointer; }
.payam-fb-file button:hover { color: var(--pfb-fg); }
.payam-fb-progress { height: 0.375rem; width: 100%; overflow: hidden; border-radius: 9999px; background: var(--pfb-muted); }
.payam-fb-progress > div { height: 100%; border-radius: 9999px; background: var(--pfb-primary); transition: width 0.2s; }
.payam-fb-footer { display: flex; flex-direction: column-reverse; gap: 0.5rem; }
@media (min-width: 640px) { .payam-fb-footer { flex-direction: row; justify-content: flex-end; } }
.payam-fb [hidden] { display: none !important; }
.payam-fb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Toasts (Bayaar uses sonner): bottom centre, one card each, success or error. */
.payam-fb-toasts { position: fixed; z-index: 2147483000; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: grid; gap: 0.5rem; width: min(22rem, calc(100% - 2rem)); pointer-events: none; }
.payam-fb-toast { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1rem; font-size: 0.8125rem; line-height: 1.6; background: var(--pfb-bg); border: 1px solid var(--pfb-border); border-radius: var(--pfb-radius); box-shadow: 0 4px 12px oklch(0 0 0 / 0.1); pointer-events: auto; }
.payam-fb-toast.is-error { color: var(--pfb-danger); }
.payam-fb-toast.is-success { color: var(--pfb-success); }
.payam-fb-toast a { flex-shrink: 0; padding: 0.25rem 0.5rem; border-radius: 0.375rem; background: var(--pfb-primary); color: var(--pfb-primary-fg); font-size: 0.75rem; text-decoration: none; }

/* State pills, after Bayaar's StatePill tones. */
.payam-fb-pill { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.payam-fb-pill.t-review { background: oklch(0.687 0.0754 55.5 / 0.16); color: oklch(0.48 0.07 55); border-color: oklch(0.687 0.0754 55.5 / 0.35); }
.payam-fb-pill.t-queue { background: oklch(0.324 0.0788 266.2 / 0.08); color: var(--pfb-primary); border-color: oklch(0.324 0.0788 266.2 / 0.2); }
.payam-fb-pill.t-short { background: oklch(0.577 0.245 27.325 / 0.08); color: var(--pfb-danger); border-color: oklch(0.577 0.245 27.325 / 0.25); }
.payam-fb-pill.t-void { background: var(--pfb-muted); color: var(--pfb-muted-fg); border-color: var(--pfb-border); }
.payam-fb-pill.t-final { background: oklch(0.58 0.13 155 / 0.1); color: oklch(0.45 0.12 155); border-color: oklch(0.58 0.13 155 / 0.3); }

/* Triage queue (wp-admin). */
.payam-fb-queue { max-width: 56rem; margin-top: 1rem; min-width: 0; overflow-wrap: anywhere; }
.payam-fb-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1rem; }
.payam-fb-chip { min-height: 2.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--pfb-border); border-radius: 9999px; font-size: 0.75rem; color: var(--pfb-muted-fg); background: transparent; text-decoration: none; display: inline-flex; align-items: center; }
.payam-fb-chip:hover { background: var(--pfb-muted); color: var(--pfb-muted-fg); }
.payam-fb-chip.is-active { border-color: var(--pfb-primary); background: oklch(0.324 0.0788 266.2 / 0.1); color: var(--pfb-fg); }
.payam-fb-rows { margin: 0; padding: 0; list-style: none; border: 1px solid var(--pfb-border); border-radius: var(--pfb-radius); background: var(--pfb-bg); overflow: hidden; }
.payam-fb-rows > li { margin: 0; }
.payam-fb-rows > li + li { border-top: 1px solid var(--pfb-border); }
.payam-fb-rows details > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; cursor: pointer; list-style: none; }
.payam-fb-rows details > summary::-webkit-details-marker { display: none; }
.payam-fb-rows details > summary:hover { background: oklch(0.96 0.005 265 / 0.5); }
.payam-fb-rows .t { font-size: 0.875rem; font-weight: 500; margin: 0; }
.payam-fb-rows .m { font-size: 0.75rem; color: var(--pfb-muted-fg); margin: 0.125rem 0 0; }
.payam-fb-card { padding: 1rem; border-top: 1px dashed var(--pfb-border); background: oklch(0.985 0.002 260); }
.payam-fb-card p { margin: 0.25rem 0 0; }
.payam-fb-card .body { margin-top: 0.5rem; white-space: pre-wrap; font-size: 0.875rem; line-height: 1.75; }
.payam-fb-card .meta { font-size: 0.75rem; color: var(--pfb-muted-fg); }
.payam-fb-card .ltr { direction: ltr; text-align: left; unicode-bidi: isolate; word-break: break-all; }
.payam-fb-card a { color: var(--pfb-primary); text-underline-offset: 4px; }
.payam-fb-media { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.payam-fb-media img { width: 8rem; height: 8rem; object-fit: cover; border: 1px solid var(--pfb-border); border-radius: 0.375rem; display: block; }
.payam-fb-media video { height: 8rem; max-width: 100%; border: 1px solid var(--pfb-border); border-radius: 0.375rem; }
.payam-fb-context { margin-top: 0.75rem; border-top: 1px solid var(--pfb-border); padding-top: 0.25rem; }
.payam-fb-context > summary { padding: 0.5rem 0; font-size: 0.75rem; cursor: pointer; }
.payam-fb-fact { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.375rem 0; border-bottom: 1px solid oklch(0.324 0.0788 266.2 / 0.06); font-size: 0.75rem; }
.payam-fb-fact:last-child { border-bottom: 0; }
.payam-fb-fact > span:first-child { flex-shrink: 0; color: var(--pfb-muted-fg); }
.payam-fb-fact > span:last-child { min-width: 0; word-break: break-all; text-align: end; }
.payam-fb-mono { font-family: "JetBrains Mono", ui-monospace, monospace; direction: ltr; }
.payam-fb-errors { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.payam-fb-errors li { padding: 0.5rem; border: 1px solid oklch(0.324 0.0788 266.2 / 0.08); border-radius: 0.375rem; background: oklch(0.96 0.005 265 / 0.3); font-size: 0.75rem; }
.payam-fb-errors pre { margin: 0.25rem 0 0; white-space: pre-wrap; word-break: break-all; font-size: 0.6875rem; color: var(--pfb-muted-fg); direction: ltr; text-align: left; }
.payam-fb-triage { display: grid; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--pfb-border); }
.payam-fb-triage .payam-fb-row { grid-template-columns: 1fr; }
@media (min-width: 640px) { .payam-fb-triage .payam-fb-row { grid-template-columns: 1fr 1fr; } }
.payam-fb-triage textarea { min-height: 4rem; }
.payam-fb-triage .actions { display: flex; justify-content: flex-end; }
.payam-fb-queue select, .payam-fb-queue textarea { max-width: none; }

/* The report block on a ticket (My account and the staff ticket screen). */
.payam-fb-onticket { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--pfb-border); border-radius: calc(var(--pfb-radius) - 2px); background: var(--pfb-bg); font-size: 0.875rem; }
.payam-fb-onticket p { margin: 0; }
.payam-fb-onticket a { color: var(--pfb-primary); font-size: 0.75rem; text-underline-offset: 4px; }
.payam-fb-onticket .payam-fb-media { margin-top: 0; }