Artemis-Eapil/apps/showcase_ui/src/app/components/agent-stream/agent-stream.component.scss

/**
 * Copyright 2026 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

$border-color: rgba(0, 0, 0, 0.08);
$text-primary: #1f1f1f;
$text-secondary: #1f1f1f;
$text-muted: #1f1f1f;
$bg-main: #f9fafb;
$uniform-gap: 8px;
$stream-row-height: 25px;

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.agent-stream-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f8f9fa;
  box-sizing: border-box;
  position: relative;
  container-type: inline-size;
  container-name: stream-panel;

  .vscode-nav-header {
    position: relative;
    height: 60px;
    flex-shrink: 0;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px;
    box-sizing: border-box;
    user-select: none;
    box-shadow: none;
    z-index: 10;

    @media (min-width: 1151px) {
      display: none !important;
    }

    .vscode-tab-container {
      display: flex;
      height: 36px;
      box-sizing: border-box;
      background: rgba(241, 245, 249, 0.72);
      backdrop-filter: blur(16px) saturate(180%);
      -webkit-backdrop-filter: blur(16px) saturate(180%);
      border: 1px solid rgba(226, 232, 240, 0.85);
      border-radius: 18px;
      padding: 3px;
      gap: 3px;
      align-items: center;
      flex-shrink: 0;
      box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.8);
    }

    .vscode-tab-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 30px;
      padding: 0 14px;
      box-sizing: border-box;
      border: none;
      background: transparent;
      border-radius: 15px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      font-family: 'Google Sans', 'Google Sans Text', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      text-decoration: none;
      cursor: pointer;
      position: relative;
      line-height: 1;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      outline: none;
      white-space: nowrap;

      .tab-icon {
        font-size: 16px;
        color: inherit;
        transition: color 0.15s ease;
      }

      .badge-count {
        background: #2563eb;
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 10px;
        line-height: 1;
      }

      .dropdown-chevron {
        font-size: 16px;
        color: #94a3b8;
        margin-left: 2px;
        transition: transform 0.2s ease, color 0.15s ease;

        &.open {
          transform: rotate(180deg);
          color: #1e293b;
        }
      }

      &:hover:not(.active) {
        color: #0f172a;
        background: rgba(255, 255, 255, 0.6);
      }

      &.active {
        background: #ffffff;
        color: #2563eb;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.02);

        .tab-icon {
          color: #2563eb;
        }
      }

      &.video-replay-tab-btn {
        .video-indicator-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #10b981;
          box-shadow: 0 0 6px #10b981;
          margin-left: -2px;
          flex-shrink: 0;
        }

        &.has-video {
          .tab-icon {
            color: #0284c7;
          }
        }
      }
    }

    .header-right-actions {
      margin-left: auto;
      display: flex;
      align-items: center;

      .btn-resume-task,
      .btn-stop-task {
        padding: 5px 10px;
        background: #2563eb;
        border: 1px solid #2563eb;
        border-radius: 16px;
        font-size: 13px;
        font-weight: 600;
        color: #ffffff;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: all 0.2s;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);

        .material-symbols-outlined {
          font-size: 15px;
          color: inherit;
        }

        &:hover {
          background: #1d4ed8;
          border-color: #1d4ed8;
          box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
        }
      }

      .btn-stop-task {
        background: #ef4444;
        border-color: #ef4444;
        box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);

        &:hover {
          background: #dc2626;
          border-color: #dc2626;
          box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
        }
      }
    }


  }

  .stream-floating-toolbar {
    position: absolute;
    top: 12px;
    right: 20px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 40;
    pointer-events: auto;

    @media (max-width: 1150px) {
      top: 72px;
    }

    /* Model Info Chip: click opens the run info popover */
    .model-info-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 30px;
      padding: 0 11px;
      margin: 0;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(16px) saturate(180%);
      -webkit-backdrop-filter: blur(16px) saturate(180%);
      border: 1px solid rgba(226, 232, 240, 0.85);
      border-radius: 15px;
      cursor: pointer;
      user-select: none;
      appearance: none;
      -webkit-appearance: none;

      &:hover {
        background: rgba(255, 255, 255, 0.92);
        border-color: rgba(203, 213, 225, 0.95);
      }

      &.active {
        background: #eff6ff;
        border-color: #bfdbfe;

        .model-icon,
        .model-name {
          color: #1d4ed8;
        }
      }

      &:focus-visible {
        outline: 2px solid #93c5fd;
        outline-offset: 1px;
      }
      box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.9);
      font-family: 'Google Sans', 'Google Sans Text', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

      .model-icon {
        font-size: 15px;
        width: 15px;
        height: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
      }

      .model-label {
        font-size: 12px;
        font-weight: 500;
        color: #64748b;
        line-height: 1;
      }

      .model-name {
        font-size: 12px;
        font-weight: 700;
        color: #1e293b;
        letter-spacing: 0.1px;
        line-height: 1;
      }
    }

    /* Screen Recording Action Button: Interactive Button */
    .btn-screen-recording {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 30px;
      padding: 0 12px;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(16px) saturate(180%);
      -webkit-backdrop-filter: blur(16px) saturate(180%);
      border: 1px solid rgba(226, 232, 240, 0.85);
      border-radius: 15px;
      box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.9);
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
      outline: none;
      font-family: 'Google Sans', 'Google Sans Text', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

      .video-icon {
        font-size: 15px;
        width: 15px;
        height: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        transition: transform 0.2s ease, color 0.2s ease;
      }

      .btn-text {
        font-size: 12px;
        font-weight: 600;
        color: #475569;
        letter-spacing: 0.1px;
        line-height: 1;
        transition: color 0.15s ease;
      }

      .video-pulse-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #ef4444;
        box-shadow: 0 0 6px #ef4444;
        animation: pulseRed 1.5s infinite;
      }

      &.recording {
        background: rgba(254, 242, 242, 0.9);
        border-color: rgba(248, 113, 113, 0.6);
        box-shadow: 0 2px 6px -1px rgba(220, 38, 38, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.9);

        .video-icon {
          color: #dc2626;
        }

        .btn-text {
          color: #b91c1c;
        }
      }

      &.processing {
        .video-icon {
          color: #2563eb;
          animation: spin 1s linear infinite;
        }
      }

      &:hover:not(.active) {
        background: rgba(255, 255, 255, 0.88);
        border-color: rgba(203, 213, 225, 0.95);
        box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08), inset 0 1px 1px rgba(255, 255, 255, 1);
        color: #0f172a;

        .video-icon {
          color: #1a73e8;
          transform: scale(1.08);
        }

        .btn-text {
          color: #0f172a;
        }
      }

      &:active {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      }

      &.has-steps {
        background: rgba(240, 253, 250, 0.9);
        border-color: rgba(94, 234, 212, 0.7);
        box-shadow: 0 2px 6px -1px rgba(13, 148, 136, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.9);

        .steps-icon {
          color: #0d9488;
        }

        .btn-text {
          color: #0f766e;
        }

        &:hover:not(.active) {
          background: rgba(204, 251, 241, 0.95);
          border-color: rgba(45, 212, 191, 0.85);

          .steps-icon {
            color: #0f766e;
          }
        }
      }

      &.failed {
        background: rgba(254, 242, 242, 0.8);
        border-color: rgba(254, 202, 202, 0.9);

        .error-icon {
          color: #ef4444;
        }

        .btn-text {
          color: #dc2626;
        }
      }

      .steps-count-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1px 5px;
        border-radius: 10px;
        background: #0d9488;
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        margin-left: 2px;
      }

      &.active {
        background: rgba(26, 115, 232, 0.95);
        border-color: rgba(26, 115, 232, 0.95);
        box-shadow: 0 2px 8px rgba(26, 115, 232, 0.35);

        .video-icon, .btn-text {
          color: #ffffff;
        }

        .video-pulse-dot {
          background: #ffffff;
          box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
        }

        .steps-count-badge {
          background: #ffffff;
          color: #1a73e8;
        }
      }
    }
  }

  .stream-logs-content {
    flex: 1;
    overflow-y: auto;
    padding: 72px 24px 100px 24px;
    position: relative;

    .session-loading-state {
      min-height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      color: #64748b;
      font-size: 13px;

      .material-symbols-outlined {
        font-size: 18px;
      }
    }
    display: flex;
    flex-direction: column;

    .floating-model-badge {
      position: sticky;
      top: 0px;
      float: right;
      margin-top: -2px;
      margin-right: 4px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 9px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(99, 102, 241, 0.2);
      border-radius: 12px;
      box-shadow: 0 1px 4px rgba(99, 102, 241, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
      z-index: 35;
      cursor: default;
      transition: all 0.2s ease;
      user-select: none;

      &:hover {
        background: rgba(255, 255, 255, 1);
        border-color: rgba(99, 102, 241, 0.4);
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
        transform: translateY(-1px);

        .model-icon {
          color: #4f46e5;
          transform: rotate(15deg) scale(1.05);
        }
      }

      .model-icon {
        font-size: 13px;
        color: #6366f1;
        transition: all 0.3s ease;
      }

      .model-name {
        font-size: 11px;
        font-weight: 600;
        color: #334155;
        letter-spacing: normal;
        font-family: 'Google Sans', 'Google Sans Text', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      }
    }

    &::-webkit-scrollbar {
      width: 6px;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.15);
      border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.25);
    }

    .empty-state {
      flex: 1 1 auto;
      min-height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-sizing: border-box;
      padding: 30px;
      margin: auto 0;

      .empty-icon {
        margin-bottom: 12px;
        opacity: 0.8;

        .material-symbols-outlined {
          font-size: 40px;
          color: #94a3b8;
        }
      }

      h3 {
        margin: 0 0 6px 0;
        font-size: 12px;
        font-weight: 600;
        color: $text-primary;
      }

      p {
        margin: 0;
        font-size: 12px;
        color: $text-secondary;
        max-width: 320px;
        line-height: 1.5;
      }
    }

    .logs-list-container {
      display: flex;
      flex-direction: column;

      .planning-loader-container {
        display: flex;
        align-items: center;
        margin-top: 10px;
        margin-bottom: 10px;
        padding-left: 2px;

        .planning-loader {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          color: #475569;
          font-size: 13px;
          font-weight: 500;
          user-select: none;

          .spin-animation {
            font-size: 16px;
            width: 16px;
            height: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            animation: spin-loader 1s linear infinite;
            color: #2563eb;
            flex-shrink: 0;
          }

          .loader-text {
            color: #475569;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.4;
          }
        }
      }
    }

    .phase-container {
      display: flex;
      flex-direction: column;
    }

    .phase-header {
      font-size: 12px;
      font-weight: normal;
      line-height: 1.5;
      min-height: 20px;
      box-sizing: border-box;
      color: #71717a;
      margin-top: $uniform-gap * 2;
      margin-bottom: 8px;
      user-select: none;
      display: flex;
      align-items: center;
      gap: 4px;

      &.first-phase {
        margin-top: 0;
      }

      .phase-worked-time {
        color: #71717a;
        font-weight: normal;
      }

      .phase-token-usage {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: #8e8e93;
        cursor: default;

        .token-dot {
          color: #a1a1aa;
          font-weight: bold;
        }

        .token-text {
          color: #71717a;
          font-variant-numeric: tabular-nums;
        }
      }
    }

    .phase-body {
      display: flex;
      flex-direction: column;
      gap: $uniform-gap;
      padding-left: 12px;
      border-left: 1px solid rgba(0, 0, 0, 0.04);
      margin-left: 6px;
      position: relative;
      z-index: 1;

      .block-item {
        display: flex;
        flex-direction: column;
        gap: $uniform-gap;

        .llm-stream-body,
        .step-body {
          .thinking-stream-details {
            border-radius: 8px;
            padding: 0;
            overflow: visible;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
            border: 1px solid transparent;
            background: transparent;
            display: flex;
            flex-direction: column;

            .details-content-wrapper {
              display: grid;
              grid-template-rows: 1fr;
              transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
              overflow: hidden;

              .details-content {
                min-height: 0;
              }
            }


            &.native-thinking-details {
              border-color: transparent;
              background: transparent;
              box-shadow: none;

              &:not(.collapsed) {
                background: transparent;
              }

              .details-summary {
                color: #71717a;

                &::after {
                  color: #d4d4d8;
                }

                &:hover {
                  color: #1f1f1f;
                }
              }

              &.is-running {
                .details-summary {
                  background: linear-gradient(
                    90deg,
                    #71717a 0%,
                    #2563eb 25%,
                    #7c3aed 50%,
                    #0284c7 75%,
                    #71717a 100%
                  );
                  background-size: 200% 100%;
                  -webkit-background-clip: text;
                  background-clip: text;
                  -webkit-text-fill-color: transparent;
                  animation: subtle-color-flow 2.8s linear infinite;
                  font-weight: 500;

                  .stream-status-dot {
                    background: #3b82f6;
                    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45);
                    animation: pulse-stream-dot 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                  }
                }
              }

              &.is-resetting {
                .details-summary {
                  background: none !important;
                  -webkit-background-clip: border-box !important;
                  background-clip: border-box !important;
                  -webkit-text-fill-color: #71717a !important;
                  color: #71717a !important;
                  animation: none !important;
                  font-weight: normal !important;

                  .stream-status-dot {
                    background: #f59e0b;
                    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45);
                    animation: pulse-stream-amber 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                  }
                }
              }

              .stream-status-dot {
                background: #d4d4d8;

                &.streaming {
                  background: #3b82f6;
                  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45);
                  animation: pulse-stream-dot 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                }

                &.resetting {
                  background: #f59e0b;
                  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45);
                  animation: pulse-stream-amber 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                }
              }

              .stream-text {
                color: #1f1f1f;
              }
            }

            &.raw-thinking-details {
              border-color: #dbeafe;
              background: #f8fafc;

              &:not(.collapsed) {
                background: #f8fafc;
              }

              .details-summary {
                color: #1e40af;

                &::after {
                  color: #93c5fd;
                }

                &:hover {
                  color: #1e3a8a;
                }
              }

              .stream-status-dot {
                background: #93c5fd;

                &.streaming {
                  background: #2563eb;
                  animation: pulse-stream-blue 1.5s infinite;
                }
              }
            }

            &:not(.collapsed) {
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);

              .details-summary {
                margin-bottom: $uniform-gap;
              }

              .details-summary::after {
                transform: rotate(90deg);
              }
            }

            .details-summary {
              padding: 0;
              margin-bottom: 0;
              font-family: 'Google Sans', 'Google Sans Text', 'Inter', Arial, sans-serif;
              font-weight: normal;
              font-size: 12px;
              line-height: 1.5;
              min-height: 20px;
              box-sizing: border-box;
              letter-spacing: 0.5px;
              cursor: pointer;
              user-select: none;
              display: flex;
              align-items: center;
              gap: 8px;
              outline: none;
              list-style: none;

              &::-webkit-details-marker {
                display: none;
              }

              &::after {
                content: '❯';
                display: inline-block;
                font-size: 9px;
                margin-left: 6px;
                transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
              }

              &:hover {
                .stream-status-dot {
                  transform: scale(1.25);
                  background: #71717a;
                }

                &::after {
                  transform: translateX(3px);
                  color: #71717a;
                }
              }
            }

            .stream-status-dot {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              display: inline-block;
              transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
            }

            .stream-box {
              max-height: 250px;
              overflow-y: auto;
              background: transparent;
              padding: 4px 0;
              box-sizing: border-box;

              &::-webkit-scrollbar {
                width: 6px;
              }
              &::-webkit-scrollbar-track {
                background: transparent;
              }
              &::-webkit-scrollbar-thumb {
                background: rgba(0, 0, 0, 0.08);
                border-radius: 999px;
                &:hover {
                  background: rgba(0, 0, 0, 0.16);
                }
              }
            }

            .stream-text {
              font-family: inherit;
              font-size: 12.5px;
              line-height: 1.65;
              color: #1f1f1f;
              white-space: normal;
              word-break: break-word;

              strong {
                font-weight: 600;
                color: #111827;
              }

              div, p {
                font-size: 12.5px;
                line-height: 1.65;
                color: #1f1f1f;
                margin: 4px 0;
              }

              h1, h2, h3, h4, h5, h6 {
                font-size: 12.5px;
                font-weight: 600;
                color: #1f1f1f;
                margin-top: 8px;
                margin-bottom: 4px;
              }

              .inline-code {
                font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace;
                font-size: 11px;
                background: #f4f4f5;
                color: #b91c1c;
                padding: 2px 6px;
                border-radius: 4px;
              }

              ul, ol {
                margin: 4px 0;
                padding-left: 16px;
                li {
                  font-size: 12.5px;
                  line-height: 1.65;
                  color: #1f1f1f;
                  margin: 4px 0;
                  padding-left: 2px;
                }
              }

              .md-para-gap {
                height: 6px;
              }
            }

            &.collapsed {
              .details-content-wrapper {
                grid-template-rows: 0fr;
                display: none;
              }

              .details-summary {
                margin-bottom: 0;
              }
            }
          }

          .thinking-stream-flat-card {
            background: transparent;
            border: 1px solid transparent;
            border-radius: 8px;
            padding: 0;
            margin-bottom: 0;
            box-shadow: none;

            .report-header {
              font-family: 'Google Sans', 'Google Sans Text', 'Inter', Arial, sans-serif;
              font-weight: normal;
              font-size: 12px;
              line-height: 1.5;
              min-height: 20px;
              box-sizing: border-box;
              letter-spacing: 0.5px;
              color: #71717a;
              margin-bottom: $uniform-gap;
              user-select: none;
              display: flex;
              align-items: center;
              gap: 8px;

              .stream-status-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                display: inline-block;
                background: #d4d4d8;

                &.streaming {
                  background: #71717a;
                  animation: pulse-stream-grey 1.5s infinite;
                }
              }
            }

            .report-content {
              font-size: 12.5px;
              line-height: 1.65;
              color: #1f1f1f;
            }

            .stream-box {
              max-height: 250px;
              overflow-y: auto;
              background: transparent;
              padding: 4px 0;
              box-sizing: border-box;

              &::-webkit-scrollbar {
                width: 6px;
              }
              &::-webkit-scrollbar-track {
                background: transparent;
              }
              &::-webkit-scrollbar-thumb {
                background: rgba(0, 0, 0, 0.08);
                border-radius: 999px;
                &:hover {
                  background: rgba(0, 0, 0, 0.16);
                }
              }
            }

            .stream-text {
              font-family: inherit;
              font-size: 12.5px;
              line-height: 1.65;
              color: #1f1f1f;
              white-space: normal;
              word-break: break-word;

              strong {
                font-weight: 600;
                color: #111827;
              }

              div, p {
                font-size: 12.5px;
                line-height: 1.65;
                color: #1f1f1f;
                margin: 4px 0;
              }

              h1 {
                font-size: 14px;
                font-weight: 700;
                color: #0f172a;
                margin-top: 12px;
                margin-bottom: 6px;
              }

              h2 {
                font-size: 13.5px;
                font-weight: 700;
                color: #0f172a;
                margin-top: 10px;
                margin-bottom: 5px;
              }

              h3 {
                font-size: 13px;
                font-weight: 600;
                color: #1e293b;
                margin-top: 8px;
                margin-bottom: 4px;
              }

              h4, h5, h6 {
                font-size: 12.5px;
                font-weight: 600;
                color: #334155;
                margin-top: 6px;
                margin-bottom: 3px;
              }

              em {
                font-style: italic;
                color: inherit;
              }

              blockquote {
                margin: 6px 0;
                padding: 4px 10px;
                border-left: 3px solid #cbd5e1;
                color: #475569;
                background: rgba(241, 245, 249, 0.5);
                border-radius: 0 4px 4px 0;
              }

              .code-block {
                margin: 6px 0;
                padding: 8px 12px;
                background: #f8fafc;
                border: 1px solid #e2e8f0;
                border-radius: 6px;
                overflow-x: auto;
                font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace;
                font-size: 11.5px;
                line-height: 1.5;
                color: #1e293b;
              }

              .md-hr {
                border: none;
                border-top: 1px solid #e2e8f0;
                margin: 10px 0;
              }

              .inline-code {
                font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace;
                font-size: 11px;
                background: #f4f4f5;
                color: #b91c1c;
                padding: 2px 6px;
                border-radius: 4px;
              }

              ul, ol {
                margin: 4px 0;
                padding-left: 16px;
                li {
                  font-size: 12.5px;
                  line-height: 1.65;
                  color: #1f1f1f;
                  margin: 4px 0;
                  padding-left: 2px;

                  &.md-verify-item {
                    color: #334155;
                  }

                  &.md-finding-item {
                    color: #92400e;
                  }
                }
              }

              .md-para-gap {
                height: 6px;
              }
            }
          }

          .checker-stream-flat-card {
            background: #f5f3ff;
            border: 1px solid #e9d5ff;
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);

            .report-header {
              font-family: 'Google Sans', 'Google Sans Text', 'Inter', Arial, "Liberation Sans", sans-serif;
              font-weight: 700;
              font-size: 12px;
              line-height: 1.5;
              letter-spacing: 0.5px;
              color: #6b21a8;
              margin-bottom: 8px;
              user-select: none;
              display: flex;
              align-items: center;
              gap: 8px;

              .stream-status-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                display: inline-block;
                background: #c084fc;

                &.streaming {
                  background: #a855f7;
                  animation: pulse-stream-purple 1.5s infinite;
                }
              }
            }

             .report-content {
              font-size: 12px;
              line-height: 1.6;
              color: #27272a;
              
              .stream-text {
                font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace;
                font-size: 11.5px;
                white-space: pre-wrap;
                word-break: break-all;
                color: #5b21b6;
                background: rgba(255, 255, 255, 0.5);
                padding: 8px;
                border-radius: 6px;
                border: 1px dashed rgba(168, 85, 247, 0.2);
              }
            }

            .checker-result-badge {
              display: inline-flex;
              align-items: center;
              gap: 6px;
              font-weight: 700;
              font-size: 11.5px;
              padding: 4px 10px;
              border-radius: 6px;
              margin-bottom: 10px;
              border: 1px solid transparent;
              
              &.success {
                background: #ecfdf5;
                color: #065f46;
                border-color: #a7f3d0;
              }
              
              &.failed {
                background: #fef2f2;
                color: #991b1b;
                border-color: #fca5a5;
              }
            }

            .checker-reason {
              font-size: 12px;
              line-height: 1.6;
              color: #3f3f46;
              font-weight: 500;
            }
          }
        }

        .step-body {
          display: flex;
          flex-direction: column;
          gap: $uniform-gap;

          .step-raw-thinking-message {
            background: transparent;
            border: 1px solid transparent;
            border-radius: 8px;
            padding: 0;
            margin-bottom: 0;
            box-shadow: none;

            &.is-running {
              .report-header {
                background: linear-gradient(
                  90deg,
                  #71717a 0%,
                  #2563eb 25%,
                  #7c3aed 50%,
                  #0284c7 75%,
                  #71717a 100%
                );
                background-size: 200% 100%;
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                animation: subtle-color-flow 2.8s linear infinite;
                font-weight: 500;

                .stream-status-dot {
                  background: #3b82f6;
                  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45);
                  animation: pulse-stream-dot 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                }
              }
            }

            &.is-resetting {
              .report-header {
                background: none !important;
                -webkit-background-clip: border-box !important;
                background-clip: border-box !important;
                -webkit-text-fill-color: #71717a !important;
                color: #71717a !important;
                animation: none !important;
                font-weight: normal !important;
                margin-bottom: 0;

                .stream-status-dot {
                  background: #f59e0b;
                  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45);
                  animation: pulse-stream-amber 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                }
              }
            }

            .report-header {
              font-family: 'Google Sans', 'Google Sans Text', 'Inter', Arial, sans-serif;
              font-weight: normal;
              font-size: 12px;
              line-height: 1.5;
              min-height: 20px;
              box-sizing: border-box;
              letter-spacing: 0.5px;
              color: #71717a;
              margin-bottom: $uniform-gap;
              user-select: none;
              display: flex;
              align-items: center;
              gap: 8px;

              .header-label {
                line-height: 1.5;
                word-break: break-word;
              }

              .stream-status-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                display: inline-block;
                background: #d4d4d8;

                &.streaming {
                  background: #3b82f6;
                  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45);
                  animation: pulse-stream-dot 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                }

                &.resetting {
                  background: #f59e0b;
                  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45);
                  animation: pulse-stream-amber 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                }
              }
            }

            .report-content {
              font-size: 12.5px;
              line-height: 1.65;
              color: #1f1f1f;

              strong {
                font-weight: 600;
                color: #111827;
              }

              div, p {
                font-size: 12.5px;
                line-height: 1.65;
                color: #1f1f1f;
                margin: 4px 0;
              }

              h1, h2, h3, h4, h5, h6 {
                font-size: 12.5px;
                font-weight: 600;
                color: #1f1f1f;
                margin-top: 8px;
                margin-bottom: 4px;
              }

              .inline-code {
                font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace;
                font-size: 11px;
                background: #f4f4f5;
                color: #b91c1c;
                padding: 2px 6px;
                border-radius: 4px;
              }

              ul, ol {
                margin: 4px 0;
                padding-left: 16px;
                li {
                  font-size: 12.5px;
                  line-height: 1.65;
                  color: #1f1f1f;
                  margin: 4px 0;
                  padding-left: 2px;
                }
              }

              .md-para-gap {
                height: 6px;
              }
            }
          }

          .step-action-summary-card {
            background: #f4fbf7;
            border: 1px solid #d1fae5;
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);

            .report-header {
              font-family: 'Google Sans', 'Google Sans Text', 'Inter', Arial, "Liberation Sans", sans-serif;
              font-weight: 700;
              font-size: 12px;
              line-height: 1.5;
              letter-spacing: 0.5px;
              color: #065f46;
              margin-bottom: 8px;
              user-select: none;
            }

            .report-content {
              font-size: 12px;
              line-height: 1.6;
              color: #27272a;

              strong {
                font-weight: 600;
                color: #09090b;
              }

              .inline-code {
                font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace;
                font-size: 11px;
                background: #e6f4ea;
                color: #137333;
                padding: 2px 6px;
                border-radius: 4px;
              }

              ul, ol {
                margin: 2px 0;
                padding-left: 20px;
                li {
                  margin-bottom: 2px;
                }
              }

              .md-para-gap {
                height: 4px;
              }
            }
          }

          .step-actions-container {
            display: flex;
            flex-direction: column;
            gap: $uniform-gap;
            margin-top: 0;
            margin-bottom: 0;

            .llm-retry-notes {
              display: flex;
              flex-direction: column;
              gap: $uniform-gap;
              padding: 0;

              .llm-retry-note {
                min-height: $stream-row-height;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                gap: 8px;
                color: #71717a;
                font-family: 'Google Sans', 'Google Sans Text', 'Inter', Arial, sans-serif;
                font-size: 12px;
                line-height: 1.5;
                letter-spacing: 0.2px;

                .stream-status-dot {
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background: #d4d4d8;
                  flex: 0 0 auto;

                  &.streaming {
                    background: #3b82f6;
                    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45);
                    animation: pulse-stream-dot 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                  }

                  &.resetting {
                    background: #f59e0b;
                    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45);
                    animation: pulse-stream-amber 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                  }
                }

                .llm-retry-note-text {
                  color: #71717a;
                  display: flex;
                  flex-direction: column;
                  min-width: 0;

                  .llm-retry-status-line,
                  .llm-retry-guidance {
                    display: block;
                  }

                  .llm-retry-guidance {
                    color: #a1a1aa;
                  }
                }
              }
            }

            .step-generic-tool {
              border: 1px solid transparent;

              &.is-video-attention:not(.is-running) {
                .tool-call-label .stream-status-dot {
                  background: #f59e0b;
                  box-shadow: none;
                  animation: none;
                }
              }

              &.is-llm-error {
                .tool-call-label {
                  display: flex;
                  align-items: flex-start;
                  color: #71717a;
                  line-height: 1.5;
                  user-select: text;

                  .error-icon {
                    font-size: 14px;
                    color: #94a3b8;
                    margin-top: 1px;
                    margin-left: -3px;
                    margin-right: -3px;
                    flex-shrink: 0;
                  }

                  .tool-call-text {
                    display: block;
                    color: inherit;
                  }

                  .error-title-text {
                    font-weight: 500;
                    color: #71717a;
                    margin-right: 4px;
                    flex-shrink: 0;
                  }

                  .error-message-text {
                    color: #71717a;
                    word-break: break-word;
                  }
                }
              }

              &.is-running {
                .tool-call-label {
                  .stream-status-dot {
                    background: #3b82f6;
                    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45);
                    animation: pulse-stream-dot 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                  }

                  .tool-call-text > span:first-child {
                    background: linear-gradient(
                      90deg,
                      #71717a 0%,
                      #2563eb 25%,
                      #7c3aed 50%,
                      #0284c7 75%,
                      #71717a 100%
                    );
                    background-size: 200% 100%;
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                    animation: subtle-color-flow 2.8s linear infinite;
                    font-weight: 500;
                  }
                }
              }

              .tool-call-label {
                font-size: 12px;
                font-weight: normal;
                color: #71717a;
                font-family: 'Google Sans', 'Google Sans Text', 'Inter', Arial, sans-serif;
                letter-spacing: 0.5px;
                line-height: 1.5;
                min-height: 22px;
                box-sizing: border-box;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                user-select: none;
                padding: 0;

                span:not(.tool-key-pill) {
                  color: inherit;
                }

                .stream-status-dot {
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background: #d4d4d8;
                  display: inline-block;
                  flex-shrink: 0;

                  &.streaming {
                    background: #3b82f6;
                    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45);
                    animation: pulse-stream-dot 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                  }
                }

                .is-failed-dot {
                  font-size: 13px;
                  color: #94a3b8;
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  width: 8px;
                  height: 8px;
                  flex-shrink: 0;
                  line-height: 1;
                }

                .tool-call-text {
                  display: inline-flex;
                  align-items: center;
                  gap: 2px;
                  color: inherit;
                }

                .tool-key-pill {
                  display: inline-flex;
                  align-items: center;
                  gap: 4px;
                  padding: 2px 6px;
                  border: none;
                  background: transparent;
                  font-size: 12px;
                  font-weight: 500;
                  color: #1a73e8;
                  cursor: pointer;
                  border-radius: 4px;
                  transition: all 0.2s ease;
                  vertical-align: middle;
                  text-decoration: none !important;

                  .pill-icon {
                    font-size: 14px;
                    color: inherit;
                  }

                  &:hover {
                    color: #1557b0;
                    background: rgba(26, 115, 232, 0.08);
                  }
                }

                .video-status-detail {
                  color: inherit;
                  margin-left: 2px;
                }
              }
            }

             .step-llm-error-card {
              background: #fef2f2;
              border: 1px solid #fecaca;
              border-radius: 10px;
              padding: 10px 12px;
              margin-top: 0;
              margin-bottom: 0;
              margin-left: -19px;
              box-shadow: 0 4px 12px rgba(239, 68, 68, 0.03);
              width: fit-content;
              min-width: 260px;
              max-width: 480px;
              display: flex;
              flex-direction: column;
              gap: 8px;
              transition: all 0.2s ease;
              position: relative;

              &:hover {
                border-color: #fca5a5;
                box-shadow: 0 4px 16px rgba(239, 68, 68, 0.08);
              }

              .error-card-header {
                display: flex;
                align-items: center;
                gap: 8px;
                border-bottom: 1px solid #fee2e2;
                padding-bottom: 6px;

                .error-icon {
                  font-size: 18px;
                  color: #ef4444;
                }

                .error-title {
                  font-family: 'Google Sans', 'Google Sans Text', 'Inter', Arial, sans-serif;
                  font-weight: 700;
                  font-size: 12px;
                  color: #991b1b;
                }
              }

              .error-card-body {
                display: flex;
                flex-direction: column;
                gap: 6px;

                .error-detail-row {
                  display: flex;
                  font-size: 12px;

                  .detail-value {
                    color: #b91c1c;
                    font-weight: 500;
                    word-break: break-word;
                    line-height: 1.4;
                  }
                }
              }
             }

             .llm-failure-stack {
               width: 380px;
               max-width: 100%;
               margin-left: -19px;
               display: flex;
               flex-direction: column;
               align-items: flex-start;
               gap: 10px;

               .step-android-action-card {
                 width: 100%;
                 margin-left: 0;
                 box-sizing: border-box;
               }

               .llm-resume-row {
                 min-height: 36px;
                 display: flex;
                 align-items: center;
                 gap: 10px;
               }

               .btn-continue-task {
                 min-height: 36px;
                 padding: 7px 12px 7px 10px;
                 display: inline-flex;
                 align-items: center;
                 justify-content: center;
                 gap: 7px;
                 box-sizing: border-box;
                 border: 1px solid #1d4ed8;
                 border-radius: 9px;
                 background: #2563eb;
                 color: #ffffff;
                 font-family: inherit;
                 font-size: 12px;
                 font-weight: 700;
                 line-height: 1;
                 cursor: pointer;
                 box-shadow: 0 2px 7px rgba(37, 99, 235, 0.22);
                 transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;

                 .continue-icon {
                   width: 22px;
                   height: 22px;
                   display: inline-flex;
                   align-items: center;
                   justify-content: center;
                   margin: -2px 0 -2px -2px;
                   border-radius: 50%;
                   background: rgba(255, 255, 255, 0.16);
                   font-size: 16px;
                 }

                 .continue-arrow {
                   font-size: 15px;
                   opacity: 0.72;
                   transition: transform 0.18s ease, opacity 0.18s ease;
                 }

                 &:hover {
                   background: #1d4ed8;
                   border-color: #1e40af;
                   box-shadow: 0 4px 11px rgba(37, 99, 235, 0.28);
                   transform: translateY(-1px);

                   .continue-arrow {
                     opacity: 1;
                     transform: translateX(2px);
                   }
                 }

                 &:active {
                   box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
                   transform: translateY(0) scale(0.98);
                 }

                 &:focus-visible {
                   outline: 3px solid rgba(59, 130, 246, 0.25);
                   outline-offset: 2px;
                 }
               }

               .llm-resume-hint {
                 color: #94a3b8;
                 font-size: 11px;
                 line-height: 1.35;
                 white-space: nowrap;
               }

               @media (max-width: 560px) {
                 .llm-resume-row {
                   width: 100%;
                 }

                 .btn-continue-task {
                   flex: 1;
                 }

                 .llm-resume-hint {
                   display: none;
                 }
               }
             }

             .step-android-action-card {
               background: #f8fafc;
               border: 1px solid #e2e8f0;
               border-radius: 10px;
               padding: 10px 12px;
               margin-top: 0;
               margin-bottom: 0;
               margin-left: -19px;
               box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
               width: 380px;
               max-width: 100%;
               display: flex;
               flex-direction: column;
               gap: 8px;
               transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
               position: relative;
               cursor: pointer;
               user-select: none;

                &.is-running {
                  border-color: rgba(59, 130, 246, 0.35);
                  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.08);
                  animation: subtle-card-glow 2.5s ease-in-out infinite alternate;

                  .action-icon {
                    color: #3b82f6;
                  }

                  .action-title {
                    background: linear-gradient(
                      90deg,
                      #0f172a 0%,
                      #2563eb 30%,
                      #7c3aed 50%,
                      #0284c7 70%,
                      #0f172a 100%
                    );
                    background-size: 200% 100%;
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                    animation: subtle-color-flow 2.8s linear infinite;
                  }
                }

               &:hover {
                 border-color: #cbd5e1;
                 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
                 transform: translateY(-1px);

                 .action-expand-icon {
                   color: #1e293b;
                   background: #e2e8f0;
                 }
               }

               &.is-expanded {
                 border-color: #94a3b8;
                 background: #ffffff;
                 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);

                 .action-expand-icon {
                   color: #0f172a;
                   background: #e2e8f0;
                 }
               }

                &.is-failed {
                  background: #f8fafc;
                  border-color: #fca5a5;

                  &.has-details {
                    cursor: pointer;
                  }

                  &:hover {
                    border-color: #f87171;
                  }

                  &.is-expanded {
                    background: #ffffff;
                    border-color: #f87171;
                  }
                }

               &.task-report-card {
                  width: min(680px, 100%);
                  box-sizing: border-box;
                  background: #f0fdf4;
                  border: 1px solid #bbf7d0;

                  &.is-completed {
                    background: #f0fdf4;
                    border-color: #86efac;

                    .report-icon {
                      color: #16a34a;
                      font-variation-settings: 'FILL' 1;
                    }

                    .action-title {
                      color: #14532d;
                      font-weight: 700;
                    }

                    .action-status-badge.is-completed {
                      background: #dcfce7;
                      color: #15803d;
                      border: 1px solid #bbf7d0;
                    }
                  }

                  &.is-failed {
                    background: #fef2f2;
                    border-color: #fecaca;

                    .report-icon {
                      color: #dc2626;
                      font-variation-settings: 'FILL' 1;
                    }

                    .action-title {
                      color: #7f1d1d;
                      font-weight: 700;
                    }

                    .action-status-badge.is-failed {
                      background: #fee2e2;
                      color: #b91c1c;
                      border: 1px solid #fca5a5;
                    }
                  }

                  .report-markdown-body {
                    font-size: 14px;
                    line-height: 1.7;
                    color: #1f2937;
                    font-weight: 400;
                    user-select: text;
                    word-break: normal;
                    overflow-wrap: anywhere;

                    p {
                      margin: 3px 0;
                    }

                    strong {
                      font-weight: 600;
                      color: #0f172a;
                    }

                    ul, ol {
                      margin: 3px 0;
                      padding-left: 18px;
                    }

                    code {
                      font-family: 'Fira Code', monospace;
                      background: #e2e8f0;
                      color: #1f2937;
                      padding: 1px 4px;
                      border-radius: 4px;
                      font-size: 11px;
                    }
                  }
                }

               &.has-no-details {
                 padding: 8px 12px;
                 gap: 0;

                 .action-card-header {
                   border-bottom: none;
                   padding-bottom: 0;
                 }
               }

               .action-card-header {
                 display: flex;
                 align-items: center;
                 gap: 8px;
                 border-bottom: 1px solid #f1f5f9;
                 padding-bottom: 6px;
                 width: 100%;

                 .action-icon {
                   font-size: 18px;
                   color: #64748b;

                   &.is-failed {
                     color: #ef4444;
                   }

                 }

                 .action-title {
                   font-family: 'Google Sans', 'Google Sans Text', 'Inter', Arial, "Liberation Sans", sans-serif;
                   font-weight: 700;
                   font-size: 12px;
                   color: #0f172a;
                   flex-grow: 1;
                 }

                 .action-agent-badge {
                   display: inline-flex;
                   align-items: center;
                   font-size: 10px;
                   font-weight: 600;
                   padding: 1px 6px;
                   border-radius: 4px;
                   background: #f0fdf4;
                   color: #166534;
                   border: 1px solid #bbf7d0;
                   letter-spacing: 0.2px;
                   margin-right: 6px;
                   white-space: nowrap;

                   &.is-outputter {
                     background: linear-gradient(135deg, rgba(245, 243, 255, 0.95) 0%, rgba(238, 242, 255, 0.95) 100%);
                     color: #6d28d9;
                     border-color: #c4b5fd;
                   }
                 }

                 .action-status-badge {
                   display: inline-flex;
                   align-items: center;
                   gap: 3px;
                   font-size: 11px;
                   font-weight: 600;
                   padding: 1px 6px;
                   border-radius: 4px;
                   margin-left: auto;
                   white-space: nowrap;

                   .status-icon {
                     font-size: 13px;
                   }

                   &.is-failed {
                     background: #fef2f2;
                     color: #dc2626;
                     border: 1px solid #fee2e2;

                     .status-icon {
                       color: #ef4444;
                     }
                   }

                   &.is-paused {
                     background: #fff7ed;
                     color: #c2410c;
                     border: 1px solid #fed7aa;

                     .status-icon {
                       color: #f97316;
                     }
                   }

                 }

                 .action-expand-icon {
                   font-size: 18px;
                   color: #94a3b8;
                   margin-left: 4px;
                   padding: 2px;
                   border-radius: 50%;
                   transition: all 0.2s ease;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                 }
               }

               .action-card-body {
                 display: flex;
                 flex-direction: column;
                 gap: 6px;

                 .action-detail-row {
                   display: flex;
                   align-items: baseline;
                   font-size: 12px;

                   .detail-label {
                     color: #64748b;
                     font-weight: 500;
                     width: 85px;
                     flex-shrink: 0;
                   }

                   .detail-value {
                     color: #334155;
                     font-weight: 600;
                     word-break: break-word;

                     &.coordinate-badge {
                       background: #e2e8f0;
                       color: #475569;
                       padding: 2px 6px;
                       border-radius: 4px;
                       font-family: 'Fira Code', monospace;
                       font-size: 11px;
                     }

                     &.command-value {
                       font-family: 'Fira Code', Consolas, Monaco, monospace;
                       background: #f1f5f9;
                       border: 1px solid #e2e8f0;
                       padding: 2px 6px;
                       border-radius: 4px;
                       font-size: 11px;
                       font-weight: 500;
                       color: #0f172a;
                       white-space: pre-wrap;
                       word-break: break-all;

                       code {
                         font-family: inherit;
                         font-size: inherit;
                         color: inherit;
                         background: none;
                         padding: 0;
                         border: none;
                       }
                     }
                   }
                 }

                 .failure-retry-details {
                   margin-top: 4px;
                   padding-top: 9px;
                   border-top: 1px solid #fecaca;
                   display: flex;
                   flex-direction: column;
                   gap: 7px;
                   animation: fadeInDetails 0.2s ease-out;

                   .failure-retry-title {
                     color: #991b1b;
                     font-size: 10px;
                     font-weight: 700;
                     text-transform: uppercase;
                     letter-spacing: 0.03em;
                   }

                   .failure-retry-row {
                     display: flex;
                     justify-content: space-between;
                     gap: 12px;
                     color: #7f1d1d;
                     font-size: 10.5px;
                     line-height: 1.4;

                     span:last-child {
                       color: #64748b;
                       text-align: right;
                     }
                   }
                 }
               }

               .action-card-expanded-details {
                 display: flex;
                 flex-direction: column;
                 gap: 10px;
                 padding-top: 4px;
                 animation: fadeInDetails 0.2s ease-out;

                 .expanded-grid {
                   display: grid;
                   grid-template-columns: repeat(2, 1fr);
                   gap: 8px;
                   background: #f8fafc;
                   padding: 10px;
                   border-radius: 8px;
                   border: 1px solid #f1f5f9;

                   .grid-item {
                     display: flex;
                     flex-direction: column;
                     gap: 2px;

                     &.full-width {
                       grid-column: 1 / -1;
                     }

                     .grid-label {
                       font-size: 10px;
                       font-weight: 700;
                       text-transform: uppercase;
                       letter-spacing: 0.5px;
                       color: #64748b;
                     }

                      .grid-value {
                        font-size: 12px;
                        font-weight: 600;
                        color: #1e293b;
                        word-break: break-all;

                        &.report-markdown-body {
                          font-size: 14px;
                          font-weight: 400;
                          line-height: 1.7;
                          word-break: normal;
                          overflow-wrap: anywhere;
                        }

                       &.code-pill {
                         font-family: 'Roboto Mono', 'Fira Code', Consolas, monospace;
                         font-size: 11px;
                         background: #e2e8f0;
                         color: #334155;
                         padding: 2px 6px;
                         border-radius: 4px;
                         display: inline-block;
                         width: fit-content;
                       }

                       &.command-value {
                         code {
                           font-family: 'Roboto Mono', 'Fira Code', Consolas, monospace;
                           font-size: 11px;
                           background: #0f172a;
                           color: #38bdf8;
                           padding: 4px 8px;
                           border-radius: 4px;
                           display: block;
                           word-break: break-all;
                           white-space: pre-wrap;
                         }
                       }
                     }
                   }
                 }

                  .expanded-screenshots-container {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    gap: 12px;
                    margin-top: 4px;
                    justify-content: flex-start;
                    width: 100%;

                    .screenshot-column {
                      flex: 1 1 0;
                      min-width: 0;
                      max-width: 320px;
                      display: flex;
                      flex-direction: column;
                      gap: 6px;
                      align-items: center;

                      .screenshot-label {
                        font-family: 'Google Sans', 'Google Sans Text', 'Inter', Arial, "Liberation Sans", sans-serif;
                        font-size: 11.5px;
                        font-weight: 500;
                        color: #64748b;
                        letter-spacing: normal;
                        text-transform: none;
                        
                      }

                      .image-wrapper {
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;
                        max-width: 100%;
                        border: 1px solid #e2e8f0;
                        border-radius: 8px;
                        background-color: #f8fafc;
                        cursor: zoom-in;
                        overflow: hidden;
                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
                        transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;

                        &:hover {
                          transform: translateY(-1px);
                          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                          border-color: #cbd5e1;
                        }

                        .img-relative-box {
                          position: relative;
                          display: inline-block;
                          max-width: 100%;

                          img {
                            display: block;
                            max-width: 100%;
                            max-height: 280px;
                            width: auto;
                            height: auto;
                            margin: 0 auto;
                            border-radius: 6px;
                          }

                          .overlay-layer {
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            pointer-events: none;
                            overflow: visible;
                          }
                        }
                      }
                    }
                  }

                  .expanded-error-banner {
                   display: flex;
                   align-items: center;
                   gap: 8px;
                   background: #fff1f2;
                   border: 1px solid #fecdd3;
                   color: #be123c;
                   padding: 8px 12px;
                   border-radius: 6px;
                   font-size: 12px;
                   font-weight: 500;

                   .icon {
                     font-size: 16px;
                     color: #e11d48;
                   }
                 }
               }
             }

      .final-summary-card {
        padding: 20px 24px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.006);

        .final-summary-header {
          font-weight: 500;
          font-size: 12px;
          color: #71717a;
          display: flex;
          align-items: center;
          gap: 6px;
          user-select: none;
        }

        .final-summary-body {
          font-size: 12px;
          line-height: 1.6;
          color: #27272a;

          strong {
            font-weight: 600;
            color: #09090b;
          }

          ul, ol {
            margin: 6px 0;
            padding-left: 20px;
            li {
              margin-bottom: 6px;
            }
          }

          div {
            margin-bottom: 4px;
          }

          .md-para-gap {
            height: 8px;
          }
        }
      }
    }
        }
      }
    }
  }
}

