/**
 * WnChat – Widget CSS
 *
 * CSS custom properties are pre-defined here so brand tokens can be set
 * without touching the final stylesheet.
 *
 * Override any variable from your theme or via wp_add_inline_style().
 */

:root {
	/* Brand colours */
	--wnchat-color-primary:      #e60000;   /* Vodafone red – change as needed */
	--wnchat-color-primary-text: #ffffff;
	--wnchat-color-surface:      #ffffff;
	--wnchat-color-surface-alt:  #f5f5f5;
	--wnchat-color-border:       #d9d9d9;
	--wnchat-color-text:         #1a1a1a;
	--wnchat-color-text-muted:   #767676;

	/* Launcher button */
	--wnchat-launcher-size:      56px;
	--wnchat-launcher-radius:    50%;
	--wnchat-launcher-shadow:    0 4px 12px rgba(0, 0, 0, 0.2);

	/* Chat panel */
	--wnchat-panel-width:        360px;
	--wnchat-panel-height:       520px;
	--wnchat-panel-radius:       12px;
	--wnchat-panel-shadow:       0 8px 32px rgba(0, 0, 0, 0.15);

	/* Typography */
	--wnchat-font-family:        inherit;
	--wnchat-font-size-base:     14px;
	--wnchat-font-size-small:    12px;

	/* Transitions */
	--wnchat-transition:         200ms ease;

	/* Z-index */
	--wnchat-z-index:            9999;

	/* Position offsets (can be overridden per-page) */
	--wnchat-offset-x:           20px;
	--wnchat-offset-y:           20px;
}

/* ==========================================================================
   Root wrapper
   ========================================================================== */

[data-wnchat-root] {
	font-family:     var(--wnchat-font-family);
	font-size:       var(--wnchat-font-size-base);
	color:           var(--wnchat-color-text);
	box-sizing:      border-box;
}

[data-wnchat-root] *,
[data-wnchat-root] *::before,
[data-wnchat-root] *::after {
	box-sizing: inherit;
}

/* ==========================================================================
   Launcher button
   ========================================================================== */

.wnchat-launcher {
	position:        fixed;
	bottom:          var(--wnchat-offset-y);
	right:           var(--wnchat-offset-x);
	z-index:         var(--wnchat-z-index);

	width:           var(--wnchat-launcher-size);
	height:          var(--wnchat-launcher-size);
	border-radius:   var(--wnchat-launcher-radius);
	border:          none;
	padding:         0;
	cursor:          pointer;

	background-color: var(--wnchat-color-primary);
	color:           var(--wnchat-color-primary-text);
	box-shadow:      var(--wnchat-launcher-shadow);

	display:         flex;
	align-items:     center;
	justify-content: center;

	transition:      transform var(--wnchat-transition),
	                 box-shadow var(--wnchat-transition);
}

.wnchat-launcher:hover {
	transform:  scale(1.05);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.wnchat-launcher:focus-visible {
	outline:        2px solid var(--wnchat-color-primary);
	outline-offset: 3px;
}

.wnchat-launcher:active {
	transform: scale(0.97);
}

/* Icon visibility toggling */
.wnchat-launcher__icon-open,
.wnchat-launcher__icon-close {
	display:    flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--wnchat-transition),
	            transform var(--wnchat-transition);
}

.wnchat-launcher__icon-close {
	display: none;
}

.wnchat-launcher[aria-expanded="true"] .wnchat-launcher__icon-open {
	display: none;
}

.wnchat-launcher[aria-expanded="true"] .wnchat-launcher__icon-close {
	display: flex;
}

/* ==========================================================================
   Chat panel
   ========================================================================== */

.wnchat-panel {
	position:      fixed;
	bottom:        calc(var(--wnchat-offset-y) + var(--wnchat-launcher-size) + 12px);
	right:         var(--wnchat-offset-x);
	z-index:       var(--wnchat-z-index);

	width:         var(--wnchat-panel-width);
	height:        var(--wnchat-panel-height);
	border-radius: var(--wnchat-panel-radius);
	box-shadow:    var(--wnchat-panel-shadow);
	border:        1px solid var(--wnchat-color-border);

	background:    var(--wnchat-color-surface);
	display:       none;
	flex-direction: column;
	overflow:      hidden;

	transform:     translateY(8px);
	opacity:       0;
	transition:    opacity var(--wnchat-transition),
	               transform var(--wnchat-transition);
}

/* hidden attribute overrides display:none to flex when panel opens */
.wnchat-panel.wnchat-panel--open {
	display:   flex;
	opacity:   1;
	transform: translateY(0);
}

