/* ===== Support chat widget ===== */
.sb-launcher {
    position: fixed; right: 20px; bottom: 20px; z-index: 1200;
    width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--kn-primary); color: #fff; box-shadow: 0 8px 24px rgba(20,30,50,.22);
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    transition: transform .15s, background .15s;
}
.sb-launcher:hover { transform: translateY(-2px); background: var(--kn-primary-hover); }
.sb-launcher__close { display: none; }
.sb-open .sb-launcher__open { display: none; }
.sb-open .sb-launcher__close { display: block; }

.sb-panel {
    position: fixed; right: 20px; bottom: 90px; z-index: 1200;
    width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 130px);
    background: #fff; border-radius: 16px; box-shadow: 0 18px 48px rgba(20,30,50,.28);
    display: none; flex-direction: column; overflow: hidden;
}
.sb-open .sb-panel { display: flex; }

.sb-head {
    background: var(--kn-primary); color: #fff; padding: .9rem 1.1rem;
    display: flex; align-items: center; gap: .6rem;
}
.sb-head__avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.sb-head__title { font-weight: 800; font-size: .98rem; line-height: 1.1; }
.sb-head__status { font-size: .74rem; opacity: .85; }

.sb-body { flex: 1; overflow-y: auto; padding: 1rem; background: #f7f8fa; display: flex; flex-direction: column; gap: .6rem; }
.sb-msg { max-width: 82%; padding: .6rem .85rem; border-radius: 14px; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.sb-msg a { color: inherit; text-decoration: underline; }
.sb-msg--bot { align-self: flex-start; background: #fff; color: #1f2733; border: 1px solid #eceef2; border-bottom-left-radius: 4px; }
.sb-msg--user { align-self: flex-end; background: var(--kn-primary); color: #fff; border-bottom-right-radius: 4px; }
.sb-msg--user a { color: #fff; }

.sb-typing { align-self: flex-start; display: flex; gap: .25rem; padding: .7rem .85rem; background: #fff; border: 1px solid #eceef2; border-radius: 14px; }
.sb-typing span { width: 6px; height: 6px; border-radius: 50%; background: #b6bcc6; animation: sbblink 1s infinite; }
.sb-typing span:nth-child(2) { animation-delay: .2s; }
.sb-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes sbblink { 0%,80%,100% { opacity: .3; } 40% { opacity: 1; } }

.sb-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .6rem; background: #f7f8fa; }
.sb-chip {
    border: 1.5px solid #d8dbe2; background: #fff; color: #4b5563; font-weight: 600;
    font-size: .8rem; padding: .35rem .7rem; border-radius: 9999px; cursor: pointer; transition: all .15s;
}
.sb-chip:hover { border-color: var(--kn-primary); color: var(--kn-primary); }

.sb-input { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid #eceef2; background: #fff; }
.sb-input input {
    flex: 1; border: 1.5px solid #e0e3e9; border-radius: 9999px; padding: .6rem .9rem; font-size: .9rem; outline: none;
}
.sb-input input:focus { border-color: var(--kn-primary); }
.sb-input button {
    border: none; background: var(--kn-primary); color: #fff; width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.sb-input button:hover { background: var(--kn-primary-hover); }
.sb-foot { text-align: center; font-size: .68rem; color: #9ca3af; padding: 0 0 .5rem; background: #fff; }

@media (max-width: 480px) {
    .sb-panel { right: 8px; left: 8px; width: auto; bottom: 84px; }
    .sb-launcher { right: 14px; bottom: 14px; }
}