/* ============================================================
   Fanda Chat Experience — frontend styles
   Colors come from --fce-primary / --fce-secondary / --fce-accent
   (set from plugin settings). Mobile-first.
   ============================================================ */

.fce-root {
  --fce-radius: 16px;
  --fce-text: #1e293b;
  --fce-muted: #64748b;
  --fce-bg: #ffffff;
  --fce-soft: #f8fafc;
  --fce-border: #e2e8f0;
  --fce-bubble-in: #f1f5f9;
  --fce-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
  font-family: inherit;
  color: var(--fce-text);
}
.fce-root[data-fce-theme="dark"] {
  --fce-text: #f1f5f9;
  --fce-muted: #94a3b8;
  --fce-bg: #0f172a;
  --fce-soft: #1e293b;
  --fce-border: #334155;
  --fce-bubble-in: #1e293b;
  --fce-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.fce-root[data-fce-cards="sharp"] { --fce-radius: 4px; }

.fce-empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--fce-muted);
}

/* ---------------- Profile grid ---------------- */

.fce-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.fce-filter-pill {
  border: 1px solid var(--fce-border);
  background: var(--fce-bg);
  color: var(--fce-text);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.fce-filter-pill:hover { border-color: var(--fce-primary); color: var(--fce-primary); }
.fce-filter-pill.fce-active {
  background: var(--fce-primary);
  border-color: var(--fce-primary);
  color: #fff;
}

.fce-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) {
  .fce-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.5rem; }
}

.fce-card {
  background: var(--fce-bg);
  border: 1px solid var(--fce-border);
  border-radius: var(--fce-radius);
  overflow: hidden;
  box-shadow: var(--fce-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fce-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(225, 29, 72, 0.15);
}
.fce-card-link { text-decoration: none; color: inherit; display: block; }
.fce-card-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--fce-soft); }
.fce-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.fce-card-photo-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--fce-primary), var(--fce-accent));
  opacity: 0.35;
}
.fce-card-country {
  position: absolute; left: 0.6rem; bottom: 0.6rem;
  background: rgba(15, 23, 42, 0.75); color: #fff;
  font-size: 0.72rem; padding: 0.25rem 0.6rem; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.fce-card-body { padding: 0.9rem 1rem 1.1rem; }
.fce-card-name { margin: 0 0 0.35rem; font-size: 1.02rem; font-weight: 700; }
.fce-card-name span { font-weight: 400; color: var(--fce-muted); font-size: 0.88rem; }
.fce-card-tagline {
  margin: 0 0 0.8rem; font-size: 0.85rem; color: var(--fce-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fce-card-cta {
  display: inline-block;
  background: var(--fce-primary); color: #fff;
  font-size: 0.82rem; font-weight: 600;
  padding: 0.5rem 1.1rem; border-radius: 999px;
  transition: background 0.2s ease;
}
.fce-card:hover .fce-card-cta { background: var(--fce-secondary); }

/* ---------------- Chat ---------------- */

.fce-chat {
  max-width: 520px; margin: 0 auto;
  background: var(--fce-bg);
  border: 1px solid var(--fce-border);
  border-radius: var(--fce-radius);
  overflow: hidden;
  box-shadow: var(--fce-shadow);
  display: flex; flex-direction: column;
}
.fce-chat-header {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(135deg, var(--fce-primary), var(--fce-accent));
  color: #fff;
}
.fce-chat-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; object-position: top center; border: 2px solid rgba(255,255,255,0.7); flex-shrink: 0;
}
.fce-chat-avatar-placeholder { background: rgba(255,255,255,0.35); display: block; }
.fce-chat-id { display: flex; flex-direction: column; min-width: 0; }
.fce-chat-name { font-size: 1rem; }
.fce-chat-status { font-size: 0.78rem; opacity: 0.92; display: flex; align-items: center; gap: 0.35rem; }
.fce-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block; animation: fce-pulse 2s infinite; }
@keyframes fce-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.fce-chat-disclaimer {
  text-align: center; font-size: 0.7rem; color: var(--fce-muted);
  padding: 0.45rem; background: var(--fce-soft); border-bottom: 1px solid var(--fce-border);
}

.fce-messages {
  height: 380px; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--fce-soft);
}
@media (min-width: 768px) { .fce-messages { height: 440px; } }

