:root{--font-main:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Roboto", sans-serif;--bg-primary:#e5ddd5;--bg-secondary:#f0f0f0;--bg-chat:#e5ddd5;--bg-bubble-user:#dcf8c6;--bg-bubble-bot:#fff;--text-primary:#111b21;--text-secondary:#667781;--text-muted:#8696a0;--border-color:#e0e0e0;--tick-sent:#8696a0;--tick-read:#53bdeb;--primary:#075e54;--primary-hover:#128c7e;--success:#059669;--danger:#dc2626;--danger-hover:#b91c1c;--warning:#d97706;--info:#3b82f6;--risk-high-bg:#fee2e2;--risk-high-border:#dc2626;--risk-high-text:#dc2626;--risk-medium-bg:#fef3c7;--risk-medium-border:#d97706;--risk-medium-text:#d97706;--risk-low-bg:#fffbeb;--risk-low-border:#f59e0b;--risk-low-text:#92400e;--risk-safe-bg:#d1fae5;--risk-safe-border:#059669;--risk-safe-text:#059669;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px #0000001a;--shadow-lg:0 8px 32px #00000040}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background:var(--bg-primary);min-height:100vh;color:var(--text-primary);justify-content:center;align-items:center;display:flex}#root{justify-content:center;align-items:center;width:100%;height:100%;min-height:100vh;display:flex}.chat-app{background:var(--bg-secondary);width:440px;height:92vh;max-height:820px;box-shadow:var(--shadow-lg);border-radius:12px;flex-direction:column;display:flex;overflow:hidden}.chat-header{background:var(--primary);flex-shrink:0;align-items:center;gap:8px;padding:8px 12px;display:flex}.chat-header .header-back{color:#fff;flex-shrink:0;align-items:center;display:flex}.chat-header .header-logo{object-fit:cover;background:#fff;border-radius:50%;flex-shrink:0;width:40px;height:40px}.chat-header .header-info{flex:1;min-width:0}.chat-header .header-info .name{color:#fff;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:500;overflow:hidden}.chat-header .header-info .sub{color:#ffffffd9;font-size:13px}.chat-header .header-icons{color:#fff;flex-shrink:0;align-items:center;gap:20px;margin-left:auto;display:flex}.chat-header .header-icons svg{display:block}.chat-window{background-color:var(--bg-chat);background-image:url(/wp_bg.png);background-position:50%;background-repeat:no-repeat;background-size:cover;flex-direction:column;flex:1;gap:2px;padding:12px 6%;display:flex;overflow-y:auto}.msg{flex-direction:column;max-width:85%;margin:1px 0;display:flex}.msg.user{align-self:flex-end;align-items:flex-end}.msg.bot{align-self:flex-start;align-items:flex-start}.bubble{border-radius:7.5px;padding:6px 7px 8px 9px;font-size:14.2px;line-height:1.4;position:relative;box-shadow:0 1px .5px #00000021}.bubble p{margin-bottom:4px}.bubble a{color:#039be5;text-decoration:none}.bubble a:hover{text-decoration:underline}.bubble p:last-child{margin-bottom:0}.msg.user .bubble{background:var(--bg-bubble-user);color:var(--text-primary);border-radius:7.5px 7.5px 0}.msg.bot .bubble{background:var(--bg-bubble-bot);color:var(--text-primary);border-radius:7.5px 7.5px 7.5px 0}.msg.user .bubble:after{content:"";background:var(--bg-bubble-user);clip-path:polygon(0 0,0% 100%,100% 0);width:10px;height:13px;position:absolute;top:0;right:-7px}.msg.bot .bubble:after{content:"";background:var(--bg-bubble-bot);clip-path:polygon(100% 0,0% 0,100% 100%);width:10px;height:13px;position:absolute;top:0;left:-7px}.msg .time{color:var(--text-muted);float:right;align-items:center;gap:2px;margin:4px 0 -3px 6px;font-size:11px;display:inline-flex;position:relative;top:2px}.msg.user .time{color:#667781}.msg .time .ticks{color:var(--tick-sent)}.msg .time .ticks.read{color:var(--tick-read)}.input-area{background:var(--bg-secondary);flex-shrink:0}.input-row{align-items:flex-end;gap:6px;padding:6px 8px;display:flex}.input-row .emoji-btn{width:38px;height:38px;color:var(--text-muted);cursor:default;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.input-row .text-field{background:#fff;border-radius:21px;flex:1;align-items:flex-end;padding:0 8px 0 14px;display:flex}.input-row textarea{resize:none;font-size:15px;font-family:var(--font-main);background:0 0;border:none;outline:none;flex:1;max-height:80px;padding:9px 4px}.input-row .upload-btn{width:38px;height:38px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:color .2s,opacity .2s;display:flex;transform:rotate(45deg)}.input-row .upload-btn:disabled{opacity:.4;cursor:not-allowed}.input-row .send-btn{background:var(--primary);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;transition:background .2s,opacity .2s;display:flex}.image-file-input{display:none}.chat-image-preview{object-fit:cover;border-radius:8px;max-width:min(240px,70vw);max-height:180px;margin-bottom:6px;display:block}.input-row .send-btn:hover{background:var(--primary-hover)}.input-row .send-btn:disabled{opacity:.4;cursor:not-allowed}.char-counter{text-align:right;color:#999;padding:0 16px 4px;font-size:11px}.char-counter.over{color:var(--danger);font-weight:600}.hint{text-align:center;color:#aaa;background:var(--bg-secondary);padding:3px 0 6px;font-size:10px}.wa-text{color:var(--text-primary);font-size:14.2px;line-height:1.5}.wa-text>*+*{margin-top:2px}.wa-line{display:block}.wa-gap{height:10px}.wa-heading{font-weight:700}.wa-em{color:var(--text-secondary);font-size:13px;font-style:italic}.wa-list{margin:2px 0;padding-left:20px;list-style:outside}.wa-list li{margin:2px 0}.wa-sub{padding-left:12px}.url-dest{margin:2px 0}.chain-hop{padding-left:16px}.action-row{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.action-btn{background:var(--bg-bubble-bot);border:1.5px solid var(--primary);color:var(--primary);font-family:var(--font-main);cursor:pointer;border-radius:16px;padding:6px 14px;font-size:12px;font-weight:500;transition:background .15s,color .15s}.action-btn:hover{background:var(--primary);color:#fff}.feedback-row{border-top:1px solid #0000000f;align-items:center;gap:8px;margin-top:10px;padding-top:8px;display:flex}.feedback-prompt{color:#666;margin-right:auto;font-size:12px}.feedback-thanks{color:var(--success);font-size:12px;font-weight:500}.feedback-btn{color:#888;cursor:pointer;background:0 0;border:1.5px solid #ddd;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;transition:all .2s;display:inline-flex}.feedback-btn:hover:not(:disabled){transform:scale(1.15)}.feedback-btn.up:hover:not(:disabled){border-color:var(--success);color:var(--success);background:#22c55e14}.feedback-btn.down:hover:not(:disabled){border-color:var(--danger);color:var(--danger);background:#ef444414}.feedback-btn.selected.up{border-color:var(--success);color:#fff;background:var(--success)}.feedback-btn.selected.down{border-color:var(--danger);color:#fff;background:var(--danger)}.feedback-btn:disabled:not(.selected){opacity:.35;cursor:default}.step{margin:4px 0}.step-title{font-weight:700}.step-detail,.step-numbers{margin-top:2px;padding-left:14px}.step-link{color:var(--primary);font-weight:600;text-decoration:none;transition:color .15s}.step-link:hover{color:var(--primary-hover);text-decoration:underline}.dots{align-items:center;gap:4px;padding:4px 0;display:flex}.dot{background:#aaa;border-radius:50%;width:7px;height:7px;animation:1.2s infinite bounce}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-5px)}}.login-page{background:linear-gradient(135deg,#075e54 0%,#042f2e 100%);justify-content:center;align-items:center;width:100%;min-height:100vh;padding:20px;display:flex}.login-card{background:#fff;border-radius:16px;width:100%;max-width:380px;padding:40px 32px;box-shadow:0 20px 60px #0000004d}.login-header{text-align:center;margin-bottom:32px}.login-avatar{margin-bottom:12px}.login-avatar img{object-fit:contain;width:72px;height:72px;margin:0 auto;display:block}.login-header h1{color:#1a1a1a;margin-bottom:6px;font-size:20px;font-weight:700}.login-header p{color:#666;font-size:13px}.login-form{flex-direction:column;gap:16px;display:flex}.login-error{color:#dc2626;background:#fee2e2;border-left:3px solid #dc2626;border-radius:8px;padding:10px 12px;font-size:12px;font-weight:500}.login-field{flex-direction:column;gap:6px;display:flex}.login-field label{color:#444;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.login-field input{font-size:14px;font-family:var(--font-main);border:1.5px solid #e0e0e0;border-radius:10px;outline:none;padding:12px 14px;transition:border-color .2s,box-shadow .2s}.login-field input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #075e541a}.login-field input::placeholder{color:#aaa}.login-btn{background:var(--primary);color:#fff;font-size:14px;font-weight:600;font-family:var(--font-main);cursor:pointer;border:none;border-radius:10px;margin-top:8px;padding:14px;transition:background .2s,transform .1s}.login-btn:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}.login-btn:active:not(:disabled){transform:translateY(0)}.login-btn:disabled{opacity:.7;cursor:not-allowed}.bubble,.wa-text,.chain-hop,.step-detail,.step-numbers{overflow-wrap:break-word;word-break:break-word}@media (width<=768px){.chat-app{width:min(440px,100vw);height:100dvh;max-height:none;box-shadow:none;border-radius:0}body{background:var(--bg-chat)}}@media (width<=480px){body,#root{justify-content:stretch;align-items:stretch}.chat-app{width:100%;height:100dvh;max-height:none;box-shadow:none;border-radius:0}.chat-header{padding:8px 10px;padding-top:max(8px, env(safe-area-inset-top));padding-left:max(10px, env(safe-area-inset-left));padding-right:max(10px, env(safe-area-inset-right));gap:6px}.chat-header .header-icons{gap:16px}.chat-header .header-logo{width:36px;height:36px}.chat-header .header-info .name{font-size:15px}.chat-header .header-info .sub{font-size:12px}.chat-window{padding:8px 3%;padding-left:max(3%, env(safe-area-inset-left));padding-right:max(3%, env(safe-area-inset-right));gap:2px}.msg{max-width:88%}.bubble{padding:6px 7px 8px 9px;font-size:14.2px}.wa-text{font-size:13.5px}.action-row{gap:6px}.action-btn{text-align:center;flex:1;min-height:36px;padding:6px 10px;font-size:11px}.feedback-btn{width:40px;height:40px}.step-detail,.step-numbers{padding-left:12px;font-size:13px}.input-area{padding-bottom:env(safe-area-inset-bottom)}.input-row{padding:8px;padding-left:max(8px, env(safe-area-inset-left));padding-right:max(8px, env(safe-area-inset-right));gap:6px}.input-row textarea{max-height:100px;font-size:15px}.input-row .send-btn,.input-row .upload-btn{width:42px;height:42px}.hint{padding:2px 0 4px;padding-bottom:max(4px, env(safe-area-inset-bottom));font-size:9px}.login-page{padding:16px;padding-top:max(16px, env(safe-area-inset-top));padding-bottom:max(16px, env(safe-area-inset-bottom))}.login-card{border-radius:12px;padding:28px 20px}.login-header h1{font-size:18px}.login-avatar img{width:60px;height:60px}}.quick-replies{flex-wrap:wrap;gap:6px;margin-top:6px;padding:0 4px;display:flex}.quick-reply-btn{background:var(--bg-bubble-bot);border:1.5px solid var(--primary);color:var(--primary);font-family:var(--font-main);cursor:pointer;white-space:nowrap;border-radius:18px;padding:6px 14px;font-size:12px;font-weight:500;transition:background .15s,color .15s,transform .15s}.quick-reply-btn:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}.quick-reply-btn:active{transform:translateY(0)}@media (width<=360px){.action-btn{padding:6px 8px;font-size:10px}.chat-header .header-info .name{font-size:13px}.login-card{padding:24px 16px}}
