/* SkyIdemy Live Chat — Engagement (CSS)
   Location: /assets/sbz-chat-engagement.css */

/* =========================
   Trust badge (Secured by SkyIdemy)
   - Does NOT block clicks (pointer-events:none)
   - Hidden when chat is closed
   - Sits near bottom-right, below the chat panel to avoid overlap
   ========================= */
   .sbz-protected-badge{
    position:fixed;
    right:24px;
    bottom:50px;                /* keep below the chat panel so it won't overlap the composer */
    background:linear-gradient(135deg, rgba(10,23,41,.96), rgba(23,47,86,.92));
    color:#d9f3ff;
    border:1px solid rgba(85,216,255,.26);
    border-radius:10px;
    padding:8px 12px;
    font:500 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto;
    box-shadow:0 10px 24px rgba(4,12,24,.28);
    z-index:2147482000;         /* below chat panel */
    pointer-events:none;        /* never steals clicks from the input */
    display:flex; gap:6px; align-items:center;
  }
  .sbz-protected-badge .sbz-shield{
    width:12px;height:12px;border:2px solid currentColor;border-radius:3px;
    display:inline-block;transform:rotate(45deg);
    border-top-color:transparent;border-left-color:transparent
  }
  /* Hide the badge when the chat panel is closed */
  body:not(:has(.sbz-chat-panel.open)) .sbz-protected-badge{ display:none; }
  
  /* Optional responsive nudge */
  @media (max-width: 480px){
    .sbz-protected-badge{ right:16px; bottom:14px; font-size:11px; }
  }
  
  /* =========================
     Proactive bubble pulse
     ========================= */
  .sbz-proactive-visible .sbz-chat-launcher{ animation:sbzPulse .9s ease-out 0s 3 }
  @keyframes sbzPulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.08)}
    100%{transform:scale(1)}
  }
  
  /* =========================
     Rating modal
     ========================= */
  .sbz-rating-wrap{
    position:fixed; inset:0; background:rgba(10,12,16,.5);
    backdrop-filter:saturate(160%) blur(2px);
    display:flex; align-items:center; justify-content:center;
    z-index:2147483646
  }
  .sbz-rating-card{
    width:min(92vw,360px); background:#fff; border:1px solid #e5e7eb;
    border-radius:14px; padding:16px; box-shadow:0 30px 60px rgba(0,0,0,.18)
  }
  .sbz-rating-title{ font-weight:700; margin-bottom:8px; color:#0f172a }
  
  /* Stars row */
  .sbz-stars{ display:flex; gap:6px; margin:8px 0 10px }
  
  /* Star buttons (idle) */
  .sbz-star{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:6px 10px;
    font-size:16px;
    line-height:1;
    cursor:pointer;
    color:#9ca3af; /* idle glyph */
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
  }
  .sbz-star:active{ transform:scale(.96) }
  .sbz-star:focus-visible{ outline:2px solid #0f172a; outline-offset:2px }
  
  /* Selected star = gold */
  .sbz-star.active{
    background:#fff7ed;         /* warm light background */
    border-color:#f59e0b;       /* amber-500 */
    color:#f59e0b;              /* star glyph */
  }
  
  /* CSS-only cascade fill for previous stars (needs :has() support) */
  .sbz-stars:has(.sbz-star:nth-child(1).active) .sbz-star:nth-child(-n+1),
  .sbz-stars:has(.sbz-star:nth-child(2).active) .sbz-star:nth-child(-n+2),
  .sbz-stars:has(.sbz-star:nth-child(3).active) .sbz-star:nth-child(-n+3),
  .sbz-stars:has(.sbz-star:nth-child(4).active) .sbz-star:nth-child(-n+4),
  .sbz-stars:has(.sbz-star:nth-child(5).active) .sbz-star:nth-child(-n+5){
    background:#fff7ed;
    border-color:#f59e0b;
    color:#f59e0b;
  }
  
  /* Hover preview (optional, non-committal) */
  .sbz-star:hover{
    background:#fff7ed;
    border-color:#fbbf24;       /* amber-400 */
    color:#f59e0b;
  }
  
  .sbz-rating-comment{
    width:100%;
    min-height:68px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:8px;
    font:14px/1.4 system-ui
  }
  .sbz-rating-actions{
    display:flex; gap:8px; justify-content:flex-end; margin-top:10px
  }
  .sbz-rating-actions button{
    border:1px solid #0f172a; background:#0f172a; color:#fff;
    border-radius:10px; padding:6px 12px; cursor:pointer
  }
  .sbz-rating-actions button:nth-child(2){
    background:#fff; color:#0f172a
  }