/* ── SMFJ Member Tools CSS ── */
:root {
  --smfj-navy: #0c1f3f;
  --smfj-navy2: #142d58;
  --smfj-gold: #F5C518;
  --smfj-gold-hover: #ddb015;
  --smfj-gold-pale: #fdf8e7;
  --smfj-body: #3d4555;
  --smfj-muted: #6b7590;
  --smfj-border: #dde2ed;
  --smfj-bg: #F8F9FC;
  --smfj-white: #ffffff;
  --smfj-green: #16a34a;
  --smfj-green-bg: #f0fdf4;
  --smfj-red: #dc2626;
  --smfj-radius: 8px;
  --smfj-radius-lg: 14px;
  --smfj-ff: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.smfj-tool {
  font-family: var(--smfj-ff);
  background: var(--smfj-white);
  border: 1px solid var(--smfj-border);
  border-radius: var(--smfj-radius-lg);
  overflow: hidden;
  max-width: 780px;
  margin: 0 auto 32px;
  box-shadow: 0 4px 24px rgba(12,31,63,0.07);
}

/* Header */
.smfj-tool-header {
  background: var(--smfj-navy);
  padding: 28px 32px 24px;
  position: relative;
  border-top: 3px solid var(--smfj-gold);
}
.smfj-tool-header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(245,197,24,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.smfj-tool-header h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--smfj-white) !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.02em;
  position: relative; z-index: 1;
}
.smfj-tool-header p {
  font-size: 14px !important;
  color: rgba(255,255,255,0.55) !important;
  margin: 0 !important;
  position: relative; z-index: 1;
  line-height: 1.6;
}

/* Body */
.smfj-tool-body { padding: 28px 32px; }

/* Form */
.smfj-form { display: flex; flex-direction: column; gap: 16px; }
.smfj-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.smfj-field { display: flex; flex-direction: column; gap: 6px; }
.smfj-field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--smfj-navy);
  font-family: var(--smfj-ff);
}
.smfj-hint {
  font-weight: 400;
  color: var(--smfj-muted);
  font-size: 12px;
}
.smfj-field input,
.smfj-field textarea,
.smfj-field select {
  font-family: var(--smfj-ff) !important;
  font-size: 14px !important;
  color: var(--smfj-body) !important;
  background: var(--smfj-bg) !important;
  border: 1.5px solid var(--smfj-border) !important;
  border-radius: var(--smfj-radius) !important;
  padding: 10px 14px !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  box-sizing: border-box;
  box-shadow: none !important;
}
.smfj-field input:focus,
.smfj-field textarea:focus,
.smfj-field select:focus {
  border-color: var(--smfj-navy) !important;
  box-shadow: 0 0 0 3px rgba(12,31,63,0.08) !important;
  background: var(--smfj-white) !important;
}
.smfj-field textarea { resize: vertical; min-height: 80px; }

/* Tip box */
.smfj-tip {
  background: var(--smfj-gold-pale);
  border: 1px solid rgba(245,197,24,0.3);
  border-left: 3px solid var(--smfj-gold);
  border-radius: var(--smfj-radius);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--smfj-body);
  line-height: 1.6;
}
.smfj-tip strong { color: var(--smfj-navy); }

/* Buttons */
.smfj-btn {
  display: inline-block !important;
  background: var(--smfj-gold) !important;
  color: var(--smfj-navy) !important;
  font-family: var(--smfj-ff) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  border-radius: var(--smfj-radius) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.18s, transform 0.15s !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(245,197,24,0.3) !important;
  width: auto !important;
  align-self: flex-start;
}
.smfj-btn:hover { background: var(--smfj-gold-hover) !important; transform: translateY(-1px); }
.smfj-btn:disabled { opacity: 0.5; cursor: not-allowed !important; transform: none !important; }

.smfj-btn-sm {
  display: inline-block !important;
  background: var(--smfj-navy) !important;
  color: var(--smfj-white) !important;
  font-family: var(--smfj-ff) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.smfj-btn-sm:hover { background: var(--smfj-navy2) !important; }

/* Loading */
.smfj-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  color: var(--smfj-muted);
  font-size: 14px;
  font-family: var(--smfj-ff);
}
.smfj-spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--smfj-border);
  border-top-color: var(--smfj-gold);
  border-radius: 50%;
  animation: smfj-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes smfj-spin { to { transform: rotate(360deg); } }

