@charset "utf-8";

/* Live chat popup windows — modern layout */

:root {
	--chat-primary: #1e40af;
	--chat-primary-light: #3b82f6;
	--chat-accent: #059669;
	--chat-bg: #f8fafc;
	--chat-surface: #ffffff;
	--chat-border: #e2e8f0;
	--chat-text: #1e293b;
	--chat-text-muted: #64748b;
	--chat-radius: 10px;
	--chat-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--chat-font);
	font-size: 13px;
	line-height: 1.5;
	color: var(--chat-text);
	background: var(--chat-bg);
}

.header {
	background: linear-gradient(135deg, var(--chat-primary) 0%, var(--chat-primary-light) 100%);
	height: auto;
	min-height: 44px;
	padding: 10px 14px;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
}

.c {
	font-size: 13px;
	color: var(--chat-text-muted);
	line-height: 1.6;
}

.details {
	background: var(--chat-surface);
	height: auto;
	min-height: 36px;
	line-height: 1.5;
	font-size: 13px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--chat-border);
	color: var(--chat-text);
}

.details #tech {
	font-weight: 600;
	color: var(--chat-primary);
}

.footer {
	background: var(--chat-surface);
	height: auto;
	line-height: 1;
	padding: 10px 12px;
	border-top: 1px solid var(--chat-border);
	display: flex;
	gap: 8px;
	align-items: center;
}

.footer input[type=text] {
	flex: 1;
	padding: 10px 12px !important;
	border: 1px solid var(--chat-border) !important;
	border-radius: var(--chat-radius) !important;
	font-size: 13px;
	font-family: var(--chat-font);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.footer input[type=text]:focus {
	border-color: var(--chat-primary-light) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
	outline: none;
}

.footer input[type=submit],
.footer input[type=button] {
	background: linear-gradient(135deg, var(--chat-accent) 0%, #10b981 100%) !important;
	color: #fff !important;
	border: none !important;
	padding: 10px 18px !important;
	border-radius: var(--chat-radius) !important;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.2s ease;
}

.footer input[type=submit]:hover,
.footer input[type=button]:hover {
	transform: translateY(-1px);
}

.msg {
	height: 280px;
	font-size: 13px;
	padding: 12px 14px;
	overflow: auto;
	background: var(--chat-bg);
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

.msg::-webkit-scrollbar {
	width: 6px;
}

.msg::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 3px;
}

.msg #content {
	line-height: 1.6;
}

.msg #content i {
	font-style: normal;
	font-weight: 600;
	color: var(--chat-primary);
}

.msg #content br {
	margin-bottom: 4px;
}

form {
	padding: 0;
	margin: 0;
	font-size: 13px;
}

table {
	font-size: 13px;
	border-collapse: collapse;
}

table td,
table th {
	padding: 8px;
}

.heading {
	font-size: 14px;
	font-weight: 600;
	background: linear-gradient(135deg, var(--chat-primary) 0%, var(--chat-primary-light) 100%);
	color: #fff;
	padding: 10px 14px;
}

fieldset.s {
	border: 1px solid var(--chat-border);
	border-radius: var(--chat-radius);
	padding: 16px;
	margin: 0;
	background: var(--chat-surface);
}

fieldset.s legend {
	font-weight: 600;
	color: var(--chat-primary);
	padding: 0 8px;
	font-size: 14px;
}

fieldset.s table td {
	padding: 8px 4px;
	vertical-align: middle;
}

fieldset.s input[type=text],
fieldset.s input[type=password],
fieldset.s textarea {
	width: 100%;
	padding: 8px 12px !important;
	border: 1px solid var(--chat-border) !important;
	border-radius: var(--chat-radius) !important;
	font-family: var(--chat-font);
	font-size: 13px;
}

fieldset.s textarea {
	resize: vertical;
	min-height: 80px;
}

fieldset.s input[type=submit] {
	background: linear-gradient(135deg, var(--chat-primary) 0%, var(--chat-primary-light) 100%) !important;
	color: #fff !important;
	border: none !important;
	padding: 8px 20px !important;
	border-radius: var(--chat-radius) !important;
	font-weight: 600;
	cursor: pointer;
}

/* Technician panel */
h1 {
	font-size: 18px;
	font-weight: 700;
	color: var(--chat-primary);
	margin: 0 0 12px;
	padding: 12px 14px 0;
}

h1 a {
	color: var(--chat-accent);
	font-weight: 500;
}

table.tech {
	background: var(--chat-surface);
	border-radius: var(--chat-radius);
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(15, 23, 42, 0.06);
	border: 1px solid var(--chat-border);
}

table.tech > tbody > tr > td {
	padding: 0;
	vertical-align: top;
}

#sessions {
	background: #f1f5f9;
	padding: 12px !important;
	border-right: 1px solid var(--chat-border);
	min-width: 120px;
	font-size: 12px;
}

#sessions b {
	display: block;
	margin-bottom: 8px;
	color: var(--chat-primary);
	font-size: 13px;
}

#sessions .l,
#sessions .l a {
	display: block;
	padding: 8px 10px;
	margin-bottom: 4px;
	border-radius: 6px;
	font-size: 12px;
	color: var(--chat-text);
	text-decoration: none;
	transition: background 0.2s ease;
}

#sessions .l a:hover {
	background: var(--chat-surface);
	color: var(--chat-primary);
}

td.mb {
	padding: 12px !important;
	vertical-align: top;
}

td.mb b {
	color: var(--chat-text);
	font-size: 13px;
}

td.mb a {
	color: var(--chat-accent);
	text-decoration: none;
	font-weight: 500;
}

td.mb a:hover {
	text-decoration: underline;
}

.lc,
#messages {
	background: var(--chat-bg);
	border: 1px solid var(--chat-border);
	border-radius: var(--chat-radius);
	padding: 12px;
	min-height: 200px;
	max-height: 320px;
	overflow: auto;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.6;
}

.lc .l,
#messages .l {
	padding: 8px 0;
	border-bottom: 1px solid var(--chat-border);
}

.lc i,
#messages i {
	font-style: normal;
	font-weight: 600;
	color: var(--chat-primary);
}

/* Main site floating chat trigger overrides */
#live-chat-box,
#live-admin-chat-box {
	border: none !important;
	width: 320px !important;
	max-width: 95vw;
	display: none;
	float: none !important;
	margin-top: 0 !important;
	margin-right: 0 !important;
}

#start-chat {
	float: none !important;
	margin-top: 0 !important;
	margin-right: 0 !important;
}

#close-chat,
#close-admin-chat {
	float: right;
	color: #fff !important;
	opacity: 0.9;
	transition: opacity 0.2s ease;
}

#close-chat:hover,
#close-admin-chat:hover {
	opacity: 1;
}

#close-chat img,
#close-admin-chat img {
	filter: brightness(0) invert(1);
	width: 16px;
	height: 16px;
}