/* Reset - scoped to dashboard only */
#sidetalk-dashboard-content h1,
#sidetalk-dashboard-content h2,
#sidetalk-dashboard-content h3,
#sidetalk-dashboard-content h4,
#sidetalk-dashboard-content h5,
#sidetalk-dashboard-content h6,
#sidetalk-dashboard-content p,
#sidetalk-dashboard-content a,
#sidetalk-dashboard-content div,
#sidetalk-dashboard-content dd,
#sidetalk-dashboard-content dt,
#sidetalk-dashboard-content ul li,
#sidetalk-dashboard-content ol li,
#sidetalk-dashboard-content select,
#sidetalk-dashboard-content input,
#sidetalk-dashboard-content textarea,
#sidetalk-dashboard-content button {
	font-family: var(--st-font-family);
}

#sidetalk-dashboard-content input:not([type="checkbox"]):not([type="radio"]):focus,
#sidetalk-dashboard-content input:not([type="checkbox"]):not([type="radio"]):active,
#sidetalk-dashboard-content select:focus,
#sidetalk-dashboard-content select:active,
#sidetalk-dashboard-content textarea:focus,
#sidetalk-dashboard-content textarea:active {
	border-color: var(--st-primary) !important;
	outline: none !important;
	box-shadow: none !important;
}

#sidetalk-dashboard-content h1,
#sidetalk-dashboard-content h2,
#sidetalk-dashboard-content h3,
#sidetalk-dashboard-content h4,
#sidetalk-dashboard-content h5,
#sidetalk-dashboard-content h6 {
	margin: 0px;
}

#sidetalk-dashboard-content ul,
#sidetalk-dashboard-content ol {
	padding: 0px;
	margin: 0px;
}

#sidetalk-dashboard-content ul li {
	list-style: none;
}

#sidetalk-dashboard-content select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

/* MOVED TO base-button.css */

/* KPI Cards */
.sidetalk-kpi-card {
	background: #fff;
	padding: 20px;
	border-radius: 12px;
	border: 1px solid #eee;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-label {
	font-size: 14px;
	color: #666;
	margin-bottom: 8px;
	font-weight: 500;
}

.kpi-value {
	font-size: 28px;
	font-weight: 700;
	color: #333;
	margin-bottom: 4px;
}

.kpi-subtext {
	font-size: 12px;
	color: #999;
}

/* Custom checkbox styles */
.custom-checkbox {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.custom-checkbox input[type="checkbox"] {
	display: none;
}

.custom-checkbox label {
	font-size: 16px;
	font-weight: 200;
	margin-left: 10px;
	cursor: pointer;
}

.custom-checkbox input[type="checkbox"]+label::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 1px solid #ddd;
	border-radius: 4px;
	vertical-align: middle;
	margin-right: 10px;
	background-color: #fff;
}

.custom-checkbox input[type="checkbox"]:checked+label::before {
	border: 1px solid var(--st-primary);
	background-color: var(--st-primary);
	background-image: url('../css/images/icon_check.png');
	/* Favicon image URL */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 10px;
}

.custom-radio {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.custom-radio-wrap {
	display: flex;
	margin-bottom: 10px;
}

.custom-radio input[type="radio"] {
	display: none;
}

.custom-radio label {
	font-size: 16px;
	font-weight: 500;
	margin-left: 10px;
	cursor: pointer;
}

.custom-radio input[type="radio"]+label::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 1px solid #ddd;
	border-radius: 4px;
	vertical-align: middle;
	margin-right: 10px;
	background-color: #fff;
}

.custom-radio input[type="radio"]:checked+label::before {
	border: 1px solid var(--st-primary);
	background-color: var(--st-primary);
	background-image: url('../css/images/icon_check.png');
	/* Favicon image URL */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 10px;
}

/* Save button */
/* MOVED TO base-button.css */

/* Add button */
/* MOVED TO base-button.css */

/* Add save button */
/* MOVED TO base-button.css */

/* Loading spinner only (no text) */
.sidetalk-loading-spinner {
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 4px solid rgba(0, 0, 0, 0.12);
	border-top-color: #2271b1;
	border-radius: 50%;
	animation: sidetalk-spin 0.75s linear infinite;
	margin-left: 4px;
	vertical-align: middle;
}

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

/* Hide default WP spinner if desired: comment out if you still want both */
.sidetalk-wp-spinner {
	display: none !important;
}

/* Ensure markdown answer content truncates by lines, not pixels */
.answer-content {
	overflow: visible;
}

/* Chat log (Answer) card HTML display correction */
.answer-content .sidetalk-card-answer {
	display: block;
	width: 100%;
	max-width: none;
	text-align: left;
	overflow: visible;
	padding: 6px 18px;
}

.sidetalk-chat-log-detail-table tbody td:nth-child(2) {
	vertical-align: top;
	overflow: visible;
	padding-bottom: 22px;
}

.sidetalk-chat-log-detail-table tbody td:nth-child(2) .answer-content,
.sidetalk-chat-log-detail-table tbody td:nth-child(2) .answer-actions {
	overflow: visible;
}

.answer-content .sidetalk-card-answer .sidetalk-card-container {
	width: 100%;
	max-width: 100%;
}

.answer-content .sidetalk-card-answer .sidetalk-carousel-wrapper {
	width: 100%;
}

.answer-content .sidetalk-card-answer .sidetalk-card-carousel {
	width: 100%;
}

.answer-content .sidetalk-card-answer .sidetalk-card-carousel::-webkit-scrollbar {
	display: none;
}

.answer-content .sidetalk-card-answer .sidetalk-card-carousel {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.answer-content .sidetalk-card-answer .st-card-stack {
	--st-cardw: clamp(0px, calc(100vw - 125px), 260px);
	min-width: var(--st-cardw);
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.answer-content .sidetalk-card-answer .st-card-block {
	width: 100%;
	max-width: 100%;
	padding: 4px 16px;
	box-sizing: border-box;
}

.answer-content .sidetalk-card-answer .st-carousel {
	position: relative;
	width: 100%;
}

.answer-content .sidetalk-card-answer .st-carousel-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	scroll-padding-left: 10px;
	scroll-padding-right: 10px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	align-items: stretch;
	box-sizing: border-box;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.answer-content .sidetalk-card-answer .st-carousel-track::-webkit-scrollbar {
	display: none;
}

.answer-content .sidetalk-card-answer .st-carousel-item {
	flex: 0 0 var(--st-cardw);
	width: var(--st-cardw);
	max-width: var(--st-cardw);
	scroll-snap-align: start;
	display: flex;
	align-items: stretch;
	align-self: stretch;
}

.answer-content .sidetalk-card-answer .st-card {
	width: 100%;
	--st-primary: var(--sidetalk-primary, #2563eb);
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	height: 100%;
	display: flex;
	flex-direction: column;
	margin-bottom: 2px;
}

.answer-content .sidetalk-card-answer .st-card-media {
	width: 100%;
	background: #f3f4f6;
	aspect-ratio: 2 / 1;
	overflow: hidden;
}

.answer-content .sidetalk-card-answer .st-card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.answer-content .sidetalk-card-answer .st-card-body {
	padding: 14px;
	flex: 1;
	min-width: 0;
	text-align: left;
}

.answer-content .sidetalk-card-answer .st-card-title {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	color: #111827;
	margin-bottom: 6px;
	word-break: break-word;
}

.answer-content .sidetalk-card-answer .st-card-desc {
	white-space: pre-line;
	font-size: 13px;
	line-height: 1.45;
	color: #4b5563;
	word-break: break-word;
}

.answer-content .sidetalk-card-answer .st-card-actions {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding: 12px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: linear-gradient(to bottom, rgba(248, 250, 252, 0.7), rgba(255, 255, 255, 1));
}

.answer-content .sidetalk-card-answer .st-card-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #f9fafb;
	color: #111827;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	max-width: 100%;
	word-break: break-word;
}

.answer-content .sidetalk-card-answer .st-card-btn:hover {
	border-color: rgba(0, 0, 0, 0.18);
	background: #f3f4f6;
}

.answer-content .sidetalk-card-answer .st-card-btn:active {
	transform: translateY(1px);
}

.answer-content .sidetalk-card-answer .st-card--list .st-card-body {
	padding-bottom: 10px;
}

.answer-content .sidetalk-card-answer .st-card-list {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.answer-content .sidetalk-card-answer .st-card-list-row {
	display: flex;
	gap: 10px;
	padding: 10px 0;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.answer-content .sidetalk-card-answer .st-card-list-row:last-child {
	border-bottom: 0;
}

.answer-content .sidetalk-card-answer .st-card-list-thumb {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 10px;
	overflow: hidden;
	background: #e5e7eb;
}

.answer-content .sidetalk-card-answer .st-card-list-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0 !important;
}

.answer-content .sidetalk-card-answer .st-card-list-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.answer-content .sidetalk-card-answer .st-card-list-title {
	font-weight: 700;
	font-size: 13px;
	color: #111827;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.answer-content .sidetalk-card-answer .st-card-list-desc {
	font-size: 12px;
	color: #6b7280;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.answer-content .sidetalk-card-answer .st-carousel-btn {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: rgba(255, 255, 255, 0.92);
	color: #374151;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
}

.answer-content .sidetalk-card-answer .st-carousel-btn:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.answer-content .sidetalk-card-answer .st-carousel-btn:active {
	transform: translateY(-50%) scale(0.95);
}

.answer-content .sidetalk-card-answer .st-carousel-btn--prev {
	left: -14px;
}

.answer-content .sidetalk-card-answer .st-carousel-btn--next {
	right: -14px;
}

.answer-content .sidetalk-card-answer .st-carousel.is-single .st-carousel-btn {
	display: none !important;
}

@media (max-width: 768px) {
	.answer-content .sidetalk-card-answer .st-carousel-track {
		scroll-padding-left: 10px;
		scroll-padding-right: 10px;
		scroll-snap-type: x mandatory;
	}

	.answer-content .sidetalk-card-answer .st-carousel-item {
		scroll-snap-align: start;
	}
}

@media (hover: none) and (pointer: coarse) {
	.answer-content .sidetalk-card-answer .st-carousel-btn {
		display: none !important;
	}
}

@media (hover: hover) and (pointer: fine) {
	.answer-content .sidetalk-card-answer .st-carousel-btn {
		display: inline-flex;
	}
}

@keyframes stCardIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.answer-content .sidetalk-card-answer .st-card-animate-in {
	animation: stCardIn 220ms ease-out both;
}

/* Image toggle button and toggle area */
/* The image wrapper inherits the parent text alignment,
	so the image aligns according to the inherited text-align. */
/* The image wrapper is made a block element so it is not treated as inline code block.
	It also inherits the parent text-align for alignment and positioning. */
.sidetalk-image-wrapper {
	display: block;
	text-align: inherit;
	margin: 8px 0;
}

.sidetalk-image-toggle {
	cursor: pointer;
	display: inline-block;
	padding: 6px 10px;
	border-radius: var(--st-radius-xs);
	background: var(--st-primary);
	color: var(--st-text-inverse);
	border: none;
	font-size: var(--st-font-size-sm);
	margin-bottom: 6px;
}

.sidetalk-image-content {
	margin-top: 8px;
}

/* Image size rule: constrain width to parent and limit height via max-height */
.sidetalk-image-content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	/* max-height: 360px; Removed: allow tall images */
	object-fit: contain;
	border-radius: 6px;
}

/* Small screen vertical height limit */
/* Small screen vertical height limit - removed
@media (max-width:600px) {
	.sidetalk-image-content img {
		// max-height: 240px;
	}
}
*/

.answer-content.clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Avoid odd margins collapsing inside markdown wrapper when clamped */
.answer-content .markdown-content {
	margin: 0;
}

.sidetalk-row-actions {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Chat log question/answer text length limit */
.text-wrap {
	display: inline-block;
	/* Set text as block element */
	max-width: 136ch;
	/* Limit to max 50 characters width (1ch = 1 character width) */
	overflow-wrap: break-word;
	/* Break long words */
	white-space: normal;
	/* Auto line wrap */
}

/* Underline button */
button.sidetalk-dashboard-underline-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px;
	border: 0px;
	background-color: transparent;
	cursor: pointer;
	color: #333;
	transition: all 200ms ease-in-out;
}

button.sidetalk-dashboard-underline-button i {
	margin-right: 10px;
	font-size: 18px;
	line-height: 22px;
}

button.sidetalk-dashboard-underline-button .text {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
	text-decoration: underline;
}

button.sidetalk-dashboard-underline-button:hover {
	color: var(--st-primary-hover);
}

/* Toast UI Editor font size adjustment */
.sidetalk-answer-editor .toastui-editor-contents,
.sidetalk-answer-editor .toastui-editor-contents p,
.sidetalk-answer-editor .ProseMirror,
.sidetalk-answer-editor .toastui-editor-md-container .CodeMirror {
	font-size: 16px !important;
}

/* Text-only button (no underline) */
button.sidetalk-dashboard-text-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px;
	border: 0px;
	background-color: transparent;
	cursor: pointer;
	color: #333;
	transition: all 200ms ease-in-out;
}

button.sidetalk-dashboard-text-button i {
	margin-right: 10px;
	font-size: 18px;
	line-height: 22px;
}

button.sidetalk-dashboard-text-button .text {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
}

button.sidetalk-dashboard-text-button:hover {
	color: var(--st-primary-hover);
}

/* Sidebar library - add library button */
button.add-library-button {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 50px;
	background-color: #fff;
	cursor: pointer;
	color: #555;
	transition: all 200ms ease-in-out;
}

button.add-library-button i {
	margin-right: 10px;
	font-size: 22px;
	line-height: 1;
}

button.add-library-button:hover {
	background-color: var(--st-primary);
	color: var(--st-text-inverse);
}

/* Basic form field */
/* MOVED TO base-form.css */


/* Search field */
.search-input-wrap {
	position: relative;
	margin: 0;
}

.search-input-wrap input.sidetalk-dashboard-input {
	padding-left: 50px;
	height: 102%;
	border-radius: 20px;
}

/* Basic form field */
/* MOVED TO base-form.css */

.search-input-wrap select.sidetalk-dashboard-input {
	padding-left: 50px;
	height: 102%;
	border-radius: 20px;
}

/* Textarea */
/* MOVED TO base-form.css */

/* Dashboard full area */
#sidetalk-dashboard-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	min-height: 100vh;
	transition: margin-top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	/* Smooth transition added */
}

/* Banner fixed: body area margin adjustment */
.sidetalk-has-banner #sidetalk-dashboard-container {
	margin-top: 44px;
	min-height: calc(100vh - 44px);
	min-height: calc(100dvh - 44px);
}

.admin-bar.sidetalk-has-banner #sidetalk-dashboard-container {
	margin-top: 44px;
	min-height: calc(100vh - 44px);
	min-height: calc(100dvh - 44px);
}

/* Sidebar area */
#sidetalk-dashboard-nav {
	display: flex;
	flex-direction: column;
	width: 270px;
	border-right: 1px solid #ccc;
	background-color: #fff;
	box-sizing: border-box;
	flex-shrink: 0;
	padding-bottom: 0;
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
	--member-info-reserved: 104px;
}

#sidetalk-dashboard-container {
	--sidetalk-nav-width: 270px;
}

@media (max-width: 768px) {
	#sidetalk-dashboard-nav {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		border-right: none !important;
		border-bottom: 1px solid #ccc !important;
		flex-basis: 100% !important;
		padding-bottom: 0;
	}

	#sidetalk-dashboard-nav .nav-fixed-action {
		position: static;
		width: 100%;
		padding: 0 30px 12px;
	}

	#sidetalk-dashboard-nav .member-info-project {
		padding-top: 25px;
	}
}

#sidetalk-dashboard-nav .nav-header {
	height: auto;
	padding: 25px 30px;
	/* border-bottom: 1px solid #ddd; */
	box-sizing: border-box;
}

#sidetalk-dashboard-nav .nav-header .sidetalk-dashboard-logo {
	width: 100px;
	height: 27px;
	/*padding-right: 20px; margin-right: 20px; border-right: 1px solid #ededed; */
}

#sidetalk-dashboard-nav .nav-header .group {
	text-align: center;
}

#sidetalk-dashboard-nav .nav-header .group img {
	width: auto;
}

#sidetalk-dashboard-nav .nav-header .group .text {
	font-size: 14px;
	font-weight: 700;
	line-height: 30px;
	color: #777;
}

#sidetalk-dashboard-nav .nav-row {
	height: auto;
	padding: 20px 20px;
	border-bottom: 1px solid #ddd;
	box-sizing: border-box;
}

#sidetalk-dashboard-nav .nav-fixed-action {
	position: fixed;
	left: 0;
	bottom: 20px;
	width: 270px;
	padding: 0 30px 12px;
	z-index: 2;
	box-sizing: border-box;
}

#sidetalk-dashboard-nav .nav-fixed-action.is-above-member-info {
	position: absolute;
	left: 0;
	bottom: var(--member-info-reserved);
	width: 100%;
}

#sidetalk-dashboard-nav .member-info-project {
	position: relative;
	--guide-slot-height: 82px;
	padding-top: calc(25px + var(--guide-slot-height));
}

#sidetalk-dashboard-nav .member-info-project .nav-fixed-action.is-in-member-slot {
	position: absolute;
	left: 30px;
	right: 30px;
	top: 25px;
	bottom: auto;
	width: auto;
	padding: 0;
}

#sidetalk-dashboard-nav .nav-fixed-action-button {
	width: 100%;
	padding: 15px;
	border-radius: 15px;
	background: var(--st-primary);
	border-color: var(--st-primary);
	color: var(--st-text-inverse);
}

#sidetalk-dashboard-nav .nav-fixed-action-button:hover {
	background: var(--st-primary-hover);
	border-color: var(--st-primary-hover);
	color: var(--st-text-inverse);
}

#sidetalk-guide-panel {
	position: fixed;
	left: calc(var(--sidetalk-nav-width) + 5px);
	bottom: 50px;
	transform: none;
	width: 440px;
	height: min(760px, 88vh);
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
	z-index: 1001;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#sidetalk-guide-panel[hidden] {
	display: none !important;
}

#sidetalk-guide-panel .sidetalk-guide-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #e9edf2;
	background: #fff;
}

#sidetalk-guide-panel .sidetalk-guide-panel-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #1a1f2c;
}

#sidetalk-guide-panel .sidetalk-guide-close-btn {
	padding: 8px 12px;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	background: #ffffff;
	font-size: 15px;
	font-weight: 500;
	color: #333;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	cursor: pointer;
}

#sidetalk-guide-panel .sidetalk-guide-close-btn:hover {
	border-color: #d0d0d0;
}

#sidetalk-guide-panel .sidetalk-guide-panel-body {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	background: #f8fafc;
}

#sidetalk-guide-panel .sidetalk-guide-iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: #fff;
}

@media (max-width: 768px) {
	#sidetalk-guide-panel {
		left: 50%;
		top: 50%;
		bottom: auto;
		transform: translate(-50%, -50%);
		width: 96vw;
		height: 84vh;
	}
}

#sidetalk-dashboard-nav .nav-row h3 {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 700;
	line-height: 21px;
	color: #333;
}

#sidetalk-dashboard-nav .nav-row ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidetalk-dashboard-nav .nav-row ul li {
	display: block;
	list-style: none;
	unicode-bidi: normal;
}

#sidetalk-dashboard-nav .nav-row ul li.item-link {
	padding: 10px 0px;
	color: #777;
}

#sidetalk-dashboard-nav .nav-row ul li.item-link:first-child {
	padding-top: 0px;
}

#sidetalk-dashboard-nav .nav-row ul li.item-link a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #888;
	transition: all 200ms ease-in-out;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}

#sidetalk-dashboard-nav .nav-row ul li.item-link a:hover {
	color: #000;
}

#sidetalk-dashboard-nav .nav-row ul li.item-link a i {
	margin-right: 10px;
	font-size: 18px;
}

#sidetalk-dashboard-nav .nav-row ul li.item-link.item-active a {
	color: #000;
}

#sidetalk-dashboard-nav .nav-row ul li.item-separator {
	margin: 4px 0;
	padding: 0;
	border-bottom: 1px solid #f0f0f0;
}

/* Site selection badge */
.selected-site {
	font-weight: bold;
	color: #000;
}

#sidetalk-dashboard-nav .nav-row.profile p {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 0px;
	font-size: 15px;
	font-weight: 500;
	line-height: 21px;
	color: #333;
}

#sidetalk-dashboard-nav .nav-row.profile .profile-image {
	display: block;
	width: 45px;
	height: 45px;
	margin-right: 10px;
	border: 1px solid #ededed;
	border-radius: 45px;
	background-color: #ddd;
	text-align: center;
}

#sidetalk-dashboard-nav .nav-row.profile .profile-name {
	margin-right: 5px;
	color: #333;
}

#sidetalk-dashboard-nav .nav-row.active-project .title-active-project {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	margin-bottom: 15px;
	padding: 15px;
	border: 1px solid var(--st-primary);
	border-radius: var(--st-radius-xl);
	background-color: var(--st-primary);
	cursor: pointer;
	box-sizing: border-box;
}

#sidetalk-dashboard-nav .nav-row.active-project .title-active-project i {
	margin-right: 10px;
	font-size: 18px;
	font-weight: 500;
	line-height: 22px;
	color: #fff;
	transform: rotate(-90deg);
}

#sidetalk-dashboard-nav .nav-row.active-project .title-active-project .text {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: #fff;
}

#sidetalk-dashboard-nav .nav-row.library-project button.add-library-button {
	margin-bottom: 20px;
}

/* Content area */
#sidetalk-dashboard-content {
	display: flex;
	flex-direction: column;
	width: calc(100% - 270px);
	height: auto;
	padding: 0px 10px;
	background-color: #f7f7f7;
	box-sizing: border-box;
	flex-grow: 1;
}