/* Result */
.smfj-result {
  border: 1px solid var(--smfj-border);
  border-radius: var(--smfj-radius);
  overflow: hidden;
  margin-top: 4px;
}
.smfj-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--smfj-bg);
  border-bottom: 1px solid var(--smfj-border);
}
.smfj-result-header h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--smfj-navy) !important;
  margin: 0 !important;
}
.smfj-result-actions { display: flex; gap: 8px; }
.smfj-result-content {
  padding: 20px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.75;
  color: var(--smfj-body);
  background: var(--smfj-white);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 520px;
  overflow-y: auto;
}
textarea.smfj-editable-result {
  width: 100%;
  min-height: 320px;
  max-height: 600px;
  resize: vertical;
  border: 1.5px solid #c8d4e8;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
  overflow-y: auto;
}
textarea.smfj-editable-result:focus {
  border-color: var(--smfj-navy);
}
.smfj-edit-hint {
  font-size: 12px;
  color: #888;
  margin: 6px 0 6px !important;
  padding: 0 !important;
}

/* ── CHAT TRAINER ── */
.smfj-trainer-setup h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--smfj-navy) !important;
  margin: 0 0 16px !important;
}
.smfj-scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
/* Scenario radio inputs — hidden inside label */
.smfj-scenario-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.smfj-scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.smfj-scenario-card {
  border: 2px solid var(--smfj-border);
  border-radius: var(--smfj-radius);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  user-select: none;
  display: block;
  position: relative;
}
.smfj-scenario-card:hover {
  border-color: var(--smfj-navy);
  background: var(--smfj-bg);
  transform: translateY(-2px);
}
.smfj-scenario-card.smfj-selected,
.smfj-scenario-card:has(input:checked) {
  border-color: var(--smfj-gold) !important;
  background: var(--smfj-gold-pale) !important;
}
.smfj-scenario-icon { font-size: 28px; margin-bottom: 8px; }
.smfj-scenario-name { font-size: 13px; font-weight: 700; color: var(--smfj-navy); margin-bottom: 4px; }
.smfj-scenario-desc { font-size: 11px; color: var(--smfj-muted); line-height: 1.4; }

/* Chat window */
.smfj-trainer-chat {
  border: 1px solid var(--smfj-border);
  border-radius: var(--smfj-radius);
  overflow: hidden;
}
.smfj-chat-header {
  background: var(--smfj-navy);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.smfj-chat-header-left { display: flex; align-items: center; gap: 8px; }
.smfj-chat-status {
  width: 8px; height: 8px;
  background: var(--smfj-green);
  border-radius: 50%;
  display: inline-block;
  animation: smfj-pulse 2s infinite;
}
@keyframes smfj-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
  60% { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
}
#smfj-scenario-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--smfj-white);
  font-family: var(--smfj-ff);
}
.smfj-chat-messages {
  min-height: 280px;
  max-height: 380px;
  overflow-y: auto;
  padding: 16px;
  background: var(--smfj-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.smfj-chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  font-family: var(--smfj-ff);
}
.smfj-chat-msg.customer { align-self: flex-start; }
.smfj-chat-msg.agent { align-self: flex-end; }
.smfj-chat-msg-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
  color: var(--smfj-muted);
}
.smfj-chat-msg.agent .smfj-chat-msg-label { text-align: right; color: var(--smfj-gold); }
.smfj-chat-msg-bubble {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.55;
}
.smfj-chat-msg.customer .smfj-chat-msg-bubble {
  background: var(--smfj-white);
  border: 1px solid var(--smfj-border);
  color: var(--smfj-body);
}
.smfj-chat-msg.agent .smfj-chat-msg-bubble {
  background: var(--smfj-navy);
  color: var(--smfj-white);
}
.smfj-chat-feedback {
  background: var(--smfj-gold-pale);
  border-top: 2px solid var(--smfj-gold);
  border-bottom: 1px solid rgba(245,197,24,0.3);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--smfj-body);
  font-family: var(--smfj-ff);
  line-height: 1.6;
}
.smfj-chat-feedback strong { color: var(--smfj-navy); }
.smfj-chat-input-wrap {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  background: var(--smfj-white);
  border-top: 1px solid var(--smfj-border);
  align-items: flex-end;
}
.smfj-chat-input-wrap textarea {
  flex: 1;
  font-family: var(--smfj-ff) !important;
  font-size: 14px !important;
  resize: none !important;
  border: 1.5px solid var(--smfj-border) !important;
  border-radius: var(--smfj-radius) !important;
  padding: 10px 14px !important;
  color: var(--smfj-body) !important;
  background: var(--smfj-bg) !important;
  outline: none !important;
}
.smfj-chat-input-wrap textarea:focus {
  border-color: var(--smfj-navy) !important;
  background: var(--smfj-white) !important;
}
.smfj-chat-loading {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--smfj-muted);
  font-family: var(--smfj-ff);
  background: var(--smfj-bg);
}
.smfj-chat-loading .smfj-spinner { width: 16px; height: 16px; border-width: 2px; }

