/*
 * Grace GSuite Chat Concierge — public chat UI.
 *
 * Every rule is scoped under `.grace-gcc-root` so the plugin can't be
 * over-ridden by aggressive global theme rules (a common cause of invisible
 * form text in dark mode).
 *
 * Dark mode is activated in TWO complementary ways:
 *   (a) class `.grace-gcc-dark` added by chat.js (respects the plugin setting)
 *   (b) `@media (prefers-color-scheme: dark)` as a pure-CSS fallback,
 *       gated by `.grace-gcc-auto-dark` so admins who disable dark mode
 *       in settings don't get it via media query.
 * Input / textarea text color uses `!important` to win against theme rules
 * like `form input, form textarea { color: #000; }`.
 */

.grace-gcc-root {
	--grace-primary: #2563eb;
	--grace-accent: #ffffff;
	--grace-bg: #ffffff;
	--grace-fg: #111827;
	--grace-muted: #6b7280;
	--grace-border: #e5e7eb;
	--grace-in: #f3f4f6;
	--grace-input-bg: #ffffff;
	--grace-input-fg: #111827;
	--grace-input-placeholder: #9ca3af;
	--grace-out: var(--grace-primary);
	--grace-out-fg: #ffffff;
	--grace-radius: 16px;
	--grace-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
	position: fixed;
	z-index: 2147483000;
	bottom: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--grace-fg);
}

.grace-gcc-root.grace-gcc-bottom-right { right: 20px; }
.grace-gcc-root.grace-gcc-bottom-left  { left: 20px; }

/* ---- Dark-mode palette (class-based) ---- */
.grace-gcc-root.grace-gcc-dark {
	--grace-bg: #111827;
	--grace-fg: #f9fafb;
	--grace-muted: #9ca3af;
	--grace-border: #1f2937;
	--grace-in: #1f2937;
	--grace-input-bg: #1f2937;
	--grace-input-fg: #ffffff;
	--grace-input-placeholder: #9ca3af;
}

/* ---- Dark-mode palette (media-query fallback, gated by auto class) ---- */
@media (prefers-color-scheme: dark) {
	.grace-gcc-root.grace-gcc-auto-dark {
		--grace-bg: #111827;
		--grace-fg: #f9fafb;
		--grace-muted: #9ca3af;
		--grace-border: #1f2937;
		--grace-in: #1f2937;
		--grace-input-bg: #1f2937;
		--grace-input-fg: #ffffff;
		--grace-input-placeholder: #9ca3af;
	}
}

/* ---------- Bubble ---------- */
.grace-gcc-root .grace-gcc-bubble-btn {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: var(--grace-primary);
	color: var(--grace-accent);
	box-shadow: var(--grace-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .18s ease, box-shadow .2s ease;
	outline: none;
	position: relative;
	animation: grace-gcc-pop 1.2s ease-out .6s both;
}
.grace-gcc-root .grace-gcc-bubble-btn:hover { transform: translateY(-2px) scale(1.04); }
.grace-gcc-root .grace-gcc-bubble-btn:focus-visible { outline: 3px solid var(--grace-primary); outline-offset: 3px; }
.grace-gcc-root .grace-gcc-bubble-btn img,
.grace-gcc-root .grace-gcc-bubble-btn svg {
	width: 32px;
	height: 32px;
	object-fit: contain;
}
.grace-gcc-root .grace-gcc-unread {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #ef4444;
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--grace-bg);
}

@keyframes grace-gcc-pop {
	0%   { transform: scale(.6); opacity: 0; }
	60%  { transform: scale(1.12); opacity: 1; }
	100% { transform: scale(1); }
}

/* ---------- Popup ---------- */
.grace-gcc-root .grace-gcc-popup {
	position: absolute;
	bottom: 80px;
	width: 360px;
	max-width: calc(100vw - 32px);
	height: 520px;
	max-height: calc(100vh - 120px);
	background: var(--grace-bg);
	color: var(--grace-fg);
	border-radius: var(--grace-radius);
	box-shadow: var(--grace-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform-origin: bottom right;
	animation: grace-gcc-in .22s ease-out;
	border: 1px solid var(--grace-border);
}
.grace-gcc-root.grace-gcc-bottom-right .grace-gcc-popup { right: 0; }
.grace-gcc-root.grace-gcc-bottom-left  .grace-gcc-popup { left: 0; transform-origin: bottom left; }

@keyframes grace-gcc-in {
	from { transform: translateY(8px) scale(.96); opacity: 0; }
	to   { transform: translateY(0)   scale(1);    opacity: 1; }
}

.grace-gcc-root .grace-gcc-header {
	background: var(--grace-primary);
	color: var(--grace-accent);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.grace-gcc-root .grace-gcc-header img,
.grace-gcc-root .grace-gcc-header svg { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.15); padding: 3px; }
.grace-gcc-root .grace-gcc-header h4 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; line-height: 1.3; color: var(--grace-accent); }
.grace-gcc-root .grace-gcc-header .grace-gcc-status { font-size: 11px; opacity: .85; color: var(--grace-accent); }
.grace-gcc-root .grace-gcc-close-btn {
	border: 0;
	background: transparent;
	color: var(--grace-accent);
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 4px;
	opacity: .85;
}
.grace-gcc-root .grace-gcc-close-btn:hover { opacity: 1; }

