:root {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--radius-md: 0.75rem;
	--radius-lg: 1.1rem;
	--tabbar-height: 5.95rem;
	--header-height: 3.4rem;
	--input-bar-height: 5.95rem;
	/* Mesmo inset superior dos apps wallet/services ? status bar + Dynamic Island */
	--safe-top: 3.85rem;
	/* Espaço acima do home indicator iOS; tabbar e composer usam o mesmo valor */
	--safe-bottom: 1.35rem;
	--chrome-bottom-pad: 0.65rem;
	--ease-ios: cubic-bezier(0.32, 0.72, 0, 1);

	/* Fallback at? o phone injetar data-theme (evita tema hardcoded brigando) */
	--wa-green: #21bf62;
	--wa-green-dark: #1ca856;
	--wa-teal: #21bf62;
	--bg: #101010;
	--app-bg: #101010;
	--header-bg: rgba(16, 16, 16, 0.96);
	--card: #252525;
	--surface-2: #252525;
	--text: #f2f2f2;
	--text-secondary: #939192;
	--text-tertiary: #939192;
	--border: rgba(242, 242, 242, 0.1);
	--divider: rgba(242, 242, 242, 0.1);
	--badge-bg: #21bf62;
	--badge-text: #ffffff;
	--chat-bg: #101010;
	--bubble-sent: #184f34;
	--bubble-received: #252525;
	--bubble-text: #f2f2f2;
	--bubble-time: #b4b3b2;
	--bubble-media-time: #d6d5d4;
	--tick-blue: #53bdeb;
	--input-bar-bg: #1c1c1c;
	--input-field-bg: #2c2c2e;
	--tabbar-bg: rgba(37, 37, 37, 0.96);
	--tabbar-border: rgba(242, 242, 242, 0.08);
	--tab-inactive: #939192;
	--search-bg: #252525;
	--row-press: rgba(33, 191, 98, 0.1);
	--circle-btn-bg: #252525;
	--circle-btn-fg: #f2f2f2;
	--select-ring: rgba(242, 242, 242, 0.32);
	--select-row-bg: rgba(255, 255, 255, 0.05);
	--danger: #ff453a;
	--system-bubble-bg: #1c1c1c;
	--system-bubble-text: #f2f2f2;
	--system-encryption-bg: #1c1c1c;
	--system-encryption-text: #e8c96a;
	--system-temporary-bg: #1c1c1c;
	--system-temporary-text: #f2f2f2;
	--date-divider-bg: #252525;
	--skeleton-base: rgba(255, 255, 255, 0.06);
	--skeleton-shine: rgba(255, 255, 255, 0.12);
	--media-scrim: rgba(0, 0, 0, 0.55);
	--doc-icon-bg: #252525;
	--shadow-bubble: 0 1px 0.5px rgba(0, 0, 0, 0.35);
	--archived-banner-bg: #1a1a1a;
	--archived-banner-border: #2a2a2a;
	color-scheme: dark;
}

/* WhatsApp ? Light
   Base: #171717 / #5C5C5C / #FFFFFF / #F6F5F3 / #21BF62 */
html[data-theme="light"],
body[data-theme="light"],
.whatsapp-app[data-theme="light"],
#app[data-theme="light"] {
	--wa-green: #21bf62;
	--wa-green-dark: #1ca856;
	--wa-teal: #21bf62;
	/* #FFFFFF ? #F2F2F2 | #F6F5F3 ? #E9E8E7 */
	--bg: #f2f2f2;
	--app-bg: #f2f2f2;
	--header-bg: rgba(242, 242, 242, 0.96);
	--card: #f2f2f2;
	--surface-2: #e9e8e7;
	--text: #161616;
	--text-secondary: #575757;
	--text-tertiary: #575757;
	--border: rgba(22, 22, 22, 0.08);
	--divider: rgba(22, 22, 22, 0.1);
	--badge-bg: #21bf62;
	--badge-text: #ffffff;
	--chat-bg: #e9e8e7;
	--bubble-sent: #cef0c8;
	--bubble-received: #f2f2f2;
	--bubble-text: #161616;
	--bubble-time: #8a8a8a;
	--bubble-media-time: #a8a7a6;
	--tick-blue: #53bdeb;
	--input-bar-bg: #e9e8e7;
	--input-field-bg: #ffffff;
	--tabbar-bg: rgba(233, 232, 231, 0.96);
	--tabbar-border: rgba(22, 22, 22, 0.08);
	--tab-inactive: #575757;
	--search-bg: #e9e8e7;
	--row-press: rgba(33, 191, 98, 0.08);
	--circle-btn-bg: #e9e8e7;
	--circle-btn-fg: #161616;
	--select-ring: rgba(22, 22, 22, 0.28);
	--select-row-bg: rgba(22, 22, 22, 0.04);
	--danger: #ff3b30;
	--system-bubble-bg: #e0dfdc;
	--system-bubble-text: #575757;
	--system-encryption-bg: #efe6c8;
	--system-encryption-text: #846d28;
	--system-temporary-bg: #e0dfdc;
	--system-temporary-text: #575757;
	--date-divider-bg: #e0dfdc;
	--skeleton-base: rgba(22, 22, 22, 0.06);
	--skeleton-shine: rgba(22, 22, 22, 0.1);
	--media-scrim: rgba(0, 0, 0, 0.55);
	--doc-icon-bg: #e9e8e7;
	--shadow-bubble: 0 1px 0.5px rgba(0, 0, 0, 0.08);
	--archived-banner-bg: #f2f2f2;
	--archived-banner-border: #cfcecd;
	color-scheme: light;
}

/* WhatsApp ? Dark */
html[data-theme="dark"],
body[data-theme="dark"],
.whatsapp-app[data-theme="dark"],
#app[data-theme="dark"],
[data-theme="dark"] {
	--wa-green: #21bf62;
	--wa-green-dark: #1ca856;
	--wa-teal: #21bf62;
	/* Fundos um pouco mais escuros (ainda acima do preto puro) */
	--bg: #101010;
	--app-bg: #101010;
	--header-bg: rgba(16, 16, 16, 0.96);
	--card: #252525;
	--surface-2: #252525;
	--text: #f2f2f2;
	--text-secondary: #939192;
	--text-tertiary: #939192;
	--border: rgba(242, 242, 242, 0.1);
	--divider: rgba(242, 242, 242, 0.1);
	--badge-bg: #21bf62;
	--badge-text: #ffffff;
	--chat-bg: #101010;
	--bubble-sent: #184f34;
	--bubble-received: #252525;
	--bubble-text: #f2f2f2;
	--bubble-time: #b4b3b2;
	--bubble-media-time: #d6d5d4;
	--tick-blue: #53bdeb;
	--input-bar-bg: #1c1c1c;
	--input-field-bg: #2c2c2e;
	--tabbar-bg: rgba(37, 37, 37, 0.96);
	--tabbar-border: rgba(242, 242, 242, 0.08);
	--tab-inactive: #939192;
	--search-bg: #252525;
	--row-press: rgba(33, 191, 98, 0.1);
	--circle-btn-bg: #252525;
	--circle-btn-fg: #f2f2f2;
	--select-ring: rgba(242, 242, 242, 0.32);
	--select-row-bg: rgba(255, 255, 255, 0.05);
	--danger: #ff453a;
	--system-bubble-bg: #1c1c1c;
	--system-bubble-text: #f2f2f2;
	--system-encryption-bg: #1c1c1c;
	--system-encryption-text: #e8c96a;
	--system-temporary-bg: #1c1c1c;
	--system-temporary-text: #f2f2f2;
	--date-divider-bg: #252525;
	--skeleton-base: rgba(255, 255, 255, 0.06);
	--skeleton-shine: rgba(255, 255, 255, 0.12);
	--media-scrim: rgba(0, 0, 0, 0.55);
	--doc-icon-bg: #252525;
	--shadow-bubble: 0 1px 0.5px rgba(0, 0, 0, 0.35);
	--archived-banner-bg: #1a1a1a;
	--archived-banner-border: #2a2a2a;
	color-scheme: dark;
}

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

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

/* Escala tipogr?fica do lb-phone (mesmo c?lculo de wallet/services) */
html {
	font-size: calc((1vh + 1vw) * 1.214);
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	color: var(--text);
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
}

body {
	display: none;
}

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

body.in-phone {
	display: block;
}

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

.whatsapp-app,
#app {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--app-bg);
}

.screen {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: var(--app-bg);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(0);
	padding-bottom: var(--tabbar-height);
	z-index: 0;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.screen.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
	transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.screen.overlay-screen {
	padding-bottom: 0;
	/* Mant?m opacidade durante o slide ? sen?o o fechar some na hora */
	opacity: 1;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(100%);
	transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.36s;
	z-index: 4;
}

.screen.overlay-screen.is-active {
	transform: translateX(0);
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
	transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s;
}

/* Ap?s o slide: tira o transform (CEF trava camada GPU se ficar em translateX(0)). */
.screen.overlay-screen.is-active.is-settled {
	transform: none;
	transition: visibility 0s linear 0s;
}

#viewChat.overlay-screen {
	z-index: 5;
	overflow: hidden;
}

#viewSaveContact.overlay-screen {
	z-index: 46;
}

#viewPickContacts.overlay-screen,
#viewSharedContacts.overlay-screen {
	z-index: 10;
	background: var(--app-bg);
}

/* ---------- NOVO CONTATO (criar a partir do grupo/dados) ---------- */

.save-contact-screen {
	background: var(--app-bg);
}

.save-contact-header {
	flex-shrink: 0;
	display: grid;
	grid-template-columns: 2.55rem 1fr 2.55rem;
	align-items: center;
	gap: 0.55rem;
	padding: var(--safe-top) 0.85rem 0.75rem;
	background: var(--app-bg);
}

.save-contact-nav-btn {
	appearance: none;
	border: none;
	outline: none;
	width: 2.55rem;
	height: 2.55rem;
	border-radius: 999px;
	background: var(--circle-btn-bg, var(--surface-2));
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
}

.save-contact-nav-btn svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: currentColor;
}

.save-contact-nav-btn.is-confirm {
	background: var(--wa-green);
	color: #0b0b0b;
}

.save-contact-title {
	margin: 0;
	text-align: center;
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.01em;
}

.save-contact-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 0.55rem 1rem calc(1.4rem + var(--safe-bottom));
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.save-contact-card {
	background: var(--surface-2);
	border-radius: 0.95rem;
	overflow: hidden;
}

.save-contact-field {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.95rem 1rem;
	border-bottom: 1px solid var(--divider);
}

.save-contact-field:last-child {
	border-bottom: 0;
}

.save-contact-field input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 1.02rem;
	padding: 0;
}

.save-contact-field input::placeholder {
	color: var(--text-tertiary);
}

.save-contact-clear {
	appearance: none;
	border: none;
	outline: none;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 999px;
	background: rgba(127, 127, 127, 0.35);
	color: var(--app-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	transition: opacity 0.18s ease;
}

.save-contact-clear:active {
	opacity: 0.72;
}

.save-contact-clear svg {
	width: 0.72rem;
	height: 0.72rem;
	fill: currentColor;
}

.save-contact-clear.hidden {
	display: none !important;
}

.save-contact-card.is-disabled {
	pointer-events: none;
	user-select: none;
}

.save-contact-row {
	display: grid;
	grid-template-columns: 5.6rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.55rem;
	padding: 0.95rem 1rem;
	border-bottom: 1px solid var(--divider);
	color: var(--text-tertiary);
}

.save-contact-row:last-child {
	border-bottom: 0;
}

.save-contact-row.is-phone {
	align-items: start;
	grid-template-columns: 5.6rem minmax(0, 1fr);
}

.save-contact-row-label {
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--text);
}

.save-contact-card.is-disabled .save-contact-row-label {
	color: var(--text);
}

.save-contact-row-value {
	font-size: 0.98rem;
	color: var(--text-tertiary);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.save-contact-row-chevron {
	width: 0.95rem;
	height: 0.95rem;
	color: var(--text-tertiary);
	opacity: 0.75;
	display: inline-flex;
}

.save-contact-row-chevron svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.save-contact-phone-meta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 0.35rem;
	row-gap: 0.18rem;
	align-items: center;
	min-width: 0;
}

.save-contact-phone-meta .save-contact-row-value {
	grid-column: 1;
	color: var(--text-tertiary);
}

.save-contact-phone-check {
	width: 1.05rem;
	height: 1.05rem;
	color: var(--wa-green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.save-contact-phone-check svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.whatsapp-app.is-save-contact-open .tabbar {
	visibility: hidden;
	pointer-events: none;
}

/* ---------- HEADER (CHATS LIST) ---------- */

.header {
	flex-shrink: 0;
	padding: var(--safe-top) 1rem 0.6rem;
	background: var(--header-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--divider);
}

/* Lista de conversas: sem linha entre busca e Arquivadas */
#viewChats > .header.chats-header {
	border-bottom: none;
}

.header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.3rem 0.1rem 0.5rem;
}

.header-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.15rem 0.05rem 0.35rem;
	min-height: 2.35rem;
}

.chats-title-row {
	justify-content: flex-start;
	padding-top: 0.05rem;
	padding-bottom: 0.55rem;
}

.large-title {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.02rem;
	margin: 0;
	color: var(--text);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-left: auto;
}

.circle-btn {
	appearance: none;
	border: none;
	outline: none;
	width: 2.55rem;
	height: 2.55rem;
	border-radius: 999px;
	background: var(--circle-btn-bg);
	color: var(--circle-btn-fg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	transition: transform 0.12s ease, opacity 0.12s ease, background 0.15s ease;
}

.circle-btn svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: currentColor;
}

.circle-btn-primary {
	background: var(--wa-green);
	color: #ffffff;
}

.circle-btn-primary svg {
	width: 1.15rem;
	height: 1.15rem;
}

.circle-btn-camera svg {
	width: 1.35rem;
	height: 1.35rem;
}

.circle-btn-done {
	background: var(--circle-btn-bg);
	color: var(--circle-btn-fg);
}

.circle-btn:active {
	transform: scale(0.94);
	opacity: 0.9;
}

.whatsapp-app.is-selecting #btnChatsMore,
.whatsapp-app.is-selecting #chatsHeaderActions {
	display: none !important;
}

.whatsapp-app.is-selecting #btnChatsDone {
	display: inline-flex !important;
}

.icon-btn {
	appearance: none;
	border: none;
	background: transparent;
	padding: 0;
	width: 1.6rem;
	height: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wa-teal);
	cursor: pointer;
}

.icon-btn svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.icon-btn-small {
	width: 1.35rem;
	height: 1.35rem;
	color: var(--text-tertiary);
}

.search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--search-bg);
	border-radius: var(--radius-md);
	padding: 0.55rem 0.7rem;
	gap: 0.5rem;
}

.search-icon {
	width: 1.05rem;
	height: 1.05rem;
	flex-shrink: 0;
	fill: var(--text-tertiary);
}

.search-wrap input {
	flex: 1;
	border: none;
	background: transparent;
	outline: none;
	font-size: 0.95rem;
	color: var(--text);
}

.search-wrap input::placeholder {
	color: var(--text-tertiary);
}

/* ---------- CHAT LIST ---------- */

.content {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.chat-list {
	display: flex;
	flex-direction: column;
}

.empty-state {
	margin: 3rem 1.5rem 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--text-tertiary);
}

.hidden {
	display: none !important;
}

.chat-row {
	appearance: none;
	border: none;
	background: transparent;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	/* Top < bottom (como no WA); um pouco mais de altura p/ fontes maiores */
	padding: 0.48rem 1rem 0.82rem;
	text-align: left;
	cursor: pointer;
	position: relative;
	transition: padding-left 0.28s var(--ease-ios), background 0.15s ease;
}

/* Bolinha de sele??o fora do fluxo: s? fade/scale. A row desliza com uma
   ?nica propriedade (padding-left) ? movimento simples, sem "impulso". */
