/* Convo Compass styles. Fonts are loaded by the plugin's enqueue —
   no @import here (it can break Divi/host saves and slows loading). */

  #vsc-app {
    font-family: 'Lora', Georgia, serif !important;
    color: #1a1a1a !important;
    background: #F7F9FA !important;
    border-radius: 16px !important;
    padding: clamp(18px, 4vw, 40px) !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    line-height: 1.65 !important;
    box-sizing: border-box !important;
  }
  #vsc-app *, #vsc-app *::before, #vsc-app *::after { box-sizing: border-box !important; }

  #vsc-app h2, #vsc-app h3 {
    font-family: 'Abril Fatface', Georgia, serif !important;
    color: #580930 !important;
    line-height: 1.2 !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
  }
  #vsc-app h2 { font-size: clamp(1.6rem, 4vw, 2.3rem) !important; }
  #vsc-app h3 { font-size: clamp(1.2rem, 3vw, 1.6rem) !important; }
  #vsc-app p { margin: 0 0 12px 0 !important; font-size: 1rem !important; }

  #vsc-app .vsc-tagline { color: #444 !important; font-size: 1.05rem !important; margin-bottom: 22px !important; }

  /* Audience toggle */
  #vsc-app .vsc-toggle { display: flex !important; gap: 10px !important; margin-bottom: 18px !important; flex-wrap: wrap !important; }
  #vsc-app .vsc-toggle button {
    flex: 1 1 140px !important;
    padding: 12px 18px !important;
    border: 2px solid #580930 !important;
    background: #fff !important;
    color: #580930 !important;
    border-radius: 999px !important;
    font-family: 'Lora', Georgia, serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
  }
  #vsc-app .vsc-toggle button.vsc-active {
    background: #580930 !important;
    color: #FFE2FB !important;
  }

  /* Category pills */
  #vsc-app .vsc-cats { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-bottom: 20px !important; }
  #vsc-app .vsc-cats button {
    padding: 8px 16px !important;
    border: 1.5px solid #2E7DAF !important;
    background: #fff !important;
    color: #2E7DAF !important;
    border-radius: 999px !important;
    font-family: 'Lora', Georgia, serif !important;
    font-size: .95rem !important;
    cursor: pointer !important;
  }
  #vsc-app .vsc-cats button.vsc-active { background: #2E7DAF !important; color: #fff !important; }

  /* Situation cards */
  #vsc-app .vsc-list { display: grid !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; }
  #vsc-app .vsc-card {
    background: #fff !important;
    border: 1px solid #C2C5CA !important;
    border-left: 5px solid #2E7DAF !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    cursor: pointer !important;
    text-align: left !important;
    width: 100% !important;
    font-family: 'Lora', Georgia, serif !important;
    transition: box-shadow .15s ease !important;
  }
  #vsc-app .vsc-card:hover { box-shadow: 0 3px 14px rgba(88,9,48,.12) !important; }
  #vsc-app .vsc-card .vsc-card-title { font-size: 1.1rem !important; font-weight: 600 !important; color: #580930 !important; display: block !important; }
  #vsc-app .vsc-card .vsc-card-fw { font-size: .85rem !important; color: #2E7DAF !important; display: block !important; margin-top: 4px !important; }
  /* Script view */
  #vsc-app .vsc-back {
    background: none !important; border: none !important;
    color: #2E7DAF !important; cursor: pointer !important;
    font-family: 'Lora', Georgia, serif !important; font-size: .95rem !important;
    padding: 0 !important; margin-bottom: 14px !important;
  }
  #vsc-app .vsc-fw-badge {
    display: inline-block !important;
    background: #FFE2FB !important;
    color: #580930 !important;
    border-radius: 999px !important;
    padding: 6px 16px !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    margin-bottom: 14px !important;
  }
  #vsc-app .vsc-steps { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-bottom: 18px !important; }
  #vsc-app .vsc-step {
    background: #fff !important;
    border: 1px solid #C2C5CA !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    flex: 1 1 160px !important;
    font-size: .92rem !important;
  }
  #vsc-app .vsc-step strong { color: #580930 !important; display: block !important; margin-bottom: 2px !important; }

  #vsc-app .vsc-script {
    background: #fff !important;
    border-radius: 12px !important;
    border: 1px solid #C2C5CA !important;
    padding: 18px 20px !important;
    margin-bottom: 18px !important;
  }
  #vsc-app .vsc-line { margin-bottom: 12px !important; }
  #vsc-app .vsc-line .vsc-who {
    font-size: .8rem !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: #2E7DAF !important;
    display: block !important;
  }
  #vsc-app .vsc-line .vsc-say { font-size: 1.05rem !important; }
  #vsc-app .vsc-line.vsc-note .vsc-say { font-style: italic !important; color: #555 !important; font-size: .95rem !important; }

  #vsc-app .vsc-sideways {
    background: #FFE2FB !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 18px !important;
  }
  #vsc-app .vsc-sideways h3 { font-size: 1.15rem !important; }
  #vsc-app .vsc-sideways .vsc-sw-row { margin-bottom: 10px !important; font-size: .98rem !important; }
  #vsc-app .vsc-sideways .vsc-sw-if { font-weight: 600 !important; color: #580930 !important; }

  #vsc-app .vsc-attrib {
    font-size: .88rem !important;
    color: #6b6b6b !important;
    font-style: italic !important;
    border-top: 1px solid #C2C5CA !important;
    padding-top: 12px !important;
    margin-top: 6px !important;
  }

  #vsc-app .vsc-btn {
    display: inline-block !important;
    background: #580930 !important;
    color: #FFE2FB !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 26px !important;
    font-family: 'Lora', Georgia, serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    margin-right: 10px !important;
    margin-bottom: 8px !important;
  }
  #vsc-app .vsc-btn.vsc-btn-alt { background: #2E7DAF !important; color: #fff !important; }
  #vsc-app .vsc-btn.vsc-btn-green { background: #41A461 !important; color: #fff !important; }
  #vsc-app .vsc-btn:disabled { opacity: .55 !important; cursor: wait !important; }

  /* AI customize + ask box */
  #vsc-app .vsc-ai { margin-top: 6px !important; margin-bottom: 18px !important; }
  #vsc-app .vsc-ai textarea {
    width: 100% !important;
    min-height: 84px !important;
    border: 1.5px solid #C2C5CA !important;
    border-radius: 10px !important;
    padding: 12px !important;
    font-family: 'Lora', Georgia, serif !important;
    font-size: .98rem !important;
    margin-bottom: 10px !important;
    background: #fff !important;
    color: #1a1a1a !important;
  }
  #vsc-app .vsc-ai-result {
    background: #fff !important;
    border-left: 5px solid #41A461 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-top: 12px !important;
    white-space: pre-wrap !important;
    font-size: 1rem !important;
  }
  #vsc-app .vsc-ai-note { font-size: .85rem !important; color: #6b6b6b !important; }
  #vsc-app .vsc-copied { color: #41A461 !important; font-size: .9rem !important; margin-left: 6px !important; }