agentgui 1.0.151 → 1.0.153

package/static/styles.css

@@ -1,1989 +0,0 @@
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-:root {
-  /* Light mode colors (default) */
-  --color-primary: #4f46e5;
-  --color-primary-light: #6366f1;
-  --color-primary-lighter: #e0e7ff;
-  --color-success: #10b981;
-  --color-warning: #f59e0b;
-  --color-danger: #ef4444;
-  --color-info: #3b82f6;
-
-  /* Light mode: Background & Text */
-  --bg-primary: #ffffff;
-  --bg-secondary: #f9fafb;
-  --bg-tertiary: #f3f4f6;
-  --text-primary: #1d2129;
-  --text-secondary: #475569;
-  --text-tertiary: #64748b;
-  --border-color: #e5e7eb;
-
-  /* Shadows */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
-
-  /* Transitions */
-  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-primary: #0f172a;
-    --bg-secondary: #1a202c;
-    --bg-tertiary: #2d3748;
-    --text-primary: #f8fafc;
-    --text-secondary: #cbd5e1;
-    --text-tertiary: #94a3b8;
-    --border-color: #334155;
-  }
-}
-
-[data-theme="dark"] {
-  --bg-primary: #0f172a;
-  --bg-secondary: #1a202c;
-  --bg-tertiary: #2d3748;
-  --text-primary: #f8fafc;
-  --text-secondary: #cbd5e1;
-  --text-tertiary: #94a3b8;
-  --border-color: #334155;
-}
-
-[data-theme="light"] {
-  --bg-primary: #ffffff;
-  --bg-secondary: #f9fafb;
-  --bg-tertiary: #f3f4f6;
-  --text-primary: #1d2129;
-  --text-secondary: #475569;
-  --text-tertiary: #64748b;
-  --border-color: #e5e7eb;
-}
-
-html, body {
-  height: 100%;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  color: var(--text-primary);
-  background: var(--bg-primary);
-  line-height: 1.6;
-  transition: var(--transition-smooth);
-}
-
-#app {
-  height: 100vh;
-  display: flex;
-  overflow: hidden;
-  background: var(--bg-primary);
-}
-
-/* Sidebar */
-.sidebar {
-  width: 280px;
-  background: var(--bg-primary);
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  overflow-y: auto;
-  transition: transform var(--transition-smooth), width var(--transition-smooth);
-}
-
-.sidebar-header {
-  padding: 1.5rem 1.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.sidebar-brand h1 {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin: 0;
-}
-
-.sidebar-toggle {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: var(--text-tertiary);
-  transition: var(--transition-fast);
-  display: none;
-  padding: 0;
-  width: 2rem;
-  height: 2rem;
-  align-items: center;
-  justify-content: center;
-}
-
-.sidebar-toggle:hover {
-  color: var(--text-primary);
-}
-
-.new-chat-btn {
-  margin: 1rem 1.25rem;
-  padding: 0.625rem 1rem;
-  background: var(--bg-tertiary);
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  color: var(--text-primary);
-  transition: var(--transition-smooth);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: calc(100% - 2.5rem);
-}
-
-.new-chat-btn:hover {
-  background: var(--border-color);
-}
-
-.chat-history-section {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 1.25rem 1rem;
-}
-
-.history-title {
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-tertiary);
-  font-weight: 600;
-  margin: 1.5rem 0 0.75rem;
-  padding: 0 0.5rem;
-}
-
-.chat-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.chat-item {
-  padding: 0.75rem;
-  background: var(--bg-secondary);
-  border-radius: 0.5rem;
-  cursor: pointer;
-  transition: var(--transition-smooth);
-  text-align: left;
-  color: var(--text-secondary);
-  font-size: 0.875rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  overflow: hidden;
-}
-
-.chat-item-title {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.chat-item-delete {
-  background: none;
-  border: none;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  transition: var(--transition-smooth);
-  font-size: 0.75rem;
-  flex-shrink: 0;
-  opacity: 0;
-}
-
-.chat-item:hover .chat-item-delete {
-  opacity: 1;
-  color: var(--color-danger);
-}
-
-.chat-item-delete:hover {
-  background: rgba(239, 68, 68, 0.1);
-}
-
-.chat-item:hover {
-  background: var(--bg-tertiary);
-}
-
-.chat-item.active {
-  background: var(--color-primary-lighter);
-  color: var(--color-primary);
-  font-weight: 500;
-}
-
-.chat-item-folder {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.8rem;
-  color: var(--text-tertiary);
-  margin-top: 0.25rem;
-  padding: 0 0.5rem;
-}
-
-.sidebar-footer {
-  padding: 0 1.25rem 1.5rem;
-  margin-top: 1rem;
-}
-
-.settings-btn {
-  width: 100%;
-  padding: 0.625rem 1rem;
-  background: var(--bg-tertiary);
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  color: var(--text-primary);
-  transition: var(--transition-smooth);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.settings-btn:hover {
-  background: var(--border-color);
-}
-
-/* Main Content */
-.main-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--bg-primary);
-}
-
-.chat-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
-  /* Ensure input is never hidden */
-  position: relative;
-}
-
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.chat-context-header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1rem;
-  background: var(--bg-secondary);
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-  margin-bottom: 0.5rem;
-  flex-shrink: 0;
-}
-
-.chat-context-header .folder-icon {
-  font-size: 1.1rem;
-  flex-shrink: 0;
-}
-
-.chat-context-header .folder-context {
-  word-break: break-all;
-  font-family: 'Monaco', 'Courier New', monospace;
-}
-
-@media (max-width: 768px) {
-  .chat-context-header {
-    padding: 0.75rem;
-    font-size: 0.8rem;
-  }
-}
-
-.welcome-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  min-height: auto;
-  gap: 2rem;
-  margin: auto 0;
-}
-
-.welcome-section h2 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.agent-selection {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  align-items: center;
-}
-
-.agent-cards {
-  display: flex;
-  gap: 1.5rem;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-}
-
-.agent-card {
-  padding: 1rem 1.5rem;
-  background: var(--bg-secondary);
-  border-radius: 0.5rem;
-  cursor: pointer;
-  transition: var(--transition-smooth);
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-  white-space: nowrap;
-  min-width: 150px;
-}
-
-.agent-card:hover {
-  background: var(--bg-tertiary);
-  color: var(--color-primary);
-}
-
-.agent-card.active {
-  background: var(--color-primary-lighter);
-  color: var(--color-primary);
-  font-weight: 500;
-}
-
-.agent-card-icon {
-  font-size: 1.5rem;
-}
-
-.agent-card-name {
-  display: block;
-}
-
-.agent-separator {
-  color: var(--border-color);
-}
-
-/* Chat Input */
-.chat-input-section {
-  padding: 1.5rem 2rem;
-  background: var(--bg-primary);
-  flex-shrink: 0;
-  min-height: 60px; /* Ensure input area never becomes too small */
-}
-
-.input-wrapper {
-  display: flex;
-  gap: 0.75rem;
-  align-items: flex-end;
-}
-
-.chat-input {
-  flex: 1;
-  padding: 0.75rem 1rem;
-  border-radius: 0.75rem;
-  font-family: inherit;
-  font-size: 1rem;
-  resize: none;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  transition: var(--transition-smooth);
-  min-height: 44px;
-  max-height: 200px;
-  font-weight: 400;
-}
-
-.chat-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
-}
-
-.input-actions {
-  display: flex;
-  gap: 0.5rem;
-  align-items: flex-end;
-}
-
-.action-btn {
-  padding: 0.625rem;
-  background: var(--bg-secondary);
-  border-radius: 0.5rem;
-  cursor: pointer;
-  color: var(--text-tertiary);
-  transition: var(--transition-smooth);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 44px;
-  height: 44px;
-}
-
-.action-btn:hover {
-  background: var(--bg-tertiary);
-  color: var(--color-primary);
-}
-
-.action-btn.send-btn {
-  background: var(--color-primary);
-  color: white;
-}
-
-.action-btn.send-btn:hover {
-  background: var(--color-primary-light);
-}
-
-.action-btn.send-btn:disabled {
-  background: var(--bg-tertiary);
-  color: var(--text-tertiary);
-  cursor: not-allowed;
-}
-
-/* Chat Footer */
-.chat-footer {
-  padding: 1rem 2rem;
-  background: var(--bg-secondary);
-  flex-shrink: 0;
-  font-size: 0.8rem;
-}
-
-.footer-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1.5rem;
-  flex-wrap: wrap;
-}
-
-.footer-content a {
-  color: var(--color-primary);
-  text-decoration: none;
-  transition: var(--transition-fast);
-}
-
-.footer-content a:hover {
-  text-decoration: underline;
-}
-
-/* Settings Panel */
-.settings-panel {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-  z-index: 500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-}
-
-.settings-content {
-  background: var(--bg-primary);
-  border-radius: 0.75rem;
-  box-shadow: var(--shadow-xl);
-  max-width: 600px;
-  width: 100%;
-  max-height: 90vh;
-  overflow-y: auto;
-  animation: slideUp 0.2s ease;
-}
-
-.settings-header {
-  padding: 1.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.settings-header h2 {
-  margin: 0;
-  color: var(--text-primary);
-  font-size: 1.25rem;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 2rem;
-  cursor: pointer;
-  color: var(--text-tertiary);
-  transition: var(--transition-fast);
-  padding: 0;
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.close-btn:hover {
-  color: var(--text-primary);
-}
-
-.setting-group {
-  padding: 1.5rem;
-}
-
-.setting-group:last-child {
-  border-bottom: none;
-}
-
-.setting-group label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  font-size: 0.875rem;
-}
-
-.setting-group input[type="checkbox"] {
-  margin-right: 0.5rem;
-  cursor: pointer;
-}
-
-.setting-group input[type="checkbox"] ~ * {
-  cursor: pointer;
-}
-
-.gm-input {
-  width: 100%;
-  padding: 0.75rem;
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
-  font-family: inherit;
-  transition: var(--transition-smooth);
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  margin-top: 0.5rem;
-}
-
-.gm-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
-}
-
-/* Chat Messages */
-.message {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  animation: slideUp 0.2s ease;
-  width: 100%;
-}
-
-.message-bubble {
-  flex: 0 1 100%;
-  max-width: 70%;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.message.user .message-bubble {
-  background: var(--color-primary);
-  color: white;
-  margin-left: auto;
-}
-
-.message.assistant .message-bubble {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-}
-
-.message.system .message-bubble {
-  background: var(--bg-tertiary);
-  color: var(--text-tertiary);
-  font-size: 0.875rem;
-  align-self: center;
-}
-
-/* Streaming blocks */
-.stream-container {
-  flex: 0 1 100%;
-  max-width: 70%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.stream-text-block {
-  padding: 0.75rem 1rem;
-  background: var(--bg-secondary);
-  border-radius: 0.5rem;
-  color: var(--text-primary);
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.stream-container:not(.done) .stream-text-block:last-child::after {
-  content: '\2588';
-  animation: blink 0.8s step-end infinite;
-  color: var(--color-primary);
-}
-
-@keyframes blink {
-  50% { opacity: 0; }
-}
-
-.stream-error {
-  padding: 0.5rem 0.75rem;
-  background: rgba(239, 68, 68, 0.1);
-  border-radius: 0.5rem;
-  color: var(--color-danger);
-  font-size: 0.875rem;
-}
-
-.thought-block {
-  border-radius: 0.5rem;
-  overflow: hidden;
-}
-
-.thought-header {
-  padding: 0.5rem 0.75rem;
-  background: var(--bg-tertiary);
-  font-size: 0.8rem;
-  font-style: italic;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  user-select: none;
-}
-
-.thought-content {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.8rem;
-  color: var(--text-tertiary);
-  white-space: pre-wrap;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.thought-block.collapsed .thought-content {
-  display: none;
-}
-
-.tool-block {
-  border-radius: 0.5rem;
-  overflow: hidden;
-  font-size: 0.875rem;
-}
-
-.tool-header {
-  padding: 0.5rem 0.75rem;
-  background: var(--bg-tertiary);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  user-select: none;
-}
-
-.tool-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg-secondary);
-  border-radius: 0.25rem;
-  font-family: monospace;
-  font-size: 0.75rem;
-  font-weight: 700;
-  flex-shrink: 0;
-}
-
-.tool-title {
-  flex: 1;
-  font-weight: 500;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.tool-status {
-  font-size: 0.75rem;
-  padding: 0.125rem 0.5rem;
-  border-radius: 1rem;
-  font-weight: 500;
-}
-
-.tool-block.status-running .tool-status {
-  background: rgba(59, 130, 246, 0.15);
-  color: var(--color-info);
-}
-
-.tool-block.status-completed .tool-status {
-  background: rgba(16, 185, 129, 0.15);
-  color: var(--color-success);
-}
-
-.tool-block.status-error .tool-status {
-  background: rgba(239, 68, 68, 0.15);
-  color: var(--color-danger);
-}
-
-.tool-body {
-  padding: 0.5rem 0.75rem;
-  font-family: 'Monaco', 'Courier New', monospace;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  white-space: pre-wrap;
-  max-height: 300px;
-  overflow-y: auto;
-  background: var(--bg-secondary);
-}
-
-.tool-block.collapsed .tool-body {
-  display: none;
-}
-
-.plan-block {
-  border-radius: 0.5rem;
-  overflow: hidden;
-}
-
-.plan-header {
-  padding: 0.5rem 0.75rem;
-  background: var(--bg-tertiary);
-  font-weight: 500;
-  font-size: 0.875rem;
-  color: var(--text-primary);
-}
-
-.plan-item {
-  padding: 0.375rem 0.75rem;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-}
-
-.html-block {
-  border-radius: 0.5rem;
-  overflow: visible;
-  background: var(--bg-secondary);
-  margin: 0.25rem 0;
-}
-
-.html-header {
-  padding: 0.5rem 0.75rem;
-  background: #3b82f6;
-  font-weight: 500;
-  font-size: 0.75rem;
-  color: white;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.html-content {
-  padding: 0.75rem;
-  overflow-x: auto;
-}
-
-.code-block {
-  border-radius: 0.5rem;
-  overflow-x: auto;
-  background: var(--bg-tertiary);
-  margin: 0.25rem 0;
-  font-family: 'Monaco', 'Courier New', monospace;
-  font-size: 0.8rem;
-}
-
-.code-block pre {
-  margin: 0;
-  padding: 0.75rem;
-  color: var(--text-secondary);
-}
-
-.code-block code {
-  color: var(--text-secondary);
-}
-
-.collapsible-code {
-  border-radius: 0.375rem;
-  overflow: hidden;
-  margin: 0.25rem 0;
-  border: 1px solid #334155;
-  background: #1e293b;
-}
-
-.collapsible-code-summary {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 1rem;
-  background: #0f172a;
-  color: #94a3b8;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  cursor: pointer;
-  user-select: none;
-  list-style: none;
-  border-bottom: 1px solid #334155;
-  transition: background 0.15s ease;
-}
-
-.collapsible-code-summary::-webkit-details-marker {
-  display: none;
-}
-
-.collapsible-code-summary::before {
-  content: '';
-  display: inline-block;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 5px 0 5px 8px;
-  border-color: transparent transparent transparent #64748b;
-  margin-right: 0.5rem;
-  transition: transform 0.15s ease;
-  flex-shrink: 0;
-}
-
-.collapsible-code[open] > .collapsible-code-summary::before {
-  transform: rotate(90deg);
-}
-
-.collapsible-code-summary:hover {
-  background: #1e293b;
-  color: #e2e8f0;
-}
-
-.collapsible-code-summary:hover::before {
-  border-left-color: #e2e8f0;
-}
-
-.collapsible-code-summary .copy-code-btn {
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  display: flex;
-  align-items: center;
-}
-
-.collapsible-code-summary .copy-code-btn:hover {
-  color: #e2e8f0;
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.collapsible-code > pre {
-  margin: 0;
-  border-radius: 0 0 0.375rem 0.375rem;
-}
-
-.collapsible-code > div > pre {
-  margin: 0;
-  border-radius: 0 0 0.375rem 0.375rem;
-}
-
-.collapsible-code .code-block {
-  margin: 0;
-  border-radius: 0 0 0.375rem 0.375rem;
-}
-
-.image-block {
-  flex: 0 1 100%;
-  border-radius: 0.5rem;
-  overflow: hidden;
-  background: var(--bg-secondary);
-  max-width: 70%;
-}
-
-.image-header {
-  padding: 0.5rem 0.75rem;
-  background: var(--bg-tertiary);
-  font-weight: 500;
-  font-size: 0.875rem;
-  color: var(--text-primary);
-}
-
-.image-content {
-  display: block;
-  padding: 0.5rem;
-  max-width: 100%;
-  height: auto;
-}
-
-/* Connection Status Indicator */
-.connection-status {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-  background: var(--bg-secondary);
-  transition: var(--transition-smooth);
-}
-
-.connection-status.connected .status-dot {
-  background: var(--color-success);
-}
-
-.connection-status.reconnecting {
-  color: var(--color-warning);
-}
-
-.connection-status.reconnecting .status-dot {
-  background: var(--color-warning);
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-.connection-status.disconnected {
-  color: var(--color-danger);
-}
-
-.connection-status.disconnected .status-dot {
-  background: var(--color-danger);
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--color-success);
-  transition: var(--transition-smooth);
-}
-
-.status-text {
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-@media (max-width: 768px) {
-  .stream-container { max-width: 90%; }
-}
-
-@media (max-width: 480px) {
-  .stream-container { max-width: 95%; }
-}
-
-/* Modal */
-.gm-modal {
-  display: none;
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-  z-index: 1000;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  animation: fadeIn 0.2s ease-out;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slideUp {
-  from {
-    transform: translateY(10px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.gm-modal.active {
-  display: flex;
-}
-
-.gm-modal-content {
-  background: var(--bg-primary);
-  border-radius: 0.75rem;
-  box-shadow: var(--shadow-xl);
-  max-width: 90vw;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: slideUp 0.2s ease;
-  transition: var(--transition-smooth);
-}
-
-.gm-modal-header {
-  padding: 1.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.gm-modal-header h3 {
-  margin: 0;
-  color: var(--text-primary);
-}
-
-.gm-modal-body {
-  padding: 1.5rem;
-  overflow-y: auto;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.gm-modal-footer {
-  padding: 1rem 1.5rem;
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
-}
-
-.chat-option-btn {
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-  padding: 1rem 1.25rem;
-  background: var(--bg-secondary);
-  border-radius: 0.5rem;
-  cursor: pointer;
-  transition: var(--transition-smooth);
-  text-align: left;
-  width: 100%;
-}
-
-.chat-option-btn:hover {
-  background: var(--bg-tertiary);
-}
-
-.chat-option-btn:active {
-  transform: scale(0.98);
-}
-
-.chat-option-icon {
-  font-size: 1.5rem;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-}
-
-.chat-option-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.chat-option-title {
-  font-weight: 500;
-  color: var(--text-primary);
-  font-size: 0.95rem;
-}
-
-.chat-option-desc {
-  font-size: 0.8rem;
-  color: var(--text-tertiary);
-}
-
-.gm-btn {
-  padding: 0.625rem 1rem;
-  border: none;
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-smooth);
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  white-space: nowrap;
-}
-
-.gm-btn-primary {
-  background: var(--color-primary);
-  color: white;
-}
-
-.gm-btn-primary:hover {
-  background: var(--color-primary-light);
-  transform: translateY(-1px);
-}
-
-.gm-btn-success {
-  background: var(--color-success);
-  color: white;
-}
-
-.gm-btn-success:hover {
-  background: #059669;
-  transform: translateY(-1px);
-}
-
-.gm-btn-secondary {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-}
-
-.gm-btn-secondary:hover {
-  background: var(--border-color);
-}
-
-.gm-btn-danger {
-  background: var(--color-danger);
-  color: white;
-}
-
-.gm-btn-danger:hover {
-  background: #dc2626;
-  transform: translateY(-1px);
-}
-
-.gm-btn-close {
-  background: none;
-  border: none;
-  font-size: 2rem;
-  cursor: pointer;
-  color: var(--text-tertiary);
-  padding: 0;
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: var(--transition-fast);
-}
-
-.gm-btn-close:hover {
-  color: var(--text-primary);
-}
-
-/* Loading overlay */
-.loading-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 999;
-  align-items: center;
-  justify-content: center;
-}
-
-.loading-overlay.active {
-  display: flex;
-}
-
-.gm-spinner {
-  width: 48px;
-  height: 48px;
-  border: 4px solid rgba(255, 255, 255, 0.3);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* Scrollbar styling */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--border-color);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--text-tertiary);
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .sidebar {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 1000;
-    width: 280px;
-    transform: translateX(-100%);
-    box-shadow: none;
-    transition: transform 0.3s ease;
-  }
-
-  .sidebar.open,
-  .sidebar.mobile-visible {
-    transform: translateX(0);
-    box-shadow: var(--shadow-lg);
-  }
-
-  .sidebar-toggle {
-    display: flex;
-  }
-
-  .main-content {
-    width: 100%;
-  }
-
-  .chat-messages {
-    padding: 0.75rem 1rem;
-  }
-
-  .chat-input-section {
-    padding: 1rem 1.5rem;
-    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
-  }
-
-  .chat-footer {
-    padding: 0.75rem 1.5rem;
-    font-size: 0.75rem;
-  }
-
-  .footer-content {
-    gap: 1rem;
-  }
-
-  .agent-cards {
-    gap: 1rem;
-  }
-
-  .agent-card {
-    min-width: 120px;
-    padding: 0.75rem 1rem;
-  }
-
-  .agent-card-icon {
-    font-size: 1.25rem;
-  }
-
-  .agent-card-name {
-    font-size: 0.75rem;
-  }
-
-  .welcome-section h2 {
-    font-size: 1.25rem;
-  }
-
-  .message-bubble {
-    max-width: 90%;
-  }
-
-  .settings-content {
-    max-width: 95vw;
-  }
-}
-
-@media (max-width: 480px) {
-  .sidebar {
-    width: 100%;
-  }
-
-  .chat-messages {
-    padding: 1rem;
-  }
-
-  .chat-input-section {
-    padding: 0.75rem 1rem;
-  }
-
-  .welcome-section h2 {
-    font-size: 1.125rem;
-  }
-
-  .agent-cards {
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  .agent-card {
-    width: 100%;
-    min-width: auto;
-    flex-direction: row;
-    justify-content: flex-start;
-    padding: 0.75rem;
-  }
-
-  .message-bubble {
-    max-width: 95%;
-    font-size: 0.875rem;
-  }
-
-  .footer-content {
-    flex-direction: column;
-    gap: 0.5rem;
-    font-size: 0.7rem;
-  }
-}
-
-/* Small height viewports */
-@media (max-height: 600px) {
-  .chat-messages {
-    padding: 0.75rem;
-    gap: 0.375rem;
-  }
-
-  .chat-input-section {
-    padding: 0.75rem 1rem;
-  }
-
-  .chat-footer {
-    padding: 0.5rem 1rem;
-    font-size: 0.7rem;
-  }
-
-  .footer-content {
-    gap: 0.5rem;
-  }
-
-  .welcome-section {
-    gap: 1rem;
-    margin: auto 0;
-  }
-
-  .welcome-section h2 {
-    font-size: 1.25rem;
-    margin: 0;
-  }
-
-  .agent-selection {
-    gap: 0.75rem;
-  }
-
-  .agent-cards {
-    gap: 1rem;
-    flex-wrap: wrap;
-  }
-
-  .agent-card {
-    padding: 0.75rem 1rem;
-    min-width: 130px;
-    font-size: 0.8rem;
-  }
-
-  .agent-card-icon {
-    font-size: 1.25rem;
-  }
-
-  .chat-input {
-    min-height: 40px;
-    max-height: 120px;
-  }
-
-  .input-wrapper {
-    gap: 0.5rem;
-  }
-}
-
-@media (max-height: 500px) {
-  .chat-messages {
-    padding: 0.5rem;
-    gap: 0.25rem;
-  }
-
-  .chat-input-section {
-    padding: 0.5rem 0.75rem;
-  }
-
-  .welcome-section {
-    gap: 0.75rem;
-  }
-
-  .welcome-section h2 {
-    font-size: 1.1rem;
-    margin: 0;
-  }
-
-  .agent-cards {
-    gap: 0.75rem;
-  }
-
-  .agent-card {
-    padding: 0.5rem 0.75rem;
-    min-width: 110px;
-    font-size: 0.75rem;
-  }
-
-  .agent-card-icon {
-    font-size: 1.1rem;
-  }
-
-  .chat-input {
-    min-height: 36px;
-    max-height: 100px;
-    font-size: 0.9rem;
-  }
-
-  .action-btn {
-    padding: 0.5rem;
-  }
-
-  .chat-footer {
-    padding: 0.4rem 0.75rem;
-    font-size: 0.65rem;
-  }
-
-  .footer-content {
-    gap: 0.25rem;
-  }
-}
-
-/* Print styles */
-@media print {
-  .sidebar,
-  .chat-input-section,
-  .chat-footer,
-  .gm-modal,
-  .loading-overlay {
-    display: none;
-  }
-
-  .chat-messages {
-    max-height: none;
-    overflow: visible;
-  }
-}
-
-/* Rich Response Rendering */
-
-/* Code blocks */
-.segment-code {
-  margin: 1rem 0;
-}
-
-/* Inline code */
-p code {
-  background: #f0f0f0;
-  padding: 0.2em 0.4em;
-  border-radius: 3px;
-  font-family: 'Courier New', monospace;
-  color: #d73a49;
-  font-size: 0.9em;
-}
-
-/* Headings */
-.response-heading {
-  font-weight: 600;
-  margin: 1rem 0 0.5rem 0;
-  line-height: 1.3;
-}
-
-.segment-heading {
-  margin-top: 1.5rem;
-}
-
-.segment-heading:first-child {
-  margin-top: 0;
-}
-
-/* Blockquotes */
-.response-quote {
-  border-left: 4px solid #ccc;
-  padding-left: 1rem;
-  color: #666;
-  font-style: italic;
-  margin: 0.5rem 0;
-}
-
-/* Lists */
-.response-list-item {
-  margin-left: 2rem;
-  margin-bottom: 0.25rem;
-}
-
-/* Text segments */
-.segment-text {
-  margin: 0.5rem 0;
-}
-
-.response-text {
-  margin: 0.5rem 0;
-  line-height: 1.6;
-  color: #333;
-}
-
-/* Metadata display */
-.response-metadata {
-  background: #f9f9f9;
-  border-radius: 8px;
-  padding: 1rem;
-  margin: 1rem 0 0 0;
-  font-size: 0.9rem;
-}
-
-.metadata-section {
-  margin-bottom: 1rem;
-}
-
-.metadata-section:last-child {
-  margin-bottom: 0;
-}
-
-.metadata-section strong {
-  display: block;
-  margin-bottom: 0.5rem;
-  color: #555;
-  font-weight: 600;
-}
-
-.metadata-section ul {
-  list-style: none;
-  padding-left: 1rem;
-  margin: 0;
-}
-
-.metadata-section li {
-  margin-bottom: 0.25rem;
-  padding-left: 0.5rem;
-}
-
-.metadata-section li::before {
-  content: '▸ ';
-  color: #007acc;
-  font-weight: bold;
-  margin-right: 0.5rem;
-}
-
-.metadata-section.tools li code {
-  background: #e8f4f8;
-  color: #0071bc;
-  padding: 0.2em 0.4em;
-  border-radius: 3px;
-}
-
-.metadata-section.thinking {
-  background: #fff9e6;
-}
-
-.metadata-section.thinking summary {
-  cursor: pointer;
-  font-weight: 600;
-  color: #997700;
-  user-select: none;
-}
-
-.metadata-section.thinking summary:hover {
-  color: #bb9900;
-}
-
-.metadata-section.thinking p {
-  margin: 0.5rem 0;
-  padding-left: 1rem;
-  border-left: 3px solid #f0c674;
-  padding-left: 1rem;
-  color: #666;
-  font-size: 0.9rem;
-}
-
-.metadata-section.subagents li::before {
-  content: '🤖 ';
-}
-
-.metadata-section.tasks li::before {
-  content: '✓ ';
-  color: #28a745;
-}
-
-/* New Segment Types */
-
-/* Thinking blocks */
-.segment-thinking {
-  background: #f9f9f9;
-  border-left: 4px solid #999;
-  padding: 1rem;
-  margin: 1rem 0;
-  border-radius: 4px;
-}
-
-.segment-thinking summary {
-  cursor: pointer;
-  font-weight: 600;
-  color: #666;
-  user-select: none;
-  padding-bottom: 0.5rem;
-}
-
-.segment-thinking summary:hover {
-  color: #333;
-}
-
-.thinking-content {
-  color: #555;
-  font-size: 0.95em;
-  line-height: 1.6;
-  margin-top: 0.5rem;
-  padding: 0.5rem 0;
-}
-
-/* Tool use blocks */
-.segment-tool-use {
-  background: #f0f8ff;
-  border-left: 4px solid #007acc;
-  padding: 0.5rem;
-  margin: 0.25rem 0;
-  border-radius: 4px;
-}
-
-.tool-icon {
-  font-weight: 600;
-  color: #007acc;
-  margin-bottom: 0.5rem;
-}
-
-.tool-content {
-  background: #f5f5f5;
-  padding: 0.75rem;
-  border-radius: 3px;
-  overflow-x: auto;
-}
-
-.tool-content code {
-  color: #d73a49;
-  font-family: 'Courier New', monospace;
-}
-
-/* Tool result blocks */
-.segment-tool-result {
-  background: #fff9e6;
-  border-left: 4px solid #ffb300;
-  padding: 0.5rem;
-  margin: 0.25rem 0;
-  border-radius: 4px;
-}
-
-.result-icon {
-  font-weight: 600;
-  color: #997700;
-  margin-bottom: 0.5rem;
-}
-
-.result-content {
-  background: #f5f5f5;
-  padding: 0.75rem;
-  border-radius: 3px;
-  overflow-x: auto;
-}
-
-/* Action statements */
-.response-action {
-  background: #e8f5e9;
-  border-left: 4px solid #28a745;
-  padding: 0.75rem 1rem;
-  margin: 1.5rem 0 0.5rem 0;
-  border-radius: 4px;
-  font-weight: 500;
-  color: #1b5e20;
-}
-
-/* Analysis blocks */
-.response-analysis {
-  background: #e3f2fd;
-  border-left: 4px solid #1976d2;
-  padding: 0.75rem 1rem;
-  margin: 1rem 0;
-  border-radius: 4px;
-  color: #0d47a1;
-  font-size: 0.95em;
-}
-
-/* Result presentation */
-.response-result {
-  background: #f3e5f5;
-  border-left: 4px solid #7b1fa2;
-  padding: 1rem;
-  margin: 1rem 0;
-  border-radius: 4px;
-  line-height: 1.6;
-}
-
-/* Claude Execution Blocks - Full message structure rendering */
-.execution-blocks {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  width: 100%;
-}
-
-.message-block {
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.5rem;
-  background: var(--bg-secondary);
-  word-wrap: break-word;
-}
-
-.block-text {
-  color: var(--text-primary);
-  line-height: 1.6;
-}
-
-.block-text h1 {
-  font-size: 1.75rem;
-  font-weight: 700;
-  margin: 1rem 0 0.5rem 0;
-  color: var(--text-primary);
-}
-
-.block-text h2 {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin: 0.875rem 0 0.5rem 0;
-  color: var(--text-primary);
-}
-
-.block-text h3 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin: 0.75rem 0 0.375rem 0;
-  color: var(--text-primary);
-}
-
-.block-text p {
-  margin: 0.5rem 0;
-  white-space: normal;
-}
-
-.block-text ul,
-.block-text ol {
-  margin: 0.5rem 0 0.5rem 1.5rem;
-  padding-left: 1rem;
-}
-
-.block-text li {
-  margin: 0.25rem 0;
-}
-
-.block-text code.inline-code {
-  background: var(--bg-tertiary);
-  color: var(--color-info);
-  padding: 0.15rem 0.4rem;
-  border-radius: 0.25rem;
-  font-family: 'Courier New', monospace;
-  font-size: 0.9em;
-  white-space: nowrap;
-}
-
-.block-text a {
-  color: var(--color-primary);
-  text-decoration: none;
-  transition: var(--transition-fast);
-}
-
-.block-text a:hover {
-  text-decoration: underline;
-}
-
-.block-tool-use {
-  background: rgba(59, 130, 246, 0.05);
-  border-radius: 0.5rem;
-  padding: 0.5rem;
-}
-.block-tool-use.folded-tool {
-  padding: 0;
-  background: none;
-}
-
-.tool-name {
-  color: var(--color-info);
-  font-weight: 600;
-  display: block;
-  margin-bottom: 0.5rem;
-}
-
-.tool-input {
-  background: transparent;
-  border-radius: 0.375rem;
-  padding: 0.5rem 0;
-  overflow-x: auto;
-  font-size: 0.8rem;
-  font-family: 'Courier New', monospace;
-  line-height: 1.5;
-}
-
-.tool-input pre {
-  margin: 0;
-  color: var(--text-secondary);
-}
-
-.tool-input code {
-  color: var(--text-secondary);
-  background: transparent;
-  padding: 0;
-  font-family: inherit;
-}
-
-.tool-input span {
-  font-family: 'Courier New', monospace;
-}
-
-.block-tool-result {
-  background: rgba(16, 185, 129, 0.05);
-  border-radius: 0.5rem;
-  padding: 0.5rem;
-}
-
-.block-tool-result strong {
-  color: var(--color-success);
-  display: block;
-  margin-bottom: 0.5rem;
-}
-
-.tool-result {
-  background: transparent;
-  border-radius: 0.375rem;
-  padding: 0.5rem 0;
-  overflow-x: auto;
-  font-size: 0.8rem;
-  font-family: 'Courier New', monospace;
-  max-height: 300px;
-  overflow-y: auto;
-  line-height: 1.5;
-}
-
-.tool-result pre {
-  margin: 0;
-  color: var(--text-secondary);
-}
-
-.tool-result code {
-  color: var(--text-secondary);
-  background: transparent;
-  padding: 0;
-  font-family: inherit;
-}
-
-.block-file-op {
-  background: rgba(245, 158, 11, 0.05);
-  border-radius: 0.5rem;
-  padding: 0.75rem;
-}
-
-.file-action {
-  color: var(--color-warning);
-  font-weight: 600;
-  display: block;
-  margin-bottom: 0.5rem;
-}
-
-.file-path {
-  color: var(--text-secondary);
-  font-size: 0.875rem;
-  font-family: 'Courier New', monospace;
-  margin-bottom: 0.5rem;
-  padding: 0.25rem 0;
-  background: transparent;
-  border-radius: 0.25rem;
-}
-
-.file-content {
-  background: transparent;
-  border-radius: 0.375rem;
-  padding: 0.5rem 0;
-  overflow-x: auto;
-  font-size: 0.8rem;
-  font-family: 'Courier New', monospace;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.file-content pre {
-  margin: 0;
-  color: var(--text-secondary);
-}
-
-.block-unknown {
-  background: var(--bg-tertiary);
-  border-radius: 0.375rem;
-  padding: 0.5rem;
-  overflow-x: auto;
-  font-size: 0.75rem;
-  font-family: 'Courier New', monospace;
-}
-
-.message-content {
-  color: var(--text-primary);
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  line-height: 1.5;
-}
-
-/* Touch-friendly interactive elements */
-@media (pointer: coarse) {
-  .chat-item,
-  .new-chat-btn,
-  .settings-btn,
-  .action-btn,
-  .gm-btn,
-  .chat-option-btn,
-  .close-btn {
-    min-height: 44px;
-    min-width: 44px;
-  }
-
-  .chat-input {
-    font-size: 16px;
-    min-height: 44px;
-  }
-
-  .chat-messages {
-    -webkit-overflow-scrolling: touch;
-  }
-}
-
-/* Safe area padding for notched phones */
-@supports (padding-top: env(safe-area-inset-top)) {
-  #app {
-    padding-top: env(safe-area-inset-top);
-  }
-
-  .chat-input-section {
-    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
-  }
-
-  .chat-footer {
-    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
-  }
-}