@agent-link/server 0.1.162 → 0.1.164

package/web/style.css

@@ -1,5012 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-/* Keyboard focus outlines (visible only for keyboard navigation) */
-:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-:focus:not(:focus-visible) {
-  outline: none;
-}
-
-:root {
-  --bg-primary: #1e1e1e;
-  --bg-secondary: #252525;
-  --bg-tertiary: #2f2f2f;
-  --text-primary: #d4d4d4;
-  --text-secondary: #858585;
-  --accent: #6b9fce;
-  --accent-hover: #5a8bba;
-  --success: #4ead6a;
-  --warning: #d4a24c;
-  --error: #d45454;
-  --border: #353535;
-  --code-bg: #1a1a1a;
-  --code-header-bg: #222222;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
-}
-
-/* ── Light theme ── */
-[data-theme="light"] {
-  --bg-primary: #fefcf8;
-  --bg-secondary: #f5f3ef;
-  --bg-tertiary: #e8e6e1;
-  --text-primary: #1a1a1a;
-  --text-secondary: #4b5563;
-  --accent: #2563eb;
-  --accent-hover: #1d4ed8;
-  --success: #16a34a;
-  --warning: #d97706;
-  --error: #dc2626;
-  --border: #d1d5db;
-  --code-bg: #f1f3f5;
-  --code-header-bg: #e9ecef;
-}
-
-html {
-  height: 100%;
-  height: 100dvh;
-}
-
-body {
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  height: 100%;
-}
-
-#app {
-  height: 100%;
-}
-
-/* ── Layout ── */
-.layout {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.top-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 1rem;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.top-bar-left {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.sidebar-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  background: none;
-  border: none;
-  border-radius: 4px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: color 0.15s, background 0.15s;
-}
-
-.sidebar-toggle:hover {
-  color: var(--text-primary);
-  background: var(--bg-tertiary);
-}
-
-.top-bar h1 {
-  font-size: 1.1rem;
-  font-weight: 700;
-}
-
-.top-bar-info {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.agent-label {
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-}
-
-.latency {
-  font-size: 0.75rem;
-  font-variant-numeric: tabular-nums;
-  opacity: 0.7;
-}
-.latency.good { color: var(--success); }
-.latency.ok { color: var(--warning); }
-.latency.bad { color: var(--error); }
-
-.theme-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  flex-shrink: 0;
-  background: none;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: color 0.15s, background 0.15s, border-color 0.15s;
-}
-
-.theme-toggle:hover {
-  color: var(--text-primary);
-  background: var(--bg-tertiary);
-  border-color: var(--text-secondary);
-}
-
-/* ── Center card (no session / waiting) ── */
-.center-card {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  min-height: 0;
-}
-
-.status-card {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 1.5rem 2rem;
-  min-width: 320px;
-  text-align: center;
-}
-
-.status-card .status {
-  font-size: 1.1rem;
-  margin-bottom: 0.75rem;
-}
-
-.status-card .info {
-  margin-bottom: 0.5rem;
-  font-size: 0.95rem;
-}
-
-.status-card .label {
-  color: var(--text-secondary);
-}
-
-/* ── Badges ── */
-.muted {
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-}
-
-.badge {
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-weight: 600;
-  font-size: 0.9rem;
-}
-
-.badge.connected {
-  color: var(--success);
-  background: rgba(78, 173, 106, 0.1);
-}
-
-.badge.disconnected {
-  color: var(--error);
-  background: rgba(212, 84, 84, 0.1);
-}
-
-.badge.connecting\.\.\. {
-  color: var(--warning);
-  background: rgba(212, 162, 76, 0.1);
-}
-
-.badge.reconnecting\.\.\. {
-  color: var(--warning);
-  background: rgba(212, 162, 76, 0.1);
-}
-
-.badge.waiting {
-  color: var(--warning);
-  background: rgba(212, 162, 76, 0.1);
-}
-
-.badge.error,
-.badge.no\ session {
-  color: var(--error);
-  background: rgba(212, 84, 84, 0.1);
-}
-
-.error-msg {
-  color: var(--error);
-  font-size: 0.85rem;
-  margin-top: 0.75rem;
-}
-
-/* ── Main body (sidebar + chat) ── */
-.main-body {
-  flex: 1;
-  display: flex;
-  min-height: 0;
-}
-
-/* ── Sidebar ── */
-.sidebar {
-  width: 260px;
-  flex-shrink: 0;
-  background: var(--bg-secondary);
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.sidebar-section {
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.sidebar-workdir {
-  position: relative;
-}
-
-.sidebar-hostname {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.85rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  margin-bottom: 10px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid var(--border);
-}
-
-.sidebar-hostname-icon {
-  flex-shrink: 0;
-  opacity: 0.6;
-}
-
-.sidebar-workdir-label {
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-secondary);
-  margin-bottom: 4px;
-}
-
-.sidebar-workdir-path {
-  font-size: 0.8rem;
-  color: var(--text-primary);
-  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.3;
-}
-
-/* ── Working Directory History ── */
-.workdir-history {
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px solid var(--border);
-}
-.workdir-history-label {
-  font-size: 0.65rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-secondary);
-  margin-bottom: 6px;
-  opacity: 0.7;
-}
-.workdir-history-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  max-height: 120px;
-  overflow-y: auto;
-}
-.workdir-history-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 6px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-.workdir-history-item:hover {
-  background: var(--bg-tertiary);
-}
-.workdir-history-path {
-  font-size: 0.72rem;
-  color: var(--text-secondary);
-  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-}
-.workdir-history-item:hover .workdir-history-path {
-  color: var(--text-primary);
-}
-.workdir-history-delete {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  background: none;
-  border: none;
-  border-radius: 3px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 0;
-  flex-shrink: 0;
-  transition: color 0.15s, background 0.15s;
-  visibility: hidden;
-}
-.workdir-history-item:hover .workdir-history-delete {
-  visibility: visible;
-}
-.workdir-history-delete:hover {
-  color: var(--error);
-  background: rgba(212, 84, 84, 0.1);
-}
-
-.sidebar-sessions {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
-}
-
-.sidebar-version-footer {
-  padding: 6px 12px;
-  font-size: 0.65rem;
-  color: var(--text-secondary);
-  opacity: 0.5;
-  text-align: center;
-  border-top: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.sidebar-version-sep {
-  margin: 0 3px;
-}
-
-.sidebar-section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-secondary);
-  margin-bottom: 4px;
-}
-
-.sidebar-refresh-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  background: none;
-  border: none;
-  border-radius: 4px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: color 0.15s;
-}
-
-.sidebar-refresh-btn:hover {
-  color: var(--text-primary);
-}
-
-.sidebar-refresh-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.sidebar-section-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.sidebar-collapse-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  background: none;
-  border: none;
-  border-radius: 4px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: color 0.15s;
-}
-
-.sidebar-collapse-btn:hover {
-  color: var(--text-primary);
-}
-
-.sidebar-collapse-btn svg {
-  transition: transform 0.2s ease;
-}
-
-.sidebar-collapse-btn svg.collapsed {
-  transform: rotate(-90deg);
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.spinning {
-  animation: spin 0.8s linear infinite;
-}
-
-.new-conversation-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 6px 8px;
-  background: none;
-  border: 1px dashed var(--border);
-  border-radius: 6px;
-  color: var(--text-secondary);
-  font-size: 0.82rem;
-  cursor: pointer;
-  transition: color 0.15s, border-color 0.15s, background 0.15s;
-  margin-bottom: 8px;
-}
-
-.new-conversation-btn:hover {
-  color: var(--text-primary);
-  border-color: var(--text-secondary);
-  background: var(--bg-tertiary);
-}
-
-.new-conversation-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.sidebar-loading,
-.sidebar-empty {
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  text-align: center;
-  padding: 1rem 0;
-}
-
-.session-list {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  min-height: 0;
-  overscroll-behavior: contain;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-height: 0;
-  overscroll-behavior: contain;
-}
-
-.session-group {
-  margin-bottom: 0.5rem;
-}
-
-.session-group-label {
-  font-size: 0.68rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-secondary);
-  padding: 0.4rem 8px 0.2rem;
-  opacity: 0.7;
-}
-
-.session-item {
-  padding: 8px 10px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background 0.15s, transform 0.1s;
-  border-left: 3px solid transparent;
-}
-
-.session-item:hover {
-  background: var(--bg-tertiary);
-}
-
-.session-item:active {
-  transform: scale(0.98);
-}
-
-.session-item.active {
-  background: var(--bg-tertiary);
-  border-left-color: var(--accent);
-}
-
-.session-title {
-  font-size: 0.82rem;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.3;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.session-team-icon {
-  flex-shrink: 0;
-  color: var(--accent);
-  opacity: 0.7;
-}
-
-/* Processing indicator: pulsing dot before session title */
-.session-item.processing .session-title::before {
-  content: '';
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--accent);
-  margin-right: 6px;
-  vertical-align: middle;
-  animation: pulse-dot 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse-dot {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
-}
-
-.session-meta {
-  font-size: 0.7rem;
-  color: var(--text-secondary);
-  margin-top: 2px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.session-actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  visibility: hidden;
-}
-
-.session-item:hover .session-actions {
-  visibility: visible;
-}
-
-.team-history-item:hover .session-actions {
-  visibility: visible;
-}
-
-.session-delete-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  background: none;
-  border: none;
-  border-radius: 4px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 0;
-  transition: color 0.15s, background 0.15s;
-}
-
-.session-delete-btn:hover {
-  color: var(--error);
-  background: rgba(212, 84, 84, 0.1);
-}
-
-/* ── Rename session (pencil icon + inline edit) ── */
-.session-rename-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  background: none;
-  border: none;
-  border-radius: 4px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 0;
-  transition: color 0.15s, background 0.15s;
-}
-
-.session-rename-btn:hover {
-  color: var(--accent);
-  background: rgba(107, 159, 206, 0.12);
-}
-
-.session-rename-row {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-  flex: 1;
-}
-
-.session-rename-input {
-  flex: 1;
-  min-width: 0;
-  background: var(--bg-primary);
-  border: 1px solid var(--accent);
-  border-radius: 4px;
-  color: var(--text-primary);
-  font-size: 0.82rem;
-  padding: 2px 6px;
-  outline: none;
-}
-
-.session-rename-ok,
-.session-rename-cancel {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  font-size: 0.9rem;
-  padding: 0 2px;
-  line-height: 1;
-}
-
-.session-rename-ok:hover { color: var(--accent); }
-.session-rename-cancel:hover { color: var(--error); }
-
-/* ── Delete confirmation dialog ── */
-.delete-confirm-dialog {
-  width: 360px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-}
-
-.delete-confirm-header {
-  padding: 12px 16px;
-  font-size: 0.95rem;
-  font-weight: 600;
-  border-bottom: 1px solid var(--border);
-}
-
-.delete-confirm-body {
-  padding: 16px;
-  font-size: 0.88rem;
-  line-height: 1.5;
-}
-
-.delete-confirm-body p {
-  margin-bottom: 6px;
-}
-
-.delete-confirm-title {
-  font-weight: 500;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 6px 10px;
-  background: var(--bg-tertiary);
-  border-radius: 6px;
-}
-
-.delete-confirm-warning {
-  font-size: 0.78rem;
-  color: var(--text-secondary);
-  margin-top: 4px;
-}
-
-.delete-confirm-footer {
-  padding: 10px 16px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  border-top: 1px solid var(--border);
-}
-
-.delete-confirm-btn {
-  padding: 6px 20px;
-  background: var(--error);
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  font-size: 0.85rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.delete-confirm-btn:hover {
-  background: #c04444;
-}
-
-/* ── Auth Dialog ── */
-.auth-dialog {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  width: 360px;
-  max-width: 90vw;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
-}
-
-.auth-dialog-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 20px 24px 16px;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.auth-dialog-header svg {
-  color: var(--accent);
-}
-
-.auth-dialog-locked .auth-dialog-header svg {
-  color: var(--error);
-}
-
-.auth-dialog-body {
-  padding: 0 24px 16px;
-}
-
-.auth-dialog-body p {
-  margin: 0 0 12px 0;
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-}
-
-.auth-password-input {
-  width: 100%;
-  padding: 10px 12px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text-primary);
-  font-size: 0.9rem;
-  outline: none;
-  box-sizing: border-box;
-  margin-bottom: 4px;
-}
-
-.auth-password-input:focus {
-  border-color: var(--accent);
-}
-
-.auth-error {
-  color: var(--error) !important;
-  font-size: 0.82rem !important;
-  margin-top: 8px !important;
-}
-
-.auth-attempts {
-  color: var(--text-secondary) !important;
-  font-size: 0.78rem !important;
-}
-
-.auth-locked-hint {
-  font-size: 0.78rem !important;
-  color: var(--text-secondary) !important;
-}
-
-.auth-dialog-footer {
-  padding: 12px 24px 20px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.auth-submit-btn {
-  background: var(--accent);
-  color: #fff;
-  border: none;
-  padding: 8px 24px;
-  border-radius: 8px;
-  font-size: 0.85rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.auth-submit-btn:hover:not(:disabled) {
-  background: var(--accent-hover);
-}
-
-.auth-submit-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-/* ── Chat area (message list + input) ── */
-.chat-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-/* ── Message list ── */
-.message-list {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  min-height: 0;
-  overscroll-behavior: contain;
-  padding: 1.5rem 1.5rem 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  min-height: 0;
-  overscroll-behavior: contain;
-}
-
-.message-list-inner {
-  max-width: 768px;
-  width: 100%;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.empty-state {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  color: var(--text-secondary);
-}
-
-.empty-state-icon {
-  font-size: 2.5rem;
-  opacity: 0.5;
-  margin-bottom: 0.5rem;
-}
-
-.empty-state strong {
-  color: var(--text-primary);
-}
-
-/* ── Messages ── */
-.message {
-  display: flex;
-  flex-direction: column;
-}
-
-.message-user {
-  margin-top: 1.25rem;
-}
-
-.message-role-label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  margin-bottom: 0.3rem;
-  padding-left: 0.1rem;
-}
-
-.message-role-label.user-label {
-  color: var(--text-secondary);
-}
-
-.message-role-label.assistant-label {
-  color: var(--accent);
-}
-
-.message-bubble {
-  padding: 0.6rem 0.9rem;
-  border-radius: 10px;
-  font-size: 0.94rem;
-  line-height: 1.6;
-  word-wrap: break-word;
-  position: relative;
-}
-
-.user-bubble {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-}
-
-/* ── Queue bar (pending messages above input) ── */
-.queue-bar {
-  max-width: 768px;
-  margin: 0 auto 6px;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.queue-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  background: var(--bg-secondary);
-  border: 1px dashed var(--border);
-  border-radius: 8px;
-  padding: 4px 8px;
-  font-size: 0.8rem;
-  line-height: 1.3;
-  color: var(--text-secondary);
-  opacity: 0.85;
-}
-
-.queue-item-num {
-  flex-shrink: 0;
-  font-weight: 600;
-  color: var(--text-secondary);
-  font-size: 0.7rem;
-  opacity: 0.6;
-}
-
-.queue-item-text {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.queue-item-attach {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  font-size: 0.7rem;
-  opacity: 0.6;
-}
-
-.queue-item-remove {
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  font-size: 1rem;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0 2px;
-  opacity: 0.5;
-  transition: color 0.15s, opacity 0.15s;
-}
-
-.queue-item-remove:hover {
-  opacity: 1;
-  color: var(--error);
-}
-
-.usage-bar {
-  max-width: 768px;
-  margin: 0 auto 6px;
-  padding: 4px 10px;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  text-align: center;
-  opacity: 0.7;
-}
-
-.assistant-bubble {
-  background: transparent;
-  padding: 0.2rem 0;
-}
-
-/* ── Message actions (copy button, shown on hover) ── */
-.message-actions {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  gap: 2px;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-.message-bubble:hover .message-actions {
-  opacity: 1;
-}
-
-.icon-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: color 0.15s;
-}
-
-.icon-btn:hover {
-  color: var(--text-primary);
-}
-
-/* ── Markdown body in assistant messages ── */
-.markdown-body {
-  line-height: 1.6;
-}
-
-.markdown-body p {
-  margin-bottom: 0.5em;
-}
-
-.markdown-body p:last-child {
-  margin-bottom: 0;
-}
-
-.markdown-body ul, .markdown-body ol {
-  padding-left: 1.5em;
-  margin-bottom: 0.5em;
-}
-
-.markdown-body li {
-  margin-bottom: 0.2em;
-}
-
-.markdown-body strong {
-  font-weight: 600;
-}
-
-.markdown-body code {
-  background: var(--bg-tertiary);
-  padding: 0.15em 0.35em;
-  border-radius: 3px;
-  font-size: 0.85em;
-  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
-}
-
-.markdown-body pre {
-  margin: 0.5em 0;
-  overflow-x: auto;
-}
-
-.markdown-body pre code {
-  background: none;
-  padding: 0;
-  border-radius: 0;
-  font-size: 0.85em;
-  display: block;
-  padding: 0.8em;
-}
-
-.markdown-body a {
-  color: #7aafe0;
-  text-decoration: none;
-}
-
-.markdown-body a:hover {
-  text-decoration: underline;
-}
-
-[data-theme="light"] .markdown-body a {
-  color: #2563eb;
-}
-
-.markdown-body blockquote {
-  border-left: 3px solid var(--border);
-  padding-left: 0.8em;
-  color: var(--text-secondary);
-  margin: 0.5em 0;
-}
-
-.markdown-body hr {
-  border: none;
-  border-top: 1px solid var(--border);
-  margin: 0.75em 0;
-}
-
-.markdown-body table {
-  border-collapse: collapse;
-  margin: 0.5em 0;
-  font-size: 0.88em;
-}
-
-.markdown-body th, .markdown-body td {
-  border: 1px solid var(--border);
-  padding: 0.4em 0.6em;
-}
-
-.markdown-body th {
-  background: var(--bg-tertiary);
-}
-
-/* ── Code block wrapper (with copy button) ── */
-.code-block-wrapper {
-  position: relative;
-  margin: 0.5em 0;
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--code-bg);
-}
-
-.code-block-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6px 12px;
-  background: var(--code-header-bg);
-}
-
-.code-lang {
-  font-size: 11px;
-  color: var(--text-secondary);
-  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
-}
-
-.code-copy-btn {
-  display: flex;
-  align-items: center;
-  padding: 2px 6px;
-  border: none;
-  border-radius: 3px;
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: color 0.15s;
-}
-
-.code-copy-btn:hover {
-  color: var(--text-primary);
-}
-
-.code-block-wrapper pre {
-  margin: 0;
-}
-
-.code-block-wrapper pre code {
-  padding: 0.8em 1em;
-}
-
-/* ── Tool use lines (collapsible, compact, subdued) ── */
-.tool-line-wrapper {
-  max-width: 100%;
-  padding-left: 0.25rem;
-  overflow: hidden;
-}
-
-.tool-line {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 6px;
-  border-radius: 4px;
-  font-size: 0.8rem;
-  cursor: pointer;
-  user-select: none;
-  transition: background 0.15s;
-  color: var(--text-secondary);
-  min-width: 0;
-  overflow: hidden;
-}
-
-.tool-line:hover {
-  background: var(--bg-tertiary);
-}
-
-.tool-icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  color: var(--text-secondary);
-  opacity: 0.6;
-}
-
-.tool-name {
-  font-weight: 500;
-  color: var(--text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-}
-
-.tool-summary {
-  color: var(--text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-}
-
-.tool-status-icon {
-  color: var(--text-secondary);
-  font-weight: normal;
-  flex-shrink: 0;
-  font-size: 0.75rem;
-  opacity: 0.7;
-}
-
-.tool-line.completed .tool-status-icon {
-  color: var(--success);
-  opacity: 0.6;
-}
-
-.running-dots {
-  display: inline-flex;
-  gap: 2px;
-}
-
-.running-dots span {
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background: var(--text-secondary);
-  animation: typing 1.2s infinite ease-in-out;
-}
-
-.running-dots span:nth-child(2) { animation-delay: 0.2s; }
-.running-dots span:nth-child(3) { animation-delay: 0.4s; }
-
-.tool-toggle {
-  color: var(--text-secondary);
-  font-size: 0.6rem;
-  flex-shrink: 0;
-  margin-left: auto;
-  opacity: 0.5;
-}
-
-.tool-expand {
-  margin-top: 2px;
-  margin-left: 20px;
-  border-left: 1px solid var(--border);
-  padding-left: 8px;
-  overflow: hidden;
-  animation: toolExpand 0.15s ease-out;
-}
-
-@keyframes toolExpand {
-  from { opacity: 0; max-height: 0; }
-  to { opacity: 1; max-height: 500px; }
-}
-
-.tool-block {
-  background: var(--bg-secondary);
-  border-radius: 4px;
-  padding: 0.4rem 0.6rem;
-  margin-top: 0.25rem;
-  overflow-x: auto;
-  font-size: 0.75rem;
-  line-height: 1.4;
-  max-height: 200px;
-  overflow-y: auto;
-  white-space: pre-wrap;
-  word-break: break-all;
-  color: var(--text-secondary);
-}
-
-.tool-output {
-  border-left: 2px solid var(--success);
-  color: var(--text-primary);
-}
-
-/* ── Formatted tool input (Read, Write, Bash, Glob, Grep) ── */
-.tool-input-formatted {
-  padding: 0.3rem 0.5rem;
-  margin-top: 0.25rem;
-  font-size: 0.75rem;
-  line-height: 1.5;
-  color: var(--text-secondary);
-  word-break: break-all;
-}
-
-.tool-input-meta {
-  color: var(--text-secondary);
-  opacity: 0.6;
-}
-
-.tool-input-cmd {
-  background: var(--bg-secondary);
-  padding: 0.1rem 0.4rem;
-  border-radius: 3px;
-  font-size: 0.73rem;
-  word-break: break-all;
-  white-space: pre-wrap;
-}
-
-/* ── TodoWrite checklist ── */
-.todo-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.todo-item {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  font-size: 0.75rem;
-  line-height: 1.4;
-  color: var(--text-secondary);
-}
-
-.todo-item.todo-done {
-  opacity: 0.55;
-}
-
-.todo-item.todo-active {
-  color: var(--text-primary);
-}
-
-.todo-icon {
-  flex-shrink: 0;
-  width: 1em;
-  text-align: center;
-  font-size: 0.7rem;
-  opacity: 0.5;
-}
-
-.todo-icon.done {
-  color: var(--success);
-  opacity: 0.8;
-}
-
-.todo-icon.active {
-  color: var(--accent);
-  opacity: 1;
-  font-size: 0.55rem;
-}
-
-.todo-text {
-  word-break: break-word;
-}
-
-/* ── Task / WebFetch formatted fields ── */
-.task-field {
-  font-size: 0.75rem;
-  line-height: 1.5;
-  color: var(--text-secondary);
-}
-
-.task-field + .task-field {
-  margin-top: 2px;
-}
-
-.task-prompt {
-  background: var(--bg-secondary);
-  border-radius: 3px;
-  padding: 0.3rem 0.5rem;
-  margin-top: 3px;
-  font-size: 0.73rem;
-  line-height: 1.4;
-  color: var(--text-secondary);
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 150px;
-  overflow-y: auto;
-}
-
-.tool-link {
-  color: var(--accent);
-  font-size: 0.75rem;
-  word-break: break-all;
-  text-decoration: none;
-}
-
-.tool-link:hover {
-  text-decoration: underline;
-}
-
-[data-theme="light"] .todo-icon.active {
-  color: #0969da;
-}
-
-[data-theme="light"] .tool-link {
-  color: #0969da;
-}
-
-/* ── Edit tool diff view ── */
-.tool-diff {
-  background: var(--bg-secondary);
-  border-radius: 4px;
-  padding: 0.4rem 0.6rem;
-  margin-top: 0.25rem;
-  overflow-x: auto;
-  font-size: 0.75rem;
-  line-height: 1.5;
-  max-height: 300px;
-  overflow-y: auto;
-  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
-}
-
-.diff-file {
-  color: var(--text-secondary);
-  margin-bottom: 0.35rem;
-  font-weight: 500;
-}
-
-.diff-replace-all {
-  opacity: 0.6;
-  font-weight: 400;
-}
-
-.diff-lines {
-  border-radius: 3px;
-  overflow: hidden;
-}
-
-.diff-removed, .diff-added {
-  white-space: pre-wrap;
-  word-break: break-all;
-  padding: 0 0.4rem;
-}
-
-.diff-removed {
-  background: rgba(212, 84, 84, 0.12);
-  color: #d4716b;
-}
-
-.diff-added {
-  background: rgba(78, 173, 106, 0.12);
-  color: #5cb87a;
-}
-
-.diff-sign {
-  display: inline-block;
-  width: 1.2em;
-  user-select: none;
-  opacity: 0.7;
-}
-
-[data-theme="light"] .diff-removed {
-  background: rgba(208, 46, 38, 0.12);
-  color: #b31d28;
-}
-
-[data-theme="light"] .diff-added {
-  background: rgba(34, 134, 58, 0.12);
-  color: #22863a;
-}
-
-/* ── Context summary (collapsible continuation notice) ── */
-.context-summary-wrapper {
-  margin: 0.75rem 0;
-}
-
-/* ── AskUserQuestion interactive card ── */
-.ask-question-wrapper {
-  max-width: 100%;
-  padding-left: 0.25rem;
-  margin: 0.5rem 0;
-}
-
-.ask-question-card {
-  background: var(--bg-secondary);
-  border: 1px solid var(--accent);
-  border-radius: 10px;
-  padding: 0.8rem 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.ask-question-block {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.ask-question-header {
-  font-size: 0.7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--accent);
-}
-
-.ask-question-text {
-  font-size: 0.9rem;
-  color: var(--text-primary);
-  line-height: 1.5;
-}
-
-.ask-question-options {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.ask-question-option {
-  padding: 8px 12px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: border-color 0.15s, background 0.15s;
-}
-
-.ask-question-option:hover {
-  border-color: var(--text-secondary);
-  background: var(--bg-tertiary);
-}
-
-.ask-question-option.selected {
-  border-color: var(--accent);
-  background: rgba(107, 159, 206, 0.12);
-}
-
-.ask-option-label {
-  font-size: 0.88rem;
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.ask-option-desc {
-  font-size: 0.78rem;
-  color: var(--text-secondary);
-  margin-top: 2px;
-  line-height: 1.4;
-}
-
-.ask-question-custom {
-  margin-top: 2px;
-}
-
-.ask-question-custom input {
-  width: 100%;
-  padding: 6px 10px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text-primary);
-  font-size: 0.85rem;
-  font-family: inherit;
-  outline: none;
-  transition: border-color 0.15s;
-}
-
-.ask-question-custom input::placeholder {
-  color: var(--text-secondary);
-}
-
-.ask-question-custom input:focus {
-  border-color: var(--accent);
-}
-
-.ask-question-actions {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.ask-question-submit {
-  padding: 6px 20px;
-  background: var(--accent);
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  font-size: 0.85rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.15s, opacity 0.15s;
-}
-
-.ask-question-submit:hover:not(:disabled) {
-  background: var(--accent-hover);
-}
-
-.ask-question-submit:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.ask-question-answered {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  font-size: 0.82rem;
-  color: var(--text-secondary);
-}
-
-.ask-answered-icon {
-  color: var(--success);
-  font-size: 0.8rem;
-}
-
-.ask-answered-text {
-  font-style: italic;
-}
-
-.context-summary-bar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  border-radius: 6px;
-  border: 1px dashed var(--border);
-  font-size: 0.78rem;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.context-summary-bar:hover {
-  background: var(--bg-tertiary);
-}
-
-.context-summary-icon {
-  flex-shrink: 0;
-  opacity: 0.5;
-}
-
-.context-summary-label {
-  flex: 1;
-}
-
-.context-summary-toggle {
-  font-size: 0.72rem;
-  opacity: 0.6;
-  flex-shrink: 0;
-}
-
-.context-summary-body {
-  margin-top: 6px;
-  padding: 0.6rem 0.8rem;
-  background: var(--bg-secondary);
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  font-size: 0.82rem;
-  color: var(--text-secondary);
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.context-summary-body .markdown-body {
-  font-size: 0.82rem;
-  color: var(--text-secondary);
-}
-
-/* ── System message ── */
-.system-msg {
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 0.8rem;
-  font-style: italic;
-  padding: 0.25rem 0;
-}
-
-.system-msg.command-output-msg {
-  text-align: left;
-  font-style: normal;
-  font-size: 0.85rem;
-  padding: 0.5rem 0;
-}
-
-.system-msg.error-msg {
-  text-align: left;
-  font-style: normal;
-  color: #d45454;
-  background: rgba(212, 84, 84, 0.08);
-  border: 1px solid rgba(212, 84, 84, 0.2);
-  border-radius: 8px;
-  padding: 0.75rem 1rem;
-  font-size: 0.85rem;
-  word-break: break-word;
-  overflow-wrap: break-word;
-}
-
-/* ── History loading indicator ── */
-.history-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 2rem 0;
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-}
-
-.history-loading-spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-/* ── Load more button ── */
-.load-more-wrapper {
-  display: flex;
-  justify-content: center;
-  padding: 0.75rem 0;
-}
-
-.load-more-btn {
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 0.4rem 1.2rem;
-  font-size: 0.8rem;
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-
-.load-more-btn:hover {
-  background: var(--accent);
-  color: #fff;
-  border-color: var(--accent);
-}
-
-/* ── Typing indicator ── */
-.typing-indicator {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0.5rem 0.9rem;
-}
-
-.typing-indicator span {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--text-secondary);
-  animation: typing 1.2s infinite ease-in-out;
-}
-
-.typing-indicator span:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.typing-indicator span:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes typing {
-  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
-  30% { opacity: 1; transform: scale(1); }
-}
-
-/* ── Context compaction inline message ── */
-.compact-msg {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--warning) !important;
-  font-style: normal !important;
-  font-weight: 500;
-}
-
-.compact-inline-spinner {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border: 2px solid rgba(212, 162, 76, 0.3);
-  border-top-color: var(--warning);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-  flex-shrink: 0;
-}
-
-.compact-done-icon {
-  color: var(--success, #4ead6a);
-  font-weight: 700;
-  font-style: normal;
-}
-
-/* ── Input area ── */
-.input-area {
-  flex-shrink: 0;
-  padding: 0 1.5rem 1rem;
-  background: transparent;
-  position: relative;
-}
-
-.input-card {
-  max-width: 768px;
-  margin: 0 auto;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  padding: 0.5rem;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.input-card:focus-within {
-  border-color: var(--accent);
-  box-shadow: 0 2px 16px rgba(107, 159, 206, 0.1);
-}
-
-.input-card textarea {
-  width: 100%;
-  background: transparent;
-  border: none;
-  color: var(--text-primary);
-  padding: 0.4rem 0.6rem;
-  font-family: inherit;
-  font-size: 16px; /* >=16px prevents iOS auto-zoom on focus */
-  resize: none;
-  outline: none;
-  line-height: 1.5;
-  max-height: 160px;
-  overflow-y: auto;
-}
-
-.input-card textarea::placeholder {
-  color: var(--text-secondary);
-}
-
-.input-bottom-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.1rem 0.25rem 0;
-}
-
-.send-btn {
-  background: var(--accent);
-  color: #fff;
-  border: none;
-  border-radius: 10px;
-  width: 32px;
-  height: 32px;
-  font-size: 0.9rem;
-  font-weight: 600;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.15s, opacity 0.15s;
-}
-
-.send-btn:hover:not(:disabled) {
-  background: var(--accent-hover);
-}
-
-.send-btn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-/* ── Stop button ── */
-.stop-btn {
-  background: var(--error);
-}
-
-.stop-btn:hover {
-  background: #c04444;
-}
-
-/* ── Streaming cursor ── */
-.assistant-bubble.streaming .markdown-body > *:last-child::after,
-.assistant-bubble.streaming .message-content:not(.markdown-body)::after {
-  content: '';
-  display: inline-block;
-  width: 2px;
-  height: 1em;
-  background: var(--accent);
-  margin-left: 2px;
-  vertical-align: text-bottom;
-  animation: blink-cursor 0.8s steps(2) infinite;
-}
-
-@keyframes blink-cursor {
-  0% { opacity: 1; }
-  50% { opacity: 0; }
-}
-
-/* ── Sidebar change-dir button ── */
-.sidebar-workdir-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-/* ── Workdir path row (clickable) ── */
-.sidebar-workdir-path-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 4px;
-  cursor: pointer;
-  padding: 4px 6px;
-  margin: 0 -6px;
-  border-radius: 4px;
-  transition: background 0.15s;
-}
-
-.sidebar-workdir-path-row:hover {
-  background: var(--bg-tertiary);
-}
-
-.sidebar-workdir-path-row .sidebar-workdir-path {
-  flex: 1;
-  min-width: 0;
-}
-
-.sidebar-workdir-chevron {
-  flex-shrink: 0;
-  margin-top: 2px;
-  color: var(--text-secondary);
-  transition: transform 0.15s ease;
-}
-
-.sidebar-workdir-chevron.open {
-  transform: rotate(180deg);
-}
-
-/* ── Workdir dropdown menu ── */
-.workdir-menu {
-  position: absolute;
-  left: -6px;
-  right: -6px;
-  z-index: 50;
-  margin-top: 4px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 4px 0;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
-}
-
-.workdir-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 7px 12px;
-  font-size: 0.8rem;
-  cursor: pointer;
-  color: var(--text-primary);
-}
-
-.workdir-menu-item:hover {
-  background: var(--bg-tertiary);
-}
-
-.workdir-menu-item svg {
-  flex-shrink: 0;
-  color: var(--text-secondary);
-}
-
-/* ── Workdir switching overlay ── */
-.workdir-switching-overlay {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(0, 0, 0, 0.45);
-  z-index: 1100;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  backdrop-filter: blur(2px);
-}
-.workdir-switching-spinner {
-  width: 36px;
-  height: 36px;
-  border: 3px solid rgba(255, 255, 255, 0.2);
-  border-top-color: rgba(255, 255, 255, 0.8);
-  border-radius: 50%;
-  animation: workdir-spin 0.7s linear infinite;
-}
-@keyframes workdir-spin {
-  to { transform: rotate(360deg); }
-}
-.workdir-switching-text {
-  color: rgba(255, 255, 255, 0.9);
-  font-size: 0.9rem;
-  font-weight: 500;
-}
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-}
-
-/* ── Folder Picker Modal ── */
-.folder-picker-overlay {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.folder-picker-dialog {
-  width: 440px;
-  height: 520px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-}
-
-.folder-picker-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  font-size: 0.95rem;
-  font-weight: 600;
-  border-bottom: 1px solid var(--border);
-}
-
-.folder-picker-close {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  font-size: 1.2rem;
-  cursor: pointer;
-  padding: 0 4px;
-  line-height: 1;
-}
-
-.folder-picker-close:hover {
-  color: var(--text-primary);
-}
-
-.folder-picker-nav {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  font-size: 0.78rem;
-  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border);
-}
-
-.folder-picker-up {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  background: none;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: color 0.15s, background 0.15s;
-}
-
-.folder-picker-up:hover {
-  color: var(--text-primary);
-  background: var(--bg-tertiary);
-}
-
-.folder-picker-up:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.folder-picker-current {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-}
-
-.folder-picker-path-input {
-  flex: 1;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 4px 8px;
-  font-size: 0.85rem;
-  font-family: monospace;
-  outline: none;
-}
-
-.folder-picker-path-input:focus {
-  border-color: var(--accent);
-}
-
-.folder-picker-list {
-  flex: 1;
-  overflow-y: auto;
-  min-height: 200px;
-  max-height: 350px;
-  padding: 4px 0;
-}
-
-.folder-picker-loading {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 16px;
-  color: var(--text-secondary);
-  font-size: 0.82rem;
-}
-
-.folder-picker-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 16px;
-  font-size: 0.85rem;
-  cursor: pointer;
-  color: var(--text-primary);
-  transition: background 0.1s;
-  user-select: none;
-}
-
-.folder-picker-item:hover {
-  background: var(--bg-tertiary);
-}
-
-.folder-picker-item svg {
-  flex-shrink: 0;
-  color: var(--text-secondary);
-}
-
-.folder-picker-selected {
-  background: var(--accent) !important;
-  color: #fff !important;
-}
-
-.folder-picker-selected svg {
-  color: #fff !important;
-}
-
-.folder-picker-empty {
-  text-align: center;
-  padding: 2rem;
-  color: var(--text-secondary);
-  font-size: 0.82rem;
-}
-
-.folder-picker-footer {
-  padding: 10px 16px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  border-top: 1px solid var(--border);
-}
-
-.folder-picker-cancel {
-  padding: 6px 16px;
-  background: none;
-  color: var(--text-secondary);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: color 0.15s, background 0.15s;
-}
-
-.folder-picker-cancel:hover {
-  color: var(--text-primary);
-  background: var(--bg-tertiary);
-}
-
-.folder-picker-confirm {
-  padding: 6px 20px;
-  background: var(--accent);
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  font-size: 0.85rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.folder-picker-confirm:hover {
-  background: var(--accent-hover);
-}
-
-.folder-picker-confirm:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-/* ── File Upload: Attachment Bar ── */
-.attachment-bar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 6px 8px;
-  border-top: 1px solid var(--border);
-}
-
-.attachment-chip {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 4px 8px;
-  font-size: 0.78rem;
-  color: var(--text-primary);
-  max-width: 220px;
-}
-
-.attachment-thumb {
-  width: 28px;
-  height: 28px;
-  object-fit: cover;
-  border-radius: 4px;
-  flex-shrink: 0;
-}
-
-.attachment-file-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: var(--bg-secondary);
-  border-radius: 4px;
-  flex-shrink: 0;
-  color: var(--text-secondary);
-}
-
-.attachment-info {
-  overflow: hidden;
-  min-width: 0;
-}
-
-.attachment-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 500;
-}
-
-.attachment-size {
-  color: var(--text-secondary);
-  font-size: 0.7rem;
-}
-
-.attachment-remove {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 0 2px;
-  font-size: 1rem;
-  line-height: 1;
-  flex-shrink: 0;
-  transition: color 0.15s;
-}
-
-.attachment-remove:hover {
-  color: var(--error);
-}
-
-/* ── Paperclip attach button ── */
-.attach-btn {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  transition: color 0.15s, background 0.15s;
-}
-
-.attach-btn:hover {
-  color: var(--text-primary);
-  background: var(--bg-tertiary);
-}
-
-.attach-btn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-/* ── Drag-over highlight on input card ── */
-.input-card.drag-over {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px var(--accent), 0 2px 12px rgba(107, 159, 206, 0.12);
-}
-
-/* ── Attachments displayed in sent messages ── */
-.message-attachments {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 6px;
-}
-
-.message-attachment-chip {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 3px 8px;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-
-.message-attachment-thumb {
-  width: 20px;
-  height: 20px;
-  object-fit: cover;
-  border-radius: 3px;
-}
-
-.message-attachment-file-icon {
-  display: flex;
-  align-items: center;
-  color: var(--text-secondary);
-}
-
-/* ── Sidebar backdrop (mobile overlay) ── */
-.sidebar-backdrop {
-  display: none;
-}
-
-/* ══════════════════════════════════════════
-   File Browser Panel
-   ══════════════════════════════════════════ */
-.file-panel {
-  width: 280px;
-  flex-shrink: 0;
-  background: var(--bg-primary);
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  position: relative;
-}
-
-.file-panel-resize-handle {
-  position: absolute;
-  top: 0;
-  right: -3px;
-  width: 6px;
-  height: 100%;
-  cursor: col-resize;
-  z-index: 10;
-  background: transparent;
-  transition: background 0.15s;
-}
-
-.file-panel-resize-handle:hover,
-.file-panel-resize-handle:active {
-  background: var(--accent);
-  opacity: 0.4;
-}
-
-.file-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-primary);
-  flex-shrink: 0;
-}
-
-.file-panel-title {
-  font-size: 0.8rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-secondary);
-}
-
-.file-panel-actions {
-  display: flex;
-  gap: 4px;
-}
-
-.file-panel-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  background: none;
-  border: none;
-  border-radius: 4px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 0;
-}
-
-.file-panel-btn:hover {
-  color: var(--text-primary);
-  background: var(--bg-tertiary);
-}
-
-.file-panel-breadcrumb {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.75rem;
-  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-shrink: 0;
-}
-
-.file-tree {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 0.25rem 0;
-}
-
-.file-tree-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 8px;
-  font-size: 0.8rem;
-  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
-  color: var(--text-primary);
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.file-tree-item:hover {
-  background: var(--bg-tertiary);
-}
-
-.file-tree-arrow {
-  flex-shrink: 0;
-  width: 14px;
-  text-align: center;
-  font-size: 0.65rem;
-  color: var(--text-secondary);
-  transition: transform 0.15s ease;
-  display: inline-block;
-}
-
-.file-tree-arrow.expanded {
-  transform: rotate(90deg);
-}
-
-.file-tree-file-icon {
-  flex-shrink: 0;
-  width: 14px;
-  text-align: center;
-  color: var(--text-secondary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.file-tree-name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.file-tree-spinner {
-  width: 12px;
-  height: 12px;
-  border: 2px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.file-tree-empty {
-  padding: 4px 8px;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  font-style: italic;
-}
-
-.file-tree-error {
-  padding: 4px 8px;
-  font-size: 0.75rem;
-  color: var(--error, #e74c3c);
-}
-
-.file-panel-loading {
-  padding: 1rem;
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-}
-
-.file-panel-empty {
-  padding: 1rem;
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-}
-
-/* ── File Context Menu ── */
-.file-context-menu {
-  position: fixed;
-  z-index: 200;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  padding: 4px 0;
-  min-width: 200px;
-}
-
-.file-context-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  font-size: 0.8rem;
-  cursor: pointer;
-  color: var(--text-primary);
-}
-
-.file-context-item:hover {
-  background: var(--bg-tertiary);
-}
-
-.file-context-item svg {
-  flex-shrink: 0;
-  color: var(--text-secondary);
-}
-
-/* ── File panel transition (Vue <Transition>) ── */
-.file-panel-enter-active,
-.file-panel-leave-active {
-  transition: width 0.2s ease, opacity 0.15s ease;
-  overflow: hidden;
-}
-.file-panel-enter-from,
-.file-panel-leave-to {
-  width: 0 !important;
-  opacity: 0;
-}
-
-/* ── Mobile file browser in sidebar ── */
-.file-panel-mobile {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.file-panel-mobile-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.file-panel-mobile-back {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  background: none;
-  border: none;
-  color: var(--accent);
-  cursor: pointer;
-  font-size: 0.85rem;
-  padding: 4px 0;
-}
-
-.file-panel-mobile-back:hover {
-  opacity: 0.8;
-}
-
-/* ══════════════════════════════════════════
-   File Preview Panel
-   ══════════════════════════════════════════ */
-.preview-panel {
-  width: 400px;
-  flex-shrink: 0;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border-left: 1px solid var(--border);
-  background: var(--bg);
-}
-
-.preview-panel-resize-handle {
-  position: absolute;
-  top: 0;
-  left: -3px;
-  width: 6px;
-  height: 100%;
-  cursor: col-resize;
-  z-index: 10;
-  background: transparent;
-  transition: background 0.15s;
-}
-
-.preview-panel-resize-handle:hover,
-.preview-panel-resize-handle:active {
-  background: var(--accent);
-  opacity: 0.4;
-}
-
-.preview-panel-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-primary);
-  flex-shrink: 0;
-}
-
-.preview-panel-filename {
-  flex: 1;
-  font-weight: 600;
-  font-size: 0.85rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.preview-panel-size {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  flex-shrink: 0;
-}
-
-.preview-panel-close {
-  background: none;
-  border: none;
-  font-size: 1.2rem;
-  cursor: pointer;
-  color: var(--text-secondary);
-  padding: 0 0.25rem;
-  line-height: 1;
-}
-
-.preview-panel-close:hover {
-  color: var(--text);
-}
-
-.preview-md-toggle {
-  background: none;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--text-secondary);
-  padding: 2px 6px;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.preview-md-toggle:hover {
-  color: var(--text);
-  border-color: var(--text-secondary);
-}
-
-.preview-md-toggle.active {
-  color: var(--accent, #6366f1);
-  border-color: var(--accent, #6366f1);
-  background: color-mix(in srgb, var(--accent, #6366f1) 10%, transparent);
-}
-
-.preview-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.preview-markdown-rendered {
-  padding: 1rem;
-}
-
-.preview-panel-body {
-  flex: 1;
-  overflow: auto;
-  padding: 0;
-}
-
-.preview-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-}
-
-.preview-error {
-  padding: 1rem;
-  color: var(--error, #ef4444);
-  font-size: 0.85rem;
-}
-
-.preview-text-container {
-  overflow: auto;
-  height: 100%;
-}
-
-.preview-code {
-  margin: 0;
-  padding: 0.75rem;
-  font-size: 0.8rem;
-  line-height: 1.5;
-  white-space: pre;
-  overflow-x: auto;
-  background: var(--bg);
-  font-family: var(--font-mono, 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace);
-}
-
-.preview-code code {
-  font-family: inherit;
-}
-
-.preview-image-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  height: 100%;
-}
-
-.preview-image {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-}
-
-.preview-truncated-notice {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  border-top: 1px solid var(--border);
-  background: var(--bg-secondary, var(--bg-primary));
-  text-align: center;
-}
-
-.preview-binary-info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  gap: 0.5rem;
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-}
-
-.preview-binary-icon {
-  opacity: 0.4;
-  margin-bottom: 0.5rem;
-}
-
-.preview-binary-meta {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-
-/* ── Mobile file preview in sidebar ── */
-.file-preview-mobile {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.file-preview-mobile-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.file-preview-mobile-size {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-
-.file-preview-mobile-filename {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--text);
-  border-bottom: 1px solid var(--border);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-shrink: 0;
-}
-
-.file-preview-mobile .preview-panel-body {
-  flex: 1;
-  overflow: auto;
-}
-
-/* ══════════════════════════════════════════
-   Medium screens — file panel narrower
-   ══════════════════════════════════════════ */
-@media (max-width: 1200px) and (min-width: 769px) {
-  .file-panel {
-    max-width: clamp(200px, 20vw, 280px);
-  }
-  .preview-panel {
-    max-width: min(400px, 40vw);
-  }
-}
-
-/* ══════════════════════════════════════════
-   Team Mode
-   ══════════════════════════════════════════ */
-
-/* ── Team mode toggle ── */
-.team-mode-toggle {
-  display: flex;
-  gap: 2px;
-  background: var(--bg-tertiary);
-  border-radius: 6px;
-  padding: 2px;
-  margin-left: 8px;
-}
-
-.team-mode-btn {
-  padding: 4px 14px;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: var(--text-secondary);
-  font-size: 0.75rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.team-mode-btn.active {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-}
-
-.team-mode-btn:hover:not(.active) {
-  color: var(--text-primary);
-}
-
-.team-mode-select {
-  display: none;
-  padding: 4px 8px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-  font-size: 0.75rem;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-/* ── Team create panel ── */
-.team-create-panel {
-  flex: 1;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 2rem;
-  overflow-y: auto;
-}
-
-.team-create-inner {
-  max-width: 560px;
-  width: 100%;
-}
-
-.team-create-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 8px;
-  color: var(--text-primary);
-}
-
-.team-create-header h2 {
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-.team-create-desc {
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  margin-bottom: 16px;
-  line-height: 1.4;
-}
-
-/* ── Template selector ── */
-.team-tpl-section {
-  margin-bottom: 14px;
-}
-.team-tpl-label {
-  display: block;
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-  margin-bottom: 6px;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-.team-tpl-select {
-  width: 100%;
-  padding: 8px 10px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-size: 0.9rem;
-  font-family: inherit;
-  cursor: pointer;
-  appearance: auto;
-}
-.team-tpl-select:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-.team-tpl-desc {
-  display: block;
-  font-size: 0.78rem;
-  color: var(--text-secondary);
-  margin-top: 4px;
-}
-
-/* ── Collapsible lead prompt ── */
-.team-lead-prompt-section {
-  margin-bottom: 14px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  overflow: hidden;
-}
-.team-lead-prompt-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 10px;
-  cursor: pointer;
-  user-select: none;
-  background: var(--bg-secondary);
-}
-.team-lead-prompt-header:hover {
-  background: var(--bg-hover);
-}
-.team-lead-prompt-arrow {
-  transition: transform 0.15s;
-  flex-shrink: 0;
-  color: var(--text-secondary);
-}
-.team-lead-prompt-arrow.expanded {
-  transform: rotate(90deg);
-}
-.team-lead-prompt-title {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  flex-shrink: 0;
-}
-.team-lead-prompt-preview {
-  font-size: 0.78rem;
-  color: var(--text-tertiary, #666);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-left: 8px;
-}
-.team-lead-prompt-body {
-  padding: 8px 10px;
-  border-top: 1px solid var(--border);
-}
-.team-lead-prompt-textarea {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  font-size: 0.82rem;
-  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-  resize: vertical;
-  min-height: 160px;
-  line-height: 1.5;
-}
-.team-lead-prompt-textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-.team-lead-prompt-actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 6px;
-}
-.team-lead-prompt-reset {
-  padding: 4px 12px;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: 0.78rem;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-.team-lead-prompt-reset:hover {
-  color: var(--text-primary);
-  border-color: var(--text-secondary);
-}
-
-.team-create-textarea {
-  width: 100%;
-  padding: 12px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-size: 0.9rem;
-  font-family: inherit;
-  resize: vertical;
-  min-height: 100px;
-  line-height: 1.4;
-}
-
-.team-create-textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.team-create-actions {
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.team-create-launch {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 18px;
-  border: none;
-  border-radius: 6px;
-  background: var(--accent);
-  color: #fff;
-  font-size: 0.85rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.team-create-launch:hover:not(:disabled) {
-  background: var(--accent-hover);
-}
-
-.team-create-launch:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.team-create-cancel {
-  padding: 8px 18px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: none;
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.team-create-cancel:hover {
-  color: var(--text-primary);
-  border-color: var(--text-secondary);
-}
-
-/* ── Example instructions ── */
-.team-examples-section {
-  margin-top: 20px;
-}
-
-.team-examples-header {
-  font-size: 0.78rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  margin-bottom: 8px;
-}
-
-.team-examples-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.team-example-card {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 14px 16px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  transition: all 0.15s;
-  background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 100%);
-}
-
-.team-example-card:hover {
-  border-color: rgba(59,130,246,0.3);
-  background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(59,130,246,0.02) 100%);
-}
-
-.team-example-icon {
-  flex-shrink: 0;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  background: rgba(59,130,246,0.1);
-  color: var(--accent);
-  margin-top: 1px;
-}
-
-.team-example-card:nth-child(2) .team-example-icon {
-  background: rgba(16,185,129,0.1);
-  color: #10B981;
-}
-
-.team-example-card:nth-child(3) .team-example-icon {
-  background: rgba(139,92,246,0.1);
-  color: #8B5CF6;
-}
-
-.team-example-body {
-  flex: 1;
-  min-width: 0;
-}
-
-.team-example-title {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 4px;
-}
-
-.team-example-text {
-  font-size: 0.74rem;
-  color: var(--text-secondary);
-  line-height: 1.5;
-}
-
-.team-example-try {
-  flex-shrink: 0;
-  align-self: center;
-  padding: 6px 16px;
-  font-size: 0.74rem;
-  font-weight: 500;
-  color: var(--accent);
-  background: transparent;
-  border: 1px solid var(--accent);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.15s;
-  white-space: nowrap;
-}
-
-.team-example-try:hover {
-  background: var(--accent);
-  color: #fff;
-}
-
-/* ── Historical teams in create panel ── */
-.team-history-section {
-  margin-top: 20px;
-  border-top: 1px solid var(--border);
-  padding-top: 16px;
-}
-
-.team-history-section-header {
-  font-size: 0.8rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-}
-
-.team-history-section .team-history-list {
-  max-height: 200px;
-  overflow-y: auto;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg-secondary);
-}
-
-/* ── Team dashboard ── */
-.team-dashboard {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.team-dash-header {
-  display: flex;
-  flex-direction: column;
-  padding: 12px 20px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-  gap: 8px;
-}
-
-.team-dash-header-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.team-dash-header-left {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.team-dash-instruction {
-  position: relative;
-}
-
-.team-dash-instruction-text {
-  font-size: 0.92rem;
-  line-height: 1.5;
-  color: var(--text);
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-}
-
-.team-dash-instruction.expanded .team-dash-instruction-text {
-  -webkit-line-clamp: unset;
-  display: block;
-}
-
-.team-dash-instruction-toggle {
-  background: none;
-  border: none;
-  color: var(--accent);
-  cursor: pointer;
-  font-size: 0.78rem;
-  padding: 2px 0;
-  margin-top: 2px;
-}
-
-.team-dash-instruction-toggle:hover {
-  text-decoration: underline;
-}
-
-.team-status-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-size: 0.7rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-.team-status-planning {
-  background: rgba(234,179,8,0.15);
-  color: #eab308;
-}
-
-.team-status-running {
-  background: rgba(59,130,246,0.15);
-  color: #3b82f6;
-}
-
-.team-status-summarizing {
-  background: rgba(139,92,246,0.15);
-  color: #8b5cf6;
-}
-
-.team-status-completed {
-  background: rgba(16,185,129,0.15);
-  color: #10b981;
-}
-
-.team-status-failed {
-  background: rgba(239,68,68,0.15);
-  color: #ef4444;
-}
-
-.team-dash-header-right {
-  display: flex;
-  gap: 8px;
-}
-
-.team-dissolve-btn {
-  padding: 5px 12px;
-  border: 1px solid var(--error);
-  border-radius: 5px;
-  background: none;
-  color: var(--error);
-  font-size: 0.8rem;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.team-dissolve-btn:hover {
-  background: rgba(212,84,84,0.1);
-}
-
-.team-back-btn {
-  padding: 5px 12px;
-  border: 1px solid var(--border);
-  border-radius: 5px;
-  background: none;
-  color: var(--text-secondary);
-  font-size: 0.8rem;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.team-back-btn:hover {
-  color: var(--text-primary);
-  border-color: var(--text-secondary);
-}
-
-.team-new-btn {
-  padding: 5px 12px;
-  border: 1px solid var(--accent);
-  border-radius: 5px;
-  background: none;
-  color: var(--accent);
-  font-size: 0.8rem;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.team-new-btn:hover {
-  background: rgba(59,130,246,0.1);
-}
-
-/* ── Lead status bar ── */
-.team-lead-bar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border);
-  font-size: 0.8rem;
-  flex-shrink: 0;
-}
-.team-lead-bar-clickable {
-  cursor: pointer;
-  transition: background 0.15s;
-}
-.team-lead-bar-clickable:hover {
-  background: var(--bg-hover);
-}
-
-.team-lead-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--accent);
-  flex-shrink: 0;
-  animation: agent-pulse 1.5s ease-in-out infinite;
-}
-
-.team-lead-label {
-  font-weight: 600;
-  color: var(--accent);
-  text-transform: uppercase;
-  font-size: 0.7rem;
-  letter-spacing: 0.03em;
-}
-
-.team-lead-text {
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ── Dashboard body ── */
-.team-dash-body {
-  flex: 1;
-  display: flex;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.team-dash-main {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-/* ── Kanban board ── */
-.team-kanban-section {
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-secondary);
-  flex-shrink: 0;
-}
-
-.team-kanban-section-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  cursor: pointer;
-  user-select: none;
-  font-size: 0.8rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--text-secondary);
-  transition: background 0.15s;
-}
-.team-kanban-section-header:hover {
-  background: var(--bg-tertiary);
-}
-.team-kanban-section-toggle {
-  font-size: 0.65rem;
-  color: var(--text-secondary);
-}
-.team-kanban-section-summary {
-  margin-left: auto;
-  font-size: 0.72rem;
-  font-weight: 400;
-  color: var(--text-secondary);
-  opacity: 0.8;
-}
-
-.team-kanban {
-  display: flex;
-  gap: 12px;
-  min-height: 0;
-  flex-shrink: 0;
-  padding: 0 8px 8px;
-}
-
-.team-kanban-col {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-secondary);
-  border-radius: 8px;
-  border: 1px solid var(--border);
-}
-
-.team-kanban-col-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 10px 12px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border);
-}
-
-.team-kanban-col-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.team-kanban-col-dot.pending { background: var(--text-secondary); }
-.team-kanban-col-dot.active { background: var(--accent); }
-.team-kanban-col-dot.done { background: var(--success); }
-.team-kanban-col-dot.failed { background: var(--error); }
-
-.team-kanban-col-count {
-  margin-left: auto;
-  background: var(--bg-tertiary);
-  padding: 1px 6px;
-  border-radius: 8px;
-  font-size: 0.7rem;
-}
-
-.team-kanban-col-body {
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  overflow-y: auto;
-  max-height: 160px;
-}
-
-.team-kanban-empty {
-  padding: 12px;
-  text-align: center;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  opacity: 0.6;
-}
-
-/* ── Task cards ── */
-.team-task-card {
-  padding: 10px 12px;
-  border-radius: 6px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border);
-  transition: border-color 0.15s;
-}
-
-.team-task-card.active {
-  border-left: 3px solid var(--accent);
-}
-
-.team-task-card.done {
-  opacity: 0.8;
-}
-
-.team-task-card.failed {
-  border-left: 3px solid var(--error);
-}
-
-.team-task-title {
-  font-size: 0.85rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  line-height: 1.3;
-}
-
-.team-task-desc {
-  font-size: 0.78rem;
-  color: var(--text-secondary);
-  margin-top: 4px;
-  line-height: 1.3;
-}
-
-.team-task-desc-clamp {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  cursor: pointer;
-}
-.team-task-desc-clamp:hover {
-  color: var(--text-primary);
-}
-.team-task-desc-expanded {
-  -webkit-line-clamp: unset;
-  overflow: visible;
-}
-
-.team-task-assignee {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: 6px;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-
-/* ── Agent dot ── */
-.team-agent-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  display: inline-block;
-}
-
-.team-agent-dot.working {
-  animation: agent-pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes agent-pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.5; transform: scale(1.3); }
-}
-
-/* ── Activity feed ── */
-.team-feed {
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-secondary);
-}
-
-.team-feed-header {
-  padding: 10px 12px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border);
-}
-
-.team-feed-list {
-  max-height: 250px;
-  overflow-y: auto;
-  padding: 8px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.team-feed-entry {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  font-size: 0.8rem;
-  line-height: 1.4;
-  padding: 2px 0;
-}
-
-.team-feed-time {
-  flex-shrink: 0;
-  font-size: 0.7rem;
-  color: var(--text-secondary);
-  opacity: 0.7;
-  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
-}
-
-.team-feed-text {
-  color: var(--text-primary);
-}
-
-.team-feed-agent-name {
-  font-weight: 600;
-}
-
-.sidebar-section-collapsible {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-/* ── Teams sidebar section (history list in sidebar) ── */
-.sidebar-teams {
-  padding: 0.5rem 0.75rem;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-/* ── Loops sidebar section ── */
-.sidebar-loops {
-  padding: 0.5rem 0.75rem;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.loop-history-list {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.team-history-list {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.team-history-item {
-  display: flex;
-  align-items: center;
-  padding: 8px 10px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background 0.15s;
-  border-left: 3px solid transparent;
-}
-
-.team-history-item:hover {
-  background: var(--bg-tertiary);
-}
-
-.team-history-item.active {
-  background: var(--bg-tertiary);
-  border-left-color: var(--accent);
-}
-
-.team-history-info {
-  min-width: 0;
-  flex: 1;
-}
-
-.team-history-title {
-  font-size: 0.82rem;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.3;
-}
-
-.team-history-meta {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 2px 6px;
-  margin-top: 2px;
-  font-size: 0.7rem;
-  color: var(--text-secondary);
-}
-
-.team-history-tasks {
-  color: var(--text-secondary);
-  white-space: nowrap;
-}
-
-.team-status-badge-sm {
-  font-size: 0.6rem;
-  padding: 1px 5px;
-  border-radius: 8px;
-}
-
-/* ── Completion stats bar ── */
-.team-stats-bar {
-  display: flex;
-  gap: 16px;
-  padding: 10px 14px;
-  margin-bottom: 12px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-}
-
-.team-stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-}
-
-.team-stat-label {
-  font-size: 0.65rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-secondary);
-}
-
-.team-stat-value {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-/* ── Team summary (completion) ── */
-.team-summary {
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-secondary);
-}
-
-.team-summary-header {
-  padding: 10px 12px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border);
-}
-
-.team-summary-body {
-  padding: 12px;
-}
-
-/* ── Agent bar (horizontal) ── */
-.team-agents-bar {
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-secondary);
-  flex-shrink: 0;
-}
-
-.team-agents-bar-header {
-  padding: 10px 12px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border);
-}
-
-.team-agents-bar-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 10px 12px;
-}
-
-.team-agent-card {
-  flex: 1;
-  min-width: 180px;
-  max-width: 300px;
-  padding: 10px 12px;
-  border-radius: 6px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border);
-  cursor: pointer;
-  transition: border-color 0.15s;
-}
-
-.team-agent-card:hover {
-  border-color: var(--accent);
-}
-
-.team-agent-card-top {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.team-agent-card-name {
-  font-size: 0.82rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.team-agent-card-status {
-  margin-left: auto;
-  font-size: 0.65rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  padding: 1px 6px;
-  border-radius: 8px;
-  flex-shrink: 0;
-}
-
-.team-agent-card-status-starting,
-.team-agent-card-status-working {
-  background: rgba(59,130,246,0.15);
-  color: #3b82f6;
-}
-
-.team-agent-card-status-done {
-  background: rgba(16,185,129,0.15);
-  color: #10b981;
-}
-
-.team-agent-card-status-error {
-  background: rgba(239,68,68,0.15);
-  color: #ef4444;
-}
-
-.team-agent-card-activity {
-  margin-top: 6px;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.3;
-}
-
-.team-agents-empty {
-  padding: 16px 12px;
-  text-align: center;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  opacity: 0.6;
-}
-
-/* ── Agent detail view ── */
-.team-agent-detail {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.team-agent-detail-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.team-agent-back-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background: none;
-  color: var(--text-secondary);
-  font-size: 0.78rem;
-  cursor: pointer;
-  transition: all 0.15s;
-  margin-right: 4px;
-}
-
-.team-agent-back-btn:hover {
-  color: var(--text-primary);
-  border-color: var(--text-secondary);
-}
-
-.team-agent-detail-name {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.team-agent-detail-status {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  text-transform: capitalize;
-}
-
-.team-agent-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem 1.5rem;
-  min-height: 0;
-}
-
-.team-agent-messages-inner {
-  max-width: 768px;
-  width: 100%;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.team-agent-empty-msg {
-  text-align: center;
-  padding: 2rem;
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-}
-
-/* ── Agent prompt card ── */
-.team-agent-prompt {
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-secondary);
-  margin-bottom: 0.5rem;
-}
-
-.team-agent-prompt-label {
-  padding: 8px 12px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border);
-}
-
-.team-agent-prompt-body {
-  padding: 10px 14px;
-  font-size: 0.85rem;
-  line-height: 1.5;
-  color: var(--text-primary);
-}
-
-/* ── Agent detail name tag (above assistant bubbles) ── */
-.team-agent-detail-name-tag {
-  font-size: 0.72rem;
-  font-weight: 600;
-  margin-bottom: 2px;
-  padding-left: 2px;
-}
-
-/* ── New team launcher (after completion) ── */
-.team-new-launcher {
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-secondary);
-  padding: 12px;
-  flex-shrink: 0;
-}
-.team-new-launcher-input {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 8px 10px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  font-size: 0.85rem;
-  font-family: inherit;
-  resize: vertical;
-  outline: none;
-}
-.team-new-launcher-input:focus {
-  border-color: var(--accent);
-}
-.team-new-launcher-actions {
-  display: flex;
-  gap: 8px;
-  margin-top: 8px;
-  justify-content: flex-end;
-}
-
-/* ── Team Agent tool call styling in main chat ── */
-.team-agent-tool-wrapper {
-  border-left: 3px solid #8B5CF6;
-  border-radius: 6px;
-  margin-left: 4px;
-  padding-left: 0;
-}
-.team-agent-tool-line {
-  background: linear-gradient(90deg, rgba(139, 92, 246, 0.08), transparent);
-}
-.team-agent-tool-line:hover {
-  background: linear-gradient(90deg, rgba(139, 92, 246, 0.14), transparent);
-}
-.team-agent-tool-icon {
-  display: inline-flex;
-  align-items: center;
-  color: #8B5CF6;
-}
-.team-agent-tool-name {
-  font-weight: 700;
-  color: #8B5CF6;
-  font-size: 0.82rem;
-}
-.team-agent-tool-desc {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-}
-.team-agent-tool-expand {
-  border-top: 1px solid rgba(139, 92, 246, 0.15);
-}
-.team-agent-tool-result {
-  margin-top: 6px;
-  padding: 8px 10px;
-  background: rgba(139, 92, 246, 0.06);
-  border-radius: 4px;
-  border: 1px solid rgba(139, 92, 246, 0.12);
-}
-.team-agent-tool-result-label {
-  font-size: 0.72rem;
-  font-weight: 600;
-  color: #8B5CF6;
-  margin-bottom: 4px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-.team-agent-tool-result-content {
-  font-size: 0.82rem;
-  line-height: 1.5;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-/* ══════════════════════════════════════════
-   Mobile responsive — max-width: 768px
-   ══════════════════════════════════════════ */
-@media (max-width: 768px) {
-  /* Prevent page-level horizontal scroll */
-  html, body {
-    overflow-x: hidden;
-  }
-
-  .layout, .main-body, .chat-area {
-    overflow-x: hidden;
-    max-width: 100vw;
-  }
-
-  /* File panel hidden on mobile — shown inside sidebar instead */
-  .file-panel {
-    display: none;
-  }
-
-  /* Preview panel hidden on mobile — shown inside sidebar instead */
-  .preview-panel {
-    display: none;
-  }
-
-  /* Sidebar as fixed overlay */
-  .sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 320px;
-    max-width: 90vw;
-    z-index: 100;
-    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
-  }
-
-  .sidebar-backdrop {
-    display: block;
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.4);
-    z-index: 99;
-  }
-
-  /* Top bar */
-  .top-bar {
-    padding: 0 0.75rem;
-  }
-
-  .agent-label {
-    display: none;
-  }
-
-  .latency {
-    display: none;
-  }
-
-  .top-bar-info {
-    gap: 0.4rem;
-  }
-
-  .team-mode-toggle {
-    display: none;
-  }
-
-  .team-mode-select {
-    display: block;
-  }
-
-  /* Message area */
-  .message-list {
-    padding: 0.75rem 0.75rem 0.5rem;
-  }
-
-  .message-list-inner {
-    max-width: 100%;
-    min-width: 0;
-  }
-
-  /* Constrain message rows and bubbles */
-  .message-row {
-    min-width: 0;
-    max-width: 100%;
-  }
-
-  .message-bubble {
-    min-width: 0;
-    max-width: 100%;
-    overflow: hidden;
-    overflow-wrap: anywhere;
-    word-break: break-word;
-  }
-
-  /* Message content: contain all overflow within the bubble */
-  .message-content {
-    min-width: 0;
-    max-width: 100%;
-    overflow-wrap: anywhere;
-    word-break: break-word;
-  }
-
-  .message-content pre {
-    max-width: 100%;
-    overflow-x: auto;
-  }
-
-  /* Code block wrappers */
-  .code-block-wrapper {
-    max-width: 100%;
-  }
-
-  .code-block-wrapper pre {
-    max-width: 100%;
-    overflow-x: auto;
-  }
-
-  .markdown-body code {
-    word-break: break-all;
-  }
-
-  .markdown-body pre {
-    max-width: 100%;
-  }
-
-  .markdown-body table {
-    display: block;
-    max-width: 100%;
-    overflow-x: auto;
-  }
-
-  /* Input area */
-  .input-area {
-    padding: 0 0.75rem 0.75rem;
-  }
-
-  .input-card {
-    max-width: 100%;
-  }
-
-  /* Folder picker */
-  .folder-picker-dialog {
-    width: calc(100vw - 2rem);
-    max-width: 440px;
-  }
-
-  /* Status card */
-  .status-card {
-    min-width: 0;
-    width: 100%;
-    max-width: 320px;
-  }
-
-  /* Tool blocks */
-  .tool-expand {
-    margin-left: 0;
-    min-width: 0;
-    max-width: 100%;
-    overflow: hidden;
-  }
-
-  .tool-block {
-    max-width: 100%;
-    overflow-x: auto;
-  }
-
-  .tool-output-content pre {
-    font-size: 0.8rem;
-    max-width: 100%;
-  }
-
-  .tool-input-formatted {
-    max-width: 100%;
-    overflow-wrap: anywhere;
-  }
-
-  /* AskUserQuestion — larger tap targets */
-  .ask-question-option {
-    min-height: 44px;
-  }
-
-  /* Team dashboard — stack kanban columns */
-  .team-kanban {
-    flex-direction: column;
-  }
-
-  .team-dash-body {
-    flex-direction: column;
-  }
-
-  .team-agents-panel {
-    width: 100%;
-    border-left: none;
-    border-top: 1px solid var(--border);
-    max-height: 150px;
-  }
-
-  .team-dash-main {
-    padding: 12px;
-  }
-
-  .team-create-panel {
-    padding: 1rem;
-  }
-
-  /* Loop dashboard — responsive */
-  .loop-active-item {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  .loop-active-item-actions {
-    width: 100%;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .loop-active-item-actions .loop-action-btn {
-    min-height: 36px;
-    padding: 6px 14px;
-  }
-
-  .loop-active-item-meta {
-    flex-wrap: wrap;
-  }
-
-  .loop-detail-actions {
-    flex-wrap: wrap;
-  }
-
-  .loop-detail-actions .loop-action-btn {
-    min-height: 36px;
-    padding: 6px 14px;
-  }
-
-  .loop-exec-item {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
-  }
-
-  .loop-exec-item-left {
-    flex-wrap: wrap;
-  }
-
-  .loop-exec-item-right {
-    width: 100%;
-  }
-
-  .loop-exec-item-right .loop-action-btn {
-    min-height: 36px;
-    width: 100%;
-    text-align: center;
-  }
-
-  .loop-schedule-detail {
-    flex-wrap: wrap;
-  }
-
-  .loop-running-banner {
-    left: 1rem;
-    right: 1rem;
-    transform: none;
-    bottom: 70px;
-  }
-
-  .loop-exec-messages {
-    max-height: calc(100vh - 160px);
-  }
-}
-
-/* ══════════════════════════════════════════
-   Extra-small screens — max-width: 480px
-   ══════════════════════════════════════════ */
-@media (max-width: 480px) {
-  .message-list {
-    padding: 0.5rem 0.5rem 0.5rem;
-  }
-
-  .input-area {
-    padding: 0 0.5rem 0.5rem;
-  }
-
-  .top-bar {
-    padding: 0 0.5rem;
-  }
-
-  .folder-picker-dialog {
-    width: calc(100vw - 1rem);
-  }
-
-  /* Loop — extra-small adjustments */
-  .loop-detail-name {
-    font-size: 1rem;
-  }
-
-  .loop-active-item-name {
-    font-size: 0.82rem;
-  }
-
-  .loop-schedule-options {
-    padding: 8px;
-  }
-
-  .loop-schedule-radio {
-    font-size: 0.82rem;
-  }
-
-  .loop-cron-input {
-    width: 110px;
-  }
-}
-
-/* ══════════════════════════════════════════════════════════════════════════════
-   Loop Mode Styles
-   ══════════════════════════════════════════════════════════════════════════════ */
-
-/* ── Loop name input ── */
-.loop-name-input {
-  width: 100%;
-  padding: 8px 10px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-size: 0.9rem;
-  font-family: inherit;
-}
-.loop-name-input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-/* ── Schedule selector ── */
-.loop-schedule-options {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 12px;
-  background: var(--bg-secondary);
-}
-.loop-schedule-radio {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.85rem;
-  color: var(--text-primary);
-  cursor: pointer;
-}
-.loop-schedule-radio input[type="radio"] {
-  margin: 0;
-  accent-color: var(--accent);
-}
-.loop-schedule-detail {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 0.82rem;
-  color: var(--text-secondary);
-  margin-left: 4px;
-}
-.loop-time-input {
-  width: 46px;
-  padding: 3px 6px;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  font-size: 0.82rem;
-  font-family: inherit;
-  text-align: center;
-}
-.loop-time-input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-.loop-day-select {
-  padding: 3px 6px;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  font-size: 0.82rem;
-  font-family: inherit;
-  cursor: pointer;
-}
-.loop-day-select:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-.loop-cron-input {
-  width: 140px;
-  padding: 3px 8px;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  font-size: 0.82rem;
-  font-family: 'SF Mono', 'Fira Code', monospace;
-}
-.loop-cron-input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-/* ── Template selected highlight ── */
-.loop-template-selected {
-  border-color: rgba(59,130,246,0.4) !important;
-  background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(59,130,246,0.03) 100%) !important;
-}
-
-/* ── Active Loops list ── */
-.loop-active-section {
-  margin-top: 24px;
-  border-top: 1px solid var(--border);
-  padding-top: 16px;
-}
-.loop-active-header {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  margin-bottom: 10px;
-}
-.loop-active-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.loop-active-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 10px 14px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  transition: border-color 0.15s;
-}
-.loop-active-item:hover {
-  border-color: rgba(59,130,246,0.3);
-}
-.loop-active-item-info {
-  flex: 1;
-  min-width: 0;
-  cursor: pointer;
-}
-.loop-active-item-top {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 2px;
-}
-.loop-active-item-name {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.loop-status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-.loop-status-dot-on {
-  background: #10B981;
-}
-.loop-status-dot-off {
-  background: var(--text-secondary);
-  opacity: 0.4;
-}
-.loop-active-item-meta {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-.loop-active-item-actions {
-  display: flex;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
-/* ── Loop action buttons ── */
-.loop-action-btn {
-  padding: 5px 12px;
-  font-size: 0.78rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.15s;
-  white-space: nowrap;
-}
-.loop-action-btn:hover:not(:disabled) {
-  border-color: var(--accent);
-  color: var(--accent);
-}
-.loop-action-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-.loop-action-btn.loop-action-sm {
-  padding: 3px 8px;
-  font-size: 0.72rem;
-}
-.loop-action-btn.loop-action-run {
-  color: #10B981;
-  border-color: rgba(16,185,129,0.3);
-}
-.loop-action-btn.loop-action-run:hover:not(:disabled) {
-  background: rgba(16,185,129,0.1);
-  border-color: #10B981;
-}
-.loop-action-btn.loop-action-cancel {
-  color: var(--error);
-  border-color: rgba(239,68,68,0.3);
-}
-.loop-action-btn.loop-action-cancel:hover {
-  background: rgba(239,68,68,0.1);
-  border-color: var(--error);
-}
-.loop-action-btn.loop-action-delete {
-  color: var(--error);
-  border-color: rgba(239,68,68,0.3);
-}
-.loop-action-btn.loop-action-delete:hover {
-  background: rgba(239,68,68,0.1);
-  border-color: var(--error);
-}
-
-/* ── Loop detail view ── */
-.loop-detail-header {
-  margin-bottom: 16px;
-}
-.loop-detail-info {
-  margin-bottom: 16px;
-}
-.loop-detail-name {
-  font-size: 1.15rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0 0 6px;
-}
-.loop-detail-meta {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 10px;
-}
-.loop-detail-schedule {
-  font-size: 0.82rem;
-  color: var(--text-secondary);
-}
-.loop-status-badge {
-  font-size: 0.72rem;
-  font-weight: 600;
-  padding: 2px 8px;
-  border-radius: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-.loop-status-enabled {
-  background: rgba(16,185,129,0.15);
-  color: #10B981;
-}
-.loop-status-disabled {
-  background: rgba(156,163,175,0.15);
-  color: var(--text-secondary);
-}
-.loop-detail-actions {
-  display: flex;
-  gap: 6px;
-}
-.loop-detail-prompt-section {
-  margin-bottom: 20px;
-  padding: 12px 14px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-secondary);
-}
-.loop-detail-prompt-label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  margin-bottom: 6px;
-}
-.loop-detail-prompt-text {
-  font-size: 0.84rem;
-  color: var(--text-primary);
-  line-height: 1.6;
-  white-space: pre-wrap;
-}
-
-/* ── Execution history ── */
-.loop-exec-history-section {
-  border-top: 1px solid var(--border);
-  padding-top: 16px;
-}
-.loop-exec-history-header {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  margin-bottom: 10px;
-}
-.loop-loading {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 20px 0;
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-}
-.loop-exec-empty {
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  padding: 16px 0;
-}
-.loop-exec-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.loop-exec-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 8px 12px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  transition: border-color 0.15s;
-}
-.loop-exec-item:hover {
-  border-color: rgba(59,130,246,0.2);
-}
-.loop-exec-item-left {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex: 1;
-  min-width: 0;
-  font-size: 0.82rem;
-}
-.loop-exec-item-right {
-  flex-shrink: 0;
-}
-.loop-exec-status-icon {
-  font-size: 0.9rem;
-  width: 18px;
-  text-align: center;
-  flex-shrink: 0;
-}
-.loop-exec-status-running {
-  color: var(--accent);
-  animation: loop-spin 1s linear infinite;
-}
-@keyframes loop-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-.loop-exec-status-success {
-  color: #10B981;
-}
-.loop-exec-status-error {
-  color: var(--error);
-}
-.loop-exec-status-cancelled {
-  color: var(--text-secondary);
-}
-.loop-exec-time {
-  color: var(--text-primary);
-  font-weight: 500;
-  white-space: nowrap;
-}
-.loop-exec-running-label {
-  color: var(--accent);
-  font-weight: 500;
-  font-size: 0.78rem;
-}
-.loop-exec-duration {
-  color: var(--text-secondary);
-  white-space: nowrap;
-}
-.loop-exec-error-text {
-  color: var(--error);
-  font-size: 0.75rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.loop-exec-trigger-badge {
-  font-size: 0.68rem;
-  padding: 1px 6px;
-  border-radius: 8px;
-  background: rgba(139,92,246,0.15);
-  color: #8B5CF6;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-/* ── Execution messages ── */
-.loop-exec-messages {
-  max-height: calc(100vh - 200px);
-  overflow-y: auto;
-}
-
-/* ── Running Loop notification banner ── */
-.loop-running-banner {
-  position: fixed;
-  bottom: 80px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--accent);
-  border-radius: 20px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  z-index: 100;
-  font-size: 0.82rem;
-  color: var(--text-primary);
-}
-.loop-running-banner-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--accent);
-  animation: loop-pulse 1.5s ease-in-out infinite;
-}
-@keyframes loop-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
-}
-
-/* ── Modal dialog (generic) ── */
-.modal-overlay {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.modal-dialog {
-  width: 380px;
-  max-width: 90vw;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-}
-.modal-title {
-  padding: 12px 16px;
-  font-size: 0.95rem;
-  font-weight: 600;
-  border-bottom: 1px solid var(--border);
-  color: var(--text-primary);
-}
-.modal-body {
-  padding: 16px;
-  font-size: 0.88rem;
-  line-height: 1.5;
-  color: var(--text-primary);
-}
-.modal-actions {
-  padding: 10px 16px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  border-top: 1px solid var(--border);
-}
-.modal-confirm-btn {
-  padding: 6px 20px;
-  background: var(--error);
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  font-size: 0.85rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-.modal-confirm-btn:hover {
-  background: #c04444;
-}
-.modal-cancel-btn {
-  padding: 6px 20px;
-  background: transparent;
-  color: var(--text-primary);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: border-color 0.15s;
-}
-.modal-cancel-btn:hover {
-  border-color: var(--text-primary);
-}
-
-/* ── Loop error banner ── */
-.loop-error-banner {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 12px;
-  padding: 10px 14px;
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  border-radius: 8px;
-  color: var(--error);
-  font-size: 0.84rem;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-.loop-error-banner:hover {
-  background: rgba(239, 68, 68, 0.15);
-}
-.loop-error-icon {
-  flex-shrink: 0;
-  font-size: 1rem;
-}
-.loop-error-text {
-  flex: 1;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-.loop-error-dismiss {
-  flex-shrink: 0;
-  opacity: 0.6;
-  font-size: 0.8rem;
-}
-.loop-error-dismiss:hover {
-  opacity: 1;
-}
-
-/* ── Load more executions ── */
-.loop-load-more {
-  display: flex;
-  justify-content: center;
-  padding: 12px 0 4px;
-}