/*
 * SRINI AI CHATBOX – Front-end widget CSS
 *
 * Brand alignment: dev.srini.ee
 *   - Font:    Satoshi (with system-ui fallback)
 *   - Primary: violet #6d4ef7 (clr-violet-500)
 *   - Aqua:    #3da5ed (clr-aqua-600) for soft accents
 *   - Style:   light surfaces, big radii, gradient accents, generous spacing
 *
 * CSS custom properties are inline-overridable so plugin admin "design"
 * settings still work (widget_color, widget_border_radius, chat_background,
 * widget_width, widget_font_family, bubble_style).
 *
 * WCAG AA: focus outlines, ≥4.5:1 text contrast on all surfaces.
 */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap');

/* ============================================================
   CSS Custom Properties — SRINI brand palette
   ============================================================ */
:root {
	/* Primary — violet */
	--tcp-primary:        #6d4ef7;
	--tcp-primary-700:    #573ce0;
	--tcp-primary-800:    #452ec0;
	--tcp-primary-100:    #eae6ff;
	--tcp-primary-200:    #cfc5ff;
	--tcp-primary-soft:   #f5f3ff;

	/* Secondary — aqua, used for visitor bubbles + inline accents */
	--tcp-aqua:           #3da5ed;
	--tcp-aqua-100:       #f4fbff;
	--tcp-aqua-200:       #e4f6ff;
	--tcp-aqua-300:       #c7edfd;

	/* Neutrals — gray scale */
	--tcp-gray-100:       #f8f8f9;
	--tcp-gray-200:       #eaeaeb;
	--tcp-gray-300:       #d2d2d5;
	--tcp-gray-400:       #a6a4ac;
	--tcp-gray-500:       #6b6a6f;
	--tcp-gray-700:       #3e3d40;
	--tcp-gray-900:       #121214;

	/* Status */
	--tcp-online:         #16a34a;     /* tailwind green-600 — friendlier than MS green */
	--tcp-offline:        #6b6a6f;
	--tcp-warn:           #f59e0b;
	--tcp-danger:         #dc2626;

	/* Surfaces */
	--tcp-bg:             #ffffff;
	--tcp-bg-soft:        #f8faff;
	--tcp-text:           var(--tcp-gray-900);
	--tcp-text-muted:     var(--tcp-gray-500);
	--tcp-border:         var(--tcp-gray-200);

	/* Geometry */
	--tcp-radius:         18px;        /* was 12 — softer, brand */
	--tcp-radius-lg:      24px;
	--tcp-radius-sm:      10px;
	--tcp-radius-pill:    9999px;
	--tcp-shadow:         0 12px 40px -8px rgba(45, 25, 130, 0.18),
	                      0 4px 12px rgba(0, 0, 0, 0.05);
	--tcp-shadow-btn:     0 8px 20px -2px rgba(109, 78, 247, 0.45),
	                      0 4px 10px -2px rgba(109, 78, 247, 0.25);

	/* Typography */
	--tcp-font:           "Satoshi", system-ui, -apple-system, "Segoe UI",
	                      Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Layout */
	--tcp-z:              999999;
	--tcp-w:              380px;
	--tcp-h:              580px;
	--tcp-btn-size:       60px;
	--tcp-offset:         24px;
}

/* ============================================================
   Widget wrapper
   ============================================================ */
#tcp-chat-widget {
	position:    fixed;
	z-index:     var(--tcp-z);
	font-family: var(--tcp-font);
	font-size:   14px;
	line-height: 1.55;
	color:       var(--tcp-text);
	box-sizing:  border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#tcp-chat-widget *,
#tcp-chat-widget *::before,
#tcp-chat-widget *::after {
	box-sizing: inherit;
}

.tcp-widget--bottom-right { bottom: var(--tcp-offset); right: var(--tcp-offset); }
.tcp-widget--bottom-left  { bottom: var(--tcp-offset); left:  var(--tcp-offset); }

/* ============================================================
   Toggle FAB — gradient violet, soft glow
   ============================================================ */
