@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap");*{margin:0;padding:0;box-sizing:border-box;font-family:Noto Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{background:#1e1e2f;color:#e0e0e0;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:.5rem}body.light{background:#f0f0f5;color:#333}.app-container{width:100%;max-width:1200px;height:95vh;background:#2a2a3d;border:2px solid #6ab0ff;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.3);display:flex;flex-direction:column;position:relative}body.light .app-container{background:#fff;border-color:#007bff;box-shadow:0 4px 16px rgba(0,0,0,.1)}.chat-container{flex:1 1;display:flex;position:relative}body.light .chat-container{background:#fff}.menu-toggle{position:absolute;top:.6rem;right:.8rem;background:#ff85a2;border:none;color:#1e1e2f;padding:.6rem;border-radius:8px;cursor:pointer;z-index:1000;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}.menu-toggle:hover{background:#f68;transform:scale(1.05)}body.light .menu-toggle{background:#ff6b87;color:#fff}body.light .menu-toggle:hover{background:#ff4d6f}.menu-sidebar{width:300px;background:#35354f;border-right:2px solid #6ab0ff;padding:1.5rem;position:fixed;top:0;left:-300px;height:100%;transition:left .3s ease;z-index:999;overflow-y:auto}.menu-sidebar.open{left:0}body.light .menu-sidebar{background:#e6e6eb;border-right-color:#007bff}.menu-sidebar h2,.menu-sidebar h3{color:#6ab0ff;font-size:1.4rem;font-weight:600;margin-bottom:1.2rem}body.light .menu-sidebar h2,body.light .menu-sidebar h3{color:#007bff}.menu-sidebar h3{font-size:1.2rem;margin-top:1rem}body.light .menu-sidebar h3{color:#007bff}.sidebar-tabs{display:flex;gap:.5rem;margin-bottom:1.2rem}.sidebar-tabs button{background:#454563;border:none;color:#e0e0e0;padding:.6rem 1rem;border-radius:8px;cursor:pointer;font-size:.9rem;transition:background .2s}.sidebar-tabs button.active,.sidebar-tabs button:hover{background:#ff85a2;color:#1e1e2f}body.light .sidebar-tabs button{background:#d6d6e0;color:#333}body.light .sidebar-tabs button.active,body.light .sidebar-tabs button:hover{background:#ff6b87;color:#fff}.search-bar{display:flex;gap:.5rem;margin-bottom:1rem}.search-bar input{flex:1 1;padding:.7rem;background:#35354f;border:2px solid #6ab0ff;color:#e0e0e0;border-radius:8px;font-size:.9rem}body.light .search-bar input{background:#e6e6eb;border-color:#007bff;color:#333}.search-bar button{background:#ffb84d;border:none;color:#1e1e2f;padding:.7rem;border-radius:8px;cursor:pointer;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;transition:background .2s}.search-bar button:hover{background:#ffa733}body.light .search-bar button{background:#ffc107;color:#333}body.light .search-bar button:hover{background:#e0a800}.clear-chat,.export-conversation,.save-conversation{display:flex;align-items:center;gap:.5rem;background:#4caf50;color:#1e1e2f;border:none;padding:.8rem 1rem;border-radius:8px;cursor:pointer;width:100%;margin-bottom:.5rem;font-size:.95rem;font-weight:500;transition:background .2s}.clear-chat:hover,.export-conversation:hover,.save-conversation:hover{background:#43a047}body.light .clear-chat,body.light .export-conversation,body.light .save-conversation{background:#28a745;color:#fff}body.light .clear-chat:hover,body.light .export-conversation:hover,body.light .save-conversation:hover{background:#218838}.export-conversation{background:#ffb84d}.export-conversation:hover{background:#ffa733}body.light .export-conversation{background:#ffc107}body.light .export-conversation:hover{background:#e0a800}.clear-chat{background:#f55}.clear-chat:hover{background:#c33}body.light .clear-chat{background:#dc3545}body.light .clear-chat:hover{background:#c82333}.menu-sidebar ul{list-style:none}.menu-sidebar li{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;cursor:pointer;border-radius:8px;margin-bottom:.5rem;background:#454563;color:#e0e0e0;font-size:.9rem;min-height:44px;transition:background .2s}.menu-sidebar li:hover{background:#ff85a2;color:#1e1e2f}body.light .menu-sidebar li{background:#d6d6e0;color:#333}body.light .menu-sidebar li:hover{background:#ff6b87;color:#fff}.menu-sidebar li span{flex:1 1}.delete-conversation,.remove-shape{background:transparent;border:none;color:#f55;padding:.5rem;cursor:pointer;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;transition:color .2s,transform .2s}.delete-conversation:hover,.remove-shape:hover{color:#c33;transform:scale(1.1)}body.light .delete-conversation,body.light .remove-shape{color:#dc3545}body.light .delete-conversation:hover,body.light .remove-shape:hover{color:#c82333}.settings-panel{display:flex;flex-direction:column;gap:1rem}.settings-panel h2{color:#6ab0ff;font-size:1.4rem;font-weight:600}body.light .settings-panel h2{color:#007bff}.settings-panel h3{color:#e0e0e0;font-size:1.2rem;margin-top:1rem}body.light .settings-panel h3{color:#333}.auto-save-toggle,.theme-toggle{display:flex;align-items:center;gap:.5rem}.auto-save-toggle label,.theme-toggle label{font-size:.95rem;color:#e0e0e0}body.light .auto-save-toggle label,body.light .theme-toggle label{color:#333}.auto-save-toggle button,.theme-toggle button{background:#ffb84d;border:none;color:#1e1e2f;padding:.6rem 1rem;border-radius:8px;cursor:pointer;font-size:.9rem}.auto-save-toggle button:hover,.theme-toggle button:hover{background:#ffa733}body.light .auto-save-toggle button,body.light .theme-toggle button{background:#ffc107;color:#333}body.light .auto-save-toggle button:hover,body.light .theme-toggle button:hover{background:#e0a800}.shape-input{display:flex;gap:.5rem}.shape-input input{flex:1 1;padding:.7rem;background:#35354f;border:2px solid #6ab0ff;color:#e0e0e0;border-radius:8px;font-size:.9rem}body.light .shape-input input{background:#e6e6eb;border-color:#007bff;color:#333}.shape-input button{background:#4caf50;border:none;color:#1e1e2f;padding:.7rem 1rem;border-radius:8px;cursor:pointer;font-size:.9rem}.shape-input button:hover{background:#43a047}body.light .shape-input button{background:#28a745;color:#fff}body.light .shape-input button:hover{background:#218838}.settings-panel ul{list-style:none}.settings-panel li{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;background:#454563;color:#e0e0e0;border-radius:8px;margin-bottom:.5rem;font-size:.9rem}body.light .settings-panel li{background:#d6d6e0;color:#333}.settings-note{margin-top:1rem;font-size:.85rem;color:#e0e0e0}body.light .settings-note{color:#333}.settings-note a{color:#6ab0ff;text-decoration:none}.settings-note a:hover{text-decoration:underline}body.light .settings-note a{color:#007bff}.chat-content{flex:1 1;display:flex;flex-direction:column;background:#2a2a3d}body.light .chat-content{background:#fff}.chat-header{padding:1.2rem;background:#6ab0ff;border-bottom:2px solid #ff85a2;display:flex;justify-content:space-between;align-items:center}body.light .chat-header{background:#007bff;border-bottom-color:#ff6b87}.chat-header h1{color:#1e1e2f;font-size:1.6rem;font-weight:700}body.light .chat-header h1{color:#fff}.chat-header select{padding:.6rem .8rem;background:#35354f;border:2px solid #ff85a2;color:#e0e0e0;border-radius:8px;font-size:.9rem;max-width:140px;transition:border-color .2s}body.light .chat-header select{background:#e6e6eb;border-color:#ff6b87;color:#333}.chat-header select:focus{border-color:#ffb84d;outline:none}body.light .chat-header select:focus{border-color:#ffc107}.chat-messages{flex:1 1;padding:1.2rem;overflow-y:auto;background:#35354f;color:#e0e0e0;max-height:calc(100vh - 200px);scroll-behavior:smooth;-webkit-overflow-scrolling:touch}body.light .chat-messages{background:#e6e6eb;color:#333}.message{margin-bottom:1rem;padding:.8rem;border-radius:10px;max-width:85%;font-size:.95rem;line-height:1.5;border:1px solid transparent;transition:border-color .2s;position:relative}.message.user{background:#ff85a2;color:#1e1e2f;margin-left:auto;border-color:#f68}body.light .message.user{background:#ff6b87;color:#fff;border-color:#ff4d6f}.message.assistant{background:#454563;color:#e0e0e0;border-color:#5a5a7a}body.light .message.assistant{background:#d6d6e0;color:#333;border-color:#b0b0c0}.message.pinned{border:2px solid #ffb84d}body.light .message.pinned{border-color:#ffc107}.message-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;font-size:.8rem;opacity:.8}.message-role{font-weight:600}.message-timestamp{color:#999}body.light .message-timestamp{color:#666}.pinned-icon{color:#ffb84d;font-size:.9rem}body.light .pinned-icon{color:#ffc107}.message-audio,.message-image{max-width:100%;margin-top:.5rem;border-radius:8px;border:1px solid #6ab0ff}body.light .message-audio,body.light .message-image{border-color:#007bff}.reaction-display{display:flex;gap:.5rem;margin-top:.5rem}.reaction{background:#454563;color:#e0e0e0;padding:.3rem .6rem;border-radius:12px;font-size:.8rem}body.light .reaction{background:#d6d6e0;color:#333}.message-menu{position:fixed;background:#35354f;border:2px solid #6ab0ff;border-radius:8px;padding:.5rem;z-index:1000;min-width:200px}body.light .message-menu{background:#e6e6eb;border-color:#007bff}.message-menu .menu-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;color:#e0e0e0;background:transparent;border:none;width:100%;text-align:left;cursor:pointer;font-size:.9rem}body.light .message-menu .menu-item{color:#333}.message-menu .menu-item:hover{background:#ff85a2;color:#1e1e2f}body.light .message-menu .menu-item:hover{background:#ff6b87;color:#fff}.message-menu .menu-item input{flex:1 1;padding:.5rem;background:#454563;border:1px solid #6ab0ff;color:#e0e0e0;border-radius:4px;font-size:.85rem}body.light .message-menu .menu-item input{background:#d6d6e0;border-color:#007bff;color:#333}.message-menu .menu-item button{background:#ffb84d;border:none;color:#1e1e2f;padding:.5rem;border-radius:4px;cursor:pointer}.message-menu .menu-item button:hover{background:#ffa733}body.light .message-menu .menu-item button{background:#ffc107;color:#333}body.light .message-menu .menu-item button:hover{background:#e0a800}.edit-message{display:flex;gap:.5rem;align-items:center}.edit-message input{flex:1 1;padding:.7rem;background:#35354f;border:2px solid #6ab0ff;color:#e0e0e0;border-radius:8px;font-size:.9rem}body.light .edit-message input{background:#e6e6eb;border-color:#007bff;color:#333}.edit-message button{background:#ffb84d;border:none;color:#1e1e2f;padding:.7rem;border-radius:8px;cursor:pointer;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}.edit-message button:hover{background:#ffa733}body.light .edit-message button{background:#ffc107;color:#333}body.light .edit-message button:hover{background:#e0a800}.code-block{position:relative;margin-top:.5rem;border-radius:8px;overflow:hidden}.code-block pre{background:#2f2f3f;color:#e0e0e0;padding:1rem;margin:0;font-size:.9rem;line-height:1.5;overflow-x:auto}body.light .code-block pre{background:#f0f0f5;color:#333}.copy-button{position:absolute;top:.4rem;right:.4rem;background:#ffb84d;color:#1e1e2f;border:none;padding:.4rem .8rem;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:.4rem;font-size:.85rem;min-height:36px;transition:background .2s}.copy-button:hover{background:#ffa733}body.light .copy-button{background:#ffc107;color:#333}body.light .copy-button:hover{background:#e0a800}.error-message{color:#f55;background:#4a1e1e;padding:.6rem;border-radius:8px;margin-bottom:1rem;text-align:center;font-size:.9rem;border:1px solid #f55}body.light .error-message{color:#dc3545;background:#f8d7da;border-color:#dc3545}.upload-message{color:#1e1e2f;background:#4caf50;padding:.6rem;border-radius:8px;margin-bottom:1rem;text-align:center;font-size:.9rem;border:1px solid #43a047}body.light .upload-message{color:#fff;background:#28a745;border-color:#28a745}.chat-input{padding:.8rem;background:#2a2a3d;border-top:2px solid #6ab0ff;margin:0;flex-shrink:0}body.light .chat-input{background:#fff;border-top-color:#007bff}.audio-input-wrapper,.image-input-wrapper{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.8rem;margin-top:0}.audio-input-wrapper input[type=file],.image-input-wrapper input[type=text]{width:100%;padding:.7rem;background:#35354f;border:2px solid #6ab0ff;color:#e0e0e0;border-radius:8px;font-size:.9rem}body.light .audio-input-wrapper input[type=file],body.light .image-input-wrapper input[type=text]{background:#e6e6eb;border-color:#007bff;color:#333}.audio-input-wrapper input[type=file]:disabled,.image-input-wrapper input[type=file]:disabled,.image-input-wrapper input[type=text]:disabled{background:#454563;cursor:not-allowed}body.light .audio-input-wrapper input[type=file]:disabled,body.light .image-input-wrapper input[type=file]:disabled,body.light .image-input-wrapper input[type=text]:disabled{background:#d6d6e0}.audio-input-wrapper audio{width:100%;margin-top:.5rem;margin-bottom:0}.clear-media{background:#f55;border:none;color:#e0e0e0;padding:.7rem;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;transition:background .2s}.clear-media:hover{background:#c33}body.light .clear-media{background:#dc3545;color:#fff}body.light .clear-media:hover{background:#c82333}.input-bar{display:flex;flex-direction:column;gap:.3rem;margin:0;align-items:flex-start}.input-wrapper{position:relative;width:100%}.input-bar input{width:100%;padding:.7rem;background:#35354f;border:2px solid #6ab0ff;color:#e0e0e0;border-radius:8px;font-size:.95rem;line-height:1}body.light .input-bar input{background:#e6e6eb;border-color:#007bff;color:#333}.input-bar input:disabled{background:#454563;cursor:not-allowed}body.light .input-bar input:disabled{background:#d6d6e0}.input-bar input:focus{outline:none;border-color:#ffb84d}body.light .input-bar input:focus{border-color:#ffc107}.input-icons{gap:.3rem;margin:0;align-items:flex-start}.input-icons,.input-icons button{display:flex;justify-content:center}.input-icons button{background:#ff85a2;border:none;color:#1e1e2f;padding:.5rem;border-radius:8px;cursor:pointer;font-size:.85rem;min-width:36px;min-height:36px;align-items:center;transition:background .2s}.input-icons button:hover{background:#f68}.input-icons button.active{background:#ffb84d}.input-icons button.active:hover{background:#ffa733}body.light .input-icons button{background:#ff6b87;color:#fff}body.light .input-icons button:hover{background:#ff4d6f}body.light .input-icons button.active{background:#ffc107}body.light .input-icons button.active:hover{background:#e0a800}.input-icons button.recording{background:#f55;color:#e0e0e0}.input-icons button.recording:hover{background:#c33}body.light .input-icons button.recording{background:#dc3545;color:#fff}body.light .input-icons button.recording:hover{background:#c82333}.input-icons button:disabled{background:#454563;color:#999;cursor:not-allowed}body.light .input-icons button:disabled{background:#d6d6e0}.command-suggestions{position:absolute;bottom:100%;left:0;right:0;background:#35354f;border:2px solid #6ab0ff;border-radius:8px;list-style:none;max-height:300px;overflow-y:auto;z-index:1000}body.light .command-suggestions{background:#e6e6eb;border-color:#007bff}.command-suggestions li{padding:.6rem 1rem;color:#e0e0e0;cursor:pointer;font-size:.9rem;display:flex;flex-direction:column;gap:.2rem}body.light .command-suggestions li{color:#333}.command-suggestions li:focus,.command-suggestions li:hover{background:#ff85a2;color:#1e1e2f}body.light .command-suggestions li:focus,body.light .command-suggestions li:hover{background:#ff6b87;color:#fff}.command-header{font-weight:600;padding:.6rem 1rem;color:#6ab0ff;background:#2a2a3d}body.light .command-header{color:#007bff;background:#e6e6eb}.command-name{font-weight:600}.command-desc{font-size:.8rem;opacity:.8}@media (max-width:1024px){.app-container{max-width:90%;height:auto;min-height:100vh;border-radius:10px}.menu-sidebar{width:260px;left:-260px}.menu-sidebar.open{left:0}.chat-header{flex-direction:column;gap:.6rem;align-items:flex-start;padding:1rem}.chat-header h1{font-size:1.5rem}.chat-header select{width:100%;max-width:none;font-size:.85rem}}@media (max-width:768px){.app-container{max-width:95%}.menu-sidebar{width:100%;left:-100%;padding:1rem}.menu-sidebar.open{left:0}.menu-sidebar h2,.menu-sidebar h3{font-size:1.2rem}.menu-sidebar li{font-size:.85rem;padding:.6rem .8rem}.chat-messages{padding:.8rem;max-height:calc(100vh - 160px)}.message{max-width:90%;font-size:.9rem;padding:.6rem}.message-header{font-size:.75rem}.message-menu{min-width:180px;max-width:90vw;top:auto!important;bottom:10px;left:10px!important;right:10px}.message-menu .menu-item{font-size:.85rem}.message-menu .menu-item input{font-size:.8rem}.code-block pre{font-size:.85rem;padding:.8rem}.copy-button{font-size:.8rem;padding:.3rem .6rem;min-height:32px}.chat-input{padding:0;margin:0;flex-shrink:0}.audio-input-wrapper,.image-input-wrapper{gap:0;margin:0;box-sizing:border-box}.audio-input-wrapper input[type=file],.image-input-wrapper input[type=text]{padding:.3rem;box-sizing:border-box}.audio-input-wrapper audio{margin:0}.clear-media{min-width:32px;min-height:32px;padding:.3rem;box-sizing:border-box}.input-bar{gap:0;margin:0;align-items:flex-start;box-sizing:border-box}.input-bar input{font-size:.9rem;padding:.3rem;line-height:1;box-sizing:border-box}.input-icons{gap:.1rem;margin:0;padding:.2rem;justify-content:center;align-items:center;box-sizing:border-box}.input-icons button{min-width:36px;min-height:36px;font-size:.85rem;padding:.3rem;border-radius:8px;box-sizing:border-box}.command-suggestions{max-height:250px}.command-suggestions li{font-size:.85rem;padding:.5rem .8rem}.command-desc{font-size:.75rem}}@media (max-width:480px){.chat-messages{padding:.6rem;max-height:calc(100vh - 140px)}.chat-input{padding:0;margin:0;flex-shrink:0}.audio-input-wrapper,.image-input-wrapper{gap:0;margin:0;box-sizing:border-box}.audio-input-wrapper input[type=file],.image-input-wrapper input[type=text]{padding:.2rem;box-sizing:border-box}.audio-input-wrapper audio{margin:0}.clear-media{min-width:30px;min-height:30px;padding:.2rem;box-sizing:border-box}.input-bar{gap:0;margin:0;align-items:flex-start;box-sizing:border-box}.input-bar input{padding:.2rem;line-height:1;box-sizing:border-box}.input-icons{gap:.1rem;margin:0;padding:.1rem;justify-content:center;align-items:center;box-sizing:border-box}.input-icons button{min-width:34px;min-height:34px;padding:.2rem;border-radius:8px;box-sizing:border-box}}