*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0a0a;--bg-secondary: #1a1a1a;--bg-surface: #141414;--text-primary: #e5e5e5;--text-secondary: #a3a3a3;--text-muted: #737373;--accent: #00ff41;--accent-dim: rgba(0, 255, 65, .15);--border: #333333;--border-light: #404040;--success: #00ff41;--error: #ff3e3e;--warning: #ffaa00;--shadow-hard: 4px 4px 0 rgba(0, 0, 0, .8);--shadow-hard-accent: 4px 4px 0 var(--accent)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-primary);background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:20px 20px;color:var(--text-primary);line-height:1.6;min-height:100vh}.container{max-width:900px;margin:0 auto;height:100vh;display:flex;flex-direction:column;border-left:1px solid var(--border);border-right:1px solid var(--border)}.header{padding:1rem 1.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--border)}.header-content{display:flex;align-items:center;gap:1rem}.avatar{width:48px;height:48px;background:var(--bg-primary);border:2px solid var(--accent);border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:JetBrains Mono,monospace;font-size:.75rem;font-weight:700;color:var(--accent);letter-spacing:-.5px}.header-info h1{font-family:JetBrains Mono,monospace;font-size:1rem;font-weight:600;letter-spacing:-.025em;color:var(--text-primary)}.status{display:flex;align-items:center;gap:.5rem;font-family:JetBrains Mono,monospace;font-size:.7rem;color:var(--text-muted);margin-top:.25rem;text-transform:uppercase;letter-spacing:.05em}.status-dot{display:none}.status:before{content:"[";color:var(--text-muted)}.status:after{content:"]";color:var(--text-muted)}.status.online .status-text{color:var(--success)}.status.offline .status-text{color:var(--error)}.status.warning .status-text{color:var(--warning)}.chat-container{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.chat-container::-webkit-scrollbar{width:6px}.chat-container::-webkit-scrollbar-track{background:transparent}.chat-container::-webkit-scrollbar-thumb{background:var(--border);border-radius:0}.welcome-message{text-align:left;padding:2rem 0}.welcome-icon{width:64px;height:64px;background:var(--bg-primary);border:2px solid var(--accent);border-radius:4px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;font-family:JetBrains Mono,monospace;font-size:1.25rem;font-weight:700;color:var(--accent)}.welcome-icon svg{display:none}.welcome-icon:before{content:"</>"}.welcome-message h2{font-family:JetBrains Mono,monospace;font-size:1.75rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.5rem;color:var(--text-primary)}.welcome-message p{color:var(--text-secondary);font-size:.9rem;margin-bottom:2rem}.suggestion-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-width:500px}.chip{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);padding:.875rem 1rem;border-radius:4px;font-family:JetBrains Mono,monospace;font-size:.8rem;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;text-align:left}.chip:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard);border-color:var(--accent);color:var(--accent)}.chip:active{transform:translate(0);box-shadow:none}.message{display:flex;gap:.75rem;max-width:85%;animation:messageIn .2s ease-out}@keyframes messageIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.user{align-self:flex-end;flex-direction:row-reverse}.message-avatar{width:32px;height:32px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:JetBrains Mono,monospace;font-size:.65rem;font-weight:600}.message.bot .message-avatar{background:var(--bg-primary);border:1px solid var(--accent);color:var(--accent)}.message.bot .message-avatar:before{content:"LZV"}.message.bot .message-avatar svg{display:none}.message.user .message-avatar{background:var(--border-light);border:1px solid var(--border);color:var(--text-secondary)}.message.user .message-avatar:before{content:"ANDA"}.message.user .message-avatar svg{display:none}.message-content{padding:.875rem 1rem;border-radius:4px;position:relative}.message.user .message-content{background:var(--accent-dim);border:1px solid var(--accent);color:var(--text-primary)}.message.bot .message-content{background:var(--bg-secondary);border:1px solid var(--border)}.message-text{white-space:pre-wrap;word-wrap:break-word;font-size:.9rem;line-height:1.6}.message-meta{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;font-family:JetBrains Mono,monospace;font-size:.65rem;color:var(--text-muted)}.message.user .message-meta{color:var(--text-muted)}.typing-indicator{display:flex;align-items:center;padding:.5rem 0;font-family:JetBrains Mono,monospace;font-size:.875rem;color:var(--accent)}.typing-indicator span{display:none}.typing-indicator:before{content:"mengetik";color:var(--text-muted);margin-right:.25rem}.typing-indicator:after{content:"|";animation:cursorBlink .8s infinite}@keyframes cursorBlink{0%,50%{opacity:1}51%,to{opacity:0}}.input-area{padding:1rem 1.5rem 1.5rem;background:var(--bg-secondary);border-top:1px solid var(--border)}.input-wrapper{display:flex;gap:.75rem;background:var(--bg-primary);border-radius:4px;padding:.5rem;border:1px solid var(--border);transition:border-color .15s ease}.input-wrapper:focus-within{border-color:var(--accent)}.input-wrapper:before{content:">";font-family:JetBrains Mono,monospace;color:var(--accent);padding:.5rem 0 .5rem .75rem;font-weight:600}.input-wrapper input{flex:1;border:none;background:none;font-family:JetBrains Mono,monospace;font-size:.875rem;outline:none;color:var(--text-primary)}.input-wrapper input::placeholder{color:var(--text-muted)}.send-button{width:40px;height:40px;border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s ease}.send-button:hover:not(:disabled){background:var(--accent);color:var(--bg-primary);transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-accent)}.send-button:active:not(:disabled){transform:translate(0);box-shadow:none}.send-button:disabled{opacity:.3;cursor:not-allowed}.send-button svg{width:18px;height:18px}.disclaimer{font-family:JetBrains Mono,monospace;font-size:.65rem;color:var(--text-muted);margin-top:.75rem;text-align:left}.disclaimer:before{content:"// ";color:var(--border-light)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;z-index:1000;align-items:center;justify-content:center;padding:1rem}.modal.show{display:flex}.modal-content{background:var(--bg-secondary);border:1px solid var(--border);border-radius:4px;width:100%;max-width:500px;max-height:80vh;overflow:hidden;box-shadow:8px 8px #00000080;animation:modalIn .15s ease-out}@keyframes modalIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}.modal-header h3{font-family:JetBrains Mono,monospace;font-size:.875rem;font-weight:600}.modal-close{background:transparent;border:1px solid var(--border);width:28px;height:28px;border-radius:4px;font-size:1rem;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s}.modal-close:hover{border-color:var(--error);color:var(--error)}.modal-body{padding:1.25rem;overflow-y:auto;max-height:60vh}.error-message{background:#ff3e3e1a;border:1px solid var(--error);color:var(--error);padding:.875rem 1rem;border-radius:4px;font-family:JetBrains Mono,monospace;font-size:.8rem;animation:shake .3s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.typing-cursor{display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:2px;vertical-align:text-bottom;animation:cursorBlink .8s infinite}@media(max-width:640px){.container{max-width:100%;border-left:none;border-right:none}.header,.chat-container{padding:1rem}.message{max-width:95%}.suggestion-chips{grid-template-columns:1fr}.welcome-message{padding:1.5rem 0}.welcome-icon{width:56px;height:56px;font-size:1rem}.welcome-message h2{font-size:1.5rem}.input-area{padding:1rem}}