/**
 * Snap Channels — Frontend Styles v1.6.0
 * Design system: MyCityGov (navy/blue/gold/green) — modernized.
 * WCAG AA contrast throughout. LVHA order. No emoji for functional UI.
 */

/* ==========================================================================
 * FULL-BLEED MODE — when /channels/ uses the fullscreen template, the body
 * gets `.snapch-fullscreen-body` and the app renders edge-to-edge.
 * ========================================================================== */
body.snapch-fullscreen-body {
	margin: 0 !important;
	padding: 0 !important;
	background: #0B1D3A !important;
	overflow: hidden;
}
body.snapch-fullscreen-body > .snapch-fullscreen-shell {
	width: 100vw;
	height: 100vh;
	height: 100dvh; /* dynamic viewport for mobile address-bar safe area */
	display: flex;
	flex-direction: column;
	background: #F5F7FB;
}
body.snapch-fullscreen-body > .snapch-fullscreen-shell > * { flex: 1; min-height: 0; }
/* When the app is the only thing on screen, override the boxed sizing */
body.snapch-fullscreen-app .snapch-app {
	height: 100% !important;
	min-height: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	border-radius: 0 !important;
}
body.snapch-fullscreen-app .snapch-app .snapch-shell {
	border-radius: 0 !important;
	border: none !important;
	height: 100% !important;
}
/* Hide any stray theme-injected wrapper elements */
body.snapch-fullscreen-body > #wpadminbar { display: none !important; }
html.snapch-fullscreen { margin-top: 0 !important; }

.snapch-app,
.snapch-app * { box-sizing: border-box; }

/* Prevent theme img max-width rules from stretching plugin avatars */
.snapch-app img.snapch-avatar,
.snapch-app img.snapch-msg-avatar {
	max-width: none !important;
	height: auto;
}

.snapch-app {
	/* Palette */
	--sc-navy: #0B1D3A;
	--sc-navy-2: #0F2347;
	--sc-blue: #1258C2;
	--sc-blue-dark: #0E47A1;
	--sc-blue-soft: #EEF4FE;
	--sc-gold: #E8A838;
	--sc-green: #2ECC71;
	--sc-green-soft: #DCFCE7;
	--sc-amber: #F59E0B;
	--sc-red: #DC2626;
	--sc-red-soft: #FEE2E2;

	--sc-bg: #F5F7FB;
	--sc-surface: #FFFFFF;
	--sc-surface-2: #F9FAFB;
	--sc-surface-3: #F3F4F6;
	--sc-border: #E5E7EB;
	--sc-border-strong: #D1D5DB;
	--sc-text: #0F172A;
	--sc-text-soft: #334155;
	--sc-text-muted: #64748B;
	--sc-text-faint: #94A3B8;

	--sc-radius-sm: 8px;
	--sc-radius: 12px;
	--sc-radius-lg: 16px;

	--sc-shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
	--sc-shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
	--sc-shadow-md: 0 4px 12px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
	--sc-shadow-lg: 0 20px 40px -12px rgba(15,23,42,0.16), 0 8px 16px -8px rgba(15,23,42,0.08);

	--sc-sidebar-width: 300px;
	--sc-thread-width: 420px;
	--sc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sc-text);
	background: var(--sc-bg);

	/* Adapts to any theme chrome — generous min, hard cap, responsive middle */
	height: min(calc(100vh - 180px), 880px);
	min-height: 620px;
	max-width: 1400px;
	margin: 28px auto;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.snapch-app h1,
.snapch-app h2,
.snapch-app h3 {
	font-family: 'DM Serif Display', Georgia, serif;
	color: var(--sc-navy);
	font-weight: normal;
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.3;
	padding: 0;
}

.snapch-boot {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	height: 400px; color: var(--sc-text-muted); gap: 14px;
}
.snapch-spinner {
	width: 32px; height: 32px;
	border: 3px solid var(--sc-border); border-top-color: var(--sc-blue);
	border-radius: 50%; animation: snapch-spin 0.7s linear infinite;
}
@keyframes snapch-spin { to { transform: rotate(360deg); } }

/* ==========  SHELL  ========== */
/* ==========  SHELL  ========== */
.snapch-shell {
	display: grid;
	grid-template-columns: var(--sc-sidebar-width) 1fr;
	height: 100%;
	min-height: 0;
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius-lg);
	overflow: hidden;
	box-shadow: var(--sc-shadow-md);
}
.snapch-shell.has-rail {
	grid-template-columns: 70px var(--sc-sidebar-width) 1fr;
}
.snapch-shell.has-rail:has(.snapch-thread-panel) {
	grid-template-columns: 70px var(--sc-sidebar-width) 1fr var(--sc-thread-width);
}
.snapch-shell:has(.snapch-thread-panel) {
	grid-template-columns: var(--sc-sidebar-width) 1fr var(--sc-thread-width);
}
.snapch-shell > * { min-height: 0; min-width: 0; }

/* ==========  LEFT RAIL  ========== */
.snapch-rail {
	background: var(--sc-navy);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 0 16px;
	gap: 6px;
	border-right: 1px solid rgba(255,255,255,0.06);
}
.snapch-rail-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: var(--sc-blue);
	color: #fff !important;
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: 22px;
	border-radius: 11px;
	margin-bottom: 8px;
	transition: transform 0.15s var(--sc-ease);
	text-decoration: none !important;
	flex-shrink: 0;
}
.snapch-rail-logo:hover { transform: scale(1.05); }
.snapch-rail-logo-mark {
	line-height: 1;
	padding-top: 4px;
}
.snapch-rail-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}
.snapch-rail-foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid rgba(255,255,255,0.06);
	width: 80%;
	display: flex;
	justify-content: center;
}
.snapch-rail-btn,
.snapch-rail-btn:link,
.snapch-rail-btn:visited {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 3px;
	width: 56px;
	padding: 7px 4px !important;
	background: transparent !important;
	border: none !important;
	border-radius: 10px !important;
	color: rgba(255,255,255,0.7) !important;
	font: 600 10.5px/1.2 'Outfit', sans-serif !important;
	cursor: pointer !important;
	transition: background 0.12s var(--sc-ease), color 0.12s var(--sc-ease);
	box-shadow: none !important;
	text-decoration: none !important;
}
.snapch-rail-btn:hover, .snapch-rail-btn:visited:hover {
	background: rgba(255,255,255,0.08) !important;
	color: #fff !important;
}
.snapch-rail-btn.is-active,
.snapch-rail-btn.is-active:hover {
	background: rgba(255,255,255,0.12) !important;
	color: var(--sc-gold) !important;
}
.snapch-rail-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.snapch-rail-icon-wrap svg { stroke-width: 1.8; }
.snapch-rail-label {
	font-size: 10px;
	letter-spacing: 0.01em;
	text-transform: none;
	max-width: 56px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}
.snapch-rail-badge {
	position: absolute;
	top: -4px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--sc-gold);
	color: var(--sc-navy);
	font-size: 10px;
	font-weight: 700;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--sc-navy);
	line-height: 1;
}
.snapch-rail-avatar,
.snapch-rail-avatar:link,
.snapch-rail-avatar:visited {
	display: block !important;
	width: 36px;
	height: 36px;
	padding: 0 !important;
	background: transparent !important;
	border: 2px solid rgba(255,255,255,0.2) !important;
	border-radius: 50% !important;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.15s var(--sc-ease);
}
.snapch-rail-avatar:hover { border-color: var(--sc-gold) !important; }
.snapch-rail-avatar img {
	width: 100% !important;
	height: 100% !important;
	min-width: 32px !important;
	min-height: 32px !important;
	max-width: 32px !important;
	max-height: 32px !important;
	border-radius: 50%;
	display: block;
	object-fit: cover;
}

