:root {
	--connect-primary: #00aeef;
	--connect-primary-dark: #0072ce;
	--connect-accent: #20d6ff;
	--connect-ink: #07111f;
	--connect-muted: #6f7f90;
	--connect-line: #dce8f2;
	--connect-panel: #ffffff;
	--connect-soft: #eaf8ff;
	--connect-shell: #f4f8fc;
	--connect-warning: #f4a62a;
	--connect-danger: #e25563;
	--primary: #00aeef;
	--primary-hover: #008ed6;
	--primary-dark: #07111f;
	--rgba-primary-1: rgba(0, 174, 239, 0.1);
	--rgba-primary-2: rgba(0, 174, 239, 0.2);
	--rgba-primary-3: rgba(0, 174, 239, 0.3);
	--rgba-primary-4: rgba(0, 174, 239, 0.4);
	--rgba-primary-5: rgba(0, 174, 239, 0.5);
	--rgba-primary-6: rgba(0, 174, 239, 0.6);
	--rgba-primary-7: rgba(0, 174, 239, 0.7);
	--rgba-primary-8: rgba(0, 174, 239, 0.8);
	--rgba-primary-9: rgba(0, 174, 239, 0.9);
	--bs-primary: #00aeef;
	--bs-primary-rgb: 0, 174, 239;
}

body {
	font-family: Poppins, sans-serif;
	color: var(--connect-ink);
	background: var(--connect-shell);
}

.connect-app {
	max-width: 560px;
	min-height: 100vh;
	margin: 0 auto;
	background: var(--connect-shell);
	box-shadow: 0 0 30px rgba(2, 16, 31, 0.12);
}

.connect-header {
	position: sticky;
	top: 0;
	width: 100%;
	min-height: 80px;
	left: auto;
	right: auto;
	margin: 0;
	padding: 0 15px;
	transform: none;
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid var(--connect-line);
	backdrop-filter: blur(14px);
	box-sizing: border-box;
	z-index: 10;
}

.connect-header .header-content {
	display: flex;
	align-items: center;
	min-height: 80px;
}

.connect-header .left-content,
.connect-header .right-content {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.connect-header .mid-content {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

.connect-header .mid-content {
	text-align: center;
}

.connect-header .title {
	margin-bottom: 0;
	font-size: 18px;
}

.sub-title {
	display: block;
	margin-top: 2px;
	color: var(--connect-muted);
	font-size: 11px;
	font-weight: 500;
}

.brand-mark,
.avatar {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--connect-accent), var(--connect-primary-dark));
	color: #fff;
	font-weight: 800;
	box-shadow: 0 8px 20px rgba(0, 174, 239, 0.28);
}

.icon-btn,
.quick-btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--connect-soft);
	color: var(--connect-primary);
	flex: 0 0 40px;
}

.connect-main {
	padding-top: 16px;
	padding-bottom: 86px;
}

#chatView {
	padding-top: 78px;
}

.view {
	display: none;
}

.view.active {
	display: block;
}

.ops-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 14px;
}

.ops-strip > div {
	padding: 14px 10px;
	border: 1px solid var(--connect-line);
	border-radius: 8px;
	background: var(--connect-panel);
}

.metric-value,
.metric-label {
	display: block;
	text-align: center;
}

.metric-value {
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
}

.metric-label {
	margin-top: 5px;
	color: var(--connect-muted);
	font-size: 11px;
	font-weight: 600;
}

.filter-panel {
	margin-bottom: 10px;
}

.toolbar-row {
	display: flex;
	gap: 10px;
	align-items: center;
}

.chip-group {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 2px;
	flex: 1;
}