/* Responsive */
@media (max-width: 600px) {
  .smfj-tool-header, .smfj-tool-body { padding: 20px; }
  .smfj-grid-2 { grid-template-columns: 1fr; }
  .smfj-scenario-grid { grid-template-columns: 1fr 1fr; }
}

/* ── IMPROVED CHAT TRAINER ── */

.smfj-scenario-skill {
  font-size: 10px;
  font-weight: 700;
  color: var(--smfj-gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.smfj-score-bar {
  background: var(--smfj-navy);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.smfj-score-bar-left { display: flex; align-items: center; gap: 8px; }
.smfj-score-bar-right { display: flex; align-items: center; gap: 8px; }
.smfj-score-label { font-size: 11px; color: rgba(255,255,255,0.4); font-family: var(--smfj-ff); }
.smfj-score-value { font-size: 16px; font-weight: 800; color: var(--smfj-gold); font-family: var(--smfj-ff); transition: color 0.3s; }
.smfj-score-turns { font-size: 11px; color: rgba(255,255,255,0.35); font-family: var(--smfj-ff); }

.smfj-skill-tip {
  background: var(--smfj-navy2);
  border-left: 3px solid var(--smfj-gold);
  padding: 10px 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  font-family: var(--smfj-ff);
  display: none;
}
.smfj-skill-tip strong { color: var(--smfj-gold); }

/* Feedback panel */
.smfj-feedback-panel {
  border-top: 1px solid var(--smfj-border);
  background: var(--smfj-bg);
}
.smfj-fb-score-main {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  font-family: var(--smfj-ff);
}
.smfj-fb-score-main span { font-size: 18px; opacity: 0.6; }
.smfj-fb-score-label { font-size: 12px; font-weight: 700; color: var(--smfj-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; margin-bottom: 10px; font-family: var(--smfj-ff); }

.smfj-feedback-scores {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 16px;
  background: var(--smfj-white);
  border-bottom: 1px solid var(--smfj-border);
  flex-wrap: wrap;
}
.smfj-fb-metrics { display: flex; gap: 12px; flex-wrap: wrap; }
.smfj-fb-metric {
  background: var(--smfj-bg);
  border: 1px solid var(--smfj-border);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--smfj-ff);
}
.smfj-fb-metric span { display: block; font-size: 10px; color: var(--smfj-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 2px; }
.smfj-fb-metric strong { font-size: 12px; color: var(--smfj-body); font-weight: 600; }

.smfj-feedback-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.smfj-fb-item { font-size: 13px; line-height: 1.6; font-family: var(--smfj-ff); padding: 8px 12px; border-radius: 6px; }
.smfj-fb-item span { font-weight: 700; margin-right: 4px; }
.smfj-fb-good { background: var(--smfj-green-bg); color: #14532d; }
.smfj-fb-good span { color: var(--smfj-green); }
.smfj-fb-improve { background: #fdf8e7; color: #713f12; }
.smfj-fb-improve span { color: #c9a518; }

.smfj-model-response {
  margin: 0 16px 14px;
  border: 1px solid rgba(245,197,24,0.3);
  border-left: 3px solid var(--smfj-gold);
  border-radius: 6px;
  background: var(--smfj-gold-pale);
  overflow: hidden;
}
.smfj-model-label {
  background: rgba(245,197,24,0.15);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #713f12;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--smfj-ff);
}
.smfj-model-text {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--smfj-body);
  font-style: italic;
  font-family: var(--smfj-ff);
}

/* Input area */
.smfj-input-actions { display: flex; flex-direction: column; gap: 8px; }
.smfj-btn-outline {
  display: inline-block !important;
  background: transparent !important;
  color: var(--smfj-muted) !important;
  font-family: var(--smfj-ff) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: var(--smfj-radius) !important;
  border: 1.5px solid var(--smfj-border) !important;
  cursor: pointer !important;
  transition: border-color 0.15s, color 0.15s !important;
  white-space: nowrap;
}
.smfj-btn-outline:hover { border-color: var(--smfj-navy) !important; color: var(--smfj-navy) !important; }
.smfj-btn-outline:disabled { opacity: 0.4; cursor: not-allowed !important; }

.smfj-chat-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--smfj-border);
  background: var(--smfj-bg);
}

/* Debrief panel */
.smfj-debrief {
  padding: 20px;
  font-family: var(--smfj-ff);
}
.smfj-debrief-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--smfj-gold);
}
.smfj-debrief-score { font-size: 52px; font-weight: 800; line-height: 1; }
.smfj-debrief-title { font-size: 20px; font-weight: 800; color: var(--smfj-navy); }
.smfj-debrief-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.smfj-debrief-stat {
  padding: 14px;
  border-radius: var(--smfj-radius);
  text-align: center;
}
.smfj-debrief-stat.good { background: var(--smfj-green-bg); border: 1px solid rgba(22,163,74,0.2); }
.smfj-debrief-stat.improve { background: #fff7ed; border: 1px solid rgba(245,158,11,0.2); }
.smfj-debrief-stat span { display: block; font-size: 11px; color: var(--smfj-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 4px; }
.smfj-debrief-stat strong { font-size: 14px; font-weight: 700; color: var(--smfj-navy); }

.smfj-debrief-section {
  background: var(--smfj-bg);
  border: 1px solid var(--smfj-border);
  border-radius: var(--smfj-radius);
  padding: 14px;
  margin-bottom: 10px;
}
.smfj-debrief-section h4 { font-size: 13px; font-weight: 700; color: var(--smfj-navy); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.smfj-debrief-section p { font-size: 13px; color: var(--smfj-body); line-height: 1.7; margin: 0; }
.smfj-debrief-section.good { background: var(--smfj-green-bg); border-color: rgba(22,163,74,0.2); }
.smfj-debrief-section.good h4 { color: var(--smfj-green); }
.smfj-debrief-section.improve { background: #fff7ed; border-color: rgba(245,158,11,0.2); }
.smfj-debrief-section.improve h4 { color: #c9a518; }
.smfj-debrief-section.focus { background: #eff6ff; border-color: rgba(59,130,246,0.2); }
.smfj-debrief-section.focus h4 { color: #1d4ed8; }
.smfj-debrief-section.expert { background: var(--smfj-gold-pale); border-left: 3px solid var(--smfj-gold); border-color: rgba(245,197,24,0.3); }
.smfj-debrief-section.expert h4 { color: #713f12; }
.smfj-debrief-section.expert p { font-style: italic; }

/* ── STEPS GUIDE ── */
.smfj-steps-guide {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--smfj-bg);
  border: 1px solid var(--smfj-border);
  border-left: 3px solid var(--smfj-gold);
  border-radius: var(--smfj-radius);
}
.smfj-step-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--smfj-body);
  line-height: 1.6;
  font-family: var(--smfj-ff);
}
.smfj-step-num {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: var(--smfj-gold);
  color: var(--smfj-navy);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.smfj-step-text strong { color: var(--smfj-navy); }

/* ── USAGE LIMIT ── */
.smfj-usage-counter {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  font-family: var(--smfj-ff);
  margin-top: 6px;
  position: relative;
  z-index: 1;
}
.smfj-usage-counter.smfj-usage-low {
  color: #fbbf24;
  font-weight: 600;
}

.smfj-limit-msg {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 3px solid #f97316;
  border-radius: var(--smfj-radius);
  padding: 16px;
  margin-bottom: 20px;
  font-family: var(--smfj-ff);
}
.smfj-limit-icon { font-size: 24px; flex-shrink: 0; }
.smfj-limit-msg strong { display: block; font-size: 14px; color: #9a3412; margin-bottom: 4px; }
.smfj-limit-msg p { font-size: 13px; color: #c2410c; margin: 0; line-height: 1.5; }

/* ── PRIVACY NOTICE ── */
.smfj-privacy-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--smfj-green-bg);
  border: 1px solid rgba(22,163,74,0.2);
  border-radius: var(--smfj-radius);
  padding: 12px 14px;
  font-size: 13px;
  color: #166534;
  line-height: 1.55;
  margin-bottom: 20px;
  font-family: var(--smfj-ff);
}
.smfj-privacy-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }


.smfj-model-empty {
  color: var(--smfj-muted) !important;
  font-style: normal !important;
  font-size: 12px !important;
}