@font-face {
	font-family: 'PrimaryFontRegular', sans-serif;
	src: 
		url('./fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'PrimaryFontBold';
	src: url('./fonts/Poppins-Medium.ttf') format('truetype');
}
body {
	font-family: 'PrimaryFontRegular', sans-serif;
}
html {
	overflow-x: hidden !important
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'PrimaryFontBold', sans-serif;
}
input {
	width: 100%;
}
.nav-link {
	font-family: 'PrimaryFontBold', sans-serif !important;
}
.avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #d9d9d9;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	color: #000;
	font-weight: bold;
}

.form-border-bottom {
	border-bottom: 1px solid gray !important;
}

.create-block-header {
	width: 100%;
	padding: 5px;
	border-radius: 5px;
	background: #f5f5f5;
}

.input-border-left-radius {
	border-top-left-radius: 0.5rem !important;
	border-bottom-left-radius: 0.5rem !important;
	border-top-right-radius: 0rem !important; 
	border-bottom-right-radius: 0rem !important; 
}

.input-border-no-radius {
	border-top-left-radius: 0rem !important;
	border-bottom-left-radius: 0rem !important;
	border-top-right-radius: 0rem !important; 
	border-bottom-right-radius: 0rem !important; 
}

.input-border-right-radius {
	border-top-left-radius: 0rem !important;
	border-bottom-left-radius: 0rem !important;
	border-top-right-radius: 0.5rem !important; 
	border-bottom-right-radius: 0.5rem !important; 
}

.m-1 {
	margin: 0.1rem !important;
}

.hide-on-mobile {
	display: block;
}

@media (max-width: 600px) {
	.hide-on-mobile {
		display: none;
	}
	.nav-link {
		color: black !important;
	}
	.mobile-p-1 {
		padding: 1rem !important;
	}
	.mobile-pl-1 {
		padding-left: 1rem !important;
	}
}

.hide-on-desktop {
	display: block;
}
@media (min-width: 601px) {
	.hide-on-desktop {
		display: none;
	}
}

.choices[data-type="select-one"]::after {
	display: none;
}
.choices__item--selectable {
	white-space: nowrap !important;
}
.grecaptcha-badge {
	display: none !important;
}
.img-gallery {
	width: 100%;
	height: 100px;
	cursor: pointer;
	border: 3px solid #d3d3d3;
	border-radius: 5px;
}
.sidebar-inner {
	border-right: 3px solid #d7dce1;
	overflow-y: scroll;
	height: calc(100vh - 125px);
}
.sidebar-outer {
	position: relative;
	overflow: hidden;
}
.cursor {
	cursor: pointer;
}
.footer-fixed {
/*	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #fff;*/
}
.menu-is-active {
	background: #f5f6fd;
	color: #3a58d2;
}
.display td {
	white-space: nowrap;
	position: relative;
	overflow: hidden;
}
tr {
	white-space: nowrap;
}
.card-hover {
	transition: transform 0.7s;
}
.card-hover:hover {
	transform: scale(1.05);
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	background: white;
	cursor: pointer;
	border-radius: 5px;
}
.hidden {
	display: none;
}

/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
	border-radius: 50%;
}
.spinner {
	color: #ffffff;
	font-size: 22px;
	text-indent: -99999px;
	margin: 0px auto;
	position: relative;
	width: 20px;
	height: 20px;
	box-shadow: inset 0 0 0 2px;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}
