:root {
      --bg: #ffffff;
      --fg: #0f172a;
      --muted: #64748b;
      --brand: #2563eb;
      --ok: #16a34a;
      --border: #e2e8f0;
      --card: #f8fafc;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #0b1020;
        --fg: #e5e7eb;
        --muted: #94a3b8;
        --brand: #60a5fa;
        --ok: #22c55e;
        --border: #1f2a44;
        --card: #0f172a;
      }
    }

    /* Footer links styling - light theme (dark text on light background) */
    .footer-links a,
    .footer-links a:visited {
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-links a:hover {
      color: var(--fg);
      text-decoration: underline;
    }

    /* Footer links styling - dark theme (white text on dark background) */
    @media (prefers-color-scheme: dark) {
      .footer-links a,
      .footer-links a:visited {
        color: #ffffff;
      }

      .footer-links a:hover {
        color: #ffffff;
        text-decoration: underline;
      }
    }

    /* Sign-out screen footer links (inline in signedOut div) */
    #signedOut a,
    #signedOut a:visited {
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    #signedOut a:hover {
      color: var(--fg);
      text-decoration: underline;
    }

    @media (prefers-color-scheme: dark) {
      #signedOut a,
      #signedOut a:visited {
        color: #ffffff;
      }

      #signedOut a:hover {
        color: #ffffff;
        text-decoration: underline;
      }
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      background: var(--bg);
      color: var(--fg);
      overflow: hidden;
    }

    .wrap {
      padding: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;
    }

    #app>.wrap>.card {
      padding: 0;
    }

    .title {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: .2px;
      margin-bottom: 10px;
      flex-shrink: 0;
    }

    /* Modern Vertical Sidebar System */
    .app-container {
      display: flex;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      background: var(--bg);
    }

    #signedIn {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 100%;
    }

    .side-bar {
      width: 50px;
      background: var(--card);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 0;
      flex-shrink: 0;
      z-index: 10;
    }

    .main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      min-width: 0;
      min-height: 0;
      height: 100%;
    }

    .main-header {
      flex-shrink: 0;
      flex-grow: 0;
      height: 36px;
    }

    /* Tab Buttons in Sidebar */
    .tab-nav {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 8px;
      background: transparent;
      border-bottom: none;
      padding: 0;
      margin: 0;
      overflow: visible;
    }

    .tab-button {
      width: 40px;
      height: 40px;
      min-width: 0;
      border-radius: 6px;
      margin: 0 auto;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      border: none;
      position: relative;
      transition: all 0.2s ease;
    }

    .tab-button:hover {
      background: rgba(100, 116, 139, 0.1);
      color: var(--fg);
    }

    .tab-button.active {
      background: var(--brand);
      color: white;
      border: none;
      font-weight: normal;
    }

    .tab-button.active .tab-icon {
      color: white;
    }

    /* Icon Styling */
    .tab-icon {
      width: 20px;
      height: 20px;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tab-icon svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
    }

    /* Hide text label in sidebar */
    .tab-button span:not(.tab-icon) {
      display: none;
    }

    /* Profile / Bottom actions area in Sidebar */
    .sidebar-bottom {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      align-items: center;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    /* Content Area Styles - Use calc for explicit height */
    .tab-content {
      padding: 0;
      overflow: hidden;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      height: calc(100vh - 30px);
      min-height: 0;
    }

    .tab-panel {
      display: none;
      height: 100%;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      justify-content: flex-start;
      align-items: stretch;
      align-content: flex-start;
    }

    .tab-panel.active {
      display: flex;
    }

    #usage-panel,
    #settings-panel,
    #debug-panel,
    #renderer-panel {
      padding: 16px;
      overflow-y: auto;
      overflow-x: hidden;
      justify-content: flex-start;
      align-items: stretch;
      align-content: flex-start;
    }

    #tools-panel {
      padding: 0;
      display: none;
      flex-direction: column;
      width: 100%;
      height: 100%;
      min-height: 0;
    }

    #tools-panel.active {
      display: flex;
    }

    /* Usage Heatmap Styles */
    .usage-heatmap {
      background: var(--card);
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 16px;
    }

    .heatmap-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .heatmap-title {
      font-size: 10px;
      font-weight: 600;
      color: var(--fg);
      padding-right: 5px;
    }

    .heatmap-legend {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 8px;
      color: var(--muted);
    }

    .heatmap-grid {
      display: grid;
      grid-template-columns: 40px repeat(15, 1fr);
      grid-template-rows: auto repeat(7, 1fr);
      gap: 3px;
      font-size: 10px;
      max-width: 100%;
      overflow-x: auto;
    }

    .heatmap-month {
      text-align: center;
      font-weight: 500;
      color: var(--muted);
      padding: 2px;
      font-size: 10px;
    }

    .heatmap-day {
      font-weight: 500;
      color: var(--muted);
      padding: 2px 4px;
      text-align: right;
      font-size: 10px;
    }

    .heatmap-cell {
      width: 12px;
      height: 12px;
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }

    .heatmap-cell:hover {
      transform: scale(1.1);
      z-index: 10;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* Level colors: level-0 (no usage) is now more distinct for clear visibility */
    .heatmap-cell.level-0 {
      background: #cbd5e1;
    }

    /* slate-300 */
    .heatmap-cell.level-1 {
      background: #9be9a8;
    }

    .heatmap-cell.level-2 {
      background: #40c463;
    }

    .heatmap-cell.level-3 {
      background: #30a14e;
    }

    .heatmap-cell.level-4 {
      background: #216e39;
    }

    @media (prefers-color-scheme: dark) {
      .heatmap-cell.level-0 {
        background: #475569;
      }

      /* slate-600 */
      .heatmap-cell.level-1 {
        background: #0e4429;
      }

      .heatmap-cell.level-2 {
        background: #006d32;
      }

      .heatmap-cell.level-3 {
        background: #26a641;
      }

      .heatmap-cell.level-4 {
        background: #39d353;
      }
    }

    /* Button variants */
    .secondary-btn {
      padding: 6px 12px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      color: var(--fg);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .secondary-btn:hover {
      background: var(--brand);
      color: white;
      border-color: var(--brand);
    }

    /* Credits Tab Styles */
    .credits-container {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .credits-balance {
      background: linear-gradient(135deg, var(--brand), #60a5fa);
      color: white;
      padding: 24px;
      border-radius: 12px;
      text-align: center;
    }

    .credits-balance-amount {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .credits-balance-label {
      font-size: 14px;
      opacity: 0.9;
    }

    .credits-actions {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 6px;
    }

    .credits-action-title {
      font-size: 10px;
      font-weight: 600;
      color: var(--fg);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .credits-action-icon {
      font-size: 20px;
    }

    .credit-amounts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 12px;
    }

    .credit-amount-btn {
      padding: 6px 4px;
      border: 2px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--fg);
      font-size: 10px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

    .credit-amount-btn:hover {
      border-color: var(--brand);
      background: rgba(37, 99, 235, 0.05);
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
    }

    .credit-amount-btn:active {
      transform: translateY(0);
    }

    .credit-custom-btn {
      grid-column: 1 / -1;
      background: linear-gradient(135deg, var(--brand), #60a5fa);
      color: white;
      border-color: transparent;
    }

    .credit-custom-btn:hover {
      background: linear-gradient(135deg, #1d4ed8, var(--brand));
      border-color: transparent;
    }

    .credits-history {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px;
    }

    .credits-history-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--fg);
      margin-bottom: 12px;
    }

    .credits-history-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
    }

    .credits-history-item:last-child {
      border-bottom: none;
    }

    .credits-history-desc {
      font-size: 13px;
      color: var(--fg);
    }

    .credits-history-amount {
      font-size: 13px;
      font-weight: 600;
    }

    .credits-history-amount.positive {
      color: var(--ok);
    }

    .credits-history-amount.negative {
      color: #ef4444;
    }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }

    #signedIn {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }

    .row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .space {
      height: 10px;
    }

    .muted {
      color: var(--muted);
      font-size: 12px;
    }

    .pill {
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(2, 6, 23, .04);
    }

    .ok {
      color: var(--ok);
      border-color: rgba(34, 197, 94, .35);
    }

    .status-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: auto;
    }

    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--border);
      object-fit: cover;
      background: #fff;
    }

    .name {
      font-weight: 600;
    }

    .email {
      font-size: 8px;
      color: var(--muted);
    }

    .actions {
      display: flex;
      gap: 8px;
      margin-top: 8px;
      flex-wrap: wrap;
    }

    button {
      appearance: none;
      border: 1px solid var(--border);
      background: #fff0;
      color: var(--fg);
      padding: 8px 10px;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
    }

    button.primary {
      border-color: transparent;
      background: var(--brand);
      color: white;
    }

    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Sign-up button styles */
    .sign-up-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 8px;
      border: 2px solid var(--brand);
      border-radius: 10px;
      background: linear-gradient(135deg, var(--brand), #60a5fa);
      color: white;
      font-weight: 600;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
      /* min-width: 100px; */
      justify-content: center;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    }

    .sign-up-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
      background: linear-gradient(135deg, #1d4ed8, var(--brand));
    }

    .sign-up-btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    }

    .sign-up-icon {
      font-size: 16px;
      line-height: 1;
    }

    /* Tools dropdown and insert button styles */
    .tools-section {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
      display: none !important;
    }

    /* Hide the entire Tools header row and create/edit frame to maximize space for Chat */
    .tools-header {
      display: none !important;
    }

    #createEditSection {
      display: none !important;
    }

    /* Create and Edit section styles */
    .create-edit-section {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    .button-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .create-btn,
    .edit-btn {
      padding: 6px 12px;
      border-radius: 6px;
      background: var(--brand);
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 500;
      font-size: 12px;
    }

    .create-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background: var(--muted);
    }

    .create-btn:hover:not(:disabled) {
      opacity: 0.9;
    }

    /* Parameter frame styles */
    .parameter-frame {
      margin-top: 12px;
      padding: 12px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
    }

    .parameter-dropdown {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--fg);
      font-size: 14px;
      cursor: pointer;
      margin-bottom: 12px;
    }

    .function-name-container {
      margin-bottom: 12px;
    }

    .function-name-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--fg);
    }

    .function-name-input {
      width: 91%;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--fg);
      font-size: 14px;
    }

    .function-name-input:focus {
      outline: none;
      border-color: var(--brand);
    }

    .parameter-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 12px;
      table-layout: fixed;
    }

    .parameter-table th {
      background: var(--card);
      padding: 8px;
      text-align: left;
      border: 1px solid var(--border);
      font-weight: 600;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .parameter-table th:nth-child(1) {
      width: 25%;
    }

    /* Parameter Name */
    .parameter-table th:nth-child(2) {
      width: 35%;
    }

    /* Parameter Test Value */
    .parameter-table th:nth-child(3) {
      width: 25%;
    }

    /* Parameter Type */
    .parameter-table th:nth-child(4) {
      width: 15%;
    }

    /* Can be Empty */
    .parameter-table td {
      padding: 4px;
      border: 1px solid var(--border);
      font-size: 13px;
      overflow: hidden;
    }

    .parameter-table input[type="text"] {
      width: 100%;
      padding: 4px 6px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg);
      color: var(--fg);
      font-size: 12px;
      box-sizing: border-box;
    }

    .parameter-table select {
      width: 100%;
      padding: 4px 6px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg);
      color: var(--fg);
      font-size: 12px;
      box-sizing: border-box;
    }

    .parameter-table input[type="checkbox"] {
      width: auto;
      cursor: pointer;
    }

    .add-function-btn {
      margin-top: 12px;
      padding: 8px 16px;
      background: var(--ok);
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
    }

    .add-function-btn:hover {
      opacity: 0.9;
    }

    .error-message {
      color: #ef4444;
      font-size: 12px;
      margin-top: 8px;
      padding: 8px;
      background: rgba(239, 68, 68, 0.1);
      border-radius: 6px;
      border: 1px solid rgba(239, 68, 68, 0.2);
    }

    .tools-container {
      display: flex;
      gap: 0;
      align-items: stretch;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: visible;
      height: 32px;
      position: relative;
    }

    /* Custom searchable dropdown styles */
    .tools-search-wrapper {
      flex: 1 1 auto;
      min-width: 0;
      position: relative;
      border-right: 1px solid var(--border);
    }

    .tools-search-input {
      width: 100%;
      height: 100%;
      padding: 6px 10px;
      border: none;
      background: transparent;
      color: var(--fg);
      font-size: 12px;
      cursor: pointer;
    }

    .tools-search-input:focus {
      outline: none;
      background: rgba(37, 99, 235, 0.05);
      cursor: text;
    }

    .tools-search-input::placeholder {
      color: var(--muted);
    }

    .tools-dropdown-list {
      position: absolute;
      top: 100%;
      left: -1px;
      right: -1px;
      max-height: 300px;
      overflow-y: auto;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-top: 4px;
      z-index: 1000;
      display: none;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .tools-dropdown-list.show {
      display: block;
    }

    .tools-dropdown-item {
      padding: 6px 10px;
      cursor: pointer;
      font-size: 12px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .tools-dropdown-item:last-child {
      border-bottom: none;
    }

    .tools-dropdown-item:hover,
    .tools-dropdown-item.highlighted {
      background: var(--brand);
      color: white;
    }

    .tools-dropdown-item.selected {
      background: rgba(37, 99, 235, 0.1);
      font-weight: 600;
    }

    .tools-dropdown-item.hidden {
      display: none;
    }

    .no-results {
      padding: 12px;
      text-align: center;
      color: var(--muted);
      font-size: 13px;
    }

    .insert-btn {
      flex: 0 0 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      min-width: 36px;
      padding: 0;
      border-radius: 0;
      background: transparent;
      color: var(--brand);
      border: none;
      cursor: pointer;
      position: relative;
      transition: background 0.2s, color 0.2s;
    }

    .insert-btn:hover:not(:disabled) {
      background: var(--brand);
      color: white;
    }

    .insert-btn:active:not(:disabled) {
      opacity: 0.8;
    }

    .insert-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
      color: var(--muted);
    }

    .insert-btn svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .tools-status {
      font-size: 12px;
      color: var(--muted);
      margin-top: 8px;
    }

    /* Environment selector styles */
    .env-selector {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
    }

    .env-dropdown {
      padding: 2px 6px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg);
      color: var(--fg);
      font-size: 11px;
      cursor: pointer;
      min-width: 45px;
    }

    .env-dropdown:focus {
      outline: none;
      border-color: var(--brand);
    }

    /* Refresh tools button styles */
    .refresh-tools-btn {
      padding: 3px;
      margin-left: 4px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg);
      color: var(--fg);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      height: 20px;
      transition: all 0.2s ease;
    }

    .refresh-tools-btn:hover {
      background: var(--brand);
      color: white;
      border-color: var(--brand);
    }

    .refresh-tools-btn:active {
      opacity: 0.8;
    }

    .refresh-tools-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .refresh-tools-btn.loading svg {
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    /* Edit frame styles */
    .edit-btn:hover,
    .create-btn:hover {
      opacity: 0.9;
    }

    /* Small action button variant for toolbar row */
    .small-action-btn {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 11px;
      height: 22px;
      line-height: 1;
    }

    .edit-frame {
      margin-top: 12px;
      padding: 12px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
    }

    .prompt-selector {
      display: flex;
      gap: 16px;
      margin-bottom: 12px;
    }

    .prompt-selector label {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      font-size: 14px;
    }

    .prompt-selector input[type="radio"] {
      cursor: pointer;
    }

    .prompt-textarea {
      width: 100%;
      min-height: 150px;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--fg);
      font-size: 14px;
      font-family: monospace;
      resize: vertical;
      box-sizing: border-box;
    }

    .prompt-textarea:focus {
      outline: none;
      border-color: var(--brand);
    }

    .save-to-dev-btn {
      margin-top: 12px;
      padding: 8px 16px;
      background: var(--ok);
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
    }

    .save-to-dev-btn:hover {
      opacity: 0.9;
    }

    .save-to-dev-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background: var(--muted);
    }

    .edit-status {
      margin-top: 8px;
      font-size: 12px;
      color: var(--muted);
    }

    /* Token notification styles for taskpane */
    .token-notification {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 12px 16px;
      border-radius: 8px;
      color: white;
      font-weight: 500;
      font-size: 14px;
      z-index: 10000;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      max-width: 300px;
      word-wrap: break-word;
      animation: slideIn 0.3s ease-out;
    }

    .token-notification.token-info {
      background-color: #3b82f6;
      border-left: 4px solid #1d4ed8;
    }

    .token-notification.token-success {
      background-color: #10b981;
      border-left: 4px solid #059669;
    }

    .token-notification.token-warning {
      background-color: #f59e0b;
      border-left: 4px solid #d97706;
    }

    .token-notification.token-error {
      background-color: #ef4444;
      border-left: 4px solid #dc2626;
    }

    @keyframes slideIn {
      from {
        transform: translateX(100%);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    /* Console Logs Section Styles */
    .console-logs-section {
      margin-top: 8px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .console-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
    }

    .console-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--fg);
    }

    .clear-console-btn,
    .toggle-console-btn {
      padding: 4px 8px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg);
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s ease;
    }

    .clear-console-btn:hover,
    .toggle-console-btn:hover {
      background: var(--brand);
      color: white;
      border-color: var(--brand);
    }

    .console-output {
      flex: 1;
      min-height: 100px;
      overflow-y: visible;
      padding: 4px 8px;
      background: #1a1a1a;
      color: #e0e0e0;
      font-family: 'Courier New', monospace;
      font-size: 11px;
      line-height: 1.2;
      word-wrap: break-word;
    }

    .console-output .log-entry {
      margin: 1px 0;
      padding: 1px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .console-output .log-timestamp {
      color: #888;
      font-size: 11px;
    }

    .console-output .log-level {
      font-weight: bold;
      margin-right: 8px;
    }

    .console-output .log-level.log {
      color: #4ade80;
    }

    .console-output .log-level.error {
      color: #ef4444;
    }

    .console-output .log-level.warn {
      color: #f59e0b;
    }

    .console-output .log-level.info {
      color: #3b82f6;
    }

    .console-output .log-message {
      color: #e0e0e0;
    }

    /* Toggle Console Button Styles */
    .toggle-console-btn {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 4px;
      padding: 6px 10px;
      color: #e0e0e0;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      height: 36px;
    }

    .toggle-console-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.3);
    }

    .toggle-console-btn.active {
      background: rgba(102, 126, 234, 0.2);
      border-color: rgba(102, 126, 234, 0.4);
    }

    /* Modern Chat Styles */
    .chat-msg-row {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      margin: 0;
    }

    .chat-msg-row.user {
      flex-direction: row;
      justify-content: flex-end;
    }

    .chat-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      background: linear-gradient(135deg, var(--brand), #60a5fa);
      color: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.08);
      flex: 0 0 24px;
      user-select: none;
    }

    .chat-msg-row.user .chat-avatar {
      background: linear-gradient(135deg, #22c55e, #10b981);
    }

    .chat-bubble {
      max-width: 70%;
      padding: 8px 10px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(2, 6, 23, 0.06);
      font-size: 12px;
      line-height: 1.35;
      word-wrap: break-word;
      white-space: pre-wrap;
    }

    .chat-msg-row.assistant .chat-bubble {
      background: rgba(37, 99, 235, 0.06);
      border: 1px solid var(--border);
      color: var(--fg);
      /* Expand assistant bubbles to use available width */
      max-width: calc(100% - 40px);
      width: calc(100% - 40px);
    }

    .chat-msg-row.user .chat-bubble {
      background: linear-gradient(135deg, var(--brand), #60a5fa);
      color: #ffffff;
      border: none;
    }

    /* Chat layout */
    .chat-section {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      max-height: 100%;
      gap: 8px;
      margin-top: 8px;
      overflow: hidden;
    }

    .chat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .chat-title {
      margin: 0;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.3px;
      color: var(--muted);
    }

    #chatMessages {
      font-size: 12px;
      /*
        NOTE: Use flex-basis with a realistic minimum, not 0, to force the container
        to establish a scrollable region even when content is large.
      */
      flex: 1 1 200px;
      min-height: 200px;
      max-height: 100%;
      overflow-y: auto !important;
      overflow-x: hidden;
      overflow-anchor: none;
      -webkit-overflow-scrolling: touch;
      /* Make scrollability obvious and avoid layout shift when scrollbars appear */
      scrollbar-gutter: stable;
      padding: 10px 8px 12px;
      display: block;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(37, 99, 235, 0.05), rgba(37, 99, 235, 0) 55%), var(--bg);
    }

    .chat-messages-inner {
      min-height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .chat-messages-inner>* {
      margin-bottom: 10px;
    }

    .chat-messages-inner>*:last-child {
      margin-bottom: 0;
    }

    .chat-footer {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: auto;
      padding-top: 6px;
      background: linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, var(--bg) 35%, var(--bg) 100%);
    }

    .chat-status {
      font-size: 11px;
      margin: 0;
      padding: 4px 8px;
      color: var(--muted);
      background: rgba(2, 6, 23, 0.04);
      border: 1px solid var(--border);
      border-radius: 10px;
    }

    .chat-composer {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--card);
      box-shadow: 0 6px 16px rgba(2, 6, 23, 0.06);
    }

    .chat-actions {
      display: flex;
      gap: 6px;
      justify-content: flex-end;
    }

    .chat-actions button {
      min-height: 30px;
      padding: 6px 12px;
    }

    #chatInput {
      font-size: 13px;
      line-height: 1.4;
      padding: 8px 10px;
      border-radius: 10px;
      min-height: 72px;
      max-height: 180px;
      font-family: inherit;
      resize: vertical;
      background: var(--bg);
      color: var(--fg);
      caret-color: var(--fg);
    }

    #chatInput::placeholder {
      color: var(--muted);
    }

    @media (max-width: 520px) {
      #chatMessages {
        padding: 8px 6px 10px;
      }

      .chat-actions {
        width: 100%;
      }

      .chat-actions button {
        flex: 1;
      }

      #chatInput {
        min-height: 64px;
      }
    }

    @media (prefers-color-scheme: dark) {
      #chatMessages {
        background: linear-gradient(180deg, rgba(96, 165, 250, 0.12), rgba(15, 23, 42, 0) 55%), var(--bg);
      }
    }

    /* Thinking indicator */
    .chat-bubble.thinking {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(99, 102, 241, 0.08);
      border: 1px dashed rgba(99, 102, 241, 0.35);
    }

    .thinking-dots {
      display: inline-flex;
      gap: 4px;
      color: var(--brand);
    }

    .thinking-dots i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      display: block;
      opacity: 0.35;
      animation: throb 1.2s infinite ease-in-out;
    }

    .thinking-dots i:nth-child(2) {
      animation-delay: .15s;
    }

    .thinking-dots i:nth-child(3) {
      animation-delay: .30s;
    }

    .thinking-text {
      color: var(--muted);
      font-style: italic;
    }

    @keyframes throb {

      0%,
      80%,
      100% {
        transform: scale(0.6);
        opacity: .25;
      }

      40% {
        transform: scale(1);
        opacity: .9;
      }
    }

    /* System/log messages styling: compact, discreet */
    .chat-msg-row.system .chat-bubble {
      background: rgba(2, 6, 23, 0.04);
      border: 1px dashed var(--border);
      color: var(--muted);
      font-size: 11px;
      line-height: 1.3;
      padding: 4px 8px;
      border-radius: 8px;
      box-shadow: none;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      opacity: 0.95;
    }

    /* Plan + progress inside system messages */
    .chat-msg-row.system .chat-bubble.system-plan,
    .chat-msg-row.system .chat-bubble.system-progress {
      width: 100%;
    }

    .chat-msg-row.system .chat-bubble .system-details {
      margin: 0;
    }

    .chat-msg-row.system .chat-bubble .system-details summary {
      cursor: pointer;
      color: var(--fg);
      font-weight: 700;
      font-size: 11px;
      list-style: none;
    }

    .chat-msg-row.system .chat-bubble .system-details summary::-webkit-details-marker {
      display: none;
    }

    .chat-msg-row.system .chat-bubble .orchestrator-panel {
      background: rgba(2, 6, 23, 0.03);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 6px 8px;
    }

    .chat-msg-row.system .chat-bubble .orchestrator-summary {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
      font-size: 11px;
      color: var(--fg);
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .orchestrator-summary-title {
      font-weight: 700;
      flex: 1 1 auto;
    }

    .orchestrator-summary-meta {
      font-weight: 500;
      font-size: 10px;
      color: var(--muted);
      margin-right: auto;
    }

    .orchestrator-actions {
      margin-left: auto;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .orchestrator-action-btn {
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg);
      border-radius: 6px;
      padding: 2px 6px;
      font-size: 9px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s ease;
    }

    .orchestrator-action-btn:hover {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }

    .orchestrator-action-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .orchestrator-action-icon {
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg);
      border-radius: 6px;
      padding: 0;
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .orchestrator-action-icon:hover {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }

    .orchestrator-action-icon:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .orchestrator-guardrail {
      margin-top: 6px;
      padding: 6px 8px;
      border: 1px dashed var(--border);
      border-radius: 8px;
      font-size: 10px;
      color: var(--muted);
      background: rgba(2, 6, 23, 0.04);
    }

    .orchestrator-maximize-btn {
      margin-left: 4px;
      border-left: 1px solid var(--border) !important;
      border-radius: 0 4px 4px 0 !important;
    }

    .progress-view-toggle .progress-view-btn:not(:last-child) {
      border-right: none;
    }

    .orchestrator-panel.maximized::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      z-index: 9998;
    }

    .orchestrator-panel.maximized {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background: var(--bg) !important;
      margin: 0 !important;
      border-radius: 0;
      display: grid !important;
      grid-template-rows: min-content 1fr;
      padding: 16px;
      box-sizing: border-box;
      overflow: hidden;
      box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.8);
      visibility: visible !important;
    }

    body.modal-open {
      overflow: hidden !important;
    }

    body.modal-open #chatMessages,
    body.modal-open .wrap>*:not(.orchestrator-panel.maximized) {
      z-index: 1 !important;
      position: relative;
      visibility: hidden;
    }

    /* Hide overlays that might obstruct the maximized view */
    body.modal-open .token-notification,
    body.modal-open .action-notification,
    body.modal-open .message-menu-dropdown,
    body.modal-open .tools-dropdown-list {
      display: none !important;
    }

    @media (prefers-color-scheme: dark) {
      .orchestrator-panel.maximized::before {
        background: rgba(0, 0, 0, 0.9);
      }

      .orchestrator-panel.maximized {
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.9);
      }
    }

    .orchestrator-panel.maximized .orchestrator-summary {
      font-size: 14px;
      margin-bottom: 0;
      padding: 12px;
      border-bottom: 2px solid var(--border);
      background: rgba(37, 99, 235, 0.05);
      border-radius: 0;
      position: relative;
      flex-shrink: 0;
      display: flex !important;
      z-index: 10001;
    }

    .orchestrator-panel.maximized .progress-bar {
      margin: 12px 0;
      flex-shrink: 0;
      display: block !important;
      visibility: visible !important;
      position: relative;
      z-index: 10001;
    }

    .orchestrator-panel.maximized .progress-view-toggle {
      flex-shrink: 0;
      margin: 12px 0;
      display: flex !important;
      visibility: visible !important;
      position: relative;
      z-index: 10001;
    }

    .orchestrator-panel.maximized .progress-view-btn {
      display: flex !important;
      visibility: visible !important;
    }

    .orchestrator-panel.maximized .progress-view-container {
      flex: 1;
      display: flex !important;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
      visibility: visible !important;
      position: relative;
      z-index: 10001;
    }

    .orchestrator-panel.maximized .cytoscape-container {
      flex: 1;
      min-height: 0 !important;
      border-width: 2px;
      border-radius: 8px;
      display: block !important;
      visibility: visible !important;
      position: relative !important;
      z-index: 10002;
    }

    .orchestrator-panel.maximized .cytoscape-toolbar,
    .orchestrator-panel.maximized .cytoscape-legend {
      display: flex !important;
      visibility: visible !important;
      position: absolute !important;
      z-index: 10001;
    }

    .orchestrator-panel.maximized .cytoscape-toolbar {
      top: 8px !important;
      right: 8px !important;
    }

    .orchestrator-panel.maximized .cytoscape-legend {
      bottom: 8px !important;
      left: 8px !important;
    }

    .orchestrator-panel.maximized .cytoscape-toolbar-btn {
      display: flex !important;
      visibility: visible !important;
    }

    .orchestrator-panel.maximized .legend-item {
      display: flex !important;
      visibility: visible !important;
    }

    .orchestrator-panel.maximized .progress-list {
      flex: 1;
      overflow-y: auto;
      min-height: 300px;
      display: flex !important;
      visibility: visible !important;
    }

    .orchestrator-panel.maximized .orchestrator-content-wrapper {
      flex: 1;
      display: flex !important;
      flex-direction: column;
      min-height: 0;
      height: 100%;
      overflow: hidden;
      visibility: visible !important;
      position: relative;
      z-index: 10000;
      background: var(--bg);
    }

    .chat-msg-row.system .chat-bubble .orchestrator-summary::after {
      content: '▸';
      margin-left: auto;
      font-size: 11px;
      color: var(--muted);
      transition: transform 0.2s ease;
    }

    .chat-msg-row.system .chat-bubble details[open]>.orchestrator-summary::after {
      transform: rotate(90deg);
    }

    .chat-msg-row.system .chat-bubble .system-pre {
      margin: 6px 0 0;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(2, 6, 23, 0.04);
      white-space: pre-wrap;
      word-break: break-word;
      max-height: none;
      overflow-x: auto;
      overflow-y: visible;
      font-size: 11px;
      line-height: 1.35;
      color: var(--fg);
    }

    .chat-msg-row.system .chat-bubble .progress-header {
      font-weight: 700;
      color: var(--fg);
      margin-bottom: 6px;
    }

    .chat-msg-row.system .chat-bubble .progress-bar {
      height: 6px;
      border-radius: 999px;
      background: rgba(37, 99, 235, 0.12);
      border: 1px solid rgba(37, 99, 235, 0.2);
      overflow: hidden;
      margin-bottom: 8px;
    }

    .chat-msg-row.system .chat-bubble .progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--brand), #60a5fa);
      width: 0%;
    }

    .chat-msg-row.system .chat-bubble .progress-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 11px;
      color: var(--muted);
      padding: 6px;
      border-radius: 8px;
      background: rgba(2, 6, 23, 0.03);
      border: 1px solid var(--border);
    }

    .chat-msg-row.system .chat-bubble .progress-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 6px;
      background: var(--card);
      border: 1px solid var(--border);
      font-weight: 500;
      justify-content: space-between;
      /* Allow long task summaries (prompts / URLs / JSON) to wrap */
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .chat-msg-row.system .chat-bubble .progress-item-text {
      flex: 1 1 auto;
      min-width: 180px;
      overflow: visible;
      white-space: normal;
    }

    /* Rich text rendering inside progress items */
    .chat-msg-row.system .chat-bubble .progress-item-text .code-snippet-container {
      margin: 8px 0;
      font-size: 11px;
    }

    .chat-msg-row.system .chat-bubble .progress-item-text .code-snippet-header {
      padding: 6px 10px;
    }

    .chat-msg-row.system .chat-bubble .progress-item-text .code-snippet {
      padding: 8px 10px;
      font-size: 11px;
    }

    .chat-msg-row.system .chat-bubble .progress-item-text .rich-text {
      font-size: 11px;
      line-height: 1.4;
    }

    .chat-msg-row.system .chat-bubble .progress-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
      flex-wrap: wrap;
    }

    .chat-msg-row.system .chat-bubble .progress-actions.is-hidden {
      display: none;
    }

    .chat-msg-row.system .chat-bubble .progress-action-btn {
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg);
      border-radius: 6px;
      padding: 2px 4px;
      font-size: 9px;
      min-width: 98px;
      text-align: center;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s ease;
    }

    .chat-msg-row.system .chat-bubble .progress-action-btn-compact {
      min-width: 0;
      padding: 2px 6px;
    }

    .chat-msg-row.system .chat-bubble .progress-action-btn:hover {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }

    .chat-msg-row.system .chat-bubble .progress-item.running {
      background: rgba(37, 99, 235, 0.12);
      border-color: rgba(37, 99, 235, 0.35);
      color: var(--fg);
    }

    .chat-msg-row.system .chat-bubble .progress-item.completed {
      background: rgba(16, 185, 129, 0.12);
      border-color: rgba(16, 185, 129, 0.35);
      color: var(--fg);
    }

    .chat-msg-row.system .chat-bubble .progress-item.failed {
      background: rgba(239, 68, 68, 0.12);
      border-color: rgba(239, 68, 68, 0.35);
      color: var(--fg);
    }

    .orchestrator-failure-actions {
      display: flex;
      gap: 8px;
      padding: 8px 0 0 0;
      flex-wrap: wrap;
    }

    body.orchestrator-modal-open {
      overflow: hidden;
    }

    .orchestrator-modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10050;
    }

    .orchestrator-modal.is-open {
      display: flex;
    }

    .orchestrator-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
    }

    .orchestrator-modal-card {
      position: relative;
      z-index: 10051;
      width: min(720px, 92vw);
      height: 85vh;
      max-height: 85vh;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    }

    .orchestrator-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      background: rgba(37, 99, 235, 0.05);
    }

    .orchestrator-modal-title {
      font-weight: 700;
      font-size: 12px;
      color: var(--fg);
    }

    .orchestrator-modal-close {
      border: none;
      background: transparent;
      color: var(--fg);
      font-size: 14px;
      cursor: pointer;
    }

    .orchestrator-modal-header-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .orchestrator-modal-maximize {
      border: none;
      background: transparent;
      color: var(--fg);
      font-size: 13px;
      cursor: pointer;
    }

    .orchestrator-modal-body {
      padding: 12px 14px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1 1 auto;
      min-height: 0;
    }

    .orchestrator-modal-footer {
      padding: 10px 14px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .orchestrator-modal.is-maximized {
      align-items: stretch;
      justify-content: stretch;
    }

    .orchestrator-modal.is-maximized .orchestrator-modal-card {
      width: 100vw;
      height: 100vh;
      max-height: 100vh;
      border-radius: 0;
    }

    .orchestrator-modal.is-maximized .orchestrator-modal-body {
      flex: 1 1 auto;
      overflow: hidden;
    }

    .orchestrator-modal.is-maximized .orchestrator-modal-form {
      flex: 1 1 auto;
      min-height: 0;
    }

    .orchestrator-modal.is-maximized .orchestrator-blockly-host {
      height: 100%;
    }

    .orchestrator-modal-btn {
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg);
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 11px;
      cursor: pointer;
    }

    .orchestrator-modal-btn.primary {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }

    .orchestrator-modal-btn.ghost {
      background: transparent;
    }

    .orchestrator-modal-form {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1 1 auto;
      min-height: 0;
    }

    .orchestrator-mode-toggle {
      display: flex;
      gap: 6px;
      justify-content: flex-end;
    }

    .orchestrator-mode-btn {
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg);
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 10px;
      cursor: pointer;
    }

    .orchestrator-mode-btn.active {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }

    .orchestrator-mode-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .orchestrator-blockly-host {
      height: min(520px, 60vh);
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0) 55%), var(--bg);
      box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08);
    }

    .blocklyToolboxDiv {
      background: var(--card) !important;
      border-right: 1px solid var(--border);
      box-shadow: inset -1px 0 0 rgba(148, 163, 184, 0.08);
    }

    .blocklyFlyoutBackground {
      fill: rgba(15, 23, 42, 0.04) !important;
    }

    .orchestrator-blockly-host .blocklySvg {
      background: transparent;
    }

    .orchestrator-blockly-host .blocklyMainBackground {
      fill: rgba(15, 23, 42, 0.02);
    }

    .orchestrator-blockly-host .orchestrator-param-label {
      fill: var(--muted);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      opacity: 0.75;
    }

    .orchestrator-blockly-host .orchestrator-task-title {
      fill: var(--fg);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .orchestrator-blockly-host .orchestrator-field-label {
      fill: var(--muted);
      font-size: 10px;
      font-weight: 600;
    }

    .orchestrator-blockly-host .orchestrator-description-input,
    .orchestrator-blockly-host .orchestrator-param-input {
      font-size: 11px;
    }

    .orchestrator-blockly-host .orchestrator-description-input {
      font-weight: 600;
    }

    .orchestrator-blockly-host .blocklyEditableText>rect {
      fill: rgba(15, 23, 42, 0.08);
      stroke: rgba(148, 163, 184, 0.35);
      rx: 6;
      ry: 6;
    }

    .orchestrator-blockly-host .blocklyEditableText>text {
      fill: var(--fg);
      font-weight: 500;
    }

    .orchestrator-blockly-host .blocklyEditableText {
      margin-top: 4px;
    }

    .orchestrator-blockly-host .blocklyTextInputField {
      font-size: 11px;
    }

    .blocklyTreeRow {
      border-radius: 8px;
      margin: 3px 6px;
      padding: 6px 8px;
    }

    .blocklyTreeLabel {
      font-size: 11px;
      font-weight: 600;
      color: var(--fg);
    }

    .blocklyTreeRow:hover {
      background: rgba(37, 99, 235, 0.12);
    }

    .blocklyTreeSelected {
      background: rgba(37, 99, 235, 0.2) !important;
    }

    .blocklyTreeIcon {
      opacity: 0.7;
    }

    .blocklyFlyout {
      border-left: 1px solid var(--border);
    }

    .blocklyScrollbarHandle {
      fill: rgba(148, 163, 184, 0.6);
    }

    .blocklyScrollbarBackground {
      fill: rgba(15, 23, 42, 0.06);
    }

    .blocklyZoom {
      opacity: 0.85;
    }

    .orchestrator-modal-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .orchestrator-modal-label {
      font-size: 11px;
      color: var(--muted);
    }

    .orchestrator-modal-static {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 11px;
      background: rgba(2, 6, 23, 0.03);
      color: var(--fg);
    }

    .orchestrator-modal-input,
    .orchestrator-modal-select,
    .orchestrator-modal-textarea {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 11px;
      background: var(--bg);
      color: var(--fg);
      box-sizing: border-box;
    }

    .orchestrator-modal-textarea {
      min-height: 80px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      white-space: pre;
      flex: 1 1 auto;
      resize: none;
      overflow-y: auto;
    }

    .orchestrator-modal-error {
      color: #ef4444;
      font-size: 11px;
    }

    .orchestrator-modal-note {
      font-size: 11px;
      color: var(--muted);
    }

    .orchestrator-modal-pre {
      font-size: 11px;
      white-space: pre-wrap;
    }

    .orchestrator-modal-checkbox-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--fg);
    }

    .orchestrator-param-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .orchestrator-formula-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .orchestrator-formula-row .orchestrator-modal-input {
      flex: 1;
    }

    .orchestrator-param-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .orchestrator-param-row {
      display: grid;
      grid-template-columns: 1.2fr 1fr 0.7fr 0.5fr 28px;
      gap: 6px;
      align-items: center;
    }

    .orchestrator-param-row--header {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .orchestrator-param-remove {
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg);
      border-radius: 6px;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .orchestrator-param-remove:hover {
      background: rgba(239, 68, 68, 0.1);
      border-color: #ef4444;
      color: #ef4444;
    }

    .orchestrator-adapt-status {
      font-size: 11px;
      color: var(--muted);
      margin-left: 8px;
    }

    .orchestrator-adapt-success {
      color: #10b981;
    }

    .orchestrator-adapt-error {
      color: #ef4444;
    }

    .orchestrator-input-error {
      border-color: #ef4444 !important;
      background: rgba(239, 68, 68, 0.1) !important;
    }

    .orchestrator-intent-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .orchestrator-intent-item {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px;
      background: rgba(2, 6, 23, 0.03);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .orchestrator-intent-title {
      font-weight: 700;
      font-size: 12px;
    }

    .orchestrator-intent-meta {
      font-size: 10px;
      color: var(--muted);
    }

    .orchestrator-intent-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .chat-msg-row.system .chat-bubble .progress-more {
      opacity: 0.8;
    }

    .chat-msg-row.system .chat-avatar {
      background: linear-gradient(135deg, #334155, #1f2937);
      color: #e2e8f0;
      border: 1px solid var(--border);
      font-size: 12px;
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
    }

    @media (prefers-color-scheme: dark) {
      .chat-msg-row.system .chat-bubble {
        background: rgba(148, 163, 184, 0.08);
        border-color: rgba(148, 163, 184, 0.25);
        color: #94a3b8;
      }
    }

    /* Renderer Tab Styles */
    .renderer-container {
      display: flex;
      flex-direction: column;
      height: calc(100vh - 280px);
      min-height: 400px;
    }

    .renderer-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px 8px 0 0;
      flex-shrink: 0;
    }

    .renderer-toolbar .secondary-btn {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .renderer-frame-container {
      flex: 1;
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 8px 8px;
      overflow: hidden;
      background: #fff;
    }

    .renderer-frame {
      width: 100%;
      height: 100%;
      border: none;
      background: #fff;
    }

    @media (prefers-color-scheme: dark) {
      .renderer-frame-container {
        background: #1a1a1a;
      }

      .renderer-frame {
        background: #1a1a1a;
      }
    }

    /* Message Menu - Discrete Three-Dot Menu */
    .message-menu-trigger {
      position: absolute;
      top: 4px;
      right: -24px;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 4px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      background: linear-gradient(135deg, var(--brand), #60a5fa);
      opacity: 0.8;
      transition: opacity 0.2s ease, transform 0.2s ease;
      user-select: none;
    }

    .chat-bubble-container {
      position: relative;
      max-width: calc(100% - 40px);
      width: calc(100% - 40px);
    }

    /* User message bubble container - align to right with fixed width */
    .chat-msg-row.user .chat-bubble-container {
      margin-left: auto;
      max-width: 70%;
      width: auto;
    }

    .chat-msg-row.user .message-menu-trigger {
      right: auto;
      left: -24px;
    }

    .chat-msg-row.user .message-menu-dropdown {
      right: auto;
      left: -24px;
    }

    .chat-msg-row:hover .message-menu-trigger {
      opacity: 1;
    }

    .message-menu-trigger:hover {
      opacity: 1;
      transform: scale(1.1);
    }

    .message-menu-dropdown {
      position: absolute;
      top: 22px;
      right: 0;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 1000;
      min-width: 160px;
      display: none;
      overflow: hidden;
    }

    .message-menu-dropdown.show {
      display: block;
    }

    .message-menu-item {
      width: 100%;
      padding: 6px 10px;
      border: none;
      border-radius: 0;
      background: transparent;
      color: var(--fg);
      font-size: 11px;
      font-weight: normal;
      text-align: left;
      cursor: pointer;
      transition: background 0.2s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .message-menu-item:hover {
      background: rgba(37, 99, 235, 0.08);
    }

    .message-menu-item:active {
      background: rgba(37, 99, 235, 0.15);
    }

    /* Different colors for delete actions */
    .message-menu-item.delete-item:hover,
    .message-menu-item.delete-with-answer-item:hover {
      background: rgba(239, 68, 68, 0.08);
      color: #ef4444;
    }

    /* Dark mode adjustments */
    @media (prefers-color-scheme: dark) {
      .message-menu-trigger:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .message-menu-dropdown {
        background: var(--card);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      }

      .message-menu-item.delete-item:hover,
      .message-menu-item.delete-with-answer-item:hover {
        background: rgba(239, 68, 68, 0.15);
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       RICH RENDERING - Tables and links inside assistant bubbles
       ═══════════════════════════════════════════════════════════════════════════ */
    .chat-msg-row.assistant .chat-bubble .rich-text {
      white-space: pre-wrap;
    }

    .chat-msg-row.assistant .chat-bubble .rich-link {
      color: var(--brand);
      text-decoration: underline;
      text-underline-offset: 2px;
      word-break: break-word;
    }

    .chat-msg-row.assistant .chat-bubble .rich-link:hover {
      opacity: 0.9;
    }

    .chat-msg-row.assistant .chat-bubble .rich-table-wrap {
      margin-top: 4px;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow-x: auto;
      overflow-y: visible;
      max-width: 100%;
      background: rgba(2, 6, 23, 0.02);
    }

    .chat-msg-row.assistant .chat-bubble .rich-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 11px;
      line-height: 1.25;
    }

    .chat-msg-row.assistant .chat-bubble .rich-table thead th {
      position: sticky;
      top: 0;
      font-weight: 700;
      border-bottom: 1px solid var(--border);
      padding: 6px 8px;
      text-align: left;
      white-space: nowrap;
      /* High contrast: light text on dark background */
      background: #1e293b;
      color: #f8fafc;
    }

    .chat-msg-row.assistant .chat-bubble .rich-table td {
      padding: 6px 8px;
      border-bottom: 1px solid var(--border);
      vertical-align: top;
      color: var(--fg);
    }

    .chat-msg-row.assistant .chat-bubble .rich-table tr:last-child td {
      border-bottom: none;
    }

    .chat-msg-row.assistant .chat-bubble .rich-table td.num {
      width: 28px;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .chat-msg-row.assistant .chat-bubble .rich-table td.snippet {
      color: var(--muted);
      max-width: 280px;
    }

    .chat-msg-row.assistant .chat-bubble .rich-table td.link,
    .chat-msg-row.assistant .chat-bubble .rich-table th.link {
      width: 56px;
      white-space: nowrap;
    }

    .chat-msg-row.assistant .chat-bubble .rich-table td.link .rich-link {
      display: inline-block;
      white-space: nowrap;
    }

    .chat-msg-row.assistant .chat-bubble .rich-search td.snippet {
      white-space: normal;
      word-break: break-word;
    }

    .chat-msg-row.assistant .chat-bubble .rich-kv th {
      padding: 6px 8px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      font-weight: 700;
      color: var(--fg);
      width: 32%;
      vertical-align: top;
      background: rgba(2, 6, 23, 0.05);
    }

    .chat-msg-row.assistant .chat-bubble .rich-details {
      margin: 0;
    }

    .chat-msg-row.assistant .chat-bubble .rich-details summary {
      cursor: pointer;
      color: var(--brand);
      font-weight: 600;
      font-size: 11px;
    }

    .chat-msg-row.assistant .chat-bubble .rich-details pre {
      margin: 6px 0 0;
      padding: 6px 8px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(2, 6, 23, 0.04);
      white-space: pre-wrap;
      word-break: break-word;
      max-height: none;
      overflow-x: auto;
      overflow-y: visible;
      font-size: 11px;
    }

    /* Dark mode adjustments for improved table headers */
    @media (prefers-color-scheme: dark) {
      .chat-msg-row.assistant .chat-bubble .rich-table thead th {
        /* Dark mode: light text on slightly lighter dark background */
        background: #334155;
        color: #f1f5f9;
      }

      .chat-msg-row.assistant .chat-bubble .rich-kv th {
        background: rgba(255, 255, 255, 0.08);
        color: #f1f5f9;
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       MESSAGE ACTION BUTTONS - Use, Copy under assistant bubbles
       ═══════════════════════════════════════════════════════════════════════════ */
    .message-actions {
      display: flex;
      gap: 6px;
      margin-top: 6px;
      padding: 4px 0;
      flex-wrap: wrap;
    }

    .message-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      color: var(--fg);
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .message-action-btn:hover {
      background: var(--brand);
      color: white;
      border-color: var(--brand);
    }

    .message-action-btn:active {
      transform: scale(0.97);
    }

    .message-action-btn .action-icon {
      font-size: 12px;
      line-height: 1;
    }

    .message-action-btn.use-btn {
      border-color: var(--ok);
      color: var(--ok);
    }

    .message-action-btn.use-btn:hover {
      background: var(--ok);
      color: white;
      border-color: var(--ok);
    }

    .message-action-btn.copy-btn {
      border-color: var(--brand);
      color: var(--brand);
    }

    .message-action-btn.copy-btn:hover {
      background: var(--brand);
      color: white;
    }

    .message-action-btn.copied {
      background: var(--ok);
      color: white;
      border-color: var(--ok);
    }

    @media (prefers-color-scheme: dark) {
      .message-action-btn {
        background: rgba(255, 255, 255, 0.05);
      }

      .message-action-btn:hover {
        background: var(--brand);
      }

      .message-action-btn.use-btn:hover {
        background: var(--ok);
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       VIEW TOGGLE - Switch between Auto/Code/Table/Tree/Original views
       ═══════════════════════════════════════════════════════════════════════════ */
    .view-toggle {
      display: flex;
      gap: 4px;
      margin-bottom: 8px;
      padding: 4px;
      background: rgba(2, 6, 23, 0.03);
      border-radius: 8px;
      border: 1px solid var(--border);
    }

    .view-toggle-btn {
      flex: 1;
      padding: 4px 8px;
      border: 1px solid transparent;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .view-toggle-btn:hover {
      background: rgba(37, 99, 235, 0.08);
      color: var(--brand);
    }

    .view-toggle-btn.active {
      background: var(--brand);
      color: white;
      border-color: var(--brand);
    }

    /* Array preview and conversion styles */
    .array-preview {
      background: rgba(2, 6, 23, 0.02);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px;
      margin-bottom: 8px;
      font-size: 11px;
      font-family: monospace;
    }

    .array-info {
      color: var(--muted);
      margin-bottom: 4px;
      font-weight: 500;
    }

    .array-sample {
      white-space: pre-wrap;
      word-break: break-all;
      color: var(--fg);
      font-size: 10px;
      line-height: 1.4;
    }

    .convert-table-btn {
      background: var(--brand);
      color: white;
      border: none;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 11px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 4px;
      transition: all 0.2s ease;
      font-weight: 500;
    }

    .convert-table-btn:hover {
      background: var(--brand-hover);
      transform: translateY(-1px);
    }

    .convert-table-btn:active {
      transform: translateY(0);
    }

    .convert-table-btn:disabled {
      background: var(--muted);
      cursor: not-allowed;
      transform: none;
    }

    /* Enhanced content type indicators */
    .chat-msg-row.assistant .content-type-indicator {
      display: inline-block;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 8px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .chat-msg-row.assistant .content-type-indicator.array {
      background: rgba(59, 130, 246, 0.1);
      color: #3b82f6;
      border: 1px solid rgba(59, 130, 246, 0.2);
    }

    .chat-msg-row.assistant .content-type-indicator.object {
      background: rgba(16, 185, 129, 0.1);
      color: #10b981;
      border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .chat-msg-row.assistant .content-type-indicator.search {
      background: rgba(245, 158, 11, 0.1);
      color: #f59e0b;
      border: 1px solid rgba(245, 158, 11, 0.2);
    }

    .chat-msg-row.assistant .content-type-indicator.text {
      background: rgba(107, 114, 128, 0.1);
      color: #6b7280;
      border: 1px solid rgba(107, 114, 128, 0.2);
    }

    /* Dark mode support for new components */
    @media (prefers-color-scheme: dark) {
      .array-preview {
        background: rgba(248, 250, 252, 0.05);
        border-color: rgba(248, 250, 252, 0.1);
      }

      .array-info {
        color: var(--muted);
      }

      .array-sample {
        color: var(--fg);
      }

      .chat-msg-row.assistant .content-type-indicator.array {
        background: rgba(59, 130, 246, 0.15);
        color: #60a5fa;
        border-color: rgba(59, 130, 246, 0.3);
      }

      .chat-msg-row.assistant .content-type-indicator.object {
        background: rgba(16, 185, 129, 0.15);
        color: #34d399;
        border-color: rgba(16, 185, 129, 0.3);
      }

      .chat-msg-row.assistant .content-type-indicator.search {
        background: rgba(245, 158, 11, 0.15);
        color: #fbbf24;
        border-color: rgba(245, 158, 11, 0.3);
      }

      .chat-msg-row.assistant .content-type-indicator.text {
        background: rgba(156, 163, 175, 0.15);
        color: #9ca3af;
        border-color: rgba(156, 163, 175, 0.3);
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       ORIGINAL VIEW - Raw content display
       ═══════════════════════════════════════════════════════════════════════════ */
    .original-view {
      margin: 0;
      padding: 10px 12px;
      background: rgba(2, 6, 23, 0.04);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      font-size: 11px;
      line-height: 1.4;
      white-space: pre-wrap;
      word-break: break-word;
      overflow-x: auto;
      overflow-y: visible;
      max-height: none;
      color: var(--fg);
    }

    @media (prefers-color-scheme: dark) {
      .original-view {
        background: rgba(255, 255, 255, 0.04);
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       TREE EXPLORER - JSON tree navigation
       ═══════════════════════════════════════════════════════════════════════════ */
    .tree-explorer {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      font-size: 11px;
      line-height: 1.5;
      max-height: none;
      overflow-x: auto;
      overflow-y: visible;
      padding: 8px;
      background: rgba(2, 6, 23, 0.02);
      border: 1px solid var(--border);
      border-radius: 8px;
    }

    .tree-node {
      margin-left: 0;
    }

    .tree-node .tree-node {
      margin-left: 16px;
    }

    .tree-node-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 3px 4px;
      border-radius: 4px;
      cursor: default;
      transition: background 0.15s ease;
    }

    .tree-node-header:hover {
      background: rgba(37, 99, 235, 0.06);
    }

    .tree-toggle {
      width: 14px;
      height: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--muted);
      font-size: 10px;
      user-select: none;
      flex-shrink: 0;
      border-radius: 3px;
      transition: all 0.15s ease;
    }

    .tree-toggle:hover {
      background: rgba(37, 99, 235, 0.15);
      color: var(--brand);
    }

    .tree-toggle-spacer {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    .tree-key {
      color: #9333ea;
      font-weight: 600;
      flex-shrink: 0;
    }

    .tree-type {
      color: var(--muted);
      font-size: 10px;
      padding: 1px 5px;
      background: rgba(2, 6, 23, 0.05);
      border-radius: 4px;
      flex-shrink: 0;
    }

    .tree-type.tree-null {
      color: #ef4444;
      background: rgba(239, 68, 68, 0.1);
    }

    .tree-preview {
      color: var(--fg);
      margin-left: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 200px;
    }

    .tree-value {
      margin-left: 6px;
      color: var(--fg);
    }

    .tree-value.value-null {
      color: #ef4444;
      font-style: italic;
    }

    .tree-value.value-string {
      color: #16a34a;
    }

    .tree-value.value-number {
      color: #2563eb;
    }

    .tree-value.value-boolean {
      color: #9333ea;
      font-weight: 600;
    }

    .tree-children {
      border-left: 1px dashed var(--border);
      margin-left: 7px;
      padding-left: 8px;
    }

    .tree-actions {
      display: flex;
      gap: 4px;
      margin-left: auto;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .tree-node-header:hover .tree-actions {
      opacity: 1;
    }

    .tree-action-btn {
      width: 22px;
      height: 22px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg);
      color: var(--fg);
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }

    .tree-action-btn:hover {
      background: var(--brand);
      color: white;
      border-color: var(--brand);
    }

    @media (prefers-color-scheme: dark) {
      .tree-explorer {
        background: rgba(255, 255, 255, 0.02);
      }

      .tree-key {
        color: #c084fc;
      }

      .tree-type {
        background: rgba(255, 255, 255, 0.05);
      }

      .tree-node-header:hover {
        background: rgba(96, 165, 250, 0.1);
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       TRUNCATION NOTICE - For large tables
       ═══════════════════════════════════════════════════════════════════════════ */
    .truncation-notice {
      margin-top: 8px;
      padding: 6px 10px;
      background: rgba(245, 158, 11, 0.1);
      border: 1px solid rgba(245, 158, 11, 0.3);
      border-radius: 6px;
      color: #d97706;
      font-size: 11px;
      text-align: center;
    }

    @media (prefers-color-scheme: dark) {
      .truncation-notice {
        background: rgba(245, 158, 11, 0.15);
        color: #fbbf24;
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       SNIPPET TEXT - Line clamping for search results
       ═══════════════════════════════════════════════════════════════════════════ */
    .snippet-text {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.4;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       THINKING PANEL - Consolidated collapsible panel for intermediate messages
       ═══════════════════════════════════════════════════════════════════════════ */
    .thinking-panel {
      margin: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--card);
      overflow: hidden;
    }

    .thinking-panel>summary {
      list-style: none;
    }

    .thinking-panel>summary::-webkit-details-marker {
      display: none;
    }

    .thinking-summary {
      padding: 8px 12px;
      cursor: pointer;
      font-size: 12px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background 0.15s ease;
    }

    .thinking-summary .thinking-excel-btn {
      background: rgb(16, 124, 65);
      border-color: rgb(16, 124, 65);
      color: #fff;
    }

    .thinking-summary .thinking-excel-btn:hover {
      background: rgb(13, 102, 54);
      border-color: rgb(13, 102, 54);
      color: #fff;
    }

    .thinking-summary:hover {
      background: rgba(37, 99, 235, 0.05);
    }

    .thinking-summary::before {
      content: '▸';
      font-size: 10px;
      color: var(--muted);
      transition: transform 0.2s ease;
    }

    .thinking-panel[open]>.thinking-summary::before {
      transform: rotate(90deg);
    }

    .thinking-label {
      font-weight: 600;
      color: var(--fg);
    }

    .thinking-status {
      color: var(--brand);
      font-style: italic;
      font-size: 11px;
    }

    .thinking-content {
      padding: 8px;
      border-top: 1px solid var(--border);
      background: rgba(2, 6, 23, 0.02);
    }

    .thinking-content .chat-msg-row {
      margin: 4px 0;
    }

    .thinking-content .chat-msg-row:first-child {
      margin-top: 0;
    }

    .thinking-content .chat-msg-row:last-child {
      margin-bottom: 0;
    }

    @media (prefers-color-scheme: dark) {
      .thinking-panel {
        background: rgba(15, 23, 42, 0.8);
        border-color: rgba(148, 163, 184, 0.2);
      }

      .thinking-summary:hover {
        background: rgba(96, 165, 250, 0.1);
      }

      .thinking-content {
        background: rgba(255, 255, 255, 0.02);
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       THINKING PANEL - PROGRESS CIRCLE
       ═══════════════════════════════════════════════════════════════════════════ */

    .thinking-progress-container {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 6px;
      vertical-align: middle;
      position: relative;
    }

    .thinking-progress-circle {
      display: block;
      transition: transform 0.2s ease;
    }

    .thinking-progress-circle:hover {
      transform: scale(1.15);
    }

    .thinking-progress-track {
      stroke: rgba(37, 99, 235, 0.2);
    }

    .thinking-progress-fill {
      stroke: var(--brand);
      transition: stroke-dasharray 0.3s ease;
    }

    /* Success segment - green stroke (only for completed tasks) */
    .thinking-progress-success {
      stroke: var(--ok);
    }

    /* Failed segment - red stroke */
    .thinking-progress-failed {
      stroke: var(--error);
    }

    /* Running state (not complete) - keep original brand color for success segment */
    .thinking-progress-circle.running .thinking-progress-success {
      stroke: var(--brand);
    }

    /* When complete, success stays green and failed stays red */
    .thinking-progress-circle.complete .thinking-progress-success {
      stroke: var(--ok);
    }

    /* When has failures but complete - keep success green, failures red */
    .thinking-progress-circle.has-failed.complete .thinking-progress-success {
      stroke: var(--ok);
    }

    .thinking-progress-circle.has-failed.complete .thinking-progress-failed {
      stroke: var(--error);
    }

    /* Running state - subtle pulse animation */
    @keyframes progress-pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.7;
      }
    }

    .thinking-progress-circle.running .thinking-progress-fill {
      animation: progress-pulse 1.5s ease-in-out infinite;
    }

    /* Dark mode adjustments for progress circle */
    @media (prefers-color-scheme: dark) {
      .thinking-progress-track {
        stroke: rgba(96, 165, 250, 0.25);
      }

      .thinking-progress-success {
        stroke: var(--ok);
      }

      .thinking-progress-failed {
        stroke: var(--error);
      }

      .thinking-progress-circle.running .thinking-progress-success {
        stroke: var(--brand);
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       CODE SNIPPET RENDERING - Syntax highlighted code blocks with action buttons
       ═══════════════════════════════════════════════════════════════════════════ */
    .code-snippet-container {
      margin: 16px 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: #f6f8fa;
    }

    .code-snippet-group {
      margin-top: 8px;
    }

    .code-snippet-label {
      font-size: 11px;
      color: var(--muted);
      margin: 6px 0 4px;
      word-break: break-word;
    }

    .code-snippet-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      background: #f0f2f5;
      border-bottom: 1px solid var(--border);
    }

    .language-label {
      font-size: 11px;
      font-weight: 600;
      color: #586069;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .code-actions {
      display: flex;
      gap: 6px;
      opacity: 0.7;
      transition: opacity 0.2s;
    }

    .code-snippet-container:hover .code-actions {
      opacity: 1;
    }

    .btn-code-action {
      padding: 4px 10px;
      font-size: 11px;
      background: white;
      border: 1px solid #d1d5da;
      border-radius: 3px;
      cursor: pointer;
      color: #586069;
      font-weight: 500;
      transition: all 0.15s;
    }

    .btn-code-action:hover {
      background: #f3f4f6;
      border-color: #959da5;
      color: #24292e;
    }

    .btn-code-action:active {
      background: #edeff2;
      transform: scale(0.97);
    }

    .code-snippet {
      margin: 0;
      padding: 12px;
      background: white;
      overflow-x: auto;
    }

    .code-snippet code {
      display: block;
      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
      font-size: 13px;
      line-height: 1.5;
      color: #24292e;
      white-space: pre;
    }

    /* Syntax Highlighting Colors */
    .json-key {
      color: #0451a5;
      font-weight: 500;
    }

    .json-string {
      color: #a31515;
    }

    .json-number {
      color: #098658;
    }

    .json-boolean {
      color: #0000ff;
      font-weight: 600;
    }

    .json-null {
      color: #808080;
      font-style: italic;
    }

    .html-tag {
      color: #800000;
    }

    .html-attribute {
      color: #ff0000;
    }

    .html-value {
      color: #0000ff;
    }

    .css-selector {
      color: #800000;
      font-weight: 600;
    }

    .css-property {
      color: #ff0000;
    }

    .css-value {
      color: #0451a5;
    }

    .xml-tag {
      color: #800080;
    }

    .xml-attribute {
      color: #ff0000;
    }

    .js-keyword {
      color: #0000ff;
      font-weight: 600;
    }

    .js-string {
      color: #a31515;
    }

    .js-number {
      color: #098658;
    }

    .js-comment {
      color: #008000;
      font-style: italic;
    }

    /* Action Notification */
    .action-notification {
      position: fixed;
      background: #2d3748;
      color: #fff;
      padding: 10px 16px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
      z-index: 10000;
      animation: slideInNotif 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      pointer-events: none;
    }

    .action-notification.fade-out {
      animation: fadeOutNotif 0.3s ease forwards;
    }

    @keyframes slideInNotif {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeOutNotif {
      to {
        opacity: 0;
        transform: translateY(-10px);
      }
    }

    /* Markdown Content Styles */
    .markdown-content {
      padding: 16px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-size: 14px;
      line-height: 1.6;
      color: var(--fg);
    }

    .markdown-content h1,
    .markdown-content h2,
    .markdown-content h3 {
      margin-top: 24px;
      margin-bottom: 12px;
      font-weight: 600;
    }

    .markdown-content h1 {
      font-size: 24px;
    }

    .markdown-content h2 {
      font-size: 20px;
    }

    .markdown-content h3 {
      font-size: 16px;
    }

    .markdown-content p {
      margin: 12px 0;
    }

    .markdown-content ul,
    .markdown-content ol {
      margin: 12px 0;
      padding-left: 24px;
    }

    .markdown-content li {
      margin: 4px 0;
    }

    .markdown-content a {
      color: var(--brand);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .markdown-content a:hover {
      opacity: 0.8;
    }

    .markdown-content strong {
      font-weight: 600;
    }

    .markdown-content em {
      font-style: italic;
    }

    /* Dark mode adjustments for code snippets */
    @media (prefers-color-scheme: dark) {
      .code-snippet-container {
        background: #1a1a1a;
        border-color: rgba(255, 255, 255, 0.1);
      }

      .code-snippet-header {
        background: #2d2d2d;
        border-color: rgba(255, 255, 255, 0.1);
      }

      .language-label {
        color: #a0a0a0;
      }

      .btn-code-action {
        background: #3a3a3a;
        border-color: rgba(255, 255, 255, 0.2);
        color: #d0d0d0;
      }

      .btn-code-action:hover {
        background: #4a4a4a;
        border-color: rgba(255, 255, 255, 0.3);
        color: #ffffff;
      }

      .code-snippet {
        background: #1a1a1a;
      }

      .code-snippet code {
        color: #d4d4d4;
      }

      /* Dark mode syntax highlighting */
      .json-key {
        color: #9cdcfe;
      }

      .json-string {
        color: #ce9178;
      }

      .json-number {
        color: #b5cea8;
      }

      .json-boolean {
        color: #569cd6;
      }

      .json-null {
        color: #808080;
      }

      .html-tag {
        color: #569cd6;
      }

      .html-attribute {
        color: #9cdcfe;
      }

      .html-value {
        color: #ce9178;
      }

      .css-selector {
        color: #d7ba7d;
      }

      .css-property {
        color: #9cdcfe;
      }

      .css-value {
        color: #ce9178;
      }

      .js-keyword {
        color: #569cd6;
      }

      .js-string {
        color: #ce9178;
      }

      .js-number {
        color: #b5cea8;
      }

      .js-comment {
        color: #6a9955;
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       CYTOSCAPE EXECUTION TREE - Graph visualization for task orchestrator
       ═══════════════════════════════════════════════════════════════════════════ */

    /* Progress View Toggle */
    .progress-view-toggle {
      display: flex;
      gap: 2px;
      margin-left: auto;
      background: rgba(2, 6, 23, 0.04);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 2px;
    }

    .progress-view-btn {
      padding: 4px 8px;
      border: none;
      border-radius: 4px;
      background: transparent;
      color: var(--muted);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
    }

    .progress-view-btn:hover {
      background: rgba(37, 99, 235, 0.1);
      color: var(--brand);
    }

    .progress-view-btn.active {
      background: var(--brand);
      color: white;
    }

    /* Sequence view styles */
    .sequence-view.sequence-diagram {
      position: relative;
      padding: 12px 8px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: rgba(2, 6, 23, 0.02);
      min-height: 140px;
      overflow: hidden;
    }

    .sequence-actors {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 10px;
      position: relative;
      z-index: 2;
    }

    .sequence-actor {
      font-size: 11px;
      font-weight: 700;
      padding: 6px 10px;
      border-radius: 10px;
      text-align: center;
      background: var(--card);
      border: 1px solid var(--border);
      color: var(--fg);
    }

    .sequence-lifeline {
      position: absolute;
      top: 48px;
      bottom: 12px;
      width: 2px;
      background: repeating-linear-gradient(to bottom,
          var(--border),
          var(--border) 6px,
          transparent 6px,
          transparent 12px);
      z-index: 1;
      opacity: 0.8;
    }

    .sequence-lifeline.left {
      left: calc(25% - 1px);
    }

    .sequence-lifeline.right {
      left: calc(75% - 1px);
    }

    .sequence-steps {
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      z-index: 2;
    }

    .sequence-step-row {
      display: flex;
      align-items: center;
      gap: 10px;
      position: relative;
      min-height: 30px;
    }

    .sequence-connector {
      flex: 0 0 50%;
      height: 2px;
      position: relative;
    }

    .sequence-connector::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--border);
      transform: translateY(-50%);
    }

    .sequence-connector::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      transform: translateY(-50%);
    }

    .sequence-step-row.outbound .sequence-connector::before {
      left: 50%;
    }

    .sequence-step-row.outbound .sequence-connector::after {
      right: 0;
      border-left: 8px solid var(--border);
    }

    .sequence-step-row.inbound .sequence-connector::before {
      right: 50%;
    }

    .sequence-step-row.inbound .sequence-connector::after {
      left: 0;
      border-right: 8px solid var(--border);
    }

    .sequence-card {
      flex: 1 1 auto;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--card);
      box-shadow: 0 2px 6px rgba(2, 6, 23, 0.08);
    }

    .sequence-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .sequence-card-status {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      background: rgba(2, 6, 23, 0.06);
      border: 1px solid var(--border);
    }

    .sequence-card-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--fg);
      flex: 1;
      min-width: 0;
      word-break: break-word;
    }

    .sequence-card-type {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(37, 99, 235, 0.1);
      color: var(--brand);
      border: 1px solid rgba(37, 99, 235, 0.2);
      white-space: nowrap;
    }

    .sequence-card-meta {
      margin-top: 4px;
      font-size: 10px;
      color: var(--muted);
    }

    .sequence-card-error {
      margin-top: 6px;
      font-size: 10px;
      color: #ef4444;
      word-break: break-word;
    }

    .sequence-card.completed {
      border-color: rgba(16, 185, 129, 0.35);
      background: rgba(16, 185, 129, 0.08);
    }

    .sequence-card.running {
      border-color: rgba(37, 99, 235, 0.35);
      background: rgba(37, 99, 235, 0.08);
    }

    .sequence-card.failed {
      border-color: rgba(239, 68, 68, 0.35);
      background: rgba(239, 68, 68, 0.08);
    }

    .sequence-step-row.status-completed .sequence-connector::before,
    .sequence-step-row.status-completed .sequence-connector::after {
      background: rgba(16, 185, 129, 0.6);
      border-left-color: rgba(16, 185, 129, 0.6);
      border-right-color: rgba(16, 185, 129, 0.6);
    }

    .sequence-step-row.status-running .sequence-connector::before,
    .sequence-step-row.status-running .sequence-connector::after {
      background: rgba(37, 99, 235, 0.6);
      border-left-color: rgba(37, 99, 235, 0.6);
      border-right-color: rgba(37, 99, 235, 0.6);
    }

    .sequence-step-row.status-failed .sequence-connector::before,
    .sequence-step-row.status-failed .sequence-connector::after {
      background: rgba(239, 68, 68, 0.6);
      border-left-color: rgba(239, 68, 68, 0.6);
      border-right-color: rgba(239, 68, 68, 0.6);
    }

    @media (max-width: 520px) {
      .sequence-lifeline.left {
        left: calc(20% - 1px);
      }

      .sequence-lifeline.right {
        left: calc(80% - 1px);
      }
    }

    @media (prefers-color-scheme: dark) {
      .sequence-view.sequence-diagram {
        background: rgba(255, 255, 255, 0.03);
      }

      .sequence-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
      }
    }

    /* Cytoscape Container */
    .cytoscape-container {
      width: 100%;
      height: 300px;
      min-height: 200px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #0f172a;
      position: relative;
      overflow: hidden;
    }

    .progress-view-container {
      position: relative;
      z-index: 1;
      transition: height 0.2s ease;
    }

    .cytoscape-container.expanded {
      height: 450px;
    }

    /* Cytoscape Toolbar */
    .cytoscape-toolbar {
      position: absolute;
      top: 8px;
      right: 8px;
      display: flex;
      gap: 4px;
      z-index: 10;
    }

    .cytoscape-toolbar-btn {
      width: 28px;
      height: 28px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      color: var(--fg);
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .cytoscape-toolbar-btn:hover {
      background: var(--brand);
      color: white;
      border-color: var(--brand);
    }

    /* Node Tooltip */
    .cytoscape-tooltip {
      position: absolute;
      padding: 10px 14px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      font-size: 11px;
      max-width: 350px;
      max-height: 400px;
      overflow-y: auto;
      z-index: 10000;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s ease;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .cytoscape-tooltip.visible {
      opacity: 1;
    }

    .tooltip-title {
      font-weight: 700;
      color: var(--fg);
      margin-bottom: 4px;
      font-size: 12px;
      word-break: break-word;
    }

    .tooltip-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: 10px;
    }

    .tooltip-label {
      color: var(--muted);
      font-weight: 500;
    }

    .tooltip-value {
      color: var(--fg);
      font-weight: 600;
    }

    .tooltip-section-title {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--muted);
      margin-top: 8px;
      border-top: 1px solid var(--border);
      padding-top: 6px;
    }

    .tooltip-pre {
      margin: 4px 0;
      padding: 8px;
      background: rgba(2, 6, 23, 0.05);
      border-radius: 6px;
      font-family: ui-monospace, SFMono-Regular, monospace;
      font-size: 10px;
      line-height: 1.4;
      white-space: pre-wrap;
      word-break: break-all;
      color: var(--fg);
      max-height: 200px;
      overflow-y: auto;
    }

    .tooltip-hint {
      font-size: 9px;
      font-style: italic;
      color: var(--brand);
      margin-top: 4px;
      text-align: center;
    }

    /* Node Detail Panel (for double-click expansion) */
    .node-detail-panel {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      max-width: 500px;
      max-height: 80%;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      z-index: 100;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .node-detail-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: var(--card);
      border-bottom: 1px solid var(--border);
    }

    .node-detail-title {
      font-weight: 600;
      font-size: 14px;
      color: var(--fg);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .node-detail-type-badge {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      background: rgba(37, 99, 235, 0.1);
      color: var(--brand);
    }

    .node-detail-close {
      width: 28px;
      height: 28px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      color: var(--fg);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }

    .node-detail-close:hover {
      background: #ef4444;
      color: white;
      border-color: #ef4444;
    }

    .node-detail-content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }

    .node-detail-section {
      margin-bottom: 16px;
    }

    .node-detail-section:last-child {
      margin-bottom: 0;
    }

    .node-detail-section-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .node-detail-section-title .section-icon {
      font-size: 14px;
    }

    .node-detail-tree {
      background: rgba(2, 6, 23, 0.02);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px;
      max-height: 200px;
      overflow-y: auto;
    }

    /* Status indicator animation for running nodes */
    @keyframes pulse-running {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
      }

      50% {
        box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
      }
    }

    /* Legend */
    .cytoscape-legend {
      position: absolute;
      bottom: 8px;
      left: 8px;
      display: flex;
      gap: 12px;
      padding: 6px 10px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 10px;
      z-index: 10;
    }

    .cytoscape-legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--muted);
    }

    .cytoscape-legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .cytoscape-legend-dot.pending {
      background: #9ca3af;
      border: 2px solid #6b7280;
    }

    .cytoscape-legend-dot.running {
      background: #60a5fa;
      border: 2px solid var(--brand);
    }

    .cytoscape-legend-dot.completed {
      background: #34d399;
      border: 2px solid var(--ok);
    }

    .cytoscape-legend-dot.failed {
      background: #f87171;
      border: 2px solid #ef4444;
    }

    /* Dark mode adjustments */
    @media (prefers-color-scheme: dark) {
      .cytoscape-container {
        background: #0f172a;
      }

      .cytoscape-legend {
        background: rgba(15, 23, 42, 0.9);
      }

      .node-detail-panel {
        background: #0f172a;
      }

      .node-detail-header {
        background: #1e293b;
      }

      .node-detail-tree {
        background: rgba(255, 255, 255, 0.02);
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       BLOCKLY DROPDOWN Z-INDEX FIX - Ensure dropdowns appear above modals
       ═══════════════════════════════════════════════════════════════════════════ */
    .blocklyDropDownDiv {
      z-index: 100000 !important;
    }

    .blocklyWidgetDiv {
      z-index: 100000 !important;
    }

    .blocklyTooltipDiv {
      z-index: 100000 !important;
    }

    /* ============================================================
   Plan Input Modal - for chat_read_input task type
   ============================================================ */
    .plan-input-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 200000;
    }

    .plan-input-modal {
      background: var(--card, #0f172a);
      border: 1px solid var(--border, #1f2a44);
      border-radius: 12px;
      padding: 20px;
      min-width: 320px;
      max-width: 480px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    .plan-input-modal-header {
      font-size: 16px;
      font-weight: 600;
      color: var(--fg, #e5e7eb);
      margin-bottom: 12px;
    }

    .plan-input-modal-prompt {
      font-size: 14px;
      color: var(--fg-muted, #94a3b8);
      margin-bottom: 16px;
      white-space: pre-wrap;
    }

    .plan-input-modal-input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--border, #1f2a44);
      border-radius: 8px;
      background: var(--bg, #0b1020);
      color: var(--fg, #e5e7eb);
      font-size: 14px;
      resize: vertical;
      min-height: 60px;
      box-sizing: border-box;
    }

    .plan-input-modal-input:focus {
      outline: none;
      border-color: var(--brand, #60a5fa);
    }

    .plan-input-modal-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 16px;
    }

    .plan-input-modal-submit,
    .plan-input-modal-cancel {
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s;
    }

    .plan-input-modal-submit {
      background: var(--brand, #60a5fa);
      color: white;
      border: none;
    }

    .plan-input-modal-submit:hover {
      background: var(--brand-hover, #3b82f6);
    }

    .plan-input-modal-cancel {
      background: transparent;
      color: var(--fg-muted, #94a3b8);
      border: 1px solid var(--border, #1f2a44);
    }

    .plan-input-modal-cancel:hover {
      background: var(--bg-hover, #1e293b);
    }

    /* ═══════════════════════════════════════════════════════════════════════════
   JSON EDITOR - Full-featured JSON editor component
   ═══════════════════════════════════════════════════════════════════════════ */

    .json-editor {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: var(--bg);
    }

    .json-editor-toolbar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      background: var(--card);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      flex-wrap: wrap;
    }

    .json-editor-btn {
      padding: 4px 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      color: var(--fg);
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .json-editor-btn:hover {
      background: var(--brand);
      color: white;
      border-color: var(--brand);
    }

    .json-editor-status {
      margin-left: auto;
      font-size: 11px;
      font-weight: 500;
      padding: 2px 8px;
      border-radius: 4px;
    }

    .json-editor-status.valid {
      color: var(--ok);
      background: rgba(22, 163, 74, 0.1);
    }

    .json-editor-status.error {
      color: #ef4444;
      background: rgba(239, 68, 68, 0.1);
    }

    .json-editor-container {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    .json-editor-gutter {
      flex-shrink: 0;
      background: var(--card);
      border-right: 1px solid var(--border);
      overflow: hidden;
      user-select: none;
    }

    .json-editor-line-numbers {
      padding: 10px 0;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
      line-height: 20px;
      color: var(--muted);
      text-align: right;
      min-width: 50px;
    }

    .json-editor-line-number {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 8px 0 4px;
      height: 20px;
      gap: 4px;
    }

    .json-editor-line-number.error {
      background: rgba(239, 68, 68, 0.15);
      color: #ef4444;
    }

    .json-editor-line-num {
      min-width: 20px;
      text-align: right;
    }

    .json-editor-fold-marker {
      width: 14px;
      height: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 10px;
      color: var(--muted);
      border-radius: 3px;
      transition: all 0.15s ease;
    }

    .json-editor-fold-marker:hover {
      background: rgba(37, 99, 235, 0.15);
      color: var(--brand);
    }

    .json-editor-fold-marker.folded {
      color: var(--brand);
    }

    .json-editor-code-area {
      flex: 1;
      position: relative;
      min-width: 0;
      overflow: hidden;
    }

    .json-editor-highlight {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 10px;
      margin: 0;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
      line-height: 20px;
      white-space: pre;
      overflow: auto;
      color: var(--fg);
      background: transparent;
      pointer-events: none;
    }

    .json-editor-textarea {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      padding: 10px;
      margin: 0;
      border: none;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
      line-height: 20px;
      white-space: pre;
      overflow: auto;
      resize: none;
      background: transparent;
      color: transparent;
      caret-color: var(--fg);
      outline: none;
    }

    .json-editor-textarea::selection {
      background: rgba(37, 99, 235, 0.3);
    }

    .json-editor-errors {
      display: none;
      padding: 8px 12px;
      background: rgba(239, 68, 68, 0.08);
      border-top: 1px solid rgba(239, 68, 68, 0.2);
      max-height: 100px;
      overflow-y: auto;
    }

    .json-editor-error-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 4px 0;
      font-size: 11px;
      color: #ef4444;
    }

    .json-editor-error-icon {
      flex-shrink: 0;
    }

    .json-editor-error-location {
      font-weight: 600;
      flex-shrink: 0;
    }

    .json-editor-error-message {
      word-break: break-word;
    }

    /* JSON Editor Syntax Highlighting */
    .json-editor-highlight .json-key {
      color: #9333ea;
      font-weight: 500;
    }

    .json-editor-highlight .json-string {
      color: #16a34a;
    }

    .json-editor-highlight .json-number {
      color: #2563eb;
    }

    .json-editor-highlight .json-boolean {
      color: #9333ea;
      font-weight: 600;
    }

    .json-editor-highlight .json-null {
      color: #ef4444;
      font-style: italic;
    }

    .json-editor-highlight .json-bracket {
      color: #d97706;
      font-weight: 600;
    }

    .json-editor-highlight .json-punctuation {
      color: var(--muted);
    }

    /* Template variable highlighting */
    .json-editor-highlight .json-template-var {
      display: inline;
      background: linear-gradient(135deg, #3b82f6, #6366f1);
      color: white !important;
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 600;
      cursor: pointer;
      position: relative;
      margin: 0 1px;
      box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
      transition: all 0.15s ease;
      pointer-events: auto;
    }

    .json-editor-highlight .json-template-var:hover {
      background: linear-gradient(135deg, #2563eb, #4f46e5);
      transform: scale(1.05);
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
    }

    /* Template variable tooltip */
    .json-template-tooltip {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
      padding: 10px 14px;
      min-width: 180px;
      max-width: 320px;
      font-size: 12px;
      animation: tooltipFadeIn 0.15s ease;
    }

    @keyframes tooltipFadeIn {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .json-template-tooltip-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }

    .json-template-tooltip-icon {
      font-size: 16px;
    }

    .json-template-tooltip-name {
      font-weight: 700;
      color: var(--fg);
      font-size: 13px;
    }

    .json-template-tooltip-content {
      background: rgba(59, 130, 246, 0.08);
      border: 1px solid rgba(59, 130, 246, 0.2);
      border-radius: 6px;
      padding: 8px 10px;
      margin-bottom: 8px;
    }

    .json-template-tooltip-content code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 11px;
      color: var(--brand);
      font-weight: 600;
    }

    .json-template-tooltip-hint {
      font-size: 10px;
      color: var(--muted);
      text-align: center;
      font-style: italic;
    }

    /* Dark mode adjustments for JSON Editor */
    @media (prefers-color-scheme: dark) {
      .json-editor-highlight .json-key {
        color: #c084fc;
      }

      .json-editor-highlight .json-string {
        color: #4ade80;
      }

      .json-editor-highlight .json-number {
        color: #60a5fa;
      }

      .json-editor-highlight .json-boolean {
        color: #e879f9;
      }

      .json-editor-highlight .json-null {
        color: #f87171;
      }

      .json-editor-highlight .json-bracket {
        color: #fbbf24;
      }

      .json-editor-highlight .json-template-var {
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        box-shadow: 0 1px 3px rgba(99, 102, 241, 0.4);
      }

      .json-editor-highlight .json-template-var:hover {
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        box-shadow: 0 2px 6px rgba(99, 102, 241, 0.5);
      }

      .json-template-tooltip {
        background: var(--card);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
      }

      .json-template-tooltip-content {
        background: rgba(99, 102, 241, 0.15);
        border-color: rgba(99, 102, 241, 0.3);
      }

      .json-editor-errors {
        background: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.3);
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
   JSON EDITOR VERTICAL SIZING FIX
   Ensure the dual-view editor fills the available vertical space
   ═══════════════════════════════════════════════════════════════════════════ */

    .orchestrator-blockly-host {
      flex: 1 1 auto;
      min-height: 400px;
      display: flex;
      flex-direction: column;
    }

    .orchestrator-editor-wrapper {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
    }

    .orchestrator-json-view {
      display: flex;
      flex-direction: column;
    }

    .orchestrator-json-view .json-editor {
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       FOOTER LINKS - White color for signed-out footer links
       ═══════════════════════════════════════════════════════════════════════════ */
    #signedOut a,
    #signedOut a:link,
    #signedOut a:visited {
      color: white;
    }