@keyframes spin-loader {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes pulse-stream-blue {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(14, 165, 233, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
  }
}

@keyframes pulse-stream-green {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes pulse-stream-purple {
  0% {
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(168, 85, 247, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0);
  }
}

@keyframes pulse-stream-grey {
  0% {
    box-shadow: 0 0 0 0 rgba(113, 113, 122, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(113, 113, 122, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(113, 113, 122, 0);
  }
}

@keyframes pulse-black-dot {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
  }
  70% {
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

@keyframes pulse-black-dot-small {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.image-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  animation: fadeInModal 0.2s ease-out;

  .image-modal-content {
    position: relative;
    max-width: calc(100% - 48px);
    max-height: calc(100% - 48px);
    background: #0f172a;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    .image-modal-close {
      position: absolute;
      top: -12px;
      right: -12px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #ef4444;
      color: white;
      border: 2px solid white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
      transition: transform 0.15s ease, background-color 0.15s ease;
      z-index: 20;

      &:hover {
        transform: scale(1.1);
        background: #dc2626;
      }

      .material-symbols-outlined {
        font-size: 18px;
      }
    }

    .img-relative-box {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      max-height: 100%;

      img {
        display: block;
        max-width: 100%;
        max-height: calc(100vh - 140px);
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 6px;
      }

      .overlay-layer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        overflow: visible;
        border-radius: 6px;
      }
    }
  }
}

@keyframes pulse-animation {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes fadeInModal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes subtle-color-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@keyframes pulse-stream-dot {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0);
  }
}

@keyframes pulse-stream-amber {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0);
  }
}