.tcp-toggle-btn {
	width:           var(--tcp-btn-size);
	height:          var(--tcp-btn-size);
	border-radius:   var(--tcp-radius-pill);
	background:      linear-gradient(135deg, var(--tcp-primary) 0%, #8c73fa 100%);
	color:           #fff;
	border:          none;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	box-shadow:      var(--tcp-shadow-btn);
	transition:      transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
	                 box-shadow 0.2s,
	                 background 0.2s;
	padding:         0;
	position:        relative;
	overflow:        hidden;
}

.tcp-toggle-btn::after {
	/* subtle rotating shine */
	content: '';
	position: absolute;
	inset: -50%;
	background: conic-gradient(from 0deg, transparent 70%, rgba(255,255,255,0.14) 80%, transparent 90%);
	animation: tcp-shine 6s linear infinite;
	pointer-events: none;
}
@keyframes tcp-shine { to { transform: rotate(360deg); } }

.tcp-toggle-btn:hover {
	transform:  scale(1.06);
	box-shadow: 0 14px 36px -2px rgba(109, 78, 247, 0.55),
	            0 6px 16px -2px rgba(109, 78, 247, 0.3);
}
.tcp-toggle-btn:active { transform: scale(0.96); }
.tcp-toggle-btn:focus-visible {
	outline: 3px solid var(--tcp-primary-200);
	outline-offset: 3px;
}

.tcp-toggle-btn__icon { display: flex; transition: opacity 0.18s; position: relative; z-index: 1; }
.tcp-toggle-btn__icon--close { display: none; }
.tcp-widget--open .tcp-toggle-btn__icon--chat  { display: none; }
.tcp-widget--open .tcp-toggle-btn__icon--close { display: flex; }
.tcp-toggle-btn svg { width: 26px; height: 26px; fill: currentColor; }

.tcp-unread-badge {
	position:      absolute;
	top:           4px;
	right:         4px;
	min-width:     20px;
	height:        20px;
	padding:       0 6px;
	background:    var(--tcp-danger);
	color:         #fff;
	border-radius: var(--tcp-radius-pill);
	font-size:     11px;
	font-weight:   700;
	display:       flex;
	align-items:   center;
	justify-content: center;
	border:        2px solid #fff;
	z-index:       2;
}

/* Animation modifiers */
.tcp-toggle-btn--pulse:not(.tcp-widget--open .tcp-toggle-btn) {
	animation: tcp-pulse 2.4s ease-in-out infinite;
}
@keyframes tcp-pulse {
	0%, 100% { box-shadow: var(--tcp-shadow-btn); }
	50%      { box-shadow: 0 0 0 10px rgba(109, 78, 247, 0.18),
	                       0 8px 20px -2px rgba(109, 78, 247, 0.45); }
}

/* ============================================================
   Chat window
   ============================================================ */
.tcp-chat-window {
	position:      absolute;
	bottom:        calc(var(--tcp-btn-size) + 14px);
	width:         var(--tcp-w);
	height:        var(--tcp-h);
	max-height:    calc(100vh - 100px);
	background:    var(--tcp-bg);
	border-radius: var(--tcp-radius-lg);
	box-shadow:    var(--tcp-shadow);
	display:       flex;
	flex-direction: column;
	overflow:      hidden;
	transform:     translateY(20px) scale(0.96);
	opacity:       0;
	pointer-events: none;
	transition:    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
	               opacity   0.22s;
	border:        1px solid var(--tcp-border);
}

.tcp-widget--bottom-right .tcp-chat-window { right: 0; transform-origin: bottom right; }
.tcp-widget--bottom-left  .tcp-chat-window { left:  0; transform-origin: bottom left;  }

.tcp-widget--open .tcp-chat-window {
	transform: translateY(0) scale(1);
	opacity:   1;
	pointer-events: auto;
}

.tcp-chat-window[hidden] { display: none !important; }

/* ============================================================
   Header — gradient violet → aqua, like SRINI hero sections
   ============================================================ */
.tcp-chat-header {
	background:    linear-gradient(135deg, var(--tcp-primary) 0%, var(--tcp-primary-700) 60%, #5d4eed 100%);
	color:         #fff;
	padding:       18px 20px;
	display:       flex;
	align-items:   center;
	justify-content: space-between;
	gap:           10px;
	flex-shrink:   0;
	position:      relative;
	overflow:      hidden;
}
.tcp-chat-header::after {
	/* soft top-right glow */
	content: '';
	position: absolute;
	top: -40px; right: -40px;
	width: 140px; height: 140px;
	background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
	pointer-events: none;
}

.tcp-chat-header__info { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.tcp-chat-header__text { display: flex; flex-direction: column; min-width: 0; }
.tcp-chat-header__name {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tcp-chat-header__status {
	font-size: 11.5px;
	opacity: 0.92;
	margin-top: 2px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.tcp-chat-header__actions { display: flex; gap: 4px; flex-shrink: 0; }
.tcp-chat-header__action {
	background: rgba(255, 255, 255, 0.12);
	border: none;
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: var(--tcp-radius-pill);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
}
.tcp-chat-header__action:hover { background: rgba(255, 255, 255, 0.22); }
.tcp-chat-header__action:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.tcp-chat-header__action svg { width: 16px; height: 16px; fill: currentColor; }

/* Avatar in header — circular, white-on-primary or initials */
.tcp-chat-header__avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--tcp-radius-pill);
	background: rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.01em;
	flex-shrink: 0;
	overflow: hidden;
}
.tcp-chat-header__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Status dot */
.tcp-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tcp-online);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
	display: inline-block;
}
.tcp-status-dot--offline { background: var(--tcp-offline); }

/* ============================================================
   Messages area
   ============================================================ */
.tcp-messages-area {
	flex: 1;
	overflow-y: auto;
	padding: 18px 16px;
	background: var(--tcp-bg-soft);
	display: flex;
	flex-direction: column;
	gap: 8px;
	scroll-behavior: smooth;
}

.tcp-messages-area::-webkit-scrollbar { width: 6px; }
.tcp-messages-area::-webkit-scrollbar-track { background: transparent; }
.tcp-messages-area::-webkit-scrollbar-thumb {
	background: var(--tcp-gray-300);
	border-radius: 4px;
}
.tcp-messages-area::-webkit-scrollbar-thumb:hover { background: var(--tcp-gray-400); }

/* ============================================================
   Message bubbles
   ============================================================ */
.tcp-message {
	display: flex;
	gap: 8px;
	max-width: 85%;
	animation: tcp-msg-in 0.25s ease-out;
}
@keyframes tcp-msg-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.tcp-message--visitor { align-self: flex-end;   flex-direction: row-reverse; }
.tcp-message--agent   { align-self: flex-start; }
.tcp-message--system  { align-self: center; max-width: 92%; }

.tcp-message__avatar {
	width: 28px;
	height: 28px;
	border-radius: var(--tcp-radius-pill);
	background: var(--tcp-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(109, 78, 247, 0.25);
}
.tcp-message__avatar svg { width: 14px; height: 14px; }

.tcp-message--visitor .tcp-message__avatar {
	background: var(--tcp-aqua);
	box-shadow: 0 2px 6px rgba(61, 165, 237, 0.3);
}

.tcp-message__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.tcp-message__sender {
	font-size: 11px;
	color: var(--tcp-text-muted);
	font-weight: 500;
	margin-left: 2px;
}

.tcp-message__text {
	padding: 10px 14px;
	border-radius: var(--tcp-radius);
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.tcp-message--agent .tcp-message__text {
	background: #fff;
	color: var(--tcp-text);
	border: 1px solid var(--tcp-gray-200);
	border-bottom-left-radius: 6px;
}

.tcp-message--visitor .tcp-message__text {
	background: linear-gradient(135deg, var(--tcp-primary) 0%, var(--tcp-primary-700) 100%);
	color: #fff;
	border-bottom-right-radius: 6px;
}

.tcp-message--ai .tcp-message__text {
	background: linear-gradient(135deg, var(--tcp-primary-100) 0%, #e6f2fe 100%);
	color: var(--tcp-text);
	border: 1px solid var(--tcp-primary-200);
	border-bottom-left-radius: 6px;
}
.tcp-message--ai .tcp-message__avatar {
	background: linear-gradient(135deg, var(--tcp-primary), var(--tcp-aqua));
}

.tcp-message--system .tcp-message__text {
	background: transparent;
	color: var(--tcp-text-muted);
	font-style: italic;
	font-size: 12.5px;
	text-align: center;
	padding: 4px 12px;
}

.tcp-message__time {
	font-size: 10.5px;
	color: var(--tcp-text-muted);
	margin: 4px 4px 0;
}
.tcp-message--visitor .tcp-message__time { text-align: right; }

.tcp-message--pending .tcp-message__text { opacity: 0.65; }
.tcp-message--failed  .tcp-message__text {
	background: #fff;
	color: var(--tcp-danger);
	border: 1px dashed var(--tcp-danger);
}

.tcp-ai-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: linear-gradient(135deg, var(--tcp-primary), var(--tcp-aqua));
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 2px 7px;
	border-radius: var(--tcp-radius-pill);
	margin-left: 6px;
	vertical-align: middle;
	text-transform: uppercase;
}

/* ============================================================
   Typing indicator
   ============================================================ */
.tcp-typing-indicator {
	display: inline-flex;
	gap: 3px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--tcp-gray-200);
	border-radius: var(--tcp-radius);
	border-bottom-left-radius: 6px;
	align-self: flex-start;
	margin: 4px 0 4px 36px;
}
.tcp-typing-indicator span {
	width: 7px;
	height: 7px;
	background: var(--tcp-gray-400);
	border-radius: 50%;
	animation: tcp-bounce 1.4s ease-in-out infinite;
}
.tcp-typing-indicator span:nth-child(2) { animation-delay: 0.16s; }
.tcp-typing-indicator span:nth-child(3) { animation-delay: 0.32s; }
@keyframes tcp-bounce {
	0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
	30%           { transform: translateY(-4px); opacity: 1; }
}

/* ============================================================
   Pre-chat form / Greeting card
   ============================================================ */
.tcp-prechat-form,
.tcp-offline-form {
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--tcp-bg-soft);
	flex: 1;
	overflow-y: auto;
}

.tcp-prechat-greeting,
.tcp-offline-greeting {
	background: linear-gradient(135deg, var(--tcp-primary-soft) 0%, var(--tcp-aqua-100) 100%);
	border: 1px solid var(--tcp-primary-200);
	border-radius: var(--tcp-radius);
	padding: 16px 18px;
	color: var(--tcp-text);
	font-size: 14px;
	line-height: 1.55;
}
.tcp-prechat-greeting strong,
.tcp-offline-greeting strong {
	color: var(--tcp-primary-700);
	font-weight: 600;
}

.tcp-form-input {
	width: 100%;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.4;
	background: #fff;
	border: 1.5px solid var(--tcp-gray-200);
	border-radius: var(--tcp-radius-sm);
	color: var(--tcp-text);
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	font-family: inherit;
}
.tcp-form-input:focus {
	border-color: var(--tcp-primary);
	box-shadow: 0 0 0 3px var(--tcp-primary-100);
}
.tcp-form-input::placeholder { color: var(--tcp-gray-400); }
.tcp-form-input--error {
	border-color: var(--tcp-danger);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

textarea.tcp-form-input { min-height: 96px; resize: vertical; }

/* Buttons — pill, gradient, slight rise on hover */
.tcp-btn,
.tcp-prechat-form button,
.tcp-offline-form button:not(.tcp-form-input) {
	width: 100%;
	padding: 13px 18px;
	background: linear-gradient(135deg, var(--tcp-primary) 0%, var(--tcp-primary-700) 100%);
	color: #fff;
	border: none;
	border-radius: var(--tcp-radius-pill);
	font-size: 14.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
	box-shadow: 0 4px 14px -2px rgba(109, 78, 247, 0.4);
	letter-spacing: -0.01em;
}
.tcp-btn:hover:not(:disabled),
.tcp-prechat-form button:hover:not(:disabled),
.tcp-offline-form button:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px -2px rgba(109, 78, 247, 0.5);
}
.tcp-btn:active:not(:disabled),
.tcp-prechat-form button:active:not(:disabled),
.tcp-offline-form button:active:not(:disabled) {
	transform: translateY(0);
}
.tcp-btn:disabled,
.tcp-prechat-form button:disabled,
.tcp-offline-form button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

label {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--tcp-gray-500);
	display: block;
	margin-bottom: 4px;
}