.chip {
	border: 1px solid var(--connect-line);
	border-radius: 999px;
	background: #fff;
	color: var(--connect-muted);
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.chip.active {
	border-color: var(--connect-primary);
	background: linear-gradient(135deg, var(--connect-primary), var(--connect-primary-dark));
	color: #fff;
}

.status-select {
	width: 118px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.connect-chat-list > ul {
	padding-bottom: 10px;
}

.connect-chat-list .list-items {
	border-radius: 8px;
	background: #fff;
	padding: 12px;
}

.connect-chat-list .list-items.is-unread {
	box-shadow: inset 4px 0 0 var(--connect-primary);
}

.connect-chat-list .list-items.needs-attention {
	background: #fffdf5;
	box-shadow: inset 4px 0 0 #d28a00;
}

.connect-chat-list .dz-media {
	display: grid;
	place-items: center;
	background: var(--connect-soft);
	color: var(--connect-primary);
	font-weight: 800;
}

.conversation-extra {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-top: 6px;
	flex-wrap: wrap;
}

.pill {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	border-radius: 999px;
	padding: 3px 8px;
	background: #eef4f8;
	color: var(--connect-muted);
	font-size: 10px;
	font-weight: 700;
}

.pill.open {
	background: #e8f8ff;
	color: var(--connect-primary);
}

.pill.assigned {
	background: #fff4df;
	color: #9c6400;
}

.pill.attention {
	background: #fff0d6;
	color: #8a5700;
}

.pill.resolved {
	background: #edf3f8;
	color: #536274;
}

.unread-badge {
	display: grid;
	place-items: center;
	min-width: 23px;
	height: 23px;
	border-radius: 50%;
	background: var(--connect-primary-dark);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
}

.chat-topbar {
	position: fixed;
	top: 0;
	left: 50%;
	right: auto;
	z-index: 9;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 560px;
	min-height: 74px;
	padding: 12px 14px;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--connect-line);
	backdrop-filter: blur(14px);
	box-sizing: border-box;
}

.chat-person {
	display: flex;
	align-items: center;
	min-width: 0;
	flex: 1;
}

.chat-person h5,
.settings-head h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
}

.chat-person span {
	display: block;
	color: var(--connect-muted);
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.message-state {
	margin-left: 6px;
	color: var(--connect-muted);
	font-size: 10px;
	font-weight: 700;
}

.message-state.sending {
	color: #8a7a42;
}

.message-state.failed {
	color: #c73737;
}

.message-error {
	max-width: 240px;
	margin-top: 3px;
	color: #c73737;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.3;
	text-align: right;
}

.message-state.read,
.message-state.delivered {
	color: var(--connect-primary);
}

.chat-container {
	padding-top: 4px;
	padding-bottom: 92px;
}

.chat-box-area .bubble.template {
	border: 1px dashed var(--connect-primary);
	background: #fff;
	color: var(--connect-primary);
}

.chat-box-area .chat-content .message-item .bubble.reaction {
	min-width: 74px;
	padding: 9px 12px;
	border-radius: 16px;
}

.chat-box-area .chat-content .message-item .bubble {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	max-width: min(300px, calc(100vw - 126px));
	white-space: normal;
	overflow-wrap: anywhere;
}

.chat-box-area .chat-content.user .message-item .bubble {
	align-items: flex-start;
}

.message-text {
	line-height: 1.35;
	white-space: pre-line;
}

.message-reply-preview {
	display: grid;
	gap: 2px;
	width: 100%;
	margin: -5px 0 9px;
	padding: 8px 10px;
	border-left: 3px solid var(--connect-primary);
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.62);
	color: var(--connect-muted);
	box-sizing: border-box;
}

.chat-content.user .message-reply-preview {
	border-left-color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.82);
}

.message-reply-preview strong {
	color: var(--connect-primary);
	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;
}

.chat-content.user .message-reply-preview strong {
	color: #fff;
}

.message-reply-preview span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 11px;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.message-image-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.message-image {
	display: block;
	width: min(240px, 100%);
	max-width: 100%;
	max-height: 320px;
	border-radius: 8px;
	object-fit: cover;
	background: #eef4f8;
}

.message-video {
	display: block;
	width: min(240px, 100%);
	max-width: 100%;
	max-height: 360px;
	border-radius: 8px;
	background: #07111f;
	box-sizing: border-box;
}

