.llm-request-log {
  display: flex;
  height: 100%;
  gap: 0px;

  .request-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 100%;
    padding:20px;
  }

  .request-item {
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      background: rgba(74, 158, 255, 0.05);
      border-color: rgba(74, 158, 255, 0.2);
    }

    &.selected {
      background: rgba(74, 158, 255, 0.1);
      border-color: var(--primary);
    }

    &.pending {
      border-left: 4px solid var(--warning);
    }

    &.complete {
      border-left: 4px solid var(--success);
    }

    &.error {
      border-left: 4px solid var(--error);
    }
  }

  .request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
  }

  .request-meta {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .status-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;

    &.pending {
      background: rgba(255, 193, 7, 0.2);
      color: var(--warning);
    }

    &.complete {
      background: rgba(40, 167, 69, 0.2);
      color: var(--success);
    }

    &.error {
      background: rgba(220, 53, 69, 0.2);
      color: var(--error);
    }
  }

  .request-model {
    font-weight: 600;
    color: var(--primary);
  }

  .request-time {
    color: var(--text-secondary);
  }

  .request-preview {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .request-stats {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;

    span {
      background: rgba(255, 255, 255, 0.05);
      padding: 2px 6px;
      border-radius: 3px;
      border: 1px solid var(--border);
    }
  }

  .request-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }

  .request-tag {
    background: rgba(138, 43, 226, 0.15);
    color: #ba6dff;
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;

    &:hover {
      background: rgba(138, 43, 226, 0.25);
      border-color: rgba(138, 43, 226, 0.5);
      transform: translateY(-1px);
    }
  }

  .empty-state {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px;
    font-size: 14px;
  }

  .request-details {
    flex: 1;
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 20px 20px 20px 0;
  }

  .details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border-glass);

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
    }

    .close-button {
      background: none;
      border: none;
      font-size: 24px;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: all 0.2s;

      &:hover {
        background: var(--surface);
        color: var(--text);
      }
    }
  }

  .details-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-glass);
    padding: 0 16px;
  }

  .tab-button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 16px;
    transition: all 0.2s ease;
    border-radius: 0;

    &:hover {
      color: var(--text-primary);
      background: rgba(255, 255, 255, 0.02);
    }

    &.active {
      color: var(--accent-primary);
      border-bottom-color: var(--accent-primary);
    }

    &::before {
      display: none !important;
    }
  }

  .details-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
  }

  .detail-section {
    margin-bottom: 24px;

    h4 {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 12px;
      color: var(--text-secondary);
    }
  }

  .metadata-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    font-size: 13px;

    & > div {
      padding: 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 4px;
    }

    strong {
      color: var(--text-secondary);
    }
  }

  .metadata-tags {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    
    .request-tags {
      margin-left: 8px;
    }
  }

  .message {
    margin-bottom: 12px;
    
    .message-role {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }

    .message-content, .response-content {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 12px;
      font-size: 13px;
      font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
      white-space: pre-wrap;
      word-break: break-word;
      line-height: 1.5;
      overflow-y: auto;

      &.error {
        background: rgba(220, 53, 69, 0.1);
        border-color: var(--error);
        color: var(--error);
      }
    }

    &.user .message-role { color: var(--primary); }
    &.assistant .message-role { color: var(--success); }
    &.system .message-role { color: var(--warning); }
  }

  // Full height response content in tabs
  .tab-content {
    .response-content {
      flex: 1;
      max-height: none;
      white-space: pre-wrap;
      word-break: break-word;
    }
  }


  .usage-stats {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-secondary);

    span {
      background: var(--surface);
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px solid var(--border);
    }
  }
}