:root {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--radius: 0.6875rem; /* ~11px */
	--radius-lg: 0.75rem; /* 12px */
	--safe-bottom: 1.1rem;
	--tabbar-height: 5.55rem;
	--ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
	--duration-fast: 0.2s;
	--duration-sheet: 0.36s;
	--title-size: 2.125rem; /* 34px */
	--body-size: 1.0625rem; /* 17px */
	--caption-size: 0.8125rem; /* 13px */
	--row-icon: 2.5rem;
	--separator-inset: calc(var(--row-icon) + 0.75rem);

	/* Fallback até o phone injetar data-theme (evita tema hardcoded brigando) */
	--bg: #000000;
	--app-bg: #000000;
	--card: #1c1c1e;
	--app-secondary: #1c1c1e;
	--text: #f2f2f7;
	--phone-text-primary: #f2f2f7;
	--muted: #8e8e93;
	--phone-text-secondary: #8e8e93;
	--border: rgba(84, 84, 88, 0.65);
	--tabbar-border: rgba(84, 84, 88, 0.55);
	--separator: rgba(84, 84, 88, 0.55);
	--modal-divider: rgba(84, 84, 88, 0.35);
	--phone-color-border: rgba(84, 84, 88, 0.45);
	--blue: #0a84ff;
	--phone-color-blue: #0a84ff;
	--blue-tint: rgba(10, 132, 255, 0.2);
	--green: #30d158;
	--phone-color-green: #30d158;
	--danger: #ff453a;
	--phone-color-red: #ff453a;
	--danger-soft: rgba(255, 69, 58, 0.2);
	--danger-text: #ff6961;
	--icon-bg: #2c2c2e;
	--icon-fg: #f5f5f7;
	--tabbar-bg: rgba(28, 28, 30, 0.82);
	--tab-inactive: #8e8e93;
	--modal-bg: #1c1c1e;
	--input-bg: #2c2c2e;
	--input-focus-bg: #3a3a3c;
	--msg-bubble: #2c2c2e;
	--action-chip: rgba(120, 120, 128, 0.28);
	--overlay: rgba(0, 0, 0, 0.45);
	--section: #8e8e93;
	--on-accent: #ffffff;
	--switch-off: #39393d;
	--switch-on: #30d158;
	--phone-icon-bg: #30d158;
	--cat-emergency: #ff453a;
	--cat-restaurants: #bf5af2;
	--cat-mechanics: #ff9f0a;
	--cat-other: #0a84ff;
	color-scheme: dark;
}

html[data-theme="light"],
body[data-theme="light"],
.services-app[data-theme="light"],
#app[data-theme="light"] {
	--bg: #f2f2f7;
	--app-bg: #f2f2f7;
	--card: #ffffff;
	--app-secondary: #ffffff;
	--text: #000000;
	--phone-text-primary: #000000;
	--muted: #8e8e93;
	--phone-text-secondary: #8e8e93;
	--border: rgba(60, 60, 67, 0.18);
	--tabbar-border: rgba(60, 60, 67, 0.18);
	--separator: rgba(60, 60, 67, 0.12);
	--modal-divider: rgba(60, 60, 67, 0.14);
	--phone-color-border: rgba(60, 60, 67, 0.12);
	--blue: #007aff;
	--phone-color-blue: #007aff;
	--blue-tint: rgba(0, 122, 255, 0.12);
	--green: #34c759;
	--phone-color-green: #34c759;
	--danger: #ff3b30;
	--phone-color-red: #ff3b30;
	--danger-soft: rgba(255, 59, 48, 0.15);
	--danger-text: #d70015;
	--icon-bg: #e5e5ea;
	--icon-fg: #1c1c1e;
	--tabbar-bg: rgba(249, 249, 249, 0.82);
	--tab-inactive: #999999;
	--modal-bg: #ffffff;
	--input-bg: #f2f2f7;
	--input-focus-bg: #ebebf0;
	--msg-bubble: #f8f8f8;
	--action-chip: rgba(120, 120, 128, 0.16);
	--overlay: rgba(0, 0, 0, 0.28);
	--section: #6c6c70;
	--on-accent: #ffffff;
	--switch-off: #e9e9eb;
	--switch-on: #34c759;
	--phone-icon-bg: #34c759;
	--cat-emergency: #ff3b30;
	--cat-restaurants: #af52de;
	--cat-mechanics: #ff9f0a;
	--cat-other: #007aff;
	color-scheme: light;
}

