/* =========================
   Scam Detector – Pure CSS Refresh
   (no HTML/JS changes needed)
========================= */

:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --primary: #2563eb;
  --primary-600: #1d4ed8;
  --primary-100: #e0ecff;
  --ok: #047857;      /* green */
  --warn: #a16207;    /* amber */
  --risk: #b91c1c;    /* red */
  --border: #e5e7eb;
  --shadow: 0 6px 20px rgba(0,0,0,.08);
  --radius: 14px;
}
/* Gradient title banner */
h1 {
  background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 6px;
}
/* Footer bar styling */
footer {
  margin-top: 28px;
  padding: 10px 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  background: #f3f4f6;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}
/* Auto dark-mode (optional, no HTML changes) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115; --card:#151922; --text:#e5e7eb; --muted:#9aa2b1; --border:#232835;
    --primary:#4f83ff; --primary-600:#3a6cf5; --primary-100:#1b2742;
    --shadow: 0 10px 26px rgba(0,0,0,.45);
    @media (prefers-color-scheme: dark){
      :root{
        --bg:#0f1115; --card:#151922; --text:#e5e7eb; --muted:#9aa2b1; --border:#232835;
        --primary:#4f83ff; --primary-600:#3a6cf5; --primary-100:#1b2742;
        --shadow:0 10px 26px rgba(0,0,0,.45);
      }

      footer {
        background:#1b1f23;
        color:#9aa2b1;
        border-top:1px solid #232835;
      }
    }
  }
}

/* Page */
html,body{height:100%;}
body{
  margin:0; padding:18px;
  background:var(--bg);
  color:var(--text);
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Headings */
h1{margin:4px 0 16px; font-size:1.6rem; letter-spacing:.2px;}
h2{margin:0 0 10px; font-size:1.15rem;}

/* Cards/sections */
section.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin:14px 0;
}

.meta{color:var(--muted); font-size:.925rem;}
.pill-row span{
  display:inline-block;
  padding:6px 12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:999px;
  margin:0 6px 6px 0;
  font-size:.9rem;
}

/* Layout helpers */
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.score{font-weight:700;}
.ok{color:var(--ok);}
.warn{color:var(--warn);}
.risk{color:var(--risk);}

/* Inputs */
textarea,
input[type="text"],
input[type="tel"]{
  width:100%;
  min-width:240px;
  padding:12px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  outline:none;
  background:transparent;
  color:var(--text);
  transition: box-shadow .15s ease, border-color .15s ease, transform .04s ease;
}
textarea{min-height:120px; resize:vertical;}
textarea:focus,
input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
}

/* Buttons */
.btn{
  appearance:none;
  border:0; cursor:pointer;
  background:var(--primary);
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  font-weight:600;
  letter-spacing:.2px;
  transition: transform .06s ease, filter .15s ease, background .15s;
}
.btn:hover{filter:brightness(1.05);}
.btn:active{transform:translateY(1px) scale(.99);}
.btn.small{padding:7px 10px; font-size:.92rem;}
.btn.ghost{
  background:var(--primary-100);
  color:var(--primary-600);
}

/* FTC/report links area */
#liveAlerts{
  border-top:1px solid var(--border);
  margin-top:22px; padding-top:12px;
}
#liveAlerts ul{padding-left:20px; margin:8px 0;}
#liveAlerts a{color:var(--primary-600); text-decoration:none;}
#liveAlerts a:hover{text-decoration:underline;}

/* Results emphasis */
.result-box{
  padding:10px 12px; margin-top:8px;
  background: color-mix(in oklab, var(--card) 85%, var(--border));
  border:1px solid var(--border);
  border-radius:12px;
}
.score-badge{
  display:inline-block; min-width:52px;
  text-align:center; font-weight:700;
  padding:4px 8px; border-radius:999px;
}
.score-badge.ok{background:color-mix(in oklab, var(--ok) 10%, transparent); color:var(--ok); border:1px solid color-mix(in oklab, var(--ok) 35%, transparent);}
.score-badge.warn{background:color-mix(in oklab, var(--warn) 10%, transparent); color:var(--warn); border:1px solid color-mix(in oklab, var(--warn) 35%, transparent);}
.score-badge.risk{background:color-mix(in oklab, var(--risk) 10%, transparent); color:var(--risk); border:1px solid color-mix(in oklab, var(--risk) 35%, transparent);}

/* Animate result appearance (JS already updates text/classes) */
.fade-in{animation:fade .25s ease;}
@keyframes fade{from{opacity:0; transform:translateY(2px)} to{opacity:1; transform:translateY(0)}}

/* Make lists of flags look tidy */
#urlFlags{display:block; margin-top:6px; color:var(--text);}
#urlFlags li{margin-bottom:4px;}

/* Subtle separators inside cards */
.card .divider{
  height:1px; background:var(--border);
  margin:10px 0;
}

/* Mobile tweaks */
@media (max-width: 520px){
  body{padding:14px;}
  h1{font-size:1.4rem;}
  .row{gap:8px;}
  .btn{width:auto;}
}

/* Optional: glanceable statuses (reuse your existing IDs/classes) */
#urlRisk, #callRisk, #detected{font-weight:700;}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.15);
  transition: all 0.25s ease;
  /* ===== Tip Box Fade Animation ===== */
  #tip-text {
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
  }

  .fade-out {
    opacity: 0;
    /* Optional: style for rotating tip card */
    #tip-text {
      font-size: 1rem;
      line-height: 1.4;
      color: var(--text);
      font-style: italic;
    }