.spinning {
  animation: spin 1.2s linear infinite;
}


@keyframes subtle-card-glow {
  0% {
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.05);
  }
  100% {
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12);
  }
}

/* Outputter Post-Execution Synthesis Card */
.outputter-synthesis-stream-card {
  margin: 16px 0 12px 0;
  border-radius: 12px;
  border: 1px solid rgba(196, 181, 253, 0.85);
  background: linear-gradient(135deg, rgba(245, 243, 255, 0.95) 0%, rgba(250, 245, 255, 0.98) 100%);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08), 0 1px 3px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  animation: fadeInModal 0.25s ease-out;

  .synthesis-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(237, 233, 254, 0.6);
    border-bottom: 1px solid rgba(196, 181, 253, 0.7);
    gap: 12px;
    flex-wrap: wrap;

    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;

      .icon-sparkle {
        font-size: 22px;
        color: #7c3aed;
      }

      .main-title {
        font-size: 14px;
        font-weight: 700;
        color: #4338ca;
      }
    }

    .header-right {
      .btn-open-note {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 12px;
        background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
        color: #ffffff;
        border: none;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
        box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);

        .material-symbols-outlined {
          font-size: 15px;
        }

        &:hover {
          background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%);
          box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35);
          transform: translateY(-1px);
        }
      }
    }
  }

  .synthesis-card-preview {
    padding: 14px 16px;

    .parsed-note-container {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .parsed-note-title {
        font-size: 14px;
        font-weight: 700;
        color: #1e1b4b;
        margin: 0;
      }

      .parsed-milestones {
        display: flex;
        flex-direction: column;
        gap: 6px;

        .milestone-item {
          display: flex;
          align-items: flex-start;
          gap: 8px;
          font-size: 12.5px;
          line-height: 1.45;
          color: #374151;

          .status-icon {
            font-size: 16px;
            color: #7c3aed;
            margin-top: 1px;
            flex-shrink: 0;
          }

          &.status-checked .status-icon {
            color: #10b981;
          }

          &.status-progress .status-icon {
            color: #f59e0b;
          }
        }
      }

      .parsed-other-lines {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .other-line {
          margin: 0;
          font-size: 12.5px;
          line-height: 1.5;
          color: #4b5563;

          strong {
            color: #1e1b4b;
          }

          code {
            font-family: 'JetBrains Mono', monospace;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid #e5e7eb;
            padding: 1px 4px;
            border-radius: 4px;
            color: #6d28d9;
            font-size: 11.5px;
          }
        }
      }
    }
  }
}

