.ws-tool-app{--ws-tool-primary: #8a2be2;--ws-tool-primary-hover: #7b27d1;--ws-tool-primary-light: rgba(138, 43, 226, .1);--ws-tool-bg: #ffffff;--ws-tool-bg-secondary: #f8fafc;--ws-tool-bg-tertiary: #f1f5f9;--ws-tool-text: #1e293b;--ws-tool-text-secondary: #64748b;--ws-tool-text-muted: #94a3b8;--ws-tool-border: #e2e8f0;--ws-tool-border-hover: #cbd5e1;--ws-tool-shadow: rgba(0, 0, 0, .1);--ws-tool-shadow-lg: rgba(0, 0, 0, .15);--ws-tool-success: #10b981;--ws-tool-warning: #f59e0b;--ws-tool-error: #ef4444;--ws-tool-info: #3b82f6}@media (prefers-color-scheme: dark){.ws-tool-app{--ws-tool-primary: #9370db;--ws-tool-primary-hover: #a478e0;--ws-tool-primary-light: rgba(147, 112, 219, .15);--ws-tool-bg: #0f172a;--ws-tool-bg-secondary: #1e293b;--ws-tool-bg-tertiary: #334155;--ws-tool-text: #f1f5f9;--ws-tool-text-secondary: #cbd5e1;--ws-tool-text-muted: #94a3b8;--ws-tool-border: #334155;--ws-tool-border-hover: #475569;--ws-tool-shadow: rgba(0, 0, 0, .3);--ws-tool-shadow-lg: rgba(0, 0, 0, .4);--ws-tool-success: #34d399;--ws-tool-warning: #fbbf24;--ws-tool-error: #f87171;--ws-tool-info: #60a5fa}}.ws-tool-app *{box-sizing:border-box}.ws-tool-app{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6;color:var(--ws-tool-text);background:var(--ws-tool-bg);padding:20px;transition:all .3s ease}.ws-tool-container{max-width:1200px;margin:0 auto;background:var(--ws-tool-bg);border-radius:16px;box-shadow:0 4px 20px var(--ws-tool-shadow-lg);overflow:hidden;border:1px solid var(--ws-tool-border)}.ws-tool-header{background:linear-gradient(135deg,var(--ws-tool-primary),var(--ws-tool-primary-hover));color:#fff;padding:24px 32px;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden}.ws-tool-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;animation:ws-tool-bg-move 20s linear infinite}@keyframes ws-tool-bg-move{0%{transform:translate(0) translateY(0)}to{transform:translate(60px) translateY(60px)}}.ws-tool-title{display:flex;align-items:center;position:relative;z-index:1}.ws-tool-title h1{margin:0;font-size:24px;font-weight:600;letter-spacing:-.025em}.ws-tool-status{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#ffffff1a;border-radius:20px;font-size:14px;font-weight:500;position:relative;z-index:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.ws-tool-status-dot{width:8px;height:8px;border-radius:50%;background:#94a3b8;transition:all .3s ease}.ws-tool-status.connecting .ws-tool-status-dot{background:var(--ws-tool-warning);animation:ws-tool-blink 1s ease-in-out infinite}.ws-tool-status.connected .ws-tool-status-dot{background:var(--ws-tool-success);box-shadow:0 0 8px #10b98180}@keyframes ws-tool-blink{0%,to{opacity:1}50%{opacity:.3}}.ws-tool-connection,.ws-tool-message-send,.ws-tool-messages{padding:32px;border-bottom:1px solid var(--ws-tool-border)}.ws-tool-messages{border-bottom:none}.ws-tool-input-group{margin-bottom:0}.ws-tool-input-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--ws-tool-text);font-size:14px}.ws-tool-input-wrapper,.ws-tool-textarea-wrapper{display:flex;gap:12px;align-items:flex-start}.ws-tool-input,.ws-tool-textarea{flex:1;padding:12px 16px;border:2px solid var(--ws-tool-border);border-radius:8px;background:var(--ws-tool-bg-secondary);color:var(--ws-tool-text);font-size:14px;transition:all .2s ease;font-family:inherit}.ws-tool-input:focus,.ws-tool-textarea:focus{outline:none;border-color:var(--ws-tool-primary);box-shadow:0 0 0 3px var(--ws-tool-primary-light);background:var(--ws-tool-bg)}.ws-tool-input:disabled{opacity:.6;cursor:not-allowed}.ws-tool-textarea{min-height:100px;resize:vertical;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace}.ws-tool-btn{padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-family:inherit}.ws-tool-btn:disabled{opacity:.5;cursor:not-allowed}.ws-tool-btn-primary{background:var(--ws-tool-primary);color:#fff}.ws-tool-btn-primary:hover:not(:disabled){background:var(--ws-tool-primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px #8a2be24d}.ws-tool-btn-secondary{background:var(--ws-tool-bg-tertiary);color:var(--ws-tool-text);border:1px solid var(--ws-tool-border)}.ws-tool-btn-secondary:hover:not(:disabled){background:var(--ws-tool-border);transform:translateY(-1px)}.ws-tool-btn-ghost{background:transparent;color:var(--ws-tool-text-secondary);padding:8px 16px;font-size:12px}.ws-tool-btn-ghost:hover:not(:disabled){background:var(--ws-tool-bg-secondary);color:var(--ws-tool-text)}.ws-tool-btn-clear{background:transparent;color:var(--ws-tool-error);border:1px solid var(--ws-tool-error);padding:8px 16px;font-size:13px;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.ws-tool-btn-clear:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(239,68,68,.1),transparent);transition:left .5s ease}.ws-tool-btn-clear:hover:not(:disabled):before{left:100%}.ws-tool-btn-clear:hover:not(:disabled){background:var(--ws-tool-error);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #ef44444d;border-color:var(--ws-tool-error)}.ws-tool-btn-clear:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #ef444433}.ws-tool-btn-clear:disabled{opacity:.4;cursor:not-allowed;color:var(--ws-tool-text-muted);border-color:var(--ws-tool-border)}.ws-tool-clear-icon{width:16px;height:16px;transition:transform .3s ease}.ws-tool-btn-clear:hover:not(:disabled) .ws-tool-clear-icon{transform:scale(1.1) rotate(5deg)}.ws-tool-clear-text{margin-left:6px;transition:all .3s ease}@media (min-width: 769px){.ws-tool-btn-clear{min-width:80px}.ws-tool-btn-clear:hover:not(:disabled){box-shadow:0 6px 16px #ef444440}}.ws-tool-messages-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.ws-tool-messages-header h3{margin:0;font-size:18px;font-weight:600;color:var(--ws-tool-text)}.ws-tool-messages-list{max-height:400px;overflow-y:auto;border:1px solid var(--ws-tool-border);border-radius:8px;background:var(--ws-tool-bg-secondary);scrollbar-width:thin;scrollbar-color:var(--ws-tool-border) transparent}.ws-tool-messages-list::-webkit-scrollbar{width:6px}.ws-tool-messages-list::-webkit-scrollbar-track{background:transparent}.ws-tool-messages-list::-webkit-scrollbar-thumb{background:var(--ws-tool-border);border-radius:3px}.ws-tool-messages-list::-webkit-scrollbar-thumb:hover{background:var(--ws-tool-border-hover)}.ws-tool-message{padding:16px;border-bottom:1px solid var(--ws-tool-border);animation:ws-tool-slide-in .3s ease-out}.ws-tool-message:last-child{border-bottom:none}@keyframes ws-tool-slide-in{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.ws-tool-message-time{font-size:12px;color:var(--ws-tool-text-muted);margin-bottom:4px}.ws-tool-message-type{font-size:12px;font-weight:600;margin-bottom:8px;padding:2px 8px;border-radius:12px;display:inline-block}.ws-tool-message.sent .ws-tool-message-type{background:#10b9811a;color:var(--ws-tool-success)}.ws-tool-message.received .ws-tool-message-type{background:#3b82f61a;color:var(--ws-tool-info)}.ws-tool-message.info .ws-tool-message-type{background:var(--ws-tool-primary-light);color:var(--ws-tool-primary)}.ws-tool-message.error .ws-tool-message-type{background:#ef44441a;color:var(--ws-tool-error)}.ws-tool-message-content{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:13px;line-height:1.5;color:var(--ws-tool-text);word-break:break-all;white-space:pre-wrap;background:var(--ws-tool-bg);padding:12px;border-radius:6px;border:1px solid var(--ws-tool-border)}.ws-tool-empty{padding:40px;text-align:center;color:var(--ws-tool-text-muted);font-style:italic}@media (max-width: 768px){.ws-tool-app{padding:12px}.ws-tool-container{border-radius:12px}.ws-tool-header{padding:20px;flex-direction:column;gap:16px;text-align:center}.ws-tool-title h1{font-size:20px}.ws-tool-connection,.ws-tool-message-send,.ws-tool-messages{padding:20px}.ws-tool-input-wrapper,.ws-tool-textarea-wrapper{flex-direction:column}.ws-tool-input,.ws-tool-textarea{width:100%}.ws-tool-btn{width:100%;justify-content:center}.ws-tool-messages-header{flex-direction:column;gap:12px;align-items:stretch}.ws-tool-btn-clear{width:100%;padding:12px 16px;font-size:14px;justify-content:center;min-height:44px}.ws-tool-clear-icon{width:18px;height:18px}.ws-tool-clear-text{margin-left:8px;font-weight:600}.ws-tool-messages-list{max-height:300px}}@media (max-width: 480px){.ws-tool-app{padding:8px}.ws-tool-header,.ws-tool-connection,.ws-tool-message-send,.ws-tool-messages{padding:16px}.ws-tool-title h1{font-size:18px}.ws-tool-input,.ws-tool-textarea{width:100%}.ws-tool-messages-list{max-height:250px}.ws-tool-btn-clear{padding:14px 20px;font-size:15px;border-radius:8px;min-height:48px}.ws-tool-clear-icon{width:20px;height:20px}.ws-tool-clear-text{margin-left:10px;font-weight:700}}