feat: redesign settings as slide-in sidebar with collapsible sections

- Changed from full-screen overlay to 500px slide-in sidebar from right
- Added dark overlay backdrop that dims chat
- Organized character settings into collapsible sections:
  * Basic Information (name, avatar, system prompt, greeting)
  * Roleplay Details (personality, description, scenario, examples)
  * Advanced Settings (post-history, alternate greetings)
  * Metadata (tags, creator, version, notes)
- Smooth slide and collapse animations
- Click overlay to close sidebar
- Responsive: full width on mobile
- More compact button layouts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/styles.css

@@ -832,28 +832,56 @@ body {
   }
 }
 
-/* Settings Panel */
+/* Settings Panel - Slide-in Sidebar */
 .settings-panel {
-  position: absolute;
+  position: fixed;
+  top: 0;
+  right: -500px;
+  width: 500px;
+  height: 100vh;
+  background: var(--bg-primary);
+  border-left: 1px solid var(--border);
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  overflow-y: auto;
+  padding: 20px;
+  transition: right 0.3s ease;
+}
+
+.settings-panel.open {
+  right: 0;
+}
+
+/* Settings overlay backdrop */
+.settings-overlay {
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: var(--bg-primary);
-  z-index: 1000;
-  overflow-y: auto;
-  padding: 60px 20px 20px;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.settings-overlay.show {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .settings-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border);
 }
 
 .settings-header h2 {
-  font-size: 20px;
+  font-size: 24px;
   font-weight: 600;
   color: var(--text-primary);
   margin: 0;
@@ -863,9 +891,6 @@ body {
   display: flex;
   gap: 8px;
   margin-bottom: 24px;
-  max-width: 400px;
-  margin-left: auto;
-  margin-right: auto;
 }
 
 .tab-btn {
@@ -902,13 +927,68 @@ body {
 }
 
 .settings-form {
-  max-width: 400px;
-  margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 
+/* Collapsible sections */
+.settings-section {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--bg-secondary);
+}
+
+.settings-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--bg-tertiary);
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.2s ease;
+}
+
+.settings-section-header:hover {
+  background: var(--border);
+}
+
+.settings-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.settings-section-icon {
+  width: 16px;
+  height: 16px;
+  transition: transform 0.2s ease;
+}
+
+.settings-section.collapsed .settings-section-icon {
+  transform: rotate(-90deg);
+}
+
+.settings-section-content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-height: 2000px;
+  overflow: hidden;
+  transition: max-height 0.3s ease, padding 0.3s ease;
+}
+
+.settings-section.collapsed .settings-section-content {
+  max-height: 0;
+  padding: 0 16px;
+}
+
 .form-group {
   display: flex;
   flex-direction: column;
@@ -1095,6 +1175,11 @@ body {
   }
 
   .settings-panel {
-    padding: 60px 16px 16px;
+    width: 100%;
+    right: -100%;
+  }
+
+  .settings-panel.open {
+    right: 0;
   }
 }