/* =====================================================
   Tuft — Frontend UI
   ===================================================== */

:root {

	/* ── Tuft palette (matches tokens/tuft-tokens.css from brand kit) ── */
	--tuft-coral:     #e08a7e; /* Dusty coral — primary brand / action   */
	--tuft-sage:      #9fbe9c; /* Sage — secondary accent                */
	--tuft-lilac:     #c9b6d9; /* Lilac — tertiary, use sparingly        */
	--tuft-cream:     #fbf4ec; /* Cream — warm surface / background      */
	--tuft-cocoa:     #43352f; /* Cocoa — primary text / ink             */
	--tuft-coral-600: #cf6f62; /* Darker coral for hover states          */
	--tuft-hairline:  #ece3d7; /* Subtle warm border                     */

	/* ── Semantic aliases ── */
	--tuft-brand:       var(--tuft-coral);
	--tuft-brand-hover: var(--tuft-coral-600);
	--tuft-white:       #fff;
	--tuft-text:        var(--tuft-cocoa);
	--tuft-muted:       #7c6f66;
	--tuft-border:      var(--tuft-hairline);

	/* ── Shadows (from brand kit) ── */
	--tuft-shadow-fab:  0 12px 22px -8px rgba(224, 138, 126, 0.55);
	--tuft-shadow-card: 0 24px 48px -36px rgba(67, 53, 47, 0.35);
	--tuft-shadow:      var(--tuft-shadow-card);

	/* ── Radii (from brand kit) ── */
	--tuft-radius:    10px; /* sm — inputs, small elements  */
	--tuft-radius-md: 16px; /* md — modal card              */
	--tuft-radius-lg: 26px; /* lg — large cards             */

	/* ── Stacking ── */
	--tuft-z-button:    9000;
	--tuft-z-overlay:   9100;
	--tuft-z-highlight: 9200;
	--tuft-z-modal:     9300;

	/* ── System font stack (no CDN) ── */
	--tuft-font: ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Floating trigger button — circle FAB ── */

#tuft-trigger {
	position: fixed;
	right: 20px;
	top: 66.67%;
	transform: translateY(-50%);
	z-index: var(--tuft-z-button);

	width: 56px;
	height: 56px;
	border-radius: 50%; /* shapes the box-shadow to match the disc */
	padding: 0;

	display: grid;
	place-items: center;

	/* No CSS background — the brand-kit PNG provides the coral disc */
	background: none;
	border: none;
	cursor: pointer;
	box-shadow: var(--tuft-shadow-fab);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	font-family: var(--tuft-font);
}

#tuft-trigger img {
	width: 56px;
	height: 56px;
	display: block;
	pointer-events: none;
}

#tuft-trigger:hover {
	box-shadow: 0 16px 28px -8px rgba(224, 138, 126, 0.6);
	transform: translateY(calc(-50% - 2px));
}

#tuft-trigger:active {
	transform: translateY(-50%);
	box-shadow: var(--tuft-shadow-fab);
}

/* Tooltip that appears on hover */
#tuft-trigger::before {
	content: 'Leave feedback';
	position: absolute;
	right: calc(100% + 10px);
	bottom: 50%;
	transform: translateY(50%);
	background: var(--tuft-cocoa);
	color: var(--tuft-white);
	font-family: var(--tuft-font);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	padding: 6px 11px;
	border-radius: 7px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

#tuft-trigger::after {
	content: '';
	position: absolute;
	right: calc(100% + 5px);
	bottom: 50%;
	transform: translateY(50%) rotate(45deg);
	width: 8px;
	height: 8px;
	background: var(--tuft-cocoa);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

#tuft-trigger:hover::before,
#tuft-trigger:hover::after {
	opacity: 1;
}

#tuft-trigger svg {
	flex-shrink: 0;
}

/* ── Targeting overlay ── */

#tuft-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 15, 30, 0.45);
	z-index: var(--tuft-z-overlay);
	pointer-events: none; /* clicks pass through to real elements */
	display: none;
	backdrop-filter: blur(1px);
}

#tuft-overlay.active {
	display: block;
}

#tuft-overlay-hint {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 13px;
	font-family: inherit;
	padding: 8px 18px;
	border-radius: 100px;
	white-space: nowrap;
	pointer-events: none;
	letter-spacing: 0.01em;
}

#tuft-overlay-hint kbd {
	display: inline-block;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 4px;
	padding: 1px 6px;
	font-family: inherit;
	font-size: 12px;
}

/* Crosshair cursor on everything during targeting */
body.tuft-targeting,
body.tuft-targeting * {
	cursor: crosshair !important;
}

/* ── Element highlight box ── */

#tuft-highlight {
	position: fixed;
	display: none;
	z-index: var(--tuft-z-highlight);
	pointer-events: none;
	border: 2px solid var(--tuft-brand);
	border-radius: 3px;
	background: rgba(224, 138, 126, 0.08);
	box-shadow: 0 0 0 1px rgba(224, 138, 126, 0.2), inset 0 0 0 1px rgba(224, 138, 126, 0.1);
	transition: top 0.05s, left 0.05s, width 0.05s, height 0.05s;
}

