@hef2024/llmasaservice-ui 0.16.8

package/src/AIChatPanel.css

@@ -0,0 +1,1618 @@
+/* ============================================================================
+   AI CHAT PANEL CSS
+   
+   Uses CSS variables from AIAgentPanel.css for consistent theming.
+   This file extends those variables with chat-specific styles.
+============================================================================ */
+
+/* ============================================================================
+   CSS Variables - Chat Specific
+============================================================================ */
+
+:root {
+  /* Messages */
+  --ai-chat-user-bg: #e5e7eb;
+  --ai-chat-user-text: #1f2937;
+  --ai-chat-assistant-bg: transparent;
+  --ai-chat-assistant-text: #374151;
+  --ai-chat-message-radius: 12px;
+  --ai-chat-message-padding: 12px 16px;
+  --ai-chat-message-max-width: 85%;
+  
+  /* Input */
+  --ai-chat-input-bg: #ffffff;
+  --ai-chat-input-border: #d1d5db;
+  --ai-chat-input-text: #1f2937;
+  --ai-chat-input-placeholder: #9ca3af;
+  --ai-chat-input-focus-border: #3b82f6;
+  --ai-chat-input-focus-ring: rgba(59, 130, 246, 0.2);
+  --ai-chat-input-radius: 12px;
+  
+  /* Suggestions */
+  --ai-chat-suggestion-bg: #f3f4f6;
+  --ai-chat-suggestion-border: #e5e7eb;
+  --ai-chat-suggestion-text: #374151;
+  --ai-chat-suggestion-hover-bg: #e5e7eb;
+  
+  /* Thinking Blocks */
+  --ai-chat-thinking-bg: #f0f9ff;
+  --ai-chat-thinking-border: #bae6fd;
+  --ai-chat-thinking-text: #0c4a6e;
+  --ai-chat-thinking-icon: #0369a1;
+  
+  /* Loading */
+  --ai-chat-loading-dot: #9ca3af;
+  
+  /* Footer */
+  --ai-chat-footer-text: #9ca3af;
+  --ai-chat-footer-link: #3b82f6;
+  
+  /* Tools Status */
+  --ai-chat-tools-ready: #22c55e;
+  --ai-chat-tools-loading: #f59e0b;
+  --ai-chat-tools-error: #ef4444;
+}
+
+/* Dark Theme */
+.dark-theme {
+  --ai-chat-user-bg: #374151;
+  --ai-chat-user-text: #f9fafb;
+  --ai-chat-assistant-bg: transparent;
+  --ai-chat-assistant-text: #e5e7eb;
+  
+  --ai-chat-input-bg: #1f2937;
+  --ai-chat-input-border: #374151;
+  --ai-chat-input-text: #f9fafb;
+  --ai-chat-input-placeholder: #6b7280;
+  --ai-chat-input-focus-border: #60a5fa;
+  --ai-chat-input-focus-ring: rgba(96, 165, 250, 0.2);
+  
+  --ai-chat-suggestion-bg: #1f2937;
+  --ai-chat-suggestion-border: #374151;
+  --ai-chat-suggestion-text: #e5e7eb;
+  --ai-chat-suggestion-hover-bg: #374151;
+  
+  --ai-chat-thinking-bg: #0c4a6e;
+  --ai-chat-thinking-border: #0369a1;
+  --ai-chat-thinking-text: #e0f2fe;
+  --ai-chat-thinking-icon: #7dd3fc;
+  
+  --ai-chat-loading-dot: #6b7280;
+  
+  --ai-chat-footer-text: #6b7280;
+  --ai-chat-footer-link: #60a5fa;
+}
+
+/* ============================================================================
+   Base Panel Styles
+============================================================================ */
+
+.ai-chat-panel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background-color: var(--ai-chat-bg, #ffffff);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  color: var(--ai-chat-assistant-text);
+}
+
+.dark-theme.ai-chat-panel {
+  background-color: var(--ai-chat-bg, #111827);
+}
+
+/* ============================================================================
+   Title
+============================================================================ */
+
+.ai-chat-panel__title {
+  padding: 12px 16px;
+  font-size: 16px;
+  font-weight: 600;
+  border-bottom: 1px solid var(--ai-sidebar-border, #e5e7eb);
+  flex-shrink: 0;
+}
+
+/* ============================================================================
+   Messages Area
+============================================================================ */
+
+.ai-chat-panel__messages {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Entry container */
+.ai-chat-entry {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* ============================================================================
+   Message Bubbles
+============================================================================ */
+
+.ai-chat-message {
+  display: flex;
+  flex-direction: column;
+  max-width: var(--ai-chat-message-max-width);
+  min-width: 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.ai-chat-message--user {
+  align-self: flex-end;
+}
+
+.ai-chat-message--user .ai-chat-message__content {
+  background-color: var(--ai-chat-user-bg);
+  color: var(--ai-chat-user-text);
+  border-radius: var(--ai-chat-message-radius);
+  border-bottom-right-radius: 4px;
+  padding: var(--ai-chat-message-padding);
+}
+
+.ai-chat-message--assistant {
+  align-self: flex-start;
+  max-width: 100%;
+}
+
+.ai-chat-message--assistant .ai-chat-message__content {
+  background-color: var(--ai-chat-assistant-bg);
+  color: var(--ai-chat-assistant-text);
+  padding: 4px 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  min-width: 0;
+}
+
+/* Message Content Markdown Styles */
+.ai-chat-message__content p {
+  margin: 0 0 0.75em 0;
+  line-height: 1.6;
+}
+
+.ai-chat-message__content p:last-child {
+  margin-bottom: 0;
+}
+
+.ai-chat-message__content ul,
+.ai-chat-message__content ol {
+  margin: 0 0 1em 0;
+  padding-left: 1.5em;
+  line-height: 1.6;
+}
+
+.ai-chat-message__content li {
+  margin: 0.5em 0;
+  line-height: 1.6;
+}
+
+.ai-chat-message__content li:first-child {
+  margin-top: 0;
+}
+
+.ai-chat-message__content li:last-child {
+  margin-bottom: 0;
+}
+
+.ai-chat-message__content ul ul,
+.ai-chat-message__content ol ol,
+.ai-chat-message__content ul ol,
+.ai-chat-message__content ol ul {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+/* Headings */
+.ai-chat-message__content h1,
+.ai-chat-message__content h2,
+.ai-chat-message__content h3,
+.ai-chat-message__content h4,
+.ai-chat-message__content h5,
+.ai-chat-message__content h6 {
+  margin: 1.25em 0 0.75em 0;
+  line-height: 1.4;
+  font-weight: 600;
+}
+
+.ai-chat-message__content h1:first-child,
+.ai-chat-message__content h2:first-child,
+.ai-chat-message__content h3:first-child,
+.ai-chat-message__content h4:first-child,
+.ai-chat-message__content h5:first-child,
+.ai-chat-message__content h6:first-child {
+  margin-top: 0;
+}
+
+/* Tables */
+.ai-chat-message__content table {
+  margin: 1em 0;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.ai-chat-message__content th,
+.ai-chat-message__content td {
+  padding: 0.5em 0.75em;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  line-height: 1.5;
+}
+
+.dark-theme .ai-chat-message__content th,
+.dark-theme .ai-chat-message__content td {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.ai-chat-message__content th {
+  font-weight: 600;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.dark-theme .ai-chat-message__content th {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.ai-chat-message__content tr {
+  line-height: 1.5;
+}
+
+/* Blockquotes */
+.ai-chat-message__content blockquote {
+  margin: 1em 0;
+  padding: 0.5em 1em;
+  border-left: 4px solid rgba(0, 0, 0, 0.2);
+  background-color: rgba(0, 0, 0, 0.02);
+  line-height: 1.6;
+}
+
+.dark-theme .ai-chat-message__content blockquote {
+  border-left-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+/* Horizontal rules */
+.ai-chat-message__content hr {
+  margin: 1.5em 0;
+  border: none;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.dark-theme .ai-chat-message__content hr {
+  border-top-color: rgba(255, 255, 255, 0.1);
+}
+
+.ai-chat-message__content code {
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+}
+
+.dark-theme .ai-chat-message__content code {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.ai-chat-message__content pre {
+  margin: 0.75em 0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.ai-chat-message__content pre code {
+  background: none;
+  padding: 0;
+}
+
+.ai-chat-message__content a {
+  color: var(--ai-chat-footer-link);
+  text-decoration: none;
+}
+
+.ai-chat-message__content a:hover {
+  text-decoration: underline;
+}
+
+/* Action Buttons */
+.ai-chat-message__actions {
+  display: flex;
+  gap: 4px;
+  margin-top: 8px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.ai-chat-message:hover .ai-chat-message__actions {
+  opacity: 1;
+}
+
+/* ============================================================================
+   Thinking Blocks
+============================================================================ */
+
+.ai-chat-thinking {
+  background-color: var(--ai-chat-thinking-bg);
+  border: 1px solid var(--ai-chat-thinking-border);
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+
+.ai-chat-thinking__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  color: var(--ai-chat-thinking-text);
+}
+
+.ai-chat-thinking__icon {
+  color: var(--ai-chat-thinking-icon);
+}
+
+.ai-chat-thinking__title {
+  font-weight: 600;
+  flex: 1;
+}
+
+.ai-chat-thinking__nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.ai-chat-thinking__nav button {
+  background: none;
+  border: none;
+  color: var(--ai-chat-thinking-icon);
+  cursor: pointer;
+  padding: 2px 6px;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+.ai-chat-thinking__nav button:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.ai-chat-thinking__nav button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ai-chat-thinking__content {
+  color: var(--ai-chat-thinking-text);
+  opacity: 0.9;
+  line-height: 1.5;
+}
+
+/* ============================================================================
+   Loading Animation
+============================================================================ */
+
+.ai-chat-loading {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--ai-chat-loading-dot);
+}
+
+.ai-chat-loading__dots {
+  display: flex;
+  gap: 4px;
+}
+
+.ai-chat-loading__dot {
+  width: 6px;
+  height: 6px;
+  background-color: var(--ai-chat-loading-dot);
+  border-radius: 50%;
+  animation: ai-chat-dot-bounce 1.4s ease-in-out infinite both;
+}
+
+.ai-chat-loading__dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.ai-chat-loading__dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes ai-chat-dot-bounce {
+  0%, 80%, 100% {
+    transform: scale(0.6);
+    opacity: 0.4;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* ============================================================================
+   Suggestions
+============================================================================ */
+
+.ai-chat-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+.ai-chat-suggestions__button {
+  font-size: 13px;
+  white-space: normal;
+  text-align: left;
+  height: auto;
+  padding: 8px 12px;
+  min-width: 0;
+  max-width: 100%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/* ============================================================================
+   New Conversation Button
+============================================================================ */
+
+.ai-chat-panel__new-conversation {
+  padding: 8px 16px;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.ai-chat-new-conversation {
+  width: 100%;
+}
+
+/* ============================================================================
+   Input Area
+============================================================================ */
+
+.ai-chat-panel__input {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--ai-sidebar-border, #e5e7eb);
+  flex-shrink: 0;
+}
+
+.ai-chat-input {
+  flex: 1;
+  min-height: 40px;
+  max-height: 200px;
+  padding: 10px 14px;
+  background-color: var(--ai-chat-input-bg);
+  border: 1px solid var(--ai-chat-input-border);
+  border-radius: var(--ai-chat-input-radius);
+  color: var(--ai-chat-input-text);
+  font-size: 14px;
+  font-family: inherit;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.ai-chat-input::placeholder {
+  color: var(--ai-chat-input-placeholder);
+}
+
+.ai-chat-input:focus {
+  border-color: var(--ai-chat-input-focus-border);
+  box-shadow: 0 0 0 3px var(--ai-chat-input-focus-ring);
+}
+
+/* Send button - Cursor style circular with up arrow */
+.ai-chat-send-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background-color: var(--ai-button-primary-bg, #3b82f6);
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.15s, opacity 0.15s;
+  flex-shrink: 0;
+}
+
+.ai-chat-send-button:hover:not(:disabled) {
+  background-color: var(--ai-button-primary-hover, #2563eb);
+}
+
+.ai-chat-send-button--disabled,
+.ai-chat-send-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ai-chat-send-button--stop {
+  background-color: var(--ai-chat-tools-error, #ef4444);
+}
+
+.ai-chat-send-button--stop:hover:not(:disabled) {
+  background-color: #dc2626;
+}
+
+/* ============================================================================
+   Footer
+============================================================================ */
+
+.ai-chat-panel__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  font-size: 12px;
+  color: var(--ai-chat-footer-text);
+  border-top: 1px solid var(--ai-sidebar-border, #e5e7eb);
+  flex-shrink: 0;
+}
+
+/* Tools Status */
+.ai-chat-tools-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ai-chat-tools-status__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.ai-chat-tools-status__dot.ready {
+  background-color: var(--ai-chat-tools-ready);
+}
+
+.ai-chat-tools-status__dot.loading {
+  background-color: var(--ai-chat-tools-loading);
+  animation: ai-chat-pulse 1.5s ease-in-out infinite;
+}
+
+.ai-chat-tools-status__dot.error {
+  background-color: var(--ai-chat-tools-error);
+}
+
+@keyframes ai-chat-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* Powered By */
+.ai-chat-powered-by {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ai-chat-powered-by a {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--ai-chat-footer-link);
+  text-decoration: none;
+}
+
+.ai-chat-powered-by a:hover {
+  text-decoration: underline;
+}
+
+/* ============================================================================
+   Icons
+============================================================================ */
+
+.ai-chat-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.ai-chat-icon-sm {
+  width: 16px;
+  height: 16px;
+}
+
+/* ============================================================================
+   Scrollbar Styling
+============================================================================ */
+
+.ai-chat-panel__messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.ai-chat-panel__messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ai-chat-panel__messages::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.dark-theme .ai-chat-panel__messages::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.ai-chat-panel__messages::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.dark-theme .ai-chat-panel__messages::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+/* ============================================================================
+   Responsive
+============================================================================ */
+
+@media (max-width: 480px) {
+  .ai-chat-message {
+    max-width: 95%;
+  }
+  
+  .ai-chat-suggestions {
+    flex-direction: column;
+  }
+  
+  .ai-chat-suggestions__button {
+    width: 100%;
+  }
+}
+
+/* ============================================================================
+   Narrow Panel Responsive (for resizable panels at min-width)
+============================================================================ */
+
+/* Container query fallback - handles narrow panel widths */
+.ai-chat-panel {
+  container-type: inline-size;
+  container-name: chat-panel;
+}
+
+/* When panel is narrow, stack suggestions vertically */
+@container chat-panel (max-width: 380px) {
+  .ai-chat-suggestions {
+    flex-direction: column;
+  }
+  
+  .ai-chat-suggestions__button {
+    width: 100%;
+    min-width: 0;
+    text-align: left;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+  }
+  
+  .ai-chat-message__content {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+  }
+  
+  .ai-chat-panel__messages {
+    padding: 12px;
+  }
+  
+  .ai-chat-panel__input {
+    padding: 10px 12px;
+  }
+  
+  .ai-chat-input {
+    min-height: 36px;
+    padding: 8px 12px;
+    font-size: 13px;
+  }
+}
+
+/* Extra narrow - more aggressive wrapping */
+@container chat-panel (max-width: 320px) {
+  .ai-chat-panel__messages {
+    padding: 8px;
+  }
+  
+  .ai-chat-panel__input {
+    padding: 8px;
+    gap: 6px;
+  }
+  
+  .ai-chat-suggestions__button {
+    padding: 6px 10px;
+    font-size: 12px;
+  }
+  
+  .ai-chat-send-button {
+    width: 36px;
+    height: 36px;
+  }
+}
+
+/* ============================================================================
+   Input Container (wraps input + agent selector) - Cursor-style unified box
+============================================================================ */
+
+.ai-chat-panel__input-container {
+  margin: 12px 16px;
+  border: 1px solid var(--ai-chat-input-border);
+  border-radius: var(--ai-chat-input-radius);
+  background-color: var(--ai-chat-input-bg);
+  flex-shrink: 0;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.ai-chat-panel__input-container:focus-within {
+  border-color: var(--ai-chat-input-focus-border);
+  box-shadow: 0 0 0 3px var(--ai-chat-input-focus-ring);
+}
+
+.ai-chat-panel__input-container--dropdown-open {
+  border-color: var(--ai-chat-input-focus-border);
+}
+
+.ai-chat-panel__input-container .ai-chat-panel__input {
+  border-top: none;
+  padding: 8px 8px 4px 8px;
+}
+
+.ai-chat-panel__input-container .ai-chat-input {
+  border: none;
+  background: transparent;
+  padding: 4px 8px;
+  border-radius: 0;
+}
+
+.ai-chat-panel__input-container .ai-chat-input:focus {
+  border-color: transparent;
+  box-shadow: none;
+}
+
+/* ============================================================================
+   Input Footer (agent selector + send button row - Cursor style)
+============================================================================ */
+
+.ai-chat-panel__input-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 8px 8px 8px;
+  flex-shrink: 0;
+}
+
+.ai-chat-panel__input-footer-spacer {
+  flex: 1;
+}
+
+/* ============================================================================
+   Agent Selector (Cursor-style dropdown)
+============================================================================ */
+
+.ai-chat-agent-selector {
+  position: relative;
+}
+
+.ai-chat-agent-selector__trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--ai-chat-footer-text, #6b7280);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.ai-chat-agent-selector__trigger:hover {
+  background-color: var(--ai-button-ghost-hover, rgba(0, 0, 0, 0.04));
+  color: var(--ai-chat-assistant-text);
+}
+
+.ai-chat-agent-selector__trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ai-chat-agent-selector__label {
+  font-weight: 500;
+}
+
+/* Inside dropdown option styling */
+.ai-chat-agent-selector__dropdown-inside .ai-chat-agent-selector__option {
+  border-radius: 0;
+}
+
+.ai-chat-agent-selector__dropdown-inside .ai-chat-agent-selector__option:first-child {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.ai-chat-agent-selector__dropdown-inside .ai-chat-agent-selector__option:last-child {
+  border-bottom-left-radius: calc(var(--ai-chat-input-radius) - 1px);
+  border-bottom-right-radius: calc(var(--ai-chat-input-radius) - 1px);
+}
+
+/* Old floating dropdown - kept for backwards compatibility */
+.ai-chat-agent-selector__dropdown {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  min-width: 200px;
+  max-width: 280px;
+  margin-bottom: 6px;
+  background-color: var(--ai-select-bg, #ffffff);
+  border: 1px solid var(--ai-select-border, #d1d5db);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  z-index: 1000;
+  overflow: hidden;
+  animation: ai-chat-dropdown-appear 0.15s ease-out;
+}
+
+.dark-theme .ai-chat-agent-selector__dropdown {
+  background-color: var(--ai-select-bg, #1f2937);
+  border-color: var(--ai-select-border, #374151);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+/* New inside dropdown - Cursor style */
+.ai-chat-agent-selector__dropdown-inside {
+  background-color: var(--ai-select-bg, #f9fafb);
+  overflow: hidden;
+  animation: ai-chat-dropdown-inside-appear 0.15s ease-out;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.dark-theme .ai-chat-agent-selector__dropdown-inside {
+  background-color: var(--ai-select-bg, #1f2937);
+}
+
+@keyframes ai-chat-dropdown-inside-appear {
+  from {
+    opacity: 0;
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    max-height: 200px;
+  }
+}
+
+@keyframes ai-chat-dropdown-appear {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.ai-chat-agent-selector__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  background: none;
+  border: none;
+  color: var(--ai-select-text, #1f2937);
+  font-size: 12px;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.dark-theme .ai-chat-agent-selector__option {
+  color: var(--ai-select-text, #f3f4f6);
+}
+
+.ai-chat-agent-selector__option:hover {
+  background-color: var(--ai-select-item-hover, #f3f4f6);
+}
+
+.dark-theme .ai-chat-agent-selector__option:hover {
+  background-color: var(--ai-select-item-hover, #374151);
+}
+
+.ai-chat-agent-selector__option--selected {
+  background-color: var(--ai-select-item-selected, #eff6ff);
+}
+
+.dark-theme .ai-chat-agent-selector__option--selected {
+  background-color: var(--ai-select-item-selected, #1e3a5f);
+}
+
+.ai-chat-agent-selector__avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.ai-chat-agent-selector__option-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.ai-chat-agent-selector__option-icon {
+  display: flex;
+  color: var(--ai-chat-footer-text, #9ca3af);
+}
+
+.ai-chat-agent-selector__option-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.ai-chat-agent-selector__option-label {
+  display: block;
+  font-weight: 500;
+}
+
+.ai-chat-agent-selector__option-description {
+  display: block;
+  font-size: 11px;
+  color: var(--ai-sidebar-text-muted, #6b7280);
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ai-chat-agent-selector__option-check {
+  display: flex;
+  color: var(--ai-button-primary-bg, #3b82f6);
+}
+
+/* Responsive adjustments for agent selector */
+@container chat-panel (max-width: 380px) {
+  .ai-chat-panel__input-container {
+    margin: 10px 12px;
+  }
+  
+  .ai-chat-panel__input-footer {
+    padding: 0 6px 6px 6px;
+  }
+  
+  .ai-chat-agent-selector__trigger {
+    padding: 2px 6px;
+    font-size: 12px;
+  }
+  
+  .ai-chat-agent-selector__dropdown {
+    min-width: 180px;
+  }
+  
+  .ai-chat-agent-selector__dropdown-inside {
+    max-height: 160px;
+  }
+  
+  .ai-chat-send-button {
+    width: 22px;
+    height: 22px;
+  }
+}
+
+@container chat-panel (max-width: 320px) {
+  .ai-chat-panel__input-container {
+    margin: 8px;
+  }
+  
+  .ai-chat-panel__input-footer {
+    padding: 0 6px 4px 6px;
+  }
+  
+  .ai-chat-send-button {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+/* ============================================================================
+   Agent Suggestion Card (inline handoff UI)
+============================================================================ */
+
+.ai-chat-agent-suggestion {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  margin: 12px 0;
+  background-color: var(--ai-chat-suggestion-bg);
+  border: 1px solid var(--ai-chat-suggestion-border);
+  border-radius: 8px;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.ai-chat-agent-suggestion:hover {
+  border-color: var(--ai-chat-input-focus-border);
+  box-shadow: 0 0 0 2px var(--ai-chat-input-focus-ring);
+}
+
+.ai-chat-agent-suggestion__content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+}
+
+.ai-chat-agent-suggestion__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background-color: var(--ai-button-primary-bg, #3b82f6);
+  color: white;
+  flex-shrink: 0;
+}
+
+.ai-chat-agent-suggestion__icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.ai-chat-agent-suggestion__text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.ai-chat-agent-suggestion__label {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--ai-chat-assistant-text);
+}
+
+.ai-chat-agent-suggestion__reason {
+  font-size: 12px;
+  color: var(--ai-sidebar-text-muted, #6b7280);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ai-chat-agent-suggestion__button {
+  flex-shrink: 0;
+}
+
+/* Dark theme adjustments */
+.dark-theme .ai-chat-agent-suggestion {
+  background-color: var(--ai-chat-suggestion-bg);
+  border-color: var(--ai-chat-suggestion-border);
+}
+
+.dark-theme .ai-chat-agent-suggestion__label {
+  color: var(--ai-chat-assistant-text);
+}
+
+.dark-theme .ai-chat-agent-suggestion__reason {
+  color: var(--ai-sidebar-text-muted, #9ca3af);
+}
+
+/* Agent avatar */
+.ai-chat-agent-suggestion__avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+/* Invalid/unavailable agent suggestion */
+.ai-chat-agent-suggestion--invalid {
+  opacity: 0.7;
+}
+
+.ai-chat-agent-suggestion--invalid:hover {
+  border-color: var(--ai-chat-suggestion-border);
+  box-shadow: none;
+}
+
+.ai-chat-agent-suggestion__unavailable {
+  font-size: 12px;
+  color: var(--ai-sidebar-text-muted, #6b7280);
+  font-style: italic;
+  flex-shrink: 0;
+}
+
+/* Switched state */
+.ai-chat-agent-suggestion--switched {
+  background-color: rgba(34, 197, 94, 0.08);
+  border-color: rgba(34, 197, 94, 0.3);
+}
+
+.ai-chat-agent-suggestion--switched:hover {
+  border-color: rgba(34, 197, 94, 0.4);
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1);
+}
+
+.ai-chat-agent-suggestion__icon--switched {
+  background-color: #22c55e;
+}
+
+.ai-chat-agent-suggestion__switched-badge {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  background-color: rgba(34, 197, 94, 0.1);
+  color: #16a34a;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.dark-theme .ai-chat-agent-suggestion--switched {
+  background-color: rgba(34, 197, 94, 0.12);
+  border-color: rgba(34, 197, 94, 0.25);
+}
+
+.dark-theme .ai-chat-agent-suggestion__switched-badge {
+  background-color: rgba(34, 197, 94, 0.15);
+  color: #4ade80;
+}
+
+/* Responsive adjustments for agent suggestion card */
+@container chat-panel (max-width: 380px) {
+  .ai-chat-agent-suggestion {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+    padding: 10px 12px;
+  }
+  
+  .ai-chat-agent-suggestion__button {
+    width: 100%;
+  }
+  
+  .ai-chat-agent-suggestion__reason {
+    white-space: normal;
+  }
+}
+
+/* ============================================================================
+   Context Viewer - Cursor-Style Pill & Popover
+============================================================================ */
+
+/* Pill Wrapper - positions the popover */
+.ai-chat-context-pill-wrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* Context Pill - Cursor style */
+.ai-chat-context-pill {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  background: var(--ai-chat-suggestion-bg, #f3f4f6);
+  border: none;
+  border-radius: 999px;
+  color: var(--ai-sidebar-text-muted, #6b7280);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-family: inherit;
+}
+
+.ai-chat-context-pill:hover {
+  background: var(--ai-chat-suggestion-hover-bg, #e5e7eb);
+  color: var(--ai-chat-input-text, #1f2937);
+}
+
+.ai-chat-context-pill--active {
+  background: var(--ai-chat-suggestion-hover-bg, #e5e7eb);
+  color: var(--ai-chat-input-text, #1f2937);
+}
+
+.ai-chat-context-pill--warning {
+  color: #f59e0b;
+}
+
+.ai-chat-context-pill__count {
+  display: none;
+  border-radius: 999px;
+}
+
+.ai-chat-context-pill__label {
+  font-weight: 400;
+  color: var(--ai-sidebar-text-muted, #6b7280);
+  font-size: 12px;
+}
+
+.ai-chat-context-pill__tokens {
+  display: none;
+}
+
+/* Context Popover - slides up from pill */
+.ai-chat-context-popover {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: 280px;
+  max-width: 360px;
+  background: var(--ai-chat-input-bg, #ffffff);
+  border: 1px solid var(--ai-chat-input-border, #e5e7eb);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  z-index: 1000;
+  overflow: hidden;
+  animation: contextPopoverSlideUp 0.15s ease-out;
+}
+
+.ai-chat-context-popover--detail {
+  position: fixed;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100vw - 100px);
+  max-width: 800px;
+  min-width: 500px;
+  max-height: calc(100vh - 200px);
+  z-index: 1001;
+}
+
+@keyframes contextPopoverSlideUp {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+/* Popover Header */
+.ai-chat-context-popover__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--ai-chat-suggestion-border, #e5e7eb);
+}
+
+.ai-chat-context-popover__title {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--ai-chat-input-text, #1f2937);
+}
+
+.ai-chat-context-popover__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--ai-sidebar-text-muted, #9ca3af);
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.ai-chat-context-popover__close:hover {
+  background: var(--ai-chat-suggestion-bg, #f3f4f6);
+  color: var(--ai-chat-input-text, #1f2937);
+}
+
+/* Token Bar */
+.ai-chat-context-popover__token-bar {
+  padding: 10px 14px;
+  background: var(--ai-chat-suggestion-bg, #f9fafb);
+}
+
+.ai-chat-context-popover__token-info {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  margin-bottom: 6px;
+  font-size: 12px;
+}
+
+.ai-chat-context-popover__token-info > span:first-child {
+  font-weight: 600;
+  color: var(--ai-chat-input-text, #1f2937);
+}
+
+.ai-chat-context-popover__token-limit {
+  color: var(--ai-sidebar-text-muted, #9ca3af);
+}
+
+.ai-chat-context-popover__tokens--warning {
+  color: #f59e0b !important;
+}
+
+/* Progress Bar */
+.ai-chat-context-popover__progress {
+  height: 4px;
+  background: var(--ai-chat-suggestion-border, #e5e7eb);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.ai-chat-context-popover__progress-bar {
+  height: 100%;
+  background: #22c55e;
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.ai-chat-context-popover__progress-bar--warning {
+  background: #f59e0b;
+}
+
+/* Summary View */
+.ai-chat-context-popover__summary {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Section List */
+.ai-chat-context-popover__sections {
+  display: flex;
+  flex-direction: column;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.ai-chat-context-popover__section-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--ai-chat-suggestion-border, #f3f4f6);
+  transition: background 0.1s;
+}
+
+.ai-chat-context-popover__section-item:last-child {
+  border-bottom: none;
+}
+
+.ai-chat-context-popover__section-item--clickable {
+  cursor: pointer;
+}
+
+.ai-chat-context-popover__section-item--clickable:hover {
+  background: var(--ai-chat-suggestion-bg, #f9fafb);
+}
+
+.ai-chat-context-popover__section-icon {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.ai-chat-context-popover__section-title {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ai-chat-input-text, #1f2937);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ai-chat-context-popover__section-tokens {
+  font-size: 11px;
+  color: var(--ai-sidebar-text-muted, #9ca3af);
+  flex-shrink: 0;
+}
+
+/* Expand Button */
+.ai-chat-context-popover__expand-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 10px 14px;
+  background: transparent;
+  border: none;
+  border-top: 1px solid var(--ai-chat-suggestion-border, #e5e7eb);
+  color: var(--ai-button-primary-bg, #3b82f6);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.ai-chat-context-popover__expand-btn:hover {
+  background: var(--ai-chat-suggestion-bg, #f9fafb);
+}
+
+/* Detail View */
+.ai-chat-context-popover__detail {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: calc(100vh - 250px);
+  min-height: 300px;
+}
+
+.ai-chat-context-popover__back {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 8px;
+  margin-right: 8px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--ai-sidebar-text-muted, #6b7280);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.ai-chat-context-popover__back:hover {
+  background: var(--ai-chat-suggestion-bg, #f3f4f6);
+  color: var(--ai-chat-input-text, #1f2937);
+}
+
+/* Detail Sections */
+.ai-chat-context-popover__detail-sections {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  min-height: 0;
+}
+
+.ai-chat-context-popover__detail-section {
+  margin-bottom: 6px;
+  background: var(--ai-chat-suggestion-bg, #f9fafb);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.ai-chat-context-popover__detail-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  font-size: 13px;
+}
+
+.ai-chat-context-popover__detail-section-header::-webkit-details-marker {
+  display: none;
+}
+
+.ai-chat-context-popover__detail-section-title {
+  font-weight: 600;
+  color: var(--ai-chat-input-text, #1f2937);
+}
+
+.ai-chat-context-popover__detail-section-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--ai-sidebar-text-muted, #9ca3af);
+}
+
+.ai-chat-context-popover__detail-section-meta code {
+  background: var(--ai-chat-suggestion-hover-bg, #e5e7eb);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'SF Mono', monospace;
+  font-size: 10px;
+}
+
+/* Detail Content */
+.ai-chat-context-popover__detail-content {
+  margin: 0;
+  padding: 12px 14px;
+  background: var(--ai-chat-input-bg, #ffffff);
+  border-top: 1px solid var(--ai-chat-suggestion-border, #e5e7eb);
+  font-family: 'SF Mono', 'Monaco', 'Fira Code', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--ai-chat-input-text, #374151);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+/* Dark Theme */
+.dark-theme .ai-chat-context-pill {
+  background: var(--ai-chat-suggestion-bg, #374151);
+}
+
+.dark-theme .ai-chat-context-pill:hover,
+.dark-theme .ai-chat-context-pill--active {
+  background: var(--ai-chat-suggestion-hover-bg, #4b5563);
+}
+
+.dark-theme .ai-chat-context-popover {
+  background: var(--ai-chat-input-bg, #1f2937);
+  border-color: var(--ai-chat-input-border, #374151);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+}
+
+.dark-theme .ai-chat-context-popover__token-bar {
+  background: var(--ai-chat-suggestion-bg, #111827);
+}
+
+.dark-theme .ai-chat-context-popover__detail-content {
+  background: #111827;
+}
+
+/* Responsive */
+@container chat-panel (max-width: 380px) {
+  .ai-chat-context-pill__label {
+    font-size: 11px;
+  }
+  
+  .ai-chat-context-popover {
+    min-width: 260px;
+    left: auto;
+    right: 0;
+    transform: none;
+  }
+  
+  @keyframes contextPopoverSlideUp {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+