/* --- VARIABLES & RESET --- */
:root {
	--bg: #040404;
	--fg: #CDCDCD;
	--fg-muted: rgba(205, 205, 205, 0.37);
	--surface: #141414;
	--error: #71292A;
	--valid: #3E8F50;
	--color-time: #13726d;
	--color-pass: #876f22;
	--font-ui: 'Inter', sans-serif;
	--font-mono: 'Anonymous Pro', monospace;
	--input-height: 50px;
	--border-radius: 0px;
	--anim-curve: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

body {
	background-color: var(--bg);
	color: var(--fg);
	font-family: var(--font-ui);
	margin: 0;
	height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* --- WRAPPER --- */
.interface-wrapper {
	position: relative;
	width: 100%;
	max-width: 680px;
	padding: 54px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* --- DOMAIN LABEL (H2) --- */
.domain-label {
	font-size: 16px;
	color: var(--fg);
	margin: 0px;
	font-weight: 400;
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 0.5s var(--anim-curve), transform 0.5s var(--anim-curve);
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* VISIBILITY RULES */
/* Visible ONLY during detection and loading */
body.state-detected .domain-label,
body.state-loading .domain-label {
	opacity: 1;
	transform: translateY(0);
	animation: fadeColor 2s ease 0.5s forwards;
}

/* HIDDEN when finished or copying */
body.state-finished .domain-label,
body.state-copy-wait .domain-label,
body.state-copy-feedback .domain-label {
	opacity: 0;
	transform: translateY(-5px); /* Slide up slightly on exit */
}

@keyframes fadeColor {
	to { color: var(--fg-muted); }
}

/* --- INPUT CONTAINER --- */
.input-container {
	position: relative;
	height: var(--input-height);
	background: var(--surface);
	border-radius: var(--border-radius);
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	padding: 0px;
}

/* --- FIELDS --- */
.field-stack {
	position: relative;
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-areas: "stack";
}

.field {
	grid-area: stack;
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	color: var(--fg);
	font-family: var(--font-ui);
	font-size: 16px;
	font-weight: 400;
	outline: none;
	padding: 0 25px;
	
	/* HIDDEN STATE (Default) */
	opacity: 0;
	pointer-events: none;
	/* When Hiding: Fade out fast (0.2s) with NO delay */
	transition: opacity 0.2s ease 0s;
}

.field::placeholder { color: var(--fg-muted); opacity: 1; }

/* VISIBLE STATES */
/* When Appearing: Wait 0.2s (delay), then fade in slowly (0.3s) */
body:not(.mode-password):not(.mode-time) .input-main,
body.mode-password .input-pass,
body.mode-time .input-date {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.3s ease 0.2s;
}

/* --- DROPDOWN STYLING --- */
select.field {
	cursor: pointer;
	appearance: none;        /* Remove default arrow */
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: transparent;
}

/* Optional: Add back a custom arrow if you want, 
   but for this UI, clicking the field to see options is standard. */
select.field option {
	background-color: var(--surface);
	color: var(--fg);
	padding: 10px;
}

/* --- ACTIONS --- */
.actions {
	display: flex;
	align-items: center;
	gap: 0px;
	height: 100%;
}

.btn-icon {
	position: relative;
	width: 48px;
	height: 48px;
	border: none;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fg);
	transition: color 0.3s ease, background 0.2s ease;
	display: none;
	border-left: 2px solid var(--bg);
}

.material-symbols-rounded { font-size: 22px; user-select: none; }

.btn-toggle-time, .btn-toggle-pass { color: var(--fg-muted); }

/* VISIBILITY STATES */
body.state-start .btn-paste { display: flex; }
body.state-typing .btn-next { display: flex; }
body.state-detected .group-options { display: flex; }
body.state-detected .btn-enter { display: flex; }

/* Finished AND Copy state -> Show Copy Button */
body.state-finished .btn-copy,
body.state-copy-wait .btn-copy,
body.state-copy-feedback .btn-copy { display: flex; }

.group-options { display: none; align-items: center; gap: 0px; }
body.state-detected .group-options .btn-icon { display: flex; }

/* 1. Disable interactions on the button itself */
body.mode-time .btn-toggle-pass,
body.mode-time .btn-enter,
body.mode-password .btn-toggle-time,
body.mode-password .btn-enter {
	pointer-events: none;
}

body.mode-time .btn-toggle-pass .icon-stack,
body.mode-password .btn-toggle-time .icon-stack {
	opacity: 0.2;
}

/* 3. Fade the SINGLE ICON (for enter button) */
body.mode-time .btn-enter .icon,
body.mode-password .btn-enter .icon {
	opacity: 0.2;
}

/* --- ICONS --- */
.icon-stack { position: relative; width: 24px; height: 24px; }
.icon {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%) scale(0.5);
	opacity: 0; transition: all 0.4s var(--anim-curve);
}
.icon.active { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.i-close { color: var(--fg); } 
.i-check { color: var(--valid); }

.btn-toggle-time.has-data:not(.active-mode) .i-default { color: var(--color-time); opacity: 1; }
.btn-toggle-pass.has-data:not(.active-mode) .i-default { color: var(--color-pass); opacity: 1; }
.btn-icon.has-data { color: var(--fg); } 
.btn-toggle-time.active-mode .i-default, .btn-toggle-pass.active-mode .i-default { opacity: 0; }

/* --- LOADING BAR --- */
.loading-bar {
	position: absolute; bottom: 0; left: 0px; right: 0px;
	height: 2px; overflow: hidden; border-radius: 2px;
}
.loading-track {
	width: 100%; height: 100%;
	background: var(--valid);
	transform: translateX(-100%);
	opacity: 0;
	transition: opacity 0.5s ease;
}

/* Loading: Start Animation */
body.state-loading .loading-track {
	opacity: 1;
	animation: load 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Finished: Keep Visible (Full) */
body.state-finished .loading-track {
	opacity: 1;
	transform: translateX(0);
}

/* Copy States: Fade Out BAR */
body.state-copy-wait .loading-track,
body.state-copy-feedback .loading-track {
	opacity: 0;
}

body.state-error .loading-track {
	background: var(--error);
	opacity: 1;
	transform: translateX(0);
}

@keyframes load {
	0% { transform: translateX(-100%); }
	50% { transform: translateX(-30%); }
	100% { transform: translateX(0%); }
}

/* --- STATUS TEXT --- */
.status-container { height: 24px; margin-left: 0px; }

.status-text {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 400;
	margin: 0;
	opacity: 0;
	transform: translateY(-5px);
	transition: all 0.3s ease;
	color: var(--valid);
}

/* VISIBILITY: Show on Finished, Copy Feedback, or Error */
body.state-finished .status-text,
body.state-copy-feedback .status-text,
body.state-error .status-text {
	opacity: 1;
	transform: translateY(0);
}

/* HIDDEN during wait state */
body.state-copy-wait .status-text {
	opacity: 0;
}

body.state-error .status-text { color: var(--error); }