@media (max-width: 768px) {
	#sidetalk-dashboard-content {
		width: 100% !important;
		padding: 0 !important;
		flex-basis: 100% !important;
	}
}

#sidetalk-dashboard-content .content-header {
	width: 100%;
	height: 80px;
	padding: 30px;
	border-bottom: 1px solid #ddd;
	box-sizing: border-box;
}

#sidetalk-dashboard-content .content-header h2 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: #000;
}

#sidetalk-dashboard-content .content-body {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
}

#sidetalk-dashboard-content .content-body.second {
	display: block;
}

/* MOVED TO base-layout.css */

/* padding/border/radius MOVED TO base-layout.css — keep dimensions only */
#sidetalk-dashboard-content .content-body .content-row {
	width: 100%;
	height: auto;
	padding: 30px 30px;
	margin-top: 0;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-radius: var(--st-radius-xl);
	background-color: #fff;
	box-sizing: border-box;
}

/* Responsive graph card */
.sidetalk-dashboard-graph-wrap {
	width: 100%;
	max-width: 100%;
	background-color: #fff;
	padding: 30px;
	/* Increased from 10~20px to 30px - left/right margin adjustment */
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
	margin-bottom: 16px;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.sidetalk-dashboard-graph-wrap {
		padding: 15px 10px;
	}
}

.sidetalk-dashboard-graph-wrap canvas {
	display: block;
	width: 100% !important;
	height: 280px !important;
	/* Default height */
}

@media (max-width: 768px) {
	.sidetalk-dashboard-graph-wrap canvas {
		height: 160px !important;
	}
}

/* Donut chart container & legend responsive */
.sidetalk-donut-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	/* Auto line wrap on mobile */
	gap: 20px;
}

.sidetalk-donut-canvas-wrapper {
	flex: 1;
	height: 280px;
	position: relative;
	min-width: 280px;
	/* Minimum width setting */
}

.sidetalk-donut-legend {
	width: 240px;
	padding-left: 10px;
	/* Inner spacing */
	box-sizing: border-box;
	max-height: 280px;
	overflow-y: auto;
}

/* When legend drops below on mobile, use full width */
@media (max-width: 768px) {
	.sidetalk-donut-canvas-wrapper {
		height: 220px;
		min-width: 100%;
	}

	.sidetalk-donut-legend {
		padding-left: 0;
		width: 100%;
		margin-top: 10px;
	}

	.sidetalk-donut-container {
		justify-content: center;
	}
}

/* Metric card line-wrap improvement - grid layout applied */
.sidetalk-dashboard-metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 12px;
}

.sidetalk-dashboard-metrics .sidetalk-metric-card {
	padding: 10px;
	border-radius: 8px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
	border: 1px solid #e0e0e0;
	background-color: #f0f8ff;
	/* Default color (light blue) */
	min-width: 0;
	/* flex/grid item min-width reset to avoid overflow */
}

/* Credit section card color */
#metrics-credit .sidetalk-metric-card {
	background-color: #fff7f0;
}

.sidetalk-dashboard-metrics .sidetalk-metric-card .metric-value {
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.sidetalk-dashboard-metrics .sidetalk-metric-card .metric-label {
	font-size: 12px;
	color: #666;
	display: block;
	/* Long text line-wrap allowed */
	white-space: normal;
	line-height: 1.4;
}

/* Responsive: 1 column on mobile */
@media (max-width: 768px) {
	.sidetalk-dashboard-metrics {
		grid-template-columns: 1fr;
	}
}



/* Specific metric (audio) box height reduction */
.sidetalk-dashboard-metrics .sidetalk-metric-card.is-audio {
	padding: 10px 12px;
	min-height: auto;
	/* Remove fixed height */
}

/* Metric inner layout compact */
.sidetalk-dashboard-metrics .sidetalk-metric-card .metric-title {
	font-size: 13px;
	line-height: 1.3;
}

.sidetalk-dashboard-metrics .sidetalk-metric-card .metric-value {
	font-size: 22px;
	/* Number size slightly increased */
	line-height: 1.2;
}

#sidetalk-dashboard-content .content-body .content-row .coupon-wrap {
	max-width: 768px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	background: var(--st-primary);
	margin-bottom: 30px;
	border-radius: 0.75rem;
	box-sizing: border-box;
}

#sidetalk-dashboard-content .content-body .content-row .coupon-wrap>.coupon-text {
	margin: 0;
	color: #fff;
}

#sidetalk-dashboard-content .content-body .content-row .coupon-wrap>a {
	width: 50%;
	border: 2px solid #ffffff;
	padding: 10px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	border-radius: 0.5rem;
	transition: all 200ms ease-in-out;
}

#sidetalk-dashboard-content .content-body .content-row .coupon-wrap>a:hover {
	background: var(--st-primary-hover);
}

#sidetalk-dashboard-content .subscription_pay_form .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col {
	max-width: 768px;
}

#sidetalk-dashboard-content .content-body .content-row h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	color: #333;
	margin-bottom: 0px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap {
	display: block;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap.sidetalk-chat-log-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	overflow: visible;
	white-space: normal;
}

.sidetalk-session-list-panel,
.sidetalk-session-detail-panel {
	background: #fff;
	border: 1px solid #e9edf2;
	border-radius: 20px;
	box-sizing: border-box;
}

.sidetalk-session-list-panel {
	width: 340px;
	min-width: 300px;
	padding: 20px;
	flex-shrink: 0;
}

.sidetalk-session-detail-panel {
	flex: 1;
	min-width: 0;
	padding: 24px;
}

.sidetalk-session-detail-title-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sidetalk-session-list-header,
.sidetalk-session-detail-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.sidetalk-session-list-header {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.sidetalk-session-list-title-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sidetalk-session-list-header h4,
.sidetalk-session-detail-header h4 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: #333;
}

.sidetalk-session-list-description,
.sidetalk-session-detail-subtitle {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: #777;
}

.sidetalk-session-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 520px;
}

.sidetalk-session-item {
	display: block;
	width: 100%;
	padding: 14px 15px;
	border: 1px solid #e6ebf1;
	border-radius: 14px;
	background: #fff;
	text-align: left;
	color: #333;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sidetalk-session-item:hover {
	border-color: var(--st-primary);
	box-shadow: 0 6px 18px var(--st-primary-light);
	transform: translateY(-1px);
}

.sidetalk-session-item.is-active {
	border-color: var(--st-primary);
	background: #f2fbff;
	box-shadow: 0 6px 18px rgba(0, 176, 237, 0.1);
}

.sidetalk-session-item-top,
.sidetalk-session-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.sidetalk-session-user {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: #333;
	text-decoration: none;
	cursor: pointer;
}

.sidetalk-session-time,
.sidetalk-session-meta {
	font-size: 12px;
	line-height: 1.4;
	color: #888;
}

.sidetalk-session-preview {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.45;
	color: #555;
	white-space: normal;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sidetalk-session-meta {
	margin-top: 8px;
	flex-wrap: wrap;
}

.sidetalk-chat-log-empty-state {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: 24px;
	border: 1px dashed #d7dfe7;
	border-radius: 18px;
	background: #fafcfe;
	font-size: 14px;
	line-height: 1.6;
	color: #666;
	text-align: center;
	white-space: normal;
}

.sidetalk-chat-log-empty-state.is-loading {
	gap: 8px;
	border-style: solid;
}

.sidetalk-chat-log-empty-state.is-error {
	flex-direction: column;
	gap: 10px;
	color: #d63638;
}

.sidetalk-session-detail-actions {
	flex-shrink: 0;
}

.sidetalk-session-detail-panel .sidetalk-button-container {
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eef2f6;
}

.sidetalk-session-detail-panel .sidetalk-button-group {
	justify-content: flex-end;
}

.sidetalk-session-detail-panel .page-size-container label {
	font-size: 12px;
	font-weight: 600;
	color: #666;
}

.sidetalk-session-detail-panel #sidetalk-detail-pagination {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #eef2f6;
}

.sidetalk-chat-log-detail-table {
	table-layout: fixed;
}

.sidetalk-chat-log-detail-table td,
.sidetalk-chat-log-detail-table th {
	white-space: normal;
	word-break: break-word;
}