/* Full-screen on small viewports */
@media (max-width: 600px) {
	.wnchat-panel {
		bottom:        0;
		right:         0;
		left:          0;
		width:         100%;
		height:        100dvh;
		border-radius: 0;
	}
}

/* ==========================================================================
   Panel header
   ========================================================================== */

.wnchat-panel__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         0 16px;
	height:          52px;
	flex-shrink:     0;

	background-color: var(--wnchat-color-primary);
	color:           var(--wnchat-color-primary-text);
}

.wnchat-panel__title {
	font-size:   15px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.wnchat-panel__close {
	background:   transparent;
	border:       none;
	cursor:       pointer;
	color:        var(--wnchat-color-primary-text);
	font-size:    18px;
	line-height:  1;
	padding:      6px 4px;
	border-radius: 4px;
	opacity:      0.85;
	transition:   opacity var(--wnchat-transition);
}

.wnchat-panel__close:hover {
	opacity: 1;
}

.wnchat-panel__close:focus-visible {
	outline:        2px solid var(--wnchat-color-primary-text);
	outline-offset: 2px;
}

/* ==========================================================================
   Privacy notice
   ========================================================================== */

.wnchat-panel__privacy {
	padding:    8px 16px;
	font-size:  var(--wnchat-font-size-small);
	color:      var(--wnchat-color-text-muted);
	text-align: center;
	flex-shrink: 0;
	border-bottom: 1px solid var(--wnchat-color-border);
}

.wnchat-panel__privacy a {
	color:           var(--wnchat-color-primary);
	text-decoration: underline;
}

.wnchat-panel__privacy a:hover {
	text-decoration: none;
}

/* ==========================================================================
   Messages list
   ========================================================================== */

.wnchat-panel__messages {
	flex:        1 1 auto;
	overflow-y:  auto;
	padding:     12px 16px;
	display:     flex;
	flex-direction: column;
	gap:         8px;
	/* Keep scroll position at the bottom */
	justify-content: flex-end;
	scroll-behavior: smooth;
}

/* Allow list to grow beyond the flex container and scroll */
.wnchat-panel__messages-inner {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

/* ==========================================================================
   Message bubbles
   ========================================================================== */

.wnchat-msg {
	max-width:    78%;
	padding:      10px 14px;
	border-radius: 14px;
	line-height:  1.45;
	word-break:   break-word;
	font-size:    var(--wnchat-font-size-base);
}

/* Inbound (bot / agent) — left-aligned */
.wnchat-msg--in {
	align-self:       flex-start;
	background-color: var(--wnchat-color-surface-alt);
	color:            var(--wnchat-color-text);
	border-bottom-left-radius: 4px;
}

/* Outbound (visitor) — right-aligned */
.wnchat-msg--out {
	align-self:        flex-end;
	background-color:  var(--wnchat-color-primary);
	color:             var(--wnchat-color-primary-text);
	border-bottom-right-radius: 4px;
}

/* System / status messages — centred */
.wnchat-msg--system {
	align-self:  center;
	background:  transparent;
	color:       var(--wnchat-color-text-muted);
	font-size:   var(--wnchat-font-size-small);
	text-align:  center;
	padding:     4px 8px;
	max-width:   90%;
}

/* Links inside bot messages */
.wnchat-msg--in a {
	color:           var(--wnchat-color-primary);
	text-decoration: underline;
}

.wnchat-msg--in a:hover {
	text-decoration: none;
}

/* Links inside visitor messages */
.wnchat-msg--out a {
	color:           var(--wnchat-color-primary-text);
	text-decoration: underline;
}

/* ==========================================================================
   Button pills
   ========================================================================== */

.wnchat-buttons {
	display:    flex;
	flex-wrap:  wrap;
	gap:        8px;
	margin-top: 8px;
	align-self: flex-start;
	max-width:  78%;
}

.wnchat-btn-pill {
	background:    transparent;
	border:        1.5px solid var(--wnchat-color-primary);
	color:         var(--wnchat-color-primary);
	border-radius: 999px;
	padding:       6px 14px;
	font-size:     var(--wnchat-font-size-base);
	cursor:        pointer;
	transition:    background-color var(--wnchat-transition),
	               color var(--wnchat-transition);
	font-family:   var(--wnchat-font-family);
}

.wnchat-btn-pill:hover:not(:disabled) {
	background-color: var(--wnchat-color-primary);
	color:            var(--wnchat-color-primary-text);
}

.wnchat-btn-pill:focus-visible {
	outline:        2px solid var(--wnchat-color-primary);
	outline-offset: 2px;
}

.wnchat-btn-pill:disabled,
.wnchat-btn-pill[aria-disabled="true"] {
	opacity:      0.45;
	cursor:       not-allowed;
	border-color: var(--wnchat-color-border);
	color:        var(--wnchat-color-text-muted);
}

/* ==========================================================================
   Typing indicator
   ========================================================================== */

.wnchat-typing {
	display:     flex;
	align-items: center;
	gap:         5px;
	padding:     12px 16px;
	align-self:  flex-start;
}

.wnchat-typing__dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--wnchat-color-text-muted);
	animation:     wnchat-bounce 1.2s infinite ease-in-out;
}