.tcp-privacy-link {
	font-size: 12px;
	color: var(--tcp-text-muted);
	text-align: center;
	line-height: 1.5;
}
.tcp-privacy-link a {
	color: var(--tcp-primary);
	text-decoration: none;
	font-weight: 500;
}
.tcp-privacy-link a:hover { text-decoration: underline; }

/* ============================================================
   Message input row (composer) — paperclip + textarea + send
   ============================================================ */
.tcp-input-area {
	border-top: 1px solid var(--tcp-border);
	background: #fff;
	padding: 10px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-shrink: 0;
}

.tcp-composer {
	display: flex;
	gap: 6px;
	align-items: flex-end;
}

.tcp-icon-btn {
	width: 40px;
	height: 40px;
	border-radius: var(--tcp-radius-pill);
	background: var(--tcp-bg-soft);
	color: var(--tcp-gray-500);
	border: 1.5px solid var(--tcp-border);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	padding: 0;
}
.tcp-icon-btn:hover {
	background: var(--tcp-primary-soft);
	color: var(--tcp-primary);
	border-color: var(--tcp-primary-200);
}
.tcp-icon-btn:focus-visible {
	outline: 3px solid var(--tcp-primary-100);
	outline-offset: 1px;
}
.tcp-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tcp-file-input { display: none; }

