agentgui 1.0.930 → 1.0.932

package/static/css/main.css

@@ -1,4015 +0,0 @@
-    *, *::before, *::after { box-sizing: border-box; }
-
-    :root {
-      --color-primary: #3b82f6;
-      --color-primary-dark: #1e40af;
-      --color-bg-primary: #ffffff;
-      --color-bg-secondary: #f9fafb;
-      --color-bg-code: #f1f5f9;
-      --color-code-text: #1e293b;
-      --color-code-border: #cbd5e1;
-      --color-thinking-bg: #f5f3ff;
-      --color-text-primary: #111827;
-      --color-text-secondary: #6b7280;
-      --color-border: #e5e7eb;
-      --color-success: #10b981;
-      --color-error: #ef4444;
-      --color-warning: #f59e0b;
-      --color-info: #0891b2;
-      --sidebar-width: 300px;
-      --header-height: 52px;
-      --msg-max-width: 800px;
-    }
-
-    html.dark {
-      --color-bg-primary: #1a1a1a;
-      --color-bg-secondary: #242424;
-      --color-text-primary: #e5e5e5;
-      --color-text-secondary: #a3a3a3;
-      --color-border: #333333;
-      --color-primary: #737373;
-      --color-primary-dark: #525252;
-      --color-bg-code: #1e293b;
-      --color-code-text: #e2e8f0;
-      --color-code-border: #334155;
-      --color-thinking-bg: #1e1a2e;
-    }
-
-    html, body {
-      margin: 0;
-      padding: 0;
-      height: 100%;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-      background-color: var(--color-bg-primary);
-      color: var(--color-text-primary);
-    }
-
-    /* ===== ROOT LAYOUT: sidebar + main, full viewport ===== */
-    .app-shell {
-      display: flex;
-      height: 100dvh;
-      overflow: hidden;
-      padding-top: env(safe-area-inset-top);
-      padding-bottom: env(safe-area-inset-bottom);
-      padding-left: env(safe-area-inset-left);
-      padding-right: env(safe-area-inset-right);
-    }
-
-    /* ===== SIDEBAR ===== */
-    .sidebar {
-      width: var(--sidebar-width);
-      flex-shrink: 0;
-      display: flex;
-      flex-direction: column;
-      background-color: var(--color-bg-secondary);
-      overflow: hidden;
-      transition: none !important;
-      animation: none !important;
-    }
-
-    .sidebar.collapsed {
-      width: 0;
-      min-width: 0;
-      border-right: none;
-      transition: none !important;
-      animation: none !important;
-    }
-
-    .sidebar-header {
-      padding: 0.75rem 1rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-shrink: 0;
-      min-height: var(--header-height);
-    }
-
-    .sidebar-header h2 {
-      margin: 0;
-      font-size: 0.875rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: var(--color-text-secondary);
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    .sidebar-new-btn {
-      padding: 0.375rem 0.625rem;
-      font-size: 0.75rem;
-      background-color: var(--color-primary);
-      color: white;
-      border: none;
-      border-radius: 0.375rem;
-      cursor: pointer;
-      transition: background-color 0.2s;
-      white-space: nowrap;
-      flex-shrink: 0;
-    }
-
-    .sidebar-new-btn:hover { background-color: var(--color-primary-dark); }
-
-    .sidebar-header-actions {
-      display: flex;
-      gap: 0.375rem;
-      align-items: center;
-      flex-shrink: 0;
-    }
-
-    .sidebar-clone-btn {
-      padding: 0.375rem 0.625rem;
-      font-size: 0.75rem;
-      background-color: var(--color-bg-primary);
-      color: var(--color-text-primary);
-      border: 1px solid var(--color-border);
-      border-radius: 0.375rem;
-      cursor: pointer;
-      transition: all 0.2s;
-      white-space: nowrap;
-      flex-shrink: 0;
-    }
-
-    .sidebar-clone-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
-
-    .clone-input-bar {
-      display: flex;
-      align-items: center;
-      gap: 0.375rem;
-      padding: 0.375rem 0.75rem;
-      background: var(--color-bg-primary);
-      border-bottom: 1px solid var(--color-border);
-      flex-shrink: 0;
-    }
-
-    .clone-input {
-      flex: 1;
-      min-width: 0;
-      padding: 0.375rem 0.5rem;
-      font-size: 0.8rem;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      border: 1px solid var(--color-border);
-      border-radius: 0.25rem;
-      background: var(--color-bg-secondary);
-      color: var(--color-text-primary);
-      outline: none;
-    }
-
-    .clone-input:focus { border-color: var(--color-primary); }
-
-    .clone-go-btn {
-      padding: 0.375rem 0.625rem;
-      font-size: 0.75rem;
-      font-weight: 600;
-      background: var(--color-primary);
-      color: white;
-      border: none;
-      border-radius: 0.25rem;
-      cursor: pointer;
-      flex-shrink: 0;
-      transition: background-color 0.15s;
-    }
-
-    .clone-go-btn:hover { background-color: var(--color-primary-dark); }
-    .clone-go-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-    .clone-cancel-btn {
-      padding: 0.25rem 0.5rem;
-      font-size: 1rem;
-      background: none;
-      border: none;
-      cursor: pointer;
-      color: var(--color-text-secondary);
-      flex-shrink: 0;
-      line-height: 1;
-    }
-
-    .clone-cancel-btn:hover { color: var(--color-text-primary); }
-
-    .clone-status {
-      padding: 0.375rem 0.75rem;
-      font-size: 0.75rem;
-      background: var(--color-bg-primary);
-      border-bottom: 1px solid var(--color-border);
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    .clone-status.cloning { color: var(--color-primary); }
-    .clone-status.clone-error { color: var(--color-error); }
-    .clone-status.clone-success { color: var(--color-success); }
-
-    .sidebar-list {
-      flex: 1;
-      overflow-y: auto;
-      overflow-x: hidden;
-      list-style: none;
-      margin: 0;
-      padding: 0.5rem 0;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    .conversation-item {
-      padding: 0.75rem 0.75rem;
-      margin: 0.125rem 0.5rem;
-      border-radius: 0.375rem;
-      cursor: pointer;
-      transition: background-color 0.15s;
-      border-left: 3px solid transparent;
-      user-select: none;
-    }
-
-    .conversation-item:hover { background-color: var(--color-bg-primary); }
-
-    .conversation-item.active {
-      background-color: var(--color-primary);
-      color: white;
-      border-left-color: var(--color-primary-dark);
-    }
-
-    .conversation-item-title {
-      font-weight: 500;
-      font-size: 0.875rem;
-      margin: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .conversation-item-meta {
-      font-size: 0.75rem;
-      color: var(--color-text-secondary);
-      margin-top: 0.125rem;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .conversation-item.active .conversation-item-meta { color: rgba(255,255,255,0.7); }
-
-    .conversation-streaming-badge {
-      display: inline-flex;
-      align-items: center;
-      margin-right: 0.375rem;
-      vertical-align: middle;
-    }
-
-    .streaming-dot {
-      display: inline-block;
-      width: 0.5rem;
-      height: 0.5rem;
-      border-radius: 50%;
-      background-color: var(--color-success);
-      animation: pulse 1.5s ease-in-out infinite;
-    }
-
-    .conversation-item.active .streaming-dot {
-      background-color: #fff;
-    }
-
-    .conversation-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 0.5rem;
-    }
-
-    .conversation-item-content {
-      flex: 1;
-      min-width: 0;
-      overflow: hidden;
-    }
-
-    .conversation-item.pinned { cursor: grab; }
-    .conversation-item.pinned:active { cursor: grabbing; }
-    .conversation-item-checkbox {
-      flex-shrink: 0;
-      width: 16px;
-      height: 16px;
-      opacity: 0;
-      cursor: pointer;
-      margin: 0;
-    }
-    .conversation-item:hover .conversation-item-checkbox,
-    .conversation-item-checkbox:checked {
-      opacity: 1;
-    }
-    .conversation-item-delete,
-    .conversation-item-archive,
-    .conversation-item-export {
-      flex-shrink: 0;
-      width: 28px;
-      height: 28px;
-      padding: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: transparent;
-      border: none;
-      border-radius: 0.25rem;
-      cursor: pointer;
-      color: var(--color-text-secondary);
-      opacity: 0;
-      transition: all 0.15s;
-    }
-
-    .conversation-item:hover .conversation-item-delete,
-    .conversation-item:hover .conversation-item-archive,
-    .conversation-item:hover .conversation-item-export {
-      opacity: 1;
-    }
-
-    .conversation-item-delete:hover {
-      background-color: var(--color-error);
-      color: white;
-    }
-
-    .conversation-item-export:hover {
-      background-color: #3b82f6;
-      color: white;
-    }
-
-    .conversation-item-archive:hover {
-      background-color: #f59e0b;
-      color: white;
-    }
-
-    .conversation-item.active .conversation-item-delete,
-    .conversation-item.active .conversation-item-archive,
-    .conversation-item.active .conversation-item-export {
-      color: rgba(255,255,255,0.8);
-    }
-
-    .conversation-item.active .conversation-item-delete:hover,
-    .conversation-item.active .conversation-item-archive:hover,
-    .conversation-item.active .conversation-item-export:hover {
-      background-color: rgba(255,255,255,0.2);
-      color: white;
-    }
-
-    .sidebar-empty {
-      padding: 2rem 1rem;
-      text-align: center;
-      color: var(--color-text-secondary);
-      font-size: 0.875rem;
-    }
-
-    /* ===== MAIN PANEL: header + messages + input ===== */
-    .main-panel {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      min-width: 0;
-      background-color: var(--color-bg-primary);
-    }
-
-    /* --- Header bar --- */
-    .main-header {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      padding: 0 1rem;
-      height: var(--header-height);
-      min-height: var(--header-height);
-      flex-shrink: 0;
-      background-color: var(--color-bg-secondary);
-    }
-
-    .sidebar-toggle-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 36px;
-      height: 36px;
-      background: none;
-      border: none;
-      border-radius: 0.375rem;
-      cursor: pointer;
-      color: var(--color-text-secondary);
-      flex-shrink: 0;
-      transition: none;
-    }
-
-    .sidebar-toggle-btn:hover {
-      background-color: var(--color-bg-primary);
-      color: var(--color-text-primary);
-      transition: none;
-    }
-
-    .sidebar-toggle-btn svg {
-      width: 18px;
-      height: 18px;
-    }
-
-    .header-title {
-      font-size: 1.125rem;
-      font-weight: 600;
-      margin: 0;
-      flex: 1;
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .header-controls {
-      display: flex;
-      gap: 0.5rem;
-      align-items: center;
-      flex-shrink: 0;
-    }
-
-    .status-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.375rem;
-      padding: 0.25rem 0.625rem;
-      border-radius: 1rem;
-      font-size: 0.75rem;
-      font-weight: 500;
-      background-color: var(--color-bg-primary);
-    }
-
-    .status-indicator {
-      width: 0.5rem;
-      height: 0.5rem;
-      border-radius: 50%;
-      background-color: var(--color-error);
-      animation: pulse 2s infinite;
-    }
-
-    .status-indicator[data-status="connected"] { background-color: var(--color-success); }
-    .status-indicator[data-status="reconnecting"],
-    .status-indicator[data-status="connecting"] { background-color: var(--color-warning); animation: pulse 1s infinite; }
-
-    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
-
-    .theme-toggle-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 36px;
-      height: 36px;
-      background: none;
-      border: none;
-      border-radius: 0.375rem;
-      cursor: pointer;
-      color: var(--color-text-secondary);
-      transition: background-color 0.15s;
-    }
-
-    .theme-toggle-btn:hover {
-      background-color: var(--color-bg-primary);
-      color: var(--color-text-primary);
-    }
-
-    .script-buttons { display: flex; gap: 0.25rem; align-items: center; }
-    .header-icon-btn {
-      display: flex; align-items: center; justify-content: center;
-      width: 36px; height: 36px; background: none; border: none;
-      border-radius: 0.375rem; cursor: pointer; color: var(--color-text-secondary);
-      transition: background-color 0.15s, color 0.15s;
-    }
-    .header-icon-btn:hover { background-color: var(--color-bg-primary); color: var(--color-text-primary); }
-    .header-icon-btn svg { width: 20px; height: 20px; }
-    #scriptStartBtn { color: var(--color-success); }
-    #scriptStartBtn:hover { background-color: rgba(16,185,129,0.1); color: var(--color-success); }
-    .script-dev-btn { color: var(--color-info); }
-    .script-dev-btn:hover { background-color: rgba(8,145,178,0.1); color: var(--color-info); }
-    .script-stop-btn { color: var(--color-error); }
-    .script-stop-btn:hover { background-color: rgba(239,68,68,0.1); color: var(--color-error); }
-
-    .agent-auth-btn { color: var(--color-text-secondary); position: relative; }
-    .agent-auth-btn.auth-ok { color: var(--color-success); }
-    .agent-auth-btn.auth-warn { color: var(--color-warning); }
-    .agent-auth-btn:hover { background-color: var(--color-bg-primary); }
-    .agent-auth-dropdown {
-      position: absolute; top: 100%; right: 0; z-index: 100;
-      min-width: 260px; padding: 0.25rem 0;
-      background: var(--color-bg-secondary); border: 1px solid var(--color-border);
-      border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-      display: none;
-    }
-    .agent-auth-dropdown.open { display: block; }
-    .agent-auth-item {
-      display: flex; align-items: center; gap: 0.5rem;
-      padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.8125rem;
-      color: var(--color-text-primary); border: none; background: none; width: 100%;
-      text-align: left;
-    }
-    .agent-auth-item:hover { background: var(--color-bg-primary); }
-    .agent-auth-dot {
-      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
-    }
-    .agent-auth-dot.ok { background: var(--color-success); }
-    .agent-auth-dot.missing { background: var(--color-warning); }
-    .agent-auth-dot.unknown { background: var(--color-text-secondary); }
-    .agent-auth-section-header {
-      padding: 0.375rem 0.75rem; font-size: 0.6875rem; font-weight: 600;
-      text-transform: uppercase; letter-spacing: 0.05em;
-      color: var(--color-text-secondary); user-select: none;
-    }
-
-    .terminal-container {
-      flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #1e1e1e; min-height: 0;
-    }
-    .terminal-output { flex: 1; overflow: hidden; position: relative; min-height: 0; }
-
-    /* --- View toggle bar --- */
-    .view-toggle-bar {
-      display: flex;
-      gap: 0;
-      background: var(--color-bg-secondary);
-      flex-shrink: 0;
-      padding: 0 1rem;
-    }
-
-    .view-toggle-btn {
-      padding: 0.5rem 1rem;
-      border: none;
-      background: none;
-      cursor: pointer;
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: var(--color-text-secondary);
-      border-bottom: 2px solid transparent;
-      transition: all 0.2s;
-      min-height: 40px;
-    }
-
-    .view-toggle-btn:hover { color: var(--color-text-primary); }
-    .view-toggle-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
-
-    .view-toggle-btn svg {
-      width: 1.2rem;
-      height: 1.2rem;
-      display: block;
-      margin: 0 auto;
-    }
-
-    /* --- Messages scroll area --- */
-    #output-scroll {
-      flex: 1;
-      overflow-y: auto;
-      overflow-x: hidden;
-      min-height: 0;
-      -webkit-overflow-scrolling: touch;
-      position: relative;
-    }
-
-    .messages-wrapper {
-      max-width: 100%;
-      margin: 0;
-      width: 100%;
-      padding: 0.75rem 2rem;
-      display: flex;
-      flex-direction: column;
-    }
-
-    #output {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-      flex: 1;
-    }
-
-    /* --- Conversation display --- */
-    .conversation-header {
-      padding: 0.5rem 0;
-      margin-bottom: 0.5rem;
-    }
-
-    .conversation-header h2 { margin: 0 0 0.25rem 0; font-size: 1.25rem; }
-    .conversation-header p { margin: 0; font-size: 0.8rem; color: var(--color-text-secondary); }
-
-    .conversation-messages { padding: 0; }
-
-    /* --- Messages --- */
-    .message {
-      margin-bottom: 0;
-      padding: 0.5rem 0.75rem;
-      border-radius: 0.75rem;
-      max-width: 85%;
-      word-break: break-word;
-    }
-
-    .message-user {
-      margin-left: auto;
-      border-bottom-right-radius: 0.25rem;
-      color: var(--color-text-primary);
-    }
-
-    .message-assistant {
-      margin-right: auto;
-      border-bottom-left-radius: 0.25rem;
-      color: var(--color-text-primary);
-    }
-
-    /* Consecutive assistant messages: join them visually */
-    .message-assistant + .message-assistant {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      margin-top: -0.125rem;
-      padding-top: 0.25rem;
-    }
-    .message-assistant:has(+ .message-assistant) {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      padding-bottom: 0.25rem;
-    }
-
-    .message-role {
-      font-weight: 600;
-      font-size: 0.7rem;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-      margin-bottom: 0.125rem;
-    }
-
-    .message-user .message-role { color: #7a9abf; }
-    .message-assistant .message-role { color: #8a9a7a; }
-
-    .message-content {
-      font-size: 0.9rem;
-      line-height: 1.6;
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-
-    .message-timestamp {
-      font-size: 0.7rem;
-      margin-top: 0.25rem;
-      opacity: 0.5;
-    }
-
-    .message-user .message-timestamp { color: var(--color-text-secondary); }
-    .message-assistant .message-timestamp { color: var(--color-text-secondary); }
-
-    .message-blocks {
-      display: flex;
-      flex-direction: column;
-      gap: 0.125rem;
-    }
-
-    .message-text {
-      line-height: 1.6;
-      word-break: break-word;
-      white-space: pre-wrap;
-    }
-
-    .message-code {
-      background-color: var(--color-bg-code);
-      border-radius: 0.375rem;
-      padding: 0.5rem;
-      overflow-x: auto;
-      margin: 0.25rem 0;
-    }
-
-    .message-code pre {
-      margin: 0;
-      font-family: 'Courier New', monospace;
-      font-size: 0.85rem;
-      color: #e0e0e0;
-    }
-
-    .message-tool {
-      background-color: var(--color-primary);
-      color: white;
-      padding: 0.25rem 0.5rem;
-      border-radius: 0.25rem;
-      font-size: 0.75rem;
-      display: inline-block;
-      margin: 0.25rem 0;
-    }
-
-    /* --- Streaming block types --- */
-    .streaming-block-system {
-      padding: 0.375rem 0.75rem;
-      margin: 0;
-      background: rgba(59,130,246,0.08);
-      border-radius: 0.375rem;
-      font-size: 0.8rem;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    .system-model-badge {
-      background: var(--color-primary);
-      color: white;
-      padding: 0.125rem 0.5rem;
-      border-radius: 1rem;
-      font-size: 0.7rem;
-      font-weight: 600;
-      white-space: nowrap;
-    }
-
-    .system-info {
-      color: var(--color-text-secondary);
-      font-size: 0.75rem;
-    }
-
-    .tool-input-details {
-    }
-
-    .tool-input-summary {
-      padding: 0.375rem 0.75rem;
-      font-size: 0.75rem;
-      color: var(--color-text-secondary);
-      cursor: pointer;
-      user-select: none;
-    }
-
-    .tool-input-summary:hover {
-      background: rgba(6,182,212,0.08);
-    }
-
-    .tool-input-pre {
-      margin: 0;
-      padding: 0.5rem 0.75rem;
-      font-size: 0.75rem;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      background: rgba(0,0,0,0.03);
-      overflow-x: auto;
-      max-height: 200px;
-      overflow-y: auto;
-      white-space: pre-wrap;
-      word-break: break-all;
-    }
-
-    html.dark .tool-input-pre { background: rgba(255,255,255,0.03); }
-
-    .streaming-block-tool-result {
-      margin: 0;
-      border-radius: 0.375rem;
-      background: var(--color-bg-code);
-      overflow: hidden;
-    }
-
-    .tool-result-header {
-      padding: 0.375rem 0.75rem;
-      font-size: 0.7rem;
-    }
-
-    .tool-result-ok-badge {
-      color: #10b981;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-
-    .tool-result-error-badge {
-      color: #ef4444;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-
-    .tool-result-pre {
-      margin: 0;
-      padding: 0.5rem 0.75rem;
-      font-size: 0.75rem;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      color: var(--color-code-text);
-      overflow-x: auto;
-      max-height: 300px;
-      overflow-y: auto;
-      white-space: pre-wrap;
-      word-break: break-all;
-    }
-
-    .streaming-block-tool-result.tool-result-error {
-    }
-
-    .streaming-block-result {
-      padding: 0.375rem 0.75rem;
-      margin: 0;
-      border-radius: 0.375rem;
-      background: rgba(16,185,129,0.08);
-      font-size: 0.8rem;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    .streaming-block-result.result-error {
-      background: rgba(239,68,68,0.08);
-    }
-
-    .result-status {
-      font-weight: 600;
-      color: #10b981;
-    }
-
-    .result-error .result-status { color: #ef4444; }
-
-    .result-stats {
-      color: var(--color-text-secondary);
-      font-size: 0.75rem;
-    }
-
-    .streaming-indicator-label {
-      white-space: nowrap;
-    }
-
-    /* --- Input area: fixed at bottom --- */
-    .input-section {
-      flex-shrink: 0;
-      background-color: var(--color-bg-primary);
-      padding: 0.75rem 1rem;
-    }
-
-    .input-wrapper {
-      max-width: var(--msg-max-width);
-      margin: 0 auto;
-      width: 100%;
-      display: flex;
-      gap: 0.5rem;
-      align-items: flex-end;
-    }
-
-    .agent-selector {
-      padding: 0.5rem;
-      border: none;
-      border-radius: 0.375rem;
-      background-color: var(--color-bg-secondary);
-      color: var(--color-text-primary);
-      font-size: 0.8rem;
-      cursor: pointer;
-      flex-shrink: 0;
-      width: auto;
-      min-width: 80px;
-      max-width: 200px;
-    }
-
-    
-
-    
-
-    .agent-selector:disabled, .model-selector:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      background-color: var(--color-bg-secondary);
-    }
-
-    .agent-selector[data-streaming="true"], .model-selector[data-streaming="true"] {
-      opacity: 0.6;
-      cursor: not-allowed;
-      background-color: var(--color-bg-secondary);
-    }
-
-    .message-textarea[data-streaming="true"] {
-      opacity: 0.7;
-      cursor: not-allowed;
-      background-color: var(--color-bg-secondary);
-    }
-
-    .model-selector {
-      padding: 0.5rem;
-      border: none;
-      border-radius: 0.375rem;
-      background-color: var(--color-bg-secondary);
-      color: var(--color-text-primary);
-      font-size: 0.8rem;
-      cursor: pointer;
-      flex-shrink: 0;
-      width: auto;
-      min-width: 80px;
-      max-width: 220px;
-    }
-
-    .model-selector:empty, .model-selector[data-empty="true"] {
-      display: none;
-    }
-
-    .cli-selector {
-      display: inline-block;
-    }
-
-    .sub-agent-selector {
-      display: inline-block;
-    }
-
-    .message-input-container {
-      position: relative;
-      flex: 1;
-      display: flex;
-    }
-
-    .message-textarea {
-      flex: 1;
-      padding: 0.625rem 2.75rem 0.625rem 0.875rem;
-      border: none;
-      border-radius: 0.75rem;
-      background-color: var(--color-bg-secondary);
-      color: var(--color-text-primary);
-      font-family: inherit;
-      font-size: 0.9375rem;
-      resize: none;
-      min-height: 44px;
-      max-height: 150px;
-      line-height: 1.5;
-      transition: border-color 0.15s;
-    }
-
-    .message-textarea:focus {
-      outline: none;
-      box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
-    }
-
-    .send-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      background-color: var(--color-primary);
-      color: white;
-      border: none;
-      border-radius: 0.5rem;
-      cursor: pointer;
-      flex-shrink: 0;
-      transition: background-color 0.15s;
-    }
-
-    .send-btn:hover:not(:disabled) { background-color: var(--color-primary-dark); }
-    .send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-    .send-btn[data-streaming="true"] { opacity: 0.5; cursor: not-allowed; background-color: var(--color-primary); }
-
-    /* ===== Data-streaming state styling for all prompt controls ===== */
-    .input-section[data-streaming="true"] {
-      opacity: 0.85;
-    }
-
-    .input-section[data-streaming="true"] .message-textarea {
-      opacity: 0.7;
-      cursor: not-allowed;
-      background-color: var(--color-bg-secondary);
-    }
-
-    .input-section[data-streaming="true"] .agent-selector,
-    .input-section[data-streaming="true"] .model-selector {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-
-    .input-section[data-streaming="true"] .send-btn {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .send-btn svg { width: 18px; height: 18px; }
-
-    .stop-btn {
-      display: none;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      background-color: #dc2626;
-      color: white;
-      border: none;
-      border-radius: 0.5rem;
-      cursor: pointer;
-      flex-shrink: 0;
-      transition: background-color 0.15s;
-    }
-
-    .stop-btn:hover:not(:disabled) { background-color: #b91c1c; }
-    .stop-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-    .stop-btn.visible { display: flex; }
-
-    .inject-btn {
-      display: none;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      background-color: #f59e0b;
-      color: white;
-      border: none;
-      border-radius: 0.5rem;
-      cursor: pointer;
-      flex-shrink: 0;
-      transition: background-color 0.15s;
-      margin-right: 0.25rem;
-    }
-
-    .inject-btn:hover:not(:disabled) { background-color: #d97706; }
-    .inject-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-    .inject-btn.visible { display: flex; }
-
-    .queue-btn {
-      display: none;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      background-color: #8b5cf6;
-      color: white;
-      border: none;
-      border-radius: 0.5rem;
-      cursor: pointer;
-      flex-shrink: 0;
-      transition: background-color 0.15s;
-      margin-right: 0.25rem;
-    }
-
-    .queue-btn:hover:not(:disabled) { background-color: #7c3aed; }
-    .queue-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-    .queue-btn.visible { display: flex; }
-
-
-    /* ===== OVERLAY for mobile sidebar ===== */
-    .sidebar-overlay {
-      display: none;
-      position: fixed;
-      top: 0; left: 0; width: 100%; height: 100%;
-      background: rgba(0,0,0,0.4);
-      z-index: 999;
-      transition: none;
-      animation: none;
-    }
-
-    .sidebar-overlay.visible { display: block; transition: none; animation: none; }
-
-    /* ===== UTILITIES ===== */
-    .text-secondary { color: var(--color-text-secondary); }
-    .animate-spin { animation: spin 1s linear infinite; }
-    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-
-    /* ===== HTML rendered content ===== */
-    .html-rendered-label {
-      padding: 0.25rem 0.5rem;
-      background: #eff6ff;
-      border-radius: 0.25rem;
-      font-size: 0.75rem;
-      font-weight: 600;
-      color: #1d4ed8;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      margin-bottom: 0.25rem;
-    }
-
-    html.dark .html-rendered-label { background: #1e3a5f; color: #93c5fd; }
-
-    .html-content {
-      background: #ffffff;
-      padding: 0.5rem 0.75rem;
-      border-radius: 0.375rem;
-      overflow-x: auto;
-    }
-
-    html.dark .html-content { background: #262626; }
-
-    .html-content table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; }
-    .html-content th, .html-content td { padding: 0.5rem 0.75rem; text-align: left; font-size: 0.875rem; }
-    .html-content th { background: var(--color-bg-secondary); font-weight: 600; }
-    .html-content ul, .html-content ol { padding-left: 1.5rem; margin: 0.5rem 0; }
-    .html-content li { margin: 0.25rem 0; }
-    .html-content h1, .html-content h2, .html-content h3, .html-content h4 { margin: 0.75rem 0 0.5rem; }
-    .html-content p { margin: 0.5rem 0; }
-
-    pre { margin: 0; overflow-x: auto; }
-    code { font-family: 'Monaco','Menlo','Ubuntu Mono', monospace; font-size: 0.875rem; }
-    details { margin: 0.25rem 0; }
-    summary { cursor: pointer; user-select: none; padding: 0.375rem; border-radius: 0.25rem; transition: background-color 0.2s; }
-    summary:hover { background-color: var(--color-bg-secondary); }
-    .permanently-expanded > summary { cursor: default; }
-    .permanently-expanded > summary::before { display: none; }
-    .permanently-expanded > summary::-webkit-details-marker { display: none; }
-    .permanently-expanded > summary::marker { display: none; content: ''; }
-
-    /* ===== Folder Browser Modal ===== */
-    .folder-modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2000; align-items:center; justify-content:center; }
-    .folder-modal-overlay.visible { display:flex; }
-    .folder-modal { background:var(--color-bg-primary); border-radius:0.5rem; width:500px; max-width:90vw; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
-    .folder-modal-header { padding:1rem; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
-    .folder-modal-header h3 { margin:0; font-size:1rem; font-weight:600; }
-    .folder-modal-close { background:none; border:none; font-size:1.25rem; cursor:pointer; color:var(--color-text-secondary); padding:0.25rem; line-height:1; }
-    .folder-modal-close:hover { color:var(--color-text-primary); }
-    .folder-breadcrumb { padding:0.75rem 1rem; font-size:0.8rem; font-family:'Monaco','Menlo',monospace; color:var(--color-text-secondary); background:var(--color-bg-secondary); display:flex; align-items:center; gap:0.25rem; flex-shrink:0; overflow-x:auto; white-space:nowrap; }
-    .folder-breadcrumb-segment { cursor:pointer; color:var(--color-primary); padding:0.125rem 0.25rem; border-radius:0.25rem; }
-    .folder-breadcrumb-segment:hover { background:var(--color-bg-primary); text-decoration:underline; }
-    .folder-breadcrumb-separator { color:var(--color-text-secondary); }
-    .folder-list { flex:1; overflow-y:auto; min-height:200px; max-height:400px; list-style:none; margin:0; padding:0; }
-    .folder-list-item { padding:0.5rem 1rem; cursor:pointer; display:flex; align-items:center; gap:0.5rem; font-size:0.875rem; transition:background-color 0.15s; }
-    .folder-list-item:hover { background:var(--color-bg-secondary); }
-    .folder-list-item-icon { font-size:1rem; flex-shrink:0; width:1.25rem; text-align:center; }
-    .folder-list-item-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-    .folder-list-empty { padding:2rem 1rem; text-align:center; color:var(--color-text-secondary); font-size:0.875rem; }
-    .folder-list-loading { padding:2rem 1rem; text-align:center; color:var(--color-text-secondary); font-size:0.875rem; }
-    .folder-list-error { padding:1rem; text-align:center; color:var(--color-error); font-size:0.875rem; }
-    .folder-modal-footer { padding:0.75rem 1rem; display:flex; justify-content:flex-end; gap:0.5rem; flex-shrink:0; }
-    .folder-modal-footer .btn { padding:0.5rem 1rem; font-size:0.8rem; }
-
-    .btn { padding:0.5rem 1rem; border:none; border-radius:0.375rem; font-weight:500; cursor:pointer; transition:all 0.15s; font-size:0.875rem; }
-    .btn-primary { background-color:var(--color-primary); color:white; }
-    .btn-primary:hover:not(:disabled) { background-color:var(--color-primary-dark); }
-    .btn:disabled { opacity:0.5; cursor:not-allowed; }
-    .btn-secondary { background:var(--color-bg-secondary); color:var(--color-text-primary); border:none; }
-    .btn-secondary:hover { background:var(--color-border); }
-
-    /* ===== Drop zone ===== */
-    .drop-zone-overlay { display:none; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(59,130,246,0.1); border:3px dashed var(--color-primary); border-radius:0.5rem; z-index:100; align-items:center; justify-content:center; }
-    .drop-zone-overlay.visible { display:flex; }
-    .drop-zone-content { text-align:center; color:var(--color-primary); pointer-events:none; }
-    .drop-zone-icon { font-size:3rem; font-weight:300; line-height:1; margin-bottom:0.5rem; }
-    .drop-zone-text { font-size:1rem; font-weight:500; }
-
-    /* ===== Upload toast ===== */
-    .upload-toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); padding:0.75rem 1.5rem; border-radius:0.5rem; font-size:0.875rem; font-weight:500; z-index:2000; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:opacity 0.3s; }
-    .upload-toast.success { background:var(--color-success); color:white; }
-    .upload-toast.error { background:var(--color-error); color:white; }
-    .upload-toast.info { background:var(--color-primary); color:white; }
-
-    /* ===== File browser ===== */
-    .file-browser-container { flex:1; min-height:0; overflow:hidden; }
-    .file-browser-iframe { width:100%; height:100%; border:none; }
-    .voice-iframe { width:100%; height:100%; border:none; }
-
-    /* ===== RESPONSIVE: MOBILE ===== */
-    @media (max-width: 768px) {
-      :root { --sidebar-width: 280px; }
-
-      .sidebar {
-        position: fixed;
-        top: 0; left: 0;
-        height: 100%;
-        z-index: 1000;
-        transform: translateX(-100%);
-        box-shadow: none;
-        width: var(--sidebar-width);
-        transition: none !important;
-        animation: none !important;
-      }
-
-      .sidebar.collapsed { transform: translateX(-100%); width: var(--sidebar-width); transition: none !important; animation: none !important; }
-      .sidebar.mobile-visible { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,0.2); transition: none !important; animation: none !important; }
-
-      .main-header { padding: 0 0.75rem; }
-      .header-title { font-size: 1rem; }
-
-      .messages-wrapper { padding: 0.5rem 0.75rem; }
-
-      .message { max-width: 90%; }
-
-      .input-section {
-        padding: 0.5rem 0.75rem;
-        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
-      }
-
-      .message-textarea { font-size: 16px; }
-
-      .conversation-item { padding: 0.875rem 0.75rem; min-height: 44px; }
-      .sidebar-new-btn { min-height: 44px; min-width: 44px; padding: 0.5rem 0.75rem; }
-
-      .status-badge { padding: 0.25rem 0.5rem; font-size: 0.7rem; }
-
-      .view-toggle-btn { flex: 1; text-align: center; }
-    }
-
-    @media (max-width: 480px) {
-      .sidebar { width: calc(100% - 3rem); max-width: 320px; }
-      .message { max-width: 95%; }
-      .messages-wrapper { padding: 0.375rem 0.5rem; }
-      .input-section { padding: 0.5rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }
-      .sidebar-header-actions { gap: 0.25rem; }
-      .sidebar-clone-btn { font-size: 0.7rem; padding: 0.25rem 0.375rem; }
-      .conversation-item-export,
-      .conversation-item-archive { display: none; }
-      .conversation-header h2 { font-size: 1.125rem; }
-      .shortcuts-panel { padding: 1rem; }
-    }
-
-    /* ===== SCROLLBAR STYLING ===== */
-    ::-webkit-scrollbar {
-      width: 10px;
-      height: 10px;
-    }
-
-    ::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      background: #cbd5e1;
-      border-radius: 8px;
-      border: 3px solid transparent;
-      background-clip: padding-box;
-      transition: background-color 0.2s;
-    }
-
-    ::-webkit-scrollbar-thumb:hover {
-      background-color: #94a3b8;
-      background-clip: padding-box;
-    }
-
-    html.dark ::-webkit-scrollbar-thumb {
-      background: #475569;
-      background-clip: padding-box;
-    }
-
-    html.dark ::-webkit-scrollbar-thumb:hover {
-      background-color: #64748b;
-      background-clip: padding-box;
-    }
-
-    /* Firefox scrollbar */
-    * {
-      scrollbar-width: thin;
-      scrollbar-color: #cbd5e1 transparent;
-    }
-
-    html.dark * {
-      scrollbar-color: #475569 transparent;
-    }
-
-    .voice-mic-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 36px;
-      height: 36px;
-      background: var(--color-bg-secondary);
-      color: var(--color-text-secondary);
-      border: 2px solid var(--color-border);
-      border-radius: 50%;
-      cursor: pointer;
-      flex-shrink: 0;
-      transition: all 0.2s;
-    }
-
-    .voice-mic-btn:hover {
-      border-color: var(--color-primary);
-      color: var(--color-primary);
-    }
-
-    .voice-mic-btn.loading {
-      opacity: 0.5;
-      cursor: wait;
-      animation: mic-loading-spin 2s linear infinite;
-    }
-
-    @keyframes mic-loading-spin {
-      0% { border-color: var(--color-border); }
-      50% { border-color: var(--color-primary); }
-      100% { border-color: var(--color-border); }
-    }
-
-    /* ===== TOOLS VIEW ===== */
-    .tools-container {
-      flex: 1;
-      min-height: 0;
-      overflow-y: auto;
-      overflow-x: hidden;
-      padding: 1.5rem 2rem;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    .voice-mic-btn.recording {
-      background: var(--color-error);
-      border-color: var(--color-error);
-      color: white;
-      animation: pulse 1s ease-in-out infinite;
-    }
-
-    .voice-mic-btn svg {
-      width: 20px;
-      height: 20px;
-    }
-
-    .conversation-messages { contain: content; }
-    .streaming-blocks { contain: content; }
-    .sidebar-list { contain: strict; content-visibility: auto; }
-    .message { contain: layout style; content-visibility: auto; contain-intrinsic-size: auto 80px; }
-
-    /* PM2 Monitor Panel */
-    .pm2-monitor-panel {
-      border-top: 1px solid var(--color-border);
-      background: var(--color-bg-secondary);
-      display: flex;
-      flex-direction: column;
-      max-height: 35vh;
-    }
-    .pm2-monitor-header {
-      padding: 0.5rem 0.75rem;
-      font-size: 0.75rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: var(--color-text-secondary);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: var(--color-bg-primary);
-      border-bottom: 1px solid var(--color-border);
-      flex-shrink: 0;
-    }
-    .pm2-monitor-actions { display: flex; gap: 0.25rem; }
-    .pm2-action-btn {
-      background: none;
-      border: none;
-      color: var(--color-text-secondary);
-      cursor: pointer;
-      padding: 0.125rem 0.375rem;
-      font-size: 0.875rem;
-      line-height: 1;
-      border-radius: 0.25rem;
-    }
-    .pm2-action-btn:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); }
-    .pm2-process-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.25rem 0; }
-    .pm2-process-item {
-      padding: 0.375rem 0.75rem;
-      margin: 0.125rem 0.5rem;
-      border-radius: 0.375rem;
-      background: var(--color-bg-primary);
-      border-left: 3px solid var(--color-border);
-      font-size: 0.75rem;
-      transition: background-color 0.15s;
-    }
-    .pm2-process-item:hover { background: var(--color-bg-secondary); }
-    .pm2-process-item.online { border-left-color: var(--color-success); }
-    .pm2-process-item.launching { border-left-color: var(--color-primary); }
-    .pm2-process-item.stopping { border-left-color: var(--color-warning); }
-    .pm2-process-item.stopped { border-left-color: var(--color-text-muted, #888); opacity: 0.7; }
-    .pm2-process-item.errored { border-left-color: var(--color-error); }
-    .pm2-process-item.waiting\ restart { border-left-color: var(--color-warning); }
-    .pm2-status-dot {
-      display: inline-block;
-      width: 6px; height: 6px;
-      border-radius: 50%;
-      background: var(--color-text-secondary);
-      vertical-align: middle;
-      margin-left: 4px;
-    }
-    .pm2-status-online .pm2-status-dot,
-    .pm2-process-item.online .pm2-status-dot { background: var(--color-success); }
-    .pm2-status-launching .pm2-status-dot,
-    .pm2-process-item.launching .pm2-status-dot { background: var(--color-primary); }
-    .pm2-status-stopping .pm2-status-dot,
-    .pm2-status-errored .pm2-status-dot,
-    .pm2-process-item.errored .pm2-status-dot { background: var(--color-error); }
-    .pm2-process-name {
-      font-weight: 600;
-      margin-bottom: 0.125rem;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .pm2-process-meta {
-      display: flex;
-      gap: 0.5rem;
-      font-size: 0.7rem;
-      color: var(--color-text-secondary);
-      flex-wrap: wrap;
-    }
-    .pm2-process-meta span {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.125rem;
-    }
-    .pm2-process-actions {
-      margin-top: 0.25rem;
-      display: flex;
-      gap: 0.25rem;
-    }
-    .pm2-btn {
-      padding: 0.125rem 0.375rem;
-      font-size: 0.7rem;
-      border-radius: 0.25rem;
-      border: 1px solid var(--color-border);
-      background: var(--color-bg-primary);
-      color: var(--color-text-primary);
-      cursor: pointer;
-      transition: all 0.15s;
-    }
-    .pm2-btn:hover {
-      background: var(--color-primary);
-      color: white;
-      border-color: var(--color-primary);
-    }
-    .pm2-btn.danger:hover {
-      background: var(--color-error);
-      border-color: var(--color-error);
-    }
-    .pm2-loading, .pm2-empty, .pm2-error {
-      padding: 0.75rem;
-      text-align: center;
-      color: var(--color-text-secondary);
-      font-size: 0.8rem;
-    }
-    @keyframes slideIn {
-      from { transform: translateX(100%); opacity: 0; }
-      to { transform: translateX(0); opacity: 1; }
-    }
-    @keyframes fadeOut {
-      from { opacity: 1; }
-      to { opacity: 0; }
-    }
-    .pm2-logs-modal {
-      position: fixed;
-      top: 0; left: 0; right: 0; bottom: 0;
-      background: rgba(0,0,0,0.5);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1000;
-      padding: 1rem;
-    }
-    .pm2-logs-content {
-      background: var(--color-bg-primary);
-      border-radius: 0.5rem;
-      width: 100%;
-      max-width: 800px;
-      max-height: 80vh;
-      display: flex;
-      flex-direction: column;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-    }
-    .pm2-logs-header {
-      padding: 0.75rem 1rem;
-      border-bottom: 1px solid var(--color-border);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-weight: 600;
-    }
-    .pm2-logs-body {
-      flex: 1;
-      overflow-y: auto;
-      padding: 0.75rem 1rem;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      font-size: 0.75rem;
-      white-space: pre-wrap;
-      background: var(--color-bg-code);
-      color: #e6edf3;
-    }
-    .pm2-logs-footer {
-      padding: 0.5rem 1rem;
-      border-top: 1px solid var(--color-border);
-      display: flex;
-      justify-content: flex-end;
-      gap: 0.5rem;
-    }
-
-    /* ===== RESPONSIVE: TABLET ===== */
-    @media (min-width: 769px) and (max-width: 1024px) {
-      :root { --sidebar-width: 260px; }
-      .messages-wrapper { padding: 0.5rem 1rem; }
-      .input-section { padding: 0.5rem; }
-    }
-
-    /* ===== SVG ICON SIZING (Tailwind utilities not loaded) ===== */
-    .block-text svg, .block-code svg, .block-thinking svg,
-    .block-tool-use svg, .block-tool-result svg, .block-image svg,
-    .block-bash svg, .block-system svg, .block-generic svg,
-    .block-error svg, .block-result svg,
-    .event-streaming-start svg, .event-streaming-complete svg,
-    .event-file-read svg, .event-file-write svg,
-    .event-git-status svg, .event-command svg, .event-error svg,
-    .event-tool-use svg, .event-generic svg {
-      width: 1.25rem;
-      height: 1.25rem;
-      flex-shrink: 0;
-    }
-
-    .icon-sm svg { width: 1rem !important; height: 1rem !important; }
-    .icon-lg svg { width: 1.5rem !important; height: 1.5rem !important; }
-
-    /* ===== STREAMING BLOCK STYLES ===== */
-    .block-text {
-      margin-bottom: 0;
-      padding: 0.5rem 0.75rem;
-      border-radius: 0.5rem;
-      line-height: 1.5;
-      font-size: 0.9rem;
-    }
-
-    .block-text + .block-text {
-      margin-top: -0.25rem;
-      padding-top: 0;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-
-    .block-text:has(+ .block-text) {
-      margin-bottom: 0;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    .block-code {
-      margin-bottom: 0;
-      border-radius: 0.5rem;
-      overflow: hidden;
-    }
-
-    .block-code .code-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 0.5rem;
-      padding: 0.5rem 1rem;
-    }
-
-    .block-code .code-header .lang-badge {
-      font-size: 0.7rem;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      color: #9ca3af;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-
-    .block-code .copy-code-btn {
-      background: none;
-      border: none;
-      color: #9ca3af;
-      cursor: pointer;
-      padding: 0.25rem;
-      border-radius: 0.25rem;
-      display: flex;
-      align-items: center;
-      transition: all 0.15s;
-    }
-
-    .block-code .copy-code-btn:hover { color: #e5e7eb; background: #374151; }
-
-    .block-code pre {
-      margin: 0;
-      padding: 0.625rem 0.75rem;
-      background: #111827;
-      color: #e5e7eb;
-      overflow-x: auto;
-      font-size: 0.8rem;
-      line-height: 1.5;
-    }
-
-    .block-thinking {
-      margin-bottom: 0;
-      border-radius: 0.5rem;
-      background: var(--color-thinking-bg);
-      overflow: hidden;
-    }
-
-    html.dark .block-thinking { background: var(--color-thinking-bg); }
-
-    .block-thinking summary {
-      padding: 0.375rem 0.75rem;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-weight: 600;
-      font-size: 0.85rem;
-      color: #5b21b6;
-      user-select: none;
-      background: none;
-      border-radius: 0;
-    }
-
-    html.dark .block-thinking summary { color: #c4b5fd; }
-    .block-thinking summary:hover { }
-
-    .block-thinking .thinking-content {
-      padding: 0.375rem 0.75rem 0.75rem;
-      font-size: 0.85rem;
-      color: #5b21b6;
-      line-height: 1.6;
-    }
-    .block-thinking .thinking-content p { margin: 0.25rem 0; }
-    .block-thinking .thinking-content br { display: block; margin: 0.125rem 0; }
-    .block-thinking .thinking-content code { background: rgba(91,33,182,0.1); padding: 0.1rem 0.3rem; border-radius: 0.2rem; font-family: 'Monaco','Menlo','Ubuntu Mono',monospace; font-size: 0.8rem; }
-    .block-thinking .thinking-content strong { font-weight: 700; }
-    .block-thinking .thinking-content em { font-style: italic; opacity: 0.85; }
-    .block-thinking .thinking-content h2, .block-thinking .thinking-content h3 { margin: 0.5rem 0 0.25rem; font-size: 0.9rem; font-weight: 700; }
-    .block-thinking .thinking-content ul, .block-thinking .thinking-content ol { margin: 0.25rem 0 0.25rem 1.25rem; padding: 0; }
-    .block-thinking .thinking-content li { margin: 0.125rem 0; }
-    .block-thinking .thinking-content blockquote { margin: 0.25rem 0 0.25rem 0; padding: 0.25rem 0.75rem; border-left: 3px solid #a78bfa; opacity: 0.85; }
-
-    html.dark .block-thinking .thinking-content { color: #c4b5fd; }
-    html.dark .block-thinking .thinking-content code { background: rgba(196,181,253,0.15); }
-    html.dark .block-thinking .thinking-content blockquote { border-left-color: #7c3aed; }
-
-    /* --- Tool Use Block --- */
-    .block-tool-use {
-      margin-bottom: 0;
-      border-radius: 0.5rem;
-      overflow: hidden;
-    }
-
-    html.dark .block-tool-use { }
-
-    .block-tool-use .tool-header {
-      padding: 0.375rem 0.75rem;
-      display: flex;
-      align-items: center;
-      gap: 0.375rem;
-    }
-
-    html.dark .block-tool-use .tool-header { }
-
-    .block-tool-use .tool-header .tool-icon {
-      display: flex;
-      align-items: center;
-      color: #0891b2;
-    }
-
-    html.dark .block-tool-use .tool-header .tool-icon { color: #22d3ee; }
-
-    .block-tool-use .tool-header .tool-name {
-      font-weight: 600;
-      font-size: 0.85rem;
-      color: #155e75;
-    }
-
-    html.dark .block-tool-use .tool-header .tool-name { color: #67e8f9; }
-
-    .block-tool-use .tool-header .tool-name code {
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      padding: 0.125rem 0.5rem;
-      border-radius: 0.25rem;
-      font-size: 0.8rem;
-    }
-
-    html.dark .block-tool-use .tool-header .tool-name code { }
-
-    .block-tool-use .tool-params {
-      padding: 0.5rem 0.75rem;
-    }
-
-    .block-tool-use .tool-params .param-label {
-      font-size: 0.7rem;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: #0e7490;
-      font-weight: 600;
-      margin-bottom: 0.375rem;
-    }
-
-    html.dark .block-tool-use .tool-params .param-label { color: #22d3ee; }
-
-    /* Tool parameter display styles */
-    .tool-param-file {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.5rem 0.75rem;
-      background: var(--color-bg-primary);
-      border-radius: 0.375rem;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      font-size: 0.8rem;
-      color: var(--color-text-primary);
-      overflow-x: auto;
-    }
-
-    .tool-param-file .file-icon { color: #0891b2; flex-shrink: 0; font-size: 1rem; }
-    .tool-param-file .file-dir { color: var(--color-text-secondary); }
-    .tool-param-file .file-name { font-weight: 600; color: var(--color-text-primary); }
-
-    .tool-param-command {
-      background: #111827;
-      border-radius: 0.375rem;
-      padding: 0.625rem 0.875rem;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      font-size: 0.8rem;
-      color: #e5e7eb;
-      overflow-x: auto;
-      display: flex;
-      align-items: flex-start;
-      gap: 0.5rem;
-    }
-
-    .tool-param-command .prompt-char { color: #34d399; font-weight: 700; flex-shrink: 0; }
-    .tool-param-command .command-text { white-space: pre-wrap; word-break: break-all; }
-
-    .tool-param-diff {
-      border-radius: 0.375rem;
-      overflow: hidden;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      font-size: 0.75rem;
-    }
-
-    .tool-param-diff .diff-header {
-      padding: 0.375rem 0.75rem;
-      background: var(--color-bg-secondary);
-      font-weight: 600;
-      font-size: 0.7rem;
-      text-transform: uppercase;
-      letter-spacing: 0.03em;
-      color: var(--color-text-secondary);
-    }
-
-    .tool-param-diff .diff-old {
-      padding: 0.5rem 0.75rem;
-      background: #fef2f2;
-      color: #991b1b;
-      white-space: pre-wrap;
-      word-break: break-all;
-      max-height: 200px;
-      overflow-y: auto;
-    }
-
-    html.dark .tool-param-diff .diff-old { background: #1c0f0f; color: #fca5a5; }
-
-    .tool-param-diff .diff-new {
-      padding: 0.5rem 0.75rem;
-      background: #f0fdf4;
-      color: #166534;
-      white-space: pre-wrap;
-      word-break: break-all;
-      max-height: 200px;
-      overflow-y: auto;
-    }
-
-    html.dark .tool-param-diff .diff-new { background: #0a1f0f; color: #86efac; }
-
-    .tool-param-query {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.5rem 0.75rem;
-      background: var(--color-bg-primary);
-      border-radius: 0.375rem;
-      font-size: 0.85rem;
-    }
-    .tool-param-query .query-icon { flex-shrink: 0; font-size: 1rem; }
-
-    .tool-param-url {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.5rem 0.75rem;
-      background: var(--color-bg-primary);
-      border-radius: 0.375rem;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      font-size: 0.8rem;
-      color: #2563eb;
-      word-break: break-all;
-    }
-
-    html.dark .tool-param-url { color: #60a5fa; }
-    .tool-param-url .url-icon { flex-shrink: 0; font-size: 1rem; }
-
-    .tool-param-todos {
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
-    }
-
-    .tool-param-todos .todo-item {
-      display: flex;
-      align-items: flex-start;
-      gap: 0.5rem;
-      padding: 0.375rem 0.5rem;
-      border-radius: 0.25rem;
-      font-size: 0.8rem;
-      background: var(--color-bg-primary);
-    }
-
-    .tool-param-todos .todo-status {
-      flex-shrink: 0;
-      font-size: 0.85rem;
-      margin-top: 0.05rem;
-    }
-
-    .tool-param-todos .todo-text { flex: 1; line-height: 1.4; }
-
-    .tool-param-json {
-      background: var(--color-bg-primary);
-      border-radius: 0.375rem;
-      overflow: hidden;
-    }
-
-    .tool-param-json pre {
-      margin: 0;
-      padding: 0.625rem 0.875rem;
-      font-size: 0.75rem;
-      overflow-x: auto;
-      max-height: 200px;
-      overflow-y: auto;
-      white-space: pre-wrap;
-      word-break: break-all;
-    }
-
-    .tool-param-content-preview {
-      border-radius: 0.375rem;
-      overflow: hidden;
-    }
-
-    .tool-param-content-preview .preview-header {
-      padding: 0.375rem 0.75rem;
-      background: var(--color-bg-secondary);
-      font-size: 0.7rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.03em;
-      color: var(--color-text-secondary);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .tool-param-content-preview .preview-body {
-      padding: 0.5rem 0.75rem;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      font-size: 0.75rem;
-      max-height: 200px;
-      overflow-y: auto;
-      white-space: pre-wrap;
-      word-break: break-all;
-      background: var(--color-bg-code);
-      color: #d1d5db;
-    }
-
-    .tool-param-content-preview .preview-truncated {
-      padding: 0.25rem 0.75rem;
-      font-size: 0.7rem;
-      color: var(--color-text-secondary);
-      background: var(--color-bg-secondary);
-      text-align: center;
-    }
-
-    /* --- Folded Tool Use (neutral base, colored by block-type-* classes) --- */
-    .folded-tool {
-      margin: 0;
-      border-radius: 0.375rem;
-      overflow: hidden;
-    }
-    html.dark .folded-tool {
-    }
-    .folded-tool-bar {
-      display: flex;
-      align-items: center;
-      gap: 0.375rem;
-      padding: 0.4rem 0.75rem;
-      cursor: pointer;
-      user-select: none;
-      list-style: none;
-      font-size: 0.85rem;
-      line-height: 1.3;
-      transition: background 0.15s;
-    }
-    html.dark .folded-tool-bar {
-    }
-    .folded-tool-bar::-webkit-details-marker { display: none; }
-    .folded-tool-bar::marker { display: none; content: ''; }
-    .folded-tool-bar::before {
-      content: '\25b6';
-      font-size: 0.5rem;
-      margin-right: 0.125rem;
-      display: inline-block;
-      transition: transform 0.15s;
-      color: #6b7280;
-      flex-shrink: 0;
-    }
-    html.dark .folded-tool-bar::before { color: #a3a3a3; }
-    .folded-tool[open] > .folded-tool-bar::before { transform: rotate(90deg); }
-    .folded-tool-bar:hover { background: #d1d5db; }
-    html.dark .folded-tool-bar:hover { background: #525252; }
-    .folded-tool-icon {
-      display: flex;
-      align-items: center;
-      color: #6b7280;
-      width: 1rem;
-      height: 1rem;
-      flex-shrink: 0;
-    }
-    html.dark .folded-tool-icon { color: #a3a3a3; }
-    .folded-tool-icon svg { width: 1rem; height: 1rem; }
-    .folded-tool-name {
-      font-weight: 600;
-      color: #374151;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      font-size: 0.8rem;
-      flex-shrink: 0;
-    }
-    html.dark .folded-tool-name { color: #d4d4d4; }
-    .folded-tool-desc {
-      color: #6b7280;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      font-size: 0.8rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      flex: 1;
-      min-width: 0;
-      opacity: 0.8;
-    }
-    html.dark .folded-tool-desc { color: #a3a3a3; }
-    .folded-tool-body {
-      padding: 0.5rem 0.75rem;
-      font-size: 0.75rem;
-      border-top: 1px solid #d1d5db;
-    }
-    html.dark .folded-tool-body { border-top-color: #525252; }
-    .folded-tool-body .tool-input-pre {
-      margin: 0;
-      padding: 0.375rem 0.5rem;
-      font-size: 0.7rem;
-    }
-
-    /* --- Error variant of folded-tool --- */
-    .folded-tool.folded-tool-error {
-      background: #fef2f2;
-    }
-    html.dark .folded-tool.folded-tool-error {
-      background: #1c0f0f;
-    }
-    .folded-tool-error > .folded-tool-bar {
-      background: #fee2e2;
-    }
-    html.dark .folded-tool-error > .folded-tool-bar {
-      background: #2c1010;
-    }
-    .folded-tool-error > .folded-tool-bar::before { color: #ef4444; }
-    html.dark .folded-tool-error > .folded-tool-bar::before { color: #f87171; }
-    .folded-tool-error > .folded-tool-bar:hover { background: #fecaca; }
-    html.dark .folded-tool-error > .folded-tool-bar:hover { background: #451a1a; }
-    .folded-tool-error .folded-tool-icon { color: #ef4444; }
-    html.dark .folded-tool-error .folded-tool-icon { color: #f87171; }
-    .folded-tool-error .folded-tool-name { color: #991b1b; }
-    html.dark .folded-tool-error .folded-tool-name { color: #fca5a5; }
-    .folded-tool-error .folded-tool-desc { color: #b91c1c; }
-    html.dark .folded-tool-error .folded-tool-desc { color: #f87171; }
-    .folded-tool-error > .folded-tool-body { border-top-color: #fecaca; }
-    html.dark .folded-tool-error > .folded-tool-body { border-top-color: #7f1d1d; }
-
-    /* --- Info variant of folded-tool (system blocks) --- */
-    .folded-tool.folded-tool-info {
-      background: #eef2ff;
-    }
-    html.dark .folded-tool.folded-tool-info {
-      background: #15103a;
-    }
-    .folded-tool-info > .folded-tool-bar {
-      background: #e0e7ff;
-    }
-    html.dark .folded-tool-info > .folded-tool-bar {
-      background: #1e1b4b;
-    }
-    .folded-tool-info > .folded-tool-bar::before { color: #6366f1; }
-    html.dark .folded-tool-info > .folded-tool-bar::before { color: #a5b4fc; }
-    .folded-tool-info > .folded-tool-bar:hover { background: #c7d2fe; }
-    html.dark .folded-tool-info > .folded-tool-bar:hover { background: #312e81; }
-    .folded-tool-info .folded-tool-icon { color: #6366f1; }
-    html.dark .folded-tool-info .folded-tool-icon { color: #a5b4fc; }
-    .folded-tool-info .folded-tool-name { color: #3730a3; }
-    html.dark .folded-tool-info .folded-tool-name { color: #c7d2fe; }
-    .folded-tool-info .folded-tool-desc { color: #4f46e5; }
-    html.dark .folded-tool-info .folded-tool-desc { color: #a5b4fc; }
-    .folded-tool-info > .folded-tool-body { border-top-color: #c7d2fe; }
-    html.dark .folded-tool-info > .folded-tool-body { border-top-color: #3730a3; }
-
-    /* --- Per-block-type unique colored backgrounds (removed) --- */
-
-    /* --- Per-tool-name header colors (tool-color-*) --- */
-    .tool-color-read.folded-tool > .folded-tool-bar { }
-    html.dark .tool-color-read.folded-tool > .folded-tool-bar { }
-    .tool-color-read.folded-tool > .folded-tool-bar:hover { }
-    html.dark .tool-color-read.folded-tool > .folded-tool-bar:hover { }
-    .tool-color-read.folded-tool > .folded-tool-bar::before { color: #2563eb; }
-    html.dark .tool-color-read.folded-tool > .folded-tool-bar::before { color: #60a5fa; }
-    .tool-color-read .folded-tool-icon { color: #2563eb; }
-    html.dark .tool-color-read .folded-tool-icon { color: #60a5fa; }
-    .tool-color-read .folded-tool-name { color: #1e40af; }
-    html.dark .tool-color-read .folded-tool-name { color: #93bbfd; }
-    .tool-color-read .folded-tool-desc { color: #1d4ed8; }
-    html.dark .tool-color-read .folded-tool-desc { color: #60a5fa; }
-    .tool-color-read > .folded-tool-body { border-top-color: #bfdbfe; }
-    html.dark .tool-color-read > .folded-tool-body { border-top-color: #1e3a5f; }
-
-    .tool-color-write.folded-tool > .folded-tool-bar { }
-    html.dark .tool-color-write.folded-tool > .folded-tool-bar { }
-    .tool-color-write.folded-tool > .folded-tool-bar:hover { }
-    html.dark .tool-color-write.folded-tool > .folded-tool-bar:hover { }
-    .tool-color-write.folded-tool > .folded-tool-bar::before { color: #d97706; }
-    html.dark .tool-color-write.folded-tool > .folded-tool-bar::before { color: #fbbf24; }
-    .tool-color-write .folded-tool-icon { color: #d97706; }
-    html.dark .tool-color-write .folded-tool-icon { color: #fbbf24; }
-    .tool-color-write .folded-tool-name { color: #92400e; }
-    html.dark .tool-color-write .folded-tool-name { color: #fcd34d; }
-    .tool-color-write .folded-tool-desc { color: #b45309; }
-    html.dark .tool-color-write .folded-tool-desc { color: #fbbf24; }
-    .tool-color-write > .folded-tool-body { border-top-color: #fde68a; }
-    html.dark .tool-color-write > .folded-tool-body { border-top-color: #422006; }
-
-    .tool-color-edit.folded-tool > .folded-tool-bar { }
-    html.dark .tool-color-edit.folded-tool > .folded-tool-bar { }
-    .tool-color-edit.folded-tool > .folded-tool-bar:hover { }
-    html.dark .tool-color-edit.folded-tool > .folded-tool-bar:hover { }
-    .tool-color-edit.folded-tool > .folded-tool-bar::before { color: #7c3aed; }
-    html.dark .tool-color-edit.folded-tool > .folded-tool-bar::before { color: #a78bfa; }
-    .tool-color-edit .folded-tool-icon { color: #7c3aed; }
-    html.dark .tool-color-edit .folded-tool-icon { color: #a78bfa; }
-    .tool-color-edit .folded-tool-name { color: #5b21b6; }
-    html.dark .tool-color-edit .folded-tool-name { color: #c4b5fd; }
-    .tool-color-edit .folded-tool-desc { color: #6d28d9; }
-    html.dark .tool-color-edit .folded-tool-desc { color: #a78bfa; }
-    .tool-color-edit > .folded-tool-body { border-top-color: #ddd6fe; }
-    html.dark .tool-color-edit > .folded-tool-body { border-top-color: #2e1065; }
-
-    .tool-color-bash.folded-tool > .folded-tool-bar { }
-    html.dark .tool-color-bash.folded-tool > .folded-tool-bar { }
-    .tool-color-bash.folded-tool > .folded-tool-bar:hover { }
-    html.dark .tool-color-bash.folded-tool > .folded-tool-bar:hover { }
-    .tool-color-bash.folded-tool > .folded-tool-bar::before { color: #475569; }
-    html.dark .tool-color-bash.folded-tool > .folded-tool-bar::before { color: #94a3b8; }
-    .tool-color-bash .folded-tool-icon { color: #475569; }
-    html.dark .tool-color-bash .folded-tool-icon { color: #94a3b8; }
-    .tool-color-bash .folded-tool-name { color: #334155; }
-    html.dark .tool-color-bash .folded-tool-name { color: #cbd5e1; }
-    .tool-color-bash .folded-tool-desc { color: #475569; }
-    html.dark .tool-color-bash .folded-tool-desc { color: #94a3b8; }
-    .tool-color-bash > .folded-tool-body { border-top-color: #cbd5e1; }
-    html.dark .tool-color-bash > .folded-tool-body { border-top-color: #334155; }
-
-    .tool-color-glob.folded-tool > .folded-tool-bar { }
-    html.dark .tool-color-glob.folded-tool > .folded-tool-bar { }
-    .tool-color-glob.folded-tool > .folded-tool-bar:hover { }
-    html.dark .tool-color-glob.folded-tool > .folded-tool-bar:hover { }
-    .tool-color-glob.folded-tool > .folded-tool-bar::before { color: #059669; }
-    html.dark .tool-color-glob.folded-tool > .folded-tool-bar::before { color: #34d399; }
-    .tool-color-glob .folded-tool-icon { color: #059669; }
-    html.dark .tool-color-glob .folded-tool-icon { color: #34d399; }
-    .tool-color-glob .folded-tool-name { color: #065f46; }
-    html.dark .tool-color-glob .folded-tool-name { color: #6ee7b7; }
-    .tool-color-glob .folded-tool-desc { color: #047857; }
-    html.dark .tool-color-glob .folded-tool-desc { color: #34d399; }
-    .tool-color-glob > .folded-tool-body { border-top-color: #a7f3d0; }
-    html.dark .tool-color-glob > .folded-tool-body { border-top-color: #064e3b; }
-
-    .tool-color-grep.folded-tool > .folded-tool-bar { }
-    html.dark .tool-color-grep.folded-tool > .folded-tool-bar { }
-    .tool-color-grep.folded-tool > .folded-tool-bar:hover { }
-    html.dark .tool-color-grep.folded-tool > .folded-tool-bar:hover { }
-    .tool-color-grep.folded-tool > .folded-tool-bar::before { color: #e11d48; }
-    html.dark .tool-color-grep.folded-tool > .folded-tool-bar::before { color: #fb7185; }
-    .tool-color-grep .folded-tool-icon { color: #e11d48; }
-    html.dark .tool-color-grep .folded-tool-icon { color: #fb7185; }
-    .tool-color-grep .folded-tool-name { color: #9f1239; }
-    html.dark .tool-color-grep .folded-tool-name { color: #fda4af; }
-    .tool-color-grep .folded-tool-desc { color: #be123c; }
-    html.dark .tool-color-grep .folded-tool-desc { color: #fb7185; }
-    .tool-color-grep > .folded-tool-body { border-top-color: #fecdd3; }
-    html.dark .tool-color-grep > .folded-tool-body { border-top-color: #4c0519; }
-
-    .tool-color-web.folded-tool > .folded-tool-bar { }
-    html.dark .tool-color-web.folded-tool > .folded-tool-bar { }
-    .tool-color-web.folded-tool > .folded-tool-bar:hover { }
-    html.dark .tool-color-web.folded-tool > .folded-tool-bar:hover { }
-    .tool-color-web.folded-tool > .folded-tool-bar::before { color: #0284c7; }
-    html.dark .tool-color-web.folded-tool > .folded-tool-bar::before { color: #38bdf8; }
-    .tool-color-web .folded-tool-icon { color: #0284c7; }
-    html.dark .tool-color-web .folded-tool-icon { color: #38bdf8; }
-    .tool-color-web .folded-tool-name { color: #075985; }
-    html.dark .tool-color-web .folded-tool-name { color: #7dd3fc; }
-    .tool-color-web .folded-tool-desc { color: #0369a1; }
-    html.dark .tool-color-web .folded-tool-desc { color: #38bdf8; }
-    .tool-color-web > .folded-tool-body { border-top-color: #bae6fd; }
-    html.dark .tool-color-web > .folded-tool-body { border-top-color: #0c4a6e; }
-
-    .tool-color-todo.folded-tool > .folded-tool-bar { }
-    html.dark .tool-color-todo.folded-tool > .folded-tool-bar { }
-    .tool-color-todo.folded-tool > .folded-tool-bar:hover { }
-    html.dark .tool-color-todo.folded-tool > .folded-tool-bar:hover { }
-    .tool-color-todo.folded-tool > .folded-tool-bar::before { color: #ea580c; }
-    html.dark .tool-color-todo.folded-tool > .folded-tool-bar::before { color: #fb923c; }
-    .tool-color-todo .folded-tool-icon { color: #ea580c; }
-    html.dark .tool-color-todo .folded-tool-icon { color: #fb923c; }
-    .tool-color-todo .folded-tool-name { color: #9a3412; }
-    html.dark .tool-color-todo .folded-tool-name { color: #fdba74; }
-    .tool-color-todo .folded-tool-desc { color: #c2410c; }
-    html.dark .tool-color-todo .folded-tool-desc { color: #fb923c; }
-    .tool-color-todo > .folded-tool-body { border-top-color: #fed7aa; }
-    html.dark .tool-color-todo > .folded-tool-body { border-top-color: #431407; }
-
-    .tool-color-task.folded-tool > .folded-tool-bar { }
-    html.dark .tool-color-task.folded-tool > .folded-tool-bar { }
-    .tool-color-task.folded-tool > .folded-tool-bar:hover { }
-    html.dark .tool-color-task.folded-tool > .folded-tool-bar:hover { }
-    .tool-color-task.folded-tool > .folded-tool-bar::before { color: #4f46e5; }
-    html.dark .tool-color-task.folded-tool > .folded-tool-bar::before { color: #818cf8; }
-    .tool-color-task .folded-tool-icon { color: #4f46e5; }
-    html.dark .tool-color-task .folded-tool-icon { color: #818cf8; }
-    .tool-color-task .folded-tool-name { color: #3730a3; }
-    html.dark .tool-color-task .folded-tool-name { color: #a5b4fc; }
-    .tool-color-task .folded-tool-desc { color: #4338ca; }
-    html.dark .tool-color-task .folded-tool-desc { color: #818cf8; }
-    .tool-color-task > .folded-tool-body { border-top-color: #c7d2fe; }
-    html.dark .tool-color-task > .folded-tool-body { border-top-color: #1e1b4b; }
-
-    .tool-color-default.folded-tool > .folded-tool-bar { }
-    html.dark .tool-color-default.folded-tool > .folded-tool-bar { }
-    .tool-color-default.folded-tool > .folded-tool-bar:hover { }
-    html.dark .tool-color-default.folded-tool > .folded-tool-bar:hover { }
-    .tool-color-default.folded-tool > .folded-tool-bar::before { color: #0891b2; }
-    html.dark .tool-color-default.folded-tool > .folded-tool-bar::before { color: #22d3ee; }
-    .tool-color-default .folded-tool-icon { color: #0891b2; }
-    html.dark .tool-color-default .folded-tool-icon { color: #22d3ee; }
-    .tool-color-default .folded-tool-name { color: #155e75; }
-    html.dark .tool-color-default .folded-tool-name { color: #67e8f9; }
-    .tool-color-default .folded-tool-desc { color: #0e7490; }
-    html.dark .tool-color-default .folded-tool-desc { color: #22d3ee; }
-    .tool-color-default > .folded-tool-body { border-top-color: #a5f3fc; }
-    html.dark .tool-color-default > .folded-tool-body { border-top-color: #164e63; }
-
-    /* Execute - Purple */
-    .tool-color-execute.folded-tool > .folded-tool-bar { }
-    html.dark .tool-color-execute.folded-tool > .folded-tool-bar { }
-    .tool-color-execute.folded-tool > .folded-tool-bar:hover { }
-    html.dark .tool-color-execute.folded-tool > .folded-tool-bar:hover { }
-    .tool-color-execute.folded-tool > .folded-tool-bar::before { color: #a855f7; }
-    html.dark .tool-color-execute.folded-tool > .folded-tool-bar::before { color: #d8b4fe; }
-    .tool-color-execute .folded-tool-icon { color: #a855f7; }
-    html.dark .tool-color-execute .folded-tool-icon { color: #d8b4fe; }
-    .tool-color-execute .folded-tool-name { color: #6b21a8; }
-    html.dark .tool-color-execute .folded-tool-name { color: #e879f9; }
-    .tool-color-execute .folded-tool-desc { color: #7e22ce; }
-    html.dark .tool-color-execute .folded-tool-desc { color: #d8b4fe; }
-    .tool-color-execute > .folded-tool-body { border-top-color: #e9d5ff; }
-    html.dark .tool-color-execute > .folded-tool-body { border-top-color: #4c1d95; }
-
-    /* Sleep - Orange */
-    .tool-color-sleep.folded-tool > .folded-tool-bar { }
-    html.dark .tool-color-sleep.folded-tool > .folded-tool-bar { }
-    .tool-color-sleep.folded-tool > .folded-tool-bar:hover { }
-    html.dark .tool-color-sleep.folded-tool > .folded-tool-bar:hover { }
-    .tool-color-sleep.folded-tool > .folded-tool-bar::before { color: #f97316; }
-    html.dark .tool-color-sleep.folded-tool > .folded-tool-bar::before { color: #fb923c; }
-    .tool-color-sleep .folded-tool-icon { color: #f97316; }
-    html.dark .tool-color-sleep .folded-tool-icon { color: #fb923c; }
-    .tool-color-sleep .folded-tool-name { color: #7c2d12; }
-    html.dark .tool-color-sleep .folded-tool-name { color: #fed7aa; }
-    .tool-color-sleep .folded-tool-desc { color: #b45309; }
-    html.dark .tool-color-sleep .folded-tool-desc { color: #fb923c; }
-    .tool-color-sleep > .folded-tool-body { border-top-color: #fdba74; }
-    html.dark .tool-color-sleep > .folded-tool-body { border-top-color: #7c2d12; }
-
-    /* Search - Green */
-    .tool-color-search.folded-tool > .folded-tool-bar { }
-    html.dark .tool-color-search.folded-tool > .folded-tool-bar { }
-    .tool-color-search.folded-tool > .folded-tool-bar:hover { }
-    html.dark .tool-color-search.folded-tool > .folded-tool-bar:hover { }
-    .tool-color-search.folded-tool > .folded-tool-bar::before { color: #16a34a; }
-    html.dark .tool-color-search.folded-tool > .folded-tool-bar::before { color: #86efac; }
-    .tool-color-search .folded-tool-icon { color: #16a34a; }
-    html.dark .tool-color-search .folded-tool-icon { color: #86efac; }
-    .tool-color-search .folded-tool-name { color: #15803d; }
-    html.dark .tool-color-search .folded-tool-name { color: #bbf7d0; }
-    .tool-color-search .folded-tool-desc { color: #166534; }
-    html.dark .tool-color-search .folded-tool-desc { color: #86efac; }
-    .tool-color-search > .folded-tool-body { border-top-color: #bbf7d0; }
-    html.dark .tool-color-search > .folded-tool-body { border-top-color: #16a34a; }
-
-    /* Skill - Yellow/Amber */
-    .tool-color-skill.folded-tool > .folded-tool-bar { }
-    html.dark .tool-color-skill.folded-tool > .folded-tool-bar { }
-    .tool-color-skill.folded-tool > .folded-tool-bar:hover { }
-    html.dark .tool-color-skill.folded-tool > .folded-tool-bar:hover { }
-    .tool-color-skill.folded-tool > .folded-tool-bar::before { color: #d97706; }
-    html.dark .tool-color-skill.folded-tool > .folded-tool-bar::before { color: #fbbf24; }
-    .tool-color-skill .folded-tool-icon { color: #d97706; }
-    html.dark .tool-color-skill .folded-tool-icon { color: #fbbf24; }
-    .tool-color-skill .folded-tool-name { color: #92400e; }
-    html.dark .tool-color-skill .folded-tool-name { color: #fcd34d; }
-    .tool-color-skill .folded-tool-desc { color: #b45309; }
-    html.dark .tool-color-skill .folded-tool-desc { color: #fbbf24; }
-    .tool-color-skill > .folded-tool-body { border-top-color: #fde68a; }
-    html.dark .tool-color-skill > .folded-tool-body { border-top-color: #78350f; }
-
-    .block-type-tool_result .tool-result-status { }
-    html.dark .block-type-tool_result .tool-result-status { }
-    .block-type-tool_result .folded-tool-icon { color: #16a34a; }
-    html.dark .block-type-tool_result .folded-tool-icon { color: #4ade80; }
-    .block-type-tool_result .folded-tool-name { color: #374151; }
-    html.dark .block-type-tool_result .folded-tool-name { color: #d4d4d4; }
-    .block-type-tool_result > .folded-tool-body { border-top-color: #d1d5db; }
-    html.dark .block-type-tool_result > .folded-tool-body { border-top-color: #525252; }
-    .block-type-tool_result.tool-result-error { }
-    html.dark .block-type-tool_result.tool-result-error { }
-    .block-type-tool_result.tool-result-error .tool-result-status { }
-    html.dark .block-type-tool_result.tool-result-error .tool-result-status { }
-    .block-type-tool_result.tool-result-error .folded-tool-icon { color: #dc2626; }
-    html.dark .block-type-tool_result.tool-result-error .folded-tool-icon { color: #f87171; }
-    .block-type-tool_result.tool-result-error .folded-tool-name { color: #374151; }
-    html.dark .block-type-tool_result.tool-result-error .folded-tool-name { color: #d4d4d4; }
-
-
-
-
-    .block-type-system { }
-    html.dark .block-type-system { }
-    .block-type-system.folded-tool > .folded-tool-bar { }
-    html.dark .block-type-system.folded-tool > .folded-tool-bar { }
-    .block-type-system.folded-tool > .folded-tool-bar:hover { }
-    html.dark .block-type-system.folded-tool > .folded-tool-bar:hover { }
-    .block-type-system.folded-tool > .folded-tool-bar::before { color: #6366f1; }
-    html.dark .block-type-system.folded-tool > .folded-tool-bar::before { color: #a5b4fc; }
-    .block-type-system .folded-tool-icon { color: #6366f1; }
-    html.dark .block-type-system .folded-tool-icon { color: #a5b4fc; }
-    .block-type-system .folded-tool-name { color: #3730a3; }
-    html.dark .block-type-system .folded-tool-name { color: #c7d2fe; }
-    .block-type-system .folded-tool-desc { color: #4f46e5; }
-    html.dark .block-type-system .folded-tool-desc { color: #a5b4fc; }
-    .block-type-system > .folded-tool-body { border-top-color: #c7d2fe; }
-    html.dark .block-type-system > .folded-tool-body { border-top-color: #3730a3; }
-
-    .block-type-result { }
-    html.dark .block-type-result { }
-    .block-type-result.folded-tool > .folded-tool-bar { }
-    html.dark .block-type-result.folded-tool > .folded-tool-bar { }
-    .block-type-result.folded-tool > .folded-tool-bar:hover { }
-    html.dark .block-type-result.folded-tool > .folded-tool-bar:hover { }
-    .block-type-result.folded-tool > .folded-tool-bar::before { color: #16a34a; }
-    html.dark .block-type-result.folded-tool > .folded-tool-bar::before { color: #4ade80; }
-    .block-type-result .folded-tool-icon { color: #16a34a; }
-    html.dark .block-type-result .folded-tool-icon { color: #4ade80; }
-    .block-type-result .folded-tool-name { color: #166534; }
-    html.dark .block-type-result .folded-tool-name { color: #86efac; }
-    .block-type-result .folded-tool-desc { color: #15803d; }
-    html.dark .block-type-result .folded-tool-desc { color: #4ade80; }
-    .block-type-result > .folded-tool-body { border-top-color: #bbf7d0; }
-    html.dark .block-type-result > .folded-tool-body { border-top-color: #166534; }
-
-    .block-type-error { }
-    html.dark .block-type-error { }
-    .block-type-error.folded-tool > .folded-tool-bar { }
-    html.dark .block-type-error.folded-tool > .folded-tool-bar { }
-    .block-type-error.folded-tool > .folded-tool-bar:hover { }
-    html.dark .block-type-error.folded-tool > .folded-tool-bar:hover { }
-    .block-type-error.folded-tool > .folded-tool-bar::before { color: #ef4444; }
-    html.dark .block-type-error.folded-tool > .folded-tool-bar::before { color: #f87171; }
-    .block-type-error .folded-tool-icon { color: #ef4444; }
-    html.dark .block-type-error .folded-tool-icon { color: #f87171; }
-    .block-type-error .folded-tool-name { color: #991b1b; }
-    html.dark .block-type-error .folded-tool-name { color: #fca5a5; }
-    .block-type-error .folded-tool-desc { color: #b91c1c; }
-    html.dark .block-type-error .folded-tool-desc { color: #f87171; }
-    .block-type-error > .folded-tool-body { border-top-color: #fecaca; }
-    html.dark .block-type-error > .folded-tool-body { border-top-color: #7f1d1d; }
-
-
-
-
-
-
-
-    /* --- Code block header (non-collapsible) --- */
-    .code-block-header {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.3rem 0.75rem;
-      background: #1f2937;
-      color: #9ca3af;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      font-size: 0.75rem;
-    }
-    .code-block-header .copy-code-btn {
-      margin-left: auto;
-      background: none;
-      border: none;
-      color: #6b7280;
-      cursor: pointer;
-      padding: 0.125rem;
-      border-radius: 0.25rem;
-      display: flex;
-      align-items: center;
-      transition: all 0.15s;
-    }
-    .code-block-header .copy-code-btn:hover { color: #e5e7eb; background: #4b5563; }
-    .code-block-header .copy-code-btn svg { width: 0.875rem; height: 0.875rem; }
-
-    /* --- Tool result success styling in body --- */
-    .tool-result-success .tool-result-status {
-      background: #e5e7eb;
-      padding: 0.4rem 0.75rem;
-    }
-    html.dark .tool-result-success .tool-result-status {
-      background: #404040;
-    }
-    .tool-result-success .folded-tool-icon { color: #16a34a; }
-    html.dark .tool-result-success .folded-tool-icon { color: #4ade80; }
-    .tool-result-success .folded-tool-name { color: #374151; font-weight: 600; }
-    html.dark .tool-result-success .folded-tool-name { color: #d4d4d4; }
-
-    /* --- Tool_use parent: has-success / has-error indicators (icon/arrow only, preserves tool colors) --- */
-    .folded-tool.has-success > .folded-tool-bar::before { color: #16a34a; }
-    html.dark .folded-tool.has-success > .folded-tool-bar::before { color: #4ade80; }
-
-    .folded-tool.has-error > .folded-tool-bar::before { color: #ef4444; }
-    html.dark .folded-tool.has-error > .folded-tool-bar::before { color: #f87171; }
-
-    /* --- Success/Error status icons in header --- */
-    .folded-tool.has-success > .folded-tool-bar .folded-tool-icon::after,
-    .folded-tool.has-error > .folded-tool-bar .folded-tool-icon::after {
-      content: '';
-      display: inline-block;
-      width: 1rem;
-      height: 1rem;
-      margin-left: 0.375rem;
-      background-size: contain;
-      background-repeat: no-repeat;
-      flex-shrink: 0;
-    }
-    .folded-tool.has-success > .folded-tool-bar .folded-tool-icon::after {
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='%2316a34a'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E");
-    }
-    html.dark .folded-tool.has-success > .folded-tool-bar .folded-tool-icon::after {
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='%234ade80'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E");
-    }
-    .folded-tool.has-error > .folded-tool-bar .folded-tool-icon::after {
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='%23ef4444'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z' clip-rule='evenodd'/%3E%3C/svg%3E");
-    }
-    html.dark .folded-tool.has-error > .folded-tool-bar .folded-tool-icon::after {
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='%23f87171'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z' clip-rule='evenodd'/%3E%3C/svg%3E");
-    }
-    .folded-tool-icon {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    /* --- Consecutive block joining --- */
-    .folded-tool + .folded-tool,
-    .block-tool-use + .block-tool-use {
-      margin-top: -1px;
-      border-radius: 0;
-    }
-    .folded-tool + .folded-tool > .folded-tool-bar,
-    .block-tool-use + .block-tool-use > .folded-tool-bar {
-      border-top: 1px solid rgba(0,0,0,0.06);
-    }
-    html.dark .folded-tool + .folded-tool > .folded-tool-bar,
-    html.dark .block-tool-use + .block-tool-use > .folded-tool-bar {
-      border-top: 1px solid rgba(255,255,255,0.06);
-    }
-    .folded-tool:first-child,
-    .block-tool-use:first-child {
-      border-radius: 0.375rem 0.375rem 0 0;
-    }
-    .folded-tool:last-child,
-    .block-tool-use:last-child {
-      border-radius: 0 0 0.375rem 0.375rem;
-    }
-    .folded-tool:only-child,
-    .block-tool-use:only-child {
-      border-radius: 0.375rem;
-    }
-
-    /* --- Inline Tool Result (nested inside tool_use) --- */
-    /* Tool Result Blocks - Folded by default with status icons */
-    .folded-tool.block-type-tool_result {
-      margin-bottom: 0.375rem;
-    }
-    .folded-tool.folded-tool-success {
-      background: #f0fdf4;
-    }
-    html.dark .folded-tool.folded-tool-success {
-      background: #0a1f0f;
-    }
-    .folded-tool.folded-tool-success > .folded-tool-bar {
-      background: #dcfce7;
-    }
-    html.dark .folded-tool.folded-tool-success > .folded-tool-bar {
-      background: #0f2b1a;
-    }
-    .folded-tool.folded-tool-success > .folded-tool-bar::before {
-      color: #16a34a;
-    }
-    html.dark .folded-tool.folded-tool-success > .folded-tool-bar::before {
-      color: #4ade80;
-    }
-
-    /* --- Tool Result Inlined into Tool Use --- */
-    .folded-tool-status {
-      display: flex;
-      align-items: center;
-      flex-shrink: 0;
-      margin-left: auto;
-      width: 1rem;
-      height: 1rem;
-    }
-    .folded-tool-status svg { width: 1rem; height: 1rem; }
-    .block-tool-use.tool-result-success .folded-tool-status { color: #16a34a; }
-    html.dark .block-tool-use.tool-result-success .folded-tool-status { color: #4ade80; }
-    .block-tool-use.tool-result-error .folded-tool-status { color: #ef4444; }
-    html.dark .block-tool-use.tool-result-error .folded-tool-status { color: #f87171; }
-    .folded-tool-result-content {
-      border-top: 1px solid #e5e7eb;
-      padding-top: 0.5rem;
-      margin-top: 0.5rem;
-    }
-    html.dark .folded-tool-result-content { border-top-color: #374151; }
-
-    /* --- Consecutive Block Joining --- */
-    .streaming-blocks > * + *,
-    .message-blocks > * + * {
-      margin-top: 0;
-    }
-    .streaming-blocks > *,
-    .message-blocks > * {
-      border-radius: 0;
-    }
-    .streaming-blocks > *:first-child,
-    .message-blocks > *:first-child {
-      border-top-left-radius: 0.375rem;
-      border-top-right-radius: 0.375rem;
-    }
-    .streaming-blocks > *:last-child,
-    .message-blocks > *:last-child {
-      border-bottom-left-radius: 0.375rem;
-      border-bottom-right-radius: 0.375rem;
-    }
-    .streaming-blocks > *:only-child,
-    .message-blocks > *:only-child {
-      border-radius: 0.375rem;
-    }
-
-    /* --- Collapsible Code Summary --- */
-    .collapsible-code {
-      margin: 0;
-      border-radius: 0.375rem;
-      overflow: hidden;
-      background: #1e293b;
-    }
-    .collapsible-code-summary {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.3rem 0.75rem;
-      cursor: pointer;
-      user-select: none;
-      list-style: none;
-      font-size: 0.75rem;
-      line-height: 1.3;
-      background: #1f2937;
-      color: #9ca3af;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      transition: background 0.15s;
-    }
-    .collapsible-code-summary::-webkit-details-marker { display: none; }
-    .collapsible-code-summary::marker { display: none; content: ''; }
-    .collapsible-code-summary::before {
-      content: '\25b6';
-      font-size: 0.5rem;
-      margin-right: 0.125rem;
-      display: inline-block;
-      transition: transform 0.15s;
-      color: #6b7280;
-      flex-shrink: 0;
-    }
-    .collapsible-code[open] > .collapsible-code-summary::before { transform: rotate(90deg); }
-    .collapsible-code-summary:hover { background: #374151; }
-    .collapsible-code-summary .copy-code-btn {
-      margin-left: auto;
-      background: none;
-      border: none;
-      color: #6b7280;
-      cursor: pointer;
-      padding: 0.125rem;
-      border-radius: 0.25rem;
-      display: flex;
-      align-items: center;
-      transition: all 0.15s;
-    }
-    .collapsible-code-summary .copy-code-btn:hover { color: #e5e7eb; background: #4b5563; }
-    .collapsible-code-summary .copy-code-btn svg { width: 0.875rem; height: 0.875rem; }
-    .collapsible-code-label {
-      font-size: 0.7rem;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-
-    /* --- Tool Result Block --- */
-    .block-tool-result {
-      margin-bottom: 0;
-      border-radius: 0.5rem;
-      overflow: hidden;
-    }
-
-    .block-tool-result.result-success { }
-    .block-tool-result.result-error { }
-    html.dark .block-tool-result.result-success { }
-    html.dark .block-tool-result.result-error { }
-
-    .block-tool-result .result-header {
-      padding: 0.3rem 0.75rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .block-tool-result.result-success .result-header { }
-    .block-tool-result.result-error .result-header { }
-    html.dark .block-tool-result.result-success .result-header { }
-    html.dark .block-tool-result.result-error .result-header { }
-
-    .block-tool-result .result-header .status-label {
-      display: flex;
-      align-items: center;
-      gap: 0.375rem;
-      font-weight: 600;
-      font-size: 0.8rem;
-    }
-
-    .block-tool-result.result-success .status-label { color: #166534; }
-    .block-tool-result.result-error .status-label { color: #991b1b; }
-    html.dark .block-tool-result.result-success .status-label { color: #86efac; }
-    html.dark .block-tool-result.result-error .status-label { color: #fca5a5; }
-
-    .block-tool-result .result-body {
-      padding: 0.375rem 0.75rem;
-      font-size: 0.8rem;
-      white-space: pre-wrap;
-      word-break: break-all;
-      overflow-x: auto;
-      max-height: 400px;
-      overflow-y: auto;
-      line-height: 1.5;
-    }
-
-    .block-tool-result.result-success .result-body { color: #14532d; }
-    .block-tool-result.result-error .result-body { color: #7f1d1d; }
-    html.dark .block-tool-result.result-success .result-body { color: #bbf7d0; }
-    html.dark .block-tool-result.result-error .result-body { color: #fecaca; }
-
-    .block-tool-result .result-body.collapsed { max-height: 150px; position: relative; }
-    .block-tool-result .result-body.collapsed::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 3rem;
-      background: linear-gradient(transparent, var(--color-bg-primary));
-      pointer-events: none;
-    }
-
-    .block-tool-result .expand-btn {
-      display: block;
-      width: 100%;
-      padding: 0.375rem;
-      background: var(--color-bg-secondary);
-      border: none;
-      cursor: pointer;
-      font-size: 0.75rem;
-      color: var(--color-primary);
-      font-weight: 500;
-      text-align: center;
-    }
-
-    .block-tool-result .expand-btn:hover { background: var(--color-border); }
-
-    .block-tool-result .result-id {
-      font-size: 0.65rem;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      opacity: 0.6;
-    }
-
-    /* --- Result Summary Block --- */
-    .block-result {
-      margin-bottom: 0;
-      border-radius: 0.5rem;
-      overflow: hidden;
-    }
-
-    .block-result.result-ok {
-    }
-
-    .block-result.result-err {
-    }
-
-    html.dark .block-result.result-ok { }
-    html.dark .block-result.result-err { }
-
-    .block-result .result-summary-header {
-      padding: 0.375rem 0.75rem;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    .block-result.result-ok .result-summary-header { color: #166534; }
-    .block-result.result-err .result-summary-header { color: #991b1b; }
-    html.dark .block-result.result-ok .result-summary-header { color: #86efac; }
-    html.dark .block-result.result-err .result-summary-header { color: #fca5a5; }
-
-    .block-result .result-summary-header .result-title { font-weight: 700; font-size: 0.9rem; }
-
-    .block-result .result-stats {
-      display: flex;
-      gap: 1.5rem;
-      padding: 0 0.75rem 0.375rem;
-      font-size: 0.8rem;
-      flex-wrap: wrap;
-    }
-
-    .block-result .result-stat {
-      display: flex;
-      align-items: center;
-      gap: 0.375rem;
-    }
-
-    .block-result .result-stat .stat-icon { font-size: 0.9rem; opacity: 0.7; }
-    .block-result .result-stat .stat-value { font-weight: 600; }
-    .block-result .result-stat .stat-label { color: var(--color-text-secondary); font-size: 0.75rem; }
-
-    .block-result .result-content {
-      padding: 0.375rem 0.75rem;
-      font-size: 0.85rem;
-      white-space: pre-wrap;
-      word-break: break-word;
-      max-height: 300px;
-      overflow-y: auto;
-      line-height: 1.5;
-    }
-
-    /* --- System Block --- */
-    .block-system {
-      margin-bottom: 0;
-      border-radius: 0.5rem;
-      overflow: hidden;
-    }
-
-    html.dark .block-system { }
-
-    .block-system .system-header {
-      padding: 0.375rem 0.75rem;
-      font-weight: 600;
-      font-size: 0.85rem;
-      color: #3730a3;
-    }
-
-    html.dark .block-system .system-header { color: #a5b4fc; }
-
-    .block-system .system-body {
-      padding: 0.375rem 0.75rem;
-      font-size: 0.8rem;
-      color: #3730a3;
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
-    }
-
-    html.dark .block-system .system-body { color: #c7d2fe; }
-
-    .block-system .system-body .sys-field { display: flex; align-items: baseline; gap: 0.5rem; }
-    .block-system .system-body .sys-label { font-weight: 600; flex-shrink: 0; min-width: 5rem; }
-    .block-system .system-body .sys-value { font-family: 'Monaco','Menlo','Ubuntu Mono', monospace; font-size: 0.75rem; }
-    .block-system .system-body .sys-value code { background: #c7d2fe; padding: 0.0625rem 0.375rem; border-radius: 0.25rem; }
-    html.dark .block-system .system-body .sys-value code { background: #312e81; }
-
-    .block-system .tools-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.25rem;
-      margin-top: 0.25rem;
-    }
-
-    .block-system .tools-list .tool-badge {
-      display: inline-block;
-      padding: 0.125rem 0.5rem;
-      background: #c7d2fe;
-      color: #3730a3;
-      border-radius: 1rem;
-      font-size: 0.65rem;
-      font-weight: 500;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-    }
-
-    html.dark .block-system .tools-list .tool-badge { background: #312e81; color: #a5b4fc; }
-
-    /* --- Bash Block --- */
-    .block-bash {
-      margin-bottom: 0;
-      border-radius: 0.5rem;
-      overflow: hidden;
-    }
-
-    .block-bash .bash-command {
-      padding: 0.375rem 0.75rem;
-      display: flex;
-      align-items: flex-start;
-      gap: 0.5rem;
-    }
-
-    .block-bash .bash-command .prompt { color: #34d399; font-weight: 700; flex-shrink: 0; }
-    .block-bash .bash-command code {
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      color: #e5e7eb;
-      font-size: 0.8rem;
-      overflow-x: auto;
-      flex: 1;
-    }
-
-    .block-bash .bash-output {
-      padding: 0.375rem 0.75rem;
-      color: #9ca3af;
-      font-size: 0.75rem;
-      overflow-x: auto;
-      white-space: pre-wrap;
-      max-height: 300px;
-      overflow-y: auto;
-    }
-
-    /* --- Generic Block --- */
-    .block-generic {
-      margin-bottom: 0;
-      padding: 0.5rem 0.75rem;
-      border-radius: 0.5rem;
-      background: var(--color-bg-secondary);
-    }
-
-    .block-generic .generic-type {
-      font-size: 0.7rem;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: var(--color-text-secondary);
-      font-weight: 600;
-      margin-bottom: 0.375rem;
-    }
-
-    .block-generic .generic-fields {
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
-      font-size: 0.8rem;
-    }
-
-    .block-generic .generic-field {
-      display: flex;
-      gap: 0.5rem;
-    }
-
-    .block-generic .generic-field .field-key {
-      font-weight: 600;
-      color: var(--color-text-secondary);
-      flex-shrink: 0;
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      font-size: 0.75rem;
-    }
-
-    .block-generic .generic-field .field-value {
-      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      font-size: 0.75rem;
-      word-break: break-all;
-    }
-
-    /* --- Error Block --- */
-    .block-error {
-      margin-bottom: 0;
-      padding: 0.5rem 0.75rem;
-      border-radius: 0.5rem;
-    }
-
-    html.dark .block-error { }
-
-    /* --- Image Block --- */
-    .block-image {
-      margin-bottom: 0;
-      border-radius: 0.5rem;
-      overflow: hidden;
-    }
-
-    .block-image img { max-width: 100%; height: auto; max-height: 24rem; object-fit: contain; display: block; }
-    .block-image .image-caption { padding: 0.5rem 0.75rem; background: var(--color-bg-secondary); font-size: 0.8rem; color: var(--color-text-secondary); }
-
-    /* ===== STREAMING EVENTS ===== */
-    .event-streaming-start {
-      margin-bottom: 0;
-      padding: 0.375rem 0.75rem;
-      background: #eff6ff;
-      border-radius: 0.5rem;
-      display: flex;
-      align-items: center;
-      gap: 0.625rem;
-    }
-
-    html.dark .event-streaming-start { background: #0c1a2e; }
-
-    .event-streaming-complete {
-      margin-bottom: 0;
-      padding: 0.375rem 0.75rem;
-      background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
-      border-radius: 0.5rem;
-    }
-
-    html.dark .event-streaming-complete { background: linear-gradient(135deg, #0a1f0f, #0f2b1a); }
-
-    @keyframes skeleton-pulse {
-      0%, 100% { opacity: 0.4; }
-      50% { opacity: 0.15; }
-    }
-    .skeleton-pulse { animation: skeleton-pulse 1.5s ease-in-out infinite; }
-    .skeleton-loading { padding: 1rem; }
-
-    .message-sending { opacity: 0.6; transition: opacity 0.3s ease; }
-    .message-send-failed { border-left: 3px solid var(--color-error); }
-
-    .connection-indicator {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.375rem;
-      padding: 0.25rem 0.5rem;
-      border-radius: 1rem;
-      font-size: 0.75rem;
-      cursor: pointer;
-      transition: all 0.3s ease;
-    }
-    .connection-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      transition: background-color 0.5s ease;
-    }
-    .connection-dot.excellent { background: #10b981; }
-    .connection-dot.good { background: #10b981; }
-    .connection-dot.fair { background: #f59e0b; }
-    .connection-dot.poor { background: #f97316; }
-    .connection-dot.bad { background: #ef4444; }
-    .connection-dot.unknown { background: #6b7280; }
-    .connection-dot.disconnected { background: #ef4444; animation: pulse 1.5s ease-in-out infinite; }
-    .connection-dot.reconnecting { background: #f59e0b; animation: pulse 1s ease-in-out infinite; }
-    .connection-dot.downloading { background: #3b82f6; animation: pulse 1s ease-in-out infinite; }
-
-    .model-dl-indicator {
-      display: none;
-      position: relative;
-      width: 24px;
-      height: 24px;
-      cursor: pointer;
-    }
-    .model-dl-indicator.active { display: inline-flex; align-items: center; justify-content: center; }
-    .model-dl-indicator svg { width: 24px; height: 24px; transform: rotate(-90deg); }
-    .model-dl-indicator .track { fill: none; stroke: var(--color-bg-secondary); stroke-width: 3; }
-    .model-dl-indicator .progress { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.3s ease; }
-    .model-dl-indicator .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
-    .model-dl-indicator .icon svg { width: 12px; height: 12px; transform: none; }
-    .model-dl-indicator-tooltip {
-      display: none; position: absolute; top: calc(100% + 6px); right: 0; background: var(--color-bg-primary);
-      border: 1px solid var(--color-border); border-radius: 6px; padding: 8px 12px; font-size: 0.75rem;
-      white-space: nowrap; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    }
-    .model-dl-indicator:hover .model-dl-indicator-tooltip { display: block; }
-
-    .connection-tooltip {
-      position: absolute;
-      top: 100%;
-      right: 0;
-      margin-top: 0.5rem;
-      padding: 0.75rem;
-      background: var(--color-bg-secondary);
-      border: 1px solid var(--color-border);
-      border-radius: 0.5rem;
-      font-size: 0.75rem;
-      white-space: nowrap;
-      z-index: 100;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-    }
-
-    .new-content-pill {
-      position: sticky;
-      bottom: 0.5rem;
-      left: 50%;
-      transform: translateX(-50%);
-      padding: 0.375rem 1rem;
-      background: var(--color-primary);
-      color: white;
-      border: none;
-      border-radius: 1rem;
-      font-size: 0.8rem;
-      cursor: pointer;
-      z-index: 50;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-      transition: opacity 0.2s ease;
-    }
-    .new-content-pill:hover { opacity: 0.9; }
-
-    @keyframes block-appear {
-      from { opacity: 0; transform: translateY(6px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    .streaming-blocks > * {
-      animation: block-appear 0.2s ease-out both;
-    }
-    .streaming-blocks > details.block-tool-use {
-      transition: max-height 0.3s ease;
-    }
-    @keyframes chunk-placeholder-pulse {
-      0%, 100% { opacity: 0.3; }
-      50% { opacity: 0.6; }
-    }
-    .chunk-placeholder {
-      height: 2rem;
-      border-radius: 0.375rem;
-      background: var(--color-bg-secondary);
-      animation: chunk-placeholder-pulse 1s ease-in-out infinite;
-      margin: 0.25rem 0;
-    }
-    .connection-dot.degrading {
-      animation: pulse 1s ease-in-out infinite;
-      background-color: var(--color-warning) !important;
-    }
-
-    /* ===== IN-UI DIALOGS ===== */
-    .dialog-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 10000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      transition: opacity 0.2s ease;
-    }
-    .dialog-overlay.visible { opacity: 1; }
-    .dialog-backdrop {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.5);
-      backdrop-filter: blur(2px);
-    }
-    .dialog-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 10001;
-      opacity: 0;
-      transition: opacity 0.2s ease;
-    }
-    .dialog-container.visible { opacity: 1; }
-    .dialog-box {
-      background: var(--color-bg-primary);
-      border-radius: 0.75rem;
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-      max-width: 90vw;
-      width: 400px;
-      overflow: hidden;
-      transform: scale(0.95) translateY(-10px);
-      transition: transform 0.2s ease;
-    }
-    .dialog-container.visible .dialog-box {
-      transform: scale(1) translateY(0);
-    }
-    .dialog-box-progress { width: 450px; }
-    .dialog-header {
-      padding: 1rem 1.25rem;
-      border-bottom: 1px solid var(--color-border);
-    }
-    .dialog-title {
-      margin: 0;
-      font-size: 1.1rem;
-      font-weight: 600;
-    }
-    .dialog-body {
-      padding: 1.25rem;
-    }
-    .dialog-message {
-      margin: 0;
-      font-size: 0.9rem;
-      line-height: 1.5;
-      color: var(--color-text-primary);
-    }
-    .dialog-label {
-      display: block;
-      margin-bottom: 0.5rem;
-      font-size: 0.9rem;
-      color: var(--color-text-primary);
-    }
-    .dialog-input {
-      width: 100%;
-      padding: 0.625rem 0.875rem;
-      border: 1px solid var(--color-border);
-      border-radius: 0.5rem;
-      background: var(--color-bg-secondary);
-      color: var(--color-text-primary);
-      font-size: 0.9rem;
-      outline: none;
-      transition: border-color 0.15s, box-shadow 0.15s;
-    }
-    .dialog-input:focus {
-      border-color: var(--color-primary);
-      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
-    }
-    .dialog-footer {
-      padding: 0.75rem 1.25rem;
-      display: flex;
-      justify-content: flex-end;
-      gap: 0.5rem;
-      border-top: 1px solid var(--color-border);
-      background: var(--color-bg-secondary);
-    }
-    .dialog-btn {
-      padding: 0.5rem 1.25rem;
-      border: none;
-      border-radius: 0.5rem;
-      font-size: 0.875rem;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.15s;
-    }
-    .dialog-btn-primary {
-      background: var(--color-primary);
-      color: white;
-    }
-    .dialog-btn-primary:hover { background: var(--color-primary-dark); }
-    .dialog-btn-secondary {
-      background: var(--color-bg-primary);
-      color: var(--color-text-primary);
-      border: 1px solid var(--color-border);
-    }
-    .dialog-btn-secondary:hover { background: var(--color-bg-secondary); }
-    .dialog-btn-danger { background: var(--color-error); }
-    .dialog-btn-danger:hover { background: #dc2626; }
-    .dialog-progress-bar {
-      height: 8px;
-      background: var(--color-bg-secondary);
-      border-radius: 4px;
-      overflow: hidden;
-      margin: 1rem 0 0.5rem;
-    }
-    .dialog-progress-fill {
-      height: 100%;
-      background: var(--color-primary);
-      border-radius: 4px;
-      transition: width 0.3s ease;
-    }
-    .dialog-progress-percent {
-      margin: 0;
-      text-align: center;
-      font-size: 0.8rem;
-      color: var(--color-text-secondary);
-    }
-
-    /* ===== TOAST NOTIFICATIONS ===== */
-    .toast-notification {
-      position: fixed;
-      bottom: 100px;
-      left: 50%;
-      transform: translateX(-50%) translateY(20px);
-      padding: 0.75rem 1.5rem;
-      border-radius: 0.5rem;
-      font-size: 0.875rem;
-      font-weight: 500;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      z-index: 20000;
-      opacity: 0;
-      transition: all 0.3s ease;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-    .toast-notification.visible {
-      opacity: 1;
-      transform: translateX(-50%) translateY(0);
-    }
-    .toast-info { background: var(--color-primary); color: white; }
-    .toast-success { background: var(--color-success); color: white; }
-    .toast-error { background: var(--color-error); color: white; }
-    .toast-warning { background: var(--color-warning); color: white; }
-  
-    .inline-code {
-      background: #f3f4f6;
-      padding: 0.125rem 0.375rem;
-      border-radius: 0.25rem;
-      font-size: 0.875rem;
-      font-family: ui-monospace, monospace;
-      color: #dc2626;
-    }
-
-    html.dark .inline-code {
-      background: #262626;
-      color: #f87171;
-    }
-
-    .html-rendered-container {
-      border-radius: 0.5rem;
-      overflow: hidden;
-      border: 1px solid #e5e7eb;
-    }
-
-    html.dark .html-rendered-container {
-      border-color: #262626;
-    }
-
-    .sidebar-search-bar {
-      padding: 0.25rem 0.75rem 0.5rem;
-    }
-    .sidebar-search-input {
-      width: 100%;
-      padding: 0.375rem 0.5rem;
-      border: 1px solid #d1d5db;
-      border-radius: 0.375rem;
-      background: #f9fafb;
-      color: #111827;
-      font-size: 0.8125rem;
-      outline: none;
-      box-sizing: border-box;
-    }
-    .sidebar-search-input:focus {
-      border-color: #3b82f6;
-      box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
-    }
-    html.dark .sidebar-search-input {
-      background: #1f2937;
-      border-color: #374151;
-      color: #e5e7eb;
-    }
-
-    .shortcuts-overlay {
-      position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,0.5);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 9999;
-    }
-    .shortcuts-panel {
-      background: white;
-      border-radius: 0.75rem;
-      padding: 1.5rem;
-      max-width: 400px;
-      width: 90%;
-      box-shadow: 0 25px 50px rgba(0,0,0,0.25);
-    }
-    html.dark .shortcuts-panel {
-      background: #1f2937;
-      color: #e5e7eb;
-    }
-    .shortcuts-panel h3 {
-      margin: 0 0 1rem;
-      font-size: 1.125rem;
-    }
-    .shortcuts-panel table {
-      width: 100%;
-      border-collapse: collapse;
-    }
-    .shortcuts-panel td {
-      padding: 0.375rem 0;
-      font-size: 0.875rem;
-    }
-    .shortcuts-panel td:first-child {
-      font-weight: 600;
-      white-space: nowrap;
-      padding-right: 1rem;
-    }
-    .shortcuts-panel kbd {
-      background: #f3f4f6;
-      border: 1px solid #d1d5db;
-      border-radius: 0.25rem;
-      padding: 0.125rem 0.375rem;
-      font-size: 0.75rem;
-      font-family: inherit;
-    }
-    html.dark .shortcuts-panel kbd {
-      background: #374151;
-      border-color: #4b5563;
-    }
-
-    .error-toast {
-      position: fixed;
-      bottom: 1rem;
-      right: 1rem;
-      background: #dc2626;
-      color: white;
-      padding: 0.75rem 1rem;
-      border-radius: 0.5rem;
-      font-size: 0.875rem;
-      max-width: 400px;
-      z-index: 9998;
-      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
-      cursor: pointer;
-      animation: slideInRight 0.2s ease-out;
-    }
-    .error-toast-title {
-      font-weight: 600;
-      margin-bottom: 0.25rem;
-    }
-    .error-toast-detail {
-      opacity: 0.85;
-      font-size: 0.8125rem;
-      word-break: break-word;
-    }
-    @keyframes slideInRight {
-      from { transform: translateX(100%); opacity: 0; }
-      to { transform: translateX(0); opacity: 1; }
-    }
-
-    .msg-edit-btn {
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      color: var(--color-text-secondary);
-      font-size: 0.75rem;
-      padding: 0 0.25rem;
-      opacity: 0;
-      transition: opacity 0.15s;
-      margin-left: 0.5rem;
-    }
-    .message-user:hover .msg-edit-btn { opacity: 0.7; }
-    .msg-edit-btn:hover { opacity: 1 !important; color: var(--color-primary); }
-
-    .preset-btn {
-      background: transparent;
-      border: 1px solid var(--color-border);
-      border-radius: 0.25rem;
-      cursor: pointer;
-      color: var(--color-text-secondary);
-      font-size: 0.875rem;
-      padding: 0.25rem 0.5rem;
-      line-height: 1;
-    }
-    .preset-btn:hover { color: #f59e0b; }
-    .preset-selector {
-      font-size: 0.75rem;
-      padding: 0.25rem;
-      border: 1px solid var(--color-border);
-      border-radius: 0.25rem;
-      background: var(--color-bg);
-      color: var(--color-text);
-      max-width: 120px;
-    }
-
-
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--color-primary, #3b82f6);
-  color: #fff;
-  padding: 8px 16px;
-  z-index: 10000;
-  text-decoration: none;
-  border-radius: 0 0 4px 0;
-  font-weight: 600;
-}
-.skip-link:focus {
-  top: 0;
-}
-
-:focus-visible {
-  outline: 2px solid var(--color-primary, #3b82f6);
-  outline-offset: 2px;
-  border-radius: 2px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-
-/* ==========================================================================
-   Legacy ui-fixes*.css (merged into main.css on 2026-04-20).
-   Loaded last so they still win over earlier main.css rules; intentionally
-   left as a recognisable block so future cleanups can prune systematically.
-   ========================================================================== */
-
-/* ========== merged from ui-fixes.css ========== */
-/* =====================================================================
-   ui-fixes.css — Design corrections layered on top of main.css
-   Targets styles missing or broken for current markup (index.html).
-   Loaded AFTER main.css so selectors here win on ties.
-   ===================================================================== */
-
-/* ---------- Design tokens: richer spacing + elevation ---------- */
-:root {
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
-  --shadow-md: 0 4px 12px rgba(15,23,42,0.08);
-  --shadow-lg: 0 12px 32px rgba(15,23,42,0.12);
-  --color-bg-raised: #ffffff;
-  --color-bg-hover: rgba(15,23,42,0.04);
-  --color-focus-ring: rgba(59,130,246,0.35);
-  --sidebar-width: 272px;
-}
-html.dark {
-  --color-bg-raised: #202020;
-  --color-bg-hover: rgba(255,255,255,0.05);
-  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
-  --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
-  --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
-  --color-focus-ring: rgba(96,165,250,0.45);
-}
-
-/* ---------- Sidebar header: two rows, fix 422px overflow ---------- */
-.sidebar-header {
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.625rem 0.75rem;
-  min-height: var(--header-height);
-  border-bottom: 1px solid var(--color-border);
-}
-.sidebar-header h2 {
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  color: var(--color-text-secondary);
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.sidebar-header-actions {
-  display: flex;
-  gap: 0.25rem;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-/* ---------- Sidebar overflow menu: hidden by default, floating panel ---------- */
-.sidebar-overflow-menu-wrapper {
-  position: relative;
-  display: inline-block;
-}
-.sidebar-overflow-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  padding: 0;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  font-size: 1rem;
-  line-height: 1;
-}
-.sidebar-overflow-btn:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text-primary);
-}
-.sidebar-overflow-menu {
-  display: none;
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
-  min-width: 200px;
-  z-index: 60;
-  padding: 0.25rem;
-  background: var(--color-bg-raised);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
-}
-.sidebar-overflow-menu.open { display: block; }
-.sidebar-overflow-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 0.5rem 0.625rem;
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-primary);
-  font-size: 0.8125rem;
-  text-align: left;
-  cursor: pointer;
-}
-.sidebar-overflow-menu-item:hover { background: var(--color-bg-hover); }
-.sidebar-overflow-menu-item.danger { color: var(--color-error); }
-.sidebar-overflow-menu-item.danger:hover { background: rgba(239,68,68,0.1); }
-.sidebar-overflow-menu-item svg { flex-shrink: 0; }
-
-/* ---------- Sidebar new-conversation button ---------- */
-.sidebar-new-btn {
-  padding: 0.375rem 0.75rem;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  line-height: 1.2;
-  height: 30px;
-}
-
-/* ---------- Sidebar search ---------- */
-.sidebar-search-bar {
-  padding: 0.5rem 0.75rem;
-  flex-shrink: 0;
-}
-.sidebar-search-input {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.8125rem;
-  background: var(--color-bg-primary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  color: var(--color-text-primary);
-  outline: none;
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
-.sidebar-search-input:focus {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-focus-ring);
-}
-.sidebar-search-input::placeholder { color: var(--color-text-secondary); }
-
-/* ---------- Sidebar list items: cards ---------- */
-.sidebar-list {
-  list-style: none;
-  padding: 0.25rem 0.5rem 1rem;
-  margin: 0;
-  overflow-y: auto;
-  flex: 1;
-  min-height: 0;
-}
-.conversation-item {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.5rem 0.625rem;
-  margin: 0.125rem 0;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  color: var(--color-text-primary);
-  transition: background-color 0.12s;
-  position: relative;
-  border-left: none;
-}
-.conversation-item-content {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-}
-.conversation-item:hover { background: var(--color-bg-hover); }
-.conversation-item.active {
-  background: var(--color-primary);
-  color: #fff;
-}
-.conversation-item.active .conversation-item-meta { color: rgba(255,255,255,0.85); }
-.conversation-item-title {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  line-height: 1.3;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-bottom: 0.125rem;
-}
-.conversation-item-meta {
-  font-size: 0.6875rem;
-  color: var(--color-text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ========== merged from ui-fixes-2.css ========== */
-/* =====================================================================
-   ui-fixes-2.css — Main panel, welcome screen, messages, input card
-   ===================================================================== */
-
-/* ---------- Main header: cleaner separation ---------- */
-.main-header {
-  gap: 0.5rem;
-  padding: 0 0.75rem;
-  border-bottom: 1px solid var(--color-border);
-}
-.header-title {
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-/* ---------- View toggle bar: pill tabs, not underline-in-void ---------- */
-.view-toggle-bar {
-  gap: 0.25rem;
-  padding: 0.375rem 0.75rem;
-  background: var(--color-bg-primary);
-  border-bottom: 1px solid var(--color-border);
-}
-.view-toggle-btn {
-  padding: 0.375rem 0.625rem;
-  border-radius: var(--radius-sm);
-  border: none;
-  background: transparent;
-  color: var(--color-text-secondary);
-  min-height: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-}
-.view-toggle-btn:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text-primary);
-}
-.view-toggle-btn.active {
-  background: rgba(59,130,246,0.1);
-  color: var(--color-primary);
-  border-bottom-color: transparent;
-}
-
-/* ---------- Welcome screen ---------- */
-.main-panel > 
-
-/* Hide welcome when empty / conversation active */
-.main-panel > .welcome-screen.hidden { display: none; }
-
-/* #output-scroll needs to take remaining flex space */
-.main-panel > #output-scroll {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-/* ---------- Messages scroll: breathing room ---------- */
-#output-scroll {
-  background: var(--color-bg-primary);
-}
-.messages-wrapper {
-  max-width: 860px;
-  margin: 0 auto;
-  padding: 1rem 1.25rem 1.5rem;
-  width: 100%;
-}
-
-/* ---------- Streaming status bar: hidden by default, floating chip ---------- */
-body .streaming-status-bar {
-  display: none !important;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.875rem;
-  margin: 0 auto;
-  max-width: 860px;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  font-size: 0.8125rem;
-  color: var(--color-text-primary);
-  box-shadow: var(--shadow-sm);
-}
-body .streaming-status-bar.visible { display: flex !important; }
-.streaming-status-bar .typing-dots {
-  display: inline-flex;
-  gap: 3px;
-  align-items: center;
-}
-.streaming-status-bar .typing-dots span {
-  width: 5px; height: 5px;
-  background: var(--color-primary);
-  border-radius: 50%;
-  animation: typingBlink 1.2s infinite ease-in-out both;
-}
-.streaming-status-bar .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
-.streaming-status-bar .typing-dots span:nth-child(3) { animation-delay: 0.3s; }
-@keyframes typingBlink {
-  0%,80%,100% { opacity: 0.3; transform: scale(0.8); }
-  40%         { opacity: 1; transform: scale(1); }
-}
-.status-agent-name { font-weight: 600; }
-.status-cancel-btn {
-  margin-left: auto;
-  padding: 0.25rem 0.625rem;
-  background: transparent;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  color: var(--color-text-secondary);
-  font-size: 0.75rem;
-  cursor: pointer;
-}
-.status-cancel-btn:hover {
-  border-color: var(--color-error);
-  color: var(--color-error);
-}
-
-/* ---------- Drop zone overlay ---------- */
-.drop-zone-overlay {
-  position: absolute;
-  inset: 0;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  background: rgba(59,130,246,0.1);
-  border: 2px dashed var(--color-primary);
-  border-radius: var(--radius-lg);
-  pointer-events: none;
-  z-index: 10;
-}
-.drop-zone-overlay.active { display: flex; }
-.drop-zone-content { text-align: center; color: var(--color-primary); }
-.drop-zone-icon { font-size: 3rem; font-weight: 300; }
-.drop-zone-text { font-size: 0.9375rem; font-weight: 500; }
-
-/* ========== merged from ui-fixes-3.css ========== */
-/* =====================================================================
-   ui-fixes-3.css — Input card (modern bottom composer), mobile, tools popup
-   ===================================================================== */
-
-/* ---------- Input section: holds the card, proper bottom padding ---------- */
-.input-section {
-  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
-  background: var(--color-bg-primary);
-  border-top: 1px solid var(--color-border);
-}
-
-/* ---------- Input card: pill-shaped composer with toolbar ---------- */
-.input-card {
-  max-width: 860px;
-  margin: 0 auto;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 0.5rem 0.625rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
-.input-card:focus-within {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-focus-ring);
-}
-.input-card-textarea {
-  width: 100%;
-  min-height: 36px;
-  max-height: 180px;
-  padding: 0.375rem 0.5rem;
-  background: transparent;
-  border: none;
-  outline: none;
-  resize: none;
-  color: var(--color-text-primary);
-  font-family: inherit;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-}
-.input-card-textarea::placeholder { color: var(--color-text-secondary); }
-
-/* toolbar: selectors on the left, action buttons on the right */
-.input-card-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  flex-wrap: wrap;
-}
-.input-card-selectors {
-  display: flex;
-  gap: 0.375rem;
-  align-items: center;
-  flex-wrap: wrap;
-  flex: 1;
-  min-width: 0;
-}
-.input-card-actions {
-  display: flex;
-  gap: 0.25rem;
-  align-items: center;
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-.input-chip-select {
-  height: 28px;
-  padding: 0 0.5rem;
-  font-size: 0.75rem;
-  background: var(--color-bg-primary);
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border);
-  border-radius: 999px;
-  cursor: pointer;
-  max-width: 180px;
-  transition: border-color 0.12s;
-}
-.input-chip-select:hover { border-color: var(--color-primary); }
-.input-chip-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
-.input-chip-select:empty,
-.input-chip-select[data-empty="true"] { display: none; }
-
-/* When chip selects are empty and only star remains, compact layout */
-#savePresetBtn { width: 28px !important; height: 28px !important; font-size: 0.875rem; }
-
-/* Input card: if selectors row is empty (no visible chips), hide whole row */
-.input-card-selectors:not(:has(select:not([style*="display: none"]):not(:empty):not([data-empty="true"]))):not(:has(#savePresetBtn + *)) {
-  /* do nothing: keep preset visible */
-}
-
-.input-icon-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: background 0.12s, color 0.12s;
-}
-.input-icon-btn:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text-primary);
-}
-.input-icon-btn svg { width: 16px; height: 16px; }
-
-.input-send-btn {
-  background: var(--color-primary);
-  color: #fff;
-  width: 34px;
-  height: 34px;
-  border-radius: var(--radius-md);
-}
-.input-send-btn:hover { background: var(--color-primary-dark); color: #fff; }
-.input-send-btn svg { width: 16px; height: 16px; }
-.input-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-/* When streaming: dim the card slightly */
-.input-card[data-streaming="true"] {
-  opacity: 0.75;
-}
-.input-card[data-streaming="true"] .input-card-textarea {
-  cursor: not-allowed;
-}
-
-/* ---------- Tools popup: centered modal ---------- */
-body .tools-popup {
-  display: none !important;
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  background: rgba(15,23,42,0.45);
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-}
-body .tools-popup.open { display: flex !important; }
-.tools-popup-content {
-  width: 100%;
-  max-width: 720px;
-  max-height: 85vh;
-  background: var(--color-bg-raised);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.tools-popup-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
-}
-.tools-popup-scroll {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.75rem 1rem;
-}
-.tools-popup-footer {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: flex-end;
-  padding: 0.75rem 1rem;
-  border-top: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
-}
-.tools-popup-refresh-btn,
-.tools-popup-update-btn {
-  padding: 0.5rem 1rem;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-primary);
-  color: var(--color-text-primary);
-  cursor: pointer;
-}
-.tools-popup-refresh-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
-.tools-popup-update-btn {
-  background: var(--color-primary);
-  color: #fff;
-  border-color: var(--color-primary);
-}
-.tools-popup-update-btn:hover { background: var(--color-primary-dark); }
-
-/* ---------- Folder modal (if opened) ---------- */
-body .folder-modal-overlay {
-  display: none !important;
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  background: rgba(15,23,42,0.45);
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-}
-body .folder-modal-overlay.open { display: flex !important; }
-.folder-modal {
-  width: 100%;
-  max-width: 560px;
-  max-height: 80vh;
-  background: var(--color-bg-raised);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.folder-modal-header {
-  display: flex; justify-content: space-between; align-items: center;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--color-border);
-}
-.folder-modal-header h3 { margin: 0; font-size: 1rem; }
-.folder-modal-close {
-  background: none; border: none; font-size: 1.5rem;
-  color: var(--color-text-secondary); cursor: pointer; line-height: 1;
-}
-.folder-modal-footer {
-  display: flex; gap: 0.5rem; justify-content: flex-end;
-  padding: 0.75rem 1rem;
-  border-top: 1px solid var(--color-border);
-}
-
-/* ========== merged from ui-fixes-4.css ========== */
-/* =====================================================================
-   ui-fixes-4.css — Responsive (mobile/tablet) + dark-theme polish
-   ===================================================================== */
-
-/* ---------- Tablet (≤ 1024px): narrower sidebar ---------- */
-@media (max-width: 1024px) {
-  :root { --sidebar-width: 240px; }
-  .messages-wrapper { padding: 0.875rem 1rem; }
-}
-
-/* ---------- Mobile (≤ 768px): sidebar becomes drawer ---------- */
-@media (max-width: 768px) {
-  .app-shell { flex-direction: row; }
-
-  .sidebar {
-    position: fixed;
-    top: 0; left: 0;
-    height: 100dvh;
-    width: 280px;
-    max-width: 85vw;
-    transform: translateX(-100%);
-    z-index: 80;
-    box-shadow: var(--shadow-lg);
-    transition: transform 0.2s ease-out !important;
-  }
-  .sidebar.open { transform: translateX(0); }
-
-  .sidebar-overlay {
-    display: none;
-    position: fixed;
-    inset: 0;
-    background: rgba(15,23,42,0.5);
-    z-index: 70;
-  }
-  .sidebar-overlay.open { display: block; }
-
-  .main-panel { width: 100%; }
-  .main-header { padding: 0 0.5rem; }
-  .header-title { font-size: 0.875rem; }
-  .header-controls { gap: 0.25rem; }
-
-  /* hide tertiary chips in very tight space */
-  .status-badge span { display: none; }
-  .status-badge { padding: 0.25rem; }
-
-  /* input card on mobile */
-  .input-section { padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom)); }
-  .input-card { padding: 0.375rem 0.5rem; border-radius: var(--radius-md); }
-  .input-card-textarea { font-size: 1rem; /* prevent iOS zoom */ }
-  .input-chip-select { max-width: 140px; }
-
-  .welcome-title { font-size: 1.375rem; }
-  .welcome-logo { width: 56px; height: 56px; font-size: 1.75rem; }
-  .messages-wrapper { padding: 0.75rem 0.75rem 1rem; }
-}
-
-/* ---------- Small mobile (≤ 480px): hide noncritical header buttons ---------- */
-@media (max-width: 480px) {
-  .model-dl-indicator { display: none; }
-  .sidebar-header h2 { display: none; }
-  .input-card-actions .input-icon-btn:not(.input-send-btn):not(.voice-mic-btn) { display: none; }
-}
-
-/* ---------- Touch targets: ensure 40px minimum on pointer:coarse ---------- */
-@media (pointer: coarse) {
-  .sidebar-toggle-btn,
-  .theme-toggle-btn,
-  .header-icon-btn,
-  .input-icon-btn,
-  .sidebar-overflow-btn,
-  .view-toggle-btn,
-  .status-cancel-btn {
-    min-width: 40px;
-    min-height: 40px;
-  }
-  .conversation-item { padding: 0.625rem 0.625rem; }
-}
-
-/* ---------- Focus-visible ring: accessibility, non-intrusive ---------- */
-button:focus-visible,
-select:focus-visible,
-input:focus-visible,
-textarea:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-}
-
-/* ---------- Dark mode: neutral grey palette ---------- */
-html.dark {
-  --color-primary: #3b82f6;
-  --color-primary-dark: #2563eb;
-  --color-bg-primary: #1a1a1a;
-  --color-bg-secondary: #212121;
-  --color-bg-raised: #2a2a2a;
-  --color-bg-hover: rgba(255,255,255,0.06);
-  --color-text-primary: #e5e5e5;
-  --color-text-secondary: #a3a3a3;
-  --color-border: #333333;
-  --color-focus-ring: rgba(163,163,163,0.35);
-}
-html.dark body { background: var(--color-bg-primary); color: var(--color-text-primary); }
-html.dark .sidebar { background: #161616; border-right: 1px solid var(--color-border); }
-html.dark .main-header,
-html.dark .view-toggle-bar,
-html.dark .input-section { background: var(--color-bg-primary); }
-html.dark .input-card { background: #161616; border-color: var(--color-border); }
-html.dark .input-chip-select { background: #161616; }
-html.dark .status-badge { background: #161616; }
-html.dark .sidebar-search-input { background: #161616; }
-html.dark .conversation-item.active { background: #2f2f2f; color: var(--color-text-primary); }
-html.dark .tools-popup,
-html.dark .folder-modal-overlay { background: rgba(0,0,0,0.65); }
-
-/* Light mode polish: softer sidebar separation */
-html:not(.dark) .sidebar { border-right: 1px solid var(--color-border); }
-html:not(.dark) .main-header { background: var(--color-bg-primary); }
-
-/* ---------- Scrollbar styling (subtle) ---------- */
-.sidebar-list,
-#output-scroll,
-.tools-popup-scroll {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-border) transparent;
-}
-.sidebar-list::-webkit-scrollbar,
-#output-scroll::-webkit-scrollbar,
-.tools-popup-scroll::-webkit-scrollbar {
-  width: 8px;
-}
-.sidebar-list::-webkit-scrollbar-thumb,
-#output-scroll::-webkit-scrollbar-thumb,
-.tools-popup-scroll::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: 4px;
-  border: 2px solid transparent;
-  background-clip: padding-box;
-}
-.sidebar-list::-webkit-scrollbar-thumb:hover,
-#output-scroll::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-secondary);
-  background-clip: padding-box;
-  border: 2px solid transparent;
-}
-
-/* ---------- Reduced motion ---------- */
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* ---------- Hide legacy selectors leftovers if present ---------- */
-.agent-selector:empty,
-.model-selector:empty,
-.preset-selector:empty { display: none; }