.message-reaction {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 210px;
}

.message-reaction-emoji {
	font-size: 22px;
	line-height: 1;
}

.message-reaction-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	color: var(--connect-muted);
	font-size: 12px;
	line-height: 1.2;
}

.message-caption {
	margin-top: 7px;
	line-height: 1.35;
}

.message-media-placeholder {
	display: grid;
	gap: 4px;
	min-width: 180px;
	padding: 14px;
	border: 1px dashed var(--connect-line);
	border-radius: 8px;
	background: #f7fafc;
	color: var(--connect-muted);
}

.message-media-placeholder i {
	color: var(--connect-primary);
	font-size: 22px;
}

.message-media-placeholder strong {
	color: var(--connect-dark);
	font-size: 13px;
}

.message-media-placeholder span {
	font-size: 10px;
	overflow-wrap: anywhere;
}

.chat-footer {
	position: fixed;
	left: 50%;
	right: auto;
	bottom: 0;
	width: 100%;
	max-width: 560px;
	transform: translateX(-50%);
	border-top: 1px solid var(--connect-line);
	background: #fff;
	box-sizing: border-box;
}

.chat-footer .input-wrapper {
	position: relative;
	display: flex;
	gap: 8px;
	align-items: center;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.emoji-panel {
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	z-index: 4;
	display: grid;
	grid-template-columns: repeat(6, 36px);
	gap: 4px;
	padding: 8px;
	border: 1px solid var(--connect-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(7, 17, 31, 0.14);
}

.emoji-panel[hidden] {
	display: none;
}

.emoji-panel button {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 8px;
	background: #f7fbfe;
	font-size: 18px;
	line-height: 1;
}

.emoji-panel button:active {
	background: #e7f5fd;
}

.message-action-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding: 8px 10px;
	border: 1px solid var(--connect-line);
	border-radius: 8px;
	background: #f7fbfe;
}

.message-action-panel[hidden] {
	display: none;
}

.message-action-copy {
	display: grid;
	gap: 2px;
	min-width: 0;
	padding-left: 8px;
	border-left: 3px solid var(--connect-primary);
}

.message-action-copy strong {
	color: var(--connect-primary);
	font-size: 11px;
	line-height: 1.2;
}

.message-action-copy span {
	color: var(--connect-muted);
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.message-action-buttons {
	display: flex;
	gap: 4px;
}

.message-action-buttons button,
.message-action-close {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--connect-muted);
	box-shadow: 0 1px 0 rgba(7, 17, 31, 0.06);
}

.message-action-buttons button {
	font-size: 16px;
}

.chat-footer .form-control {
	min-width: 0;
}

.chat-footer .chat-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--connect-accent), var(--connect-primary-dark));
	color: #fff;
	flex: 0 0 44px;
}

.settings-shell {
	padding-bottom: 24px;
}

.settings-head {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 18px;
}

.settings-head p {
	margin: 5px 0 0;
	color: var(--connect-muted);
	font-size: 12px;
	line-height: 1.45;
}

.config-form {
	display: grid;
	gap: 14px;
}

.field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.config-form label span {
	display: block;
	margin-bottom: 7px;
	font-size: 12px;
	font-weight: 700;
	color: var(--connect-muted);
}

.config-form .form-control {
	border-radius: 8px;
}

.config-form .form-select {
	border-radius: 8px;
}

.account-panel {
	margin: 18px 0;
	padding: 14px;
	border: 1px solid var(--connect-line);
	border-radius: 8px;
	background: #fff;
}

.account-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.account-panel-head h5 {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
}

.account-list {
	display: grid;
	gap: 8px;
}

.account-item {
	display: grid;
	grid-template-columns: 38px 1fr auto;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px;
	border: 1px solid var(--connect-line);
	border-radius: 8px;
	background: var(--connect-shell);
	color: var(--connect-ink);
	text-align: left;
}

.account-item.active {
	border-color: var(--connect-primary);
	background: var(--connect-soft);
}