.tcp-message-input {
	flex: 1;
	min-height: 40px;
	max-height: 120px;
	padding: 10px 16px;
	background: var(--tcp-bg-soft);
	border: 1.5px solid var(--tcp-border);
	border-radius: 20px;
	resize: none;
	outline: none;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.45;
	color: var(--tcp-text);
	transition: min-height 0.22s ease, max-height 0.22s ease, border-color 0.15s, box-shadow 0.15s, padding 0.18s;
}
.tcp-message-input:focus {
	border-color: var(--tcp-primary);
	box-shadow: 0 0 0 3px var(--tcp-primary-100);
	min-height: 90px;     /* Expand on focus so the visitor sees more text */
	max-height: 220px;
	padding-top: 12px;
	padding-bottom: 12px;
}
.tcp-message-input::placeholder { color: var(--tcp-gray-400); }

.tcp-send-btn {
	width: 40px;
	height: 40px;
	border-radius: var(--tcp-radius-pill);
	background: linear-gradient(135deg, var(--tcp-primary) 0%, var(--tcp-primary-700) 100%);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
	box-shadow: 0 4px 12px -2px rgba(109, 78, 247, 0.45);
}
.tcp-send-btn:hover:not(:disabled) {
	transform: translateY(-1px) scale(1.04);
	box-shadow: 0 6px 16px -2px rgba(109, 78, 247, 0.55);
}
.tcp-send-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.tcp-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tcp-send-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* Attachment chips (pre-send staging area) */
.tcp-attachments-staged {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-height: 88px;
	overflow-y: auto;
}
.tcp-attachment-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--tcp-primary-soft);
	border: 1px solid var(--tcp-primary-200);
	border-radius: var(--tcp-radius-pill);
	padding: 4px 10px 4px 12px;
	font-size: 12px;
	color: var(--tcp-primary-700);
	max-width: 100%;
	font-weight: 500;
}
.tcp-attachment-chip__name {
	max-width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tcp-attachment-chip__size {
	font-size: 11px;
	color: var(--tcp-text-muted);
	font-weight: 400;
}
.tcp-attachment-chip__remove {
	background: transparent;
	border: none;
	color: var(--tcp-primary-700);
	cursor: pointer;
	width: 18px;
	height: 18px;
	border-radius: var(--tcp-radius-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 14px;
	line-height: 1;
	transition: background 0.12s;
}
.tcp-attachment-chip__remove:hover { background: rgba(109, 78, 247, 0.18); }
.tcp-attachment-chip--uploading { opacity: 0.7; }
.tcp-attachment-chip--error {
	background: #fee2e2;
	border-color: #fecaca;
	color: var(--tcp-danger);
}

/* Drag-over highlight on the whole input area */
.tcp-input-area--drop-target {
	background: var(--tcp-primary-soft);
	box-shadow: inset 0 0 0 2px var(--tcp-primary-200);
}

/* Attachment links in message bubbles (after send) */
.tcp-message__attachments {
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tcp-message__attachment-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: inherit;
	text-decoration: none;
	padding: 4px 8px;
	background: rgba(255, 255, 255, 0.18);
	border-radius: var(--tcp-radius-sm);
}
.tcp-message__attachment-link:hover { text-decoration: underline; }
.tcp-message--agent .tcp-message__attachment-link {
	background: var(--tcp-bg-soft);
	border: 1px solid var(--tcp-gray-200);
}

/* ============================================================
   Footer
   ============================================================ */
.tcp-chat-footer {
	border-top: 1px solid var(--tcp-border);
	background: #fff;
	padding: 8px 14px;
	font-size: 11px;
	color: var(--tcp-text-muted);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-shrink: 0;
}
.tcp-chat-footer__link {
	color: var(--tcp-primary);
	text-decoration: none;
	font-weight: 500;
}
.tcp-chat-footer__link:hover { text-decoration: underline; }
.tcp-chat-footer__branding { font-weight: 500; }
.tcp-chat-footer__brand-link {
	color: var(--tcp-primary);
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 0.04em;
}
.tcp-chat-footer__brand-link:hover { text-decoration: underline; }

/* ============================================================
   Offline / "thanks" success state
   ============================================================ */
.tcp-offline-sent {
	padding: 36px 20px;
	text-align: center;
	color: var(--tcp-text);
}
.tcp-offline-sent__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	background: var(--tcp-primary-100);
	color: var(--tcp-primary);
	border-radius: var(--tcp-radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tcp-offline-sent__title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 6px;
}
.tcp-offline-sent__text {
	font-size: 13.5px;
	color: var(--tcp-text-muted);
	line-height: 1.5;
}

/* ============================================================
   Responsive — under 480px, fill more of viewport
   ============================================================ */
/* Mobile (≤ 600px): chat window goes full-screen — much better UX than
   trying to position-relative to the FAB on a tiny viewport. The FAB
   itself is hidden while the chat is open so it doesn't overlap content. */
@media (max-width: 600px) {
	#tcp-chat-widget {
		--tcp-offset: 12px;
	}

	.tcp-chat-window {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100% !important;
		height: 100% !important;
		/* dvh = "dynamic viewport height" — accounts for iOS Safari URL
		   bar collapsing, unlike vh which can cut off content. */
		height: 100dvh !important;
		max-height: 100dvh !important;
		border-radius: 0 !important;
		border: none !important;
		transform-origin: center !important;
	}

	.tcp-widget--bottom-right .tcp-chat-window,
	.tcp-widget--bottom-left  .tcp-chat-window {
		right: 0;
		left: 0;
		transform-origin: center;
	}

	/* Hide FAB while chat is open — on mobile the chat takes the whole
	   screen, header X is the close affordance. */
	.tcp-widget--open .tcp-toggle-btn {
		display: none;
	}

	/* Header stays prominent at top of mobile screen */
	.tcp-chat-header {
		padding: 14px 16px;
		padding-top: max(14px, env(safe-area-inset-top, 14px));
	}

	/* Composer respects iOS bottom safe-area (home indicator) */
	.tcp-input-area {
		padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
	}

	/* Slightly smaller header buttons on mobile to fit lang toggle */
	.tcp-chat-header__action {
		width: 30px;
		height: 30px;
	}

	/* Prevent the bubble from going past the screen edge */
	.tcp-message {
		max-width: 88%;
	}

	/* iOS Safari auto-zooms any text/email/number/textarea input whose
	   computed font-size is below 16px when it gains focus — including
	   when the field is filled by the AutoFill bar. Force >= 16px on
	   mobile so the page never zooms in. (Desktop sizes stay 14–15px.) */
	#tcp-chat-widget .tcp-form-input,
	#tcp-chat-widget textarea.tcp-form-input,
	#tcp-chat-widget .tcp-message-input,
	#tcp-chat-widget input[type="text"],
	#tcp-chat-widget input[type="email"],
	#tcp-chat-widget input[type="search"],
	#tcp-chat-widget input[type="tel"],
	#tcp-chat-widget textarea {
		font-size: 16px !important;
	}
}