/* MOVED TO base-table.css */

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap .sidetalk-dashboard-content-list-nav ul li {
	margin-right: 10px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap .sidetalk-dashboard-content-list-nav ul li a {
	display: inline-block;
	padding: 0 8px;
	/*width: 25px; */
	height: 25px;
	border-radius: 8px;
	background-color: #ddd;
	font-size: 14px;
	font-weight: 500;
	line-height: 25px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	transition: all 200ms ease-in-out;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap .sidetalk-dashboard-content-list-nav ul li a.active,
#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap .sidetalk-dashboard-content-list-nav ul li a:hover {
	background-color: var(--st-primary);
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap {
	display: flex;
	padding: 15px 0px;
	border-top: 1px solid #ddd;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col {
	display: flex;
	flex-direction: column;
	width: 100%;
}


#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col.row {
	display: flex;
	flex-direction: row;
	width: 100%;
	flex-wrap: wrap;
	gap: 30px;
	row-gap: 0px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col.row h3 {
	width: 100%;
	margin-bottom: 20px;
	padding-top: 20px;
	border-top: 1px solid #ddd;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col.left {
	width: 50%;
	padding-right: 50px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col.right {
	width: 50%;
	padding-left: 50px;
	border-left: 1px solid #ddd;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col h4 {
	margin-top: 14px;
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
	color: #333;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col form {
	width: 100%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col label {
	display: block;
	margin-bottom: 10px;
	font-weight: bold;
	color: #333;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .sidetalk-dashboard-select-wrap {
	position: relative;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .sidetalk-dashboard-select-wrap select {
	width: 100%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .sidetalk-dashboard-select-wrap i {
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col input {
	width: 100%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col input[type="color"] {
	width: 50px !important;
	height: 50px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	border: 1px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col input[type="color"]::-webkit-color-swatch {
	border-radius: 0.75rem;
	border: 1px solid #ddd;
	height: 100%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col input[type="checkbox"] {
	width: auto;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col select {
	width: 100%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col button.sidetalk-dashboard-underline-button {
	padding-left: 20px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col button.sidetalk-dashboard-text-button {
	padding-left: 20px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col textarea {
	width: 100%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row {
	width: 100%;
	margin-bottom: 20px;
	padding: 0px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.one-third {
	margin-bottom: 20px;
	padding: 0px;
	width: 30%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.one-third .image-preview.image-preview-square {
	width: 50px;
	height: 50px;
	border: 1px solid #ddd;
	border-radius: 0.75rem;
	overflow: hidden;
	box-sizing: border-box;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.one-third .image-preview.image-preview-square:hover {
	cursor: pointer;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.one-third .image-preview.image-preview-circle:hover {
	cursor: pointer;
}

.item-row.one-third input[type="color"]:hover {
	cursor: pointer;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.one-third .image-preview.image-preview-circle {
	width: 50px;
	height: 50px;
	border: 1px solid #ddd;
	border-radius: 50%;
	overflow: hidden;
	box-sizing: border-box;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.one-third .image-preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.one-third .image-preview i {
	font-size: 30px;
	margin-left: 9px;
	margin-top: 9px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row h4 {
	margin-top: 10px;
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
	color: #333;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.checkbox-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.checkbox-row input {
	width: auto;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.cursor-point {
	cursor: pointer;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row .description {
	display: block;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row button.sidetalk-dashboard-underline-button {
	padding-left: 0px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row button.sidetalk-dashboard-text-button {
	padding-left: 0px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row .attr-value {
	display: flex;
	align-items: center;
	gap: 12px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row input,
#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row select,
#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row textarea {
	width: 100%;
	border-radius: 0.75rem;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.radio {
	display: block;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap.sidetalk-cafe24-settings .data-add-col>.item-row>.radio {
	display: flex;
	gap: 12px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap.sidetalk-cafe24-settings .data-add-col>.item-row>.radio .sidetalk-dashboard-button {
	white-space: nowrap;
	background: #ee5253;
	color: #fff;
	flex-shrink: 0;
	text-decoration: none;
	margin-bottom: 10px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap.sidetalk-cafe24-settings .data-add-col>.item-row>.radio .sidetalk-dashboard-button:hover {
	background: #ff6b6b;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap.sidetalk-cafe24-settings .data-add-col>.item-row>.radio>label {
	display: flex;
	width: 100%;
	gap: 12px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 12px 16px;
	border-radius: 0.75rem;
	align-items: center;
	cursor: pointer;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap.sidetalk-cafe24-settings .data-add-col>.item-row>.radio>label>input {
	width: auto;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap.sidetalk-cafe24-settings .data-add-col>.item-row>.radio>label>span {
	display: inline-flex;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap.sidetalk-cafe24-settings .data-add-col>.item-row>.radio>label>button {
	border: 0;
	background: none;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap {
	width: 100%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table {
	width: 100%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tr {
	border-bottom: 0;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table thead tr>th {
	text-align: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table thead tr>th.title {
	width: 20%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table thead tr>th.plan {
	width: 10%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table thead tr>th.status {
	width: 10%
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table thead tr>th.price {
	width: 20%
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table thead tr>th.created_at {
	width: 20%
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.title {
	text-align: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.plan {
	text-align: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.status {
	text-align: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.status>div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.status>div.status-actions.delete-requested {
	flex-direction: column;
	gap: 4px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.status>div button {
	border-radius: 10px;
	width: auto;
	height: 25px;
	display: flex;
	justify-content: center;
	font-size: 12px;
	background: #00a7e9;
	color: #fff;
	border: none;
	line-height: 24px;
	position: relative;
	padding: 0 22px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.status>div button.delete-button {
	background-color: #ff6b6b;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.status>div.status-actions.delete-requested button.delete-button {
	background-color: #9ca3af;
	height: auto;
	line-height: normal;
	padding: 4px 12px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.status>div .delete-scheduled-text {
	font-size: 11px;
	color: #666666;
	line-height: 1.2;
	text-align: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.status>div span {
	border-radius: 10px;
	width: auto;
	height: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	background: #999999;
	color: #fff;
	border: none;
	position: relative;
	padding: 0 22px;
	text-align: center;
	word-break: keep-all;
}

/* Suspended - orange badge */
#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.status>div span.status-badge-suspended {
	background: #f59e0b;
}

/* Pending Deletion - red badge */
#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.status>div span.status-badge-pending {
	background: #ef4444;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tr.total_info td {
	font-weight: bold;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tr td.price {
	text-align: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.title .title-cell-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	position: relative;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.title .chatbot-name-link {
	font-weight: 500;
	color: #00b0ed;
	text-decoration: none;
}

/* Quick menu toggle */
.sidetalk-quick-menu-wrapper {
	position: relative;
	display: inline-flex;
}

/* ... button styles */
.sidetalk-quick-menu-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: #f8f9fa;
	color: #adb5bd;
	font-size: 14px;
	border: none;
	cursor: pointer;
	transition: all 0.2s;
	padding: 0;
	margin-left: 4px;
}

.sidetalk-quick-menu-btn:hover,
.sidetalk-quick-menu-wrapper.active .sidetalk-quick-menu-btn {
	background: #e9ecef;
	color: #00b0ed;
}

/* Popup menu styles */
.sidetalk-quick-menu-popup {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 8px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	z-index: 1000;
	min-width: 140px;
	overflow: hidden;
}

.sidetalk-quick-menu-wrapper.active .sidetalk-quick-menu-popup {
	display: block;
}

.sidetalk-quick-menu-popup a {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	color: #4a5568;
	text-decoration: none;
	font-size: 13px;
	transition: background 0.2s;
	white-space: nowrap;
	gap: 10px;
}

.sidetalk-quick-menu-popup a i {
	font-size: 14px;
	color: #718096;
}

.sidetalk-quick-menu-popup a:hover {
	background: #f7fafc;
	color: #00b0ed;
}

.sidetalk-quick-menu-popup a:hover i {
	color: #00b0ed;
}

.sidetalk-quick-menu-popup a:not(:last-child) {
	border-bottom: 1px solid #f1f5f9;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tr td.created_at {
	text-align: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>.noti {
	width: 100%;
	display: block;
	text-align: right;
	font-size: 14px;
	font-weight: bold;
}

/* MOVED TO base-table.css (triplicated responsive blocks consolidated) */

@media (max-width: 768px) {
	#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap.sidetalk-chat-log-layout {
		flex-direction: column;
	}

	.sidetalk-session-list-panel,
	.sidetalk-session-detail-panel {
		width: 100%;
		min-width: 0;
		padding: 18px;
	}

	.sidetalk-session-list {
		min-height: 0;
	}

	.sidetalk-session-list-header,
	.sidetalk-session-detail-header {
		flex-direction: column;
	}

	.sidetalk-dashboard-data-list-wrap {
		overflow-x: auto;
		display: block;
		width: 100%;
		white-space: nowrap;
	}

	.answer-content {
		max-height: none !important;
		overflow: visible !important;
		white-space: normal !important;
		word-break: break-word !important;
	}

	.toggle-answer {
		display: none !important;
	}

	.sidetalk-dashboard-data-list-wrap table {
		width: 100%;
	}

	/* Reduce table column width and enable text wrapping */
	.sidetalk-dashboard-data-list-wrap table tbody tr td {
		font-size: 13px;
		/* Font size adjustment on small screens */
		padding: 8px;
		/* Padding adjustment */
		word-break: break-word;
		/* Auto word break for long words */
		white-space: normal;
		/* Allow line wrapping */
	}

	/* Size adjustment when specific columns become too narrow */
	.sidetalk-dashboard-data-list-wrap table thead th,
	.sidetalk-dashboard-data-list-wrap table tbody td {
		padding: 8px;
		/* Use extra margin space */
		font-size: 13px;
		/* Font size adjustment on small screens */
	}

	/* Convert table to block list on mobile */
	.sidetalk-dashboard-data-list-wrap table,
	.sidetalk-dashboard-data-list-wrap table thead,
	.sidetalk-dashboard-data-list-wrap table tbody,
	.sidetalk-dashboard-data-list-wrap table th,
	.sidetalk-dashboard-data-list-wrap table td,
	.sidetalk-dashboard-data-list-wrap table tr {
		display: block;
		width: 100%;
	}

	.sidetalk-dashboard-data-list-wrap table thead tr {
		display: none;
		/* Hide header on small screens */
	}

	.sidetalk-dashboard-data-list-wrap table tbody tr {
		border: 1px solid #ddd;
		margin-bottom: 10px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 8px;
	}

	.sidetalk-dashboard-data-list-wrap table tbody tr td {
		text-align: left;
		padding: 6px 10px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
	}

	.sidetalk-dashboard-data-list-wrap table tbody tr td:last-child {
		border-bottom: none;
	}

	/* Add label before each column */
	.sidetalk-dashboard-data-list-wrap table tbody tr td::before {
		content: attr(data-label);
		/* Use data-label attribute value from HTML */
		font-weight: bold;
		color: #444;
		margin-bottom: 4px;
		font-size: 11px;
	}

	.sidetalk-dashboard-data-list-wrap {
		overflow-x: visible;
	}

	.sidetalk-dashboard-data-list-wrap table {
		min-width: 100%;
		/* Remove table minimum width */
	}

	.sidetalk-dashboard-data-list-wrap table tbody tr {
		padding: 8px;
		border-radius: 6px;
	}

	.sidetalk-dashboard-data-list-wrap table tbody tr td {
		font-size: 12px;
		/* Reduce font size further */
		padding: 5px 8px;
		flex-direction: column;
		/* Force vertical layout so text does not display inline */
		align-items: flex-start;
	}

	/* Button size adjustment */
	.sidetalk-dashboard-button {
		font-size: 12px;
		padding: 6px 8px;
	}
}

/* MOVED TO base-layout.css */

.sidetalk-guide-button {
	display: inline-block;
	padding: 5px 10px;
	background: #fff;
	color: #555;
	font-size: 12px;
	border: 1px solid #00a7e9;
	border-radius: var(--st-radius-xl);
	text-decoration: none;
	font-weight: bold;
	transition: 0.2s;
}

.sidetalk-guide-button:hover {
	background: #00a7e9;
	color: #fff;
}

.sidetalk-guide-button.invisible {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: none;
}

.drag-handle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 6px;
	padding: 4px 8px;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 999px;
	background: linear-gradient(180deg, #fff, #f7f7f9);
	color: #444;
	cursor: grab;
	line-height: 1;
	user-select: none;
	transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease;
}

.drag-handle .grip {
	width: 14px;
	height: 14px;
	display: inline-block;
	background-image:
		linear-gradient(#6b7280 0 0),
		linear-gradient(#6b7280 0 0),
		linear-gradient(#6b7280 0 0);
	background-size: 14px 2px, 14px 2px, 14px 2px;
	/* 3 horizontal bars */
	background-position: 0 2px, 0 6px, 0 10px;
	background-repeat: no-repeat;
	border-radius: 2px;
	opacity: .95;
}

.drag-handle .hint {
	font-size: 11px;
	color: #666;
}

.drag-handle:hover,
.drag-handle:focus {
	border-color: #c7d2fe;
	box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
	outline: none;
}

.drag-handle:active {
	cursor: grabbing;
	transform: scale(.98);
}

#previewHeaderRow th.table-col-draggable.dragging .drag-handle {

	opacity: .7;
}

/* Table header: drag handle position and column header alignment */
#previewHeaderRow th.table-col-draggable {
	position: relative;
}

#previewHeaderRow th.table-col-draggable .drag-handle {
	position: absolute;
	left: 6px;
	top: 5px !important;
}

/* Menu dropdown */
.nav-row ul {
	display: none;
}

/* Button styles */
/* MOVED TO base-button.css (keep responsive variants below) */

.dynamic-position .sidetalk-dashboard-button,
.dynamic-position button,
.dynamic-position form {
	position: static;
	margin: 0;
	bottom: 0;
}

.dynamic-position.is-floating {
	position: fixed;
	bottom: 20px;
	left: auto;
	width: auto;
	z-index: 99;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	margin: 0;
	height: auto;
	display: flex;
	gap: 8px;
}

.dynamic-position--category-register {
	justify-content: flex-end;
}

.dynamic-position--inset {
	width: 100%;
}

.dynamic-position--inset.is-floating {
	position: sticky;
	bottom: 16px;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	padding: 0;
	background: transparent;
	box-shadow: none;
	height: auto;
	z-index: 3;
}

.dynamic-position--inset.is-floating .sidetalk-dashboard-button,
.dynamic-position--inset.is-floating button,
.dynamic-position--inset.is-floating form {
	bottom: 0;
}

.dynamic-position--inset+.dynamic-position-placeholder {
	display: none !important;
}

.dynamic-position--file-upload {
	width: 100%;
	gap: 12px;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}

.dynamic-position--file-upload form {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	flex: 0 0 auto;
}

.dynamic-position--file-upload>* {
	flex: 0 0 auto;
}

.dynamic-position--user-info {
	justify-content: space-between;
	gap: 20px;
	flex-wrap: nowrap;
	align-items: center;
}

.dynamic-position--user-info form {
	display: flex;
	align-items: center;
	margin: 0;
	flex: 0 0 auto;
}

.dynamic-position--user-info>button {
	flex: 0 0 auto;
}

.dynamic-position--user-info.is-floating {
	gap: 20px;
}

.dynamic-position-placeholder {
	display: none;
	width: 100%;
}

@media (max-width: 768px) {
	.dynamic-position {
		position: relative;
		margin: 24px 0 0;
		/* padding: 0 0 24px; */
	}

	.dynamic-position--file-upload,
	.dynamic-position--user-info {
		flex-wrap: wrap;
		align-items: center;
	}
}

#side-panel {
	position: fixed;
	top: 33px;
	right: 0;
	width: 300px;
	height: 100%;
	background-color: #fff;
	box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
	padding: 20px;
	box-sizing: border-box;
	display: none;
	z-index: 99999999;
	overflow-y: auto;
}

#side-panel .close-btn {
	font-size: 24px;
	color: #aaa;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

#side-panel .close-btn:hover {
	color: #000;
}

#side-panel h2 {
	margin-top: 0;
	color: #333;
}

#side-panel p {
	color: #555;
	margin: 10px 0;
}

#side-panel .panel-content {
	padding: 10px;
	background-color: #f9f9f9;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.user-name-highlight {
	color: #007bff !important;
	/* Blue text */
	cursor: pointer;
	transition: color 0.3s ease;
}

.user-name-highlight:hover {
	color: #0056b3 !important;
	;
	/* Darker blue text */
}

/* Card styles */
/* MOVED TO base-card.css */

/* Column resize drag handle */
.resize-handle {
	width: 10px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	cursor: col-resize;
	background-color: rgba(0, 0, 0, 0.1);
	border-right: 2px solid #ccc;
	transition: background-color 0.2s ease;
}

/* Banner */
.banner {
	display: none;
	position: fixed;
	bottom: 120px;
	right: 40px;
	width: 400px;
	background-color: #ffffff;
	color: #333333;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	text-align: center;
	padding: 20px;
	border-radius: 12px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
	transform: translateY(20px);
	opacity: 0;
	visibility: hidden;
	/* Transition added */
}

.banner.show {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	/* Transition added */
}

.banner-header {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 15px;
}

.banner-body {
	margin: 15px 0;
}

.banner-body ul {
	margin: 0;
	padding: 0;
	padding-left: 20px;
	list-style: none;
}

.banner-body a {
	color: #0073aa;
	text-decoration: none;
	font-weight: 500;
}

.banner-body a:hover {
	text-decoration: underline;
}

.banner-footer {
	margin-top: 15px;
}

.close-button {
	margin-top: 10px;
	padding: 10px 20px;
	background-color: #6c757d;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.3s, box-shadow 0.3s;
	font-weight: bold;
}

.close-button:hover {
	background-color: #5a6268;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Personal info tooltip */
.hover-reveal {
	position: relative;
	cursor: pointer;
}

.hover-reveal::after {
	content: attr(data-full);
	position: absolute;
	white-space: nowrap;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s;
	background: white;
	border: 1px solid #ddd;
	padding: 5px;
	z-index: 10;
	left: 36%;
}

.hover-reveal:hover::after {
	visibility: visible;
	opacity: 1;
}

@keyframes slideUp {
	0% {
		bottom: -120px;
		/* Start off-screen */
		opacity: 0;
	}

	100% {
		bottom: 120px;
		/* Final position */
		opacity: 1;
	}
}

.slide-up-animation {
	animation: slideUp 1s ease-out forwards;
}

/* Animation definition */
@keyframes attentionGrabber {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}
}

.card.attention-grabber {
	animation: attentionGrabber 1s forwards;
}

.card.slide-out-up {
	transform: translateY(-100%);
	/* Move upward */
	opacity: 0;
	/* Opacity adjustment */
	transition: transform 0.3s ease, opacity 0.3s ease;
}

#data-entry-banner {
	display: none;
}

@keyframes fadeOut {
	to {
		opacity: 0;
		visibility: hidden;
		height: 0;
		overflow: hidden;
	}
}

/* Toggle CSS */
/* MOVED TO base-form.css */

/* Modal CSS */
.sidetalk-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	display: none;
	z-index: 999999999;
}

.sidetalk-modal-overlay h4 {
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 700;
	color: #333;
}

.sidetalk-modal-wrap {
	width: 400px;
	height: auto;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background-color: #fff;
	box-sizing: border-box;
	transform: translateY(-20%);
	box-shadow: -2px 2px 10px 1px rgba(0, 0, 0, 0.2), 2px 2px 10px 1px rgba(0, 0, 0, 0.2), 0 2px 10px 1px rgba(0, 0, 0, 0.2);
	z-index: 1000000000;
}

.sidetalk-modal-content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.sidetalk-modal-item-row {
	display: flex;
	width: 50%;
	box-sizing: border-box;
	align-items: center;
	padding: 5px 0;
}

.sidetalk-modal-item-row p {
	margin-left: 10px;
	margin-bottom: 0;
}

.sidetalk-modal-item-row:hover {
	background-color: rgba(0, 140, 210, 0.05);
	cursor: pointer;
}

.sidetalk-modal-action-detail {
	height: 100px;
}

/* Date Picker Modal Specific Overrides */
#sidetalk-date-modal .sidetalk-modal-content {
	display: flex;
	flex-direction: column;
	width: 400px;
	max-width: 95%;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	padding: 0;
	transform: translateY(-20%);
	box-sizing: border-box;
	cursor: default;
}

#sidetalk-date-modal .sidetalk-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e7eb;
	background-color: #fff;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

#sidetalk-date-modal .sidetalk-modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #333;
}

#sidetalk-date-modal .sidetalk-modal-footer {
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

/* Side modal */
/* .sidetalk-side-modal-overlay { position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 5; display: none; } */
#sidetalk-side-modal-close-btn {
	word-break: keep-all;
	height: 45px;
}

/* Originally width:70px; */
.sidetalk-side-modal-wrap h4 {
	margin-bottom: 0px;
	font-size: 20px;
	font-weight: 700;
	color: #333;
}

.sidetalk-side-modal-wrap {
	position: fixed;
	top: 0;
	right: -500px;
	width: 700px;
	height: 100%;
	background-color: #fff;
	box-shadow: -2px 0 10px 1px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	z-index: 999999998;
	overflow: hidden;
	display: none;
	flex-direction: column;
	transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Side modal position adjustment when banner is present */
.sidetalk-has-banner .sidetalk-side-modal-wrap {
	top: 44px;
	height: calc(100% - 44px);
}

.admin-bar .sidetalk-side-modal-wrap {
	top: 32px;
	height: calc(100% - 32px);
}

/* When both admin bar and banner are present */
.admin-bar.sidetalk-has-banner .sidetalk-side-modal-wrap {
	top: 76px;
	height: calc(100% - 76px);
}

.sidetalk-side-modal-wrap.active {
	display: flex !important;
}

.sidetalk-side-modal-wrap .side-modal-title-wrap {
	display: flex;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid #ddd;
}

.sidetalk-side-modal-wrap .side-modal-title-wrap img {
	width: 40px;
	height: 40px;
	margin-right: 10px;
}

.sidetalk-side-modal-wrap .side-modal-title-wrap .side-modal-title {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.sidetalk-side-modal-wrap .side-modal-title-wrap .side-modal-title .side-modal-title-text {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.sidetalk-side-modal-wrap .side-modal-title-wrap .side-modal-title .side-modal-title-text input {
	border-radius: 0.75rem;
}

.sidetalk-side-modal-wrap .side-modal-navigation-wrap {
	display: flex;
	/* justify-content: space-between; */
	border-bottom: 3px solid #ddd;
}

.sidetalk-side-modal-wrap .side-modal-navigation-wrap .side-modal-navigation-btn {
	width: 120px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sidetalk-side-modal-wrap .side-modal-navigation-wrap .side-modal-navigation-btn.active {
	font-weight: 700;
	color: var(--st-primary);
	justify-content: center;
	align-items: center;
}

.sidetalk-side-modal-wrap .side-modal-navigation-wrap .side-modal-navigation-btn:hover {
	cursor: pointer;
}

/* MOVED TO base-nav.css */

.sidetalk-navigation-btn span.navigation-text {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Bottom divider under data sheet tabs */
#tables-data-tabs {
	border-bottom: 1px solid #ddd;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	box-sizing: border-box;
	overflow-y: hidden;
	overflow-x: hidden;
}

.sidetalk-side-modal-wrap .side-modal-content {
	display: none;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 20px;
	overflow-y: auto;
	overflow-x: hidden;
	padding-bottom: 24px;
}

.sidetalk-side-modal-wrap .side-modal-content.active {
	display: flex;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap .side-modal-flex-space-between {
	display: flex;
	justify-content: space-between;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap .side-modal-flex {
	display: flex;
	justify-content: center;
	align-items: center;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap .side-modal-content-item .content-app {
	height: 60px;
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 0.75rem;
	align-items: center;
	cursor: pointer;
	margin: 3px;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap .side-modal-content-item .content-app-detail {
	padding: 10px;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap .side-modal-content-item .description {
	margin-bottom: 0px;
	word-break: keep-all;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap .side-modal-content-item select {
	margin-bottom: 0px;
	width: 100%;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap .side-modal-content-footer {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-top: 1px solid #ddd;
	background: #fff;
	padding: 16px 0 20px;
	gap: 10px;
	margin-top: auto;
}

.sidetalk-side-modal-wrap .side-modal-content .side-modal-content-item input,
.sidetalk-side-modal-wrap .side-modal-content .side-modal-content-item select,
.sidetalk-side-modal-wrap .side-modal-content .side-modal-content-item textarea {
	border-radius: 0.75rem;
	resize: vertical;
}

/* Action div */
#sidetalk-dashboard-content .sidetalk-actions-wrap {
	width: 450px;
	cursor: pointer;
	position: relative;
}

#sidetalk-dashboard-content .sidetalk-answer-output-wrap {
	width: 450px;
	position: relative;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .actions-wrap-delete-btn {
	position: absolute;
	top: 20px;
	right: 10px;
	background: none;
	border: none;
	font-size: 20px;
	color: #333;
	cursor: pointer;
	z-index: 1;
	padding: 10px;
	display: none;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .actions-wrap-delete-btn.active {
	display: block;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row:hover {
	background-color: var(--st-primary-lighter);
	transform: scale(1.03);
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .show-action-method-btn-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row {
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 30px 40px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background-color: #fff;
	box-sizing: border-box;
	display: none;
	transition: transform 0.3s ease, background-color 0.3s ease;
}

#sidetalk-dashboard-content .sidetalk-answer-output-wrap .answer-output-wrap {
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 30px 40px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background-color: #fff;
	box-sizing: border-box;
}

#sidetalk-dashboard-content .sidetalk-answer-output-wrap .answer-output-wrap h3 {
	margin-bottom: 30px;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	color: #333;
}


#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row-trigger {
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 30px 40px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background-color: #fff;
	box-sizing: border-box;
	transition: transform 0.3s ease, background-color 0.3s ease;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row-trigger h3 {
	margin-bottom: 30px;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	color: #333;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row-trigger h4 {
	margin-bottom: 30px;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	color: #333;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row-trigger .item-row input,
#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row-trigger .item-row select,
#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row-trigger .item-row textarea {
	width: 100%;
	border-radius: 0.75rem;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row.active {
	display: block;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row h3 {
	margin-bottom: 30px;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	color: #333;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row h4 {
	margin-bottom: 30px;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	color: #333;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row .action-content-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row .action-content-body {
	display: flex;
	align-items: center;
	width: 100%;
}

#sidetalk-dashboard-content.agent-content-wrap {
	padding: 0;
}

#sidetalk-dashboard-content .content-body .agent-setting-content-body {
	display: flex;
	justify-content: space-between;
}

#sidetalk-dashboard-content .content-body .agent-setting-content-body .left-side-bar-wrap {
	display: flex;
}

#sidetalk-dashboard-content .content-body .agent-setting-content-body .left-side-bar-wrap .left-side-btn-wrap {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	justify-content: start;
}

#sidetalk-dashboard-content .content-body .agent-setting-content-body .left-side-bar-wrap .left-side-btn-wrap button {
	margin: 5px 5px 5px 5px;
}

@keyframes pulse {

	0%,
	100% {
		background-color: #ffffff;
	}

	50% {
		background-color: #f0f0f0;
	}
}

.animate-pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

#loading-template {
	display: none;
}

/* Badge effect */
.admin-notification-count {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 2px 6px;
	border-radius: 12px;
	/* Pill shape */
	background-color: #ff3b30;
	/* Kakao-style color (red) */
	color: #ffffff;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	line-height: 1;
	transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	margin-left: 4px;
}

.admin-notification-count.animate {
	animation: pulse-expand 0.8s ease-in-out, shake 0.5s ease-out;
}

/* Badge popup effect */
@keyframes pulse-expand {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.2);
		opacity: 0.9;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Shake effect */
@keyframes shake {
	0% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-2px);
	}

	50% {
		transform: translateX(2px);
	}

	75% {
		transform: translateX(-2px);
	}

	100% {
		transform: translateX(0);
	}
}

.sidetalk-chatbot-custom-modal {
	display: none;
	/* Initially hidden */
	align-items: center;
	justify-content: center;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(20, 20, 20, 0.7);
}

.sidetalk-chatbot-custom-content {
	background-color: #fefefe;
	padding: 25px;
	border-radius: 12px;
	width: 90%;
	/* Responsive width */
	max-width: 600px;
	max-height: 90vh;
	/* Limit to 90% of screen height */
	overflow-y: auto;
	/* Scroll when content overflows */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	animation: slideDown 0.4s ease;
}

@keyframes slideDown {
	from {
		transform: translateY(-50px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.sidetalk-chatbot-custom-close {
	color: #444;
	float: right;
	font-size: 26px;
	font-weight: bold;
	cursor: pointer;
}

.sidetalk-chatbot-custom-close:hover {
	color: #d9534f;
}

/* Favicon and tooltip */
.sidetalk-tooltip-icon {
	position: relative;
	cursor: pointer;
	margin-left: 8px;
}

.info-circle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #888;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}

.sidetalk-tooltip-text {
	visibility: hidden;
	width: 260px;
	background-color: #222;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 8px;
	position: absolute;
	z-index: 1;
	bottom: 130%;
	left: 50%;
	margin-left: -130px;
	opacity: 0;
	transition: opacity 0.4s ease;
	font-size: 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sidetalk-tooltip-icon:hover .sidetalk-tooltip-text {
	visibility: visible;
	opacity: 1;
}

.sidetalk-tooltip-text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #222 transparent transparent transparent;
}

/* Input field styles */
.sidetalk-chatbot-custom-content .item-row {
	margin-bottom: 20px;
}

.sidetalk-chatbot-custom-content textarea {
	width: 100%;
	min-height: 100px;
	padding: 12px;
	border-radius: 8px;
	border: 1px solid #ddd;
	box-sizing: border-box;
	resize: vertical;
	font-family: Arial, sans-serif;
	font-size: 14px;
	background-color: #f9f9f9;
}

.sidetalk-chatbot-custom-content textarea:focus {
	border-color: #007acc;
	outline: none;
}

/* Description text character limit */
.sidetalk-chatbot-custom-description {
	color: #555;
	font-size: 13px;
	margin-top: 5px;
}

.sidetalk-chatbot-custom-description .char-limit {
	color: #777;
}

/* Usage guide link */
.sidetalk-chatbot-custom-content a {
	color: #337ab7;
	text-decoration: underline;
	font-size: 14px;
	margin-top: 6px;
	display: inline-block;
}

.sidetalk-chatbot-custom-content a:hover {
	color: #23527c;
	/* Link hover color */
}

.sidetalk-dashboard-checkbox-container {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

/* Hide default checkbox */
.sidetalk-dashboard-checkbox-container input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* Custom checkbox */
.sidetalk-dashboard-checkbox {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Checked state styles */
.sidetalk-dashboard-checkbox-container input[type="checkbox"]:checked+.sidetalk-dashboard-checkbox {
	background-color: #007bff;
	border-color: #007bff;
	box-shadow: 0 2px 4px rgba(0, 123, 255, 0.4);
}

/* Checked state icon */
.sidetalk-dashboard-checkbox-container input[type="checkbox"]:checked+.sidetalk-dashboard-checkbox::after {
	content: "??;
 color: white;
	font-size: 14px;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Hover effect */
.sidetalk-dashboard-checkbox:hover {
	background-color: #f8f9fa;
	border-color: #b3b3b3;
}

.skeleton {
	background: linear-gradient(-90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
	border-radius: 4px;
}

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

	100% {
		background-position: -200% 0;
	}
}

/* Form builder container */
#sidetalk-dashboard-content .form-container {
	display: flex;
	flex-direction: column;
	padding: 20px;
	margin-top: 20px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#sidetalk-dashboard-content .form-container h3 {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin-bottom: 20px;
	text-align: center;
}

/* Input field styles */
/* MOVED TO base-form.css */

/* Preview container */
#previewContainer {
	border: 1px solid #ddd;
	border-radius: 10px;
	background-color: #ffffff;
	padding: 18px;
	margin: 0 auto 20px;
	font-size: 14px;
	color: #444;
	max-width: 600px;
	text-align: center;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
}

#previewContainer p {
	font-weight: 600;
	color: #222;
	margin-bottom: 12px;
}


/* Field container */
#previewFieldsContainer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* Natural spacing */
}

#previewFieldsContainer .radio-options-preview {
	display: flex;
	flex-direction: row;
	/* Arrange in a row (horizontal) */
	flex-wrap: wrap;
	/* Wrap options if too many */
	gap: 16px;
	/* Option spacing */
	margin-top: 6px;
}

#previewFieldsContainer .radio-options-preview label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.4;
}

#previewFieldsContainer .radio-options-preview input[type="radio"] {
	margin: 0;
}

#previewFieldsContainer select.preview-control {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid #ededed;
	border-radius: 20px;
	background-color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	color: #333;
}

/* Field preview: drag handle position and dropdown indicator */
#previewFieldsContainer .preview-field {
	position: relative;
}

#previewFieldsContainer .drag-handle {
	position: absolute;
	left: 7px;
	top: 13px !important;
	opacity: .85;
}

#previewFieldsContainer .preview-field.dragging {
	opacity: .5;
}

#previewFieldsContainer .drop-indicator {
	height: 10px;
	background: #e5edff;
	border: 1px dashed #94a3b8;
	margin: 6px 0;
	border-radius: 6px;
}

/* Common field styles */
.preview-field {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-items: center;
	padding: 12px 16px;
	border: 1px solid #ddd;
	border-radius: 12px;
	background-color: #ffffff;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	justify-content: space-between;
	gap: 14px;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.08);
	position: relative;
	overflow: hidden;
}

.preview-field .field-name,
.preview-field .field-name-block {
	width: 100%;
	max-width: 100%;
	font-weight: 600;
	font-size: 15px;
	color: #222;
	white-space: normal;
	word-break: break-word;
	margin-bottom: 8px;
	text-align: left;
	overflow: visible;
	text-overflow: unset;
	display: block;
}

.column-type-label {
	font-weight: bold;
	color: #666;
	margin-right: 6px;
	flex: 0 0 auto;
	font-size: 12px;
}

/* Column type styles (icon + text) */
.preview-field .column-type {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: #555;
}

.preview-field .column-type i {
	font-size: 16px;
	color: #0077cc;
}

/* Table column field (input disabled, view only) */
.preview-field.table-field input {
	flex: 0 0 70px;
	padding: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #777;
	border: none;
	background-color: transparent;
	text-align: center;
}

/* Delete button */
.preview-field .delete-button {
	flex: 0 0 auto;
	padding: 8px 12px;
	border: none;
	border-radius: 8px;
	background-color: #ff4d4d;
	color: #fff;
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.preview-field .delete-button:hover {
	background-color: #d93636;
}

/* Mouse hover effect */
.preview-field:hover {
	background-color: #f9fcff;
	box-shadow: 0 0 12px rgba(0, 120, 220, 0.15);
}

/* Add button */
.preview-buttons .add-field-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: bold;
	border: 2px solid #0077cc;
	border-radius: 30px;
	background-color: #ffffff;
	color: #0077cc;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
	margin-top: 12px;
}

.preview-buttons .add-field-button:hover {
	background-color: #0077cc;
	color: #fff;
	box-shadow: 0 4px 10px rgba(0, 120, 220, 0.2);
	transform: translateY(-2px);
}

.preview-buttons .add-field-button:active {
	transform: translateY(1px);
	box-shadow: 0 2px 4px rgba(0, 120, 220, 0.2);
}

/* Responsive styles */
@media (max-width: 768px) {
	.preview-field {
		flex-direction: column;
		align-items: flex-start;
		padding: 12px;
	}

	.preview-field .field-name {
		width: 100%;
		font-size: 15px;
		text-align: left;
	}

	.preview-field .column-type {
		width: 100%;
		font-size: 14px;
	}

	.preview-field .delete-button {
		width: 100%;
		margin-top: 6px;
	}
}

/* New preview table container */
.preview-table-container {
	border: 1px solid #ddd;
	border-radius: 10px;
	background-color: #ffffff;
	padding: 16px;
	margin: 20px auto;
	font-size: 14px;
	color: #444;
	max-width: 100%;
	text-align: center;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
}

/* Column preview table */
.preview-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
	text-align: left;
	background-color: #fff;
}

/* Column header styles */
.preview-table thead {
	background-color: #f8f9fa;
	font-size: 14px;
	font-weight: bold;
}

.preview-table th {
	position: relative;
	border: 1px solid #ddd;
	padding: 12px;
	text-align: center;
	color: #333;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.preview-table tbody td {
	text-align: left;
	/* Left aligned */
	padding: 8px;
	/* Moderate padding added */
}

.preview-table tbody td:not([data-type="number"]) {
	text-align: left;
}

.preview-table tbody td[data-type="number"] {
	text-align: right;
	/* Numbers right-aligned */
}

/* Column header mouse hover effect */
.preview-table th:hover {
	background-color: #e9ecef;
}

/* Column delete button (X icon) */
.delete-column {
	position: absolute;
	top: 4px;
	right: 8px;
	font-size: 14px;
	color: #ff4d4d;
	cursor: pointer;
	transition: color 0.2s ease;
}

.delete-column:hover {
	color: #d93636;
}


/* Empty table preview (when no columns) */
.preview-table tbody td {
	text-align: center;
	color: #999;
	font-size: 13px;
	padding: 12px;
}

/* Column add button */
.preview-table-buttons {
	margin-top: 12px;
	text-align: center;
}

/* Add button */
.preview-table-buttons .add-column-button {
	padding: 12px 20px;
	font-size: 15px;
	font-weight: bold;
	border: 2px solid #0077cc;
	border-radius: 30px;
	background-color: #ffffff;
	color: #0077cc;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 12px;
}

.preview-table-buttons .add-column-button:hover {
	background-color: #0077cc;
	color: #fff;
}

.preview-table-buttons .add-column-button:active {
	transform: translateY(1px);
	box-shadow: 0 2px 4px rgba(0, 120, 220, 0.2);
}

/* Responsive styles */
@media (max-width: 768px) {
	.preview-table th {
		font-size: 12px;
		padding: 10px;
	}

	.preview-table tbody td {
		font-size: 12px;
	}

	.preview-table-buttons .add-column-button {
		padding: 10px 16px;
		font-size: 14px;
	}
}


/* Side panel */
/* MOVED TO base-nav.css */

/* Admin bar offset */
/* admin-bar .custom-side-panel MOVED TO base-nav.css */

/* Banner offset */
/* sidetalk-has-banner .custom-side-panel MOVED TO base-nav.css */

/* Admin bar + banner combined offset */
/* custom-side-panel children MOVED TO base-nav.css */

/* Column input field related styles */
.sidetalk-columns-container {
	margin-top: 15px;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 15px;
	background: linear-gradient(to bottom, #f9f9f9, #ffffff);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Column row styles */
.sidetalk-column-row {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 15px;
	padding: 10px;
	border-radius: 6px;
	background-color: #fdfdfd;
	border: 1px solid #e5e5e5;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sidetalk-input {
	flex: 1;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background-color: #ffffff;
	transition: all 0.3s ease;
}

.sidetalk-input:focus {
	border-color: #0073aa;
	background-color: #f5faff;
	outline: none;
}

/* Select styles */
.sidetalk-select {
	flex: 1;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background-color: #ffffff;
}

/* Column add button */
#add-column {
	width: 100%;
	max-width: 200px;
	margin: 20px auto;
	padding: 12px 20px;
	font-size: 16px;
	font-weight: bold;
	color: white;
	background: linear-gradient(45deg, var(--st-primary), var(--st-primary-hover));
	border: none;
	border-radius: 25px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	text-transform: uppercase;
	text-align: center;
}

#add-column:hover {
	background: linear-gradient(45deg, #33c3f0, #0094d2);
	transform: translateY(-3px);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

#add-column:active {
	transform: translateY(0);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#add-column:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 176, 237, 0.5);
}

.form-controls.right-align {
	display: flex;
	justify-content: flex-end;
	/* Align buttons to the right */
	margin-top: 20px;
	/* Top margin */
}

.form-controls.flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

#sidetalk-auto-sync-btn {
	margin-left: auto;
}

/* Added to dashboard.css */
.sidetalk-dashboard-button .save-button.blink {
	animation: sidetalk-blink 1.2s infinite alternate;
	box-shadow: 0 0 0 0 rgba(0, 153, 255, 0.15);
}

@keyframes sidetalk-blink {
	0% {
		background-color: #f5fbff;
		box-shadow: 0 0 0 0 rgba(0, 153, 255, 0.10);
	}

	100% {
		background-color: #e6f7ff;
		box-shadow: 0 0 8px 2px rgba(0, 153, 255, 0.18);
	}
}

#activate-form-select {
	width: 100%;
	/* Set dropdown width to match parent element */
	max-width: 400px;
	/* Maximum width setting (optional) */
	margin-top: 13px !important;
	/* Top margin */
}

/* Table link styles */
.sidetalk-table-list-link {
	color: #555555;
	text-decoration: underline;
	font-size: 14px;
	font-weight: 900;
	text-align: center;
	transition: color 0.3s ease;
	display: inline-block;
	cursor: pointer;
}

/* Link hover styles */
.sidetalk-table-list-link:hover {
	color: #007bff;
	text-decoration: none;
}

.sidetalk-table-list-link.data-sheet {
	color: #555555;
}

#excelTable {
	width: 100%;
	table-layout: fixed;
	/* Fixed column width */
	border-collapse: collapse;
	font-family: "Pretendard Variable", Pretendard, sans-serif;
	font-size: 14px;
	color: #333333;
}

/* Table header styles */
#excelTable thead th {
	background: #f9f9f9;
	/* Light background color */
	border: 1px solid #e0e0e0;
	padding: 15px 10px !important;
	text-align: left !important;
	font-weight: bold;
	color: #444444;
	/* Dark text color */
	white-space: nowrap;
	position: sticky;
	/* Sticky header */
	top: 0;
	/* Fixed at top of table */
	z-index: 10;
	/* Display above body content */
}

#excelTable thead th:last-child {
	width: unset !important;
}

/* Table body styles */
#excelTable tbody td {
	border: 1px solid #e0e0e0;
	padding: 5px 10px !important;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #555555;
	/* Medium text color */
	background-color: #ffffff;
	/* Default background */
	transition: background-color 0.3s ease, color 0.3s ease;
}

#excelTable tbody td.show-full,
#excelTable tbody td:focus {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: unset !important;
	background: #f6faff;
	z-index: 10;
	position: relative;
	min-width: 200px;
	max-width: 600px;
	word-break: break-all;
}

/* Row hover highlight effect */
#excelTable tbody tr:hover td {
	background-color: #e9e9e9;
	/* Slightly darker color */
	color: #333333;
}

/* Cell click highlight effect */
#excelTable tbody td:active {
	background-color: #dcdcdc;
	/* Dark color */
	color: #222222;
	/* Near-black text */
	font-weight: bold;
}

/* Scrollbar styles */
.table-wrapper::-webkit-scrollbar {
	height: 8px;
}

.table-wrapper::-webkit-scrollbar-thumb {
	background: #bbbbbb;
	/* Medium color */
	border-radius: 6px;
	border: 2px solid #eeeeee;
	/* Scrollbar border color */
}

.table-wrapper::-webkit-scrollbar-track {
	background: #f4f4f4;
	/* Light track color */
}

/* Button container and button group responsive improvement */
@media (max-width: 768px) {
	.sidetalk-button-container {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		margin-bottom: 10px;
	}

	.sidetalk-button-wrapper,
	.sidetalk-button-group {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 6px;
	}

	.sidetalk-btn,
	.sidetalk-setting-button,
	.sidetalk-upload-label {
		width: 100%;
		min-width: 0;
		font-size: 11px;
		padding: 8px 0;
		box-sizing: border-box;
	}

	.sidetalk-page-size-container {
		margin: 0;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.sidetalk-page-size-input {
		width: 100%;
		min-width: 0;
		margin-top: 4px;
	}

	.sidetalk-dashboard-data-list-wrap {
		overflow-x: auto;
		width: 100%;
		display: block;
		padding: 0;
	}

	.table-wrapper {
		overflow-x: auto;
		width: 100%;
		padding: 0;
	}

	#excelTable {
		font-size: 11px;
		min-width: 320px;
	}

	#excelTable thead th,
	#excelTable tbody td {
		font-size: 12px;
		padding: 8px;
	}
}

/* Common button container styles */
.sidetalk-button-container,
.sidetalk-button-container.bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
	margin-top: 10px;
	width: 100%;
}

/* Button group, page size input group */
.sidetalk-button-wrapper,
.sidetalk-button-group,
.sidetalk-page-size-container,
.sidetalk-button-wrapper>div,
.sidetalk-button-group>div,
.sidetalk-page-size-container>div {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* MOVED TO base-button.css */

/* CSV upload/download button size alignment */
.sidetalk-upload-form {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sidetalk-upload-label {
	height: 33px;
	/* Same height as other buttons */
	padding: 1px 23px;
	/* Same inner padding */
	font-size: 14px;
	/* Font size unified */
	font-weight: bold;
	color: #ffffff;
	background-color: #777777;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
	display: inline-flex;
	/* Fix inner element sizing issue */
	align-items: center;
	justify-content: center;
}

.sidetalk-upload-label:hover {
	background-color: #666666;
}

.sidetalk-upload-label:active {
	background-color: #555555;
}

/* Hidden file upload field */
.sidetalk-upload-input {
	display: none;
}

#sidetalk-dashboard-container .sidetalk-page-size-input {
	width: 75px;
	min-height: 34px;
	font-family: var(--st-font-family);
	font-size: var(--st-font-size-sm);
	line-height: normal;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-xl);
	background: var(--st-bg-primary);
	color: var(--st-text-primary);
	box-sizing: border-box;
	display: inline-block;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	padding: 0 16px;
	height: 44px;
	margin: 0 !important;
}

.sidetalk-page-size-container label {
	font-size: 14px;
	font-weight: bold;
	color: #333;
	margin-right: 4px;
}

.total-entries-text {
	float: right;
}

/* Responsive styles applied */
@media (max-width: 768px) {
	.sidetalk-button-container {
		flex-direction: column;
		align-items: center;
		gap: 6px;
		flex-wrap: wrap;
	}

	.sidetalk-button-wrapper,
	.sidetalk-page-size-container,
	.sidetalk-button-group {
		flex-direction: column;
		align-items: center;
		width: 100%;
		text-align: center;
		gap: 5px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.sidetalk-page-size-container label {
		text-align: center;
	}

	.sidetalk-page-size-container {
		margin-left: 0;
		justify-content: center;
	}

	.sidetalk-btn {
		width: 100%;
		max-width: 240px;
		font-size: 12px;
		padding: 6px 12px;
	}

	.sidetalk-page-size-input {
		width: 70px;
		font-size: 12px;
	}
}

/* Table styles */
.next-step-btn {
	display: inline-block;
	padding: 12px 24px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	background: linear-gradient(45deg, var(--st-primary), var(--st-primary-hover));
	border: none;
	border-radius: 25px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	text-transform: uppercase;
	text-align: center;
}

.next-step-btn:hover {
	background: linear-gradient(45deg, #33c3f0, #0094d2);
	transform: translateY(-3px);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.next-step-btn:active {
	transform: translateY(0);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.next-step-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 176, 237, 0.5);
}

/* Step navigation container */
.step-navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
	margin-top: 20px;
	position: relative;
}

/* Button styles */
.step-item {
	flex: 1;
	background-color: #ffffff;
	border: 1px solid #dee2e6;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 12px 15px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #6c757d;
	position: relative;
	transition: all 0.3s ease;
	cursor: default;
}

/* Step indicator divider */
.step-item::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -6px;
	width: 10px;
	height: 10px;
	background-color: #ffffff;
	border-top: 1px solid #dee2e6;
	border-right: 1px solid #dee2e6;
	transform: translateY(-50%) rotate(45deg);
	transition: all 0.3s ease;
	z-index: 1;
}

/* Active state (current step highlight) */
.step-item.active {
	background-color: #007bff;
	color: #ffffff;
	border-color: #007bff;
	box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
	transform: translateY(-2px);
	z-index: 2;
}

/* Active state indicator */
.step-item.active::after {
	background-color: #007bff;
	border-top-color: #007bff;
	border-right-color: #007bff;
}

/* Remove indicator on last step */
.step-item:last-child::after {
	display: none;
}

.tooltip-icon {
	display: inline-block;
	margin-left: 8px;
	font-size: 17px;
	color: #007bff;
	cursor: pointer;
	position: relative;
}

.tooltip-icon:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	/* Show tooltip above the icon */
	left: 50%;
	transform: translateX(-50%);
	background-color: #333;
	color: #fff;
	padding: 8px 12px;
	border-radius: 4px;
	white-space: nowrap;
	font-size: 12px;
	z-index: 10;
	opacity: 1;
	transition: opacity 0.2s;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tooltip-icon:hover::before {
	content: '';
	position: absolute;
	bottom: 90%;
	/* Show arrow below the tooltip */
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px;
	border-style: solid;
	border-color: transparent transparent #333 transparent;
	z-index: 10;
}

.tooltip-icon::after,
.tooltip-icon::before {
	opacity: 0;
	pointer-events: none;
}

.tooltip-icon:hover::after,
.tooltip-icon:hover::before {
	opacity: 1;
}

.sidetalk-dashboard-data-add-wrap .sideatalkDashboardTabForm {
	width: 100%;
}

.selected-cell {
	background-color: #d0ebff !important;
	border: 1px solid #4a90e2 !important;
}

.sidetalk-border-radius-0 {
	border-radius: 0 !important;
}

.answer-content {
	max-height: 3em;
	/* Show up to 3 lines by default */
	overflow: hidden;
	transition: max-height 0.3s ease-in-out;
}

.toggle-answer {
	display: none;
	color: #555;
	/* Gray text */
	font-size: 14px;
	/* Slightly smaller font size */
	text-decoration: underline;
	/* Show as link-style */
	background: none;
	border: none;
	cursor: pointer;
}

.toggle-answer:hover {
	color: #0056b3;
}

.action-drag-handle {
	cursor: move;
	display: inline-block;
	padding: 5px;
	color: #888;
	position: absolute;
	right: 40px;
	top: 10px;
}

/* Notes - existing styles maintained */

/* Loading indicator styles added */
.ajax-loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.0);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.ajax-loading-spinner {
	width: 50px;
	height: 50px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.button-loading {
	opacity: 0.7;
	position: relative;
	pointer-events: none;
}

.button-loading:after {
	content: "...";
	margin-left: 5px;
}


.action-drag-handle {
	cursor: move;
	display: inline-block;
	padding: 5px;
	color: #888;
	position: absolute;
	right: 40px;
	top: 10px;
}

.ui-sortable-helper {
	opacity: 0.8;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.ui-sortable-placeholder {
	visibility: visible !important;
	background-color: rgba(0, 0, 0, 0.05);
	border: 2px dashed #ccc;
	margin-bottom: 10px;
	height: 80px;
}

.sortable-action-item {
	position: relative;
}

/* Added arrow styles */
#sortable-actions-container .xi-arrow-down {
	display: block;
	text-align: center;
	margin: 10px 0;
}

.sidetalk-actions-wrap {
	cursor: move;
	/* Show drag cursor for entire area */
}

/* Side modal overlay styles */
.sidetalk-side-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 100;
	display: none;
}

/* Side modal z-index adjustment */
.sidetalk-side-modal-wrap {
	z-index: 101;
}

/* Sync button styles */
.sidetalk-sync-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border: 1px solid var(--st-primary);
	border-radius: 12px;
	background-color: var(--st-primary);
	color: var(--st-text-inverse);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 200ms ease-in-out;
	margin-bottom: 5px;
	min-width: auto;
	text-decoration: none;
}

.sidetalk-sync-button:hover {
	background-color: var(--st-primary-hover);
	border-color: var(--st-primary-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sidetalk-sync-button:disabled {
	background-color: #6c757d;
	border-color: #6c757d;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.sidetalk-sync-button i {
	margin-right: 4px;
	font-size: 14px;
	line-height: 14px;
}

.sidetalk-sync-button .text {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	line-height: 14px;
}

/* Sync status display */
.sidetalk-sync-status {
	font-weight: bold;
	font-size: 12px;
}

.sidetalk-sync-status.success {
	color: #28a745;
}

.sidetalk-sync-status.error {
	color: #dc3545;
}

.sidetalk-sync-status.neutral {
	color: #888;
}

.checkbox-options-preview {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	text-align: left;
	font-size: 15px;
}

@keyframes sidetalkModalFadeIn {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(-20px);
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.sidetalk-readonly-message {
	position: absolute;
	background: #f5f6fa;
	color: #555;
	font-size: 13px;
	padding: 7px 16px;
	border-radius: 7px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
	z-index: 100;
	pointer-events: none;
	white-space: nowrap;
}

/* Sidebar user info input field alignment improvement */
.userinfo-fields>div {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.userinfo-fields strong {
	display: inline-block;
	min-width: 110px;
	/* Fixed label width, adjust as needed */
	font-weight: 600;
}

.userinfo-fields input,
.userinfo-fields textarea {
	flex: 1;
	margin-left: 8px;
}

/* Chat log markdown */
#sidetalk-dashboard-content .answer-content .markdown-content {
	line-height: 1.6;
	text-align: left;
	font-size: 14px;
	color: inherit;
	word-break: break-word;
}

#sidetalk-dashboard-content .answer-content .markdown-content h1,
#sidetalk-dashboard-content .answer-content .markdown-content h2,
#sidetalk-dashboard-content .answer-content .markdown-content h3,
#sidetalk-dashboard-content .answer-content .markdown-content h4,
#sidetalk-dashboard-content .answer-content .markdown-content h5,
#sidetalk-dashboard-content .answer-content .markdown-content h6 {
	margin: 0.8em 0 0.4em;
	line-height: 1.25;
	font-weight: 600;
}

#sidetalk-dashboard-content .answer-content .markdown-content h1 {
	font-size: 1.35em;
}

#sidetalk-dashboard-content .answer-content .markdown-content h2 {
	font-size: 1.25em;
}

#sidetalk-dashboard-content .answer-content .markdown-content h3 {
	font-size: 1.15em;
}

#sidetalk-dashboard-content .answer-content .markdown-content h4 {
	font-size: 1.05em;
}

#sidetalk-dashboard-content .answer-content .markdown-content h5,
#sidetalk-dashboard-content .answer-content .markdown-content h6 {
	font-size: 1em;
}

#sidetalk-dashboard-content .answer-content .markdown-content p {
	margin: 0.5em 0;
}

#sidetalk-dashboard-content .answer-content .markdown-content a {
	color: #2271b1;
	text-decoration: underline;
}

#sidetalk-dashboard-content .answer-content .markdown-content a:hover {
	text-decoration: none;
}

#sidetalk-dashboard-content .answer-content .markdown-content ul,
#sidetalk-dashboard-content .answer-content .markdown-content ol {
	padding-left: 1.4em;
	margin: 0.5em 0 0.5em 0.2em;
}

#sidetalk-dashboard-content .answer-content .markdown-content li {
	margin: 0.25em 0;
}

#sidetalk-dashboard-content .answer-content .markdown-content blockquote {
	margin: 0.8em 0;
	padding: 0.6em 0.9em;
	border-left: 3px solid #d0d7de;
	background: #f6f8fa;
	border-radius: 4px;
}

#sidetalk-dashboard-content .answer-content .markdown-content code {
	background: #f6f8fa;
	padding: 0.15em 0.35em;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.95em;
}

#sidetalk-dashboard-content .answer-content .markdown-content pre {
	padding: 0.9em 1em;
	margin: 0.6em 0;
	border-radius: 6px;
	overflow: auto;
	background: #0d1117;
	/* Fallback for when highlighter is absent */
	color: #c9d1d9;
}

#sidetalk-dashboard-content .answer-content .markdown-content pre code {
	background: transparent;
	padding: 0;
	border-radius: 0;
	font-size: 0.92em;
}

#sidetalk-dashboard-content .answer-content .markdown-content hr {
	border: 0;
	border-top: 1px solid #e5e7eb;
	margin: 1em 0;
}

#sidetalk-dashboard-content .answer-content .markdown-content table {
	border-collapse: collapse;
	width: 100%;
	margin: 0.75em 0;
}

#sidetalk-dashboard-content .answer-content .markdown-content th,
#sidetalk-dashboard-content .answer-content .markdown-content td {
	border: 1px solid #e5e7eb;
	padding: 0.45em 0.6em;
	text-align: left;
}

#sidetalk-dashboard-content .answer-content .markdown-content th {
	background: #f9fafb;
	font-weight: 600;
}

#sidetalk-dashboard-content .answer-content .markdown-content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

#previewFieldsContainer select.sidetalk-dashboard-select {
	pointer-events: none;
}

#previewFieldsContainer .radio-options-preview {
	pointer-events: none;
}

/* ==================================================
Moved from template/chat-data-update.php
- Recommended question chip styles (sidetalk_ai_selected_chips)
- Toast UI Editor toolbar spacing
Moved inline <style> content from the template to this file to reduce duplication.
================================================== */

.sidetalk_ai_selected_chips {
	position: relative;
	touch-action: none;
}

.sidetalk_ai_selected_chips .sidetalk-chip {
	user-select: none;
	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
	cursor: pointer;
	/* Pointer cursor on chips */
}

.sidetalk_ai_selected_chips .sidetalk-chip.placeholder {
	visibility: hidden;
}

.sidetalk_ai_selected_chips .sidetalk-chip.dragging {
	opacity: 0.85;
	transform: scale(1.05);
	background: #eef2ff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.sidetalk_ai_selected_chips.drag-active {
	outline: 2px dashed #94a3b8;
	outline-offset: 4px;
}

.sidetalk_ai_selected_chips .sidetalk-chip .chip-remove {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	padding: 0;
	margin-left: 2px;
	cursor: pointer;
	color: #64748b;
	transition: transform 100ms ease, background 100ms ease, color 120ms ease;
	transform: translateY(-2px);
}

.sidetalk_ai_selected_chips .sidetalk-chip .chip-remove:hover {
	color: #0f172a;
	background: #e2e8f0;
	transform: translateY(-2px) scale(1.2);
}

.toastui-editor-toolbar-item-wrapper {
	margin: 18px 5px !important;
}

/* Backwards-compatibility for templates using ID (#sidetalk_ai_selected_chips)
Some templates render the chips container with an ID instead of the
class-based container. Mirror class rules to ID selectors so both
variants share the same visuals. */

#sidetalk_ai_selected_chips,
.sidetalk_ai_selected_chips {
	position: relative;
	touch-action: none;
}

#sidetalk_ai_selected_chips .sidetalk-chip,
.sidetalk_ai_selected_chips .sidetalk-chip {
	user-select: none;
	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
	cursor: pointer;
}

#sidetalk_ai_selected_chips .sidetalk-chip.placeholder,
.sidetalk_ai_selected_chips .sidetalk-chip.placeholder {
	visibility: hidden;
}

#sidetalk_ai_selected_chips .sidetalk-chip.dragging,
.sidetalk_ai_selected_chips .sidetalk-chip.dragging {
	opacity: 0.85;
	transform: scale(1.05);
	background: #eef2ff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

#sidetalk_ai_selected_chips.drag-active,
.sidetalk_ai_selected_chips.drag-active {
	outline: 2px dashed #94a3b8;
	outline-offset: 4px;
}

#sidetalk_ai_selected_chips .sidetalk-chip .chip-remove,
.sidetalk_ai_selected_chips .sidetalk-chip .chip-remove {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	padding: 0;
	margin-left: 2px;
	cursor: pointer;
	color: #64748b;
	transition: transform 100ms ease, background 100ms ease, color 120ms ease;
	transform: translateY(-2px);
}

#sidetalk_ai_selected_chips .sidetalk-chip .chip-remove:hover,
.sidetalk_ai_selected_chips .sidetalk-chip .chip-remove:hover {
	color: #0f172a;
	background: #e2e8f0;
	transform: translateY(-2px) scale(1.2);
}

/* Chat log attached images */
.sidetalk-chat-log-images {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.sidetalk-chat-log-image-wrapper {
	display: inline-block;
	margin: 4px;
}

.sidetalk-chat-log-image-wrapper img {
	max-width: 100px;
	max-height: 100px;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid #ddd;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sidetalk-chat-log-image-wrapper img:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#sidetalk-image-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

#sidetalk-image-modal img {
	max-width: 90%;
	max-height: 90vh;
	display: block;
	margin: auto;
	animation: zoomIn 0.2s ease;
}

@keyframes zoomIn {
	from {
		transform: scale(0.8);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* Dashboard section: default 1 column (1x4) for readability */
.sidetalk-dashboard-graphs {
	display: grid !important;
	grid-template-columns: 1fr !important;
	/* Always 1 column by default */
	gap: 20px !important;
	margin-bottom: 20px !important;
}

/* Only use 2-column layout on sufficiently wide screens (1400px+) */
@media (min-width: 1400px) {
	.sidetalk-dashboard-graphs {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Individual chart box */
.sidetalk-dashboard-graphs .content-row {
	width: 100% !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	box-sizing: border-box !important;
	padding: 24px !important;
	/* Default padding portion */
}

/* Mobile padding optimization */
@media (max-width: 768px) {
	.sidetalk-dashboard-graphs .content-row {
		padding: 15px 10px !important;
	}

	.sidetalk-dashboard-filters .sidetalk-dashboard-select {
		width: 100%;
		margin-top: 8px;
	}
}

.sidetalk-dashboard-filters .sidetalk-dashboard-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	color: #333;
	font-size: 14px;
	padding: 8px 12px;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
	cursor: pointer;
	line-height: 1.2;
}

.sidetalk-dashboard-filters .sidetalk-dashboard-select:hover {
	border-color: #d0d0d0;
}

.sidetalk-dashboard-filters .sidetalk-dashboard-select:focus {
	outline: none;
	border-color: #c0c0ff;
	box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.12);
}

/* Show dropdown arrow button naturally with the styles */
.sidetalk-dashboard-filters .sidetalk-dashboard-select {
	background-image: linear-gradient(45deg, transparent 50%, #666 50%),
		linear-gradient(135deg, #666 50%, transparent 50%);
	background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 10px) calc(50% - 3px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 30px;
}

/* Selected state highlight metric card */
.sidetalk-metric-card {
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

.sidetalk-metric-card:hover {
	box-shadow: 0 3px 6px rgba(0, 0, 0, .08);
}

.sidetalk-metric-card.active {
	border-color: var(--st-primary);
	box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.12);
}

.sidetalk-dashboard-metrics#metrics-count .sidetalk-metric-card.active {
	background-color: #dbe8ff !important;
	/* Emphasize selected state by overriding default background */
}

.sidetalk-dashboard-metrics#metrics-credit .sidetalk-metric-card.active {
	background-color: #ffe6d4 !important;
	/* Emphasize selected state by overriding default background */
}

.sidetalk-metric-card.active .metric-value {
	color: #000;
}

.sidetalk-metric-card.active .metric-label {
	color: #333;
	font-weight: 600;
}

/* Graph container improvement */
.sidetalk-dashboard-graph-wrap {
	/* Strengthening class-based styles to avoid conflict with inline styles,
	to avoid conflict with existing inline styles, class-based style strengthening */
	background-color: #fff;
	padding: 24px !important;
	/* Increased padding */
	border-radius: 12px !important;
	/* Increased border radius */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
	/* Softer shadow */
	border: 1px solid #f0f0f0;
	/* Added border */
	margin-bottom: 24px !important;
}

/* Filter button styles improvement */
.sidetalk-dashboard-filters .sidetalk-dashboard-button {
	padding: 6px 5px;
	border-radius: 8px;
	font-size: 14px;
	border: 1px solid #e5e7eb;
	background-color: #fff;
	color: #6b7280;
	transition: all 0.2s;
}

.sidetalk-dashboard-filters .sidetalk-dashboard-button:hover {
	background-color: #f9fafb;
	border-color: #d1d5db;
	color: #374151;
}

.sidetalk-dashboard-filters .sidetalk-dashboard-button.active {
	background-color: #2563eb;
	/* Primary Blue */
	border-color: #2563eb;
	color: #ffffff;
}

/* Modal Styles */
.sidetalk-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	justify-content: center;
	align-items: center;
}

.sidetalk-modal-overlay.active {
	display: flex;
}

.sidetalk-modal-content-dashborad {
	background-color: #fff;
	padding: 0;
	border-radius: 16px;
	width: 90%;
	max-width: 400px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	animation: sidetalk-modal-fade-in 0.2s ease-out;
}

.sidetalk-modal-header {
	padding: 20px 24px;
	border-bottom: 1px solid #e5e7eb;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sidetalk-modal-header h3 {
	font-size: 18px;
	font-weight: 600;
	color: #111827;
	margin: 0;
}

.sidetalk-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #9ca3af;
	padding: 0;
	line-height: 1;
}

.sidetalk-modal-close:hover {
	color: #4b5563;
}

.sidetalk-modal-body {
	padding: 24px;
}

.sidetalk-date-input-group {
	margin-bottom: 16px;
}

.sidetalk-date-input-group label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #374151;
	margin-bottom: 8px;
}

.sidetalk-date-input-group input[type="date"] {
	display: block;
	width: 100% !important;
	max-width: none !important;
	min-width: 0;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 15px;
	color: #111827;
	outline: none;
	transition: border-color 0.2s;
	box-sizing: border-box;
	height: 42px;
	/* Ensure consistent height */
}

.sidetalk-date-input-group input[type="date"]:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.sidetalk-modal-footer {
	padding: 16px 24px;
	background-color: #f9fafb;
	border-top: 1px solid #e5e7eb;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

/* MOVED TO base-button.css */

/* MOVED TO base-card.css */

.shortcut-example-wrapper {
	text-align: center;
}

.custom-link-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.custom-link-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.custom-link-row {
	display: grid;
	grid-template-columns: 1fr 1fr 2fr 1fr auto;
	gap: 12px;
	align-items: flex-end;
	padding-bottom: 12px;
	border-bottom: 1px solid #f1f5f9;
}

/* When message type is selected, URL/message fields span 2 columns */
.custom-link-row.type-message {
	grid-template-columns: 1fr 1fr 3fr auto;
	/* Aligned even when target field is empty */
}

/* Adjusted so delete button bottom aligns with empty field bottom */
.custom-link-row .custom-link-remove {
	grid-column: 5;
	align-self: end;
	margin-bottom: 10px;
}

.custom-link-row.type-message .custom-link-remove {
	grid-column: 4;
}

.custom-link-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* flex/grid item overflow fix */
}

.custom-link-field-label {
	font-size: 13px;
	font-weight: 500;
	color: #475569;
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.custom-link-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

/* Reduce the custom add-button footprint without touching the global button style */
.custom-link-actions .add-button {
	min-height: 32px;
	height: auto;
	padding: 6px 12px;
	font-size: 13px;
	border-radius: 10px;
}

.custom-link-actions .add-button.disabled,
.custom-link-actions .add-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.custom-link-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	/* Match input field height */
	min-width: 60px;
	padding: 0 12px;
	font-size: 13px;
	color: #e11d48;
	background: #ffffff;
	border: 1px solid #fbd5e0;
	border-radius: 6px;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.custom-link-remove:hover {
	background: #fee2e2;
	border-color: #f87171;
	color: #be123c;
}

/* Onboarding */
body.sidetalk-onboarding-active {
	/* allow scrolling to reach focused fields */
	overflow: auto;
}

#sidetalk-onboarding-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 99990;
	pointer-events: none;
}

/* Allow only the menu to be visible: spotlight template for the highlighted area */
#sidetalk-onboarding-spotlight {
	position: fixed;
	display: none;
	border-radius: 10px;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
	z-index: 99995;
	pointer-events: none;
}

/* Step 11: Items menu highlight border radius */
#sidetalk-onboarding-spotlight.sidetalk-onboarding-spotlight-outline {
	border: 3px solid rgba(79, 70, 229, .15);
	box-sizing: border-box;
}

#sidetalk-onboarding-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 520px;
	max-width: calc(100vw - 40px);
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ededed;
	border-radius: 16px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
	z-index: 100000;
	padding: 22px;
}

/* place modal away from focused element */
#sidetalk-onboarding-modal.sidetalk-onboarding-modal-top {
	top: 116px;
	bottom: auto;
	transform: translate(-50%, 0);
}

#sidetalk-onboarding-modal.sidetalk-onboarding-modal-bottom {
	top: auto;
	bottom: 316px;
	transform: translate(-50%, 0);
}

#sidetalk-onboarding-modal.sidetalk-onboarding-modal-center {
	top: 50%;
	bottom: auto;
	transform: translate(-50%, -50%);
}

#sidetalk-onboarding-modal .sidetalk-onboarding-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

#sidetalk-onboarding-modal .sidetalk-onboarding-title {
	font-size: 22px;
	font-weight: 700;
	color: #111;
}

#sidetalk-onboarding-modal .sidetalk-onboarding-progress {
	font-size: 13px;
	font-weight: 700;
	color: #555;
	flex: 0 0 auto;
}