.chat-select {
	position: absolute;
	left: 0.85rem;
	top: 50%;
	display: inline-flex;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 999px;
	border: 1.5px solid var(--select-ring);
	box-sizing: border-box;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(-50%) scale(0.6);
	background: transparent;
	color: transparent;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.24s var(--ease-ios),
		background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chat-select svg {
	width: 0.85rem;
	height: 0.85rem;
	fill: currentColor;
	flex-shrink: 0;
}

.whatsapp-app.is-selecting .chat-select {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

.whatsapp-app.is-selecting .chat-row {
	padding-left: 3.1rem;
}

.chat-row.is-selected {
	background: var(--select-row-bg);
}

.chat-row.is-selected .chat-select {
	background: var(--wa-green);
	border-color: var(--wa-green);
	color: #ffffff;
}

.chat-row.is-open {
	background: var(--row-press);
}

.avatar {
	flex-shrink: 0;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--avatar-fg, #5c5c5c);
	background: var(--avatar-bg, #e8e8e8);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.avatar.has-photo {
	color: transparent;
	background-color: var(--surface-2);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.avatar.is-placeholder svg {
	width: 48%;
	height: 48%;
	fill: currentColor;
	display: block;
	flex-shrink: 0;
}

.avatar-wrap {
	position: relative;
	flex-shrink: 0;
	width: 3.2rem;
	height: 3.2rem;
}

.avatar-wrap .avatar {
	width: 100%;
	height: 100%;
}

.chat-header-avatar-wrap {
	width: 2.15rem;
	height: 2.15rem;
}

.temp-msg-badge {
	position: absolute;
	right: -0.18rem;
	bottom: -0.18rem;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 999px;
	background: #2a2a2a;
	border: 1.5px solid var(--app-bg);
	color: #bdbdbd;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	z-index: 1;
	pointer-events: none;
}

.chat-header-avatar-wrap .temp-msg-badge {
	width: 1.25rem;
	height: 1.25rem;
	right: -0.22rem;
	bottom: -0.2rem;
	border-color: var(--header-bg);
}

.temp-msg-badge svg {
	width: 0.82rem;
	height: 0.82rem;
	fill: currentColor;
	display: block;
}

.chat-header-avatar-wrap .temp-msg-badge svg {
	width: 0.74rem;
	height: 0.74rem;
}

.whatsapp-app[data-theme="light"] .temp-msg-badge,
#app[data-theme="light"] .temp-msg-badge {
	background: #ececec;
	color: #6a6a6a;
	border-color: var(--app-bg);
}

.chat-row-group-mark {
	position: absolute;
	right: -0.18rem;
	bottom: -0.18rem;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 999px;
	background: #2a2a2a;
	border: 1.5px solid var(--app-bg);
	color: #bdbdbd;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	z-index: 2;
	pointer-events: none;
}

.chat-row-group-mark svg {
	width: 0.82rem;
	height: 0.82rem;
	fill: currentColor;
	display: block;
}

.whatsapp-app[data-theme="light"] .chat-row-group-mark,
#app[data-theme="light"] .chat-row-group-mark {
	background: #ececec;
	color: #6a6a6a;
	border-color: var(--app-bg);
}

.avatar-sm {
	width: 2.15rem;
	height: 2.15rem;
	font-size: 0.75rem;
}

.avatar-sm.is-placeholder svg {
	width: 46%;
	height: 46%;
}

/* Tons pastel: fundo suave + ?cone da mesma fam?lia, mais escuro */
.avatar-tone-0 { --avatar-bg: #d4e4ff; --avatar-fg: #1f5fbf; }
.avatar-tone-1 { --avatar-bg: #ffd6e7; --avatar-fg: #c2185b; }
.avatar-tone-2 { --avatar-bg: #c8f0ea; --avatar-fg: #0d7377; }
.avatar-tone-3 { --avatar-bg: #f3dfd0; --avatar-fg: #8d5a3b; }
.avatar-tone-4 { --avatar-bg: #e4d4ff; --avatar-fg: #6a3cbc; }
.avatar-tone-5 { --avatar-bg: #d8f5c8; --avatar-fg: #3d8b3d; }
.avatar-tone-6 { --avatar-bg: #ffe0c2; --avatar-fg: #c45e12; }
.avatar-tone-7 { --avatar-bg: #d0f0ff; --avatar-fg: #1a7a9c; }
.avatar-tone-8 { --avatar-bg: #ffd4d4; --avatar-fg: #c62828; }
.avatar-tone-9 { --avatar-bg: #e8e0d0; --avatar-fg: #6d5c45; }

/* Compat: classes antigas mapeadas para tons novos */
.avatar-blue { --avatar-bg: #d4e4ff; --avatar-fg: #1f5fbf; }
.avatar-green { --avatar-bg: #d8f5c8; --avatar-fg: #3d8b3d; }
.avatar-orange { --avatar-bg: #ffe0c2; --avatar-fg: #c45e12; }
.avatar-purple { --avatar-bg: #e4d4ff; --avatar-fg: #6a3cbc; }
.avatar-red { --avatar-bg: #ffd4d4; --avatar-fg: #c62828; }

/* Dark: mesmas fam?lias de cor, fundo escurecido + ?cone mais vivo */
[data-theme="dark"] .avatar-tone-0 { --avatar-bg: #142640; --avatar-fg: #5b9bff; }
[data-theme="dark"] .avatar-tone-1 { --avatar-bg: #391527; --avatar-fg: #ef6a9d; }
[data-theme="dark"] .avatar-tone-2 { --avatar-bg: #0f2e2a; --avatar-fg: #3ecfb2; }
[data-theme="dark"] .avatar-tone-3 { --avatar-bg: #33251a; --avatar-fg: #d09a6e; }
[data-theme="dark"] .avatar-tone-4 { --avatar-bg: #261a3d; --avatar-fg: #a97ef0; }
[data-theme="dark"] .avatar-tone-5 { --avatar-bg: #172f14; --avatar-fg: #6fce62; }
[data-theme="dark"] .avatar-tone-6 { --avatar-bg: #38230f; --avatar-fg: #f0913e; }
[data-theme="dark"] .avatar-tone-7 { --avatar-bg: #0f2a36; --avatar-fg: #48b6dd; }
[data-theme="dark"] .avatar-tone-8 { --avatar-bg: #3a1717; --avatar-fg: #f06a6a; }
[data-theme="dark"] .avatar-tone-9 { --avatar-bg: #2b2519; --avatar-fg: #b7a382; }

[data-theme="dark"] .avatar-blue { --avatar-bg: #142640; --avatar-fg: #5b9bff; }
[data-theme="dark"] .avatar-green { --avatar-bg: #172f14; --avatar-fg: #6fce62; }
[data-theme="dark"] .avatar-orange { --avatar-bg: #38230f; --avatar-fg: #f0913e; }
[data-theme="dark"] .avatar-purple { --avatar-bg: #261a3d; --avatar-fg: #a97ef0; }
[data-theme="dark"] .avatar-red { --avatar-bg: #3a1717; --avatar-fg: #f06a6a; }

.chat-row-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.16rem;
	padding-right: 0.35rem;
	/* Empurra o bloco de texto levemente pra cima dentro da row */
	padding-top: 0.02rem;
	padding-bottom: 0.1rem;
}

.chat-row-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.45rem;
	min-width: 0;
}

.chat-row-name {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
	min-width: 0;
	flex: 1;
}

.chat-row-peer-number {
	flex-shrink: 0;
	font-size: 0.84rem;
	font-weight: 500;
	color: var(--text-tertiary);
	white-space: nowrap;
	line-height: 1.2;
	max-width: 42%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-row-peer-number.hidden {
	display: none;
}

.chat-row-meta {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 0.16rem;
	min-width: 2.4rem;
	padding-top: 0.02rem;
	padding-bottom: 0.1rem;
}

.chat-row-time {
	font-size: 0.88rem;
	color: var(--text-tertiary);
	line-height: 1.2;
	white-space: nowrap;
}

.chat-row.has-unread .chat-row-time {
	color: var(--wa-green);
	font-weight: 600;
}

.chat-row-meta-bottom {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35rem;
	min-height: 1.05rem;
}

.chat-row-pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2rem;
	height: 1.2rem;
	color: var(--text-tertiary);
	flex-shrink: 0;
	opacity: 0.95;
}

.chat-row-pin.hidden {
	display: none !important;
}

.chat-row-pin svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.chat-row-pin svg,
.swipe-action-pin svg {
	fill: currentColor;
}

.swipe-action-pin svg {
	width: 1.5rem;
	height: 1.5rem;
	overflow: visible;
}

.swipe-action-pin .pin-slash {
	fill: currentColor;
}

.swipe-action-pin .icon-unpin {
	display: none;
}

.chat-swipe.is-pinned .swipe-action-pin .icon-pin {
	display: none;
}

.chat-swipe.is-pinned .swipe-action-pin .icon-unpin {
	display: block;
}

.chat-row-bottom {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	min-width: 0;
}

.chat-row-preview-name {
	font-size: 0.94rem;
	color: var(--text-secondary);
	font-weight: 600;
	flex-shrink: 0;
}

.chat-row-preview-name.is-draft {
	color: var(--wa-green);
	font-weight: 600;
}

.chat-row.has-draft [data-role='tick'] {
	display: none !important;
}

.chat-row-preview {
	font-size: 0.94rem;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

.chat-row-preview.is-location-preview {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	max-width: 100%;
	vertical-align: bottom;
}

.chat-row-preview-location {
	flex-shrink: 0;
	width: 0.95rem;
	height: 0.95rem;
	display: inline-grid;
	place-items: center;
	color: var(--text-secondary);
}

.chat-row-preview-location svg {
	width: 0.85rem;
	height: 0.85rem;
	fill: currentColor;
}

.chat-row-preview-location-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat-row-badge {
	--badge-size: 1.1rem;
	flex-shrink: 0;
	width: auto;
	height: var(--badge-size);
	min-width: var(--badge-size);
	border-radius: 999px;
	background: var(--badge-bg);
	color: #000000;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: var(--badge-size);
	display: inline-grid;
	place-items: center;
	padding: 0 0.22rem;
	box-sizing: border-box;
	white-space: nowrap;
	text-align: center;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.chat-row-badge.is-dot {
	width: var(--badge-size);
	height: var(--badge-size);
	min-width: var(--badge-size);
	padding: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
}

.chat-row-badge.hidden {
	display: none !important;
}

.tick {
	width: 1.08rem;
	height: 0.76rem;
	flex-shrink: 0;
	fill: none;
	stroke: var(--text-tertiary);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tick-pending {
	width: 0.78rem;
	height: 0.78rem;
	color: var(--text-tertiary);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.55;
	stroke-linecap: round;
	stroke-linejoin: round;
	overflow: visible;
}

.tick-read {
	stroke: var(--tick-blue);
}

/* ---------- 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.45rem 0.35rem calc(var(--chrome-bottom-pad) + var(--safe-bottom));
	height: var(--tabbar-height);
	box-sizing: border-box;
	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);
	transition: opacity 0.18s ease, visibility 0.18s ease;
}

.whatsapp-app.is-chat-open .tabbar {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.whatsapp-app.is-selecting .tabbar {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.select-actionbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.35rem;
	padding: 0.85rem 1.15rem calc(var(--chrome-bottom-pad) + var(--safe-bottom));
	min-height: var(--tabbar-height);
	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);
	box-sizing: border-box;
}

.select-actionbar.hidden {
	display: none !important;
}

.select-action {
	appearance: none;
	border: none;
	outline: none;
	background: transparent;
	color: var(--wa-teal);
	font-size: 0.95rem;
	font-weight: 500;
	padding: 0.35rem 0.2rem;
	cursor: pointer;
	flex: 1;
	text-align: center;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.select-action:first-child {
	text-align: left;
}

.select-action:last-child {
	text-align: right;
}

.select-action.is-danger {
	color: var(--danger);
}

.select-action:disabled {
	color: var(--text-tertiary);
	cursor: default;
	opacity: 1;
}

.select-action.is-danger:disabled {
	color: var(--text-tertiary);
}

.whatsapp-app.is-chat-open .select-actionbar {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.tab {
	appearance: none;
	border: none;
	outline: none;
	background: transparent;
	color: var(--tab-inactive);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.14rem;
	font-size: 0.82rem;
	font-weight: 500;
	min-width: 0;
	flex: 1;
	cursor: pointer;
	padding: 0.15rem 0.2rem;
	transition: color 0.15s ease, transform 0.12s ease;
	position: relative;
	overflow: visible;
}

.tab-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.tab-badge {
	position: absolute;
	top: -0.35rem;
	right: -0.7rem;
	z-index: 2;
	min-width: 1.1rem;
	height: 1.1rem;
	border-radius: 999px;
	background: var(--badge-bg);
	color: var(--badge-text);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.3rem;
	box-sizing: border-box;
	white-space: nowrap;
	pointer-events: none;
	overflow: visible;
	box-shadow: 0 0 0 0.12rem var(--tabbar-bg);
}

.tab-badge.hidden {
	display: none !important;
}

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

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

.tab > span:not(.tab-icon-wrap) {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

.tab.is-active {
	color: var(--wa-teal);
}

/* ---------- PERFIL (VOC?) ---------- */

.profile-content {
	padding: 0.4rem 0 1.25rem;
}

#viewYou.has-profile-draft .profile-content {
	padding-bottom: 4.75rem;
}

.profile-save-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--tabbar-height);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.65rem 1rem calc(0.65rem + var(--safe-bottom));
	background: var(--input-bar-bg);
	border-top: 1px solid var(--divider);
	box-shadow: 0 -0.35rem 1rem rgba(0, 0, 0, 0.08);
}

.profile-save-bar.hidden {
	display: none !important;
}

.profile-save-discard,
.profile-save-commit,
.blocked-save-discard,
.blocked-save-commit {
	appearance: none;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 0.92rem;
	font-weight: 620;
	padding: 0.55rem 1.15rem;
	cursor: pointer;
}

.profile-save-discard,
.blocked-save-discard {
	background: transparent;
	color: var(--text-secondary);
}

.profile-save-commit,
.blocked-save-commit {
	margin-left: auto;
	background: var(--wa-green, #21bf62);
	color: #111111;
}

.profile-save-commit:disabled,
.blocked-save-commit:disabled {
	opacity: 0.55;
	cursor: default;
}

.blocked-save-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.65rem 1rem calc(0.65rem + var(--safe-bottom));
	background: var(--input-bar-bg);
	border-top: 1px solid var(--divider);
	box-shadow: 0 -0.35rem 1rem rgba(0, 0, 0, 0.08);
}

.blocked-save-bar.hidden {
	display: none !important;
}

#viewBlockedContacts.has-blocked-draft .blocked-contacts-content {
	padding-bottom: 4.75rem;
}

.profile-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	padding: 1.15rem 1rem 1.35rem;
}

.avatar-profile {
	width: 7.4rem;
	height: 7.4rem;
	font-size: 2.2rem;
	flex-shrink: 0;
	border-radius: 50%;
}

.avatar-profile.is-placeholder svg {
	width: 42%;
	height: 42%;
}

.profile-edit-photo {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--wa-teal);
	font-size: 0.98rem;
	font-weight: 560;
	padding: 0.15rem 0.5rem;
	cursor: pointer;
}

.profile-edit-photo:active {
	opacity: 0.7;
}

.profile-settings {
	margin: 0.35rem 1rem 0;
	background: var(--card);
	border-radius: 0.95rem;
	overflow: visible;
	position: relative;
	z-index: 1;
}

.profile-settings > .profile-setting-row:first-child {
	border-top-left-radius: 0.95rem;
	border-top-right-radius: 0.95rem;
}

.profile-settings > .profile-setting-row:last-child {
	border-bottom-left-radius: 0.95rem;
	border-bottom-right-radius: 0.95rem;
}

.profile-section-label {
	margin: 1.15rem 1.15rem 0.4rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.profile-section-hint {
	margin: 0.45rem 1.15rem 0;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--text-tertiary);
}

.profile-setting-row {
	appearance: none;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.65rem;
	padding: 0.92rem 0.95rem;
	border: 0;
	border-bottom: 1px solid var(--divider);
	background: transparent;
	color: var(--text);
	text-align: left;
	font: inherit;
	cursor: pointer;
}

.profile-switch {
	width: 2.85rem;
	height: 1.7rem;
	border-radius: 999px;
	background: rgba(120, 120, 128, 0.36);
	position: relative;
	flex-shrink: 0;
	transition: background 0.18s ease;
}

.profile-switch-knob {
	position: absolute;
	top: 0.18rem;
	left: 0.18rem;
	width: 1.34rem;
	height: 1.34rem;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	transition: transform 0.18s ease;
}

.profile-toggle-row.is-on .profile-switch {
	background: var(--wa-green);
}

.profile-toggle-row.is-on .profile-switch-knob {
	transform: translateX(1.15rem);
}

.profile-setting-row:last-child {
	border-bottom: 0;
}

.profile-setting-row:not(.is-static):active {
	background: var(--row-press);
}

.profile-setting-row.is-static {
	cursor: default;
}

.profile-setting-label {
	font-size: 0.98rem;
	font-weight: 500;
	color: var(--text);
	white-space: nowrap;
}

.profile-setting-value {
	min-width: 0;
	justify-self: end;
	font-size: 0.95rem;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
}

.profile-setting-value.is-muted {
	color: var(--text-tertiary);
}

.profile-setting-value.is-accent {
	color: var(--wa-teal);
}

.profile-setting-chevron {
	width: 0.95rem;
	height: 0.95rem;
	display: inline-flex;
	color: var(--text-tertiary);
	opacity: 0.7;
}

.profile-setting-chevron svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.blocked-contacts-screen {
	background: var(--app-bg);
	z-index: 42;
}

.blocked-contacts-header {
	flex-shrink: 0;
	display: grid;
	grid-template-columns: 2.6rem 1fr auto;
	align-items: center;
	gap: 0.35rem;
	min-height: calc(var(--safe-top) + 3rem);
	padding: calc(var(--safe-top) + 0.35rem) 0.85rem 0.55rem;
	background: var(--app-bg);
}

.blocked-contacts-back {
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 50%;
	background: var(--card);
	color: var(--text);
	display: grid;
	place-items: center;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.blocked-contacts-back svg {
	width: 1.35rem;
	height: 1.35rem;
	fill: currentColor;
}

.blocked-contacts-title {
	margin: 0;
	text-align: center;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
}

.blocked-contacts-edit,
.blocked-contacts-done {
	appearance: none;
	border: 0;
	min-height: 2.1rem;
	padding: 0 0.85rem;
	border-radius: 999px;
	background: var(--card);
	color: var(--text);
	font: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	justify-self: end;
}

.blocked-contacts-edit:disabled,
.blocked-contacts-edit.is-disabled {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

.blocked-contacts-done {
	width: 2.35rem;
	height: 2.35rem;
	padding: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
}

.blocked-contacts-done svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

.blocked-contacts-content {
	padding: 0.35rem 1rem 1.25rem;
}

.blocked-contacts-card {
	margin: 0.2rem 0 0;
	background: var(--card);
	border-radius: 0.95rem;
	overflow: hidden;
	min-height: 4rem;
}

.blocked-contacts-list:empty {
	display: none;
}

.blocked-contacts-row {
	appearance: none;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.95rem;
	padding-left: 0.95rem;
	border: 0;
	border-bottom: 1px solid var(--divider);
	background: transparent;
	color: var(--text);
	text-align: left;
	font: inherit;
	cursor: pointer;
	position: relative;
	transition: padding-left 0.28s var(--ease-ios, cubic-bezier(0.22, 1, 0.36, 1)), background 0.15s ease;
}

.blocked-contacts-row:last-child {
	border-bottom: 0;
}

.blocked-contacts-row:active {
	background: var(--row-press);
}

.blocked-contacts-remove {
	appearance: none;
	border: 0;
	width: 1.45rem;
	height: 1.45rem;
	border-radius: 50%;
	background: #ff3b30;
	color: #fff;
	display: grid;
	place-items: center;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	position: absolute;
	left: 0.95rem;
	top: 50%;
	opacity: 0;
	transform: translateY(-50%) scale(0.6);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.24s var(--ease-ios, cubic-bezier(0.22, 1, 0.36, 1));
}

.blocked-contacts-screen.is-editing .blocked-contacts-remove {
	opacity: 1;
	transform: translateY(-50%) scale(1);
	pointer-events: auto;
}

.blocked-contacts-screen.is-editing .blocked-contacts-row {
	padding-left: 2.85rem;
}

.blocked-contacts-remove svg {
	width: 0.85rem;
	height: 0.85rem;
	fill: currentColor;
}

.blocked-contacts-avatar {
	width: 2.7rem;
	height: 2.7rem;
	border-radius: 50%;
	flex-shrink: 0;
}

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

.blocked-contacts-name {
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.blocked-contacts-sub {
	font-size: 0.82rem;
	color: var(--text-tertiary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.blocked-contacts-chevron {
	width: 0.9rem;
	height: 0.9rem;
	color: var(--text-tertiary);
	opacity: 0.7;
}

.blocked-contacts-screen.is-editing .blocked-contacts-chevron {
	display: none;
}

.blocked-contacts-chevron svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.blocked-contacts-empty {
	margin: 0;
	padding: 1.35rem 1rem;
	text-align: center;
	font-size: 0.92rem;
	color: var(--text-tertiary);
}

.profile-edit-screen {
	background: var(--app-bg);
	z-index: 40;
}


.profile-edit-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	min-height: calc(var(--safe-top) + 3rem);
	padding: var(--safe-top) 0.65rem 0.55rem;
	background: var(--header-bg);
	border-bottom: 1px solid var(--divider);
}

.profile-edit-title {
	flex: 1;
	margin: 0;
	font-size: 1.05rem;
	font-weight: 650;
	text-align: center;
	color: var(--text);
}

.profile-edit-save {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--wa-teal);
	font-size: 0.98rem;
	font-weight: 620;
	padding: 0.45rem 0.55rem;
	cursor: pointer;
}

.profile-edit-save:disabled {
	opacity: 0.45;
	cursor: default;
}

.profile-edit-content {
	padding: 1.1rem 1rem;
}

.profile-edit-field {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.profile-edit-hint {
	font-size: 0.82rem;
	color: var(--text-secondary);
	line-height: 1.35;
}

.profile-edit-input,
.profile-edit-textarea {
	width: 100%;
	box-sizing: border-box;
	border: 0;
	border-radius: 0.75rem;
	background: var(--card);
	color: var(--text);
	font: inherit;
	font-size: 1rem;
	padding: 0.9rem 0.95rem;
	outline: none;
	resize: none;
}

.profile-edit-textarea {
	min-height: 7rem;
	line-height: 1.4;
}

.profile-toggle-screen {
	background: var(--app-bg);
	z-index: 40;
}

.profile-toggle-header {
	flex-shrink: 0;
	display: grid;
	grid-template-columns: 2.6rem 1fr 2.6rem;
	align-items: center;
	gap: 0.35rem;
	min-height: calc(var(--safe-top) + 3rem);
	padding: calc(var(--safe-top) + 0.35rem) 0.85rem 0.55rem;
	background: var(--app-bg);
}

.profile-toggle-title {
	margin: 0;
	text-align: center;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
}

.profile-toggle-spacer {
	width: 2.35rem;
	height: 2.35rem;
	justify-self: end;
}

.profile-toggle-content {
	padding: 1.15rem 1rem 1.25rem;
}

.profile-toggle-card {
	background: var(--card);
	border-radius: 0.95rem;
	overflow: hidden;
}

.profile-toggle-row {
	appearance: none;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem;
	padding: 0.92rem 0.95rem;
	border: 0;
	background: transparent;
	color: var(--text);
	text-align: left;
	font: inherit;
	cursor: pointer;
}

.profile-toggle-row:active {
	background: var(--row-press);
}

.profile-toggle-label {
	flex: 1;
	min-width: 0;
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--text);
}

.profile-toggle-description {
	margin: 0.75rem 0.35rem 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--text-tertiary);
}

/* Autor em bolhas de grupo (n?mero n?o salvo + nome de perfil) */
.bubble-author {
	appearance: none;
	border: none;
	background: transparent;
	padding: 0;
	width: 100%;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.55rem;
	margin: 0 0 0.18rem;
	min-width: 0;
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.bubble-author-name {
	min-width: 0;
	font-size: 0.88rem;
	font-weight: 650;
	line-height: 1.2;
	color: #e8916a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bubble-author-phone {
	flex-shrink: 0;
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--bubble-time);
	opacity: 0.95;
	white-space: nowrap;
}

.bubble-row.received .bubble.has-author {
	min-width: 11rem;
}

/* ---------- INDIVIDUAL CHAT ---------- */

.chat-header {
	flex-shrink: 0;
	min-height: calc(var(--safe-top) + var(--header-height) - 1.2rem);
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: var(--safe-top) 0.6rem 0.55rem 0.2rem;
	background: var(--header-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--divider);
}

.nav-back {
	appearance: none;
	border: none;
	background: transparent;
	display: flex;
	align-items: center;
	color: var(--wa-teal);
	cursor: pointer;
	padding: 0.3rem;
	position: relative;
}

.nav-back svg {
	width: 1.7rem;
	height: 1.7rem;
	fill: currentColor;
}

.chat-back-badge {
	position: absolute;
	top: 0.05rem;
	right: -0.25rem;
	min-width: 1.2rem;
	height: 1.05rem;
	border-radius: 999px;
	background: var(--badge-bg);
	color: #fff;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.28rem;
	box-sizing: border-box;
	white-space: nowrap;
}

.chat-header-identity {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
	cursor: pointer;
}

.chat-header-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.15;
}

.chat-header-name {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-header-status {
	font-size: 0.8rem;
	color: var(--text-tertiary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-header-actions {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.chat-header-actions .icon-btn svg {
	width: 1.3rem;
	height: 1.3rem;
}

.chat-body {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	background: var(--chat-bg);
}

.chat-scroll {
	height: 100%;
	overflow-y: auto;
	overflow-anchor: none;
	overscroll-behavior: contain;
	padding: 0.8rem 0.6rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
}

.chat-scroll.is-loading-older {
	overscroll-behavior: none;
}

.chat-older-loading {
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	max-width: 100%;
	padding: 0.42rem 0.75rem;
	margin-bottom: 0.15rem;
	border-radius: var(--radius-md);
	background: var(--system-bubble-bg);
	color: var(--text-secondary);
	font-size: 0.72rem;
	line-height: 1.3;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	z-index: 2;
}

.chat-older-loading.hidden {
	display: none !important;
}

.chat-older-loading-spinner {
	width: 0.85rem;
	height: 0.85rem;
	border: 2px solid rgba(127, 127, 127, 0.25);
	border-top-color: var(--wa-teal);
	border-radius: 50%;
	animation: chat-older-spin 0.75s linear infinite;
	flex-shrink: 0;
}

@keyframes chat-older-spin {
	to { transform: rotate(360deg); }
}

.system-bubble {
	align-self: center;
	max-width: 85%;
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	background: var(--system-bubble-bg);
	color: var(--system-bubble-text);
	font-size: 0.8rem;
	line-height: 1.35;
	padding: 0.5rem 0.7rem;
	border-radius: var(--radius-md);
	margin-bottom: 0.4rem;
	text-align: center;
}

.system-bubble.is-encryption {
	background: var(--system-encryption-bg);
	color: var(--system-encryption-text);
}

.system-bubble.is-temporary {
	background: var(--system-temporary-bg);
	color: var(--system-temporary-text);
}

.system-bubble svg {
	width: 0.9rem;
	height: 0.9rem;
	fill: currentColor;
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.system-message-row {
	justify-content: center;
}

.system-message-row .system-bubble {
	margin-bottom: 0.4rem;
}

.date-divider {
	align-self: center;
	margin-bottom: 0.3rem;
}

.date-divider span {
	background: var(--date-divider-bg);
	color: var(--text-secondary);
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.3rem 0.7rem;
	border-radius: var(--radius-md);
}

.bubble-row {
	display: flex;
	width: 100%;
}

.bubble-row.sent {
	justify-content: flex-end;
}

.bubble-row.received {
	justify-content: flex-start;
}

.bubble {
	position: relative;
	max-width: 78%;
	padding: 0.35rem 0.5rem 0.28rem 0.55rem;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-bubble);
}

.bubble-row.sent .bubble {
	background: var(--bubble-sent);
	border-top-right-radius: 0.2rem;
}

.bubble-row.received .bubble {
	background: var(--bubble-received);
	border-top-left-radius: 0.2rem;
}

/* Hora na mesma linha do texto (como no WhatsApp): reserva s? ? direita,
   sem padding-bottom ? sen?o parece um Enter no fim da mensagem.
   --bubble-meta-w ? medido no JS conforme Editada / estrela / hora / ticks. */
.bubble p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.25;
	color: var(--bubble-text);
	white-space: pre-wrap;
	word-break: break-word;
	padding-right: var(--bubble-meta-w, 2.95rem);
	padding-bottom: 0;
}

.bubble-time {
	position: absolute;
	right: 0.48rem;
	bottom: 0.18rem;
	display: inline-flex;
	align-items: flex-end;
	gap: 0.12rem;
	font-size: 0.72rem;
	line-height: 1;
	color: var(--bubble-time);
	white-space: nowrap;
}

.bubble-time .tick {
	width: 0.82rem;
	height: 0.58rem;
	margin-left: 0.08rem;
	flex-shrink: 0;
	stroke: currentColor;
}

.bubble-time .tick-pending {
	width: 0.72rem;
	height: 0.72rem;
	margin-left: 0.08rem;
	color: currentColor;
	stroke: currentColor;
	stroke-width: 1.55;
	overflow: visible;
}

.bubble-time .tick-read {
	stroke: var(--tick-blue);
}

/* ---------- CHAT INPUT BAR ---------- */

.chat-input-bar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.6rem calc(var(--chrome-bottom-pad) + var(--safe-bottom));
	background: var(--input-bar-bg);
	border-top: 1px solid var(--divider);
}

.chat-input-bar > .icon-btn {
	width: 1.55rem;
	height: 1.55rem;
	color: var(--text-tertiary);
	flex-shrink: 0;
}

.chat-input-field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--input-field-bg);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 1.45rem;
	padding: 0.48rem 0.55rem 0.48rem 0.95rem;
	min-height: 2.45rem;
	min-width: 0;
	box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.04);
}

.chat-input-field input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-size: 0.98rem;
	line-height: 1.25;
	color: var(--text);
}

.chat-input-field input::placeholder {
	color: var(--text-tertiary);
}

.send-btn {
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: var(--wa-green);
	color: #ffffff;
	flex-shrink: 0;
	transition: transform 0.15s var(--ease-ios);
}

.send-btn:active {
	transform: scale(0.9);
}

.send-btn svg {
	width: 1.05rem;
	height: 1.05rem;
}

.send-btn .icon-send,
.chat-input-bar.is-typing .send-btn .icon-mic {
	display: none;
}

.chat-input-bar.is-typing .send-btn .icon-send {
	display: block;
}

.bubble-row.is-new {
	animation: bubble-in 0.22s var(--ease-ios);
}

@keyframes bubble-in {
	from {
		opacity: 0;
		transform: translateY(0.5rem) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ==========================================================================
   SKELETON LOADERS (estado de carregamento antes do JS popular os templates)
   ========================================================================== */

.skeleton {
	position: relative;
	background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 37%, var(--skeleton-base) 63%);
	background-size: 400% 100%;
	animation: skeleton-pulse 1.4s ease-in-out infinite;
	color: transparent !important;
	overflow: hidden;
}

.skeleton-text {
	display: inline-block;
	height: 0.85rem;
	border-radius: 0.3rem;
}

.skeleton-circle {
	border-radius: 50%;
}

@keyframes skeleton-pulse {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.skeleton {
		animation: none;
	}
}

.chat-row-skeleton,
.bubble-row-skeleton {
	pointer-events: none;
}

.chat-row-skeleton {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.6rem 1rem;
}

.chat-row-skeleton .chat-row-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.chat-row-skeleton .chat-row-top,
.chat-row-skeleton .chat-row-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

/* ==========================================================================
   BOLHAS DE M?DIA (templates #msg-image / #msg-video / #msg-audio /
   #msg-document / #msg-location) ? mesma linguagem visual das .bubble
   j? existentes (sent/received), s? adiciona a ?rea de m?dia.
   ========================================================================== */

.bubble-media {
	padding: 0.3rem 0.3rem 0.35rem;
	min-width: 10rem;
}

.bubble-media:not(.is-media-only) {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.bubble-media:not(.is-media-only) .bubble-time {
	bottom: 0.35rem;
	margin-bottom: 0;
}

:is(.bubble-media, .bubble-audio, .bubble-document, .bubble-location, .bubble-contact) .bubble-time {
	color: var(--bubble-media-time);
}

:is(.bubble-media, .bubble-audio, .bubble-document, .bubble-location, .bubble-contact) .bubble-time .bubble-edited {
	color: inherit;
}

:is(.bubble-media, .bubble-audio, .bubble-document, .bubble-location, .bubble-contact) .bubble-time .bubble-star {
	fill: currentColor;
}

/* Foto/v?deo sem legenda: hor?rio + ticks sobre a m?dia (estilo WhatsApp). */
.bubble-media.is-media-only {
	position: relative;
	padding: 0.22rem 0.22rem 0.32rem;
}

.bubble-media.is-media-only .bubble-media-frame::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2.4rem;
	border-radius: 0 0 0.55rem 0.55rem;
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.38) 100%);
	pointer-events: none;
	z-index: 1;
}

.bubble-media.is-media-only .bubble-time {
	position: absolute;
	right: 0.42rem;
	bottom: 0.52rem;
	z-index: 2;
	margin: 0 0 0.06rem;
	color: rgba(255, 255, 255, 0.94);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.bubble-media.is-media-only .bubble-time .tick {
	stroke: rgba(255, 255, 255, 0.94);
}

.bubble-media.is-media-only .bubble-time .tick-read {
	stroke: #8fd4ff;
}

.bubble-media.is-media-only .bubble-time .bubble-star {
	fill: rgba(255, 255, 255, 0.94);
}

.bubble-media.is-media-only .bubble-time .bubble-edited {
	color: rgba(255, 255, 255, 0.82);
}

.bubble-media-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 0.55rem;
	overflow: hidden;
	background: var(--skeleton-base);
}

.bubble-media-expand {
	position: absolute;
	top: 0.45rem;
	right: 0.45rem;
	z-index: 3;
	width: 1.85rem;
	height: 1.85rem;
	border: none;
	border-radius: 999px;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
	color: #fff;
	background: rgba(0, 0, 0, 0.42);
	transition: transform 0.12s ease, filter 0.12s ease;
}

.bubble-media-expand:active {
	transform: scale(0.94);
	filter: brightness(0.95);
}

.bubble-media-expand svg {
	width: 0.92rem;
	height: 0.92rem;
	fill: currentColor;
	display: block;
}

.bubble-media-frame.skeleton .bubble-media-expand {
	opacity: 0;
	pointer-events: none;
}

.bubble-media-asset {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bubble-media-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(10px);
	transform: scale(1.06);
	opacity: 0;
	transition: opacity 0.18s ease;
	pointer-events: none;
}

.bubble-media-frame.has-poster .bubble-media-poster[src] {
	opacity: 1;
}

.bubble-media-frame.has-poster:not(.is-video-loaded)::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.08), transparent 55%),
		linear-gradient(145deg, rgba(18, 30, 24, 0.96), rgba(8, 12, 10, 0.98));
	z-index: 0;
}

.bubble-media-frame.is-video-idle .bubble-media-asset {
	visibility: hidden;
	pointer-events: none;
}

.bubble-media-frame.is-playing .bubble-media-poster {
	display: none;
}

.bubble-media-frame.is-playing .bubble-media-asset {
	visibility: visible;
}

.bubble-media-frame.is-playing .bubble-play {
	opacity: 0;
	pointer-events: none;
}

.bubble-row.is-video-pending .bubble-media-frame {
	opacity: 0.85;
}

.bubble-row.is-video-pending .bubble-play::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2.2rem;
	height: 2.2rem;
	margin: -1.1rem 0 0 -1.1rem;
	border-radius: 999px;
	border: 2px solid rgba(255, 255, 255, 0.28);
	border-top-color: rgba(255, 255, 255, 0.95);
	animation: wa-video-pending-spin 0.75s linear infinite;
}

.bubble-row.is-video-pending .bubble-play svg {
	opacity: 0.35;
}

@keyframes wa-video-pending-spin {
	to { transform: rotate(360deg); }
}

.bubble-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	cursor: pointer;
	border: 0;
	padding: 0;
	background: transparent;
	z-index: 2;
}

.bubble-play svg {
	width: 2.6rem;
	height: 2.6rem;
	fill: rgba(255, 255, 255, 0.92);
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.bubble-duration {
	position: absolute;
	right: 0.4rem;
	bottom: 0.4rem;
	background: var(--media-scrim);
	color: #fff;
	font-size: 0.74rem;
	padding: 0.1rem 0.4rem;
	border-radius: 0.3rem;
}

.bubble-caption {
	margin: 0 0.15rem 0;
	font-size: 0.96rem;
	line-height: 1.25;
	color: var(--bubble-text);
	padding-right: var(--bubble-meta-w, 2.95rem);
	padding-bottom: 0;
}

.bubble-audio {
	display: grid;
	grid-template-columns: 2.7rem 1.55rem minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 0.4rem;
	row-gap: 0.12rem;
	align-items: center;
	min-width: 14.5rem;
	max-width: 17.5rem;
	padding: 0.4rem 0.55rem 0.35rem 0.4rem !important;
	position: relative;
}

.bubble-audio-avatar-wrap {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	flex-shrink: 0;
	width: 2.7rem;
	height: 2.7rem;
	align-self: center;
}

.bubble-audio-avatar-wrap .avatar {
	width: 2.7rem;
	height: 2.7rem;
	transition: opacity 0.14s ease;
}

.bubble-audio-mic {
	position: absolute;
	right: -0.1rem;
	bottom: -0.05rem;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: #8696a0;
	color: #ffffff;
	display: grid;
	place-items: center;
	box-shadow: 0 0 0 0.12rem var(--bubble-sent);
	transition: opacity 0.14s ease;
	z-index: 1;
}

.bubble-row.received .bubble-audio-mic {
	box-shadow: 0 0 0 0.12rem var(--bubble-received);
	background: #8696a0;
}

.bubble-audio-mic svg {
	width: 0.62rem;
	height: 0.62rem;
	fill: currentColor;
}

/* Velocidade: mesmo slot do avatar, s? aparece ao reproduzir */
.bubble-audio-speed {
	appearance: none;
	border: none;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2.35rem;
	height: 1.35rem;
	margin: 0;
	padding: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.48);
	color: rgba(255, 255, 255, 0.96);
	font-size: 0.62rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
	z-index: 2;
	transition: opacity 0.14s ease, background 0.15s ease;
}

.bubble-audio-speed:active {
	background: rgba(0, 0, 0, 0.58);
}

.bubble-row.received .bubble-audio-speed {
	background: rgba(0, 0, 0, 0.18);
	color: rgba(17, 27, 33, 0.82);
}

[data-theme="dark"] .bubble-row.received .bubble-audio-speed {
	background: rgba(0, 0, 0, 0.42);
	color: rgba(233, 237, 229, 0.92);
}

.bubble-row.is-audio-active .bubble-audio-avatar-wrap .avatar,
.bubble-row.is-audio-active .bubble-audio-mic {
	opacity: 0;
	pointer-events: none;
}

.bubble-row.is-audio-active .bubble-audio-speed {
	opacity: 1;
	pointer-events: auto;
}

.bubble-audio-play {
	grid-column: 2;
	grid-row: 1;
	appearance: none;
	border: none;
	flex-shrink: 0;
	width: 1.55rem;
	height: 1.55rem;
	border-radius: 0;
	background: transparent;
	color: rgba(233, 237, 229, 0.72);
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
	align-self: center;
	justify-self: center;
}

.bubble-audio-cancel {
	grid-column: 2;
	grid-row: 1;
	display: none;
	place-items: center;
	width: 1.55rem;
	height: 1.55rem;
	color: rgba(233, 237, 229, 0.78);
	align-self: center;
	justify-self: center;
	pointer-events: none;
	user-select: none;
}

.bubble-audio-cancel svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: currentColor;
}

.bubble-row.is-audio-pending .bubble-audio-play {
	display: none !important;
}

.bubble-row.is-audio-pending .bubble-audio-cancel {
	display: grid;
}

.bubble-row.is-audio-pending .bubble-audio-speed {
	display: none !important;
}

.bubble-row.received .bubble-audio-play {
	color: rgba(17, 27, 33, 0.55);
}

[data-theme="dark"] .bubble-row.received .bubble-audio-play {
	color: rgba(233, 237, 229, 0.62);
}

.bubble-audio-play svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

.bubble-audio-play .icon-pause,
.bubble-audio-play.is-playing .icon-play {
	display: none;
}

.bubble-audio-play.is-playing .icon-pause {
	display: block;
}

.bubble-audio-main {
	display: contents;
}

.bubble-audio-wave-wrap {
	grid-column: 3;
	grid-row: 1;
	position: relative;
	width: 100%;
	height: 1.7rem;
	align-self: center;
}

.bubble-row.is-audio-active .bubble-audio-wave-wrap {
	cursor: pointer;
	touch-action: none;
}

.bubble-row.is-audio-active .bubble-audio-wave-wrap.is-scrubbing {
	cursor: inherit;
}

.bubble-audio-wave {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.13rem;
	height: 100%;
	width: 100%;
	overflow: hidden;
	color: rgba(233, 237, 229, 0.38);
}

.bubble-row.received .bubble-audio-wave {
	color: rgba(17, 27, 33, 0.38);
}

[data-theme="dark"] .bubble-row.received .bubble-audio-wave {
	color: rgba(233, 237, 229, 0.45);
}

.bubble-audio-wave span {
	flex: 0 0 0.18rem;
	width: 0.18rem;
	min-width: 0.18rem;
	max-width: 0.18rem;
	min-height: 0.18rem;
	border-radius: 0.09rem;
	background: currentColor;
	height: 22%;
	transition: background-color 0.08s linear;
}

.bubble-row.sent .bubble-audio-wave span.is-played {
	background: rgba(255, 255, 255, 0.96);
}

.bubble-row.received .bubble-audio-wave span.is-played {
	background: var(--wa-green);
}

.bubble-audio-scrubber {
	position: absolute;
	top: 50%;
	left: 0;
	width: 0.52rem;
	height: 0.52rem;
	margin-left: -0.26rem;
	border-radius: 50%;
	background: #ffffff;
	transform: translateY(-50%);
	pointer-events: auto;
	cursor: inherit;
	touch-action: none;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
	z-index: 3;
}

.bubble-row.received .bubble-audio-scrubber {
	background: var(--wa-green);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.bubble-audio-wave.skeleton {
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
	border-radius: 0.35rem;
}

.bubble-audio-footer {
	grid-column: 3;
	grid-row: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 0.9rem;
}

.bubble-audio-duration {
	flex-shrink: 0;
	font-size: 0.74rem;
	line-height: 1;
	color: var(--bubble-time);
	font-variant-numeric: tabular-nums;
}

.bubble-audio .bubble-time {
	position: static;
	margin: 0;
	padding: 0;
	font-size: 0.72rem;
	line-height: 1;
}

.bubble-document {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 11rem;
	padding-right: var(--bubble-meta-w, 2.6rem);
}

.bubble-document-icon {
	flex-shrink: 0;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 0.5rem;
	background: var(--wa-teal);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bubble-document-icon svg {
	width: 1.2rem;
	height: 1.2rem;
	fill: #fff;
}

.bubble-document-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.bubble-document-name {
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--bubble-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bubble-document-size {
	font-size: 0.78rem;
	color: var(--bubble-time);
}

.bubble-location {
	padding: 0.35rem 0.4rem 0.3rem !important;
	min-width: 12.5rem;
	overflow: hidden;
	position: relative;
}

.bubble-location-card {
	appearance: none;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.45rem 0.5rem 1.25rem;
	border: 0;
	background: transparent;
	color: inherit;
	text-align: left;
	font: inherit;
	cursor: pointer;
}

.bubble-location-card:active {
	opacity: 0.78;
}

.bubble-location-icon {
	flex-shrink: 0;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(48, 209, 88, 0.18);
	color: #30d158;
}

.bubble-location-icon svg {
	width: 1.2rem;
	height: 1.2rem;
	fill: currentColor;
}

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

.bubble-location-title {
	font-size: 0.98rem;
	font-weight: 650;
	color: var(--bubble-text);
}

.bubble-location-hint {
	font-size: 0.78rem;
	color: var(--bubble-time);
}

.bubble-location .bubble-time {
	position: absolute;
	right: 0.7rem;
	bottom: 0.35rem;
}

.bubble-location-map,
.bubble-location-label {
	display: none !important;
}

.bubble-call {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 11.5rem;
	padding: 0.55rem 2.7rem 0.55rem 0.55rem;
}

.bubble-call-icon {
	flex-shrink: 0;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bubble-row.received .bubble-call-icon {
	background: rgba(32, 191, 98, 0.18);
	color: var(--wa-green);
}

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

.bubble-call-copy {
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
	min-width: 0;
}

.bubble-call-title {
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--bubble-text);
	line-height: 1.2;
}

.bubble-call-status {
	font-size: 0.86rem;
	color: var(--bubble-time);
	line-height: 1.15;
}

/* --------------------------------------------------------------------------- */
/* LIGA??ES ? lista + overlay                                                  */
/* --------------------------------------------------------------------------- */

.call-list {
	display: flex;
	flex-direction: column;
}

.call-row {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem 1rem 0.7rem 1rem;
	position: relative;
	color: inherit;
}

.call-row-main {
	appearance: none;
	border: none;
	background: transparent;
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0;
	text-align: left;
	cursor: pointer;
	color: inherit;
}

.call-row::after {
	content: "";
	position: absolute;
	left: 4.35rem;
	right: 1rem;
	bottom: 0;
	height: 1px;
	background: var(--divider);
}

.call-row:last-child::after {
	display: none;
}

.call-row-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.call-row-bottom {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 0;
}

.call-row-name {
	display: block;
	min-width: 0;
	font-size: 1.02rem;
	font-weight: 400;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.call-row.is-missed .call-row-name {
	color: #ea4335;
}

.call-row-aside {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	align-self: center;
}

.call-row-time {
	flex-shrink: 0;
	font-size: 0.84rem;
	line-height: 1;
	color: var(--text-tertiary);
	white-space: nowrap;
}

.call-row-dir {
	flex-shrink: 0;
	width: 0.95rem;
	height: 0.95rem;
	fill: var(--text-tertiary);
}

.call-row.is-missed .call-row-dir {
	fill: #ea4335;
}

.call-row.is-out .call-row-dir {
	transform: rotate(180deg);
}

.call-row-meta {
	font-size: 0.8rem;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.call-row-info {
	appearance: none;
	border: none;
	background: transparent;
	flex-shrink: 0;
	width: 1.35rem;
	height: 1.35rem;
	padding: 0;
	color: var(--text-tertiary);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.call-row-info svg {
	width: 1.15rem;
	height: 1.15rem;
	display: block;
}

.call-row-info:active {
	opacity: 0.65;
}

/* ---------- SWIPE ACTIONS ---------- */

.chat-swipe {
	position: relative;
	overflow: hidden;
	touch-action: pan-y;
	background: var(--app-bg);
}

/* Divisor em cima do row ? evita corte do overflow/subpixel do swipe */
.chat-swipe::after {
	content: "";
	position: absolute;
	left: calc(1rem + 3.2rem + 0.85rem);
	right: 1rem;
	bottom: 0;
	height: 1px;
	background: var(--text-tertiary);
	opacity: 0.4;
	pointer-events: none;
	z-index: 5;
	transition: left 0.28s var(--ease-ios);
}

.whatsapp-app.is-selecting .chat-swipe::after {
	left: calc(3.1rem + 3.2rem + 0.85rem);
}

.chat-swipe.is-collapsing {
	pointer-events: none;
	will-change: height, opacity;
	transition: height 0.3s var(--ease-ios), opacity 0.22s ease;
}

.chat-swipe.is-collapsing > .chat-row {
	transition: transform 0.26s var(--ease-ios);
}

.chat-swipe.is-collapsing::after {
	opacity: 0;
}

.chat-swipe-actions {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: stretch;
	z-index: 0;
}

.chat-swipe-actions-left {
	left: 0;
}

.chat-swipe-actions-right {
	right: 0;
}

.swipe-action {
	appearance: none;
	border: none;
	outline: none;
	width: 4.6rem;
	min-width: 4.6rem;
	padding: 0.35rem 0.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.28rem;
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.1;
	cursor: pointer;
	color: #ffffff;
}

.swipe-action svg {
	width: 1.45rem;
	height: 1.45rem;
	fill: currentColor;
	flex-shrink: 0;
}

.swipe-action-unread {
	background: var(--wa-green);
	color: #ffffff;
}

.swipe-action-pin {
	background: var(--text-secondary);
	color: #ffffff;
}

.swipe-action-more {
	background: var(--text-secondary);
	color: #ffffff;
}

.swipe-action-archive {
	background: var(--wa-green);
	color: #ffffff;
}

.chat-swipe > .chat-row {
	position: relative;
	z-index: 1;
	background: var(--app-bg);
	will-change: transform;
	transition: transform 0.22s var(--ease-ios);
}

.chat-swipe.is-swiping > .chat-row {
	transition: none;
}

.chat-swipe.is-open-left > .chat-row,
.chat-swipe.is-open-right > .chat-row {
	transition: transform 0.22s var(--ease-ios);
}

.whatsapp-app.is-selecting .chat-swipe-actions {
	visibility: hidden;
	pointer-events: none;
}

/* ---------- ARQUIVADAS ---------- */

.archived-row {
	appearance: none;
	border: none;
	outline: none;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1rem;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	text-align: left;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

.archived-row::after {
	content: "";
	position: absolute;
	left: calc(1rem + 3.2rem + 0.85rem);
	right: 1rem;
	bottom: 0;
	height: 1px;
	background: var(--text-tertiary);
	opacity: 0.4;
	pointer-events: none;
	z-index: 2;
}

.archived-row-icon {
	/* Mesma coluna do avatar (3.2rem): SVG centralizado com a foto do chat. */
	width: 3.2rem;
	height: 3.2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-tertiary);
	flex-shrink: 0;
}

.archived-row-icon svg {
	width: 1.35rem;
	height: 1.35rem;
	fill: currentColor;
}

.archived-row-label {
	/* Alinha com o nome do chat / in?cio da linha de separa??o. */
	flex: 1;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--text-tertiary);
}

.archived-row-count {
	font-size: 0.92rem;
	color: var(--text-tertiary);
	flex-shrink: 0;
}

.archived-row.hidden {
	display: none !important;
}

.archived-row.is-collapsing {
	pointer-events: none;
	will-change: height, opacity, padding;
	transition:
		height 0.3s var(--ease-ios),
		opacity 0.22s ease,
		padding 0.3s var(--ease-ios);
}

.archived-row.is-collapsing::after {
	opacity: 0;
}

/* ---------- P?GINA ARQUIVADAS ---------- */

.archived-screen {
	z-index: 4;
	background: var(--app-bg);
	contain: layout style;
}

.whatsapp-app.is-archived-open .tabbar {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}

/* Ao voltar: footer reaparece com fade-in r?pido durante o slide da p?gina */
.whatsapp-app.is-archived-closing .tabbar {
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	transition: opacity 0.12s ease, visibility 0s linear 0s;
}

.whatsapp-app.is-archived-open.is-selecting .select-actionbar {
	visibility: visible;
	pointer-events: auto;
}

.archived-header {
	flex-shrink: 0;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.4rem;
	padding: var(--safe-top) 0.85rem 0.55rem;
	background: var(--app-bg);
}

.archived-nav-back {
	appearance: none;
	border: none;
	outline: none;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.12rem;
	width: 2.05rem;
	height: 2.05rem;
	min-width: 2.05rem;
	min-height: 2.05rem;
	padding: 0;
	border-radius: 999px;
	background: var(--wa-green);
	color: #ffffff;
	cursor: pointer;
	box-sizing: border-box;
}

.archived-nav-back:not(.is-count-empty) {
	width: auto;
	min-width: 2.05rem;
	padding: 0 0.58rem 0 0.22rem;
}

.archived-nav-back svg {
	width: 1.4rem;
	height: 1.4rem;
	fill: currentColor;
	flex-shrink: 0;
}

.archived-nav-count {
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	padding-right: 0.05rem;
}

.archived-nav-count.hidden {
	display: none;
}

.archived-nav-back.is-count-empty {
	padding: 0;
}

.archived-title {
	margin: 0;
	justify-self: center;
	font-size: 1.18rem;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.archived-edit-btn {
	appearance: none;
	border: none;
	outline: none;
	justify-self: end;
	background: transparent;
	color: var(--wa-green);
	font-size: 1.02rem;
	font-weight: 500;
	cursor: pointer;
	padding: 0.35rem 0.15rem;
}

.archived-edit-btn.hidden {
	display: none;
}

.archived-banner {
	flex-shrink: 0;
	padding: 0.8rem 1.35rem 0.9rem;
	text-align: center;
	font-size: 0.88rem;
	line-height: 1.4;
	font-weight: 400;
	color: var(--text-tertiary);
	background: var(--archived-banner-bg);
	border-top: 1px solid var(--archived-banner-border);
	border-bottom: 1px solid var(--archived-banner-border);
}

.archived-content {
	flex: 1;
	min-height: 0;
	padding-bottom: 0;
}

.whatsapp-app.is-selecting .archived-content {
	padding-bottom: var(--tabbar-height);
}

.archived-screen .content {
	padding-bottom: 0;
}

/* ---------- MORE SHEET ---------- */

.more-sheet-scrim {
	position: absolute;
	inset: 0;
	z-index: 40;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.28s var(--ease-ios);
}

.more-sheet-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.more-sheet-scrim.hidden {
	display: none !important;
}

.more-sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 41;
	height: 50%;
	max-height: 50%;
	background: var(--surface-2);
	border-radius: 1rem 1rem 0 0;
	transform: translateY(110%);
	transition: transform 0.34s var(--ease-ios);
	display: flex;
	flex-direction: column;
	padding: 0.85rem 0.85rem calc(0.85rem + var(--safe-bottom));
	box-sizing: border-box;
	pointer-events: none;
}

.more-sheet.is-open {
	transform: translateY(0);
	pointer-events: auto;
}

.more-sheet-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.15rem 0.25rem 0.85rem;
}

.more-sheet-identity {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
}

.more-sheet-name {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.more-sheet-close {
	appearance: none;
	border: none;
	outline: none;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 999px;
	background: rgba(120, 120, 128, 0.28);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	padding: 0;
}

.more-sheet-close svg {
	width: 0.85rem;
	height: 0.85rem;
	fill: currentColor;
}

.more-sheet-body {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.more-sheet-group {
	background: var(--card);
	border-radius: 0.85rem;
	overflow: hidden;
}

.more-sheet-item {
	appearance: none;
	border: none;
	outline: none;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.9rem 1rem;
	background: transparent;
	color: var(--text);
	font-size: 1rem;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	position: relative;
}

.more-sheet-group .more-sheet-item + .more-sheet-item::before {
	content: "";
	position: absolute;
	left: 3.1rem;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--divider);
}

.more-sheet-item svg {
	width: 1.35rem;
	height: 1.35rem;
	fill: currentColor;
	flex-shrink: 0;
	opacity: 0.92;
}

.more-sheet-item-danger {
	background: var(--card);
	border-radius: 0.85rem;
	color: var(--danger);
}

.more-sheet-item-danger.hidden {
	display: none !important;
}

.whatsapp-app.is-more-sheet-open .tabbar,
.whatsapp-app.is-more-sheet-open .select-actionbar {
	visibility: hidden;
	pointer-events: none;
}

/* ---------- CARD DE MEMBRO (grupo) ---------- */

.member-card-scrim {
	position: absolute;
	inset: 0;
	z-index: 42;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.28s var(--ease-ios);
}

.member-card-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.member-card-scrim.hidden {
	display: none !important;
}

.member-card-sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 43;
	height: auto;
	max-height: min(88%, calc(100% - 2rem));
	background: var(--surface-2);
	border-radius: 1rem 1rem 0 0;
	transform: translateY(110%);
	transition: transform 0.34s var(--ease-ios);
	display: flex;
	flex-direction: column;
	padding: 0.85rem 0.85rem calc(1rem + var(--safe-bottom));
	box-sizing: border-box;
	pointer-events: none;
	overflow: hidden;
}

.member-card-sheet.is-open {
	transform: translateY(0);
	pointer-events: auto;
}

.member-card-close {
	appearance: none;
	border: none;
	outline: none;
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 999px;
	background: rgba(120, 120, 128, 0.28);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	z-index: 1;
}

.member-card-close svg {
	width: 0.85rem;
	height: 0.85rem;
	fill: currentColor;
}

.member-card-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 0.6rem 2.2rem 1rem;
	text-align: center;
}

.member-card-hero .avatar {
	width: 5.6rem;
	height: 5.6rem;
	font-size: 1.8rem;
	margin-bottom: 0.35rem;
}

.member-card-name {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--text);
	word-break: break-word;
}

.member-card-push {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-secondary);
}

.member-card-push.hidden {
	display: none !important;
}

.member-card-actions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.45rem;
	margin-bottom: 0.85rem;
}

.member-card-list {
	background: var(--card);
	border-radius: 0.85rem;
	overflow: hidden;
	flex-shrink: 0;
}

.member-card-list .more-sheet-item:not(.hidden) + .more-sheet-item:not(.hidden)::before {
	content: "";
	position: absolute;
	left: 3.1rem;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--divider);
}

.whatsapp-app.is-member-card-open .tabbar,
.whatsapp-app.is-member-card-open .select-actionbar {
	visibility: hidden;
	pointer-events: none;
}

/* ---------- NOVA CONVERSA / NOVO GRUPO ---------- */

.compose-scrim {
	position: absolute;
	inset: 0;
	z-index: 20;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.28s ease;
	pointer-events: none;
}

.compose-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.compose-scrim.hidden {
	display: none !important;
}

.compose-sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: calc(var(--safe-top) - 0.35rem);
	z-index: 21;
	display: flex;
	flex-direction: column;
	background: var(--app-bg);
	border-radius: 1.35rem 1.35rem 0 0;
	overflow: hidden;
	transform: translate3d(0, 110%, 0);
	transition: transform 0.38s var(--ease-ios);
	pointer-events: none;
	visibility: hidden;
}

.compose-sheet.is-open {
	transform: translate3d(0, 0, 0);
	pointer-events: auto;
	visibility: visible;
}

.compose-panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: var(--app-bg);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(24%, 0, 0);
	transition: transform 0.3s var(--ease-ios), opacity 0.22s ease, visibility 0s linear 0.3s;
	/* Esquerda fixa; direita: contato ? A-Z ? borda com gaps iguais */
	--compose-side: 0.75rem;
	--compose-az: 0.9rem;
	--compose-az-gap: 0.22rem;
	--compose-right: calc(var(--compose-az) + (2 * var(--compose-az-gap)));
}

.compose-panel.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
	transition: transform 0.3s var(--ease-ios), opacity 0.22s ease, visibility 0s linear 0s;
	z-index: 1;
}

.compose-panel.is-behind {
	opacity: 1;
	visibility: visible;
	transform: translate3d(-18%, 0, 0);
	pointer-events: none;
	z-index: 0;
}

.compose-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 1rem 1rem 0.65rem;
	min-height: 3.2rem;
}

.compose-header-nav {
	justify-content: space-between;
	gap: 0.4rem;
	/* Compensa o bot?o maior para manter a altura do header */
	padding: 0.8rem 1rem 0.45rem;
}

.compose-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.01em;
}

.compose-header-center {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

.compose-subtitle {
	font-size: 0.72rem;
	color: var(--text-tertiary);
	line-height: 1.1;
	margin-top: 0.1rem;
}

.compose-close,
.compose-nav-btn {
	appearance: none;
	border: none;
	outline: none;
	width: 2.55rem;
	height: 2.55rem;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	padding: 0;
	transition: opacity 0.22s ease;
}

.compose-close {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
}

/* Crossfade dos bot?es de fechar/voltar na troca de painel */
.compose-panel:not(.is-active) .compose-close,
.compose-panel:not(.is-active) .compose-nav-btn {
	opacity: 0;
}

.compose-close svg,
.compose-nav-btn svg {
	width: 1.2rem;
	height: 1.2rem;
	fill: currentColor;
}

.compose-nav-text {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--wa-green);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0.35rem 0.2rem;
	min-width: 3.2rem;
	text-align: right;
}

.compose-nav-text:disabled,
.compose-pill:disabled {
	opacity: 0.38;
	pointer-events: none;
}

.compose-nav-text.is-strong {
	font-weight: 700;
}

.compose-pill {
	appearance: none;
	border: none;
	outline: none;
	background: var(--wa-green);
	color: #ffffff;
	font-size: 0.92rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.48rem 0.95rem;
	cursor: pointer;
	flex-shrink: 0;
}

.compose-search-wrap {
	flex-shrink: 0;
	/* Mesma largura dos cards: corta s? ? direita para o A-Z */
	margin: 0 var(--compose-right) 0.7rem var(--compose-side);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--app-bg);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0.55rem 0.85rem;
	box-sizing: border-box;
}

.compose-search-wrap .search-icon {
	width: 1.1rem;
	height: 1.1rem;
	flex-shrink: 0;
	fill: var(--text-secondary);
}

.compose-search-wrap input {
	flex: 1;
	border: none;
	background: transparent;
	outline: none;
	font-size: 0.95rem;
	color: var(--text);
	min-width: 0;
}

.compose-search-wrap input::placeholder {
	color: var(--text-tertiary);
}

.compose-body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 0 0 0.85rem var(--compose-side);
}

.compose-actions {
	flex-shrink: 0;
	background: var(--surface-2);
	border-radius: 1rem;
	overflow: hidden;
	margin: 0 0 0.85rem;
}

.compose-directory {
	min-height: 0;
}

.compose-action {
	appearance: none;
	border: none;
	outline: none;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.75rem;
	min-height: 4.05rem;
	box-sizing: border-box;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	text-align: left;
	position: relative;
}

.compose-action + .compose-action::before {
	content: "";
	position: absolute;
	left: 4.55rem;
	right: 0.75rem;
	top: 0;
	height: 1px;
	background: var(--divider);
}

.compose-action-icon {
	width: 2.85rem;
	height: 2.85rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wa-green);
	flex-shrink: 0;
	background: transparent;
}

.compose-action-icon svg {
	width: 1.55rem;
	height: 1.55rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.55;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.compose-action-label {
	font-size: 0.98rem;
	font-weight: 600;
}

.compose-list-wrap {
	flex: 1;
	min-height: 0;
	position: relative;
	background: transparent;
	overflow: hidden;
}

.compose-list {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Reserva a coluna do A-Z ? a??es e contatos ficam com a mesma largura */
	/* Mesma largura da busca: reserva contato ? A-Z ? borda */
	padding: 0 var(--compose-right) 1.25rem 0;
	-webkit-overflow-scrolling: touch;
}

.compose-list::-webkit-scrollbar {
	display: none;
}

.compose-section {
	margin-bottom: 0.7rem;
}

.compose-letter {
	padding: 0.15rem 0.85rem 0.4rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-tertiary);
	scroll-margin-top: 0.25rem;
}

.compose-section-card {
	background: var(--surface-2);
	border-radius: 1rem;
	overflow: hidden;
}

.compose-contact {
	appearance: none;
	border: none;
	outline: none;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.75rem;
	min-height: 4.05rem;
	box-sizing: border-box;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	text-align: left;
	position: relative;
}

.compose-contact::after {
	content: "";
	position: absolute;
	left: 4.55rem;
	right: 0.75rem;
	bottom: 0;
	height: 1px;
	background: var(--divider);
}

.compose-section-card .compose-contact:last-child::after {
	display: none;
}

.compose-contact .avatar {
	width: 2.85rem;
	height: 2.85rem;
}

.compose-contact-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.compose-contact-name {
	font-size: 0.98rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.compose-contact-sub {
	font-size: 0.8rem;
	color: var(--text-tertiary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.compose-check {
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 999px;
	border: 1.5px solid var(--select-ring);
	flex-shrink: 0;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: transparent;
	background: transparent;
}

.compose-check svg {
	width: 0.8rem;
	height: 0.8rem;
	fill: currentColor;
}

.compose-contact.is-selected .compose-check {
	background: var(--wa-green);
	border-color: var(--wa-green);
	color: #ffffff;
}

.compose-index {
	position: absolute;
	top: 56%;
	right: var(--compose-az-gap);
	bottom: auto;
	transform: translateY(-50%);
	width: var(--compose-az);
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.16rem;
	padding: 0;
	z-index: 3;
	pointer-events: auto;
	user-select: none;
}

.compose-index-letter {
	appearance: none;
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	font-size: 0.74rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wa-green);
	cursor: pointer;
}

.compose-index-letter.is-empty {
	opacity: 0.35;
}

/* Faixa de membros selecionados (Adicionar membros) */
.members-selected {
	flex-shrink: 0;
	height: 0;
	overflow: hidden;
	margin: 0 var(--compose-right) 0 var(--compose-side);
	margin-bottom: 0;
	pointer-events: none;
	will-change: height, margin-bottom;
}

.members-selected.is-animating {
	transition:
		height 0.42s var(--ease-ios),
		margin-bottom 0.42s var(--ease-ios);
}

.members-selected.is-open {
	pointer-events: auto;
}

.members-selected.is-closing .members-selected-scroll {
	opacity: 0 !important;
	visibility: hidden !important;
	transition: none !important;
}

.members-selected-inner {
	overflow: hidden;
	/* M?scara: conte?do no topo; a altura cresce revelando para baixo */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.members-selected-scroll {
	display: flex;
	align-items: flex-start;
	gap: 0.3rem;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	padding: 0.75rem 0.8rem 0.55rem;
	background: var(--surface-2);
	border-radius: 1rem;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x;
	cursor: grab;
	user-select: none;
}

.members-selected-scroll.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
}

.members-selected-scroll::-webkit-scrollbar {
	display: none;
}

.members-chip {
	flex-shrink: 0;
	width: 4.05rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.28rem;
	transform: scale(0.15);
	opacity: 0;
	transform-origin: center center;
	transition:
		transform 0.14s cubic-bezier(0.18, 1.45, 0.32, 1),
		opacity 0.1s ease;
	will-change: transform, opacity;
}

/* Primeiro contato (junto do height expand): s? fade-in, sem scale */
.members-chip.is-fade {
	transform: none;
	opacity: 0;
	transition: opacity 0.42s ease;
}

.members-chip.is-in {
	transform: scale(1);
	opacity: 1;
}

.members-chip.is-fade.is-in {
	transform: none;
	opacity: 1;
}

.members-chip.is-out {
	transform: scale(0);
	opacity: 0;
	transition:
		transform 0.24s cubic-bezier(0.4, 0, 0.7, 0.2),
		opacity 0.18s ease;
}

.members-selected.is-closing .members-chip {
	transition: none !important;
	opacity: 0 !important;
	transform: none !important;
}

.members-chip-avatar-wrap {
	position: relative;
	width: 3.15rem;
	height: 3.15rem;
}

.members-chip-avatar {
	width: 3.15rem;
	height: 3.15rem;
	border-radius: 50%;
}

.members-chip-remove {
	appearance: none;
	border: none;
	outline: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 999px;
	background: #5c5c5c;
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	z-index: 1;
	box-shadow: none;
}

.members-chip-remove svg {
	width: 0.62rem;
	height: 0.62rem;
	fill: currentColor;
}

.members-chip-name {
	width: 100%;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--text);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.15;
}

.compose-empty {
	padding: 2.5rem 1.25rem;
	text-align: center;
	color: var(--text-tertiary);
	font-size: 0.9rem;
}

.compose-form {
	padding: 0.5rem 1rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.compose-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	background: var(--surface-2);
	border-radius: 0.85rem;
	padding: 0.7rem 0.9rem;
}

.compose-field span {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--text-tertiary);
}

.compose-field input {
	border: none;
	outline: none;
	background: transparent;
	font-size: 1rem;
	color: var(--text);
	padding: 0;
}

.compose-create-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 0.35rem 1rem 1.5rem;
}

.group-identity {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	background: var(--surface-2);
	border-radius: 1rem;
	padding: 0.85rem;
	margin-bottom: 0.75rem;
}

.group-avatar-pick {
	appearance: none;
	border: none;
	outline: none;
	background: transparent;
	padding: 0;
	position: relative;
	width: 3.6rem;
	height: 3.6rem;
	flex-shrink: 0;
	cursor: pointer;
}

.group-avatar-preview {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--app-bg);
	color: var(--text-tertiary);
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.group-avatar-preview.is-placeholder svg {
	width: 1.7rem;
	height: 1.7rem;
	fill: currentColor;
}

.group-avatar-camera {
	position: absolute;
	right: -0.1rem;
	bottom: -0.1rem;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 999px;
	background: var(--wa-green);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--surface-2);
}

.group-avatar-camera svg {
	width: 0.72rem;
	height: 0.72rem;
	fill: currentColor;
}

.group-name-input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text);
	padding: 0.35rem 0;
}

.group-name-input::placeholder {
	color: var(--text-tertiary);
	font-weight: 500;
}

.group-temp-row {
	appearance: none;
	border: none;
	outline: none;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem;
	padding: 0.9rem 1rem;
	background: var(--surface-2);
	border-radius: 1rem;
	cursor: pointer;
	text-align: left;
	margin-bottom: 0.85rem;
	color: var(--text);
}

.group-temp-copy {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.group-temp-title {
	font-size: 0.98rem;
	font-weight: 600;
}

.group-temp-desc {
	font-size: 0.8rem;
	color: var(--text-tertiary);
}

.group-temp-switch {
	width: 2.85rem;
	height: 1.7rem;
	border-radius: 999px;
	background: var(--app-bg);
	position: relative;
	flex-shrink: 0;
	transition: background 0.18s ease;
}

.group-temp-knob {
	position: absolute;
	top: 0.18rem;
	left: 0.18rem;
	width: 1.34rem;
	height: 1.34rem;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	transition: transform 0.18s ease;
}

.group-temp-row.is-on .group-temp-switch {
	background: var(--wa-green);
}

.group-temp-row.is-on .group-temp-knob {
	transform: translateX(1.15rem);
}

.group-members-block {
	background: transparent;
	border-radius: 0;
	padding: 0.45rem 0 0.5rem;
}

.group-members-label {
	display: block;
	padding: 0 0.15rem 0.75rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.group-members-list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.8rem 0.15rem;
	padding: 0;
}

.group-members-list .members-chip {
	width: 4.45rem;
	transform: none;
	opacity: 1;
	transition: none;
	will-change: auto;
}

.group-members-list .members-chip-avatar-wrap,
.group-members-list .members-chip-avatar {
	width: 3.55rem;
	height: 3.55rem;
}

.group-members-list .members-chip-remove {
	width: 1.28rem;
	height: 1.28rem;
}

.temporary-duration-scrim {
	position: absolute;
	inset: 0;
	z-index: 30;
	background: rgba(0, 0, 0, 0.52);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.28s var(--ease-ios);
}

.temporary-duration-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.temporary-duration-scrim.hidden {
	display: none !important;
}

.temporary-duration-sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 31;
	padding: 0.9rem 1rem calc(1rem + var(--safe-bottom));
	background: var(--app-bg);
	border-radius: 1.35rem 1.35rem 0 0;
	transform: translateY(110%);
	transition: transform 0.32s var(--ease-ios);
	pointer-events: none;
}

.temporary-duration-sheet.is-open {
	transform: translateY(0);
	pointer-events: auto;
}

.temporary-duration-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.15rem 0.1rem 0.9rem;
}

.temporary-duration-header h2 {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--text);
}

.temporary-duration-close {
	appearance: none;
	border: none;
	outline: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--surface-2);
	color: var(--text);
	cursor: pointer;
}

.temporary-duration-close svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

.temporary-duration-info {
	margin: 0 0 0.8rem;
	padding: 0.8rem 0.95rem;
	border-radius: 1rem;
	background: var(--surface-2);
	color: var(--text-secondary);
	font-size: 0.82rem;
	line-height: 1.3;
	text-align: center;
}

.temporary-duration-options {
	overflow: hidden;
	border-radius: 1rem;
	background: var(--surface-2);
}

.temporary-duration-options button {
	appearance: none;
	border: none;
	outline: none;
	width: 100%;
	min-height: 3.45rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.7rem 1rem;
	background: transparent;
	color: var(--text);
	font-size: 0.96rem;
	text-align: left;
	cursor: pointer;
	position: relative;
}

.temporary-duration-options button + button::before {
	content: "";
	position: absolute;
	top: 0;
	left: 1rem;
	right: 1rem;
	height: 1px;
	background: var(--divider);
}

.temporary-duration-options svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: var(--wa-green);
	opacity: 0;
}

.temporary-duration-options button.is-selected svg {
	opacity: 1;
}

.whatsapp-app.is-compose-open .tabbar,
.whatsapp-app.is-compose-open .select-actionbar {
	visibility: hidden;
	pointer-events: none;
}

/* ---------- MENSAGEM: EDITADA / FAVORITA / APAGADA ---------- */

.bubble-edited {
	font-size: 0.74rem;
	flex-shrink: 0;
	color: var(--bubble-time);
	margin-right: 0.16rem;
	margin-bottom: 0.06rem;
}

.bubble-star {
	width: 0.72rem;
	height: 0.72rem;
	flex-shrink: 0;
	fill: var(--bubble-time);
}

.bubble-deleted {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding-right: var(--bubble-meta-w, 2.95rem);
	padding-bottom: 0;
}

.bubble-deleted-icon {
	width: 0.95rem;
	height: 0.95rem;
	flex-shrink: 0;
	fill: var(--text-tertiary);
}

.bubble-deleted-text {
	font-size: 0.9rem;
	font-style: italic;
	line-height: 1.3;
	color: var(--text-tertiary);
}

/* ---------- MENSAGEM: MENU CONTEXTUAL ---------- */

.msg-menu-layer {
	position: absolute;
	inset: 0;
	z-index: 60;
}

.msg-menu-layer.hidden {
	display: none !important;
}

.msg-menu-scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	opacity: 0;
	transition: opacity 0.2s var(--ease-ios);
}

.msg-menu-layer.is-open .msg-menu-scrim {
	opacity: 1;
}

/* C?pia da bolha original: fica acima do blur para o alvo continuar leg?vel. */
.msg-menu-ghost {
	position: absolute;
	display: flex;
	pointer-events: none;
}

.msg-menu-ghost .bubble-row {
	margin: 0;
	width: 100%;
}

.msg-menu {
	position: absolute;
	width: 11.5rem;
	padding: 0.25rem 0;
	background: var(--surface-2);
	border-radius: 0.9rem;
	box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.32);
	transform: scale(0.9);
	transform-origin: top center;
	opacity: 0;
	transition: transform 0.18s var(--ease-ios), opacity 0.18s var(--ease-ios);
	overflow: hidden;
}