html[data-theme="dark"],
body[data-theme="dark"],
.services-app[data-theme="dark"],
#app[data-theme="dark"],
[data-theme="dark"] {
	--bg: #000000;
	--app-bg: #000000;
	--card: #1c1c1e;
	--app-secondary: #1c1c1e;
	--text: #f2f2f7;
	--phone-text-primary: #f2f2f7;
	--muted: #8e8e93;
	--phone-text-secondary: #8e8e93;
	--border: rgba(84, 84, 88, 0.65);
	--tabbar-border: rgba(84, 84, 88, 0.55);
	--separator: rgba(84, 84, 88, 0.55);
	--modal-divider: rgba(84, 84, 88, 0.35);
	--phone-color-border: rgba(84, 84, 88, 0.45);
	--blue: #0a84ff;
	--phone-color-blue: #0a84ff;
	--blue-tint: rgba(10, 132, 255, 0.2);
	--green: #30d158;
	--phone-color-green: #30d158;
	--danger: #ff453a;
	--phone-color-red: #ff453a;
	--danger-soft: rgba(255, 69, 58, 0.2);
	--danger-text: #ff6961;
	--icon-bg: #2c2c2e;
	--icon-fg: #f5f5f7;
	--tabbar-bg: rgba(28, 28, 30, 0.82);
	--tab-inactive: #8e8e93;
	--modal-bg: #1c1c1e;
	--input-bg: #2c2c2e;
	--input-focus-bg: #3a3a3c;
	--msg-bubble: #2c2c2e;
	--action-chip: rgba(120, 120, 128, 0.28);
	--overlay: rgba(0, 0, 0, 0.45);
	--section: #8e8e93;
	--on-accent: #ffffff;
	--switch-off: #39393d;
	--switch-on: #30d158;
	--phone-icon-bg: #30d158;
	--cat-emergency: #ff453a;
	--cat-restaurants: #bf5af2;
	--cat-mechanics: #ff9f0a;
	--cat-other: #0a84ff;
	color-scheme: dark;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent !important;
}

*:focus,
*:focus-visible,
*:active {
	outline: none !important;
	outline-offset: 0 !important;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0 !important;
}

html {
	font-size: calc((1vh + 1vw) * 1.214);
}

html,
body {
	width: 100%;
	height: 100%;
	background: transparent;
	color: var(--text);
	overflow: hidden;
}

body {
	user-select: none;
	display: none;
}

button,
textarea,
input {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	outline: none;
}

button:focus,
button:focus-visible {
	outline: none;
	box-shadow: none;
}

html.in-phone {
	background: var(--bg);
}

body.in-phone {
	display: block;
	background: var(--bg);
}

#app,
.services-app {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--app-bg);
	position: relative;
	overflow: hidden;
}

/* ── Header — Large Title iOS ── */
.header {
	padding: 3.85rem 1.25rem 0.55rem;
	background: var(--app-bg);
	flex-shrink: 0;
	z-index: 2;
}

.large-title {
	font-size: var(--title-size);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.12;
	color: var(--phone-text-primary);
}

/* ── Views ── */
.views {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.view {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0.25rem 1rem calc(var(--tabbar-height) + 0.5rem);
	-webkit-overflow-scrolling: touch;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(8%, 0, 0);
	transition:
		opacity var(--duration-fast) var(--ease-ios),
		transform var(--duration-fast) var(--ease-ios),
		visibility 0s linear var(--duration-fast);
	will-change: opacity, transform;
}

.view.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
	transition:
		opacity var(--duration-fast) var(--ease-ios),
		transform var(--duration-fast) var(--ease-ios),
		visibility 0s;
	z-index: 1;
}

.view.is-exit-left {
	transform: translate3d(-8%, 0, 0);
}