#sidetalk-onboarding-modal .sidetalk-onboarding-close {
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 18px;
	line-height: 18px;
	color: #555;
	padding: 6px;
}

#sidetalk-onboarding-modal .sidetalk-onboarding-body {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
	white-space: pre-line;
	overflow: auto;
	flex: 1 1 auto;
}

#sidetalk-onboarding-modal .sidetalk-onboarding-actions {
	margin-top: 18px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex: 0 0 auto;
}

#sidetalk-onboarding-modal .sidetalk-onboarding-actions .sidetalk-onboarding-primary,
#sidetalk-onboarding-modal .sidetalk-onboarding-actions .sidetalk-onboarding-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 16px;
	border-radius: 12px;
	border: 1px solid #ededed;
	background: #fff;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: #333;
}

/* Focused form row highlight */
.item-row.sidetalk-onboarding-focus-row {
	background-color: #fff;
	position: relative;
	border-radius: 5px;
	z-index: 99995;
	box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}

#sidetalk-onboarding-modal .sidetalk-onboarding-actions .sidetalk-onboarding-primary {
	background: #111;
	border-color: #111;
	color: #fff;
}

#sidetalk-onboarding-modal .sidetalk-onboarding-actions .sidetalk-onboarding-primary:disabled,
#sidetalk-onboarding-modal .sidetalk-onboarding-actions .sidetalk-onboarding-secondary:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.sidetalk-onboarding-allow {
	position: relative;
	z-index: 99995;
}

