:root { --swa-primary: #A82323; --swa-accent: #F6DFAD; }
.swa-kajhu-root { position: fixed; right: 22px; bottom: 22px; z-index: 999999; font-family: "Instrument Sans", Arial, Helvetica, sans-serif; color: #2d2927; }
.swa-launcher { position: relative; display: flex; align-items: center; gap: 9px; min-height: 58px; border: 0; border-radius: 999px; padding: 7px 17px 7px 8px; cursor: pointer; color: #fff; background: var(--swa-primary); box-shadow: 0 13px 30px rgba(80, 30, 25, .27); font: inherit; font-weight: 750; transition: transform .22s ease, box-shadow .22s ease; }
.swa-launcher:hover { transform: translateY(-3px); box-shadow: 0 18px 35px rgba(80, 30, 25, .34); }
.swa-launcher-glow { position: absolute; inset: -5px; z-index: -1; border-radius: inherit; border: 1px solid rgba(168, 35, 35, .32); animation: swa-pulse 2.8s infinite; }
.swa-kajhu-face, .swa-kajhu-avatar { position: relative; flex: 0 0 auto; display: inline-block; width: 43px; height: 43px; border-radius: 50% 50% 47% 47%; background: linear-gradient(135deg, #f1b96e, #bd6b31); box-shadow: inset -4px -4px 0 rgba(113, 56, 22, .18), inset 3px 3px 0 rgba(255, 238, 174, .38); transform: rotate(-8deg); animation: swa-float 3.2s ease-in-out infinite; }
.swa-kajhu-face:before, .swa-kajhu-avatar:before { content: ""; position: absolute; width: 21px; height: 15px; left: 10px; top: -7px; border-radius: 100% 0 100% 0; background: #6d973b; transform: rotate(-24deg); box-shadow: 3px 3px 0 #466c28; }
.swa-kajhu-face i, .swa-kajhu-face b, .swa-kajhu-avatar i, .swa-kajhu-avatar b { position: absolute; top: 20px; width: 5px; height: 6px; border-radius: 50%; background: #392016; }
.swa-kajhu-face i, .swa-kajhu-avatar i { left: 12px; }.swa-kajhu-face b, .swa-kajhu-avatar b { right: 12px; }
.swa-kajhu-face em, .swa-kajhu-avatar em { position: absolute; left: 15px; bottom: 9px; width: 13px; height: 6px; border-bottom: 2px solid #492116; border-radius: 0 0 12px 12px; }
.swa-panel { position: absolute; right: 0; bottom: 0; width: min(390px, calc(100vw - 28px)); border: 1px solid rgba(73, 50, 39, .1); border-radius: 26px; overflow: hidden; background: #fffdfa; box-shadow: 0 24px 60px rgba(46, 29, 22, .24); opacity: 0; visibility: hidden; transform: translateY(15px) scale(.97); transform-origin: bottom right; transition: opacity .2s ease, transform .25s ease, visibility .25s; }
.swa-kajhu-root.swa-is-open .swa-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }.swa-kajhu-root.swa-is-open .swa-launcher { opacity: 0; pointer-events: none; transform: scale(.8); }
.swa-header { display: flex; align-items: center; gap: 11px; padding: 17px 18px; background: linear-gradient(112deg, #f9e9c8, var(--swa-accent)); border-bottom: 4px solid var(--swa-primary); }
.swa-kajhu-avatar { width: 45px; height: 45px; }.swa-title { display: block; font-size: 17px; letter-spacing: -.02em; }.swa-status { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: #6d5a50; font-size: 12px; }.swa-status i { width: 7px; height: 7px; border-radius: 50%; background: #61933d; }.swa-close { margin-left: auto; width: 33px; height: 33px; border: 1px solid rgba(91, 61, 42, .16); border-radius: 50%; background: rgba(255,255,255,.76); color: var(--swa-primary); cursor: pointer; font-size: 26px; line-height: 26px; }
.swa-chat { display: flex; flex-direction: column; gap: 10px; min-height: 320px; max-height: min(495px, calc(100vh - 210px)); overflow-y: auto; padding: 18px; scroll-behavior: smooth; }.swa-message { max-width: 92%; padding: 11px 13px; border-radius: 5px 17px 17px 17px; color: #443a35; background: #f7f0e5; font-size: 14px; line-height: 1.42; }.swa-message strong { color: #312a27; }.swa-message.swa-user { align-self: flex-end; border-radius: 17px 5px 17px 17px; color: #fff; background: var(--swa-primary); }.swa-kicker { margin: 4px 0 -3px; color: #856358; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.swa-game-line { display: inline-block; margin-top: 7px; color: var(--swa-primary); font-size: 12px; font-weight: 800; }
.swa-options { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 1px; }.swa-option { border: 1px solid rgba(168,35,35,.18); border-radius: 999px; padding: 8px 11px; color: #6c241f; background: #fff; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; transition: background .18s, color .18s, transform .18s; }.swa-option:hover { color: #fff; background: var(--swa-primary); transform: translateY(-1px); }.swa-option.swa-option-main { color: #fff; background: var(--swa-primary); }.swa-option[disabled] { cursor: wait; opacity: .6; }
.swa-products { display: grid; gap: 9px; margin-top: 2px; }.swa-product { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid #ede4d8; border-radius: 15px; background: #fff; }.swa-product img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: #f6efe4; }.swa-product-name { display: block; color: #312a27; font-size: 12px; font-weight: 800; line-height: 1.22; text-decoration: none; }.swa-product-price { display: block; margin-top: 4px; color: var(--swa-primary); font-size: 12px; font-weight: 800; }.swa-add { padding: 7px 9px; border: 0; border-radius: 9px; color: #fff; background: var(--swa-primary); font: inherit; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }.swa-small-link { color: #7b2924; font-size: 12px; font-weight: 800; text-decoration: underline; }
.swa-login { padding: 12px; border: 1px solid #eddfcd; border-radius: 15px; background: #fffaf1; }.swa-login label { display: block; margin-bottom: 6px; color: #4d423d; font-size: 12px; font-weight: 800; }.swa-login-row { display: flex; gap: 7px; }.swa-login input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #dcd2c7; border-radius: 10px; padding: 10px; outline-color: var(--swa-primary); font: inherit; }.swa-login button { flex: 0 0 auto; border: 0; border-radius: 10px; padding: 0 12px; color: #fff; background: var(--swa-primary); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; }.swa-login small { display: block; margin-top: 8px; color: #746963; font-size: 11px; line-height: 1.35; }.swa-error { color: #a82323; font-weight: 700; }.swa-success { color: #47752d; font-weight: 700; }
.swa-challenge-card { margin-top: 1px; overflow: hidden; border: 1px solid #e9dac2; border-radius: 17px; background: #fff; box-shadow: 0 8px 18px rgba(72, 48, 35, .07); }.swa-challenge-top { padding: 13px 14px 12px; color: #482c24; background: linear-gradient(120deg, #fae7ba, #f5cf86); }.swa-challenge-top span { display: block; margin-bottom: 3px; color: #875237; font-size: 10px; font-weight: 900; letter-spacing: .12em; }.swa-challenge-top strong { display: block; font-size: 15px; }.swa-challenge-card ol { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 12px; list-style: none; counter-reset: none; }.swa-challenge-card li { display: flex; gap: 6px; align-items: flex-start; color: #5f5048; font-size: 11px; line-height: 1.25; }.swa-challenge-card li b { display: grid; flex: 0 0 auto; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: var(--swa-primary); font-size: 9px; }.swa-challenge-progress, .swa-coupon { margin: 0 12px 12px; padding: 10px; border-radius: 11px; background: #f8f2e9; }.swa-challenge-progress span, .swa-coupon span { display: block; color: #5e4338; font-size: 11px; font-weight: 800; }.swa-challenge-progress i { display: block; height: 6px; margin: 7px 0 5px; overflow: hidden; border-radius: 99px; background: #e4d5c1; }.swa-challenge-progress i b { display: block; height: 100%; border-radius: inherit; background: var(--swa-primary); transition: width .35s ease; }.swa-challenge-progress small, .swa-coupon small { display: block; color: #806d62; font-size: 10px; }.swa-coupon { border: 1px dashed var(--swa-primary); background: #fff7e9; }.swa-coupon strong { display: block; margin: 4px 0; color: var(--swa-primary); font-size: 17px; letter-spacing: .05em; }.swa-share-button, .swa-copy-button { display: block; width: calc(100% - 24px); margin: 0 12px 9px; border-radius: 10px; padding: 10px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; }.swa-share-button { border: 0; color: #fff; background: var(--swa-primary); }.swa-copy-button { border: 1px solid #e1d1bd; color: #6c332a; background: #fff; }
.swa-composer-note { padding: 10px 17px 14px; border-top: 1px solid #f0e8de; color: #867a73; background: #fffdfa; font-size: 10px; text-align: center; }
@keyframes swa-float { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-3px); } } @keyframes swa-pulse { 0%,100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.09); opacity: 0; } }
@media (max-width: 540px) { .swa-kajhu-root { right: 13px; bottom: 13px; }.swa-launcher-label { display: none; }.swa-launcher { padding: 7px; }.swa-panel { width: calc(100vw - 22px); border-radius: 22px; }.swa-chat { min-height: 270px; max-height: calc(100vh - 184px); padding: 15px; } }
@media (prefers-reduced-motion: reduce) { .swa-kajhu-root *, .swa-kajhu-root *:before { animation: none !important; scroll-behavior: auto !important; transition: none !important; } }