:root{--wa-bg: #F0F2F5;--wa-chat-bg: #EFEAE2;--wa-primary: #008069;--wa-primary-hover: #006b58;--wa-surface: #FFFFFF;--wa-danger: #EA0038;--text-main: #111B21;--text-meta: #667781;--bubble-mine: #D9FDD3;--bubble-theirs: #FFFFFF;--sys-msg-bg: #FFEECD;--sys-msg-text: #543B12;--radius-card: 24px;--radius-bubble: 8px;--font-sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--shadow-card: 0 4px 12px rgba(11,20,26,.05), 0 12px 24px rgba(11,20,26,.05);--shadow-bubble: 0 1px .5px rgba(11,20,26,.13);--shadow-header: 0 1px 2px rgba(11,20,26,.06)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%;overflow:hidden;font-family:var(--font-sys);color:var(--text-main);background:var(--wa-bg);-webkit-font-smoothing:antialiased}.app{position:relative;height:100%;display:flex;flex-direction:column}.screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;background:var(--wa-bg)}.screen--centered{align-items:center;justify-content:center;padding:20px}.native-card{background:var(--wa-surface);border-radius:var(--radius-card);padding:36px 28px;box-shadow:var(--shadow-card);width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}.native-card h2{font-size:22px;font-weight:600;color:var(--text-main);margin-bottom:-4px}.text-body{font-size:15px;color:var(--text-meta);line-height:1.5}.btn-native{font-family:inherit;font-weight:600;font-size:15px;border-radius:100px;border:none;cursor:pointer;padding:14px 24px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s}.btn-native:disabled{opacity:.7;cursor:not-allowed}.btn-native--primary{background:var(--wa-primary);color:#fff}.btn-native--primary:not(:disabled):hover{background:var(--wa-primary-hover)}.btn-native--secondary{background:#f0f2f5;color:var(--text-main);font-weight:500}.btn-native--secondary:hover{background:#e4e7ea}.btn-native--danger{background:#fce8ec;color:var(--wa-danger);font-weight:500}.btn-native--danger:hover{background:#fbd3db}.btn-text-only{background:transparent;border:none;color:var(--text-meta);font-size:15px;font-weight:500;cursor:pointer;padding:10px;transition:color .2s}.btn-text-only:hover{color:var(--text-main)}.typing-indicator{display:flex;align-items:center;justify-content:center;gap:4px;height:20px}.typing-indicator span{display:block;width:6px;height:6px;border-radius:50%;background:currentColor;animation:typing-bounce 1.4s infinite ease-in-out both}.typing-indicator--white span{background:#fff}.typing-indicator--small span{width:5px;height:5px}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes typing-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.ripple-loader{position:relative;width:72px;height:72px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.ripple-core{width:48px;height:48px;background:#e7f3ff;color:#007bff;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2}.ripple-core svg{width:22px;height:22px}.ripple-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px solid #007BFF;animation:ripple-expand 2s cubic-bezier(.1,.9,.2,1) infinite;opacity:0}.ripple-ring--delay{animation-delay:1s}@keyframes ripple-expand{0%{transform:scale(.6);opacity:.8}to{transform:scale(1.4);opacity:0}}.spinner-ring{width:16px;height:16px;border:2px solid #D1D7DB;border-top-color:var(--text-meta);border-radius:50%;animation:spin-fast .8s linear infinite}@keyframes spin-fast{to{transform:rotate(360deg)}}.screen--onboarding{background:var(--wa-surface);align-items:center;justify-content:center;padding:32px}.onboarding-container{max-width:400px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:48px}.hero-graphic{margin-top:20px}.shield-icon{position:relative;width:100px;height:100px;color:var(--wa-primary)}.shield-icon>svg{width:100%;height:100%;opacity:.15}.shield-check{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--wa-primary)}.shield-check svg{width:44px;height:44px}.text-content{display:flex;flex-direction:column;gap:12px}.brand-title{font-size:28px;font-weight:600}.brand-subtitle{font-size:15px;color:var(--text-meta);line-height:1.5}.action-area{width:100%;display:flex;flex-direction:column;gap:20px;align-items:center;margin-bottom:20px}.security-note{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-meta);font-weight:500}.security-note svg{width:14px;height:14px;color:var(--wa-primary)}.icon-header{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:-4px}.icon-header svg{width:28px;height:28px}.icon-header--blue{background:#e7f3ff;color:#007bff}.icon-header--yellow{background:#fff4e5;color:#ff9800}.url-box{width:100%;background:#f8f9fa;border:1px solid #E4E7EA;border-radius:12px;padding:12px}.url-input{width:100%;background:transparent;border:none;outline:none;font-family:ui-monospace,monospace;font-size:13px;color:var(--text-main);resize:none;word-break:break-all}.status-indicator{display:flex;align-items:center;gap:10px;color:var(--text-meta);font-size:14px;margin-top:8px}.safety-code-plate{font-family:ui-monospace,monospace;font-size:36px;font-weight:600;letter-spacing:.1em;color:var(--text-main);background:#f8f9fa;padding:20px 0;border-radius:16px;width:100%;border:1px solid #E4E7EA}.button-stack{display:flex;flex-direction:column;gap:12px;width:100%}.screen--chat{background:var(--wa-chat-bg);z-index:20}.chat-doodle-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:.04;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20 c 5 -5, 10 5, 15 0'/%3E%3Ccircle cx='80' cy='30' r='5'/%3E%3Cpath d='M77 27 l 6 6 m 0 -6 l -6 6'/%3E%3Cpath d='M30 80 q 10 -10 20 0 t 20 0'/%3E%3Cpath d='M90 90 l 10 10 m 0 -10 l -10 10'/%3E%3Cpath d='M10 60 l 5 -5 l 5 5 l -5 5 z'/%3E%3C/g%3E%3C/svg%3E");background-size:150px 150px;background-repeat:repeat}.chat-header{height:60px;background:var(--wa-surface);display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 8px;box-shadow:var(--shadow-header);z-index:20;flex-shrink:0}.header-left{display:flex;align-items:center}.btn-back{background:transparent;border:none;color:var(--wa-primary);height:40px;width:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.btn-back svg{width:24px;height:24px}.avatar-group{display:flex;align-items:center;gap:10px;margin-left:2px}.avatar-pic{width:36px;height:36px;border-radius:50%;background:#dfe5e7;color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}.avatar-pic svg{width:22px;height:22px;margin-top:4px}.header-info{display:flex;flex-direction:column}.chat-title{font-size:16px;font-weight:500;margin:0;color:var(--text-main)}.chat-status{font-size:12px;color:var(--text-meta)}.chat-status--waiting{font-style:italic;opacity:.8}.header-right{display:flex;align-items:center}.top-safety-badge{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:100px;background:var(--wa-bg);font-family:ui-monospace,monospace;font-size:12px;font-weight:600;color:var(--text-meta)}.top-safety-badge svg{width:14px;height:14px;color:var(--wa-primary)}.chat-body{flex:1;padding:16px 5%;overflow-y:auto;display:flex;flex-direction:column;gap:4px;position:relative}.system-message{display:flex;justify-content:center;margin-bottom:12px;width:100%}.system-message__box{background:var(--sys-msg-bg);color:var(--sys-msg-text);font-size:12.5px;line-height:1.4;padding:6px 12px;border-radius:8px;text-align:center;max-width:90%;box-shadow:var(--shadow-bubble);display:flex;align-items:flex-start;gap:6px}.system-message__box svg{width:14px;height:14px;flex-shrink:0;margin-top:2px;opacity:.8}.message-row{display:flex;width:100%}.message-row--first{margin-top:6px}.message-row--mine{justify-content:flex-end}.message-row--theirs{justify-content:flex-start}.message-bubble{max-width:75%;padding:6px 8px 8px 10px;border-radius:var(--radius-bubble);box-shadow:var(--shadow-bubble);position:relative;word-break:break-word}.message-row--mine .message-bubble{background:var(--bubble-mine)}.message-row--theirs .message-bubble{background:var(--bubble-theirs)}.message-bubble.has-tail:before{content:"";position:absolute;top:0;width:12px;height:12px}.message-row--mine .message-bubble.has-tail{border-top-right-radius:0}.message-row--mine .message-bubble.has-tail:before{right:-8px;background:radial-gradient(circle at bottom right,transparent 0,transparent 70%,var(--bubble-mine) 70%)}.message-row--theirs .message-bubble.has-tail{border-top-left-radius:0}.message-row--theirs .message-bubble.has-tail:before{left:-8px;background:radial-gradient(circle at bottom left,transparent 0,transparent 70%,var(--bubble-theirs) 70%)}.message-text{font-size:15px;line-height:1.4;white-space:pre-wrap;display:block;padding-right:48px}.message-meta{float:right;margin-top:4px;margin-right:-2px;margin-bottom:-4px;display:flex;align-items:center;gap:4px}.message-time{font-size:11px;color:#111b218c}.message-ticks{color:#53bdeb;display:flex}.chat-footer{padding:8px 12px 12px;background:transparent;display:flex;align-items:flex-end;gap:8px;flex-shrink:0;z-index:20}.input-composer{flex:1;background:var(--wa-surface);border-radius:24px;padding:8px 12px;box-shadow:0 1px 1px #0000000d;display:flex;align-items:center;gap:8px}.composer-icon{background:none;border:none;color:var(--text-meta);width:28px;height:28px;display:flex;align-items:center;justify-content:center}.composer-icon svg{width:24px;height:24px}.composer-input{width:100%;max-height:100px;border:none;background:transparent;outline:none;font-family:inherit;font-size:16px;color:var(--text-main);resize:none;line-height:1.4;padding-top:4px}.composer-input::placeholder{color:var(--text-meta)}.composer-send{width:48px;height:48px;border-radius:50%;flex-shrink:0;background:var(--wa-primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #0000001a;cursor:pointer;transition:transform .15s,opacity .2s}.composer-send svg{width:22px;height:22px;margin-left:2px;margin-top:1px}.composer-send:disabled{opacity:0;transform:scale(.5);pointer-events:none;position:absolute}.composer-send.is-active{opacity:1;transform:scale(1);position:relative}.native-toast{position:fixed;top:20px;left:50%;transform:translate(-50%);background:#233138;color:#fff;padding:10px 20px;border-radius:100px;font-size:14px;font-weight:500;box-shadow:var(--shadow-card);z-index:100;text-align:center;max-width:90%}.fade-scale-enter-active,.fade-scale-leave-active{transition:opacity .25s ease,transform .25s ease}.fade-scale-enter-from{opacity:0;transform:scale(.96)}.fade-scale-leave-to{opacity:0;transform:scale(1.04);position:absolute}.fade-slide-up-enter-active{transition:opacity .3s ease,transform .3s cubic-bezier(.1,.9,.2,1)}.fade-slide-up-leave-active{transition:opacity .2s ease,transform .2s ease}.fade-slide-up-enter-from{opacity:0;transform:translate(100%)}.fade-slide-up-leave-to{opacity:0;transform:translate(50%);position:absolute}.toast-enter-active,.toast-leave-active{transition:opacity .3s,transform .3s cubic-bezier(.1,.9,.2,1)}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(-50%,-20px)}*{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}