/* Silverland chatbot — style nút & khung chat trên silverlandhotels.com
   Nguồn: docs/silverland-chatbot-embed.html trong repo ai-chatbot.
   Sửa thẳng file này trên server là web đổi ngay (cache 5 phút). */

/* ---------------------------------------------------------------------
   Số liệu lấy từ chính CSS của theme (assets/css/styles.css) + đo trên trang
   thật, không đoán. Breakpoint theme: md=768 lg=1024 xl=1280 xl+=1360
   (KHÔNG phải mặc định của Tailwind, đây là cấu hình riêng).

   THEME CĂN CÁC NÚT THEO TÂM, KHÔNG THEO MÉP PHẢI:
     cột phone/chat  right 0/10/15/35   cỡ 48/30/40/50   khe trong cột 20px
     back-to-top     right 10/10/10/30  cỡ 40/40/50/60
     -> ở xl+ cả hai đều có tâm cách mép phải 60px. Căn theo mép phải là lệch.

   Xếp 3 thứ thành một cột dưới phải, khe đều 20px, tâm thẳng hàng với cột
   phone/chat ở trên:        [khung chat] 10px [nút Dify] 20px [back-to-top]
   Nút back-to-top của theme bị kéo XUỐNG sát đáy để chừa chỗ cho khung chat.

     --svl-c   tâm cột, tính từ mép phải  (= right cột phone/chat + nửa cỡ nó)
     --svl-s   cỡ nút Dify                (= cỡ nút tròn phone/chat)
     --svl-st  cỡ nút back-to-top
     --svl-sb  bottom nút back-to-top     (mobile giữ 63px để không đè thanh
                                           phone/chat dán đáy)
   Muốn cả cụm lên/xuống thì sửa --svl-sb; muốn nới khe thì sửa số 20px/10px.
   --------------------------------------------------------------------- */
:root{ --svl-c:30px; --svl-s:48px; --svl-st:40px; --svl-sb:63px; }   /* < 768 */
@media (min-width:768px) { :root{ --svl-c:25px; --svl-s:30px; --svl-sb:20px; } }
@media (min-width:1024px){ :root{ --svl-c:30px; --svl-s:40px; --svl-st:50px; } }
@media (min-width:1280px){ :root{ --svl-c:40px; --svl-s:50px; --svl-st:60px; } }
@media (min-width:1360px){ :root{ --svl-c:60px; } }

:root{
  --svl-b:calc(var(--svl-sb) + var(--svl-st) + 20px);          /* bottom nút Dify */
  --svl-wb:calc(var(--svl-b) + var(--svl-s) + 10px);           /* bottom MÉP NHÌN THẤY của khung chat */

  /* App Dify tự chừa 60px trong suốt ở đáy iframe:
       web/app/components/base/chat/embedded-chatbot/index.tsx:164
       isMobile ? 'h-[calc(100vh_-_60px)]' : 'h-[100vh]'
     Trong iframe innerWidth = 384px, mà use-breakpoints coi <=640px là mobile
     -> luôn chạy nhánh mobile. 60px đó vốn để chứa thanh "powered by", nhưng
     thanh đã bị tắt (`DISABLED - Always hide branding` ngay dưới) nên chỉ còn
     lại khoảng trống. Không sửa được từ ngoài vì khác origin, nên bù bằng cách
     đẩy iframe xuống 60px và cho cao thêm 60px -> mép nhìn thấy về đúng chỗ.
     Phần chết đè lên nút Dify nhưng nút có z-index cao hơn iframe nên vẫn bấm
     được. Xoá dòng này khi nào app Dify sửa lại thành h-[100vh]. */
  --svl-dead:60px;
}

  /* --- nút back-to-top CỦA THEME: kéo xuống sát đáy, căn tâm --- */
  [data-btn-scrolltop]{
    bottom:var(--svl-sb)!important;
    right:calc(var(--svl-c) - var(--svl-st) / 2)!important;
  }

  /* --- nút bong bóng --- */
  #dify-chatbot-bubble-button{
    background-color:#FFDDB3!important;   /* nền nút phone/chat của theme */
    box-shadow:none!important;
    width:var(--svl-s)!important;
    height:var(--svl-s)!important;
    right:calc(var(--svl-c) - var(--svl-s) / 2)!important;
    bottom:var(--svl-b)!important;
  }
  #dify-chatbot-bubble-button:hover{ background-color:#ffc680!important; }

  /* icon = 40% cỡ nút. Dify bọc svg trong div 100%x100% nên % tự đúng tỉ lệ
     ở mọi kích thước nút. Muốn icon to/nhỏ thì chỉ đổi ĐÚNG con số này. */
  #dify-chatbot-bubble-button svg{ width:40%!important; height:40%!important; }

  /* icon gốc của Dify là màu trắng -> nền kem sẽ mất tích, phải đổi màu */
  #dify-chatbot-bubble-button #openIcon path{ fill:#8C7973!important; }
  #dify-chatbot-bubble-button #closeIcon path{ stroke:#8C7973!important; }

  /* --- khung chat: nằm sát ngay trên nút Dify --- */
  #dify-chatbot-bubble-window{
    /* BẮT BUỘC: embed.min.js đặt iframe này là position:absolute (uiStyle mặc
       định), nên khung neo vào TÀI LIỆU -> cuộn xuống là trôi mất. Nút thì nó
       đặt fixed nên đứng yên. Ép fixed để khung bám khung nhìn như cái nút. */
    position:fixed!important;
    width:24rem!important;
    max-width:calc(100vw - 2rem)!important;
    max-height:none!important;
    right:calc(var(--svl-c) - var(--svl-s) / 2)!important;  /* mép phải trùng nút Dify */
    bottom:calc(var(--svl-wb) - var(--svl-dead))!important;
    /* phần NHÌN THẤY cao nhất 38rem, chừa 5rem phía trên để không đụng header */
    height:calc(min(38rem, calc(100vh - var(--svl-wb) - 5rem)) + var(--svl-dead))!important;
  }
  /* mobile: khung rộng gần hết màn, dán sát mép */
  @media (max-width:640px){
    #dify-chatbot-bubble-window{
      width:calc(100vw - 1rem)!important;
      right:.5rem!important;
      height:calc(min(38rem, calc(100dvh - var(--svl-wb) - 2rem)) + var(--svl-dead))!important;
    }
  }