/* OmniPulse Chat — frontend widget styles */
#opc-chat-root {
	--opc-color: #2563eb;
	--opc-radius: 16px;
	position: fixed;
	bottom: 20px;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#opc-chat-root.opc-pos-right { right: 20px; }
#opc-chat-root.opc-pos-left  { left: 20px; }

.opc-bubble {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--opc-color);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);
	transition: transform 0.15s ease;
}
.opc-bubble:hover { transform: scale(1.06); }
.opc-bubble svg { width: 28px; height: 28px; }

.opc-panel {
	position: absolute;
	bottom: 76px;
	width: 340px;
	max-width: calc(100vw - 40px);
	height: 480px;
	max-height: 70vh;
	background: #fff;
	border-radius: var(--opc-radius);
	box-shadow: 0 10px 40px rgba(0,0,0,0.25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.opc-pos-right .opc-panel { right: 0; }
.opc-pos-left  .opc-panel { left: 0; }

.opc-panel.opc-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.opc-header {
	background: var(--opc-color);
	color: #fff;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.opc-header-title { font-weight: 600; font-size: 15px; }
.opc-header-status { font-size: 12px; opacity: 0.85; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.opc-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }
.opc-status-dot.opc-offline { background: #cbd5e1; }
.opc-close-btn { background: transparent; border: none; color: #fff; cursor: pointer; font-size: 20px; line-height: 1; opacity: 0.9; }
.opc-close-btn:hover { opacity: 1; }

.opc-messages {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	background: #f8fafc;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.opc-msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; word-wrap: break-word; }
.opc-msg-user  { align-self: flex-end; background: var(--opc-color); color: #fff; border-bottom-right-radius: 4px; }
.opc-msg-ai,
.opc-msg-admin { align-self: flex-start; background: #eef2f7; color: #1f2937; border-bottom-left-radius: 4px; }
.opc-msg-system { align-self: center; background: transparent; color: #64748b; font-size: 12px; text-align: center; }

.opc-typing { align-self: flex-start; font-size: 12px; color: #94a3b8; padding-left: 4px; }

.opc-footer {
	border-top: 1px solid #e5e7eb;
	padding: 10px;
	display: flex;
	gap: 8px;
	background: #fff;
}
.opc-input {
	flex: 1;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	padding: 9px 14px;
	font-size: 13.5px;
	resize: none;
	max-height: 80px;
	font-family: inherit;
}
.opc-input:focus { outline: none; border-color: var(--opc-color); }

.opc-send-btn {
	background: var(--opc-color);
	border: none;
	color: #fff;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.opc-send-btn:disabled { opacity: 0.5; cursor: default; }

.opc-escalate-bar {
	text-align: center;
	padding: 6px;
	font-size: 12px;
}
.opc-escalate-link {
	background: none;
	border: none;
	color: var(--opc-color);
	text-decoration: underline;
	cursor: pointer;
	font-size: 12px;
}

@media (max-width: 480px) {
	.opc-panel { width: calc(100vw - 24px); height: 65vh; }
}