.view.is-exit-right {
	transform: translate3d(12%, 0, 0);
}

.view.is-enter-left {
	transform: translate3d(-8%, 0, 0);
}

.view.is-enter-right {
	transform: translate3d(12%, 0, 0);
}

.sections {
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
}

.panel-block {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.45rem;
}

.recent-header {
	width: 100%;
	padding: 0 0.35rem;
}

.recent-header .title,
.section-title {
	color: var(--section);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	padding: 0;
}

.group {
	background: var(--card);
	border-radius: var(--radius-lg);
	overflow: hidden;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.sections:not(.history) .group {
	background: var(--card);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ── Service rows — inset separators ── */
.row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 1rem;
	min-height: 3.65rem;
	position: relative;
	border-top: none;
	transition: opacity var(--duration-fast) ease;
}

.row:not(:first-child)::before {
	content: "";
	position: absolute;
	left: var(--separator-inset);
	right: 0;
	top: 0;
	height: 1px;
	background: var(--separator);
	pointer-events: none;
}

.icon-wrap {
	width: var(--row-icon);
	height: var(--row-icon);
	min-width: var(--row-icon);
	border-radius: 50%;
	background: linear-gradient(180deg, #c7c7cc 0%, #8e8e93 100%);
	display: grid;
	place-items: center;
	flex-shrink: 0;
	color: #fff;
}

.icon-wrap svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

.icon-wrap .icon-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.group[data-category="emergency"] .icon-wrap {
	background: linear-gradient(180deg, #ff7a72 0%, #ff3b30 100%);
	color: #fff;
}

.group[data-category="restaurants"] .icon-wrap {
	background: linear-gradient(180deg, #c78ae8 0%, #af52de 100%);
	color: #fff;
}

.group[data-category="mechanics"] .icon-wrap {
	background: linear-gradient(180deg, #ffc46b 0%, #ff9f0a 100%);
	color: #fff;
}

.icon-wrap.has-image,
.group[data-category] .icon-wrap.has-image {
	background: transparent;
	box-shadow: none;
	overflow: hidden;
}

.meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
}

.meta .name {
	font-size: var(--body-size);
	font-weight: 400;
	letter-spacing: -0.022em;
	line-height: 1.25;
	color: var(--phone-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.meta .place {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	font-size: var(--caption-size);
	font-weight: 400;
	line-height: 1.2;
	color: var(--phone-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.meta .place svg {
	width: 0.85rem;
	height: 0.85rem;
	min-width: 0.85rem;
	fill: currentColor;
	opacity: 0.85;
}

.actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
	z-index: 2;
	margin-left: 0.25rem;
}

.action {
	width: 2rem;
	height: 2rem;
	min-width: 2rem;
	border: none;
	border-radius: 999px;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
	transition: transform 0.12s ease, opacity var(--duration-fast) ease, background var(--duration-fast) ease;
}

.action:active {
	transform: scale(0.92);
}

.action svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: currentColor;
}

/* Chat — chip cinza translúcido + ícone azul iOS */
.action.call {
	background: var(--action-chip);
	color: var(--phone-color-blue);
	box-shadow: none;
}

.action.call:active {
	background: color-mix(in srgb, var(--action-chip) 70%, var(--phone-color-blue) 12%);
}

.action:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

/* Disabled / Em breve — card branco, conteúdo a 40% */
.row.is-disabled {
	opacity: 1;
	pointer-events: none;
}

.row.is-disabled .icon-wrap,
.row.is-disabled .meta,
.row.is-disabled .actions {
	opacity: 0.4;
}

.status-aside {
	font-size: var(--caption-size);
	font-weight: 400;
	color: var(--phone-text-secondary);
	white-space: nowrap;
	flex-shrink: 0;
}

.badge-soon {
	font-size: var(--caption-size);
	font-weight: 400;
	color: var(--phone-text-secondary);
	background: transparent;
	border-radius: 0;
	padding: 0;
	flex-shrink: 0;
}

.row.is-unavailable:not(.is-disabled) .action.call {
	opacity: 0.4;
	pointer-events: none;
}

.row.is-available:not(.is-disabled) {
	opacity: 1;
	pointer-events: auto;
}

.panel-block.is-soon .recent-header .title {
	color: var(--section);
}

.empty {
	text-align: center;
	color: var(--phone-text-secondary);
	padding: 1.75rem 1rem;
	font-size: 0.9375rem;
	font-weight: 400;
	background: var(--card);
	border-radius: var(--radius-lg);
}

.hidden {
	display: none !important;
}

/* ── History / Chamados ── */
.history .group {
	padding: 0;
}

.history .group:not(.history-duty) .history-item {
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
}

.history .history-item .icon-wrap {
	background: linear-gradient(180deg, #5ac8fa 0%, #007aff 100%);
}

.history .history-time {
	font-size: var(--caption-size);
	font-weight: 400;
	color: var(--phone-text-secondary);
	white-space: nowrap;
	flex-shrink: 0;
}

.history .history-item .place {
	white-space: normal;
	overflow: hidden;
}

.history .history-item .place span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
	overflow: hidden;
}

.history .group.history-duty {
	padding: 0.65rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	background: transparent;
}

.history-call {
	background: var(--card);
	border-radius: var(--radius-lg);
	border: none;
	padding: 0.85rem 0.9rem 0.8rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

[data-theme="dark"] .history-call {
	background: var(--card);
}

.history-call .call-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.55rem;
}

.history-call .call-heading {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	min-width: 0;
	flex: 1;
}

.history-call .call-top > .history-time {
	flex-shrink: 0;
	margin-top: 0.15rem;
	text-align: right;
	font-size: var(--caption-size);
	color: var(--phone-text-secondary);
}

.history-call .icon-wrap {
	width: 2.5rem;
	height: 2.5rem;
	min-width: 2.5rem;
	border-radius: 0.55rem;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: linear-gradient(180deg, #5ac8fa 0%, #007aff 100%);
}

.history-call .icon-wrap.has-image {
	background: transparent;
}

.history-call .icon-wrap .icon-img,
.history-call .icon-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.history-call .icon-wrap svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: #fff;
}

.history-call .call-titles {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.history-call .call-code-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
	flex-wrap: wrap;
}

/* Badge QRU — soft, não agressivo */
.history-call .call-code {
	flex-shrink: 0;
	background: var(--danger-soft);
	color: var(--danger-text);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 0.3rem;
	padding: 0.14rem 0.38rem;
	line-height: 1.2;
	text-transform: uppercase;
}

.history-call .call-title {
	color: var(--phone-text-primary);
	font-size: var(--body-size);
	font-weight: 600;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.history-call .call-body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.history-call .call-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.65rem;
	row-gap: 0.35rem;
	align-items: baseline;
}

.history-call .call-label {
	color: var(--phone-text-secondary);
	font-size: var(--caption-size);
	font-weight: 400;
	text-transform: none;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.history-call .call-value {
	color: var(--phone-text-primary);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: -0.015em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Mensagem — balão suave, sem “input morto” */
.history-call .call-text {
	margin: 0;
	padding: 0.65rem 0.75rem;
	border-radius: 0.7rem;
	background: var(--msg-bubble);
	border: none;
	color: #3a3a3c;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.4;
	white-space: pre-wrap;
	word-break: break-word;
}

[data-theme="dark"] .history-call .call-text {
	color: #ebebf5;
}

.history-call .call-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	margin-top: 0.15rem;
	width: 100%;
}

.history-call .call-actions:has(.call-btn:only-child) {
	grid-template-columns: 1fr;
}

.history-call .call-btn {
	appearance: none;
	border: none;
	outline: none;
	border-radius: 0.7rem;
	height: 2.45rem;
	padding: 0 0.85rem;
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	letter-spacing: -0.015em;
	transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}

.history-call .call-btn.mark {
	background: var(--blue-tint);
	color: var(--phone-color-blue);
	margin-left: 0;
}

.history-call .call-btn.phone {
	margin-left: 0;
	background: var(--phone-color-blue);
	color: #fff;
}

.history-call .call-btn:active {
	transform: scale(0.98);
	filter: brightness(0.96);
}

/* ── Actions / Settings — UITableView ── */
.settings-group {
	overflow: hidden;
	padding: 0;
}

.settings-row {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 1rem;
	min-height: 4rem;
}

.settings-icon {
	width: 1.85rem;
	height: 1.85rem;
	min-width: 1.85rem;
	border-radius: 0.4rem;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.settings-icon svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: #fff;
}

.settings-icon.phone-icon {
	background: var(--phone-icon-bg);
}

.settings-meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding-right: 0.35rem;
}

.settings-title {
	font-size: var(--body-size);
	font-weight: 400;
	letter-spacing: -0.022em;
	color: var(--phone-text-primary);
	line-height: 1.25;
}

.settings-desc {
	font-size: var(--caption-size);
	font-weight: 400;
	line-height: 1.3;
	color: var(--phone-text-secondary);
}

.ios-switch {
	position: relative;
	display: inline-block;
	width: 3.15rem;
	height: 1.9rem;
	flex-shrink: 0;
	cursor: pointer;
	margin-left: auto;
}

.ios-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.ios-switch-track {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: var(--switch-off);
	transition: background 0.28s ease-in-out;
}

.ios-switch-track::before {
	content: "";
	position: absolute;
	width: 1.65rem;
	height: 1.65rem;
	left: 0.125rem;
	top: 0.125rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.12);
	transition: transform 0.28s var(--ease-ios);
}

.ios-switch input:checked + .ios-switch-track {
	background: var(--switch-on);
}

.ios-switch input:checked + .ios-switch-track::before {
	transform: translateX(1.25rem);
}

.ios-switch input:disabled + .ios-switch-track {
	opacity: 0.45;
}

/* ── Tab bar ── */
.tabbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	padding: 0.4rem 0.35rem calc(0.55rem + var(--safe-bottom));
	background: var(--tabbar-bg);
	-webkit-backdrop-filter: saturate(180%) blur(24px);
	backdrop-filter: saturate(180%) blur(24px);
	border-top: 0.5px solid var(--tabbar-border);
}

.tab {
	border: none;
	outline: none;
	background: transparent;
	color: var(--tab-inactive);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.12rem;
	font-size: 0.75rem;
	font-weight: 500;
	min-width: 4.25rem;
	cursor: pointer;
	padding: 0.15rem 0.35rem;
	transition: color 0.15s ease, transform 0.12s ease;
}

.tab:focus,
.tab:focus-visible,
.tab:active {
	outline: none;
	box-shadow: none;
}

.tab:active {
	transform: scale(0.94);
}

.tab svg,
.tab .tab-icon {
	width: 1.55rem;
	height: 1.55rem;
	min-width: 1.55rem;
	min-height: 1.55rem;
	fill: currentColor;
	transition: color 0.15s ease;
}

.tab.is-active {
	color: var(--phone-color-blue);
}

/* ── Modal / iOS alert ── */
.modal {
	position: fixed;
	inset: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	pointer-events: none;
	visibility: hidden;
}

.modal.is-open {
	pointer-events: auto;
	visibility: visible;
}

.modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.28s var(--ease-ios);
}

.modal.is-open .modal-backdrop {
	opacity: 1;
}

.modal-card {
	position: relative;
	width: 100%;
	max-width: 19.25rem;
	overflow: hidden;
	background: color-mix(in srgb, var(--modal-bg) 92%, transparent);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border-radius: 0.875rem;
	padding: 0;
	margin: 0;
	color: var(--text);
	opacity: 0;
	transform: scale(0.9);
	transition:
		opacity 0.22s var(--ease-ios),
		transform 0.22s var(--ease-ios);
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .modal-card {
	background: rgba(255, 255, 255, 0.94);
}

[data-theme="dark"] .modal-card {
	background: rgba(44, 44, 46, 0.94);
}

.modal.is-open .modal-card {
	opacity: 1;
	transform: scale(1);
}

.modal-body {
	padding: 1.35rem 1rem 0.75rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.55rem;
}

.modal-title {
	display: block;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	text-align: center;
	color: var(--text);
	margin-bottom: 0.85rem;
}

.modal-card textarea {
	width: 100%;
	min-height: 5.5rem;
	resize: none;
	border: none;
	border-radius: 0.625rem;
	padding: 0.65rem 0.75rem;
	font: inherit;
	font-size: 0.95rem;
	color: var(--text);
	background: var(--input-bg);
	outline: none;
	line-height: 1.35;
	box-shadow: none;
}

.modal-card textarea:focus,
.modal-card textarea:focus-visible {
	background: var(--input-focus-bg);
	box-shadow: none;
	outline: none;
}

.modal-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	color: var(--muted);
	font-size: var(--caption-size);
	font-weight: 400;
	min-height: 0.85rem;
}

.modal-meta #priceHint {
	min-width: 0;
	flex: 1;
	line-height: 1.25;
	transition: color 0.15s ease;
}

.modal-meta #priceHint.is-error {
	color: var(--danger);
	font-weight: 500;
}

.modal-meta #charCount {
	flex-shrink: 0;
}

