/**
 * Gorilla Chat by Seresa — Widget Styles
 *
 * Last Audited: May 29 2026 12:10am
 *
 * @package Gorilla_Chat
 * @since   1.0.0
 */

/* ------------------------------------------------------------------ */
/*  Design-system tokens                                              */
/* ------------------------------------------------------------------ */

:root {
	--gorilla-primary: #DE3163;
	--gorilla-primary-hover: #FF3366;
	--gorilla-bg: #1a1640;
	--gorilla-bg-gradient: linear-gradient(135deg, #1a1640 0%, #221e4a 100%);
	--gorilla-text: #f4f0e8;
	--gorilla-text-muted: #9088a8;
	--gorilla-text-body: #c0b8d4;
	--gorilla-border: rgba(176, 160, 212, 0.15);
	--gorilla-radius: 10px;
	--gorilla-canvas: #12102e;
}

/* ------------------------------------------------------------------ */
/*  Base / Reset                                                      */
/* ------------------------------------------------------------------ */

.gorilla-chat {
	--gc-panel-width: 380px;
	--gc-panel-height: 540px;
	--gc-launcher-size: 56px;
	--gc-offset: 24px;
	--gc-z: 9999;

	position: fixed;
	bottom: var(--gc-offset);
	z-index: var(--gc-z);
	font-family: 'DM Sans', -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.gorilla-chat *,
.gorilla-chat *::before,
.gorilla-chat *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.gorilla-chat--right { right: var(--gc-offset); }
.gorilla-chat--left  { left: var(--gc-offset); }

/* ------------------------------------------------------------------ */
/*  Launcher                                                          */
/* ------------------------------------------------------------------ */

.gorilla-chat__launcher {
	width: var(--gc-launcher-size);
	height: var(--gc-launcher-size);
	border-radius: 50%;
	background: var(--gorilla-primary);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(222, 49, 99, 0.3);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	position: relative;
	overflow: hidden;
	animation: gorilla-pulse 2s ease-out 1;
}

.gorilla-chat__launcher:hover {
	background: var(--gorilla-primary-hover);
	transform: scale(1.05) translateY(-1px);
	box-shadow: 0 6px 28px rgba(222, 49, 99, 0.4);
}

.gorilla-chat__launcher:focus-visible {
	outline: 2px solid var(--gorilla-primary);
	outline-offset: 3px;
}

.gorilla-chat__launcher-img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.gorilla-chat__icon {
	width: 24px;
	height: 24px;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.gorilla-chat__icon--close {
	position: absolute;
	opacity: 0;
	transform: rotate(-90deg);
}

.gorilla-chat__launcher--open .gorilla-chat__icon--chat,
.gorilla-chat__launcher--open .gorilla-chat__launcher-img {
	opacity: 0;
	transform: rotate(90deg) scale(0.5);
}

.gorilla-chat__launcher--open .gorilla-chat__icon--close {
	opacity: 1;
	transform: rotate(0);
}

@keyframes gorilla-pulse {
	0%   { box-shadow: 0 4px 20px rgba(222, 49, 99, 0.3); }
	50%  { box-shadow: 0 4px 20px rgba(222, 49, 99, 0.3), 0 0 0 8px rgba(222, 49, 99, 0.2); }
	100% { box-shadow: 0 4px 20px rgba(222, 49, 99, 0.3), 0 0 0 16px rgba(222, 49, 99, 0); }
}

/* ------------------------------------------------------------------ */
/*  Panel                                                             */
/* ------------------------------------------------------------------ */

.gorilla-chat__panel {
	position: absolute;
	bottom: calc(var(--gc-launcher-size) + 12px);
	width: var(--gc-panel-width);
	height: var(--gc-panel-height);
	background: var(--gorilla-bg-gradient);
	border: 1px solid var(--gorilla-border);
	border-radius: var(--gorilla-radius);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px) scale(0.95);
	pointer-events: none;
	transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.gorilla-chat--right .gorilla-chat__panel { right: 0; }
.gorilla-chat--left  .gorilla-chat__panel { left: 0; }

.gorilla-chat__panel--open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* ------------------------------------------------------------------ */
/*  Header                                                            */
/* ------------------------------------------------------------------ */

.gorilla-chat__header {
	display: flex;
	align-items: center;
	padding: 14px 16px;
	background: rgba(18, 16, 46, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--gorilla-border);
	color: var(--gorilla-text);
	flex-shrink: 0;
}

.gorilla-chat__header-info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
}

.gorilla-chat__header-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.gorilla-chat__status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5CC8B0;
	flex-shrink: 0;
	box-shadow: 0 0 6px rgba(92, 200, 176, 0.4);
}

.gorilla-chat__bot-name {
	font-family: PosteramaTextW15, -apple-system, sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--gorilla-text);
}

.gorilla-chat__powered {
	font-size: 10px;
	color: var(--gorilla-text-muted);
	text-decoration: none;
	margin-right: 12px;
	white-space: nowrap;
	letter-spacing: 0.02em;
}

.gorilla-chat__powered:hover { color: var(--gorilla-text-body); }

