#tsp-chat-widget{--accent:#825b2c;--accent-dk:#6b4a22;--ink:#202227;--wa:#25D366;--wx:#07C160;--bg:#f7f7f5;--border:#e8edf5;font-family:'Roboto',-apple-system,'Segoe UI',Arial,sans-serif;font-size:14px;line-height:1.5}
#tsp-chat-widget *,#tsp-chat-widget *::before,#tsp-chat-widget *::after{box-sizing:border-box}

/* Trigger button — desktop: right-edge pill */
.tsp-trigger{position:fixed;right:0;top:78%;z-index:99990;display:flex;align-items:center;gap:0;background:linear-gradient(135deg,#16191f,#23272f);border:0;cursor:pointer;padding:0;height:56px;width:72px;border-top-left-radius:28px;border-bottom-left-radius:28px;box-shadow:-4px 4px 20px rgba(0,0,0,.25);transition:width .4s cubic-bezier(.25,1,.5,1),box-shadow .3s ease;overflow:hidden}
.tsp-trigger:hover,.tsp-trigger[aria-expanded="true"]{width:220px;box-shadow:-6px 6px 28px rgba(0,0,0,.32)}
.tsp-trigger-icons{display:flex;align-items:center;gap:6px;padding:0 16px;flex-shrink:0;min-width:56px;justify-content:center}
.tsp-trigger-divider{color:rgba(255,255,255,.4);font-size:16px;font-weight:300}
.tsp-trigger-mobile{display:none}
.tsp-trigger-text{display:flex;flex-direction:column;white-space:nowrap;opacity:0;transition:opacity .3s ease .1s;padding-right:18px}
.tsp-trigger:hover .tsp-trigger-text,.tsp-trigger[aria-expanded="true"] .tsp-trigger-text{opacity:1}
.tsp-trigger-label{font-size:10px;font-weight:700;letter-spacing:1.5px;color:rgba(255,255,255,.7);text-transform:uppercase}
.tsp-trigger-action{font-size:16px;font-weight:700;color:#fff}

/* Toast bubble */
.tsp-toast{position:fixed;right:88px;top:78%;z-index:99991;width:260px;background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:16px 36px 16px 18px;border-right:4px solid var(--accent);opacity:0;visibility:hidden;transform:translateX(20px);transition:opacity .4s ease,transform .4s ease,visibility .4s}
.tsp-toast.is-visible{opacity:1;visibility:visible;transform:translateX(0)}
.tsp-toast-inner{display:flex;flex-direction:column;gap:4px;transition:opacity .3s ease}
.tsp-toast-inner.fading{opacity:0}
.tsp-toast-inner strong{font-size:14px;color:var(--ink);line-height:1.3}
.tsp-toast-inner span{font-size:12.5px;color:#8a857c;line-height:1.4}
.tsp-toast-close{position:absolute;top:8px;right:10px;background:0;border:0;color:#bbb;font-size:20px;cursor:pointer;padding:2px 6px;line-height:1}
.tsp-toast-close:hover{color:#666}
.tsp-toast-arrow{position:absolute;right:-8px;top:50%;transform:translateY(-50%) rotate(45deg);width:14px;height:14px;background:#fff;border-right:4px solid var(--accent);border-top:0;border-left:0;box-shadow:none}

/* Chat box */
.tsp-chat-box{position:fixed;right:22px;bottom:22px;z-index:99992;width:360px;max-width:calc(100vw - 32px);max-height:calc(100vh - 130px);background:var(--bg);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.96);transform-origin:bottom right;transition:opacity .35s cubic-bezier(.19,1,.22,1),transform .35s cubic-bezier(.19,1,.22,1),visibility .35s}
.tsp-chat-box.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

/* Chat header */
.tsp-chat-head{background:linear-gradient(135deg,#16191f,#23272f);color:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.tsp-chat-head-info{min-width:0}
.tsp-chat-name{font-weight:700;font-size:15px}
.tsp-chat-status{font-size:12px;color:rgba(255,255,255,.6);margin-top:2px}
.tsp-chat-head button{background:0;border:0;color:rgba(255,255,255,.7);font-size:24px;cursor:pointer;padding:4px 8px;line-height:1}
.tsp-chat-head button:hover{color:#fff}

/* Tabs */
.tsp-chat-tabs{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-bottom:1px solid var(--border)}
.tsp-tab{border:0;background:transparent;padding:12px 10px;font-family:inherit;font-size:13.5px;font-weight:700;color:#8a857c;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;position:relative;transition:color .2s}
.tsp-tab.is-active{color:var(--ink)}
.tsp-tab.is-active::after{content:'';position:absolute;left:20%;right:20%;bottom:-1px;height:3px;background:var(--accent);border-radius:3px 3px 0 0}

/* Body & messages */
.tsp-chat-body{flex:1;overflow-y:auto;padding:16px}
.tsp-pane{display:none}
.tsp-pane.is-active{display:block;animation:tsp-in .35s ease}
@keyframes tsp-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tsp-msg{background:#fff;border-radius:0 10px 10px 10px;padding:12px 14px;font-size:13.5px;line-height:1.55;color:var(--ink);margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.tsp-msg--center{text-align:center;border-radius:10px}
.tsp-msg-time{display:block;font-size:11px;color:#aaa;margin-top:6px;text-align:right}

/* Footer input */
.tsp-chat-footer{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border);background:#fff}
.tsp-chat-footer input{flex:1;border:1.5px solid var(--border);border-radius:20px;padding:10px 16px;font-family:inherit;font-size:13.5px;color:var(--ink);outline:none;transition:border-color .2s}
.tsp-chat-footer input:focus{border-color:var(--accent)}
.tsp-chat-footer input::placeholder{color:#bbb}
.tsp-chat-footer button{width:42px;height:42px;border-radius:50%;border:0;background:var(--wa);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,transform .2s}
.tsp-chat-footer button svg{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;pointer-events:none}
.tsp-chat-footer button:hover{background:#1ebe5b;transform:scale(1.08)}

/* Mobile */
@media(max-width:768px){
  .tsp-trigger{right:16px;bottom:24px;top:auto;width:60px;height:60px;border-radius:50%;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .tsp-trigger:hover,.tsp-trigger[aria-expanded="true"]{width:60px}
  .tsp-trigger-wa,.tsp-trigger-wx,.tsp-trigger-divider,.tsp-trigger-text{display:none}
  .tsp-trigger-mobile{display:block}
  .tsp-trigger-icons{padding:0}
  .tsp-toast{display:none}
  .tsp-chat-box{right:12px;left:12px;bottom:96px;width:auto;max-width:none}
}