/* Lock body scroll while chat is open on mobile (added by JS via class).
   Stops background page from scrolling under the full-screen overlay. */
body.tcp-mobile-chat-open {
	overflow: hidden !important;
	position: fixed;
	width: 100%;
	height: 100%;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	#tcp-chat-widget *,
	#tcp-chat-widget *::before,
	#tcp-chat-widget *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   Bubble style override (admin setting "bubble_style")
   The admin stores 'rounded' | 'square' | 'pill' which we map to a
   data attribute on the widget element via JS-applied inline style.
   Falls back to default --tcp-radius if not set.
   ============================================================ */
[data-bubble="square"]  { --tcp-radius: 8px; }
[data-bubble="pill"]    { --tcp-radius: 28px; }

/* ============================================================
   Dark mode (when widget_theme=dark or auto + user prefers dark)
   ============================================================ */
.tcp-widget--dark,
.tcp-widget--auto {
	--tcp-bg:        #1a1b1e;
	--tcp-bg-soft:   #232428;
	--tcp-text:      #f3f3f3;
	--tcp-text-muted: #a8a8b0;
	--tcp-border:    #2e2f33;
	--tcp-gray-200:  #2e2f33;
	--tcp-gray-300:  #44464d;
	--tcp-primary-soft: #2a1f5f;
	--tcp-primary-100: #3a2a8a;
	--tcp-primary-200: #4d3aa8;
	--tcp-aqua-100:  #0f2942;
}

.tcp-widget--auto {
	/* Only dark variables when system prefers dark */
}
@media (prefers-color-scheme: light) {
	.tcp-widget--auto {
		--tcp-bg:        #ffffff;
		--tcp-bg-soft:   #f8faff;
		--tcp-text:      var(--tcp-gray-900);
		--tcp-text-muted: var(--tcp-gray-500);
		--tcp-border:    var(--tcp-gray-200);
		--tcp-primary-soft: #f5f3ff;
		--tcp-primary-100: #eae6ff;
		--tcp-primary-200: #cfc5ff;
		--tcp-aqua-100:  #f4fbff;
	}
}

.tcp-widget--dark .tcp-message--agent .tcp-message__text,
.tcp-widget--dark .tcp-message--ai .tcp-message__text {
	background: #2a2b30;
	border-color: #2e2f33;
}
.tcp-widget--dark .tcp-form-input,
.tcp-widget--dark .tcp-message-input {
	background: #2a2b30;
	border-color: #44464d;
	color: #f3f3f3;
}
.tcp-widget--dark .tcp-chat-footer { background: #232428; }

/* ============================================================
   Proactive trigger bubble — soft pop next to the FAB
   ============================================================ */
.tcp-proactive-bubble {
	position: absolute;
	bottom: calc(var(--tcp-btn-size) + 14px);
	max-width: 280px;
	min-width: 200px;
	padding: 14px 36px 14px 16px;
	background: #fff;
	color: var(--tcp-text);
	border-radius: var(--tcp-radius);
	box-shadow: var(--tcp-shadow);
	border: 1px solid var(--tcp-border);
	font-size: 13.5px;
	line-height: 1.45;
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px) scale(0.96);
	transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
	z-index: 1;
}
.tcp-widget--bottom-right .tcp-proactive-bubble { right: 0; transform-origin: bottom right; }
.tcp-widget--bottom-left  .tcp-proactive-bubble { left:  0; transform-origin: bottom left; }

.tcp-proactive-bubble--in {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.tcp-proactive-bubble:hover {
	border-color: var(--tcp-primary-200);
	box-shadow: 0 16px 48px -8px rgba(45, 25, 130, 0.22),
	            0 6px 16px rgba(0, 0, 0, 0.06);
}

.tcp-proactive-text {
	font-weight: 500;
	color: var(--tcp-text);
}
.tcp-proactive-cta {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tcp-primary);
	letter-spacing: 0.01em;
}

.tcp-proactive-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--tcp-text-muted);
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.15s, color 0.15s;
}
.tcp-proactive-close:hover {
	background: var(--tcp-gray-100);
	color: var(--tcp-text);
}