.msg-menu-layer.is-open .msg-menu {
	transform: scale(1);
	opacity: 1;
}

.msg-menu-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.62rem 0.85rem;
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.92rem;
	color: var(--text);
	text-align: left;
	cursor: pointer;
}

.msg-menu-item:active {
	background: var(--row-press);
}

.msg-menu-item.hidden {
	display: none !important;
}

.msg-menu-item svg {
	width: 1.15rem;
	height: 1.15rem;
	flex-shrink: 0;
	fill: var(--text-secondary);
}

.msg-menu-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0.85rem;
	right: 0;
	height: 1px;
	background: var(--divider);
}

.msg-menu-item.is-first::before {
	display: none;
}

/* ---------- MENSAGEM: MODO SELE??O ---------- */

.bubble-row {
	position: relative;
	box-sizing: border-box;
	transition: padding-left 0.22s var(--ease-ios);
}

.chat-scroll.is-selecting .bubble-row {
	padding-left: 2.1rem;
}

.bubble-select {
	position: absolute;
	left: 0.55rem;
	top: 50%;
	width: 1.25rem;
	height: 1.25rem;
	transform: translateY(-50%);
	border-radius: 50%;
	border: 1.5px solid var(--text-tertiary);
	box-sizing: border-box;
	display: grid;
	place-items: center;
}

