/*
 * استوديو الملفات — Record Studio (assets/js/record_studio/record_studio.js)
 * Trigger (.rs-slot > .rs-trigger) + dialog (.rs-root) + image viewer (.rs-viewer).
 *
 * app.css forces `color: var(--text-primary) !important` on p/span/div/label/td in dark mode,
 * so every color below is paired with `--text-primary: <same value>`.
 */

:root {
	--rs-surface: #ffffff;
	--rs-surface-2: #f8fafc;
	--rs-surface-3: #f1f5f9;
	--rs-border: rgba(15, 23, 42, 0.08);
	--rs-border-strong: rgba(15, 23, 42, 0.16);
	--rs-text: #0f172a;
	--rs-muted: #556477;
	--rs-faint: #94a3b8;
	--rs-primary: #2563eb;
	--rs-primary-soft: rgba(37, 99, 235, 0.09);
	--rs-ok: #059669;
	--rs-ok-soft: rgba(5, 150, 105, 0.1);
	--rs-warn: #b45309;
	--rs-warn-soft: rgba(245, 158, 11, 0.14);
	--rs-danger: #dc2626;
	--rs-danger-soft: rgba(220, 38, 38, 0.08);
	--rs-violet: #7c3aed;
	--rs-violet-soft: rgba(124, 58, 237, 0.1);
	--rs-scrim: rgba(15, 23, 42, 0.46);
	--rs-shadow-tile: 0 14px 30px rgba(15, 23, 42, 0.16);
	--rs-shadow-modal: 0 24px 80px rgba(15, 23, 42, 0.28), 0 2px 8px rgba(15, 23, 42, 0.08);
	--rs-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--rs-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html[data-theme="dark"] {
	--rs-surface: #111a2e;
	--rs-surface-2: #0f172a;
	--rs-surface-3: #1a2540;
	--rs-border: rgba(148, 163, 184, 0.14);
	--rs-border-strong: rgba(148, 163, 184, 0.28);
	--rs-text: #e2e8f0;
	--rs-muted: #94a3b8;
	--rs-faint: #64748b;
	--rs-primary: #60a5fa;
	--rs-primary-soft: rgba(96, 165, 250, 0.14);
	--rs-ok: #34d399;
	--rs-ok-soft: rgba(52, 211, 153, 0.12);
	--rs-warn: #fbbf24;
	--rs-warn-soft: rgba(251, 191, 36, 0.12);
	--rs-danger: #f87171;
	--rs-danger-soft: rgba(248, 113, 113, 0.12);
	--rs-violet: #a78bfa;
	--rs-violet-soft: rgba(167, 139, 250, 0.14);
	--rs-scrim: rgba(2, 6, 23, 0.66);
	--rs-shadow-tile: 0 14px 30px rgba(0, 0, 0, 0.4);
	--rs-shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------------ trigger */

.rs-slot {
	display: inline-flex;
	max-width: 100%;
	vertical-align: middle;
	--text-primary: currentColor;
}

.rs-slot > template {
	display: none;
}

.rs-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 32px;
	max-width: 100%;
	padding: 0.25rem 0.7rem;
	border: 1px solid var(--rs-border);
	border-radius: 11px;
	background: var(--rs-surface-2);
	color: var(--rs-muted);
	--text-primary: var(--rs-muted);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.2s var(--rs-ease), box-shadow 0.2s var(--rs-ease), transform 0.2s var(--rs-ease), background-color 0.2s;
}

.rs-trigger > i {
	font-size: 0.95rem;
	color: var(--rs-primary);
}

.rs-slot[data-rs-kind="notes"] .rs-trigger > i {
	color: var(--rs-violet);
}

.rs-trigger:hover {
	border-color: var(--rs-primary);
	box-shadow: 0 0 0 4px var(--rs-primary-soft);
	transform: translateY(-1px);
}

.rs-trigger:focus-visible {
	outline: 2px solid var(--rs-primary);
	outline-offset: 2px;
}

.rs-trigger:active {
	transform: translateY(0) scale(0.97);
}

.rs-trigger__label {
	overflow: hidden;
	text-overflow: ellipsis;
}

.rs-trigger__count {
	min-width: 20px;
	padding: 0 6px;
	border: 1px solid var(--rs-border);
	border-radius: 999px;
	background: var(--rs-surface);
	color: var(--rs-text);
	--text-primary: var(--rs-text);
	font-size: 0.72rem;
	text-align: center;
	animation: rs-pop-in 0.3s var(--rs-spring);
}

.rs-current-record > td,
.rs-current-record {
	box-shadow: inset 0 0 0 9999px var(--rs-primary-soft);
}

html.rs-lock,
html.rs-lock body {
	overflow: hidden;
}

/* ------------------------------------------------------------------ dialog */

.rs-root {
	position: fixed;
	inset: 0;
	z-index: 2000;
	font-family: inherit;
	color: var(--rs-text);
	--text-primary: currentColor;
}

.rs-root[hidden] {
	display: none;
}

.rs-root *,
.rs-root *::before,
.rs-root *::after {
	box-sizing: border-box;
}

.rs-scrim {
	position: absolute;
	inset: 0;
	background: var(--rs-scrim);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.25s var(--rs-ease);
}

.rs-modal {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	/* the tabs row exists on phones only (and only with both panes) */
	grid-template-rows: auto minmax(0, 1fr);
	width: min(1180px, calc(100vw - 48px));
	height: min(760px, calc(100vh - 48px));
	border: 1px solid var(--rs-border);
	border-radius: 22px;
	background: var(--rs-surface);
	box-shadow: var(--rs-shadow-modal);
	color: var(--rs-text);
	--text-primary: var(--rs-text);
	overflow: hidden;
	outline: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.96) translateY(10px);
	transition: opacity 0.25s var(--rs-ease), transform 0.38s var(--rs-spring);
}