#sidetalk-dashboard-nav .nav-row ul li.item-link.sidetalk-onboarding-allow-item {
	background-color: #fff;
	position: relative;
	border-radius: 5px;
	z-index: 99995;
	box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}

/* Onboarding: highlight allowed navigation tab (e.g., #sidetalk-profile-settings) */
.sidetalk-navigation-wrap .sidetalk-navigation-btn.sidetalk-onboarding-allow {
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}

.sidetalk-text-link {
	transition: color 0.1s ease, transform 0.1s ease;
}

.sidetalk-text-link:hover {
	color: #22C55E !important;
}

.sidetalk-text-link:hover i {
	transform: translateX(3px);
	transition: transform 0.2s ease;
}

/* --- Sidetalk Premium Design System --- */
/* NOTE: Variables are consolidated into a single :root at the top of the file */

/* Glassmorphism Effect */
.sidetalk-glass {
	background: var(--st-card-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/* MOVED TO base-card.css */

/* Chart Card Specifics */
.sidetalk-dashboard-chart-card {
	padding: 24px;
	margin-bottom: 32px;
}

.card-header-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	width: 100%;
	flex-wrap: wrap;
	/* Allow title and filters to wrap if narrow */
	gap: 16px;
}

.card-header-flex .content-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--st-text-main);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.card-header-flex .content-title i {
	color: var(--st-primary);
	font-size: 20px;
}

.card-header-flex .sub-text {
	font-size: 13px;
	font-weight: 400;
	color: var(--st-text-muted);
}

/* Filters Layout */
.sidetalk-dashboard-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
	align-items: center;
}

.sidetalk-dashboard-filters .sidetalk-dashboard-button {
	padding: 6px 12px !important;
	font-size: 13px !important;
	border-radius: 8px !important;
	height: auto !important;
	min-width: auto !important;
}

/* Buttons */
.sidetalk-btn-link {
	text-decoration: none !important;
	font-size: 13px !important;
	color: var(--st-text-muted) !important;
	font-weight: 500 !important;
	padding: 6px 12px !important;
	border-radius: 8px !important;
	transition: all 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	background: #f1f5f9 !important;
}

.sidetalk-btn-link:hover {
	color: var(--st-primary) !important;
	background: var(--st-primary-light) !important;
}

/* Live Indicator */
.live-indicator {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: var(--st-success);
	border-radius: 50%;
	margin-right: 8px;
	position: relative;
}

.live-indicator::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--st-success);
	border-radius: 50%;
	animation: st-pulse 2s infinite;
}

@keyframes st-pulse {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(3);
		opacity: 0;
	}
}

/* MOVED TO base-button.css */

/* Analytics Grid Layout */
.sidetalk-dashboard-graphs {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 24px !important;
}

/* Metric Cards Section */
.sidetalk-dashboard-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px dashed #e2e8f0;
}

.sidetalk-metric-card {
	background: #f8fafc !important;
	padding: 16px !important;
	text-align: center;
	border: 1px solid #f1f5f9 !important;
	border-radius: 12px !important;
	transition: all 0.2s ease !important;
	cursor: default;
}

.sidetalk-metric-card:hover {
	background: #fff !important;
	border-color: var(--st-primary) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(0, 176, 237, 0.1) !important;
}

.sidetalk-metric-card .metric-value {
	font-size: 24px;
	font-weight: 800;
	color: var(--st-text-main);
	line-height: 1.2;
}

.sidetalk-metric-card .metric-label {
	font-size: 11px;
	color: var(--st-text-muted);
	font-weight: 500;
	margin-top: 4px;
	display: inline-block;
	word-break: keep-all;
}

/* Donut Chart Legend Styling */
.sidetalk-donut-legend {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
}

.sidetalk-legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--st-text-main);
	font-weight: 500;
}

.sidetalk-legend-color {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	flex-shrink: 0;
}

/* Donut Chart Center Text Refinement */
.chart-container {
	position: relative;
	min-height: 250px;
}

.sidetalk-donut-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
}

.sidetalk-donut-canvas-wrapper {
	position: relative;
	flex: 1;
	min-width: 200px;
	max-width: 300px;
}


/* --- End Sidetalk Premium Design System --- */

/* Sidebar dashboard card button styles */
.sidetalk-dashboard-card-button {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 5px;
	font-size: 13px;
	cursor: pointer;
	border: 1px solid #ddd;
	background: #fff;
	color: #333;
	border-radius: var(--st-radius-xl);
	/* Slightly rounded */
	box-sizing: border-box;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

.sidetalk-dashboard-card-button:hover {
	background-color: #f5f5f5;
	text-decoration: none;
	color: #333;
}


.sidetalk-dashboard-card-button.add {
	background-color: rgba(0, 176, 237, 0.1);
	border: 1px solid var(--st-primary-light);
	color: var(--st-primary);
}

.sidetalk-dashboard-card-button.add:hover {
	background-color: var(--st-primary);
	border-color: var(--st-primary);
	color: var(--st-text-inverse);
}

.sidetalk-dashboard-card-button i {
	margin-right: 4px;
	font-size: 14px;
}




/* Sidebar banner slider 2026 design styles */
.sidetalk-banner-slider {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999999;
	margin: 0;
	width: 100%;
	height: 44px;
	overflow: hidden;
	background-color: #f8f9fa;
	/* Fallback */
	font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	animation: sidetalkBannerDropIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	/* Transition added */
}

/* When banner is dismissed via slide up */
body:not(.sidetalk-has-banner) .sidetalk-banner-slider {
	transform: translateY(-100%) !important;
}

.admin-bar .sidetalk-banner-slider {
	top: 32px;
}

@keyframes sidetalkBannerDropIn {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.sidetalk-banner-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-weight: 600;
	font-size: 14.5px;
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
	/* subtle premium gradient overlay on top of the dynamic background color */
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sidetalk-banner-item.active {
	opacity: 1;
	z-index: 2;
}

.sidetalk-banner-item:hover {
	filter: brightness(1.05);
	text-decoration: none;
}

/* Close button 2026 design (Glassmorphism) */
.sidetalk-banner-close-container {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
}

.sidetalk-banner-close {
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	padding: 6px 12px;
	border-radius: 20px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
	backdrop-filter: blur(4px);
}


/* MOVED TO base-layout.css */

/* Card limit warning UI styles */
.sidetalk-dashboard-warning-banner {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
	border: 1px solid #fecdd3;
	border-radius: 12px;
	padding: 16px 24px;
	margin-bottom: 24px;
	box-shadow: 0 4px 6px -1px rgba(225, 29, 72, 0.05);
	animation: sidetalkFadeInDown 0.5s ease-out;
}

.sidetalk-dashboard-warning-banner .warning-icon {
	font-size: 24px;
	color: #e11d48;
	margin-right: 16px;
	flex-shrink: 0;
}

.sidetalk-dashboard-warning-banner .warning-text {
	flex-grow: 1;
	color: #4b5563;
	font-size: 14px;
	line-height: 1.5;
}

.sidetalk-dashboard-warning-banner .warning-text strong {
	color: #be123c;
	font-size: 16px;
}

.sidetalk-dashboard-warning-banner .warning-action {
	margin-left: 16px;
}

.sidetalk-dashboard-warning-banner .warning-btn {
	background: #e11d48 !important;
	color: #fff !important;
	border: none !important;
	padding: 10px 20px !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(225, 29, 72, 0.2) !important;
	transition: all 0.2s ease !important;
}

.sidetalk-dashboard-warning-banner .warning-btn:hover {
	background: #be123c !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(225, 29, 72, 0.3) !important;
}

/* Floating nudge button */
.sidetalk-floating-nudge {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 99999;
}

.sidetalk-floating-nudge .nudge-button {
	display: flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
	color: #fff !important;
	padding: 14px 24px;
	border-radius: 50px;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 10px 25px rgba(225, 29, 72, 0.4);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sidetalk-floating-nudge .nudge-button:hover {
	transform: scale(1.05) translateY(-5px);
	box-shadow: 0 15px 35px rgba(225, 29, 72, 0.5);
}

.sidetalk-floating-nudge .nudge-button i {
	font-size: 20px;
}

@keyframes pulsing {
	0% {
		box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7);
	}

	70% {
		box-shadow: 0 0 0 15px rgba(225, 29, 72, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(225, 29, 72, 0);
	}
}

.pulsing {
	animation: pulsing 2s infinite;
}

@keyframes sidetalkFadeInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 768px) {
	.sidetalk-dashboard-warning-banner {
		flex-direction: column;
		text-align: center;
		padding: 20px;
	}

	.sidetalk-dashboard-warning-banner .warning-icon {
		margin-right: 0;
		margin-bottom: 12px;
	}

	.sidetalk-dashboard-warning-banner .warning-action {
		margin-left: 0;
		margin-top: 16px;
		width: 100%;
	}

	.sidetalk-dashboard-warning-banner .warning-btn {
		width: 100%;
	}

	.sidetalk-floating-nudge {
		bottom: 20px;
		right: 20px;
	}

	.sidetalk-floating-nudge .nudge-button span {
		display: none;
	}

	.sidetalk-floating-nudge .nudge-button {
		padding: 16px;
		border-radius: 50%;
	}
}

/* ========================================
   Danger Zone - Site Delete Section
   ======================================== */
.sidetalk-danger-zone {
	border: 1px solid #f85149;
	border-radius: 0.75rem;
	background: #fff;
	overflow: hidden;
}

.sidetalk-danger-zone-header {
	display: flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
	color: #cf222e;
	padding: 12px 16px;
	border-bottom: 1px solid #f85149;
	font-size: 14px;
	font-weight: 600;
}

.sidetalk-danger-zone-header svg {
	flex-shrink: 0;
}

.sidetalk-danger-zone-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	gap: 24px;
}

.sidetalk-danger-zone-info h4 {
	margin: 0 0 6px 0;
	padding-left: 0;
	font-size: 14px;
	font-weight: 600;
	color: #1f2328;
}

.sidetalk-danger-zone-info p {
	margin: 0;
	color: #656d76;
	font-size: 13px;
	line-height: 1.5;
}

.sidetalk-danger-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #f85149;
	color: #cf222e;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}

.sidetalk-danger-btn:hover {
	background: #cf222e;
	border-color: #cf222e;
	color: #fff;
}

.sidetalk-danger-btn:active {
	background: #a40e26;
	border-color: #a40e26;
}

.sidetalk-danger-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.sidetalk-danger-btn--filled {
	background: #cf222e;
	border-color: #cf222e;
	color: #fff;
}

.sidetalk-danger-btn--filled:hover {
	background: #a40e26;
	border-color: #a40e26;
}

.sidetalk-danger-btn--filled:disabled {
	background: #f85149;
	border-color: #f85149;
	opacity: 0.4;
}

/* Delete Confirmation Modal */
.sidetalk-delete-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(27, 31, 36, 0.5);
	z-index: 100000;
	display: none;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(2px);
	animation: sidetalk-modal-fade-in 0.15s ease;
}