.bubble-select svg {
	width: 0.8rem;
	height: 0.8rem;
	fill: none;
	stroke: #ffffff;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
}

.bubble-row.is-selected .bubble-select {
	background: var(--wa-green);
	border-color: var(--wa-green);
}

.bubble-row.is-selected .bubble-select svg {
	opacity: 1;
}

.chat-selection-bar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 1rem calc(var(--safe-bottom) + 0.5rem);
	background: var(--input-bar-bg);
	border-top: 1px solid var(--divider);
}

.chat-selection-bar.hidden {
	display: none !important;
}

.chat-selection-trash {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.chat-selection-trash svg {
	width: 1.4rem;
	height: 1.4rem;
	fill: var(--danger);
}

.chat-selection-count {
	flex: 1;
	font-size: 0.9rem;
	color: var(--text-secondary);
}

.chat-selection-cancel {
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.9rem;
	color: var(--wa-green);
	cursor: pointer;
}

/* ---------- MENSAGEM: SHEET DE EXCLUS?O ---------- */

.delete-sheet-scrim {
	position: absolute;
	inset: 0;
	z-index: 62;
	background: rgba(0, 0, 0, 0.52);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.28s var(--ease-ios);
}

.delete-sheet-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.delete-sheet-scrim.hidden {
	display: none !important;
}

.delete-sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 63;
	padding: 1.1rem 1rem calc(1rem + var(--safe-bottom));
	background: var(--app-bg);
	border-radius: 1.35rem 1.35rem 0 0;
	transform: translateY(110%);
	transition: transform 0.32s var(--ease-ios);
	pointer-events: none;
}