.rs-root.is-open .rs-scrim {
	opacity: 1;
}

.rs-root.is-open .rs-modal {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.rs-root.is-closing .rs-modal {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.97);
	transition-duration: 0.2s;
}

/* notes-only: a narrower dialog */
.rs-modal.has-notes:not(.has-files) {
	width: min(560px, calc(100vw - 48px));
	height: min(680px, calc(100vh - 48px));
}

.rs-modal.is-swap .rs-body {
	animation: rs-swap 0.32s var(--rs-ease);
}

.rs-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--rs-border);
	background: linear-gradient(180deg, var(--rs-surface-2), var(--rs-surface));
}

.rs-grip {
	display: none;
}

.rs-head__icon {
	display: grid;
	flex: none;
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: 14px;
	background: var(--rs-primary-soft);
	color: var(--rs-primary);
	--text-primary: var(--rs-primary);
	font-size: 1.2rem;
}

.rs-head__titles {
	min-width: 0;
}

.rs-root .rs-head__title {
	margin: 0;
	color: var(--rs-text);
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.4;
}

.rs-head__sub {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	color: var(--rs-muted);
	--text-primary: var(--rs-muted);
	font-size: 0.8rem;
}

.rs-head__sub:empty {
	display: none;
}

.rs-head__sub code {
	padding: 1px 8px;
	border-radius: 6px;
	background: var(--rs-surface-3);
	color: var(--rs-text);
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 700;
}

.rs-grow {
	flex: 1;
}

.rs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 12px;
	border: 1px solid var(--rs-border);
	border-radius: 11px;
	background: var(--rs-surface);
	color: var(--rs-muted);
	--text-primary: var(--rs-muted);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.18s var(--rs-ease);
}

.rs-btn:hover:not(:disabled) {
	border-color: var(--rs-border-strong);
	background: var(--rs-surface-3);
	color: var(--rs-text);
	--text-primary: var(--rs-text);
}

.rs-btn:focus-visible,
.rs-tab:focus-visible,
.rs-seg__btn:focus-visible,
.rs-act:focus-visible,
.rs-tile:focus-visible,
.rs-bubble__del:focus-visible {
	outline: 2px solid var(--rs-primary);
	outline-offset: 2px;
}

/* View_model_style.css paints every button:disabled grey; keep the studio colours */
.rs-root .rs-btn:disabled {
	border-color: var(--rs-border);
	background: var(--rs-surface);
	color: var(--rs-muted);
	--text-primary: var(--rs-muted);
	opacity: 0.45;
	cursor: default;
}