/* ==========  SIDE-VIEWS (Activity / Files)  ========== */
.snapch-side-view {
	background: linear-gradient(180deg, var(--sc-navy) 0%, var(--sc-navy-2) 100%);
	color: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-right: 1px solid var(--sc-border);
}
.snapch-side-view-head {
	padding: 22px 22px 16px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	flex-shrink: 0;
}
.snapch-side-view-head h2 {
	font-family: 'DM Serif Display', Georgia, serif !important;
	font-size: 22px !important;
	color: #fff !important;
	margin: 0 0 6px !important;
	font-weight: normal !important;
	line-height: 1.3 !important;
	padding-top: 6px;
}
.snapch-side-view-sub {
	font-size: 13px;
	color: rgba(255,255,255,0.65);
	margin: 0;
	line-height: 1.4;
}
.snapch-side-view-body {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0;
	min-height: 0;
}
.snapch-side-view-body .snapch-empty-hint {
	color: rgba(255,255,255,0.55);
	padding: 18px 22px;
	font-size: 13.5px;
	line-height: 1.55;
}
.snapch-activity-item,
.snapch-activity-item:link,
.snapch-activity-item:visited {
	display: block !important;
	width: 100%;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	padding: 14px 22px !important;
	text-align: left !important;
	color: #fff !important;
	font-family: inherit !important;
	cursor: pointer !important;
	transition: background 0.12s var(--sc-ease);
	font-size: 14px;
	box-shadow: none !important;
}
.snapch-activity-item:hover, .snapch-activity-item:visited:hover {
	background: rgba(255,255,255,0.04) !important;
}
.snapch-activity-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 13px;
}
.snapch-activity-meta img {
	width: 22px !important;
	min-width: 22px !important;
	max-width: 22px !important;
	height: 22px !important;
	border-radius: 50%;
}
.snapch-activity-author {
	font-weight: 600;
	color: #fff;
}
.snapch-activity-where {
	color: rgba(255,255,255,0.6);
	font-size: 12.5px;
}
.snapch-activity-time {
	margin-left: auto;
	color: rgba(255,255,255,0.45);
	font-size: 11.5px;
	white-space: nowrap;
}
.snapch-activity-snippet {
	color: rgba(255,255,255,0.85);
	font-size: 13.5px;
	line-height: 1.5;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	max-height: 4.5em;
}
.snapch-activity-snippet * { color: inherit !important; }
.snapch-activity-snippet a, .snapch-activity-snippet .snapch-mention { color: var(--sc-gold) !important; }

.snapch-file-row,
.snapch-file-row:link,
.snapch-file-row:visited {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 12px 22px !important;
	background: transparent !important;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	color: #fff !important;
	text-decoration: none !important;
	transition: background 0.12s var(--sc-ease);
	box-shadow: none !important;
}
.snapch-file-row:hover, .snapch-file-row:visited:hover {
	background: rgba(255,255,255,0.04) !important;
	color: #fff !important;
}
.snapch-file-thumb {
	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	height: 40px !important;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}