.delete-sheet.is-open {
	transform: translateY(0);
	pointer-events: auto;
}

.delete-sheet-title {
	margin: 0 0 0.9rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
	text-align: center;
}

.delete-sheet-options {
	display: flex;
	flex-direction: column;
	background: var(--surface-2);
	border-radius: 0.9rem;
	overflow: hidden;
}

.delete-sheet-option {
	padding: 0.85rem 1rem;
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.95rem;
	color: var(--text);
	cursor: pointer;
	position: relative;
}

.delete-sheet-option.is-danger {
	color: var(--danger);
}

.delete-sheet-option.hidden {
	display: none !important;
}

.delete-sheet-option:active {
	background: var(--row-press);
}

.delete-sheet-option + .delete-sheet-option::before {
	content: "";
	position: absolute;
	top: 0;
	left: 1rem;
	right: 1rem;
	height: 1px;
	background: var(--divider);
}

/* ---------- MENSAGEM: BANNER DE EDI??O ---------- */

.chat-edit-banner {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.85rem;
	background: var(--input-bar-bg);
	border-top: 1px solid var(--divider);
}

.chat-edit-banner.hidden {
	display: none !important;
}

.chat-edit-bar {
	width: 3px;
	align-self: stretch;
	min-height: 1.9rem;
	border-radius: 2px;
	background: var(--wa-green);
}