.rs-root .rs-act:disabled,
.rs-root .rs-bubble__del:disabled {
	opacity: 0.5;
	cursor: progress;
}

.rs-root .rs-act:disabled {
	background: rgba(255, 255, 255, 0.94);
	color: #0f172a;
}

.rs-root .rs-bubble__del:disabled {
	background: transparent;
	color: var(--rs-faint);
}

.rs-btn--icon {
	width: 38px;
	padding: 0;
}

.rs-btn--primary {
	border-color: transparent;
	background: var(--rs-primary);
	color: #fff;
	--text-primary: #fff;
}

.rs-btn--primary:hover:not(:disabled) {
	background: var(--rs-primary);
	color: #fff;
	--text-primary: #fff;
	filter: brightness(1.08);
}

.rs-btn--danger {
	border-color: transparent;
	background: var(--rs-danger);
	color: #fff;
	--text-primary: #fff;
}

.rs-btn--danger:hover:not(:disabled) {
	background: var(--rs-danger);
	color: #fff;
	--text-primary: #fff;
	filter: brightness(1.08);
}

.rs-nav {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.rs-nav[hidden] {
	display: none;
}

.rs-nav__pos {
	min-width: 56px;
	color: var(--rs-muted);
	--text-primary: var(--rs-muted);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* tabs: phones only */
.rs-tabs {
	display: none;
}

.rs-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	min-height: 0;
}

.rs-modal:not(.has-both) .rs-body {
	grid-template-columns: minmax(0, 1fr);
}

.rs-modal:not(.has-files) .rs-pane--files,
.rs-modal:not(.has-notes) .rs-pane--notes {
	display: none;
}

.rs-pane {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.rs-modal.has-both .rs-pane--notes {
	border-inline-start: 1px solid var(--rs-border);
	background: var(--rs-surface-2);
}

.rs-pane__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
}

.rs-root .rs-pane__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--rs-text);
	font-size: 0.95rem;
	font-weight: 700;
}

.rs-pane--files .rs-pane__title > i {
	color: var(--rs-primary);
}

.rs-pane--notes .rs-pane__title > i {
	color: var(--rs-violet);
}

.rs-count {
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--rs-surface-3);
	color: var(--rs-muted);
	--text-primary: var(--rs-muted);
	font-size: 0.75rem;
	font-weight: 700;
}

.rs-count:empty {
	display: none;
}

.rs-seg {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: 11px;
	background: var(--rs-surface-3);
}

.rs-seg:empty {
	display: none;
}

.rs-seg__btn {
	padding: 5px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--rs-muted);
	--text-primary: var(--rs-muted);
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s var(--rs-ease);
}

.rs-seg__btn.is-on {
	background: var(--rs-surface);
	color: var(--rs-text);
	--text-primary: var(--rs-text);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.rs-scroll {
	flex: 1;
	min-height: 0;
	padding: 4px 20px 20px;
	overflow: auto;
	overscroll-behavior: contain;
}

.rs-pane__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 12px 20px;
	border-top: 1px solid var(--rs-border);
	color: var(--rs-muted);
	--text-primary: var(--rs-muted);
	font-size: 0.74rem;
}

.rs-modal:not(.has-nav) .rs-hint--records {
	display: none;
}

.rs-root kbd {
	padding: 0 6px;
	border: 1px solid var(--rs-border-strong);
	border-radius: 5px;
	background: var(--rs-surface);
	box-shadow: none;
	color: var(--rs-muted);
	font-family: inherit;
	font-size: 0.7rem;
	margin-inline-end: 3px;
}

.rs-root .rs-group {
	margin: 6px 0 10px;
	color: var(--rs-muted);
	font-size: 0.8rem;
	font-weight: 700;
}

.rs-root .rs-group:not(:first-child) {
	margin-top: 20px;
}

.rs-root .rs-muted {
	margin: 0 0 8px;
	color: var(--rs-muted);
	--text-primary: var(--rs-muted);
	font-size: 0.82rem;
}

/* ------------------------------------------------------------------ gallery */

.rs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
	gap: 14px;
}

