:root{--whapi-primary:#075e54;--whapi-secondary:#0a7e6f;--whapi-dark:#032e26;--whapi-light:#f2f7f2;--whapi-gold:#2ecc71;--whapi-gold-dark:#1e8449;--whapi-gold-light:#d5f5e3;--whapi-gold-shiny:linear-gradient(135deg, #58d68d 0%, #2ecc71 25%, #abebc6 50%, #2ecc71 75%, #1e8449 100%);--whapi-gold-glow:0 0 30px rgba(46, 204, 113, 0.25), 0 0 60px rgba(46, 204, 113, 0.08);--whapi-card-bg:rgba(255, 255, 255, 0.82);--sidebar-width:300px;--text-dark:#1a3a24;--text-medium:#4d6b57;--text-muted:#8ba396;--border-subtle:rgba(46, 125, 70, 0.06);--border-light:rgba(46, 125, 70, 0.08);--bg-hover:rgba(46, 125, 70, 0.04);--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--scroll-thumb:var(--whapi-gold);--scroll-track:rgba(46, 125, 70, 0.04)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;min-height:100vh;background:var(--whapi-light);background-image:radial-gradient(circle at 10% 20%,var(--bg-hover) 0%,transparent 60%),radial-gradient(circle at 90% 80%,rgb(46 204 113 / .05) 0%,transparent 50%);display:flex;color:var(--text-dark);font-size:16px}.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:rgb(255 255 255 / .97);border-right:1px solid var(--border-light);padding:20px 16px 16px 16px;overflow-y:auto;z-index:1040;transform:translateX(0);transition:transform 0.35s cubic-bezier(.22,.68,0,1.2);display:flex;flex-direction:column}.sidebar.mobile-closed{transform:translateX(calc(-1 * var(--sidebar-width) - 20px))}.sidebar.closed{transform:translateX(calc(-1 * var(--sidebar-width) - 20px))}.sidebar::-webkit-scrollbar,.chat-history::-webkit-scrollbar,.chat-area::-webkit-scrollbar,.modal-box::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track,.chat-history::-webkit-scrollbar-track,.chat-area::-webkit-scrollbar-track,.modal-box::-webkit-scrollbar-track{background:var(--scroll-track);border-radius:10px}.sidebar::-webkit-scrollbar-thumb,.chat-history::-webkit-scrollbar-thumb,.chat-area::-webkit-scrollbar-thumb,.modal-box::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:10px}.sidebar{scrollbar-width:thin;scrollbar-color:var(--whapi-gold-dark) var(--scroll-track)}.chat-history,.chat-area,.modal-box{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:2px solid var(--border-subtle);flex-shrink:0}.sidebar-brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--text-dark)}.sidebar-brand .gold{color:var(--whapi-gold-dark)}.sidebar-brand i{color:var(--whapi-primary);font-size:20px}.sidebar-close{background:none;border:none;font-size:20px;color:var(--text-muted);cursor:pointer;padding:4px 8px;border-radius:8px;transition:0.2s}.sidebar-close:hover{background:var(--border-subtle);color:var(--whapi-primary)}.profile-section{padding:12px 4px 12px;border-bottom:1px solid var(--border-subtle);flex-shrink:0;position:relative;cursor:pointer}.profile-trigger{display:flex;align-items:center;gap:12px;padding:4px 8px;border-radius:10px;transition:background 0.2s}.profile-trigger:hover{background:var(--bg-hover)}.profile-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--whapi-primary),var(--whapi-secondary));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0;border:2px solid rgb(46 204 113 / .2)}.profile-info{flex:1;min-width:0}.profile-info .name{font-size:15px;font-weight:600;color:var(--text-dark)}.profile-info .email{font-size:13px;color:var(--text-muted)}.profile-chevron{color:var(--text-muted);font-size:14px;transition:transform 0.25s ease}.profile-chevron.open{transform:rotate(180deg)}.profile-dropdown{position:absolute;top:calc(100% + 4px);left:4px;right:4px;background:rgb(255 255 255 / .96);backdrop-filter:blur(12px);border:1px solid var(--border-light);border-radius:12px;box-shadow:0 12px 40px rgb(0 0 0 / .08);padding:6px 0;display:none;z-index:10;overflow:hidden}.profile-dropdown.open{display:block}.profile-dropdown .dropdown-item{display:flex;align-items:center;gap:12px;padding:10px 16px;font-size:14px;color:var(--text-dark);cursor:pointer;transition:background 0.2s;border:none;background:#fff0;width:100%;font-family:inherit;text-align:left}.profile-dropdown .dropdown-item:hover{background:var(--bg-hover)}.profile-dropdown .dropdown-item i{color:var(--whapi-secondary);width:18px;text-align:center;font-size:15px}.profile-dropdown .dropdown-item .badge-item{margin-left:auto;font-size:11px;font-weight:600;color:var(--whapi-gold-dark);padding:1px 10px;border-radius:40px;background:rgb(46 204 113 / .1)}.profile-dropdown .dropdown-divider{border:none;border-top:1px solid var(--border-subtle);margin:4px 12px}.credit-section{padding:12px 4px 12px;border-bottom:1px solid var(--border-subtle);flex-shrink:0;position:relative}.credit-header{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:600;color:var(--text-dark);margin-bottom:6px}.credit-header .credit-amount{color:var(--whapi-gold-dark);font-size:16px;font-weight:700}.credit-header .credit-unit{font-size:11px;font-weight:400;color:var(--text-muted);margin-left:2px}.credit-header .credit-label{color:var(--text-medium);font-weight:400}.progress-bar-track{width:100%;height:6px;background:var(--border-light);border-radius:10px;overflow:hidden;position:relative;display:flex}.progress-bar-fill{height:100%;border-radius:0;transition:width 0.6s cubic-bezier(.22,.68,0,1.2)}.progress-bar-fill:first-child{border-radius:10px 0 0 10px}.progress-bar-fill:last-child{border-radius:0 10px 10px 0}.progress-free{background:linear-gradient(90deg,#2ecc71,#27ae60)}.progress-paid{background:linear-gradient(90deg,#e67e22,#f0a040)}.credit-breakdown{display:flex;align-items:center;gap:12px;margin-top:6px;font-size:11px}.credit-item{display:flex;align-items:center;gap:4px}.credit-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.credit-dot.free{background:#2ecc71}.credit-dot.paid-user{background:#145a32}.credit-dot.paid-user{background:#e67e22}.credit-type{color:var(--text-muted)}.credit-val{font-weight:700;color:var(--text-dark)}.credit-info-trigger{margin-left:auto;color:var(--text-muted);cursor:pointer;font-size:13px;transition:color 0.2s ease;position:relative}.credit-info-trigger:hover{color:var(--whapi-gold-dark)}.new-chat-section{padding:8px 4px 12px;border-bottom:1px solid var(--border-subtle);flex-shrink:0}.new-chat-btn{width:100%;padding:10px;border-radius:10px;border:1px dashed rgb(46 125 70 / .15);background:#fff0;color:var(--whapi-primary);font-weight:600;font-size:14px;cursor:pointer;transition:0.2s;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px}.new-chat-btn:hover{background:var(--bg-hover);border-color:rgb(46 125 70 / .25)}.section-title{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:700;padding:14px 4px 10px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bg-hover)}.chat-history{flex:1;overflow-y:auto;list-style:none;padding:0;margin:0 0 4px 0;min-height:60px}.chat-history li{padding:10px 12px;border-radius:8px;margin-bottom:2px;border:1px solid #fff0;font-size:14px;color:var(--text-dark);display:flex;align-items:center;gap:10px;transition:background 0.15s ease;position:relative;cursor:pointer}.chat-history li:hover{background:var(--bg-hover);border-color:var(--border-subtle)}.chat-history li.active{background:var(--border-light);border-color:rgb(46 125 70 / .12);font-weight:600}.chat-history li.pinned{background:rgb(230 126 34 / .04);border-color:rgb(230 126 34 / .12)}.chat-history li.pinned:hover{background:rgb(230 126 34 / .08)}.chat-history li.pinned i{color:#e67e22}.chat-history li i{color:var(--whapi-secondary);font-size:14px;width:18px;text-align:center;flex-shrink:0}.chat-history li .chat-preview{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.chat-history li .chat-time{font-size:11px;color:var(--text-muted);font-weight:400;flex-shrink:0}.sidebar-load-more{display:inline-flex;align-items:center;gap:6px;padding:7px 18px;background:#fff0;border:1px solid var(--border-light);border-radius:20px;color:var(--text-muted);font-size:12px;font-weight:500;cursor:pointer;transition:background 0.2s,color 0.2s,border-color 0.2s}.sidebar-load-more:hover{background:var(--bg-hover);color:var(--text-dark);border-color:#b8cfbe}.sidebar-load-more i{font-size:10px}.chat-history li .chat-time-top{font-size:10px;color:var(--text-muted);display:block;margin-bottom:1px;line-height:1.2}.chat-history li .chat-item-content{flex:1;min-width:0}.chat-history .session-group-header{padding:10px 12px 4px!important;font-size:11px!important;font-weight:600!important;color:var(--text-muted)!important;text-transform:uppercase;letter-spacing:.5px;cursor:default!important;border:none!important;margin-bottom:0!important}.chat-history .session-group-header:hover{background:transparent!important}.chat-history li .chat-menu-trigger{background:none;border:none;color:var(--whapi-primary);font-size:15px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:all 0.2s ease;opacity:0;flex-shrink:0;line-height:1;position:relative}.chat-history li:hover .chat-menu-trigger{opacity:1}.chat-history li .chat-menu-trigger:hover{background:rgb(46 125 70 / .1);color:var(--whapi-secondary)}.chat-dropdown{position:absolute;right:8px;top:100%;margin-top:2px;background:#fff;border:1px solid var(--border-light);border-radius:10px;box-shadow:0 6px 20px rgb(0 0 0 / .1);min-width:170px;z-index:20;display:none;padding:4px 0;overflow:hidden}.chat-dropdown.open{display:block;animation:fadeIn 0.15s ease}.chat-dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;font-size:13px;color:var(--text-dark);background:none;border:none;cursor:pointer;text-align:left;transition:background 0.12s ease;font-family:inherit}.chat-dropdown-item:hover{background:var(--bg-hover)}.chat-dropdown-item i{width:16px!important;text-align:center;font-size:12px!important;color:var(--text-muted)!important}.chat-dropdown .dropdown-divider{margin:4px 10px;border:none;border-top:1px solid var(--border-light)}.sidebar-footer{margin-top:auto;padding-top:12px;border-top:1px solid var(--border-subtle);flex-shrink:0}.toggle-sidebar{position:fixed;top:20px;left:20px;z-index:1050;background:rgb(255 255 255 / .85);backdrop-filter:blur(12px);border:1px solid rgb(46 125 70 / .1);border-radius:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-dark);cursor:pointer;box-shadow:0 4px 16px rgb(0 0 0 / .04);transition:opacity 0.3s ease,transform 0.3s ease,visibility 0.3s ease;opacity:1;visibility:visible;transform:scale(1);pointer-events:auto}.toggle-sidebar.hidden{opacity:0;visibility:hidden;transform:scale(.8);pointer-events:none}.toggle-sidebar:hover{background:rgb(255 255 255 / .95);box-shadow:0 4px 20px rgb(0 0 0 / .06)}.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .35);z-index:1039;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease}.sidebar-overlay.show{opacity:1;visibility:visible}.main-content{flex:1;margin-left:var(--sidebar-width);padding:24px 24px 20px;transition:margin-left 0.35s cubic-bezier(.22,.68,0,1.2);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.sidebar.closed~.main-content{margin-left:0}.main-content.mobile{margin-left:0!important;padding:10px 12px 8px;justify-content:center}.hero-section{width:100%;max-width:860px;text-align:center;margin-bottom:10px;padding:0 6px;flex-shrink:0;max-height:340px;opacity:1;overflow:hidden;transition:max-height 0.45s cubic-bezier(.4,0,.2,1),opacity 0.35s ease,margin-bottom 0.45s cubic-bezier(.4,0,.2,1)}.hero-section.hidden{max-height:0;opacity:0;margin-bottom:0;pointer-events:none}.hero-row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.hero-mascot{flex-shrink:0;width:220px;height:auto;display:flex;align-items:center;justify-content:center}.mascot-img{width:100%;height:auto;display:block;object-fit:contain;animation:mascotFloat 3s ease-in-out infinite;filter:drop-shadow(0 10px 30px rgb(46 204 113 / .25))}@keyframes mascotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}.hero-slider-wrapper{display:flex;align-items:center;justify-content:center;height:28px;overflow:hidden}.hero-slide{display:none;align-items:center;gap:8px;font-size:17px;color:#2d4a3e;font-weight:500;line-height:1.4;white-space:nowrap;animation:taglineFadeIn 0.5s ease forwards}.hero-slide.active{display:flex}@keyframes taglineFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.hero-slide .slide-icon{font-size:19px;color:var(--whapi-gold-dark);flex-shrink:0}.hero-slide .highlight-text{color:var(--whapi-primary);font-weight:700}.hero-slide .badge-3d{display:inline-block;background:var(--whapi-gold);color:#fff;font-size:9px;font-weight:800;text-transform:uppercase;padding:2px 10px;border-radius:40px;margin-left:4px;border:1px solid rgb(46 204 113 / .2)}.app-container{width:100%;max-width:860px;max-height:calc(100vh - 110px);background:rgb(255 255 255 / .92);border-radius:32px;box-shadow:0 16px 48px rgb(0 20 8 / .08),0 6px 16px rgb(0 0 0 / .02),inset 0 0 0 1px var(--border-subtle);border:1px solid rgb(255 255 255 / .4);text-align:center;position:relative;display:flex;flex-direction:column;overflow:hidden}.chat-area{overflow-y:auto;overflow-x:hidden;padding:18px 20px 14px 20px;text-align:left;min-height:60px}.chat-area .empty-state{text-align:center;color:var(--text-muted);font-size:16px;padding:30px 0;opacity:.6}.chat-area .empty-state i{font-size:28px}.bubble-customer{display:flex;justify-content:flex-end;margin-bottom:10px;opacity:0;transform:translateX(30px) scale(.92);animation:bubbleSlideInRight 0.4s cubic-bezier(.22,.68,0,1.2) forwards}.bubble-customer .bubble-content{background:#2ecc71;color:#fff;padding:10px 16px;border-radius:16px 16px 4px 16px;max-width:85%;font-size:16px;line-height:1.45;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;box-shadow:var(--whapi-gold-glow);border:1px solid rgb(46 204 113 / .15)}.bubble-customer .bubble-content .bubble-time{display:block;font-size:12px;opacity:.6;margin-top:4px;text-align:right}@keyframes bubbleSlideInRight{0%{opacity:0;transform:translateX(30px) scale(.92)}100%{opacity:1;transform:translateX(0) scale(1)}}.ai-message{display:flex;justify-content:flex-start;margin-bottom:10px;opacity:0;transform:translateX(-30px) scale(.96);animation:bubbleSlideInLeft 0.5s cubic-bezier(.22,.68,0,1.2) forwards}.ai-message .ai-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--whapi-primary),var(--whapi-secondary));color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;margin-right:10px;border:2px solid rgb(46 204 113 / .15);opacity:0;animation:fadeIn 0.4s ease 0.15s forwards}.ai-message .ai-wrapper{display:flex;align-items:flex-start;max-width:88%}.ai-message .ai-content{color:var(--text-dark);padding:0;font-size:16px;line-height:1.5;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;max-width:100%;overflow-x:hidden}.ai-message .ai-content .ai-time{display:block;font-size:12px;opacity:.5;margin-top:4px}.ai-copy-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:28px;margin-top:8px;background:none;border:1px solid var(--border-light);border-radius:6px;cursor:pointer;color:var(--text-muted);font-size:15px;opacity:1;transition:color 0.2s ease,border-color 0.2s ease}.ai-copy-btn:hover{color:var(--whapi-secondary);border-color:var(--whapi-secondary)}@keyframes bubbleSlideInLeft{0%{opacity:0;transform:translateX(-30px) scale(.96)}100%{opacity:1;transform:translateX(0) scale(1)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}@keyframes skeletonPulse{0%,100%{opacity:.4}50%{opacity:.8}}.skeleton-line{height:14px;border-radius:6px;background:var(--border-light);animation:skeletonPulse 1.5s ease-in-out infinite;margin-bottom:8px}.skeleton-line:last-child{width:60%}.skeleton-bubble{display:flex;gap:10px;padding:10px 0}.skeleton-avatar{width:32px;height:32px;border-radius:50%;background:var(--border-light);animation:skeletonPulse 1.5s ease-in-out infinite;flex-shrink:0}.skeleton-body{flex:1;display:flex;flex-direction:column;gap:6px}.skeleton-body .skeleton-line{margin-bottom:0}.skeleton-body .skeleton-line:nth-child(2){width:85%}.skeleton-body .skeleton-line:nth-child(3){width:45%}.session-item-skeleton{display:flex;align-items:center;gap:10px;padding:10px 12px}.session-item-skeleton .skeleton-icon{width:18px;height:18px;border-radius:4px;background:var(--border-light);animation:skeletonPulse 1.5s ease-in-out infinite;flex-shrink:0}.session-item-skeleton .skeleton-text{flex:1;height:12px;border-radius:4px;background:var(--border-light);animation:skeletonPulse 1.5s ease-in-out infinite}.load-more-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 16px;margin-bottom:6px;background:#fff0;border:1px dashed var(--border-light);border-radius:8px;color:#8ba396;font-size:13px;font-weight:500;cursor:pointer;text-align:center;transition:background 0.2s,color 0.2s,border-color 0.2s}.load-more-btn:hover{background:rgb(90 138 106 / .06);color:#4a7a5a;border-color:#b8d0be}.load-more-btn:active{background:rgb(90 138 106 / .1)}.load-more-btn:disabled{opacity:.5;cursor:default;border-color:#fff0}.load-more-btn .lm-icon{font-size:11px;opacity:.7;transition:transform 0.3s ease}.load-more-btn:hover .lm-icon{transform:translateY(-2px);opacity:1}.load-more-btn.loading .lm-icon{animation:lmSpin 0.8s linear infinite}@keyframes lmSpin{to{transform:rotate(360deg)}}.typing-indicator{display:flex;align-items:center;margin-bottom:14px;padding-left:42px;gap:0}.typing-indicator .typing-content{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgb(46 204 113 / .04);border:1px solid rgb(46 204 113 / .08);border-radius:12px}.typing-indicator .typing-content .typing-label{font-size:13px;color:#6b8b75;font-weight:400;font-style:italic;animation:labelPulse 2s ease-in-out infinite}@keyframes labelPulse{0%,100%{opacity:.55}50%{opacity:1}}.typing-indicator .typing-content .dots-group{display:flex;align-items:center;gap:4px}.typing-indicator .typing-content .dots-group span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--whapi-gold);animation:typingWave 1.2s ease-in-out infinite both}.typing-indicator .typing-content .dots-group span:nth-child(1){animation-delay:0s}.typing-indicator .typing-content .dots-group span:nth-child(2){animation-delay:0.15s}.typing-indicator .typing-content .dots-group span:nth-child(3){animation-delay:0.3s}@keyframes typingWave{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-6px);opacity:1}}.input-area{padding:14px 20px 20px 20px;border-top:1px solid var(--bg-hover);background:rgb(255 255 255 / .2);backdrop-filter:blur(4px);flex-shrink:0}.mode-selector{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}.mode-btn{flex:1 1 140px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 10px;border-radius:14px;border:2px solid rgb(46 125 70 / .1);background:rgb(255 255 255 / .5);cursor:pointer;transition:all 0.25s ease;font-family:inherit;backdrop-filter:blur(4px);color:var(--text-medium);min-width:110px}.mode-btn .mode-icon{font-size:24px;color:var(--text-muted);transition:color 0.25s ease}.mode-btn .mode-label{font-size:14px;font-weight:700;color:var(--text-dark)}.mode-btn .mode-desc{font-size:10px;font-weight:400;color:var(--text-muted);text-align:center;line-height:1.3}.mode-btn:hover{background:rgb(255 255 255 / .75);border-color:rgb(46 204 113 / .25)}.mode-btn.active{background:rgb(46 204 113 / .06);border-color:var(--whapi-gold);box-shadow:0 0 0 3px rgb(46 204 113 / .06)}.mode-btn.active .mode-icon{color:var(--whapi-gold-dark)}.mode-btn.active .mode-label{color:var(--whapi-primary)}.mode-btn.disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6);position:relative}.mode-btn.disabled:hover{background:rgb(255 255 255 / .5);border-color:rgb(46 125 70 / .1)}.mode-btn.disabled::after{content:"🔒";position:absolute;top:6px;right:8px;font-size:11px;opacity:.8}.mode-tooltip{display:none}.mode-btn.disabled .mode-tooltip{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#111;color:#fff;font-size:12px;font-weight:500;padding:8px 14px;border-radius:8px;white-space:nowrap;z-index:10;box-shadow:0 4px 16px rgb(0 0 0 / .25);pointer-events:none}.mode-btn.disabled .mode-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid #fff0;border-top-color:#111}.mode-btn.disabled:hover .mode-tooltip{display:block;animation:tooltipFadeIn 0.2s ease}@keyframes tooltipFadeIn{from{opacity:0;transform:translateX(-50%) translateY(4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.input-container{border-radius:14px;border:1.5px solid var(--border-light);overflow:hidden;background:rgb(255 255 255 / .3);backdrop-filter:blur(4px);padding:4px 4px 4px 16px;transition:border-color 0.3s ease,box-shadow 0.3s ease}.input-container:focus-within{border-color:var(--whapi-gold-dark);box-shadow:0 0 0 4px rgb(46 204 113 / .06)}.mode-hint{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;margin-top:8px;font-size:12px;color:var(--text-muted);background:rgb(46 204 113 / .06);border-radius:8px;border:1px solid rgb(46 204 113 / .12);animation:fadeIn 0.3s ease}.mode-hint i{color:var(--whapi-gold-dark);font-size:11px}.input-wrapper{display:flex;align-items:flex-end;gap:10px;background:#fff0}.prompt-input{flex:1;background:#fff0;border:none;outline:none;color:var(--text-dark);font-size:16px;font-family:inherit;resize:none;padding:10px 0;min-height:28px;max-height:120px;line-height:1.6;overflow-y:auto}.prompt-input::placeholder{color:var(--text-muted);font-size:15px}.prompt-input.input-disabled{cursor:not-allowed;opacity:.5}.prompt-input.input-disabled::placeholder{color:#b0b0b0;font-style:italic}.send-btn{background:var(--whapi-gold);border:none;border-radius:50%;width:44px;height:44px;flex-shrink:0;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;border:1px solid rgb(46 204 113 / .2)}.send-btn:hover{transform:scale(1.04);background:var(--whapi-gold-dark)}.send-btn:active{transform:scale(.94)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .55);z-index:9999;display:none;align-items:center;justify-content:center;animation:fadeInOverlay 0.3s ease}.modal-overlay.open{display:flex}@keyframes fadeInOverlay{from{opacity:0}to{opacity:1}}.modal-box{background:#fff;border-radius:24px;max-width:480px;width:92%;padding:36px 32px 30px;box-shadow:0 32px 80px rgb(0 0 0 / .15);animation:slideUpModal 0.35s cubic-bezier(.22,.68,0,1.2);max-height:90vh;overflow-y:auto;position:relative}@keyframes slideUpModal{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:22px;color:var(--text-muted);cursor:pointer;transition:0.2s;padding:4px 8px;border-radius:8px}.modal-close:hover{background:var(--border-subtle);color:var(--whapi-primary)}.modal-icon{font-size:48px;color:var(--whapi-gold-dark);margin-bottom:12px;display:block}.modal-title{font-size:24px;font-weight:700;color:var(--text-dark);margin-bottom:4px}.modal-subtitle{font-size:15px;color:var(--text-medium);margin-bottom:18px;line-height:1.5}.modal-divider{border:none;border-top:1px solid var(--border-subtle);margin:16px 0}.account-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--bg-hover)}.account-item:last-child{border-bottom:none}.account-item .label{font-size:14px;color:var(--text-medium)}.account-item .value{font-size:15px;font-weight:600;color:var(--text-dark)}.account-item .value.gold{color:var(--whapi-gold-dark)}.account-item .badge-status{font-size:12px;font-weight:600;padding:2px 14px;border-radius:40px;background:var(--border-subtle);color:var(--whapi-primary)}.account-item .badge-status.active{background:var(--whapi-gold);color:#fff}.credit-package{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;border:1.5px solid var(--border-light);margin-bottom:10px;transition:border-color 0.25s ease;cursor:pointer}.credit-package:hover{border-color:var(--whapi-gold-dark)}.credit-package.active{border-color:var(--whapi-gold-dark);background:rgb(46 204 113 / .06);box-shadow:0 0 0 1px rgb(46 204 113 / .15)}.credit-package .package-info .name{font-size:15px;font-weight:600;color:var(--text-dark)}.credit-package .package-info .desc{font-size:13px;color:var(--text-muted)}.credit-package .package-price{font-size:17px;font-weight:700;color:var(--whapi-gold-dark)}.credit-package .package-price .per{font-size:12px;font-weight:400;color:var(--text-muted)}.trial-notice{text-align:center;padding:8px 0}.credit-total{margin-top:12px;padding:14px 16px;background:linear-gradient(145deg,rgb(7 94 84 / .02),rgb(67 206 139 / .02));border-radius:12px;border:1px dashed rgb(46 125 70 / .1);display:flex;justify-content:space-between;align-items:center}.credit-total .label{font-size:14px;color:var(--text-medium)}.credit-total .amount{font-size:20px;font-weight:700;color:var(--whapi-gold-dark)}.modal-btn{width:100%;padding:14px;border-radius:12px;border:none;font-weight:700;font-size:15px;cursor:pointer;transition:all 0.25s ease;font-family:inherit;margin-top:6px}.modal-btn.gold{color:#361f00;background:linear-gradient(180deg,rgb(255 255 255 / .32) 0%,rgb(255 250 218 / .2) 18%,rgb(255 236 172 / .1) 34%,#fff0 35%),linear-gradient(135deg,#b38108 0%,#dba717 24%,#fad252 48%,#ffe891 62%,#f1bf29 82%,#b78409 100%);border:1px solid rgb(255 244 211 / .98);border-bottom-color:rgb(154 104 8 / .94);text-shadow:0 1px 0 rgb(255 250 231 / .32),0 2px 6px rgb(54 31 0 / .1);box-shadow:inset 0 1px 0 rgb(255 255 255 / .34),inset 0 -3px 0 rgb(151 102 8 / .24),0 14px 28px rgb(135 93 9 / .26),0 0 18px rgb(255 220 108 / .2);filter:saturate(1.1) brightness(1.01);text-decoration:none;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}.modal-btn.gold:hover{filter:saturate(1.2) brightness(1.05);box-shadow:inset 0 1px 0 rgb(255 255 255 / .4),inset 0 -3px 0 rgb(151 102 8 / .3),0 18px 36px rgb(135 93 9 / .35),0 0 24px rgb(255 220 108 / .3);transform:translateY(-1px)}.modal-btn.secondary{background:var(--bg-hover);color:var(--whapi-primary);border:1px solid var(--border-light)}.modal-btn.secondary:hover{background:var(--border-light)}.modal-btn.outline{background:#fff0;color:var(--whapi-primary);border:2px solid var(--whapi-gold)}.modal-btn.outline:hover{background:rgb(46 204 113 / .06);border-color:var(--whapi-gold-dark)}.modal-box-wide{max-width:620px}.history-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -8px;padding:0 8px}.history-table{width:100%;border-collapse:collapse;font-size:13px}.history-table thead th{text-align:left;padding:10px 12px;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--border-subtle)}.history-table tbody td{padding:12px;border-bottom:1px solid var(--bg-hover);color:var(--text-dark);font-weight:500}.history-table tbody tr:hover{background:rgb(46 204 113 / .04)}.history-table tbody{transition:opacity 0.15s ease}.history-table tbody.loading-state{opacity:.4}.history-table .col-credit{color:var(--whapi-gold-dark);font-weight:700}.history-table .col-trx{font-family:'SF Mono','Cascadia Code',monospace;font-size:11px;color:var(--text-muted);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-table .col-msg{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.history-empty td{text-align:center;color:var(--text-muted);padding:32px 12px!important;font-style:italic}.pagination-row{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px}.pagination-btn{padding:8px 16px;border-radius:10px;border:1px solid var(--border-light);background:#fff;color:var(--whapi-primary);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:inherit;display:flex;align-items:center;gap:6px}.pagination-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--whapi-gold-dark)}.pagination-btn:disabled{opacity:.4;cursor:not-allowed}.pagination-info{font-size:13px;color:var(--text-medium);font-weight:500;min-width:80px;text-align:center}.license-input-group{margin-bottom:16px;text-align:left}.license-input-group label{display:block;font-size:14px;font-weight:600;color:var(--text-dark);margin-bottom:4px}.license-input-group label .required{color:#e0486e}.license-input-group .license-input{width:100%;padding:12px 16px;border-radius:10px;border:1.5px solid rgb(46 125 70 / .1);font-size:15px;font-family:inherit;transition:border-color 0.3s,box-shadow 0.3s;background:rgb(255 255 255 / .6)}.license-input-group .license-input:focus{border-color:var(--whapi-gold-dark);outline:none;box-shadow:0 0 0 4px rgb(46 204 113 / .06)}.license-input-group .license-input::placeholder{color:#b8cdbf}.license-input-group .license-hint{font-size:13px;color:var(--text-muted);margin-top:4px}.license-input-group .license-hint i{color:var(--whapi-gold-dark)}.license-footer-buttons{display:flex;flex-direction:column;gap:10px;margin-top:12px}.stream-text{white-space:normal;word-break:break-word;line-height:1.55}.stream-text>:first-child{margin-top:0!important}.stream-text>:last-child{margin-bottom:0!important}.stream-text h1,.stream-text h2,.stream-text h3{margin:12px 0 6px;color:var(--text-dark);line-height:1.3;font-size:1.05em;font-weight:700}.stream-text p{margin:9px 0}.stream-text ul,.stream-text ol{margin:10px 0;padding-left:22px;list-style-position:outside}.stream-text li{margin:8px 0;padding:0;line-height:1.5}.stream-text li p{margin:8px 0}.stream-text code{background:var(--bg-hover);padding:0 4px;border-radius:3px;font-family:'JetBrains Mono','Consolas',monospace;font-size:.92em}.stream-text pre{background:#0f1f14;color:#e0e8e0;padding:12px 14px;border-radius:8px;overflow-x:auto;margin:10px 0 12px;font-size:.88em;line-height:1.45;max-width:100%}.stream-text pre code{background:none;padding:0;color:inherit;font-size:inherit;white-space:pre-wrap;word-break:break-word}.stream-text strong{color:var(--text-dark);font-weight:700}.stream-text em{color:var(--text-medium)}.stream-text blockquote{border-left:2px solid var(--whapi-gold);margin:6px 0;padding:4px 12px;color:var(--text-medium);background:rgb(46 204 113 / .03);border-radius:0 4px 4px 0}.stream-text table{border-collapse:collapse;width:100%;margin:6px 0;font-size:.9em}.stream-text th,.stream-text td{border:1px solid var(--border-light);padding:3px 10px;text-align:left}.stream-text th{background:var(--border-subtle)}.stream-text hr{margin:8px 0;border:none;border-top:1px solid var(--border-light)}.code-block-wrapper{margin:12px 0 14px;border-radius:8px;overflow:hidden}.code-block-header{display:flex;justify-content:space-between;align-items:center;padding:4px 12px;background:#1a2a1f;font-size:11px;color:var(--text-muted)}.code-block-header .code-lang{text-transform:uppercase;letter-spacing:.5px}.code-block-header .code-block-actions{display:flex;gap:4px}.code-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:3px 7px;border-radius:4px;font-size:12px;transition:all .15s}.code-btn:hover{background:rgb(255 255 255 / .08);color:#e0e8e0}.code-block-wrapper pre{margin:0!important;border-radius:0 0 8px 8px!important}.scroll-down-btn{position:absolute;bottom:180px;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;background:var(--whapi-primary);color:#fff;border:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;visibility:hidden;transition:opacity 0.25s ease,visibility 0.25s ease,transform 0.25s ease;box-shadow:0 4px 16px rgb(0 0 0 / .15)}.scroll-down-btn.visible{opacity:1;visibility:visible}.scroll-down-btn:hover{background:var(--whapi-secondary);transform:translateX(-50%) scale(1.08)}@media (max-width:768px){.scroll-down-btn{bottom:150px}}@media (max-width:640px){.scroll-down-btn{bottom:130px}}.toast-container{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{display:flex;align-items:center;gap:10px;padding:14px 20px;border-radius:12px;background:#fff;box-shadow:0 8px 32px rgb(0 0 0 / .15);font-size:14px;font-weight:500;color:var(--text-dark);pointer-events:auto;animation:toastIn 0.4s cubic-bezier(.22,.68,0,1.2);max-width:420px}.toast.warning{border-left:4px solid #e67e22}.toast.error{border-left:4px solid #e0486e}.toast i{font-size:18px;flex-shrink:0}.toast.warning i{color:#e67e22}.toast.error i{color:#e0486e}.toast .toast-msg{flex:1}.toast .toast-cta{color:#e67e22;text-decoration:underline;font-weight:600;cursor:pointer}.toast .toast-cta:hover{color:#f0a040}@keyframes toastIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-20px) scale(.95)}}@media (max-width:820px){:root{--sidebar-width:280px}.app-container{max-height:calc(100vh - 90px);border-radius:28px}.chat-area{padding:14px 16px 10px 16px}.input-area{padding:10px 16px 16px 16px}.hero-section{max-height:260px}.hero-row{gap:10px}.hero-mascot{width:160px;height:160px}.hero-slide{font-size:16px}.mode-selector{gap:8px}.mode-btn{padding:10px 8px}.mode-btn .mode-icon{font-size:22px}.mode-btn .mode-label{font-size:13px}.mode-btn .mode-desc{font-size:9px}.send-btn{width:40px;height:40px;font-size:16px}.toggle-sidebar{top:14px;left:14px;width:40px;height:40px;font-size:18px}.sidebar{padding:16px 12px;width:var(--sidebar-width)}.bubble-customer .bubble-content{font-size:15px;padding:8px 14px}.ai-message .ai-content{font-size:15px}.modal-box{padding:28px 22px 24px;max-width:420px}.modal-title{font-size:21px}}@media (max-width:480px){.sidebar{width:280px;max-width:85%;border-radius:0 16px 16px 0;padding:16px 14px;transform:translateX(calc(-100% - 20px));transition:transform 0.3s cubic-bezier(.22,.68,0,1.2)}.sidebar.open{transform:translateX(0)}.sidebar.mobile-closed{transform:translateX(calc(-100% - 20px))}.sidebar.closed{transform:translateX(calc(-100% - 20px))}.main-content{margin-left:0!important;padding:14px 14px 10px;justify-content:center;min-height:100vh;min-height:100dvh}.toggle-sidebar{display:flex!important;top:12px;left:12px;width:40px;height:40px;font-size:18px;z-index:1050;transition:opacity 0.3s ease,visibility 0.3s ease,transform 0.3s ease}.toggle-sidebar.hidden{opacity:0;visibility:hidden;transform:scale(.8);pointer-events:none}.toggle-sidebar.visible{opacity:1;visibility:visible;transform:scale(1);pointer-events:auto}.sidebar-overlay.show{opacity:1;visibility:visible}.app-container{max-height:calc(100dvh - 100px);border-radius:20px;width:100%;max-width:100%;overflow:hidden}.chat-area{padding:10px 10px 6px 10px;overflow-x:hidden;overflow-y:auto;max-width:100%}.input-area{padding:4px 8px 10px 8px;max-width:100%}.hero-section{margin-bottom:6px;max-height:180px}.hero-row{gap:6px}.hero-mascot{width:150px;height:150px}.hero-slider-wrapper{display:none}.hero-slide{font-size:13px;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-slide .slide-icon{font-size:15px}.hero-slide .badge-3d{font-size:7px;padding:2px 8px}.mode-selector{display:grid;grid-template-columns:1fr 1fr;gap:6px}.mode-btn{flex:none;padding:8px 6px;gap:2px;border-radius:12px;min-width:90px}.mode-btn .mode-icon{font-size:18px}.mode-btn .mode-label{font-size:11px}.mode-btn .mode-desc{font-size:8px}.mode-btn:last-child{grid-column:1 / -1}.input-container{border-radius:12px;padding:3px 3px 3px 12px}.prompt-input{font-size:16px;padding:8px 0;min-height:22px;max-height:100px}.prompt-input::placeholder{font-size:14px}.send-btn{width:40px;height:40px;font-size:16px;border-radius:50%}.bubble-customer .bubble-content{font-size:15px;padding:8px 12px;max-width:90%}.bubble-customer .bubble-content .bubble-time{font-size:11px}.ai-message .ai-avatar{width:28px;height:28px;font-size:13px;margin-right:8px}.ai-message .ai-content{font-size:15px;line-height:1.5;overflow-x:hidden;word-break:break-word;max-width:100%}.ai-message .ai-content .ai-time{font-size:11px}.ai-message .ai-wrapper{max-width:92%}.typing-indicator{padding-left:36px}.typing-indicator .typing-content .typing-label{font-size:12px}.stream-text,.stream-text *{max-width:100%!important;word-break:break-word}.stream-text h1,.stream-text h2,.stream-text h3{margin:9px 0 5px!important;font-size:1.05em!important;line-height:1.3!important}.stream-text p{margin:3px 0!important;font-size:1em!important;line-height:1.5!important}.stream-text li{margin:2px 0!important;font-size:1em!important;line-height:1.5!important}.stream-text li p{margin:2px 0!important;font-size:1em!important;line-height:1.5!important}.stream-text blockquote{margin:5px 0!important;padding:3px 10px!important;font-size:1em!important;line-height:1.45!important}.stream-text pre{font-size:.85em!important;padding:8px 10px!important;margin:8px 0 10px!important;line-height:1.4!important;max-width:100%!important;overflow-x:auto!important;white-space:pre-wrap!important;word-break:break-all!important}.stream-text pre code{font-size:inherit!important;white-space:pre-wrap!important;word-break:break-all!important}.stream-text code{font-size:.9em!important;padding:1px 4px!important;word-break:break-all!important}.stream-text table{font-size:.82em!important;min-width:100%!important;margin:4px 0!important}.stream-text th,.stream-text td{padding:3px 6px!important;font-size:.78em!important}.stream-text ul,.stream-text ol{padding-left:22px!important;margin:5px 0!important}.stream-text hr{margin:6px 0!important}.code-block-wrapper{margin:8px 0 10px}.code-block-header{font-size:9px;padding:2px 6px}.code-btn{font-size:10px;padding:2px 4px}.chat-area .empty-state{font-size:15px;padding:20px 0}.chat-area .empty-state i{font-size:28px}.sidebar-brand{font-size:17px}.profile-info .name{font-size:14px}.profile-info .email{font-size:12px}.profile-avatar{width:36px;height:36px;font-size:14px}.credit-header{font-size:13px}.credit-header .credit-amount{font-size:15px}.section-title{font-size:12px;padding:12px 4px 8px}.chat-history li{font-size:14px;padding:8px 10px}.chat-history li i{font-size:14px;width:18px}.chat-history li .chat-time{font-size:11px}.chat-history li .chat-delete{font-size:14px}.new-chat-btn{font-size:13px;padding:10px}.modal-box{padding:22px 16px 20px;max-width:340px;border-radius:18px}.modal-box-wide{max-width:95vw}.modal-title{font-size:19px}.modal-icon{font-size:38px}.modal-subtitle{font-size:14px}.account-item .label{font-size:13px}.account-item .value{font-size:14px}.credit-package{padding:10px 12px}.credit-package .package-info .name{font-size:14px}.credit-package .package-info .desc{font-size:12px}.credit-package .package-price{font-size:15px}.credit-total .label{font-size:13px}.credit-total .amount{font-size:17px}.modal-btn{font-size:14px;padding:12px}.license-input-group label{font-size:13px}.license-input-group .license-input{font-size:14px;padding:10px 12px}.license-input-group .license-hint{font-size:12px}}@media (max-width:380px){.hero-section{max-height:150px}.hero-row{gap:5px}.hero-mascot{width:100px;height:100px}.hero-slide{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-container{max-height:calc(100vh - 60px);border-radius:16px}.mode-selector{display:grid;grid-template-columns:1fr 1fr;gap:5px}.mode-btn{flex:none;padding:7px 5px;gap:2px;border-radius:10px;min-width:80px}.mode-btn .mode-icon{font-size:16px}.mode-btn .mode-label{font-size:10px}.mode-btn .mode-desc{font-size:7px}.prompt-input{font-size:15px}.send-btn{width:34px;height:34px;font-size:14px}.modal-box{padding:16px 12px 14px;max-width:300px}.modal-title{font-size:17px}.bubble-customer .bubble-content{font-size:11px;padding:5px 8px}.ai-message .ai-content{font-size:11px}.sidebar{width:240px;max-width:80%}}