.chat-edit-copy {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.chat-edit-title {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wa-green);
}

.chat-edit-preview {
	font-size: 0.82rem;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-edit-cancel {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.chat-edit-cancel svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: var(--text-tertiary);
}

/* ---------- DADOS DA MENSAGEM ---------- */

#viewMessageInfo.overlay-screen {
	z-index: 12;
	background: var(--chat-bg);
}

.message-info-header {
	gap: 0.25rem;
}

.message-info-title {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text);
}

.message-info-body {
	flex: 1;
	overflow-y: auto;
	padding: 0.9rem 0 calc(1.5rem + var(--safe-bottom));
}

.message-info-preview {
	display: flex;
	justify-content: flex-end;
	padding: 0 0.7rem 1.1rem;
}

.message-info-preview .bubble-row {
	padding-left: 0;
	max-width: 100%;
}

.message-info-section {
	margin: 0 0.7rem 0.9rem;
	background: var(--surface-2);
	border-radius: 0.9rem;
	overflow: hidden;
}

.message-info-section-title {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 0.9rem 0.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.message-info-section-title .tick {
	width: 1.05rem;
	height: 0.74rem;
	stroke: currentColor;
}

.message-info-clock {
	width: 0.9rem;
	height: 0.9rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.message-info-section-title.is-read {
	color: var(--tick-blue);
}

.message-info-person {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.5rem 0.9rem 0.6rem;
}

.message-info-person-name {
	flex: 1;
	min-width: 0;
	font-size: 0.95rem;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.message-info-person-time {
	font-size: 0.78rem;
	color: var(--text-secondary);
	white-space: nowrap;
}

.message-info-empty {
	padding: 0.2rem 0.9rem 0.8rem;
	font-size: 0.85rem;
	color: var(--text-tertiary);
}

/* ---------- REPLY / FORWARD ---------- */

.chat-reply-banner {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.85rem;
	background: var(--input-bar-bg);
	border-top: 1px solid var(--divider);
}

.chat-reply-banner.hidden {
	display: none !important;
}

.chat-reply-bar {
	width: 3px;
	align-self: stretch;
	min-height: 1.9rem;
	border-radius: 2px;
	background: #e8916a;
}

.chat-reply-banner.is-mine .chat-reply-bar {
	background: #53bdeb;
}

.chat-reply-copy {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.chat-reply-title {
	font-size: 0.78rem;
	font-weight: 600;
	color: #e8916a;
}

.chat-reply-banner.is-mine .chat-reply-title {
	color: #53bdeb;
}

.chat-reply-preview {
	font-size: 0.82rem;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-reply-thumb {
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 0.35rem;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}

.chat-reply-thumb.hidden {
	display: none !important;
}

.chat-reply-cancel {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.chat-reply-cancel svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: var(--text-tertiary);
}

.bubble-forwarded {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	margin: 0 0 0.15rem;
	font-size: 0.72rem;
	font-style: italic;
	color: var(--bubble-time);
}

.bubble-forwarded svg {
	width: 0.78rem;
	height: 0.78rem;
	fill: currentColor;
	opacity: 0.9;
}

.bubble-quote {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0 0 0.35rem;
	padding: 0;
	border-radius: 0.5rem;
	background: rgba(0, 0, 0, 0.22);
	overflow: hidden;
	cursor: pointer;
}

.bubble-row.sent .bubble-quote {
	background: rgba(0, 0, 0, 0.2);
}

.bubble-row.received .bubble-quote {
	background: rgba(0, 0, 0, 0.18);
}

/* Barra colada na borda: overflow do pai corta no radius (efeito ?vaza? na curva). */
.bubble-quote-bar {
	width: 4px;
	flex-shrink: 0;
	align-self: stretch;
	border-radius: 0;
	background: #e8916a;
}

.bubble-quote.is-mine .bubble-quote-bar {
	background: #53bdeb;
}

.bubble-quote-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.1rem;
	padding: 0.38rem 0.55rem;
}

.bubble-quote.has-thumb .bubble-quote-body {
	padding-right: 0.45rem;
}

.bubble-quote-author {
	font-size: 0.78rem;
	font-weight: 600;
	color: #e8916a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bubble-quote.is-mine .bubble-quote-author {
	color: #53bdeb;
}

.bubble-quote-text {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	font-size: 0.8rem;
	line-height: 1.25;
	color: var(--bubble-text);
	opacity: 0.78;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bubble-quote-text svg {
	width: 0.85rem;
	height: 0.85rem;
	fill: currentColor;
	flex-shrink: 0;
	opacity: 0.85;
}

.bubble-quote-thumb {
	width: 3.35rem;
	flex-shrink: 0;
	align-self: stretch;
	min-height: 3.1rem;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Localiza??o: mini-mapa escuro + pin vermelho (sem depender de URL externa) */
.bubble-quote-thumb.is-location {
	position: relative;
	background:
		linear-gradient(90deg, rgba(70, 105, 140, 0.22) 1px, transparent 1px),
		linear-gradient(rgba(70, 105, 140, 0.18) 1px, transparent 1px),
		linear-gradient(145deg, #121c28 0%, #1e3044 45%, #152433 100%);
	background-size: 0.65rem 0.65rem, 0.65rem 0.65rem, 100% 100%;
}

.bubble-quote-thumb.is-location::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 42%;
	width: 0.72rem;
	height: 0.72rem;
	margin: -0.42rem 0 0 -0.36rem;
	border-radius: 50% 50% 50% 0;
	background: #e74c3c;
	transform: rotate(-45deg);
	box-shadow: 0 0.08rem 0.18rem rgba(0, 0, 0, 0.35);
}

.bubble-quote-thumb.is-location::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 42%;
	width: 0.26rem;
	height: 0.26rem;
	margin: -0.2rem 0 0 -0.13rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	z-index: 1;
}

.bubble-row.is-jump-highlight .bubble::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.16);
	opacity: 0;
	animation: bubble-jump-flash 1.15s ease;
	pointer-events: none;
	z-index: 0;
}

.bubble-row.received.is-jump-highlight .bubble::before {
	background: rgba(33, 191, 98, 0.14);
}

.bubble-row.is-jump-highlight .bubble > * {
	position: relative;
	z-index: 1;
}

.bubble-row.is-jump-highlight .bubble > .bubble-time {
	position: absolute;
}

@keyframes bubble-jump-flash {
	0%, 100% {
		opacity: 0;
	}
	35% {
		opacity: 1;
	}
}

#viewForward.overlay-screen {
	z-index: 13;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	position: absolute;
	inset: 0;
}

.forward-header {
	gap: 0.35rem;
}

.forward-header-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.forward-title {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text);
}

.forward-subtitle {
	font-size: 0.78rem;
	color: var(--text-secondary);
}

.forward-search {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0.35rem 0.85rem 0.55rem;
	padding: 0.55rem 0.75rem;
	border-radius: 999px;
	background: var(--search-bg, rgba(118, 118, 128, 0.12));
}

.forward-search svg {
	width: 1rem;
	height: 1rem;
	fill: var(--text-tertiary);
	flex-shrink: 0;
}

.forward-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--text);
	font-size: 0.95rem;
}

.forward-body {
	flex: 1;
	overflow-y: auto;
	padding: 0 0 calc(5rem + var(--safe-bottom));
}

.forward-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.65rem 0.95rem;
	border: 0;
	background: transparent;
	color: var(--text);
	text-align: left;
	cursor: pointer;
}

.forward-row:active {
	background: rgba(0, 0, 0, 0.05);
}

.forward-select {
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	border: 1.5px solid var(--text-tertiary);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.forward-select svg {
	width: 0.85rem;
	height: 0.85rem;
	fill: #fff;
	opacity: 0;
}

.forward-row.is-selected .forward-select {
	background: var(--wa-green);
	border-color: var(--wa-green);
}

.forward-row.is-selected .forward-select svg {
	opacity: 1;
}

.forward-row .avatar {
	width: 2.7rem;
	height: 2.7rem;
	flex-shrink: 0;
}

.forward-row-name {
	flex: 1;
	min-width: 0;
	font-size: 0.98rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.forward-footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: flex-end;
	padding: 0.75rem 0.95rem calc(0.85rem + var(--safe-bottom));
	background: linear-gradient(180deg, transparent, var(--bg) 35%);
	pointer-events: none;
}

.forward-footer.hidden {
	display: none !important;
}

.forward-send {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.7rem 1.05rem;
	border: 0;
	border-radius: 999px;
	background: var(--wa-green);
	color: #fff;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.18);
}

.forward-send svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: currentColor;
}

.forward-send:active {
	transform: scale(0.97);
}

/* ---------- DADOS DO CONTATO ---------- */

#viewContactInfo.overlay-screen {
	z-index: 9;
	background: var(--app-bg);
}

#viewGroupInfo.overlay-screen {
	z-index: 8;
	background: var(--app-bg);
}

.whatsapp-app.is-contact-info-open .tabbar,
.whatsapp-app.is-group-info-open .tabbar {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.contact-info-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	min-height: calc(var(--safe-top) + 3rem);
	padding: var(--safe-top) 0.65rem 0.55rem;
	background: var(--header-bg);
	border-bottom: 1px solid var(--divider);
}

.contact-info-title {
	flex: 1;
	margin: 0;
	font-size: 1.05rem;
	font-weight: 650;
	text-align: center;
	color: var(--text);
}

.contact-info-edit {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--wa-teal);
	font-size: 0.95rem;
	font-weight: 600;
	padding: 0.4rem 0.5rem;
	cursor: pointer;
}

.contact-info-body {
	overflow-y: auto;
	padding: 0.85rem 0 calc(1.5rem + var(--safe-bottom));
	-webkit-overflow-scrolling: touch;
}

.contact-info-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.28rem;
	padding: 1.1rem 1.2rem 1.25rem;
	text-align: center;
}

.avatar-contact {
	width: 7.6rem;
	height: 7.6rem;
	font-size: 2.3rem;
	margin-bottom: 0.55rem;
	border-radius: 50%;
}

.group-info-avatar-btn {
	appearance: none;
	border: none;
	outline: none;
	background: transparent;
	padding: 0;
	margin: 0 0 0.55rem;
	position: relative;
	display: inline-flex;
	cursor: default;
	pointer-events: none;
}

.group-info-avatar-btn:not(:disabled) {
	cursor: pointer;
	pointer-events: auto;
}

.group-info-avatar-btn .avatar-contact {
	margin-bottom: 0;
}

.group-info-avatar-camera {
	position: absolute;
	right: 0.15rem;
	bottom: 0.15rem;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 999px;
	background: var(--wa-green);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px var(--app-bg, #0b141a);
	pointer-events: none;
}

.group-info-avatar-camera.hidden {
	display: none;
}

.group-info-avatar-camera svg {
	width: 0.95rem;
	height: 0.95rem;
	fill: currentColor;
}

.avatar-contact.is-placeholder svg {
	width: 42%;
	height: 42%;
}

.contact-info-name {
	font-size: 1.42rem;
	font-weight: 750;
	color: var(--text);
	line-height: 1.2;
}

.contact-info-phone,
.contact-info-push,
.contact-info-bio {
	font-size: 0.92rem;
	color: var(--text-secondary);
	line-height: 1.3;
}

.contact-info-phone.hidden,
.contact-info-push.hidden,
.contact-info-bio.hidden {
	display: none !important;
}

.contact-info-actions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.45rem;
	padding: 0 1rem 1rem;
}

.contact-action {
	appearance: none;
	border: 1px solid var(--divider);
	border-radius: 0.95rem;
	background: var(--card);
	color: var(--wa-teal);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 0.75rem 0.3rem;
	font: inherit;
	font-size: 0.72rem;
	font-weight: 560;
	cursor: pointer;
}

.contact-action-icon {
	width: 1.35rem;
	height: 1.35rem;
	display: inline-flex;
	color: var(--wa-teal);
}

.contact-action-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.contact-action:active {
	background: var(--row-press);
}

.contact-action.is-disabled {
	opacity: 0.42;
	color: var(--text-tertiary);
	cursor: default;
}

.contact-action.is-disabled .contact-action-icon {
	color: var(--text-tertiary);
}

.contact-action.is-disabled:active {
	background: var(--card);
}

.contact-info-card {
	margin: 0 1rem 0.75rem;
	background: var(--card);
	border-radius: 0.95rem;
	overflow: hidden;
}

.contact-info-section-label {
	padding: 0.75rem 0.95rem 0.25rem;
	font-size: 0.82rem;
	font-weight: 560;
	color: var(--text-secondary);
}

.contact-info-row {
	appearance: none;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.88rem 0.95rem;
	border: 0;
	border-bottom: 1px solid var(--divider);
	background: transparent;
	color: var(--text);
	text-align: left;
	font: inherit;
	font-size: 0.95rem;
	cursor: pointer;
}