.modal-footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 0.5px solid var(--modal-divider);
	min-height: 2.75rem;
}

.modal-footer.is-cooldown {
	grid-template-columns: 1fr;
}

.modal-btn {
	border: none;
	background: transparent;
	color: var(--blue);
	font-size: 1.0625rem;
	line-height: 1.2;
	padding: 0.7rem 0.5rem;
	cursor: pointer;
	transition: background 0.12s ease, opacity 0.12s ease;
}

.modal-btn:active {
	background: rgba(128, 128, 128, 0.18);
}

.modal-btn-cancel {
	font-weight: 400;
	border-right: 0.5px solid var(--modal-divider);
}

.modal-btn-send {
	font-weight: 600;
}

.modal-btn-send:disabled {
	opacity: 0.38;
	cursor: not-allowed;
	pointer-events: none;
}

.modal-footer.is-cooldown .modal-btn-cancel,
.modal-footer.is-cooldown .modal-btn-send {
	display: none;
}

.modal-btn-cooldown {
	display: none;
	width: 100%;
	color: var(--danger);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.9;
	padding: 0.75rem 0.85rem;
}

.modal-footer.is-cooldown .modal-btn-cooldown {
	display: block;
}

.modal-btn-cooldown:disabled {
	opacity: 0.9;
	color: var(--danger);
}