.rs-tile {
	position: relative;
	aspect-ratio: 4 / 3.3;
	margin: 0;
	border: 1px solid var(--rs-border);
	border-radius: 14px;
	background: var(--rs-surface-3);
	overflow: hidden;
	cursor: zoom-in;
	animation: rs-rise 0.45s var(--rs-ease) both;
	animation-delay: calc(var(--rs-i, 0) * 40ms);
	transition: transform 0.25s var(--rs-ease), box-shadow 0.25s var(--rs-ease), border-color 0.25s;
}

.rs-tile:hover,
.rs-tile:focus-within {
	border-color: var(--rs-primary);
	box-shadow: var(--rs-shadow-tile);
	transform: translateY(-3px);
}

.rs-tile > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--rs-ease);
}

.rs-tile:hover > img {
	transform: scale(1.05);
}

.rs-tile.is-broken > img {
	opacity: 0;
}

.rs-tile__cap {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 26px 12px 10px;
	background: linear-gradient(0deg, rgba(2, 6, 23, 0.8), rgba(2, 6, 23, 0));
	color: #fff;
	--text-primary: #fff;
}

.rs-tile__name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	font-weight: 600;
}

.rs-tile__meta {
	margin-top: 2px;
	opacity: 0.8;
	font-size: 0.7rem;
}

.rs-ellipsis {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rs-ext {
	flex: none;
	margin-inline-start: auto;
	padding: 1px 7px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.2);
	font-size: 0.66rem;
	letter-spacing: 0.04em;
}

.rs-tile__acts {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	display: flex;
	gap: 6px;
	opacity: 0;
	transform: translateY(-4px);
	transition: all 0.22s var(--rs-ease);
}

.rs-tile:hover .rs-tile__acts,
.rs-tile:focus-within .rs-tile__acts {
	opacity: 1;
	transform: none;
}

.rs-act {
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	border: 0;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	color: #0f172a;
	cursor: pointer;
	transition: transform 0.15s var(--rs-ease);
}

.rs-act:hover {
	transform: scale(1.08);
}

.rs-act.is-danger {
	color: #dc2626;
}

.rs-tile--doc {
	display: grid;
	place-items: center;
	background: linear-gradient(160deg, var(--rs-surface), var(--rs-surface-3));
	cursor: pointer;
}

.rs-tile--doc .rs-tile__cap {
	background: none;
	color: var(--rs-text);
	--text-primary: var(--rs-text);
	padding-top: 0;
}

.rs-tile--doc .rs-ext {
	background: var(--rs-surface-3);
	color: var(--rs-muted);
	--text-primary: var(--rs-muted);
}

.rs-tile--doc .rs-act {
	border: 1px solid var(--rs-border);
	background: var(--rs-surface);
	color: var(--rs-text);
}

.rs-doc {
	position: relative;
	display: grid;
	width: 64px;
	height: 76px;
	margin-bottom: 34px;
	place-items: center;
	border-radius: 10px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
	color: #fff;
	--text-primary: #fff;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	transition: transform 0.3s var(--rs-spring);
}

.rs-doc::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	width: 18px;
	height: 18px;
	border-end-start-radius: 8px;
	background: rgba(255, 255, 255, 0.35);
}

.rs-tile--doc:hover .rs-doc {
	transform: translateY(-3px) rotate(-3deg);
}

