.cjsc-suite {
	box-sizing: border-box;
	min-height: 100vh;
	background: var(--cjsc-page);
	color: var(--cjsc-ink);
	font-family: var(--cjsc-font) !important;
	-webkit-font-smoothing: antialiased;
}

.cjsc-suite *, .cjsc-suite *::before, .cjsc-suite *::after { box-sizing: inherit; }
.cjsc-suite button, .cjsc-suite input, .cjsc-suite select, .cjsc-suite textarea { font-family: var(--cjsc-font) !important; }
.cjsc-suite a { color: var(--cjsc-blue); }

/* One top gutter for every dashboard; the header must not add another. */
.cjsc-suite.cjsc-ticket-dashboard,
.cjsc-suite.cjsc-customer-dashboard,
.cjsc-suite.cjsc-wrapup {
	padding-top: 0;
}

.cjsc-shell__header {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
	align-items: center;
	column-gap: var(--cjsc-space-5);
	row-gap: var(--cjsc-space-5);
	max-width: var(--cjsc-content-width);
	min-height: 0;
	margin: 0 auto;
	padding: 0 0 var(--cjsc-space-6);
}

.cjsc-shell__header-side { display: flex; align-items: center; }
.cjsc-shell__header-side--start { grid-column: 1; grid-row: 1; min-width: 0; }
.cjsc-shell__header-side--end { grid-column: 3; grid-row: 1; justify-self: end; gap: var(--cjsc-space-3); }
.cjsc-shell__nav { display: flex; align-items: center; justify-content: center; grid-column: 2; grid-row: 1; }
.cjsc-suite.is-history-view .cjsc-shell__header-side--start { visibility: hidden; }

.cjsc-suite a.cjsc-shell__nav-link {
	position: relative;
	padding: 0 26px;
	color: #a2aab8 !important;
	font-family: var(--cjsc-font) !important;
	font-size: 29px !important;
	font-weight: 400;
	line-height: 1.2 !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.cjsc-shell__nav-link + .cjsc-shell__nav-link::before {
	position: absolute;
	left: 0;
	top: 8%;
	width: 1px;
	height: 84%;
	background: #c7cfdb;
	content: "";
}

.cjsc-suite a.cjsc-shell__nav-link.is-active { color: var(--cjsc-ink) !important; font-weight: 600; }

.cjsc-shell__notifications { position: relative; }
.cjsc-shell__notification-bell { position: relative; }
.cjsc-shell__notification-bell b {
	align-items: center;
	background: #dc2626;
	border: 2px solid var(--cjsc-page);
	border-radius: var(--cjsc-radius-pill);
	color: #fff;
	display: flex;
	font-size: 9px;
	height: 17px;
	justify-content: center;
	min-width: 17px;
	padding: 0 3px;
	position: absolute;
	right: -6px;
	top: -6px;
}
.cjsc-shell__notifications-panel {
	background: var(--cjsc-surface);
	border: 1px solid var(--cjsc-border);
	border-radius: var(--cjsc-radius-md);
	box-shadow: 0 16px 40px rgba(23, 43, 72, .18);
	max-height: min(520px, calc(100vh - 180px));
	overflow: hidden;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	width: min(380px, calc(100vw - 40px));
	z-index: 100;
}
.cjsc-shell__notifications-panel > header {
	align-items: center;
	border-bottom: 1px solid var(--cjsc-border);
	display: flex;
	justify-content: space-between;
	padding: 11px 13px;
}
.cjsc-shell__notifications-panel > header strong { font-size: var(--cjsc-font-size-md); }
.cjsc-shell__notifications-panel > header > button { border: 0 !important; font-size: 20px !important; }
.cjsc-shell__notifications-panel > div { max-height: min(410px, calc(100vh - 285px)); overflow: auto; }
.cjsc-shell__notification-item {
	background: var(--cjsc-surface) !important;
	border-bottom: 1px solid #edf1f6 !important;
	position: relative;
}
.cjsc-shell__notification-item.is-read { background: #fafbfd !important; }
.cjsc-shell__notification-open {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: #344054 !important;
	cursor: pointer;
	display: block;
	min-height: 0;
	padding: 11px 42px 11px 13px !important;
	text-align: left;
	width: 100%;
}
.cjsc-shell__notification-item:hover { background: var(--cjsc-blue-soft) !important; }
.cjsc-shell__notification-open > span { color: #526177; font-size: var(--cjsc-font-size-xs); }
.cjsc-shell__notification-open p { font-size: var(--cjsc-font-size-sm); line-height: 1.4; margin: 4px 0; max-height: 3.9em; overflow: hidden; }
.cjsc-shell__notification-open small { color: var(--cjsc-subtle); font-size: 10px; }
.cjsc-shell__notification-dismiss { background: transparent !important; border: 0 !important; border-radius: 50% !important; color: #75839a !important; font-size: 19px !important; height: 30px !important; min-height: 0 !important; padding: 0 !important; position: absolute; right: 8px; top: 9px; width: 30px !important; }
.cjsc-shell__notification-dismiss:hover { background: #fff !important; color: #b42318 !important; }
.cjsc-shell__notifications-empty { color: var(--cjsc-subtle); font-size: var(--cjsc-font-size-sm); margin: 0; padding: 18px 13px; text-align: center; }
.cjsc-shell__notifications-panel > footer { align-items: center; border-top: 1px solid var(--cjsc-border); display: flex; justify-content: space-between; padding: 10px 13px; }
.cjsc-shell__notifications-panel > footer a,
.cjsc-shell__notifications-panel > footer button { background: transparent !important; border: 0 !important; color: var(--cjsc-blue) !important; font-size: var(--cjsc-font-size-sm) !important; font-weight: 700; min-height: 0 !important; padding: 2px !important; }

.cjsc-shell__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cjsc-space-3);
	max-width: var(--cjsc-content-width);
	margin: var(--cjsc-space-7) auto 0;
	padding: var(--cjsc-space-5);
	border-top: 1px solid var(--cjsc-border);
	color: var(--cjsc-subtle);
}

.cjsc-shell__footer-links { display: flex; gap: var(--cjsc-space-5); }
.cjsc-shell__footer .cjsc-icon { width: 14px; height: 14px; }
.cjsc-shell__version { font-size: 13px; font-weight: 650; letter-spacing: .04em; }

@media (max-width: 1400px) {
 .cjsc-shell__header { grid-template-columns: minmax(0, 1fr) auto; min-height: auto; padding-inline: 0; }
 .cjsc-shell__header-side--end { grid-column: 2; }
 .cjsc-shell__nav { grid-column: 1 / -1; grid-row: 2; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; justify-content: flex-start; padding-block: var(--cjsc-space-3); -webkit-overflow-scrolling: touch; }
 .cjsc-suite a.cjsc-shell__nav-link { font-size: 22px !important; padding-inline: 18px; }
}

@media (max-width: 520px) {
 .cjsc-suite a.cjsc-shell__nav-link { font-size: 19px !important; padding-inline: 14px; }
}

@media screen and (max-width: 640px) {
 .cjsc-shell__header { column-gap: var(--cjsc-space-2); row-gap: var(--cjsc-space-2); padding-bottom: var(--cjsc-space-2); }
 .cjsc-shell__header-side--start { width: 100%; }
 .cjsc-shell__header-side--start > .cjsc-button { width: 100%; }
 .cjsc-shell__header-side--end { gap: var(--cjsc-space-2); }
 .cjsc-shell__nav { padding-block: var(--cjsc-space-2); }
}