/* ============================================
   SKRAPP.PRO — Diagnostic UI v3.1.7
   ============================================ */

/* === WRAPPER PRINCIPALE === */
.ai-cols {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: #1a1a2e;
  max-width: 800px;
  margin: 0 auto;
}

/* === CARD BASE === */
.ai-col.ai-section {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(74, 45, 127, 0.10);
  border: 1px solid #e8e0f5;
}

/* === HEADER CARD (viola scuro) === */
.ai-col.ai-section > h2:first-child,
.ai-card-header {
  background: linear-gradient(135deg, #4a2d7f 0%, #5c3a9e 100%);
  color: #ffffff;
  margin: 0;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Label destra nell'header (es. "RIEPILOGO", "OGGI") */
.ai-col.ai-section > h2:first-child::after,
.ai-header-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}

/* === BODY CARD === */
.ai-col.ai-section > p,
.ai-col.ai-section > ul,
.ai-col.ai-section > ol,
.ai-card-body {
  padding: 16px 20px;
  margin: 0;
  line-height: 1.6;
}

.ai-col.ai-section > ul,
.ai-col.ai-section > ol {
  padding-left: 36px;
}

.ai-col.ai-section > ul li,
.ai-col.ai-section > ol li {
  margin-bottom: 6px;
  color: #3a2060;
}

/* === CAUSE POSSIBILI — item lista === */
.ai-col.ai-section > ul > li > h3,
.ai-cause-title {
  color: #4a2d7f;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

/* === BADGE PROBABILITÀ / URGENZA === */
.ai-likelihood,
.ai-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Alta */
.ai-lk-alta, .ai-badge-alta {
  background: #ffe4e4;
  color: #c0392b;
  border: 1px solid #f5c6c6;
}

/* Media */
.ai-lk-media, .ai-badge-media {
  background: #fff3cd;
  color: #b8860b;
  border: 1px solid #f0d080;
}

/* Bassa */
.ai-lk-bassa, .ai-badge-bassa {
  background: #d4f5e4;
  color: #1a7a4a;
  border: 1px solid #a8e6c4;
}

/* === GUASTI IDENTIFICATI — card singolo guasto === */
.ai-fault-card {
  background: #f8f5ff;
  border: 1px solid #e0d6f5;
  border-radius: 10px;
  margin: 12px 20px;
  overflow: hidden;
}

.ai-fault-header {
  background: linear-gradient(135deg, #4a2d7f 0%, #5c3a9e 100%);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.95rem;
}

.ai-fault-header h3 {
  margin: 0;
  font-size: 0.95rem;
  color: #fff;
}

.ai-fault-body {
  padding: 14px 16px;
}

.ai-fault-body p {
  color: #5a3a8a;
  margin: 0 0 10px 0;
  line-height: 1.5;
}

/* === COSTO STIMATO === */
.ai-cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f0ebff;
  border: 1px solid #d8ccf5;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 10px 0;
}

.ai-cost-label {
  font-size: 0.88rem;
  color: #6b5a8a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-cost-amount {
  font-weight: 800;
  font-size: 1rem;
  color: #2d1a5e;
}

.ai-cost-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}

.ai-cost-table th {
  background: #f0ebff;
  text-align: left;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: #4a2d7f;
  border-bottom: 2px solid #d8ccf5;
}

.ai-cost-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #ede8f8;
  font-size: 0.9rem;
  color: #2d1a5e;
}

.ai-cost-table td:last-child {
  font-weight: 700;
  color: #1a7a4a;
}

/* === URGENCY BOX === */
.ai-urgency-box {
  border-radius: 8px;
  padding: 10px 16px;
  margin: 10px 0;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-urgency-alta {
  background: #ffe4e4;
  color: #c0392b;
  border-left: 4px solid #c0392b;
}

.ai-urgency-media {
  background: #fff3cd;
  color: #b8860b;
  border-left: 4px solid #b8860b;
}

.ai-urgency-bassa {
  background: #d4f5e4;
  color: #1a7a4a;
  border-left: 4px solid #1a7a4a;
}

/* === PROFESSIONISTA CONSIGLIATO === */
.ai-pro-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
}

.ai-pro-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f8f5ff;
  border: 1px solid #e0d6f5;
  border-radius: 10px;
  padding: 14px 16px;
}

.ai-pro-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.ai-pro-info strong {
  display: block;
  font-size: 0.95rem;
  color: #4a2d7f;
  margin-bottom: 4px;
}

.ai-pro-info span,
.ai-pro-info p {
  font-size: 0.85rem;
  color: #6b5a8a;
  margin: 0;
  line-height: 1.5;
}

/* === CTA BUTTON === */
.ai-cta-wrap {
  padding: 8px 20px 20px;
  text-align: center;
}

.ai-cta-btn {
  display: inline-block;
  background: linear-gradient(135deg, #4a2d7f 0%, #5c3a9e 100%);
  color: #ffffff !important;
  padding: 13px 28px;
  border-radius: 30px;
  font-weight: 700;
  text-decoration: none !important;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(74, 45, 127, 0.35);
  transition: all 0.2s ease;
}

.ai-cta-btn:hover {
  background: linear-gradient(135deg, #3a2060 0%, #4a2d7f 100%);
  box-shadow: 0 6px 18px rgba(74, 45, 127, 0.45);
  transform: translateY(-1px);
}

/* === DISCLAIMER === */
.ai-disclaimer-box {
  background: #f8f5ff;
  border: 1px solid #e0d6f5;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 20px 16px;
  font-size: 0.82rem;
  color: #6b5a8a;
  line-height: 1.6;
}

.ai-disclaimer-box a {
  color: #4a2d7f;
  text-decoration: underline;
}

/* === UTILIZZO DIAGNOSI (banner giallo) === */
.ai-usage-banner {
  background: #fffbea;
  border: 1px solid #f0d080;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ai-usage-banner strong {
  display: block;
  color: #7a5a00;
  margin-bottom: 4px;
}

.ai-usage-banner span {
  font-size: 0.88rem;
  color: #8a6a10;
}

/* === STRONG / LINK GLOBALI === */
.ai-col.ai-section strong {
  color: #2d1a5e;
}

.ai-col.ai-section a {
  color: #4a2d7f;
}

/* === RESPONSIVE === */
@media (max-width: 600px) {
  .ai-cols {
    gap: 14px;
  }
  .ai-fault-card {
    margin: 10px 12px;
  }
  .ai-cta-btn {
    padding: 12px 20px;
    font-size: 0.88rem;
  }
}