.spinner:before,
.spinner:after {
	position: absolute;
	content: "";
}
.spinner:before {
	width: 10.4px;
	height: 20.4px;
	background: transparent;
	border-radius: 20.4px 0 0 20.4px;
	top: -0.2px;
	left: -0.2px;
	-webkit-transform-origin: 10.4px 10.2px;
	transform-origin: 10.4px 10.2px;
	-webkit-animation: loading 2s infinite ease 1.5s;
	animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
	width: 4px;
	height: 10px;
	background: #fff;
	border-radius: 0 10.2px 10.2px 0;
	top: -0.1px;
	left: 10.2px;
	-webkit-transform-origin: 0px 10.2px;
	transform-origin: 0px 10.2px;
	-webkit-animation: loading 2s infinite ease;
	animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes loading {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.HomePageHeroSection {
	background: center bottom/contain no-repeat, linear-gradient(135deg, #ffffff 0 30%, #453dd8 70% 100%)!important;
}

.main-title {
	font-size: 4.1rem !important;
	font-weight: 500 !important;
}

.card-with-bullet-points {
	position: relative;
	top: -30px;
	max-width: 75% !important;
	background-image: linear-gradient(to left, #ffffff, #ffffff);
	border-radius: 10px !important;
}

.card-content {
	color: #161c2d;
}

.bullet-point-icon {
	min-width: 5.5rem !important;
}

.get-started-btn {
	background-color: #453dd8 !important;
	color: #ffffff;
}

.features-section {
	background: center bottom/contain no-repeat, linear-gradient(135deg, #453dd875 0 30%, #453dd8 70% 100%) !important;
}

::-webkit-scrollbar {
	width: 7px;
}
::-webkit-scrollbar-thumb {
	background-color: #d3d3d3;
}
::-webkit-scrollbar-track {
	background-color: #f1f1f1;
}
* {
	scrollbar-width: auto;
	scrollbar-color: #555 #f1f1f1;
}

.overflow {
	overflow: auto;
	max-height: 80vh;
}

.overflow-dv {
	overflow-y: scroll;
	overflow-x: hidden;
	max-height: 75vh;
}

.role-tree { padding: 4px 0; }
.role-node { position: relative; }
.role-children {
	margin-left: 20px;
	padding-left: 20px;
	border-left: 2px solid #dee2e6;
}
.role-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	margin: 4px 0;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	cursor: grab;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
	position: relative;
	user-select: none;
}
.role-children .role-row {
	margin-left: 0;
}
.role-children .role-node {
	position: relative;
}
.role-children .role-node::before {
	content: '';
	position: absolute;
	left: -20px;
	top: 20px;
	width: 20px;
	height: 2px;
	background: #dee2e6;
}
.role-row:hover { border-color: #86b7fe; box-shadow: 0 0 0 3px rgba(13,110,253,.08); }
.role-row.drag-over { border-color: #0d6efd; background: #e8f0fe; box-shadow: 0 0 0 3px rgba(13,110,253,.15); }
.role-row.dragging { opacity: 0.35; cursor: grabbing; }
.role-superadmin { background: #fffbeb; border-color: #fbbf24; cursor: default; }
.role-superadmin:hover { border-color: #f59e0b; box-shadow: none; }
.role-name { font-weight: 500; font-size: 14px; flex: 1; }
.role-drag-hint { margin-left: auto; opacity: 0.4; font-size: 13px; }
.role-arrow {
	display: inline-flex;
	align-items: center;
	color: #6c757d;
	font-size: 13px;
}
.root-drop-zone {
	border: 2px dashed #ced4da;
	border-radius: 8px;
	padding: 7px 16px;
	color: #adb5bd;
	font-size: 13px;
	margin-bottom: 12px;
	text-align: center;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
	cursor: default;
}
.root-drop-zone.drag-over { border-color: #0d6efd; color: #0d6efd; background: #e8f0fe; }
.role-children-count {
	font-size: 11px;
	color: #6c757d;
	background: #f1f3f5;
	border-radius: 10px;
	padding: 1px 7px;
}

/* Permissions UI */
.perm-module-table th,
.perm-module-table td,
.perm-field-table th,
.perm-field-table td {
	vertical-align: middle;
	font-size: 13px;
}
.perm-fields-inner {
	border-top: 1px solid #dee2e6;
	background: #f8f9fa;
}
.perm-expand-btn {
	line-height: 1;
}
.perm-expand-btn:hover { color: #0d6efd !important; }

/* ── Gmail Inbox ─────────────────────────────────────── */
/* gmailinbox/index.tpl doesn't load view.css, which is where other admin
   pages get this flexbox-overflow guard — without it .contactapp-detail-wrap
   has no min-width cap and the header gets pushed wider than the viewport. */
.contactapp-detail-wrap { min-width: 0; }
.contact-header > .d-flex { flex: 1 1 auto; min-width: 0; }

#gi-layout { background: #fff; height: calc(100vh - 130px); overflow: hidden; position: relative; display: flex; flex-direction: row; }

/* Folder nav — Gmail-style rail (Compose / Inbox / Sent / All Mail / Settings) */
.gi-folder-nav { width: 76px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; border-right: 1px solid #f1f3f4; background: #fff; }
.gi-compose-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 8px; padding: 10px 2px; border: none; border-radius: 12px; background: #c2e7ff; color: #001d35; font-size: 11px; font-weight: 600; line-height: 1.1; cursor: pointer; transition: background .12s, box-shadow .12s; }
.gi-compose-btn i { font-size: 18px; }
.gi-compose-btn:hover { background: #b3e0ff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.gi-folder-link { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 8px; color: #444746; text-decoration: none; font-size: 11px; line-height: 1.1; text-align: center; transition: background .12s, color .12s; }
.gi-folder-link i { font-size: 18px; }
.gi-folder-link:hover { background: #f1f3f4; color: #202124; }
.gi-folder-link.active { background: #d3e3fd; color: #001d35; font-weight: 600; }
.gi-folder-link-settings { margin-top: auto; }

/* Drive-uploaded attachment row (Gmail-style attachment card) */
.gi-attach-drive-row { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 320px; padding: 8px 12px; border: 1px solid #dadce0; border-radius: 8px; background: #fff; text-decoration: none; color: #202124; font-size: 13px; transition: background .12s, box-shadow .12s; }
.gi-attach-drive-row:hover { background: #f6f8fc; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.gi-attach-drive-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; border-radius: 6px; background: #e8f0fe; }
.gi-attach-drive-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* List column — wraps topbar + scrollable list */
.gi-list-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.gi-list-col-hidden { display: none !important; }

/* Topbar — Gmail-style icon toolbar above the list */
.gi-topbar { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 4px 0 8px; border-bottom: 1px solid #f1f3f4; background: #fff; flex-shrink: 0; }
.gi-topbar-left { display: flex; align-items: center; gap: 0; }
.gi-topbar-right { display: flex; align-items: center; gap: 4px; padding-right: 4px; }
.gi-topbar-check { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.gi-topbar-check:hover { background: #f1f3f4; }
.gi-topbar-btn { width: 32px; height: 32px; background: none; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #444746; font-size: 18px; padding: 0; transition: background .12s, color .12s; }
.gi-topbar-btn:hover { background: #f1f3f4; color: #202124; }
.gi-topbar-btn:active { background: #e0e0e0; }
/* Sync button: blue tint on hover + icon rotation — signals a live connection */
.gi-topbar-btn-sync:hover { background: #e8f0fe; color: #1a73e8; }
.gi-topbar-btn-sync:hover i { transform: rotate(180deg); transition: transform .3s ease; }
.gi-topbar-btn-sync i { transition: transform .3s ease; }
.gi-page-info { font-size: 12px; color: #5f6368; padding: 0 4px; white-space: nowrap; }

/* Settings gear in the CRM page header */
.gi-hd-btn { width: 34px; height: 34px; background: none; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #444746; font-size: 18px; padding: 0; transition: background .12s; text-decoration: none; }
.gi-hd-btn:hover { background: #f1f3f4; color: #202124; }

/* Account chip in header left */
.gi-account-chip { font-size: 13px; color: #5f6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* List panel — scrollable rows */
.gi-list { flex: 1; overflow-y: auto; min-height: 0; background: #fff; }
.gi-loading { padding: 16px; color: #666; font-size: 13px; display: flex; align-items: center; }
.gi-empty { padding: 48px 16px; text-align: center; color: #999; font-size: 13px; }

/* Row */
.gi-row { display: flex; align-items: center; height: 50px; padding: 0 8px 0 0; border-bottom: 1px solid #f1f3f4; cursor: pointer; font-size: 14px; background: #fff; transition: box-shadow .08s; user-select: none; }
.gi-row:hover { background: #f6f8fc; box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0; }
.gi-row--active { background: #d3e3fd !important; }
/* Avatar shows by default; swaps to checkbox on hover */
.gi-row-start { width: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: default; }
.gi-check { display: none; align-items: center; justify-content: center; cursor: default; }
.gi-row-avatar { display: flex; }
.gi-row:hover .gi-check { display: flex; }
.gi-row:hover .gi-row-avatar { display: none; }
.gi-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: #1a73e8; flex-shrink: 0; margin-right: 4px; }
.gi-row-unread .gi-row-from { font-weight: 700; color: #202124; }
.gi-row-unread .gi-row-subject { font-weight: 700; color: #202124; }
.gi-row-unread .gi-row-date { font-weight: 700; color: #202124; }
.gi-star { width: 28px; background: none; border: none; padding: 0; color: #ccc; font-size: 14px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.gi-star:hover { color: #f4b400; }
.gi-row-from { width: 140px; font-weight: 600; font-size: 14px; color: #202124; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.gi-count { font-size: 11px; font-weight: 400; color: #444746; background: #e8eaed; border-radius: 10px; padding: 0 5px; line-height: 16px; flex-shrink: 0; }
.gi-row-body { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; margin: 0 8px; font-size: 14px; color: #202124; }
.gi-row-subject { font-weight: 400; }
.gi-row-snippet { color: #7a7a7a; font-weight: 400; }
.gi-row-date { font-size: 12px; color: #7a7a7a; white-space: nowrap; flex-shrink: 0; }

/* Load more */
.gi-load-more button { font-size: 13px; }

/* Detail panel — mobile: full-width overlay */
.gi-detail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; background: #fff; }

/* Thread header */
.gi-thread-hd { display: flex; align-items: center; gap: 12px; padding: 20px 24px 12px; border-bottom: 1px solid #e0e0e0; }
.gi-thread-subject { font-size: 22px; font-weight: 400; color: #202124; margin: 0; flex: 1; }
.gi-back-btn { background: none; border: none; font-size: 18px; color: #444; padding: 6px; cursor: pointer; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.gi-back-btn:hover { background: #f1f3f4; }

/* Message cards */
.gi-thread-msgs { padding: 12px 24px; }
.gi-msg-card { border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.gi-msg-card-hd { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; cursor: pointer; background: #fff; }
.gi-msg-card-hd:hover { background: #f6f8fc; }
.gi-msg-meta { flex: 1; min-width: 0; }
.gi-msg-sender { font-size: 14px; color: #202124; margin-bottom: 1px; }
.gi-msg-addr { font-size: 12px; color: #666; font-weight: 400; }
.gi-msg-to { font-size: 12px; color: #888; }
.gi-msg-snippet { font-size: 13px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.gi-msg-ts { font-size: 12px; color: #7a7a7a; white-space: nowrap; margin-left: 8px; flex-shrink: 0; }
.gi-msg-chev { font-size: 12px; color: #666; margin-left: 8px; flex-shrink: 0; align-self: center; }
.gi-msg-body-wrap { padding: 8px 16px 16px 68px; }
.gi-iframe { display: block; width: 100%; border: none; min-height: 60px; }

/* Avatar */
.gi-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: #fff; flex-shrink: 0; }
.gi-avatar-sm { width: 28px; height: 28px; font-size: 11px; }

/* Inline reply */
.gi-reply-area { margin: 8px 24px 24px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.gi-reply-pill { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: text; color: #888; font-size: 14px; }
.gi-reply-box { padding: 12px 16px; }
.gi-reply-header { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #666; border-bottom: 1px solid #e0e0e0; padding-bottom: 8px; margin-bottom: 8px; }
.gi-reply-to-input { border: none; outline: none; font-size: 13px; flex: 1; color: #202124; background: transparent; }
.gi-reply-editor { min-height: 80px; font-size: 14px; color: #202124; padding: 8px 0; outline: none; line-height: 1.5; }
.gi-reply-editor:empty::before { content: attr(data-placeholder); color: #aaa; pointer-events: none; }
.gi-reply-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 8px; border-top: 1px solid #f1f3f4; }
.gi-send-btn { background: #1a73e8; border-color: #1a73e8; border-radius: 20px; padding: 6px 18px; font-size: 14px; }
.gi-send-btn:hover { background: #1765cc; border-color: #1765cc; }
.gi-msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; border-top: 1px solid #f1f3f4; margin-top: 8px; }
.gi-attach-pill { display: inline-flex; align-items: center; font-size: 12px; color: #3c4043; background: #f1f3f4; border-radius: 4px; padding: 3px 10px; text-decoration: none; }
.gi-attach-link { color: #1a73e8; cursor: pointer; }
.gi-attach-link:hover { background: #e8f0fe; color: #1558b0; }
.gi-attach-list { padding: 4px 0 0; }

/* Drag & drop overlay */
.gi-drop-overlay { position: absolute; inset: 0; background: rgba(232,240,254,.93); border: 2px dashed #1a73e8; border-radius: 8px; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #1a73e8; font-size: 15px; }
.gi-drop-overlay i { font-size: 40px; }

/* To-field email autocomplete */
.gi-ac-wrap { position: relative; flex: 1; min-width: 0; }
.gi-ac-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 9999; background: #fff; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.2); max-height: 220px; overflow-y: auto; margin-top: 2px; }
.gi-ac-option { padding: 8px 14px; font-size: 13px; color: #202124; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-ac-option:hover { background: #f1f3f4; }

/* From selector */
.gi-from-wrap { position: relative; }
.gi-from-btn { background: none; border: none; padding: 0; font-size: 13px; color: #202124; cursor: pointer; display: flex; align-items: center; gap: 4px; max-width: 380px; }
.gi-from-btn:hover .gi-from-label { text-decoration: underline; }
.gi-from-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gi-from-dropdown { position: absolute; top: calc(100% + 4px); left: 0; z-index: 9999; background: #fff; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.2); min-width: 280px; max-height: 280px; overflow-y: auto; }
.gi-from-option { display: flex; align-items: center; padding: 10px 16px; font-size: 13px; color: #202124; cursor: pointer; }
.gi-from-option:hover { background: #f1f3f4; }
.gi-from-option.active { background: #e8f0fe; color: #1558b0; }

/* Empty detail placeholder */
.gi-detail-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #aaa; font-size: 14px; gap: 8px; }
.gi-detail-placeholder i { font-size: 56px; color: #dadce0; }

/* Misc */
@keyframes gi-spin-anim { to { transform: rotate(360deg); } }
.gi-spin { animation: gi-spin-anim .7s linear infinite; display: inline-block; }

/* Hidden states */
.gi-detail-hidden { display: none !important; }

/* ── Desktop: split-pane (only when a thread is open) ── */
@media (min-width: 768px) {
	.gi-list-col { padding-left: 16px; }
	#gi-layout:has(.gi-detail:not(.gi-detail-hidden)) .gi-list-col { flex: 0 0 376px; max-width: 376px; border-right: 1px solid #e0e0e0; }
	.gi-detail { position: static; flex: 1; min-width: 0; height: 100%; }
	.gi-list-col-hidden { display: flex !important; }
	.gi-back-btn { display: none; }
}

/* Mobile tweaks */
@media (max-width: 767px) {
	.gi-thread-hd { padding: 12px 16px 8px; }
	.gi-thread-msgs { padding: 8px 12px; }
	.gi-reply-area { margin: 8px 12px 16px; }
	.gi-msg-body-wrap { padding: 8px 12px 12px 12px; }
	.gi-row-from { width: 110px; }
}

/* Email thread conversation view */
.et-thread .et-thread-header { cursor: pointer; }
.et-msg { border-bottom: 1px solid #f0f0f0; }
.et-msg:last-child { border-bottom: none; }
.et-msg-header {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .625rem 1rem;
	cursor: pointer;
}
.et-msg-header:hover { background: #f8f9fa; }
.et-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #d0e4ff;
	color: #0d6efd;
	font-size: 11px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.et-msg--outbound .et-avatar { background: #d1f4e0; color: #453dd8; }
.et-msg-meta { flex: 1; min-width: 0; }
.et-msg-from { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-msg-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-msg-body { padding: .5rem 1rem .5rem 3.5rem; }
.et-iframe { width: 100%; border: none; min-height: 60px; display: block; }
.et-reply-bar { background: #f8f9fa; }