.sidetalk-delete-modal {
	background: #fff;
	border-radius: 12px;
	max-width: 400px;
	width: 90%;
	box-shadow: 0 8px 32px rgba(27, 31, 36, 0.15), 0 0 0 1px rgba(27, 31, 36, 0.1);
	animation: sidetalk-modal-slide-up 0.2s ease;
	overflow: hidden;
}

.sidetalk-delete-modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 24px 16px;
	border-bottom: 1px solid #d0d7de;
}

.sidetalk-delete-modal-header svg {
	color: #cf222e;
	flex-shrink: 0;
}

.sidetalk-delete-modal-header h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1f2328;
}

.sidetalk-delete-modal-body {
	padding: 20px 24px;
}

.sidetalk-delete-modal-body>p {
	margin: 0 0 16px 0;
	font-size: 14px;
	color: #1f2328;
	line-height: 1.5;
}

.sidetalk-delete-warning-box {
	background: #fff5f5;
	border: 1px solid #f85149;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 20px;
}

.sidetalk-delete-warning-box ul {
	margin: 0 !important;
	padding: 0;
	list-style: disc !important;
}

.sidetalk-delete-warning-box li {
	color: #cf222e;
	font-size: 13px;
	margin-bottom: 6px;
	line-height: 1.4;
}

.sidetalk-delete-warning-box li:last-child {
	margin-bottom: 0;
}

.sidetalk-delete-confirm-label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	color: #1f2328;
}

.sidetalk-delete-confirm-label strong {
	background: #f6f8fa;
	padding: 2px 8px;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
	color: #cf222e;
	border: 1px solid #d0d7de;
}

.sidetalk-delete-modal .sidetalk-delete-confirm-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d0d7de;
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sidetalk-delete-modal .sidetalk-delete-confirm-input:focus {
	outline: none;
	border-color: #0969da;
	box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
}

.sidetalk-delete-modal .sidetalk-delete-confirm-input::placeholder {
	color: #8c959f;
}

.sidetalk-delete-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	padding: 16px 24px 20px;
	background: #f6f8fa;
	border-top: 1px solid #d0d7de;
}

.sidetalk-cancel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #d0d7de;
	color: #1f2328;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}

.sidetalk-cancel-btn:hover {
	background: #f6f8fa;
	border-color: #8c959f;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.sidetalk-danger-zone-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.sidetalk-danger-btn {
		width: 100%;
	}

	.sidetalk-delete-modal {
		width: 95%;
		margin: 16px;
	}

	.sidetalk-delete-modal-footer {
		flex-direction: column;
	}

	.sidetalk-delete-modal-footer button {
		width: 100%;
	}
}

/* ========================================
   Plan Change Highlight Guide
   ======================================== */
.sidetalk-highlight-guide {
	position: relative;
	z-index: 10;
	box-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
	border: 2px solid #f59e0b !important;
}

.sidetalk-highlight-guide::before {
	content: "";
	position: absolute;
	top: -45px;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 32px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'%3E%3Cpath d='M11 4v12.586l-4.293-4.293-1.414 1.414L12 20.414l6.707-6.707-1.414-1.414L13 16.586V4h-2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	animation: sidetalk-arrow-bounce 0.8s infinite alternate;
	pointer-events: none;
}

@keyframes sidetalk-arrow-bounce {
	from {
		transform: translateX(-50%) translateY(0);
	}

	to {
		transform: translateX(-50%) translateY(-10px);
	}
}

/* ========================================
   Plan Table Badges
   ======================================== */
.plan-cell-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

/* MOVED TO base-card.css */

/* ========================================
   Plan Modal Header (plan-modal specific styles - based on sidetalk-form-modal)
   ======================================== */
.plan-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 24px 24px 8px;
}

.plan-modal__title-area {
	flex: 1;
}

.plan-modal__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: #18181B;
	letter-spacing: -0.03em;
	line-height: 1.3;
}

.plan-modal__subtitle {
	margin: 4px 0 0;
	font-size: 14px;
	color: #71717A;
	font-weight: 400;
}

.plan-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: -4px -8px 0 0;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 10px;
	color: #A1A1AA;
	cursor: pointer;
	transition: all 0.15s ease;
}

.plan-modal__close:hover {
	background: #F4F4F5;
	color: #52525B;
}

/* ========================================
   Plan Modal Current Info
   ======================================== */
.plan-modal__current {
	margin: 0 0 16px;
	padding: 16px 20px;
	background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
	border-radius: var(--st-radius-xl);
	border: 1px solid #E2E8F0;
}

.plan-modal__current-label {
	font-size: 12px;
	font-weight: 500;
	color: #64748B;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

.plan-modal__current-value {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.plan-modal__current-name {
	font-size: 20px;
	font-weight: 700;
	color: #1E293B;
	letter-spacing: -0.02em;
}

.plan-modal__current-credit {
	font-size: 14px;
	color: #64748B;
	font-weight: 500;
}

.plan-modal__billing {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #E2E8F0;
}

.plan-modal__billing-label {
	font-size: 13px;
	color: #94A3B8;
}

.plan-modal__billing-date {
	font-size: 13px;
	color: #475569;
	font-weight: 600;
}

/* ========================================
   Plan Modal Current Benefits
   ======================================== */
.plan-modal__current-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0;
	animation: benefitsIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes benefitsIn {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.current-benefit-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(16, 185, 129, 0.3);
	border-radius: 8px;
	font-size: 13px;
}

.current-benefit-label {
	color: #374151;
	font-weight: 500;
}

.current-benefit-value {
	color: #047857;
	font-weight: 700;
}

/* ========================================
   Plan Modal Upgrade/Downgrade States
   ======================================== */
.plan-modal__current.is-upgrade {
	background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
	border-color: #10B981;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.plan-modal__current.is-downgrade {
	background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
	border-color: #FB923C;
	box-shadow: 0 4px 12px rgba(251, 146, 60, 0.15);
}

.plan-modal__current.is-upgrade .plan-modal__current-label {
	color: #047857;
	font-weight: 700;
}

.plan-modal__current.is-downgrade .plan-modal__current-label {
	color: #B45309;
	font-weight: 700;
}

.plan-modal__current.is-upgrade .plan-modal__billing {
	border-top-color: rgba(16, 185, 129, 0.3);
}

.plan-modal__current.is-downgrade .plan-modal__billing {
	border-top-color: rgba(251, 146, 60, 0.3);
}

.plan-upgrade-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.plan-upgrade-benefit {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: rgba(16, 185, 129, 0.15);
	border-radius: 8px;
	border: 1px solid rgba(16, 185, 129, 0.25);
}

.plan-downgrade-info {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 6px 12px;
	background: rgba(251, 146, 60, 0.15);
	border-radius: 8px;
	border: 1px solid rgba(251, 146, 60, 0.25);
}

/* ========================================
   Plan Card Options
   ======================================== */
.plan-modal__options {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 280px;
	overflow-y: auto;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE/Edge */
}

.plan-modal__options::-webkit-scrollbar {
	display: none;
	/* Chrome, Safari, Opera */
}

.plan-card {
	display: block;
	cursor: pointer;
	animation: planCardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes planCardIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.plan-card__radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.plan-card__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: #FFFFFF;
	border: 2px solid #E4E4E7;
	border-radius: var(--st-radius-xl);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.plan-card:hover .plan-card__inner {
	border-color: #A1A1AA;
	background: #FAFAFA;
}

.plan-card__radio:checked~.plan-card__inner {
	border-color: #00b0ed;
	background: #e0f7ff;
	box-shadow: 0 0 0 4px rgba(0, 176, 237, 0.1);
}

.plan-card.is-current .plan-card__inner {
	border-color: #00b0ed;
	background: #e0f7ff;
}

.plan-card__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: #D4D4D8;
	transition: all 0.2s ease;
}

.plan-card__check-mark {
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.2s ease;
}

.plan-card__radio:checked~.plan-card__inner .plan-card__check {
	color: #00b0ed;
}

.plan-card__radio:checked~.plan-card__inner .plan-card__check-mark {
	opacity: 1;
	transform: scale(1);
}

.plan-card__content {
	flex: 0.6;
	min-width: 0;
}

.plan-card__header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 4px;
}

.plan-card__name {
	font-size: 16px;
	font-weight: 600;
	color: #18181B;
	letter-spacing: -0.01em;
}

.plan-card__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.plan-card__badge--current {
	background: #00b0ed;
	color: #FFFFFF;
}

.plan-card__badge--pending {
	background: #FEF3C7;
	color: #B45309;
}

.plan-card__badge--upgrade {
	background: #D1FAE5;
	color: #047857;
}

.plan-card__badge--downgrade {
	background: #FEE2E2;
	color: #DC2626;
}

.plan-card.is-disabled {
	pointer-events: none;
	opacity: 0.5;
}

.plan-card.is-disabled .plan-card__inner {
	border-color: #E4E4E7;
	background: #F4F4F5;
}

.plan-card__insufficient {
	font-size: 12px;
	color: #fff;
	margin-top: 4px;
	position: absolute;
	width: 80%;
	left: 50%;
	translate: -50% 0;
	text-align: center;
	padding: 16px;
	background: #000000bd;
	border-radius: 12px;
}

.plan-card__credit {
	font-size: 13px;
	color: #71717A;
	font-weight: 400;
}

.plan-card__credit span {
	color: #A1A1AA;
}

.plan-card__price {
	flex: 1;
	font-size: 18px;
	font-weight: 700;
	color: #18181B;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.plan-card__price span {
	font-size: 13px;
	font-weight: 500;
	color: #71717A;
}

.plan-card__vat {
	font-size: 11px;
	font-weight: 400;
	color: #A1A1AA;
	margin-top: 2px;
}

.plan-card__price-with-vat {
	font-size: 12px;
	font-weight: 500;
	color: #aaaaaa;
	margin-top: 2px;
}

.plan-card__prorated {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed #e5e7eb;
}

.plan-card__prorated-credit {
	font-size: 12px;
	font-weight: 500;
	color: #d97706;
}

.plan-card__prorated-price {
	font-size: 12px;
	font-weight: 500;
	color: var(--st-primary);
	margin-top: 4px;
}

.plan-card__prorated-vat {
	font-size: 10px;
	color: #6b7280;
	margin-left: 2px;
}

.plan-card__prorated-badge {
	display: inline-block;
	background: #fef3c7;
	color: #92400e;
	font-size: 10px;
	padding: 1px 6px;
	border-radius: 4px;
	margin-left: 4px;
	font-weight: 600;
}

/* ========================================
   Plan Notice
   ======================================== */
.plan-modal__notice {
	margin: 16px 24px 0;
}

.plan-notice {
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	animation: noticeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes noticeIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.plan-notice--upgrade {
	background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
	border: 1px solid #A7F3D0;
}

.plan-notice--downgrade {
	background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
	border: 1px solid #FDE68A;
}

.plan-notice__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 8px;
}

.plan-notice--upgrade .plan-notice__icon {
	background: #10B981;
	color: #FFFFFF;
}

.plan-notice--downgrade .plan-notice__icon {
	background: #F59E0B;
	color: #FFFFFF;
}

.plan-notice__content {
	flex: 1;
	min-width: 0;
}

.plan-notice__title {
	font-size: 14px;
	font-weight: 600;
	color: #18181B;
	margin-bottom: 2px;
}

.plan-notice__desc {
	font-size: 13px;
	color: #52525B;
	line-height: 1.5;
}

.plan-notice__detail {
	margin-top: 6px;
	font-size: 12px;
	color: #71717A;
}

.plan-notice__detail strong {
	color: #18181B;
	font-weight: 600;
}

/* ========================================
   Plan Modal Actions
   ======================================== */
.plan-modal__actions {
	display: flex;
	gap: 10px;
	padding: 20px 24px 24px;
}

.plan-modal__btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 56px;
	padding: 12px 32px;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

.plan-modal__btn--secondary {
	background: #F4F4F5;
	color: #52525B;
}

.plan-modal__btn--secondary:hover {
	background: #E4E4E7;
}

.plan-modal__btn--primary {
	background: linear-gradient(135deg, #00b0ed 0%, #008cd2 100%);
	color: #FFFFFF;
	box-shadow: 0 4px 14px rgba(0, 176, 237, 0.4);
}

.plan-modal__btn--primary:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(0, 176, 237, 0.5);
}

.plan-modal__btn--primary:disabled {
	background: #E4E4E7;
	color: #A1A1AA;
	box-shadow: none;
	cursor: not-allowed;
}

.plan-modal__btn--warning {
	background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
	color: #FFFFFF;
	box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

.plan-modal__btn--warning:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

.plan-modal__btn-loader {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: btnSpin 0.8s linear infinite;
}

@keyframes btnSpin {
	to {
		transform: rotate(360deg);
	}
}

.plan-modal__btn.is-loading .plan-modal__btn-text {
	opacity: 0;
}

.plan-modal__btn.is-loading .plan-modal__btn-loader {
	display: block;
	position: absolute;
}

.plan-modal__btn.is-success {
	background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
	box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
}

/* ========================================
   Plan Modal Loading
   ======================================== */
.plan-modal__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 0;
}

.plan-modal__spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #E4E4E7;
	border-top-color: #00b0ed;
	border-radius: 50%;
	animation: btnSpin 0.8s linear infinite;
}

/* ========================================
   Plan Modal Agreement
   ======================================== */
.plan-modal__agreement {
	margin: 16px 0;
	padding: 12px 16px;
	background: #F8FAFC;
	border-radius: var(--st-radius-xl);
	border: 1px solid #E2E8F0;
}

