#schatbox-widget{
    --tv-bg:#0b1020;
    --tv-panel:#2b2f3a;
    --tv-panel2:#2f3440;
    --tv-ink:rgba(255,255,255,.92);
    --tv-muted:rgba(255,255,255,.65);
    --tv-line:rgba(255,255,255,.10);
    --tv-input:#3a3f4c;
    --tv-btn:#444a58;
    --tv-accent:#ff7a00;
    --tv-shadow:0 20px 60px rgba(0,0,0,.35);
    --tv-bot-bubble:rgba(255,255,255,.07);
    --tv-bot-bubble-border:rgba(255,255,255,.10);
    --tv-user-bubble:rgba(255,122,0,.14);
    --tv-user-bubble-border:rgba(255,122,0,.28);
  }

  #schatbox-widget.tvchat{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:999999;
    font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  }

  /* Khi đang mở panel: ẩn bubble ở góc dưới */
  #schatbox-widget.tvchat.tvchat-open .tvchat-bubble{
    display:none !important;
  }

  .tvchat-bubble{
    width:64px;
    height:64px;
    border-radius:999px;
    border:none;
    background:transparent;
    cursor:pointer;
    padding:0;
    position:relative;
    box-shadow:var(--tv-shadow);
  }

  .tvchat-ring{
    position:absolute;
    inset:-3px;
    border-radius:999px;
    border:4px solid var(--tv-accent);
    box-shadow:0 0 0 4px rgba(255,122,0,.18);
    pointer-events:none;
  }

  .tvchat-bubble-avatar{
    width:64px;
    height:64px;
    border-radius:999px;
    display:block;
    background:#0f152a;
  }

  .tvchat-panel{
    /* JS sẽ chuyển thành fixed khi drag/restore, mặc định vẫn ok */
    position:absolute;
    right:0;
    bottom:76px;

    width:440px;
    max-width:calc(100vw - 24px);
    height:360px;
    background:var(--tv-panel);
    border:1px solid var(--tv-line);
    border-radius:12px;
    box-shadow:var(--tv-shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }

  .tvchat-hidden{ display:none !important; }

  /* =========================
     HEADER
     ========================= */
  #schatbox-widget .tvchat-head-actions{
    margin-top:5px;
  }

  #schatbox-widget .tvchat-header{
    height:35px !important;
    min-height:35px;
    padding:7px 4px 0 10px !important;
    padding-right: 4px !important;
    padding-left: 10px !important;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
    background:var(--tv-panel2);
    border-bottom:1px solid var(--tv-line);
    gap:6px;
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
    touch-action:none;
  }

  #schatbox-widget .tvchat-header:active{ cursor:grabbing; }

  #schatbox-widget .tvchat-head-left{
    display:flex;
    align-items:center;
    gap:0;
    min-width:0;
  }

  #schatbox-widget .tvchat-avatar{
    width:34px;
    height:34px;
    border-radius:999px;
    background:#0f152a;
    flex:0 0 auto;
    display:none !important;
  }

  #schatbox-widget .tvchat-head-text{ display:none !important; }

  #schatbox-widget .tvchat-head-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0px;
    flex:0 0 auto;
  }

  #schatbox-widget .tvchat-iconbtn{
    width:20px;
    height:28px;

    border:none !important;
    outline:none !important;
    padding:0 !important;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:transparent !important;
    color:var(--tv-ink);
    cursor:pointer;

    font-size:18px;
    line-height:1;
    border-radius:0 !important;
  }

  #schatbox-widget .tvchat-iconbtn:hover{ color:rgba(255,255,255,.98); }
  #schatbox-widget .tvchat-iconbtn:active{ color:rgba(255,255,255,.85); }

  @keyframes tvchat-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @keyframes tvchat-spin-press {
    from { transform: rotate(0deg) scale(1); }
    to   { transform: rotate(360deg) scale(0.92); }
  }

  #schatbox-widget .tvchat-close:hover{
    animation: tvchat-spin 450ms ease;
  }
  #schatbox-widget .tvchat-close:active{
    animation: tvchat-spin-press 180ms linear;
  }

  .tvchat-messages{
    flex:1;
    overflow:auto;
    padding:12px;
    background:var(--tv-panel);
    min-height:0;
  }

  .tvchat-row{
    display:flex;
    gap:10px;
    align-items:flex-end;
    margin:10px 0;
  }

  .tvchat-row.tvchat-user{ justify-content:flex-end; }

  .tvchat-bot-avatar{
    width:30px;
    height:30px;
    border-radius:999px;
    background:#0f152a;
    flex:0 0 auto;
  }

  .tvchat-bubblemsg{
    border-radius:12px;
    padding:10px 12px;
    max-width:78%;
    font-size:14px;
    line-height:1.35;
    white-space:pre-wrap;
    word-break:break-word;
  }

  .tvchat-bubblemsg.tvchat-bot{
    background:var(--tv-bot-bubble);
    border:1px solid var(--tv-bot-bubble-border);
    color:var(--tv-ink);
    border-top-left-radius:6px;
  }

  .tvchat-bubblemsg.tvchat-user{
    background:var(--tv-user-bubble);
    border:1px solid var(--tv-user-bubble-border);
    color:var(--tv-ink);
    border-top-right-radius:6px;
  }

  /* =========================
     FOOTER
     ========================= */
  #schatbox-widget{
    --tv-footer-h: 50px;
  }

  .tvchat-footer{
    padding:10px;
    background:var(--tv-panel2);
    border-top:1px solid var(--tv-line);
    display:flex;
    gap:8px;
    align-items:center;
    box-sizing:border-box;
  }

  #schatbox-widget .tvchat-input{
    flex:1;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.12) !important;
    background:var(--tv-input) !important;
    color:var(--tv-ink) !important;

    padding:0 12px !important;
    outline:none !important;
    font-size:14px !important;

    box-shadow:none !important;
    min-width:0;

    box-sizing:border-box !important;
    margin:0 !important;
  }
  #schatbox-widget .tvchat-input::placeholder{ color:rgba(255,255,255,.45); }

  #schatbox-widget textarea.tvchat-input{
    resize:none !important;
    overflow:hidden !important;
    line-height:1.25 !important;
    padding:12px 12px !important;
    height:auto;
    min-height:var(--tv-footer-h) !important;
  }

  /* NÚT ICON ĐÍNH KÈM */
  #schatbox-widget .tvchat-attach{
    width:44px;
    height:var(--tv-footer-h) !important;
    border-radius:10px;
    border:none !important;
    background:rgba(255,255,255,.08);
    color:var(--tv-ink);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 44px;
    box-sizing:border-box;
    margin:0;
    padding:0;
    text-decoration:none;
    transition: background-color 160ms ease, transform 160ms ease;
  }

  #schatbox-widget .tvchat-attach:hover{
    background:rgba(255,255,255,.12);
  }

  #schatbox-widget .tvchat-attach:active{
    transform:scale(.96);
  }

  #schatbox-widget .tvchat-attach svg{
    width:20px;
    height:20px;
    display:block;
  }

  #schatbox-widget .tvchat-actionwrap{
    position:relative;
    width:92px;
    height:var(--tv-footer-h) !important;
    flex:0 0 auto;
    box-sizing:border-box;
    margin:0;
    display:flex;
    align-items:center;
  }

  #schatbox-widget .tvchat-send,
  #schatbox-widget .tvchat-clear{
    position:absolute;
    inset:0;
    height:var(--tv-footer-h) !important;
    width:100%;
    border-radius:10px;

    border:none !important;
    color:var(--tv-ink);
    cursor:pointer;
    font-weight:700;
    letter-spacing:.3px;

    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 !important;

    display:flex;
    align-items:center;
    justify-content:center;

    line-height:1 !important;
  }

  #schatbox-widget .tvchat-send{
    background:var(--tv-btn);
    display:none;
  }

  #schatbox-widget .tvchat-clear{
    background:rgba(255,255,255,.06);
    display:block;
  }

  #schatbox-widget.tvchat-hastext .tvchat-send{ display:flex; }
  #schatbox-widget.tvchat-hastext .tvchat-clear{ display:none; }

  .tvchat-send:disabled{ opacity:.6; cursor:not-allowed; }

  .tvchat-messages::-webkit-scrollbar{ width:10px; }
  .tvchat-messages::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.14);
    border-radius:999px;
    border:3px solid rgba(0,0,0,0);
    background-clip:padding-box;
  }
  .tvchat-messages::-webkit-scrollbar-track{ background:transparent; }

  /* Trạng thái phóng to (maximize) */
  #schatbox-widget.tvchat .tvchat-panel.tvchat-max{
    width: calc(100vw - 24px) !important;
    height: calc(100vh - 24px) !important;
    left: 12px !important;
    top: 12px !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* ===== TYPING INDICATOR (3 DOTS) ===== */
  #schatbox-widget .tvchat-typing{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    height:16px;
  }
  #schatbox-widget .tvchat-typing span{
    width:6px;
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,.55);
    animation: tvchat-dot 1s infinite ease-in-out;
  }
  #schatbox-widget .tvchat-typing span:nth-child(2){ animation-delay:.15s; }
  #schatbox-widget .tvchat-typing span:nth-child(3){ animation-delay:.30s; }

  @keyframes tvchat-dot{
    0%, 80%, 100% { transform:translateY(0); opacity:.55; }
    40% { transform:translateY(-4px); opacity:.95; }
  }

  /* Typing bubble: chỉ còn 3 chấm ở giữa, không viền/khung */
  #schatbox-widget .tvchat-row.tvchat-bot.tvchat-typingrow{ align-items:center; }

  #schatbox-widget .tvchat-bubblemsg.tvchat-bot.tvchat-typingbubble{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
    max-width:none;
    min-width:54px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  #schatbox-widget .tvchat-bubblemsg.tvchat-bot.tvchat-typingbubble .tvchat-typing{
    justify-content:center;
  }

  /* Hiệu ứng hover */
  #schatbox-widget .tvchat-min{
    transform-origin:center;
    transition: transform 160ms ease, color 160ms ease;
    will-change: transform;
  }
  #schatbox-widget .tvchat-min:hover{ transform: scale(1.25); }
  #schatbox-widget .tvchat-min:active{ transform: scale(1.12); }

  #schatbox-widget .tvchat-send,
  #schatbox-widget .tvchat-clear{
    transition: background-color 160ms ease;
  }
  #schatbox-widget .tvchat-send:hover{ background-color: rgba(255,255,255,.12); }
  #schatbox-widget .tvchat-clear:hover{ background-color: rgba(255,255,255,.10); }

  #schatbox-widget .tvchat-bubblemsg a{
    color: #ffb36a;
    text-decoration: underline;
    word-break: break-word;
  }
  #schatbox-widget .tvchat-bubblemsg a:hover{ filter: brightness(1.1); }

  /* =========================================================
     ✅ MOBILE ONLY (FIX):
     - panel full screen theo dvh / visualViewport
     - khóa scroll trang bằng class + body fixed
     - header bám top, footer bám bottom (messages tự co giãn)
     ========================================================= */
  @media (max-width: 520px){
    /* biến viewport thật (JS sẽ update --tv-vvh) */
    #schatbox-widget{ --tv-vvh: 100vh; --tv-vvtop: 0px; }

    #schatbox-widget.tvchat.tvchat-open .tvchat-panel{
      position:fixed !important;
      top:var(--tv-vvtop, 0px) !important;
      right:0 !important;
      bottom:auto !important;
      left:0 !important;
      width:100% !important;
      height: var(--tv-vvh, 100vh) !important;
      max-width:100% !important;
      max-height:none !important;
      border-radius:0 !important;

      /* ✅ quan trọng: tắt transition để hết "trôi/lag" */
      transition:none !important;
      transform:none !important;
      will-change:auto !important;
    }

    #schatbox-widget .tvchat-footer{
      align-items:flex-end;
      padding-bottom: calc(10px + env(safe-area-inset-bottom));
      transform: none !important;
    }

    #schatbox-widget .tvchat-input{ font-size:16px !important; }

    #schatbox-widget .tvchat-min{ display:none !important; }

    html.tvchat-noscroll, body.tvchat-noscroll{
      margin:0 !important;
      padding:0 !important;
      width:100% !important;
      overflow-x:hidden !important;
      overscroll-behavior:none;
      -webkit-overflow-scrolling:auto;
    }

    #schatbox-widget.tvchat.tvchat-open{
      right:0 !important;
      bottom:0 !important;
    }

    #schatbox-widget .tvchat-messages{
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
    }

    html.tvchat-noscroll,
    body.tvchat-noscroll{
      height:100%;
      overflow:hidden !important;
      overscroll-behavior:none;
    }

    /* Nút X to gấp 2 */
    #schatbox-widget .tvchat-close{
      width:40px !important;
      height:40px !important;
      font-size:32px !important;
      margin-top:12px !important;
      line-height:1 !important;
    }
  }

  /* Ưu tiên đơn vị viewport động nếu browser hỗ trợ */
  @supports (height: 100dvh){
    @media (max-width: 520px){
      #schatbox-widget.tvchat.tvchat-open .tvchat-panel{
        height: var(--tv-vvh, 100dvh) !important;
      }
    }
  }

#schatbox-widget, #schatbox-widget * { box-sizing: border-box; }
#schatbox-widget button { text-transform: none; }
#schatbox-widget .tvchat-clear:disabled { opacity:.6; cursor:not-allowed; }
#schatbox-widget textarea.tvchat-input { overflow-y:auto !important; max-height:140px; }
@media (max-width:520px) {
  #schatbox-widget .tvchat-header { height:48px !important; min-height:48px; padding-top:0 !important; }
  #schatbox-widget .tvchat-head-actions { margin-top:0; }
  #schatbox-widget .tvchat-close {
    margin-top:0 !important;
    position:relative;
    top:4px;
  }
}