.fce-msg { display: flex; animation: fce-msg-in 0.25s ease; }
@keyframes fce-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fce-msg-in { justify-content: flex-start; }
.fce-msg-out { justify-content: flex-end; }
.fce-bubble {
  max-width: 78%; padding: 0.65rem 0.95rem;
  font-size: 0.92rem; line-height: 1.45;
  border-radius: 18px; word-wrap: break-word;
}
.fce-msg-in .fce-bubble {
  background: var(--fce-bubble-in); color: var(--fce-text);
  border-bottom-left-radius: 6px;
}
.fce-msg-out .fce-bubble {
  background: var(--fce-primary); color: #fff;
  border-bottom-right-radius: 6px;
}

.fce-typing {
  display: none; align-items: center; gap: 5px;
  padding: 0.7rem 1rem; background: var(--fce-soft);
}
.fce-typing.fce-show { display: flex; }
.fce-typing span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fce-muted);
  animation: fce-blink 1.2s infinite;
}
.fce-typing span:nth-child(2) { animation-delay: 0.2s; }
.fce-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes fce-blink { 0%, 60%, 100% { opacity: 0.25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.fce-chips {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.6rem 1rem; background: var(--fce-soft);
}
.fce-chips:empty { display: none; }
.fce-chip {
  border: 1px solid var(--fce-primary); color: var(--fce-primary);
  background: transparent; border-radius: 999px;
  padding: 0.4rem 0.9rem; font-size: 0.82rem; cursor: pointer;
  transition: all 0.2s ease;
}
.fce-chip:hover { background: var(--fce-primary); color: #fff; }

.fce-input-form {
  display: flex; gap: 0.6rem; padding: 0.8rem 1rem;
  background: var(--fce-bg); border-top: 1px solid var(--fce-border);
}
.fce-input {
  flex: 1; border: 1px solid var(--fce-border);
  border-radius: 999px; padding: 0.7rem 1.1rem;
  font-size: 0.92rem; background: var(--fce-soft); color: var(--fce-text);
  outline: none;
}
.fce-input:focus { border-color: var(--fce-primary); }
.fce-send {
  width: 46px; height: 46px; border-radius: 50%;
  border: none; cursor: pointer; flex-shrink: 0;
  background: var(--fce-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, background 0.2s ease;
}
.fce-send:hover { background: var(--fce-secondary); transform: scale(1.06); }

/* ---------------- Quiz ---------------- */

.fce-quiz { max-width: 560px; margin: 0 auto; }
.fce-quiz-start, .fce-quiz-q, .fce-quiz-result {
  background: var(--fce-bg); border: 1px solid var(--fce-border);
  border-radius: var(--fce-radius); box-shadow: var(--fce-shadow);
  padding: 1.8rem; text-align: center;
  animation: fce-msg-in 0.3s ease;
}
.fce-quiz-start h3 { margin: 0 0 0.6rem; font-size: 1.35rem; }
.fce-quiz-start p { color: var(--fce-muted); margin: 0 0 1.4rem; }
.fce-btn {
  background: var(--fce-primary); color: #fff; border: none;
  border-radius: 999px; padding: 0.8rem 2rem;
  font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.fce-btn:hover { background: var(--fce-secondary); transform: translateY(-2px); }
.fce-btn-secondary { background: transparent; color: var(--fce-primary); border: 1px solid var(--fce-primary); margin-top: 1rem; }
.fce-btn-secondary:hover { background: var(--fce-primary); color: #fff; }

.fce-quiz-progress { height: 6px; background: var(--fce-soft); border-radius: 999px; margin-bottom: 1.4rem; overflow: hidden; }
.fce-quiz-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--fce-primary), var(--fce-accent)); border-radius: 999px; transition: width 0.3s ease; }
.fce-quiz-count { font-size: 0.8rem; color: var(--fce-muted); margin-bottom: 0.8rem; display: block; }
.fce-quiz-q h3 { margin: 0 0 1.2rem; font-size: 1.2rem; }
.fce-quiz-opts { display: flex; flex-direction: column; gap: 0.7rem; }
.fce-quiz-opt {
  border: 1px solid var(--fce-border); background: var(--fce-soft); color: var(--fce-text);
  border-radius: 12px; padding: 0.9rem 1.1rem; font-size: 0.95rem;
  cursor: pointer; text-align: left; transition: all 0.2s ease; width: 100%;
}
.fce-quiz-opt:hover { border-color: var(--fce-primary); color: var(--fce-primary); transform: translateX(4px); }

.fce-quiz-result h3 { margin: 0 0 0.4rem; font-size: 1.3rem; }
.fce-quiz-result > p { color: var(--fce-muted); margin: 0 0 1.4rem; }
.fce-quiz-matches { display: grid; gap: 1rem; margin-bottom: 0.5rem; }
@media (min-width: 520px) { .fce-quiz-matches { grid-template-columns: repeat(3, 1fr); } }
.fce-quiz-match {
  border: 1px solid var(--fce-border); border-radius: var(--fce-radius);
  overflow: hidden; background: var(--fce-bg); text-decoration: none; color: inherit;
  transition: transform 0.2s ease;
}
.fce-quiz-match:hover { transform: translateY(-4px); }
.fce-quiz-match img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top center; display: block; }
.fce-quiz-match-body { padding: 0.8rem; }
.fce-quiz-match-body strong { display: block; font-size: 0.95rem; }
.fce-quiz-match-body span { font-size: 0.78rem; color: var(--fce-muted); display: block; margin: 0.25rem 0 0.6rem; }
.fce-quiz-match-cta {
  display: inline-block; background: var(--fce-primary); color: #fff;
  font-size: 0.78rem; font-weight: 600; padding: 0.45rem 1rem; border-radius: 999px;
}

/* Fullscreen chat modal */
.fce-modal {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.85);
	align-items: center;
	justify-content: center;
	padding: 0;
	pointer-events: none;
}
.fce-modal.fce-open {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto;
}
.fce-modal-inner {
	position: relative;
	width: 100%;
	max-width: 480px;
	height: 100%;
	max-height: 100vh;
	background: var(--fce-bg, #fff);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
@media (min-width: 520px) {
	.fce-modal-inner {
		height: 92vh;
		border-radius: 16px;
		max-height: 900px;
	}
}
.fce-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,0.4);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.fce-modal-chat {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.fce-modal-chat .fce-chat {
	height: 100%;
}
/* Dark mode for modal */
.fce-modal.fce-dark .fce-modal-inner {
	background: #1a1a2e;
	color: #eee;
}

/* Embedded chat (below grid) */
.fce-embedded-chat {
	margin-top: 2rem;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	overflow: hidden;
}
.fce-embedded-chat .fce-chat {
	min-height: 500px;
}

/* App Mode — hide theme chrome, show only chat system */
body.fce-app-mode .site-header,
body.fce-app-mode .site-footer,
body.fce-app-mode .site-info,
body.fce-app-mode #masthead,
body.fce-app-mode #colophon,
body.fce-app-mode .widget-area,
body.fce-app-mode #secondary,
body.fce-app-mode .sidebar,
body.fce-app-mode .main-navigation,
body.fce-app-mode #site-navigation {
	display: none !important;
}
body.fce-app-mode .site-content,
body.fce-app-mode #content,
body.fce-app-mode .content-area,
body.fce-app-mode #primary {
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}
body.fce-app-mode .container,
body.fce-app-mode .grid-container,
body.fce-app-mode .inside-article,
body.fce-app-mode .separate-containers .site-main {
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
/* App header */
.fce-app-header {
	display: none;
	background: var(--fce-primary, #e11d48);
	color: #fff;
	padding: 14px 20px;
	text-align: center;
	font-size: 1.25rem;
	font-weight: 700;
	position: sticky;
	top: 0;
	z-index: 100;
}
body.fce-app-mode .fce-app-header {
	display: block;
}
.fce-app-header .fce-app-title {
	margin: 0;
}
.fce-app-header .fce-app-subtitle {
	font-size: 0.8rem;
	font-weight: 400;
	opacity: 0.9;
}