.wnchat-typing__dot:nth-child(2) { animation-delay: 0.2s; }
.wnchat-typing__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes wnchat-bounce {
	0%, 60%, 100% { transform: translateY(0); }
	30%           { transform: translateY(-5px); }
}

/* ==========================================================================
   Slider message
   ========================================================================== */

.wnchat-slider-wrap {
	display:    flex;
	flex-direction: column;
	gap:        8px;
	margin-top: 8px;
	align-self: flex-start;
	max-width:  78%;
}

.wnchat-slider-input {
	width:       100%;
	accent-color: var(--wnchat-color-primary);
	cursor:       pointer;
}

.wnchat-slider-label {
	font-size:  var(--wnchat-font-size-small);
	color:      var(--wnchat-color-text-muted);
	text-align: center;
}

.wnchat-slider-submit {
	background:    var(--wnchat-color-primary);
	color:         var(--wnchat-color-primary-text);
	border:        none;
	border-radius: 6px;
	padding:       8px 16px;
	font-size:     var(--wnchat-font-size-base);
	cursor:        pointer;
	font-family:   var(--wnchat-font-family);
	transition:    opacity var(--wnchat-transition);
}

.wnchat-slider-submit:hover:not(:disabled) {
	opacity: 0.88;
}

.wnchat-slider-submit:disabled {
	opacity: 0.45;
	cursor:  not-allowed;
}

/* ==========================================================================
   Input row (textarea + send button)
   ========================================================================== */

.wnchat-panel__input-row {
	display:     flex;
	align-items: flex-end;
	gap:         8px;
	padding:     10px 12px;
	border-top:  1px solid var(--wnchat-color-border);
	flex-shrink: 0;
	background:  var(--wnchat-color-surface);
}

.wnchat-panel__input {
	flex:        1 1 auto;
	resize:      none;
	border:      1.5px solid var(--wnchat-color-border);
	border-radius: 8px;
	padding:     8px 10px;
	font-size:   var(--wnchat-font-size-base);
	font-family: var(--wnchat-font-family);
	color:       var(--wnchat-color-text);
	background:  var(--wnchat-color-surface);
	line-height: 1.4;
	max-height:  calc(1.4em * 3 + 16px); /* ~3 rows */
	overflow-y:  auto;
	transition:  border-color var(--wnchat-transition);
}

.wnchat-panel__input:focus {
	outline:      none;
	border-color: var(--wnchat-color-primary);
}

.wnchat-panel__input:disabled {
	background: var(--wnchat-color-surface-alt);
	color:      var(--wnchat-color-text-muted);
	cursor:     not-allowed;
}

.wnchat-panel__send {
	flex-shrink:   0;
	width:         38px;
	height:        38px;
	border-radius: 8px;
	border:        none;
	cursor:        pointer;
	background:    var(--wnchat-color-primary);
	color:         var(--wnchat-color-primary-text);
	display:       flex;
	align-items:   center;
	justify-content: center;
	padding:       0;
	transition:    opacity var(--wnchat-transition);
}

.wnchat-panel__send:hover:not(:disabled) {
	opacity: 0.88;
}

.wnchat-panel__send:focus-visible {
	outline:        2px solid var(--wnchat-color-primary);
	outline-offset: 2px;
}

.wnchat-panel__send:disabled {
	opacity: 0.4;
	cursor:  not-allowed;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wnchat-launcher,
	.wnchat-panel,
	.wnchat-launcher__icon-open,
	.wnchat-launcher__icon-close,
	.wnchat-panel__close,
	.wnchat-btn-pill,
	.wnchat-panel__send,
	.wnchat-panel__input,
	.wnchat-slider-submit {
		transition: none;
	}

	.wnchat-typing__dot {
		animation: none;
		opacity: 0.6;
	}
}