:root{--bg-dark: #12151e;--bg-darker: #0d0f16;--bg-sidebar: #1a1d27;--text-light: #ffffff;--text-muted: #94a0b8;--accent-blue: #3b82f6;--accent-blue-hover: #2563eb;--border-color: #2a2e3d;--canvas-bg: #f8f9fc}*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}body{background-color:var(--bg-dark);color:var(--text-light);height:100vh;width:100vw;overflow:hidden}#root{height:100%;display:flex;flex-direction:column}a{text-decoration:none;color:inherit}ul{list-style:none}.layout-container{display:flex;height:calc(100vh - 60px);width:100vw}.navbar{height:60px;background-color:var(--bg-dark);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 20px}.navbar-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.1rem}.navbar-links{display:flex;gap:24px}.navbar-links a{color:var(--text-muted);font-size:.9rem;font-weight:500;transition:color .2s}.navbar-links a.active,.navbar-links a:hover{color:var(--text-light)}.navbar-actions{display:flex;align-items:center;gap:16px}.btn-primary{background-color:var(--accent-blue);color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:.9rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background-color .2s}.btn-primary:hover{background-color:var(--accent-blue-hover)}.profile-btn{width:32px;height:32px;border-radius:50%;background-color:#2d3748;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;color:#fff}.sidebar{width:320px;background-color:var(--bg-sidebar);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:24px 20px;gap:32px;height:100%;overflow-y:auto;flex-shrink:0}.sidebar-resizer{width:4px;cursor:col-resize;background-color:transparent;transition:background-color .2s;z-index:10;margin-left:-2px}.sidebar-resizer:hover,.sidebar-resizer:active{background-color:var(--accent-blue)}.sidebar-section{display:flex;flex-direction:column;gap:12px}.section-title{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--text-light)}.model-selector{display:flex;background-color:#222633;border-radius:8px;padding:4px}.model-option{flex:1;text-align:center;padding:8px 0;font-size:.8rem;border-radius:6px;cursor:pointer;color:var(--text-muted);transition:all .2s}.model-option.active{background-color:#3b4256;color:var(--accent-blue);font-weight:500}.diagram-type-list{display:flex;flex-direction:column;gap:8px}.diagram-type-option{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background-color:transparent;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;font-size:.9rem;color:var(--text-light);transition:all .2s}.diagram-type-option.active{background-color:#3b82f61a;border-color:var(--accent-blue);color:var(--accent-blue)}.radio-circle{width:16px;height:16px;border-radius:50%;border:2px solid var(--text-muted);display:flex;align-items:center;justify-content:center}.diagram-type-option.active .radio-circle{border-color:var(--accent-blue)}.diagram-type-option.active .radio-circle:after{content:"";width:8px;height:8px;border-radius:50%;background-color:var(--accent-blue)}.category-group{margin-bottom:20px}.category-name{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;padding-left:4px}.sub-types-list{margin-top:4px;margin-left:12px;padding-left:12px;border-left:1px solid var(--border-color);display:flex;flex-direction:column;gap:4px}.sub-type-item{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:.8rem;color:var(--text-muted);cursor:pointer;border-radius:4px;transition:all .2s}.sub-type-item:hover{background-color:#ffffff0d;color:var(--text-light)}.checkbox{width:14px;height:14px;border:1px solid var(--border-color);border-radius:3px;display:flex;align-items:center;justify-content:center;color:var(--accent-blue)}.checkbox.checked{border-color:var(--accent-blue);background-color:#3b82f61a}.diagrams-trigger-text{color:#94a0b8;font-size:.8rem;cursor:pointer;font-weight:600;transition:opacity .2s}.diagrams-trigger-text:hover{opacity:.8}.diagram-selector-popover.cascading.floating-right{position:fixed;bottom:24px;left:330px;border:1px solid var(--border-color);border-radius:12px;box-shadow:0 15px 50px #00000080;z-index:1000;overflow:hidden;animation:slideInRight .2s cubic-bezier(.16,1,.3,1);height:480px;min-height:480px;max-height:480px;display:flex;background-color:#1a1d27}@keyframes slideInRight{0%{transform:translate(-10px);opacity:0}to{transform:translate(0);opacity:1}}.popover-columns{display:flex;height:100%}.popover-column{padding:12px;min-width:200px;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:2px;overflow-y:auto;height:100%;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.popover-column:last-child{border-right:none}.popover-item{padding:10px 12px;font-size:.85rem;color:var(--text-muted);border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s;white-space:nowrap}.popover-item:hover,.popover-item.active{background-color:#2a2e3d;color:var(--text-light)}.popover-item.selected{color:var(--accent-blue);font-weight:500}.popover-item.sub-type{padding:6px 12px;font-size:.8rem}.popover-item .checkbox{flex-shrink:0}.popover-column.categories{background-color:#1e2230}.popover-item.clear-all{margin-top:auto;color:#f87171;border-top:1px solid rgba(255,255,255,.06);font-size:.8rem}.popover-column.diagrams{background-color:#1a1d27}.popover-column.sub-types{background-color:#1a1d27;min-width:220px}.chat-history{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:4px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.chat-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;opacity:.6}.chat-empty-icon{margin-bottom:4px}.chat-empty-title{font-size:.95rem;color:var(--text-light);font-weight:500;margin:0}.chat-empty-subtitle{font-size:.8rem;color:var(--text-muted);margin:0;text-align:center;padding:0 20px}.chat-message{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:10px;animation:fadeInMsg .3s ease-out}.chat-message.user{background-color:#3b82f614;border:1px solid rgba(59,130,246,.15)}.chat-message.ai{background-color:#222633;border:1px solid var(--border-color)}.chat-message-header{display:flex;align-items:center;gap:8px;font-size:.75rem}.chat-message-role{font-weight:600;color:var(--text-light)}.chat-message.ai .chat-message-role{color:#a78bfa}.chat-message-badge{background-color:#3b82f626;color:var(--accent-blue);padding:1px 8px;border-radius:10px;font-size:.65rem;font-weight:500}.chat-message-time{color:var(--text-muted);margin-left:auto;font-size:.7rem}.chat-message-content{font-size:.85rem;color:var(--text-light);line-height:1.5;white-space:pre-wrap;word-break:break-word}@keyframes fadeInMsg{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.prompt-area{margin-top:auto;background-color:#222633;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;position:sticky;bottom:-4px;z-index:10;border:1px solid var(--border-color);box-shadow:0 -4px 12px #0003}.selected-diagrams-chips{display:flex;flex-wrap:wrap;gap:6px}.diagram-chip{display:inline-flex;align-items:center;gap:6px;background-color:#3b82f61f;border:1px solid rgba(59,130,246,.25);color:var(--accent-blue);padding:4px 10px;border-radius:16px;font-size:.75rem;font-weight:500;animation:fadeInMsg .2s ease-out}.chip-remove{background:none;border:none;color:var(--accent-blue);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity .2s;line-height:1}.chip-remove:hover{opacity:1}.prompt-textarea{background:transparent;border:none;color:var(--text-light);font-size:.9rem;resize:none;height:120px;outline:none;line-height:1.5}.prompt-textarea::placeholder{color:var(--text-muted)}.prompt-actions{display:flex;align-items:center;gap:8px}.action-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-muted);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.action-btn:hover{background-color:#2a2e3d;color:var(--text-light)}.model-badge{background-color:transparent;border:1px solid var(--border-color);border-radius:16px;padding:2px 10px;font-size:.75rem;color:var(--text-muted);display:flex;align-items:center;gap:4px}.prompt-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:12px;width:100%;overflow:hidden}.prompt-actions-left{display:flex;align-items:center;gap:10px;flex-shrink:0;min-width:0}.diagrams-trigger-text{color:#94a0b8;font-size:.8rem;cursor:pointer;font-weight:600;white-space:nowrap;flex-shrink:0;-webkit-user-select:none;user-select:none}.model-selector-inline{position:relative;display:flex;align-items:center;flex-shrink:0}.model-badge{white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:4px}.generate-btn{background-color:var(--accent-blue);color:#fff;border:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;flex-shrink:0}.generate-btn:hover{background-color:var(--accent-blue-hover)}.generation-status-overlay{position:absolute;top:-40px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:6px 12px;border-radius:20px;font-size:.7rem;white-space:nowrap;border:1px solid var(--accent-blue);pointer-events:none;animation:fadeIn .3s ease-out}.generate-btn.generating{opacity:.7;cursor:not-allowed}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.generation-status-overlay{position:absolute;top:-40px;left:50%;transform:translate(-50%);background-color:#000c;color:#fff;padding:6px 16px;border-radius:20px;font-size:.75rem;white-space:nowrap;border:1px solid var(--accent-blue);z-index:10;pointer-events:none;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.canvas-container{flex:1;background-color:var(--canvas-bg);background-image:radial-gradient(#d1d5db 2px,transparent 2px);background-size:30px 30px;position:relative;overflow:auto;padding:40px;display:flex;justify-content:center;align-items:center}.mock-diagram{background-color:#fff;border-radius:12px;box-shadow:0 10px 40px #00000014;width:100%;max-width:900px;height:500px;position:relative;padding:40px}.canvas-toolbar-top{position:absolute;top:20px;right:20px;display:flex;gap:12px}.canvas-btn{background-color:#fff;border:1px solid #e2e8f0;color:#475569;padding:8px 16px;border-radius:6px;font-size:.9rem;display:flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 1px 2px #0000000d;font-weight:500;transition:background-color .2s}.canvas-btn:hover{background-color:#f8fafc}.canvas-toolbar-bottom{position:absolute;bottom:20px;right:20px;background-color:#fff;border:1px solid #e2e8f0;border-radius:8px;display:flex;align-items:center;padding:4px;box-shadow:0 2px 5px #0000000d}.zoom-btn{background:none;border:none;color:#475569;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px}.zoom-btn:hover{background-color:#f1f5f9}.zoom-level{font-size:.85rem;font-weight:500;color:#475569;padding:0 8px}.sequence-container{padding-top:20px;height:100%;position:relative}.sequence-node-row{display:flex;justify-content:space-between;width:100%;padding:0 40px;position:relative;z-index:2}.sequence-node{border:2px solid var(--accent-blue);color:var(--accent-blue);border-radius:8px;padding:10px 32px;font-weight:600;font-size:.95rem;background-color:#3b82f60d;position:relative}.sequence-node:after{content:"";position:absolute;top:40px;left:50%;transform:translate(-50%);width:0;height:320px;border-left:1px dashed var(--accent-blue);z-index:-1;opacity:.6}.arrow-line{position:absolute;height:1px;background-color:var(--accent-blue);z-index:3}.arrow-head-right{position:absolute;right:-4px;top:-4px;width:0;height:0;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;border-left:6px solid var(--accent-blue)}.arrow-head-left{position:absolute;left:-4px;top:-4px;width:0;height:0;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;border-right:6px solid var(--accent-blue)}.arrow-label{position:absolute;top:-24px;left:50%;transform:translate(-50%);font-size:.75rem;color:#475569;font-weight:500}.model-dropdown-menu{position:absolute;bottom:120%;left:0;background-color:var(--bg-sidebar);border:1px solid var(--border-color);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;min-width:160px;box-shadow:0 -4px 12px #0003;z-index:100}.model-dropdown-item{padding:8px 12px;font-size:.8rem;color:var(--text-muted);border-radius:6px;cursor:pointer;transition:all .2s;white-space:nowrap}.model-dropdown-item:hover{background-color:#2a2e3d;color:var(--text-light)}.model-dropdown-item.active{background-color:#3b82f61a;color:var(--accent-blue);font-weight:500}