/* =============================================================
   FF AI — Frontend styles
   ============================================================= */

/* --- AI button --- */
.ff-ai-btn {
	background: linear-gradient(135deg, #FDFCF9, #F7F2E8) !important;
	border: 0.5px solid #D4AF7A !important;
	color: #8B6D3D !important;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ff-ai-btn:hover {
	background: #1A1A1A !important;
	color: #B8935E !important;
	border-color: #1A1A1A !important;
}
.ff-ai-spark {
	display: inline-block;
	animation: ff-ai-shine 2s ease-in-out infinite;
}
@keyframes ff-ai-shine {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.2); opacity: 0.85; }
}

/* --- Scout --- */
.ff-scout-wrap { max-width: 720px; margin: 0 auto; }
.ff-scout-form textarea {
	width: 100%;
	padding: 18px 22px;
	border: 0.5px solid var(--ff-border, #EDE8DF);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	background: var(--ff-paper, #fff);
	resize: vertical;
	min-height: 92px;
}
.ff-scout-form textarea:focus {
	outline: none;
	border-color: var(--ff-gold, #B8935E);
	box-shadow: 0 0 0 2px rgba(184, 147, 94, 0.1);
}
.ff-scout-results {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ff-scout-thinking {
	padding: 48px 32px;
	text-align: center;
	color: var(--ff-muted, #6B6B6B);
	background: var(--ff-sand, #F7F2E8);
	font-family: var(--ff-font-display, Georgia, serif);
	font-style: italic;
	font-size: 18px;
}
.ff-scout-thinking::after {
	content: '…';
	display: inline-block;
	animation: ff-dots 1.4s infinite;
}
@keyframes ff-dots {
	0%, 20%  { content: '.'; }
	40%      { content: '..'; }
	60%, 100%{ content: '...'; }
}

.ff-scout-filters-chip {
	display: inline-block;
	padding: 4px 12px;
	background: var(--ff-sand, #F7F2E8);
	color: var(--ff-gold-dark, #8B6D3D);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 4px 4px 0;
	font-weight: 500;
}

.ff-scout-result-card {
	display: grid;
	grid-template-columns: 100px 1fr auto;
	gap: 18px;
	align-items: center;
	padding: 18px 22px;
	background: var(--ff-paper, #fff);
	border: 0.5px solid var(--ff-border, #EDE8DF);
	transition: all 0.2s;
}
.ff-scout-result-card:hover { border-color: var(--ff-gold, #B8935E); transform: translateY(-2px); }
.ff-scout-result-thumb {
	width: 100px; height: 130px;
	background: var(--ff-taupe, #E8DCC4);
	overflow: hidden;
}
.ff-scout-result-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ff-scout-result-name {
	font-family: var(--ff-font-display, Georgia, serif);
	font-size: 20px;
	margin: 0 0 4px;
	font-weight: 500;
}
.ff-scout-result-location {
	font-size: 11px;
	color: var(--ff-muted-soft, #8B8B8B);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.ff-scout-result-why {
	font-size: 14px;
	color: var(--ff-muted, #6B6B6B);
	line-height: 1.5;
	font-style: italic;
}
.ff-scout-result-score {
	text-align: center;
	padding: 14px 18px;
	background: var(--ff-black, #1A1A1A);
	color: var(--ff-gold, #B8935E);
}
.ff-scout-result-score-value {
	font-family: var(--ff-font-display, Georgia, serif);
	font-size: 32px;
	line-height: 1;
	font-weight: 400;
}
.ff-scout-result-score-label {
	font-size: 9px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-top: 4px;
	opacity: 0.7;
}

@media (max-width: 620px) {
	.ff-scout-result-card { grid-template-columns: 70px 1fr; }
	.ff-scout-result-thumb { width: 70px; height: 90px; }
	.ff-scout-result-score { grid-column: 1 / -1; padding: 8px; }
	.ff-scout-result-score-value { font-size: 22px; }
}

/* --- AI Match badge (in applications list) --- */
.ff-ai-match-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: linear-gradient(135deg, #1A1A1A, #2A2A2A);
	color: #B8935E;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
}
.ff-ai-match-badge:hover { background: #B8935E; color: #1A1A1A; }
.ff-ai-match-badge.is-loading { opacity: 0.6; cursor: wait; }
.ff-ai-match-badge.is-loaded {
	cursor: default;
	background: transparent;
	color: #1A1A1A;
	border: 0.5px solid #B8935E;
}
.ff-ai-match-score-big {
	font-family: var(--ff-font-display, Georgia, serif);
	font-size: 18px;
	color: #B8935E;
	font-weight: 500;
}
.ff-ai-match-details {
	margin-top: 10px;
	padding: 12px 14px;
	background: #FAF7F0;
	border-left: 2px solid #B8935E;
	font-size: 13px;
	line-height: 1.5;
}
.ff-ai-match-details strong { display: block; margin-bottom: 4px; color: #8B6D3D; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.ff-ai-match-details ul { margin: 6px 0 0; padding-left: 20px; }

/* --- Bio generator result --- */
.ff-ai-bio-result {
	margin-top: 16px;
	padding: 20px 24px;
	background: #FAF7F0;
	border: 0.5px solid #E8DCC4;
	border-left: 3px solid #B8935E;
	font-style: italic;
	line-height: 1.7;
	color: var(--ff-text, #1A1A1A);
}
.ff-ai-bio-result::before {
	content: '✨';
	display: inline-block;
	margin-right: 8px;
}
.ff-ai-bio-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	justify-content: flex-end;
}

/* --- Photo coach --- */
.ff-ai-photo-feedback {
	margin-top: 16px;
	padding: 20px 24px;
	background: var(--ff-paper, #fff);
	border: 0.5px solid var(--ff-border, #EDE8DF);
}
.ff-ai-photo-score {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 14px;
}
.ff-ai-photo-score-big {
	font-family: var(--ff-font-display, Georgia, serif);
	font-size: 42px;
	color: var(--ff-gold, #B8935E);
	line-height: 1;
	font-weight: 400;
}
.ff-ai-photo-score-label {
	font-size: 11px;
	color: var(--ff-muted-soft, #8B8B8B);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.ff-ai-photo-list {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}
.ff-ai-photo-list li {
	padding: 6px 0 6px 24px;
	position: relative;
	font-size: 14px;
	line-height: 1.5;
}
.ff-ai-photo-list.is-strengths li::before {
	content: '✓';
	position: absolute;
	left: 4px;
	color: #10B981;
	font-weight: bold;
}
.ff-ai-photo-list.is-improvements li::before {
	content: '→';
	position: absolute;
	left: 4px;
	color: var(--ff-gold, #B8935E);
	font-weight: bold;
}
.ff-ai-photo-section-title {
	font-size: 11px;
	color: var(--ff-muted, #6B6B6B);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 12px 0 6px;
	font-weight: 500;
}

/* --- Notice & empty states --- */
.ff-ai-notice {
	padding: 16px 20px;
	background: var(--ff-sand, #F7F2E8);
	border-left: 3px solid var(--ff-gold, #B8935E);
	font-size: 14px;
	color: var(--ff-text, #1A1A1A);
	margin: 16px 0;
}
.ff-ai-notice-error {
	background: #FEE2E2;
	border-color: #DC2626;
	color: #991B1B;
}