/* Add a subtle "bounce" animation that calls attention to the bubble.
   Kicks in 1s after entrance to grab the eye. */
.tcp-proactive-bubble--in {
	animation: tcp-proactive-attention 0.7s ease-out 1.2s 1;
}
@keyframes tcp-proactive-attention {
	0%, 100% { transform: translateY(0) scale(1); }
	30%      { transform: translateY(-4px) scale(1.02); }
	60%      { transform: translateY(0) scale(0.99); }
}

/* Mobile — narrower bubble */
@media (max-width: 480px) {
	.tcp-proactive-bubble {
		max-width: calc(100vw - 32px);
		font-size: 13px;
	}
}

/* Dark mode */
.tcp-widget--dark .tcp-proactive-bubble {
	background: #2a2b30;
	border-color: #44464d;
	color: #f3f3f3;
}

/* ============================================================
   Language toggle (ET ↔ EN)
   ============================================================ */
.tcp-lang-toggle {
	display: inline-flex;
	background: rgba(255, 255, 255, 0.14);
	border-radius: var(--tcp-radius-pill);
	padding: 2px;
	gap: 0;
	flex-shrink: 0;
}
.tcp-lang-btn {
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.78);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 4px 9px;
	border-radius: var(--tcp-radius-pill);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	font-family: inherit;
	min-width: 30px;
}
.tcp-lang-btn:hover { color: #fff; }
.tcp-lang-btn--active {
	background: #fff;
	color: var(--tcp-primary-700);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.tcp-lang-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 1px;
}

/* ============================================================
   Markdown rendering inside AI/agent message bubbles
   ============================================================ */
.tcp-message__text--md p { margin: 0; }
.tcp-message__text--md p + p { margin-top: 8px; }

.tcp-message__text--md h3.tcp-md-h {
	font-size: 1em;
	font-weight: 700;
	margin: 4px 0 6px;
	letter-spacing: -0.01em;
}

.tcp-message__text--md ul.tcp-md-list,
.tcp-message__text--md ol.tcp-md-list {
	margin: 6px 0 4px 0;
	padding-left: 22px;
}
.tcp-message__text--md ul.tcp-md-list { list-style: disc; }
.tcp-message__text--md ol.tcp-md-list { list-style: decimal; }
.tcp-message__text--md li { margin: 2px 0; }

.tcp-message__text--md a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
.tcp-message__text--md a:hover { text-decoration-thickness: 2px; }

.tcp-message__text--md strong { font-weight: 700; }
.tcp-message__text--md em     { font-style: italic; }

.tcp-message__text--md code.tcp-md-code {
	background: rgba(0, 0, 0, 0.06);
	padding: 1px 6px;
	border-radius: 4px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.9em;
}
.tcp-message__text--md pre.tcp-md-pre {
	background: rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.06);
	padding: 8px 10px;
	border-radius: 6px;
	margin: 6px 0;
	overflow-x: auto;
	font-size: 12px;
	line-height: 1.4;
}
.tcp-message__text--md pre.tcp-md-pre code {
	background: transparent;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
}

