/* === AI Goal Planner (Data Model) === */
.ai-model { background:#111827; border:1px solid #1f2937; border-radius:14px; padding:16px; color:#e5e7eb; }
.ai-model .gn-h { margin:0 0 6px; }
.ai-model .gn-sub { margin:0 0 14px; color:#94a3b8; }

.ai-grid {
  display:grid; gap:12px;
  grid-template-columns: repeat(6, minmax(0,1fr));
}
.ai-field { display:flex; flex-direction:column; gap:6px; grid-column: span 3; }
.ai-field span { font-size:.85rem; color:#aab4c5; }
.ai-field input, .ai-field select {
  background:#0b1220; color:#e5e7eb; border:1px solid #334155; border-radius:10px; padding:10px 12px;
}
@media (max-width: 768px) {
  .ai-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ai-field { grid-column: span 2; }
}

.ai-actions { display:flex; gap:10px; margin-top:10px; }
.ai-actions .gn-btn { padding:.6rem .9rem; }

.ai-out { margin-top:16px; border-top:1px dashed #334155; padding-top:14px; }
.ai-headline { font-weight:600; font-size:1rem; margin-bottom:10px; }

.ai-allocation { margin:8px 0 12px; }
.ai-bar { height:14px; background:#0b1220; border:1px solid #334155; border-radius:999px; overflow:hidden; display:flex; }
.ai-bar .eq   { background:#4ade80; }
.ai-bar .debt { background:#60a5fa; }
.ai-bar .gold { background:#f59e0b; }
.ai-legend { display:flex; gap:16px; align-items:center; margin-top:8px; font-size:.9rem; color:#cbd5e1; }
.ai-legend .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:baseline; }
.ai-legend .dot.eq { background:#4ade80; }
.ai-legend .dot.debt { background:#60a5fa; }
.ai-legend .dot.gold { background:#f59e0b; }

.ai-bullets { margin:10px 0 12px 18px; }
.ai-bullets li { margin:4px 0; }

.ai-cta-row { display:flex; gap:10px; flex-wrap:wrap; }
.ai-disclaimer { font-size:.75rem; color:#9aa8bf; margin-top:8px; opacity:.95; }

/* spacing between Smart Plan Generator and AI Goal Planner card */
#aiModelCard { 
  margin-top: 20px;           /* desktop+mobile */
}
@media (min-width: 768px){
  #aiModelCard { margin-top: 28px; }   /* a touch more on larger screens */
}

.ai-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  background: #0044ff1a;
  color: #fff;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.9rem;
  gap: 6px;
}

.ai-icon {
  width: 35px;
  height: 35px;
  filter: drop-shadow(0 0 8px #33aaff) brightness(1.5);
  animation: pulseGlow 2s infinite alternate;
}

@keyframes pulseGlow {
  from { filter: drop-shadow(0 0 5px #1ea0ff) brightness(1.3); }
  to { filter: drop-shadow(0 0 14px #33ccff) brightness(1.7); }
}

/* === Feasibility badge — professional muted design === */
#aiFeasibleMsg {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:8px;
  font-weight:500;
  font-size:0.95rem;
  letter-spacing:0.2px;
  margin-top:10px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.05);
  color:#ccc;
  backdrop-filter:blur(10px) saturate(1.2);
  transition:all 0.3s ease;
}

/* small glow dot before text */
#aiFeasibleMsg::before {
  content:'';
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 6px currentColor;
  opacity:0.9;
}

/* States */
#aiFeasibleMsg.ok {
  color:#5bd38b; /* soft green */
  background:rgba(91,211,139,0.08);
  border-color:rgba(91,211,139,0.15);
}

#aiFeasibleMsg.stretch {
  color:#eab308; /* muted amber */
  background:rgba(234,179,8,0.08);
  border-color:rgba(234,179,8,0.15);
}

#aiFeasibleMsg.risk {
  color:#f87171; /* muted red */
  background:rgba(248,113,113,0.08);
  border-color:rgba(248,113,113,0.15);
}

/* border accent on output container */
#aiModelOut {
  border-top:2px solid transparent;
  transition:border-color .4s ease;
}

ai-disclaimer {
  font-size: 12px;
  color: #9aa0a6;
  font-style: italic;
  margin-top: 8px;
  line-height: 1.4;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 6px;
}

/* make sure output has breathing room so Chat button doesn't overlap */
#aiModelOut {
  border-top: 2px solid transparent;
  transition: border-color .4s ease;
  padding-bottom: 32px;   /* extra padding below */
  margin-bottom: 32px;    /* pushes next card down so Chat FAB doesn't cover text */
}

/* CTA row: clean spacing + wrap nicely on mobile */
.ai-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* full-width buttons on small screens */
@media (max-width: 768px) {
  .ai-cta-row .gn-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* inline explanation panel */
.ai-explain {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: rgba(15,23,42,0.9);
  font-size: 0.9rem;
  color: #cbd5e1;
}

.ai-explain h4 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
}

.ai-explain ul {
  margin: 0 0 6px 18px;
  padding: 0;
}

.ai-explain li {
  margin: 3px 0;
}

.ai-explain-note {
  margin: 0;
  font-size: 0.85rem;
  color: #9ca3af;
}

/* Give output area breathing room so Chat FAB doesn't overlap */
#aiModelOut {
  border-top: 2px solid transparent;
  transition: border-color .4s ease;
  padding-bottom: 32px;   /* extra space inside */
  margin-bottom: 32px;    /* pushes next card down */
}

/* Feasibility badge spacing */
#aiFeasibleMsg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: #ccc;
  backdrop-filter: blur(10px) saturate(1.2);
  transition: all 0.3s ease;
}

/* CTA row under badge */
.ai-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Full-width buttons on small screens */
@media (max-width: 768px) {
  .ai-cta-row .gn-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* Explanation panel for "Why this allocation?" */
.ai-explain {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: rgba(15,23,42,0.9);
  font-size: 0.9rem;
  color: #cbd5e1;
}

.ai-explain h4 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
}

.ai-explain ul {
  margin: 0 0 6px 18px;
  padding: 0;
}

.ai-explain li {
  margin: 3px 0;
}

.ai-explain-note {
  margin: 0;
  font-size: 0.85rem;
  color: #9ca3af;
}