.snapch-file-icon {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: rgba(255,255,255,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.7);
	flex-shrink: 0;
}
.snapch-file-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}
.snapch-file-name {
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.snapch-file-where {
	font-size: 11.5px;
	color: rgba(255,255,255,0.5);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==========  SIDEBAR  ========== */
.snapch-sidebar {
	background: linear-gradient(180deg, var(--sc-navy) 0%, var(--sc-navy-2) 100%);
	color: #fff;
	display: flex; flex-direction: column;
	overflow-y: auto;
	border-right: 1px solid var(--sc-border);
}
.snapch-sidebar::-webkit-scrollbar { width: 8px; }
.snapch-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.snapch-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

.snapch-sidebar-head {
	padding: 28px 18px 18px !important;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.snapch-sidebar-head h2 {
	font-size: 22px !important;
	color: #fff !important;
	margin: 0 0 14px !important;
	padding: 6px 0 0 !important;
	letter-spacing: -0.015em;
	line-height: 1.45 !important;
	overflow: visible !important;
}
.snapch-me-wrap { position: relative; }
.snapch-me,
.snapch-me:link,
.snapch-me:visited {
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 6px 8px !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	font-size: 13.5px;
	color: rgba(255,255,255,0.9) !important;
	font-weight: 500;
	font-family: inherit !important;
	cursor: pointer !important;
	text-align: left;
	box-shadow: none !important;
	transition: background 0.12s var(--sc-ease);
}
.snapch-me:hover, .snapch-me.is-open {
	background: rgba(255,255,255,0.08) !important;
	border-color: rgba(255,255,255,0.12) !important;
	color: #fff !important;
}
.snapch-me .snapch-avatar-wrap { position: relative; }
.snapch-me .snapch-avatar-wrap::after {
	content: ''; position: absolute; right: -2px; bottom: -2px;
	width: 10px; height: 10px;
	background: var(--sc-green); border: 2px solid var(--sc-navy); border-radius: 50%;
}
.snapch-me-name {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.snapch-me-caret {
	font-size: 12px;
	color: rgba(255,255,255,0.5);
	flex-shrink: 0;
	transition: transform 0.12s var(--sc-ease);
}
.snapch-me.is-open .snapch-me-caret { transform: rotate(180deg); }

.snapch-me-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	background: #fff;
	border: 1px solid var(--sc-border);
	border-radius: 10px;
	box-shadow: var(--sc-shadow-lg);
	z-index: 100;
	overflow: hidden;
	padding: 4px;
}
.snapch-me-menu-item,
.snapch-me-menu-item:link,
.snapch-me-menu-item:visited {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 9px 12px !important;
	background: transparent !important;
	border: none !important;
	color: var(--sc-text) !important;
	font-size: 14px;
	font-family: inherit !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	cursor: pointer !important;
	width: 100%;
	box-shadow: none !important;
}
.snapch-me-menu-item:hover, .snapch-me-menu-item:visited:hover {
	background: var(--sc-blue) !important;
	color: #fff !important;
}
.snapch-me-menu-sep {
	height: 1px;
	background: var(--sc-border);
	margin: 4px 0;
}

.snapch-search-wrap { padding: 14px 16px 8px; }
.snapch-search-input {
	display: flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 10px; padding: 8px 12px;
	color: rgba(255,255,255,0.65);
	transition: all 0.15s var(--sc-ease);
}
.snapch-search-input:focus-within {
	background: rgba(255,255,255,0.14);
	border-color: rgba(255,255,255,0.28);
}
.snapch-search-input input {
	background: transparent; border: none; color: #fff !important;
	outline: none; width: 100%; font-size: 13.5px; font-family: inherit;
}
.snapch-search-input input::placeholder { color: rgba(255,255,255,0.55); }

.snapch-section { padding: 10px 0 4px; }
.snapch-section-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 6px 16px 6px 20px;
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
	color: rgba(255,255,255,0.6) !important; font-weight: 700;
}

/* Sidebar channel rows — bulletproofed against theme button borders */
.snapch-ch-row,
.snapch-ch-row:link,
.snapch-ch-row:visited {
	display: flex !important; align-items: center; gap: 12px;
	width: calc(100% - 16px);
	margin: 2px 8px !important; padding: 10px 14px !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: rgba(255,255,255,0.85) !important;
	text-align: left;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 500;
	cursor: pointer;
	border-radius: 8px !important;
	line-height: 1.45;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0.005em !important;
	text-shadow: none !important;
	transition: background 0.12s var(--sc-ease), color 0.12s var(--sc-ease);
}
.snapch-ch-row:hover,
.snapch-ch-row:visited:hover {
	background: rgba(255,255,255,0.12) !important;
	color: #fff !important;
}
.snapch-ch-row:active { background: rgba(255,255,255,0.18) !important; }
.snapch-ch-row::-moz-focus-inner { border: 0; }
.snapch-ch-row:focus { outline: none !important; box-shadow: none !important; }
.snapch-ch-row:focus-visible {
	outline: none !important;
	box-shadow: inset 0 0 0 2px var(--sc-gold) !important;
}
.snapch-ch-row.is-active,
.snapch-ch-row.is-active:hover,
.snapch-ch-row.is-active:visited,
.snapch-ch-row.is-active:visited:hover {
	background: var(--sc-blue) !important;
	color: #fff !important; font-weight: 600;
	box-shadow: 0 2px 8px rgba(18,88,194,0.35);
}
.snapch-ch-row.has-unread { color: #fff !important; font-weight: 600; }
.snapch-ch-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* DM row: swap the generic icon for a 22px avatar + presence dot */
.snapch-ch-avatar-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px; height: 26px;
}
.snapch-ch-dm-avatar {
	width: 26px !important;
	height: 26px !important;
	border-radius: 7px;
	object-fit: cover;
	background: rgba(255,255,255,0.15);
	display: block;
}
.snapch-ch-avatar-wrap::after {
	content: '';
	position: absolute;
	right: -2px; bottom: -2px;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--sc-green);
	border: 2px solid var(--sc-navy);
	box-sizing: content-box;
}
.snapch-ch-row.is-active .snapch-ch-avatar-wrap::after {
	border-color: var(--sc-blue);
}
.snapch-ch-row.is-dm { padding-left: 11px; }
.snapch-ch-badge {
	background: var(--sc-red); color: #fff !important;
	font-size: 11px; font-weight: 700; padding: 1px 7px;
	border-radius: 10px; min-width: 20px; text-align: center;
	box-shadow: 0 1px 3px rgba(220,38,38,0.3);
}

.snapch-empty-hint {
	padding: 10px 20px;
	color: rgba(255,255,255,0.5) !important;
	font-size: 13px;
}

/* Skeleton loading state for the channel/DM list */
.snapch-skel-list {
	padding: 4px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.snapch-skel-row {
	height: 30px;
	display: flex;
	align-items: center;
	padding: 0 8px;
}
.snapch-skel-bar {
	display: block;
	height: 14px;
	width: 70%;
	background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 100%);
	background-size: 200% 100%;
	border-radius: 4px;
	animation: snapch-skel-shimmer 1.4s linear infinite;
}
.snapch-skel-row:nth-child(2) .snapch-skel-bar { width: 55%; }
.snapch-skel-row:nth-child(3) .snapch-skel-bar { width: 80%; }
@keyframes snapch-skel-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Invite CTA card in sidebar — anchored to bottom */
.snapch-invite-cta {
	margin: 16px 14px 16px;
	margin-top: auto;
	padding: 14px 16px;
	background: rgba(232,168,56,0.1);
	border: 1px dashed rgba(232,168,56,0.45);
	border-radius: 12px;
	color: rgba(255,255,255,0.95) !important;
	cursor: pointer; font-family: inherit;
	font-size: 13px; text-align: left;
	width: calc(100% - 28px);
	transition: all 0.15s var(--sc-ease);
	display: flex; align-items: center; gap: 12px;
	flex-shrink: 0;
}
.snapch-invite-cta:hover,
.snapch-invite-cta:focus {
	background: rgba(232,168,56,0.22) !important;
	border-color: var(--sc-gold); border-style: solid;
	color: #fff !important; outline: none;
	transform: translateY(-1px);
}
.snapch-invite-cta strong {
	display: block; font-weight: 600; margin-bottom: 2px;
	color: var(--sc-gold); font-size: 13.5px;
}
.snapch-invite-cta-body { flex: 1; }
.snapch-invite-cta-body small { opacity: 0.8; font-size: 12px; }

/* ==========  MAIN  ========== */
.snapch-main {
	display: flex; flex-direction: column;
	background: var(--sc-surface);
	min-width: 0;
	min-height: 0; /* CRITICAL: allow flex child to shrink below content size so .snapch-messages can scroll instead of stretching the parent */
	overflow: hidden;
}

.snapch-ch-head {
	padding: 18px 28px;
	border-bottom: 1px solid var(--sc-border);
	background: #fff;
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; min-height: 72px;
}
.snapch-ch-head-title {
	display: flex; align-items: center; gap: 12px;
	color: var(--sc-navy); min-width: 0;
}
.snapch-ch-head-title h1 {
	font-size: 22px; color: var(--sc-navy) !important; margin: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.snapch-ch-topic {
	font-size: 13px; color: var(--sc-text-muted);
	padding-left: 12px; border-left: 1px solid var(--sc-border);
	margin-left: 4px;
}
.snapch-ch-head-actions { display: flex; gap: 6px; align-items: center; }

/* ==========  MESSAGES  ========== */
.snapch-messages {
	flex: 1 1 0; /* explicit flex-basis 0 so it can shrink */
	min-height: 0; /* CRITICAL: required for overflow-y to work in a flex child */
	overflow-y: auto;
	overflow-x: hidden;
	padding: 22px 0 12px;
	scroll-behavior: smooth;
}
.snapch-messages::-webkit-scrollbar { width: 10px; }
.snapch-messages::-webkit-scrollbar-thumb { background: var(--sc-border); border-radius: 5px; }
.snapch-messages::-webkit-scrollbar-thumb:hover { background: var(--sc-border-strong); }

.snapch-messages .snapch-empty-hint {
	color: var(--sc-text-muted) !important;
	text-align: center; padding: 60px 20px; font-size: 15px;
}

.snapch-msg {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 4px 14px;
	padding: 10px 28px; position: relative;
	align-items: start;
	transition: background 0.08s var(--sc-ease);
}
.snapch-msg:hover { background: var(--sc-surface-2); }

.snapch-msg-avatar {
	grid-row: span 2;
	width: 44px !important; height: 44px !important;
	max-width: 44px !important; max-height: 44px !important;
	min-width: 44px !important; min-height: 44px !important;
	border-radius: 10px !important;
	object-fit: cover !important;
	background: var(--sc-border); margin-top: 2px;
	display: block !important;
}
.snapch-avatar {
	width: 28px !important; height: 28px !important;
	max-width: 28px !important; max-height: 28px !important;
	min-width: 28px !important; min-height: 28px !important;
	border-radius: 8px !important;
	object-fit: cover !important;
	background: var(--sc-border);
	display: inline-block !important;
	vertical-align: middle;
	flex-shrink: 0 !important;
}
.snapch-avatar-wrap { position: relative; display: inline-block; line-height: 0; }

.snapch-msg.is-grouped .snapch-msg-body { grid-column: 2; }
.snapch-msg-time-gutter {
	grid-row: 1; grid-column: 1;
	font-size: 10.5px; color: var(--sc-text-muted);
	text-align: right; padding-top: 4px;
	opacity: 0; transition: opacity 0.12s var(--sc-ease);
	font-variant-numeric: tabular-nums;
}
.snapch-msg.is-grouped:hover .snapch-msg-time-gutter { opacity: 1; }
.snapch-msg-body {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}
.snapch-msg-head {
	display: flex; align-items: baseline;
	gap: 10px; margin-bottom: 4px; flex-wrap: wrap;
}
.snapch-msg-author {
	font-weight: 700; color: var(--sc-navy);
	font-size: 15.5px; letter-spacing: -0.005em;
}
.snapch-msg-time { font-size: 12px; color: var(--sc-text-muted); font-variant-numeric: tabular-nums; }
.snapch-msg-edited { font-size: 11px; color: var(--sc-text-faint); font-style: italic; }
.snapch-msg-content {
	color: var(--sc-text);
	word-wrap: break-word !important;
	overflow-wrap: anywhere !important;
	word-break: break-word;
	font-size: 16px;
	line-height: 1.6;
	max-width: 100%;
	min-width: 0;
	hyphens: auto;
}
.snapch-msg-content code {
	background: var(--sc-surface-3); padding: 2px 6px; border-radius: 5px;
	font-size: 0.88em; color: var(--sc-text);
	font-family: 'SF Mono', Monaco, Consolas, monospace;
}
.snapch-msg-content pre {
	background: var(--sc-surface-3); padding: 12px 14px; border-radius: 10px;
	overflow-x: auto; font-size: 13px; margin: 8px 0;
	border: 1px solid var(--sc-border);
}
.snapch-mention {
	background: var(--sc-blue-soft); color: var(--sc-blue) !important;
	padding: 1px 6px; border-radius: 4px; font-weight: 600;
}

/* Links: LVHA */
.snapch-ext-link, .snapch-msg-content a {
	color: var(--sc-blue); text-decoration: underline; text-underline-offset: 2px;
}
.snapch-ext-link:link, .snapch-msg-content a:link { color: var(--sc-blue); }
.snapch-ext-link:visited, .snapch-msg-content a:visited { color: var(--sc-blue-dark); }
.snapch-ext-link:hover,
.snapch-msg-content a:hover,
.snapch-ext-link:visited:hover,
.snapch-msg-content a:visited:hover {
	color: var(--sc-blue-dark); text-decoration: none;
	background: var(--sc-blue-soft); border-radius: 3px;
}
.snapch-ext-link:active, .snapch-msg-content a:active { color: var(--sc-navy); }

.snapch-msg-attachments { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
/* Multi-attachment messages use a horizontal-scrolling thumbnail strip.
 * Cleaner than stacking full-width images when someone sends 3-7 photos. */
.snapch-msg-attachments.is-multi {
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 8px;
	padding-bottom: 4px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.snapch-msg-attachments.is-multi::-webkit-scrollbar {
	height: 6px;
}
.snapch-msg-attachments.is-multi::-webkit-scrollbar-thumb {
	background: var(--sc-border-strong);
	border-radius: 3px;
}
.snapch-msg-attachments.is-multi .snapch-attach-img,
.snapch-msg-attachments.is-multi .snapch-attach-file {
	flex-shrink: 0;
	scroll-snap-align: start;
}
.snapch-msg-attachments.is-multi .snapch-attach-img {
	width: 140px;
	height: 140px;
}
.snapch-msg-attachments.is-multi .snapch-attach-img img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}
.snapch-attach-img {
	display: block; border-radius: 10px; overflow: hidden;
	border: 1px solid var(--sc-border);
	transition: transform 0.15s var(--sc-ease), box-shadow 0.15s var(--sc-ease);
}
.snapch-attach-img:hover { transform: translateY(-1px); box-shadow: var(--sc-shadow-md); }
.snapch-attach-img img { max-width: 320px; max-height: 220px; display: block; }

.snapch-attach-file {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 12px; background: var(--sc-surface-3);
	border: 1px solid var(--sc-border); border-radius: 10px;
	text-decoration: none; color: var(--sc-text) !important;
	font-size: 13px; font-weight: 500;
	transition: all 0.12s var(--sc-ease);
}
.snapch-attach-file:link, .snapch-attach-file:visited { color: var(--sc-text) !important; }
.snapch-attach-file:hover, .snapch-attach-file:visited:hover {
	background: var(--sc-blue) !important;
	border-color: var(--sc-blue) !important;
	color: #fff !important;
}

.snapch-reactions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.snapch-reaction {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 9px;
	background: var(--sc-surface-3); border: 1px solid var(--sc-border);
	border-radius: 14px; font-size: 13px;
	cursor: pointer; font-family: inherit;
	color: var(--sc-text) !important;
	transition: all 0.12s var(--sc-ease);
}
.snapch-reaction:hover {
	background: var(--sc-blue) !important; border-color: var(--sc-blue) !important;
	color: #fff !important; transform: translateY(-1px);
}
.snapch-reaction.is-mine {
	background: var(--sc-blue-soft); border-color: var(--sc-blue);
	color: var(--sc-blue) !important;
}
.snapch-reaction.is-mine:hover { background: var(--sc-blue) !important; color: #fff !important; }
.snapch-reaction-count { font-weight: 700; font-variant-numeric: tabular-nums; }

.snapch-thread-btn {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: 8px; padding: 5px 12px;
	background: transparent; border: 1px solid var(--sc-border);
	border-radius: 8px; color: var(--sc-blue) !important;
	font-weight: 600; font-size: 12.5px; cursor: pointer;
	font-family: inherit; transition: all 0.12s var(--sc-ease);
}
.snapch-thread-btn:link, .snapch-thread-btn:visited { color: var(--sc-blue) !important; }
.snapch-thread-btn:hover, .snapch-thread-btn:visited:hover {
	background: var(--sc-blue) !important; border-color: var(--sc-blue) !important;
	color: #fff !important;
}

.snapch-msg-actions {
	grid-row: 1; grid-column: 3; align-self: start;
	display: flex; gap: 1px;
	background: #fff; border: 1px solid var(--sc-border);
	border-radius: 10px; padding: 3px;
	box-shadow: var(--sc-shadow-sm);
	opacity: 0; transform: translateY(-4px);
	transition: opacity 0.12s var(--sc-ease), transform 0.12s var(--sc-ease);
	position: relative;
}
.snapch-msg:hover .snapch-msg-actions,
.snapch-msg:focus-within .snapch-msg-actions { opacity: 1; transform: translateY(0); }

.snapch-msg-system {
	grid-template-columns: 1fr;
	color: var(--sc-text-muted); font-size: 13px;
	padding-left: 92px; padding-top: 4px; padding-bottom: 4px;
}

/* ==========  POPOVERS  ========== */
.snapch-emoji-popover, .snapch-msg-menu {
	position: absolute; top: calc(100% + 4px); right: 0;
	background: #fff; border: 1px solid var(--sc-border);
	border-radius: 12px; box-shadow: var(--sc-shadow-lg);
	z-index: 10; padding: 5px;
	display: flex; gap: 2px;
}
.snapch-msg-menu { flex-direction: column; min-width: 160px; }
.snapch-msg-menu button {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 12px;
	background: transparent; border: none;
	text-align: left; cursor: pointer;
	font-family: inherit; font-size: 14px;
	color: var(--sc-text) !important;
	border-radius: 6px; font-weight: 500;
	transition: all 0.1s var(--sc-ease);
}
.snapch-msg-menu button:hover {
	background: var(--sc-blue) !important; color: #fff !important;
}
.snapch-msg-menu button.is-danger { color: var(--sc-red) !important; }
.snapch-msg-menu button.is-danger:hover {
	background: var(--sc-red) !important; color: #fff !important;
}
.snapch-emoji-btn,
.snapch-emoji-btn:link,
.snapch-emoji-btn:visited {
	background: transparent !important;
	border: none !important;
	font-size: 20px !important;
	padding: 5px 7px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	line-height: 1 !important;
	transition: all 0.1s var(--sc-ease);
	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif !important;
	color: inherit !important;
	box-shadow: none !important;
	min-width: 32px;
	min-height: 32px;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.snapch-emoji-btn:hover { background: var(--sc-surface-3) !important; transform: scale(1.15); }

/* Existing reactions on a message also need the emoji font */
.snapch-reaction,
.snapch-reaction:link,
.snapch-reaction:visited {
	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', system-ui, -apple-system, sans-serif !important;
}

/* Global button focus reset — suppress default mouse-click outline, keep keyboard focus visible */
.snapch-app button::-moz-focus-inner,
.snapch-accept button::-moz-focus-inner { border: 0 !important; padding: 0 !important; }

.snapch-app button:focus:not(:focus-visible),
.snapch-accept button:focus:not(:focus-visible) { outline: none !important; box-shadow: none; }

/* ==========  ICON BUTTONS — bulletproof against theme button resets  ========== */
.snapch-icon-btn,
.snapch-icon-btn:link,
.snapch-icon-btn:visited {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 8px !important;
	color: var(--sc-text-muted) !important;
	cursor: pointer !important;
	font-family: inherit !important;
	transition: all 0.14s var(--sc-ease) !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
.snapch-icon-btn:hover, .snapch-icon-btn:visited:hover {
	background: var(--sc-blue) !important; color: #fff !important;
}
.snapch-icon-btn:focus-visible { outline: 2px solid var(--sc-blue); outline-offset: 1px; }
.snapch-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Section-head "+" buttons on the navy sidebar — chip style with gold hover */
.snapch-section-head .snapch-icon-btn,
.snapch-section-head .snapch-icon-btn:link,
.snapch-section-head .snapch-icon-btn:visited {
	width: 28px !important;
	height: 28px !important;
	background: rgba(255,255,255,0.1) !important;
	color: rgba(255,255,255,0.9) !important;
	border-radius: 7px !important;
}
.snapch-section-head .snapch-icon-btn:hover,
.snapch-section-head .snapch-icon-btn:focus,
.snapch-section-head .snapch-icon-btn:visited:hover {
	background: var(--sc-gold) !important;
	color: var(--sc-navy) !important;
	transform: scale(1.08);
}

/* ==========  COMPOSER  ========== */
.snapch-composer {
	border-top: 1px solid var(--sc-border);
	padding: 14px 28px 18px;
	background: #fff;
	position: relative;
	flex-shrink: 0;
}
.snapch-composer-pending {
	display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.snapch-pending-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 10px;
	background: var(--sc-blue-soft); border: 1px solid var(--sc-blue);
	border-radius: 8px; font-size: 13px;
	color: var(--sc-blue-dark); font-weight: 500;
}
.snapch-pending-chip button {
	background: transparent; border: none; cursor: pointer;
	color: var(--sc-blue-dark) !important;
	display: flex; align-items: center;
	padding: 2px; border-radius: 3px;
}
.snapch-pending-chip button:hover { background: rgba(14,71,161,0.15); }

/* Formatting toolbar above the composer */
.snapch-composer-toolbar {
	display: flex !important;
	align-items: center;
	gap: 2px;
	padding: 4px 4px 6px;
	margin-bottom: 0;
	border-bottom: 1px solid transparent;
	flex-wrap: wrap;
}
.snapch-format-btn,
.snapch-format-btn:link,
.snapch-format-btn:visited {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 28px;
	height: 28px;
	padding: 0 7px !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 6px !important;
	color: var(--sc-text-muted) !important;
	font-family: inherit !important;
	font-size: 13px !important;
	cursor: pointer !important;
	transition: all 0.1s var(--sc-ease);
	box-shadow: none !important;
	text-decoration: none !important;
	line-height: 1 !important;
}
.snapch-format-btn strong { font-weight: 700; }
.snapch-format-btn em { font-style: italic; }
.snapch-format-btn code {
	font-family: 'SF Mono', Monaco, Consolas, monospace !important;
	font-size: 11px !important;
	background: transparent !important;
}
.snapch-format-btn:hover, .snapch-format-btn:visited:hover {
	background: var(--sc-surface-2) !important;
	border-color: var(--sc-border) !important;
	color: var(--sc-navy) !important;
}
.snapch-format-btn:active {
	background: var(--sc-blue-soft) !important;
	color: var(--sc-blue) !important;
}
.snapch-format-divider {
	width: 1px;
	height: 18px;
	background: var(--sc-border);
	margin: 0 6px;
}
.snapch-composer-counter {
	margin-left: auto;
	font-size: 11.5px;
	color: var(--sc-text-faint);
	font-variant-numeric: tabular-nums;
	padding: 0 4px;
}

.snapch-composer-inner {
	display: grid; grid-template-columns: 1fr auto; gap: 10px;
	align-items: flex-end;
	border: 1.5px solid var(--sc-border-strong);
	border-radius: 12px;
	padding: 10px 12px 8px;
	transition: all 0.15s var(--sc-ease);
	background: #fff;
}
.snapch-composer-inner:focus-within {
	border-color: var(--sc-blue);
	box-shadow: 0 0 0 4px var(--sc-blue-soft);
}
.snapch-composer-input {
	resize: none !important;
	border: none !important;
	outline: none !important;
	font-family: inherit !important;
	font-size: 15px !important;
	color: var(--sc-text) !important;
	min-height: 44px;
	line-height: 1.55 !important;
	padding: 6px 0 !important;
	background: transparent !important;
	width: 100% !important;
	overflow-y: hidden;
	box-shadow: none !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}
.snapch-composer-input::placeholder { color: var(--sc-text-faint); }
.snapch-composer-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 2px;
}
.snapch-send {
	padding: 8px 14px !important;
	font-weight: 600 !important;
	flex-shrink: 0;
}

/* Hint row below composer */
.snapch-composer-hint {
	margin-top: 6px;
	padding: 0 4px;
	font-size: 11px;
	color: var(--sc-text-faint);
	user-select: none;
}
.snapch-composer-hint kbd {
	display: inline-block;
	padding: 1px 5px;
	margin: 0 1px;
	background: var(--sc-surface-2);
	border: 1px solid var(--sc-border);
	border-radius: 3px;
	font-family: 'SF Mono', Monaco, Consolas, monospace;
	font-size: 10.5px;
	color: var(--sc-text-muted);
	box-shadow: 0 1px 0 var(--sc-border);
	font-weight: 500;
}

/* Highlight animation when a message is deep-linked (?channel=N#message-X) */
.snapch-msg.snapch-msg-highlight {
	animation: snapch-msg-pulse 2.2s ease-out;
}
@keyframes snapch-msg-pulse {
	0% { background: rgba(232, 168, 56, 0.18); }
	30% { background: rgba(232, 168, 56, 0.28); }
	100% { background: transparent; }
}

/* ==========  DAY DIVIDER  ========== */
.snapch-day-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 28px 12px;
	position: relative;
}
.snapch-day-divider::before,
.snapch-day-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--sc-border);
}
.snapch-day-pill {
	background: var(--sc-surface);
	color: var(--sc-text-muted);
	font-size: 12px;
	font-weight: 600;
	padding: 5px 14px;
	border-radius: 999px;
	border: 1px solid var(--sc-border);
	box-shadow: var(--sc-shadow-xs);
	margin: 0 14px;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.snapch-typing {
	padding: 4px 28px 0;
	font-size: 12.5px; color: var(--sc-text-muted);
	font-style: italic; height: 18px;
}

/* ==========  RENDERED MARKDOWN IN MESSAGES  ========== */
.snapch-msg-content p {
	margin: 0 0 8px;
	line-height: 1.55;
}
.snapch-msg-content p:last-child {
	margin-bottom: 0;
}
.snapch-msg-content strong { font-weight: 700; color: var(--sc-navy); }
.snapch-msg-content em { font-style: italic; }
.snapch-msg-content blockquote {
	margin: 6px 0;
	padding: 6px 14px;
	border-left: 3px solid var(--sc-border-strong);
	color: var(--sc-text-muted);
	font-style: italic;
	background: var(--sc-surface-2);
	border-radius: 0 6px 6px 0;
}
.snapch-msg-content ul {
	margin: 6px 0;
	padding-left: 24px;
	list-style: disc;
}
.snapch-msg-content ul li {
	margin-bottom: 2px;
	line-height: 1.55;
}
.snapch-msg-content code {
	background: var(--sc-surface-3);
	padding: 2px 6px;
	border-radius: 5px;
	font-size: 0.88em;
	color: var(--sc-navy);
	font-family: 'SF Mono', Monaco, Consolas, monospace;
}
.snapch-msg-content pre {
	background: var(--sc-surface-3);
	padding: 12px 14px;
	border-radius: 10px;
	overflow-x: auto;
	font-size: 13px;
	margin: 8px 0;
	border: 1px solid var(--sc-border);
}
.snapch-msg-content pre code {
	background: transparent;
	padding: 0;
	border-radius: 0;
	font-size: 13px;
}

/* ==========  MENTION AUTOCOMPLETE  ========== */
.snapch-mention-popover {
	position: absolute; bottom: 100%;
	left: 28px; right: 28px; max-height: 220px; overflow-y: auto;
	background: #fff; border: 1px solid var(--sc-border);
	border-radius: 12px; box-shadow: var(--sc-shadow-lg);
	z-index: 20; margin-bottom: 8px; padding: 4px;
}
.snapch-mention-item {
	display: flex; align-items: center; gap: 10px;
	width: 100%; padding: 8px 10px;
	background: transparent; border: none;
	text-align: left; cursor: pointer;
	font-family: inherit; font-size: 14px;
	color: var(--sc-text) !important;
	border-radius: 8px;
	transition: all 0.1s var(--sc-ease);
}
.snapch-mention-item:hover, .snapch-mention-item:focus {
	background: var(--sc-blue) !important;
	color: #fff !important; outline: none;
}
.snapch-mention-item:hover .snapch-mention-login,
.snapch-mention-item:focus .snapch-mention-login { color: rgba(255,255,255,0.8) !important; }
.snapch-mention-login {
	margin-left: auto; font-size: 12.5px;
	color: var(--sc-text-muted) !important; font-weight: 500;
}

/* ==========  BUTTONS — bulletproof against theme button resets  ========== */
.snapch-btn,
.snapch-btn:link,
.snapch-btn:visited {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 6px;
	padding: 9px 16px !important;
	border-radius: 10px !important;
	border: 1.5px solid var(--sc-border-strong) !important;
	background: #fff !important;
	color: var(--sc-text) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer;
	text-decoration: none !important;
	transition: all 0.12s var(--sc-ease);
	line-height: 1.2;
	white-space: nowrap;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-shadow: none !important;
}
.snapch-btn:hover, .snapch-btn:visited:hover {
	background: var(--sc-navy) !important;
	border-color: var(--sc-navy) !important;
	color: #fff !important;
}
.snapch-btn:focus-visible { outline: 2px solid var(--sc-blue); outline-offset: 2px; }
.snapch-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.snapch-btn-primary,
.snapch-btn-primary:link,
.snapch-btn-primary:visited {
	background: var(--sc-blue) !important;
	border-color: var(--sc-blue) !important;
	color: #fff !important;
	box-shadow: 0 1px 3px rgba(18,88,194,0.25) !important;
}
.snapch-btn-primary:hover,
.snapch-btn-primary:focus,
.snapch-btn-primary:visited:hover {
	background: var(--sc-blue-dark) !important;
	border-color: var(--sc-blue-dark) !important;
	color: #fff !important;
	box-shadow: 0 4px 10px rgba(18,88,194,0.3) !important;
	transform: translateY(-1px);
}
.snapch-btn-primary:active { transform: translateY(0); color: #fff !important; }

.snapch-btn-success,
.snapch-btn-success:link,
.snapch-btn-success:visited {
	background: var(--sc-green) !important;
	border-color: var(--sc-green) !important;
	color: #fff !important;
}
.snapch-btn-success:hover, .snapch-btn-success:visited:hover {
	background: #22A85E !important; border-color: #22A85E !important; color: #fff !important;
}

/* Ensure SVG icons inside buttons always inherit current color */
.snapch-btn svg,
.snapch-icon-btn svg,
.snapch-welcome-card svg,
.snapch-invite-cta svg {
	stroke: currentColor !important;
	fill: none !important;
}

/* ==========  THREAD  ========== */
.snapch-thread-panel {
	background: #fff; border-left: 1px solid var(--sc-border);
	display: flex; flex-direction: column; min-width: 0;
}
.snapch-thread-body { flex: 1; overflow-y: auto; padding: 14px 0; }
.snapch-thread-divider {
	padding: 12px 24px;
	font-size: 11.5px; color: var(--sc-text-muted);
	text-transform: uppercase; letter-spacing: 0.08em;
	font-weight: 700;
	border-top: 1px solid var(--sc-border);
	border-bottom: 1px solid var(--sc-border);
	margin: 10px 0; background: var(--sc-surface-2);
}

/* ==========  MODALS  ========== */
.snapch-modal-backdrop {
	position: fixed; inset: 0;
	background: rgba(15,23,42,0.55);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	display: flex; align-items: center; justify-content: center;
	z-index: 10000; padding: 20px; overflow: hidden;
	animation: snapch-fade-in 0.15s var(--sc-ease);
}
@keyframes snapch-fade-in { from { opacity: 0; } to { opacity: 1; } }
.snapch-modal {
	background: #fff; border-radius: 16px;
	max-width: 560px; width: 100%; max-height: 90vh;
	overflow: hidden; box-shadow: var(--sc-shadow-lg);
	display: flex; flex-direction: column;
	animation: snapch-slide-up 0.2s var(--sc-ease);
}
@keyframes snapch-slide-up {
	from { opacity: 0; transform: translateY(10px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.snapch-modal-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 22px; border-bottom: 1px solid var(--sc-border);
}
.snapch-modal-head h2 { font-size: 22px; color: var(--sc-navy) !important; }
.snapch-modal-body { padding: 22px; overflow-y: auto; }
.snapch-modal-actions {
	display: flex; justify-content: flex-end; gap: 8px;
	margin-top: 22px; padding-top: 18px;
	border-top: 1px solid var(--sc-border);
}
.snapch-modal-intro {
	color: var(--sc-text-soft); margin: 0 0 18px;
	font-size: 14px; line-height: 1.55;
}

.snapch-field { display: block; margin-bottom: 16px; }
.snapch-field > span, .snapch-field > legend {
	display: block; font-weight: 600; color: var(--sc-navy);
	margin-bottom: 6px; font-size: 13.5px;
}
.snapch-field-hint {
	display: block; color: var(--sc-text-muted);
	font-weight: 400; font-size: 12.5px; margin-top: 4px;
}
.snapch-field input[type="text"],
.snapch-field input[type="email"],
.snapch-field input[type="search"],
.snapch-field textarea,
.snapch-field select {
	width: 100%; padding: 10px 12px;
	border: 1.5px solid var(--sc-border-strong);
	border-radius: 10px;
	font-family: inherit; font-size: 14px;
	color: var(--sc-text); background: #fff;
	transition: all 0.12s var(--sc-ease);
}
.snapch-field input:focus, .snapch-field textarea:focus, .snapch-field select:focus {
	outline: none; border-color: var(--sc-blue);
	box-shadow: 0 0 0 4px var(--sc-blue-soft);
}

.snapch-field-radio { border: none; padding: 0; margin: 0 0 16px; }
.snapch-field-radio label {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 10px 12px; cursor: pointer;
	font-size: 14px; color: var(--sc-text);
	border: 1.5px solid var(--sc-border);
	border-radius: 10px; margin-bottom: 6px;
	transition: all 0.12s var(--sc-ease);
}
.snapch-field-radio label:hover { border-color: var(--sc-border-strong); background: var(--sc-surface-2); }
.snapch-field-radio label:has(input:checked) {
	border-color: var(--sc-blue); background: var(--sc-blue-soft);
}

/* Chips input */
.snapch-chips-field {
	display: flex; flex-wrap: wrap; gap: 6px;
	min-height: 46px; padding: 8px 10px;
	border: 1.5px solid var(--sc-border-strong);
	border-radius: 10px; background: #fff;
	transition: all 0.12s var(--sc-ease);
	align-items: center;
}
.snapch-chips-field:focus-within {
	border-color: var(--sc-blue);
	box-shadow: 0 0 0 4px var(--sc-blue-soft);
}
.snapch-chips-field input {
	flex: 1; min-width: 180px;
	border: none; outline: none;
	font-family: inherit; font-size: 14px;
	padding: 4px 2px; background: transparent;
}
.snapch-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px;
	background: var(--sc-blue-soft); color: var(--sc-blue-dark);
	border-radius: 14px; font-size: 13px; font-weight: 500;
}
.snapch-chip.is-invalid { background: var(--sc-red-soft); color: var(--sc-red); }
.snapch-chip button {
	background: transparent; border: none; cursor: pointer;
	color: inherit; padding: 0;
	display: flex; align-items: center; opacity: 0.7;
}
.snapch-chip button:hover { opacity: 1; }

/* User list */
.snapch-user-list { list-style: none; margin: 0; padding: 0; }
.snapch-user-row {
	display: flex; align-items: center; gap: 12px;
	width: 100%; padding: 9px 12px;
	background: transparent; border: none; border-radius: 10px;
	text-align: left; cursor: pointer;
	font-family: inherit; font-size: 14px;
	color: var(--sc-text) !important;
	line-height: 1.4;
	transition: all 0.1s var(--sc-ease);
}
.snapch-user-row:hover, .snapch-user-row:focus {
	background: var(--sc-blue) !important; color: #fff !important; outline: none;
}
.snapch-user-row:hover .snapch-mention-login,
.snapch-user-row:focus .snapch-mention-login { color: rgba(255,255,255,0.8) !important; }
.snapch-member-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 8px; padding: 2px 0;
}
.snapch-member-row .snapch-user-row { flex: 1; }

/* Tabs */
.snapch-tabs {
	display: flex; gap: 4px;
	border-bottom: 1px solid var(--sc-border);
	margin: -4px -4px 18px; padding: 0 4px;
}
.snapch-tab {
	padding: 10px 14px; background: transparent;
	border: none; border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	color: var(--sc-text-muted) !important;
	font-family: inherit; font-size: 14px; font-weight: 600;
	cursor: pointer;
	transition: all 0.12s var(--sc-ease);
}
.snapch-tab:hover { color: var(--sc-navy) !important; }
.snapch-tab.is-active {
	color: var(--sc-blue) !important;
	border-bottom-color: var(--sc-blue);
}

/* Alerts / notices */
.snapch-alert {
	padding: 12px 14px;
	background: var(--sc-red-soft); border: 1px solid #FECACA;
	border-radius: 10px; color: var(--sc-red);
	margin-bottom: 14px; font-size: 14px;
}
.snapch-alert-success {
	background: var(--sc-green-soft); border-color: #86EFAC; color: #166534;
}
.snapch-notice { padding: 18px; border-radius: 12px; margin: 14px 0; }
.snapch-notice-info {
	background: var(--sc-blue-soft); border: 1px solid #BFDBFE; color: var(--sc-blue-dark);
}
.snapch-notice-warn { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }

.snapch-empty-state {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	height: 100%; color: var(--sc-text-muted);
	padding: 60px 40px; text-align: center;
}
.snapch-empty-state h2 {
	font-size: 28px; color: var(--sc-navy) !important; margin-bottom: 10px;
}
.snapch-empty-state p { font-size: 15px; max-width: 420px; }

.snapch-search-item {
	padding: 14px 24px; border-bottom: 1px solid var(--sc-border);
}
.snapch-search-meta {
	font-size: 11.5px; color: var(--sc-text-muted);
	margin-bottom: 6px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.06em;
}

/* ==========  MODERN EMPTY-STATE WELCOME PANEL  ========== */
.snapch-welcome {
	max-width: 780px;
	margin: 48px auto 32px;
	padding: 48px 36px 40px;
	text-align: center;
	position: relative;
}

.snapch-welcome-illo {
	width: 200px; height: 150px; margin: 0 auto 24px;
	position: relative;
	display: flex; align-items: center; justify-content: center;
}

.snapch-welcome-illo svg { width: 100%; height: 100%; display: block; }

.snapch-welcome h2 {
	font-size: 34px !important;
	color: var(--sc-navy) !important;
	margin: 0 0 10px !important;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.snapch-welcome-sub {
	font-size: 15.5px;
	color: var(--sc-text-soft);
	max-width: 520px;
	margin: 0 auto 32px;
	line-height: 1.55;
}

.snapch-welcome-actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	max-width: 720px;
	margin: 0 auto;
	text-align: left;
}

/* Container-query based: progressive columns as main panel grows */
.snapch-main { container-type: inline-size; container-name: snapch-main; }

@container snapch-main (min-width: 580px) {
	.snapch-welcome-actions {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

@container snapch-main (min-width: 880px) {
	.snapch-welcome-actions {
		grid-template-columns: repeat(3, 1fr);
		gap: 14px;
	}
}

/* Viewport-based fallback for browsers without container queries */
@supports not (container-type: inline-size) {
	@media (min-width: 900px) {
		.snapch-welcome-actions {
			grid-template-columns: repeat(2, 1fr);
			gap: 14px;
		}
	}
	@media (min-width: 1200px) {
		.snapch-welcome-actions {
			grid-template-columns: repeat(3, 1fr);
			gap: 14px;
		}
	}
}

.snapch-welcome-card,
.snapch-welcome-card:link,
.snapch-welcome-card:visited {
	display: flex !important;
	align-items: flex-start !important;
	gap: 14px !important;
	padding: 20px !important;
	background: #fff !important;
	border: 1.5px solid var(--sc-border) !important;
	border-radius: 14px !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	cursor: pointer !important;
	transition: all 0.15s var(--sc-ease);
	text-decoration: none !important;
	color: var(--sc-text) !important;
	text-align: left !important;
	box-shadow: var(--sc-shadow-xs) !important;
	min-width: 0;
	min-height: 96px !important;
	height: auto !important;
	width: 100% !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-shadow: none !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	white-space: normal !important;
	overflow: visible !important;
}

.snapch-welcome-card:hover,
.snapch-welcome-card:focus {
	border-color: var(--sc-blue) !important;
	background: var(--sc-blue-soft) !important;
	color: var(--sc-navy) !important;
	transform: translateY(-2px);
	box-shadow: var(--sc-shadow-md);
	outline: none;
}

.snapch-welcome-card-icon {
	flex-shrink: 0;
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 10px;
	background: var(--sc-blue-soft);
	color: var(--sc-blue);
	transition: all 0.15s var(--sc-ease);
}

.snapch-welcome-card:hover .snapch-welcome-card-icon {
	background: var(--sc-blue) !important;
	color: #fff !important;
}

.snapch-welcome-card-body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	overflow: visible !important;
	width: auto !important;
}

.snapch-welcome-card-title {
	font-weight: 700 !important;
	font-size: 14.5px !important;
	color: var(--sc-navy) !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
	letter-spacing: -0.005em;
	line-height: 1.3 !important;
	white-space: normal !important;
	overflow: visible !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}

.snapch-welcome-card-desc {
	font-size: 13px !important;
	color: var(--sc-text-muted) !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	padding: 0 !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	font-weight: 400 !important;
	hyphens: auto;
}

.snapch-welcome-card:hover .snapch-welcome-card-title { color: var(--sc-navy) !important; }
.snapch-welcome-card:hover .snapch-welcome-card-desc { color: var(--sc-text-soft) !important; }

/* Creator attribution footer */
.snapch-welcome-meta {
	margin-top: 32px;
	padding-top: 22px;
	border-top: 1px solid var(--sc-border);
	color: var(--sc-text-muted);
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.snapch-welcome-meta .snapch-avatar {
	width: 22px; height: 22px;
}

/* ==========  FIRST-ARRIVAL WELCOME BANNER  ========== */
.snapch-welcome-banner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 16px 28px 4px;
	padding: 16px 18px;
	background: linear-gradient(135deg, var(--sc-blue-soft) 0%, #FAFBFF 100%);
	border: 1px solid #BFDBFE;
	border-radius: 14px;
	box-shadow: var(--sc-shadow-xs);
	position: relative;
	animation: snapch-welcome-banner-in 0.35s var(--sc-ease);
}
@keyframes snapch-welcome-banner-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.snapch-welcome-banner-icon {
	flex-shrink: 0;
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 10px;
	background: var(--sc-blue);
	color: var(--sc-gold);
	box-shadow: 0 2px 6px rgba(18,88,194,0.25);
}

.snapch-welcome-banner-body {
	flex: 1;
	min-width: 0;
}

.snapch-welcome-banner-title {
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: var(--sc-navy) !important;
	margin: 0 0 3px !important;
	line-height: 1.4 !important;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}
.snapch-welcome-banner-title strong { font-weight: 700; color: var(--sc-blue-dark); }

.snapch-welcome-banner-sub {
	font-size: 13px !important;
	color: var(--sc-text-soft) !important;
	margin: 0 !important;
	line-height: 1.5 !important;
}

.snapch-welcome-banner-close {
	flex-shrink: 0;
	margin-top: -2px;
	color: var(--sc-text-muted) !important;
}
.snapch-welcome-banner-close:hover {
	background: var(--sc-blue) !important;
	color: #fff !important;
}

@media (max-width: 900px) {
	.snapch-welcome-banner { margin: 12px 16px 4px; padding: 14px 16px; }
}

/* ==========  CHANNEL SETTINGS — DANGER ZONE  ========== */
.snapch-danger-zone {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--sc-border);
}
.snapch-danger-zone h3 {
	font-family: 'DM Serif Display', Georgia, serif !important;
	font-size: 14px !important;
	color: var(--sc-text-muted) !important;
	margin: 0 0 14px !important;
	font-weight: normal !important;
	letter-spacing: 0.04em;
	line-height: 1.4 !important;
	text-transform: uppercase;
}
.snapch-danger-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--sc-border);
}
.snapch-danger-row:last-child { border-bottom: none; }
.snapch-danger-title {
	font-weight: 600 !important;
	font-size: 14px !important;
	color: var(--sc-navy) !important;
	margin: 0 0 4px !important;
	line-height: 1.4 !important;
}
.snapch-danger-title-red { color: #DC2626 !important; }
.snapch-danger-desc {
	font-size: 12.5px !important;
	color: var(--sc-text-muted) !important;
	margin: 0 !important;
	line-height: 1.5 !important;
	max-width: 360px;
}
.snapch-btn-danger,
.snapch-btn-danger:link,
.snapch-btn-danger:visited {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 8px 14px !important;
	background: #fff !important;
	color: #DC2626 !important;
	border: 1.5px solid #FCA5A5 !important;
	border-radius: 8px !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: all 0.12s var(--sc-ease);
	white-space: nowrap;
	text-decoration: none !important;
	flex-shrink: 0;
}
.snapch-btn-danger:hover, .snapch-btn-danger:visited:hover {
	background: #DC2626 !important;
	color: #fff !important;
	border-color: #DC2626 !important;
}
.snapch-btn-danger:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.snapch-danger-confirm-input {
	width: 240px;
	padding: 8px 12px !important;
	border: 1.5px solid #FCA5A5 !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-family: inherit !important;
	color: var(--sc-text) !important;
	background: #FFF7F7 !important;
}
.snapch-danger-confirm-input:focus {
	outline: none !important;
	border-color: #DC2626 !important;
	box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important;
}

.snapch-alert-success {
	padding: 10px 14px;
	background: #DCFCE7;
	border: 1px solid #86EFAC;
	border-radius: 10px;
	color: #166534;
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 500;
}

/* Selectors cover Twenty Twenty-* themes, Astra, Kadence, GeneratePress, Hello, Blocksy. */
body.snapch-hide-theme-title .entry-title,
body.snapch-hide-theme-title .page-title,
body.snapch-hide-theme-title .page-header,
body.snapch-hide-theme-title .wp-block-post-title,
body.snapch-hide-theme-title h1.entry-title,
body.snapch-hide-theme-title .elementor-page-title,
body.snapch-hide-theme-title .title-bar,
body.snapch-hide-theme-title .page-header-inner,
body.snapch-hide-theme-title .ast-page-header-section {
	display: none !important;
}

/* Plugin pages get their own vertical breathing room via .snapch-app margin. */

/* Mobile menu hamburger button — hidden on desktop, visible at narrow widths */
.snapch-mobile-menu-btn { display: none !important; }

/* Mobile backdrop — only shown when drawer is open */
.snapch-mobile-backdrop {
	display: none;
	position: absolute;
	inset: 0;
	background: rgba(11, 29, 58, 0.55);
	z-index: 40;
	animation: snapch-fade-in 0.2s ease;
}
@keyframes snapch-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Mobile */
@media (max-width: 900px) {
	.snapch-app {
		/* Use 100dvh so iOS Safari's collapsing chrome doesn't clip the bottom.
		 * `calc(100vh - 120px)` was the old desktop-style margin assumption. */
		height: 100dvh;
		min-height: 100dvh;
		margin: 0;
		max-width: 100%;
		border-radius: 0;
	}
	.snapch-shell {
		grid-template-columns: 1fr;
		border-radius: 0;
		position: relative;
		overflow: hidden;
	}
	/* On mobile we hide the far-left utility rail entirely — its functions
	 * (Channels / DMs / Activity / Files navigation) are reachable from the
	 * hamburger-driven sidebar drawer, so the rail is redundant on a phone
	 * and just steals horizontal space. */
	.snapch-shell.has-rail,
	.snapch-shell.has-rail:has(.snapch-thread-panel) {
		grid-template-columns: 1fr;
	}
	.snapch-shell:has(.snapch-thread-panel) { grid-template-columns: 1fr; }

	.snapch-rail {
		display: none !important;
	}

	/* Sidebar / side-views become slide-out drawers from the LEFT edge of the
	 * viewport (no rail offset on mobile). */
	.snapch-sidebar,
	.snapch-side-view {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		max-width: min(85vw, 320px);
		z-index: 50;
		transform: translateX(-110%);
		transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
		box-shadow: 4px 0 24px rgba(0,0,0,0.18);
		display: flex !important;
		flex-direction: column;
	}
	.snapch-shell.is-mobile-open .snapch-sidebar,
	.snapch-shell.is-mobile-open .snapch-side-view {
		transform: translateX(0);
	}

	/* Backdrop appears under drawer */
	.snapch-shell.is-mobile-open .snapch-mobile-backdrop {
		display: block;
		left: 0;
	}

	/* Hamburger visible on mobile */
	.snapch-mobile-menu-btn {
		display: inline-flex !important;
		margin-right: 4px;
		flex-shrink: 0;
	}

	/* Main pane lives in the remaining width */
	.snapch-main {
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
	}

	.snapch-thread-panel { position: fixed; inset: 0; z-index: 60; }
	.snapch-msg { padding: 8px 14px; }
	.snapch-ch-head { padding: 12px 14px; }

	/* Composer — fits within the viewport minus rail; button always visible.
	 * The Send button was being clipped on iOS because the composer's flex children
	 * weren't allowed to shrink and the toolbar+textarea ate all the width.
	 * Right padding adds breathing room for any floating accessibility widget
	 * that may overlap the bottom-right (common with iOS Reader Mode, WP Accessibility
	 * Helper plugins, AccessiBe, etc.). */
	.snapch-composer {
		padding: 10px 12px calc(72px + env(safe-area-inset-bottom)) 12px;
		min-width: 0;
	}
	.snapch-composer-row {
		min-width: 0;
		flex-wrap: wrap;
		gap: 6px;
	}
	.snapch-composer textarea,
	.snapch-composer-input {
		min-width: 0 !important;
		font-size: 16px !important; /* iOS won't zoom when input is 16px+ */
	}
	.snapch-composer .snapch-btn-primary,
	.snapch-composer .snapch-send-btn,
	.snapch-composer .snapch-send {
		flex-shrink: 0;
		min-width: 0;
	}

	.snapch-welcome { padding: 32px 18px 24px; margin: 20px auto; }
	.snapch-welcome h2 { font-size: 24px !important; }

	/* Channel header on mobile — make room for hamburger */
	.snapch-ch-head-title h1 {
		font-size: 17px !important;
	}
	.snapch-ch-topic { display: none; }
	/* Hide the desktop "Invite" button on mobile to save space — settings menu still has it */
	.snapch-ch-head-actions .snapch-btn-primary span { display: none; }
	.snapch-ch-head-actions .snapch-btn-primary { padding: 8px !important; }

	/* Composer hint row gets squished on mobile — hide */
	.snapch-composer-hint { display: none; }
	/* Toolbar is hidden by default on mobile and slides into view when the
	 * textarea (composer-inner) is focused. Saves vertical space and matches
	 * the Slack pattern of revealing formatting controls on demand. */
	.snapch-composer-toolbar {
		display: none !important;
	}
	.snapch-composer:focus-within .snapch-composer-toolbar {
		display: flex !important;
		padding: 2px 0 4px;
		animation: snapch-toolbar-slide 0.15s ease-out;
	}
	@keyframes snapch-toolbar-slide {
		from { opacity: 0; transform: translateY(-4px); }
		to { opacity: 1; transform: translateY(0); }
	}
	.snapch-composer-counter { display: none; }
}

/* =========================================================================
 * BOTTOM TAB BAR (mobile only) — Slack-style primary navigation
 * v1.8.0: replaces the left rail on mobile. Hidden on desktop.
 * ======================================================================= */
.snapch-btabs {
	display: none; /* desktop default — bottom tabs are mobile-only */
}

@media (max-width: 900px) {
	.snapch-btabs {
		display: grid !important;
		grid-template-columns: repeat(5, 1fr);
		gap: 0;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 80;
		background: #fff;
		border-top: 1px solid #E5E7EB;
		padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
		box-shadow: 0 -2px 12px rgba(15,23,42,0.06);
	}
	.snapch-btab,
	.snapch-btab:link,
	.snapch-btab:visited {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 3px;
		padding: 6px 4px !important;
		background: transparent !important;
		border: none !important;
		border-radius: 8px !important;
		color: #6B7280 !important;
		font: 600 10.5px/1.2 'Outfit', sans-serif !important;
		cursor: pointer !important;
		transition: background 0.12s var(--sc-ease), color 0.12s var(--sc-ease);
		min-height: 48px;
		text-decoration: none !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
	}
	.snapch-btab:hover,
	.snapch-btab:focus-visible,
	.snapch-btab.is-active {
		color: var(--sc-blue) !important;
		background: rgba(18,88,194,0.06) !important;
	}
	.snapch-btab-icon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
	}
	.snapch-btab-badge {
		position: absolute;
		top: -4px;
		right: -8px;
		background: var(--sc-red);
		color: #fff !important;
		font-size: 9.5px;
		font-weight: 700;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 1px 3px rgba(220,38,38,0.3);
		line-height: 1;
	}
	.snapch-btab-label {
		font-size: 10px;
		line-height: 1.1;
		max-width: 56px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}

	/* The "More" action sheet floating above the tab bar */
	.snapch-btab-sheet-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(15,23,42,0.45);
		z-index: 81;
		animation: snapch-fade-in 0.15s ease-out;
	}
	.snapch-btab-sheet {
		position: fixed;
		left: 8px;
		right: 8px;
		bottom: calc(70px + env(safe-area-inset-bottom));
		z-index: 82;
		background: #fff;
		border-radius: 14px;
		padding: 6px;
		box-shadow: 0 8px 32px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.06);
		display: flex;
		flex-direction: column;
		gap: 2px;
		animation: snapch-sheet-rise 0.18s ease-out;
	}
	.snapch-btab-sheet-item,
	.snapch-btab-sheet-item:link,
	.snapch-btab-sheet-item:visited {
		display: flex !important;
		align-items: center;
		gap: 12px;
		padding: 14px 16px !important;
		background: transparent !important;
		border: none !important;
		border-radius: 10px !important;
		color: #0B1D3A !important;
		font: 600 15px/1.3 'Outfit', sans-serif !important;
		cursor: pointer !important;
		text-decoration: none !important;
		text-align: left;
		width: 100%;
	}
	.snapch-btab-sheet-item:hover,
	.snapch-btab-sheet-item:focus-visible {
		background: rgba(18,88,194,0.06) !important;
		color: var(--sc-blue) !important;
	}
	.snapch-btab-sheet-item-danger,
	.snapch-btab-sheet-item-danger:link,
	.snapch-btab-sheet-item-danger:visited {
		color: #DC2626 !important;
	}
	.snapch-btab-sheet-item-danger:hover,
	.snapch-btab-sheet-item-danger:focus-visible {
		background: rgba(220,38,38,0.08) !important;
		color: #DC2626 !important;
	}
	@keyframes snapch-fade-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	@keyframes snapch-sheet-rise {
		from { opacity: 0; transform: translateY(8px); }
		to { opacity: 1; transform: translateY(0); }
	}

	/* Reserve space at the bottom of the app for the tab bar so nothing
	 * is hidden underneath it. Bottom tab is 60px + safe-area-inset-bottom. */
	body.snapch-fullscreen-app .snapch-app,
	body.snapch-fullscreen-app .snapch-shell {
		padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
	}
	/* The composer was already padded for accessibility widgets — now we
	 * tighten because the tab bar takes care of that area. */
	.snapch-composer {
		padding-bottom: 14px !important;
	}
}

/* =========================================================================
 * DRAG-AND-DROP overlay — appears when user drags files over the chat
 * v1.8.1: drop files anywhere in the app to attach + send to active channel
 * ======================================================================= */
.snapch-shell.is-drag-over {
	position: relative;
}
.snapch-drop-overlay {
	position: absolute;
	inset: 0;
	background: rgba(18, 88, 194, 0.92);
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none; /* let drop events pass through to underlying shell */
	animation: snapch-drop-fade-in 0.12s ease-out;
}
.snapch-drop-overlay-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px 40px;
	background: rgba(255, 255, 255, 0.08);
	border: 2px dashed rgba(255, 255, 255, 0.6);
	border-radius: 16px;
	color: #fff;
	text-align: center;
}
.snapch-drop-overlay-inner svg {
	color: #fff;
	opacity: 0.95;
}
.snapch-drop-overlay-title {
	font-family: 'DM Serif Display', serif;
	font-size: 28px;
	line-height: 1.2;
	padding-top: 4px;
}
.snapch-drop-overlay-sub {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
}
@keyframes snapch-drop-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Small "Uploading…" badge in the corner while drag-dropped files are POSTing. */
.snapch-drop-uploading {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 95;
	padding: 10px 18px;
	background: var(--sc-navy);
	color: #fff;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 4px 16px rgba(11, 29, 58, 0.3);
	animation: snapch-drop-fade-in 0.15s ease-out;
}
@media (max-width: 900px) {
	.snapch-drop-uploading {
		bottom: calc(80px + env(safe-area-inset-bottom));
		right: 14px;
	}
}

/* =========================================================================
 * PAUSED-NOTIFICATIONS notice (v1.8.2)
 * Shown in the channel header when the DM partner has paused notifications.
 * ======================================================================= */
.snapch-paused-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px;
	background: rgba(232, 168, 56, 0.10);
	border-bottom: 1px solid rgba(232, 168, 56, 0.28);
	font-size: 13px;
	color: #6B4F1A;
	line-height: 1.45;
}
.snapch-paused-notice strong {
	color: #0B1D3A;
	font-weight: 600;
}
.snapch-paused-notice-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #E8A838;
	flex-shrink: 0;
	animation: snapch-paused-notice-pulse 1.8s ease-in-out infinite;
}
@keyframes snapch-paused-notice-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}
@media (max-width: 600px) {
	.snapch-paused-notice {
		font-size: 12.5px;
		padding: 8px 14px;
	}
}