/* AI/visitor bubble (gradient background, white text) — needs lighter tints */
.tcp-message--visitor .tcp-message__text--md code.tcp-md-code,
.tcp-message--ai      .tcp-message__text--md code.tcp-md-code {
	background: rgba(255, 255, 255, 0.22);
}
.tcp-message--visitor .tcp-message__text--md pre.tcp-md-pre,
.tcp-message--ai      .tcp-message__text--md pre.tcp-md-pre {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   Voice recording UI
   ============================================================ */
.tcp-recording {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	background: linear-gradient(135deg, #fee2e2, #fecaca);
	border: 1px solid #fca5a5;
	border-radius: var(--tcp-radius-pill);
}

.tcp-rec-cancel {
	background: rgba(255, 255, 255, 0.6);
	border-color: transparent;
	color: var(--tcp-danger);
	width: 32px; height: 32px;
}
.tcp-rec-cancel:hover { background: #fff; color: #b91c1c; }

.tcp-rec-indicator {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tcp-danger);
	min-width: 0;
}

.tcp-rec-pulse {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--tcp-danger);
	flex-shrink: 0;
	animation: tcp-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes tcp-rec-pulse {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.8); }
}

.tcp-rec-time {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 12px;
	color: #b91c1c;
	margin-left: auto;
}

.tcp-rec-stop {
	width: 36px;
	height: 36px;
	border-radius: var(--tcp-radius-pill);
	background: var(--tcp-danger);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.15s, background 0.15s;
	box-shadow: 0 4px 12px -2px rgba(220, 38, 38, 0.45);
}
.tcp-rec-stop:hover { transform: scale(1.06); background: #b91c1c; }

/* Mic button — when active recording, visually emphasise it */
#tcp-mic-btn.tcp-mic-btn--recording {
	background: var(--tcp-danger);
	color: #fff;
	border-color: var(--tcp-danger);
	animation: tcp-rec-pulse 1.4s ease-in-out infinite;
}