/* ── Modal backdrop ── */

#tuft-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: var(--tuft-z-modal);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

#tuft-modal-backdrop.active {
	display: flex;
}

/* ── Modal card ── */

#tuft-modal {
	background: var(--tuft-white);
	border-radius: var(--tuft-radius);
	box-shadow: var(--tuft-shadow);
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	font-family: inherit;
}

#tuft-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px 16px;
	border-bottom: 1px solid var(--tuft-border);
}

#tuft-modal-header h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--tuft-text);
}

#tuft-modal-close {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--tuft-muted);
	padding: 4px;
	border-radius: 4px;
	line-height: 1;
	transition: color 0.1s, background 0.1s;
}

#tuft-modal-close:hover {
	color: var(--tuft-text);
	background: var(--tuft-border);
}

#tuft-modal-body {
	padding: 18px 20px 20px;
}

/* Screenshot canvas — draws to the modal's inner width, height is set by JS */
#tuft-screenshot-canvas {
	display: none;
	width: 100%;
	border-radius: 4px 4px 0 0;
	border: 1px solid var(--tuft-border);
	border-bottom: none;
	touch-action: none; /* prevent scroll-pan hijacking pointer events during drawing */
	cursor: crosshair;
}

#tuft-screenshot-canvas.visible {
	display: block;
}

/* Drawing toolbar — sits flush below the canvas */
#tuft-draw-toolbar {
	display: none; /* shown by JS once the canvas is ready */
	align-items: center;
	gap: 2px;
	padding: 4px 6px;
	background: #f9fafb;
	border: 1px solid var(--tuft-border);
	border-radius: 0 0 4px 4px;
	margin-bottom: 16px;
}

.tuft-draw-tool,
#tuft-draw-undo,
#tuft-draw-clear {
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px;
	border-radius: 4px;
	color: var(--tuft-muted);
	display: flex;
	align-items: center;
	line-height: 1;
	transition: color 0.1s, background 0.1s;
}

.tuft-draw-tool:hover,
#tuft-draw-undo:hover,
#tuft-draw-clear:hover {
	color: var(--tuft-text);
	background: var(--tuft-border);
}

.tuft-draw-tool.tuft-draw-active {
	color: var(--tuft-brand);
	background: rgba(224, 138, 126, 0.14);
}

.tuft-draw-sep {
	width: 1px;
	height: 16px;
	background: var(--tuft-border);
	margin: 0 4px;
	flex-shrink: 0;
}

/* Captured element info */
#tuft-element-info {
	background: #f3f4f6;
	border-radius: 5px;
	padding: 8px 12px;
	margin-bottom: 16px;
	font-size: 12px;
	color: var(--tuft-muted);
	display: none;
}

#tuft-element-info.visible {
	display: block;
}

#tuft-element-info code {
	color: #374151;
	font-size: 11px;
	word-break: break-all;
}

/* Form fields */
.tuft-field {
	margin-bottom: 14px;
}

.tuft-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--tuft-text);
	margin-bottom: 5px;
}

.tuft-field input,
.tuft-field textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--tuft-border);
	border-radius: 5px;
	padding: 8px 11px;
	font-family: inherit;
	font-size: 13px;
	color: var(--tuft-text);
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
	outline: none;
}

.tuft-field textarea {
	resize: vertical;
	min-height: 100px;
	line-height: 1.5;
}

.tuft-field input:focus,
.tuft-field textarea:focus {
	border-color: var(--tuft-brand);
	box-shadow: 0 0 0 3px rgba(224, 138, 126, 0.18);
}

/* User fields row */
#tuft-user-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Actions */
#tuft-modal-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 18px;
}

.tuft-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: 5px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: background 0.15s, opacity 0.15s;
}

.tuft-btn-primary {
	background: var(--tuft-brand);
	color: #fff;
}

.tuft-btn-primary:hover {
	background: var(--tuft-brand-hover);
}

.tuft-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.tuft-btn-secondary {
	background: var(--tuft-border);
	color: var(--tuft-text);
}

.tuft-btn-secondary:hover {
	background: #d1d5db;
}

/* Success state */
#tuft-success {
	text-align: center;
	padding: 32px 20px;
	display: none;
}

#tuft-success.visible {
	display: block;
}

#tuft-success-icon {
	width: 48px;
	height: 48px;
	background: #ecfdf5;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
	color: #059669;
}

#tuft-success h3 {
	margin: 0 0 6px;
	font-size: 16px;
	color: var(--tuft-text);
}

#tuft-success p {
	margin: 0;
	font-size: 13px;
	color: var(--tuft-muted);
}

/* Error message */
#tuft-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	border-radius: 5px;
	padding: 8px 12px;
	font-size: 13px;
	margin-bottom: 14px;
	display: none;
}

#tuft-error.visible {
	display: block;
}