.contact-info-row:last-child {
	border-bottom: 0;
}

.contact-info-row:active {
	background: var(--row-press);
}

.contact-info-row.is-accent {
	color: var(--wa-teal);
}

.contact-info-row.is-danger {
	color: var(--danger);
}

.contact-info-row.is-muted {
	color: var(--wa-teal);
	justify-content: center;
}

.contact-info-row-icon {
	width: 1.35rem;
	height: 1.35rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wa-teal);
	flex-shrink: 0;
	font-size: 1.2rem;
	font-weight: 500;
}

.contact-info-row-icon svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

.contact-info-group {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.72rem 0.95rem;
	border: 0;
	border-bottom: 1px solid var(--divider);
	background: transparent;
	color: inherit;
	text-align: left;
	font: inherit;
	cursor: pointer;
}

.contact-info-group:active {
	background: var(--row-press);
}

.contact-info-group .avatar {
	width: 2.55rem;
	height: 2.55rem;
	flex-shrink: 0;
}

.contact-info-group-copy {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.contact-info-group-name {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.contact-info-group-meta {
	font-size: 0.78rem;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.contact-info-group-sub {
	display: flex;
	flex-direction: column;
	gap: 0.08rem;
	min-width: 0;
}

.contact-info-group-role {
	font-size: 0.78rem;
	font-weight: 560;
	color: var(--wa-teal);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.contact-info-group-chevron {
	width: 0.95rem;
	height: 0.95rem;
	color: var(--text-tertiary);
	flex-shrink: 0;
}

.contact-info-group-chevron svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.group-info-member:disabled,
.group-info-member[aria-disabled="true"] {
	cursor: default;
	opacity: 1;
}

.group-info-member:disabled:active,
.group-info-member[aria-disabled="true"]:active {
	background: transparent;
}

.group-info-member.is-clickable {
	cursor: pointer;
}

/* ---------- CARD DE CONTATO (bolha) ---------- */

.bubble-contact {
	padding: 0.45rem 0.45rem 0.35rem !important;
	min-width: 13.5rem;
	overflow: hidden;
	position: relative;
}

.bubble-contact-card {
	appearance: none;
	width: 100%;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.65rem;
	padding: 0.45rem 0.5rem 1.35rem;
	border: 0;
	background: transparent;
	color: inherit;
	text-align: left;
	font: inherit;
	cursor: pointer;
}

.bubble-contact-name {
	font-size: 1.02rem;
	font-weight: 650;
	color: var(--bubble-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bubble-contact-chevron {
	width: 1rem;
	height: 1rem;
	color: var(--bubble-time);
}

.bubble-contact-chevron svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.bubble-contact .bubble-time {
	position: absolute;
	right: 0.7rem;
	top: 2.55rem;
}

.bubble-contact-action {
	appearance: none;
	width: calc(100% + 0.9rem);
	margin: 0.15rem -0.45rem -0.35rem;
	padding: 0.72rem 0.75rem;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	background: transparent;
	color: var(--wa-teal);
	font: inherit;
	font-size: 1rem;
	font-weight: 620;
	cursor: pointer;
}

.bubble-row.received .bubble-contact-action {
	border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .bubble-row.received .bubble-contact-action {
	border-top-color: rgba(255, 255, 255, 0.1);
}

/* ---------- TOAST DESFAZER ---------- */

.wa-undo-toast {
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: calc(var(--safe-bottom) + 1.1rem);
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border-radius: 999px;
	background: rgba(36, 36, 36, 0.96);
	color: #f2f2f2;
	box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.28);
	animation: wa-undo-in 0.28s var(--ease-ios);
}

.whatsapp-app.is-chat-open .wa-undo-toast {
	bottom: calc(var(--safe-bottom) + 4.6rem);
}

.whatsapp-app.is-forward-open .tabbar {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.wa-undo-toast.hidden {
	display: none !important;
}

.wa-undo-text {
	font-size: 0.9rem;
	font-weight: 500;
	min-width: 0;
}

.wa-undo-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--wa-teal);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	flex-shrink: 0;
	padding: 0.15rem 0.1rem;
}

@keyframes wa-undo-in {
	from {
		opacity: 0;
		transform: translateY(1.1rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- ADICIONAR AO GRUPO (sheet) ---------- */

.admin-group-scrim {
	position: absolute;
	inset: 0;
	z-index: 70;
	background: rgba(0, 0, 0, 0.45);
}

.admin-group-scrim.hidden {
	display: none !important;
}

.admin-group-sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 71;
	max-height: 70%;
	display: flex;
	flex-direction: column;
	padding: 1rem 1rem calc(1rem + var(--safe-bottom));
	border-radius: 1.1rem 1.1rem 0 0;
	background: var(--card);
	transform: translateY(110%);
	transition: transform 0.32s var(--ease-ios);
	visibility: hidden;
}

.admin-group-sheet.is-open {
	transform: translateY(0);
	visibility: visible;
}

/* ---------- ADICIONAR PARTICIPANTES (sheet) ---------- */

.add-members-scrim {
	position: absolute;
	inset: 0;
	z-index: 72;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.28s var(--ease-ios);
	pointer-events: none;
}

.add-members-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.add-members-scrim.hidden {
	display: none !important;
}

.add-members-sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 73;
	height: min(88%, 36rem);
	display: flex;
	flex-direction: column;
	border-radius: 1.1rem 1.1rem 0 0;
	background: var(--bg);
	transform: translateY(110%);
	transition: transform 0.34s var(--ease-ios);
	visibility: hidden;
	overflow: hidden;
}

.add-members-sheet.is-open {
	transform: translateY(0);
	visibility: visible;
}

.add-members-header {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.85rem 0.9rem 0.55rem;
	flex-shrink: 0;
}

.add-members-close {
	appearance: none;
	border: 0;
	background: transparent;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	cursor: pointer;
	padding: 0;
}

.add-members-close svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

.add-members-header-copy {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.add-members-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
	line-height: 1.2;
}

.add-members-subtitle {
	font-size: 0.78rem;
	color: var(--text-secondary);
}

.add-members-confirm {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--wa-teal);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	padding: 0.35rem 0.25rem;
}

.add-members-confirm:disabled {
	opacity: 0.35;
	cursor: default;
}

.add-members-search {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0.9rem 0.55rem;
	padding: 0.55rem 0.75rem;
	border-radius: 0.75rem;
	background: var(--card);
	flex-shrink: 0;
}

.add-members-search svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: var(--text-tertiary);
	flex-shrink: 0;
}

.add-members-search input {
	appearance: none;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 0.92rem;
	width: 100%;
	min-width: 0;
}

.add-members-body {
	flex: 1;
	overflow-y: auto;
	padding: 0 0.55rem calc(1rem + var(--safe-bottom));
	-webkit-overflow-scrolling: touch;
}

.add-members-body .compose-section {
	margin-bottom: 0.55rem;
}

.add-members-body .compose-contact.is-member {
	opacity: 0.45;
	pointer-events: none;
}

.whatsapp-app.is-add-members-open .tabbar {
	visibility: hidden;
}

.admin-group-title {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
	text-align: center;
}

.admin-group-hint {
	margin: 0 0 0.75rem;
	font-size: 0.82rem;
	color: var(--text-secondary);
	text-align: center;
}

.admin-group-list {
	overflow-y: auto;
	flex: 1;
	min-height: 0;
	margin: 0 -0.25rem 0.75rem;
}

.admin-group-item {
	appearance: none;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 0.55rem;
	border: 0;
	border-bottom: 1px solid var(--divider);
	background: transparent;
	color: var(--text);
	text-align: left;
	font: inherit;
	cursor: pointer;
}

.admin-group-item:disabled {
	opacity: 0.45;
	cursor: default;
}

.admin-group-item .avatar {
	width: 2.4rem;
	height: 2.4rem;
}

.admin-group-item-name {
	flex: 1;
	min-width: 0;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.admin-group-cancel {
	appearance: none;
	width: 100%;
	border: 0;
	border-radius: 0.8rem;
	background: var(--surface-2);
	color: var(--text);
	font: inherit;
	font-weight: 620;
	padding: 0.85rem;
	cursor: pointer;
}

/* =========================================================================
   STATUS (STORIES)
   ========================================================================= */

.status-content {
	padding-bottom: 5.5rem;
}

.status-list {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.status-row {
	appearance: none;
	border: 0;
	background: transparent;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.65rem 1rem;
	text-align: left;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.status-row:active {
	background: var(--surface-2);
}

.status-avatar-wrap {
	position: relative;
	width: 3.55rem;
	height: 3.55rem;
	flex: 0 0 auto;
}

.status-avatar-wrap .avatar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2.5rem;
	height: 2.5rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	z-index: 1;
}

.status-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
}

.status-ring-track {
	stroke: transparent;
	fill: none;
}

.status-ring-seg {
	fill: none;
}

.status-ring-seg.is-unseen {
	stroke: var(--wa-green, #21bf62);
}

.status-ring-seg.is-viewed {
	stroke: #9aa3a7;
}

[data-theme="dark"] .status-ring-seg.is-viewed {
	stroke: #667075;
}

.status-add-badge {
	position: absolute;
	right: 0.08rem;
	bottom: 0.08rem;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: var(--wa-green, #21bf62);
	color: #fff;
	display: grid;
	place-items: center;
	border: 0.14rem solid var(--bg, #fff);
	z-index: 2;
}

.status-add-badge svg {
	width: 0.72rem;
	height: 0.72rem;
}

.status-add-badge.hidden,
.status-ring.hidden {
	display: none;
}

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

.status-row-name {
	font-weight: 650;
	font-size: 1.02rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.status-row-time {
	font-size: 0.86rem;
	color: var(--muted, #667781);
}

.status-section-label {
	padding: 0.85rem 1rem 0.35rem;
	font-size: 0.9rem;
	font-weight: 650;
	color: var(--muted, #667781);
}

.status-encrypted {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 1.2rem 1.2rem 0;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--muted, #667781);
	text-align: left;
}

.status-encrypted svg {
	width: 0.95rem;
	height: 0.95rem;
	flex: 0 0 auto;
	margin-top: 0.1rem;
	fill: currentColor;
	opacity: 0.85;
}

.status-fabs {
	position: absolute;
	right: 1rem;
	/* Acima da tabbar (screen j? tem padding-bottom = tabbar; bottom conta da borda) */
	bottom: calc(var(--tabbar-height) + 0.85rem);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.7rem;
	z-index: 6;
	pointer-events: none;
}

.status-fab {
	pointer-events: auto;
	appearance: none;
	border: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 0.25rem 0.8rem rgba(0, 0, 0, 0.18);
}

.status-fab svg {
	fill: currentColor;
}

.status-fab-text {
	width: 2.35rem;
	height: 2.35rem;
	background: var(--surface-2, #e9edef);
	color: #54656f;
}

.status-fab-camera {
	width: 3.35rem;
	height: 3.35rem;
	background: var(--wa-green, #21bf62);
	color: #fff;
}

.status-fab-camera svg {
	width: 1.25rem;
	height: 1.25rem;
}

.status-fab-text svg {
	width: 1.05rem;
	height: 1.05rem;
}

.avatar.has-status-ring {
	box-shadow: 0 0 0 0.14rem var(--bg, #fff), 0 0 0 0.28rem var(--wa-green, #21bf62);
	cursor: pointer;
}

#viewStatusViewer.overlay-screen {
	z-index: 6;
}

#viewStatusText.overlay-screen {
	z-index: 50;
}

.status-viewer {
	background: #000;
	color: #fff;
	--viewer-head-top: var(--safe-top);
}

.status-viewer-progress {
	position: absolute;
	top: calc(var(--viewer-head-top) - 0.48rem);
	left: 0.7rem;
	right: 0.7rem;
	display: flex;
	gap: 0.2rem;
	z-index: 3;
}

.status-progress-seg {
	flex: 1;
	height: 0.16rem;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.28);
	overflow: hidden;
}

.status-progress-fill {
	display: block;
	height: 100%;
	width: 0;
	background: #fff;
}

.status-progress-seg.is-done .status-progress-fill {
	width: 100%;
	transition: none;
}

.status-viewer-header {
	position: absolute;
	top: var(--viewer-head-top);
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.15rem 0.7rem 0.35rem;
	z-index: 3;
}

.status-viewer-back {
	appearance: none;
	border: 0;
	background: transparent;
	color: #fff;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
}

.status-viewer-back svg {
	width: 1.35rem;
	height: 1.35rem;
}

.status-viewer-avatar {
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
}

.status-viewer-meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.status-viewer-name {
	font-weight: 650;
	font-size: 0.95rem;
}

.status-viewer-time {
	font-size: 0.75rem;
	opacity: 0.8;
}

.status-viewer-body {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: calc(var(--viewer-head-top) + 3.35rem) 0.75rem 5.2rem;
}

.status-viewer-media {
	width: 100%;
	max-height: 100%;
	display: grid;
	place-items: center;
}

.status-viewer-media img,
.status-viewer-media video {
	max-width: 100%;
	max-height: min(70vh, 28rem);
	object-fit: contain;
	border-radius: 0.2rem;
}

.status-viewer-media.is-text {
	min-height: 12rem;
	padding: 1.4rem;
	font-size: 1.45rem;
	font-weight: 650;
	line-height: 1.35;
	text-align: center;
	word-break: break-word;
}

.status-viewer-caption {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 5.4rem;
	text-align: center;
	font-size: 0.95rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.status-viewer-nav {
	position: absolute;
	top: calc(var(--viewer-head-top) + 2.85rem);
	bottom: 4.6rem;
	width: 42%;
	z-index: 2;
}

.status-viewer-nav-prev { left: 0; }
.status-viewer-nav-next { right: 0; }

.status-viewer-footer {
	position: absolute;
	left: 0.7rem;
	right: 0.7rem;
	bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	z-index: 3;
}

.status-viewer-footer.hidden { display: none; }

.status-viewer-input {
	flex: 1;
	min-width: 0;
	appearance: none;
	border: 0;
	outline: none;
	border-radius: 999px;
	background: rgba(40, 40, 40, 0.92);
	color: #fff;
	font: inherit;
	font-size: 0.95rem;
	padding: 0.72rem 1rem;
}

.status-viewer-input::placeholder { color: rgba(255, 255, 255, 0.55); }

.status-viewer-send {
	appearance: none;
	border: 0;
	width: 2.55rem;
	height: 2.55rem;
	border-radius: 50%;
	background: rgba(40, 40, 40, 0.92);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.status-viewer-send svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

.status-text-composer {
	background: var(--app-bg);
	/* Sem slide horizontal: focus() no textarea + transform desloca o CEF */
	transform: none !important;
}

.status-text-composer.overlay-screen {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.status-text-composer.overlay-screen.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none !important;
	transition: opacity 0.18s ease, visibility 0s linear 0s;
}

.status-text-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	min-height: calc(var(--safe-top) + 3rem);
	padding: var(--safe-top) 0.65rem 0.55rem;
	background: var(--header-bg);
	border-bottom: 1px solid var(--divider);
}

.status-text-title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 1.05rem;
	font-weight: 650;
	text-align: center;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.status-text-send {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--wa-green, #21bf62);
	font: inherit;
	font-size: 0.98rem;
	font-weight: 700;
	padding: 0.45rem 0.55rem;
	cursor: pointer;
	flex-shrink: 0;
}

.status-text-body {
	flex: 1;
	min-height: 0;
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.status-compose-preview {
	width: 100%;
	display: grid;
	place-items: center;
}

.status-compose-preview.hidden {
	display: none;
}

.status-compose-image {
	display: block;
	width: 100%;
	max-height: 14rem;
	object-fit: contain;
	border-radius: 0.65rem;
	background: #000;
}

.status-compose-image.hidden,
.status-compose-video.hidden {
	display: none !important;
}

.status-compose-video {
	pointer-events: none;
}

.status-text-composer.has-media .status-text-input {
	min-height: 4.5rem;
}

.status-text-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 12rem;
	resize: none;
	border: 0;
	outline: none;
	background: var(--surface-2, #f0f2f5);
	color: var(--text);
	border-radius: 0.9rem;
	padding: 1rem;
	font: inherit;
	font-size: 1.15rem;
	line-height: 1.4;
}

.header-action-text {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--wa-green, #21bf62);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	padding: 0.35rem 0.2rem;
}

.bubble-quote.is-status .bubble-quote-author { color: #53bdeb; }

.bubble-quote-status-icon {
	width: 0.95rem;
	height: 0.95rem;
	margin-right: 0.28rem;
	vertical-align: -0.12rem;
	display: inline-block;
}

/* =========================================================================
   CHAT COMPOSER (anexos + voz) ? estilo WhatsApp iOS
   ========================================================================= */

.chat-composer {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	background: var(--input-bar-bg);
	border-top: 1px solid var(--divider);
}

.chat-input-bar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 0.65rem 0.35rem;
	background: transparent;
	border-top: 0;
	box-sizing: border-box;
}

/* Mesma altura/inset do tabbar da listagem — evita o input “descer” no chat */
.chat-composer:not(.is-recording) .chat-input-bar {
	min-height: var(--tabbar-height);
	padding-bottom: calc(var(--chrome-bottom-pad) + var(--safe-bottom));
}

.chat-composer.is-attach-open .chat-input-bar {
	min-height: 0;
	padding-bottom: 0.35rem;
}

.chat-input-bar > .icon-btn,
.chat-input-bar > .chat-cam-btn {
	width: 1.7rem;
	height: 1.7rem;
	color: var(--text);
	flex-shrink: 0;
}

.chat-attach-toggle .icon-chevron-down,
.chat-composer.is-attach-open .chat-attach-toggle .icon-plus {
	display: none;
}

.chat-composer.is-attach-open .chat-attach-toggle .icon-chevron-down {
	display: block;
}

.chat-attach-toggle .icon-chevron-down {
	fill: #ffffff;
}

[data-theme="light"] .chat-attach-toggle .icon-chevron-down {
	fill: currentColor;
}

.chat-input-field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	background: var(--input-field-bg);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 1.45rem;
	padding: 0.48rem 0.55rem 0.48rem 0.95rem;
	min-height: 2.45rem;
	min-width: 0;
	box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .chat-input-field {
	border-color: rgba(22, 22, 22, 0.06);
	box-shadow: 0 0.5px 1px rgba(22, 22, 22, 0.04);
}

.chat-input-field input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-size: 0.98rem;
	line-height: 1.25;
	color: var(--text);
}

.chat-input-field input::placeholder {
	color: var(--text-tertiary);
}

.chat-cam-btn svg,
.chat-attach-toggle svg {
	width: 1.55rem;
	height: 1.55rem;
	fill: currentColor;
}

.send-btn {
	width: 2.15rem;
	height: 2.15rem;
	border-radius: 50%;
	background: transparent;
	color: var(--text);
	flex-shrink: 0;
	transition: transform 0.15s var(--ease-ios), background 0.15s var(--ease-ios), color 0.15s var(--ease-ios);
}

.chat-input-bar.is-typing .send-btn {
	background: var(--wa-green);
	color: #ffffff;
}

.send-btn:active {
	transform: scale(0.9);
}

.send-btn svg {
	width: 1.4rem;
	height: 1.4rem;
	fill: currentColor;
}

.send-btn .icon-send,
.chat-input-bar.is-typing .send-btn .icon-mic {
	display: none;
}

.chat-input-bar.is-typing .send-btn .icon-send {
	display: block;
}

/* Painel de anexos ? oculto at? clicar no + */
.chat-attach-panel {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
	transition: max-height 0.32s var(--ease-ios), opacity 0.22s var(--ease-ios), visibility 0s linear 0.32s;
}

.chat-composer.is-attach-open .chat-attach-panel {
	max-height: 14.5rem;
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transition: max-height 0.32s var(--ease-ios), opacity 0.22s var(--ease-ios), visibility 0s linear 0s;
}

.chat-attach-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.85rem 0.4rem;
	padding: 0.85rem 0.75rem calc(var(--safe-bottom) + 2.4rem);
	background: rgba(28, 28, 30, 0.96);
	border-radius: 1.1rem 1.1rem 0 0;
	margin: 0.15rem 0.35rem 0;
}

[data-theme="light"] .chat-attach-grid {
	background: rgba(242, 242, 247, 0.98);
}

.chat-attach-item {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	padding: 0;
	cursor: pointer;
}

.chat-attach-item:active {
	opacity: 0.72;
}

.chat-attach-icon {
	width: 3.85rem;
	height: 3.85rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(72, 72, 74, 0.92);
	color: #ffffff;
}

[data-theme="light"] .chat-attach-icon {
	background: rgba(229, 229, 234, 0.95);
	color: #1c1c1e;
}

.chat-attach-icon svg {
	width: 2.15rem;
	height: 2.15rem;
	fill: currentColor;
}

.chat-attach-icon.is-photos { color: #5ac8fa; }
.chat-attach-icon.is-camera { color: #ffffff; }
.chat-attach-icon.is-location { color: #30d158; }
.chat-attach-icon.is-contact { color: #ffffff; }

[data-theme="light"] .chat-attach-icon.is-photos { color: #007aff; }
[data-theme="light"] .chat-attach-icon.is-camera { color: #1c1c1e; }
[data-theme="light"] .chat-attach-icon.is-location { color: #34c759; }
[data-theme="light"] .chat-attach-icon.is-contact { color: #1c1c1e; }

.chat-attach-label {
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--text);
	text-align: center;
	line-height: 1.15;
}

/* Grava??o de ?udio */
.chat-voice-bar {
	--voice-side: 2.7rem;
	--voice-action: 3.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.95rem;
	padding: 0.85rem 1.05rem calc(var(--chrome-bottom-pad) + var(--safe-bottom));
	background: var(--input-bar-bg);
}

.chat-voice-bar.hidden {
	display: none !important;
}

.chat-composer.is-recording .chat-input-bar,
.chat-composer.is-recording .chat-attach-panel {
	display: none;
}

.chat-voice-top {
	position: relative;
	min-height: 1.55rem;
}

.chat-voice-bar.is-paused .chat-voice-top {
	min-height: 2.35rem;
}

.chat-voice-timeline {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(0.1rem);
	transition:
		opacity 0.2s ease,
		visibility 0.2s ease,
		transform 0.2s ease;
}

.chat-voice-timeline.is-live {
	display: block;
}

.chat-voice-timeline.is-preview {
	display: flex;
	align-items: center;
	min-height: 2.35rem;
}

.chat-voice-timeline.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.chat-voice-live-head {
	display: grid;
	grid-template-columns: var(--voice-side) minmax(0, 1fr);
	align-items: center;
	column-gap: 0.45rem;
	width: 100%;
	min-height: 1.55rem;
}

.chat-voice-timer {
	font-size: 1.02rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--text);
	line-height: 1;
	text-align: center;
	width: 100%;
}

.chat-voice-wave {
	min-width: 0;
	height: 1.45rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.1rem;
	overflow: hidden;
}

.chat-voice-wave span {
	flex: 1 1 0;
	min-width: 0.1rem;
	max-width: 0.17rem;
	border-radius: 999px;
	align-self: center;
	transition: height 0.08s linear, background 0.08s linear;
}

.chat-voice-wave span.is-dot {
	flex: 0 0 0.13rem;
	width: 0.13rem;
	height: 0.13rem !important;
	min-height: 0.13rem;
	max-width: 0.13rem;
	background: rgba(233, 237, 229, 0.32);
}

.chat-voice-wave span.is-bar {
	height: 18%;
	min-height: 0.18rem;
	background: rgba(233, 237, 229, 0.82);
}

[data-theme="light"] .chat-voice-wave span.is-dot {
	background: rgba(17, 27, 33, 0.22);
}

[data-theme="light"] .chat-voice-wave span.is-bar {
	background: rgba(17, 27, 33, 0.55);
}

.chat-voice-preview-pill {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	min-height: 2.35rem;
	padding: 0.35rem 0.7rem 0.35rem 0.55rem;
	border-radius: 999px;
	background: rgba(42, 48, 54, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .chat-voice-preview-pill {
	background: rgba(233, 237, 240, 0.96);
	border-color: rgba(0, 0, 0, 0.06);
	box-shadow: none;
}

.chat-voice-preview-play {
	appearance: none;
	border: 0;
	background: transparent;
	color: rgba(233, 237, 229, 0.72);
	width: 1.35rem;
	height: 1.35rem;
	padding: 0;
	display: grid;
	place-items: center;
	cursor: pointer;
	flex-shrink: 0;
}

[data-theme="light"] .chat-voice-preview-play {
	color: rgba(17, 27, 33, 0.55);
}

.chat-voice-preview-play svg {
	width: 0.95rem;
	height: 0.95rem;
	fill: currentColor;
}

.chat-voice-preview-play .icon-pause,
.chat-voice-preview-play.is-playing .icon-play {
	display: none;
}

.chat-voice-preview-play.is-playing .icon-pause {
	display: block;
}

.chat-voice-preview-track {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 1.55rem;
	display: flex;
	align-items: center;
}

.chat-voice-preview-wave {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.14rem;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding-left: 0.35rem;
}

.chat-voice-preview-wave .is-bar {
	flex: 0 0 0.16rem;
	width: 0.16rem;
	min-width: 0.16rem;
	max-width: 0.16rem;
	min-height: 0.16rem;
	border-radius: 0.08rem;
	background: rgba(233, 237, 229, 0.42);
	height: 28%;
}

.chat-voice-preview-wave .is-bar.is-played {
	background: rgba(233, 237, 229, 0.78);
}

[data-theme="light"] .chat-voice-preview-wave .is-bar {
	background: rgba(17, 27, 33, 0.28);
}

[data-theme="light"] .chat-voice-preview-wave .is-bar.is-played {
	background: rgba(17, 27, 33, 0.55);
}

.chat-voice-preview-wave .is-dot {
	flex: 0 0 0.16rem;
	width: 0.16rem;
	height: 0.16rem;
	border-radius: 50%;
	background: rgba(233, 237, 229, 0.28);
}

[data-theme="light"] .chat-voice-preview-wave .is-dot {
	background: rgba(17, 27, 33, 0.18);
}

.chat-voice-preview-scrubber {
	position: absolute;
	left: 0;
	top: 50%;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--wa-green);
	transform: translate(-35%, -50%);
	z-index: 2;
	pointer-events: none;
	box-shadow: 0 0 0 0.12rem rgba(37, 211, 102, 0.18);
}

.chat-voice-preview-timer {
	flex-shrink: 0;
	font-size: 0.86rem;
	font-weight: 560;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.92);
	min-width: 2.2rem;
	text-align: right;
}

[data-theme="light"] .chat-voice-preview-timer {
	color: rgba(17, 27, 33, 0.88);
}

.chat-voice-actions {
	display: grid;
	grid-template-columns: var(--voice-side) minmax(0, 1fr) var(--voice-action);
	align-items: center;
	column-gap: 0.45rem;
	padding: 0;
}

.chat-voice-trash,
.chat-voice-pause,
.chat-voice-send {
	appearance: none;
	border: 0;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.chat-voice-trash {
	width: 100%;
	height: 2.55rem;
	padding: 0;
	margin: 0;
	background: transparent;
	color: var(--text);
}

.chat-voice-trash svg {
	width: 1.35rem;
	height: 1.35rem;
	fill: currentColor;
}

.chat-voice-pause {
	width: var(--voice-action);
	height: var(--voice-action);
	margin: 0 auto;
	border-radius: 50%;
	background: #ff3b30;
	color: #ffffff;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.chat-voice-pause svg {
	width: 1.2rem;
	height: 1.2rem;
	fill: currentColor;
}

.chat-voice-pause .icon-resume,
.chat-voice-pause.is-paused .icon-pause {
	display: none;
}

.chat-voice-pause.is-paused {
	background: transparent;
	color: #ff3b30;
	box-shadow: inset 0 0 0 0.16rem #ff3b30;
}

.chat-voice-pause.is-paused .icon-resume {
	display: block;
	width: 1.45rem;
	height: 1.45rem;
}

.chat-voice-send {
	width: var(--voice-action);
	height: var(--voice-action);
	border-radius: 50%;
	background: var(--wa-green);
	color: #111111;
	justify-self: center;
}

.chat-voice-send svg {
	width: 1.2rem;
	height: 1.2rem;
	fill: currentColor;
	margin-left: 0.1rem;
}

/* Pick / shared contacts overlays */
.pick-contacts-screen,
.shared-contacts-screen {
	background: var(--app-bg);
}

.pick-contacts-header,
.shared-contacts-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: var(--safe-top) 0.75rem 0.65rem;
	background: var(--app-bg);
}

.pick-contacts-titles {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.pick-contacts-titles h1,
.shared-contacts-header h1 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
}

.pick-contacts-titles span {
	font-size: 0.78rem;
	color: var(--text-secondary);
}

.pick-contacts-send {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--wa-teal);
	font: inherit;
	font-weight: 650;
	font-size: 0.95rem;
	cursor: pointer;
	padding: 0.35rem 0.2rem;
}

.pick-contacts-send:disabled {
	opacity: 0.35;
	cursor: default;
}

.pick-contacts-search {
	margin: 0 0.85rem 0.55rem;
}

.pick-contacts-body,
.shared-contacts-body {
	flex: 1;
	overflow-y: auto;
	padding: 0 0 calc(var(--safe-bottom) + 0.75rem);
}

.shared-contact-row {
	appearance: none;
	width: 100%;
	border: 0;
	background: transparent;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 1rem;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.shared-contact-row:active {
	background: var(--surface-2);
}

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

.shared-contact-name {
	font-weight: 620;
	font-size: 0.98rem;
}

.shared-contact-number {
	font-size: 0.8rem;
	color: var(--text-secondary);
}

.bubble-contact.is-multi .bubble-contact-action {
	color: var(--wa-teal);
}

.pick-contacts-body .compose-directory {
	padding: 0 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.pick-contacts-body .compose-contact {
	width: 100%;
}

.pick-contacts-body .compose-check {
	opacity: 0.25;
}

.pick-contacts-body .compose-contact.is-selected .compose-check {
	opacity: 1;
}

.pick-contacts-empty {
	margin: 1.5rem 1rem 0;
	text-align: center;
	color: var(--text-secondary);
	font-size: 0.9rem;
	line-height: 1.45;
}

/* =========================================================================
   MEDIA EDITOR (preview + canvas de desenho)
   ========================================================================= */

.media-editor {
	position: absolute;
	inset: 0;
	z-index: 80;
	display: none;
	flex-direction: column;
	background: #000;
	color: #fff;
	overflow: hidden;
}

.media-editor.is-open {
	display: flex;
}

.media-editor.is-drawing {
	cursor: none;
}

.media-editor-stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.media-editor-image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	user-select: none;
	pointer-events: none;
}

.media-editor-video {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background: #000;
}

.media-editor-video.hidden {
	display: none;
}

.media-editor.is-video .media-editor-canvas,
.media-editor.is-video .media-editor-cursor,
.media-editor.is-video .media-editor-sliders {
	display: none !important;
}

.media-editor.is-video .media-editor-top-preview .media-editor-top-right {
	visibility: hidden;
	pointer-events: none;
}

.media-editor-canvas {
	position: absolute;
	left: 0;
	top: 0;
	touch-action: none;
	pointer-events: none;
}

.media-editor.is-drawing .media-editor-canvas {
	pointer-events: auto;
}

.media-editor-cursor {
	position: absolute;
	width: 1rem;
	height: 1rem;
	margin: -0.5rem 0 0 -0.5rem;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
	pointer-events: none;
	z-index: 5;
	transform: translate3d(0, 0, 0);
	will-change: width, height, left, top;
}

.media-editor-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 7;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc(var(--safe-top) + 0.35rem) 0.75rem 0.55rem;
	pointer-events: none;
}

.media-editor-top > * {
	pointer-events: auto;
}

.media-editor-top.hidden {
	display: none !important;
}

.media-editor-top-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.45rem;
	min-height: 2.35rem;
}

.media-editor-top-right .media-editor-round.hidden {
	display: none !important;
}

.media-editor-round {
	appearance: none;
	border: none;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 50%;
	background: rgba(30, 30, 30, 0.72);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
}

.media-editor-round svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

.media-editor-round.is-accent {
	background: var(--wa-green);
	color: #0b1a12;
}

.media-editor-round.is-accent.is-active {
	color: #fff;
}

.media-editor-round.is-ghost {
	background: transparent;
	color: #fff;
	box-shadow: none;
}

.media-editor-round.is-ghost svg {
	width: 1.45rem;
	height: 1.45rem;
}

.media-editor-round.is-ghost svg path {
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 0.55;
	stroke-linejoin: round;
	stroke-linecap: round;
	paint-order: stroke fill;
}

.media-editor-round.is-ghost:active {
	opacity: 0.7;
}

.media-editor-round.is-check {
	display: grid;
	place-items: center;
	padding: 0;
}

.media-editor-round.is-check svg {
	width: 1.85rem;
	height: 1.85rem;
	display: block;
	margin: 0;
}

.media-editor-round.hidden {
	display: none !important;
}

.media-editor-sliders {
	position: absolute;
	right: 0.85rem;
	top: calc(var(--safe-top) + 3.35rem);
	transform: none;
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 0;
	align-items: center;
	padding-top: 0.15rem;
}

.media-editor-sliders.hidden {
	display: none !important;
}

.media-editor-pencil {
	flex-shrink: 0;
}

.media-editor-slider-wrap {
	position: relative;
	width: 1.55rem;
	height: 9.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: none;
}

.media-editor-slider-wrap.is-color {
	margin-bottom: 1rem;
}

.media-editor-slider-wrap.is-size {
	margin-bottom: 0;
}

.media-editor-slider-track {
	position: relative;
	width: 0.72rem;
	height: 100%;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	overflow: visible;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.media-editor-slider-track.is-color {
	background: linear-gradient(
		180deg,
		#ffffff 0%,
		#111111 12%,
		#ff3b30 28%,
		#ff9500 40%,
		#ffcc00 50%,
		#34c759 62%,
		#5ac8fa 74%,
		#007aff 84%,
		#af52de 94%,
		#ff2d55 100%
	);
}

.media-editor-slider-track.is-size {
	background: linear-gradient(180deg, #f2f2f2 0%, #1c1c1e 100%);
}

.media-editor-slider-knob {
	position: absolute;
	left: 50%;
	width: 1.15rem;
	height: 1.15rem;
	margin-left: -0.575rem;
	margin-top: -0.575rem;
	border-radius: 50%;
	background: #fff;
	border: 2px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.media-editor-footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 0.65rem 0.8rem calc(var(--safe-bottom) + 0.55rem);
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.82));
}

.media-editor.is-drawing .media-editor-footer {
	display: none;
}

.media-editor-caption {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.55rem;
	padding: 0.45rem 0.75rem;
	border-radius: 999px;
	background: rgba(44, 44, 46, 0.92);
	color: rgba(235, 235, 245, 0.55);
	font-size: 0.92rem;
	cursor: text;
}

.media-editor-caption-cam {
	width: 1.25rem;
	height: 1.25rem;
	display: grid;
	place-items: center;
	color: #fff;
	flex-shrink: 0;
}

.media-editor-caption-cam svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

.media-editor-caption-input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 0.92rem;
	line-height: 1.25;
	padding: 0;
	margin: 0;
}

.media-editor-caption-input::placeholder {
	color: rgba(235, 235, 245, 0.55);
}

.media-editor-footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.media-editor-notes {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.85rem;
	padding: 0.28rem 0.8rem;
	border-radius: 0.7rem;
	background: rgba(58, 58, 60, 0.95);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 560;
	opacity: 0.55;
	pointer-events: none;
}

.media-editor-send {
	appearance: none;
	border: none;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--wa-green);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.media-editor-send svg {
	width: 1.35rem;
	height: 1.35rem;
	fill: currentColor;
	margin-left: 0.1rem;
}

.media-editor-footer-row .media-editor-notes {
	margin-right: auto;
}

.bubble-media-draw {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.bubble-media.is-media-only .bubble-media-frame::after {
	z-index: 2;
}

.bubble-media.is-media-only .bubble-time {
	z-index: 3;
}