/* Checker blocks share the step timeline, marked by a violet left border. */
.agent-stream-container .stream-logs-content .phase-body .block-item.type-checker {
  border-left: 2px solid #ddd6fe;
  padding-left: 12px;
  margin-left: -14px;
  font-family: 'Google Sans', 'Google Sans Text', 'Inter', Arial, sans-serif;

  .check-index {
    flex: 0 0 14px;
    text-align: right;
    color: #a1a1aa;
    font-variant-numeric: tabular-nums;
    user-select: none;
  }

  .check-lane {
    display: flex;
    flex-direction: column;
    gap: $uniform-gap;
    margin-bottom: $uniform-gap;

    .check-header {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 20px;
      font-size: 12px;
      line-height: 1.5;
      letter-spacing: 0.2px;
      color: #71717a;
      user-select: none;

      .stream-status-dot {
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        background: #d4d4d8;

        &.streaming {
          background: #7c3aed;
          box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.45);
          animation: pulse-stream-dot 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
      }

      .check-title {
        flex: 0 0 auto;
        font-weight: 500;
        color: #52525b;
      }

      .check-subject {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .check-status {
        flex: 0 0 auto;
        margin-left: auto;
        font-weight: 500;
        color: #52525b;
        white-space: nowrap;
      }
    }

    &.tone-passed .check-status { color: #15803d; }
    &.tone-failed .check-status { color: #b91c1c; }
    &.tone-inconclusive .check-status { color: #b45309; }
    &.tone-running .check-status { color: #6d28d9; }
    &.tone-muted { opacity: 0.6; }

    .check-items {
      list-style: none;
      margin: 0;
      padding: 0 0 0 16px;
      display: flex;
      flex-direction: column;
      gap: 2px;

      .check-item {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-size: 12px;
        line-height: 1.5;
        color: #3f3f46;

        .check-text {
          flex: 1 1 auto;
          min-width: 0;
          word-break: break-word;
        }

        .check-method {
          flex: 0 0 auto;
          color: #a1a1aa;
          white-space: nowrap;
        }
      }
    }
  }

  .check-result {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: $uniform-gap;
    padding-left: 16px;

    .check-verdict {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 12px;
      line-height: 1.5;
      color: #52525b;

      .check-index {
        line-height: 18px;
      }

      .verdict-icon {
        flex: 0 0 auto;
        font-size: 15px;
        line-height: 18px;
        color: #a1a1aa;
      }

      &.passed .verdict-icon { color: #16a34a; }
      &.failed .verdict-icon { color: #dc2626; }
      &.inconclusive .verdict-icon { color: #d97706; }
      &.superseded, &.unchecked { color: #a1a1aa; }

      .verdict-body {
        flex: 1 1 auto;
        min-width: 0;
        word-break: break-word;
      }

      .verdict-suggestion {
        display: block;
        color: #1d4ed8;
      }
    }

    .check-note {
      font-size: 12px;
      line-height: 1.5;
      color: #71717a;
      padding-left: 22px;
      word-break: break-word;
    }
  }
}

@media (min-width: 1151px) {
  @container stream-panel (max-width: 660px) {
    .agent-stream-container .stream-floating-toolbar {
      .model-info-chip {
        padding: 0 9px;

        .model-label {
          display: none;
        }
      }

      .btn-screen-recording {
        padding: 0 9px;
        gap: 0;

        .btn-text {
          display: none;
        }
      }
    }
  }
}

@media (max-width: 1150px) {
  @container stream-panel (max-width: 900px) {
    .agent-stream-container .vscode-nav-header .vscode-tab-btn {
      padding: 0 9px;
      gap: 0;

      .tab-label {
        display: none;
      }
    }
  }
}

/* ========================================================================= */
/* Floating Dropdown Popover Menu (Angular CDK Connected Overlay Top Layer)   */
/* ========================================================================= */
/* Floating Dropdown Popover Menu */
.vscode-dropdown-menu {
  position: relative;
  width: 360px;
  box-sizing: border-box;
  max-width: calc(100vw - 24px);
  max-height: 480px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 16px 40px -4px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
  z-index: 100;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: dropdownFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);

  .popover-title-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;

    .material-symbols-outlined {
      font-size: 18px;
      color: #2563eb;
    }
  }

  /* Run info popover: elapsed, tokens, context share, Pro tuning */
  &.run-info-dropdown {
    width: 288px;
    gap: 0;
    padding: 12px 14px 10px;

    .run-info-header {
      display: flex;
      align-items: center;
      gap: 7px;
      padding-bottom: 9px;
      border-bottom: 1px solid #e2e8f0;

      .material-symbols-outlined {
        font-size: 18px;
        color: #64748b;

        &.is-pro {
          color: #2563eb;
        }
      }

      .run-info-title {
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
      }

      .run-info-model {
        margin-left: auto;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace;
        font-size: 10.5px;
        color: #94a3b8;
      }
    }

    .run-info-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 0;
      border-bottom: 1px solid #f1f5f9;

      &:last-child {
        border-bottom: none;
      }

      &.is-stacked {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
      }
    }

    .run-info-line {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }

    .run-info-label {
      font-size: 12px;
      font-weight: 500;
      color: #64748b;
      white-space: nowrap;
    }

    .run-info-value {
      font-size: 12.5px;
      font-weight: 600;
      color: #0f172a;
      text-align: right;
      font-variant-numeric: tabular-nums;

      &.is-muted {
        color: #cbd5e1;
        font-weight: 500;
      }
    }

    .run-info-sub {
      display: block;
      margin-top: 2px;
      font-size: 11px;
      font-weight: 400;
      color: #94a3b8;
    }

    .run-info-sub-inline {
      margin-left: 3px;
      font-size: 11px;
      font-weight: 400;
      color: #94a3b8;
    }

    .run-info-meter {
      height: 4px;
      margin-top: 7px;
      border-radius: 2px;
      background: #e2e8f0;
      overflow: hidden;

      .run-info-meter-fill {
        height: 100%;
        border-radius: 2px;
        background: #2563eb;
        transition: width 0.3s ease;
      }

      &.is-high .run-info-meter-fill {
        background: #f59e0b;
      }

      &.is-critical .run-info-meter-fill {
        background: #ef4444;
      }
    }

    .run-info-note {
      padding-top: 9px;
      font-size: 11.5px;
      color: #94a3b8;
    }
  }

  &.notes-dropdown {
    width: 380px;
    max-height: 520px;

    .notes-selector-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 4px;

      .notes-selector-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;

        .note-selector-pill {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          padding: 4px 10px;
          border: 1px solid #e2e8f0;
          background: #ffffff;
          border-radius: 16px;
          font-size: 11.5px;
          font-weight: 500;
          color: #475569;
          cursor: pointer;
          transition: all 0.15s ease;

          .pill-icon {
            font-size: 14px;
          }

          &:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
            color: #1e293b;
          }

          &.active {
            background: #eff6ff;
            border-color: #bfdbfe;
            color: #1d4ed8;
            font-weight: 600;
          }
        }
      }
    }

    .dropdown-notes-content {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 4px 2px;

      .note-title {
        font-size: 13.5px;
        font-weight: 700;
        color: #1f1f1f;
        margin: 0 0 4px 0;
        font-family: 'Google Sans', 'Google Sans Text', 'Inter', sans-serif;
      }

      .code-segment {
        font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace;
        background-color: #f1f3f4;
        color: #1967d2;
        padding: 1px 5px;
        border-radius: 4px;
        font-size: 12px;
        margin: 0 2px;
        word-break: break-all;
      }

      .milestones-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .milestone-block {
        display: flex;
        flex-direction: column;

        &.checked {
          .milestone-title-row {
            .milestone-status-icon.checked {
              opacity: 0.7;
            }
            .milestone-text {
              color: #a1a1aa;
            }
          }
        }

        .milestone-title-row {
          display: flex;
          align-items: flex-start;
          gap: 8px;

          .milestone-status-icon {
            font-size: 18px;
            user-select: none;
            margin-top: 2px;
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;

            &.checked, &.progress {
              color: #1a73e8;
            }
            &.unchecked {
              color: #cbd5e1;
            }
          }

          .milestone-text {
            font-family: 'Google Sans', 'Google Sans Text', 'Inter', sans-serif;
            color: #1f1f1f;
            font-size: 13px;
            line-height: 1.5;
            word-break: break-word;
            flex: 1;
          }
        }

        .milestone-substeps {
          margin-top: 4px;
          display: flex;
          flex-direction: column;
          gap: 5px;
          padding-left: 26px;

          .substep-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-family: 'Google Sans', 'Google Sans Text', 'Inter', sans-serif;
            color: #1f1f1f;
            font-size: 12.5px;
            line-height: 1.5;

            &.checked {
              color: #a1a1aa;
              .check-icon.checked {
                opacity: 0.7;
              }
            }

            &.verify {
              color: #334155;
              gap: 8px;
              align-items: flex-start;

              .verify-badge {
                flex-shrink: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-family: 'Google Sans Text', 'Inter', -apple-system, sans-serif;
                font-size: 10.5px;
                font-weight: 550;
                line-height: 1.2;
                letter-spacing: 0.2px;
                text-transform: lowercase;
                color: #475569;
                background: #f1f5f9;
                border: 1px solid #e2e8f0;
                border-radius: 4px;
                padding: 1.5px 6px;
                margin-top: 1.5px;
                user-select: none;

                &.assert {
                  color: #0369a1;
                  background: #f0f9ff;
                  border-color: #e0f2fe;
                }
              }

              .line-text {
                color: #334155;
                font-size: 12.5px;
                line-height: 1.5;
              }
            }

            &.finding {
              color: #92400e;
              gap: 8px;
              align-items: flex-start;

              .finding-badge {
                flex-shrink: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-family: 'Google Sans Text', 'Inter', -apple-system, sans-serif;
                font-size: 10.5px;
                font-weight: 550;
                line-height: 1.2;
                letter-spacing: 0.2px;
                text-transform: lowercase;
                color: #b45309;
                background: #fef3c7;
                border: 1px solid #fde68a;
                border-radius: 4px;
                padding: 1.5px 6px;
                margin-top: 1.5px;
                user-select: none;
              }

              .line-text {
                color: #92400e;
                font-size: 12.5px;
                line-height: 1.5;
              }
            }

            .check-icon {
              font-size: 16px;
              user-select: none;
              margin-top: 2px;
              font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;

              &.checked, &.progress {
                color: #1a73e8;
              }
              &.unchecked {
                color: #cbd5e1;
              }
            }

            .bullet {
              color: #9ca3af;
              font-weight: bold;
              user-select: none;
            }

            .line-text {
              word-break: break-word;
              color: inherit;
            }
          }
        }

        .milestone-checks-container {
          margin-top: 6px;
          padding-left: 26px;
          display: flex;
          flex-direction: column;
          gap: 6px;
        }
      }

      .verification-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 7px 10px;
        display: flex;
        flex-direction: column;
        gap: 3px;

        &.standalone {
          margin-top: 6px;
          margin-bottom: 6px;
        }

        .card-header {
          display: flex;
          align-items: center;

          .card-tag {
            font-family: 'Google Sans Text', 'Inter', -apple-system, sans-serif;
            font-size: 9.5px;
            font-weight: 600;
            line-height: 1;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            color: #64748b;

            &.assert {
              color: #0284c7;
            }
          }
        }

        .card-body {
          font-family: inherit;
          font-size: 12px;
          line-height: 1.5;
          color: #334155;
          word-break: break-word;

          .bold-segment {
            font-weight: 600;
            color: #1e293b;
          }

          .code-segment {
            font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace;
            font-size: 11px;
            background: #f1f5f9;
            color: #0f172a;
            padding: 1px 5px;
            border-radius: 4px;
            border: 1px solid #e2e8f0;
          }
        }

        &.finding {
          background: #fffbeb;
          border-color: #fef3c7;

          .card-header .card-tag {
            color: #b45309;
          }

          .card-body {
            color: #92400e;
          }
        }
      }

      .other-lines-container {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px dashed #e2e8f0;

        .md-line {
          display: flex;
          align-items: flex-start;
          gap: 6px;
          font-size: 12.5px;
          color: #334155;
          line-height: 1.5;

          .line-text {
            word-break: break-word;
            color: inherit;
          }
        }
      }
    }
  }

  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
  }

  .dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;

    .dropdown-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;

      .icon-main {
        font-size: 18px;
        color: #2563eb;
      }
    }
  }

  .dropdown-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 2px 2px 2px;

    &.history-label {
      margin-top: 6px;
    }

    .icon-bolt {
      font-size: 15px;
      color: #d97706;
    }
    .icon-history {
      font-size: 15px;
      color: #64748b;
    }
  }

  .dropdown-empty-state {
    padding: 20px 14px;
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    .empty-icon {
      font-size: 22px;
      color: #94a3b8;
    }
  }

  .dropdown-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .dropdown-item-card {
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;

    &:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
      transform: translateY(-1px);

      .item-header .item-header-actions {
        &:has(.btn-delete-card) .item-time,
        &:has(.btn-delete-card) .item-time-divider,
        &:has(.btn-stop-card) .item-time,
        &:has(.btn-stop-card) .item-time-divider {
          opacity: 0;
        }

        .btn-delete-card,
        .btn-stop-card {
          opacity: 1;
          pointer-events: auto;
        }
      }
    }

    &.selected {
      background: #eff6ff;
      border-color: #93c5fd;
      box-shadow: 0 0 0 1px #2563eb;

      .item-goal {
        color: #1e3a8a;
        font-weight: 600;
      }
    }

    &.running {
      border-left: 3.5px solid #2563eb;
    }
    &.paused, &.task_paused { border-left: 3.5px solid #d97706; background: #fffbeb; }
    &.resuming, &.queued { border-left: 3.5px solid #7c3aed; }
    &.failed { border-left: 3.5px solid #dc2626; background: #fff7f7; }
    &.completed { border-left: 3.5px solid #16a34a; }
    &.cancelled, &.interrupted { border-left: 3.5px solid #ea580c; }
    .item-error { color: #b91c1c; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }

    .item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;

      .task-badge {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
        height: 20px;
        line-height: 14px;
        font-size: 11px;
        font-weight: 700;
        padding: 0 5px;
        border-radius: 4px;
        letter-spacing: 0.05em;
        border: 1px solid #e2e8f0;
        background: #fafafa;
        color: #64748b;

        &::before {
          content: '';
          width: 4px;
          height: 4px;
          border-radius: 50%;
          display: inline-block;
          margin-right: 4px;
        }

        &.running {
          background: #fafafa;
          color: #1f1f1f;
          border-color: #1f1f1f;
          &::before {
            background-color: #1f1f1f;
            animation: pulse-black-dot-small 1.5s infinite ease-in-out;
          }
        }
        &.paused {
          background: #fff7ed;
          color: #c2410c;
          border-color: #fdba74;
          &::before { background-color: #f97316; }
        }
        &.task_paused {
          background: #ffedd5;
          color: #9a3412;
          border-color: #fb923c;
          &::before { background-color: #ea580c; }
        }
        &.resuming, &.queued {
          background: #f3e8ff;
          color: #6b21a8;
          border-color: #c4b5fd;
          &::before { background-color: #7c3aed; }
        }
        &.completed {
          background: #dcfce7;
          color: #166534;
          border-color: #86efac;
          &::before {
            background-color: #16a34a;
          }
        }
        &.pending {
          background: #fafafa;
          color: #64748b;
          border-color: #e2e8f0;
          &::before {
            background-color: #94a3b8;
          }
        }
        &.failed {
          background: #fee2e2;
          color: #991b1b;
          border-color: #fca5a5;
          &::before {
            background-color: #ef4444;
          }
        }
        &.cancelled {
          background: #ffedd5;
          color: #9a3412;
          border-color: #fdba74;
          &::before {
            background-color: #ea580c;
          }
        }
        &.interrupted { background: #fef3c7; color: #92400e; border-color: #fbbf24; &::before { background-color: #d97706; } }

        .status-dot {
          display: none;
        }
      }

      .item-header-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        position: relative;
        min-width: 0;
        flex-shrink: 1;
        justify-content: flex-end;

        .item-device {
          display: inline-flex;
          align-items: center;
          gap: 2.5px;
          min-width: 0;
          flex-shrink: 1;
          font-size: 10.5px;
          color: #64748b;
          line-height: 1;
          cursor: default;
          transition: color 0.15s ease, opacity 0.15s ease;

          .device-icon {
            font-size: 12px;
            width: 12px;
            height: 12px;
            line-height: 12px;
            color: #64748b;
            opacity: 0.75;
            flex-shrink: 0;
          }

          .device-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
            font-family: inherit;
            letter-spacing: -0.15px;
          }

          &:hover {
            color: #334155;
            .device-icon {
              color: #334155;
              opacity: 1;
            }
          }
        }

        .item-time-divider {
          font-size: 10px;
          color: #94a3b8;
          line-height: 1;
          user-select: none;
          flex-shrink: 0;
          transition: opacity 0.15s ease;
        }

        .item-time {
          font-size: 11px;
          color: #64748b;
          white-space: nowrap;
          flex-shrink: 0;
          line-height: 1;
          transition: opacity 0.15s ease;
        }

        .btn-delete-card {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 18px;
          height: 18px;
          padding: 0;
          border: none;
          background: transparent;
          border-radius: 3px;
          color: #94a3b8;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          pointer-events: none;
          transition: all 0.15s ease;

          .material-symbols-outlined {
            font-size: 13px;
            line-height: 1;
          }

          &:hover {
            color: #ef4444;
            background: #fee2e2;
          }
        }

        .btn-stop-card {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 18px;
          height: 18px;
          padding: 0;
          border: none;
          background: transparent;
          border-radius: 3px;
          color: #ef4444;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          pointer-events: none;
          transition: all 0.15s ease;

          .material-symbols-outlined {
            font-size: 14px;
            line-height: 1;
          }

          &:hover {
            color: #dc2626;
            background: #fee2e2;
            transform: translateY(-50%) scale(1.1);
          }
        }
      }
    }

    .item-goal {
      font-size: 12.5px;
      color: #334155;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .item-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-size: 10.5px;
      color: #94a3b8;

      .item-id {
        font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace;
        font-size: 10.5px;
        color: #94a3b8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1;
        transition: color 0.15s ease;

        &:hover {
          color: #475569;
        }
      }

      .item-date {
        flex-shrink: 0;
      }
    }
  }

  .dropdown-note-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #334155;
    transition: background 0.15s ease;

    .note-icon {
      font-size: 18px;
      color: #64748b;
    }

    .note-key-text {
      flex: 1;
      font-weight: 500;
    }

    .check-icon {
      font-size: 18px;
      color: #2563eb;
    }

    &:hover {
      background: #f1f5f9;
      color: #0f172a;
    }

    &.selected {
      background: #eff6ff;
      color: #2563eb;
      font-weight: 600;

      .note-icon {
        color: #2563eb;
      }
    }
  }
}
.guidance-step-note, .guidance-queue-item {
  padding: 10px 13px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1e3a8a;
  line-height: 1.6;
  overflow-wrap: anywhere;
  .guidance-step-title { display: flex; align-items: center; gap: 6px; font-weight: 650; }
  .material-symbols-outlined { font-size: 17px; }
  p { margin: 5px 0; white-space: pre-wrap; color: #1e293b; }
  small { color: #475569; }
}
.guidance-queue { display: grid; gap: 8px; padding: 12px 16px; }
.guidance-queue-item strong { font-size: 12px; }
.session-failure-summary {
  margin: 12px 16px 28px;
  padding: 12px 14px;
  border: 1px solid #fecdd3;
  border-radius: 10px;
  background: #fff7f8;
  color: #881337;
  strong { font-size: 13px; }
  p { margin: 6px 0 10px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
  button { border: 0; background: transparent; padding: 0; color: #be123c; font: inherit; font-weight: 600; cursor: pointer; }
}
:host ::ng-deep .report-markdown-body {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: normal;
  > div { margin: 3px 0; }
  h1, h2, h3 { margin: 12px 0 6px; font-size: 14px; color: #0f172a; }
  ul, ol { padding-left: 22px; margin: 8px 0; }
  li { margin: 4px 0; }
  pre { overflow: auto; white-space: pre-wrap; padding: 10px; border-radius: 7px; background: #e2e8f0; }
  table { width: 100%; border-collapse: collapse; }
  th, td { padding: 7px 9px; border: 1px solid #cbd5e1; text-align: left; vertical-align: top; }
  th { background: #dbeafe; }
  .md-para-gap { height: 8px; }
}