/* ════ OVERRIDE ZOHO — force it below our widget ════ */
  .zsiq-float,
  .zsiq_cnt,
  .zsiq-flexM,
  #zsiq_float,
  [class*="zsiq"] {
    z-index: 99990 !important;
  }

  /* ════ BUBBLE ════ */
  #wb-bubble-wrap {
    position: fixed !important;
    bottom: 160px !important;  /* Below site's phone button */
    right: 14px !important;
    width: 56px !important; height: 56px !important;
    z-index: 2147483647 !important;
    isolation: isolate !important;
    transition: opacity .22s ease, transform .22s ease !important;
  }
  #wb-bubble-wrap.wb-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.7) !important;
  }
  #wb-badge {
    position: absolute !important;
    top: -5px !important; right: -5px !important;
    background: #e74c3c !important; color: #fff !important;
    font-size: 11px !important; font-weight: 700 !important;
    width: 21px !important; height: 21px !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-family: sans-serif !important; border: 2px solid #fff !important;
    pointer-events: none !important;
    z-index: 2147483647 !important;
  }
  #wb-bubble {
    width: 56px !important; height: 56px !important;
    background: #fff !important;
    border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.32) !important;
    border: none !important; outline: none !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2147483647 !important;
    transition: transform .2s !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  #wb-bubble:hover { transform: scale(1.08) !important; }
  #wb-bubble img,
  img[src*="WhatsApp.png"] {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; border-radius: 50% !important;
    display: block !important;
    z-index: 2147483647 !important; position: relative !important;
  }

  /* ════ CHAT WINDOW — desktop ════ */
  #wb-window {
    position: fixed !important;
    bottom: 226px !important; right: 14px !important;
    width: 340px !important; max-width: calc(100vw - 28px) !important;
    border-radius: 18px !important; overflow: hidden !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.28) !important;
    z-index: 2147483646 !important;
    display: none !important;
    flex-direction: column !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
    animation: wb-slidein .28s cubic-bezier(.4,0,.2,1) !important;
    /* Fixed height so keyboard push doesn't hide content */
    max-height: 480px !important;
  }
  #wb-window.wbopen { display: flex !important; }

  @keyframes wb-slidein {
    from { opacity:0; transform:translateY(12px) scale(.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
  }

  /* ════ HEADER ════ */
  #wb-window .wb-header {
    background: #354ac2 !important;
    padding: 11px 13px !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
    flex-shrink: 0 !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
  }
  #wb-window .wb-logo-wrap {
    width: 40px !important; height: 40px !important; border-radius: 50% !important;
    background: #fff !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important; overflow: hidden !important;
    box-sizing: border-box !important;
  }
  #wb-window .wb-logo-wrap img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
  #wb-window .wb-hinfo { flex:1 !important; min-width:0 !important; }
  #wb-window .wb-hname { color:#fff !important; font-weight:700 !important; font-size:14px !important; margin:0 !important; padding:0 !important; line-height:1.3 !important; }
  #wb-window .wb-hstatus { color:#b8c8ff !important; font-size:11px !important; margin:2px 0 0 !important; padding:0 !important; }
  #wb-window .wb-close-btn {
    background:none !important; border:none !important;
    color:rgba(255,255,255,.85) !important; font-size:26px !important;
    cursor:pointer !important; line-height:1 !important;
    padding:0 3px !important; flex-shrink:0 !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  /* ════ CHAT BODY ════ */
  #wb-body {
    background: #ECE5DD !important;
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 10px !important;
    display: flex !important; flex-direction: column !important; gap: 8px !important;
    scroll-behavior: smooth !important;
    box-sizing: border-box !important;
    min-height: 0 !important; /* critical for flex shrink */
  }
  #wb-body::-webkit-scrollbar { width:3px !important; }
  #wb-body::-webkit-scrollbar-thumb { background:#bbb !important; border-radius:3px !important; }

  /* ════ MESSAGES ════ */
  #wb-body .wb-msg {
    max-width:82% !important; padding:8px 12px !important;
    border-radius:12px !important;
    font-size:13px !important; line-height:1.5 !important;
    animation: wb-pop .2s ease !important;
    word-break:break-word !important;
    box-sizing:border-box !important; margin:0 !important; flex-shrink: 0 !important;
  }
  @keyframes wb-pop {
    from { opacity:0; transform:translateY(4px); }
    to   { opacity:1; transform:translateY(0); }
  }
  #wb-body .wb-msg.bot  { background:#fff !important; align-self:flex-start !important; border-radius:2px 12px 12px 12px !important; color:#222 !important; }
  #wb-body .wb-msg.user { background:#DCF8C6 !important; align-self:flex-end !important; border-radius:12px 2px 12px 12px !important; color:#111 !important; }
  #wb-body .wb-msg-time { font-size:10px !important; color:#999 !important; margin-top:3px !important; text-align:right !important; }

  /* ════ OPTIONS ════ */
  #wb-body .wb-options {
    display:flex !important; flex-wrap:wrap !important; gap:6px !important;
    align-self:flex-start !important; width:100% !important; margin:0 !important; flex-shrink:0 !important;
  }
  #wb-body .wb-opt-btn {
    background:#fff !important; border:1.5px solid #354ac2 !important; color:#354ac2 !important;
    font-size:12px !important; font-weight:600 !important;
    padding:6px 10px !important; border-radius:18px !important;
    cursor:pointer !important; font-family:inherit !important;
    -webkit-tap-highlight-color:transparent !important;
    box-sizing:border-box !important;
  }
  #wb-body .wb-opt-btn:active { background:#354ac2 !important; color:#fff !important; }

  /* ════ TYPING ════ */
  #wb-body .wb-typing {
    display:flex !important; align-items:center !important; gap:4px !important;
    background:#fff !important; padding:10px 13px !important;
    border-radius:2px 12px 12px 12px !important; align-self:flex-start !important;
    margin:0 !important; flex-shrink:0 !important;
  }
  #wb-body .wb-typing span {
    width:6px !important; height:6px !important; background:#aaa !important;
    border-radius:50% !important; display:inline-block !important;
    animation:wb-blink 1.2s infinite !important;
  }
  #wb-body .wb-typing span:nth-child(2) { animation-delay:.2s !important; }
  #wb-body .wb-typing span:nth-child(3) { animation-delay:.4s !important; }
  @keyframes wb-blink {
    0%,80%,100%{ transform:scale(1); }
    40%{ transform:scale(1.5); }
  }

  /* ════ CONNECT BUTTON ════ */
  #wb-body .wb-wa-btn {
    display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
    background:#25D366 !important; color:#fff !important;
    font-weight:700 !important; font-size:13px !important;
    padding:12px 14px !important; border-radius:12px !important;
    border:none !important; cursor:pointer !important;
    margin-top:4px !important; width:100% !important;
    box-sizing:border-box !important; font-family:inherit !important;
    -webkit-tap-highlight-color:transparent !important; flex-shrink:0 !important;
  }
  #wb-body .wb-wa-btn:active { background:#1ebe5d !important; }

  /* ════ INPUT ROW ════ */
  #wb-input-row {
    background:#f0f0f0 !important;
    padding:8px 8px !important;
    padding-bottom:max(8px, env(safe-area-inset-bottom)) !important;
    display:flex !important; align-items:center !important; gap:6px !important;
    border-top:1px solid #ddd !important;
    flex-shrink:0 !important;
    box-sizing:border-box !important;
    width:100% !important;
    overflow:hidden !important;
  }
  #wb-input {
    flex:1 1 0% !important;
    width:0 !important; /* prevents overflow, flex grows it */
    border:none !important; outline:none !important;
    -webkit-appearance:none !important; appearance:none !important;
    background:#fff !important; border-radius:20px !important;
    padding:9px 12px !important;
    font-size:16px !important; /* MUST be 16px — prevents iOS zoom */
    color:#111 !important; font-family:inherit !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
    min-width:0 !important;
  }
  #wb-send {
    background-color:#354ac2 !important;
    border:none !important; outline:none !important;
    width:38px !important; height:38px !important;
    min-width:38px !important; max-width:38px !important;
    border-radius:50% !important; cursor:pointer !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    flex-shrink:0 !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24'%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2' fill='white'/%3E%3Cline x1='22' y1='2' x2='11' y2='13' stroke='white' stroke-width='2'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:17px 17px !important;
    -webkit-tap-highlight-color:transparent !important;
    box-sizing:border-box !important;
  }
  #wb-send:active { background-color:#2a3aaa !important; }

  /* ════ TOAST ════ */
  #wb-toast {
    position:fixed !important; bottom:240px !important; right:14px !important;
    background:#354ac2 !important; color:#fff !important;
    padding:10px 14px !important; border-radius:12px !important;
    font-size:12px !important; font-family:sans-serif !important;
    box-shadow:0 4px 16px rgba(0,0,0,0.22) !important;
    z-index:2147483647 !important; display:none !important;
    max-width:220px !important;
  }
  #wb-toast.show { display:block !important; animation:wb-pop .3s ease !important; }

  /* ════ MOBILE ════ */
  @media (max-width: 600px) {

    /* Bubble — below phone button, no overlap */
    #wb-bubble-wrap {
      bottom: 155px !important;
      right: 12px !important;
      width: 54px !important; height: 54px !important;
    }
    #wb-bubble { width:54px !important; height:54px !important; }

    /* Chat window:
       - NOT full width — has 10px margin each side
       - Fixed height so keyboard push doesn't eat the header
       - Positioned from TOP so it doesn't get pushed off screen
    */
    #wb-window {
      position: fixed !important;
      /* Will be repositioned by JS when keyboard opens */
      top: auto !important;
      bottom: 0 !important;
      left: 10px !important;
      right: 10px !important;
      width: auto !important;
      max-width: none !important;
      border-radius: 20px 20px 0 0 !important;
      max-height: 82vh !important;
      height: auto !important;
    }

    /* Body: flex-grow fills remaining space, scrolls */
    #wb-body {
      flex: 1 !important;
      min-height: 100px !important;
      max-height: none !important;
      overflow-y: auto !important;
    }

    #wb-toast {
      right: 10px !important;
      bottom: 10px !important;
      max-width: calc(100vw - 20px) !important;
    }
  }

  /* Very small phones */
  @media (max-width: 360px) {
    #wb-window { left:6px !important; right:6px !important; }
    #wb-body .wb-msg { font-size:12px !important; }
    #wb-body .wb-opt-btn { font-size:11px !important; padding:5px 8px !important; }
  }