.rs-doc.is-pdf { background: linear-gradient(160deg, #ef4444, #b91c1c); }
.rs-doc.is-xls { background: linear-gradient(160deg, #10b981, #047857); }
.rs-doc.is-doc { background: linear-gradient(160deg, #3b82f6, #1d4ed8); }
.rs-doc.is-zip { background: linear-gradient(160deg, #f59e0b, #b45309); }
.rs-doc.is-file { background: linear-gradient(160deg, #64748b, #334155); }

/* ------------------------------------------------------------------ notes */

.rs-root .rs-notes {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-note {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 10px;
	animation: rs-rise 0.45s var(--rs-ease) both;
	animation-delay: calc(var(--rs-i, 0) * 60ms);
}

.rs-avatar {
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 12px;
	background: var(--rs-violet-soft);
	color: var(--rs-violet);
	--text-primary: var(--rs-violet);
	font-size: 0.82rem;
	font-weight: 700;
}

.rs-avatar.is-system {
	background: var(--rs-surface-3);
	color: var(--rs-muted);
	--text-primary: var(--rs-muted);
}

.rs-bubble {
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--rs-border);
	border-radius: 4px 14px 14px 14px;
	background: var(--rs-surface);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.rs-bubble__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
	color: var(--rs-muted);
	--text-primary: var(--rs-muted);
	font-size: 0.74rem;
}

.rs-bubble__meta b {
	color: var(--rs-text);
	font-size: 0.8rem;
}

.rs-bubble__meta time {
	font-variant-numeric: tabular-nums;
}

.rs-bubble__del {
	margin-inline-start: auto;
	padding: 2px 6px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--rs-faint);
	cursor: pointer;
	transition: all 0.15s;
}

.rs-bubble__del:hover {
	background: var(--rs-danger-soft);
	color: var(--rs-danger);
}

.rs-root .rs-bubble__text {
	margin: 0;
	color: var(--rs-text);
	--text-primary: var(--rs-text);
	font-size: 0.88rem;
	line-height: 1.7;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.rs-tag {
	padding: 0 7px;
	border-radius: 6px;
	background: var(--rs-warn-soft);
	color: var(--rs-warn);
	--text-primary: var(--rs-warn);
	font-size: 0.68rem;
	font-weight: 700;
}

/* ------------------------------------------------------------------ states */

.rs-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 2.8rem 1rem;
	text-align: center;
	animation: rs-rise 0.4s var(--rs-ease);
}

.rs-empty__icon {
	display: grid;
	width: 60px;
	height: 60px;
	place-items: center;
	border-radius: 20px;
	background: var(--rs-primary-soft);
	color: var(--rs-primary);
	--text-primary: var(--rs-primary);
	font-size: 1.5rem;
}

.rs-pane--notes .rs-empty__icon {
	background: var(--rs-violet-soft);
	color: var(--rs-violet);
	--text-primary: var(--rs-violet);
}

.rs-empty--error .rs-empty__icon {
	background: var(--rs-danger-soft);
	color: var(--rs-danger);
	--text-primary: var(--rs-danger);
}

.rs-root .rs-empty p {
	margin: 0;
	color: var(--rs-muted);
	--text-primary: var(--rs-muted);
	font-size: 0.88rem;
}

.rs-empty__actions {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.rs-sk {
	border-radius: 14px;
	background: linear-gradient(90deg, var(--rs-surface-3) 0%, var(--rs-surface-2) 50%, var(--rs-surface-3) 100%);
	background-size: 200% 100%;
	animation: rs-shimmer 1.2s linear infinite;
}

.rs-sk--tile { aspect-ratio: 4 / 3.3; }
.rs-sk--avatar { width: 36px; height: 36px; border-radius: 12px; }
.rs-sk--line { width: 45%; height: 12px; margin: 6px 0; border-radius: 6px; }
.rs-sk--line.is-long { width: 85%; }

/* confirm + toasts */
.rs-confirm {
	position: fixed;
	z-index: 3;
	width: 260px;
	padding: 14px;
	border: 1px solid var(--rs-border);
	border-radius: 14px;
	background: var(--rs-surface);
	box-shadow: var(--rs-shadow-modal);
	color: var(--rs-text);
	--text-primary: var(--rs-text);
	animation: rs-pop-in 0.25s var(--rs-spring);
}

.rs-confirm b {
	display: block;
	font-size: 0.9rem;
}

.rs-root .rs-confirm p {
	margin: 4px 0 12px;
	color: var(--rs-muted);
	--text-primary: var(--rs-muted);
	font-size: 0.78rem;
}

.rs-confirm__row {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.rs-toasts {
	position: fixed;
	inset-inline: 0;
	bottom: 24px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}

.rs-toast {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 12px;
	background: #0f172a;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3);
	color: #fff;
	--text-primary: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	animation: rs-toast-in 0.3s var(--rs-spring);
	transition: opacity 0.25s, transform 0.25s;
}

.rs-toast > i {
	color: #34d399;
}

.rs-toast.is-error > i {
	color: #f87171;
}

.rs-toast.is-leaving {
	opacity: 0;
	transform: translateY(8px);
}

/* ------------------------------------------------------------------ viewer */

.rs-viewer {
	position: fixed;
	inset: 0;
	z-index: 2;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	background: rgba(2, 6, 23, 0.95);
	color: #e2e8f0;
	--text-primary: #e2e8f0;
	animation: rs-fade 0.25s var(--rs-ease);
}

.rs-viewer[hidden] {
	display: none;
}

.rs-viewer__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
}

.rs-viewer__info {
	min-width: 0;
}

.rs-viewer__title {
	font-weight: 600;
}

.rs-viewer__pos {
	color: #94a3b8;
	--text-primary: #94a3b8;
	font-size: 0.8rem;
}

.rs-vbtn {
	display: grid;
	flex: none;
	width: 40px;
	height: 40px;
	place-items: center;
	border: 1px solid rgba(148, 163, 184, 0.2);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	color: #e2e8f0;
	cursor: pointer;
	transition: background-color 0.15s;
}

.rs-vbtn:hover {
	background: rgba(255, 255, 255, 0.14);
}

.rs-vbtn:focus-visible,
.rs-varrow:focus-visible,
.rs-film:focus-visible {
	outline: 2px solid #60a5fa;
	outline-offset: 2px;
}

.rs-viewer__stage {
	position: relative;
	display: grid;
	min-height: 0;
	padding: 0 84px;
	place-items: center;
	overflow: hidden;
}

.rs-viewer__img {
	max-width: 100%;
	max-height: calc(100vh - 200px);
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
	opacity: 0;
	cursor: zoom-in;
	touch-action: none;
	user-select: none;
	transition: transform 0.25s var(--rs-ease), opacity 0.3s var(--rs-ease);
}

.rs-viewer__img.is-in {
	opacity: 1;
}

.rs-viewer__img.is-zoomed {
	cursor: grab;
}

.rs-varrow {
	position: absolute;
	top: 50%;
	display: grid;
	width: 52px;
	height: 52px;
	place-items: center;
	border: 1px solid rgba(148, 163, 184, 0.25);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	transform: translateY(-50%);
}

.rs-root .rs-varrow:disabled,
.rs-root .rs-vbtn:disabled {
	border-color: rgba(148, 163, 184, 0.25);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	opacity: 0.25;
	cursor: default;
}

.rs-vbtn.is-danger {
	color: #fca5a5;
}

.rs-vbtn.is-danger:hover {
	background: rgba(248, 113, 113, 0.18);
}

.rs-vbtn[hidden] {
	display: none;
}

.rs-varrow.is-prev { inset-inline-start: 20px; }
.rs-varrow.is-next { inset-inline-end: 20px; }

.rs-viewer__zoom {
	position: absolute;
	bottom: 12px;
	left: 50%;
	padding: 3px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #cbd5e1;
	--text-primary: #cbd5e1;
	font-size: 0.76rem;
	font-variant-numeric: tabular-nums;
	transform: translateX(-50%);
	pointer-events: none;
}

.rs-viewer__film {
	display: flex;
	gap: 10px;
	padding: 14px 20px 20px;
	overflow-x: auto;
	justify-content: safe center;
}

.rs-viewer__film[hidden] {
	display: none;
}

.rs-film {
	flex: none;
	width: 72px;
	height: 54px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 9px;
	background: #1e293b;
	overflow: hidden;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.2s, border-color 0.2s;
}

.rs-film img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rs-film:hover,
.rs-film.is-on {
	opacity: 1;
}

.rs-film.is-on {
	border-color: #60a5fa;
}

/* ------------------------------------------------------------------ phones: bottom sheet + tabs */

@media (max-width: 720px) {
	.rs-modal,
	.rs-modal.has-notes:not(.has-files) {
		inset: auto 0 0 0;
		width: 100%;
		height: 92vh;
		height: 92dvh;
		border-radius: 22px 22px 0 0;
		border-bottom: 0;
		transform: translateY(100%);
		transition: transform 0.42s var(--rs-ease), opacity 0.2s;
	}

	.rs-root.is-open .rs-modal {
		transform: none;
	}

	.rs-root.is-closing .rs-modal {
		opacity: 1;
		transform: translateY(100%);
	}

	.rs-modal.is-dragging {
		transition: none;
	}

	.rs-scrim {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.rs-head {
		position: relative;
		flex-wrap: wrap;
		gap: 10px;
		padding: 24px 16px 12px;
	}

	.rs-grip {
		position: absolute;
		top: 0;
		inset-inline: 0;
		display: block;
		height: 22px;
		cursor: grab;
		touch-action: none;
	}

	.rs-grip::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 42px;
		height: 5px;
		border-radius: 3px;
		background: var(--rs-border-strong);
		transform: translateX(-50%);
	}

	.rs-head__icon {
		width: 40px;
		height: 40px;
	}

	.rs-close {
		order: 3;
	}

	.rs-nav {
		order: 4;
		justify-content: space-between;
		width: 100%;
	}

	.rs-nav__btn {
		flex: 1;
		min-height: 42px;
	}

	.rs-modal.has-both {
		grid-template-rows: auto auto minmax(0, 1fr);
	}

	.rs-modal.has-both .rs-tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px;
		margin: 0 16px 6px;
		padding: 4px;
		border-radius: 14px;
		background: var(--rs-surface-3);
	}

	.rs-tab {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 44px;
		border: 0;
		border-radius: 11px;
		background: transparent;
		color: var(--rs-muted);
		--text-primary: var(--rs-muted);
		font: inherit;
		font-weight: 600;
		transition: all 0.2s var(--rs-ease);
	}

	.rs-tab.is-on {
		background: var(--rs-surface);
		box-shadow: 0 1px 4px rgba(15, 23, 42, 0.14);
		color: var(--rs-text);
		--text-primary: var(--rs-text);
	}

	.rs-tab__count {
		padding: 0 7px;
		border-radius: 999px;
		background: var(--rs-surface-3);
		font-size: 0.72rem;
	}

	.rs-tab__count:empty {
		display: none;
	}

	.rs-body,
	.rs-modal:not(.has-both) .rs-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.rs-modal.has-both .rs-pane--notes {
		border: 0;
		background: var(--rs-surface);
	}

	.rs-modal.has-both[data-tab="files"] .rs-pane--notes,
	.rs-modal.has-both[data-tab="notes"] .rs-pane--files {
		display: none;
	}

	.rs-modal.has-both .rs-pane__title {
		display: none;
	}

	.rs-pane__head {
		padding: 8px 16px;
	}

	.rs-modal.has-both .rs-pane__head:not(:has(.rs-seg:not(:empty))) {
		display: none;
	}

	.rs-scroll {
		padding: 4px 16px calc(24px + env(safe-area-inset-bottom));
	}

	.rs-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	/* on touch: tap opens the viewer / the file; only delete stays on the tile */
	.rs-tile__acts {
		opacity: 1;
		transform: none;
	}

	.rs-tile__acts .rs-act:not(.is-danger) {
		display: none;
	}

	.rs-act {
		width: 36px;
		height: 36px;
	}

	.rs-tile:hover {
		transform: none;
	}

	.rs-pane__foot {
		display: none;
	}

	.rs-viewer__stage {
		padding: 0 8px;
	}

	.rs-varrow,
	.rs-hide-sm {
		display: none;
	}

	.rs-viewer__img {
		max-height: calc(100vh - 190px);
		max-height: calc(100dvh - 190px);
	}

	.rs-film {
		width: 56px;
		height: 44px;
	}

	.rs-toasts {
		bottom: calc(16px + env(safe-area-inset-bottom));
	}
}

/* ------------------------------------------------------------------ motion */

@keyframes rs-fade { from { opacity: 0; } }
@keyframes rs-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes rs-swap { from { opacity: 0.3; transform: translateX(-12px); } }
@keyframes rs-pop-in { from { opacity: 0; transform: scale(0.8); } }
@keyframes rs-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
@keyframes rs-shimmer { to { background-position: -200% 0; } }

/* خلية الجدول التي جمعت الملاحظات والمرفقات: زر واحد، والزر الثاني يبقى في الصفحة بلا ظهور */
.rs-slot--silent { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.rs-slot *,
	.rs-root,
	.rs-root *,
	.rs-root *::before,
	.rs-root *::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}