.account-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	color: var(--connect-primary);
}

.account-body {
	min-width: 0;
}

.account-body strong,
.account-body small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-body strong {
	font-size: 13px;
	font-weight: 800;
}

.account-body small {
	margin-top: 2px;
	color: var(--connect-muted);
	font-size: 11px;
	font-weight: 600;
}

.account-type {
	border-radius: 999px;
	padding: 5px 8px;
	background: #fff;
	color: var(--connect-primary);
	font-size: 10px;
	font-weight: 800;
}

.account-form {
	padding: 14px;
	border: 1px solid var(--connect-line);
	border-radius: 8px;
	background: #fff;
}

.account-readonly {
	display: grid;
	gap: 10px;
	margin-bottom: 14px;
}

.account-readonly div {
	display: grid;
	gap: 4px;
	padding: 12px;
	border-radius: 8px;
	background: var(--connect-shell);
	border: 1px solid var(--connect-line);
}

.account-readonly span,
.account-name-field span {
	display: block;
	margin-bottom: 7px;
	color: var(--connect-muted);
	font-size: 12px;
	font-weight: 800;
}

.account-readonly strong {
	min-width: 0;
	overflow: hidden;
	color: var(--connect-ink);
	font-size: 14px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-name-field {
	display: block;
	margin-bottom: 14px;
}

.form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.empty-panel {
	padding: 14px;
	border: 1px dashed var(--connect-line);
	border-radius: 8px;
	color: var(--connect-muted);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

.lookup-result {
	padding: 11px 12px;
	border-radius: 8px;
	background: var(--connect-soft);
	color: var(--connect-primary-dark);
	font-size: 12px;
	font-weight: 700;
}

.connect-modal {
	border: 0;
	border-radius: 8px;
	box-shadow: var(--connect-shadow);
}

.connect-modal .modal-header,
.connect-modal .modal-footer {
	border-color: var(--connect-line);
}

.connect-modal .modal-title {
	font-size: 16px;
	font-weight: 800;
}

.modal-field span {
	display: block;
	margin-bottom: 7px;
	font-size: 12px;
	font-weight: 700;
	color: var(--connect-muted);
}

.modal-field .form-control {
	border-radius: 8px;
}

.integration-note {
	display: grid;
	gap: 8px;
	margin-top: 18px;
	padding: 14px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid var(--connect-line);
}

.integration-note h6 {
	margin: 0;
	font-weight: 800;
}

.integration-note code {
	display: block;
	padding: 9px 10px;
	border-radius: 6px;
	background: var(--connect-shell);
	color: var(--connect-primary);
	white-space: normal;
}

.connect-tabbar {
	position: fixed;
	left: 50%;
	right: auto;
	bottom: 0;
	z-index: 8;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
	max-width: 560px;
	padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	background: #fff;
	border-top: 1px solid var(--connect-line);
	box-sizing: border-box;
}

.connect-tabbar button {
	display: grid;
	place-items: center;
	gap: 3px;
	border: 0;
	background: transparent;
	color: var(--connect-muted);
	font-size: 11px;
	font-weight: 700;
}

.connect-tabbar button i {
	font-size: 20px;
}

.connect-tabbar button.active {
	color: var(--connect-primary);
}

.toast-zone {
	position: fixed;
	left: 50%;
	bottom: 82px;
	z-index: 30;
	width: min(520px, calc(100vw - 28px));
	transform: translateX(-50%);
	pointer-events: none;
}

.connect-toast {
	margin-top: 8px;
	padding: 12px 14px;
	border-radius: 8px;
	background: #07111f;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	box-shadow: 0 12px 28px rgba(2, 16, 31, 0.22);
}

@media (min-width: 720px) {
	.connect-app,
	.connect-header,
	.chat-topbar,
	.chat-footer,
	.connect-tabbar {
		max-width: 620px;
	}
}

@media (max-width: 390px) {
	.field-row {
		grid-template-columns: 1fr;
	}

	.form-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.status-select {
		width: 104px;
	}
}