.gorilla-chat__powered:focus-visible {
	outline: 2px solid var(--gorilla-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

.gorilla-chat__close {
	background: none;
	border: 1px solid transparent;
	color: var(--gorilla-text-muted);
	cursor: pointer;
	padding: 4px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.gorilla-chat__close:hover {
	color: var(--gorilla-text);
	background: rgba(196, 182, 224, 0.1);
	border-color: var(--gorilla-border);
}

.gorilla-chat__close:focus-visible {
	outline: 2px solid var(--gorilla-primary);
	outline-offset: 2px;
}

.gorilla-chat__close svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ */
/*  Messages                                                          */
/* ------------------------------------------------------------------ */

.gorilla-chat__messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--gorilla-canvas);
	scrollbar-width: thin;
	scrollbar-color: rgba(196, 182, 224, 0.2) transparent;
}

.gorilla-chat__messages::-webkit-scrollbar { width: 5px; }
.gorilla-chat__messages::-webkit-scrollbar-track { background: transparent; }
.gorilla-chat__messages::-webkit-scrollbar-thumb {
	background: rgba(196, 182, 224, 0.2);
	border-radius: 3px;
}

.gorilla-chat__bubble {
	max-width: 80%;
	display: flex;
	flex-direction: column;
}

.gorilla-chat__bubble--user      { align-self: flex-end; }
.gorilla-chat__bubble--assistant { align-self: flex-start; }

.gorilla-chat__bubble-text {
	padding: 10px 14px;
	border-radius: var(--gorilla-radius);
	word-wrap: break-word;
	white-space: pre-wrap;
	font-size: 14px;
	line-height: 1.55;
}

.gorilla-chat__bubble--user .gorilla-chat__bubble-text {
	background: var(--gorilla-primary);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.gorilla-chat__bubble--assistant .gorilla-chat__bubble-text {
	background: var(--gorilla-bg);
	border: 1px solid var(--gorilla-border);
	color: var(--gorilla-text-body);
	border-bottom-left-radius: 4px;
}

.gorilla-chat__bubble-time {
	font-size: 11px;
	color: var(--gorilla-text-muted);
	margin-top: 4px;
	padding: 0 4px;
}

.gorilla-chat__bubble--user .gorilla-chat__bubble-time { text-align: right; }

/* ------------------------------------------------------------------ */
/*  Typing indicator                                                  */
/* ------------------------------------------------------------------ */

.gorilla-chat__typing .gorilla-chat__dots {
	display: flex;
	gap: 4px;
	padding: 10px 14px;
	background: var(--gorilla-bg);
	border: 1px solid var(--gorilla-border);
	border-radius: var(--gorilla-radius);
	border-bottom-left-radius: 4px;
}

.gorilla-chat__dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gorilla-text-muted);
	animation: gorilla-dot-bounce 1.4s ease-in-out infinite;
}

.gorilla-chat__dots span:nth-child(2) { animation-delay: 0.16s; }
.gorilla-chat__dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes gorilla-dot-bounce {
	0%, 60%, 100% { transform: translateY(0); }
	30%           { transform: translateY(-4px); }
}

/* ------------------------------------------------------------------ */
/*  Input area                                                        */
/* ------------------------------------------------------------------ */

.gorilla-chat__input-area {
	display: flex;
	align-items: flex-end;
	padding: 12px;
	background: var(--gorilla-bg-gradient);
	border-top: 1px solid var(--gorilla-border);
	gap: 8px;
	flex-shrink: 0;
}

.gorilla-chat__input {
	flex: 1;
	border: 1px solid var(--gorilla-border);
	border-radius: var(--gorilla-radius);
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.5;
	resize: none;
	outline: none; /* Custom focus-visible style below */
	background: var(--gorilla-canvas);
	color: var(--gorilla-text);
	transition: border-color 0.15s, box-shadow 0.15s;
	max-height: 100px;
}

.gorilla-chat__input::placeholder { color: var(--gorilla-text-muted); }

.gorilla-chat__input:focus {
	border-color: var(--gorilla-primary);
	box-shadow: 0 0 0 2px rgba(222, 49, 99, 0.15);
}

.gorilla-chat__input:focus-visible {
	outline: 2px solid var(--gorilla-primary);
	outline-offset: 1px;
}

.gorilla-chat__input:disabled {
	background: rgba(18, 16, 46, 0.6);
	color: var(--gorilla-text-muted);
	cursor: not-allowed;
}

.gorilla-chat__send {
	width: 40px;
	height: 40px;
	border-radius: var(--gorilla-radius);
	background: var(--gorilla-primary);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.gorilla-chat__send:hover {
	background: var(--gorilla-primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 20px rgba(222, 49, 99, 0.3);
}

.gorilla-chat__send:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.gorilla-chat__send:focus-visible {
	outline: 2px solid var(--gorilla-primary);
	outline-offset: 2px;
}

.gorilla-chat__send svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ */
/*  Mobile (< 480px)                                                  */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
	.gorilla-chat__panel {
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100vh;
		border-radius: 0;
		border: none;
	}

	.admin-bar .gorilla-chat__panel {
		top: 32px;
		height: calc(100vh - 32px);
	}
}