.agreement-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.agreement-label input[type="checkbox"] {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.agreement-text {
	font-size: 13px;
	color: #475569;
	line-height: 1.5;
}

.agreement-text a {
	color: #00b0ed;
	text-decoration: underline;
	margin-left: 4px;
}

/* ========================================
   Plan Modal Responsive
   ======================================== */
@media (max-width: 768px) {
	.plan-modal {
		padding: 0;
		align-items: flex-end;
	}

	.plan-modal__container {
		max-width: 100%;
		max-height: 90vh;
	}

	.plan-modal__sheet {
		border-radius: 24px 24px 0 0;
		transform: translateY(100%);
	}

	.plan-modal__sheet.is-open {
		transform: translateY(0);
	}

	.plan-modal__options {
		max-height: 240px;
	}

	.plan-card__inner {
		padding: 14px 16px;
	}

	.plan-card__price {
		font-size: 16px;
	}
}

/* ========================================
   Plan Change Preview
   ======================================== */
.plan-change-preview {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	background: #FFFFFF;
	border-radius: 14px;
	border: 2px solid;
	animation: planPreviewIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

@keyframes planPreviewIn {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.plan-change-preview--upgrade {
	border-color: #10B981;
	background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
}

.plan-change-preview--downgrade {
	border-color: #FB923C;
	background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
}

.plan-change-preview__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 10px;
}

.plan-change-preview--upgrade .plan-change-preview__icon {
	background: linear-gradient(135deg, #10B981 0%, #059669 100%);
	color: #FFFFFF;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.plan-change-preview--downgrade .plan-change-preview__icon {
	background: linear-gradient(135deg, #FB923C 0%, #F97316 100%);
	color: #FFFFFF;
	box-shadow: 0 4px 12px rgba(251, 146, 60, 0.3);
}

.plan-change-preview__badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 6px;
	letter-spacing: 0.02em;
}

.plan-change-preview--upgrade .plan-change-preview__badge {
	background: #D1FAE5;
	color: #047857;
}

.plan-change-preview--downgrade .plan-change-preview__badge {
	background: #FEF3C7;
	color: #B45309;
}

.plan-change-preview__content {
	flex: 1;
	min-width: 0;
}

.plan-change-preview__plans {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.plan-change-preview__from {
	font-size: 15px;
	font-weight: 600;
	color: #64748B;
}

.plan-change-preview__to {
	font-size: 15px;
	font-weight: 700;
	color: #1E293B;
}

.plan-change-preview__arrow {
	color: #94A3B8;
}

.plan-change-preview--upgrade .plan-change-preview__to {
	color: #008cd2;
}

.plan-change-preview--downgrade .plan-change-preview__to {
	color: #C2410C;
}

.plan-change-preview__benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.plan-change-preview__benefit {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: rgba(16, 185, 129, 0.15);
	border-radius: 8px;
	border: 1px solid rgba(16, 185, 129, 0.25);
}

.benefit-label {
	font-size: 12px;
	color: #475569;
	font-weight: 500;
}

.benefit-value {
	font-size: 14px;
	color: #047857;
	font-weight: 700;
}

.plan-change-preview__info {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: rgba(251, 146, 60, 0.15);
	border-radius: 8px;
	border: 1px solid rgba(251, 146, 60, 0.25);
}

.info-label {
	font-size: 12px;
	color: #475569;
	font-weight: 500;
}

.info-value {
	font-size: 13px;
	color: #C2410C;
	font-weight: 700;
}

/* ========================================
   Plan Compatibility Styles
   ======================================== */
.plan-arrow {
	color: #94A3B8;
	margin: 0 6px;
	font-weight: 600;
}

.plan-modal__current-additional-credit {
	margin-top: 8px;
	padding: 8px 12px;
	background: rgba(0, 176, 237, 0.1);
	border-radius: 8px;
	border: 1px solid rgba(0, 176, 237, 0.2);
}

.plan-modal__current-additional-credit .credit-label {
	display: block;
	font-size: 12px;
	color: #64748B;
	font-weight: 500;
	margin-bottom: 4px;
}

.plan-modal__current-additional-credit .credit-value {
	display: block;
	font-size: 18px;
	color: #00b0ed;
	font-weight: 700;
}

.plan-modal__current-downgrade-info {
	margin-top: 8px;
	padding: 8px 12px;
	background: rgba(251, 146, 60, 0.1);
	border-radius: 8px;
	border: 1px solid rgba(251, 146, 60, 0.2);
}

.plan-modal__current-downgrade-info .downgrade-label {
	display: block;
	font-size: 12px;
	color: #64748B;
	font-weight: 500;
	margin-bottom: 4px;
}

.plan-modal__current-downgrade-info .downgrade-date {
	display: block;
	font-size: 14px;
	color: #FB923C;
	font-weight: 600;
}

/* ========================================
   Selected Plan Details
   ======================================== */
.plan-modal__selected-details {
	margin: 0 24px 16px;
	animation: detailsIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes detailsIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.selected-details-box {
	background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
	border: 1px solid #10B981;
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

.selected-details-title {
	font-size: 13px;
	font-weight: 600;
	color: #047857;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.selected-details-title::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #10B981;
	border-radius: 50%;
}

.selected-details-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.selected-benefit-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 8px;
	border: 1px solid rgba(16, 185, 129, 0.3);
	flex: 1;
	min-width: 140px;
}

.selected-benefit-label {
	font-size: 12px;
	color: #374151;
	font-weight: 500;
}

.selected-benefit-value {
	font-size: 14px;
	color: #047857;
	font-weight: 700;
	margin-left: auto;
}

/* ========================================
   Card Registration Form
   ======================================== */
.card-register-form {
	padding: 0;
}

.card-register-form .card-form__field {
	margin-bottom: 16px;
}

.card-register-form .card-form__label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 6px;
}

.card-register-form .card-form__label .required {
	color: #EF4444;
}

.card-register-form .card-form__input {
	width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	border: 1px solid #D1D5DB;
	border-radius: 12px;
	background: #FFFFFF;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

.card-register-form .card-form__input:focus {
	outline: none;
	border-color: #6366F1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.card-register-form .card-form__input--small {
	width: 80px;
}

.card-register-form .card-form__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.card-register-form .card-form__select {
	padding: 12px 14px;
	font-size: 15px;
	border: 1px solid #D1D5DB;
	border-radius: 12px;
	background: #FFFFFF;
	cursor: pointer;
	min-width: 80px;
}

.card-register-form .card-form__select:focus {
	outline: none;
	border-color: #6366F1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.card-register-form .card-form__separator {
	color: #9CA3AF;
	font-size: 16px;
}

.card-register-form .card-form__hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: #9CA3AF;
}

.card-register-form .card-form__agreement {
	margin: 20px 0;
	padding: 16px;
	background: #F9FAFB;
	border-radius: 12px;
}

.card-register-form .card-form__agreement .agreement-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.card-register-form .card-form__agreement input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex-shrink: 0;
	cursor: pointer;
}

.card-register-form .card-form__agreement .agreement-text {
	font-size: 14px;
	color: #374151;
	line-height: 1.5;
}

.card-register-form .card-form__actions {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

@media (max-width: 768px) {
	.card-register-form .card-form__actions {
		flex-direction: column;
	}
}

.card-register-form .card-form__error {
	padding: 12px 16px;
	margin-bottom: 16px;
	background: #FEF2F2;
	border: 1px solid #FECACA;
	border-radius: 12px;
	color: #DC2626;
	font-size: 14px;
	display: none;
}

.card-register-form .card-form__success {
	padding: 12px 16px;
	margin-bottom: 16px;
	background: #F0FDF4;
	border: 1px solid #BBF7D0;
	border-radius: 12px;
	color: #16A34A;
	font-size: 14px;
	display: none;
}

/* ===== Plan Select (add-site.php) ===== */
.plan-select-wrap {
	display: flex;
	gap: var(--st-space-3);
	flex-wrap: wrap;
	margin-top: var(--st-space-2);
}

.plan-option {
	cursor: pointer;
	flex: 1;
	min-width: 140px;
	max-width: 180px;
}

.plan-option input[type="radio"] {
	display: none;
}

.plan-option:hover .plan-card {
	border-color: var(--st-primary);
	box-shadow: 0 4px 12px rgba(0, 176, 237, 0.15);
}

.plan-option input[type="radio"]:checked+.plan-card {
	border-color: var(--st-primary);
	box-shadow: 0 4px 12px rgba(0, 176, 237, 0.2);
}

.plan-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--st-text-primary);
	margin-bottom: var(--st-space-2);
}

.plan-price {
	font-size: 18px;
	font-weight: 600;
	color: var(--st-primary);
	margin-bottom: var(--st-space-2);
}

.plan-credit {
	font-size: var(--st-font-size-sm);
	color: var(--st-text-muted);
}

.plan-price-vat {
	font-size: 12px;
	font-weight: 400;
	color: var(--st-text-lightest);
	margin-top: 2px;
}

.plan-option.disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.plan-option.disabled .plan-card {
	background: var(--st-bg-secondary);
	border-color: var(--st-border-lighter);
}

.plan-option.disabled:hover .plan-card {
	border-color: var(--st-border-lighter);
	box-shadow: none;
}

.plan-disabled-notice {
	font-size: var(--st-font-size-xs);
	color: var(--st-danger);
	margin-top: var(--st-space-2);
	font-weight: 600;
}

.plan-prorated-info {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dashed var(--st-border);
}

.plan-prorated-info .prorated-row {
	font-size: 12px;
	font-weight: 500;
}

.plan-prorated-info .prorated-row.credit {
	color: var(--st-warning-hover);
}

.plan-prorated-info .prorated-row.price {
	color: var(--st-primary);
	margin-top: var(--st-space-1);
}

.plan-prorated-info .prorated-vat {
	font-size: 10px;
	color: var(--st-text-muted);
	margin-left: 2px;
}

.prorated-badge {
	display: inline-block;
	background: var(--st-warning-light);
	color: #92400e;
	font-size: 10px;
	padding: 1px 6px;
	border-radius: var(--st-radius-xs);
	margin-left: var(--st-space-1);
	font-weight: 600;
}

/* ===== Chat Data List (chat-data-list.php) ===== */
/* Markdown ?��?지 ?��???*/
.answer-content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 8px auto;
}

/* 코드 블록 가?�성 */
.answer-content pre code {
	white-space: pre-wrap;
	word-break: break-word;
}

/* �??�르�???깔끔?�게 */
.answer-content {
	overflow: visible;
}

/* ?��?지 ?��? ?��???*/
.sidetalk-image-wrapper {
	display: block;
	text-align: inherit;
	margin: 8px 0;
}

.sidetalk-image-toggle {
	cursor: pointer;
	display: inline-block;
	padding: 6px 10px;
	border-radius: var(--st-radius-xs);
	background: var(--st-primary);
	color: var(--st-text-inverse);
	border: none;
	font-size: var(--st-font-size-sm);
	margin-bottom: 6px;
}

.sidetalk-image-content {
	margin-top: 8px;
}

.sidetalk-image-content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	max-height: 360px;
	object-fit: contain;
	border-radius: 6px;
}

@media (max-width: 600px) {
	.sidetalk-image-content img {
		max-height: 240px;
	}
}

/* ===== Site Dashboard (site-dashboard.php) ===== */
/* ?�?�보??버튼 ?�버?�이??*/
.site-dashboard .sidetalk-dashboard-button {
	border: 1px solid var(--st-border);
	background: var(--st-bg-primary);
	color: var(--st-text-dark);
	padding: 8px 12px;
	border-radius: 10px;
	box-shadow: var(--st-shadow-sm);
	transition: background-color var(--st-transition-fast), border-color var(--st-transition-fast), color var(--st-transition-fast);
}

.site-dashboard .sidetalk-dashboard-button:hover {
	border-color: var(--st-border-lighter);
}

.site-dashboard .sidetalk-dashboard-button.active {
	background: var(--st-primary);
	border-color: var(--st-primary);
	color: var(--st-text-inverse);
}

/* ?�레??카드 경고/?�험 ?��???*/
.sidetalk-card.warning {
	border-color: #f97316 !important;
	background-color: #fff7ed !important;
}

.sidetalk-card.warning .sidetalk-card-header,
.sidetalk-card.warning .sidetalk-card-body span,
.sidetalk-card.warning i {
	color: #c2410c !important;
}

.sidetalk-card.critical {
	border-color: var(--st-danger) !important;
	background-color: var(--st-danger-light) !important;
}

.sidetalk-card.critical .sidetalk-card-header,
.sidetalk-card.critical .sidetalk-card-body span,
.sidetalk-card.critical i {
	color: #b91c1c !important;
}

/* ===== Scenario Setting Chips (scenario-setting.php) ===== */
/* 추천 질문 chips ?�래�??�각 ?�과 */
#faq_ai_selected_chips .sidetalk-chip {
	user-select: none;
	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
	will-change: transform;
	font-size: 14px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}

#faq_ai_selected_chips {
	position: relative;
}

#faq_ai_selected_chips .sidetalk-chip.placeholder {
	visibility: hidden;
}

#faq_ai_selected_chips .sidetalk-chip.dragging {
	opacity: 0.85;
	transform: scale(1.05);
	background: #eef2ff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

#faq_ai_selected_chips.drag-active {
	outline: 2px dashed #94a3b8;
	outline-offset: 4px;
}

#faq_ai_selected_chips .sidetalk-chip.drop-target {
	outline: 2px dashed #60a5fa;
}

/* �???�� 버튼(X) ?�기/?�치 ?�역 강화 */
#faq_ai_selected_chips .sidetalk-chip .chip-remove {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	padding: 0;
	margin-left: 2px;
	cursor: pointer;
	color: #64748b;
	transition: transform 100ms ease, background 100ms ease, color 120ms ease;
	transform: translateY(-2px);
}

#faq_ai_selected_chips .sidetalk-chip .chip-remove:hover {
	color: #0f172a;
	background: #e2e8f0;
	transform: translateY(-2px) scale(1.2);
}

/* ===== Form Builder Responsive (forms.php) ===== */
@media (max-width: 1024px) {
	.sidetalk-navigation-wrap {
		gap: 8px;
		flex-wrap: wrap;
	}
}

@media (max-width: 768px) {
	.title-container {
		flex-direction: column;
		gap: 8px;
	}

	.title-left-wrap {
		margin-bottom: 6px;
	}

	.settings-btn-wrap {
		align-self: stretch;
	}

	#forms-edit-tabs.sidetalk-navigation-wrap {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	#forms-edit-tabs .sidetalk-navigation-btn {
		flex: 1 1 calc(50% - 8px);
	}

	.step-navigation {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.step-navigation .step-item {
		margin: 0;
	}

	#previewContainer {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#previewFieldsContainer .preview-field {
		padding: 10px;
	}

	.custom-side-panel .custom-side-panel-content {
		width: 100vw !important;
		max-width: 100vw !important;
		height: 100vh;
		border-radius: 12px 12px 0 0;
	}

	.dynamic-position.is-floating {
		position: static !important;
		margin-top: 12px;
		left: 0 !important;
		width: 100% !important;
	}
}

@media (max-width: 480px) {
	#forms-edit-tabs .sidetalk-navigation-btn {
		flex: 1 1 100%;
	}

	.step-navigation {
		grid-template-columns: 1fr;
	}
}

/* Forms edit tabs link style */
#forms-edit-tabs a.sidetalk-navigation-btn {
	text-decoration: none;
	color: inherit;
	display: flex;
}

#forms-edit-tabs a.sidetalk-navigation-btn .navigation-text {
	text-decoration: none;
}

/* ===== Credit Purchase History (credit-purchase-history.php) ===== */
.history-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 28px;
	padding: 40px;
	box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.5);
	animation: sidetalk-history-fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	margin-bottom: 40px;
}

@keyframes sidetalk-history-fadeIn {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.history-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 14px;
	margin-top: 20px;
}

.history-table th {
	padding: 10px 24px 10px 24px;
	text-align: left;
	color: #64748b;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.5px;
	border-bottom: 1px solid #f1f5f9;
}

.history-table tr.item-row {
	background: var(--st-bg-primary);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.history-table tr.item-row:hover {
	transform: translateY(-4px) scale(1.005);
	box-shadow: 0 10px 25px rgba(0, 176, 237, 0.1);
	z-index: 2;
}

.history-table td {
	padding: 24px;
	font-size: 15px;
	color: #2c3e50;
	border-top: 1px solid #f9f9f9;
	border-bottom: 1px solid #f9f9f9;
}

.history-table td:first-child {
	border-radius: 20px 0 0 20px;
	border-left: 1px solid #f9f9f9;
}

.history-table td:last-child {
	border-radius: 0 20px 20px 0;
	border-right: 1px solid #f9f9f9;
}

.history-table th.text-center,
.history-table td.text-center {
	text-align: center !important;
}

.history-table th.text-right,
.history-table td.text-right {
	text-align: right !important;
}

.history-table .flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.history-table .flex-right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.status-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--st-radius-md);
	font-size: 12px;
	font-weight: 700;
}

.status-purchase {
	background: #e3f2fd;
	color: #007aff;
}

.status-bonus {
	background: var(--st-success-light);
	color: var(--st-success);
}

.status-expired {
	background: var(--st-danger-light);
	color: var(--st-danger);
}

.filter-btn {
	padding: 10px 20px;
	border-radius: 15px;
	background: var(--st-bg-primary);
	border: 1px solid var(--st-border-light);
	color: var(--st-text-light-gray);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--st-transition-normal);
}

.filter-btn.active {
	background: var(--st-primary);
	color: var(--st-text-inverse);
	border-color: var(--st-primary);
}

/* Pagination */
.pagination-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--st-bg-primary);
	border: 1px solid #e2e8f0;
	border-radius: var(--st-radius-md);
	color: #64748b;
	font-weight: 600;
	text-decoration: none !important;
	transition: all var(--st-transition-normal);
}

.pagination-btn:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #0f172a;
	transform: translateY(-2px);
}

.pagination-btn.active {
	background: var(--st-primary);
	border-color: var(--st-primary);
	color: var(--st-text-inverse);
	box-shadow: 0 4px 12px rgba(0, 176, 237, 0.2);
}

/* ===== Tables Editor (tables.php) ===== */
/* ?�이�??�집 ?�단 ??*/
#tables-edit-tabs {
	display: flex;
	align-items: center;
	gap: 8px;
}

#tables-edit-tabs a.sidetalk-navigation-btn {
	text-decoration: none;
	color: inherit;
	display: flex;
}

#tables-edit-tabs a.sidetalk-navigation-btn .navigation-text {
	text-decoration: none;
}

/* Drag styles for table header reordering */
#previewHeaderRow th.table-col-draggable {
	position: relative;
}

#previewHeaderRow th.table-col-draggable.dragging {
	opacity: 0.6;
}

#previewHeaderRow th.drop-indicator-th {
	width: 10px;
	min-width: 10px;
	max-width: 10px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	position: relative;
}

#previewHeaderRow th.drop-indicator-th::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 8px;
	bottom: 8px;
	width: 4px;
	transform: translateX(-50%);
	background: #4f46e5;
	border-radius: 999px;
	opacity: 0.6;
}

/* Preview table layout */
.preview-table {
	table-layout: fixed;
	width: 100%;
}

.preview-table th,
.preview-table td {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#previewHeaderRow th.table-col-draggable {
	position: relative;
	padding-right: 56px;
	min-height: 56px;
}

#previewHeaderRow th.table-col-draggable .column-name {
	display: inline-block;
	max-width: calc(100% - 72px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

#previewHeaderRow th.table-col-draggable .delete-column {
	position: absolute !important;
	right: 8px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	cursor: pointer !important;
	width: 44px !important;
	height: 44px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 8px !important;
	background: rgba(0, 0, 0, 0.04) !important;
	font-size: 18px !important;
	line-height: 1 !important;
	color: #ff4d4d !important;
}

#previewHeaderRow th.table-col-draggable .delete-column:active {
	background: rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
	#previewHeaderRow th.table-col-draggable .column-name {
		max-width: min(58vw, calc(100% - 72px));
	}
}

/* Responsive: Add/Edit Table */
@media (max-width: 1200px) {
	.sidetalk-navigation-wrap {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.sidetalk-dashboard-data-add-wrap .form-controls {
		flex-direction: column;
		gap: 8px;
	}

	.preview-table-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.preview-table {
		min-width: 640px;
		table-layout: auto;
	}

	.preview-table th,
	.preview-table td {
		min-width: 120px;
	}

	#previewHeaderRow th.table-col-draggable {
		padding: 28px 30px 8px 8px !important;
		min-height: 56px;
	}

	#previewHeaderRow th.table-col-draggable .delete-column {
		position: absolute;
		right: 8px;
		top: 8px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
	}

	#previewHeaderRow th.table-col-draggable .delete-column:active {
		background: rgba(0, 0, 0, 0.06);
	}

	#previewHeaderRow th.table-col-draggable .column-name {
		font-size: 12px;
		display: block;
		max-width: 100%;
		white-space: normal;
		line-height: 1.2;
	}

	.preview-table thead th {
		white-space: normal !important;
	}

	#previewHeaderRow th.table-col-draggable .column-name {
		display: -webkit-box;
		line-clamp: 2;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
		word-break: keep-all;
		line-height: 1.2;
		max-height: 2.6em;
		margin-top: 2px;
	}

	.custom-side-panel .custom-side-panel-content {
		width: 100vw !important;
		max-width: 100vw !important;
		height: 100vh;
		border-radius: 12px 12px 0 0;
	}

	.preview-table-buttons {
		display: flex;
		justify-content: center;
		margin: 12px 0 0;
	}

	.preview-table-buttons .add-column-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 360px;
		padding: 12px 14px;
		font-size: 14px;
	}

	#step-3>.sidetalk-dashboard-button.save-button {
		display: block;
		width: 100%;
		max-width: 360px;
		margin: 12px auto 0;
		padding: 12px 14px;
		font-size: 14px;
	}

	.sidetalk-dashboard-data-add-wrap {
		padding-bottom: max(16px, env(safe-area-inset-bottom));
	}
}

@media (max-width: 380px) {

	.preview-table th,
	.preview-table td {
		min-width: 140px;
	}

	#previewHeaderRow th.table-col-draggable {
		padding: 30px 28px 8px 8px;
	}

	#previewHeaderRow th.table-col-draggable .delete-column {
		right: 6px;
		top: 6px;
	}

	#previewHeaderRow th.table-col-draggable .column-name {
		font-size: 11px;
	}
}

/* ===== Card Setting Page (card-setting.php) ===== */
.card-type-selector {
	display: flex;
	gap: 15px;
}

.type-option input {
	display: none;
}

.type-option .option-box {
	width: 100px;
	height: 80px;
	border: 1px solid var(--st-border-lighter);
	border-radius: var(--st-radius-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: var(--st-bg-primary);
	color: var(--st-text-lightest);
	transition: all 0.2s;
}

.type-option .option-box i {
	font-size: 24px;
	margin-bottom: 5px;
}

.type-option input:checked+.option-box {
	border-color: var(--st-primary);
	color: var(--st-primary);
	background: var(--st-primary-lighter);
	font-weight: bold;
}

.card-editor-container {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	padding-bottom: 20px;
	align-items: flex-start;
	background: #dfe6ed;
	padding: 30px;
	border-radius: 10px;
}

.card-preview-area {
	display: flex;
	gap: 20px;
}

.card-item {
	width: 280px;
	min-height: 150px;
	background: var(--st-bg-primary);
	border-radius: var(--st-radius-md);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	position: relative;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.card-delete-btn {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 24px;
	height: 24px;
	background: var(--st-danger);
	color: var(--st-text-inverse);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 14px;
	display: none;
}

.card-item:hover .card-delete-btn {
	display: flex;
}

.card-text-content {
	cursor: pointer;
	min-height: 60px;
	border: 1px dashed transparent;
	padding: 5px;
}

.card-text-content:hover {
	border-color: var(--st-primary);
	background: #f9fcff;
}

.card-image-content {
	cursor: pointer;
	min-height: 120px;
	background: var(--st-bg-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--st-radius-sm);
	margin-bottom: 10px;
	position: relative;
	overflow: hidden;
}

.card-image-content img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-image-placeholder {
	color: #aaa;
	font-size: 14px;
}

.card-item-title {
	font-weight: bold;
	margin-bottom: 4px;
	font-size: 16px;
}

.card-item-desc {
	white-space: pre-line;
	color: var(--st-text-light-gray);
	font-size: 13px;
}

.card-list-items {
	margin-top: 10px;
}

.card-list-row {
	display: flex;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--st-border-light);
	cursor: pointer;
}

.card-list-row:last-child {
	border-bottom: none;
}

.card-list-thumb {
	width: 40px;
	height: 40px;
	background: var(--st-border-light);
	border-radius: var(--st-radius-xs);
	flex-shrink: 0;
}

.card-list-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--st-radius-xs);
}

.card-list-info {
	flex: 1;
}

.card-list-title {
	font-size: 14px;
	font-weight: bold;
}

.card-list-desc {
	font-size: 12px;
	color: #888;
}

.add-list-item-btn {
	text-align: center;
	padding: 8px;
	color: var(--st-primary);
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
}

.card-buttons-area {
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.card-btn {
	width: 100%;
	padding: 10px;
	border: 1px solid #e1e1e1;
	border-radius: var(--st-radius-sm);
	background: #f9f9f9;
	color: var(--st-text-dark);
	text-align: center;
	font-size: 14px;
	cursor: pointer;
	position: relative;
	box-sizing: border-box;
}

.card-btn.add-action {
	color: var(--st-primary);
	border: 1px dashed var(--st-primary);
	background: var(--st-bg-primary);
}

.card-btn:hover {
	background: #f0f0f0;
}

.card-btn .remove-btn-icon {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--st-danger);
	font-size: 16px;
	display: none;
}

.card-btn:hover .remove-btn-icon {
	display: block;
}

.add-card-placeholder {
	width: 280px;
	height: 250px;
	border: 2px dashed #ccc;
	border-radius: var(--st-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.4);
	transition: all 0.2s;
}

.add-card-placeholder:hover {
	border-color: var(--st-primary);
	background: rgba(255, 255, 255, 0.6);
}

.add-card-placeholder i {
	font-size: 40px;
	color: #888;
}

/* Card Setting Popup */
.sidetalk-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sidetalk-popup {
	background: var(--st-bg-primary);
	width: 450px;
	border-radius: var(--st-radius-md);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
}

.popup-header {
	padding: 15px 20px;
	border-bottom: 1px solid var(--st-border-light);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.popup-header h4 {
	margin: 0;
	font-size: 16px;
	font-weight: bold;
}

.close-btn {
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
	color: var(--st-text-lightest);
}

.popup-body {
	padding: 20px;
	overflow: auto;
}

.popup-footer {
	padding: 15px 20px;
	border-top: 1px solid var(--st-border-light);
	text-align: right;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

#editPopup .sidetalk-popup.crop-dialog {
	width: min(560px, 95vw);
}

.popup-input-row {
	margin-bottom: 15px;
}

.popup-label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: bold;
	color: var(--st-text-gray);
}