.grace-gcc-root .grace-gcc-body {
	flex: 1;
	padding: 14px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--grace-bg);
	color: var(--grace-fg);
}

.grace-gcc-root .grace-gcc-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.grace-gcc-root .grace-gcc-msg-in  { background: var(--grace-in);  color: var(--grace-fg); align-self: flex-start;  border-bottom-left-radius: 4px; }
.grace-gcc-root .grace-gcc-msg-out { background: var(--grace-out); color: var(--grace-out-fg); align-self: flex-end; border-bottom-right-radius: 4px; }
.grace-gcc-root .grace-gcc-msg-sys { align-self: center; background: transparent; color: var(--grace-muted); font-size: 12px; font-style: italic; text-align: center; padding: 4px 8px; }
.grace-gcc-root .grace-gcc-msg-meta { display: block; font-size: 11px; color: var(--grace-muted); margin-top: 3px; }
.grace-gcc-root .grace-gcc-msg-out .grace-gcc-msg-meta { color: rgba(255,255,255,.85); }
.grace-gcc-root .grace-gcc-msg a { color: inherit; text-decoration: underline; }

.grace-gcc-root .grace-gcc-typing {
	align-self: flex-start;
	background: var(--grace-in);
	color: var(--grace-muted);
	padding: 8px 12px;
	border-radius: 14px;
	border-bottom-left-radius: 4px;
	font-size: 13px;
	display: inline-flex;
	gap: 4px;
	align-items: center;
}
.grace-gcc-root .grace-gcc-typing span { width: 6px; height: 6px; background: currentColor; border-radius: 50%; animation: grace-gcc-blink 1.2s infinite; }
.grace-gcc-root .grace-gcc-typing span:nth-child(2) { animation-delay: .2s; }
.grace-gcc-root .grace-gcc-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes grace-gcc-blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* ---------- Form (message input) ---------- */
.grace-gcc-root .grace-gcc-form {
	border-top: 1px solid var(--grace-border);
	padding: 10px;
	background: var(--grace-bg);
	display: flex;
	gap: 8px;
	align-items: flex-end;
}

.grace-gcc-root .grace-gcc-form textarea,
.grace-gcc-root .grace-gcc-prechat input {
	flex: 1;
	resize: none;
	border: 1px solid var(--grace-border);
	/* !important protects against theme CSS like `form textarea { color:#000 }` */
	background-color: var(--grace-input-bg) !important;
	color: var(--grace-input-fg) !important;
	/* Safari autofill / WebKit text-fill override */
	-webkit-text-fill-color: var(--grace-input-fg) !important;
	caret-color: var(--grace-input-fg);
	border-radius: 12px;
	padding: 9px 12px;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.4;
	outline: none;
	box-shadow: none;
}
.grace-gcc-root .grace-gcc-form textarea { max-height: 120px; }
.grace-gcc-root .grace-gcc-form textarea:focus,
.grace-gcc-root .grace-gcc-prechat input:focus { border-color: var(--grace-primary); }

/* Placeholder — explicit in every browser engine. */
.grace-gcc-root .grace-gcc-form textarea::placeholder,
.grace-gcc-root .grace-gcc-prechat input::placeholder {
	color: var(--grace-input-placeholder) !important;
	opacity: 1;
}
.grace-gcc-root .grace-gcc-form textarea::-webkit-input-placeholder,
.grace-gcc-root .grace-gcc-prechat input::-webkit-input-placeholder { color: var(--grace-input-placeholder) !important; opacity: 1; }
.grace-gcc-root .grace-gcc-form textarea::-moz-placeholder,
.grace-gcc-root .grace-gcc-prechat input::-moz-placeholder { color: var(--grace-input-placeholder) !important; opacity: 1; }
.grace-gcc-root .grace-gcc-form textarea:-ms-input-placeholder,
.grace-gcc-root .grace-gcc-prechat input:-ms-input-placeholder { color: var(--grace-input-placeholder) !important; opacity: 1; }

/* Kill Chrome's autofill yellow + ensure text stays light on dark. */
.grace-gcc-root .grace-gcc-form textarea:-webkit-autofill,
.grace-gcc-root .grace-gcc-prechat input:-webkit-autofill {
	-webkit-text-fill-color: var(--grace-input-fg) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--grace-input-bg) inset !important;
	caret-color: var(--grace-input-fg) !important;
}

.grace-gcc-root .grace-gcc-send-btn {
	background: var(--grace-primary);
	color: var(--grace-accent);
	border: 0;
	border-radius: 12px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.grace-gcc-root .grace-gcc-send-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Prechat (name/email) ---------- */
.grace-gcc-root .grace-gcc-prechat {
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--grace-bg);
	color: var(--grace-fg);
}
.grace-gcc-root .grace-gcc-prechat p { margin: 0 0 6px; font-size: 14px; color: var(--grace-fg); }
.grace-gcc-root .grace-gcc-prechat button {
	margin-top: 6px;
	background: var(--grace-primary);
	color: var(--grace-accent);
	border: 0;
	border-radius: 10px;
	padding: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.grace-gcc-root .grace-gcc-error { color: #f87171; font-size: 12px; margin-top: 6px; }

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
	.grace-gcc-root .grace-gcc-popup {
		width: calc(100vw - 24px);
		height: calc(100vh - 100px);
		bottom: 76px;
	}
	.grace-gcc-root .grace-gcc-bubble-btn { width: 54px; height: 54px; }
}