/* Convo Compass PREVIEW styles. Same look as the full app's CSS,
   duplicated on purpose so the two experiences stay visually identical
   but can never affect each other if one gets edited later.
   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; }

  /* 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; }

  /* Ask box (no AI — local match only) */
  #vsc-app .vsc-ai { margin-top: 6px !important; margin-bottom: 30px !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; }

  /* Teaser-only: the echoed-back line and the "there's a framework for this" tease */
  #vsc-app .vsc-echo {
    font-style: italic !important;
    color: #555 !important;
    margin-bottom: 10px !important;
    font-size: .98rem !important;
  }
  #vsc-app .vsc-tease {
    font-weight: 600 !important;
    color: #580930 !important;
    margin-bottom: 14px !important;
  }

  /* Teaser-only: "if this goes sideways" closing CTA on the withheld 2nd item */
  #vsc-app .vsc-sw-cta {
    font-style: italic !important;
    color: #580930 !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }
  #vsc-app .vsc-sw-cta a { color: #580930 !important; font-weight: 700 !important; }

  /* Teaser-only: make the sneak-peek answer impossible to miss when it appears */
  #vsc-app .vsc-sneak-badge {
    display: inline-block !important;
    background: #E4F5E9 !important;
    color: #1f6b3a !important;
    border-radius: 999px !important;
    padding: 5px 14px !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    margin-bottom: 10px !important;
  }
  @keyframes vscPopIn {
    0% { opacity: 0 !important; transform: translateY(10px) scale(.97) !important; }
    60% { opacity: 1 !important; transform: translateY(0) scale(1.01) !important; }
    100% { opacity: 1 !important; transform: translateY(0) scale(1) !important; }
  }
  #vsc-app .vsc-reveal {
    animation: vscPopIn .5s ease-out !important;
    box-shadow: 0 0 0 3px rgba(65,164,97,.4) !important;
  }