.popup-label span {
	float: right;
	font-weight: normal;
	color: var(--st-text-lightest);
	font-size: 12px;
}

.popup-label .required {
	color: var(--st-danger);
	margin-left: 2px;
}

.popup-text-input,
.popup-textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--st-border-lighter);
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
}

.popup-textarea {
	height: 100px;
	resize: none;
}

.popup-input-group {
	display: flex;
	gap: 10px;
}

.popup-select {
	padding: 10px;
	border: 1px solid var(--st-border-lighter);
	border-radius: 6px;
	background: #f8f9fa;
	min-width: 100px;
}

.popup-help {
	font-size: 12px;
	color: #888;
	margin-top: 6px;
	line-height: 1.4;
}

/* Card Setting Image Upload */
.upload-preview-wrap {
	width: 100%;
	border-radius: 6px;
	overflow: hidden;
	background: var(--st-bg-secondary);
	margin-top: 10px;
	position: relative;
}

.upload-preview-wrap.aspect-2-1 {
	aspect-ratio: 2 / 1;
}

.upload-preview-wrap.aspect-1-1 {
	aspect-ratio: 1 / 1;
}

.upload-preview-wrap.crop-mode {
	aspect-ratio: initial !important;
}

.upload-preview-wrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#pop_cropCanvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	cursor: grab;
	touch-action: none;
}

#pop_cropCanvas:active {
	cursor: grabbing;
}

#pop_cropOverlay {
	position: absolute;
	inset: 0;
	display: none;
}

.pop-crop-shade {
	position: absolute;
	background: rgba(0, 0, 0, 0.38);
	pointer-events: none;
}

#pop_cropBox {
	position: absolute;
	border: 2px solid rgba(255, 255, 255, 0.95);
	border-radius: 10px;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.00);
	touch-action: none;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}

.pop-crop-handle {
	position: absolute;
	width: 16px;
	height: 16px;
	background: rgba(255, 255, 255, 0.98);
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
	touch-action: none;
}

.pop-crop-handle[data-h="nw"] {
	left: -8px;
	top: -8px;
	cursor: nwse-resize;
}

.pop-crop-handle[data-h="ne"] {
	right: -8px;
	top: -8px;
	cursor: nesw-resize;
}

.pop-crop-handle[data-h="sw"] {
	left: -8px;
	bottom: -8px;
	cursor: nesw-resize;
}

.pop-crop-handle[data-h="se"] {
	right: -8px;
	bottom: -8px;
	cursor: nwse-resize;
}

.media-upload-area {
	border: 1px dashed var(--st-border-lighter);
	border-radius: 6px;
	padding: 10px;
	text-align: center;
	background: #fcfcfc;
	margin-top: 5px;
}

.upload-preview {
	max-height: 150px;
	max-width: 100%;
	margin-top: 10px;
	border-radius: var(--st-radius-xs);
	display: none;
}

/* ===== Tables Data Sheet (tables-data-sheet.php) ===== */
#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap .table-wrapper.excel-style table thead tr th:first-child {
	width: 50px !important;
}

/* Data Sheet: focused cell full view */
#excelTable td.show-full {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

/* Data Sheet: sticky column base */
#excelTable thead th,
#excelTable tbody td {
	background: var(--st-bg-primary);
}

/* Data Sheet Tabs */
#tables-edit-tabs a.sidetalk-navigation-btn {
	text-decoration: none;
	color: inherit;
	display: flex;
}

#tables-edit-tabs a.sidetalk-navigation-btn .navigation-text {
	text-decoration: none;
}

#tables-edit-tabs {
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid #e5e7eb;
	padding-bottom: 2px;
	margin-bottom: 10px;
}

@media (max-width: 1200px) {
	#tables-edit-tabs {
		flex-wrap: wrap;
	}

	#tables-edit-tabs .sidetalk-navigation-btn {
		flex: 1 1 calc(50% - 8px);
	}
}

@media (max-width: 1024px) {
	.sidetalk-button-container {
		flex-wrap: wrap;
		gap: 10px;
	}

	.sidetalk-button-wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
}

@media (max-width: 768px) {

	/* Data Sheet: search form vertical */
	#sidetalk-dashboard-content .header-row form {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	#sidetalk-dashboard-content .search-input-wrap {
		width: 100%;
	}

	/* Data Sheet: button grid */
	.sidetalk-button-container {
		flex-direction: column;
		align-items: stretch;
	}

	.sidetalk-button-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.sidetalk-button-group {
		display: grid;
		gap: 10px;
	}

	.sidetalk-page-size-container {
		display: flex;
		gap: 8px;
		align-items: center;
	}

	.sidetalk-page-size-input {
		flex: 1;
		min-width: 0;
	}

	/* Data Sheet: table scroll */
	.table-wrapper.excel-style {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#excelTable {
		min-width: 720px;
		table-layout: fixed;
	}

	#excelTable th,
	#excelTable td {
		padding: 8px;
		font-size: 13px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Data Sheet: header 2-line clamp */
	#excelTable thead th {
		white-space: normal;
	}

	#excelTable thead th .th-text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		max-height: 2.8em;
		line-height: 1.3;
	}

	#excelTable thead th .sort-icon {
		margin-left: 4px;
		font-weight: 600;
	}

	/* Data Sheet: sticky header */
	#excelTable thead th {
		position: sticky;
		top: 0;
		z-index: 2;
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	}

	/* Data Sheet: sticky first column */
	#excelTable thead th:first-child,
	#excelTable tbody td:first-child {
		position: sticky;
		left: 0;
		z-index: 3;
	}

	#excelTable thead th:first-child {
		z-index: 4;
	}

	/* Data Sheet: checkbox touch area */
	#excelTable th:first-child input[type="checkbox"],
	#excelTable td:first-child input[type="checkbox"] {
		transform: scale(1.2);
	}

	.total-entries-text {
		display: block;
		margin-top: 8px;
	}
}

@media (max-width: 480px) {
	.sidetalk-button-wrapper {
		grid-template-columns: 1fr;
	}

	#excelTable {
		min-width: 640px;
	}

	#tables-edit-tabs .sidetalk-navigation-btn {
		flex: 1 1 100%;
	}
}

/* ===== Category Modal Spinner (category-modal.php) ===== */
.sidetalk-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid #e5e7eb;
	border-top-color: #00b0ed;
	border-radius: 50%;
	display: inline-block;
	animation: sidetalk-spin 0.8s linear infinite;
	vertical-align: middle;
	margin: 0 4px;
}

/* ===== Shortcut Button Setting (shortcut-button-setting.php) ===== */
/* Select2 Style for Shortcut Button */
.sidetalk-shortcut-button-setting .select2-container {
	display: block;
	width: 100% !important;
}

.sidetalk-shortcut-button-setting .select2-container--default .select2-selection--single {
	height: 40px;
	border: 1px solid var(--st-border-light);
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	background-color: var(--st-bg-primary) !important;
	transition: border-color 0.2s;
	margin-bottom: 10px;
	color: var(--st-text-dark) !important;
	box-sizing: border-box;
}

.sidetalk-shortcut-button-setting .select2-container--default.select2-container--open .select2-selection--single,
.sidetalk-shortcut-button-setting .select2-container--default .select2-selection--single:focus {
	border-color: var(--st-primary);
	outline: none;
}

.sidetalk-shortcut-button-setting .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: normal;
	padding-left: 12px;
	padding-right: 30px;
	color: var(--st-text-dark) !important;
	font-size: 17px;
	font-weight: 500;
}

.sidetalk-shortcut-button-setting .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 38px;
	right: 6px;
}

.sidetalk-shortcut-button-setting .select2-dropdown {
	border: 1px solid var(--st-primary);
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	z-index: 10001;
	background-color: var(--st-bg-primary);
}

.select2-container--open .select2-dropdown--below {
	margin-top: 20px;
}

.sidetalk-shortcut-button-setting .select2-search--dropdown {
	padding: 8px 12px;
}

.sidetalk-shortcut-button-setting .select2-search--dropdown .select2-search__field {
	padding: 8px;
	border-radius: var(--st-radius-xs);
	border: 1px solid var(--st-border-lighter);
	font-size: 14px;
	font-weight: 500;
	color: var(--st-text-dark);
	background-color: var(--st-bg-primary);
}

/* Shortcut Button: Grid Alignment Fix for Message Type */
.custom-link-row.type-message {
	grid-template-columns: 1fr 1fr 2fr 1fr auto !important;
}

.custom-link-row.type-message .custom-link-field:nth-child(3) {
	grid-column: 3 / 5 !important;
}

.custom-link-row.type-message .custom-link-remove {
	grid-column: 5 !important;
}

/* ===== Images Upload (images-upload.php) ===== */
/* Styled file select button */
.sidetalk-file-select-btn {
	display: inline-block;
	padding: 8px 14px;
	background: #2563eb;
	color: var(--st-text-inverse);
	border-radius: var(--st-radius-sm);
	font-weight: 600;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
	transition: transform 0.06s ease, box-shadow 0.12s ease;
	margin-right: 8px;
}

.sidetalk-file-select-btn:active {
	transform: translateY(1px);
}

.sidetalk-file-select-desc {
	color: #6b7280;
	display: block;
	margin-top: 6px;
}

/* Cancel/remove small button */
.sidetalk-mini-remove {
	background: var(--st-bg-primary);
	border: 1px solid #e5e7eb;
	color: #111827;
	border-radius: 6px;
	padding: 4px 6px;
	cursor: pointer;
	font-size: 14px;
}

.sidetalk-mini-remove:hover {
	background: #f8fafc;
}

/* Image preview tile */
.sidetalk-image-tile {
	text-align: center;
	width: 120px;
}

.sidetalk-image-tile img {
	width: 120px;
	height: auto;
	border-radius: 6px;
	display: block;
}

.sidetalk-image-filename {
	font-size: 12px;
	margin-top: 6px;
	color: #374151;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ===== Chat Log List (chat-log-list.php) ===== */
.sidetalk-loading-spinner {
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 4px solid rgba(0, 0, 0, 0.12);
	border-top-color: #2271b1;
	border-radius: 50%;
	animation: sidetalk-spin 0.75s linear infinite;
	margin-left: 4px;
	vertical-align: middle;
}

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

#sidetalk-dashboard-content .sidetalk-wp-spinner {
	display: none !important;
}

#sidetalk-dashboard-content .sidetalk-chat-log-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 10px;
	margin-bottom: 30px;
}

#sidetalk-dashboard-content .sidetalk-chat-log-mode-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

#sidetalk-dashboard-content .sidetalk-chat-log-mode-help {
	font-size: 12px;
	color: var(--st-text-muted);
}

#sidetalk-dashboard-content .sidetalk-chat-log-mode-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 50px;
	height: 28px;
	flex-shrink: 0;
}

#sidetalk-dashboard-content .sidetalk-chat-log-mode-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

#sidetalk-dashboard-content .sidetalk-chat-log-mode-slider {
	position: absolute;
	inset: 0;
	background: #ccd0d4;
	border-radius: 999px;
	transition: background .2s ease;
}

#sidetalk-dashboard-content .sidetalk-chat-log-mode-slider:before {
	content: '';
	position: absolute;
	left: 3px;
	top: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .24);
	transition: transform .2s ease;
}

#sidetalk-dashboard-content .sidetalk-chat-log-mode-switch input:checked+.sidetalk-chat-log-mode-slider {
	background: #00b0ed;
}

#sidetalk-dashboard-content .sidetalk-chat-log-mode-switch input:checked+.sidetalk-chat-log-mode-slider:before {
	transform: translateX(22px);
}

#sidetalk-dashboard-content .sidetalk-chat-log-mode-switch input:disabled+.sidetalk-chat-log-mode-slider {
	opacity: .6;
	cursor: not-allowed;
}

#sidetalk-dashboard-content .sidetalk-chat-log-view {
	display: none;
}

#sidetalk-dashboard-content .sidetalk-chat-log-view.is-active {
	display: block;
}

#sidetalk-dashboard-content .sidetalk-chat-log-view[hidden] {
	display: none !important;
}

#sidetalk-dashboard-content .sidetalk-chat-log-answer-actions {
	margin-top: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

#sidetalk-dashboard-content .sidetalk-chat-log-answer-actions .sidetalk-table-list-link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	text-align: center;
}

#sidetalk-dashboard-content .sidetalk-chat-log-answer-cell .sidetalk-image-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 8px auto 0;
	width: 100%;
}

#sidetalk-dashboard-content .sidetalk-chat-log-answer-cell .sidetalk-image-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	text-align: center;
}

#sidetalk-dashboard-content .sidetalk-chat-log-answer-cell .sidetalk-image-content {
	margin-top: 8px;
	text-align: center;
	width: 100%;
}

@media (max-width: 782px) {
	#sidetalk-dashboard-content .sidetalk-chat-log-toolbar {
		align-items: flex-start;
	}

	#sidetalk-dashboard-content .sidetalk-chat-log-mode-toggle {
		margin-left: 0;
	}
}
/* ===== Admin Site Setting UI Revamp ===== */
.st-site-admin-page .st-admin-shell {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}

.st-site-admin-page--list {
	width: calc(100% - 8px);
	max-width: none;
	margin: 0 8px 0 0;
	padding-right: 8px;
}

.st-site-admin-page--list .st-admin-shell,
.st-site-admin-page--list.st-site-admin-page .st-admin-shell,
.st-site-admin-page--list .st-admin-shell.st-admin-shell--list {
	max-width: none;
	margin: 0;
	padding: 12px 6px 20px;
}

.st-site-admin-page--list .st-admin-hero,
.st-site-admin-page--list .st-admin-action-center .st-card__header,
.st-site-admin-page--list .st-admin-panel .st-card__header,
.st-site-admin-page--list .st-admin-table-card .st-card__header {
	padding-left: 20px;
	padding-right: 20px;
}

.st-site-admin-page--list .st-admin-action-center .st-card__body,
.st-site-admin-page--list .st-admin-panel .st-card__body,
.st-site-admin-page--list .st-admin-table-card .st-card__body {
	padding-left: 18px;
	padding-right: 18px;
}

@media screen and (max-width: 782px) {
	.st-site-admin-page--list {
		width: 100%;
		margin-right: 0;
		padding-right: 0;
	}

	.st-site-admin-page--list .st-admin-shell,
	.st-site-admin-page--list.st-site-admin-page .st-admin-shell,
	.st-site-admin-page--list .st-admin-shell.st-admin-shell--list {
		padding: 10px 0 16px;
	}

	.st-site-admin-page--list .st-admin-hero,
	.st-site-admin-page--list .st-admin-action-center .st-card__header,
	.st-site-admin-page--list .st-admin-panel .st-card__header,
	.st-site-admin-page--list .st-admin-table-card .st-card__header,
	.st-site-admin-page--list .st-admin-action-center .st-card__body,
	.st-site-admin-page--list .st-admin-panel .st-card__body,
	.st-site-admin-page--list .st-admin-table-card .st-card__body {
		padding-left: 14px;
		padding-right: 14px;
	}
}

.st-form-row {
margin-bottom: 24px;
display: flex;
flex-direction: column;
gap: 8px;
}

.st-form-label {
font-size: 15px;
font-weight: 600;
color: #1e293b;
}

.st-form-control {
display: flex;
flex-direction: column;
gap: 6px;
}

.st-form-hint {
font-size: 13px;
color: #64748b;
margin: 4px 0 0;
}

.st-admin-select,
.st-admin-input {
width: 100%;
max-width: 400px;
padding: 10px 14px;
border: 1px solid #d1d5db;
border-radius: 10px;
background: #fff;
font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
}

.st-admin-select:focus,
.st-admin-input:focus {
border-color: #00b0ed;
box-shadow: 0 0 0 3px rgba(0, 176, 237, 0.1);
outline: none;
}

.st-admin-credit-manage-box {
background: #f8fafc;
border-radius: 12px;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #e2e8f0;
}

.st-admin-credit-display {
display: flex;
align-items: baseline;
gap: 8px;
}

.st-admin-credit-display .credit-label {
font-size: 14px;
color: #64748b;
font-weight: 500;
}

.st-admin-credit-display .credit-balance {
font-size: 24px;
font-weight: 800;
color: #0f172a;
}

.st-admin-credit-display .credit-unit {
font-size: 13px;
color: #94a3b8;
font-weight: 600;
}

.st-admin-credit-actions {
display: flex;
gap: 8px;
}

.st-admin-form-footer {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid #e2e8f0;
display: flex;
justify-content: center;
}

@media (max-width: 768px) {
.st-admin-credit-manage-box {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}

.st-admin-credit-actions {
width: 100%;
}

.st-admin-credit-actions button {
flex: 1;
}
}

.st-admin-panels--setting {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

/* ===== Admin Settings Big UI & Quick Credit ===== */
.st-admin-panel--large .st-card__header h2 {
font-size: 24px !important;
font-weight: 800;
}

.st-admin-panel--large .st-admin-input {
border-width: 2px;
}

.st-admin-panel--large .st-admin-input:focus {
border-color: #00b0ed;
box-shadow: 0 0 0 4px rgba(0, 176, 237, 0.15);
}

.quick-credit-submit {
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quick-credit-submit:active {
transform: scale(0.95);
}

.st-form-label {
font-size: 16px !important;
}

.st-admin-metric-card {
padding: 30px !important;
}

.st-admin-metric-card__value {
font-size: 32px !important;
}

/* ROI Summary Card Styles */
.sidetalk-dashboard-roi-container {
	margin-top: 24px;
	width: 100%;
}

.sidetalk-roi-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	overflow: hidden;
}

.roi-card-header {
	padding: 18px 24px;
	border-bottom: 1px solid #f1f5f9;
}

.roi-card-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #1e293b;
	display: flex;
	align-items: center;
	gap: 8px;
}

.roi-card-title i {
	color: #3b82f6;
}

.roi-card-body {
	padding: 24px;
}

.roi-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 24px;
}

@media (max-width: 768px) {
	.roi-stats-grid {
		grid-template-columns: 1fr;
	}
}

.roi-stat-item {
	background: #f8fafc;
	border: 1px solid #f1f5f9;
	border-radius: 16px;
	padding: 20px;
	display: flex;
	flex-direction: column;
}

.roi-stat-label {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #64748b;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 12px;
}

.roi-stat-label i {
	color: #3b82f6;
	font-size: 16px;
}

.roi-stat-value-wrap {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 6px;
}

.roi-stat-value {
	color: #0f172a;
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
}

.roi-stat-unit {
	font-size: 14px;
	color: #64748b;
	font-weight: 600;
}

.roi-stat-desc {
	color: #94a3b8;
	font-size: 12px;
}

/* FAQ 리스트 스타일 */
.roi-faq-items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.roi-faq-items li {
	font-size: 13px;
	color: #334155;
	padding: 6px 10px;
	background: #ffffff;
	border-radius: 6px;
	border: 1px solid #edf2f7;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.roi-faq-items li.loading {
	color: #94a3b8;
	background: transparent;
	border: none;
	padding: 0;
}

/* 전환 유도 배너 스타일 */
.roi-conversion-banner {
	background: linear-gradient(90deg, #eff6ff 0%, #dbeafe 100%);
	border: 1px solid #bfdbfe;
	border-radius: 12px;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

@media (max-width: 991px) {
	.roi-conversion-banner {
		flex-direction: column;
		text-align: center;
	}
}

.banner-left {
	display: flex;
	align-items: center;
	gap: 20px;
}

@media (max-width: 600px) {
	.banner-left {
		flex-direction: column;
	}
}

.banner-icon {
	width: 48px;
	height: 48px;
	background: #ffffff;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: #3b82f6;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	flex-shrink: 0;
}

.banner-text {
	flex-grow: 1;
}

.banner-title {
	margin: 0 0 6px 0;
	font-size: 16px;
	font-weight: 700;
	color: #1e3a8a;
	line-height: 1.4;
}

.banner-title span {
	color: #2563eb;
	font-size: 1.1em;
	font-weight: 800;
}

.banner-subtitle {
	margin: 0;
	font-size: 14px;
	color: #1d4ed8;
	opacity: 0.8;
}

.banner-right {
	flex-shrink: 0;
}

.roi-conversion-banner .banner-right .st-btn,
.roi-conversion-banner .banner-right .btn-open-plan-change {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 12px 20px;
	border: none;
	border-radius: 12px;
	background: #2563eb;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	appearance: none;
	-webkit-appearance: none;
}

.roi-conversion-banner .banner-right .st-btn:hover,
.roi-conversion-banner .banner-right .btn-open-plan-change:hover {
	background: #1d4ed8;
	transform: translateY(-1px);
	box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
}

.roi-conversion-banner .banner-right .st-btn:focus,
.roi-conversion-banner .banner-right .btn-open-plan-change:focus {
	outline: none;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16), 0 10px 24px rgba(37, 99, 235, 0.18);
}

.roi-conversion-banner .banner-right .st-btn i,
.roi-conversion-banner .banner-right .btn-open-plan-change i {
	font-size: 16px;
}

@media (max-width: 991px) {
	.roi-conversion-banner .banner-right {
		width: 100%;
	}

	.roi-conversion-banner .banner-right .st-btn,
	.roi-conversion-banner .banner-right .btn-open-plan-change {
		width: 100%;
	}
}

/* 소셜 프루프(미리보기) 모드 스타일 */
.social-proof-mode .roi-stat-item {
	border-style: dashed;
	border-color: #cbd5e1;
}

.roi-card-subtitle {
	margin: 4px 0 0 0;
	font-size: 13px;
	color: #64748b;
	font-weight: 500;
}

.social-proof-mode .roi-stat-value {
	color: #64748b;
}