.modal-card .error {
	margin: 0;
	font-size: 0.82rem;
	text-align: center;
}

/* ── Success overlay ── */
.success-overlay {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding: 0;
	background: rgba(0, 0, 0, 0.16);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity 0.28s ease, visibility 0.28s ease;
}

.success-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.success-overlay.is-leaving {
	opacity: 0;
	pointer-events: none;
}

.success-sheet {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 18% 1.75rem max(1.35rem, env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
	transform: translateY(0.4rem) scale(0.985);
	opacity: 0;
	transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

.success-overlay.is-visible .success-sheet {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.success-body {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.85rem;
	padding: 0 1rem 1rem;
}

.success-icon {
	width: 5.25rem;
	height: 5.25rem;
	margin-bottom: 0.35rem;
}

.success-check-svg {
	width: 100%;
	height: 100%;
	overflow: visible;
	display: block;
}

.success-check-circle {
	fill: #ffffff;
}

[data-theme="dark"] .success-check-circle {
	fill: #0a84ff;
}

.success-check-mark {
	fill: none;
	stroke: #007aff;
	stroke-width: 5.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 72;
	stroke-dashoffset: 72;
}

[data-theme="dark"] .success-check-mark {
	stroke: #ffffff;
}

.success-overlay.is-visible .success-check-mark {
	animation: services-check-mark 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.success-title {
	color: var(--text);
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.15;
}

@keyframes services-check-mark {
	0% {
		stroke-dashoffset: 72;
		opacity: 0.35;
	}
	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

::-webkit-scrollbar {
	width: 0;
	height: 0;
}

@supports not (background: color-mix(in srgb, red 10%, blue)) {
	.action.call:active {
		background: rgba(0, 122, 255, 0.18);
	}
}