:root{ --sjw-blue:#0050B2; --sjw-blue-dark:#003F8C; }

    body{
      min-height: 100vh;
      background: #f6f7fb;
    }

    .demo-wrap{
      max-width: 1100px;
      margin: 0 auto;
      padding: 32px 16px;
    }

    .demo-hero{
      border-radius: 1.25rem;
      background: white;
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: 0 10px 30px rgba(0,0,0,.06);
      padding: 28px;
    }

    /* Widget styles */
    .sjw-btn-primary{
      background: var(--sjw-blue);
      border-color: var(--sjw-blue);
      color: #fff;
    }
    .sjw-btn-primary:hover{
      background: var(--sjw-blue-dark);
      border-color: var(--sjw-blue-dark);
      color: #fff;
    }

    .sjw-chat{ width: 384px; height: 480px; }

    .sjw-hidden{ display:none; }

    .sjw-anim-in{ animation: sjwIn .18s ease-out both; }
    .sjw-anim-out{ animation: sjwOut .14s ease-in both; }

    @keyframes sjwIn{ from{opacity:0; transform: translateY(20px);} to{opacity:1; transform: translateY(0);} }
    @keyframes sjwOut{ from{opacity:1; transform: translateY(0);} to{opacity:0; transform: translateY(20px);} }

    .sjw-header{ background: var(--sjw-blue); }

    .sjw-body{
      height: calc(480px - 64px - 64px);
      overflow-y: auto;
      background: #f8f9fa;
      color: #212529;
    }

    .sjw-msg{
      font-size: .9rem;
      line-height: 1.35;
      padding: .65rem .75rem;
      border-radius: 1rem;
      max-width: 90%;
      word-break: break-word;
    }

    .sjw-bot{
      background: #fff;
      border: 1px solid rgba(0,0,0,.08);
    }

    .sjw-user{
      background: rgba(0, 80, 178, .10);
      border: 1px solid rgba(0, 80, 178, .18);
      margin-left: auto;
    }

    /* Dark mode */
    .sjw-dark .sjw-header{ background: #343a40; }
    .sjw-dark .sjw-body{ background: #111418; color: #e9ecef; }
    .sjw-dark .sjw-bot{ background: #1b1f24; border-color: rgba(255,255,255,.10); }
    .sjw-dark .sjw-user{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
    .sjw-dark .sjw-input{ background: #212529; }
    .sjw-dark .form-control{ background: #2b3035; border-color: #3b424a; color: #fff; }
    .sjw-dark .form-control::placeholder{ color: rgba(255,255,255,.6); }
  
    /* --- Added: auto-growing input (keeps same look) --- */
    #sjw-input{ max-height:140px; line-height:1.25rem; }

    /* --- Added: typing indicator (ellipsis dots) --- */
    .sjw-typing{ display:inline-flex; align-items:center; gap:.35rem; }
    .sjw-dots{ display:inline-flex; gap:.25rem; }
    .sjw-dot{
      width:6px; height:6px; border-radius:999px;
      background: rgba(0,0,0,.35);
      animation: sjwDot 1.2s infinite ease-in-out;
    }
    .sjw-dark .sjw-dot{ background: rgba(255,255,255,.55); }
    .sjw-dot:nth-child(2){ animation-delay:.15s; }
    .sjw-dot:nth-child(3){ animation-delay:.3s; }
    @keyframes sjwDot{
      0%,80%,100%{ transform:translateY(0); opacity:.5; }
      40%{ transform:translateY(-4px); opacity:1; }
    }